第八章：网页

1、网页制作- 1 -中国海洋大学 焦玲制作 网页制作第八章第八章 网网 页页 制制 作作网页制作- 2 -中国海洋大学 焦玲制作 网页制作基本概念基本概念HTML语言简介语言简介Dreamver的使用的使用网页中插入图片网页中插入图片表格、表单的使用表格、表单的使用框架、图层、时间轴框架、图层、时间轴网页制作- 3 -中国海洋大学 焦玲制作 网页制作基本概念基本概念n网页与主页网页与主页 n网页与网站网页与网站n网页制作工具网页制作工具网页制作- 4 -中国海洋大学 焦玲制作 网页制作万维网中的文件信息被称作页面页面；每一个WWW服务器上存放着大量的页面文件信息http:/ 5 -中国海洋大学

2、焦玲制作 网页制作网页网页主页主页网站网站从从WebWeb站点传过来的站点传过来的第一个网页文件；第一个网页文件；对于主页，只要写上对于主页，只要写上协议名和服务器协议名和服务器的名字就可以的名字就可以把主页传过来了，这是因为把主页传过来了，这是因为WebWeb服务器都有自己服务器都有自己默认的默认的主页名称主页名称；不同的服务器不同的服务器系统默认系统默认的主页名称也不同，常见的的主页名称也不同，常见的有有index.htmindex.htm（index.htmlindex.html）或）或default.htm default.htm （default.htmldefault.html）网

3、页制作工具网页制作工具网页制作- 6 -中国海洋大学 焦玲制作 网页制作网页网页主页主页网站网站网页通常成组出现，并且这组网页网页通常成组出现，并且这组网页之间通过之间通过超链接超链接相互组织成为反映相互组织成为反映某个主题的网站。某个主题的网站。网页制作工具网页制作工具网页制作- 7 -中国海洋大学 焦玲制作 网页制作网页网页主页主页网站网站网页制作工具网页制作工具NOTEPAD纯文本编辑器（记事本）DreamweaverDreamweaverFrontPageFrontPage网页制作- 8 -中国海洋大学 焦玲制作 网页制作必须知道必须知道 浏览器浏览器与与服务器服务器建立连接建立连接发

4、送请求信息发送请求信息关闭连接关闭连接网页制作- 9 -中国海洋大学 焦玲制作 网页制作HTMLHTML语言简介语言简介网页制作- 10 -中国海洋大学 焦玲制作 网页制作网页制作语言网页制作语言-超文本标记语言超文本标记语言HTMLHTML yper ext arkup anguage 欢迎光临无名的主页欢迎光临无名的主页欢迎光临无名的主页欢迎光临无名的主页样样 例例标记需要放在中标记中有很多是成对出现，一头一尾（结束标记前要加“/”）所有标记中的字母不区分大小写通常以“.html”或“htm”为文件后缀标记的书写格式如下： 文件内容/ HTML特点特点网页制作- 11 -中国海洋大学 焦玲

5、制作 网页制作练习：使用练习：使用HTMLHTML编写网页编写网页简单的HTML例子欢迎光临无名的主页这就是我我常去的网站， Yahoo! 网页制作- 12 -中国海洋大学 焦玲制作 网页制作简单的HTML例子欢迎光临无名的主页这就是我我常去的网站， Yahoo! 一个HTML文件总是由（HEAD）和）和（BODY）两部分组成。标记和用来说明本文件是一个HTML文件。HTMLHTML在浏览器中被解释在浏览器中被解释网页制作- 13 -中国海洋大学 焦玲制作 网页制作常用标识说明：常用标识说明： 文本换行：文本换行：指定其后的文本另起一行。：指定其后的文本另起一行。：指定其后的文本另起一段。：指

6、定其后的文本另起一段。 超链接：超链接：和和一对标记一对标记HrefHref中表明被链接的文件或者其他部分中表明被链接的文件或者其他部分 图像插入：图像插入：标记标记SrcSrc中指定嵌入的图像文件中指定嵌入的图像文件网页制作- 14 -中国海洋大学 焦玲制作 网页制作基本概念基本概念HTML语言简介语言简介Dreamver的使用的使用网页中插入图片网页中插入图片表格、表单的使用表格、表单的使用框架、图层、时间轴框架、图层、时间轴网页制作- 15 -中国海洋大学 焦玲制作 网页制作设计：设计：“页面视图”，所见即所得的编辑环境；代码：代码： “源代码图”，直接通过修改HTML标记命令编辑网页；

