网页制作与规划实训报告

1、学 号：HUBEI POLYTECHNIC UNIVERSITY实训报告教学院 课程名称 专 业 班 级 姓 名 指导教师2013 年 12 月 27 日实训报告内容一、实训名称网页制作与规划实训二、实训时间第16-17周三、实训地点K4-206四、实训目的本实训的目标是要求学生掌握网站设计的主要原则和网站制作的规范；掌握网站制作与设计的全过程；熟悉使用Dreamweaver对网页进行真题的布局和设计；掌握对网站进行创建和管理等操作；培养学生的自主学习精神；提高学生思考问题、分析问题、解决问题的能力，适应市场需求。需要了解以下知识。1. 了解组成网页的基本元素2. 掌握文本元素的添加和编辑方法

2、3. 掌握图像元素的添加和运用技巧4. 掌握几种链接的具体创建方法5. 掌握图像元素的添加和运用技巧五、实训内容实训一站点的创建与基本HTM标记的应用任务一：在网页中基本页面元素的应用实训步骤：1. 在c盘或其他盘新建一个文件夹作为站点文件夹，文件夹名称为myweb3复制给定的一 个图像文件夹images和一个网页文件 sx3-2.htm。2. 在默认打开的网页中选择“修改”| “页面属性”菜单命令，设置使背景颜色为#CCCCC,C输入网页首行文本“老邮票知多少”，大小为48像素，颜色为#FFFFOO,字体为“华文行楷”粗体，居中对齐。3. 在网页第二行插入更新日期和版权信息，选择“插入”I

3、“日期”菜单命令，将当前编辑日期插入网页，输入版权信息“版权所有：D. Weisohu com”整行文字大小为18像素，颜色为#000000,字体为默认字体，粗体，居中对齐。4. 网页第三行选择“插入”| “水平线”菜单命令，插入一条水平线，高度为5,其他属性取默认值。5. 在网页第四行、第七行各插入一行文本，内容分别为“纪33(C33):中国古代科学家、1955. & 25发行600万套、全套4枚、新票市场参考价Y 550元。”和“纪36(C36):中国工农 红军胜利完成二万五千里长征二十周年、1955. 12. 30发行600万套、全套2枚、新票市场参考价Y 850元。”文字大小为18像素

4、，格式为“项目列表”，其他属性取默认值。6.在网页第五行选择“插入”I “图像”菜单命令，插入四张邮票图像，文件名分别为0637.jpg、0638.jpg、0639.jpg、0640.ipg。每张图像的宽为 110、高为150，其他属性取默认 值。7.在网页第六行插入一条水平线，宽为400像素，其他属性取默认值。在网页第八行插入两张邮票图像，文件名分别为0645.jPg、0646.ipg，图像宽高分别为 150/110和110/150,其他属性取默认值。8.保存网页。9.打开并编辑给定的网页文件sx3 . 2. htm。10. 建立图像热点链接。为此选中网页上方图像，利用“属性”检查器中的热点

5、工具在图像上建立两个热点。从左到右两个热点分别链接到sx3-2-1 . htm和sx3-2-2 . htm文件11. 插入命名锚记。为此将光标放在网页标题“教育天地”后，选择“插入”I 命名锚i6菜单命令，在输入对话框中输入锚记“A0。依此方法在网页右侧文本“教养员”、“教员”、“特级教师”、“助教”、“讲师”、“副教授”和“教授”处分别插入命名锚记，依次为A1A7。12. 创建锚点链接。为此分别创建左列目录文本“教养员”、“教员”、“特级教师”、“助教”、“讲师”、“副教授”和“教授”与右列命名锚记A1A7的锚点链接。然后再将各段下方的文本“返回”与标题处锚记 A0建立锚点链接。13. 创建

6、无址链接。选中网页上方文本 “教师篇”，在“属性”检查器的链接栏中输入“工”即可。14. 创建邮件链接。选中网页最后一行文本“联系”，然后在“属性”检查器的链接栏中输入“ mailto : abc163 com即可。15. 保存网页。16. 新建一张网页，输入“名人看教育”，文件名为sx3-2-1.htm ，保存在站点中。再新建一张网页，输入“教育话题”，文件名为sx3-2-2.htm ，保存在站点中。17. 站点测试。任务二：HTML基本标记的应用1.在C盘或其他盘符下新建一个工作夹，制作的所有页面都保存在这个文件夹内。将给定 的图像素材文件复制到工作文件夹中。2.建立名称为了 test.h

