dreamweaver网页设计实验指导书 - 图文

网页设计实验指导书

（一）DreamWeaver静态网页制作

第一章 网站规划 ............................................... - 2 -

第二章 Dreamweaver静态网页设计实验 ........................... - 5 -

实验一 在Dreamweaver中建立一个站点 ......................... - 5 -

实验二 在网页中使用文本 .................................... - 9 -

实验三 超级链接的建立 ..................................... - 14 -

实验四 网页图像的应用 ..................................... - 20 -

实验五 网页表格操作 ........................................ - 25 -

实验六 利用表格进行网页布局 ................................ - 27 -

实验七 利用层进行网页布局 ................................. - 32 -

实验八 行为和图层的应用 .................................... - 35 -

实验九 框架型网页的制作 ................................... - 44 -

实验十一 交互式表单的应用 ................................ - 55 -

实验十二 HTML语言基础应用 .................................. - 59 -

实验十三 网页动态效果辑 .................................... - 63 -

实验十四 CSS样式表的创建及运用 ............................ - 68 -

第一章 网站规划

一、网站建设的基本流程

网站建设的基本流程是：网站规划，网页设计，网上安家以及网站维护与管理，如图1-1所示。

④ 网站维护与管理 ③ 网上安家 ② 网页设计 ① 网站规划 图1-1

规范的网站建设大致需要做如下工作： 1、网站规划

收集网站前期资料以及所需文档

在确定了制作哪方面的网站后，需收集和整理与网站内容相关的文字资料、图像、动画素材等。如想要制作影视网站就需收集大量中外电影的信息以及演员资料；要制作公司网站就需收集公司的介绍、产品信息和企业文化等。

收集好资料后还需对资料进行有效地管理，站点就是管理资料、素材的场所。在创建站点之前需对站点进行规划，站点的形式有并列、层次和网状等，用户需根据实际情况选择。

规划站点时应按素材的不同种类分为几个站点，再将收集好的素材分类放置在相应站点中，然后在不同站点中将不同的素材进行细分。站点规划好后即可对其进行创建了。

注意：站点的主题与名称应易于记忆，要上传到网上的站点名称必须是英文。 2、网页设计

(1) 将策划方案打印给小组成员人手一份，开始设计人员进行设计工作。根据策划文档及网站设计规范，主要设计人员进行前期的首页设计。

网站是由多个页面链接而成的。在制作网页时需注意以下几面的问题，以便浏览者轻松浏览网站。

a)页面框架的构建

页面框架的构建是指对网页的整体布局，针对网页中的内容应将网页有条理地划分为几部分。

b)导航条

- 2 -

导航条应出现在网站的各个页面中，提供各个站点的相关主题，引领浏览者有条理地浏览网站。导航条通常放置在页面的上部或左侧。

c)返回首页链接

在分页面中放置返回首页链接，以便浏览者在访问分页面后快速回到首页，以重新选择其他页面进行浏览。

d)添加网页元素,网页添加相应的内容，以传递网页信息给浏览者。

(2) 根据网站的模式和特点以及网站制作规范定制出最适当的标准样式。 (3) 设计人员进行二级页面设计工作。 (4) 制作人员开始制作工作。 (5) 程序开发阶段。 (6) 完成。

(7) 网站测试和改进

站点测试可根据浏览器种类、客户端要求以及网站大小等要求进行测试，通常是将站点移到一个模拟调试服务器上对其进行测试或编辑。

测试站点的过程中应注意以下几方面： a)监测页面的文件大小以及下载速度。

b)运行链接检查报告对链接进行测试。由于在网页制作中，各站点的重新设计、重新调整会使某些链接所指向的页面可能已被移动或删除，所以应检查站点是否有断开的链接，若有则自动重新修复断开的链接。

c)为了使页面不支持的样式、层、插件等在浏览器中能兼容且功能正常，可进行浏览器兼容性的检查。使用“检查浏览器”行为，可自动将访问者定向到另外的页面，这样就可解决在较早版本的浏览器中无法运行页面的问题。

d)网页布局、字体大小、颜色和默认浏览器窗口大小等区别是在目标浏览器检查中无法预见的，需在不同的浏览器和平台上预览页面进行查看。

3、网上安家

网上安家即将站点发布到互联网上。

发布站点之前需在Internet上申请一个主页空间，以指定网站或主页在Internet上的位置。网页发布通常使用FTP（远程文件传输）软件上传网页到服务器中申请的网址目录下，这样速度较快，也可使用Dreamweaver或FrontPage中的发布站点命令进行上传。

4、网站维护与管理 (1)网站内容更新与沟通 站点上传到服务器后，还需对站点进行更新和维护，以保持站点内容的最新和页面元素的正常。

(2)合理运用新技术。 (3)推广你的Web地址。

二、网站设计技巧

1、网页风格要统一。 2、网站导航要清晰。 3、网页内容便于浏览。 4、网站Logo要有代表性。 5、设计网站的标准色彩。

6、页面容量越小越好，别超过75KB。 7、能适应不同浏览器及分辨率。

- 3 -

8、网页内容要精彩。

三、网页的基本组成

网页由网页标题、页眉、站标、导航栏、内容版块的页脚组成。 ? 标题（说明网站的形式和类型） ? 站标即网站标识（logo）（代表了网站的形象） ? 页眉（放置网站最希望浏览者看的信息） ? 导航栏（网站的索引）

? 内容（是网站的精神所在） ? 页脚（网站设计者的基本信息） ?

四、网页元素

网页中包含的元素很多，主要包括文字、图像、表格、表单、动画和视频等。

五、网页的分类

1、按所处位置分类

按网页在网站中所处的位置可将网页分为主页和子页两类。打开一个网站时看到的第一个页面就是主页，也称为首页；与主页相链接的其他各个页面就称之为子页。

2、按表现形式分类

按网页的表现形式可将网页分为静态网页和动态网页。

静态网页：指用HTML语言编写的网页，其制作方法简单易学，但缺乏灵活性。 静态 Web 站点由一组相关的 HTML 页和文件组成，这些页和文件驻留在运行 Web 服务器的计算机上。

Web 服务器是响应来自 Web 浏览器的请求以提供 Web 页的软件。当访问者单击 Web 页上的某个链接、在浏览器中选择一个书签、或在浏览器的地址文本框中输入一个 URL 时，便生成一个页请求。

静态 Web 页的最终内容由网页设计人员确定，当接到请求时，内容不发生更改。 动态网页：这类网页使用ASP、PHP和CGI等程序生成，具有动态效果，且大多数以数据库为基础，使用语言为HTML＋ASP 或 HTML＋PHP 或 HTML＋JSP 等。

当 Web 服务器接收到对静态 Web 页的请求时，服务器将该页直接发送到请求浏览器。但是，当 Web 服务器接收到对动态页的请求时，它将作出不同的反应：它会将该页传递给一个负责完成页面的特殊软件。这个特殊软件叫做应用程序服务器，如ASP 页面就要安装IIS服务器。

应用程序服务器读取页上的代码，根据代码中的指令完成页，然后将代码从页上删除。所得的结果将是一个静态页，应用程序服务器将该页传递回 Web 服务器，然后 Web 服务器将该页发送到请求浏览器。当该页到达时，浏览器得到的全部内容都是纯 HTML。

