网页设计基础
网站的整体策划是一个系统工程，是在建设网站之前进行的必要工作。
1．市场调查
市场调查提供了网站策划的依据。在市场分析过程中，需要先进行3个方面的调查，即用户需求调查、竞争对手情况调查以及企业自身情况的调查。
2．市场分析
市场分析是将市场调查的结果转换为数据，并根据数据对网站的功能进行定位的过程。
3．制订网站技术方案
在建设网站时，会有多种技术供用户选择，包括服务器的相关技术（NT Server/Linux）、数据库技术（ACCESS/My Sql/SQL Server）、前台技术（XHTML+CSS/Flash/AIR）以及后台技术（ASP/https://www.doczj.com/doc/fb16313788.html,/PHP/JSP）等。
注意
在制订网站技术方案时，切忌一切求新，盲
目采用最先进的技术。符合网站资金实力和
技术水平的技术才是合
适的技术。
4．规划网站内容
在制订网站技术方案之后，即可整理收集的网站资源，并对资源进行分类整理、划分栏目等。
网站栏目划分的标准是应尽量符合大多数人理解的习惯。例如，一个典型的企业网站栏目，通常包括企业的简介、新闻、产品，用户的反馈以及联系方式等。产品栏目还可以再划分子栏目。5．前台设计
前台设计包括所有面向用户的平面设计工作，例如网站的整体布局设计、风格设计、色彩搭配以及UI设计等。
6．后台开发
后台开发包括设计数据库和数据表，以及规划后台程序所需要的功能范围等。
7．网站测试
在发布网站之前需要对网站进行各种严密测试，包括前台页面的有效性、后台程序的稳定性、数据库的可靠性以及整个网站各链接的有效性等。8．网站发布
在制订网站的测试计划后，即可制订网站的发布计划，包括选择域名、网站数据存储的方式等。9．网站推广
除了网站的规划和制作外，推广网站也是一项重要的工作，例如，登记各种搜索引擎、发布各种广告、公关活动等。
10．网站维护
维护是一项长期的工作，包括对服务器的软件、硬件维护、数据库的维护、网站内容的更新等。多数网站还会定期改版，保持用户的新鲜感。
布局的设计通常需要注意网站的页面大小以及各种板块的安排。
1．网页页面大小
合理地设置页面尺寸，可以避免用户频繁地拖动滚动条。
目前国内的上网者习惯使用微软公司的Internet Explorer 浏览器（简称IE 浏览器）。在屏幕分辨率为1024×768时，不同版本的IE 浏览器的屏幕大小如下表所示。
由左表中的数据可得出，在设计网页时，如不
希望用户频繁拖动水平滚动条，
可将网页的宽度控制在1003px 以内。
注意
多
数网页都会尽量避免出现水平滚动条。在网站的进入页或Flash 网页中，垂直滚动条也应尽量避免出现。
2．网页板块构成
网页是由各种板块构成的。Internet 中的网页内容各异，然而多数网页都是由一些基本的板块组成的，包括Logo 、导航条、Banner 、内容板块、版尾和版权等。
● Logo
Logo 是企业或网站的标志。例如，微软的Logo 。
● 导航条
导航条是网站的重要组成元素。合理安排导航条可以帮助浏览者迅速查找到需要的信息。例如，IBM 的导航条。
● Banner
Banner 的中文直译为旗帜、网幅或横幅，意译则为网页中的广告。多数Banner 都以JavaScript 技术或Flash 技术制作，通过一些动画效果可展示更多的内容，并吸引用户观看。
● 内容板块
网页的内容板块通常是网页的主体部分。这一板块可以包含各种文本、图像、动画、超链接等。例如，蔡司光学网站的内容板块。
● 版尾板块
版尾，顾名思义是网页页面最底端的板块，通常放置网站的版权信息。例如，陶氏化学的版尾版权板块。
在设计网页时，需要了解网页的5种基本结构布局。
1．“国”字型
“国”字型网页布局又称“同”字型网页布局，其最上方为网站的Logo ，Banner 及导航条，接下来是网站的内容板块。
在内容板块左右两侧通常会分列两小条内容，可以是广告、友情链接等，也可以是网站的子导航
网页设计与制作（CS4中文版）从新手到高手
条，最下面则是网站的版尾或版权
板块。 2．拐角型
拐角型布局也是一种常见的网页结构布局。其与“国”字型布局只是在形式上有所区别，实际差异
不大。 拐角型布局的网页和“国” 字型布局的网页区别在于其内容板块只有一侧有
侧栏。
这种布局的网页比“国”字型布局的网页稍微个性化一些，常用于一些娱乐性网站，例如，C W 电视台的官方网站就是拐角型布局。
3．上下框架型
上下框架型网页布局比“国”字型网页布局和拐角型网页布局都更加简单一些。
在上
下框架布局网页中，主题部分并非如“国”字型或拐角型一样有主栏和侧栏组成，而是一个整体或复杂的组合结构。
上下框架型网页布局应用在一些栏目较少的网站。例如，意大利导游网。
4．左右框架型
这是一种被垂直划分为两个或更多个框架的网页布局结构，类似将上下框架型布局旋转90度之后的效果。
左右框架型网页布局通常会被应用到一些个性化的
网页或大型论坛网页中，具有结构清晰、一目了然的优点。例如，巴西的iDeal Interactive 汽车销售公司的网页就是如此。
5．封面型
这种类型的网页通常作为一些个性化网站的首页，以精美的动画加上几个链接或“进入”按钮，甚至只在图片或动画上做超链接。
娱乐性的网站或个人网站偏好使用这种布局方式。例如，英国电视节目《幸存者》的网站。
网页设计是平面设计的一个分支，和其他平面
设计类似，对色彩都有较大的依赖性。色彩可以决定
网站的整体风格，也可以决定网站所表现的情绪。 1．三原色的概念
人类的眼睛是根据所看见的光的波长来识别颜色的。肉眼可识别的白色太阳光事实上是由多种
波长的光复合而成的全色光。
根据全色光各复合部分的波长（长波、中波和短波），可以将全色光解析为3种基本颜色，即红
（Red ）、绿（Green ）和蓝（Blue ）三原色光。
可见光中，绝大多数的颜色可以由三原色光按不同的比例混合而成。例如，当3种颜色以相同的
网页设计与制作（CS4中文版）从新手到高手
比例混合，则形成白色；而当3种颜色强度均为0时，则形成黑色。
2．色彩的属性
任何一种色彩都会具备色相、饱和度和明度3种基本属性。这3种基本属性又被称为色彩的3
要素。修改这3种属性中任意一种，都会影响原色彩其他要素的变化。
●
色相
色相是由色彩的波长产生的属性，根据波长的长短，可以将可见光划分为6种基本色相，即红、橙、黄、绿、蓝和紫。根据这6种色相可以绘制一
个色相环，表示6种颜色的变化规律。
在Photoshop 等图像处理软件中，通常用一种渐变色条来表示色彩的色相。
● 饱和度
饱和度是指色彩的鲜艳程度，
又称彩度、纯度。色彩的饱和度越高，则色相越明确，反之则越弱。饱和度取决于可见光波长的单纯程度。
在色彩中，六色色相环中的6种基础色饱和度最高，黑、白、灰没有饱和度。
● 明度
明度是指色彩的明暗程度，也称光度、深浅度。色彩的明度来自于光波中振幅的大小。色彩的明度越高，则颜色越明亮，反之则越阴暗。
在无彩色系中，明度最高的是白色，而最低的是黑色。在有彩色系中，明度最高的是黄色，最低的是紫色。
3．色彩模式
自然界中的颜色种类繁多，单纯以颜色的名称来表示颜色是无法适应平面设计及工业生产需要的。因此，人们引入了色彩模式的概念。
色彩模式是表示色彩的方法。在不同的应用领域里，表示色彩的方式也有很大区别。在平面设计领域，常用的色彩模式主要分为两种，即
RGB 色彩模式和CMYK 色彩模式。
● RGB 色彩模式
RGB 色彩模式主要是应用于输出CR T 显示器的一种色彩模式，其采用加法混色法，以描述各种
可见光在颜色中占据的比例来分析色彩。RGB 色彩的基准是光学三原色（红、绿和蓝）。
提示
所
有网页设计领域中的色彩，都是以R G B 色彩模式表现的。例如，常见的#R R G G B B
以及数字表示法，都是根据R G B 三原色的强度实现的。
● CMYK 色彩模式
CMYK 色彩模式是主要应用于印刷品的一种色彩模式。其原理是根据印刷时使用的四色油墨混合的比例实现各种色彩，因此属于减法混色法。
提示
油
墨4种颜色分别为青色（C yan ）、洋红
色（M agenta ，又称品红色）、黄色（Yello w ）、黑色（B lack ，为与R G B 的蓝色区分而使用最后一个字母K ）
。C M Y K 常用每种
颜色
深度的百分比来表示。
4．Web 216安全色
在早期各种浏览器中，图像的颜色显示方式并不统一，同样一种颜色在不同的网页浏览器中可能会显示不同的颜色。
为了保证网页基本的色彩显示，人们规定了
216种颜色的显示方法，这216种颜色以同样的效果在任意的浏览器中不会造成色彩的错乱，被称为“安全的”颜色，即Web 216安全色。
网页的设计与开发是一项复杂的工程，在设计与开发的过程中可使用多种技术。总体而言，网页
的设计与开发可分为前台技术和后台技术两大类。 1．前台技术
前台技术是指在整个网站体系中，用于实现显示层的技术，或者面向网站用户的技术。目前应用于前台的技术包括如下几种。
● XHTML 技术
XHTML （eXtensible Hyper T ext Markup Language ，可扩展的超文本标记语言）是由HTML 语言发展起来的一种标记语言。
在W3C 的网页标准化体系中，XHTML 属于网页的结构技术。
● CSS 技术
CSS （Cascading Style Sheets ，层叠样式表）是一种数据表文件，在该类数据表中，存储了网页结构语言的各种样式，以及显示方式等内容，并通过表的ID 、标签以及类等选择器供XHTML 调用。
在W3C 的网页标准化体系中，CSS 属于网页的表现技术。
● ECMAScript 技术
ECMAScript 技术是由ECMA 国际（European
Computer Manufacturers Association International ，欧洲计算机制造商协会，一个由各厂商组成的国际商业化标准组织）制定的标准化脚本语言，其前身
为JavaScript 脚本语言。
ECMAScript 脚本语言包含多种子集，例如，微软的JScript 和https://www.doczj.com/doc/fb16313788.html, 、Adobe 的ActionScript 以及Digital Mars 的DMDScript 等。
在W3C 的网页标准化体系中，ECMAScript 属于网页的行为技术。
● Ajax 技术
Ajax （Asynchronous JavaScript and XML ，异步JavaScript 与XML ）是一种由JavaScript 脚本语言扩展而来的网页前台开发技术。
Ajax 允许客户端进行简单的数据处理，并与服务器端进行异步通信，因此可以在不刷新页面的情况下维护数据，减小了服务器程序的负担，并提高了页面的执行效率，降低了网络带宽的占用。
● E 4X 技术
E4X （ECMAScript for XML ，ECMAScript 对XML 的扩展）是一种ECMAScript 的扩展技术。其提供了一种更直观、语法更简洁的DOM 接口，帮助ECMAScript 代码访问XML 数据，实现更快
网页设计与制作（CS4中文版）从新手到高手
的访问速度及更好的支持。
● 切片技术
切片技术是应用于网页图形处理的一种技术，其最早出现于Adobe 公司的ImageReady 软件中，可将整张图片切割为几张图片，并输出一个网页，将图片作为网页表格或层中的内容。
切片技术的出现，提高了平面设计转换为网页设计的效率。目前，可以使用切片技术的图像处理软件包括Photoshop （ImageReady 目前已被整合到Photoshop 中）、Fireworks 、Illustrator 以及CorelDRAW （C orelDRAW 中称为裁切工具）。
2．后台技术
后台技术是指在整个网站体系中，用于实现控制层或模型层的技术，或者面向网站数据管理的技术。目前应用于后台的技术包括如下几种。
● ASP 技术
ASP （Active Server Pages ，动态服务网页）是微软公司开发的一种由VBScript 脚本语言或JavaScript 脚本语言调用FSO （File System Object ，文件系统对象）组件实现的动态网页技术。
ASP 技术必须通过Windows 的ODBC 与后台数据库通信，因此只能应用于Windows 服务器中。ASP 技术的解释器包括两种，即Windows 9X 系统的PWS 和Windows NT 系统的IIS 。
● ASP.NE T 技术
https://www.doczj.com/doc/fb16313788.html, 是由微软公司开发的ASP 后续技术，其可由C#、https://www.doczj.com/doc/fb16313788.html, 、Perl 及Python 等编程语言编写，通过调用System.Web
命名空间实现各种网页信息处理工作。
https://www.doczj.com/doc/fb16313788.html, 技术主要应用于Wi ndows NT 系统
中，需要IIS 及.NET Framework 的支持。通过Mono 平台，https://www.doczj.com/doc/fb16313788.html, 也可以运行于其他非Windows 系统中。
提示
虽
然A SP.N ET 程序可以由多种语言开发，但是最适合编写A SP.N ET 程序的语言仍然是C #语言。
● JSP 技术
JSP （JavaServer Pages ，Java 服务网页）是由太阳计算机系统公司开发的，以Java 编写、动态生成HTML 、XML 或其他格式文档的技术。
JSP 技术可应用于多种平台，包括Wi ndows 、Linux 、UNIX 及Solaris 。
JSP 技术的特点在于，如果客户端第一次访问JSP 页面，服务器将现解释源程序的Java 代码，然后执行页面的内容。因此速度较慢。
而如果客户端是第二次访问，则服务器将直接调用Servlet ，无需再对代码进行解析，因此速度 较快。
● PHP 技术
PHP （Personal Home Page ，个人主页）也是
一种跨平台的网页后台技术。其最早由丹麦人Rasmus Lerdorf 开发，并由PHP Group 和开放源代码社群维护，是一种免费的网页脚本语言。
PHP 是一种应用广泛的语言，其多在服务器端执行，通过PHP 代码产生网页并提供对数据库的读取。
Photoshop 是Adobe 公司开发的一款专业图形
图像处理软件。
1．Photoshop 概述
在图像处理领域中，Photoshop 是目前最流行的图像处理工具，其主要处理由像素（Pixels ）构成的数字图像，利用其编辑与绘图工具进行图片编辑工作。
Photoshop 除了导入和处理位图外，还能导入由CorelDraw 或Illustrator 创建的各种矢量图，并对矢量图进行处理。
在网页设计领域中，Photoshop 主要被用来进行网页制作前期的工作，包括处理网页所使用的各种图像、绘制各种按钮、图标以及制作网页模板，并通过切片工具将设计好的网页模板切割成网页。
2．Photoshop 新增功能
Photoshop 最新的版本为CS4（11.0，于2008年9月发布），新增了调整和蒙版面板，用于创建和编辑非破损蒙版的所有工具，快速调整特定的图像区域。
除此之外，Photoshop CS4还新增了3D 绘图与合成工具，允许用户直接在3D 模型上绘制图形，并将渐变图像转换为3D 图像。
标题栏与 菜单栏
插入面板
工作区
面板组
3．创建图像
与Dreamweaver 不同，Photoshop CS4没有欢迎屏幕。因此，使用Photoshop 创建图像，只能通过执行【文件】|【新建】命令或按Ctrl+N 组合键，打开【新建】对话框，通过该对话框来实现。
在【新建】对话框中，用户可设置图像的各种基本属性，如表所示。
网页设计与制作（CS4中文版）从新手到高手
续表
属 性 名
作 用
宽度 用户可在这里设置创建图像的宽度，同时选择不同的单位，例如像素、英寸、厘米、毫米、点、派卡及列等
高度 用户可在这里设置创建图像的高度，同时选择不同的单位 分辨率 用户可在这里设置创建图像的分辨率，单位可以为像素/英寸或像素/厘米
颜色模式
用户可在这里设置创建图像的颜色模式，包括位图（黑白双色）、灰度（自8位到32位）、RGB 颜色（自8
位到32位，主要用于屏幕显示）、CMYK 颜色（8位和16位，主要用于印刷）以及色彩最丰富的Lab 颜色（8位和16位，主要用于数码摄影与相片处理）等
续表
属 性 名
作 用
背景内容
用户可在这里设置创建的图像背景颜色，可选择白色、背景色及透明等3种
颜色配置
文件 用户可在这里设置Photoshop 管理颜色的规则，不同的颜色模式需要使用不同的颜色配置文件。例如，RGB 颜色可使用Adobe RGB 或sRGB IEC61966—2.1等
像素长宽比 用户可在这里设置每个像素点的具体形状，包括普通正方形及各种长宽比的矩形（主要用于输出宽频显示器等）
存储预设 单击这个按钮，用户可将目前设置的属性存储起来，并设置一个名称。在下次创建图像时通过【预设】属性调用
删除预设 单击这个按钮，可删除【预设】属性中选择的属性
Dreamweaver 是Macromedia （现被Adobe 公司收购）开发的一款强大的所见即所得网页设计与开发工具。
1．Dreamweaver CS4新增功能
在网页领域，Dreamweaver 是目前最流行的网页设计与开发工具之一。
Dreamweaver 目前最新版本CS4（10.0，于2008年9月发布），支持将PSD 文件作为智能对象导入
网页，并使网页中的图像随智能对象的改变而更新；同时，增强了代码提示引擎的功能，方便用户编写各种脚本程序。
在Dreamweaver CS4中，还新增了实时视图工具，通过Presto 引擎模拟网页浏览器，执行各种网页脚本，大幅提高了网页脚本开发和调试的 效率。
另外，Dreamweaver CS4还可以方便地编写各种XML 、JavaScript 、CSS 、ActionScript 以及XSL T 文档，并和Flash 、Fireworks 等软件一起加入了AIR 编写功能。用户可使用Dreamweaver 开发富互联网应用程序。
提示
使
用D ream weaver 开发AIR 应用程序，需要安装D ream weaver 的AIR 插件。在AIR 体系中，D ream weaver 主要用来制作M X M L 数据文档和AIR 结构化文档。
Dreamweaver CS4使用了全新的用户界面，大
幅改良了工作区布局工具，用户可根据网页开发的需要，选择不同的工作区布局方式，最大限度提高工作效率。
Dreamweaver 支持通过两种不同的方式创建网页文档，并支持创建多种不同的文档格式。
● 通过欢迎屏幕
在打开Dreamweaver 之后，在Dreamweaver 的工作区会显示一个欢迎屏幕，并提供新建的文档类型列表。用户可直接单击列表中的项目，创建HTML 网页文档。除了HTML 文档以外，Dream- weaver 还可以创建多种与网页有关的文档。例如，ColdFussion 文档、PHP 文档、由VBScript 编写的ASP 文档、XSL T 样式表、CSS 样式表、JavaScript 脚本、XML 数据文档等。
2．创建网页文档
如果文档类型列表中并未包含用户所需要的类型，则用户可单击【更多】按钮，打开
【新建文档】对话框，在【新建文档】对话框的选
项卡中选择更多的文件类型。
● 执行【文件】命令
除了通过欢迎屏幕以外，用户还可以执行【文件】|【新建】命令（或按Ctrl+N 组合键），直接打开【新建文档】对话框，在对话框中选择相应的选项卡，并设置【页面类型】列表和【布局列表】等列表项，单击【创建】按钮，完成文档的
创建。
在【新建文档】对话框中可选择5种网页文档类型，如表所示。
3．保存网页文档
在使用Dreamweaver 创建和编辑网页之后，可以执行【文件】命令，在弹出的菜单中选择相应的命令保存网页，如表所示。
网页设计与制作（CS4中文版）从新手到高手
Flash 是（Macromedia ，后被Adobe 收购）开发的一种矢量动画及多媒体开发工具。
在动画制作领域，Flash 是一种易上手且功能强大的2D 矢量动画制作软件，由于其制作的动画体积小、效果丰富，且支持脚本控制，因此被大量应用于互联网中。
Flash 允许用户通过时间轴、元件、补间、形状等方式制作动画，也允许用户使用ActionScript 脚本代码绘制图形和创建各种动画。
1．Flash 新增功能
Flash 最新的版本为CS4（10.0，于2008年9月发布），相对之前的版本，
Flash CS4的补间动画不再由时间轴和关键帧组成，而是完全由动画对象创建。
同时，Flash CS4还增加了动画编辑器功能，允许用户直接对补间动画的运动轨迹等属性进行
操作。
另外，Flash CS4还集成了3D 变形和反向骨骼工具，增强了字体引擎，并增加了直接发布AIR 文件的功能。
2．创建和保存影片
Flash 与Dreamweaver 类似，在打开Flash CS4时，同样会打开Flash 欢迎屏幕。因此，在创建Flash
影片时同样可使用两种方法。
用户既可通过欢迎屏幕中的新建影片文档列表创建各种Flash 文档，也可以执行【文件】|【新建】命令或按Ctrl+N 组合键，打开【新建文档】对话框，通过该对话框创建新的文档。
保存Flash 影片的方式与保存网页也十分类似，都允许用户将已制作的影片保存为独立的文件、另存一份副本，以及保存成为模板等。
网页设计不仅是一门实用技术，更是一门创造性的艺术。其是一个感性思考与理性分析相结合的过程。
网页设计不仅依赖于各种平面设计软件和网页制作软件，更依赖于网页设计者的独立思考。
1．网页设计的任务
在设计网页时，需要首先了解网页设计的任务以及网页设计的最终目的。
网页设计是艺术创造与技术开发的结合体。其任务是吸引用户，为用户创造良好的体验，在此基础上为网页的所有者提供收益。任何网页设计的行为，都是围绕这一最终目的进行的。
在设计网页时，
可将网页根据网页的内容，即网页为用户提供的服务类型分为3类。并根据网页的类型设计网页的风格。
● 资讯类站点
资讯类站点通常是比较大型的门户网站。这类网站需要为用户提供海量的信息，在用户阅读这些信息时寻找商机。
在设计这类站点时，需要在信息显示与版面简洁等方面找到平衡点，做到既以用户阅读信息的便捷性为核心，又要保持页面的整齐和美观，防止大量的信息造成用户视觉疲劳。
在设计文本时，可着力对文本进行分色处理，将各种标题、导航、内容按照不同的颜色区分。同时要对信息合理分类，帮助用户以最快的速度找到需要的信息。
以美国最大的在线购物网站亚马逊的首页
为例。其在设计中，使用了较为传统的“国”字型布局。
其网站的3类导航使用了3种字体颜色，在同一板块内的导航标题使用橙色粗体，而导航内容则使用普通的蓝色字体。在刺激用户感官的同时避免视觉疲劳。
在亚马逊首页中，每一条详细信息都保证有一张预览图片，防止大段乏味的文字使用户厌烦。
● 艺术资讯类站点
艺术资讯类站点通常是中小型的网站，例如一些大型公司、高校、企业的网站等。互联网中的大多数网站都属于这一类型。
这类网站在设计上要求较高，既需要展示大量的信息，又需要突出公司、高校和企业的形象，还需要注重用户的体验。
设计这类网站时，尤其需要注意图像与文字的平衡，背景图像的选用以及整体网站色调的搭 配等。
在这类网站的首页不应放置过多的信息。清晰
有效的分类远比铺满屏幕的产品资料更容易吸引用户的注意力。
网页设计与制作（CS4中文版）从新手到高手
以著名的软件和硬件生产商苹果为例，其首页设计上以追求简洁为主，以简明的导航条和大片的留白给用户较大的想象空间。
苹果公司在网站设计上非常有心得，其擅长使用简单的圆角矩形栏目和渐变的背景色使网站显得非常大气，对一些细节的把握也非常到位。
● 艺术类站点
艺术类站点通常体现在一些小型的企业或工作室设计中。这类网站向用户提供的信息内容较少，因此设计者可以将较多的精力放在网站的界面设计中。
上图为俄罗斯设计师foxie 的个人主页，通过大幅的留白以及简明的色彩模拟了一个书架，并以书架上的书本和相框作为导航条。
其在设计中发布的信息并不多，因此整站用Flash 制作而成，大量使用动画技术，通过绚丽的色彩展示个性。
2．网页设计的实现
在了解了设计的目的后，即可着手进行设计。网页设计是平面设计的一个分支，因此在设计网页时，有一定的平面设计基础可以帮助设计者更好更快地把握设计的精髓。
● 设计结构图
首先，应规划网站中栏目的数量及内容，策划网站需要发布哪些东西。
然后，应根据规划的内容绘制网页的结构草图，这一部分既可以在纸上进行，也可以在计算机
上通过画图板、inDesign 或者其他更专业的软件 进行。
结构草图不需要太精美，只需要表现出网站的
布局即可。（关于布局，请参考本章之前的内容。）
● 设计界面
在纸上或电脑上绘制好网页的结构图之后，即可根据网站的基本风格，在计算机上使用Illustrator 或CorelDRAW 等矢量图形软件或Photoshop 、
Fireworks 等位图处理软件绘制网页的Logo 、按钮和图标。
Logo 、按钮、图标等都是网页界面设计的重
要组成部分。设计这些内容时需要注意整体界面的风格一致性。包括从色调到图形的应用、圆角矩形与普通矩形的分布等。
其中，设计Logo 时，可使用一些抽象的几何图形进行旋转、拼接，或将各种字母和文字进行抽象变化。例如，倾斜、切去直角、用线条切割、连接笔画、反色等。
按钮的设计较为复杂。常见的按钮主要分为圆角矩形、普通矩形、梯形、圆形以及不规则图形等。
在网页中，水平方向导航菜单的按钮设计比较随意，可以使用各种形状。而垂直方向的导航菜单
则多使用矩形或圆角矩形，以使各按钮贴得更加紧密，给用户以协调的感觉。
图标是界面中非常重要的组成部分，可以起到画龙点睛的作用。在绘制图标时，需要注意图标必须和其代表的内容有明显的联系。
例如，多数网站的首页图标都会绘制一栋房子，而多数网站的联系方式图标都是电话、信纸等
通信的方式，这样的图标会使用户一眼看出其
作用。
而如果使用过于抽象的图标，则容易被用户误解，或影响用户使用网站的功能。
● 设计字体
字体是组成网页的最主要元素之一。合理分配的字体可以使网站更加美观，也更便于用户阅读。
在设计网页的字体时，应先对网页进行分类
处理。
对于多数浏览器和操作系统而言，汉字是非常
复杂的文字，多数中文字体都是无法在所有字号下
正常清晰显示的。 以宋体字为例，10px 以下的宋体通常会被显示为一个黑点（在手持设备上这点尤为突出）。而20px 大小的宋体，则会出现明显的锯齿，笔画粗细不匀。
即使是微软设计的号称最清晰的中文字体微软雅黑，也无法在所有的分辨率及字号下清晰地 显示。
经过详细的测试，中文字体在12px 、14px 、16px （最多不超过18px ）的字号下，显示得最为
清晰美观。
因此，多数网站都应使用12px 大小的字体作为标准字体，而将14px 的字体作为标题字体。在
设计网页时，尽量少用18px 以上的字体（输出为图像的文本除外）。
在字体的选择上，网站的文本是给用户阅读的。越是大量的文本，越不应该使用过于花巧的 字体。
如针对的用户主要以使用Windows XP 系统和纯平显示器为主，则应使用宋体或新宋体等作为主
要字体。如果用户是以使用V ista 系统和液晶显示器为主，则应使用微软雅黑字体，以获得更佳的 体验。
注意
在
中文文本的设计中，应尽量避免使用斜体。虽然作为拉丁字母中常见的一种表现形式，斜体的使用频率非常高，但是在中文中，几乎所有中文字体都无法以斜体的方式正常显示。使用斜体的后果就是降低用户阅读的舒适性。
● 制作网页概念图
在设计完成网页的各种界面元素后，即可根据这些界面元素，使用Photoshop 或Fireworks 等图像处理软件制作网页的概念图。
网页概念图的分辨率应照顾到用户的显示器
分辨率。针对国内的用户的显示器设置，大多数用
户使用的都是17英寸甚至更大的显示器，分辨率
大多为1024×768以上。去除浏览器的垂直滚动条
后，页面的宽度应为1003 px 。高度则尽量不应超
过屏幕高度的5倍到10倍（即620×5=3100 px 到
6200 px 之间）。
提示
如
果有条件的话，还应该针对多种分辨率的人群（例如，宽屏显示器的1440×960、上网本的1280×720，老旧的台式机或笔记本的800×600，以及各种手持设备的720×480）设计多种概念图。针对各种用户群体进行界面设计。
网页设计与制作（CS4中文版）从新手到高手
概念图的作用主要包括两个方面。
一方面，设计者可以为用户或网站的投资者在网页制作之前先提供一份网页的预览，然后根据用
户或投资者的意见，对网页的结构进行调整和 改良。
另一方面，设计者可以根据概念图制作切片网页，然后再根据切片快速为网站布局，提高网页制作的效率。
提示
切
片是Photoshop 和Firew orks 共同拥有的一种图像切割工具。其可以将Photoshop 或Fireworks 制作的各种图像根据用户绘制的切片线或参考线切割成小块，然后将这些小块以表格或div 容器的方式输出为网页。
● 切片的优化
切片的优化是十分必要的。优化后的切片，可以减小用户在访问网页时消耗的时间，同时提高网页制作时的效率。
对于早期以调制解调器用户为主的国内网络而言，需要尽量避免大面积的图像，防止这些图像在未下载完成时网页出现空白。通常的做法是通过
切片工具将图像切为多块，实现分块下载。
然而随着网络传输速度的发展，用户用于下载各种网页图像的时间已经大为缩短，请求下载图像的时间已超过了下载图像本身的时间。下载1张100KB 的图像，消耗的时间要比下载10张10KB 的图像更少。
因此，多数网站都开始着手将各种小图像合并为大图像，以减少用户请求下载的时间，提高网页的访问速度。
● 编写网页页面代码
在Photoshop 或Fireworks 中设计完成网页的概念图，并制作切片网页后，最终还是需要输出为XHTML+CSS 的代码。
网页技术的发展，使网页的制作越来越像一个系统的软件工程。从基础的XHTML 结构到CSS 样式表的编写，再到JavaScript 交互脚本的开发，
是网页制作的收尾工程。
● 优化页面
在设计完成网页后，还需要对网页进行优化，提高页面访问速度，以及页面的适应性。
设计者应按照Web 标准编写各种网页的代码，并对代码进行规范化测试。通过W3C 的官方网站验证代码的准确性。 同时，还应根据当前主流的各种浏览器（IE 6、IE 7、IE 8，以及Firefox 、Safari 、Opera 、Chrome 等）和各种分辨率的显示设备测试兼容性，编写CSS Hack 和JavaScript 检测脚本，以保证网页在各种浏览器中都可正常显示。
在互联网中，每一台主机都会被分配一个独立且唯一的
IP 地址。在IPv4（当前最常用的IP 地址编码规范）中，每个IP 地址都是由32位2进制数字组成，例如，0111 1100 0001 0001 0001 1010 1111 0011就是一个IP 地址。为了便于记忆，IP 地址还允许写成由小数点分隔的4段10进制数字，例如，之前的二进制IP 地址可以写成124.17.26.243。
相比32位二进制地址而言，4段十进制数字确实便于记忆。然而，即便只使用4段十进制数字，访问互联网中的主机仍然是一项很困 难的工作，人们不得不记住大量的数字。
为了帮助人们更方便地访问互联网中的主机，1983年，保罗〃莫卡派乔斯（Paul Mockapetris ）发明了DNS （Domain Name System ，域名解析系统）
，支持通过英文字母、数字与下划线的方式标识互联网中的主机。
全球有13台根DNS 主机，可以接收用户对这些标识的解析请求，并将这些标识转换为IP 地址。这种标识，就叫域名。域名的出现，免去了记忆IP 地址的麻烦，帮助人们更方便地访问互联网。
网页设计与制作（CS4中文版）从新手到高手
password 。
● port
主机的端口号。
根据TCP/IP 协议，每台计算机对外可以开放65536个端口，其端口号范围为0到65535。每个传输协议都有默认的端口号。例如，HTTP 协议的默认端口号为80。如果服务器端的端口号为默认端口，则访问此服务器时可将端口号省略。
● path
路径，由主机的目录及子目录组成。如访问主机中的默认文档（例如网站的index. html ）
，则可省略。 ● parameters
参数，用于指定特殊参数的可选项。例如，访问本地磁盘某个可执行程序，而该可执行程序允许添加win 参数以实现窗口化，则可通过横线添加参数，如下所示。
file://d:\app.exe -win
● query
查询的值，用于给一些动态网页传递参数。一个URL 地址可包含多个参数，但需要以逻辑与符号“&”连接。
● fragment 锚记符号，用于文件页面内的超链接跳转。使用该符号，可以直接跳转到某个文件的某一部分中，常用于网页。
这样的图像采样就被称为像素。通常1个像素就是一个微小的点或方块，每个像素都有独立的颜色值。计算机显示器上面的图像都是由大量像素构成的。
分辨率是测量显示系统对细节分辨能力的比率，包括图像分辨率、光学分辨率、显示分辨率等3类。在计算机显示领域，分辨率特指显示分辨率，即单位面积中包含的像素数量。
显示分辨率的单位有两种，即像素/英寸和像素/厘米。其中，常用的分辨率单位为像素/英寸，代表在显示器中，每平方英寸的面积内包含的像素数量。
在形容计算机的图像时，分辨率越大，则图像越清晰，但占用的磁盘空间也就越大。反之，分辨率越小，则图像越粗糙，占用的磁盘空间也就越小。
在网页设计领域，由于多数浏览器支持的分辨率仅为72像素/英寸，因此，设计网页图像时，使用72像素/英寸的分辨率就已足够。如果设计用于印刷，则需要设置分辨率为300像素/英寸。
根据颜色信息所需的数据位数，位图可以分为1、4、8、16、24及32位等级别。其中，1位的位图只包含黑色和白色两种颜色，4
的位图则可以包含2的4次方种颜色，以此类推。
位数越高，则代表图像的色彩越丰富。相应地，图像所占用的磁盘空间也就越大。通常称24位色的位图为真彩色位图。在网页中使
由于矢量图是纯粹由数学方程构成的图形，因此，将矢量图放大或缩小任意倍数，均不会发生图像失真的情况。
矢量图并非由像素构成，因此没有分辨率的概念。在多数情况下，保存矢量图需要较少