生活在西安的Seoer,很年轻!
标签类目:css

DIV+CSS初学者必须要理解的实质

  DIV+CSS是什么意思?实质是什么?DIV+CSS的优势何在?新手学习div+css,该如何入门?使用什么软件来布局页面和编辑css呢?能不能提供几个实例具体讲解一下怎么来实现?等等诸如此类的问题,是新手们最常问的。回答这些问题,也是仁者见仁,智者见智了。不过从严格的角度来讲,div+css的叫法是不对,只不过像我们这些菜鸟级的都这样叫,习惯了而已。

  1、那么DIV+CSS是什么意思呢?实质是什么?

  要弄懂这个意思,首先你要对网页有一定了解,对和div相对的table布局有很好的认识,这样理解起来就不难了。

  DIV+CSS是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。用div盒模型结构给各部分内容划分到不同的区块,然后用css来定义盒模型的位置、大小、边框、内外边距、排列方式等。

  CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。在我们用table布局时,都曾接触和应用到css。

  DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

  简单地说,div 用于搭建网站结构(框架)、css 用于创建网站表现(样式/美化),实质即使用XHTML对网站进行标准化重构,使用CSS将表现与内容分离,便于网站维护,简化html页面代码,可以获得一个较优秀的网站结构便于日后维护、协同工作和搜索引擎蜘蛛抓取。

  当然不是所有的网页都需要用div布局,例如数据页面、报表之类的页面的时候还是会用table,web 标准里并没有说要摒弃table。所谓DIV+CSS布局的叫法让人更为担心,不要让DIV成为Table的替代品,多层嵌套的DIV会严重影响代码的可阅读性,活用HTML为我们提供的标签吧。

  2、DIV+CSS的优势何在?

  1:表现和内容相分离

  将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。符合W3C标准,微软等公司均为W3C支持者。这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰。
 
  2:提高搜索引擎对网页的索引效率

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

  3:代码简洁,提高页面浏览速度

  对于同一个页面视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,代码更加简洁,前者一般只有后者的1/2大小。对于一个大型网站来说,可以节省大量带宽。并且支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。

  4:易于维护和改版

  样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式,更加印证了DIV+CSS是大势所趋。

  3、新手学习div+css,该如何入门?

  学习任何东西都是一样,从小学、中学、大学,除了学习知识外就是去学习方法!要想学好网页标准化布局,要先摈弃传统的table布局时形成的固定思维方式,用div布局,从内容出发。而且必须要对html标签有很好的认识,起码见了要知道它怎么用,干什么的。因为一个样式它是不可能脱离HTML页面的,HTML不与样式结合的话, CSS就失去了存在的意义。接下来就是css了,必须能写出常用css的样式。

  学习方式可以从网上找现在的教程或资料学,另外推荐几本书:《CSS权威指南》《网站重构》《网站布局实录》《HTML参考大全》。阅读一本书,一般来说第一次要先把整个书通读一遍,不理解的也要往下看,在往下看的过程中你也许会找到那个问题的答案。看完后你有一个大概的印象,但一定有很多不明白的地方,没关系,继续往下看。第二遍你就要边看边做学习笔记了,把你认为是重点的部分写上,还有,你觉得有疑问的部分也要记下,带着疑问看下去,如果没有答案,你可以去BBS上发一个贴子,好心人还是很多的,提示一句:“一定要学会如何去问问题!” 。你还要上机去练习书上的例子,最让你困惑的:“一是记不住,二是对概念的理解有误(这一条可能是书译的不好,另外就是你的理解不对)”,对于第一条你就要树立信心,坚持再坚持下去。当你到达终点时你回发现一切都是顺理成章的事。因为你努力了,努力了就会有回报,有结果。

  4、使用什么软件来布局页面和编辑css呢?

  关于这个问题,只要已经能达到会手写的程度,用什么软件都可以,比如记事本。对于新手来说推荐使用DreamWeaver、微软出的FrontPage的替代品Microsoft Expression Web或TopStyle。

Div+css学习心得

接触Div+css时间也不短了,本来想总结一下,下午看见一位从TABLE转型到Div+css的作者写的一篇文章,很详细,基本是每个初学者都必须要走过的,很精辟,就转了过来!

  很多从table布局转型到DIV+CSS布局的同行们都很不习惯,大部分人还是坚信:我为什么要转型,table布局不是照样能写页面?

  我并不想反驳,因为table布局也有自己的好处,起码可以节省开发时间(如果你table布局比较熟练的话)。但如果你选择了DIV+CSS那么你就不要用table的思想来布局。

  我碰到过许多用table布局思想的人来写DIV+CSS,总结以下几点