- 4 -

第二章 Dreamweaver静态网页设计实验

实验一 在Dreamweaver中建立一个站点

一、实验目的

1、掌握认识并熟悉Dreamweaver的工作界面。 2、能够自定义工作环境。

3、进行一个简单的网页设计。

二、实验内容

建立一个以自己名字命名的站点，该站点包含三个文件夹，image，css，mdb，四个网页，分别为index.html，jianjie.html，zuopin.html，xuexi.html，设置主页index.html的标题为“本站主页”。其中index.html页面效果图如2-1-1所示。

图2-1-1

三、知识点分解

本实验主要涉及到如下知识点：

1、 在Dreamweaver中建立站点。

2、 在Dreamweaver站点文件列表下新建文件和文件夹。 3、 在网页中插入背景图片。

四、实验步骤

1、创建本地站点步骤：

- 5 -

(1) 打开DREAMWEAVER,选择菜单下[站点]/[管理站点]|/[新建]/|[站点]命令.弹出如图2-1-2所示对话框。

(2) 在弹出“站点定义”对话框的“高级”标签中输入如下信息。

图2-1-2

(3) “站点名称”——输入站点名称如“myweb”。

(4) “本地根文件夹”——选择本地文件夹如“D\\myweb”

(5) “自动刷新本地文件列表”——选中是否每次拷贝文件到本地站点时都自动更新本地文件夹列表，选中该选项。

(6) “默认图像文件夹”——选择图像所放置的文件夹如“‘D\\myweb\\ image” 注意：图像文件夹一定要在站点文件夹下，且一般命名为image或images。

(7) “HTTP地址”——输入实用的完整网站的URL，以便Dreamweaver能检验使用绝对URL网站链接。

(8) “缓存”——选择是否创建一个缓存以提高链接和网站维护任务的速度。选中该选项。

(9) 设置完毕，点击“确认”按钮。

(10) 在Dreamweaver的工作界面右侧“浮动面板组”中的“文件”面板中的“文件”标签下就能看到刚才新建的站点myweb，如图2-1-3所示。

- 6 -

图2-1-3

如果要对所建立的站点进行修改的话，可以选择菜单下[站点]|[管理站点]| [编辑]命令。

2、在站点文件列表下新建文件和文件夹步骤：

(1)在站点文件列表中右键单击“站点—myweb(D:\\myweb)”，在弹出的菜单中选择“新建文件夹”，文件列表中就会出现名为“新建文件夹”的文件夹，将该文件夹命名为image，同样操作建立css文件夹和mdb文件夹。

(2) 在站点文件列表下新建文件有2种方法：

a) 选择[文件]|[新建]，在弹出的“新建文档”对话框中，选择“HTML”，就新建了一个HTML网页，然后再选择[文件]|[保存]或者是按【Ctrl+S】键，将网页名称改为index.html，同样操作建立jianjie.html, zuopin.html，xuexi.html。

b)在站点文件列表中右键单击“站点—myweb(D:\\myweb)”，在弹出的菜单中选择“新建文件”，文件列表中就会出现名为“新建文件”的网页文件，将该文件命名为index.html，同样操作建立jianjie.html, zuopin.html，xuexi.html。

3、在“文件列表”中选中index.html文件，单击右键，在弹出的菜单中选择“设为首页”，回到页面上，在“文档工具栏”中将“标题”更改为“本站主页”。

注意：要想在站点文件列表下自动出现新建的文件和文件夹，前提条件必需在建立站点时选中“自动刷新本地文件列表”，否则的话必需单击“刷新件和文件夹，效果图如图2-1-4所示。

”按钮才能出现新建的文

图2-1-4

- 7 -

4、设计index.html网页步骤：

(1)在站点文件列表中双击index.html，打开该网页。 (2)将光标定位到“文档工具栏”中的“标题”，将标题中的内容改为“本站主页”，如图2-1-5所示。

图2-1-5

(3)单击“属性面板”中的“页面属性”按钮，弹出如图2-1-6所示的“页面属性”对话框，单击“背景图像”后面的“浏览”按钮，添加背景图像即可。

(4)在工作区的“编辑窗口”中输入“欢迎光临我的小站”

图2-1-6

(5)浏览测试。浏览测试的方法有3种，第1种方法是直接按【F12】键，这是最快捷的方法，建议大家以后尽量采用这种方法。第2种方法是单击如上图所示的“文档工具栏”中的

按钮，在弹出的菜单中选择“预览在iexplore”命令后即可在IE浏览器中浏览

当前网页。第3种方法是选择[文件]/[在浏览器中预览]/[iexplore]菜单命令即可在IE浏览器中浏览测试当前网页。

思考题：在设置网页背景图像时，如果图像太小，铺不满整个网页，怎么办？

- 8 -

实验二 在网页中使用文本

一、 实验目的

掌握“插入面板”中的“文本面板”、“常用面板”，“文本菜单”和“文本属性面板”的使用及设置文本格式的方法。

二、实验内容

1、在页面中插入特殊符号，如：“￥和空格符”。

2、在页面中插入日期，要求日期格式为“××××年×月×日 星期× ××: （时）××（分）”。

3、在页面中插入水平线。

4、在新的页面中编辑一个项目列表，如图2-2-1所示，要求：字体为“楷体”、大小为“16pt”、颜色为“黄色”，网页背景颜色为绿色。

图2-2-1

三、实验步骤

内容1的实验步骤如下：

1、将光标定位到插入特殊字符的位置。

2、单击“插入”面板中的“文本”选项卡，如图2-2-2所示。

图2-2-2

3、单击 按钮，展开如图2-2-3所示的“字符”下拉列表。

图2-2-3

- 9 -

4、单击相应的选项即可在Web页面中添加相应的特殊字符，如图2-2-3所示。

图2-2-3

5、插入不换行空格，可执行如下操作之一。

(1) 在“插入”面板的“文本”选项卡中，单击“字符”按钮，在下拉列表中选择“插入不换行空格”选项。

(2) 选择[插入]/[HTML]/[特殊字符]/[不换行空格]菜单命令。 (3) 按【Ctrl+Shift+空格键】键输入。 (4) 将输入法切换到全角状态再按空格键。

内容2的实验步骤如下：

1. 选择[插入]/[日期]菜单命令，或者选择“插入”面板的“常用”选项中，然后单击“插入日期”按钮，则打开如图2-2-4所示的“插入日期”对话框。

图2-2-4

2. 在弹出的“插入日期”对话框中选择星期格式为“星期四”、日期格式为“1974年3月7日”、时间格式为“22：18”。

注意：如果希望网页在保存时系统都会自动更新日期信息，则选中选中

复选框。

4、 单击“确定”按钮即可插入日期。

内容3的实验步骤：

1、在“文档”窗口中，将插入点放在要插入水平线的位置。 2、执行以下操作之一。

(1) 选择[插入]/[HTML]/[水平线]菜单命令； (2) 单击“插入”面板的“HTML”选项卡，再单击“水平线”按钮 ，如图2-2-5所示 。

图2-2-5

内容4的实验步骤:

- 10 -

图2-3-4

