[心理学]学号姓名网页设计实验报告实验六.docVIP

学院 年级、专业、班 姓名 学号 课程名称 网页设计 实验项目名称 盒子浮动与定位、用CSS设置表格样式 广州大学学生实验报告 一、实验目的 掌握使用Dreamweaver软件编写网页文件的方法。 掌握使用CSS盒子浮动与定位的方法。 二、实验设备 实验设备要求每个学生一台电脑，并需装有Dreamweaver CS4程序。 三、实验内容 以Site6为网站根文件夹建立站点，站点名为Site6； 在Dreamweaver打开站点中test.html文件，然后将文件另存为test6.html，完成以下操作： 根据文档中的html结构，完成以下DOM树（请注明样式的类名或id名）： 设置body样式：背景颜色浅灰色，字体颜色深灰色，字体为Verdana, Geneva, sans-serif ，字体大小13px，1.5倍行高 ，外边距0px。 设置#father盒子样式：宽度900px，背景颜色白色，盒子在浏览器窗口居中。 定义“阳朔概况”盒子的样式：宽度300px，边框1px灰色点线，外边距为5px，内边距5px，向左浮动。 设置“阳朔概况”中图像的样式：宽度280px高220px，边框5px灰色实线。 定义“阳朔风光”盒子的样式：宽度555px，边框1 px灰色点线，外边距为5px，内边距5px，向右浮动。设置背景图像为pic/bg-blue.gif，背景颜色为#ececff，竖直方向重复。 设置“阳朔风光”中图像的样式：宽度200px高度170px，边框框5px灰色实线，向左浮动。 定义其子盒子“漓江景区”和“遇龙河景区”的样式：宽度450px，顶部加边框1px浅蓝色虚线，并在其父盒里居中。 定义“美食”盒子的样式：宽度300px，边框1px灰色点线，向左浮动，左外边距 5px，内边距5px。 设置“美食”中图像的样式：宽度280px高220px，边框5px灰色实线。 利用图像替换技术把“阳朔概况”和“美食”的h3标题置换为pic/title1.gif和pic/title3.gif。 利用图像替换技术，把文档后面的备用盒子#extradiv置换为pic/tree.gif，并将其绝对定位在浏览器中：距顶部380px距右边100px，衬在文字下方。 四、实验过程及最终效果（完成的网页代码及网页屏幕截图） 五、实验结果分析和实验心得 Body Div #father Div 阳朔概况 #intro Div 阳朔风光 #scene Div 美食 #food H3 .title1 Img .pic1 P .p1 Span 几个备用盒子