利用Div+CSS来设计网站的几项方法分析

• 2012年11月05日16:33

其实网页设计行业从业者,越来越倾向关注DIV+ CSS的标准化设计,大到各大门户网站,向无数的小个人网站,在分区下的标准化,网络设计师们把这一要求作为行业标准的CSS+的影响。那么,什么是分区+ CSS标准?CSS到底有什么好处标准化设计?

  Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。

      CSS是CascADIng style Sheets的简称,中文译名“层叠样式表“CSS在国内生产技术的使用,可以有效地对页面布局,字体,颜色,背景和其它效果实现更加精确的控制。只要长的代码做一些简单的修改,你可以改变同一页面的不同部分或网页不同的网页的外观和格式。无论你上网冲浪使用Internet Explorer或Netscape Navigator中,几乎总是使用CSS处理,没有使用CSS的网页可能很容易找到。不管你用什么工具软件制作网页,有故意或无意地使用CSS。 CSS的良好使用可以使您的网站更简洁,内容相同的网页,有的人做出来有几十KB的,而主做只有十几KB的。深圳网站建设

      Div+CSS的几项标准化优点:

  1.      结构清晰,容易被搜索引擎搜索到,网站建设天生优化了seo

      2.强大的控制和布局的能力。CSS的控制较不好的多字体更好的字体标记,有能力的CSS,我们不再需要使用GIF图像的字体标记或1像素的透明控制标题,改变字体颜色,字体样式等等。如果使用不添加任何的DIV CSS的孤独,那么它的结果在网页中,并使用相同的。大自然本身就是容器div,你不仅可以嵌入表,也可以在HTML代码,文本和其他嵌入式 

      3.CSS很容易编写。你可以很容易的写HTML代码编写的CSS。更便捷的搜索引擎。结构化,而不是唯一的内容,包含嵌套的HTML标签,搜索引擎将更加有效地搜索内容,并可能给你一个较高的评价(ranking)。 深圳网站设计

      4.提高易用性。 CSS可以使用HTML的结构,例如: 只用来控制段落标记,用来控制标题只有标题标签,table标签只用来显示格式化数据等。您可以添加而不需要一个独立的释放更多的用户。

      5.可以是一个设计,网站建设出版无处不在。设计不仅可以为您的Web浏览器也将发布在其他设备上,如PowerPoint。 

      6.更好地控制页面布局。不用说。 

      7.性能和相分离的内容。旋了一个单独的文件中关闭部分的设计风格,你可以减少未来网页的可能性是无效的。 

      8.Table在布局弹性小,你只能按照格式表训练班运输署。你还可以分区分区UL认证李巩李李也UL认证… …但标准语法写的最好的和有序。 深圳网站开发

      9.另外,如果你不javascrput的高手,你不用写ID,只有class可以。当客户端程序员来完成程序需要调整,你可以控制他的身份证使用。

      10.Table在布局,代码将是垃圾很多,风格和布局一些修改的代码混合在一起,这是非常有利于直观。该科的风格和结构,以更好地反映强烈的结构重建分离,减少修改时间。只要几个简单的CSS文件修改,重新设计一个网站的数百页长。

澳门新葡新京网上导航 ,      11.网站建设在几乎所有的浏览器可以用来使页面更美观的字体,方便的布局,为网页的眼睛,由先前的一些图像转换盛宴要真正实现的功能,现在只要你能很容易地使用CSS的,从而导致更快的下载页面,您可以轻松地控制页面布局,很多网页,您也可以更新的样式格式,无需更新页面的网页。风格上,您可以使用CSS控制网站的所有网页文件,只需修改相应的行的CSS文件,那么所有的整个网站的网页会跟着改变。

http://www.10000idc.net http://www.10000idc.com 利用Div+CSS来设计网站的几项方法分析

Div+CSS布局的优点

业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。IT教育平台介绍,那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?

