PhotoshopCC网页设计与配色标准教程全套课件压缩包第10章.pptVIP

* 第10章 网页排版设计 在设计网页版面时必须对网页版面构成元素有所了解，板面的构成元素主要包括网页版面文字、网页版面结构布局、网页设计风格、网页版面构成的艺术表现。网页版面设计也属于平面设计的范畴，所以平面设计中的一些构成原理和艺术表现形式也同样适用于网页版面设计。 * 10.1 网页版面文字 文字在网页设计中担任的是传播主要内容的角色，是一个网站的主体。所以，将文字合理地进行安排可以使网页更好地在传播主题内容的同时，方便浏览者阅读，提高网页的整体形象和美观性。 * 10.1.1 字体与字号 字体是多种多样的，不同类型的网页需要选择不同类型的字体来体现和传达特定的内容信息，一般情况下，字体可以分为衬线字体和无衬线字体。 * 10.1.2 行距与文字背景 行距指的是两个相邻行之间的距离，行间距的单位常常使用em。em意为字体大小的倍数，1em 即行距为1倍字大小。排版上有个原则就是行与行之间的空隙一定要大于单词与单词之间的空隙，否则的话，阅读者容易串行，造成阅读困难，充分的行距可以隔开每行文字，使的眼睛容易区分上一行和下一行。 一般而言，网页的背景色应该柔和、素雅，配上深色的文字之后，看起来自然、舒适。但如果为了追求醒目的视觉效果，也可以为标题使用较深的背景颜色。下面是关于网页背景色和文字色彩搭配的一些经验值，这些颜色既可以作为文字底色，也可以作为标题底色，适度配合不同字体，相信会有不错的效果，希望对用户的网页制作有所帮助。 * 10.2 网站版面结构布局 网页布局类型有拐角型网页布局、“国”字型网页布局、左右框架型网页布局、上下框架型网页布局、封面型网页布局、综合框架型网页布局、标题正文型网页布局、Flash型网页布局。网页版面结构布局就是指对网页中的文字、图形等内容，也就是网页中的元素进行统筹规划与安排。网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。 * 10.2.1 拐角型网页布局 拐角型结构在形式上呈现的是上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一些很常见的类型是最上面是标题及广告，左侧是导航链接。 * 10.2.2 “国”字型网页布局 “国”字型也可以称为“同”字型，是一些大型网站所喜欢采用的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等，这种结构是最常见的一种类型。 * 10.2.3 左右框架网页布局 这是一种左右分为两页的框架结构，一般左边是导航链接，有时候最上面会有一个小的标题或标志，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。 * 10.2.4 上下框架网页布局 与左右框架型网页布局类似，区别仅仅在于这是一种上下分为两页的框架，这种框架的网页上面是固定的标志和链接，下面是正文部分。 * 10.2.5 封面型网页布局 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”链接，甚至直接在首页的图片上做链接而没有任何注释。这种类型大部分出现在企业网站和个人主页，如果处理地好，会带来赏心悦目的感觉。 * 10.2.6 综合框架型网页布局 该布局是上面两种结构的结合。它是相对复杂的一种框架结构，较为常见的是类似于“拐角型”的框架结构。 * 10.2.7 标题正文型网页布局 标题正文型网页布局指的是最上面是标题或者类似的一些东西，下面是正文，比如一些文章页面或者注册页面等就是这种类型的网页。 * 10.2.8 Flash型网页布局 其实Flash型网页布局与封面型结构式类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及声音效果如图处理得当，绝不差于传统的多媒体。 * 10.3 网页设计风格 主题设计、极简主义、插画和素描设计、以字体为主的设计、纹理风格设计和手制的剪贴簿都属于网页设计风格。随着技术的不断发展和演进，网页的设计风格也进行了一些转变和重新塑造，不同的流行元素和科技元素加入其中，再加上具有特色化的版面设计、文字搭配、色彩调整等各类组成元素，网页风格便呈现出了琳琅满目的状态。 * 10.3.1 主题设计 每一个网站都在为宣传或者传播某种事物而存在，而这些网页中的部分网页就在视觉上呈现出