
1.4 常见的网页布局
网页布局的基本类型主要有“国”字型布局、“匡”字型布局、标题文本型布局、框架型布局、POP布局、Flash布局等,下面简要介绍一下这些网页布局类型。
1. “国”字型布局
“国”字型布局因其布局结构与汉字“国”相似而得名。其页面的顶部一般放置网站的标志和导航栏或Banner广告,页面中间主要放置网站的主要内容,底部一般放置网站的版权信息和联系方式等,如图1-16所示。

图1-16 “国”字型布局
2. “匡”字型布局
这种结构与上一种其实只是在形式上有所区别,它去掉了“国”字形布局最右边的部分,为主内容区提供了更大的空间。这种布局顶部是标题及横幅广告,主内容区的左侧是一窄列超链接,中间及右侧是宽幅的正文区,底部是一些网站的辅助信息,如图1-17所示。

图1-17 “匡”字型布局
3. 标题文本型布局
标题文本型布局是指页面内容以文本为主的网页。这种类型的页面顶部往往是标题或类似的内容,下面是正文。一些主要内容是文章或注册页面的网页就属于这一类,如图1-18所示。

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

图1-19 框架型布局
5. POP布局
POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体,如图1-20所示。

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

图1-21 Flash布局