Web网站架构与HTML基础

第一章Web网站架构与HTML基础王张宜wzy@武汉大学计算机学院第一章Web网站架构与

HTML基础王张宜wzy@武汉大学计算机学院1/42内容提要网页设计与制作22/42/10/10Web特点和结构Web服务器配置创建虚拟目录HTML基础Web特点和结构网页设计与制作33/42/10/10本章介绍WWW概念、Web服务器配置、创建虚拟目录和浏览器IE配置。一、WWW概念1.什么是WWW？WWW是World

Wide

Web缩写，简称为Web（万维网）。WWW起源于1989年3月，是由欧洲粒子物理试验室CERN

(the

European

Laboratory

for

ParticlPhysics)开发主从结构分布式（“客户机/服务器”式）超文本系统。1992年1月，Web第一个版本在瑞士日内瓦问世。WWW是一个全球性信息系统，使计算机能够在Internet上相互传送基于超媒体数据信息。WWW也能够用来建立Intranet（企业内部网）信息系统。

WWW含有三个统一：1.统一资源命名方式：URL（统一资源定位符，即网址）。2.统一资源访问方式：HTTP

（超文本传输协议）。3.统一信息组织方式：HTML（超文本标识语言）。Web特点和结构网页设计与制作44/42/10/10WWW是一个全球性信息系统，使计算机能够在Internet上相互传送基于超媒体数据信息。WWW也能够用来建立Intranet（企业内部网）信息系统。WWW含有三个统一：统一资源命名方式：URL（统一资源定位符，即网址）。统一资源访问方式：HTTP

（超文本传输协议）。统一信息组织方式：HTML（超文本标识语言）。Web特点和结构网页设计与制作55/42/10/10URL（统一资源定位符）主要用来指明通信协议和地址方式，以取得网络上各种服务，它包含通信协议（Protocol）、主机名、所要访问文件路径和文件名等几个部分。

统一资源定位符（URL）是用于完整地描述Internet上网页和其它资源地址一个标识方法。

Internet上每一个网页都含有一个唯一名称标识，通常称之为URL地址，这种地址能够是当地磁盘，也能够是局域网上某一台计算机，更多是Internet上站点。简单地说，URL就是Web地址，俗称“网址”。URL（统一资源定位符）URL由三部分组成：协议类型，主机名和路径及文件名。

protocol://hostname[:port]/path/[;parameters][?query]#fragment协议类型：经过URL能够指定主要有以下几个：http、ftp、telnet、file等，包含新出现ed2k、Flashget、thunder、tencent、msnim等。hostname（主机名）：是指存放资源服务器域名系统(DNS)主机名或IP地址。有时，在主机名前也能够包含连接到服务器所需用户名和密码（格式：username:password）。path（路径）：由零或多个“/”符号隔开字符串，普通用来表示主机上一个目录或文件地址。Web特点和结构网页设计与制作66/42/10/10URL（统一资源定位符）URL由三部分组成：协议类型，主机名和路径及文件名。protocol

://

hostname[:port]

/

path

/[;parameters][?query]#fragment

协议类型：经过URL能够指定主要有以下几个：http、ftp、

telnet、file等，包含新出现ed2k、Flashget、thunder、tencent、msnim等。

hostname（主机名）：是指存放资源服务器域名系统(DNS)主机名或

IP

地址。有时，在主机名前也能够包含连接到服务器所需用户名和密码（格式：username:password）。

path（路径）：由零或多个“/”符号隔开字符串，普通用来表示主机上一个目录或文件地址。URL（统一资源定位符）示例http://rfc.sunsite.dk/rfc/rfc1738.html

:80/wiki/Special:Search?search=铁路&go=Gohttp，是协议；

，是服务器；

