网页设计与制作

1、计算机应用技术 电子工业出版社电子工业出版社 邹显春邹显春 吴春明吴春明 EmailEmail: 第五章第五章 网页设计与制作网页设计与制作教学要求：n了解网页设计中的相关概念与技术；n了解常用的网页制作软件；n掌握使用Dreamweaver进行网页设计的基本操作。教学内容：n网页设计与制作概述n网页制作软件简介nDreamweaver网页制作nDreamweaver框架 nDreamweaver模板n网络测试和发布 5.1 网页设计与制作概述网页设计与制作概述n网页、网站、主页、超链接和网页、网站、主页、超链接和URL基本概念基本概念n网页设计与制作主要技术网页设计与制作主要技术n网页设计与

2、制作的主要原则网页设计与制作的主要原则 5.1.1基本概念基本概念n网页 网页是一个用超文本标记语言（网页是一个用超文本标记语言（HTML）描述的）描述的 文档，它是一个纯文本文件。文档，它是一个纯文本文件。HTML语言通过各式各语言通过各式各 样的标记对页面上的文字、图片、表格、声音等元素样的标记对页面上的文字、图片、表格、声音等元素 进行描述，并通过浏览器对这些标记进行解释以生成进行描述，并通过浏览器对这些标记进行解释以生成 实际的页面。网页有多种类型，分别用不同的后缀名实际的页面。网页有多种类型，分别用不同的后缀名 加以区分，如常见的加以区分，如常见的“.htm”静态网页，以静态网页，以

3、“.cgi”、 “.asp”、“.php”、“.jsp”等结尾的动态网页等。等结尾的动态网页等。n网站 简单来说，网站就是一组逻辑上具有整体意义的简单来说，网站就是一组逻辑上具有整体意义的 多个网页的集合，也就是说网站设计者事先规划好网多个网页的集合，也就是说网站设计者事先规划好网 站构架，然后再分别制作出不同的网页，并通过超链站构架，然后再分别制作出不同的网页，并通过超链 接实现网页间的彼此连通，这样完整的构架就称为接实现网页间的彼此连通，这样完整的构架就称为 “网站网站”。网站通常有一个主题，如个人网站、音乐。网站通常有一个主题，如个人网站、音乐网网 站、足球网站等。站、足球网站等。5.1

4、.1基本概念基本概念n主页 主页又叫首页，是用户进入一个网站时所看到的主页又叫首页，是用户进入一个网站时所看到的 第一个页面。主页的文件名通常为第一个页面。主页的文件名通常为index或或 default，扩展名依不同网页类型而定。与之对应，扩展名依不同网页类型而定。与之对应， 和主页相和主页相链接的页面被称为链接的页面被称为“子页子页”。n超链接 超链接是超链接是WWW技术的核心，网页的出色之处就技术的核心，网页的出色之处就 在于能够把超链接嵌入其中，使用户能够从一个网页在于能够把超链接嵌入其中，使用户能够从一个网页 方便地转移到另一个相关的网页。方便地转移到另一个相关的网页。nURL UR

5、L是是Uniform Resoure Locator的简写，被的简写，被 译为译为“统一资源定位器统一资源定位器”，主要用来定位网络信息资，主要用来定位网络信息资源源 的地址或本地系统要访问的文件。的地址或本地系统要访问的文件。 5.1.2 网页设计与制作主要技术网页设计与制作主要技术nHTML语言 HTML是是Hypertext Markup Language的缩写，它是一的缩写，它是一 种描述文档结构的语言。一个种描述文档结构的语言。一个HTML文件中包含了所有将要显示文件中包含了所有将要显示 在网页上的内容信息，其中也包括对浏览器的指示，如文字应在网页上的内容信息，其中也包括对浏览器的指

6、示，如文字应 放在何处，显示模式如何等。放在何处，显示模式如何等。 n一个用一个用HTML语言描述的网页，其基本结构如下：语言描述的网页，其基本结构如下： 第一个网页第一个网页 这是我的第一个网页这是我的第一个网页 5.1.2 网页设计与制作主要技术网页设计与制作主要技术nCSS CSS（Cascading Style Sheets）称为）称为“层叠层叠样样 式表式表”，简称，简称“样式表样式表”，是一种设计网页样式，是一种设计网页样式的工的工 具。具。1997年，年，W3C颁布颁布HTML4标准的同时也标准的同时也公布公布 了有关样式表的第一个标准了有关样式表的第一个标准CSS1，在，在CS

7、S1版版本之本之 后，又在后，又在1998年年5月发布了月发布了CSS2版本。版本。W3C把把 DHTML（Dynamic HTML）分为三个部分来实）分为三个部分来实现：现： 脚本语言（包括脚本语言（包括JavaScript、VBScript等）、等）、支持支持 动态效果的浏览器（包括动态效果的浏览器（包括Internet Explorer、 Netscape Navigator等）和等）和CSS样式表。样式表。 借助借助CSS的强大功能，可实现丰富的网页效果。的强大功能，可实现丰富的网页效果。5.1.2 网页设计与制作主要技术网页设计与制作主要技术n JavaScript JavaScri

8、pt是由是由Netscape公司开发并随公司开发并随 Navigator2.0浏览器一起发布的。它是一种介于浏览器一起发布的。它是一种介于 Java与与HTML之间、基于对象之间、基于对象(Object)和事件驱动和事件驱动(Event Driven)、并具有安全性能的脚本语、并具有安全性能的脚本语 言。言。 JS通常定义在页面头部，成为通常定义在页面头部，成为HTML文档的一部文档的一部分。它是一种描述性语言，和分。它是一种描述性语言，和HTML一样，用户可以一样，用户可以用任何一种文本编辑工具对它进行编辑，并在浏览器用任何一种文本编辑工具对它进行编辑，并在浏览器中进行预览。同时，它也是一种