7、拆分：拆分：代码视图和设计视图同时显示。网页制作- 16 -中国海洋大学 焦玲制作 网页制作 如何建立站点如何建立站点 主页的制作主页的制作 表格的使用表格的使用 图像的插入图像的插入 超链接（图像地图）超链接（图像地图） 创建表单页面创建表单页面 网页布局（框架、层）网页布局（框架、层） CssCss样式样式 时间轴、行为时间轴、行为 脚本语言脚本语言建立建立本地网站文件夹本地网站文件夹，确立网站位置，确立网站位置使用使用Dreamweaber站点站点定义向导定义向导定义定义本地网本地网站站创建网站创建网站文件夹结构文件夹结构使用使用DreamweaverDreamweaver设计网页的设计

8、网页的第一步是建立网站第一步是建立网站举例说明：1. 建立本地网站文件夹，如某盘下创建文件夹建立本地网站文件夹，如某盘下创建文件夹 “bluesky”2. 使用使用Dreamweaver向导建立本地站点向导建立本地站点3. 建立网站文件夹结构：创建建立网站文件夹结构：创建6个文件夹，分别为个文件夹，分别为“jiaoyin”、“pingfanderen”、“tongxinjie”、“xinling”、“wanan”、“yinyue”使用使用DreamweaverDreamweaver建立完网站之后，建立完网站之后，需要进行需要进行主页的主页的设计，设计，设计主页时设计主页时需要注意如下两点：需要

9、注意如下两点：设计网页时，遵循设计网页时，遵循“8秒钟规则秒钟规则”，即减少网页中的即减少网页中的图像大小和数量图像大小和数量设计显示器的设计显示器的分辨率为分辨率为1024*768，作为网页的设计，作为网页的设计标准，即为标准，即为用户浏览的最佳分辨率用户浏览的最佳分辨率网页制作- 20 -中国海洋大学 焦玲制作 网页制作举例说明：主页设计举例说明：主页设计1. 启动启动Dreamweaver8.0，建立一个新的文档，建立一个新的文档页面设置页面设置：在在“页面属性页面属性”窗口，设置窗口，设置上下左右边距上下左右边距为为0像素，标题为像素，标题为“蓝色的天空蓝色的天空”3. 插入并设计表格

10、：插入插入并设计表格：插入4行行3列列的表格，设置表格的表格，设置表格宽度为宽度为1002像素，边框粗细、单元格边距、间距为像素，边框粗细、单元格边距、间距为0，页眉选择两者，页眉选择两者网页制作- 21 -中国海洋大学 焦玲制作 网页制作举例说明：主页设计举例说明：主页设计4、合并单元格：、合并单元格：（1）合并第一列，将其宽度设置为：）合并第一列，将其宽度设置为：491，选择，选择“垂直为顶端垂直为顶端”（2）选中第二列第一个单元格，宽度为）选中第二列第一个单元格，宽度为326，左对齐左对齐，垂直顶端垂直顶端（3）选中第二列第二个单元格，高度为选中第二列第二个单元格，高度为18（4）选中第

11、二列第三个单元格，高度为）选中第二列第三个单元格，高度为208（5）合并第三列的一至三单元格，宽度为）合并第三列的一至三单元格，宽度为185，高度为，高度为450，左对左对齐齐，垂直顶端垂直顶端（6）合并第二列中的合并第二列中的4与第三例中的与第三例中的4单元格，高度为单元格，高度为131网页制作- 22 -中国海洋大学 焦玲制作 网页制作举例说明：主页设计举例说明：主页设计5、插入图片：、插入图片：（1）首先将需要的图片放在站点文件夹中的）首先将需要的图片放在站点文件夹中的Images文件夹中文件夹中（2）依次在相应的单元格中插入图片）依次在相应的单元格中插入图片（3）在）在D单元格设备单元