80，是服务器上网络端口号；/wiki/Special:Search，是路径；?search=铁路&go=Go，是问询。Web特点和结构网页设计与制作77/42/10/10URL（统一资源定位符）示例http://rfc.sunsite.dk/rfc/rfc1738.html:80/wiki/Special:Search?search=&go=Gohttp，是协议；，是服务器；80，是服务器上网络端口号；/wiki/Special:Search，是路径；?search=铁路&go=Go，是问询。超级文本超级文本（Hypertext）与普通文本不一样，它是一个使用户与计算机之间能够愈加亲密交流文本显示技术，它经过对相关词汇进行索引链接，能够使带链接词汇或语句指向文本中其它段落、注解或文本。用户能够沿着超级文本中索引链接跳转阅读，也能够随时返回到原来阅读之处。超级文本出现，使计算机中文本展现出崭新面目。HTTP：超文本传输协议Web特点和结构网页设计与制作88/42/10/10超级文本超级文本（Hypertext）与普通文本不一样，它是一个使用户与计算机之间能够愈加亲密交流文本显示技术，它经过对相关词汇进行索引链接，能够使带链接词汇或语句指向文本中其它段落、注解或文本。用户能够沿着超级文本中索引链接跳转阅读，也能够随时返回到原来阅读之处。超级文本出现，使计算机中文本展现出崭新面目。HTTP：超文本传输协议Protocol，一组在网络上发送信息规则和约定。这些规则控制在网络设备间交换消息内容、格式、定时、次序和错误控制。通俗说就是不一样网络程序交流语言，我们常见OICQ使用UDP协议、ICQ使用TCP协议、E-mail程序使用POP3和SMTP协议，正像我们国人使用汉语一样Web特点和结构网页设计与制作99/42/10/10Protocol，一组在网络上发送信息规则和约定。这些规则控制在网络设备间交换消息内容、格式、定时、次序和错误控制。通俗说就是不一样网络程序交流语言，我们常见OICQ使用UDP协议、ICQ使用TCP协议、E-mail程序使用POP3和SMTP协议，正像我们国人使用汉语一样Web特点和结构网页设计与制作1010/42/10/10HTMLHTML（Hypertext

Markup

Language，超级文本标识语言）一个用来制作网络中超级文本简单标识语言。它是在文本文件基础上加上一系列标识，用以描述其颜色、字体、文字大小和格式，再加上声音、图像、动画甚至视频等形成精彩页面。严格来说，

HTML语言并不是一个编程语言，只是一些能让浏览器看懂标识。当用户浏览WWW上包含HTML语言标签网页时，浏览器会“翻译”由这些HTML语言标签提供网页结构、外观和内容信息，并

按照一定格式在屏幕上显示出来。HTML是在客户端被执行，它

包含许多HTML标签（标识），这些标签都包含在“<”和“>”符号里，而且大部分是成对出现。2.WWW特点分布式信息资源。统一用户界面。支持各种信息资源和各种媒体演播。广泛用途。Web特点和结构网页设计与制作1111/42/10/102.WWW特点分布式信息资源。统一用户界面。支持各种信息资源和各种媒体演播。广泛用途。3.WWW结构WWW是成千上万个网站连結而成页面式网络信息系统。WWW采取“客户机/服务器”结构。Web特点和结构3.WWW结构WWW是成千上万个网站连結而成页面式网络信息系统。WWW采取“客户机/服务器”结构。网页设计与制作1212/42/10/10网页存放在被称为Web服务器(Web

Server)计算机上，等候用户访问。Web特点和结构网页存放在被称为Web服务器(Web

Server)计算机上，等候用户访问。网页设计与制作1313/42/10/10Web特点和结构网页设计与制作1414/42/10/104.Web技术经历了3个发展阶段第一代，提供对静态网页管理和访问。第二代，提供对动态网页访问和显示。第三代，除动态网页生成和访问之外，还提供基于Web联机事务处理能力。l

静态网页是从放置到服务器以后，直到发送给浏览器不会发生更改网页，通惯用HTML语言