9、解释性编程语言，即中进行预览。同时，它也是一种解释性编程语言，即当用户向服务器请求页面资源时，其源代码在发往客当用户向服务器请求页面资源时，其源代码在发往客户端前并不需经过编译，而是将文本格式的字符代码户端前并不需经过编译，而是将文本格式的字符代码随随HTML一起发送给客户端，完全由客户端浏览器来一起发送给客户端，完全由客户端浏览器来解释和执行。解释和执行。5.1.2 网页设计与制作主要技术网页设计与制作主要技术n图形图像处理技术 目前，常用的图形图像处理工具如目前，常用的图形图像处理工具如Adobe公司的公司的 Photoshop、Macromedia 公司的公司的Fireworks等，等，

10、 熟练掌握其中一种工具，对于制作漂亮的网页将起到熟练掌握其中一种工具，对于制作漂亮的网页将起到 事半功倍的作用。事半功倍的作用。 n动画制作技术 目前，除传统的目前，除传统的GIF动画外，由动画外，由Macromedia公公 司推出的司推出的Flash动画由于其体积小巧、下载速度快、动画由于其体积小巧、下载速度快、 色彩艳丽、而且支持交互性，正逐渐成为网络动画的色彩艳丽、而且支持交互性，正逐渐成为网络动画的 主流。用于制作主流。用于制作GIF动画的常用软件如台湾动画的常用软件如台湾Ulead公公 司的司的Ulead GIF Animator、Adobe公司的公司的 ImageReady等，用于

11、制作等，用于制作Flash动画的软件当然首动画的软件当然首 推推Macromedia Flash。 5.1.2 网页设计与制作主要技术网页设计与制作主要技术n音频视频处理技术nWEB编程技术 在网页制作中，有一类应用需求是以上在网页制作中，有一类应用需求是以上任何一种技术都无法替代的，如用户注册时任何一种技术都无法替代的，如用户注册时需要记录下用户名和密码，以便在下一次用需要记录下用户名和密码，以便在下一次用户登录时对其身份进行验证，或者记录下用户登录时对其身份进行验证，或者记录下用户的留言，供其他人查看和发表评论等等。户的留言，供其他人查看和发表评论等等。这一类需求都需要用到另一类非常重要的

12、技这一类需求都需要用到另一类非常重要的技术术WEB编程技术。编程技术。 目前，主流的目前，主流的WEB编程脚本语言有编程脚本语言有ASP、PHP和和JSP等。等。5.1.3 网页设计与制作的主要原则网页设计与制作的主要原则n网站的物理结构 n不要将所有文件都存放在根目录下。不要将所有文件都存放在根目录下。n对大型网站应按栏目内容建立相应的子目录，对小型网站可对大型网站应按栏目内容建立相应的子目录，对小型网站可按文件类型建立子目录，如按文件类型建立子目录，如“images”、“media”等，并根等，并根据文件类型将其存放于相应的子目录中。据文件类型将其存放于相应的子目录中。n目录的层次不要太深

13、，建议不要超过目录的层次不要太深，建议不要超过3层。层。 n为文件夹和文件命名时，不要使用中文名称，可采用英文或为文件夹和文件命名时，不要使用中文名称，可采用英文或汉语拼音作为文件名，但要做到见名知意。汉语拼音作为文件名，但要做到见名知意。n网站的逻辑结构 网站的逻辑结构（又称网站的逻辑结构（又称“链接结构链接结构”），是指页面之间相互），是指页面之间相互链接的拓扑结构。它建立在物理结构基础之上，但可以跨越目录。链接的拓扑结构。它建立在物理结构基础之上，但可以跨越目录。 n树状链接结构树状链接结构 n星状链接结构星状链接结构 5.1.3 网页设计与制作的主要原则网页设计与制作的主要原则n网页布

14、局设计 nT结构布局结构布局 n口型布局口型布局 n对称对比布局对称对比布局 nPOP布局布局 n色彩设计 n一般网站的标准色彩不超过一般网站的标准色彩不超过3种，太多则让人眼花缭乱。种，太多则让人眼花缭乱。n标准色彩要用于网站的标志、标题、主菜单和主色块，给人标准色彩要用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉。以整体统一的感觉。n其他色彩只能作为点缀和衬托，绝不能喧宾夺主。其他色彩只能作为点缀和衬托，绝不能喧宾夺主。n注意背景和前景的颜色对比要尽量大，不要用花纹繁复的图注意背景和前景的颜色对比要尽量大，不要用花纹繁复的图案作背景，以便突出主要文字内容。案作背景，以便突出主要

15、文字内容。 5.1.3 网页设计与制作的主要原则网页设计与制作的主要原则5 其他原则其他原则n字体和字号：在对网页中的文字进行属性设置时，字字体和字号：在对网页中的文字进行属性设置时，字体和字号应尽量采用标准字体和字号。体和字号应尽量采用标准字体和字号。n表格：在使用表格进行网页布局时，不要使用过多的表格：在使用表格进行网页布局时，不要使用过多的嵌套表格，以免影响网页的下载速度。对于布局版面嵌套表格，以免影响网页的下载速度。对于布局版面较复杂的大型表格，应尽量按版块将其分解为多个表较复杂的大型表格，应尽量按版块将其分解为多个表格。格。n图像的应用：应尽量少用图像来对网页内容进行描述，图像的应用

