第4章(网页制作Dr).ppt

1、Dreamweaver 与网络课件,4.1 概述 4.2 认识Dreamweaver 工作界面 4.3 建立教学站点 4.4 编辑教学网页 4.5 网页的布局方法 4.6 表单 4.7 使用时间轴 4.8 教学站点的发布,4.1 概 述,Dreamweaver 是目前最新的所见即所得的网页编辑工具，具有功能强大、界面简洁、简单实用等特点，它除了是一个优秀的网页设计与编辑环境之外，还是一个开放性的集成环境，例如，它可以从Access或Excel中导入表格，也可以直接使用Shockwave动画、JavaScript函数、Applet、ActiveX控件等对象，同时由于拥有Flash软件和Firew

2、orks软件强力支持，使得它必然成为最好的网页制作软件，也自然是我们制作网络课件的首选软件。,4.2 认识Dreamweaver 工作界面,图4-1 Dreamweaver 工作界面,1. 工具栏,图4-2 工具栏,2. 状态栏,图4-3 状态栏,3. 对象面板,图4-4 对象面板菜单,4. 【属性】面板,图4-5 【属性】面板,5. 【启动器】面板,图4-6 【启动器】面板,图4-7 【站点虚拟课堂】窗口,图4-8 【站点虚拟课堂的资料】面板,图4-9 【站点未命名站点1的HTML样式】面板,图4-10 【CSS样式】面板,图4-11 【行为】面板,图4-12 【历史记录】面板,图4-13

3、【index.htm代码检查器】面板,4.3 建立教学站点,4.3.1 规划站点,1) 考虑站点的服务对象，确定主题内容，即与同类学科的站点相比，我们是侧重课外辅导，还是侧重考试指南？这就是主题问题，只有确定了主题，才能有的放矢地进行工作。 2) 确定了站点主题以后，需要进行站点结构的规划，同一个网站要介绍三个学科的内容，如何组织才能脉络清晰，这是动手制作站点之前必须做好的一项工作。,3) 当确定了站点主题、组织结构以后，接下来的工作就是设计网页版面。 4) 以上三项工作完成以后，接下来需要收集与整理站点素材，这是一项费时费力的工作，需要精心地组织与筹备。 5) 准备好素材后，需要确定站点在本

4、地计算机上的存放位置。通常情况下，首先根据站点结构在本地计算机上建立一个站点文件夹，如在C盘根目录下建立一个文件夹作为站点文件夹，命名为“教学站点”，用于存放站点的所有文件。在站点文件夹下分别建立用于存放站点文件和素材的子文件夹，如用于存放图像、动画、应用程序、插件等的文件夹，文件夹的命名最好与所存放的内容相关，以便查找。,4.3.2 创建站点的基本结构,1. 创建站点,图4-14 【未命名站点1的站点定义为】对话框,图4-15 建立的站点,2. 设置主页,图4-16 新建的网页,图4-17 【站点地图布局】选项,3. 添加文件夹,图4-18 新建的站点文件夹,图4-19 新建的网页,4.3.

5、3 制作教学网页,当按照规划完成了站点结构的创建以后，接下来的工作就是制作教学网页了。这是非常重要的一个环节，是实施网络教学的载体，也就是说，网络教学的主要传播介质是网页。因此，这一工作环节要强调两个问题：一是合理分配授课内容，这属于教学计划与教学安排的范畴；二是提高网页制作水平，这属于网页制作技术问题。制作教学网页时，既要合理安排授课内容，又要把网页做得美观、漂亮，这就是制作教学网页要遵循的基本原则。,4.4 编辑教学网页,4.4.1 文本的编辑,其基本操作步骤如下： 1) 在编辑窗口中输入所需的文本。如需换行分段，可以按下回键；如需换行但不分段，可以在按住Shift键的同时按下回车键。 2

6、) 选择要编辑的文本。 3) 单击菜单栏中的【窗口】/【属性】命令，打开【属性】面板，如图4-20所示。 4) 在【属性】面板中设置文本的相关属性。,图4-20 【属性】面板,图4-21 【编辑字体列表】对话框,4.4.2 应用图像,1. 插入图像,图4-22 【选择图像源】对话框,图4-23 信息提示框,图4-24 在网页中插入图像,2. 设置图像属性,图4-25 【属性】面板,3. 为图像建立超链接,图4-26 建立的热点,图4-27 【属性】面板,4. 插入翻转图像,图4-28 【插入鼠标经过图象】对话框,图4-29 翻转图像效果,5. 创建导航条,图4-30 【插入导航条】对话框,图4

