第2章 网页版面设计基础

网页中色彩搭配技巧 网页制作用彩色还是非彩色好呢？根据专业的研 究机构研究表明：彩色的记忆效果是黑白的3.5倍。 也就是说，在一般情况下，彩色页面较完全黑白 页面更加吸引人。 我们通常的做法是：主要内容文字用非彩色 (黑色)，边框，背景，图片用彩色。这样页面整体 不单调，看主要内容也不会眼花。 ●非彩色的搭配 黑白是最基本和最简单的搭配，白字黑底， 黑底白字都非常清晰明了。 灰色是万能色，可以 和任何彩色搭配，也可以帮助两种对立的色彩和 谐过渡。如果你实在找不出合适的色彩，那么用 灰色试试，效果绝对不会太差。
2.2 网页版面设计
2.2.3 版面典型风格
对称型
偏置型
标题型
2.2 网页版面设计
2.2.4 网页排版布局的常用技术 （1）CSS（层叠样式表）布局 ） （层叠样式表） 使用CSS布局技术能完全精确地定位文本图片。CSS对 布局技术能完全精确地定位文本图片。 使用 布局技术能完全精确地定位文本图片 对 于初学者来说显得有点复杂，但它的确是一种好的布局方法。 于初学者来说显得有点复杂，但它的确是一种好的布局方法。 （2）表格布局 ） 表格布局的优势在于它能对不同对象加以处理， 表格布局的优势在于它能对不同对象加以处理，而又不 用担心不同对象之间的影响， 用担心不同对象之间的影响，而且表格在定位图片和文本上 比用CSS更加方便。表格布局惟一的缺点是，当设计者使用 更加方便。 比用 更加方便 表格布局惟一的缺点是， 了过多的表格时，会影响页面的下载速度。 了过多的表格时，会影响页面的下载速度。 （3）框架布局 ） 从布局上考虑，框架结构不失为一个好的布局方法。 从布局上考虑，框架1 虚拟界面 网页的界面通过显示器显 示，除了运用一般版面设计手 段对这个虚拟界面进行设计以 外，还需要针对该界面的独特 之处进行设计，这就需要了解 虚拟界面的独特之处。
图2-1 包含多种多媒体的网页
2.1 基本概念
2.1.2 网页界面的特点 网页的界面通过显示器显示，除了运用一般版面设计手 网页的界面通过显示器显示， 段对这个虚拟界面进行设计以外， 段对这个虚拟界面进行设计以外，还需要针对该界面的独特 之处进行设计，这就需要了解虚拟界面的独特之处。 之处进行设计，这就需要了解虚拟界面的独特之处。其主要 表现在以下几个方面。 表现在以下几个方面。 1．版面尺寸规范化 2．媒介形式的多样化 3．有限的界面颜色数量 4．界面的嵌套性 5．具有控制功能
2.2 网页版面设计
2.2.3 版面典型风格 网页的版面风格与广告设计的版面风格是统一的， 网页的版面风格与广告设计的版面风格是统一的，其目 的都是为了产生美感、提高阅读兴趣、吸引人们的注意力。 的都是为了产生美感、提高阅读兴趣、吸引人们的注意力。 网页的设计首先要考虑风格的定位。 网页的设计首先要考虑风格的定位。任何网页都要根据主题 的内容来决定其风格与形式， 的内容来决定其风格与形式，因为只有形式与内容的完美统 一才能达到理想的效果。 一才能达到理想的效果。主页风格的形成主要依赖于主页的 版式设计，依赖于页面的色调处理， 版式设计，依赖于页面的色调处理，还有图片与文字的组合 形式等。这些问题看似简单， 形式等。这些问题看似简单，但往往需要主页的设计和制作 者具有一定的美术素质和修养。与平面广告相比， 者具有一定的美术素质和修养。与平面广告相比，网页的总 体风格是：文字较多，可进行超链接，使用动画、视频、 体风格是：文字较多，可进行超链接，使用动画、视频、声 其信息量远远大于广告。比较典型的网页风格主要有： 音，其信息量远远大于广告。比较典型的网页风格主要有： 对称型、偏置型、标题型和混合型等。 对称型、偏置型、标题型和混合型等。
2.2 网页版面设计
2.2.5 色彩搭配 1．首屏页面的设计 ． 所谓首屏页面， 所谓首屏页面， 是指在打开一个网站 首页时， 首页时，不拖动画面 右侧的滚动条能够看 到的部分，如图2-6 到的部分，如图 所示。 所示。
2.2 网页版面设计
2.2.5 色彩搭配 2．导航栏的设计 ． 导航栏是网页非常重要的组成部分，是引导阅读、 导航栏是网页非常重要的组成部分，是引导阅读、扩大 信息量的有力手段。 是网站的导航栏。 信息量的有力手段。图2-7是网站的导航栏。 是网站的导航栏
图2-2是采用不同显示模式显示的迪斯尼公司网站的网页。 是采用不同显示模式显示的迪斯尼公司网站的网页。
a) 800像素×600像素 b) 1024像素×768像素 c) 1280像素×1024像素
2.1 基本概念
2.1.3 网页的功能 网页是计算机技术和多媒体技术实际应用的产物，因此， 网页是计算机技术和多媒体技术实际应用的产物，因此， 网页同时具备计算机技术和多媒体技术的基本功能。 网页同时具备计算机技术和多媒体技术的基本功能。其主要 功能包括：展示功能、超链接功能、 功能包括：展示功能、超链接功能、检索功能以及统计和计 算功能等。 算功能等。
2.2 网页版面设计
2.2.1 版面编排原则 网页是信息传播的一种载体，在设计上同其他出版物如 网页是信息传播的一种载体， 报纸、杂志等有许多共同之处， 报纸、杂志等有许多共同之处，也要遵循一些设计的基本原 但是，由于表现形式、运行方式不同， 则。但是，由于表现形式、运行方式不同，网页设计同时又 具有其特有的规律。网页的艺术设计，是技术与艺术的结合、 具有其特有的规律。网页的艺术设计，是技术与艺术的结合、 内容与形式的统一。 内容与形式的统一。 版面编排的首要任务就是根据网页传达内容的需要，将 版面编排的首要任务就是根据网页传达内容的需要， 不同的文字和图片按照一定的次序用最合理的编排和布局组 成一个有机的整体并展现出来。版面编排应注意以下几点。 成一个有机的整体并展现出来。版面编排应注意以下几点。 1．突出中心，理清主次 突出中心， 2．搭配合理，大小呼应 搭配合理， 3．图文并茂，相得益彰 图文并茂，
第2章 网页版面设计基础
一 基本概念 二 网页版面设计 三 实训
2.1 基本概念
2.1.1 虚拟界面 由于网页是通过计算机的显示通道与人们交流的，并不 由于网页是通过计算机的显示通道与人们交流的， 是现实世界中的实际物体，因此又被称为“虚拟界面” 是现实世界中的实际物体，因此又被称为“虚拟界面”。从 网络的角度来看，虚拟界面是一个网站的窗口， 网络的角度来看，虚拟界面是一个网站的窗口，网站中的数 据库信息、 据库信息、链接功能以及各种网络服务都通过这个界面进行 实施。一个网站的网页可以有多个，通常根据需要分层设置。 实施。一个网站的网页可以有多个，通常根据需要分层设置。 从平面设计的角度来看，每个虚拟界面就是一个版面， 从平面设计的角度来看，每个虚拟界面就是一个版面， 可以利用平面设计理念对其进行设计。但是， 可以利用平面设计理念对其进行设计。但是，网页毕竟是计 算机技术和多媒体技术的产物， 算机技术和多媒体技术的产物，具有某些一般版面所没有的 特点和性质。为了对虚拟版面进行设计， 特点和性质。为了对虚拟版面进行设计，就必须拓展设计的 范围，丰富设计的手段，如对于版面各种媒介的设计与制作， 范围，丰富设计的手段，如对于版面各种媒介的设计与制作， 要应用一些新的技术。 要应用一些新的技术。
2.2 网页版面设计
2.2.2 网页排版布局的一般步骤 （1）构思 ） 根据网站内容的整体风格，设计版面布局。 根据网站内容的整体风格，设计版面布局。 （2）初步填充内容 ） 这一步就要把一些主要的内容放到网页中，例如， 这一步就要把一些主要的内容放到网页中，例如，网站 的标志、广告条、菜单、导航条、计数器等。 的标志、广告条、菜单、导航条、计数器等。 （3）细化 ） 在将各主要元素确定好之后，下面就可以考虑文字、 在将各主要元素确定好之后，下面就可以考虑文字、图 表格等页面元素的排版布局了。在这一步， 像、表格等页面元素的排版布局了。在这一步，设计者可以 利用网页编辑工具把草案做成一个简略的网页，当然， 利用网页编辑工具把草案做成一个简略的网页，当然，对每 一种元素所占的比例也要有一个详细的数字，以便以后修改。 一种元素所占的比例也要有一个详细的数字，以便以后修改。
2.2 网页版面设计
2.2.6 设计规则 网页设计与广告、报刊等平面设计有着共同的要求，下 面主要介绍网页的特殊之处。 1．首屏页面的设计 ． 2．导航栏的设计 ． 3．媒介规格设计 ． 4．网页效果与网页效率 ． 5．强调整体 ． 6．网页与读者群 ． 7．网页命名规则 ． 8．及时更新网页 ．
2.2 网页版面设计
2.2.5 色彩搭配 色彩是人的视觉中最敏感的东西，把握好页面的色彩， 色彩是人的视觉中最敏感的东西，把握好页面的色彩， 页面设计就成功了一半。 页面设计就成功了一半。好的色彩运用能使浏览者对网站留 下较深的印象。色彩和谐与否， 下较深的印象。色彩和谐与否，是整个网页设计是否成功的 关键。色彩总的应用原则是“总体协调，局部对比” 关键。色彩总的应用原则是“总体协调，局部对比”，网页 的整体色彩效果应该是和谐的，只在局部的、 的整体色彩效果应该是和谐的，只在局部的、小范围的地方 突出一些强烈色彩的对比。 突出一些强烈色彩的对比。
●彩色的搭配 彩色的搭配
红色---是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热 红色---是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒， ---是一种激奋的色彩 活力的感觉。 情，活力的感觉。 绿色---介于冷暖两种色彩的中间，显得和睦，宁静，健康， ---介于冷暖两种色彩的中间 绿色---介于冷暖两种色彩的中间，显得和睦，宁静，健康，安全的 感觉。 它和金黄，淡白搭配，可以产生优雅，舒适的气氛。 感觉。 它和金黄，淡白搭配，可以产生优雅，舒适的气氛。 橙色---也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨， ---也是一种激奋的色彩 橙色---也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚 的效果。 的效果。 黄色---具有快乐，希望，智慧和轻快的个性，它的明度最高。 ---具有快乐 黄色---具有快乐，希望，智慧和轻快的个性，它的明度最高。 蓝色---是最具凉爽，清新，专业的色彩。它和白色混合， ---是最具凉爽 蓝色---是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔 淡雅，浪漫的气氛（象天空的色彩：） 顺，淡雅，浪漫的气氛（象天空的色彩：） 白色---具有洁白，明快，纯真，清洁的感受。 ---具有洁白 白色---具有洁白，明快，纯真，清洁的感受。 黑色---具有深沉，神秘，寂静，悲哀，压抑的感受。 ---具有深沉 黑色---具有深沉，神秘，寂静，悲哀，压抑的感受。 灰色---具有中庸，平凡，温和，谦让，中立和高雅的感觉。 ---具有中庸 灰色---具有中庸，平凡，温和，谦让，中立和高雅的感觉。 每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。 每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色 为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。 为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。