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

《第4章(网页制作Dr).ppt》由会员分享，可在线阅读，更多相关《第4章(网页制作Dr).ppt（88页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Dreamweaver 与网络课件 Dreamweaver 与网络课件与网络课件 4.1 概述概述4.2 认识认识Dreamweaver 工作界面工作界面4.3 建立教学站点建立教学站点 4.4 编辑教学网页编辑教学网页 4.5 网页的布局方法网页的布局方法 4.6 表单表单 4.7 使用时间轴使用时间轴 4.8 教学站点的发布教学站点的发布 Dreamweaver 与网络课件 4.1 概概 述述 Dreamweaver 是目前最新的所见即所得的网页编辑工具，具有功能强大、界面简洁、简单实用等特点，它除了是一个优秀的网页设计与编辑环境之外，还是一个开放性的集成环境，例如，它可以从Access或

2、Excel中导入表格，也可以直接使用Shockwave动画、JavaScript函数、Applet、ActiveX控件等对象，同时由于拥有Flash软件和Fireworks软件强力支持，使得它必然成为最好的网页制作软件，也自然是我们制作网络课件的首选软件。Dreamweaver 与网络课件 4.2 认识认识Dreamweaver 工作界面工作界面 图4-1 Dreamweaver 工作界面 Dreamweaver 与网络课件 1.工具栏工具栏 图4-2 工具栏 Dreamweaver 与网络课件 2.状态栏状态栏 图4-3 状态栏 Dreamweaver 与网络课件 3.对象面板对象面板 图4

3、-4 对象面板菜单 Dreamweaver 与网络课件 4.【属性属性】面板面板 图4-5【属性】面板 Dreamweaver 与网络课件 5.【启动器启动器】面板面板 图4-6【启动器】面板 Dreamweaver 与网络课件 图4-7【站点虚拟课堂】窗口 Dreamweaver 与网络课件 图4-8【站点虚拟课堂的资料】面板 Dreamweaver 与网络课件 图4-9【站点未命名站点1的HTML样式】面板 Dreamweaver 与网络课件 图4-10【CSS样式】面板 Dreamweaver 与网络课件 图4-11【行为】面板 Dreamweaver 与网络课件 图4-12【历史记录】

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

5、项工作完成以后，接下来需要收集与整理站点素材，这是一项费时费力的工作，需要精心地组织与筹备。5)准备好素材后，需要确定站点在本地计算机上的存放位置。通常情况下，首先根据站点结构在本地计算机上建立一个站点文件夹，如在C盘根目录下建立一个文件夹作为站点文件夹，命名为“教学站点”，用于存放站点的所有文件。在站点文件夹下分别建立用于存放站点文件和素材的子文件夹，如用于存放图像、动画、应用程序、插件等的文件夹，文件夹的命名最好与所存放的内容相关，以便查找。Dreamweaver 与网络课件 4.3.2 创建站点的基本结构创建站点的基本结构 1.创建站点创建站点 图4-14【未命名站点1的站点定义为】对话

6、框 Dreamweaver 与网络课件 图4-15 建立的站点 Dreamweaver 与网络课件 2.设置主页设置主页 图4-16 新建的网页 Dreamweaver 与网络课件 图4-17【站点地图布局】选项 Dreamweaver 与网络课件 3.添加文件夹添加文件夹 图4-18 新建的站点文件夹 Dreamweaver 与网络课件 图4-19 新建的网页 Dreamweaver 与网络课件 4.3.3 制作教学网页制作教学网页 当按照规划完成了站点结构的创建以后，接下来的工作就是制作教学网页了。这是非常重要的一个环节，是实施网络教学的载体，也就是说，网络教学的主要传播介质是网页。因此，

7、这一工作环节要强调两个问题：一是合理分配授课内容，这属于教学计划与教学安排的范畴；二是提高网页制作水平，这属于网页制作技术问题。制作教学网页时，既要合理安排授课内容，又要把网页做得美观、漂亮，这就是制作教学网页要遵循的基本原则。Dreamweaver 与网络课件 4.4 编辑教学网页编辑教学网页 4.4.1 文本的编辑文本的编辑 其基本操作步骤如下：1)在编辑窗口中输入所需的文本。如需换行分段，可以按下回键；如需换行但不分段，可以在按住Shift键的同时按下回车键。2)选择要编辑的文本。3)单击菜单栏中的【窗口】/【属性】命令，打开【属性】面板，如图4-20所示。4)在【属性】面板中设置文本的

8、相关属性。Dreamweaver 与网络课件 图4-20【属性】面板Dreamweaver 与网络课件 图4-21【编辑字体列表】对话框 Dreamweaver 与网络课件 4.4.2 应用图像应用图像 1.插入图像插入图像 图4-22【选择图像源】对话框 Dreamweaver 与网络课件 图4-23 信息提示框 Dreamweaver 与网络课件 图4-24 在网页中插入图像 Dreamweaver 与网络课件 2.设置图像属性设置图像属性 图4-25【属性】面板 Dreamweaver 与网络课件 3.为图像建立超链接为图像建立超链接 图4-26 建立的热点 Dreamweaver 与网

9、络课件 图4-27【属性】面板 Dreamweaver 与网络课件 4.插入翻转图像插入翻转图像 图4-28【插入鼠标经过图象】对话框 Dreamweaver 与网络课件 图4-29 翻转图像效果 Dreamweaver 与网络课件 5.创建导航条创建导航条 图4-30【插入导航条】对话框 Dreamweaver 与网络课件 图4-31 创建的导航条 Dreamweaver 与网络课件 4.4.3 插入插入Flash动画与按钮动画与按钮 图4-32 插入Flash动画图标 Dreamweaver 与网络课件 图4-33【参数】对话框 Dreamweaver 与网络课件 图4-34【插入Flas