16、：应尽量少用图像来对网页内容进行描述，同时应将大的图片裁切为若干小图片，以免影响网页同时应将大的图片裁切为若干小图片，以免影响网页的浏览速度。在使用图像时，应注意选择合适的图像的浏览速度。在使用图像时，应注意选择合适的图像格式，目前常用的图片格式有格式，目前常用的图片格式有“GIF”、“JPG”和和“PNG”三种。三种。5.2 网页制作软件简介网页制作软件简介nDreamweaver Dreamweaver是由是由Macromedia公司推出的一套功能强公司推出的一套功能强大的网页设计工具，与大的网页设计工具，与Flash、Firework合称为合称为“网页制作三网页制作三剑客剑客”。 n F

17、rontPage Frontpage 是是Microsoft公司推出的另一款支持公司推出的另一款支持“所见即所见即所得所得”功能的网页编辑工具。它采用典型的功能的网页编辑工具。它采用典型的Word界面设计，操界面设计，操作简单，易于使用，功能强大。结合作简单，易于使用，功能强大。结合“所见即所得所见即所得”的操作，的操作，用户可以快速制作出个人网站。因此，用户可以快速制作出个人网站。因此，Frontpage自推出就受自推出就受到了广大用户喜爱，也拥有大量的使用者。到了广大用户喜爱，也拥有大量的使用者。n EditPlus 对于习惯直接书写代码的设计者来说，对于习惯直接书写代码的设计者来说，Ed

18、itPlus是一个不是一个不错的选择。错的选择。5.3 Dreamweaver网页制作网页制作 nDreameaver 8界面界面n站点管理站点管理n用表格实现网页布局用表格实现网页布局n文字操作文字操作n图像操作图像操作n超链接操作超链接操作n多媒体的应用多媒体的应用nCSS样式的应用样式的应用n行为的使用行为的使用5.3.1 Dreameaver 8界面界面n标题栏、菜单栏、工具栏、工作区、其他控制面板标题栏、菜单栏、工具栏、工作区、其他控制面板5.3.2 站点管理站点管理n本地计算机：指浏览者所使用的计算机；本地计算机：指浏览者所使用的计算机；n服务器：指用于提供服务器：指用于提供Int

19、ernet各种服务的计算机。对于各种服务的计算机。对于WWW浏览服务，服务器主要用于存储用户所浏览的浏览服务，服务器主要用于存储用户所浏览的Web站点和页面；站点和页面；n本地计算机和服务器之间通过各种通信线路进行连接，本地计算机和服务器之间通过各种通信线路进行连接，以实现相互通信。以实现相互通信。n站点：本质上是一个文件夹，网站的所有网页文件、用站点：本质上是一个文件夹，网站的所有网页文件、用到的图片、动画、媒体文件等都要存放在这个文件夹中。到的图片、动画、媒体文件等都要存放在这个文件夹中。其次，它还保存着所有链接信息。用户在网上浏览网站，其次，它还保存着所有链接信息。用户在网上浏览网站，实

20、质就是用浏览器打开存储于服务器上的站点内的文档。实质就是用浏览器打开存储于服务器上的站点内的文档。因此，通常将存储于远程服务器上的站点和相关文档称因此，通常将存储于远程服务器上的站点和相关文档称作远端站点。作远端站点。n利用利用Dreamweaver软件，用户可在本地计算机上模拟软件，用户可在本地计算机上模拟服务器功能，建立一个本地站点，并完成站点的设计，服务器功能，建立一个本地站点，并完成站点的设计，设计完毕后再上传到服务器上，形成远端站点。这样，设计完毕后再上传到服务器上，形成远端站点。这样，在整个网站制作过程中，本地计算机就同时充当了服务在整个网站制作过程中，本地计算机就同时充当了服务器

21、和客户端的双重角色。器和客户端的双重角色。5.3.2 站点管理站点管理n新建站点新建站点 【实例【实例5-1】新建站】新建站点点“我的网站我的网站” 操作步骤如下：操作步骤如下：n在在“文件文件”面板中单面板中单击击“管理站点管理站点”命令，命令，弹出弹出“管理站点管理站点”对对话框，单击话框，单击“新建新建”按钮；或直接执行按钮；或直接执行“站点站点”菜单下的菜单下的“新建站点新建站点”命令，命令，都会打开如图所示的都会打开如图所示的“未命名站点未命名站点1的站的站点定义为点定义为”对话框。对话框。5.3.2 站点管理站点管理n为便于操作，这里选择为便于操作，这里选择“高级高级”选项卡，进入

22、如选项卡，进入如图所示的界面。图所示的界面。n在对话框中输入自己的在对话框中输入自己的“站点名称站点名称”，如本例取，如本例取名为名为“快乐家园快乐家园”。再单击。再单击“本地根文件夹本地根文件夹”文文本框右侧的本框右侧的“”“”按钮，确认站点文件夹的路径，按钮，确认站点文件夹的路径，本例为本例为“E:我的网站我的网站”。5.3.2 站点管理站点管理n单击单击“确定确定”按钮，完成站点的建立。同时，按钮，完成站点的建立。同时，“文件文件”面板变成如图所示的状态。面板变成如图所示的状态。5.3.2 站点管理站点管理n编辑站点编辑站点n【实例【实例5-2】对站点】对站点“我的网站我的网站”进行编辑

23、进行编辑 n 创建好站点之后，若需要更换站点目录或进行其他创建好站点之后，若需要更换站点目录或进行其他修改，可以执行以下操作：修改，可以执行以下操作：n执行执行“站点站点”菜单下的菜单下的“管理站点管理站点”命令；或者命令；或者单击单击“文件文件”面板中的面板中的“管理站点管理站点”命令，打开命令，打开如图所示的如图所示的“管理站点管理站点”对话框。对话框。5.3.2 站点管理站点管理n在在“管理站点管理站点”对话框中选中要编辑的站点名称，对话框中选中要编辑的站点名称， 单击单击“编辑编辑”按钮，可重新进入如图所示的界面，按钮，可重新进入如图所示的界面， 再用新建站点的方法对站点进行重新设置。

