![CSS3+DIV网页样式与布局案例课堂(第2版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/459/31794459/b_31794459.jpg)
1.5 网站的种类与网页布局方式
当用户在网络中遨游时,一个个精彩的网页会呈现在我们面前。网页的精彩因素有哪些呢?色彩的搭配、文字的变化、图片的处理等,这些当然是不可忽略的因素,除了这些,还有一个重要的因素,那就是网页的布局设计。
1.5.1 网站的种类
按照内容形式的不同,网站可以分为门户网站、职能网站、专业网站和个人网站4大类。
1. 门户网站
门户网站是指涉及领域非常广泛的综合性网站,如国内著名的3大门户网站:网易、搜狐和新浪。如图1-19所示为网易网站的首页。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P26_7385.jpg?sign=1739294077-fZyeU3JjnR98MvkcH8mKYsJyzOxKHIaq-0-a197fcf3a93516def2bface098d34986)
图1-19 门户网站
2. 职能网站
职能网站是指一些公司为展示其产品或对其所提供的售后服务进行说明而建立的网站。如图1-20所示为联想集团的中文官方网站。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P26_7388.jpg?sign=1739294077-eROdlmhPoELBdzSv9ceoklVFb5R5F8fW-0-6a6b30b7195d31abb3c038772e47d9cd)
图1-20 职能网站
3. 专业网站
专业网站指的是专门以某个主题为内容而建立的网站,这种网站都是以某一题材作为网站内容的。如图1-21所示为赶集网站,该网站主要为用户提供租房、二手货交易等同城相关服务。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P27_7401.jpg?sign=1739294077-VKziFRfaQstuxYj4Fvj9YtGH2BvLQo3v-0-bdd808b3f347f43788aa55531905ffb7)
图1-21 专业网站
4. 个人网站
个人网站是由个人开发建立的网站,在内容和形式上具有很强的个性化,通常用来宣传自己或展示个人的兴趣爱好。如现在比较流行的淘宝网,在淘宝网上注册一个账户,开一家自己的小店,在一定程度上就宣传了自己和展示了个人兴趣与爱好,如图1-22所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P27_76311.jpg?sign=1739294077-96SiYGVkiU6tzvqRDWREHOHjEongM3VL-0-3831185e607f1a8d815030af876f67e8)
图1-22 个人网站
1.5.2 网页布局方式
常见的网页布局有“同”字型、“厂”字型、标题正文型、分栏型、封面型和Flash型等。
1. “同”字型
“同”字型是大型网站常用的页面布局,特点是内容丰富、链接多、信息量大。网页的上部分是徽标和导航栏,下部分为3列,两边区域是图片或文字链接和小图片广告,中间是网站的主要内容,最下面是版权信息等,如图1-23所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P27_1.jpg?sign=1739294077-CulnW3gcyoNXqqMHu5BMtOgGlDne7k7s-0-156a9fabf3b0c39dc9ae798b70a4f1bb)
图1-23 “同”字型网站
2. “厂”字型
“厂”字型网页布局的特点是内容清晰、一目了然,网页顶端是徽标和导航栏,左侧是文本和图片链接,右边是正文信息区,如图1-24所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P27_7412.jpg?sign=1739294077-plVPQDnkBd5cRrCl5T9q1375dLLMZQZ1-0-83f947b79ad7c2cf669bee4399e8b416)
图1-24 “厂”字型网站
3. 标题正文型
标题正文型网页布局的特点是内容简单,网页上部是网站徽标和标题,下部是网页正文,如图1-25所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P28_7434.jpg?sign=1739294077-1CHJqO1XDj5mNDDXv19AD9XXOHDEiWLL-0-4491a8d08b941b9ae8b785fdcace5d87)
图1-25 标题正文型网站
4. 分栏型
分栏型网页布局一般分为左右(或上下)两栏或多栏。一栏是导航链接,另一栏是正文信息,如图1-26所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P28_7437.jpg?sign=1739294077-ApDgD22OwpoYN9Ii9vkrd0khpIEnrmxl-0-185297d4b79754779401a07d28cb68fe)
图1-26 分栏型布局网站
5. 封面型
封面型网页布局更接近于平面设计艺术,主要应用在首页上,一般为设计精美的图片或动画,多用于个人网页,如果处理得好,会给人带来赏心悦目的感觉,如图1-27所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P28_7448.jpg?sign=1739294077-bbWwe926X4mKie26uWgQugxxCjUhsUf4-0-d83fb23a55dac9c359ddf250b8572c78)
图1-27 封面型布局网站
6. Flash型
Flash型网页布局采用Flash技术完成,页面所表达的信息极富感染力,其视觉效果和听觉效果与传统页面不同,能给浏览者以很大的冲击。Flash网页很受年轻人的喜爱,如图1-28所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P28_7451.jpg?sign=1739294077-nyY0VMUrmToo6oLWgZMvnWhsvdcYBwMo-0-ffd6973d8620adaeb6595e50f1287f41)
图1-28 Flash型布局网站