第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)
平面转立体,有丰富的动画,连续的声音,流畅的影像。