10、h按钮】对话框 Dreamweaver 与网络课件 4.5 网页的布局方法网页的布局方法 4.5.1 使用表格使用表格 1.插入表格插入表格 图4-35【插入表格】对话框 Dreamweaver 与网络课件 图4-36 在网页中插入表格 Dreamweaver 与网络课件 2.表格的编辑操作表格的编辑操作 图4-37 合并前后的单元格对比 Dreamweaver 与网络课件 图4-38【拆分单元格】对话框 Dreamweaver 与网络课件 图4-39 拆分前后的单元格对比 Dreamweaver 与网络课件 插入或删除行或列的操作步骤如下：图4-40 插入行或列快捷菜单 Dreamweave

11、r 与网络课件 图4-41【插入行或列】对话框 Dreamweaver 与网络课件 3.设置表格的属性设置表格的属性 图4-42【属性】面板 Dreamweaver 与网络课件 4.5.2 使用框架使用框架 图4-43 Dreamweaver 4的帮助页面 Dreamweaver 与网络课件 1.建立框架建立框架 图4-44【框架】对象面板 Dreamweaver 与网络课件 图4-45 建立的框架网页 Dreamweaver 与网络课件 自定义框架，即重新设计框架的结构，基本的操作步骤如下：图4-46【框架】命令子菜单 Dreamweaver 与网络课件 2.编辑框架编辑框架 图4-47【框

12、架】面板 Dreamweaver 与网络课件 图4-48【框架页】子菜单 Dreamweaver 与网络课件 3.设置框架集和框架的属性设置框架集和框架的属性 图4-49【属性】面板 选择了框架后的【属性】面板。图4-50【属性】面板 Dreamweaver 与网络课件 4.保存框架保存框架 保存框架的操作步骤如下：图4-51【另存为】对话框 Dreamweaver 与网络课件 5.使用超链接使用超链接 1)选择框架中要建立超链接的文本或其它对象。2)在【属性】面板的【链接】文本框中输入要链接的网页的URL地址，也可以利用和图标选择网页文件。3)在【属性】面板的【目标】选项中选择用于显示链接网

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

14、作层操作层 图4-53 激活层 Dreamweaver 与网络课件 图4-54 选择层 Dreamweaver 与网络课件 图4-55【网格】子菜单 图4-56【网格设置】对话框 Dreamweaver 与网络课件 3.设置层的属性设置层的属性 图4-57【属性】面板 Dreamweaver 与网络课件 4.层的管理层的管理 图4-58【层】面板 Dreamweaver 与网络课件 5.将层转换为表格将层转换为表格 图4-59【转换层为表格】对话框 Dreamweaver 与网络课件 图4-60 将层转换为表格 Dreamweaver 与网络课件 创建表单的方法创建表单的方法 图4-61【表单

15、】对象面板 4.6 表表 单单Dreamweaver 与网络课件 图4-62 表单域 图4-63 表单域属性面板 Dreamweaver 与网络课件 图4-64 插入的文本域 Dreamweaver 与网络课件 图4-65 文本域表单属性面板 Dreamweaver 与网络课件 图4-66 显示在浏览器中的表单 Dreamweaver 与网络课件 4.7 使用时间轴使用时间轴 1.认识时间轴认识时间轴 图4-67【时间轴】面板 Dreamweaver 与网络课件 2.创建时间轴动画创建时间轴动画 图4-68 时间轴动画 Dreamweaver 与网络课件 图4-69 调整动画条的长度 Drea

16、mweaver 与网络课件 图4-70 层“1”的运动路径 Dreamweaver 与网络课件 图4-71 行为通道的下拉菜单 Dreamweaver 与网络课件 图4-72 选择【播放声音】命令 Dreamweaver 与网络课件 图4-73【播放声音】对话框 Dreamweaver 与网络课件 4.8 教学站点的发布教学站点的发布 4.8.1 站点的测试站点的测试 图4-74【检查目标浏览器】对话框 Dreamweaver 与网络课件 图4-75 检查的结果 Dreamweaver 与网络课件 2.测试超链接的有效性测试超链接的有效性 图4-76【链接检查器指南】对话框 Dreamweav

17、er 与网络课件 3.在浏览器中测试网页的正确性在浏览器中测试网页的正确性 测试网页的一个非常有效的方法是在浏览器中预览网页，这种方法可以贯穿于整个网页设计和创建过程中，通过它可以及时发现网页中存在的错误，避免重复出现相同的错误，也有利于及时纠正网页中的不妥之处。在Dreamweaver中，可以在任何时间通过目标浏览器预览网页，而不必首先保存文档，这时浏览器中的所有功能都将发挥作用，包括JavaScript、相对链接、绝对链接、ActiveX控件等。使用这种方法测试网页的最大好处是可以及时地改正网页中存在的错误。Dreamweaver 与网络课件 4.8.2 站点的发布站点的发布 1.定义远程

18、站点定义远程站点 图4-77 站点窗口 Dreamweaver 与网络课件 图4-78【定义站点】对话框 Dreamweaver 与网络课件 图4-79【chafer的站点定义为】对话框 Dreamweaver 与网络课件 图4-80【chafer的站点定义为】对话框 Dreamweaver 与网络课件 2.连接服务器连接服务器 1)在站点窗口中打开要上传的站点。2)单击工具栏中的按钮，连接远程服务器。3)连接成功以后，在站点窗口的左侧窗格中将显示主机目录，同时按钮中的黑点变为绿点，表明已经连接成功。Dreamweaver 与网络课件 3.上传站点上传站点 本地计算机与远程服务器连接成功以后，就可以发布站点了。在发布站点时，既可以发布整个站点，也可发布局部站点。在站点窗口中选择要发布的文件，单击工具栏上的按钮即可上传站点。