7、-31 创建的导航条,4.4.3 插入Flash动画与按钮,图4-32 插入Flash动画图标,图4-33 【参数】对话框,图4-34 【插入Flash按钮】对话框,4.5 网页的布局方法,4.5.1 使用表格,1. 插入表格,图4-35 【插入表格】对话框,图4-36 在网页中插入表格,2. 表格的编辑操作,图4-37 合并前后的单元格对比,图4-38 【拆分单元格】对话框,图4-39 拆分前后的单元格对比,插入或删除行或列的操作步骤如下：,图4-40 插入行或列快捷菜单,图4-41【插入行或列】对话框,3. 设置表格的属性,图4-42 【属性】面板,4.5.2 使用框架,图4-43 Dre

8、amweaver 4的帮助页面,1. 建立框架,图4-44 【框架】对象面板,图4-45 建立的框架网页,自定义框架，即重新设计框架的结构，基本的操作步骤如下：,图4-46 【框架】命令子菜单,2. 编辑框架,图4-47 【框架】面板,图4-48 【框架页】子菜单,3. 设置框架集和框架的属性,图4-49 【属性】面板,选择了框架后的【属性】面板。,图4-50 【属性】面板,4. 保存框架,保存框架的操作步骤如下：,图4-51 【另存为】对话框,5. 使用超链接,1) 选择框架中要建立超链接的文本或其它对象。 2) 在【属性】面板的【链接】文本框中输入要链接的网页的URL地址，也可以利用和图标

9、选择网页文件。 3) 在【属性】面板的【目标】选项中选择用于显示链接网页的目标窗口或框架。,6. 在不支持框架的浏览器中显示框架页面,图4-52 提示内容,4.5.3 使用层,1. 创建层 在网页中创建层的操作比较简单，只需单击【标准】对象面板中的 图标，然后按住鼠标左键（此时光标变为“+”形状）在文档窗口中拖曳，即可绘制任意大小的层，文档窗口中将显示一个黄色的层标记 。如果按住 图标将其拖曳到文档窗口中，或者单击菜单栏中的【插入】/【层】命令，也可以在文档窗口中创建层。另外，将光标定位在层中，可以插入嵌套层。,2. 操作层,图4-53 激活层,图4-54 选择层,图4-55 【网格】子菜单,

10、图4-56 【网格设置】对话框,3. 设置层的属性,图4-57 【属性】面板,4. 层的管理,图4-58 【层】面板,5. 将层转换为表格,图4-59 【转换层为表格】对话框,图4-60 将层转换为表格,创建表单的方法,图4-61 【表单】对象面板,4.6 表 单,图4-62 表单域,图4-63 表单域属性面板,图4-64 插入的文本域,图4-65 文本域表单属性面板,图4-66 显示在浏览器中的表单,4.7 使用时间轴,1. 认识时间轴,图4-67 【时间轴】面板,2. 创建时间轴动画,图4-68 时间轴动画,图4-69 调整动画条的长度,图4-70 层“1”的运动路径,图4-71 行为通道

11、的下拉菜单,图4-72 选择【播放声音】命令,图4-73 【播放声音】对话框,4.8 教学站点的发布,4.8.1 站点的测试,图4-74 【检查目标浏览器】对话框,图4-75 检查的结果,2. 测试超链接的有效性,图4-76 【链接检查器指南】对话框,3. 在浏览器中测试网页的正确性,测试网页的一个非常有效的方法是在浏览器中预览网页，这种方法可以贯穿于整个网页设计和创建过程中，通过它可以及时发现网页中存在的错误，避免重复出现相同的错误，也有利于及时纠正网页中的不妥之处。 在Dreamweaver中，可以在任何时间通过目标浏览器预览网页，而不必首先保存文档，这时浏览器中的所有功能都将发挥作用，包括JavaScript、相对链接、绝对链接、ActiveX控件等。使用这种方法测试网页的最大好处是可以及时地改正网页中存在的错误。,4.8.2 站点的发布,1. 定义远程站点,图4-77 站点窗口,图4-78 【定义站点】对话框,图4-79 【chafer的站点定义为】对话框,图4-80 【chafer的站点定义为】对话框,2. 连接服务器,1) 在站