作为一个身处 2008 年末的 Web 设计师,你是否好意思承认自己的代码中使用了
Table,如果是,你是一个有勇气的人,Web
设计是个奇怪的行业,你可以将自己的网站设计得像晚报的分类广告,或者楼道里的开锁广告,但千万别让人知道你使用了
Table,在你的源代码中发现 Table
就像一个销售被人掀起裤脚发现穿了白袜子一样。 
Table 是如此丑陋,臃肿,哪怕只显示一段简单的内容,你也需要
<table><tr><td>
这三个基本的标签,每个标签里面还要加上一堆乱七八糟的属性,不像<div>,既简单,又整洁,又时尚,它和
CSS 珠联璧合,琴瑟和谐,它们构成最完美的 Box
模型,他们象现实中的箱子,你把东西放进去,然后,很自由地对他们进行排列,厌烦了一种布局,没关系,简单地改动一下
CSS 定义,一种全新的布局便诞生了;不象 Table,Table
像食堂里的餐具柜,一排排,一列列,土里土气,油腻腻的,象我们的父辈,邋遢,什么都往家里拿,胡乱堆在角落里,如果
Div 是小资,Table 就是老三届,他们不属于这个时代。

Div全称division意为ldquo;区分rdquo;使用DIV的方法跟使用其他tag的方法一样。

  也就是近几年的事,至多不过三五年,W3C是一个人人都认为重要但人人都不喜欢的组织,他们的官方网站十分丑陋,我敢说平生没见过这么丑陋的网站,但他们的网站是为数不多的可以通过全部W3C标准验证的网站,这意味着,他们的网站在语法上,在结构上,在可访问性上是完美的,虽然依旧十分丑陋。不过这是笑谈,W3C非常重要,否则微软会把全体
Web 开发工程师带到万劫不复的境地,还好,Netscape 死后,涅磐出
Firefox,而 Opera 在 Firefox
横空出世之后虽然没得到任何好处,至少得到了精神上的支持,看到没,终于有大哥出来收拾你。乔布斯复出后,苹果重返昔日的光芒,这时人们才知道世界上还有一个叫做
Safari 的浏览器,所有这一切加在一起,让 W3C 真正有了存在的必要。

DIVwelcome tu alixixi.com /DIV

  W3C 说,Table 可以用来容纳文字,格式文字,图片,链接,表单,以及其它
Table … 但是,Table 不应该单纯用来做网页布局(Tables should not be
used purely as a means to layout document content),理由是,当 Web
被非可视化设备渲染的时候,Table
会出现问题,他们指定是屏幕阅读器以及盲文浏览器,另外,Table
在大型显示设备上会强迫用户左右滚动,因此,Web 设计者应该使用 CSS 而不是
Table。参见 W3C HTML 4.01 关于 Table 的定义。 W3C
说这段话的时候,是1999年12月24日,那时尽管 CSS
早已诞生,但并没有多少人使用,最初的 Web
像一个在线版的文档,并没有成为现在这样的平台,不需要过多过多地考虑布局问题,随着互联网第一次泡沫的形成,涌现出大量的门户网站,门户网站是
Table
布局的始作俑者,因为他们的首页比一整份报纸的所有版面拼接在一起还复杂,Table
在这方面十分顺手,结合 colspan 和
rolspan,你几乎能够实现任何复杂的版面。

如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用P/P是一样的。

  这种布局风格在2000年代初,一直到中期仍然十分流行,尤其国内,在大为美的潜意识下,人们把所有能塞到一个页面的东西都塞进了首页,Table
就像一个旧时代的管家,把所有东西虽不能井井有序,但至少是一样不少地编排起来。然而这样的
Web 终于到了让人厌恶的地步,随着搜索,RSS 订阅,以及以博客为代表的个性化
Web
的出现,人们有更多渠道获得信息,而不必去访问那几个让人几乎要晕过去的门户的首页,于是出现了一种清新的,轻量的
Web 风,使用更简单的布局,更明快的配色,大图标,大
Banner,以及更容易阅读的大字体,同时,在这个时候,CSS 已经非常成熟,而
Firefox, Opera, Safari 为代表的浏览器,在遵守 W3C 标准方面要远远好过
IE,人们终于认识到 CSS 的威力。因为 CSS 在布局上,其核心是一个 Box
模型,人们必须为 CSS 找一个可以依附的容器对象。

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码

  Div 成为幸运者一方面因为它天生就是 Box 的最佳原型,在语义上,Div
代表页面的一个区域,在外形上,它四四方方,更重要的是,它不像 <P>
或 <a> 那样事先已经被赋予特殊的语义(虽然它们也能用于 Box
模型);另一方面,则出于人们对 Table
统治一个臃肿时代的憎恶,一个时代的结束,继任者都会努力抹去旧时代的痕迹,那些旧时代的象征或代表的命运多半如此,人们并不是简单地忘却它们,而是断然划清界限。