7、tml 的HTMLM面，页面标题为“基本标记测试” ；页面内的所有标题文字均为标题2格式；单击链接文字时要求在新的浏览器窗口中，打开test.html页面自身;图片名称为1. gif，存放在工作文件夹中，与 test . htm页面位于同一位置；3.建立名称为login . htm的HTM。页面，效果如图 4 2所示。页面功能要求为：(1) 页面标题为“表单标记测试”；(2) “姓名”为单行文本框，宽10个字符，最多能填写 20个字符；(3) “性别”为单选按钮，传递的值为“男”和“女”，第一个按钮为默认选中；(4) “职业”为下拉列表框，内容有“教师”、“工人”和“职员”；(5) “爱好”为

8、复选按钮，传递的值分别对应为1 , 2, 3, 4,第一个按钮为默认选中；(6) “留言”为多行文本框，大小为 5行40列，默认内容为“说几句吧！ ”；(7) “提交”按钮和“重置”按钮分别完成提交表单功能和重置表单功能，表单提交方式为get ；(8) 页面上的所有文字默认为3号字。4.页面测试选项卡。单击框架按钮的下拉箭头，从下拉菜单中选择命令。实训二表格、表单和框架的应用任务一：表格的应用1. 在c盘或其他盘新建一个文件夹，作为站点文件夹。输入你想要的站点名称，这里输入myweb5在此文件夹中新建一个图像文件夹images，并将给定图像素材复制到其中。2. 建立本地站点。3. 在默认打开的

9、网页中，选择“修改” I 页面属性”菜单命令，设置背景颜色为#clclcl 。 在网页中插入一个 2行2列的表格。选中表格，在“属性”检查器的表格“高”输入框中输入100，单位为“”。将第一行两个单元格合并为一个。4. 利用“属性”检查器调整3个单元格的宽度和高度。将光标放在第一行单元格内，在“属 性”检查器“高”输入框中输入 110, “宽”不输入；将光标放在第二行第一个单元格内，在“属性”检查器“宽”输入框中输入 250, “高”不输入；将光标放在第二行第二个单元格内，在“属 性”检查器“宽”输入框中输入 450, “高”不输入。5. 按样张在第一行单元格中输入“饮食本草”，文字大小80像

10、素，字体“华文彩云”，前两个字白色，后两个字颜色为 #009900。在文字下方插入一条水平线，属性取默认值。6. 在第二行第一个单元格内插入一嵌套表格，表格相关属性分别为8行1列、表格高度和宽度均为100%、边框粗细为0、单元格边框为0、单元格间距为0。7. 在第二行第二个单元格内插入一嵌套表格，表格相关属性分别为3行3列、表格高度和宽度均为100 %、边框粗细为 2、单元格边框为 0、单元格间距为 0。在左侧嵌套表格各行中分 别输入图所示内容，然后将8个单元格的高度均设置为50。文字大小为36,字体为“华文新魏”，然后将每行文字均创建无址链接。8. 在中侧嵌套表格中分别插入5张文件夹imag

11、es中的图片，每张图片的宽度和高度均为150,注意：当图片尺寸变小后，表格不会自动缩小，这时可以选中整个表格，在“属性”检查器中单击“清除行高”和“清除列宽”两个按钮来调整表格大小。9. 保存网页。任务二：框架的应用1.在C盘或其他盘新建一个文件夹，作为站点文件夹。并将给定的图片文件和素材文件复 制到站点文件夹中。2.建立本地站点，在默认打开的网页中，选择“插入”面板上的“布局3.将光标置于顶端框架内， 选择“修改” | “页面属性”菜单命令，设置背景颜色为#C1C1C1 同理将左框架和主框架的页面背景色都设置为#C1C1C14. 选择“窗口 “ | 框架”菜单命令，将“框架”面板调出来。然后

