网页排版设计

15
10.3.2 极简主义
用户不喜欢在浏览网页时，被混淆或者感觉到对网页失去控制。让 他们把更多的时间花在阅读主要内容上，界面设计上要让他们方便找 到自己需要的东西。简化网页设计可以从网页的简洁性、可读性和网 页要突出的重点来入手。我们应该适当去掉一些没有必要的设计元素 ，至少做到整个网页设计不会去干扰用户的阅读。
2
10.1.1 字体与字号
字体是多种多样的，不同类型的网页需要选择不同类型的字体来体现 和传达特定的内容信息，一般情况下，字体可以分为衬线字体和无衬线字 体。
3
10.1.2 行距与文字背景
行距指的是两个相邻行之间的距离，行间距的单位常常使用em。em 意为字体大小的倍数，1em 即行距为1倍字大小。排版上有个原则就是行 与行之间的空隙一定要大于单词与单词之间的空隙，否则的话，阅读者容 易串行，造成阅读困难，充分的行距可以隔开每行文字，使的眼睛容易区 分上一行和下一行。
13
10.3 网页设计风格
主题设计、极简主义、插画和素描设计、以字体为主的设计、纹理 风格设计和手制的剪贴簿都属于网页设计风格。随着技术的不断发展和 演进，网页的设计风格也进行了一些转变和重新塑造，不同的流行元素 和科技元素加入其中，再加上具有特色化的版面设计、文字搭配、色彩 调整等各类组成元素，网页风格便呈现出了琳琅 渐变构成
渐变是骨骼或者基本形循序渐进地变化过程中，呈现出阶段性秩序 的构成形成，反映的是运动变化的规律。例如按形状、大小、方向、位 置、疏密、虚实、色彩等关系进行渐次变化排列的构成形式。渐变是一 种符合发展规律的自然现象，例如自然界中近大远小的透视现象等。
22
10.4.3 空间构成
14
10.3.1 主题设计
每一个网站都在为宣传或者传播某种事物而存在，而这些网页中的 部分网页就在视觉上呈现出特别明显的主体化倾向，所有的视觉和听觉 元素都在某种程度上跟所要解读的主题扯上关系，让你不由自主地就会 联想到这些主题上，比如一个电影，一杯咖啡，一个餐厅，或者一种乐 器。下面将以一些主题网站为例子来介绍一下不同的主题设计网页。
5
10.2.1 拐角型网页布局
拐角型结构在形式上呈现的是上面是标题及广告横幅，接下来的左侧 是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。 在这种类型中，一些很常见的类型是最上面是标题及广告，左侧是导航 链接。
6
10.2.2 “国”字型网页布局
“国”字型也可以称为“同”字型，是一些大型网站所喜欢采用的类型， 即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容， 左右分列一些小条内容，中间是主要部分，与左右一起罗列到底，最下 面是网站的一些基本信息、联系方式、版权声明等，这种结构是最常见 的一种类型。
16
10.3.3 插画和素描设计
插画是设计师创造具有独创性网站的一件法宝，而且作品大多数 都极具特色，很容易让用户在浏览使用的同时印象深刻，从而记住网 站，下面我们将从具体的网站中去具体介绍插画带给网站的魔法盒魅 力。
17
10.3.4 以字体为主的设计
近年来，很多设计师将字体设计也列为在网页设计中需要考量的 对象，并作为设计中提升整个网页品味的重要元素。通过使用CSS3 设计师可以拥有许多自定义的字体，这给网页的视觉设计也增加了一 个重要的设计思路。
19
10.4 网页版面构成的艺术表现
网页版面构成的艺术表现方式有重复、渐变以及空间构成，运用艺 术表现方式不仅可以使网页更具有充实、厚重、整体、稳定的视觉效果 ，而且能够丰富网页的视觉效果，尤其是空间构成的运用，能够产生三 维的空间，增强网页的深度感和立体感。
20
10.4.1 重复构成
重复是指同一画面上，同样的造型重复出现的构成方式，重复无疑会 加深印象，使主题得以强化，也是最富秩序的统一观感的手法。在网站 构成中使用重复可以分为背景和图像两种形态出现，在背景设计中就是 形状、大小、色彩、肌理完全重复。
18
10.3.5 纹理风格设计和手制的剪贴 薄
跟纹理有关的元素包括点、线、形状、深度、容积及型式。这些部 件中的每一种都可以创造出具有独特效果的纹理，也或者通过组合拼贴 形成不一样的风格类型，精心设计的纹理可以让网站整体上看上去更加 地精致，减少单调背景的单一性，同时又不会像大量元素设计网站中看 上去那么复杂，可以在中间起到一个缓冲和调和的作用，使整体网站看 上去既不单调又不花哨。
7
10.2.3 左右框架网页布局
这是一种左右分为两页的框架结构，一般左边是导航链接，有时候 最上面会有一个小的标题或标志，右面是正文。我们见到的大部分的 大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结 构非常清晰，一目了然。
8
10.2.4 上下框架网页布局
与左右框架型网页布局类似，区别仅仅在于这是一种上下分为两页 的框架，这种框架的网页上面是固定的标志和链接，下面是正文部分 。
该布局是上面两种结构的结合。它是相对复杂的一种框架结构，较 为常见的是类似于“拐角型”的框架结构。
11
10.2.7 标题正文型网页布局
标题正文型网页布局指的是最上面是标题或者类似的一些东西，下 面是正文，比如一些文章页面或者注册页面等就是这种类型的网页。
12
10.2.8 Flash型网页布局
其实Flash型网页布局与封面型结构式类似的，只是这种类型采用 了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功 能，页面所表达的信息更丰富，其视觉效果及声音效果如图处理得当 ，绝不差于传统的多媒体。
我们一般所说的空间，是指的二维空间。在日常生活中我们可以看 见，物体在空间中给人的感觉总是近大远小。例如在火车站，月台上的 柱子近的高，远的低，铁轨是近的宽，远的窄，对这些特性加以研究探 索，可分析立体形态元素之间的构成法则，提高在平面中构建三维形态 的能力。 折叠表现 阴影表现
23
4
10.2 网站版面结构布局
网页布局类型有拐角型网页布局、“国”字型网页布局、左右框架型网 页布局、上下框架型网页布局、封面型网页布局、综合框架型网页布局 、标题正文型网页布局、Flash型网页布局。网页版面结构布局就是指对 网页中的文字、图形等内容，也就是网页中的元素进行统筹规划与安排 。网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。
一般而言，网页的背景色应该柔和、素雅，配上深色的文字之后，看 起来自然、舒适。但如果为了追求醒目的视觉效果，也可以为标题使用较 深的背景颜色。下面是关于网页背景色和文字色彩搭配的一些经验值，这 些颜色既可以作为文字底色，也可以作为标题底色，适度配合不同字体， 相信会有不错的效果，希望对用户的网页制作有所帮助。
9
10.2.5 封面型网页布局
这种类型基本上是出现在一些网站的首页，大部分为一些精美的平 面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”链 接，甚至直接在首页的图片上做链接而没有任何注释。这种类型大部 分出现在企业网站和个人主页，如果处理地好，会带来赏心悦目的感 觉。
10
10.2.6 综合框架型网页布局
第10章 网页排版设计
在设计网页版面时必须对网页版面构成元素有所了解，板面的构成 元素主要包括网页版面文字、网页版面结构布局、网页设计风格、网页 版面构成的艺术表现。网页版面设计也属于平面设计的范畴，所以平面 设计中的一些构成原理和艺术表现形式也同样适用于网页版面设计。
1
10.1 网页版面文字
文字在网页设计中担任的是传播主要内容的角色，是一个网站的主体 。所以，将文字合理地进行安排可以使网页更好地在传播主题内容的同 时，方便浏览者阅读，提高网页的整体形象和美观性。