12、格背景，插入背景图片单元格设备单元格背景，插入背景图片blue5.jpgAblue1blue2B blue3C blue4ED blue5网页制作- 23 -中国海洋大学 焦玲制作 网页制作举例说明：插入图像举例说明：插入图像 图形的插入：图形的插入：执行执行“插入插入|图像图像” 菜单命令菜单命令使用属性面板设置图片属性使用属性面板设置图片属性HTML并不能包含图像，它只是包含图像文件的名称并不能包含图像，它只是包含图像文件的名称和相应的格式代码。和相应的格式代码。网页制作- 24 -中国海洋大学 焦玲制作 网页制作利用图像作为网页背景利用图像作为网页背景： 通过页面属性中的设置通过页面属性

13、中的设置 一般情况下需要插入一般情况下需要插入背景图片背景图片DreamweaverDreamweaver对对中文文件名中文文件名的的兼容性不好兼容性不好，建议网页，建议网页文件名以及图片插入的图片文件名文件名以及图片插入的图片文件名采用西文字符命名采用西文字符命名举例说明：插入图像举例说明：插入图像网页制作- 25 -中国海洋大学 焦玲制作 网页制作网页中插入图像的图像格式：网页中插入图像的图像格式： GIF JPEG PNG （图形交换格式）（联合图像专家组）（可移植网络图形）（图形交换格式）（联合图像专家组）（可移植网络图形）可用颜色数可用颜色数 16777216 16777216 42

14、94967296每幅图像的颜色每幅图像的颜色 压缩压缩 无损无损 透明透明 否否 半透明半透明 否否 否否 动画动画 否否 否否GGR RB B举例说明：插入图像举例说明：插入图像网页制作- 26 -中国海洋大学 焦玲制作 网页制作.PNP文件举例.GIF文件举例.JPG文件举例魔镜魔镜告诉我魔镜魔镜告诉我网页中常用图片文件网页中常用图片文件网页制作- 27 -中国海洋大学 焦玲制作 网页制作 GIF格式图像举例（ raphics nterchange ormat）是作为一个跨平台图形标准而开发的、与硬件无关的8位彩色图形格式，也是在因特网上使用最早、应用最广泛的图像格式，包含87A和89A两

15、种格式。2cm2cm2K4cm3.6cm8K5cm14cm47K256色的调色板导致色滩出现，色彩层次感差。详见精彩详见精彩GIF动画动画 网页制作- 28 -中国海洋大学 焦玲制作 网页制作 JPEG格式图像举例格式（简称）是一种流行的图像文件压缩格式，通常，JPEG可将图像文件的长度缩短成原来的50%到2%不等。在保证对图像质量的前提下，获得较高的压缩比。摄影图像通常采用JPEG格式存储和显示，大多数数字相机拍摄的图像都经过了JPEG压缩处理。压缩比 15cm20cm 43K压缩比 8cm6cm116K网页制作- 29 -中国海洋大学 焦玲制作 网页制作举例说明：表格设计举例说明：表格设计

16、 表格的插入：表格的插入：执行执行“插入插入|表格表格” 菜单命令菜单命令使用属性面板设置表格属性使用属性面板设置表格属性网页制作- 30 -中国海洋大学 焦玲制作 网页制作举例说明：主页的进一步设计举例说明：主页的进一步设计 ：在网页中嵌入网页，即在网页中嵌入网页，即iframe标签标签的使用的使用在页面中在页面中插入插入Flash动画动画使用与透明设置使用与透明设置图片热区划分图片热区划分以及利用热点链接的方法以及利用热点链接的方法网页制作- 31 -中国海洋大学 焦玲制作 网页制作举例1：1、在主页中嵌入网页：、在主页中嵌入网页：（1）在）在E单元格嵌入网页单元格嵌入网页frame.ht

17、ml。将。将E单元格设置单元格设置为为垂直顶端垂直顶端（2）单击）单击“插入插入”菜单中的菜单中的“标签标签”，选择，选择“标记语标记语言言HTML”中的中的“HTML”标签，选择标签，选择“iframe”标签标签代码。高度为代码。高度为208，顶端对齐顶端对齐，无滚动无滚动。网页制作- 32 -中国海洋大学 焦玲制作 网页制作举例2：2、在主页中插入、在主页中插入Flash动画：动画：（1）将）将D单元格设为文本右对齐单元格设为文本右对齐（2）插入）插入Flash动画，宽为动画，宽为208，高为，高为103（3）保存文件，单击）保存文件，单击“属性属性”面板中的播放按钮，查面板中的播放按钮，