12、设置三个框架的大小。5. 在顶端框架内输入站点标题饮食本草”，文字大小为80像素，字体为“华文彩云”，前两个字白色，后两个字颜色为 #009900，居中对齐。6. 在左侧框架内插入一个表格， 表格相关属性分别为 9行1列、表格高度和为100%、 宽 度为100 %、边框粗细为0、单元格边框为0、单元格间距为0、对齐方式为右对齐。然后 将9 个单元格的高度均设置为 50,在其中输入样张中的文字， 文字大小为36,字体为“华文 新魏”。7. 在右侧主框架中插入一个表格，表格相关属性分别为3行3列、表格高度和宽度任意、边框粗细为2、单元格边框为0、单元格间距为0、居中对齐。按样张效果在表格中分别插入

13、5张文件夹images中的图片，每张图片的宽度和高度均为150。注意：当图片尺寸变小后， 要在“属性，检查器中单击cc清除行高和“清除列宽”两个按钮，使表格调整到最小。8. 保存框架网页。9. 按导航栏目分别建立 8个相关内容的页面，或者从提供的素材文件中获取。在左侧框架内选择“首页”文字，在“属性”检查器的链接栏中设置目标文件为本框架集页面.Index . htm,目标选择“ pare nt在左侧框架内选择“谷物篇”文字，在“属性”检查器的“链接”栏中设置目标文件为素材文件guwu. htm, “目标”栏选择右侧主框架的名称“mainframe ”。同理，将左侧框 架内的各项导航内容分别链接

14、到对应的素材文件，且“目标”均设置为“ma in frame ”。再次选择“文件”| “保存全部”菜单命令。10.预览和测试站点。实训三网页图像和动画的设计与应用任务一：gif动画1. 在c盘或其他盘新建一个文件夹，本次实训的内容将全部保存在该文件夹下。2. 打开Fireworks 8 ，在“开始页”中选择“新建 Fireworks文件”，新建一个空白文件。在弹出的“新建文档”中设置画布的“宽”为360, “高”为400,画布颜色选择白色，然后单击“确定”按钮。选择“文件” | 另存为”菜单命令，将文件以“sx6 1. png”为文件名保存在指定文件夹下。3. 选择“文件” I 导入”菜单命令

15、，在“导入”对话框中选择需要导入的图片 “画框.gif。 此时光标的形状变为 V-,在画布上单击鼠标左键， 即可将该图片以原始大小导入 (也可以按下左 键拖放，将图片以不同的大小导入 )。此时可以在“层”面板中看到刚导入的对象。用相同的方法导入第二张图片“向日葵.png”，将图片的大小调整合适，放入画框内，并调整整个图片的坐标，到此这个图片的制作就完成了。单击“主要”工具栏上的“保存”按钮，保存文件。4. 选择“窗口” I “优化”菜单命令，打开“优化”面板，如图6-23所示的设置。选择”文件” | “导出”菜单命令，在弹出的“导出”对话框中，“文件名” 一栏输入文件名“sx6 1.jpg ”

16、， 选择侏存类型为“仅图像”，单击“保存”按钮，该文件即可以JPEG的文件格式输出。 选择“文 件” I砾存”菜单命令，保存源文件，单击“预览”按钮预览效果。5. 打开刚刚创建的向日葵画框，即“sx6 1. png”。在“帧”面板，选择刚才已有的第一帆将它拖到“新建/重制帧”按钮上释放，得到复制的一帧。将新复制的第二帧选中，将原 有的向日葵图片删除，重新导入另一幅图像“椰子树.jpg ”，并调整大小使其居于画框内。这样当前文件具有两个帧的画面。6. 单击位于工作窗口下方帧控制器的“播放”按钮，观看动画播放效果。单击“停止”按 钮，停止播放。7. 导出，选择导出的文件格式为“GIF动画”，然后再

