![Dreamweaver CC网页设计自学经典](https://wfqqreader-1252317822.image.myqcloud.com/cover/362/27110362/b_27110362.jpg)
1.4 常见的网页布局
网页布局的基本类型主要有“国”字型布局、“匡”字型布局、标题文本型布局、框架型布局、POP布局、Flash布局等,下面简要介绍一下这些网页布局类型。
1. “国”字型布局
“国”字型布局因其布局结构与汉字“国”相似而得名。其页面的顶部一般放置网站的标志和导航栏或Banner广告,页面中间主要放置网站的主要内容,底部一般放置网站的版权信息和联系方式等,如图1-16所示。
![](https://epubservercos.yuewen.com/F9CB15/15477636905564206/epubprivate/OEBPS/Images/x0017.jpg?sign=1738895127-hqFegHRCIqoJfCU98CgOzBiwhgSayBVZ-0-a4f29c5a9613654cb5c130218ebe0079)
图1-16 “国”字型布局
2. “匡”字型布局
这种结构与上一种其实只是在形式上有所区别,它去掉了“国”字形布局最右边的部分,为主内容区提供了更大的空间。这种布局顶部是标题及横幅广告,主内容区的左侧是一窄列超链接,中间及右侧是宽幅的正文区,底部是一些网站的辅助信息,如图1-17所示。
![](https://epubservercos.yuewen.com/F9CB15/15477636905564206/epubprivate/OEBPS/Images/x0018.jpg?sign=1738895127-uxOOeiLDNzhKkK1fQk50o0hDoUsZrlTi-0-06970a8c8f5194fb80eb976b48353bf0)
图1-17 “匡”字型布局
3. 标题文本型布局
标题文本型布局是指页面内容以文本为主的网页。这种类型的页面顶部往往是标题或类似的内容,下面是正文。一些主要内容是文章或注册页面的网页就属于这一类,如图1-18所示。
![](https://epubservercos.yuewen.com/F9CB15/15477636905564206/epubprivate/OEBPS/Images/x0019.jpg?sign=1738895127-RfiWeES5ldDY0DuOmiyoUekJvDxZdZXa-0-99a2535766b289d08af55262f5426946)
图1-18 标题文本型布局
4. 框架型布局
这种布局采用框架结构,常见的有左右框架型、上下框架型和综合框架型。受兼容性和美观等因素的影响,目前这种布局专业设计人员已多不采用,不过在一些大型论坛上还是比较受青睐的,有些企业网站也有应用,如图1-19所示。
![](https://epubservercos.yuewen.com/F9CB15/15477636905564206/epubprivate/OEBPS/Images/x0020.jpg?sign=1738895127-Riqhh4XoCKJcXbVcRM7sOiTBhyqGIrNJ-0-305b979ad5e39ad0c4d765a8fb12d7d4)
图1-19 框架型布局
5. POP布局
POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体,如图1-20所示。
![](https://epubservercos.yuewen.com/F9CB15/15477636905564206/epubprivate/OEBPS/Images/x0021.jpg?sign=1738895127-qX4zQOIDl9griWJVP1aiuNOgjnldh61c-0-c1a9dfa9619fcf5df4f3c5f728e18a1f)
图1-20 POP布局
6. Flash布局
这种布局是指整个网页就是一个Flash动画,它本身就是动态的,画面一般比较绚丽、有趣,是一种比较新潮的布局方式。这种布局类似于杂志封面,不同的是Flash动画的功能更强大,页面所表达的信息更丰富。如果视觉效果及听觉效果处理得当,这会是一种非常有魅力的布局方式,如图1-21所示。
![](https://epubservercos.yuewen.com/F9CB15/15477636905564206/epubprivate/OEBPS/Images/x0022.jpg?sign=1738895127-AQW56tCYUOStEeb3oS1xOKxWh5D5YYWv-0-8a318ef51e40ac0732bf495ceabf3be5)
图1-21 Flash布局