永泰网站建设公司:企业网站设计布局哪家好

  • 永泰网站建设公司:企业网站设计布局哪家好已关闭评论
  • A+
所属分类:网站建设公司

永泰网站建设公司:企业网站设计布局哪家好福州嘉艺网络给很多企业网站建站,包括福州本地的还有五区八县的企业,闽侯福清比较近,永泰平潭虽然远,也是可以上门进行网站建设服务。企业网站要做好网站建设首先就是做好网页设计,网页设计最重要的就是网页布局设计,那么网页布局怎么做好呢

网站技术发展过程中,用户使用最多的是利用 table 和 DIV +CSS 对站进行布局设计,表格布局容易掌握,布局方便。但表格布局需要通过表格的间距或者使用透明的图片或者文字来填充布局板块间的间距,页面装饰和内容没有分离,这样布局的网页中表格会生成大量难以阅读和维护的代码,修改较困难,而且表格布局浏览速度较慢。用 DIV +CSS进行网站布局,解决了内容和装饰的分离问题,实现比较精确和自适应的层布局样式。所以很多设计师抛弃了 Table 方式。难道 TABLE 布局真的已经到了退出历史舞台的时候了吗?笔者认为两种布局方式是互存的,相互都有各自的优缺点。

1 TABLE 和 DIV +CSS 介绍

1.1TABLE 布局。

TABLE 是网页设计制作的重要元素之一,它以简洁明了和高效快捷的方式将数据、文本、图片、表单等网页元素合理有序地布局在页面上,使页面结构整齐,版面清晰。不太复杂的网页一般都利用表格进行网页布局。在 HTML 语言中,<table >代表表格,<tr >代表行,<td >代表单元格,把网页的不同元素按照要求放在不同的表格的单元格中,在根据布局需求,通过表格相互嵌套来实现复杂的排版效果。

主要代码形式:<table width =”200”border =”0”cellspacing =”0”cellpadding =”0”><tr ><td > </td ></tr ></table >1.2DIV +CSS 布局。CSS 是指层叠样式表 (英文全称:CascadingStyle Sheets)是一种用来表现 HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

DIV 是层叠样式表中的定位技术,全称 DIVision,即为划分。是用来为 HTML 文档内块(block)的内容提供结构和背景的元素。这个块有时可以称其为图层。 <div >标签常用于组合块级元素,以便通过样式表来对这些元素进行格式化。 <div >可定义文档中的分区或节(division/section)。 <div >标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或class 来标记 <div >,那么该标签的作用会变得更加有效。

采用 DIV +CSS 对网页布局主要代码形式:<style >body {margin:0;}#content{width:1200px;margin:0 auto;}#side {background:#99FF99;height:300px;width:260px;float:left;}#side1{background:#DDFF99;height:300px;width:260px;float:right;}#main{background:#99AAAA;height:300px;margin:0 260px;}</style ><body ><div id =”content”><div id =”side”>此处显示 id ”side”的内容 </div ><div id =”side1”>此处显示 id ”side1”的内容 </div ><div id =”main”>此处显示 id ”main”的内容 </div ></div ></body >2 TABLE 和 DIV +CSS 优缺点2.1 网页加载速度。在 HTML 中浏览器加载 TABLE 表格时,首先寻找表格的开始标记 <table >,直到找到 </table >,才显示表格中的内容,所以说表格中的文件越多加载变慢。而 DIV 加载采用的是边加载边把内容显示在浏览器中,精简了许多页面代码,浏览访问速度得以提升,提升了网站的用户体验度。

2.2 可维护性。

TABLE 布局是在一个大容器,里面装入所有的元素,大量的设计代码杂乱无章的排在一起,可读性降低,加大了维护成本。DIV +CSS 布局采用的时 HTML 和 CSS 文件分离,实现了网页的内容和表现形式分开,布局精准,CSS 文件可以在网站的任意一个页面进行调用,而若是使用 table 表格修改部分页面却是显得很麻烦。要是一个门户网站的话,需手动改很多页面,而且看着那些表格也会感觉很乱也很浪费时间,但是使用 CSSDIV 布局只需修改 CSS 文件中的一个代码即可,真正实现了只要修改样式表,就可以修改整个网站的效果,降低了维护成本,这个是 TABLE 布局所不具备的。

2.3 易学性。

TABLE 布局代码简单,很适合初学者学习,刚学时可以用 Dreamweaver 和记事本进行编辑,特别是 Dreamweaver 能够实现所见即所得的效果,属性设置全部是可视化界面,简单易学。DIV +CSS 代码语法严谨,属性较多,嵌套复杂,对于初学者来说,有很大难度。

2.4SEO 优化。采用 DIV +CSS 布局的网站对于搜索引擎很是友好,因此其避免了 Table 嵌套层次过多而无法被搜索引擎抓取的问题,而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

2.5 浏览器兼容性。若使用 table 布局网页,兼容性很好,唯一的缺点是在使用不同浏览器情况下会发生错位;采用 DIV +CSS 则网页都不会出现变形情况,但是 CSS 对低于 IE6 的版本不友好,对 IE6 来说也有一个着名的 BUG 是当浮动元素与非浮动元素相邻时,会出现 3 像素的空隙,解决办法是加上_margin -right:-3px,就可以消除这个间距。庆幸的是现在的 IE 的版本基本越来越高,低于 IE7 的基本不再使用。

3 总结

综上所述,TABLE 和 BIV +CSS 是目前最常用两种布局,各有千秋,在使用中应该根据实际情况考虑采用哪种方案,必要时可以采用两种的组合可能会带来意想不到效果。