7、 在“替换文本”下拉框中输入想要说明的文字，这样的话当鼠标移动到图像上就会出现“替换文本”下拉框中输入的文字。

8、 单击“确定”按钮。

9、 如果所选择的图像文件不在定义的本地站点中，系统会打开如图2-3-5所示的询问对话框，询问是否保存到本地站点目录下。

图2-3-5

10、 在提示对话框中单击按钮，打开“复制文件为”对话框，在该对话框

中选择保存路径，并在“文件名”文本框中更改图像的名称。

11、 单击“确定”按钮即可将所选的图像插入到网页中指定的位置。 12、 选中该图像，打开“属性面板”，将图像的高度改为“700”，边框改为“1”，选择“居中对齐”

按钮。

13、 选取要添加热区的图片，此时属性面板中出现4个热点工具，单击“矩形热点工具”所示。

，在图像上“情感美文”绘制热区后，自动打开“热区”属性面板，如图2-3-6

- 16 -

图2-3-6

14、 在“属性面板”中将“链接”改为meiwen.html，在“替换”中输入“情感美文”，在“目标”下拉列表框中选择“_blank”.

15、 用同样的方法绘制其他热点，并设置相应的链接。

16、 热点链接完成后按【F12】键预览页面，当鼠标移至热区上时即可看到手形图标下面有一个提示文本。

17、 在建立“与我联系”链接时，则要创建电子邮件链接。创建电子邮件链接有两种方法。

方法一：

(1) 在“文档”窗口的“设计”视图中，选择“与我联系”热区。 (2) 执行下列操作之一插入该链接：

a) 选择[插入]?[电子邮件链接]菜单命令；

b) 在“插入”栏的“常用”选项中，单击“插入电子邮件链接”按钮 。 (3) 打开“电子邮件链接”对话框，如图2-3-7所示。

图2-3-7

(4) 在“文本”文本框中输入显示在Web页面中的链接文本，如“与我联系”。 (5) 在“E-Mail”文本框中输入要链接到的电子邮箱地址，如“csygold@163.com”。 (6) 单击“确定”按钮。 方法二：

- 17 -

使用“属性面板创建电子邮件链接，具体操作如下。

(1) 在“文档”窗口的“设计”视图中选择要建立电子邮件链接的文本或图像，如“与我联系”。

(2) 在属性面板的“链接”文本框中，输入“mailto:”，然后在它后面输入电子邮件地址，如“csygold@163.com”，在IE浏览器中单击该链接的显示效果。

18、按【F12】键，预览。

注意：此时电子邮件的发送是采用OutExpress或者是OutLook发送的。所以单击“与我联系”时，会自动创建OutExpress连接向导。

内容2的实验步骤:

1、 打开“hunyin.html”页面，选择[文件]\\[导入]\\[表格式数据]，弹出如图2-3-8所示的“导入表格式数据”对话框。

图2-3-8

2、 单击“数据文件”后面的按钮，选择“fa.txt”文件，定界符选择“Tab”，

单击“确定”按钮。

在Dreamweaver 8中还可以建立命名锚记的链接，也就是锚链接。使用命名锚记的链接可以跳转至文档内的特定位置。建立锚链接分为创建命名锚记和创建到该命名锚记的链接两部分。

3、 创建命名锚记：将插入点放在需要命名锚记的地方，如本例中“中华人民共和国婚姻法”。

4、 执行下列操作之一。

a) 选择[插入]?[命名锚记]菜单命令；

b) 在“插入”栏的“常用”选项中，单击“命名锚记”按钮 。

5、 在打开的“命名锚记”对话框的“锚记名称”文本框中，输入锚记名称，如top，并单击“确定”按钮，锚记标记出现在插入点处。

6、 创建到该命名锚记的链接：选择要创建命名锚记的文本或图像，如本例中的“再看一遍”。

7、 在属性面板的“链接”文本框中，输入一个数字符号“#”和锚记名称，如“#top” 。

注意：若要链接到当前文档中名为“top”的锚记，则输入“#top”。 若要链接到同一文件夹内其他文档中的名为“top”的锚记，则输入“index.html#top”形式的锚记引用。

8、选中“返回首页”，打开“属性面板”，将“大小”改为“16px”，对齐方式改为“右对齐”。

9、单击“链接”文本框后的

按钮，在打开的“选择新文件”对话框中选择要链

- 18 -

接的文件，这里选择“index.html”（即首页），同时在“相对于”下拉列表框中选择相应的“站点根目录”选项。

10、单击按钮，在弹出的“页面属性对话框”中，“分类”选择“链接”，将“下划线样式”改为“始终无下划线”，单击“确定”按钮。

11、按【F12】键，在IE浏览器中单击“再看一遍”链接，则返回到“中华人民共和国婚姻法”（命名锚记处），单击“返回首页”链接，则打开index.html。

思考题：大家经常在网页上会看到文字“加入收藏”，请问如何实现单击“加入收藏”

可以将该网页加入到浏览器的收藏夹中？

- 19 -

实验四 网页图像的应用

一、实验目的

1、通过本例要求掌握常见的图像格式及图像的插入方法。 2、能够修改图像属性，利用外部图像处理软件编辑图像。 3、掌握图像导航条的制作。

4、掌握将Word中的文字复制到Dreamweaver中的方法。 5、掌握在页面中创建轮换图像。

二、实验内容

某站点下有如下4个网页，index.html，meiwen.html，aiqing.html，hunyin.html， 1、meiwen.html效果图如图2-4-1所示，当鼠标移到每张图像上时会显示另外一张图像，单击“本站首页”图像时会打开index.html，文章内容在“执着.doc”中。

图2-4-1

2、aiqing.html效果图如图2-4-2所示，当鼠标移到图像上时会显示tiane1.jpg图像，同时显示文字“在你身边，我享受被保护的感觉??”，单击该图像返回首页，文章内容在“爱情人生.doc”中。

- 20 -

图2-4-2

三、知识点分解

1、由图2-4-1可以看出，该页面最上面导航条，导航条下面是水平线，正文的格式与“执着.doc”格式一致。在做meiwen.html之前，要利用图像处理软件做出图所示的导航按钮，注意要做10个按钮图像，并且保存为网页中能使用的图像格式。

2、由图2-4-2可以看出，该页面首先导入了word文档的内容，然后插入了轮换图像，设置图像与文字的环绕方式。

四、实验步骤

内容1的实验步骤：

导航条由图像或图像组组成，这些图像的显示内容随操作不同而不同。导航条通常为在站点上的页面和文件之间移动提供一条简捷的途径。导航条可以进行复制，可以对导航条附加行为以应用于不同的网页。一个网页中只允许有一个导航条。导航条项目有如下4种状态：一般、滑过、按下、按下时鼠标经过。在创建导航条时，不必包含所有这4种状态的导航条图像，可以只选用“一般”和“按下”或“滑过”这两种状态。

1、打开meiwen.html，将光标定位到要插入导航条的位置。 2、执行下列操作之一打开“插入导航条”对话框：

(1) 单击“插入栏”的“常用”选项卡，并单击“插入导航条”按钮 ，弹出如图2-4-3所示对话框；

(2) 选择[插入]\\[图像对象]\\[导航条]菜单命令。

图2-4-3

