第3章 网站的规划与建设
[内容简介]（P117）
各类网站分析，网站建设的规划，网站建设的基本步骤，
基本技术实现方式
3.1 网站的基本概念
网站的基本组成：网页、网站资源。（P117）
3.1.1 网站的基本组成（P118）
网页、网页空间、网址、域名（国际域名、国内域名、虚拟域名）
3.2 网站的分类
一、政府网站（P119）
例如：首都之窗 http://www.beijing.gov.cn/ （课本彩页）
政府网站功能：动态信息发布（综合类、行业类、宣传类）、
在线调查、动态检索、网上办公、
数字地图
可以查询北京市，
公交线路，如31（新街口—清华大学—香山）；
公交车站，如清华大学（331，……）。
二、新闻性网站（P122）
三、企业网站（P122）
企业文化宣传，商品介绍，网上营销，技术支持。
四、搜索引擎网站（P123）
门户网站：用户上网浏览的第一个网站。
世界第一门户：雅虎 http://www.yahoo.com.cn/
国内第一门户：搜狐 http://www.sohu.com/
中文小说站点：全景中文小说 http://www.cnovel.com/
五、综合性服务网站（P125）
电子邮局：http://www.163.net
免费个人主页服务、免费个人电子邮箱。
六、教育类网站（P129）
网上教学
七、网上拍卖、购物等电子商务类网站 http://www.8848.com
八、个人网站
友情链接：文化教育、热门网站、图像动画、软件下载、
文艺体育、电影音乐、服装菜谱、游戏娱乐。
3.3 网站评析
1. 品评网站的网站（P130）
热讯品网：http://picknet.yesite.com
2. 评价分析网站的要点（P130）
网站的目标定位，版面的总体设计和栏目设置，
信息准确、及时，页面结构、导航系统，
网站浏览的速度，交互设计，网站扩展的前景。
案例1 CCTV网站评析（P131）
中央电视台互联网站 http://www.cctv.com
CCTV网络版的技术特点、版面特色、内容特点。
案例2 《北京青年》报网络版评析（P135）
版面设计、栏目设计、导航系统（友情链接进入其他网站）、
页面装饰。
案例3 华夏旅游网评析（P137）
华夏旅游网 http://www.ctn.com.cn
锦绣中华：景点介绍、景点地图、风俗民情。
网上预定酒店3—7折，网上订票7—9折。
3.4 网站建设的整体规划
* 网站的规划与建设（P141倒13）
(1)策划阶段：网站定位，确定网站主题与目标。
(2)设计阶段：（P142）
设计网站名称、网站标志、网站内容功能、网站结构。
(3)制作阶段：（P161）
用Java ASP C++开发设计网页。
(4)宣传推广阶段：（P390）
向亲朋好友推荐，在搜索引擎登记，在新闻组和BBS上作宣传……。
(5)运行维护阶段：（P389）
测试网络，网页的日常维护，网站的宣传推广，
网站的优化与更新，网站的备份与恢复。
3.4.1 网站主题
1.主题定位（P142）
文化教育、软件下载、网页网站、图像动画、
文艺体育、电影音乐、服装菜谱、旅游娱乐。
2.主题选择原则
小而精，发挥本身特点和优势。
3.4.2 网站名称的设计
合理、易记（6个字内）、有特色。例如：新浪网、搜狐、网易。
3.4.3 网站的视觉形象（P143）
网站的标志、标准色、标准字。
3.5 网站内容与功能的设计
3.5.1 确定访问者（P146）
网站的定位、网上调查、与同类网站比较。
3.5.2 确定网站的内容与功能
1.静态内容（P146）
网站内容相对不变的部分。例如：标志、栏目、广告。
2.动态内容：网站内容主体部分，经常更新。
3.网站内容的设计（P147）
能及时得到反馈信息，主页注明更新日期，网站内容结构清晰。
4.网站功能的设计（P149）
网站功能分类：信息查询、软件下载、技术支持、电子商务、
远程教育、网络出版。
5.确定网站的风格（P149）
背景颜色或图案、文本颜色。
6.建立网站的结构层次图（P150）
7.定义导航（P150）
全局导航元素5—7个，网站标志可作返回主页的导航。
导航目录（P150）
网站地图
完整的导航系统，网站逻辑结构，内容分类列表，构成 网站地图。
3.6 网站结构的设计
3.6.1 网站结构的设计原则
1.网站的物理结构（P153）
根据网站文件的功能、地位和逻辑结构建立目录结构。
按主菜单栏目建立目录，全局资源放根目录的公用目录中。
2.网站的逻辑链接结构（P154）
网页之间链接的拓扑结构，建立在目录结构基础上，
但可跨越目录结构。有树状、星状、混合链接。
3.7 网站建设的技术实现
3.7.1 域名的注册（P155）
国际顶级域名：.com .net .org .gov .edu
国内域名的注册：
中国互联网络信息中心 http://www.cnnic.net.cn
3.7.2 网站硬件、软件平台的选择
一、网站的组成（P155）
计算机、网络接入设备、操作系统、WWW服务器和主页面信息。
二、选择接入方式和接入设备（P157）
1.广域线路服务（P157倒13）
国内提供Internet接入服务的大互联网：
中国公用计算机互联网（ChinaNet）：
总带宽800GB，国际出口2GB；
中国教育和科研计算机网（CerNet）：
骨干网2.5GB，国际出口100MB。
3.Web服务器的选择（P159）
Web服务器：PC服务器，
网络操作系统：Windows NT/2000,
Web服务器软件：Office系列产品，
网站应用软件开发工具(P161):
VBscript,Javascript,ASP(Active Server Page)
3.10 网站技术环境的选择与运行方式的确定
3.10.2 运行方式的确定
1.独立运行方式（P166）
自建服务器，自管服务器。适用大学校园网站。
2.主机托管（P167）
网站服务器主机托给ISP保管。适用中、大型网站。
3.虚拟主机（P167）
ISP服务器硬盘空间划分为几个虚拟主机，
每个虚拟主机有域名、IP地址。适用小型网站。
4.互联网数据中心：IDC(Internet Data Center)
[内容简介]网页设计的美学原理和设计法则,
网页观感：色彩、文字、图像、导航、版面设计。（P170）
4.1 Web设计环境
4.1.1 Web的技术环境
1. 浏览器技术（P171）
浏览器语法分析程序—解释HTML文件标识标签—
浏览器界面显示结果。
采用可兼容技术，或最新技术，或声明浏览器技术。
2. 屏幕分辩率技术（P173）
考虑用户的屏幕分辩率640*480、800*600、1024*768，
自动收缩页面用百分比设定表宽。
3. 带宽技术（P174）
要求网页下载<20秒，减少图形、动画、图形<15kB。
4.1.2. Web页的媒体环境
网页屏幕显示的考虑。（P175）
屏幕是横向、用浅底深字或深底浅字、
访问信息路径、用户的网页观感。
4.1.3 Web的设计流程
设计步骤（P177）
1.网站性质
公告牌：商业产品在线手册。
电子商务和在线购物；
产品支持：产品信息、升级、故障维修建议、文献资料、
在线指导。
2.网站用户、网页结构和框架
3.网页测试：不同机器、浏览器、不同速度。
4.2 Web设计元素
4.2.1 色彩
一、色彩基础
1.色彩的属性（P179）
黑白、彩色：色相、饱和度、明度。
色相：红、绿、蓝
| 红 | 绿 | 蓝 |
饱和度：背景用深色、文字用浅色
| 浅底深字 | 深底浅字 |
明度：
| 黄色高亮 最敏感 |
绿色 最敏感 |
紫色低亮
|
2.三原色（P180）
光的三原色：红绿蓝
| 红 | 绿 | 蓝 | 三原色合成白光 |
色素三原色：红黄蓝
| 红 | 黄 | 蓝 | 三原色合成灰色 |
4.色环(P181)
| 红色 暖色 |
黄色 暖色 |
绿色 中性 |
蓝绿 冷色 |
蓝色 中性 |
5.色环（24色）
同类色协调，邻近色和谐，对比色对比效果强，
互补色对比效果最强（红绿、黄紫）
| 红底绿字 | 绿底红字 | 黄底紫字 | 紫底黄字 |
二、色彩感觉
1.心理感受（P182）
冷暖、轻重、
软硬：饱和度低感觉柔和
积极消极：暖色、冷色
2.颜色联想（P182）
红色：热情奔放
绿色：宁静安全
蓝色：蓝天清凉
三、色调和色彩搭配（P183）
1. 色调：明度+饱和度
2. 配色：红绿色搭配对比更强。
四、计算机色彩（P185）
1. 显示器的色彩：RGB（红绿蓝）
|
|
白色 |
红色 |
绿色 |
蓝色 |
黑色 |
|
HTML |
color(255,255,255) |
color(255,0,0) |
color(0,255,0) |
color(0,0,255) |
color(0,0,0) |
|
十六 |
color(FFFFFF) |
color(FF0000) |
color(00FF00) |
color(0000FF) |
color(000000) |
2. 色深：能显示的，或文件中的颜色数。
例如：VGA显示模式，RGB每个通道8位，色深=8*3=24，
能显示颜色=2^8=256色
高彩色16位，能显示颜色=2^16=64k色
真彩色24位，能显示颜色=2^24=16M色
图像文件色深：GIF格式8位256色，真彩图像24位16M色。
3. 混色：用已有的颜色混合代换丢失的颜色。
4. 网络安全色：
各种显示器和常用的操作系统都能安全显示的颜色（216种）
4.2.2 文本
一、字体和字号（P192）
标题：用粗宋体、黑体、4号（14pt)；
正文：用细宋体、无衬线英文，识别快，2号（10pt)。
二、特殊字体（P199）
用Photoshop创建GIF、JPG图形文本。
4.2.3 图像和VI设计
一、网页图像和文件格式（P200）
1. 位图：像素组成图像，每个像素有位置、颜色值。
矢量图：直线和曲线组成。
2. 图像文件格式（P200）
GIF格式：图形交换格式，色深8位，256色；
JPG（JPEG）格式：联合图像专家小组，24bit真彩色。
压缩JPEG图像：质量取7，压缩比1/10到1/20。
BMP位图格式：Windows中的标准图像文件格式。
TIF格式：存储扫描图像。
TGA格式：显示卡图像文件格式。
3. Web图像的应用（P203）
例：50kB的网页下载时间=50kB/5kbps=10s
三、网页中的图像（P205）
照片类图像：用数码相机、扫描照片；
绘画类图像：手工绘画、软件制作。
四、网页中的图像编排（206）
图片形状：全景、去底、“出血”；虚实变化。
五、视觉标识设计（VI）
视觉识别：Visual Identity，网站VI形象的四个方面。
1. 网站标志（P209）
人物、动物、花草、汽车方向盘、
网站名、文字动画、图像动画
2. 网站标准色彩（P210）
只选一种，应用时以标准色为中心。
3. 网站标准字体（P210）
用于标志、标题、主菜单。
4. 网站广告词
4.2.4 动画
一、Web动画的发展状况
1. GIF动画（P212）
多个静态图像存储到GIF89a格式文件中，在浏览器上顺序播放，
产生动态的效果。无交互性和逻辑分支控制，无法合成声音。
2. Java动画（P214）
Java跨平台的程序设计语言，设计基于Internet的、
交互式的Applet应用程序。
3. Flash动画（P212）
矢量式，放大保持清晰，采用“流”(streaming)技术，
文件数据打包，逐包下载，边下载边播放。
但要安装插件(Plug-in)。
三、动画原理（P216）
帧速率（fps）：每秒播放帧数，GIF：15fps,电影：24fps。
4.2.5 视频和音频
一、音频
1. 网上音乐的格式（P219）
MIDI格式：音乐设备数字接口，可作网站的背景音乐。
电子音乐合成器：按时间顺序记录使用的乐器、开始音符、
结束音调、伴奏。不能记录和播放人声。
RA格式（RealAudio）：音频流，实时传送音频，边下载边播放。
MP3格式：WAV音乐文件可压缩到1/10。
WAV格式：保存Windows平台的音频。
二、频视（P221）
MOV、AVI、
RM（Real media)：包括音频流RealAudio和视频流RealVideo.
网页中的视频：链接、嵌入（边下载边播放）。
4.2.6 导航和交互设计
交互：互相作用、互相交流。互动方式解决信息传达和可选择性。
一、人机交互的常用方式（P224）
问答式、菜单式、功能键、图符、查询语言界面、自然语言界面。
菜单层数：菜单交互功能深度。
菜单宽度：同层中菜单项总数。
二、人机交互的特性（P226）
简易性（让计算机多做工作）、友好性（主观操作简单交互容易）
灵活性、明确性、一致性、容错性、反馈性、图形化。
三、超链接设计
1. 超文本：非顺序、通过超文本链接起来，
按用户的顺序和方式浏览信息。（P230）
2. 导航栏：放置在固定位置的超链接。（P231）
网站地图：以图形的方式显示站点中所有的页面和部分。
导航问题：位置、去向、路径、返回。
3. 网页信息组织（P232）
文件拆分再链接、长网页翻页不能超过3次。
4. 合理的导航链接（P233）
导航栏放置在页面的固定位置，图形链接要附加文本链接，
重复使用图形减少下载时间
5. 链接页面的导航选项（P235）
链接至各主要页面，链接至各章顶端，
从目录页至各章，从目录页至各章的主题，
前后翻页，从各章到各主题，
使用上下文链接到相关内容。
4.3 Web页面设计
4.3.1 版式设计基础
* 版式设计原则（P237）
1.主题鲜明，形象突出
2.便于阅读，形式美观
3.编排有序，布局合理
一、平面构成基础
版面基本要素：点、线、面、体、空间、色彩。（P237）
潜在的结构：版面由四线、四角组成的平面空间。（P238）
点的结构：放射力。（P239）
线的结构：直线坚硬，明确，男性气质；
曲线优雅、柔和，女性象征。（P240）
面的结构：面是点的密集与放大，是线的加强与重复。（P242）
二、版面设计的形式法则（P243）
比例、均衡、对比统一、节奏韵律、虚实空白。
比例与尺度：宽度/高度=4/3
4.3.2 Web综合设计
一、网页布局（P246）
1. 限定的面积范围内，合理安排布置图形、图像和文字的位置。
2. 页面主要包含：网站标志、主菜单、栏目条、广告位、
搜索器、计数器
3. 网页外形尺寸：17寸显示器800*600点。网页宽应<800点。
4. 版面布局样式（P250）
“T”字型、“口”字型、“三”字型、“川”字型、自由型。
| 网站 标志 |
总导航 | 菜单 | |||
| 次
级 导 航 |
内容 | 二
级 栏 目 条 |
内容 | 链
接 栏 目 |
|
| 广告 | |||||
二、首页的设计（P253）
1. 书籍封面式首页：点击主页的唯一的链接后才进入网站。
2. 期刊杂志式首页：主页有站点全部内容的目录索引。
3. 报纸式首页：查找速度快、操作简单。
4.3.3 Web设计的未来
未来网页设计的发展（P255）
平面转立体，有丰富的动画，连续的声音，流畅的影像。