编写其代码，保留为.htm文件。l

动态网页是在发送到浏览器之前由应用程序服务器修改网页。动态网页源文件可用HTML语言和VBscript或Javascript等脚本语言编写，保留为.asp文件，也称为Web应用程序。静态网页指是HTML网页，即用HTML语言编写网页，它是全部其它网页技术基础。网页中全部对象，包含文字、图片、超链接、Flash动画、表格、列表等都需要经过HTML才能展现出来。Web特点和结构网页设计与制作1515/42/10/10静态网页指是HTML网页，即用HTML语言编写网页，它是全部其它网页技术基础。网页中全部对象，包含文字、图片、超链接、

Flash动画、表格、列表等都需要经过HTML才能展现出来。Web

应用程序是用HTML语言和VBscript或Javascript等脚本语言编写动态网页源文件，也称为服务器端脚本。当从服务器请求这么一个页时，Web服务器先将该页传递给应用程序服务器进行处理，然后再将该页发送给浏览器。应用程序服务器是一个软件，它帮助Web服务器处理Web

应用程序，方便生成动态网页。

ASP（Active

Server

Page动态服务器网页）是Windows系统所包含应用程序服务器软件。Web特点和结构网页设计与制作1616/42/10/10

Web应用程序是用HTML语言和VBscript或Javascript

等脚本语言编写动态网页源文件，也称为服务器端脚本。当从服务器请求这么一个页时，Web服务器先将该页传递给应用程序服务器进行处理，然后再将该页发送给浏览器。

应用程序服务器是一个软件，它帮助Web服务器处理Web应用程序，方便生成动态网页。

ASP（Active

Server

Page动态服务器网页）是Windows系统所包含应用程序服务器软件。Web特点和结构网页设计与制作1717/42/10/10动态服务器网页是在WWW服务器端动态生成网页技术，ASP、JSP、PHP等都属于动态服务器网页技术。动态服务器网页普通都需要经过访问数据库（或文本类文件）来实现网页生成，系统中有一台单独数据库服务器，也能够将WWW服务器与数据库服

务器合二为一。二、Web服务器配置1.什么是Web

服务器？Web

服务器也称为HTTP

服务器，它是响应来自浏览器请求，而且发送出网页软件。当访问者在浏览器地址文本框中输入一个URL，或者单击在浏览器中打开网页上某个链接时，便生成一个网页请求。常见Web

服务器有：Microsoft

Internet

Information

Server（IIS）Microsoft

Personal

Web

Server(PWS)Apache

HTTP

ServerNetscape

Enterprise

ServerSun

ONE

Web

Server。Web服务器配置网页设计与制作1818/42/10/10二、Web服务器配置1.什么是Web服务器？Web服务器也称为HTTP服务器，它是响应来自浏览器请求，而且发送出网页软件。当访问者在浏览器地址文本框中输入一个URL，或者单击在浏览器中打开网页上某个链接时，便生成一个网页请求。常见Web服务器有：l

Microsoft

Internet

Information

Server（IIS）l

Microsoft

Personal

Web

Server(PWS)l

Apache

HTTP

Serverl

Netscape

Enterprise

Serverl

Sun

ONE

Web

Server。2.五种常见Web应用程序服务器Dreamweaver能够使用以下五种服务器技术任何一个设计Web

应用程序：ColdFusion（可用于Windows和Solaris操作系统平台动态服务器网页技术）ASP

（Active

ServerPage：动态服务器网页技术）ASP.NET

（.NET平台动态服务器网页技术）JSP

（Java

Server

Page

：Java服务器网页技术）PHP

（Personal

Home

Page：个人主页技术）每种技术都与Dreamweaver

中一个文档类型相对应。Web服务器配置网页设计与制作1919/42/10/102.五种常见Web应用程序服务器Dreamweaver能够使用以下五种服务器技术任何一个设计Web应用程序：l