24、再用新建站点的方法对站点进行重新设置。5.3.2 站点管理站点管理n删除站点删除站点n对已创建的站点，若不想继续使用，则可将其删除。对已创建的站点，若不想继续使用，则可将其删除。具体操作步骤如下：具体操作步骤如下：n执行执行“站点站点”菜单下的菜单下的“管理站点管理站点”命令，打开命令，打开如图所示的如图所示的“管理站点管理站点”对话框。对话框。n选中要删除的站点名称，选中要删除的站点名称，单击单击“删除删除”按钮。按钮。n说明：从站点列表中删说明：从站点列表中删除站点之后，有关该站除站点之后，有关该站点的所有设置信息将永点的所有设置信息将永久丢失，但站点中的文久丢失，但站点中的文件和目录不会

25、被删除。件和目录不会被删除。 5.3.2 站点管理站点管理n新建网页新建网页n【实例【实例5-3】新建首页】新建首页“index.htm” n在站点名称上单击鼠标右键，从中选择在站点名称上单击鼠标右键，从中选择“新建文件新建文件”命令，命令，出现如右图所示界面。出现如右图所示界面。n为该网页文件更改名字，本例的文件名为为该网页文件更改名字，本例的文件名为“index.htm”，单击鼠标左键确认。单击鼠标左键确认。n双击该网页文件名，进入编辑状态对该页面进行编辑。双击该网页文件名，进入编辑状态对该页面进行编辑。 5.3.3 用表格实现网页布局用表格实现网页布局n1、网页布局技术、网页布局技术n层

26、叠样式表层叠样式表n表格表格n框架框架n2、表格操作、表格操作n【实例【实例5-4】制作如图所示的外层表格】制作如图所示的外层表格标题区域版权区域正文区域分隔区域导航区域5.3.3 用表格实现网页布局用表格实现网页布局n执行执行“插入插入”菜单下的菜单下的“表格表格”命令，弹出命令，弹出“表表格格”对话框。对话框。n在在“表格表格”对话框中，设置对话框中，设置“行数行数”为为5，“列列数数”为为2，“表格宽度表格宽度”为为790像素，单击像素，单击“确确定定”按钮，即可在网页中插入一个按钮，即可在网页中插入一个5行行2列的表格。列的表格。此时，该表格应处于选中状态。此时，该表格应处于选中状态。

27、n提示：如果需要重新选择表格，可单击表格提示：如果需要重新选择表格，可单击表格的边线，或者直接单击的边线，或者直接单击“状态栏状态栏”中的中的标签。标签。5.3.3 用表格实现网页布局用表格实现网页布局n确认表格处于选中状态后，在如图所示的确认表格处于选中状态后，在如图所示的“表格属性表格属性”面板中，通过相关参数的设置，面板中，通过相关参数的设置，可对表格的属性做进一步调整。本例中设置可对表格的属性做进一步调整。本例中设置“填充填充”、“间距间距”和和“边框边框”均为均为0。5.3.3 用表格实现网页布局用表格实现网页布局n【实例【实例5-5】制作图】制作图5-12（b）所示的）所示的“标题

28、标题区域区域”嵌套表格嵌套表格标题区域导航区分隔区域版权区正文区 5.3.3 用表格实现网页布局用表格实现网页布局n合并单元格合并单元格: 通过鼠标拖曳，选中外层表格第一通过鼠标拖曳，选中外层表格第一行中的所有单元格，在如图所示的行中的所有单元格，在如图所示的“单元格属性单元格属性”面板中，单击面板中，单击“合并单元格合并单元格”按钮，实现单元格按钮，实现单元格的合并。采用同样方法，将表格中除正文区以外的合并。采用同样方法，将表格中除正文区以外的其他各行单元格进行合并。的其他各行单元格进行合并。n插入嵌套表格插入嵌套表格: 将光标定位到标题区域所在的单将光标定位到标题区域所在的单元格中，插入一

29、个元格中，插入一个1行行3列，列，“宽宽”为为100%的表的表格。格。 5.3.3 用表格实现网页布局用表格实现网页布局n设置单元格属性设置单元格属性 : 按住按住Ctrl键并单击鼠标键并单击鼠标左键，同时选中嵌套表格的第一个和第三左键，同时选中嵌套表格的第一个和第三个单元格，在个单元格，在“单元格属性单元格属性”面板中，可面板中，可对单元格属性做进一步调整。本例中设置对单元格属性做进一步调整。本例中设置“宽宽”和和“高高”均为均为120像素。像素。5.3.3 用表格实现网页布局用表格实现网页布局n【实例【实例5-6】表格操作技巧】表格操作技巧制作竖线制作竖线n导航栏是一个带有背景颜色，由文字

30、和竖线组成的导航栏是一个带有背景颜色，由文字和竖线组成的导航条导航条 。竖线的制作是使用如下嵌套表格的方法来。竖线的制作是使用如下嵌套表格的方法来实现的。实现的。具体操作步骤如下：具体操作步骤如下： n将插入点定位到导航栏所在表格的对应单元格中，将插入点定位到导航栏所在表格的对应单元格中，插入一个插入一个1行行1列的表格。列的表格。 n在在“表格属性表格属性”面板中，设置表格的面板中，设置表格的“宽宽”为为1像素，像素，“高高”为为30像素（竖线的高度），像素（竖线的高度），“背景背景颜色颜色”为黑色（竖线的颜色）。为黑色（竖线的颜色）。5.3.3 用表格实现网页布局用表格实现网页布局n单击单

