实验一 站点的创建与基本HTML标记的应用
一、实验目的及要求
1.了解组成网页的基本元素
2.掌握文本元素的添加和编辑方法 3.掌握图像元素的添加和运用技巧 4.掌握几种链接的具体创建方法 5.掌握图像元素的添加和运用技巧
二、实验学时
4学时
三、实验内容
任务一：在网页中基本页面元素的应用 1．准备工作
在c盘或其他盘新建一个文件夹作为站点文件夹，文件夹名称为myweb3。复制给定的一个图像文件夹images和一个网页文件sx3-2.htm。
2．建立本地站点
‘ 用已学方法建立本地站点。
3．依据图3．38所示的效果，向网页中添加并编辑页面元素，具体操作步骤如下。
(1)在默认打开的网页中选择“修改”|“页面属性”菜单命令，设置使
背景颜色为#CCCCCC。
(2)输入网页首行文本“老邮票知多少”，大小为48像素，颜色为#FFFF00，字体为“华文行楷”粗体，居中对齐。
(3)在网页第二行插入更新日期和版权信息，选择“插入”l“日期”菜单命令，将当前编辑日期插入网页，然后利用“插入”面板上“文本”选项卡中的晶按钮，插入多个空格，再输入版权信息“◎版权所有：D．Wei@sohu．com”整行文字大小为18像素，颜色为#000000，字体为默认字体，粗体，居中对齐。
(4)在网页第三行选择“插入”|“水平线”菜单命令，插入一条水平线，高度为5，其他属性取默认值。
(5)在网页第四行、第七行各插入一行文本，内容分别为“纪33(C33)：中国古代科学家、1955．8．25发行600万套、全套4枚、新票市场参考价￥550元。”和“纪36(C36)：中国工农红军胜利完成二万五千里长征二十周年、1955．12．30发行600万套、全套2枚、新票市场参考价￥850元。”文字大小为18像素，格式为“项目列表”，其他属性取默认值。
(6)在网页第五行选择“插入”I“图像”菜单命令，插入四张邮票图像，文件名分别为0637.jpg、0638.jpg、0639.jpg、0640.ipg。每张图像的宽为
110、高为150，其他属性取默认值。
(7)在网页第六行插入一条水平线，宽为400像素，其他属性取默认值。
(8)在网页第八行插入两张邮票图像，文件名分别为0645.jPg、0646.ipg，图像宽高分别为150／110和110／150，其他属性取默认值。
4．保存网页 选择“文件”“|保存”菜单命令，在站点中将此网页保存为sx3-1．htm。 5．打开并编辑给定的网页文件sx3．2．htm，如图3-39所示。
(1)建立图像热点链接。为此选中网页上方图像，利用“属性”检查器
中的热点工具在图像上建立两个热点，如图3．40所示。从左到右两个热点分别链接到sx3-2-1．htm和sx3-2-2．htm文件(两个文件可稍后建立)。
(2)插入命名锚记。为此将光标放在网页标题“教育天地”后，选择“插入”I‘‘命名锚i6\'’菜单命令，在输入对话框中输入锚记“A0\"。依此方法在网页右侧文本“教养员”、“教员”、“特级教师”、“助教”、“讲师”、“副教授”和“教授”处分别插入命名锚记，依次为A1～A7。
(3)创建锚点链接。为此分别创建左列目录文本“教养员”、“教员”、“特级教师”、“助教”、“讲师”、“副教授”和“教授”与右列命名锚记A1～A7的锚点链接。然后再将各段下方的文本“返回”与标题处锚记A0建立锚点链接。
(4)创建无址链接。选中网页上方文本“教师篇”，在“属性”检查器的链接栏中输入“≠}”即可。
(5)创建邮件链接。选中网页最后一行文本“联系”，然后在“属性”检查器的链接栏中输入“mailto：abc@163．com\'’即可。如图3—41所示。
6．保存网页
选择“文件”I“保存”菜单命令，将此网页保存在站点中。 7建立其他网页
(1)新建一张网页，输入“名人看教育”，文件名为sx3-2-1.htm，保存
在站点中。
(2)再新建一张网页，输入“教育话题”，文件名为sx3-2-2.htm，保存在站点中。
8．站点测试
按【F12】键在浏览器中预览，观察效果与样图是否一致。单击建立的每个链接，以测试超链接是否都能够正确跳转。
任务二：HTML基本标记的应用 1．准备工作
在C盘或其他盘符下新建一个工作夹，制作的所有页面都保存在这个文件夹内。将给定的图像素材文件复制到工作文件夹中。
2．建立名称为了test.html的HTML页面，效果如图4-1所示。 页面功能要求为：
（1）页面标题为“基本标记测试”；
（2）页面内的所有标题文字均为标题2格式；
（3）单击链接文字时要求在新的浏览器窗口中，打开test.html页面自身；
(4)图片名称为1．gif，存放在工作文件夹中，与test．htm页面位于同一位置；
(5)依据图4—1所示样式，完成页面中的表格制作
3．建立名称为login．htm的HTMI。页面，效果如图4—2所示。 页面功能要求为：
(1)页面标题为“表单标记测试”；
(2)“姓名”为单行文本框，宽10个字符，最多能填写20个字符； (3)“性别”为单选按钮，传递的值为“男”和“女”，第一个按钮为默认选中；
(4)“职业”为下拉列表框，内容有“教师”、“工人”和“职员”； (5)“爱好”为复选按钮，传递的值分别对应为1，2，3，4，第一个按
钮为默认选中；
(6)“留言”为多行文本框，大小为5行40列，默认内容为“说几句吧!”； (7)“提交”按钮和“重置”按钮分别完成提交表单功能和重置表单功能，表单提交方式为get；
(8)页面上的所有文字默认为3号字。 4．页面测试
在浏览器中浏览所完成的页面，观察效果是否符合要求。
实验二 表格、表单和框架的应用
一、实验目的及要求 1.掌握表格的基本用法 2.掌握表格布局页面的方法 3.学会用框架布局页面的方法 4.了解框架布局的特点
二、实验学时
10学时
三、实验内容
任务一：表格的应用 1．准备工作
在c盘或其他盘新建一个文件夹，作为站点文件夹。输入你想要的站点名称，这里输入myweb5。在此文件夹中新建一个图像文件夹images，并将给定图像素材复制到其中。
2．建立本地站点
用已学方法建立本地站点。 3．利用表格编辑首页
(1)在默认打开的网页中，选择“修改”l‘‘页面属性”菜单命令，设置背景颜色为#clclcl。
(2)在网页中插入一个2行2列的表格，参数设置如图5-21所示。选中表格，在“属性”检查器的表格“高”输入框中输入100，单位为“％”。将第一行两个单元格合并为一个，如图5-22所示。
．
(3)利用“属性”检查器调整3个单元格的宽度和高度。将光标放在第一行单元格内，在“属性”检查器“高”输入框中输入110，“宽”不输入；将光标放在第二行第一个单元格内，在“属性”检查器“宽”输入框中输入250，“高”不输入；将光标放在第二行第二个单元格内，在“属性”检查器“宽”输入框中输入450，“高”不输入。效果如图5-22所示。
(4)按样张(如图5-23所示)在第一行单元格中输入“饮食本草”，文字大小80像素，字体“华文彩云”，前两个字白色，后两个字颜色为#009900。在文字下方插入一条水平线，属性取默认值。
(5)在第二行第一个单元格内插入一嵌套表格，表格相关属性分别为8行1列、表格高度和宽度均为100％、边框粗细为0、单元格边框为0、单元格间距为0。如图5．23所示。
(6)在第二行第二个单元格内插入一嵌套表格，表格相关属性分别为3行3列、表格高度和宽度均为100％、边框粗细为
2、单元格边框为0、单元格间距为0。如图5-23所示。
(7)在左侧嵌套表格各行中分别输入图5．24所示内容，然后将8个单元格的高度均设置为50。文字大小为36，字体为“华文新魏”，然后将每行文字均创建无址链接。
（8）在中侧嵌套表格中分别插入5张文件夹images中的图片，每张图片的宽度和高度均为150，注意：当图片尺寸变小后，表格不会自动缩小，
这时可以选中整个表格，在“属性”检查器中单击“清除行高”和“清除列宽”两个按钮来调整表格大小。
4．保存网页
选择“文件”！“保存”菜单命令，将此网页保存在站点中。 5．站点测试
按【F12】键在浏览器中预览，观察效果是否与样张一样。 任务二：框架的应用 1．准备工作
在C盘或其他盘新建一个文件夹，作为站点文件夹。并将给定的图片文件和素材文件复制到站点文件夹中。
2．建立本地站点
用已学方法建立本地站点。 3．利用框架布局页面
站点首页部局效果如图15-15所示，页面制作步骤如下。 （1）在默认打开的网页中，选择“插入”面板上的“布局’’选项卡。单击框架按钮的下拉箭头，从下拉菜单中选择命令。
(2)将光标置于顶端框架内，选择“修改”|“页面属性”菜单命令，设置背景颜色为#C1C1C1。同理将左框架和主框架的页面背景色都设置为#C1C1C1。
(3)选择“窗口“|‘‘框架”菜单命令，将“框架”面板调出来。然后设置三个框架的大小。
“顶端框架”：在“框架”面板中选定外层框架集，在“属性”检查器将顶端框架的高度设置为“120像素”，下面部分设置为“1”，单位为“相对”。将“边框”设置为“是”，“边框宽度”设置为1’，边框颜色设置为“#CCCCCC”。如图15—16所示。
“左侧框架”在“框架”面板中选定内层的子框架集，在“属性”检查器将左侧框+架的宽度设置为“250像素”，右侧主框架设置为“1”，单位为“相对”。将“边框”设置为“是”，“边框宽度”设置为“1’，边框颜色设置为“#CCCCCC”。如图15—17所示。
(4)在顶端框架内输入站点标题‘‘饮食本草”，文字大小为80像素，字体为“华文彩云”，前两个字白色，后两个字颜色为#009900，居中对齐。
(5)在左侧框架内插入一个表格，表格相关属性分别为9行1列、表格高度和为100％、
宽度为100％、边框粗细为0、单元格边框为0、单元格间距为0、对齐方式为右对齐。然后
将9个单元格的高度均设置为50，在其中输入样张中的文字，文字大小为36，字体为“华文
新魏”。如图15．15所示。
(6)在右侧主框架中插入一个表格，表格相关属性分别为3行3列、表格高度和宽度任意、
边框粗细为
2、单元格边框为0、单元格间距为0、居中对齐。按样张效果在表格中分别插入5 张文件夹images中的图片，每张图片的宽度和高度均为150。注意：当图片尺寸变小后，要在“属
性，，检查器中单击cc清除行高’’和“清除列宽”两个按钮，使表格调整到最小。如图15—15所示。
4．保存框架网页
选择“文件”|“保存全部”菜单命令，按照保存窗口弹出的顺序，分别将框架集、右侧
主框架、左侧框架、顶端框架命名为index．htm、main．htm、left．htm、top．htm。注意以上文件均保存在本站点中。
5．建立导航链接 具体制作步骤如下。
(1)按导航栏目分别建立8个相关内容的页面，或者从提供的素材文件中获取。
(2)在左侧框架内选择“首页”文字，在“属性”检查器的链接栏中设置目标文件为本框架集页面．Index．htm，目标选择“parent\'’。
(3)在左侧框架内选择“谷物篇”文字，在“属性”检查器的“链接”栏中设置目标文件为素材文件guwu．htm，“目标”栏选择右侧主框架的名称“mainframe”。同理，将左侧框 架内的各项导航内容分别链接到对应的素材文件，且“目标”均设置为“mainframe”。
(4)再次选择“文件”|“保存全部”菜单命令。 6．预览和测试站点
在打开的Index．htm文件中，按【F12】键在浏览器中预览，观察效果与样张是否一样，然后，测试各导航链接内容和显示位置是否正确。效果如图15-18所示。
实验三 网页图像和动画的设计与应用
一、实验目的及要求
1．掌握在Fireworks中创建动画的方法 2．掌握在Fireworks中制作蒙版的创建方法 3．掌握基本动画补间操作
二、实验学时
8学时
三、实验内容 任务一：gif动画 1．准备工作
在c盘或其他盘新建一个文件夹，本次实训的内容将全部保存在该文件夹下。
2．一张向日葵画框图片的制作 (1)新建文件
打开Fireworks 8，在“开始页”中选择“新建Fireworks文件”，新建一个空白文件。在弹出的“新建文档”中设置画布的“宽”为360，“高”为400，画布颜色选择白色，然后单击“确定”按钮。选择“文件”|‘‘另存为”菜单命令，将文件以“sx6—1．png”为文件名保存在指定文件夹下。
(2)制作图片 选择“文件”l‘‘导入”菜单命令，在“导入”对话框中选择需要导入的图片“画框．gif\"。此时光标的形状变为V-，在画布上单击鼠标左键，即可将该图片以原始大小导入(也可以按下左键拖放，将图片以不同的大小导入)。此时可以在“层”面板中看到刚导入的对象。用相同的方法导入第二张图片“向日葵．png”，将图片的大小调整合适，放入画框内，并调整整个图片的坐标，到此这个图片的制作就完成了。 单击“主要”工具栏上的“保存”按钮，保存文件。
(3)图片的优化和导出
选择“窗口”l“优化”菜单命令，打开“优化”面板，如图6-23所示的设置。选择\"文件”|“导出”菜单命令，在弹出的“导出”对话框中，“文件名”一栏输入文件名“sx6—1．jpg”，选择侏存类型为“仅图像”，单击“保存”按钮，该文件即可以JPEG的文件格式输出。
选择“文件”l砾存”菜单命令，保存源文件，单击“预览”按钮预览效果，如图6-24所示。
3．进一步编辑向日葵画框图片 (1)新建一帧
打开刚刚创建的向日葵画框，即“sx6—1．png”。在“帧”面板，选择刚才已有的第一帧，将它拖到“新建／重制帧”按钮上释放，得到复制的一帧。
将新复制的第二帧选中，将原有的向日葵图片删除，重新导入另一幅图像“椰子树．jpg”，并调整大小使其居于画框内。这样当前文件具有两个帧的画面，如图6—25所示。
(2)观看动画播放效果
单击位于工作窗口下方帧控制器的“播放”按钮，观看动画播放效果。单击“停止”按钮，停止播放。
如果不满意，可以返回帧1或帧2进行修改。
如果想调整两帧的播放速度，可以在帧面板双击每帧右侧的数字“7”，将其修改成想要的值。
再次通过帧控制器观看动画播放效果，如果想再增加几帧，可以按上面的方法进行编辑，直至满意为止。
选择“文件”|“另存为”菜单命令，将文件以“sx6．2．png\'’为文件名保存在指定文件夹下保存文件。
再选择“文件”|“图像预览”菜单命令，打开“图像预览”对话框，如图6—26所示。
选择导出的文件格式为“GIF动画”，然后再选择“导出”按钮，就可以导出GIF动画文件，文件名为“sx6．2．gift。。这样可以在Fireworks之外，同样看到动画效果。
任务二：蒙版和动画的制作 1．准备工作
在c盘或其他盘新建一个文件夹，将给定图像素材复制到其中，本次实训的内容将全部保存在该文件夹下。
2．导入图像并调整画布
新建空白文档，大小、颜色均默认。
选择“文件”l“导入”菜单命令，将指定文件夹中的图像导入文档。 选中图片，在“属性”检查器中修改图片的宽、高值(500×400)。然后单击画布之外，在“属性”检查器选择“符合画布”命令，使画布和图片一样大且对齐。
在“属性”检查器选择“画布”旁边的拾色器，把画布颜色改成自己喜欢的颜色。
3．制作矢量蒙版
选择椭圆工具，在窗口中画一个椭圆。选择“编辑”I“剪切”菜单命令，椭圆消失，用鼠标再次选中导入的图像，然后选择“编辑”I“粘贴为蒙版”菜单命令，出现蒙版效果，如图9-36所示。
打开“层”面板，如图9-37所示。单击层中图片与蒙版之间的链接@标记，可以使它消失，再次单击又会出现。它的出现与消失决定着蒙版是否与图片链接在一起。当未链接时，单击“层”面板中的蒙版图标，使它周围出现绿框。如图9-38所示。
用鼠标移动画布上椭圆的位置，效果如图9-39所示。
把位置调整到理想状态后，选择“文件”|“另存为”菜单命令，将文件以“sx9-1．png\'，为名保存在指定文件夹下。
4．修改蒙版效果
打开刚才新建的蒙版文件，在“层”面板选中蒙版。 在“属性”检查器中，选择“蒙版”为“灰度外观”，将方式改为“放射状”，并单击旁边的拾色器，将放射状填充的中心调整为透明(白色)，边缘调整为不透明(黑色)，如图9-40所示。
在“属性”检查器中，将“边缘”修改为“羽化”，值为“50\'’，“描边”设置为“无”，如下图9-41所示。
在画布上适当调整椭圆填充的放射中心和幅度，最后达到如图9—42所示效果。
5．制作位图蒙版，
打开给定图像文件0258.jpg，另存为sx9-2.jpg。把显示的缩放比例调整为66%。单击“层”面板的“添加蒙版”按钮
，并在“层”面板选中
，然后按照图9-43蒙版图标。
在“工具”面板“颜色”部分中选择“渐变”工具设置蒙版的相关属性。
在图像中间拖动鼠标，使填充呈由中心向四周的放射形状。图像产生了蒙版效果，同时“层”面板的蒙版图标也发生了变化。如图9-44所示。
6.制作文本蒙版
打开给定图像文件0258.jpg，另存为sx9-3.jpg。把显示的缩放比例调整为66%。在“工具”面板“矢量”部分中选取“文字”工具。输入文字“热带风情”，字体为华文行楷，大小150。选中文字，选择“编辑”|“剪切”菜单命令，将其剪切。在“层”面板中选择取位图标，然后选择“编辑”|“粘贴为蒙版”菜单命令。图像产生了蒙版效果，同时“层”面板也出出了文本蒙版图标，如图9-45所示。
任务三：风吹树叶 (1)新建Flash文件。
(2)修改背景颜色为“蓝色”。
(3)使用“文本工具”按钮，创建文字“风吹效果”四个字，用工具选中文字并按【Ctrl】+【B】一次，将四个字分解为个体。如13-11所示。
(4)再次用工具，选中“风\"字然后选择“修改”|转换为元件”菜单命令。在弹出转换为符号\"对话框中，将元件名称改为“风”，如图13-12所示。
(5)重复步骤(4)，将剩下的三个字“吹”、“效”、“果”也依次做成图形元件。
(6)选中所有的文字，然后鼠标右击，在弹出的上下文菜单中选择“分散到各层”，于是个字将分别处于四个不同的图层。这样做是为了动画渐变能够正确的执行。
如果分散到各层后文字没有对齐，则可用“对齐面板”，将各层的文字重新排列好。“对面板如图13-13所示，可以通过菜单“窗口”|对齐’’菜单命令打开“对齐”面板。
(7)在时间轴中第1 5帧处，给各层“添加关键帧”，选中第15帧。 (8)将四个字全部选中，使用鼠标向上移动一段距离，选择“修改”|变形”|“水平翻转”菜单命令，将四个字水平翻转一下，然后调整字体的位置，用“对齐’’面板排列字体，如图13-14所示。
(9)选中所有元件，在“属性，，检查器中将颜色“Alpha”值设为“O”，如图13-15所示。
(1 O)在“吹”、“效”、“果”三个元件所在层的第1帧处创建动画补间，如图13-16所示。
(11)按住【Ctrl】键，选择第二层的第2帧到最后一帧。按住鼠标左键不放，将位置向后拖放一段距离，如图13-17所示。
(1 2)参照步骤(1 0)内容，将‘‘效”、“果”两个元件所在层的位置分别后移，如图13-l8所示。
(1 3)按【Ctrl】+【Enter】组合键查看效果。 任务四：球的跳动 1.准备工作
在c盘或其他盘新建一个文件夹，并将给定的图片文件和素材文件复制到站点文件夹中。本次初训的内容将全部保存在该文件夹下。
2．素材的导入
1)新建文件
打开Flash 8，在“开始页”中选择“新建Flash文件”，以新建一个空白文件。背景色为“白色’’。
选择“文件”|“保存”菜单命令，将文件保存为ex3.fla文件。 2)“球’’的导入
选择“文件”|“导入”|“导入到库”菜单命令将“球”导入到库，如图13-33所示。
3.元件的转换
选择“修改”|“转换为元件”菜单命令，将图片转换为“图形”元件，并命名为“球”。13-34所示。
4．动作补间的设置
将元件“球”拖放到场景1的图层1中。在图层1的第60帧处插入关键帧，如图13-35所示。
在第1帧处添加‘‘动画补-间，，效果，如图13-36所示。
在第1帧处处的“属性”检查器中，单击“缓动”旁边的“编辑”按钮，设置动作的“缓入|缓出”效果(通过缓入／缓出可以控制动画渐变的速度和状态)。设置效果如图13-37所示。
在“自定义缓入／缓出”对话框定义各个帧处的动画补间速度和方向。 新建图形元件，命名为“阴影”，设置笔触色为“无”，填充色为“黑白渐变”，白色部分的alpha透明度为29％。使用椭圆工具绘制一个椭圆，设置面板如图13-38所示，绘制的效果如13-39所示。
在场景1中新建图层2，将元件“阴影”拖放到第1帧处的恰当位置(在球落下的下方)，并在第60帧插入关键帧，阴影位置如图13—40所示。
在图层2第1帧处设置元件“阴影”的A1pha透明度为20％，如图1 3-4 1所示。
在图层2第1帧处设置补间动作，如图1 3—42所示。
打开图层1第一帧“属性”，检查器的“自定义缓入／缓出”面板，按键【Ctrl】+【c】复制缓动效果。打开图层2第一帧处的“自定义缓入／缓出”面板，按I Ctrl 】+【V】组合键，将其粘贴到阴影动画补间中。
5．发布动画
使用“文件”|“发布”菜单命令进行发布。
21
实验四 层叠样式与层的应用
一、实验目的及要求 1.掌握层的正确定位方法
2.学会利用层来制作弹出式菜单 3.了解时间轴的编辑特点和方法 4．学会定义和应用CSS样式
二、实验学时
6学时
三、实验内容
任务一：利用层制作弹出菜单
步骤：
l准备工作
在c盘或其他盘新建一个文件夹，作为站点文件夹。将给定的素材文件存入其中。
2．建立本地站点
启动Dreamweaver·8，用已学方法建立本地站点。 3．利用图层制作下拉弹出菜单
(1)新建一个空白页面，选择“修改”I“页面属性”菜单命令，设置页面的背景颜色为#FFCC99，左边距为0，上边距为0。
(2)在文档第一行插入一行文字“电子信息职业技术学院”作为站点标题，字体为华文行楷，大小为48号字，颜色为#FF9933。
(3)在标题的下一行插入一个l行5列的表格，表格宽度800像素，边框粗细为l，高 度30，平均分配各列(每列宽度为160像素)，表格背景颜色为#9999FF。
(4)在表格的各列分别写入“首页”、“学院概况”、“师资建设”、“系部设置”、“招生就业”，各单元格文字对齐方式为居中对齐，文字为粗体显示。如图16—16所示。
(5)在“学院概况”列中添加一个图层，命名为“Layerl”，注意不可见元素“层锚记”应在此列当中。如果不在，可用鼠标将其拖到此列中。然后在图层中添加一个3行l列的表格，表格宽度为160像素，各行高度为30像素，边框粗细为1，单元格文字为居中对齐，表格背景颜色为#9999F’F，文字为粗体显示。三个单元格内容为“学院简介”、“办学思想”、“校园风景”，如图16．17所示。
22
(6)同样在其他几列中也分别添加图层，各自命名为“Layer2\'’，“Layer3”，“Layer4”。其中Layer2中插入3行1列的表格，表格属性与Layerl中的相同，内容为“队伍建设、名师风采、优秀教师”；L,ayer3中插入5行l列的表格，表格属性与L,ayerl中的相同，内容为“机电技术系、电子技术系、计算机应用系、计算机网络系、计算机软件系”；Layer4中插入2行1列的表格，表格属性与Layerl中的相同，内容为“招生信息、就业信息”。如图16—18所示。
(7)调整各层的位置。注意：层的调整非常重要，不同的浏览器窗口大
23
小，不同的分辨率，层的位置显示都不是一样。即使在同一个机器上调整浏览器的窗口大小，都会出现位置的变动。Dreamweaver中并不是所见即所得，需要我们来精确定位才会达到满意的效罘。为此，首先固定表格的宽度，本例中将表格固定为宽度800，高度30。然后固定层的位置，这
个位置需要计算一下，计算公式并不是很难。本例中表格总宽度为800，共有5列，这样每列的横坐标起始位置的计算公式为：
800÷5*(当前列一1) 对于“Layerl”，当前列为2，所以结果为160。
最后加上一个将要创建的层与原表格列偏移值，那么计算各列下属的层的横坐标公式变为：
800--5x(当前列-1)+偏移量
这个偏移量需要通过大家试验来最终确定，因为不同的字体和宽度这个值是不同的。这里测试满意的效果是-1，所示Layer1的实际工资起始横坐标为159据这个公式将各个层的位置设定好，最好不要用鼠标禾移功定位。要使用“属性”检查器来设置。 (8)打开“层，，面板，将Layerl～Layer4都设置为隐藏状态。 ．
(9)在窗口左下方选中第2列“学院概况”所在单元格的标签选择器，在“行为”面板中为其添加“显示一隐藏层’’行为，将“Layerl”设定为“显示”，如图16-19所示。
(10)更改行为的触发事件为“onMouseOver”。 (11)再次选中第二列的标签选择器，在‘‘行为’’面板中为其添加“显示一隐藏层”行为，设定图层Layerl为‘‘隐藏”，并更改此行为的触发事件为“onlMoluseOut”。．
(12)重复步骤9～1l，为第三列、第四列、第五列添加显示与隐藏图层的行为。
4．保存与预览
保存文件为Index．html，然后按IFl2]键进行预览。当移动鼠标到菜单时，将显示当前菜单项所属的子菜单内容，当鼠标离开显示的子菜单时，
24
子菜单隐藏，返回初始状态。最终效果如图16—20所示。
5．为下拉菜单设置超级链接
(1)根据菜单内容，建立相应的其他页面文件。 (2)为各菜单项设置跳转到这些页面的超级链接。 (3)再次保存文件并预览效果。 任务二：时间轴 步骤：
1．准备工作
在C。盘或其他盘新建一个文件夹，作为站点文件夹。在此站点中再建一个images子文件夹，将给定的素材存入其中。 2．建立本地站点
启动Dreamweaver 8，用已学方法建立本地站点。
3.利用时间轴使层做直线运动
(1)打开给定的网页文件sx17-1-1.htm，在网页上插入一个层\"Layerl\",并将其位置调整好，然后在其中插入给定的图片imgl．gif,图片大小为64×64。如图17-9所示. (2)打开“时间轴”面板，把图层Layerl拖到“时间轴’’面板上，单击最后一帧关键帧，并将其拖到第100帧的位置。再单击图层Layerl，将 Layerl水平拖动到页面的右侧。如图17-10所示。
(3)选中“时间轴”面板上的“自动播放”和“循环”选项。
(4)将文件另存为sxl7-1-3．htm，并在浏览器中预览，即可看到小猪从页面左侧运动到 右侧，并循环播放。
25
4．利用时间轴使层做轨迹运动
(1)打开刚才保存的sxl7-1-3．htm文档，再插入一个图层Layer2，并将给定的图片img2．Gif插入其中，设置图片和层的大小均为100*100，如图17-11所示。
(2)右击“时间轴”面板的动画通道，在弹出的快捷菜单中选择“添加时间轴”命令，新添加的时间轴为“Timeline2\'’。
(3)选中页面中的图层Layer2，并单击右键，在弹出的快捷菜单中选择
26
“记录路径”命令，紧接着用鼠标拖动层左上角的标记在页面上移动绘制路径，释放鼠标，在页面上出现了一条灰色的路径。同时，时间轴上也出现了一个有多个关键帧的动画条。如图17-12所示。
(4)选中“时间轴”面板上的“自动播放”和“循环”选项。
(5)保存文件，并在浏览器中预览，即可看到小猪从页面左侧运动到右侧的同时，另一小猪在页面上按绘制的轨迹进行移动，并循环播放。 5．给移动的小猪添加行为和超级链接
(1)选中页面中的Layer2，打开“行为”面板，单击“+”按钮，从弹出的菜单中选择“时间轴”I“停止时间轴”命令。然后从对话框中选择“1\'imeline2\'’，单击“确定”按钮。在“行为”面板中将事件改为onMouseover。 (2)再次单击“行为”面板的“+”按钮，从弹出的菜单中选择“时间轴”}“播放时间轴”命令。然后从对话框中选择“Timeline2\'’，单击“确定”按钮。在“行为”面板中将事件改为onMouseout。
27
(3)选中Layer2层中的图片，在“属性”检查器的链接栏中输入“sxl7-1-2．htm\'’(预先编辑好的网页)，在替代栏中输入“单击有惊喜”。
(4)保存文件，并在浏览器中预览，即可看到当鼠标指向小猪时，小猪停止移动；当鼠标离开小猪时，小猪继续移动。当鼠标单击小猪时，跳转到sxl7-1-2．htm页面。
任务三：利用CSS样式改变页面风格 步骤：
1．准备工作
在c盘或其他盘新建一个文件夹，作为站点文件夹。将给定的网页文件及素材文件夹存入该文件夹中。
2．建立本地站点
启动Dreamweaver 8，用已学方法建立本地站点。 3．自定义样式的定义及应用
(1)打开站点中给定的sx20．1．1．htm文档。 (2)选择“窗口”I‘‘样式”菜单命令，将“CSS样式”面板打开。 (3)单击“CSS样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框。在选择器类型处选择“类(可应用于任何标签)”，名称处输入“ysl”，定义在处选择“仅对该文档”。单击“确定”按钮。
(4)在弹出的“ysl的CSS样式定义”对话框中，进行如图20-25所示的样式定义(类型：字体为隶书，大小为36像素，颜色为#0033FF；区块：文字对齐为居中)。
(5)用同样的方法定义样式“ys2”，定义内容如图20-26所示(类型：
28
字体为华文新魏，大小为24像素；区块：文字对齐为居中)。
(6)用同样的方法定义样式“ys3”，定义内容如图20—27所示(类型：字体为隶书，大小为36像素，粗细为粗体，#00CC33；区块：文字对齐为居中)。
(7)下面开始应用已定义的样式。选中第一行标题“唐诗欣赏”，单击右键，选择“CSS样式ysl，，(或者用前面介绍的其他方法来应用ysl)，这时标题已变成所定义的样式了。用同样的方法，将每首诗的诗文内容应用
29
‘‘ys2’’，将每首诗的标题段落应用“ys3”。效果如图20-28所示。
(8)修改页面的背景风格。首先为页面设置背景图像(站点中images文件夹中的bj．jpg文件)，效果如图20-29所示。由于选择的背景图像的尺寸不够大，在页面中图像会以不断重复的形式铺满整个页面，视觉效果不够理想。
(9)在“CSS样式”面板新建自定义样式“ys4”，在样式定义对话框中，背景样式的设置如图20—30所示(背景：重复为不重复，附件为固定，水平位置为居中，垂直位置为居中)。
(10)选择文档窗口左下方的标签选择器，然后单击右键，从下拉列表中选择“设置类，ys4”，文档应用样式ys4后的效果如图20-31所示。当预览时会发现背景图像居中并不再重复，且当用鼠标滚动游览文字时，背景图像保持静止，而不随文字的滚动而滚动。
4．重定义特定标签外观
(1)单击“CSS样式”面板下方的“新建(；SS样式”按钮，打开新建样式对话框，选择器类型处选择“标签(重定义特殊标签的外观)”，标签处下拉列表选择“ln定义在处选择“仅对该文档”。单击“确定”按钮。
(2)在弹出的“li的CSS样式定义”对话框中，进行如图20-32所示的样式定义(类型：字体为华文新魏，大小为24像素；列表：项目符号图像为0001．gif)。
(3)单击“确定”按钮，发现页面列表外观发生了变化。效果如图20-33
30
所示。
(4)再次单击“CSS样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框，选择器类型处选择“标签(重定义特殊标签的外观)”，标签处下拉列表选择“a”，定义在处选择“仅对该文档”。单击“确定”按钮。
31
(5)在弹出的‘‘a的cSS样式定义”对话框中，进行定义，其中类型分类中只将修饰选择为‘‘无”。单击“确定”后，页面中超级链接的下划线处的修饰没有了，如图20-33所示。
5．链接文字技术
(1)单击“CSS样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框，选择器类型处选择“高级(ID、伪类选择器等)”，选择器处下拉列表选择“a：link”，定义在处选择“仅对该文档”。单击“确定”按钮。
(2)在弹出的“a：link的(；SS样式定义”对话框中，进行如图20—34所示的样式定义(类型：字体为华文新魏，大小为24像素，颜色为#CC0099，修饰为无)。
(3)再次单击“CSS样式”面板下方的“新建CSS样式”按钮，在对话框中其他选项不变，只将选择器选为“a：hover\'，。然后在“a：hover的CSS样式定义”对话框中，进行如图20—35所示的样式定义(类型：字体为华文新魏，大小为24像素，颜色为#FF0000，修饰为下划线)。
(4)单击“确定”按钮，关闭定义对话框。预览时可以看到当鼠标指针移到超级链接文字时，文字变为红色且出现下划线修饰。
(5)将网页另存为Index．．html，按【F12】预览网页，观察各种样式的应用效果。
32
实验五
网页综合设计
一、实验目的及要求
利用所学的网页设计的方法来设计一个个性化的网站，网站的内容一定要合理，内容健康，页面美观。
二、实验学时
6学时
三、实验内容
自己设计
33