3、在“插入导航条”对话框中进行具体的设置。设置的具体方法如下。 a) 在“项目名称”文本框中，输入导航条项目的名称（如sy）。该名称只能包含字母和数字且不能以数字开头。

b) 在“状态图像”（必需）文本框后，单击c) 在“鼠标经过图像”文本框后，单击

按钮选择最初将显示的图像。 按钮选择当一般图像显示时如果鼠

- 21 -

标指针滑过项目所显示的图像。

d) 在“替换文本”文本框中，输入项目的描述性名称。

e) 在“按下时，前往的 URL”文本框中，单击

按钮选择要打开的链接文件（如

index.html）然后从右侧的下拉列表中选择打开文件的位置。

f) 选中

复选框，可在载入页面时下载图像。如果未选择此选项，在鼠

标指针滑过鼠标经过图像时可能会出现延迟。

4、单击

按钮可向导航条添加另一个项目，然后重复上述步骤定义该新项目。若要

按钮删除即可。单击

减少导航元件，可先在导航元件列表中选择要删除的项，再单击按钮或

按钮，可以改变导航条元件的出现顺序。本例中导航条项目顺序为“sy”、“jdwz”、

“grwz”，“rszl”。

5、完成导航条项目的添加及定义后，单击

按钮，完成的导航条添加。

6、选中导航条，单击“属性面板”中的“居中”按钮。

7、将光标定位到导航条后面，敲回车，然后单击“插入”面板的“HTML”选项卡，再单击“水平线”按钮 ，插入水平线。

8、打开“爱情人生.doc”文件，选择“Ctrl+A”,”Ctrl+C”。

9、将光标定位到水平线后面，敲回车，选择[编辑]\\[带格式粘贴]菜单命令，即将word文档内容带格式一起粘贴到网页中。

10、按【F12】键，预览。

内容2的实验步骤：

轮换图像即鼠标经过图像，是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。鼠标经过图像由两个图像组成，主图像（首次载入页时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。鼠标经过图像中的两个图像其大小应相等，如果两个图像大小不同，Dreamweaver将自动调整第二个图像的大小以匹配第一个图像的大小。

1、 打开aiqing.html，选择[文件]\\[导入]\\[Word文档],在打开的“打开”对话

框中，选择要添加的文件,如本例中的“爱情人生.doc”，然后单击档的内容将出现在页面中，如图2-4-4所示。

按钮，Word文

图2-4-4

- 22 -

2、 选中“爱情人生”，打开“属性面板”，将“字号”改为“36px”，“颜色”为“红色”。

3、 将光标定位到“爱情人生”后面，敲回车，选中后面的文字，单击“属性面板”中的“左对齐”按钮。

4、 将插入点放置在要显示鼠标经过图像的位置 5、 使用以下方法之一插入鼠标经过图像：

a) 在“插入栏”中单击“常用”选项卡，然后单击“图像\\鼠标经过图像”按钮如图2-4-5所示；

b) 在“插入栏”中单击“常用”选项卡，然后将

按钮拖到“文档”窗口中的所

，

需位置；

c) 选择[插入]\\[图像对象]\\[鼠标经过图像]菜单命令。

6、 执行以上操作后都将打开“插入鼠标经过图像”对话框，在该对话框中完成各项参数的设置操作，如图2-4-6所示

图2-4-5 图2-4-6

a) 在“图像名称”文本框中输入图像的名称。 b) 在“原始图像”文本框后单击

按钮并选择载入页面时显示的图像，如本例

中tiane.jpg，或直接在文本框中输入图像文件的路径。

c) 在“鼠标经过图像”文本框后单击

按钮并选择鼠标指针滑过原始图像时

显示的图像，如本例中tiane1.jpg,或在文本框中输入图像文件的路径。

d) 如果希望图像预先载入浏览器的缓存中，以便将鼠标指针滑过图像时不发生延迟，可以选中

复选框。

e) 在“替换文本”（可选）文本框中输入描述该图像的文本, 如本例中“在你身边，我享受被保护的感觉??”。

f) 在“按下时，前往的URL”文本框中单击例中选择“index.html”，或者直接输入文件的路径。

- 23 -

按钮并选择要链接的文件，如本

7、设置完成后，单击按钮关闭“插入鼠标经过图像”对话框。

8、选中该图像，打开“属性面板”，将“对齐”下拉列表框中的值改为“右对齐”。 注意：“图像”属性面板的“对齐”下拉列表中设置图像与周围文字的对齐方式，而

是设置图像在网页中的位置，左边，中间还是右边。

9、按【F12】键，预览。

思考题：在做网页时，经常需要用图像处理软件来制作图像，如本实验中的导航条图像，但是在将该图像插入到Dreamweaver中会经常遇到图像不能紧密的结合在一起，如下图所示，怎么才能将他改成图2-4-1所示的导航条的效果呢？

- 24 -

实验五 网页表格操作

一、实验目的

1、掌握表格的创建、结构调整与美化。 2、熟悉表格与单元格的主要属性及其设置。 3、掌握在表格和单元格中插入文字或图片。 4、掌握格式化表格和排序表格。

二、实验内容：

1、制作出如图2.5.1所示的表格。

图2-5-1

三、知识点分解

本次实验主要涉及到表格的基本操作，注意表格最终的效果需要按总分项进行降序排序。

四、实验步骤

1、在Dreamweaver中新建一个文档。

2、将插入点置于需要插入表格的位置。如果文档是空白的，则只能将插入点放置在文档的开头。执行下列操作之一打开“表格”对话框，如图2-5-2所示。

(1)选择[插入]\\[表格]菜单命令。

(2)在“插入栏”的“常用”选项卡中单击“表格”按钮。

- 25 -

(3)按【Ctrl+Alt+T】键。

图2-5-2 “表格”对话框

3、在表格大小中输入如下数据——行：4列：5，表格宽度：500像素，边框粗细：1像素，单元格边距: 1像素,单元格间距：1像素。 4、页面选择第三个——顶部。

5、辅助功能中输入如下数据——标题：学生成绩表，对齐标题：居中。 6、在表格的第一行输入如下数据：学号、语文、数学、英语、总分。 7、在表格的第二行输入如下数据：1001、87、85、65、237。 8、在表格的第三行输入如下数据：1002、81、67、57、205。 9、在表格的第四行输入如下数据：1003、82、65、78、225。

10、选择[命令]\\[格式化表格]菜单命令，在弹出的”格式化表格”对话框中选择“AltRows：Green&Yellow”，然后将行颜色改为第一种：#FFCC00，第二种：#CC0033，其余的内容不变，单击“确定”按钮。

11、选中表格的每一列，将其宽度设为100像素，高100像素，水平：居中，垂直：居中。

12、将光标定位到第一行的第5个单元格，打开“属性面板”，将背景设为“b1.jpg” 13、选择整个表格，打开“属性面板”，将边框颜色改为“红色”

14、选择整个表格，然后选择[命令]\\[排序表格]菜单命令，弹出“排序表格”对话框，进行如下设置：排序按“列5”，顺序：按“数字排序”，“降序”，单击“确定”按钮。 15、按【Ctrl+S】保存该网页。 16、按【F12】键预览。

