综合网站开发实验指导书第6次.docVIP

实　验　六 实验名称：应用层技术制作网页 实验目的：掌握使用层排版的方法；掌握创建层的方法；熟练掌握调整层大小、移动层、对齐层的方法；掌握改变层叠放次序的方法；掌握改变层可见性的方法。 实验内容： 一、根据提供的素材1，实现如下设计目标 创建一组相互重叠的彩色图像，当鼠标移动到某图像上时，就会出现相应的带阴影效果的说明文字，当鼠标离开图像时，说明文字消失。页面效果如图6.1所示。 图6-1 图层制作效果 1．新建一个网页文件，创建9个层。 2．分别在层ApDiv1~ApDiv4中插入图像img1.gif~img4.gif。 3．为层ApDiv5添加文字“憧憬未来”，并使用CSS类样式，做如下设置： 属性 属性值 字体 华文行楷 文字大小 18mm 文字颜色 #FFFF33 CSS滤镜 Blur(Add=true, Direction=135,Strength=10) 4．为层ApDiv6~ApDiv9添加说明文字（说明文字在txt.txt文件中），并使用CSS样式设置： 属性 属性值 文字大小 9pt 行高 160% 文字颜色 #000000 文字缩进 2em 5．利用“属性”面板分别为层ApDiv6~ApDiv9设置背景颜色 层 背景色 ApDiv6 #CCFFFF ApDiv7 #FFFF99 ApDiv8 #99FF66 ApDiv9 #FFCCCC 6．创建阴影层ApDiv10~ApDiv13，用“属性”面板设置层的背景颜色为：#666666 7．分别调整层ApDiv1~ApDiv4的大小，使其与图像大小相同 8．将层ApDiv13的大小设置成宽200px，高150px，并使层ApDiv6~ApDiv12的大小与ApDiv13相同。 9．利用“属性”面板精确设置层ApDiv1~ApDiv4的位置 层 位置 ApDiv1 左：295px 上：130px ApDiv2 左：361px 上：265px ApDiv3 左：446px 上：152px ApDiv4 左：512px 上：304px 10．移动层ApDiv5，将其放置在页面上方居中的位置 11．移动层ApDiv6~ApDiv9的位置，将其分别放置在ApDiv1~ApDiv4的两侧 12．分别将层 ApDiv10与ApDiv6 ApDiv11与ApDiv7 ApDiv12与ApDiv8 ApDiv13与ApDiv9 的左端与上缘对齐，并精确移动层ApDiv10~ApDiv13，形成阴影效果。 注：ApDiv10~ApDiv13的移动使用“→”和“↓”键。 13．按如下要求更改层的名称 层原名 更改后的名称 ApDiv1~ApDiv4 img1~img4 ApDiv5 title ApDiv6~ApDiv9 text1~text4 ApDiv10~ApDiv13 text1-sd~text4-sd 14．改变层的叠放次序 改变阴影层text1-sd~text4-sd的叠放次序，分别将相应的阴影层置于text1~text4的下面。 15．改变层的可见性 将层text1~text4、text1-sd~text4-sd设置为“隐藏”状态。 16．利用行为控制层的可见性 分别对文档中的4幅图像设置如下效果：当鼠标移动到某图像上时，出现该图像的说明文字；当鼠标离开图像时，说明文字消失。 17．设置页面背景图像为img_background.jpg 二、根据提供的素材１，练习层与表格之间的转换(自学) 看屏幕录制“12层与表格素材转换.exe”，练习将material文件夹的文件ltot.html中的层转换为表格，然后再将表格转换为层，体会转换过程中各选项的涵义。 三、根据提供的素材2，完成如下内容 1．定义站点，新建文件index.html文件，设置页面背景图像为bg.gif，网页标题为“欢迎光临我的个人空间”。 2．在index.html文档中建立5个层，并分别在不同的层中插入图像heart.gif、zuri.gif、photo1.gif、photo2.gif、enter.gif，如图6.2所示。 图6.2 由5个层组成的简单网页 3．在文档中，将层转换成表格，如图6.3所示。 图6.3　层转换成的表格 4．分别在文档顶部和底部建立一个层，设置层背景图像为banner.gif，并将这两个层设置成左对齐，如图6.4所示。 图6.4 设置层的背景图像 5．利用层的可见性，实现当鼠标移动到图像photo2.gif上时会显示一段文字；当鼠标离开图像时，文字又消失，如图6.5、6.6所示。 图6.5 利用层的可见性实现显示图层的效果 图6.6 利用层的可见性实现