18、查看效果看效果（3）修改）修改flash动画的背景设为透明效果动画的背景设为透明效果 wmode transparent网页制作- 33 -中国海洋大学 焦玲制作 网页制作3、主页栏目名称与对应网页的链接：、主页栏目名称与对应网页的链接：（1）图片热区）图片热区在在“属性属性”面板中是用面板中是用“矩形热点工具矩形热点工具”选取选取“平平凡的人凡的人”，然后链接相应的页面，然后链接相应的页面网页制作- 34 -中国海洋大学 焦玲制作 网页制作表单表单表单表单能够向网页中添加文本框、能够向网页中添加文本框、单选按钮、复选框、按钮等用单选按钮、复选框、按钮等用户界面控件。户界面控件。每个网页可以包

19、含一个或多个表每个网页可以包含一个或多个表单，每个表单占据网页中的一个单，每个表单占据网页中的一个特定区域。特定区域。表单中必须有一个元素作为表单中必须有一个元素作为“提交提交”按钮。按钮。单击单击“提交提交”按钮按钮后，浏览器将数据传送给服务器，站点服务器后，浏览器将数据传送给服务器，站点服务器需要某种程序读取这些数据并进行处理。程序可能将数据保存在需要某种程序读取这些数据并进行处理。程序可能将数据保存在文件或数据库中，也可能作为电子邮件发出等等。文件或数据库中，也可能作为电子邮件发出等等。网页制作- 35 -中国海洋大学 焦玲制作 网页制作网页布局（框架和层）网页布局（框架和层） 涉及网页

20、除了考虑网页中的文字和图像内容本身涉及网页除了考虑网页中的文字和图像内容本身之外，还有一个重要的因素就是之外，还有一个重要的因素就是网页布局。网页布局。 要想把网页中的文字、图像和动画等对象像在要想把网页中的文字、图像和动画等对象像在wordword中那样实现中那样实现图文混排图文混排的效果，必须借助其他的效果，必须借助其他技术。技术。 这种这种技术技术包括：包括：表格、框架、图层表格、框架、图层网页制作- 36 -中国海洋大学 焦玲制作 网页制作表格布局表格布局网页制作- 37 -中国海洋大学 焦玲制作 网页制作 表格布局表格布局网页制作- 38 -中国海洋大学 焦玲制作 网页制作如何使用表

21、格布局页面如何使用表格布局页面利用单元格的合并与拆利用单元格的合并与拆分分 ，创建不规则的表格。，创建不规则的表格。单元格的不同填充色、边单元格的不同填充色、边框线颜色分割区域。框线颜色分割区域。设置单元格属性，单元格设置单元格属性，单元格内对象的排版方式。内对象的排版方式。设置表格属性，整个表格设置表格属性，整个表格的排版方式。的排版方式。网页制作- 39 -中国海洋大学 焦玲制作 网页制作表格单位的设置：像素和表格单位的设置：像素和% %8像素是绝对单位，不随浏览器窗口尺寸变化而变化。像素是绝对单位，不随浏览器窗口尺寸变化而变化。8% %是相对单位，随着浏览器窗口尺寸变化而变化。是相对单位

22、，随着浏览器窗口尺寸变化而变化。0-0-显示器分辩率值显示器分辩率值0%-100%0%-100%表格有两种度量单位：表格有两种度量单位：像素和像素和% %网页制作- 40 -中国海洋大学 焦玲制作 网页制作框架布局框架布局框架是一种将浏览器窗口划分为功能独立的多个区域的常用框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。方法。定义每个框架的大小、位置、名称和初始网页，定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架的内容。一个框架的超链接可以更改普通网页提供每个框架的内容。一个框架的超链接可以更改显示在另一个框架中的网页。显示在另一个框架中的网页。框架名称框架名称 初始

23、网页初始网页vivaband.htm网页制作- 41 -中国海洋大学 焦玲制作 网页制作 认识框架集网页认识框架集网页是一种特殊的网页，该网页定义了整体的框架布局，是一种特殊的网页，该网页定义了整体的框架布局，但不提供实际内容。但不提供实际内容。VIVABAND 此网页使用了框架，但您的浏览器不支持框架。 vivaband.htm网页制作- 42 -中国海洋大学 焦玲制作 网页制作 框架网页的创建框架网页的创建- -步骤一步骤一网页制作- 43 -中国海洋大学 焦玲制作 网页制作 框架网页的创建框架网页的创建- -步骤二步骤二分别为不同的框架设定初始网页文件分别为不同的框架设定初始网页文件ba