ColdFusion（可用于Windows和Solaris操作系统平台动态服务器网页技术）l

ASP

（Active

Server

Page：动态服务器网页技术）l

ASP.NET

（.NET平台动态服务器网页技术）l

JSP

（Java

Server

Page：Java服务器网页技术）l

PHP

（PersonalHome

Page：个人主页技术）每种技术都与Dreamweaver中一个文档类型相对应。Web服务器配置ASP、JSP、PHP比较网页设计与制作2020/42/10/10选择哪一个Web

应用程序技术取决于多个原因，其中包含对各种脚本语言熟悉程度以及要使用应用程序服务器。假如采取ColdFusion

MX服务器，则能够选择ColdFusion

。假如采取IIS服务器，则能够选择ASP或ASP.NET。假如采取PHP服务器，则能够选择PHP；假如采取JSP服务器，则能够选择JSP。本课程选择了WindowsASP动态网页技术。Web服务器配置选择哪一个Web应用程序技术取决于多个原因，其中包含对各种脚本语言熟悉程度以及要使用应用程序服务器。n假如采取ColdFusion

MX服务器，则能够选择

ColdFusion。n假如采取IIS服务器，则能够选择

ASP或ASP.NET。n假如采取PHP服务器，则能够选择

PHP；n假如采取JSP服务器，则能够选择

JSP。本课程选择了WindowsASP动态网页技术。网页设计与制作2121/42/10/10Web服务器配置3.两种Web系统配置方案网页设计与制作2222/42/10/10一个配置是将IIS或PWS安装在地Windows计算机硬盘中，另一个将IIS或PWS安装在远程Windows

算机硬盘中。Web服务器配置网页设计与制作2323/42/10/104.怎样用Windows操作系统建立Web服务器？能够安装以下系统之一：Windows/Server和IIS

5.0。Windows

XP和IIS

5.1。Windows98/Professional和PWS。其中IIS：Internet

Information

Service（Internet信息服务器）；PWS：Personal

WebService（个人Web服务）。Windows/Server和IIS

5.0安装在Windows

Server软件里带有IIS

5.0。插入Windows

Server光盘，自动开启，按照提醒进行安装，同时自动安装IIS

5.0

。Windows

Server不自动安装IIS。若要安装IIS，能够单击“开始”￫“程序”￫“管理工具”￫“配置服务器”，选择“高级”选项，打开显示可供安装组件对话框；也能够在控制面板中使用“添加/删除程序”。Web服务器配置网页设计与制作2424/42/10/10Windows/Server和IIS

5.0安装l在Windows

Server软件里带有IIS

5.0。插入Windows

Server光盘，自动开启，按照提醒进行安装，同时自动安装IIS

5.0。l

Windows

Server不自动安装IIS。若要安装IIS，能够单击“开始”￫“程序”￫“管理工具”￫“配置服务器”，选择“高级”选项，打开显示可供安装组件对话框；也能够在控制面板中使用“添加/删除程序”。注意，因为ASP处理程序会伴随IIS自动安装。所以，运行ASP应用程序服务器会伴随Web服务器建立而自动地建立。Web服务器配置注意，因为ASP处理程序会伴随IIS自动安装。所以，运行ASP应用程序服务器会伴随Web服务器建立而自动地建立。网页设计与制作2525/42/10/10怎样在Windows

XP中安装IIS（1）单击“开始”>“控制面板”，双击“添加或删除程序”；（2）单击“添加/删除Windows

组件”；（3）出现“Windows

组件向导”，单击“下一步”；（4）在“Windows

组件”列表中，选中“Internet

信息服务(IIS)”；（5）单击“下一步”，然后依据提醒操作。在安装后，能够开启浏览器，输入地址：localhost。若显示其网页，则表示IIS正常安装。Web服务器配置怎样在Windows