CSS是CascadingstyleSheets的简称,中文译作ldquo;层叠样式表单rdquo;,在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。网上冲浪无论你用InternetExplorer还是NetscapeNavigator,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。不管你用什么工具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB。

  Table 的一切不公平待遇就此开始。为什么说不公平,W3C 不建议 Table
布局的时候,只说应使用 CSS 代替,这是什么意思,Table 不支持 CSS
吗?当然支持,而且,由于 Table 作为老牌的 HTML
对象,它的地位曾如此重要,任何浏览器都对 Table 提供了最完美的支持,包括
CSS 支持。当人们拥抱 Div 的时候,似乎忘记了 Table 也是
Box,而且是一个拥有多个内格的 Box,Table 作为一个整体,和 Div 在 Box
模型方面没有任何区别,而它的内格,除了 Margin 之外,仍然是一个
Box,内格不含 Margin 概念这是应该理解的。Div
很优秀这不必说,然而当人们说 Div + CSS 的时候,似乎暗示着 Table 无法
CSS,这是天大的误会。

Div+CSS标准的优点:

  Div 支持的所有 CSS 属性,Table 全部支持,事实上,在 Div
大红大紫之前,那些 Div 的早期采用者曾信心不足地表示,Table 能做到,Div
都能,而他们也为自己的话付出了代价,企图在 Div
中实现垂直居中的人明白我的意思,企图在 IE6 中不经 CSS Hack 而实现 100%
Div 布局的人更明白我的意思。100% Height 问题,几个 Div
之间的宽度自适应问题,相信任何从事 Div + CSS 设计的人会遇到。Table
在这方面的优势并不是因为它本身多么优秀,而是因为它老牌,没有浏览器敢忽视,也因为它的特性原本如此,人们发明表格,是因为希望数据显示得整齐,就这么简单。然而,为什么
Table 后来背上那么多的恶名?Div 拥护者对 Table 的责难不外乎以下几条。

1.大大缩减页面代码,提高页面浏览速度,缩减带宽成本;

代码臃肿:你至少需要写下
<table><tr><td>这三个标签之后,才能开始真正的内容,另外,Table
的各种标签中还包含了复杂的属性定义,而 Div 只需 <div>一个标签。 
页面渲染性能问题:浏览器需要将整个表格完全读完后才会开始渲染。 
不利于搜索引擎优化:搜索引擎喜欢内容与修饰分开。 
可访问性差:屏幕朗读软件和盲文浏览器无法很好地理解 Table 中的内容。 
不够语义(Semantic):我们需要语义的 Web。

2.结构清晰,容易被搜索引擎搜索到,天生优化了seo

  第1条:代码臃肿

3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

  首先,Table 里面唯一无法用 CSS 定义的属性只有 Cellspacing,
Cellpadding 几个,其它属性都可以并且应当使用 CSS,这样,剩下的,就是
<table><tr><td> 和 <div>
的对决,我相信一个动辄几十K大小的网页,即使使用了几十个
Table,因此多出来的代码也可以忽略不计,那些埋怨 Table
代码臃肿的人其实该检查自己的编码习惯,能将 Table 写得十分臃肿的人,写
Div 相比也未必会简洁到哪里。

4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了,有了CSS,我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题,改变字体颜色,字体样式等等。

  第2条:页面渲染性能问题

5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。

  我使用一台2004年的笔记本电脑,1.6G 的 CPU 与 1G
内存,这种配置下,看不出 Table 布局和 Div
布局在页面渲染上有任何速度差别,其实这点差别即使有,相对网络本身的延迟也可以忽略。

6.提高易用性。使用CSS可以结构化HTML,例如:p标签只用来控制段落,heading标签只用来控制标题,table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。

  第3条:不利于搜索引擎优化

7.可以一次设计,随处发布。你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。

  如果你尽可能使用 CSS 而不是 Table 的属性,前面说了,产生的代码和 Div
的差别也不会很大,搜索引擎会歧视 <table>
标签吗,这种说法的依据我至今并没有找到。

8.更好的控制页面布局。不用多说。

  第4条:可访问性差