思考题：怎样使得表格在不同尺寸浏览器、不同分辨率下都能达到铺满整个浏览器窗口的效果呢？

- 26 -

实验六 利用表格进行网页布局

一、实验目的

1、了解网页设计常用的几种版式；

2、掌握绘制及编辑布局表格和布局单元格；

3、掌握利用布局表格的嵌套来设计较复杂的版面； 4、掌握在布局表格中添加具体内容 ； 5、掌握设置布局表格和单元格属性 。

二、实验内容

利

用

布

局

表

格

制

作

如

图

2-6-1

所

示

的

网

页

。

图2-6-1

- 27 -

三、知识点分解

由上图可知，该网页的结构属于拐角型，先画出该网页的版式结构，如图2-6-2所示。 LOGO BANNER 导航菜单 导 航 网页内容 网页内容 版权信息 图2-6-2

由图2-6-2我们可以知道在进行该网页布局时，先要布最外面的表格，然后布最上端的表格，用来放置LOGO和BANNER，然后再布一个单元格放置导航菜单，接着下面布三个并排的表格，分别放置左边的导航，中间的网页内容，右边的网页内容，最下面再布一个单元格，放置版权信息。 四、实验步骤

1、 新建一个文档，打开“属性面板”，单击按钮，在弹出的页面属性对话框中将“背景图像”设为“bg-greenline.jpg”。

2、 将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，如图2-6-3所示。

图2-6-3

3、单击布局工具栏中的按钮，进入布局模式。

4、首次执行以上操作之一后，会打开“从布局模式开始”对话框，在该对话框中给出在“布局模式”下创建表格的方法的提示。单击

按钮即可切换到布局模式。切换到

“布局”模式后，在“文档”窗口的顶部会出现标有“布局模式”的蓝色长条。

5、在“插入”栏的“布局”选项卡中单击“绘制布局表格”

按钮 。

6、将鼠标光标放置在页面上，此时鼠标光标变为加号（+）。

7、将鼠标移到要创建表格的左上角位置并按住鼠标不放拖动到要创建表格的右下角后释放鼠标。

8、选中该表格，打开属性面板，将表格的宽度设为“783px”，高度设为“845px”。

- 28 -

9、在“插入”栏的“布局”选项卡中单击“绘制布局表格”按钮 。将鼠标光标

放置在刚才绘制的表格的左上角，拖动鼠标，绘制一个嵌套表格，规格为：宽度“783px”，高度“101px”。

10、选中该表格，切换到“标准”模式，将背景图像改为“log1-text.jpg”。

11、再切换到“布局”模式，在“插入”栏的“布局”选项卡中单击“绘制布局单元格”按钮

。选中该单元格，打开属性面板，将单元格的宽度设为“111px”，高度设为“101px”，

水平对齐方式设为“左对齐”，垂直对齐方式设为“顶端”。

12、将图像“niux-home.gif”插入到该单元格，打开属性面板将其宽设为“35”，高设为“30”，对齐设为“绝对居中”，在紧接着该图像的旁边写上文字“加入收藏”，同时将该文字设为：字体“宋体”，大小“12px”。

13、将“插入”栏中的“布局”选项卡改为“文本”选项卡，单击“换行符”按钮

，

光标自动定位到下一行。

14、将“插入”栏中的“文本”选项卡改为“布局”选项卡，进入“布局”模式，重复步骤11、12两次。

15、在“插入”栏的“布局”选项卡中单击“绘制布局单元格”按钮

。选中该单

元格，打开属性面板，将单元格的宽设为“783px”，高设为“29px”，水平对齐设为“居中对齐”，垂直设为“居中”，背景颜色设为“#FF9900”。

16、将光标定位到该单元格，输入文字“首页”，然后将“插入”栏中的“布局”选项卡改为“文本”选项卡，单击“不换行空格”按钮

两次，出现了两个空格，紧接着输入

两次，紧接着

“|”（该符号用键盘上的“shift+\\”输入），再单击“不换行空格”按钮

输入“国内旅游”，后面文字按相同方法输入，选中导航栏的所有文字，将其设为：字体“宋体”，大小“14px”，颜色“#000099”。

17、紧接导航栏的布局单元格，在它下方绘制一个宽为“181px”，高为“665px”，颜色为“#dde56c”的布局表格，用来放左边导航内容。

18、在该布局表格内绘制一个宽“181px”，高“73px”的布局单元格，然后将“ygdd.jpg”图像插入到该单元格，同时设该图像的宽为“181px”，高为“73px”。

19、紧接上面的布局单元格，在它下方绘制一个宽“181px”，高“60px”，水平对齐为“居中对齐”，垂直为“居中”的布局单元格，输入文字“人文地理”，同时将该文字设为：字体“楷体”，大小“18px”，颜色“#CC0033”。

20、紧接上面的布局单元格，在它下方绘制一个宽“181px”，高“98px”，的布局表格。 21、在上面的布局表格内绘制一个宽“26px”，高“96px”，的布局单元格。 22、在上面的布局单元格右边绘制一个宽“153px”，高“24px”，垂直“居中”的布局单元格，输入文字“□自然环境”(“□”的输入：在“智能abc”输入法下按键盘符号v+数字1)，将其设为：字体“宋体”，大小“14px”。

23、在上面的布局单元格下面绘制一个宽“153px”，高“24px”，垂直“居中”的布局单元格，输入文字“□气候变化”，将其设为：字体“宋体”，大小“14px”。

24、重复步骤22两次，同时将输入的文字分别改为“□人口、语言”，“□宗教、信仰”。 25、紧接上面的布局表格，在它下方绘制一个宽“181px”，高“60px”，水平对齐为“居

- 29 -

中对齐”，垂直为“居中”的布局单元格，输入文字“民族风情”，同时将该文字设为：字体“楷体”，大小“18px”，颜色“#CC0033”。

26、重复步骤20、21、22、23，将输入的文字分别改为“□民间风俗”，“□服饰与音乐”，“□民族节日”，“□生活习惯”。

27、重复步骤25，将输入的文字改为“旅游指南”。

28、重复步骤19、20、21、22、23，将输入的文字分别改为“□自驾车旅游须知”，“□潜水的医学知识”，“□散客旅游指南”，“□自助游常识”。

29、左边的导航做好了，将光标定位到中间的网页内容区，绘制一个宽“418px”，高“665px”，颜色为“#FFFFFF”的布局表格。

30、在该布局表格内绘制一个宽“418px”，高“239px” 的布局表格。 31、在该布局表格内绘制一个宽“126px”，高“239px”，垂直为“居中”的布局单元格，然后将“love.jpg”图像插入到该单元格，同时设该图像的宽为“126px”。

32、在上面的布局单元格右边绘制一个宽“278px”，高“239px”的布局表格。 33、在上面的布局表格内绘制一个宽“278px”，高“42px”，水平对齐“居中对齐”，垂直“居中”的布局单元格，将“plane.jpg” 图像插入到该单元格。

34、返回到 “标准”模式，选择[插入]/[表格]菜单命令，插入一个5行4列，宽“278px”，高“194px”，边框“1”的表格，将第1列宽设为“54px”，第2列宽设为“110px”，第3列宽设为“52px”，第4列宽设为“50px”，每行高都设为“30px”，单击第一单元格，设置：水平“居中对齐”，垂直“居中”，输入文字“出发地”，将文字设为：字体“宋体”，大小“12px”，颜色“#990066”。