31、击“文档工具栏文档工具栏”中的中的“代码代码”按钮，切换到按钮，切换到代码视图方式下，将代码中的代码视图方式下，将代码中的“ ”（空格）（空格）删除；或者，执行删除；或者，执行“窗口窗口”菜单下的菜单下的“代码检查代码检查器器”命令，弹出如图所示的命令，弹出如图所示的“代码检查器代码检查器”对话对话框，从中删除框，从中删除“ ”。n保存页面，按保存页面，按F12键进行页面的预览，可发现刚键进行页面的预览，可发现刚才插入的表格变成了才插入的表格变成了“|”。5.3.3 用表格实现网页布局用表格实现网页布局n【实例】表格布局主页面【实例】表格布局主页面5.3.4

32、 文字操作文字操作n在单元格中输入文字内容时，需要注意以下在单元格中输入文字内容时，需要注意以下几点：几点：n在单元格中输入文字之前，可在在单元格中输入文字之前，可在“单元格属性面单元格属性面板板”中的中的“水平水平”和和“垂直垂直”属性中设置文本在属性中设置文本在单元格中的位置。单元格中的位置。n在网页中利用在网页中利用Space键输入键输入“空格空格”时，默认情时，默认情况下只能输入一个空格，要想输入更多的空格，况下只能输入一个空格，要想输入更多的空格，可以切换到中文输入法下的全角状态，便可输入可以切换到中文输入法下的全角状态，便可输入任意多个空格。任意多个空格。n在网页中按在网页中按En

33、ter（回车）键后，将会在两行之间（回车）键后，将会在两行之间产生一个空行。为实现文本紧密排列，可在换行产生一个空行。为实现文本紧密排列，可在换行时使用快捷键时使用快捷键Shift+Enter键。键。 5.3.5 图像操作图像操作n【实例【实例5-7】图像作为网页元素】图像作为网页元素 操作步骤如下：操作步骤如下：n将插入点定位到待插入图像的位置将插入点定位到待插入图像的位置 n执行执行“插入插入”菜单下的菜单下的“图像图像”命令，弹出命令，弹出“选选择图像源文件择图像源文件”对话框，从中选择所需图像，单对话框，从中选择所需图像，单击击“确定确定”按钮，则会出现一询问对话框，询问按钮，则会出现

34、一询问对话框，询问是否将图像复制到当前站点中。是否将图像复制到当前站点中。n单击单击“是是”按钮，又会出现按钮，又会出现“复制文件为复制文件为”对话对话框，指定该图像文件在站点文件夹中的路径和名框，指定该图像文件在站点文件夹中的路径和名称，单击称，单击“保存保存”按钮，图像插入到网页中，同按钮，图像插入到网页中，同时，在时，在“文件文件”面板中插入的图像文件已经存在面板中插入的图像文件已经存在于站点文件夹下。于站点文件夹下。 5.3.5图像操作图像操作n【实例【实例5-8】图像作为单元格背景】图像作为单元格背景 操作步骤如下：操作步骤如下：n将插入点定位到待设置背景图像的单元格内将插入点定位到

35、待设置背景图像的单元格内 n在在“单元格属性单元格属性”面板中，单击面板中，单击 中的中的 “单元格背景单元格背景URL”按钮，在弹出的按钮，在弹出的“选选择图像源文件择图像源文件”对话框中，确定图像文件的位置对话框中，确定图像文件的位置即可；也以在文本框中直接输入背景图像的路径。即可；也以在文本框中直接输入背景图像的路径。n如果图像文件事先已保存在站点文件夹中，并且如果图像文件事先已保存在站点文件夹中，并且在在“文件文件”控制面板中，该图像图标处于可见状控制面板中，该图像图标处于可见状态，可以按住鼠标左键拖动态，可以按住鼠标左键拖动 中的中的 “指向文件指向文件”按钮到该图像文件上，此按钮到

36、该图像文件上，此时，文件的时，文件的URL路径会自动显示在文本框中，图路径会自动显示在文本框中，图像也随之成为单元格背景图像。像也随之成为单元格背景图像。 5.3.6 超链接操作超链接操作n1、路径的类型、路径的类型n绝对路径绝对路径n相对路径相对路径n根相对路径根相对路径 n2、超链接的分类、超链接的分类n内部链接：指网站内部各个网页之间的链接。内部链接：指网站内部各个网页之间的链接。n外部链接：链接到本地站点以外的其他文档。外部链接：链接到本地站点以外的其他文档。n邮件超链接：是指链接到某一特定的邮件超链接：是指链接到某一特定的E-mail地址，单击它可地址，单击它可向该向该E-mail发

37、送邮件。发送邮件。n下载链接：是指链接到某一特定的文件，单击它可下载该文下载链接：是指链接到某一特定的文件，单击它可下载该文件。件。n空链接：是指暂时还没有明确链接对象。空链接通常还可以空链接：是指暂时还没有明确链接对象。空链接通常还可以用于接受鼠标事件，如在单击时执行某段脚本代码。用于接受鼠标事件，如在单击时执行某段脚本代码。5.3.6 超链接操作超链接操作n3、超链接的设置、超链接的设置n【例【例5-9】创建超链接】创建超链接 操作步骤如下：操作步骤如下：n选中要设置超链接的对象（文本或图片）。选中要设置超链接的对象（文本或图片）。n在属性面板的在属性面板的 中，设置相中，设置相关链接内容

