网页设计中布局方式之比较

《网页设计中布局方式之比较》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、网页设计中布局方式之比较：在X页设计中，X页布局的效果直接影响到X页设计的质量，本文分析说明了目前常用的三种布局方式：表格方式、框架方式和DIVCSS方式，并对三种方式进行了详细的比较。　　关键词：表格DIVCSS布局　　1概述　　在X页设计过程中，色彩的搭配、文字的变化、图片的处理等，这些都是不可忽略的因素，但除此之外，还有一个非常重要的因素——X页的布局。不同类型的X站采用不同的布局，不但能使X站结构合理化，也可以使访问者一看就明白：这个X站是做什么的。　　目前X页常见的布局结构类型主要有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、标题

2、文本型布局、框架型布局和变化型布局等。无论是哪一种布局结构，我们在布局时都应遵循以下三个基本原则：①主题鲜明：视觉设计表达的是一定的意图和要求，这就要求视觉设计不但要单纯、简练、清晰和精确，还要注意通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。②形式与内容统一：内容决定形式，形式反作用于内容，一个优秀的设计必定是形式对内容的完美表现。③强调整体性：注意单个页面形式与内容统一的同时，更不能忽视同一主题下多个分页面组成的整体X页形式与整体内容的统一。　　2常见布局方式　　在X页设计中，常见的布局方式一般有三种，第一种是使用表格（table），第二种是使用

3、框架，另一种是使用DIVCSS。下面我们将具体的对这三种布局方式进行说明与分析。　　2.1表格布局方式　　表格是一种简明扼要而内容丰富的组织和显示信息的方式，在文档处理中占有十分重要的位置。使用表格既可以在页面上显示表格式数据，也可以进行文本和图形的布局。由于表格使用简单而且灵活，是最早也是使用最广泛的X页布局技术。通过使用相关的一系列表格标签，如table、th、tr、td、caption、thread、tfoot、tbody、col等，并对表格单元格进行合并或拆分以及在表格中嵌套表格等操作，从而得到需要的布局。　　表格布局的优势在于它能对不同对象加以处理，

4、而又不用担心不同对象之间的影响，而且在定位图片和文本时非常方便。但当使用过多表格时，页面下载速度将会受到影响。并且灵活性较差，不易修改和扩展。　　2.2框架布局方式　　框架也是X页设计中对页面布局控制的一种重要手段。使用框架可以将一个浏览器窗口划分为多个区域，每个区域可以分别显示不同的X页。访问者浏览站点时，可以使某个区域的内容永远不更改，但可通过导航条的链接更改主要框架的内容。框架结构常被用在具有多个分类导航或多项复杂功能的X页上。框架结构的实现主要是利用标签。　　框架布局能有效地实现页面导航，方便用户浏览X页，并在框架窗口中支持滚动条，从而能显示更多内容。

5、由于框架集中相同的内容只用下载一次，所以能减少页面下载时间。但兼容性略差。　　2.3DIVCSS布局方式　　DIVCSS是X站标准（或称“WEB标准”）中常用术语之一，在XX站设计标准中，不再使用表格定位技术，而是采用DIVCSS的方式实现各种定位。　　DIV是指标记集中的标记，可以理解为层的概念。主要用来为文档内大块的内容提供布局结构和背景；CSS（CascadingStyleSheets）可译作“层叠样式表”，是一种格式化X页的标准方式，在X页中使用CSS技术，不光可以控制大多数传统的文本格式，还可以有效地对页面的布局、颜色、背景和其他效果实现更加精确的控

6、制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同页面的X页的外观和格式。所以，利用DIVCSS方式来进行X页布局，其实就是用DIV盒模型结构把各部分内容划分到不同的区块，然后用CSS来定义盒模型的位置、大小、边框、内外边距、排列方式等。简单地说，DIV用来搭建X站结构（框架），CSS用于创建X站表现（样式/美化）。其优势在于如下几个方面：　　①表现和内容相分离　　将涉及部分剥离出来放在一个独立样式文件中，文件只存放文本信息，符合W3C标准。　　②提高搜索引擎对X页的索引效率　　用只包含结构化内容的代替嵌套的标签，搜索引擎将更有效地搜

7、索到你的X页内容。　　③代码简洁，提高页面浏览速度　　对于同一个页面视觉效果，采用DIVCSS重构的页面容量要比TABLE编码的页面文件容量小得多，代码更加简洁，前者一般只有后者的1/2大小。对于一个大型X站来说，可以节省大量带宽。　　④易于维护和改版　　由于内容和样式的分离，使页面和样式的调整变得更加方便。只需简单的修改几个CSS文件就可以重新设计整个X站的页面。　　3三种方式比较　　3.1应用的灵活性　　表格方式是最常用的X页布局技术，它使用简单而且灵活，通过表格的嵌套，可以进行比较复杂的X页布局；框架方式由于其提供了固定的布局样式，所以适合布局一些特殊格

8、式的X页，例如论坛的布局常使用这一方式