第4讲 网络技术教育应用.ppt

第4章 网络技术教育应用 谭金波 yttjb@163.com 主要内容 网络教育的技术基础 网络教学平台与网络课程 网络教育资源及利用 网络教育应用模式及设计 4.1网络教育的技术基础 4.1网络教育的技术基础 4.1.1 网站设计基础 4.1.2 动态网页技术 4.1.3 流媒体技术及应用 4.1.4 虚拟现实技术及应用 4.1.5 Web 2.0技术 常用的网页制作工具 图形图像制作工具：Photoshop、Fireworks、Freehand、CorelDraw。 网页编辑工具：记事本、Dreamweaver、FrontPage、Visual Interdev。 网页动画工具：Flash、Swish、Ulead Gif Animator。 网页开发语言：ASP（ASP.NET）、JSP、PHP、XML、Perl、CGI、JavaScript、VBScript等。 网页上传工具：CuteFtp、LeapFtp、FlashFTP 4.1.1 Dreamweaver制作网页 熟悉Dreamweaver8环境 创建站点 创建网页文档 使用表格排版内容 多媒体网页的制作 超链接的创建 框架网页制作 创建站点 创建本地文件夹 定义本地站点 文件和文件夹的命名 不能使用中文 最好使用小写字母 不能使用特殊字符，如~、！、@、#、%、^、、*等 不推荐使用拼音命名 合理使用下滑线 网站首页命名：index.htm 创建网页文档 新建页面 设置页面属性 保存页面 预览页面 打开文档 设置页面属性 菜单“修改”|“页面属性”或右键“页面属性” 更改页面标题 设置背景图像或颜色 注：背景图像会覆盖背景颜色 设置文本或链接的颜色 设置页面边距 使用表格排版内容 数据存放 用来显示数据内容 页面内容排版 实现网页的精确排版和定位 使用表格 选择表格 选择对象是设置对象属性的前提 选择整个表格：先将插入点置于表格中，1.菜单“修改”|“表格”|“选择表格”，2.单击标签栏中table标签，3.单击表格边缘 选择行或列：把光标置于目标行的左边缘或目标列的上边缘，单击黑箭头 选择单元格：先将光标置于单元格中，单击标签栏中td标签或菜单“编辑”|“全选” 选择多个单元格：按住Shift键，选择多个相连的单元格；按住Ctrl键，选择多个不相连单元格 练习：插入表格 表格行数4，列数1 表格宽度800 第一行单元格插入图片 第二行单元格插入嵌套表格 1行，10列，边框0，单元格间距0，单元格填充0 嵌套表格添加导航文本 第三行单元格插入文本 页面中的文本 插入及编辑文本：采用直接输入或粘贴 插入特殊字符： “插入”面板/ “HTML”/“特殊字符”分类 换行：【Shift+回车】（代码为“br ”）， 段落：【回车】（代码为“p 字符串/p”）。 空格： 【Ctrl+Shift+Space】（对应代码为“nbsp”) 在确保输入法处于“全角”模式时输入空格 水平线：用于分开页面中的不同内容 设置文本属性 设置文本属性前先选择文本 文字格式/样式 文字字体与大小 文字颜色 其他属性设置：粗斜体，对齐方式 项目列表\编号列表…… 练习：文本编辑 文本标题：黑色，粗体，大小12pt 正文文本：黑色，大小9pt 正文首行缩进4字符 正文段内换行：一、二内部 正文段落换行：两大段之间 行间距为2（CSS样式表） 多媒体网页的制作 插入图像 浏览器支持的图片格式：JPEG、 GIF、PNG。 必须先将插入的图像文件拷贝到本地站点文件夹内，或者在插入图像的过程中系统提示将图像文件拷贝到本地站点文件夹内，否则浏览器无法显示。 本地文件夹内的图像文件名避免使用中文，否则浏览器无法显示。 练习：图片编辑 插入背景图片 插入页面图片 设置图片属性 改变图像大小：宽200，长200 设置图像与文字对齐方式：左对齐 图像边距：垂直边距20，水平边距20 插入Flash影片 先把Flash影片拷贝到站点目录下，然后插入 设置Flash影片属性 宽、高和重设大小 文件、源文件、编辑 循环、自动播放（否则IE中右键play） 品质－速度与外观的取舍；比例－是否考虑纵横比 背景颜色：设置开始和结束时的背景 Flash文本对象/按钮操作 添加背景音乐 插入\媒体\插件 切换到代码窗口，在代码body和/body之间添加embed标记。 embed src=“sword.mid” hidden=true autostart=true loop=true 插入视频文件 视频文件采用流媒体技术 流媒体技术是把连续的影像和声音信息经过压缩处理后放在网站服务器，让用户一边下载一边观看、收听。 流媒体产品： Real Media :Real Player ，格式.rm, .rmvb Win