38、。关链接内容。n利用属性面板中的利用属性面板中的 目标下拉列表框选目标下拉列表框选项，可以更改超链接的目标框架。项，可以更改超链接的目标框架。5.3.7 多媒体的应用多媒体的应用 n【实例【实例5-10】插入背景音乐】插入背景音乐 操作步骤如下：操作步骤如下：n执行执行“查看查看”菜单下的菜单下的“代码代码”命令；或者单击命令；或者单击“文档工具栏文档工具栏”上的上的 按钮，切换到按钮，切换到“代代码视图码视图”模式。模式。n在在标记之间插入标记之间插入。n保存页面，按保存页面，按F12键进行页面的预览，可听到播键进行页面的预览，可听到播放的背景音乐。放的背景音乐。 5.3.7 多媒体的应用多

39、媒体的应用n【实例【实例5-11】插入视频和音频文件】插入视频和音频文件 操作步骤如下：操作步骤如下：n将插入点定位到要插入音视频文件的位置，并切将插入点定位到要插入音视频文件的位置，并切换到换到“代码视图代码视图”模式。模式。n在当前位置插入标记在当前位置插入标记 。n其中，其中，标签可以用来向网页中插入各标签可以用来向网页中插入各种类型的多媒体，所插入的多媒体格式可以是种类型的多媒体，所插入的多媒体格式可以是 Midi、Wav、AIFF、AU、MP3等，并且等，并且Netscape及新版的及新版的IE都支持此标签。都支持此标签。 n保存页面，按保存页面，按F12键进行页面预览，可看到刚刚键

40、进行页面预览，可看到刚刚插入的视频文件已处于播放状态。插入的视频文件已处于播放状态。5.3.7 多媒体的应用多媒体的应用n【实例【实例5-12】插入】插入Flash动画动画n说明：网页中所用到的说明：网页中所用到的Flash动画的扩展名为动画的扩展名为 “.swf”，而不能使用扩展名为而不能使用扩展名为“.fla”的的Flash源文源文 件。件。 操作步骤：操作步骤：n在网页中，选中插入的在网页中，选中插入的Flash文件，在其对应的属性文件，在其对应的属性面板中，单击面板中，单击“”“”按钮，弹出按钮，弹出“参数参数”对话框。对话框。n在弹出的对话框中，设置在弹出的对话框中，设置“wmode

41、”参数的值为参数的值为 “transparent”。 5.3.7 多媒体的应用多媒体的应用n【实例【实例5-13】插入】插入Flash按钮和文本按钮和文本 操作步骤如下：操作步骤如下：n执行执行“插入插入”菜单下的菜单下的“媒体媒体”命令，在其下一命令，在其下一级菜单中选择级菜单中选择“Flash按钮按钮”或或“Flash文本文本”命命令，弹出相应的令，弹出相应的 “插入插入Flash按钮按钮”的对话框。的对话框。n选择相应样式，输入文本内容，并设置链接路径选择相应样式，输入文本内容，并设置链接路径后，点击后，点击“确定确定”按钮即可。按钮即可。n按按F12进行页面浏览，观察设置效果。进行页面

42、浏览，观察设置效果。5.3.8 CSS样式的应用样式的应用n在在Dreamweaver 8中的中的“CSS样式样式”控制面控制面板中，板中，CSS样式共被分为三大类样式共被分为三大类 ：n类（可应用于任何标签）：用该选项制作的样式类（可应用于任何标签）：用该选项制作的样式可应用于任何文本块或文本区域。可应用于任何文本块或文本区域。n标签（重新定义特定标签的外观）：该选项会对标签（重新定义特定标签的外观）：该选项会对某一具体标签进行重新定义。某一具体标签进行重新定义。n高级（高级（ID、伪类选择器等）：该选项主要是对链、伪类选择器等）：该选项主要是对链接文字进行定义。接文字进行定义。5.3.8

43、CSS样式的应用样式的应用n【实例【实例5-14】设置如图所示主页的文字属性】设置如图所示主页的文字属性5.3.8 CSS样式的应用样式的应用 操作步骤如下：操作步骤如下：n执行执行“窗口窗口”菜单下的菜单下的“CSS样式样式”命令，在右命令，在右侧的面板组中会展开侧的面板组中会展开“CSS样式样式”选项卡。选项卡。n单击单击“CSS”面板右下角的面板右下角的“新建新建CSS规则规则”按钮，按钮，弹出如图所示的弹出如图所示的“新建新建CSS规则规则”对话框。对话框。5.3.8 CSS样式的应用样式的应用n设置设置“选择类型选择类型”为为“标签（重新定义特定标签标签（重新定义特定标签的外观）的外

44、观）”，为了对全部正文文字进行大小控制，为了对全部正文文字进行大小控制，这里选择了这里选择了“body”标签，实践中也可以选取标签，实践中也可以选取“td”标签，因为本实例中的所有文字都放在了标签，因为本实例中的所有文字都放在了单元格单元格“td”内；内；“定义在定义在”为为“仅对该文档仅对该文档”，即这里设置的样式仅对当前文档有效。单击即这里设置的样式仅对当前文档有效。单击“确确定定”按钮，弹出如图所示的按钮，弹出如图所示的“body的的CSS规则定规则定义义”对话框。对话框。n 在对话框中在对话框中设置字体的相设置字体的相关属性，完毕关属性，完毕后按后按“确定确定”按钮完成样式按钮完成样式

45、的设置。的设置。 5.3.8 CSS样式的应用样式的应用n【实例【实例5-15】设置页面中链接文字的样式】设置页面中链接文字的样式 操作步骤如下：操作步骤如下：n在如图所示的在如图所示的“新建新建CSS规则规则”对话框中，设置对话框中，设置“选择器类型选择器类型”为为“高级（高级（ID、伪类选择器、伪类选择器等）等）”。5.3.8 CSS样式的应用样式的应用n单击单击“标签标签”右侧的右侧的“”“”按钮，可看到有按钮，可看到有“a:link”、“a:visted”、“a:hover”和和“a:active”四个标签四个标签 其意义如下：其意义如下：na:link：指超链接对象正常状态，即未执行

