网页设计与制作

安庆职业技术学院 jpkc.aqvtc.cn№ 1

WANG YE SHE JI YU ZHI ZUO

主讲教师：徐英武

网页设计与制作

安庆职业技术学院 jpkc.aqvtc.cn


№ 2

本讲内容

一、网络一、网络1

二、网站与网页二、网站与网页2

三、网页设计三、网页设计3

七、习题7

四、实例介绍四、实例介绍 HTMLHTML 语言设计语言设计3

五、网页制作素质和修养五、网页制作素质和修养5

六、网站与网页的关系六、网站与网页的关系6



№ 3

第一章网站网页的基础知识



№ 4

第一节网络

信息 (information), 已经成为哲学、自然科学、技术科学和社会科学等各个领域所广泛应用的概念。随着信息技术的发展，网络成为人们共享信息的必然。建立网站也就是必然逝在必行。如何建好网站，如何建立有特色的网站将是我们这门课程所要讲述的内容。



№ 5

一、网络的定义

目前计算机网络的比较公认的定义是：计算机网络是指在网络协议的控制下，通过通讯设备和线路来实现地理位置不同且具有独立功能的多个计算机系统之间的连接，并通过网络操作系统等网络软件来实现资源共享的系统。



№ 6

二、计算机网络的定义和发展

在 20 世纪 50 年代中期，许多系统都将地理上分散的多个终端通过通讯线路连接到一台中心计算机上，这样就是出现了计算机系统。随着远程终端的增多，在主机前增加了前端机，但是人们把计算机网络定义为“以传输信息为目的的而连接起来，实现远程信息处理或进一步达到资源共享的系统”，这就是网络的趋形。 20 世纪 70 年代至 80 年代中期计算机网络得到了迅速的发展。 ISO 在 1984 年颁布了 OSI/RM 。定义为新一代计算机网络体系结构的基础，这七层模型分别为：物理层、链路层、网络层、传输层、会话层、表示层、应用层



№ 7

三、计算机网络的分类

计算机网络分类方法多种多样，常用的方法有：按网络的拓扑结构分类、按传输介质分类、按速率的分类、按数据交换方式分类以及按网络覆盖的地理范围分类。按照网络覆盖的地理位置范围的大小分为：局域网，城域网，广域网。我们通常说的上网是指广域网。



№ 8

四、网络的功能

1

数据通讯

2

资源共享



№ 9

第二节网站与网页

一、网站1 、网站功能：网站是提供发布信息、收集

信息的平台。2 、网站概念：简单地说，网站是由网页通

过超级链接有机地集合而成，通过浏览器看到的画面就是网页。



№ 10

二、网站的分类

从网站的目的将网站分为：企业网站；政府网站；专业网站；个人网站。



№ 11

三、网站的管理功能

故障管理；计费管理；配置管理；性能管理；安全管理；站点信息管理。

对网络的故障检测和排除

对网络的故障检测和排除

记录网络资源实时计费

记录网络资源实时计费

配置网络优化网络配置网络优化网络

对通信效率评价对通信效率评价

授权、访问、加密机制管理

授权、访问、加密机制管理

对信息的跟踪确保完整可靠

对信息的跟踪确保完整可靠



№ 12

四、中国 Internet 概况CSNET 中国科技网

CERNET 中国教育网

CHINANET 中国电信网

CHINAGBN 中国经济网

UNINET 中国联通网

中科院系统的12 个分院和 123

个研究所 (95年 )

中国公用计算机互联网，即163 、 169

原国家教委 94年 12月组织清华、北大等高校承建

中国国家公用经济信息通信网（金桥网）

中国联通公司2000 年

InternetInternet



№ 13

五、浏览器—— Internet 泛游之舟WWW采用客户机 /服务器系统。在客户机方面（用户）使用的程序叫做 Web 浏览器。服务器上则主要存放网页文件，通常称为 Web 站点或“ Web 网站”。在 Web 网站上除了 Web 网页文件外，还有 Web 服务程序。

Web 服务器＋网页文件＋ I P 地址＝ Web 网站1、网站

成套网页

Web服务器

浏览器

客户机



№ 14

六、 IP 地址

正如每部电话必须有一个由邮电部门分配的唯一的电话号码用户才能与之通话一样， IP 地址相当于 Internet 系统的电话号码。 Internet 将世界各地成千上万个网络互连起来，这些网络上又各有许多计算机接入。为了使用户上网后能从繁若星空的方便快捷地找到网上的某一台主机， Internet 采用所谓“ IP 地址”的方法，即为网上的每一个网络和每台提供服务的主机都分配一个网络地址。这就是 IP 地址。对于因特网上的主机而言，这个地址是全球唯一的。



№ 15

