用DIVCSS技术的WEB页面布局实践.doc

动态网页设计专业实习西华大学数计学院专业实习报告III数学与计算机学院专业实习报告课程代码:8422931题目:用DIV+CSS技术的WEB页面布局实践年级/专业/班:学生姓名:学号:332008090101021开始时间:2011年6月6日完成时间:2011年6月26日实习地点:6A410实习成绩：专业综合技能（30）报告书质量（50）综合表现（出勤、纪律）（20）总分（100）指导教师签名：年月日西华大学数学与计算机学院专业实习报告2021XXX公司人事管理系统实现—管理模块1技术路线1.1任务与分析本实习主要的目的是了解WEB服务器的安装配置方法，熟悉用Dreamwearver进行网页设计的一般方法和过程，了解用DIV+CSS进行WEB页面布局设计的技术及方法，并能初步进行一般的网页布局设计。1.2相关技术本课题中涉及到的相关技术有html、Dreamwearver和DIV+CSS技术。HTML：超文本标记语言（英文：HyperTextMarkupLanguage，HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。Dreamweaver：Dreamweaver是由著名软件公司“Adobe”开发的一款所见即所得的网页编辑器，和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。在最新版“CS4”中做了一次脱胎换骨的改进，从中看到了更多的设计元素。软件因其极佳的制作效率、网站管理和无可比拟的控制能力使它在此类型的软件中独领风骚。DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式,真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。2技术路线主要要求与主要功能（或需求分析）2.1要求将材料-1.html、材料-2.html、材料-3.html用DIV+CSS技术对应排版成材料-1样式.jpg、材料-2样式.jpg、材料-3样式.jpg所示的页面布局形式。2.2实现2.2.1材料-1.html排版的CSS代码<styletype="text/css"><!--div{margin:0auto;margin-bottom:30px;height:300px;width:844px;}.div1{padding:10px;border:solid;border-right-style:dashed;border-color:#CCCCCC;border-width:1px;border-left-width:2px;height:300px;width:400px;float:left;}.div1_1{padding:10px;border:1pxsolid;border-left-style:none;border-color:#CCCCCC;border-width:1px;height:300px;width:400px;float:right;}.tu{float:left;margin-right:15px;/*图片右端与文字的距离*/}.one{font-size:20px;font-weight:bold;}.div2{padding:5px;border-top-style:solid;border-top-color:#CCCCCC;border-top-width:2px;}.two{font-size:20px;font-weight:bold;color:#99CC66;}.div3{line-height:10px;text-align:left;}LI{list-style-type:none;}.div4{margin-bottom:80px;}.there{line-height:24px;}--></style></head>2.2.2材料-1.html排版后的页面截图2.2.3材料-2.html排版的CSS代码<styletype="text/css">.div1{margin:0auto;width:830px;height:140px;border:1pxsolid#CC