1
第 1章 网页设计与网页文件规划
学习目标
? 如何给网站定位
? 网站设计原则
? 网站建立步骤
? 域名的相关知识
? 网页文件如何规划
? 了解常用网页制作工具和网页编程语言
2
第 1章 网页设计与网页文件规划
教学内容
1.1 定位网站的系统, 类别和形象
1.2 网站建立步骤
1.3 网页规划和步骤
1.4 网页制作工具
本章小结
返回总目录
3
1.1 定位网站的系统、类别和形象 —— 定位网站的系统
在因特网飞速发展的今天，网络技术和与之相应
的建立网站、制作网页，已经成为最吸引人的技术。
从网站功能考虑，网站系统可以划分为以下方向：
1．辅助政府部门进行国家管理。
2．为新闻和宣传提供平台。
3．为商业活动提供交易平台。
4．为科研和学术交流服务。
5．没有任何商业目标的公益性网站和个人爱好网
站。
返回目录
4
1.1 定位网站的系统、类别和形象 —— 定位网站的类别
网站的类别比较繁杂，从信息流转和提供
服务的方式出发，可以分为以下几类：
1．门户类网站
2．信息发布类网站
3．电子商务类网站
4．资源服务类网站
5．娱乐游戏类网站
6．远程教育和医疗诊断类网站
返回目录
5
1.1 定位网站的系统、类别和形象 —— 定位网站的形象
衡量网站建设是否成功，一个重要指标是该站点的
访问量，准确的形象定位对于提高网站的点击率至关
重要。网站形象是指它主要侧重的内容和功能。
1．人们感兴趣的网站内容通常有：
（ 1）新闻（包括时事新闻、体育新闻、财经新闻、
娱乐新闻等）。（ 2）求职、招聘、交友、征婚信息。
（ 3）计算机软件和硬件信息。（ 4）科教医疗信息。
（ 5）金融证券信息。（ 6）商贸信息和各类广告。
（ 7）休闲、旅行、娱乐信息。
（ 8）电子书籍和影视。
返回目录
6
1.1 定位网站的系统、类别和形象 —— 定位网站的形象
2．人们感兴趣的网站功能通常有：
（ 1）搜索引擎和信息查询。
（ 2）电子邮件和免费电子信箱。
（ 3）免费个人主页空间。
（ 4）软件的上传与下载。
（ 5）网上聊天室、新闻组,BBS、发送短信。
（ 6）实时股票信息和网上股票交易服务。
（ 7）网上游戏娱乐。
（ 8）网上商务活动、网上购物、网上结算。
返回目录
7
1.1 定位网站的系统、类别和形象 —— 了解网站设计原则
设计网站有下面一些基本原则：
1．内容明确
2．抓住用户
3．点击规则 —— 对于小型网站，主页上任何一条信
息点击次数不超过 3次，被称为 3次点击规则。对
于大型网站，可使用导航和工具条来改善操作。
4．学习 HTML
5．优化网站构架
6．避免使用特殊字体，尽量减少图片
7．避免长文本和错别字
返回目录
8
1.2 网站建立步骤 —— 了解网站费用
网站费用由建站费用和运作费用产生，包含以下
几个方面：
1．域名费用 —— 域名分级别，不同级别的域名收
费是不同的。
2．服务器硬件设备费用 —— 一个网站的硬件至少
包括计算机和网络接入设备，这笔费用应根据网
站规模而定，不必过分铺张。
3．系统软件费用和开发维护费用
4．网站的市场推销费用和经营费用 —— 要提高自
己的市场份额，应加强宣传并提高服务质量，
这笔费用是应该考虑的。
返回目录
9
1.2 网站建立步骤 —— 网站的结构
网站的逻辑结构由四部分组成,
1．服务器部分 —— 包括计算机硬件、操作系统、
WWW程序、电子邮件程序等。
2．网络接入部分和网络安全系统 —— 包括 路由
器、调制设备和网络安全系统 。
3．数据存贮部分和中间件 —— 数据存贮存 系统要
有海量存贮能力，高速搜索能力，有效的数据采
集、制作和发布能力。中间件介于服务器系统和
数据存贮系统之间。
4．研发和维护部分 —— 此部分贯穿于网站从建立
到消亡的全过程，需要专人负责。
返回目录
10
1.2 网站建立步骤 —— 申请域名
域名是网站在因特网上的门牌号码，也可看作网站
在因特网上的商标，只有知道了域名才能访问网站。
域名的命名基于 IP地址层次化的主机命名方式，由 26
个英文字母,10个阿拉伯数字、减号和下划线组成，
用圆点分隔成几节，字母不区分大小写。域名应选择
简短、有意义、容易记的单词。域名有惟一性。域名
可以进行交易，买卖或过户。
域名分级别，从右向左依次为最高级（也称顶级）、
次高级等，最左边为主机名。
顶级域名有 2类：机构域和地理域。机构性域名由
三个字母组成，地理性域名由两个字母组成。见表 1和
表 2。
返回目录
11
1.2 网站建立步骤 —— 申请域名
域 名 类 型
.com 商业性的机构或公司
.org 非盈利的组织、团体
.gov 政府部门
.mil 军事部门
.edu 教育部门
.net 从事与因特网相关的网络服务机构或公司
表 1 机构域
返回目录
12
1.2 网站建立步骤 —— 申请域名
域 名 国家和地区
.cn 中国
.hk 中国香港
.tw 中国台湾
.jp 日本
.uk 英国
.us 美国
表 2 地理域
返回目录
13
1.2 网站建立步骤 —— 接入 Internet的方式
接入因特网的方式通常有三种：
1．专线接入 —— 花费较大但优势明显，
一线多用，提供的服务内容也多。
2．服务器托管 —— 将 Web服务器由其他网
络公司托管，费用比第一种接入方式低
的多，但需要远程维护，技术要求高。
3．虚拟主机 —— 租用某些 ISP（ Internet Service
Provider）的剩余磁盘空间，这些空间一般允许
个人网站免费使用，节省了购买服务器的费用，
但需要远程管理，受到的限制也比较多。
返回目录
14
1.2 网站建立步骤 —— 网站服务器设备
选择服务器要综合考虑各方面因素，如：价格、性
能、安全性、可扩展性。
1．单从价格出发，应首先考虑 PC服务器,PC服务
器又分工作组级、部门级和企业级三档，价格各不相
同，可根据网站规模确定使用何种级别的 PC服务器。
2．单从性能出发,Unix服务器占有一定优势，是
高端系统的首选。
3．如果选择 PC服务器，操作系统一般为：
Windows NT或 Windows 2000或 Linux。如果选择小型
机为服务器设备，一般使用 Unix为平台。
返回目录
15
1.3 网页规划和步骤 —— 网页文件规划
网页文件规划要遵循三个基本原则：内容、速度和
页面美观，其中内容最重要。
1．规划主页
严格来说，主页（ Home Page）和网页（ Web
page）是两个不同概念，主页是指登陆到网站后看到
的第一个页面。主机上默认首页名称是固定的，不能
随便起，要符合根据远程服务器的要求，通常为
index.htm或 index.html或 default.htm或 default.html。
主页的一个重要的功能是导航，利用超链接指引用
户查询保存在网址或其他位置的信息，超链接层数不
能太多，最好以关键字或词语形式查询信息。
返回目录
16
1.3 网页规划和步骤 —— 网页文件规划
2．设计网站标志 (logo)
网站标志就如同商品的商标一样，是站点特色和
内涵的集中体现，好的标志能让人看见 logo就联想到
拥有该标志的网站。标志可以是汉字、英文字母、动
物或人物的符号、图案等。
3．设计网页的色彩
视觉冲击是网站给人的第一印象，好的色彩搭配
能体现网站形象，延伸网站内涵，还能直接影响访问
者的情绪。通常，网站的主要色彩不要超过 3种，用于
网站标志、标题、主菜单和主色块，显得整体统一。
其他色彩可作为点缀和衬托，不能喧宾夺主。
返回目录
17
1.3 网页规划和步骤 —— 网页文件规划
4．规划页面
规划页面就是规划页面布局。包括主页在内的所
有页面都应该简洁清晰，以最少的元素表达最多的信
息。整体风格要与页面所表述内容一致。
5．设计网页的图形和背景
图形是 WWW网站的特色之一，具有醒目、吸引
人和传达信息形象的作用。适当运用图形可以为网页
增色，应用不当也会带来反效果。图形的传输远没有
文字传输快，要充分考虑图形文件的大小和传输速率。
背景也是如此，虽能使页面美观，但却耗费传输时间。
返回目录
18
1.3 网页规划和步骤 —— 网页文件规划
6．网页文本
文本通常是网页的主要内容，也是网站经常更新的
部分。网站成功与否，内容很关键。网页上文字的字
体、颜色等属性要与页面整体风格匹配，并贯穿整个
网站建设，尽量不用闪烁文字。
7．联系方式
提供联系方式使访问者与自己联系或发表意见，是
网页文件规划中不可缺少的，通常应提供电子信箱、
电话号码、传真、通信地址等。
8.留言本
留言本可以方便自己与网页访问者交流，访问者对
返回目录
19
1.3 网页规划和步骤 —— 网页文件规划
网站的评价可以写在留言本里，回答问题也可以在留言
本里进行。
9．网页文件放置
一般的小网站可以将所有文件放在同一文件夹中，
大一点的网站则在网站文件夹中设置子文件夹，将本网
站所有相关文件分门别类放入子文件夹。
10．计数器和聊天室
如果想知道网站的访问次数，还可以在主页上为网
站设置一个计数器。也可申请免费聊天室程序，链接
添加到主页中。
返回目录
20
1.3 网页规划和步骤 —— 网页框架
网页框架指网页文件系统的组织结构，合
理的框架可以让 Web页面井井有条，在实际管
理中减少不必要的错误。组织站点的基本原则
是一个页面一个主题，避免大主题，把大主题
分成几个子主题，用主页把所有页面联起来，
在主页中加入指向其他页面的链接，并附带简
短描述性文字，将读者带入不同主题的领域。
在每个页面加入超链接，方便读者按按自己意
愿阅读。
返回目录
21
1.3 网页规划和步骤 —— 网页制作步骤
网页制作一般分为如下步骤：
1．将主题拆分为若干子主题，为每个子主题制作网
页。
2．为子主题网页划分区域，可使文本、图形有所分
隔。此设计相对自由。
3．为主页划分区域，合理安排网站名称、网站标
志、公共导航等必要内容，并在主页上为每个子主题建
立带描述性文字的超链接。
返回目录
22
1.4 网页制作工具 —— 网页制作应用软件
目前比较流行的用于 Web页面制作的应用软件有以
下几种：
1,FrontPage
2,Dreamweaver
3,Fireworks
4,Flash
5,Photoshop
返回目录
23
1.4 网页制作工具 —— 网页编程语言
要提高网页制作技术，除了掌握网页设计软件的
使用，还应了解掌握必要的 Web页面开发语言，下面介
绍几个流行的 Web页面开发语言,
1,HTML（ Hypertext Marked Language）语言
2,XML（ Extensible Markup Language）语言
3,VRML（ Virtual Reality Modeling Language）语言
4,ASP（ Active Server Pages）语言
5,PHP（ Hypertext Preprocessor）语言
6,Java语言 7,JavaScript语言
8,JSP（ Java Server Pages）语言
返回目录
24
本 章 小 结
? 定位网站的系统, 类别和形象
因特网是信息的海洋, 这些信息存放在世界各地被称为
,网
站, 的计算机上, 网站用, 网页, 发布信息 。 网站是因特网的灵
魂,
没有网站, 因特网就失去存在的意义 。
? 网站建立步骤, 申请域名, 在本地机器建文件夹, 将本地机器
文件夹中所有文件上传到申请的免费空间, 在浏览器地址栏里
输入个人网站的域名
? 网页规划和步骤
- 网页文件规划要遵循三个基本原则：内容, 速度和页面美观 。
- 网页框架指网页文件系统的组织结构 。
? 网页制作工具,分为应用软件和主流编程技术两大类 。
返回目录
第 1章 网页设计与网页文件规划
学习目标
? 如何给网站定位
? 网站设计原则
? 网站建立步骤
? 域名的相关知识
? 网页文件如何规划
? 了解常用网页制作工具和网页编程语言
2
第 1章 网页设计与网页文件规划
教学内容
1.1 定位网站的系统, 类别和形象
1.2 网站建立步骤
1.3 网页规划和步骤
1.4 网页制作工具
本章小结
返回总目录
3
1.1 定位网站的系统、类别和形象 —— 定位网站的系统
在因特网飞速发展的今天，网络技术和与之相应
的建立网站、制作网页，已经成为最吸引人的技术。
从网站功能考虑，网站系统可以划分为以下方向：
1．辅助政府部门进行国家管理。
2．为新闻和宣传提供平台。
3．为商业活动提供交易平台。
4．为科研和学术交流服务。
5．没有任何商业目标的公益性网站和个人爱好网
站。
返回目录
4
1.1 定位网站的系统、类别和形象 —— 定位网站的类别
网站的类别比较繁杂，从信息流转和提供
服务的方式出发，可以分为以下几类：
1．门户类网站
2．信息发布类网站
3．电子商务类网站
4．资源服务类网站
5．娱乐游戏类网站
6．远程教育和医疗诊断类网站
返回目录
5
1.1 定位网站的系统、类别和形象 —— 定位网站的形象
衡量网站建设是否成功，一个重要指标是该站点的
访问量，准确的形象定位对于提高网站的点击率至关
重要。网站形象是指它主要侧重的内容和功能。
1．人们感兴趣的网站内容通常有：
（ 1）新闻（包括时事新闻、体育新闻、财经新闻、
娱乐新闻等）。（ 2）求职、招聘、交友、征婚信息。
（ 3）计算机软件和硬件信息。（ 4）科教医疗信息。
（ 5）金融证券信息。（ 6）商贸信息和各类广告。
（ 7）休闲、旅行、娱乐信息。
（ 8）电子书籍和影视。
返回目录
6
1.1 定位网站的系统、类别和形象 —— 定位网站的形象
2．人们感兴趣的网站功能通常有：
（ 1）搜索引擎和信息查询。
（ 2）电子邮件和免费电子信箱。
（ 3）免费个人主页空间。
（ 4）软件的上传与下载。
（ 5）网上聊天室、新闻组,BBS、发送短信。
（ 6）实时股票信息和网上股票交易服务。
（ 7）网上游戏娱乐。
（ 8）网上商务活动、网上购物、网上结算。
返回目录
7
1.1 定位网站的系统、类别和形象 —— 了解网站设计原则
设计网站有下面一些基本原则：
1．内容明确
2．抓住用户
3．点击规则 —— 对于小型网站，主页上任何一条信
息点击次数不超过 3次，被称为 3次点击规则。对
于大型网站，可使用导航和工具条来改善操作。
4．学习 HTML
5．优化网站构架
6．避免使用特殊字体，尽量减少图片
7．避免长文本和错别字
返回目录
8
1.2 网站建立步骤 —— 了解网站费用
网站费用由建站费用和运作费用产生，包含以下
几个方面：
1．域名费用 —— 域名分级别，不同级别的域名收
费是不同的。
2．服务器硬件设备费用 —— 一个网站的硬件至少
包括计算机和网络接入设备，这笔费用应根据网
站规模而定，不必过分铺张。
3．系统软件费用和开发维护费用
4．网站的市场推销费用和经营费用 —— 要提高自
己的市场份额，应加强宣传并提高服务质量，
这笔费用是应该考虑的。
返回目录
9
1.2 网站建立步骤 —— 网站的结构
网站的逻辑结构由四部分组成,
1．服务器部分 —— 包括计算机硬件、操作系统、
WWW程序、电子邮件程序等。
2．网络接入部分和网络安全系统 —— 包括 路由
器、调制设备和网络安全系统 。
3．数据存贮部分和中间件 —— 数据存贮存 系统要
有海量存贮能力，高速搜索能力，有效的数据采
集、制作和发布能力。中间件介于服务器系统和
数据存贮系统之间。
4．研发和维护部分 —— 此部分贯穿于网站从建立
到消亡的全过程，需要专人负责。
返回目录
10
1.2 网站建立步骤 —— 申请域名
域名是网站在因特网上的门牌号码，也可看作网站
在因特网上的商标，只有知道了域名才能访问网站。
域名的命名基于 IP地址层次化的主机命名方式，由 26
个英文字母,10个阿拉伯数字、减号和下划线组成，
用圆点分隔成几节，字母不区分大小写。域名应选择
简短、有意义、容易记的单词。域名有惟一性。域名
可以进行交易，买卖或过户。
域名分级别，从右向左依次为最高级（也称顶级）、
次高级等，最左边为主机名。
顶级域名有 2类：机构域和地理域。机构性域名由
三个字母组成，地理性域名由两个字母组成。见表 1和
表 2。
返回目录
11
1.2 网站建立步骤 —— 申请域名
域 名 类 型
.com 商业性的机构或公司
.org 非盈利的组织、团体
.gov 政府部门
.mil 军事部门
.edu 教育部门
.net 从事与因特网相关的网络服务机构或公司
表 1 机构域
返回目录
12
1.2 网站建立步骤 —— 申请域名
域 名 国家和地区
.cn 中国
.hk 中国香港
.tw 中国台湾
.jp 日本
.uk 英国
.us 美国
表 2 地理域
返回目录
13
1.2 网站建立步骤 —— 接入 Internet的方式
接入因特网的方式通常有三种：
1．专线接入 —— 花费较大但优势明显，
一线多用，提供的服务内容也多。
2．服务器托管 —— 将 Web服务器由其他网
络公司托管，费用比第一种接入方式低
的多，但需要远程维护，技术要求高。
3．虚拟主机 —— 租用某些 ISP（ Internet Service
Provider）的剩余磁盘空间，这些空间一般允许
个人网站免费使用，节省了购买服务器的费用，
但需要远程管理，受到的限制也比较多。
返回目录
14
1.2 网站建立步骤 —— 网站服务器设备
选择服务器要综合考虑各方面因素，如：价格、性
能、安全性、可扩展性。
1．单从价格出发，应首先考虑 PC服务器,PC服务
器又分工作组级、部门级和企业级三档，价格各不相
同，可根据网站规模确定使用何种级别的 PC服务器。
2．单从性能出发,Unix服务器占有一定优势，是
高端系统的首选。
3．如果选择 PC服务器，操作系统一般为：
Windows NT或 Windows 2000或 Linux。如果选择小型
机为服务器设备，一般使用 Unix为平台。
返回目录
15
1.3 网页规划和步骤 —— 网页文件规划
网页文件规划要遵循三个基本原则：内容、速度和
页面美观，其中内容最重要。
1．规划主页
严格来说，主页（ Home Page）和网页（ Web
page）是两个不同概念，主页是指登陆到网站后看到
的第一个页面。主机上默认首页名称是固定的，不能
随便起，要符合根据远程服务器的要求，通常为
index.htm或 index.html或 default.htm或 default.html。
主页的一个重要的功能是导航，利用超链接指引用
户查询保存在网址或其他位置的信息，超链接层数不
能太多，最好以关键字或词语形式查询信息。
返回目录
16
1.3 网页规划和步骤 —— 网页文件规划
2．设计网站标志 (logo)
网站标志就如同商品的商标一样，是站点特色和
内涵的集中体现，好的标志能让人看见 logo就联想到
拥有该标志的网站。标志可以是汉字、英文字母、动
物或人物的符号、图案等。
3．设计网页的色彩
视觉冲击是网站给人的第一印象，好的色彩搭配
能体现网站形象，延伸网站内涵，还能直接影响访问
者的情绪。通常，网站的主要色彩不要超过 3种，用于
网站标志、标题、主菜单和主色块，显得整体统一。
其他色彩可作为点缀和衬托，不能喧宾夺主。
返回目录
17
1.3 网页规划和步骤 —— 网页文件规划
4．规划页面
规划页面就是规划页面布局。包括主页在内的所
有页面都应该简洁清晰，以最少的元素表达最多的信
息。整体风格要与页面所表述内容一致。
5．设计网页的图形和背景
图形是 WWW网站的特色之一，具有醒目、吸引
人和传达信息形象的作用。适当运用图形可以为网页
增色，应用不当也会带来反效果。图形的传输远没有
文字传输快，要充分考虑图形文件的大小和传输速率。
背景也是如此，虽能使页面美观，但却耗费传输时间。
返回目录
18
1.3 网页规划和步骤 —— 网页文件规划
6．网页文本
文本通常是网页的主要内容，也是网站经常更新的
部分。网站成功与否，内容很关键。网页上文字的字
体、颜色等属性要与页面整体风格匹配，并贯穿整个
网站建设，尽量不用闪烁文字。
7．联系方式
提供联系方式使访问者与自己联系或发表意见，是
网页文件规划中不可缺少的，通常应提供电子信箱、
电话号码、传真、通信地址等。
8.留言本
留言本可以方便自己与网页访问者交流，访问者对
返回目录
19
1.3 网页规划和步骤 —— 网页文件规划
网站的评价可以写在留言本里，回答问题也可以在留言
本里进行。
9．网页文件放置
一般的小网站可以将所有文件放在同一文件夹中，
大一点的网站则在网站文件夹中设置子文件夹，将本网
站所有相关文件分门别类放入子文件夹。
10．计数器和聊天室
如果想知道网站的访问次数，还可以在主页上为网
站设置一个计数器。也可申请免费聊天室程序，链接
添加到主页中。
返回目录
20
1.3 网页规划和步骤 —— 网页框架
网页框架指网页文件系统的组织结构，合
理的框架可以让 Web页面井井有条，在实际管
理中减少不必要的错误。组织站点的基本原则
是一个页面一个主题，避免大主题，把大主题
分成几个子主题，用主页把所有页面联起来，
在主页中加入指向其他页面的链接，并附带简
短描述性文字，将读者带入不同主题的领域。
在每个页面加入超链接，方便读者按按自己意
愿阅读。
返回目录
21
1.3 网页规划和步骤 —— 网页制作步骤
网页制作一般分为如下步骤：
1．将主题拆分为若干子主题，为每个子主题制作网
页。
2．为子主题网页划分区域，可使文本、图形有所分
隔。此设计相对自由。
3．为主页划分区域，合理安排网站名称、网站标
志、公共导航等必要内容，并在主页上为每个子主题建
立带描述性文字的超链接。
返回目录
22
1.4 网页制作工具 —— 网页制作应用软件
目前比较流行的用于 Web页面制作的应用软件有以
下几种：
1,FrontPage
2,Dreamweaver
3,Fireworks
4,Flash
5,Photoshop
返回目录
23
1.4 网页制作工具 —— 网页编程语言
要提高网页制作技术，除了掌握网页设计软件的
使用，还应了解掌握必要的 Web页面开发语言，下面介
绍几个流行的 Web页面开发语言,
1,HTML（ Hypertext Marked Language）语言
2,XML（ Extensible Markup Language）语言
3,VRML（ Virtual Reality Modeling Language）语言
4,ASP（ Active Server Pages）语言
5,PHP（ Hypertext Preprocessor）语言
6,Java语言 7,JavaScript语言
8,JSP（ Java Server Pages）语言
返回目录
24
本 章 小 结
? 定位网站的系统, 类别和形象
因特网是信息的海洋, 这些信息存放在世界各地被称为
,网
站, 的计算机上, 网站用, 网页, 发布信息 。 网站是因特网的灵
魂,
没有网站, 因特网就失去存在的意义 。
? 网站建立步骤, 申请域名, 在本地机器建文件夹, 将本地机器
文件夹中所有文件上传到申请的免费空间, 在浏览器地址栏里
输入个人网站的域名
? 网页规划和步骤
- 网页文件规划要遵循三个基本原则：内容, 速度和页面美观 。
- 网页框架指网页文件系统的组织结构 。
? 网页制作工具,分为应用软件和主流编程技术两大类 。
返回目录
