用DIV+CSS技术的WEB页面布局实践.docx
《用DIV+CSS技术的WEB页面布局实践.docx》由会员分享，可在线阅读，更多相关《用DIV+CSS技术的WEB页面布局实践.docx（10页珍藏版）》请在冰豆网上搜索。
用DIV+CSS技术的WEB页面布局实践
数学与计算机学院
专业实习报告
课程代码:
8422931
题目:
用DIV+CSS技术的WEB页面布局实践
年级/专业/班:
学生姓名:
学 号:
332008090101021
开始时间:
2011年6月6日
完成时间:
2011年6月26日
实习地点:
6A410
实习成绩：
专业综合技能
（30）
报告书质量（50）
综合表现（出勤、纪律）（20）
总分
（100）
指导教师签名：
年月日
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代码
--
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;}
-->
2.2.2材料-1.html排版后的页面截图
2.2.3材料-2.html排版的CSS代码
.div1{
margin:
0auto;
width:
830px;
height:
140px;
border:
1pxsolid#CCCCCC;
}
.div2{
border:
1px#FFFFFFsolid;
background-color:
#FBDA82;
FILTER:
progid:
DXImageTransform.Microsoft.Gradient（gradientType=0,startColorStr=#F7FABE,endColorStr=#FFCC33）;
padding-bottom:
10px;
height:
25px;
font-family:
"宋体";
font-size:
12px;
}
.div2_1{
border-left-style:
solid;
border-left-width:
2px;
border-left-color:
#FEF8E7;
float:
right;
margin-top:
10px;
}
.div3{
border-top-color:
#FBDA82;
border-top-style:
solid;
border-top-width:
1px;
padding-bottom:
5px;
padding-left:
10px;
padding-right:
10px;}
.div3_1{
float:
left;
}
.div3_2{
padding:
2px;
margin-top:
10px;
margin-left:
10px;
float:
left;
font-size:
12px;
border-right-color:
#CCCCCC;
border-right-style:
solid;
border-right-width:
1px;}
.div3_2_1{
margin-top:
7px;
margin-bottom:
12px;
}
2.2.4材料-2.html排版后的页面截图
2.2.5材料-3.html排版的CSS代码
.div{
margin:
0auto;
width:
355px;
border:
1px#FF0066solid;
float:
left;
}
.div1{
border-bottom:
1px#FF0066solid;}
.div2{
margin-left:
10px;
font-size:
13px;
line-height:
2.5em;
}
.div2li{
list-style-type:
none;
}
.div3{
line-height:
1.5em;
margin-top:
10px;
font-size:
13px;}
.div3li{
margin:
0;padding:
0;text-indent:
0;}
2.2.6材料-3.html排版后的页面截图
3设计环境
Iis5.0/6.0
DreamWearver
IE浏览器
4DIV+CSS技术和传统表格技术的优缺点比较
CSS网页布局的意义体现在如下方面：
一、使页面载入得更快
由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。
相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。
而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。
二、降低流量费用
页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。
三、修改设计时更有效率
由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。
根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。
四、保持视觉的一致性
DIV+CSS最重要的优势之一：
保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。
而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。
五、更好地被搜索引擎收录
由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。
六、对浏览者和浏览器更具亲和力
我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。
由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。
说了这么多CSS网页布局的意义与优点，同时也不能轻视CSS网页布局的副作用：
一、DIV+CSS尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了。
二、CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。
三、虽然说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。
当然这应该是浏览器的问题，但是可以说在目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。
四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。
DIV+CSS网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。
因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。
综合以上讨论的DIV+CSS优势和略势，我认为不可盲目跟风，如何更有效、更合理的运用WEB2.0设计标准，这需要很长时间的学习和锻炼。
而如何将DIV+CSS运用的更好，我觉得这需要通过不断的实践和体检，积累丰富的设计经验，才能很好的掌握这门技术。
5总结
DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。
SEO是指搜索引擎优化，主要就是通过对网站的结构、标签、排版,关键字等各方面的优化，使搜索引擎更容易抓取网站的内容，并且让网站的各个网页在等搜索引擎中获得较高的评分，从而获得较好的排名。
DIV+CSS网页布局对SEO有很重要的影响。
具体来看到底有什么好处呢?
DIV+CSS的网页布局对SEO的好处一、不存在表格的嵌套问题
很多“网站如何推广”的文章中称，搜索引擎一般不抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎相关的官方证实。
我的几项实验结果没有完全出来，但根据目前掌握的情况来看，Spider爬行Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。
使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。
如果嵌套的表格中是核心内容，蜘蛛（Spider）爬行时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。
网站中过多的相似页面会影响排名及域名信任度。
DIV+CSS的网页布局对SEO的好处二、精简的代码
使用DIVCSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。
观看更多的HTML教程内容。
代码精简所带来的直接好处有两点：
一是提高蜘蛛（Spider）爬行效率，能在最短的时间内爬完整个页面，这样对收录质量有一定好处;二是由于能高效的爬行，就会受到蜘蛛（Spider）欢迎，这样对收录数量有很大好处。
升级会员 