第8章 应用图层技术制作网页

网页设计与制作实用教程第8章应用图层技术制作网页22020/1/20学习目标掌握使用图层排版的方法。掌握创建图层的方法。正确区分激活图层、选择图层的使用场合。熟练掌握调整图层大小、移动图层、对齐图层的方法。了解更改图层名称的方法。掌握改变图层叠放次序的方法。了解改变图层可见性的方法。第8章应用图层技术制作网页32020/1/20目录设计目标页面分析实训引导制作步骤本章小结配套实训练习题第8章应用图层技术制作网页42020/1/20设计目标创建一组相互重叠的彩色图像，当鼠标移动到某图像上时，就会出现相应的带阴影效果的说明文字，当鼠标离开图像时，说明文字消失。浏览效果如图所示。第8章应用图层技术制作网页52020/1/20页面分析这种相互重叠的效果，通过表格定位是无法完成的。而使用图层则可以轻松地实现。页面中包含了以下内容，如：一个标题图层4个图像图层；4个背景图层4个说明文字图层分别对文档中的4幅图像设置效果：当鼠标移动到某图像上时，出现该图像对应的说明文字；当鼠标离开图像时，说明文字消失。相应的设置参见教程P161。第8章应用图层技术制作网页62020/1/20实训引导1．本页面用到的5个图像文件：img8_1.gif、img8_2.gif、img8_3.gif、img8_4.gif（相互重叠的图像）及img8_5.jpg（网页背景图像）由配套光盘webcourse\chapter08\images文件夹提供，在制作页面之前，先将用到的图像文件复制到本地站点future\images文件夹中。2．页面中的文字资料由配套光盘webcourse\chapter08\materials文件夹下的txt8_1.txt文件提供。3．页面效果请参见配套光盘webcourse\chapter08\result文件夹下的ex8_1.htm文件。第8章应用图层技术制作网页72020/1/20制作步骤1．创建9个图层；在4个图层中插入图像。在5个图层中输入相应的文字并设置文字的大小、颜色、行高、阴影效果等。2．为图层添加背景颜色。3．设置图层的大小。4.调整图层的位置。5．给图层命名、改变图层的叠放次序。6．利用行为控制图层的可见性。7.图层与表格的相互转换。第8章应用图层技术制作网页82020/1/20创建图层创建9个图层，操作步骤见教程P162。分别在Layer1～Layer4层中插入图像，操作步骤见教程P164。为Layer5层添加文字“憧憬未来”，操作步骤见教程P164。分别为Layer6～Layer9图层添加说明文字，操作步骤见教程P164。第8章应用图层技术制作网页92020/1/20为图层添加背景颜色利用属性面板分别为Layer6～Layer9图层设置背景颜色，操作步骤见教程P165。创建阴影图层Layer10～Layer13，用属性面板设置图层的背景颜色，操作步骤见教程P165。第8章应用图层技术制作网页102020/1/20设置图层的大小分别调整Layer1～Layer4图层的大小，使其与图像大小相同，操作步骤见教程P165。将图层Layer13的大小设置成宽200px、高150px，并使图层Layer6～Layer12的大小与图层Layer13相同，操作步骤见教程P166。第8章应用图层技术制作网页112020/1/20调整图层的位置利用属性面板精确设置Layer1～Layer4层的位置，操作步骤见教程P167。移动图层Layer5，将其放置在页面上方居中的位置，操作步骤见教程P167。移动图层Layer6～Layer9的位置，将其分别放置在Layer1～Layer4的两侧，操作步骤见教程P167。分别将图层Layer10与图层Layer6、Layer11与Layer7、Layer12与Layer8、Layer13与Layer9的左端与上缘对齐，并精确移动图层Layer10～Layer13，形成阴影效果，操作步骤见教程P169。第8章应用图层技术制作网页122020/1/20给图层命名、改变图层的叠放次序利用属性面板分别将Layer1～Layer4四个图层重命名为img1～img4，操作步骤见教程P170。利用“层”面板将Layer5重命名为title，分别将Layer6～Layer9重命名为text1～text4，将Layer10～Layer13重命名为text1-sd～text4-sd，操作步骤见教程P170。利用“层”面板改变阴影图层text1-sd～text3-sd的叠放次序，分别将相应的阴影图层置于text1～text3的下面，操作步骤见教程P171。利用属性面板改变文字图层text4的叠放次序，将其置于阴影图层text4-sd的上面，操作步骤见教程P172。第8章应用图层技术制作网页132020/1/20利用行为控制图层的可见性利用“层”面板将图层“text1”、“text1-sd”、“text2”、“text2-sd”、“text3”、“text3-sd”设置为“隐藏”状态，操作步骤见教程P173。利用属性面板将图层“text4”、“text4-sd”设置为“隐藏”状态，操作步骤见教程P174。分别对文档中的4幅图像设置如下效果：当鼠标移动到某图像上时，出现该图像对应的说明文字；当鼠标离开图像时，说明文字消失，操作步骤见教程P174。第8章应用图层技术制作网页142020/1/20将图层与表格的相互转换将图层转换为表格，操作步骤见教程P175。将表格转换成图层，操作步骤见教程P178。第8章应用图层技术制作网页152020/1/20本章小结本章主要介绍了图层的使用及图层的各种属性，其中包括：图层的创建改变图层的大小图层的移动图层的对齐图层的叠放次序图层的可见性将图层转换成表格或将表格转换成图层。使用图层不仅可以实现各种排版效果，更重要的是图层是制作动态网页的基础，图层结合行为及时间轴的使用，可以创建各种生动活泼的动态效果。第8章应用图层技术制作网页162020/1/20配套实训参见教材第178～181页，利用提供的素材文件，按要求制作一个个人主页。第8章应用图层技术制作网页172020/1/20练习题参见教材第181页，完成相应的练习题：填空题单选题思考题