本站原创本文是一篇网页论文范文,网页类有关硕士学位论文,关于DIV+CSS网页设计相关本科论文范文。适合网页及布局及内容方面的的大学硕士和本科毕业论文以及网页相关开题报告范文和职称论文写作参考文献资料下载。
摘 要：该文分析了传统网页布局的局限性,介绍了Web标准中典型的应用模式“DIV+CSS”布局方式.通过对DIV和CSS技术的研究,分析了DIV+CSS布局的原理、介绍了DIV+CSS布局方法并揭示了该布局方式的优点,从而提出了网页设计课程的教改思想.
关 键 词：DIV；CSS；网页布局
中图分类号：TP3文献标识码：A文章编号：1009-3044（2013）03-0607-05
早期的互联网上的网站由于缺乏对页面进行排版布局的手段,页面比较简陋,网页上只能使用最基本的一些HTML标签来表现内容.1997年,DidSiegel出版了“CreateKillerWebSites”一书,讲述了使用表格来进行网页布局的思路和方法,从而使得网站页面的布局得到极大改善.
利用表格可以将网页中的内容合理地放置在相应的区域,每个区域之间互不干扰.其最大的优点是简单直观,因此一段时间内表格布局曾经成为最流行的页面布局方法.直到现在还有很多网站采用表格对页面进行布局[1].传统表格布局方式只是利用了HTML的table元素所具有的零边框特性,即不显示边框.将网页中的各个元素按照版式划分后,分别放入表格的各个单元格中.随着网站信息量的增大,如果将整个网页的元素都包含在表格内,则浏览器会将整个表格全部下载完毕后才显示表格中的内容,因此网页的显示速度比较慢.此外,在HTML中嵌入如width等于“960"border等于“0”这样的样式代码,使得样式和真正的内容混合在一起,可读性大大降低,维护起来成本也较高.
用DIV+CSS布局方式可以有效解决表格布局的不足,符合W3C的Web标准.
1DIV+CSS布局的原理
Web标准推荐网页主要由三部分组成：结构、表现和行为.“结构”决定了网页“是什么”,“表现”决定了网页看起来是“什么样子”,而“行为”决定了网页“做什么”.“结构”、“表现”和“行为”分别对应于3种常用的技术,即（X）HTML、CSS和JaScript.也就是说,（X）HTML用来决定网页的结构和内容,CSS用来设定网页的表现形式,JaScript用来控制网页的行为.[1]
DIV+CSS布局网页符合Web标准的思想.用DIV来创建网页架构,用CSS来实现表现,实现了结构与表现形式的分离.有效地解决了表格布局的不足.
DIV+CSS布局方法中,DIV像表格的单元格一样作为容器,存放网页内容.CSS可以用来定位DIV及定义其展现形式.如表1.
我们以手机为例来说明DIV与CSS的关系,DIV就像手机的组成部分,（天线、按键、话筒等）,CSS就像手机的面板.我们可以为同一个手机变换不同的面板,同理对于相同内容的网页也可以有不同的表现形式.CSS就用来定义网页的表现形式[2].例如由加拿大设计师DESHEA提出的CSSZenGarden（http：//.csszengarden.）.如表2所示,网页内容相同,但表现形式不同.
2布局方法
DIV是一个容器,存放网页中内容.CSS用来设定DIV的表现形式,如位置、浮动、对齐属性等[3].
2.1CSS盒子模型
在CSS中,一个独立的盒子模型由内容（content）、填充（padding）、边框（border）和外边距（margin）4个部分组成,如图1所示.
一个盒子实际所占用的宽度（或高度）是由“内容+填充+边框+外边距”组成的.在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小,并且对于任何一个盒子,都可以分别设定4条边各自的border、padding和margin.图1中的箭头表示设置这些属性时,是按照如图所示的顺时针方向确定对应关系的.利用好这些属性就能够实现各种各样的排版效果.如表3：
2.2盒子的浮动与定位
对于一个网页中的任意元素,根据它的前后顺序,组成了一个个顺序结构,形成文档流的概念.浏览器根据这些元素的顺序去显示它们在网页之中的位置.文档流是浏览器的默认显示规则.
浮动定位的目的,是为了打破默认的按照文档流的显示规则,按照布局要求进行显示.可以用CSS中的float属性实现浮动,如将float属性设置为“left”或“right”,这样元素就会向其父元素的左侧或右侧靠紧.如表4.
2.3DIV+CSS布局
用DIV+CSS进行网页设计时,主要完成两项工作：使用div将内容标记出来以及为内容编写相对应的CSS样式.
1）定义网页结构
采用DIV+CSS布局之前,首先要分析网页由哪些内容块组成,以及每个内容块的含义,这就是所谓的网页结构.通常情况下页面结构包含以下几块：[4]
标题区（header）,用来显示网站的标记和网站名称等.
导航区（nigation）,用来表示网页的结构关系,如站点,通常放置的主菜单.
主功能区（content）,用来显示网站的主题内容,如商品展示、公司介绍.
页脚（footer）,用来显示网站的版权和有关法律声明等.
采用DIV元素来将这些结构定义出来,如下：