第-3-章-网页布局与构成

第3章网页布局与版式构成.上章回顾设计网页时，比较常用的颜色模式有RGB和Indexed两种颜色模式。网页安全色是指以256色模式运行时，在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合，其中有216种常见颜色被称为网页安全色。网页配色时可以遵循鲜明性、独特性、协调性、联想性、艺术性等五大原则。网页色彩按表现功能划分为主色调、辅色调、点睛色和背景色。其中页面中的主色调起到主导作用，辅色主用于烘托和支持主色调，之后再用点眼色突出主题。在对网页进行配色时，可以采用色相配色、标准色配色、渐变色配色等方法。.本章进阶

了解网页的基本元素

理解网页重要元素的表现形式掌握网页的布局结构掌握网页的构成要素.案例

案例分析根据本章知识点把提供的网页效果图进行规划、布局。涉及知识点布局分析规划Photoshop操作素材完成效果.网页概述首页访问者见到的第一个页面展示网站形象.网页概述次级页面传达信息展示网站内容.网页概述形象页文字信息较少仅作为网站入口关注访问者对网站的整体印象.网页概述

门户网站更注重信息的传播和网站的访问量，因此网站的形象处于次要的位置，通常首页直接设置内容。.页面主要元素网站LOGO导航条导航按钮网站通栏文字图片按钮广告条.页面尺寸常用的显示器分辨率

800像素×600像素

1024像素×768像素第一眼看到的最大化显示的页面大小相应为

778像素×420像素

1002像素×600像素

浏览器界面中的标题栏、菜单栏、功能按钮、状态栏、滚动条等要占用一定的显示空间。.网页基本要素从信息组织角度分类内容结构表现行为内容结构表现行为四个基本要素存在层次关系，内容是核心、基础。桔子芹菜菠萝蔬菜土豆水果香蕉菠菜辣椒苹果水果桔子苹果香蕉菠萝蔬菜芹菜菠菜辣椒土豆水果蔬菜.网页基本要素从制作角度分类内容设计技术对于网页设计师来说，设计工作占有重要比重。决定网页的价值

技术主要是网页及图形图像制作软件的运用以及程序员的程序开发实现。.重要的网页元素

网页元素就像棋子，网页布局的过程就是棋盘上“排兵布阵”的过程，合理的安排它们的位置，就会达到意想不到的效果。.网页标志网页LOGO

网站特色和内涵的集中体现

具有唯一性

设计灵活性较大、样式多样注意突出LOGO，使其醒目、明显。LOGO居中LOGO居左LOGO居右.通栏横贯页面的通栏.通栏横贯页面的通栏不横贯页面的通栏灵活多样的通栏.网站导航

文字导航按钮导航图片导航隐藏导航.按钮导航条演示绘制底色

绘制单个按钮绘制颜色块输入文字并保存文件.网页文字

文字是传达数据和信息的重要载体，是网页中的重要组成元素。文字字体选用不宜过多字体风格与网站整体风格一致特效字体应遵循美观、醒目、易于识别的原则文本标题与正文应有字体与字号的变化文字成为构成页面的主体，同时兼具导航的作用，风格十分独特。.页面布局结构

网页布局——确定网站首页和其它页的结构形式栏式结构将页面信息划分为若干列一分栏（通栏）二分栏三分栏四分栏

……

区块结构利用辅助线、图形、色块等把页面划分为若干区块其它结构国字型拐角型标题正文类型框架类型.栏式结构

二分栏结构简练大方、个性鲜明，页面区域划分清晰便于查阅。分栏的宽度可以均等，也可以左宽右窄或是左窄右宽。

三分栏结构三部分的宽度可以任意调整，对于信息量大、内容繁多的网站非常适用。四分栏结构适合信息标题短小精炼的网站，分栏宽度可以灵活调整。.区块结构栏式结构基础上的横向划分，这种结构的设计较为自由，变化多样。.其它结构国字型布局：信息内容的边线不是浏览器边线，而被包围在一个线框区域内。

拐角结构常见于网站次级页面，页面结构清晰、主次分明，但形式单调乏味，过于呆板。.其它结构标题正文类型结构简单，适用范围有限。全图像类型往往只出现在网站的首页。框架的使用是一种复杂的形式，一般在某些大型网站的社区论坛中较为常见。.网页布局

掌握已有结构模式的规律和特点，使用时灵活组合，便会产生无尽的变化。布局是设计思想的具体体现，是一种“活”的灵魂，设计中要注意不囿于固有模式。.

点、线、面是平面构成的主要组成元素，也是构成网页的基本视觉元素。网页中的点造型的基本要素连续的点可以产生线的感觉临近点的集合给人一种虚面的感受大小排列分布的点形成空间感网页构成.网页中的点在空白区域中，点是视觉的焦点，给人的视觉感受尤为强烈。当点的数量很多时，浏览者的注意力就会被分散。

如果大量的点中有个别点具备了颜色、大小、变化等差异性，那么视觉的焦点将会集中于这些点。.网页中的点连续、规律排列的点可以产生节奏感和韵律感。点阵的疏密能产生强烈的空间感。聚集点形成的点阵本身与周围背景环境疏密的强烈反差，更容易吸引视线。.网页中的线

点的运动轨迹就形成了线，线强调方向与形状，具有很强的表现力。直线象征平实、挺拔、力量、速度和稳定。曲线给人一种平滑、柔软、优雅和委婉的感觉，使人联想到流畅、秩序、自由。.网页中的直线

由水平线和垂直线构成的边框区域使人产生一种庄重、平稳、安定、均衡的感觉。选择适当的线宽或色彩，常会出现独特的视觉感受。把水平线和垂直线改为斜线，将给人带来速度和运动的感觉。.网页中的曲线

曲线变化形式多样，细线精致、锐利，粗线则更具浑实、敦厚的特点，其转折变化还具有视线导向的作用。封闭的线条形成一个面，此时的线具有突出、美化形的效果。.网页中的面

平面构成中最大的元素注重形状和面积的对比大量密集的点和封闭的线都可以形成面.网页中的面多边形面使页面显得简洁明快、干净利落。

圆形面的视觉效果鲜明、强烈，可以看做是一个点放大后的形态，很容易吸引视线。

不规则形状可以衍生出千变万化的图案和创意，这给页面的设计带来了广阔的创作空间。.网页构成的综合运用

页面上点、线、面同时出现，面通常会成为视觉的中心，点和线则只起到陪衬装饰作用。

合理安排点、线、面三种视觉构成的基本元素，综合运用多种构成形式，才能使画面具有更加强烈的表现力，达到最佳的视觉效果。.素材准备演示案例制作操作步骤

打开素材调整楼盘插图调整一级栏目调整颜色块调整栏目调整版权文字并保存文件.本章总结

网页显示出的版面大小与显示器的分辨率有关。视觉效果包含了网页元素的图形设计方法，色彩、动态效果，传递着网页的外观风格，可以提供