湖北职院计科系精品课程
湖北职院计科系精品课程
教学项目一 网页设计概述
【 基本内容 】
讲解 网页设计的相关术语及网站制作的基本流程
【 教学要求 】
使学生了解网站、网页的相关知识，激发学生学习网页设计
的兴趣
一、万维网及相关术语
1,Internet互联网
前身为 ARPANET,1984年原 ARPANET分为军用科研网与民用科
研网两部分, 民用科研网 经过发展演变为现在的 Internet;
湖北职院计科系精品课程
2,万维网 （ World Wide Web）
是 Internet平台上的一种信息服务, 将文本, 声音, 动画, 以及
各种媒体的表现形式有机融合在一起；
3,HTML语言
是网页设计的标准语言, 由一系列标志组成；
4,浏览器与 Web服务器程序
1993年 NCSA（ 美国国家超级计算应用中心 ） 开发出 Mosaic
浏览器 ;
浏览器的主要功能是将 HTML标志解释生成用户端网页信
息, 例如 IE,NAVIGATOR等 ;
Web服务器：网站运行的服务器端程序, 例如 IIS等 ;
5,Web Site网站
是 Internet上信息存放的载体，包括 Web网站服务器配置和 Web
网站的网页信息两部分；
湖北职院计科系精品课程
首页 娱乐 游戏 新闻
Index.htm 1.htm 2.htm 3.htm
6,超级链接,网页之间彼此连接关系；
7,Webpage与 Homepage
Webpage:网站中的每一个信息页面, 称网页；
Homepage:访问网站时浏览的第一个页面, 主页
例如,在 main.htm中有如下的超级链接关系
湖北职院计科系精品课程
11,超文本传输协议 HTTP(Hypertext Transfer protocol)
万维网中传输 HTML文件时使用的协议 ;
8,免费个人主页空间
Internet中提供存放用户网页的免费空间；
9,免费域名
提供一种域名的转换服务, 将虚拟的域名指向一个实际存在
的 URL
10,搜索引擎
Intenet中提供搜索信息功能的工具；例如：新浪, 网易, 搜
狐, 雅虎, 263,3721,Google中文, 21CN,中华网等；
湖北职院计科系精品课程
12,URL（ Unitorm Resource Locator） 统一资源定位
符
定位 Intenet中存在的资源的标识符,
Protocol,// Host.domain,<port> path/filename
ftp 主机名称 端口号
http 网络资源路径及文件名称
mailto
例如,
ftp,//www.xgu.hb.cn/public/en.rar
http,//172.16.195.3/index.htm
mailto,XGZYLJJ@163.net
file,//private/pub/1.htm
port号通常省略；
湖北职院计科系精品课程
二, 制作网站的基本流程
1,规划阶段
进行网站的整体规划也就是组织网站的内容和设计其结构。
网页制作者在明确网页制作的目的及要包括的内容之后，接
下来就应该对网站进行规划，以确保文件内容条理清楚、结
构合理，这样不仅可以很好地体现设计者的意图，也将使网
站可维护性与可扩展性增强。
湖北职院计科系精品课程
2、制作阶段
网页设计、测试、网页上传
当网页设计人员制作完所有网站页面之后，需要对所设计
的网页进行审查和测试，测试内容包括功能性测试和完整
性测试两个方面。
所谓功能性测试就是要保证网页的可用性，达到最初
的内容组织设计目标，实现所规定的功能，读者可方便快
速地寻找到所需的内容。完整性测试就是保证页面内容显
示正确，链接准确，无差错无遗漏。
如果在测试过程中发现了错误，就要及时修改，在准
确无误后,方可正式在 Internet上发布。在进行功能性测
试和完整性测试后，有的还需要掌握整个站点的结构以备
日后的修改。
湖北职院计科系精品课程
3,维护阶段
内容更新
4,网站发布的途径
网页设计好, 必须把它发布到互连网上, 否则网站形象仍然不能展现出
去 。 发布的服务器可以是远程, 也可以是本地, 但必须支持 ASP,因为动
态程序是建立在 ASP基础上的 。
方法一：申请空间上传
方法二：建立自己的 Web服务器
湖北职院计科系精品课程
5,网站制作的相关建议
① 多浏览, 参考
② 声音, 动画, 颜色的和谐配合
③ 交互性设计
④ 创新意识
湖北职院计科系精品课程
6,网页设计的相关软件简介
Frontpage,Dreamweaver,Flash,Fireworks,Photoshop、
Cool 3D,VbScript,JavaScript,ASP,HTML等；
FrontPage
FrontPage是由 Microsoft公司推出的新一代 Web网页制作工具 。
FrontPage使网页制作者能够更加方便, 快捷地创建和发布网页, 具
有直观的网页制作和管理方法, 简化了大量工作 。
FrontPage界面与 Word,PowerPoint等软件的界面极为相似,
为使用者带来了极大的方便, Microsoft公司将 FrontPage封装入
Office之中, 成为 Office家族的一员, 使之功能更为强大 。
湖北职院计科系精品课程
超文本标识语言 （ HTML）
HTML（ Hypertext Markup Language） 是一种专门用于 Web页制作的
编程语言, 用来描述超文本各个部分的内容, 告诉浏览器如何显示文本,
怎样生成与别的文本或图像的链接点 。
HTML文档由文本, 格式化代码和导向其他文档的超链接组成 。
JavaScript
JavaScript是一种基于对象 (Object)和事件驱动 (Event Driven)并具有
安全性能的脚本语言。使用它的主要目的是与 HTML超文本标记语言一起
在一个 Web页面中链接多个对象，实现与 Web客户的交互。
湖北职院计科系精品课程
Dreamweaver
Dreamweaver是由 Macromedia公司推出的一款在网页制作方面
大众化的软件, 它具有可视化编辑界面, 用户不必编写复杂的 HTML
源代码就可以生成跨平台, 跨浏览器的网页, 不仅适合于专业网页
编辑人员的需要, 同时也容易被业余网友们所掌握 。 另外,
Dreamweaver的网页动态效果与网页排版功能都比一般的软件好用,
即使是初学者也能制作出相当于专业水准的网页,
Photoshop
Photoshop是由 Adobe公司开发的图形处理软件, 它是目前公认
的 PC机上最好的通用平面美术设计软件, 它功能完善, 性能稳定,
使用方便, 所以在几乎所有的广告, 出版, 软件公司, Photoshop
都是首选的平面制作工具 。
湖北职院计科系精品课程
Flash
Flash是美国 Macromedia公司开发的矢量图形编辑和动画创作的专
业软件, 它是一种交互式动画设计工具, 用它可以将音乐, 声效,
动画以及富有新意的界面融合在一起, 以制作出高品质的网页动态
效果 。 它主要应用于网页设计和多媒体创作等领域, 功能十分强大
和独特, 已成为交互式矢量动画的标准, 在网上非常流行 。 Flash
广泛应用于网页动画制作, 教学动画演示, 网上购物, 在线游戏等
的制作中 。
Fireworks
Fireworks是由 Macromedia公司开发的图形处理工具, 它的
出现使 Web作图发生了革命性的变化 。 因为 Fireworks是第一套专
门为制作网页图形而设计的软件, 同时也是专业的网页图形设计及
制作的解决方案 。
作为一款为网络设计而开发的图像处理软件, Fireworks还能够
自动切割图像, 生成光 标动态感应的 JavaScript程序等等, 而且
Fireworks具有强大的动画功能和一个相当完美的 网络图像生
成器 。
湖北职院计科系精品课程
【 课后小结 】
通过学习，认识网络、网站、网页及相关信息，
理解网页制作的流程及了解相应开发工具，为设计
网页做准备。
湖北职院计科系精品课程
教学项目一 网页设计概述
【 基本内容 】
讲解 网页设计的相关术语及网站制作的基本流程
【 教学要求 】
使学生了解网站、网页的相关知识，激发学生学习网页设计
的兴趣
一、万维网及相关术语
1,Internet互联网
前身为 ARPANET,1984年原 ARPANET分为军用科研网与民用科
研网两部分, 民用科研网 经过发展演变为现在的 Internet;
湖北职院计科系精品课程
2,万维网 （ World Wide Web）
是 Internet平台上的一种信息服务, 将文本, 声音, 动画, 以及
各种媒体的表现形式有机融合在一起；
3,HTML语言
是网页设计的标准语言, 由一系列标志组成；
4,浏览器与 Web服务器程序
1993年 NCSA（ 美国国家超级计算应用中心 ） 开发出 Mosaic
浏览器 ;
浏览器的主要功能是将 HTML标志解释生成用户端网页信
息, 例如 IE,NAVIGATOR等 ;
Web服务器：网站运行的服务器端程序, 例如 IIS等 ;
5,Web Site网站
是 Internet上信息存放的载体，包括 Web网站服务器配置和 Web
网站的网页信息两部分；
湖北职院计科系精品课程
首页 娱乐 游戏 新闻
Index.htm 1.htm 2.htm 3.htm
6,超级链接,网页之间彼此连接关系；
7,Webpage与 Homepage
Webpage:网站中的每一个信息页面, 称网页；
Homepage:访问网站时浏览的第一个页面, 主页
例如,在 main.htm中有如下的超级链接关系
湖北职院计科系精品课程
11,超文本传输协议 HTTP(Hypertext Transfer protocol)
万维网中传输 HTML文件时使用的协议 ;
8,免费个人主页空间
Internet中提供存放用户网页的免费空间；
9,免费域名
提供一种域名的转换服务, 将虚拟的域名指向一个实际存在
的 URL
10,搜索引擎
Intenet中提供搜索信息功能的工具；例如：新浪, 网易, 搜
狐, 雅虎, 263,3721,Google中文, 21CN,中华网等；
湖北职院计科系精品课程
12,URL（ Unitorm Resource Locator） 统一资源定位
符
定位 Intenet中存在的资源的标识符,
Protocol,// Host.domain,<port> path/filename
ftp 主机名称 端口号
http 网络资源路径及文件名称
mailto
例如,
ftp,//www.xgu.hb.cn/public/en.rar
http,//172.16.195.3/index.htm
mailto,XGZYLJJ@163.net
file,//private/pub/1.htm
port号通常省略；
湖北职院计科系精品课程
二, 制作网站的基本流程
1,规划阶段
进行网站的整体规划也就是组织网站的内容和设计其结构。
网页制作者在明确网页制作的目的及要包括的内容之后，接
下来就应该对网站进行规划，以确保文件内容条理清楚、结
构合理，这样不仅可以很好地体现设计者的意图，也将使网
站可维护性与可扩展性增强。
湖北职院计科系精品课程
2、制作阶段
网页设计、测试、网页上传
当网页设计人员制作完所有网站页面之后，需要对所设计
的网页进行审查和测试，测试内容包括功能性测试和完整
性测试两个方面。
所谓功能性测试就是要保证网页的可用性，达到最初
的内容组织设计目标，实现所规定的功能，读者可方便快
速地寻找到所需的内容。完整性测试就是保证页面内容显
示正确，链接准确，无差错无遗漏。
如果在测试过程中发现了错误，就要及时修改，在准
确无误后,方可正式在 Internet上发布。在进行功能性测
试和完整性测试后，有的还需要掌握整个站点的结构以备
日后的修改。
湖北职院计科系精品课程
3,维护阶段
内容更新
4,网站发布的途径
网页设计好, 必须把它发布到互连网上, 否则网站形象仍然不能展现出
去 。 发布的服务器可以是远程, 也可以是本地, 但必须支持 ASP,因为动
态程序是建立在 ASP基础上的 。
方法一：申请空间上传
方法二：建立自己的 Web服务器
湖北职院计科系精品课程
5,网站制作的相关建议
① 多浏览, 参考
② 声音, 动画, 颜色的和谐配合
③ 交互性设计
④ 创新意识
湖北职院计科系精品课程
6,网页设计的相关软件简介
Frontpage,Dreamweaver,Flash,Fireworks,Photoshop、
Cool 3D,VbScript,JavaScript,ASP,HTML等；
FrontPage
FrontPage是由 Microsoft公司推出的新一代 Web网页制作工具 。
FrontPage使网页制作者能够更加方便, 快捷地创建和发布网页, 具
有直观的网页制作和管理方法, 简化了大量工作 。
FrontPage界面与 Word,PowerPoint等软件的界面极为相似,
为使用者带来了极大的方便, Microsoft公司将 FrontPage封装入
Office之中, 成为 Office家族的一员, 使之功能更为强大 。
湖北职院计科系精品课程
超文本标识语言 （ HTML）
HTML（ Hypertext Markup Language） 是一种专门用于 Web页制作的
编程语言, 用来描述超文本各个部分的内容, 告诉浏览器如何显示文本,
怎样生成与别的文本或图像的链接点 。
HTML文档由文本, 格式化代码和导向其他文档的超链接组成 。
JavaScript
JavaScript是一种基于对象 (Object)和事件驱动 (Event Driven)并具有
安全性能的脚本语言。使用它的主要目的是与 HTML超文本标记语言一起
在一个 Web页面中链接多个对象，实现与 Web客户的交互。
湖北职院计科系精品课程
Dreamweaver
Dreamweaver是由 Macromedia公司推出的一款在网页制作方面
大众化的软件, 它具有可视化编辑界面, 用户不必编写复杂的 HTML
源代码就可以生成跨平台, 跨浏览器的网页, 不仅适合于专业网页
编辑人员的需要, 同时也容易被业余网友们所掌握 。 另外,
Dreamweaver的网页动态效果与网页排版功能都比一般的软件好用,
即使是初学者也能制作出相当于专业水准的网页,
Photoshop
Photoshop是由 Adobe公司开发的图形处理软件, 它是目前公认
的 PC机上最好的通用平面美术设计软件, 它功能完善, 性能稳定,
使用方便, 所以在几乎所有的广告, 出版, 软件公司, Photoshop
都是首选的平面制作工具 。
湖北职院计科系精品课程
Flash
Flash是美国 Macromedia公司开发的矢量图形编辑和动画创作的专
业软件, 它是一种交互式动画设计工具, 用它可以将音乐, 声效,
动画以及富有新意的界面融合在一起, 以制作出高品质的网页动态
效果 。 它主要应用于网页设计和多媒体创作等领域, 功能十分强大
和独特, 已成为交互式矢量动画的标准, 在网上非常流行 。 Flash
广泛应用于网页动画制作, 教学动画演示, 网上购物, 在线游戏等
的制作中 。
Fireworks
Fireworks是由 Macromedia公司开发的图形处理工具, 它的
出现使 Web作图发生了革命性的变化 。 因为 Fireworks是第一套专
门为制作网页图形而设计的软件, 同时也是专业的网页图形设计及
制作的解决方案 。
作为一款为网络设计而开发的图像处理软件, Fireworks还能够
自动切割图像, 生成光 标动态感应的 JavaScript程序等等, 而且
Fireworks具有强大的动画功能和一个相当完美的 网络图像生
成器 。
湖北职院计科系精品课程
【 课后小结 】
通过学习，认识网络、网站、网页及相关信息，
理解网页制作的流程及了解相应开发工具，为设计
网页做准备。