24、nnerbanner页头页头.html.htmlContentsContents菜单菜单.htm.htmMain Main 柠檬寝室柠檬寝室.html.html网页制作- 44 -中国海洋大学 焦玲制作 网页制作 框架网页的创建框架网页的创建- -步骤三步骤三在框架面板上选择具体的框架或框架集，在属性面板上设置框架或框架集属性。在框架面板上选择具体的框架或框架集，在属性面板上设置框架或框架集属性。按住Alt键同时选择某一个框架，打开框架属性面板（窗口-框架）网页制作- 45 -中国海洋大学 焦玲制作 网页制作 框架网页的保存框架网页的保存需要分别保存每一个框架对应的网页文件，并要保存需要分别保

25、存每一个框架对应的网页文件，并要保存“”文件本身。文件本身。 执行执行“文件文件|保存全保存全部部”命令命令,保存所有保存所有的框架和框架集的框架和框架集,以以虚框突出显示的框虚框突出显示的框架就是当前需要保架就是当前需要保存的框架。存的框架。网页制作- 46 -中国海洋大学 焦玲制作 网页制作 框架之间的超链接框架之间的超链接指定超链接目的网页出现在哪个框架中。指定超链接目的网页出现在哪个框架中。在框架网页中，单击某框架内网页上的超链接时，被超链接在框架网页中，单击某框架内网页上的超链接时，被超链接所指定的网页通常在另一个框架中打开，这个框架称为所指定的网页通常在另一个框架中打开，这个框架称

26、为。网页制作- 47 -中国海洋大学 焦玲制作 网页制作 框架之间的超链接框架之间的超链接目标名称浏览器动作_black加载到一个新的窗口，同时保持当前窗口不变_parent加载到父窗口中_self加载到包含该超链接的框架中_top加载到当前浏览器的整个窗口，并替换掉原来所有的框架集网页制作- 48 -中国海洋大学 焦玲制作 网页制作层的使用层的使用层就是一个容器：网页中的元素，如文本、图像，都可以放层就是一个容器：网页中的元素，如文本、图像，都可以放置到置到中；中；再配合再配合时间线时间线（Timeline）的应用可以做出很多效果，使网）的应用可以做出很多效果，使网页动感十足；页动感十足；还

27、可以配合还可以配合行为行为（Behaviors），使得网页在某种事件发生），使得网页在某种事件发生时显示隐藏的指定层等。时显示隐藏的指定层等。用鼠标拖动的方法画出一用鼠标拖动的方法画出一个任意尺寸大小的层。个任意尺寸大小的层。绘制层按钮绘制层按钮网页制作- 49 -中国海洋大学 焦玲制作 网页制作层的基本操作层的基本操作绘制层按钮绘制层按钮 用鼠标拖动的方法画出一个任意用鼠标拖动的方法画出一个任意尺寸大小的层尺寸大小的层1.1.使用按钮使用按钮2.2.选择插入选择插入| |布局对象布局对象| |层层网页制作- 50 -中国海洋大学 焦玲制作 网页制作 层的编辑层的编辑激活图层：激活图层：单击图

28、层中任一位置，图层只有被激活后单击图层中任一位置，图层只有被激活后才可以插入对象。才可以插入对象。 选取图层选取图层：单击图层边框或单击文档窗口状态栏左侧单击图层边框或单击文档窗口状态栏左侧层标记层标记图标图标 ，或单击图层图标，或单击图层图标 。 选中的图层四周出现选中的图层四周出现8个黑色的小方块。个黑色的小方块。图层标记图层标记闪烁插入光标闪烁插入光标黑色的图层边框黑色的图层边框 网页制作- 51 -中国海洋大学 焦玲制作 网页制作移动层移动层 ：选中层时，可用鼠标拖动层的边框移动图选中层时，可用鼠标拖动层的边框移动图层的位置，或者在层的位置，或者在“层层”属性面板中精确设置图层的属性面