17、选择“导出”按钮，就可以导出GIF动画文件，文件名为“ sx6 . 2. gift 。这样可以在Fireworks之外，同样看到动画效果。任务二：蒙版和动画的制作1. 在c盘或其他盘新建一个文件夹，将给定图像素材复制到其中，本次实训的内容将全部 保存在该文件夹下。2. 新建空白文档，大小、颜色均默认。选择“文件”I “导入”菜单命令，将指定文件夹中的图像导入文档。选中图片，在“属性”检查器中修改图片的宽、高值(500 X 400)。然后单击画布之外，在“属性”检查器选择“符合画布”命令，使画布和图片一样大且对齐。3. 制作矢量蒙版选择椭圆工具，在窗口中画一个椭圆。选择“编辑”I “剪切”菜单命

18、令，椭圆消失，用鼠标再次选中导入的图像，然后选择“编辑” I “粘贴为蒙版”菜单命令，出现蒙版效果，打开“层”面板。单击层中图片与蒙版之间的链接斷记，可以使它消失，再次单击又会出现。它的出现与消失决定着蒙版是否与图片链接在一起。当未链接时，单击“层”面板中的蒙版图标，使它周 围出现绿框。4. 修改蒙版效果，打开刚才新建的蒙版文件，在“层”面板选中蒙版。在“属性”检查器中，选择“蒙版”为“灰度外观”，将方式改为“放射状”，并单击旁边的拾色器，将放射状填 充的中心调整为透明（白色），边缘调整为不透明（黑色），在“属性”检查器中，将“边缘”修 改为“羽化”，值为“ 50，“描边”设置为“无”。5.

19、制作位图蒙版，打开给定图像文件 0258.jpg，另存为sx9-2.jpg 。把显示的缩放比例调整为 66%单击“层” 面板的“添加蒙版”按钮，并在“层”面板选中蒙版图标。在“工具”面板“颜色”部分中选择“渐变”工具然后按照图9-43设置蒙版的相关属性。在图像中间拖动鼠标，使填充呈由中心向四周的放射形状。图像产生了蒙版效果，同时“层”面板的蒙版图标也发生了变化。6. 制作文本蒙版打开给定图像文件 0258.jpg ，另存为sx9-3.jpg 。把显示的缩放比例调整为 66%在“工具” 面板“矢量”部分中选取“文字”工具。输入文字“热带风情”，字体为华文行楷，大小150。选中文字，选择“编辑”|

20、 “剪切”菜单命令，将其剪切。在“层”面板中选择取位图标，然后选择“编辑” | “粘贴为蒙版”菜单命令。图像产生了蒙版效果，同时“层”面板也出出了文本 蒙版图标。任务三：风吹树叶1. 新建Flash文件，修改背景颜色为“蓝色”。使用“文本工具”按钮13 ,创建文字“风 吹效果”四个字，用工具选中文字并按【Ctrl】+【B】一次，将四个字分解为个体。2. 再次用工具!,选中“风”字然后选择“修改” |转换为元件”菜单命令。在弹出转换为 符号对话框中，将元件名称改为“风”。3. 重复步骤，将剩下的三个字“吹”、“效”、“果”也依次做成图形元件。4. 选中所有的文字，然后鼠标右击，在弹出的上下文菜单

21、中选择“分散到各层”，于是个字将分别处于四个不同的图层。这样做是为了动画渐变能够正确的执行。、5. 在时间轴中第1 5帧处，给各层“添加关键帧”，选中第15帧。6. 将四个字全部选中，使用鼠标向上移动一段距离，选择“修改”|变形” | “水平翻转”菜单命令，将四个字水平翻转一下，然后调整字体的位置，用“对齐面板排列字体。7. 选中所有元件，在“属性，检查器中将颜色“ Alpha ”值设为“ O。8. 在“吹”、“效”、“果”三个元件所在层的第 1帧处创建动画补间。按住【Ctrl】键，选择第二层的第2帧到最后一帧。按住鼠标左键不放，将位置向后拖放一段距离。9. 参照步骤（1 0）内容，将效”、“

22、果”两个元件所在层的位置分别后移。任务四：球的跳动1. 在c盘或其他盘新建一个文件夹， 并将给定的图片文件和素材文件复制到站点文件夹中。 本次初训的内容将全部保存在该文件夹下。2. 打开Flash 8,在“开始页”中选择“新建 Flash文件”，以新建一个空白文件。背景色为“白色。选择“文件” | “保存”菜单命令，将文件保存为ex3.fla文件。3.元件的转换 选择“修改” | “转换为元件”菜单命令，将图片转换为“图形”元件，并命名为球”。4将元件“球”拖放到场景1的图层1中。在图层1的第60帧处插入关键帧，在第1帧处添加动画补间。5. 在第1帧处处的“属性”检查器中，单击“缓动”旁边的“

