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

综合网站开发实验指导书 实验六 应用层技术制作网页实验六实验名称：应用层技术制作网页实验目的：掌握使用层排版的方法；掌握创建层的方法；熟练掌握调整层大小、移动层、对齐层的方法；掌握改变层叠放次序的方法；掌握改变层可见性的方法。实验内容：一、根据提供的素材1，实现如下设计目标创建一组相互重叠的彩色图像，当鼠标移动到某图像上时，就会出现相应的带阴影效果的说明文字，当鼠标离开图像时，说明文字消失。页面效果如图6.1所示。图6-1 图层制作效果1新建一个网页文件，创建9个层。2分别在层ApDiv1ApDiv4中插入图像img1.gifimg4.gif。3为层ApDiv5添加文字“憧憬未来”，并使用CSS类样式，做如下设置：属性属性值字体华文行楷文字大小18mm文字颜色#FFFF33CSS滤镜Blur(Add=true, Direction=135,Strength=10)4为层ApDiv6ApDiv9添加说明文字（说明文字在txt.txt文件中），并使用CSS样式设置：属性属性值文字大小9pt行高160%文字颜色#000000文字缩进2em5利用“属性”面板分别为层ApDiv6ApDiv9设置背景颜色层背景色ApDiv6#CCFFFFApDiv7#FFFF99ApDiv8#99FF66ApDiv9#FFCCCC6创建阴影层ApDiv10ApDiv13，用“属性”面板设置层的背景颜色为：#6666667分别调整层ApDiv1ApDiv4的大小，使其与图像大小相同8将层ApDiv13的大小设置成宽200px，高150px，并使层ApDiv6ApDiv12的大小与ApDiv13相同。9利用“属性”面板精确设置层ApDiv1ApDiv4的位置层位置ApDiv1左：295px 上：130pxApDiv2左：361px 上：265pxApDiv3左：446px 上：152pxApDiv4左：512px 上：304px10移动层ApDiv5，将其放置在页面上方居中的位置11移动层ApDiv6ApDiv9的位置，将其分别放置在ApDiv1ApDiv4的两侧12分别将层ApDiv10与ApDiv6ApDiv11与ApDiv7ApDiv12与ApDiv8ApDiv13与ApDiv9的左端与上缘对齐，并精确移动层ApDiv10ApDiv13，形成阴影效果。注：ApDiv10ApDiv13的移动使用“”和“”键。13按如下要求更改层的名称层原名更改后的名称ApDiv1ApDiv4img1img4ApDiv5 titleApDiv6ApDiv9text1text4ApDiv10ApDiv13 text1-sdtext4-sd14改变层的叠放次序改变阴影层text1-sdtext4-sd的叠放次序，分别将相应的阴影层置于text1text4的下面。15改变层的可见性将层text1text4、text1-sdtext4-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所示