46、超链接功能：指超链接对象正常状态，即未执行超链接功能时的状态。时的状态。na:hover：指将鼠标放在超链接对象上时的状态。：指将鼠标放在超链接对象上时的状态。na:active：指按下鼠标过程中的状态。：指按下鼠标过程中的状态。na:visted：指超链接对象被执行过后的状态。：指超链接对象被执行过后的状态。5.3.8 CSS样式的应用样式的应用n首先选择首先选择“a:link”标签，弹出如图所示的规则定标签，弹出如图所示的规则定义对话框，设置字体颜色为义对话框，设置字体颜色为“#000000”，同时，同时勾选勾选“修饰修饰”中的中的“无无”，用以去掉超链的下划，用以去掉超链的下划线。设置完

47、毕后点击线。设置完毕后点击“确定确定”按钮。按钮。n同步骤同步骤3的操作，依次设置的操作，依次设置“a:visted”和和“a:hover”的规则样式。的规则样式。 5.3.8 CSS样式的应用样式的应用n【实例【实例5-16】设置无序项目列表中的项目符】设置无序项目列表中的项目符号号 操作步骤如下：操作步骤如下：n在在 “新建新建CSS规则规则”对话框中，设置对话框中，设置“选择器类选择器类型型”为为“标签（重新定义特定标签的外观）标签（重新定义特定标签的外观）”，并，并在在“标签标签”的下拉列表中选择的下拉列表中选择“ul”。弹出如图所。弹出如图所示的示的“ul的的CSS规则定义规则定义”

48、对话框。对话框。5.3.8 CSS样式的应用样式的应用n选择选择“分类分类”列表中的列表中的“列表列表”选项，对话框内选项，对话框内容变成如图所示的状态。容变成如图所示的状态。5.3.8 CSS样式的应用样式的应用n在在“ul的的CSS规则定义规则定义 ”对话框中，在对话框中，在“类型类型”中可选择系统提供的符号，在中可选择系统提供的符号，在“项目符号图像项目符号图像”中单击中单击“浏览浏览”按钮，可将要作为项目符号的图按钮，可将要作为项目符号的图像导入。单击像导入。单击“确定确定”完成项目符号的设置。完成项目符号的设置。n在网页中，选择要使用项目符号的文字，并单击在网页中，选择要使用项目符号

49、的文字，并单击“属性属性”面板中面板中“”“”按钮，完成项目符号的应用。按钮，完成项目符号的应用。5.3.9 行为的使用行为的使用n与行为相关的的概念：与行为相关的的概念： n对象（对象（Object）：对象是产生行为的主体，绝大多数网页元）：对象是产生行为的主体，绝大多数网页元素都可以成为对象，例如图片、文字、多媒体文件，甚至是素都可以成为对象，例如图片、文字、多媒体文件，甚至是整个页面等等。整个页面等等。n事件（事件（Event）：事件是触发行为的原因，它可以被附加到）：事件是触发行为的原因，它可以被附加到各种页面元素上，也可以被附加到各种页面元素上，也可以被附加到HTML标记中。一个事件

50、标记中。一个事件总是针对页面元素或标记而言的。例如：将鼠标移到图片上、总是针对页面元素或标记而言的。例如：将鼠标移到图片上、把鼠标移到图片之外、单击鼠标，这些操作都被称为事件，把鼠标移到图片之外、单击鼠标，这些操作都被称为事件，分别被称为分别被称为onMouseOver、onMouseOut和和onClick。同。同样，对于键盘来说也有样，对于键盘来说也有onKeyDown、onKeyUp、onKeyPress等事件。不同的浏览器支持的事件种类和多少等事件。不同的浏览器支持的事件种类和多少是不一样的，通常高版本的浏览器支持更多的事件。利用这是不一样的，通常高版本的浏览器支持更多的事件。利用这些

51、丰富的事件，网页开发者可以编写出灵活多样的程序。些丰富的事件，网页开发者可以编写出灵活多样的程序。n动作（动作（Action）：行为通过动作来完成动态效果，如：图片）：行为通过动作来完成动态效果，如：图片翻转、打开浏览器、播放声音都是动作。动作通常是一段翻转、打开浏览器、播放声音都是动作。动作通常是一段JaveScript代码，在代码，在Dreamweaver中使用中使用Dreamweaver内置的行为往页面中添加内置的行为往页面中添加JaveScript代码，不必自己编写。代码，不必自己编写。 5.3.9 行为的使用行为的使用n【实例【实例5-17】插入背景音乐】插入背景音乐 操作步骤如下：

52、操作步骤如下：n打开要插入背景音乐的网页，执行打开要插入背景音乐的网页，执行“窗口窗口”菜单菜单下的下的“行为行为”命令，调出行为面板。命令，调出行为面板。n单击单击“状态栏状态栏”上的上的标签，选择网页的标签，选择网页的主体内容。单击主体内容。单击“行为行为”面板中的面板中的“添加行为添加行为”按钮按钮 ，从弹出的下拉菜单中选择，从弹出的下拉菜单中选择“播放声音播放声音”选项，弹出选项，弹出“播放声音播放声音”对话框。对话框。n在在“播放声音播放声音”对话框中，通过单击对话框中，通过单击“浏览浏览”按按钮，选择需要作为背景音乐的音乐文件后，单击钮，选择需要作为背景音乐的音乐文件后，单击“确定