23、编辑”按钮，设置动作的“缓入|缓出”效果（通过缓入/缓出可以控制动画渐变的速度和状态）。在“自定义缓入/缓出”对话框定义各个帧处的动画补间速度和方向。6. 新建图形元件，命名为“阴影”，设置笔触色为“无”，填充色为“黑白渐变”，白色部分的alpha透明度为29%。使用椭圆工具绘制一个椭圆，设置面板如图13-38所示，绘制的效果如图所示。7. 在场景1中新建图层2,将元件“阴影”拖放到第 1帧处的恰当位置（在球落下的下方）， 并在第60帧插入关键帧。8. 在图层2第1帧处设置元件“阴影”的 A1pha透明度为20%。在图层2第1帧处设置补间动作。打开图层1第一帧“属性”，检查器的“自定义缓入/缓

24、出”面板，按键【 Ctrl】+【c】 复制缓动效果。打开图层 2第一帧处的“自定义缓入/缓出”面板，按I Ctrl】+【V】组合键，将其粘贴到阴影动画补间中。9. 发布动画实训四层叠样式与层的应用任务一：利用层制作弹出菜单1. 在c盘或其他盘新建一个文件夹，作为站点文件夹。将给定的素材文件存入其中。建立 本地站点。2. 新建一个空白页面，选择“修改” I “页面属性”菜单命令，设置页面的背景颜色为#FFCC99左边距为0,上边距为0。在文档第一行插入一行文字“电子信息职业技术学院”作为站点标题，字体为华文行楷，大小为48号字，颜色为#FF9933。在标题的下一行插入一个I行5列的表格，表格宽度

25、800像素，边框粗细为I，高 度30，平均分配各列（每列宽度为160像素），表格背 景颜色为#9999FF。3. 在表格的各列分别写入“首页”、“学院概况”、“师资建设”、“系部设置”、“招生就业”，各单元格文字对齐方式为居中对齐，文字为粗体显示。如图16 16所示。在“学院概况”列中添加一个图层，命名为“ Layerl ”，注意不可见元素“层锚记”匀应在此列当中。如果不在，可用鼠标将其拖到此列中。然后在图层中添加一个3行I列的表格，表格宽度为160像素，各行高度为30像素，边框粗细为1,单元格文字为居中对齐，表格背景颜色为#9999F F,文字为粗体显示。三个单元格内容为“学院简介”、“办学

26、思想”、“校园风景”。4. 同样在其他几列中也分别添加图层，各自命名为“Layer2 , “Layer3 ”，“Layer4 ”。其中Layer2中插入3行1列的表格，表格属性与 Layerl中的相同，内容为“队伍建设、名师风采、优秀教师” ；L,ayer3中插入5行I列的表格，表格属性与L,ayerl中的相同，内容为“机电技术系、电子技术系、计算机应用系、计算机网络系、计算机软件系”；Layer4中插入2行1列的表格，表格属性与Layerl中的相同，内容为“招生信息、就业信息”。调整各层的位置。注意：层的调整非常重要，不同的浏览器窗口大小，不同的分辨率，层的位置显示都不是一样。 即使在同一个

27、机器上调整浏览器的窗口大小，都会出现位置的变动。Dreamweaver中并不是所见即所得，需要我们来精确定位才会达到满意的效罘。为此，首先固定表格的宽度，本例中将表 格固定为宽度800，高度30。然后固定层的位置，这 个位置需要计算一下，计算公式并不是很难。本例中表格总宽度为800,共有5列，这样每列的横坐标起始位置的计算公式为：800- 5*(当前列一 1)对于Layerl ”，当前列为2，所以结果为160。最后加上一个将要创建的层与原表格列偏移值，那么计算各列下属的层的横坐标公式变为：800-5x( 当前列-1)+偏移量这个偏移量需要通过大家试验来最终确定，因为不同的字体和宽度这个值是不同

