《网页设计实验三.docVIP

网页设计 实 验 报 告 课程名称 网页设计 课程编号 0920150 实验项目名称 网页设计工具软件Dreamweaver使用 学号 2012201327 班级 姓名 张梦奇 专业 软件工程 学生所在学院 软件学院 指导教师 梁爽 实验室名称地点 计算机实验教学中心21B475 实验时间 11月25日 网页设计 实验3网页设计工具软件Dreamweaver使用 实验目的 了解运用平面绘图软件制作页面的基础知识、Dreamweaver基础知识 掌握网页设计工具软件Dreamweaver使用。 实验内容 个人主页页面设计,为自己设计一个个人主页主页面,要求必须含有Banner和主导航,3个以上栏目。 实验任务与要求 运用平面绘图软件设计页面布局,并进行切片,生成index.html页面。 在Dreamweaver中建立站点,并编辑生成index.html页面,添加相应的栏目内容,如:通过插入表格方式，添加列表的文字等。 完成实验测试成功。 实验环境 软件环境：Windows 操作系统 IE 实验步骤（包含实验截图） !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title我的主页/title style type=text/css body { background-color: #00FF00; } #h{ line-height: 24px; list-style-type: none; background:#FFF;} #h a { display: block; width: 100px; text-align:center; } #h a:link { color:#8080FF; text-decoration:none; } #h a:visited { color:#FFFF80;text-decoration:none; } #h a:hover { color:#8080FF; text-decoration:none; font-weight:bold; } #h ul{ list-style: none; } #h li { float:left; width:150px; background:#EAEAEA; } #h li a{ } a:visited { color: purple} a:hover{ color:#8080FF; background:#999; } #h li ul { line-height: 27px; list-style-type: none; text-align:left; left: -800em; width: 100px; position: absolute; } #h li ul li{ float: left; width: 124px; background:#FFF; } #h li ul a{ wedisplay: block; width: 100px; text-align:left; padding-left:24px; } #h li ul a:link { color:#666; text-decoration:none; } #h li ul a:visited { color:#666;text-decoration:none; } #h li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#999; } #h li:hover ul { left: auto; } #h li.sfhover ul { left: auto; } #content { clear: left; } .ul { text-align: center; background-repeat:repea