网站建设时使用DIV+CSS标准具有的优点

网站建设时使用Div+CSS标准具有的优点:

1、因为采用CSS布局,不象表格布局充满各种各样的属性和数字,而且很多css文件通常是共用的,从而大大缩减页面代码,提高页面浏览速度。

2、结构清晰,对搜索引擎更加友好。更容易被搜索引擎收录,具备搜索引擎SEO的先天条件,配合优秀的内容和一些SEO处理,可以获得更好的网站排名。

3、兼容性更好,符合web标准规范的发展趋势,可以在几乎所有的浏览器上都可以使用,不会出现在不同的浏览器中效果差距很大的情况。

Read More

网站建设与网站改版需要进行DIV+CSS重构吗

 网站建设与网站改版需要进行DIV+CSS重构吗?我们都知道在网站建设过程中是否需要利用DIV+CSS布局、或者网站改版是否需要进行DIV+CSS重构,是乎一直是网络服务业争论不休的话题。
  
  我们指出确实在阶段如果利用Table布局的网站看不出有什么明显的问题,而且就象很多网络公司说的那样,DIV+CSS也确实不是什么新鲜玩意。然而也正是这么一个没有什么新意的玩意,很多网站建设和网页设计从业者都不愿意去接受和尝试,这除了意识形态的问题,我想跟惰性有关系:反正饭能吃饱,至于能不能吃好那当然也就没谁去在乎了......
  
  为什么很多网站建设从业者不愿意把网站改成DIV+CSS呢?当然理由有2种:1、没必要;2、太麻烦。
  
  “没必要”这个理由很有意思
  
  DIV是什么?是division,就是区域、区块的意思。在HTML代码出现的时候,DIV这个标签本来就是用来做页面布局的。大家现在做网页、建网站,却大多使用table来搭建框架、做页面布局。
  
  Table是什么?table是表格的意思,table只应该在输出数据、输入数据作为表格、表单的时候才出现。所以说,用table来做网页布局本来就是错误的。
  
  DIV重构网站不但有必要,而且从道理上来说也是必须的:你可以躺在沙发上睡觉,而且可以睡得很香,如果你愿意的话您还可以在地板上睡觉,如果习惯了甚至觉得地板上睡觉也蛮舒服的;但妈妈或老师都会教育你应该到床上睡,没什么理由,床设计出来就是用来睡觉的、而沙发设计出来就是用来休息或会客坐的。
  
  如果把床和沙发调换一下功能或者位置,不光是自己、别人也会觉得别扭......总之达到某个目标的的办法有很多种,我们无非是要找出最快捷、最有效、最让大家信服的那一种而已。
  
  “太麻烦”这个理由可以理解
  
  我们给很多企业做过网站重构,并按照Xhtml结构化代码,使其更加符合W3C标准。因为W3C标准正在不断改变、各浏览器对WEB标准的支持。
  
  重构网站要花的精力是惊人的,我认为远大于新建设一个网站。因为每有一点改进,就要测试不同浏览器(比如IE、Firefox、Opera)、和不同版本的(IE7.0、IE6.0、IE5.0、Firefox1.5、Firefox1.0)兼容性问题。而且你必须打开3台电脑,一台电脑上是没法同时查看同一种浏览器不同版本的效果的。网站元素越多,出现的问题就越多,我们曾经为了重构200个页面,花了2个月的时间!总之,重构一个网站确实很麻烦。
  
  为什么要采用DIV+CSS重构
  
  如果你给老外做网站,他一般都会要求你的作品是DIV+CSS的。DIV+CSS重构过的网站主要体现在以下几个方面,更多请参考网站使用DIV+CSS布局有什么好处
  
  1、结构清晰:是指网页源代码的结构清晰,不是指客户端显示出来的网页。很多人觉得网页源代码结构清晰有什么用呢?用户又不会看你的网页源代码!确实,这个观点是成立的,但是结构清晰的网站代码将更加有利于搜索引擎抓取有用的信息,而且在进行团队开发的时候更有利于流程和标准的统一、有利于开发团队相互配合,特别是在进行网站改版和结构调整的时候。
  
  2、下载速度:DIV+CSS避免了烦琐、重复的表格属性和表格嵌套(Table嵌套),避免半天打不开网页的情况,而且结构化的、清晰的代码可大大的减少网站代码繁琐度,本身体积也会变得更小,从而获得更快的下载速度。
  
  3、易于改版和更新:DIV+CSS采用的是“表现和代码分离”的模式,这在网站改版和网站更新的时候就表现得特别明显,所有的内容信息包含在网页里,而布局及设计元素全在css文件里,如果要进行网站结构调整的话,我们根本无需要进行网页和程序的更新,只需要更换CSS文件即可!
  
  特别值得说明的是:在一些Web2.0网站建设中,DIV+CSS采用的“表现和代码分离”模式就是必须的了,比如百度空间(blog),如果不采用DIV+CSS用户根本无法象现在这样灵活的定义自己空间/Blog的布局和风格。
  
  4、SEO搜索引擎优化:几乎所有SEO网站都采用DIV+CSS布局,因为“有效关键词占网页总代码的比重”一定会影响到搜索的结果和效果。而采用DIV+CSS避免了Table嵌套层次太多无法被搜索引擎抓取的问题;而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取,在网络营销型网站建设中,这点是非常重要。
  
  个人认为DIV+CSS有太多的误区:很多人认为用DIV替换掉Table就是DIV+CSS网站了,这是一个很大的误区,也是很多人初学者都会做DIV+CSS、但却做不好的原因。DIV+CSS其实不是一个形式的问题,而是理念问题。DIV+CSS向我们传达了“区块”、“表现和代码分离”的网站设计理念,因为绝大多数XHTML标签都可以被我们通过CSS定义为块,并且赋予丰富的表现形式。但就是这样的模式,让我们可以统一的、标准的、结构化的使用XHTML标签,其意义才可以表现出来。
  
  还是要重复那句话,达到一个目的的方法有很多种,我们为什么不去选最正确的那一种呢? 