28、的。这里 测试满意的效果是-1，所示Layerl的实际工资起始横坐标为159据这个公式将各个层的位置设定好，最好不要用鼠标禾移功定位。要使用“属性”检查器来设置。5.打开“层，面板，将LayerlLayer4都设置为隐藏状态。在窗口左下方选中第 2列“学院概况”所在单元格的标签选择器，在“行为”面板中为其添加“显示一隐藏层行为，将“ Layerl ”设定为“显示”。更改行为的触发事件为“ onMouseOver”。6.再次选中第二列的标签选择器，在行为面板中为其添加“显示一隐藏层”行为，设定图层Layerl为隐藏”，并更改此行为的触发事件为“onIMoluseOut ”。重复步骤91l，为第三

29、列、第四列、第五列添加显示与隐藏图层的行为。7.保存与预览。8.为下拉菜单设置超级链接(1) 根据菜单内容，建立相应的其他页面文件。(2) 为各菜单项设置跳转到这些页面的超级链接。(3) 再次保存文件并预览效果。任务二：时间轴1. 在C盘或其他盘新建一个文件夹，作为站点文件夹。在此站点中再建一个images子文件夹，将给定的素材存入其中。建立本地站点。2. 打开给定的网页文件sx17-1-1.htm ，在网页上插入一个层 Layerl,并将其位置调整好，然后在其中插入给定的图片imgl . gif,图片大小为64X 64。打开“时间轴”面板，把图层Layerl拖到“时间轴面板上，单击最后一帧关

30、键帧，并将其拖到第 100帧的位置。再单击图 层Layerl ,将Layerl水平拖动到页面的右侧。3. 选中“时间轴”面板上的“自动播放”和“循环”选项。4. 将文件另存为SXI7-1-3. htm,并在浏览器中预览。5.利用时间轴使层做轨迹运动，打开刚才保存的SXI7-1-3 . htm文档，再插入一个图层Layer2，并将给定的图片img2. Gif插入其中，设置图片和层的大小均为100*100。6. 右击“时间轴”面板的动画通道，在弹出的快捷菜单中选择“添加时间轴”命令，新 添加的时间轴为“ Timeline2。7. 选中页面中的图层 Layer2，并单击右键，在弹出的快捷菜单中选择“

31、记录路径”命令， 紧接着用鼠标拖动层左上角的标记在页面上移动绘制路径，释放鼠标，在页面上出现了一条灰色的路径。同时，时间轴上也出现了一个有多个关键帧的动画条。8. 选中“时间轴”面板上的“自动播放”和“循环”选项。保存文件，并在浏览器中预 览。9. 给移动的小猪添加行为和超级链接，选中页面中的Layer2，打开“行为”面板，单击“ + ”按钮，从弹出的菜单中选择“时间轴”I “停止时间轴”命令。然后从对话框中选择“ 1imeline2单击“确定”按钮。在“行为”面板中将事件改为onMouseover。10.再次单击“行为”面板的“ +”按钮，从弹出的菜单中选择“时间轴” “播放时间轴”命令。然

32、后从对话框中选择“Timeline2,单击“确定”按钮。在“行为”面板中将事件改为onM ouseout。11.选中Layer2层中的图片，在“属性”检查器的链接栏中输入“sxl7-1-2 . htm(预先编辑好的网页)，在替代栏中输入“单击有惊喜”。12.保存文件，并在浏览器中预览。任务三：利用CSS样式改变页面风格1.在c盘或其他盘新建一个文件夹，作为站点文件夹。将给定的网页文件及素材文件夹存 入该文件夹中，建立本地站点2.自定义样式的定义及应用(1) 打开站点中给定的 sx20 . 1. 1. htm文档。(2) 选择“窗口” I 样式”菜单命令，将“ CSS样式”面板打开。(3) 单击

