网页设计基础
随着国内互联网开发理论的发展，越来越多的网站开始更加注重网页的界面设计，通过优化和美化的界面取得竞争的主动权，吸引更多的用户。网页界面设计的作用在于，为网页提供一个美观且易于与用户交互的图形化接口，帮助用户更方便地浏览网页内容，使用网页的各种功能。同时，优秀的界面设计可以为用户提供一种美的视觉享受。
本章主要介绍在设计网页之前的一些基础知识，以及设计网页需要进行的各种准备工作。包括网站内容的策划、网站板块的设计、网页配色的理论，以及设计网页所使用的一些基本技术和软件。
1.1
网页界面构成
网页是由浏览器打开的文档，因此可以将其看作是浏览器的一个组成部分。网页的界面只包含内置元素，而不包含窗体元素。以内容来划分，一般的网页界面包括Logo、导航条、Banner、内容板块、版尾和版权等。
1．Logo
网站Logo是整个网站对外唯一的标识和标志，是网站商标和品牌的图形表现。Logo的内容通常包括特定的图形和文本，其中图形往往与网站的具体内容或开发网站的企业文化紧密结合，以体现网站的特色；文本主要起到加深用户印象的作用，用户可以通过这些文本介绍网站的名称、服务，也可以体现网站的价值观、宣传口号。
一些简单的Logo也可以只包含文本，通过对文本进行各种变化来体现网站的特色。
在图像中，包含了20个大型知名企业的商标，这些商标往往也与其官方网站的Logo一致。
2．导航条
导航条是索引网站内容，帮助用户快速访问网站功能的辅助工具。根据网站内容，一个网页可以设置多个导航条，还可以设置多级的导航条以显示更多的导航内容。
3．Banner
Banner的中文直译为旗帜、网幅或横幅，意译则为网页中的广告。多数Banner都以JavaScript技术或Flash技术制作，通过一些动画效果，展示更多的内容，并吸引用户观看。
4．内容版块
内容栏是网页内容的主体。通常可以由一个或多个子栏组成，包含网页提供的所有信息和服务项目。
内容栏的内容既可以是图像，也可以是文本，或图像和文本结合的各种内容。
在设计内容栏时，用户可以先独立地设计多个子栏，然后再将这些子栏拼接在一起，形成整体的效果。同时，还可以对子栏进行优化排列，提高用户的体验。如网页的内容较少，则可以使用单独的内容栏，通过大量的图像使网页更加美观。
5．版尾版块
版尾是整个网页的收尾部分。在这部分内容中，可以声明网页的版权、法律依据以及为用户提供的各种提示信息等。
除此之外，在版尾部分还可以提供独立的导航条，以为将页面滚动到底部的用户提供一个导航的替代方式等。
版权的书写应该符合网站所在国家的法律规范，同时遵循一般的习惯。正确的版权书写格式如下所示。
Copyright (?) [Dates] (by) [Author/Owner] (All rights reserved.)
在上面的文本中，小括号“()”中的内容是可省略的内容，中括号“[]”中的内容是根据用户具体信息而可更改的内容。
“All rights reserved.”文本中，最后的英文句号是不可省略的。只要使用“All rights reserved.”，就必须在其后添加英文句号。
版权符号“?”有时可以替代“Copyright”的文本，但是用户不能以带有括号的大写字母C替代版权符号“?”。
在一些国家的法律中，“All rights reserved.”是不可省略的。但在我国法律中并没有对此进行严格规范，因此在实际操作中可以省略。
1.2
网页版块结构
在网页的界面设计工作中，界面元素的设计固然重要，但这些界面元素在网页中分布的位置同样也直接影响到用户的体验。网页的版块布局主要包括5种，即“国”字框架、拐角框架、左右框架、上下框架和封面框架等5种。
1．“国”字框架
“国”字框架网页布局又称“同”字型框架网页布局，其最上方为网站的Logo、Banner或导航条和内容版块。
在内容版块左右两侧通常会分列两小条内容，可以是广告、友情链接等，也可以是网站的子导航条。最下面则是网站的版尾或版权版块。
2．拐角框架
拐角框架型布局也是一种常见的网页结构布局。其与“国”字框架型布局只是在形式上有所区别，实际差异不大。其区别在于其内容版块只有一侧有侧栏，也就是导航条和侧栏组成一个90°的直角。
在拐角框架型布局的网页中，侧栏同样可以放置立式的Banner广告（例如“摩天大楼”型），也可以放置辅助的侧导航栏，为用户访问网页提供帮助。
拐角框架型布局的网页比“国”字型布局的网页更加个性化一些，也更具备实用性。在具体的网页设计中，拐角框架布局通常与大幅的网页留白相结合。一些娱乐型网页比较喜欢使用拐角型框架布局。
3．左右框架
左右框架型网页是一种被垂直划分为两个或多个框架的网页布局结构，其样式仿照了传统的杂志风格，可以在各框架中插入文本、图像与动画等媒体。左右框架型网页布局通常会被应用到一些个性化的网页或大型论坛网页等，具有结构清晰、一目了然的优点。
4．上下框架
上下框架型网页与左右框架类似，是一种被水平划分为两个或多个框架的网页布局结构。在上下框架布局网页中，主题部分并非如“国”字框架型或拐角框架型一样由主栏和侧栏组成，而是一个整体或复杂的组合结构。
5．封面框架
这种类型的网页，通常作为一些个性化网站的首页，以精美的动画，加上几个链接或“进入”按钮，甚至只在图片或动画上做超链接。
1.3
网站整体策划
网站的整体策划是一个系统工程，是在建设网站之前进行的必要工作。
1．市场调查
市场调查提供了网站策划的依据。在市场分析过程中，需要先进行3个方面的调查，即用户需求调查、竞争对手情况调查以及企业自身情况的调查。
2．市场分析
市场分析是将市场调查的结果转换为数据，并根据数据对网站的功能进行定位的过程。
3．制订网站技术方案
在建设网站时，会有多种技术供用户选择，包括服务器的相关技术（NT Server/Linux）、数据库技术（Access/My SQL/SQL Server）、前台技术（XHTML+ CSS/Flash/AIR）以及后台技术（ASP/ASP.NET/ PHP/JSP）等。
4．规划网站内容
在制订网站技术方案之后，即可整理收集的网站资源，并对资源进行分类整理，划分栏目等。
网站的栏目划分，标准应尽量符合大多数人理解的习惯。例如，一个典型的企业网站栏目，通常包括企业的简介、新闻、产品，用户的反馈，以及联系方式等。产品栏目还可以再划分子栏目。
5．前台设计
前台设计包括所有面向用户的平面设计工作，例如，网站的整体布局设计、风格设计、色彩搭配以及UI设计等。
6．后台开发
后台开发包括设计数据库和数据表，以及规划后台程序所需要的功能范围等。
7．网站测试
在发布网站之前需要对网站进行的各种严密测试，包括前台页面的有效性、后台程序的稳定性、数据库的可靠性以及整体网站各链接的有效性等。
8．网站发布
在制订网站的测试计划后，即可制订网站发布的计划，包括选择域名、网站数据存储的方式等。
9．网站推广
除了网站的规划和制作外，推广网站也是一项重要的工作，例如，登记各种搜索引擎、发布各种广告、公关活动等。
10．网站维护
维护是一项长期的工作，包括对服务器的软件、硬件维护、数据库的维护、网站内容的更新等。多数网站还会定期的改版，保持用户的新鲜感。
1.4
网页色彩基础
网页设计是平面设计的一个分支，和其他平面设计类似，对色彩都有较大的依赖性。色彩可以决定网站的整体风格，也可以决定网站所表现的情绪。
1．RGB色彩体系
人类的眼睛是根据所看见的光的波长来识别颜色的。肉眼可识别的白色太阳光，事实上是由多种波长的光复合而成的全色光。
根据全色光各复合部分的波长（长波，中波和短波），可以将全色光解析为3种基本颜色，即红（Red）、绿（Green）和蓝（Blue）三原色光。
可见光中，绝大多数的颜色可以由三原色光按不同的比例混合而成。例如，当3种颜色以相同的比例混合，则形成白色。而当3种颜色强度均为0时，则形成黑色。
计算机的显示器系统就是利用三原色的原理，采用加法混色法，以描述三原色在各种可见光颜色中占据的比例来分析和描述色彩，从而确立了RGB色彩体系。
2．色彩的属性
任何一种色彩都会具备色相、饱和度和明度3种基本属性。这3种基本属性又被称作色彩的三要素。修改这3种属性中任意一种，都会影响原色彩其他要素的变化。
* 色相
色相是由色彩的波长产生的属性，根据波长的长短，可以将可见光划分为6种基本色相，即红、橙、黄、绿、蓝和紫。根据这6种色相可以绘制一个色相环，表示6种颜色的变化规律。
在Photoshop等图像处理软件中，通常用一种渐变色条来表示色彩的色相。
* 饱和度
饱和度是指色彩的鲜艳程度，又称彩度、纯度。色彩的饱和度越高，则色相越明确，反之则越弱。饱和度取决于可见光波波长的单纯程度。
在色彩中，六色色相环中的6种基础色饱和度最高，黑、白、灰没有饱和度。
* 明度
明度是指色彩的明暗程度，也称光度、深浅度。色彩的明度来自于光波中振幅的大小。色彩的明度越高，则颜色越明亮，反之则越阴暗。
在无彩色系中，明度最高的是白色，而最低的是黑色。在有彩色系中，明度最高的是黄色，最低的是紫色。
3．色彩模式
自然界中的颜色种类繁多，单纯以颜色的名称来表示颜色是无法适应平面设计及工业生产需要的。因此，人们引入了色彩模式的概念。
色彩模式是表示色彩的方法。在不同的应用领域里，表示色彩的方式也有很大区别。在平面设计领域，常用的色彩模式主要分为两种，即RGB色彩模式和CMYK色彩模式。
* RGB色彩模式
RGB色彩模式主要是应用于输出CRT显示器的一种色彩模式，其采用加法混色法，以描述各种可见光在颜色中占据的比例来分析色彩。RGB色彩的基准是光学三原色（红、绿和蓝）。
* CMYK色彩模式
CMYK色彩模式是主要应用于印刷品的一种色彩模式。其原理是根据印刷时使用的四色油墨混合的比例实现各种色彩，因此属于减法混色法。
4．Web216安全色
在早期各种浏览器中，图像的颜色显示方式并不统一，同样一种颜色在不同的网页浏览器中可能会显示不同的颜色。
为了保证网页基本的色彩显示，人们规定了216种颜色的显示方法，这216种颜色以同样的效果在任意的浏览器中，不会造成色彩的错乱，被称作“安全的”颜色，即Web216安全色。
……