9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。

  这是 Table 固有的缺陷,不过多数 Div + CSS
的拥趸似乎并不是基于这个原因才排斥 Table。

10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的内容,并可能给你一个较高的评价(ranking)。

  第5条:不够语义

11.Table布局灵活性不大,你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ullihellip;hellip;但标准语法最好有序的写。

  语义 Web 的含义要深远得多,并不是仅仅在 Table 和 Div 上纠缠,即使
W3C,也并没有规定 Table 只能用来显示表格数据,很多在 Table
的语义上进行纠缠的人,其实不妨再等等 HTML 5,那才是真正的语义。

12.另外如果你不是javascrput的高手,你可以不必去写ID,只用class就可以。当客户端程序员写完程序,需要调整时候,你可以在利用他的ID进行控制。

  本文的目的不是让你丢弃 Div 投身 Table,相反,如果 Div
能满足你的设计需要,Div 仍是首选,但没必要避讳
Table,否则会走入另外一个极端。很多使用 Div
无法简单实现的设计,仍可以使用 Table,当然,不管使用什么,都应该用 CSS
将内容与修饰分离。Div + CSS 和 Table + CSS
都是合法的设计,谁更简单就用谁。根据我的经验,当你能预见你的内容的格式,对你即将加入的内容有能力完全控制其显示格式时,应当使用
Div +
CSS;当你即将加入的内容是不固定的,你无法预见其格式,如果不想让页面坍塌,使用
Table + CSS 是一种保险的做法。

13.Table中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div更能体现样式和结构相分离,结构的重构性强。

Table:
优点:1、可观性好,当用户插入一个Table的时候就可以立即看到效果。
2、简单方便,适合初入门的用户操作,用表格不需要过多了解代码,只需插入表格,然后设置长宽,对齐方式,表格属性等等。
3、可读性好,稍懂些html语言的都可以看的懂,无非就是”table /table、td
/td、tr /tr”等等。
缺点:1、代码冗余,”table tr td /td /tr
/table”这是构成一个表格的最基本元素(此为一行一列的表格)。
2、无法再利用,比方上面已用到一个表格了
下面还要再用个和上面相同的表格,此时不好调用,造成代码太多,导致网站打开速

14.在几乎所有的浏览器上都可以使用。

度慢。

15.以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。

Div+css:
优点:1、代码精简,div /div”和Table相比较代码简单了许多。
2、可再利用,比如一个网页中需要用到2-3个Div,用户只需在css里定义一个样式,比如定义个样式名为:abc,插入div的时候只

16.使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。

需div id=”abc /div”此形式即可,可多次利用。
3、网站打开速度快,因为代码精简了,服务器读取代码的时候省了不少时间,所以网站打开速度要比table快的很多。
缺点:1、可观性差,用户在编辑的时候并不能立即看到编辑效果,需要预览才可看到效果。
2、可读性差,网站代码几乎全是div
/div”而且在代码页面看不到此样式。必须要进css样式才可看到定义样式。
3、操作繁琐,相对于初入门的用户,对代码不是很了解的人来说,操作起来很是麻烦。

17.你可以轻松地控制页面的布局。

第一,对于CSS的高度依赖使得网页设计变得比较复杂。相对于HTML4.0中的表格布局(table),CSS+DIV尽管不是高不可及,但至少要比表格定位复杂的多,即使对于网站设计高手也很容易出现问题,更不要说初学者了,这在一定程度上影响了XHTML网站设计语言的普及应用。

18.你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。

第二,CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在几个l外部文件中,这一个或几个文件有可能相当复杂,甚至比较庞大,如果CSS文件调用出现异常,那么整个网站将变得惨不忍睹。

第三,对于CSS网站设计的浏览器兼容性问题比较突出。基于HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问题,但CSS+DIV设计的网站在IE浏览器里面正常显示的页面,到火狐浏览器(FireFox
)中却可能面目全非(这也是为什么建议网络营销人员使用火狐浏览器的原因所在
)。CSS+DIV还有待于各个浏览器厂商的进一步支持。

第四,CSS+DIV对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+DIV本身。CSS+DIV网页设计并不能保证网页对搜索引擎的优化,甚至不能保证一定比HTML网站有更简洁的代码设计,何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量,这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前,而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言,网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

网站地图xml地图