任务1.4 了解网页布局类型

任务说明

小蕾通过观察发现，许多网页的页面结构是不一样的，于是询问小莹怎么对网页的结构进行设计，小莹向小蕾介绍了常见的“国”字型布局、“匡”字型布局、“三”字型布局、“川”字型布局等。

任务目标

知识目标：了解常见的网页布局类型。

能力目标：根据网页内容设计相应的布局类型。

任务分析

本次任务中，小蕾将学习常见的国字型、匡字型、三字型、川字型等几种网页布局类型。

实施步骤

第一步：国字型

也可以称为“同”字型，如图1-4所示。它是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是一些基本信息、联系方式、版权声明等。这种结构是网上最多的一种结构类型，如图1-5所示。优点是充分利用版面，信息量大，缺点是页面显得拥挤，不够灵活。

第二步：匡字型

这种结构与上一种只是形式上的区别，如图1-6所示，它去掉了“国”字型布局的最右边的部分，给主内容区释放了更多空间。如图1-7所示这种布局是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面是网站的版权信息。

第三步：三字型

三字型如图1-8所示，这是一种简洁明快的网页布局，在国外的网站使用得比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。如图1-9所示就是一种“三”字型布局的网页。

第四步：川字型

川字型如图1-10所示，整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。如图1-11所示的网站就是“川”字型布局。

第五步：其他类型

1.Flash布局

这种布局是指整个网页就是一个 Flash 动画，它本身就是动态的，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。其实这种布局与封面型结构是类似的，不同的是由于 Flash 强大的功能，页面所表达的信息更丰富。其视觉效果及听觉效果如果处理得当，会是一种非常有魅力的布局，如图1-12所示。

2.标题文本型布局

标题文本型布局是指页面内容以文本为主，这种类型页面最上面往往是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这一类，如图1-13所示。

3.框架型布局

采用框架布局结构，常见的有左右框架型、上下框架型和综合框架型。由于兼容性和美观等因素，这种布局目前专业设计人员采用得已不多，不过在一些大型论坛上还是比较受青睐，有些企业网站也有应用，如图1-14所示。

4.综合型布局

即上述几种类型的结合与变化。