29、板中精确设置图层的新位置（左和上的值）。新位置（左和上的值）。改变图层尺寸改变图层尺寸 ：选中图层时，可用鼠标拖动图层选中图层时，可用鼠标拖动图层四周的小方块调整图层的尺寸，或者在四周的小方块调整图层的尺寸，或者在“层层”属性属性面板中精确设置图层的宽高尺寸（宽和高的值）。面板中精确设置图层的宽高尺寸（宽和高的值）。 层的编辑层的编辑网页制作- 52 -中国海洋大学 焦玲制作 网页制作层的编辑层的编辑 图层的属性设置（层的属性面板） 层编号 层的宽和高 层的背景图像 层的可见性 hidden：对象超过图层大小时，超过的部分将隐藏 使用面板管理图层网页制作- 53 -中国海洋大学 焦玲制作 网页

30、制作时间轴：与图层结合实现动画效果时间轴：与图层结合实现动画效果时间轴是一条贯穿时间的轴线时间轴是一条贯穿时间的轴线, ,时间轴动画时间轴动画是把动画对象是把动画对象放置在不同的层中放置在不同的层中, ,通过改变层的位置、大小、可见性和通过改变层的位置、大小、可见性和叠放顺序等属性来创建动画叠放顺序等属性来创建动画执行执行“窗口窗口| |时间轴时间轴”命令，调出命令，调出时间轴面板时间轴面板网页制作- 54 -中国海洋大学 焦玲制作 网页制作 如何制作时间轴动画如何制作时间轴动画1.1.插入一个层插入一个层2.2.在层中插入对象在层中插入对象3. 3. 使用使用“窗口窗口| |时间轴时间轴”命

31、令打开时间轴面板命令打开时间轴面板4.4.将层拖到时间轴的第将层拖到时间轴的第1 1帧上帧上5.5.选中第选中第1 1帧帧, ,将图层拖到将图层拖到动画开始位置动画开始位置6.6.选中第选中第1515帧帧, ,将图层拖将图层拖到动画结束位置到动画结束位置7.7.选中自动播放复选框选中自动播放复选框步骤步骤: :网页制作- 55 -中国海洋大学 焦玲制作 网页制作 让图层中的对象沿路径动起来让图层中的对象沿路径动起来（1 1）添加一个图层，在图层中插入一张图片；）添加一个图层，在图层中插入一张图片；（2 2）增加一个时间轴；）增加一个时间轴；（3 3）“修改修改| |时间轴时间轴| |录制层路径

32、录制层路径”命令，拖动图层绘制路径命令，拖动图层绘制路径网页制作- 56 -中国海洋大学 焦玲制作 网页制作 让图层中的内容动起来（滚动看板）让图层中的内容动起来（滚动看板）的创建：的创建：创建图层，如创建图层，如layer7选中该图层，按住选中该图层，按住Alt键键的同时，在其的同时，在其中创建其嵌套图层。中创建其嵌套图层。利用利用“剪辑剪辑”选项设置选项设置layer7图层的可图层的可见区域：见区域：hidden网页制作- 57 -中国海洋大学 焦玲制作 网页制作 让图层中的内容动起来（滚动看板）让图层中的内容动起来（滚动看板）起始帧起始帧结束帧结束帧选中图层选中图层Layer8，执，执行

33、行“修改修改|时间轴时间轴|录制录制层路径层路径”命令命令，制作，制作该图层从图层该图层从图层Layer7底部移动到图层底部移动到图层Layer7顶部的运顶部的运动效果动效果。网页制作- 58 -中国海洋大学 焦玲制作 网页制作利用层插入背景音乐：利用层插入背景音乐：创建层以及层中嵌入页面：创建层以及层中嵌入页面：（1）创建层）创建层“插入插入”工具栏中工具栏中“布局布局”中选择中选择“描绘层描绘层”，插入，插入一个层一个层（2）创建一个）创建一个musicbj1.html文件，插入一个声音文件；文件，插入一个声音文件；使用使用“插入插入”|“标签标签”|“HTML标签标签”|embed（3）

34、在层中嵌入）在层中嵌入musicbj1.html文件；文件；使用使用“插插入入”|“标签标签”|“HTML标签标签”|iframe网页制作- 59 -中国海洋大学 焦玲制作 网页制作使用行为使用行为 行为行为是在网页中进行的一系列动作是在网页中进行的一系列动作,通过这些动作通过这些动作实现用户与页面的实现用户与页面的交互交互；使用使用Dreamweaver内置的内置的行为行为(实质是实质是JavaScript代码代码), 用户不需编写代码用户不需编写代码,就可以实现交互和控制功就可以实现交互和控制功能能.行为由行为由事件和动作事件和动作组成组成,事件是动作被触发的条件事件是动作被触发的条件,动