33、“ CSS样式”面板下方的“新建 CSS样式”按钮，打开新建样式对话框。在选择器类型处选择“类(可应用于任何标签)”，名称处输入“ ysl ”，定义在处选择“仅对该文档”。单 击“确定”按钮。(4) 在弹出的“ ysl的CSS样式定义”对话框中，进行如图20-25所示的样式定义(类型：字体为隶书，大小为 36像素，颜色为#0033FF;区块：文字对齐为居中)。(5) 用同样的方法定义样式“ ys2”，定义内容如图20-26 所示(类型：字体为华文新魏，大 小为24像素；区块：文字对齐为居中)。(6) 用同样的方法定义样式“ ys3”，定义内容如图 2027 所示(类型：字体为隶书，大小 为36

34、像素，粗细为粗体，#00CC33区块：文字对齐为居中)。(7) 下面开始应用已定义的样式。选中第一行标题“唐诗欣赏”，单击右键，选择“ CSS样式ysl ,(或者用前面介绍的其他方法来应用ysl)，这时标题已变成所定义的样式了。用同样的方法，将每首诗的诗文内容应用 ys2 ,将每首诗的标题段落应用“ ys3 ”。效果如图20-28所示。(8) 修改页面的背景风格。首先为页面设置背景图像(站点中images文件夹中的bj . jpg文件)，效果如图20-29所示。由于选择的背景图像的尺寸不够大，在页面中图像会以不断重复 的形式铺满整个页面，视觉效果不够理想。(9) 在“CSS样式”面板新建自定义

35、样式“ ys4 ”，在样式定义对话框中，背景样式的设置如图20 30所示(背景：重复为不重复，附件为固定，水平位置为居中，垂直位置为居中)。(10) 选择文档窗口左下方的标签选择器 .body，然后单击右键，从下拉列表中选择“设 置类，ys4”，文档应用样式 ys4后的效果如图20-31所示。当预览时会发现背景图像居中并不 再重复，且当用鼠标滚动游览文字时，背景图像保持静止，而不随文字的滚动而滚动。3.重定义特定标签外观(1) 单击“ CSS羊式”面板下方的“新建 (;SS样式”按钮，打开新建样式对话框，选择器 类型处选择“标签(重定义特殊标签的外观)”，标签处下拉列表选择“ ln定义在处选择

36、“仅对该 文档”。单击“确定”按钮。(2) 在弹出的“ li的CSS羊式定义”对话框中，进行如图20-32所示的样式定义(类型：字体为华文新魏，大小为 24像素；列表：项目符号图像为 0001. gif)。(3) 单击“确定”按钮，发现页面列表外观发生了变化。(4) 再次单击“ CSS羊式”面板下方的“新建CSS样式”按钮，打开新建样式对话框，选择器类型处选择“标签(重定义特殊标签的外观)”，标签处下拉列表选择“ a ”，定义在处选择“仅 对该文档”。单击“确定”按钮。(5) 在弹出的 a的cSS样式定义”对话框中，进行定义，其中类型分类中只将修饰选择 为无”。单击“确定”后，页面中超级链接的

37、下划线处的修饰没有了，5. (1)单击“ CSS羊式”面板下方的“新建 CSS样式”按钮，打开新建样式对话框，选择器 类型处选择“高级(ID、伪类选择器等)”，选择器处下拉列表选择 “a: link ”，定义在处选择“仅 对该文档”。单击“确定”按钮。(2) 在弹出的“a: link的(；SS样式定义”对话框中，进行如图20 34所示的样式定义(类型：字体为华文新魏，大小为24像素，颜色为#CC0099修饰为无)。(3) 再次单击“ CSS样式”面板下方的“新建CSS样式”按钮，在对话框中其他选项不变，只将选择器选为“ a： hover，。然后在“ a: hover的CSS样式定义”对话框中，进行如图2035所示的样式定义(类型：字体为华文新魏，大小为 24像素，颜色为#FF0000,修饰为下划线)。(4) 单击“确定”按钮，关闭定义对话框。预览时可以看到当鼠标指针移到超级链接文字 时，文字变为红色且出现下划线修饰。(5) 将网页另存为Index . html，按【F12】预览网页，观察各种样式的应用效果。六、实训小结经过本次网页制作与规划实训，使我认识到要做好一个能吸引人的精美网页并不是一件容 易的事情。它包括图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。在这 次实训期间，也暴露出了许多我自身存在的问题，同时也对自身有了很大的提高，培