1.没有语意

  a.图片语意。

  使用DIV+CSS的时候你要明白,什么是装饰图,什么是内容图,例如BANNER、产品图片,这些是想要给用户看的,属于内容图,那么你就要用<img>标签来引用它,并且加上alt属性,这样你的图片就可以被搜索引擎收录了。例如一些修饰性的圆角,背景,那么你就要用容器的CSS背景background来做。

  许多table布局思想的人做的页面都会多出如:圆角图片、一个透明的1px gif图片等等,这些尽量不要出现,会增加页面的HTTP请求,增加服务器负担。

  所以这里我要强调,当你使用背景的时候,尽量把图片切入一张图中,使用background-position来定位显示的位置,这个很重要,几乎所有门户网站都这样做了,例如新浪的背景图片:新浪首页背景图新浪背景图,这里提供一个关键词:css sprites。

  b.标签语意。

  许多人刚写DIV+CSS的时候都会犯个错误,那就是滥用DIV,你会发现他的页面只有DIV,或许就UL、li、A。

  标签语意在搜索引擎中让你的网站的排名靠前起到很重要的作用,如标题使用h1\h2\h3\h4\h5\h6,无序列表使用ul\li,有序列表ol\li,当然你也可以使用dl,dt(标题),dd(内容)来写,等等,xhtml提供了很多的标签,每种标签都有语意。

  这里有篇关于标签语意的表格,供大家参考:HTML语意规范

2.嵌套错误

  这里要批评下百度知道http://zhidao.baidu.com/browse/74 头部列表是个table,当然这样做并没有什么问题,但是它在td中嵌套了一个li,这是个嵌套错误,li只能存在于ul/ol下,显然百度并不会故意去犯这样的错误,因为在IE6/7下浮动的li的项目符号会无法显示,这个BUG一直令我费解,这也可能是百度的无奈之举吧。

  而往往初学者更多的是a里面有div ,span里有ul这样。

  这里有篇关于嵌套规则的相关文章:HTML嵌套规则

3.浏览器兼容

  当别人发我一个网站的时候,我都会用火狐去打开它,一是可以看它的兼容性,二是可以用firebug看其代码是否语意,如果有漂亮的图片也可以直接拿下来用。

浏览器兼容性应该是DIV+CSS最重要的,有人说,火狐用户量这么少,直接可以无视了,IE的用户群多么庞大云云,这些话都是扯淡!

  火狐是标准浏览器,IE6、IE7是不标准的,独立的,且用户群庞大的存在。而标准浏览器有哪些呢:chrome(谷歌浏览器)、safari(MAC)、opera、甚至IE8!当你的页面在火狐下调试通过后,其他浏览器基本不会出现什么大的问题,而IE6、IE7下可能是乱七八糟的。

  这里我推荐新人用IE6当主测,因为IE6存在着许许多多莫名其妙的BUG,边写边测,就可以尽量避免这些BUG,例如双倍MARGIN,而火狐下出现的不兼容往往都是没有清除浮动造成的。

原文出处:http://blog.sina.com.cn/s/blog_5d35f3070100czoc.html

DIV+CSS初学者应该注意的几个问题

  作为DIV+CSS初学者,如果在动手写代码之前对网页整体结构由一个清晰认识的话,写起来会事半功倍!但是,写的过程中总是有这样那样的问题,使得我们不得不停下来去查找资料,弄清属性定义等等!

其实有很多方法可以在提高我效率的同时让我们对DIC+CSS有更深刻的理解!下面我们列举几点:

一、CSS命名规范:
1、文件命名规范

  全局样式:global.css;
  框架布局:layout.css;
  字体样式:font.css;
  链接样式:link.css;
  打印样式:print.css;

2、常用类/ID命名规范

  页 眉:header
  内 容:content
  容 器:container
  页 脚:footer
  版 权:copyright 
  导 航:menu
  主导航:mainMenu
  子导航:subMenu
  标 志:logo
  标 语:banner
  标 题:title
  侧边栏:sidebar
  图 标:Icon
  注 释:note
  搜 索:search
  按 钮:btn
  登 录:login
  链 接:link
  信息框:manage
  ……

二、处理浏览器BUG问题,关于这点,不知那位高人把CSS BUG变成顺口溜了!在这里引用一下,很容易记住的!

  一、IE边框若显若无,须注意,定是高度设置已忘记;

  二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;

  三、三像素文本慢移不必慌,高度设置帮你忙;

  四、兼容各个浏览须注意,默认设置行高可能是杀手;

  五、独立清除浮动须铭记,行高设无,高设零,设计效果兼浏览;

  六、学布局须思路,路随布局原理自然直,轻松驾驭html,流水布局少hack,代码清爽,兼容好,友好引擎喜欢迎。

  七、所有标签皆有源,只是默认各不同,span是无极,无极生两仪—内联和块级,img较特殊,但也遵法理,其他只是改造各不同,一个*号全归原,层叠样式理须多练习,万物皆规律。

  八、图片链接排版须小心,图片链接文字链接若对齐,padding和vertical-align:middle要设定,虽差微细倒无妨。

  九、IE浮动双边距,请用display:inline拘。

  十、列表横向排版,列表代码须紧靠,空隙自消须铭记。
  DIC+CSS学习是一条很长的路,真正走下去必须要有一颗虔诚的新心!

第一个DIV+CSS作品完成

第一个Div+Css第一个作品,写的比较粗糙,很多细节处理不是很到位,代码可读性有待进一步加强!很多东西只有自己去做,才能更深刻的理解!

总结一下:

1、 还是那句话,思想决定层次,一个好的网页整体架构思想比看一步写一步效率高的多。

2、不断学习新东西,DIV+CSS学习其实是一种思想,只有不断改变思想、接受新东西,才能不断提高自己!

再次感谢阿泽ThinkerPan一直以来的支持和指导!

返回顶部