35、按照同样的方法，完成该表格的制作，且将其余各行文字设为：字体“宋体”，大小“12px”，颜色“#0000CC”。。

36、紧接着第29步的布局表格的下方绘制一个宽“418px”，高“52px”，背景图像为“fj01.jpg”的布局表格，然后再在该布局表格内偏左的位置绘制宽“156px”，高“52px”，水平对齐“居中对齐”，垂直“居中”的布局单元格，输入文字“风景名胜快览”，将文字设为：字体“楷体”，大小“24px”，颜色“#FF0000”。

注意：设置表格背景图像时一定要从“布局”模式下退出，进入“标准”模式进行设置。 37、紧接上面的布局表格，在它下方绘制一个布局表格，在该布局表格内绘制一个宽“418px”，高“10px”的布局单元格。

38、在上面布局单元格的下面绘制一个宽“15px”，高“95px”的布局单元格，再在紧靠该单元格的右边绘制一个宽“120px”，高“95px”的布局单元格，在该单元格中插入图像“fj01-zjj.jpg”，将该图像设为：宽“120px”，高“95px”。

39、重复步骤38两次，分别将图像改为“fj03-tyhj.jpg”，“fj02-pu.jpg”。 40、在3个图像所在的布局单元格的正下面绘制3个宽“120px”，高“27px”，水平对齐“居中对齐”，垂直“居中”的布局单元格，分别输入文字“张家界”、“天涯海角”、“昆明”，并将文字设为：字体“宋体”，大小“12px”，颜色“#000099”。

41、重复步骤38、39、40，将图像分别改为“fj06-sldw.jpg”、“fj05-sx.jpg”、“fj04-xm.jpg”，文字改为“森林公园”、“三峡”、“四川”。

42、紧接上面的布局单元格，在它下方绘制一个水平“居中对齐”，垂直“居中”的布局单元格，插入图像“banner.gif” ，并将其宽设为“410px”。

43、中间的网页内容做好了，将光标定位到右边的网页内容区，绘制一个宽“184px”，高“665px”，颜色为“#99CC00”的布局表格。

44、在该布局表格内绘制一个宽“184px”，高“255px”，颜色为“#FFFFFF” 的布局表格。

- 30 -

45、在该布局表格内绘制一个宽“184px”，高“49px”，背景图像为“b1.jpg”的布局表格，再在该布局表格内绘制一个宽“86px”，高“49px”，垂直“居中”的布局单元格。输入文字“最新资讯”，并将文字设为：字体“楷体”，大小“18px”，颜色“#CC0033”。

46、紧接上面的布局表格，在它下方绘制一个宽“6px”，高“41px”水平“居中对齐”，垂直“居中”的布局单元格，插入图像“gw01.gif”，在紧靠该单元格的右边绘制一个宽“172px”，高“41px”。垂直“居中”的布局单元格，输入文字“第四届天目湖南山竹海登山节盛大开幕”，并将文字设为：字体“宋体”，大小“12px”。

47、重复步骤46四次，分别将文字改为“市旅游局发布2008年旅游质监情况”、“交通渐趋便利 杭州-千岛湖-黄山游线蓄势待发”、“常州旅游券发放现场拥挤被指“暗箱操作””、“早春二月“踏青游” 南方三城市受网友热捧”。

48、紧接上面的布局单元格，在它下方绘制一个宽“184px”，高“20px”，水平“右对齐”，垂直“居中”的布局单元格，插入图像“more1.jpg”。

49、紧接上面的布局单元格，在它下方依次绘制五个宽“184px”，高“65px”， 水平“居中对齐”，垂直“居中”的布局单元格，第一个布局单元格内输入文字“友情链接”，字体“楷体”，大小“18px”，颜色“#CC0033”；第二个布局单元格内插入图像“yqlogo01.jpg”，并将图像设为：宽“153px”，高“48px”；第三个布局单元格内插入图像“yqlogo02.gif”；第四个布局单元格内插入图像“yqlogo03.gif”；第五布局单元格内插入图像“yqlogo04.gif”；并将图像设为：宽“153px”，高“48px”。

50、右边的网页内容做好了，将光标定位网页的版权信息区，绘制一个宽“783px”，高“34px”，颜色为“#cccc33”，水平“居中对齐”，垂直“居中”的布局单元格，输入文字“Copyright ?阳光旅游公司 2008”。

51、将“插入”栏中的“布局”选项卡改为“文本”选项卡，单击“换行符”按钮

，

光标自动定位到下一行，输入文字“E—mail：*********制作者：**********”。

52、选中这两行文字，将其设为：字体“宋体”，大小“12px”。 53、选中最外面的表格，切换到“标准”模式，打开“属性面板”，将对齐改为“居中对齐”。

54、按【F12】键，预览。

思考题：很多同学在做完这个实验后，预览网页时，页脚区（版权信息）与上面的主体区不能很好的结合起来，中间会有空隙，怎么解决这个问题呢？

- 31 -

实验七 利用层进行网页布局

一、实验目的

1、掌握层的绘制、选择、移动和对齐； 2、掌握“层”属性面板的设置； 3、掌握利用层来设计网页的版面； 4、掌握层的显示和隐藏； 5、掌握层的堆叠和删除。

二、实验内容

利用层布局制作如图2-7-1所示的网页。

图2-7-1

三、 实验步骤

1、 绘制层

绘制层有如下3种方法：

(1)将插入点放置在“文档”编辑窗口中，然后选择[插入]\\[布局对象]\\[层]菜单命令将自动在插入点插入一个层。

(2)在“插入栏”的“布局”插入栏中单击“绘制层”(3)在“插入栏”的“布局”插入栏中单击“绘制层”鼠标可绘制一个层。

- 32 -

按钮，拖动鼠标绘制一个层。 按钮，在文档编辑窗口中单击

2、将光标定位到层layer1内，插入图像“banner.jpg”。

3、将光标放在层layer1内，然后按下绘制层按钮，当光标变成“十字形”时，按Alt键直接在层layer1内绘制一个嵌套层layer2，插入图像“logo.gif”。

4、紧接着层layer1，在其下方再绘制五个层，在“插入栏”的“布局”插入栏中单击“绘制层”按钮，按住【Ctrl】键拖动连续绘制五个层，使这五个层大致处于同一区域。

5、选择层单个层的方法有3种。 (1)在文档编辑区中单击层边框。

(2)在层中单击鼠标左键，再单击该层的选择柄。

(3)打开“层”面板，如图2-7-2所示，在“层”面板中单击要选择的层的名称。 注意：此时如果没有出现“层”面板，则选择[窗口]\\[层]菜单，在右侧的浮动面板中就会出现“层”面板。

图2-7-2

用上述方法中的任意一种方法，选择“layer3”，插入图像“shouye.jpg”，选择“layer4”，插入图像“xiangce.jpg”，选择“layer5”，插入图像“yinyue.jpg”，选择“layer6”，插入图像“riji.jpg”，选择“layer7”，插入图像“liuyan.jpg”。