Read More

有没有必要将你的网站Div+Css重构?

搜索引擎营销工作中,几乎次次都需要把网站重建。这里有很多原因:比如“建设网站的时候没有关键词分析步骤”、“有大量的功能模块需要添加”……

网站重建被大家认为是“脱胎换骨”、“咸鱼翻身”的重要一步。的确如此,重建之后的网站完全换了个样子,无论是交给上级、还是客户都很有面子。

但为什么很少有人提“网站重构”呢?因为很多从业者认为,把一个网站改成DIV+CSS:1.没必要 2.太麻烦

“没必要”这个理由很有意思。

好像在问“为什么要改成DIV+CSS”?其实这个问题就问错了。DIV是什么?是division,就是区域、区块的意思。在HTML代码出现的时候,DIV这个标签就是用来做页面布局的。大家现在做网页、建网站,却大多使用table来搭建框架、做页面布局。table是什么?table是表格的意思,table只应该在输出数据、输入数据作为表格、表单的时候才出现。所以说,用table来做网页布局是个大笑话。

Read More

网站建设之div+css技巧

   网站建设前台中,用div+css布局时有许多技巧,这是初学者应该注意的。知道了这些技巧,可以让你在布局中方便很多。下面空谷科技为您介绍几点:
一、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。
二、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次。对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为id的权重要比class大。
三、一个兼容性调整(IE和Mozilla)的笨办法:初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来。
  临时解决方法:选择符{属性名:B !important;属性名:A} 或许有时候并没有效果。你可以在搜索更多的BUG解决方法。
四、如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的margin属性吧,而不要去定义位于外面的标签的padding
五、li标签前面的图标推荐使用background-image,而不是list-style-image.
六、在给你的标签疯狂加选择符的时候,别忘了在CSS里给选择符加上注释。等你以后修改你的CSS的时候就知道为什么要这么做了。  八、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。因为图片丢失了,也可以保持文字的可读性。
七、定义链接的四种状态要注意先后顺序: Link Visited Hover Active
八、与内容无关的图片请使用background.时刻记住表现与内容分离。
九、定义颜色可以缩写#8899FF=#89F,一定要是成对的才行,#123234这是不能简写的。
十、改用表格时,还是要用表格。
十一、<script>没有language这个属性,应该写成这样:<script type=”text/javascript”>
十二、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用,在页面居中显示时,使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁,然后使用margin的负值是个好方法。
十三、绝对定位时使用margin值定位可以达到相对于本身所在位置的定,这与top,left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。
十四、如果文字过长,则将过长的部分变成省略号显示:IE5,FF无效,但可以隐藏,IE6有效DIV STYLE=“width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”> 就是比如有一行文字,很长,表格内一行显示不下。
十五、在IE中可能由于注释带来的文字重复问题时可以把注释改为:
  <!–[if !IE]>Put your commentary in here…<![endif]–>
  十六、如何用CSS调用外部字体语法:@font-face{font-family:name;src:url(url);sRules}取值:name:字体名称。任何可能的 font-family 属性的值url(url):使用绝对或相对 url 地址指定OpenType字体文件sRules:样式表定义
十七、定义A标签要注意的小问题:当我们定义a{color:red;}时,它代表了A的四种状态的样式,如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了,其它三种状态就是A中所定义的样式。只定义了一个a:link时,一定要记得把其它三种状态定义出来!
十八、并不是所有样式都要简写:当样式表前定义了如p{padding:1px 2px 3px 4px}时,在后续工程中又增加了一个样式上补白5px,下补白6px.我们并不一定要写成p.style1{padding:5px 6px 3px 4px}.可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好,但你想没想过,你的那种写法重复定义了样式,另外你可以不必去找原来的下补白与左补白的值是多少!如果以后前一个样式P变了话,你定义的p.style1的样式也要变。
十九、网站越大,CSS样式越多,开始做前,请做好充分的准备和策划,包括命名规则。页面区块划分,内部样式分类等。
二十、能共用的css尽量共用,总之要是自己的代码尽量简洁。
       好好将上面的技巧看懂,然后在工作和学习中运用,这样提高自己网站建设前台的技术,毕竟table布局不利于网站优化。且代码复杂混乱,不好维护。所以用好div+css是必然的。 

Read More