您好, 访客   登录/注册

网页设计中的DIV+CSS技术应用研究

来源:用户上传      作者: 李念

  摘 要:以目前非常流行的网页设计技术CSS+DIV为研究对象,阐述了该技术产生的背景,分析了该技术在实际应用中的优缺点,并在此基础上提出了能使该技术在应用上实现最优化的一系列方法。
  关键词:DIV;CSS;网页布局;XMHTL
  中图分类号:TP393 文献标识码:A 文章编号:16727800(2013)003013702
  0 引言
  “内容”与“形式”分离式的网页设计已成为时下静态网页设计的主流方向,整个网络刮起了一股“网站重构”的浪潮。以“DIV控制网站的模块布局,CSS控制页面内容表现形式”的DIV+CSS技术为许多网页设计者带来了福音,但是在实际应用时也存在一些问题。本文分析了CSS+DIV的产生背景,并对该技术的优缺点进行了探讨,然后在此基础上提出了一系列可行方法使该技术在网页设计中能做到扬长避短,将其功能发挥到最大化。
  1 DIV+CSS产生的背景
  1.1 从HTML到XHML
  HTML(Hypertext Markup Language)――超文本标记语言,它通过标记符号来标记要显示的网页中的各个部分,是传统基于TABLE布局的一种基本网页设计语言。
  XHTML是The Extensible HyperText Markup Language(可扩展超文本标识语言)的缩写。XHTML是一个基于XML的标记语言, XHTML是一种增强了的HTML,是基于“DIV+CSS”技术的一种网页设计语言。建立XHTML的目的就是实现HTML向XML的过渡。
  1.2 从TABLE到DIV+CSS
  最早期的TABLE布局网页是由表格的嵌套和合并拆分所实现,而所有的样式都直接在HTML代码中体现,样式与内容完全混合在一起。
  后来,许多网页设计者会将整个网页设计分成两步:先直接在图像编辑软件生成一张网页的平面图,通过切片导出生成TABLE布局的网页;然后,利用网页编辑软件生成一些动态链接的效果。但是这种两步走并不是真正意义上的“内容”与“样式”的分离,这样的网页代码中还是存在很多样式信息,也存在大量重复和冗余,同样不利于后期修改维护。
  如今的网页设计都是在设计之初就将“内容”与“样式”分开了,先在HTML中利用DIV块把网页的“内容”和“结构”写好,然后再用CSS来建立“样式”,这种分离式设计既简化了网页代码的复杂度又使得网页样式易修改、可重复利用。
  2 DIV+CSS的优势
  2.1 结构标准化,布局更灵活
  在利用DIV+CSS技术进行页面布局时,网页中的一个模块可以用一个DIV块来定义,块的大小、边框边距及间距等属性可以任意设置,块与块之间的关联也可以灵活设置,每个对象可以单独放置到相应的DIV块中,而不需要像TABLE布局那样嵌套多层表格之后再进行合并和拆分单元格来实现,也不会因为某一对象所在单元格大小的调整影响了另一个对象的显示效果。
  2.2 样式与内容分离,便于修改和统一风格
  使用DIV+CSS制作的网页由于将样式与内容进行了分离,修改网页的显示效果时只需要修改CSS代码即可。此外,若多页面共用一个CSS文件,既可减化代码又实现了网站的风格统一,维护的时候只需修改一个文件即可改变所有页面的布局或样式。
  2.3 有利于搜索引擎优化
  许多网页的样式设计代码几乎与页面内容持平甚至是超过页面内容,而采用DIV+CSS设计的网页,在被搜索时探索引擎只需要从HTM代码中搜索关键字即可,减少了探索内容,提高了搜索效率。
  3 DIV+CSS的不足
  3.1 浏览器兼容问题
  笔者在设计网页时经常碰到这样的情况:在自己电脑上看到的效果和在其它机器上看到的效果不一样,其原因是因为浏览器的问题,比如IE6、IE7、Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样。这个时候就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到预期的页面效果。但是笔者相信,随着技术的成熟,浏览器对DIV+CSS的兼容性总有一天会得到解决。
  3.2 技术复杂度高
  相比TABLE而言,DIV+CSS比较难以上手,尤其是那些对网页设计代码一无所知的设计者,他们已经习惯于那种所见即所得的设计方式,对于这种先定义后使用的CSS样式难以理解,这种情况下利用DIV+CSS技术反而会适得其反。
  4 扬长避短地使用DIV+CSS
  4.1 慎用DIV块
  在布局时并不是所有的对象都需要用一个DIV块,一个列表本身就是一个非常完整的对象,它可以直接使用样式,如下面两段代码中,左右两种的最终显示效果完全一样,但是显然右边的代码要更简单。
  此外,要尽量减少DIV块的嵌套。一个嵌套6、7层的DIV布局已经完全丧失了DIV+CSS的优越性,且这种嵌套也非常容易出现浏览器不兼容的现象。因此,设计者们不能一味地追求纯“DIV+CSS”而完全抛弃“TABLE”。在有些情况下使用简单的“TABLE”会让网页代码更简洁,外部更整齐,如:数据表的展示、表单的布局等。
  4.2 尽量使用外部CSS样式
  CSS样式表的使用主要体现在“美化”页面和“统一风格”上,但是这个“美化”必须要有一个度,不能一味地追求美化,而以牺牲代码的简洁性和结构性为代价。也就是说,不能一个DIV就做一个样式表或者每个页面都做一个独立的样式表。许多效果一样的样式可以只定义一次而多次使用,而使用外部CSS样式正好可以体现出这一点。不管是一个页面内多次使用,还是在不同的页面之间多次使用,外部CSS样式完全可以做到。   当然,也只是说尽可能地使用外部CSS样式,页面之前存在差异的地方可以适当地在页面内编写独立的样式代码。
  4.3 代码编写要尽量精简、规范
  首先,代码中如果存在共同的样式,要尽可能将这些共同样式的选择器合并成一个。
  如:a:link{ color:#000000; textdecoration:none;}
  a:visited{ color:#000000; textdecoration:none;}可以替换成一个选择集体申明选择器:a:link, a:visited{color:#000000;textdecoration:none;}。
  其次,代码中有些样式可以集体使用一个属性名称按顺序来定义,比如:paddingtop:3px; paddingright:0px; paddingbottom:3px; paddingleft:0px;可简写为:padding:3px 0px 3px 0px。
  4.4 使用子选择器
  许多初学者都不知道如何让自己的CSS选择器代码简化,子选择器就是一个非常有效的样式定义,代码如下所示:
  导航1
  >
  导航2
  导航3
  这段代码的CSS定义是:
  div#nav ul{}
  div#nav ul li.subnav{}
  div#nav ul li.subnav a.subnav{}
  如采用子选择器来设计,则可以用下面的方法替代上面的代码:
  导航1
  导航2
  导航3
  样式定义为:
  #nav{}
  #nav ul li{}
  #nav ul li a{}
  “#nav{}”作为主选择器定义并使用后,后面的子选择器会自动寻找相应的样式应用,而不需要重复定义新的样式。
  4.5 id与class灵活搭配
  许多设计者为了提高选择器的利用率,会选择用class来完全取代id。虽然class比id用途更广、更灵活,但class对于构建良好的网页结构远不如id有效。id的强制唯一性使得使用者可以很容易地通过id检索到需要的任意模块,而class则没有这个优势。当然,若所有的选择器都定义成id也会加大样式的复杂度。在实际应用时,class对文字的排版等比较有用,而id则对宏观布局和设计放置各种元素较为有用。
  参考文献:
  \[1\] 徐丽娜.网站重构CSS样式表的优化技巧\[J\].科技世界,2011(9).
  \[2\] 小黑.解读Div+CSS网页制作误区\[J\].网络与信息,2007(11).
  (责任编辑:孙 娟)
转载注明来源:https://www.xzbu.com/8/view-5954454.htm