6、选择多个层有2种方法。

(1)按住【Shift】键，在需要选择的多个层中单击，同时“层”面板中选择的层以反白显示。

(2)按住【Shift】键，在“层”面板中单击要选择的多个层的名称。 选择“layer3”，“layer5”和“layer7”，执行[修改]\\[排列顺序]\\[左对齐]，所有选定层的左边框会与最后一个选定层的左边框处于同一垂直位置。 7、 选择“layer2”和“layer4”，执行[修改]\\[排列顺序]\\[右对齐]，所有选定层的右边框会与最后一个选定层的右边框处于同一垂直位置。 8、 在层“layer3”的右边，绘制层“layer8”，插入图像“shukuang.jpg”。 9、 将光标放在层“layer8”内，然后同时按下Alt键和“绘制层”

按钮，绘制层

“layer9”，使得层“layer9”处于顶端的正中间位置，插入图像“biaoti.gif”。 10、 将光标放在层“layer8”内，同时按下Alt键和“绘制层”

按钮，在层“layer9”

的下方绘制层“layer10”，然后选择[插入]/[表格]菜单命令，插入一个12行1列，有边框的表格，插入后调整表格的大小，使得它跟层“layer10”的大小一致。 11、 在层“layer8”的左边，层“layer7”的下方，绘制层“layer11”，然后选择

- 33 -

[插入]/[表格]菜单命令，插入一个6行1列，有边框的表格，插入后调整表格的大小，使得它跟层“layer11”的大小一致。

12、 在该表格的第一个单元格输入文字“友情链接”，并设置背景颜色为“#66CCFF”。 13、 层“layer11”的下方再绘制层“layer12”，层“layer12”的宽度与层“layer1”的宽度一致。

14、 在层“layer12”中输入文字“版权所有**********”。 15、 “层”面板最终效果如图2-7-3所示。

图2-7-3

16、按【F12】键，预览。

思考题：做完这个实验后，很多同学会发现，该网页的内容不能在窗口的中间显示，怎么解决这个问题？

- 34 -

实验八 行为和图层的应用

一、实验目的

1、掌握行为的概念；

2、掌握添加、修改和删除行为；

3、掌握 “显示隐藏层”行为的应用； 4、掌握“时间轴”行为的应用； 5、掌握“拖动层”行为的应用； 6、掌握利用行为创建下拉菜单；

二、实验内容

1、浮动广告的制作：制作如图2-8-1所示的网页，要求网页载入时该广告就在网页上面不断的漂浮，“金庸群侠传3”广告图像移动的位置为：网页窗口的左上角——>网页窗口的底部中间——>网页窗口的右上角。

图2-8-1

2、下拉菜单的制作（1）：制作如图2-8-2所示的下拉菜单，其中“开发商介绍”下拉菜单项目“华丽房地产”，“成功案例”；“网上看房”下拉菜单项目“样板间”，“效果间”，“价格表”，要求鼠标移动到菜单图像时显示对应的下拉菜单，移出时下拉菜单消失。

- 35 -

图2-8-2

3、图像拖动的制作：制作如图2-8-3所示的网页，要求选中某个水果，可以将该水果放到篮子中，放入篮后就看不见该水果了，图2-8-4为把苹果放到篮子的效果图。

图2-8-3 图2-8-4

4、下拉菜单的制作（2）：制作如图2-8-5所示的下拉菜单。

图2-8-5

三、 知识点分解

实验1涉及到的知识点有层和时间轴行为，利用层+时间轴实现动画效果；实验2涉及到知识点有层，层的定位，层的嵌套，显示隐藏层行为，利用表格来实现层的定位，使层显示在文档窗口的正中间，利用层的嵌套实现父层移动子层也随之移动的效果，利用层+显示隐藏层行为实现层的出现还是消失的效果；实验3涉及到的知识点有层和拖动层行为，利用

- 36 -

层+拖动层行为实现在物品在网页上的随意拖动。

四、 实验步骤

内容1的步骤：

1、 新建一个文档，打开“属性面板”，单击“页面属性”按钮，将该网页的背景图像设为“1.jpg”（热带鱼图像）。

注意：该图像的大小为800×600，所以设为背景图像时会呈现平铺的效果。

2、 将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，单击“绘制层”

按钮，在网页的右边绘制一个层layer1。

3、 将光标定位在layer1层内，选择[插入]/[图像]菜单，将图像41.jpg（“海底世界”四个字图像）插入带该层，调整层的大小，使之适应图像的大小。

4、 单击“绘制层”

按钮，在网页的左边绘制一个层layer2；将光标定位在layer2

层内，选择[插入]\\[图像]菜单，将图像37732.gif（“金庸群侠传3”图像）插入该层，调整层的大小，使之适应图像的大小。

5、 选择[窗口]/[时间轴]，调出“时间轴面板”，如图2-8-5所示。

图2-8-5

6、 在文档窗口选中layer2层，将该层拖到时间轴上的第1帧，选择最后一帧，将layer2层拖到网页窗口的右上角，同时将最后一帧的位置拖到第30帧。

7、 此时大家会发现该层的运动路径是条直线，现在我们要将其运动路径改为曲线。在时间轴面板上第15帧的位置单击右键，在弹出的快捷菜单中选择“增加关键帧”。

8、 单击第15帧，选中layer2层，将其拖到网页窗口的底部中间。

9、 勾选时间轴面板上的“自动播放”复选框，会弹出如图2-8-6所示的对话框，说明网页载入时时间轴动画便开始播放，单击“确定”按钮。

图2-8-6

10、 勾选时间轴面板上的“自动播放”复选框，会弹出如图2-8-7所示的对话框，说明该时间轴动画播放时会循环，单击“确定”按钮。

- 37 -

图2-8-7

11、 将“Fps”改为“5”，时间轴面板的最终效果图如图2-8-8所示。

图2-8-8

12、 按【F12】键，预览。

内容2的步骤：

1、 新建一个文档，将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，单击“插入表格”

按钮，插入1行3列，宽度“390px”，边框“0”

的表格。

2、 单击每个单元格，打开属性面板，设置单元格宽“130px”，高“30px”。

3、 将光标定位在第一个单元格内，选择[插入]/[布局对象]/[层]，将层layer1插入到该单元格中，同时设置该层宽“130px”，高“30px”。

4、 将光标定位在layer1层，选择[插入]/[图像]，将图像“button-1.gif”插入到layer1层中。

5、 重复步骤3、4，在第二个单元格内插入层layer2，将图像“button-2.gif” 插入到layer2层中。

6、 重复步骤3、4，在第三个单元格内插入层layer3，将图像“button-3.gif” 插入到layer3层中。

7、 将光标定位在layer1层，选择[插入]/[布局对象]/[层]，在layer1层中绘制一个嵌套层layer4。

8、 将光标定位在层layer4中，单击“布局”工具栏中的“插入表格”

按钮，插

入4行1列的表格，在第1个单元格中插入图像“button-11.gif”，第2个单元格中插入图像“button-12.gif”，第3个单元格中插入图像“button-13.gif”，第4个单元格中插入图像“button-14.gif”。

9、 将光标定位在layer2层，选择[插入]/[布局对象]/[层]，在layer2层中绘制一