XP中安装IIS单击“开始”>“控制面板”，双击“添加或删除程序”；单击“添加/删除Windows组件”；出现“Windows组件向导”，单击“下一步”；在“Windows组件”列表中，选中

“Internet信息服务(IIS)”；单击“下一步”，然后依据提醒操作。在安装后，能够开启浏览器，输入地址：localhost。若显示其网页，则表示IIS正常安装。演示网页设计与制作2626/42/10/105.服务器上根文件夹Inetpub\wwwroot\假定读者在计算机D:盘中安装了Windows

XP操作系统。那末，该系统会自动创建根文件夹D:\Inetpub\wwwroot\。默认情况下，Web

服务器从D:\Inetpub\wwwroot

文件夹提供网页。Web

服务器将依据来自Web

浏览器HTTP

请求，提供此文件夹中任何页或其子文件夹中任何页。在D:\Inetpub\wwwroot

文件夹中能够创建子文件夹，比如“MyPage”用以存放一组网页源文件。Web服务器配置5.服务器上根文件夹Inetpub\wwwroot\假定读者在计算机D:盘中安装了Windows

XP操作系统。那末，该系统会自动创建根文件夹D:\Inetpub\wwwroot\。默认情况下，Web服务器从D:\Inetpub\wwwroot文件夹提供网页。Web服务器将依据来自Web浏览器HTTP请求，提供此文件夹中任何页或其子文件夹中任何页。在D:\Inetpub\wwwroot文件夹中能够创建子文件夹，比如“MyPage”用以存放一组网页源文件。演示网页设计与制作2727/42/10/106.怎样设置默认网站主目录（根文件夹）（1）单击“开始”￫“控制面板”￫“性能和维护”￫“管理工具”￫“Internet

信息服务”；展开“当地计算机”列表，展开“Web站点”文件夹，然后展开“默认Web站点”文件夹，右击“默认网站”；单击“属性”。（2）输入默认网站IP地址（若本机作Web服务器，则用）。（3）输入默认网站主目录，以及为该文件夹设置脚本权限。现在已完成了Web服务器配置，它将依据浏览器请求，提供根文件夹中网页。假如建立网页文件test.htm，将它存放到本机默认网站主目录d:\inetpub\wwwroot下。那末，其浏览地址为：\test.htm。Web服务器配置6.怎样设置默认网站主目录（根文件夹）单击“开始”￫“控制面板”￫“性能和维护”￫“管理工具

”￫“Internet信息服务”；展开“当地计算机”列表，展开

“Web站点”文件夹，然后展开“默认Web站点”文件夹，右击

“默认网站”；单击“属性”。输入默认网站IP地址（若本机作Web服务器，则用）。输入默认网站主目录，以及为该文件夹设置脚本权限。现在已完成了Web服务器配置，它将依据浏览器请求，提供根文件夹中网页。假如建立网页文件test.htm，将它存放到本机默认网站主目录d:\inetpub\wwwroot下。那末，其浏览地址为：

\test.htm。演示网页设计与制作2828/42/10/10三、怎样创建虚拟目录1.存放网页源文件两种做法将网页文件保留到默认网站主目录里，如上节所述，默认网站主目录直接采取Windows系统已经建立d:\Inetpub\wwwroot根文件夹。将网页文件保留到默认网站主目录之外。这就需要建立一个虚拟目录，在建立虚拟目录过程中指定虚拟目录及其实际目录，从而建立虚拟目录和实际目录联络。创建虚拟目录网页设计与制作2929/42/10/10三、怎样创建虚拟目录1.存放网页源文件两种做法将网页文件保留到默认网站主目录里，如上节所述，默认网站主目录直接采取Windows系统已经建立d:\Inetpub\wwwroot根文件夹。将网页文件保留到默认网站主目录之外。这就需要建立一个虚拟目录，在建立虚拟目录过程中指定虚拟目录及其实际目录，从而建立虚拟目录和实际目录联络。2.什麽是虚拟目录虚拟目录是实际目录别名，它代表存放网页实际目录，方便用在网址中代替实际目录。虚拟目录名称能够与实际目录名称相同，也能够不一样。虚拟目录在磁盘目录中并不存在，实际目录是存放网页内容目录。比如，存放网页文件test.htm实际目录为d:\x1，若为该目录设置一个别名，即虚拟目录zhang，则虚拟目录Zhang就能够用在网址