IP 地址为 4 个字节长，每个字节为一个小于 256 的十进制整数，字节间用点号分隔，形如： XXX.XXX.XXX.XXX 。



№ 16

IP 地址其结构说明如下：

计算机名 . 组织机构名 .

网络名 . 最高管理层名



№ 17

【域名示例】J www.aqvtc.cn ( 安庆职业技术学院） www.chinanet.cn.net ( 中国国际互联网） www.pku.edu.cn ( 北京大学） www.tsinghua.edu.cn ( 清华大学） www.hfut.edu.cn ( 合肥工业大学）

最高域名机构名网络名主机名或网站名

注：许多网站喜欢用 “ WWW ” 作主机名，表示是一个 Web 网站



№ 18

七、 IP 地址分类

1

动态地址

2

静态地址



№ 19

八、网址用户通过 WWW（万维网）访问 Internet ，是在浏览

器（ BROWSER）的“地址”处键入所谓“网址”，术语叫“ URL” （ Uniform Resource Locator, 统一资源定位器）。 URL 看起来可能很长很复杂，但它一般是由四个部分构成的，即协议、主机名、文件夹名（目录）和文件名。网址有两种形式： IP 地址与域名。

安庆职业技术学院网址：域名： http://www.aqvtc.cn

IP 地址： 192.168.0.8

精品课程的网址： http://jpkc.aqvtc.cn



№ 20

第三节网页设计

所谓“网页”，实际上是以“图文并茂”、“有声有色” ( 多媒体 ) 系列专栏形式向公众展示各种信息的网络“宣传栏”。常用的设计软件和工具有哪些呢？



№ 21

一、 HTML 语言超文本文件的格式早在 1945 年就由 Vannevar

Bush 提出，他在理论上建立了一个超文本文件系统。 1965 年 Ted Nelson 第一次使用“超文本”一词来形容这种管理信息的系统。与 Bush一样，他的超文本文件系统“ Xanadu” ，最终也未获得成功。 1967 年，在 IBM 资助下，世界上第一个真正运行成功的“超文本编辑系统”建成，这项研究由 Andries Van Dam 主持，在美国布朗大学最终完成。 1969 年，美国国防部高级研究计划署建立了 ARPA 网，该网络最成功的技术就是 TCP/IP 协议。



№ 22

二、 HTML 发展历史

美国国防部高级研究计划署建立了ARPA 网，该网络最成功的技术就是TCP/IP 协议。

1945

1965

1967

1969发展史发展史

Ted Nelson 第一次使用“超文本”一词来形容这种管理信息的系统。失败告终。

在 IBM 资助下，世界上第一个真正运行成功的“超文本编辑系统”建成，这项研究由 Andries Van Dam 主持，在美国布朗大学最终完成

Vannevar Bush 提出，他在理论上建立了一个超文本文件系统。



№ 23

人们在通过 INTERNET获取信息的同时，纷纷建立自己的主页和网站，向世界展示自己。一个网站可以包含一个或多个网页，这些网页以一定的方式连接在一起，成为一个整体。而一个成功的网站的建设离不开其中每一张制作精美的网页。

如何设计呢 ?



№ 24

三、网页制作的工具

虽然 HTML 语言是功能强且语法简单的网页设计语言。但是，直接用 HTML 在普通的文本编辑器上编写制作复杂精美的网页是很不方便的。网页设计者不得不花大量的时间去测试所写的文档是否合乎其语法规则，又不能在网页设计的同时就了解文档在浏览器上地显示的确切效果。其次要记忆、掌握大量的 HTML 语言地语法规则也不是一件容易的事情。而现在可视化网页设计工具可以使得设计者网页设计轻松自如。网页设计的工具很多，当前流行的工具有：



№ 25

网页制作的工具之一： Frontpage

它是建立和管理专业网站的简易工具，用户可以精确地将网页中的每一个元素放置在网页地任意位置上；用户可以自定义主题。它具有方便地数据库管理功能，还能提供灵活的网页发布工具。



№ 26

网页制作的工具之二： Dreamweaver

它是 Macromedia 公司设计推出，可以最快的方式将 Photoshop 等文件移至网页；它能够通过网站地地图快速制作网站雏形、设计、更新和重组网页；提供了可视化编辑与原代码编辑同步的设计工具；集成了动态出版可视编辑及电子商务功能，在动态网页设计中网页的预览无需通过浏览器；利用它设计的网页一般不受平台的限制。



№ 27

网页制作的工具之三： Flash

它能制作可任意放大的动画，使用方便，它提供的交互动画文件容量很小，它的使用流技术播放动画。

以上三种网页设计工具通常称为“网页设计三剑客”。



№ 28

四、网页设计

早期的网页外观是静态的，只有文字与静态的图片，用户只能被动地阅读网页制作者提供的信息。其网页的内容也是静态的，若无外来干预，其内容不会自动改变，也无法通过网页实现与访问网页者交互信息的功能。因此，为了克服静态网页的呆板、缺乏交互性等缺点，使网页变得绚丽多彩、充满互动性，动态网页便应运而生。



№ 29

动态网页技术包括网页的动态表现技术与网页的动态内容技术，前者是网页外观的动态表现技术，如 GIF 动画、 FLASH 技术、 DHTML（动态 HTML）技术、 VHTML（虚拟 HTML）技术、 VRML（虚拟实现造型语言）技术等。而网页的动态内容技术是通过一定的计算机语言编程如 CGI 、 ASP 、 JSP 等，使得计算机按照网页设计者设置的网页格式，生成所需要内容的网页并传送给访问网页者浏览。



№ 30

五、多媒体表现 -----音频与视频

随着多媒体技术的发展，人们已经不满足简单的文件传输，电子邮件，远程登陆等网络应用。人们希望网络提供实时交互的服务，如：视频会议、视频点播、远程多媒体教学和网上购物等。

音频：通过计算机的声卡等多媒体设备来实现声音的传输和播放。一般有 Wave波形音频、 MIDI音频和 CD音频， MP3

视频：通过视频采集和处理实现图象的传输和播放。一般有 AVI ， MOV ， MPEG 等格式的文件。



№ 31

第四节实例介绍 HTML 语言的设计

例 1 含有超文本标识的网页源程序。 <HTML> <HEAD><TITLE>含有超文本标识的网页源程序 </TITLE></HEAD> <BODY> <H2>读书人的三个意境 </H2> <OL><LI>昨夜西风凋碧树，独上高楼，望尽天涯路。 <LI>衣带渐宽终不悔，为伊消得人憔悴。 <LI> 众里寻她千百度，蓦然回首，那人却在灯火阑珊处。 </OL> <MARQUEE bgcolor="#87CEFA" width=75% scrollamount=1>⒈昨夜西风凋碧树，独上高楼，望尽天涯路。 </MARQUEE> <MARQUEE bgcolor="#FFC900" behavior=alternate>⒉衣带渐宽终不悔，为伊消得人憔悴。 </MARQUEE>

<FONT size="3" color="#FFFFFF"> <MARQUEE bgcolor=“#FF4500”>⒊ 众里寻她千百度，蓦然回首，那人却在灯火阑珊处。

</MARQUEE> </FONT> </BODY> </HTML>



№ 32

其效果



№ 33

例 2 、简单的表单设计<form action =/cgi-bin/post-query method=post>

您的姓名 :

<input type=text name= 网址 value=http://><br>

密码 :

<input type=password name=密码 ><br>

<input type=submit value=" 发送 "><input type=reset value="重设 ">

</form>



№ 34

其效果



№ 35

第五节网页制作素质和修养

网页制作是一个系统工程，一个网页的优劣完全取决于设计者的综合素质和动机。不仅仅是一个技术的问题，还要重视艺术性。并且不可以偏废。技术是基础，艺术是升华，艺术效果表现用技术来实现。好的网页让人留恋往返。这不仅仅是技术的高超，而是艺术效果吸引了浏览者的眼球。所以这是一个综合的系统的工程。



№ 36

第六节网站与网页的关系

网站是一个主体，是“框架”；网站突出一个主题；网站的目标是组织；网站好比一本画册。网页是被包含于网站之中的个体，是“砖瓦”；网页围绕网站主题各分项，丰富和烘托主题；网页的目标是表现；网页好比画册中的每一个分页。

网站是爸妈，网页是她们的孩子；爸爸妈妈的行为影响她的孩子，也是孩子成长的灯塔；她的孩子的优秀也使得爸爸妈妈的荣光。没有爸爸妈妈的孩子是无人问，没有孩子的爸爸妈妈只能孤独一生。



№ 37

第七节习题

1 、通常怎样对网页页面分区？各分区应放置什么内容？ 2 、网页元素包括哪些？打开 www.163.com ，指出其中包含的网页元素请阐述网页设计与平面设计的异同点。

3 、网页与网站有何不同？请举例说明。4 、请从不同角度阐述网页的功能。 5 、请分析一下网页设计的基本要素和潜能。 6 、请阐述网页设计与平面设计的异同点。 7 、网页构成的基本元素是什么？ 8 、怎样使网页内容更具合理性？ 9 、说出自己熟悉的 3 个网页，并试分析它的归类。 10 、按照网页的分类，自拟主题设计一帧页面。

安庆职业技术学院 jpkc.aqvtc.cn№ 38

WANG YE SHE JI YU ZHI ZUO

主讲教师：徐英武

网 页 设 计 与 制 作

Documents

网页设计与制作