论文部分内容阅读
【摘 要】在网页设计中DIV CSS网页布局方法被越来越多的应用到，论文通过具体的实例分析了DIV CSS的布局的技术方法，综述了在布局当中的常用方法，并且结合Table 布局方式，在此基础上提出了网页布局方法的探究。
【关键词】DIV CSS 网页布局 方法
1 引言
传统网页布局的方法主要包含框架和表格。当利用表格的方式进行布局的时候快捷方便，但出于对版式的要求，一般需要插入许多的表格， 甚至有时还要对表格进行多层嵌套，这不仅延长了页面打开的时间， 而且降低了网页中代码的可读性， 增加维护成本，DIV CSS布局方式使网页结构和外观相分离， 不但极大地简化了代码，而且使站点加载的速度变得快捷、维护也更加方便，无疑对传统布局的网页方式造成了极大的冲击。除此之外，DIV CSS布局方式的使用，使传统的网页布局的不足得到很好的弥补，当前国内多数比较著名的网站都利用此类方式方法进布局， 给用户带来了全新的体验模式。
2 DIV与CSS的介绍
2.1 DIV
DIV即指区块， DIV一般用于定义HTML网页上的区块，将网页中不同的段落或不同的内容封装进区块的起始与结束标记当中， 经过属性设置以控制其中元素的特性。
2.2 CSS
CSS意指层叠样式表，CSS 可以把HTML文件内容与样式的定义相分离，只需制定定义样式的CSS文件，同时让所有的HTML文件调用已经定义的样式，当需要更改HTML文件中任何部分的风格时，只需要将CSS文件打开进行样式的更改就可以了，即可使相同的HTML内容显现出不同的形式，这样使网站更新与维护变得更为简易。
2.3 DIV CSS 的优点
2.3.1 网站的更新与维护更简易
因为CSS文件能够被多个网页链接或使用，当需要重新布局网站页面时，只要依照区块的内容标记到CSS样式的文件里，寻找到相应的ID，并进行简单的修改即可。不需要在每一个HTML文件中进行重复的设置，使修改页面变得更加简捷，极大地提高了网站更新与维护的效率，节约网站的运营成本。
2.3.2 内容与表现相分离
即CSS代码和HTML代码相分离，CSS可以把样式的部分单独的置于独立的样式文件中，而在HTML的文件中只放置网页需要显示的内容，而网页的内容表现的形式则可以完全通过CSS文件来实现，消除了大量的冗余代码，解决页面表现和结构混合在一起的问题。
2.3.3 搜索引擎中搜索的简便
当使用DIV CSS 网页布局设计时，结构得到优化、代码的精简度提高、网页内容更容易被搜索引擎采集到。当网页搜索时，搜索引擎程序不需要去访问CSS文件，可以直接提取HTML文件中DIV内容，这样在更短时间可以搜索整个页面。当一个页面中包含许多的标记表格来布局，遇到多层的表格嵌套時，整个页面往往会直接跳过或直接放弃嵌套的内容。因而运用DIV CSS技术，让搜索引擎收录网站变得更加方便，提升搜索引擎的索引效率。
2.3.4 网页加载迅速
当代码写在了CSS 文件中时，让页面体积变小、代码简洁，而且相较于表格嵌套方式而言，DIV CSS赋予页面更多的独立区域，当要打开页面时，不会在整个页面局限于一个大表格里，而是逐层加载，提升了页面加载速率。
2.3.5 维持网站风格和视觉的一致性
所有区域由CSS文件控制，针对分辨率及操作系统发生更改时，网页用表格技术设计出来时会有变形的现象出现，而使用DIV CSS技术可以让页面变得更加灵敏，并且不同的浏览器可以达到一致的显示效果。
2.3.6 浏览器兼容性强
DIV CSS 布局兼容性更强，所有的浏览器几乎都可以运行，符合WEB的标准规范和发展趋势，并且兼容性强大，在新开发的浏览器中也可以很好的运行。
3 网页布局的发展
3.1 早期使用的网页布局方法
早期网页布局一般采用如下四种方法所示，这些方式都是较为常用的布局方式，一般由其中一种， 或是几种布局方式的结合使用：随着许多新上网设备的涌现和网络技术的迅速发展，使以往的网页布局方式变得不能适应新要求。
3.2 新WEB标准
针对表现、行为和结构三个部分，W3C 设定了大部分的标准，采用了很多新标准的优点，具有更少的组件和代码、带宽要求低、网站更易于维护、降低成本等，主要如下三点：
（1）表现标准语言CSS；
（2）结构化标准语言XML和XHTML；
（3）行为标准主要包括对象模型。
4 DIV CSS 网页布局应用实例
4.1 三栏式自适应宽度布局
使用
【关键词】DIV CSS 网页布局 方法
1 引言
传统网页布局的方法主要包含框架和表格。当利用表格的方式进行布局的时候快捷方便，但出于对版式的要求，一般需要插入许多的表格， 甚至有时还要对表格进行多层嵌套，这不仅延长了页面打开的时间， 而且降低了网页中代码的可读性， 增加维护成本，DIV CSS布局方式使网页结构和外观相分离， 不但极大地简化了代码，而且使站点加载的速度变得快捷、维护也更加方便，无疑对传统布局的网页方式造成了极大的冲击。除此之外，DIV CSS布局方式的使用，使传统的网页布局的不足得到很好的弥补，当前国内多数比较著名的网站都利用此类方式方法进布局， 给用户带来了全新的体验模式。
2 DIV与CSS的介绍
2.1 DIV
DIV即指区块， DIV一般用于定义HTML网页上的区块，将网页中不同的段落或不同的内容封装进区块的起始与结束标记当中， 经过属性设置以控制其中元素的特性。
2.2 CSS
CSS意指层叠样式表，CSS 可以把HTML文件内容与样式的定义相分离，只需制定定义样式的CSS文件，同时让所有的HTML文件调用已经定义的样式，当需要更改HTML文件中任何部分的风格时，只需要将CSS文件打开进行样式的更改就可以了，即可使相同的HTML内容显现出不同的形式，这样使网站更新与维护变得更为简易。
2.3 DIV CSS 的优点
2.3.1 网站的更新与维护更简易
因为CSS文件能够被多个网页链接或使用，当需要重新布局网站页面时，只要依照区块的内容标记到CSS样式的文件里，寻找到相应的ID，并进行简单的修改即可。不需要在每一个HTML文件中进行重复的设置，使修改页面变得更加简捷，极大地提高了网站更新与维护的效率，节约网站的运营成本。
2.3.2 内容与表现相分离
即CSS代码和HTML代码相分离，CSS可以把样式的部分单独的置于独立的样式文件中，而在HTML的文件中只放置网页需要显示的内容，而网页的内容表现的形式则可以完全通过CSS文件来实现，消除了大量的冗余代码，解决页面表现和结构混合在一起的问题。
2.3.3 搜索引擎中搜索的简便
当使用DIV CSS 网页布局设计时，结构得到优化、代码的精简度提高、网页内容更容易被搜索引擎采集到。当网页搜索时，搜索引擎程序不需要去访问CSS文件，可以直接提取HTML文件中DIV内容，这样在更短时间可以搜索整个页面。当一个页面中包含许多的标记表格来布局，遇到多层的表格嵌套時，整个页面往往会直接跳过或直接放弃嵌套的内容。因而运用DIV CSS技术，让搜索引擎收录网站变得更加方便，提升搜索引擎的索引效率。
2.3.4 网页加载迅速
当代码写在了CSS 文件中时，让页面体积变小、代码简洁，而且相较于表格嵌套方式而言，DIV CSS赋予页面更多的独立区域，当要打开页面时，不会在整个页面局限于一个大表格里，而是逐层加载，提升了页面加载速率。
2.3.5 维持网站风格和视觉的一致性
所有区域由CSS文件控制，针对分辨率及操作系统发生更改时，网页用表格技术设计出来时会有变形的现象出现，而使用DIV CSS技术可以让页面变得更加灵敏，并且不同的浏览器可以达到一致的显示效果。
2.3.6 浏览器兼容性强
DIV CSS 布局兼容性更强，所有的浏览器几乎都可以运行，符合WEB的标准规范和发展趋势，并且兼容性强大，在新开发的浏览器中也可以很好的运行。
3 网页布局的发展
3.1 早期使用的网页布局方法
早期网页布局一般采用如下四种方法所示，这些方式都是较为常用的布局方式，一般由其中一种， 或是几种布局方式的结合使用：随着许多新上网设备的涌现和网络技术的迅速发展，使以往的网页布局方式变得不能适应新要求。
3.2 新WEB标准
针对表现、行为和结构三个部分，W3C 设定了大部分的标准，采用了很多新标准的优点，具有更少的组件和代码、带宽要求低、网站更易于维护、降低成本等，主要如下三点：
（1）表现标准语言CSS；
（2）结构化标准语言XML和XHTML；
（3）行为标准主要包括对象模型。
4 DIV CSS 网页布局应用实例
4.1 三栏式自适应宽度布局
使用
标记将网页划分为不同的区域，包括footer 、header、content三个区域，分别作为网页版权区域、头部和内容。制定的HTML文档代码如下所示：
内容区
#header { margin-bottom：10px； height：100px；border：1px solid；}
#sidebar { float：left； height：500px； width：30%；border：1px solid；}
#content { width： 100%； height：500px； margin-bottom：10px；}
其中，border 属性为solid，表示实线边框；container的margin 属性为0 auto，即指上下边距为0，auto指左右边距自动实现居中显示；width 为设置属性百分比的形式，当浏览器的窗口发生变化时，页面的宽度会自动适合窗口的宽度。main 的float 属性为right，sidebar 的float 属性为left，实现中间竖栏的显现效果。
4.2 实例
4.2.1构架分析
如一个网站关于运动用品的主页，经过对分析主页架构，下面将其中的各元素按不同的功能的划分成以下的模块：
顶部的部分，header，包含banner 图片区、menu和logo；内容的部分，pagebody，包含主体内容和左右边栏；底部的部分，包含版权信息和作者的邮箱地址等。从Div 布局与页面构架来看，可得网页Div 结构如下所示：
| body{} /* HTML 主体标签*/
∟’#header{} /* 头部标签*/
∟’#container（） /* 放置整个页面的div 标签*/
∟’ #banner 、#menu 、#logo/* banner、menu、 logo标签*/
∟ ’#sidebar{} /* 左右边栏的标签*/
∟ ’#pagebody{} /* 主体标签*/
∟ ’#foot{} /* 页脚标签*/
∟ ’#main{} /* 主体内容标签*/
以上标签的名称命名尽量做到透明清晰，以便其他人员能够迅速理解模块的含义以及标签定义。当需要时，子标签还可以父标签的名称作前缀，例如在main 层详细区分时，可以命名main_right 、main_left等。
4.2.2 拆分模块
依照Web的标准，将页面的内容和表现分离，主要定义Div 的CSS 样式。为了使今后的阅读更简洁，可考虑添加相关注释，新建一个style.css样式文件，代码如下所示：
body{font：12px Tahoma； text-align：center； margin：0px；background：#fff；} /* 基本信息*/
#header{ height：219px；margin：0 auto； width：800px；background：#1F86C0；}/* 頁面头部*/
#container{width：100%}
#banner{ margin：0 auto； height：180px；bwidth：800px； ackground：#1F86C0；}/* 页面banner*/
#menu{ height：39px；margin：0 auto； width：800px； background：#737172；}/* 导航*/
#sidebar{ float：left； height：400px； width：38%； backgound：#9C4121；}/* 左边栏*/
#foot{margin：0 auto； width：800px；height：50px；background：#7FA7C1；}/* 页面的底部*/
#main{ float：right；width：62%； height：400px；background：#00ffff；}/* 主要内容*/
#pagebody{ margin：0 auto； width：800px；background：#ccff00；}/* 页面的主体*/
定义的CSS 样式中， 元素边界的属性值是0，并取消了默认的边界。定container 元素宽度是100%，通过高度、宽度和边界属性确定header 的位置，定义了header 元素中的横向分栏，二者分别为menu元素和banner元素，同样以高度、宽度和边界属性定义了主体pagebody 的位置，而且运用浮动定位的属性，分别定义main 元素的位置和纵向分栏sidebar ，同样利用高度、宽度以及边界属性的定义确定了footer 元素的显示位置和大小。
5 结论
随着旧的页面布局的局限性逐渐暴露， 新Web标准的优越性逐渐为人们所重视。运用DIV CSS 的网页设计的流程与方法， 真正做到了行为、表现和结构的分离， 提高页面加载的速度与网页开发的效率，对网站更新和维护的效率也有很大的提升。传统的表格布局模式正在被基于DIV CSS 的网页设计方式逐渐取代， DIV CSS 的网页布局方式正成为WEB开发的方向。
【参考文献】
[1]曾顺.精通CSS DIV网页样式与布局[M].北京：人民邮电出版社，2007.
[2]王俭敏等.CSS DIV网页样式与布局案例指导[M].北京：电子工业出版社，2009，4.
#sidebar { float：left； height：500px； width：30%；border：1px solid；}
#content { width： 100%； height：500px； margin-bottom：10px；}
其中，border 属性为solid，表示实线边框；container的margin 属性为0 auto，即指上下边距为0，auto指左右边距自动实现居中显示；width 为设置属性百分比的形式，当浏览器的窗口发生变化时，页面的宽度会自动适合窗口的宽度。main 的float 属性为right，sidebar 的float 属性为left，实现中间竖栏的显现效果。
4.2 实例
4.2.1构架分析
如一个网站关于运动用品的主页，经过对分析主页架构，下面将其中的各元素按不同的功能的划分成以下的模块：
顶部的部分，header，包含banner 图片区、menu和logo；内容的部分，pagebody，包含主体内容和左右边栏；底部的部分，包含版权信息和作者的邮箱地址等。从Div 布局与页面构架来看，可得网页Div 结构如下所示：
| body{} /* HTML 主体标签*/
∟’#header{} /* 头部标签*/
∟’#container（） /* 放置整个页面的div 标签*/
∟’ #banner 、#menu 、#logo/* banner、menu、 logo标签*/
∟ ’#sidebar{} /* 左右边栏的标签*/
∟ ’#pagebody{} /* 主体标签*/
∟ ’#foot{} /* 页脚标签*/
∟ ’#main{} /* 主体内容标签*/
以上标签的名称命名尽量做到透明清晰，以便其他人员能够迅速理解模块的含义以及标签定义。当需要时，子标签还可以父标签的名称作前缀，例如在main 层详细区分时，可以命名main_right 、main_left等。
4.2.2 拆分模块
依照Web的标准，将页面的内容和表现分离，主要定义Div 的CSS 样式。为了使今后的阅读更简洁，可考虑添加相关注释，新建一个style.css样式文件，代码如下所示：
body{font：12px Tahoma； text-align：center； margin：0px；background：#fff；} /* 基本信息*/
#header{ height：219px；margin：0 auto； width：800px；background：#1F86C0；}/* 頁面头部*/
#container{width：100%}
#banner{ margin：0 auto； height：180px；bwidth：800px； ackground：#1F86C0；}/* 页面banner*/
#menu{ height：39px；margin：0 auto； width：800px； background：#737172；}/* 导航*/
#sidebar{ float：left； height：400px； width：38%； backgound：#9C4121；}/* 左边栏*/
#foot{margin：0 auto； width：800px；height：50px；background：#7FA7C1；}/* 页面的底部*/
#main{ float：right；width：62%； height：400px；background：#00ffff；}/* 主要内容*/
#pagebody{ margin：0 auto； width：800px；background：#ccff00；}/* 页面的主体*/
定义的CSS 样式中， 元素边界的属性值是0，并取消了默认的边界。定container 元素宽度是100%，通过高度、宽度和边界属性确定header 的位置，定义了header 元素中的横向分栏，二者分别为menu元素和banner元素，同样以高度、宽度和边界属性定义了主体pagebody 的位置，而且运用浮动定位的属性，分别定义main 元素的位置和纵向分栏sidebar ，同样利用高度、宽度以及边界属性的定义确定了footer 元素的显示位置和大小。
5 结论
随着旧的页面布局的局限性逐渐暴露， 新Web标准的优越性逐渐为人们所重视。运用DIV CSS 的网页设计的流程与方法， 真正做到了行为、表现和结构的分离， 提高页面加载的速度与网页开发的效率，对网站更新和维护的效率也有很大的提升。传统的表格布局模式正在被基于DIV CSS 的网页设计方式逐渐取代， DIV CSS 的网页布局方式正成为WEB开发的方向。
【参考文献】
[1]曾顺.精通CSS DIV网页样式与布局[M].北京：人民邮电出版社，2007.
[2]王俭敏等.CSS DIV网页样式与布局案例指导[M].北京：电子工业出版社，2009，4.
其他文献
Letter from an Unknown Woman is one of the most well-known works of Austrian novelist Stefan Zweig.Since its first publication in 1922,there have been two film
目的通过对老年患者有计划有组织有系统的教育,促使患者自愿改变不良的健康行为,和影响健康的相关因素,预防疾病促进健康,提高生活质量。方法将我科收治的100例内科慢性病患
ue＊M＃’＃dkB4＃＃8＃”专利申请号:00109“7公开号:1278062申请日:00.06.23公开日:00.12.27申请人地址:（100084川C京市海淀区清华园申请人:清华大学发明人:隋森芳文摘:本发明属于生物技
In the later Neoplatonism,natural science is fundamentally a theology,its origin and rationality of the basis,direction and final destination are gods.This conc
贾平西，男，山东蓬莱人。1964年毕业于鲁迅美术学院中国画系花鸟画专业，中国一级画家，中国美术家协会会员，中国工笔画学会会员，黑龙江省花鸟画研究会主席，黑龙江省美术家协会终身画家，黑龙江省美术家协会名誉主席。被鲁迅美院誉为历届毕业生中最有成就的四人之一，英、美世界名人。作品多次参加国内外美术大展、并多次获金、银、铜等各种奖项，并被国内外多家美术馆、堂、院、所等收藏。先后在黑龙江省美术馆、中国美术馆
目的探讨高热惊厥患儿的临床护理过程及效果。方法回顾性分析2009年1月至2011年1月佛山市顺德区勒流医院收治的42例高热惊厥患儿的临床资料,研究其护理方法,总结其护理体会。
目的探寻纤维喉镜手术患者护理方法并观察其护理疗效。方法抽取我科于2008年2月至2010年2月收治的150例纤维喉镜手术患者,随机分为2组,对照组给予纤维喉镜手术及术后的药物治
目的观察初治鼻咽癌放射治疗的临床疗效。方法收集某附属医院放疗科收治的初治鼻咽癌患者68例。所有患者均接受根治性放疗,31例接受常规放射治疗,37例接受调强适形放疗（IMRT）。
This essay argues that black and white cinema spawned a resistance to changing times that is still very present in the new generation of directors who follow cl