\zhang\test.htm中代表存放网页实际目录d:\x1。创建虚拟目录网页设计与制作3030/42/10/102.什麽是虚拟目录虚拟目录是实际目录别名，它代表存放网页实际目录，方便用在网址中代替实际目录。虚拟目录名称能够与实际目录名称相同，也能够不一样。虚拟目录在磁盘目录中并不存在，实际目录是存放网页内容目录。比如，存放网页文件test.htm实际目录为d:\x1，若为该目录设置一个别名，即虚拟目录zhang，则虚拟目录Zhang就能够用在网址\zhang\test.htm中代表存放网页实际目录d:\x1。3.设置默认网站虚拟目录单击“开始”￫“控制面板”￫“性能和维护”￫“管理工具”￫“Internet

信息服务”；展开，右击“默认网站”；单击“新建”>“虚拟目录”。详细创建过程参见教材图1-7~图1-12。创建虚拟目录3.设置默认网站虚拟目录单击“开始”￫“控制面板”￫“性能和维护”￫“管理工具”￫“Internet信息服务”；展开，右击“默认网站”；单击“新建”>“虚拟目录”。详细创建过程参见教材图1-7~图1-12。演示网页设计与制作3131/42/10/10四、网页浏览器IE配置浏览器IE配置能够使用浏览器“工具”和“Internet选项”菜单命令进行设置，也能够经过修改操作系统注册表进行设置。本节介绍怎样使用“工具”和“Internet选项”进行以下设置。1.设置Internet连接（1）开启Internet

Explorer。（2）单击“工具”￫“Internet

选项”。出现Internet

选项对话框。（3）单击“连接”选项卡￫单击“建立连接”。（4）按照屏幕上提醒操作。浏览器IE配置四、网页浏览器IE配置浏览器IE配置能够使用浏览器“工具”和“Internet选项”菜单命令进行设置，也能够经过修改操作系统注册表进行设置。本节介绍怎样使用“工具”和“Internet选项”进行以下设置。1.设置Internet连接开启Internet

Explorer。单击“工具”￫“Internet选项”。出现

Internet选项对话框。单击“连接”选项卡￫单击“建立连接”。按照屏幕上提醒操作。演示网页设计与制作3232/42/10/10浏览器IE配置2.设置起始页面单击IE菜单栏中“工具”>“Internet选项

”出现Internet选项对话框。输入“主页”“地址”，比如

，单击“确定”。3.设置IE缓存在“Internet选项”对话框中，单击“设置”，出现“设置”对话框。能够设置IE缓存

“使用磁盘空间”等。演示网页设计与制作3333/42/10/10浏览器IE配置4.IE安全设置在“Internet选项”对话框中，单击“安全”，出现“安全设置”对话框。其中主要包含ActiveX控件和插件、Java权限、JavaApplet和脚本、Cookies、文件下载或用户验证设置，可选择“禁用”或“启用”等。5.调整自动完成功效设置在IE“工具”菜单上，单击“Internet选项”；单击“内容”标签；在“个人信息”区域，单击“自动完成”；选中要应用“自动完成”功效选项前面复选框。演示网页设计与制作3434/42/10/106.去除已访问过网页为了加紧浏览速度，IE会自动把浏览过网页保留在系统盘＼Temporary

Internet

Files文件夹内。当用户不再需要这些网页时，在该文件夹下全选且删除即可。或者，在“常规”标签下单击“Internet暂时文件”项目标“删除文件”按钮，选中“删除全部脱