![网页布局与配色实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/706/929706/b_929706.jpg)
上QQ阅读APP看书,第一时间看更新
2.4 常见的版面布局形式
常见的网页布局形式大致有“国”字型、“厂”字型、“框架”型、“封面”型和Flash型布局。
2.4.1 “国”字型布局
![](https://epubservercos.yuewen.com/EEE837/10771307204594506/epubprivate/OEBPS/Images/Figure-P39_62429.jpg?sign=1739323547-ePyIBrCd1eTW6yyWj6Q2eQy2Ykn8b9pt-0-e5c4a60d7ca84e7611f93248efbcf001)
图2-18 “国”字型布局
“国”字型布局如图2-18所示。最上面是网站的标志、广告及导航栏,接下来是网站的主要内容,左右分别列出一些栏目,中间是主要部分,最下部是网站的一些基本信息,这种结构是国内一些大中型网站常见的布局方式。优点是充分利用版面,信息量大,缺点是页面显得拥挤,不够灵活。
2.4.2 “厂”字型布局
![](https://epubservercos.yuewen.com/EEE837/10771307204594506/epubprivate/OEBPS/Images/Figure-P40_62866.jpg?sign=1739323547-lCPMVIZVa6Ln4Njm8WbfmZJjSDVlnn4T-0-2a1d8a6988cd939fb5439478de669f6f)
图2-19 “厂”字型布局
“厂”字型结构布局,是指页面顶部为标志+广告条,下方左面为主菜单,右面显示正文信息,如图2-19所示。这是网页设计中使用广泛的一种布局方式,一般应用于企业网站中的二级页面。这种布局的优点是页面结构清晰、主次分明,是初学者最容易上手的布局方法。在这种类型中,一种很常见的类型是最上面是标题及广告,左侧是导航链接。
2.4.3 “框架”型布局
![](https://epubservercos.yuewen.com/EEE837/10771307204594506/epubprivate/OEBPS/Images/Figure-P40_62869.jpg?sign=1739323547-Wi0aQVLt0XHYFzXEayoSKZgQWMj4C3bV-0-300a9e9b9851b14c5c97a21c0a5d230f)
图2-20 “框架”型布局
“框架”型布局一般分成上下或左右布局,一栏是导航栏目,一栏是正文信息。复杂的框架结构可以将页面分成许多部分,常见的是三栏布局,如图2-20所示。上边一栏放置图像广告,左边一栏显示导航栏,右边显示正文信息。
2.4.4 “封面”型布局
“封面”型布局一般应用在网站的主页或广告宣传页上,为精美的图像加上简单的文字链接,指向网页中的主要栏目,或通过“进入”链接到下一个页面,图2-21所示是“封面”型布局的网页。
![](https://epubservercos.yuewen.com/EEE837/10771307204594506/epubprivate/OEBPS/Images/Figure-P40_62862.jpg?sign=1739323547-jEWs6oi9WrVRHOscztcW5u8bSoYx62oU-0-d112b0e677448267d99c03cd8879b2c3)
图2-21 “封面”型布局
2.4.5 Flash型布局
这种布局跟封面型的布局结构类似,不同的是页面采用了Flash技术,动感十足,可以大大增强页面的视觉效果,图2-22所示为Flash型网页布局。
![](https://epubservercos.yuewen.com/EEE837/10771307204594506/epubprivate/OEBPS/Images/Figure-P40_62863.jpg?sign=1739323547-LVLRu9d3O3PQf17CJLQOYmLhPbRL0RyK-0-0c340f4a0cf60adec4b580d9d0bdb030)
图2-22 Flash型网页布局