- 38 -

个嵌套层layer5。

10、 将光标定位在层layer5中，单击“布局”工具栏中的“插入表格”

按钮，插

入2行1列的表格，在第1个单元格中插入图像“button-21.gif”，第2个单元格中插入图像“button-22.gif”。

11、 将光标定位在layer3层，选择[插入]/[布局对象]/[层]，在layer3层中绘制一个嵌套层layer6。

12、 将光标定位在层layer6中，单击“布局”工具栏中的“插入表格”

按钮，插

入3行1列的表格，在第1个单元格中插入图像“button-31.gif”，第2个单元格中插入图像“button-32.gif”， 第3个单元格中插入图像“button-33.gif”，最终效果如图2-8-9所示。

图2-8-9

13、 选择[窗口]/[行为]，打开“行为”面板，如图2-8-10所示。

图2-8-10

14、 选中层图像“button-1.gif”，在“行为”面板中单击“添加行为”按钮，

在弹出的菜单中选择“显示隐藏层”，打开“显示隐藏层”对话框，如图2-8-11所示，选中层layer4，单击“显示”按钮，再单击“确定”按钮。

- 39 -

图2-8-11

15、回到“行为”面板，将事件改为“onMouseOver”。 16、再单击“添加行为”

按钮，在弹出的菜单中选择“显示隐藏层”，打开“显示

隐藏层”对话框，选中层layer4，单击“隐藏”按钮，再单击“确定”按钮，然后回到“行为”面板，将事件改为“onMouseOut”。

17、选中层图像“button-2.gif”，在“行为”面板中单击“添加行为”

按钮，在

弹出的菜单中选择“显示隐藏层”，打开“显示隐藏层”对话框，选中层layer5，单击“显示”按钮，再单击“确定”按钮，回到“行为”面板，将事件改为“onMouseOver”。

18、再单击“添加行为”

按钮，在弹出的菜单中选择“显示隐藏层”，打开“显示

隐藏层”对话框，选中层layer5，单击“隐藏”按钮，再单击“确定”按钮，然后回到“行为”面板，将事件改为“onMouseOut”。

19、选中层图像“button-3.gif”，在“行为”面板中单击“添加行为”

按钮，在

弹出的菜单中选择“显示隐藏层”，打开“显示隐藏层”对话框，选中层layer6，单击“显示”按钮，再单击“确定”按钮，回到“行为”面板，将事件改为“onMouseOver”。

20、再单击“添加行为”

按钮，在弹出的菜单中选择“显示隐藏层”，打开“显

示隐藏层”对话框，选中层layer6，单击“隐藏”按钮，再单击“确定”按钮，然后回到“行为”面板，将事件改为“onMouseOut”。

21、单击最外面的表格，打开“属性面板”，将“对齐”改为“居中对齐”，然后分别选中layer4，layer5，layer6，打开“属性面板”，将“可见性”改为“hidden”。

22、按【F12】键，预览。

内容3的步骤：

1、新建一个文档，将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，按住【Crtl】键的同时单击“绘制层”

按钮，连续绘制4个层layer1，

layer2，layer3，layer4，放置好4个层的位置。

2、选择层layer2，layer3，layer4，选择[修改]/[排列顺序]/[左对齐]菜单，设置这3层垂直方向对齐。

3、选中层layer1，打开“属性面板”，将“Z轴”改为“5”。

- 40 -

4、单击网页空白处，打开“行为”面板。单击“添加行为”单中选择“拖动层”，弹出如图2-8-12所示的对话框。

按钮，在弹出的菜

图2-8-12

5、单击“基本”选项卡，将“层”设为“layer2”，再单击“高级”选项卡，将“拖动控制点”设为“整个层”,”拖动时”，勾选“将层移至最前，然后”，“恢复Z轴”，如图2-8-13所示，再单击“确定”按钮。

图2-8-13

6、回到“行为”面板，将事件改为“onMouseDown”。 7、重复步骤4，5，6两次，分别将“层”设为“layer3”，“layer4”即可。 8、按【F12】键，预览。

内容4的步骤：

1、 打开要实现下拉菜单效果的文档。

2、 在打开的页面上选择“动画作品”文字，然后在【行为】面板中单击【添加行为】按钮，在弹出的菜单中执行【显示弹出菜单命令】，这样弹出【显示弹出菜单】对话框，在其中的【文本】参数中输入“FLASH MV”，在【链接】参数中输入要链接的文件，这就是下拉菜单的第1个菜单项，然后单击【菜单】参数右边的【添加项】按钮新增一个菜单项，再在文本中输入“广告片头”， 在【链接】参数中输入要链接的文件，这就是下拉菜单的第2个菜单项，一次添加气体菜单项，如图2-8-14所示。

- 41 -

图2-8-14 添加菜单项

3、 完成了菜单项的添加后，切换到【外观】选项卡，在对应的面板中设置下拉菜单的字体、大小、颜色、背景颜色等参数，如图2-8-15所示。

4、 切换到【高级】选项卡，在对应的面板中可以设置下拉菜单边框的厚度和颜色等参数，如图2-8-16所示。

图2-8-15 设置下拉菜单的外观 图2-8-16 【高级】选项卡

- 42 -

5、 切换到【位置】选项卡，在对应的面板中可以设置下拉菜单的坐标位置。在【菜单位置】参数右边选择第一个图标，然后设置【x】坐标值为10，【y】坐标值为20，如图2-8-17所示。

6、 单击【确定】按钮完成本实例制作，这是【行为】面板如图2-8-18所示。

图2-8-17 设置下拉菜单位置 图2-8-18 【行为】面板

思考题：书上在线试衣的例子中，模特能够同时穿上好几件衣服，如何能够做到衬衣一次只能穿一件，裙子只能单独穿在身上，衬衣和裤子可以穿成一套，而且衬衣要露在裤子的外面的效果呢？

- 43 -

实验九 框架型网页的制作

一、 实验目的

1、掌握框架集和框架的创建和保存；

2、掌握框架、框架集的编辑和属性的设置； 3、掌握框架超级链接。

二、实验内容

利用框架制作如下图所示的页面效果，框架集网页为index.html， 其中：图2-9-1为打开index.html的效果图；

图2-9-2 单击左侧“动物类”的网页效果图；

图2-9-3 单击左侧“插花类”的网页效果图； 图2-9-4 单击左侧“海洋类”的网页效果图； 图2-9-5 单击左侧“邮票类”的网页效果图；

图2-9-6 单击左侧“诗歌”的网页效果图，其中诗歌内容在“si.txt”文档中； 图2-9-7 单击左侧“散文”的网页效果图，其中散文内容在“爱情人生.doc”

文档中。

图2-9-1 图2-9-2

图2-9-3 图2-9-4

- 44 -

图2-9-5 图2-9-6

图2-9-7

三、知识点分解

该实验主要涉及的知识点就是框架和框架集的保存以及设置超链接的目标框架。

四、实验步骤

1、选择[文件]/[新建]菜单命令。

2、在“新建文档”对话框“类别”列表中选择“框架集”选项。 3、从“框架集”列表选择相应的框架集，如图2-9-8所示。

- 45 -

本文来源：https://www.bwwdw.com/article/y1wd.html