35、作是用于完成特定任务预先编好的动作是用于完成特定任务预先编好的JavaScript代代码码.网页制作- 60 -中国海洋大学 焦玲制作 网页制作 使用行为使用行为步骤步骤: :1.1.执行执行“窗口窗口| |行为行为”命命令令, ,打开打开行为面板行为面板2.2.选中要添加行为的对象选中要添加行为的对象, ,单击加号按钮单击加号按钮3.3.在弹出的动作菜单中选在弹出的动作菜单中选择某个动作择某个动作4.4.根据所选的动作根据所选的动作, ,在参在参数窗口中设置参数数窗口中设置参数5.5.在事件菜单中为动作选在事件菜单中为动作选择触发事件择触发事件动作菜单动作菜单事件菜单事件菜单网页制作- 61

36、 -中国海洋大学 焦玲制作 网页制作使用行为举例使用行为举例 看下面两个简单的例子：看下面两个简单的例子： 弹出一个新的浏览器窗口弹出一个新的浏览器窗口OnLoad OnLoad 打开浏览器窗口打开浏览器窗口 定制网页浏览器状态栏中的显示文字定制网页浏览器状态栏中的显示文字 OnLoad OnLoad 设置文本设置文本| |设置状态栏文设置状态栏文本本网页制作- 62 -中国海洋大学 焦玲制作 网页制作 利用图层实现下拉菜单利用图层实现下拉菜单- -步骤一步骤一图层默认为隐藏状态图层默认为隐藏状态步骤一：步骤一：分别为各个菜单项分别为各个菜单项创建对应的下拉菜创建对应的下拉菜单图层。单图层。网

37、页制作- 63 -中国海洋大学 焦玲制作 网页制作 利用图层实现下拉菜单利用图层实现下拉菜单- -步骤二步骤二指定行为动作：指定行为动作：当鼠标指向菜单项时，当鼠标指向菜单项时，隐藏的指定图层将被隐藏的指定图层将被显示，当鼠标移开菜单显示，当鼠标移开菜单项时，显示的指定图层项时，显示的指定图层重被隐藏。重被隐藏。步骤二：步骤二：分别为各个菜单项分别为各个菜单项和下拉菜单图层指和下拉菜单图层指定行为动作。定行为动作。网页制作- 64 -中国海洋大学 焦玲制作 网页制作 步骤三：调整多个图层的叠放顺序步骤三：调整多个图层的叠放顺序选中图层选中图层Layer7，直接用鼠，直接用鼠标将其拖拽到相应层次

38、。标将其拖拽到相应层次。网页制作- 65 -中国海洋大学 焦玲制作 网页制作 补充：网页背景音乐处理补充：网页背景音乐处理尽量使用尽量使用mid格式的音乐文件，避免产生慢速网页。格式的音乐文件，避免产生慢速网页。 Dreamweaver本身没有提供设置背景音乐的命令，需本身没有提供设置背景音乐的命令，需要在代码视图中要在代码视图中之间直接输入代码。之间直接输入代码。 网页制作- 66 -中国海洋大学 焦玲制作 网页制作 网页背景音乐处理网页背景音乐处理设置开启新窗口的超链接设置开启新窗口的超链接网页制作- 67 -中国海洋大学 焦玲制作 网页制作利用框架使网页背景音乐连贯利用框架使网页背景音乐

39、连贯1. 把把index.htm重命名为重命名为index-content.htm2. 新建一个新建一个 “上方固定上方固定”框架网页框架网页3. 下框架设置初始网页为下框架设置初始网页为index-conten.htm网页制作- 68 -中国海洋大学 焦玲制作 网页制作利用框架使网页背景音乐连贯利用框架使网页背景音乐连贯4. 取消取消index-content网页的背景音乐设置网页的背景音乐设置5. 保存框架集网页为保存框架集网页为index.htm,上框架网页为上框架网页为index-top.htm6. 在在index-top.htm网页中设置背景音乐网页中设置背景音乐7. 设置上框架属性设置上框架属性:框架高度为框架高度为1像素像素, 不显示边框。不显示边框。网页制作- 69 -中国海洋大学 焦玲制作 网页制作补充：应用图像