53、确定”即可。即可。n按按F12键预览，便可以听到播放的音乐了。键预览，便可以听到播放的音乐了。5.3.9 行为的使用行为的使用n【实例【实例5-18】鼠标交换图】鼠标交换图 操作步骤如下：操作步骤如下：n选中需要作为选中需要作为“鼠标经过图像鼠标经过图像”的图像。的图像。n单击单击“行为行为”面板中的面板中的“ ”按钮，从弹出的按钮，从弹出的下拉菜单中选择下拉菜单中选择“交换图像交换图像”选项，弹出如图所选项，弹出如图所示示“交换图像交换图像”对话框。对话框。5.3.9 行为的使用行为的使用n单击单击“设定原始档为设定原始档为”中的中的“浏览浏览”按钮，选定按钮，选定需要交换的图像路径。需要交

54、换的图像路径。n单击单击“确定确定”按钮，完成设置。按钮，完成设置。n如果网页中事先并未插入要作为如果网页中事先并未插入要作为“鼠标交换鼠标交换图图”的图像，可采取如下操作步骤：的图像，可采取如下操作步骤： 5.3.9 行为的使用行为的使用n执行执行“插入插入”菜单下的菜单下的“图像对象图像对象”命令，从中命令，从中选择选择“鼠标经过图像鼠标经过图像”，弹出如图所示的对话框。，弹出如图所示的对话框。n通过单击相应的通过单击相应的“浏览浏览”按钮，确定按钮，确定“原始图像原始图像”和和“鼠标经过图像鼠标经过图像”的路径。这里，的路径。这里，“原始图像原始图像”和和“鼠标经过图像鼠标经过图像”两个

55、图像的大小最好保持一两个图像的大小最好保持一致。致。 5.3.9 行为的使用行为的使用n【实例【实例5-19】创建滚动字幕】创建滚动字幕 操作步骤如下：操作步骤如下：n选中要设置为滚动效果的文字。选中要设置为滚动效果的文字。n执行执行“修改修改”菜单下的菜单下的“快速标签编辑器快速标签编辑器”命令，命令，在文字的右上角会弹出如图所示的内容。在文字的右上角会弹出如图所示的内容。5.3.9 行为的使用行为的使用n在上图中的下拉列表中选择在上图中的下拉列表中选择“marquee”标记，标记，双击确认。双击确认。n按空格键，弹出与该标签相关的属性，用同样的按空格键，弹出与该标签相关的属性，用同样的方法

56、确认所需属性及其取值。方法确认所需属性及其取值。n按按Enter键，确认该标签及其相关属性设置。键，确认该标签及其相关属性设置。 5.3.9 行为的使用行为的使用n【实例【实例5-20】设置状态行文本】设置状态行文本 操作步骤如下：操作步骤如下：n执行执行“插入插入”菜单下的菜单下的“行为行为”命令，展开面板命令，展开面板中的中的“行为行为”选项卡。选项卡。n选中要添加行为的对象（如：网页的选中要添加行为的对象（如：网页的标标记）。记）。 n单击行为面板上的单击行为面板上的“ ”按钮，在打开的动作菜按钮，在打开的动作菜单单 中选择中选择“设置文本设置文本”下的下的“设置状态文本设置状态文本”命

57、命令，弹令，弹 出出“设置状态栏文本设置状态栏文本”对话框。对话框。n在弹出的在弹出的“设置状态栏文本设置状态栏文本”对话框中，在对话框中，在“信信息息” 框中输入需要的文本。框中输入需要的文本。 5.4 Dreamweaver框架框架n【实例】用框架布局的一个简单主页【实例】用框架布局的一个简单主页5.4 Dreamweaver框架框架n1. 框架概述框架概述 框架可以将浏览器显示空间分割成几个部分，每框架可以将浏览器显示空间分割成几个部分，每个部分可以独立显示不同的网页，同时对于整个网页个部分可以独立显示不同的网页，同时对于整个网页设计的整体性的保持也是有利的。设计的整体性的保持也是有利的

58、。n一个框架结构有两部分网页文件构成：一个框架结构有两部分网页文件构成：n框架（框架（Frame）：框架是浏览器窗口中的一个区域，它）：框架是浏览器窗口中的一个区域，它可以显示某个单独的网页文件。可以显示某个单独的网页文件。n框架集（框架集（Frameset）：框架集也是一个网页文件，它将）：框架集也是一个网页文件，它将一个窗口通过行和列的方式分割成多个框架，框架的多一个窗口通过行和列的方式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。是不同的网页文件。 5.4 Dreamweaver框架框架n2. 框

59、架操作框架操作n【实例【实例5-21】制作如图所示的框架页面】制作如图所示的框架页面TopFrameLeftFrameMainFrameBottomFrame5.4 Dreamweaver框架框架操作步骤如下：操作步骤如下：n分别制作该实例中所用到的四个基本网页：分别制作该实例中所用到的四个基本网页：top.htm、left.htm、main.htm和和bottom.htm，其制作方法与前面介绍的单独网，其制作方法与前面介绍的单独网页制作方法相同。制作完成后保存在站点页制作方法相同。制作完成后保存在站点“subpages”文件夹内。文件夹内。n新建一个名为新建一个名为“kjindex.htm”

60、的页面，并保存的页面，并保存在站点根目录内。在站点根目录内。5.4 Dreamweaver框架框架n在在Dreamweaver 8界面的插入栏中，选择界面的插入栏中，选择“布局布局”项，显示出如图所示的布局栏：项，显示出如图所示的布局栏：n单击单击 “框架框架”按钮，从其下拉列表中选择按钮，从其下拉列表中选择“顶部和嵌套的左侧框架顶部和嵌套的左侧框架”项，页面将呈现如项，页面将呈现如图所示的效果。图所示的效果。 TopFrameLeftFrameMainFrame5.4 Dreamweaver框架框架n将鼠标移至框架最下方的边框上，按住鼠标左将鼠标移至框架最下方的边框上，按住鼠标左键向上拖动，则可在原有布