《Web网站架构》PPT课件.ppt

第一章 Web网站架构与HTML基础,王张宜 武汉大学 计算机学院,内容提要,Web的特点和结构Web服务器的配置创建虚拟目录HTML基础,2023/7/8,网页设计与制作,2,Web的特点和结构,本章介绍WWW的概念、Web服务器配置、创建虚拟目录和浏览器IE的配置。一、WWW的概念1.什么是WWW？WWW是World Wide Web的缩写，简称为Web（万维网）。WWW起源于1989年3月，是由欧洲粒子物理实验室CERN(the European Laboratory for Particle Physics)开发的主从结构分布式（“客户机/服务器”模式）超文本系统。1992年1月，Web的第一个版本在瑞士日内瓦问世。,2023/7/8,网页设计与制作,3,Web的特点和结构,WWW是一个全球性的信息系统，使计算机能够在Internet上相互传送基于超媒体的数据信息。WWW也可以用来建立Intranet（企业内部网）的信息系统。WWW具有三个统一：1.统一的资源命名方式：URL（统一资源定位符，即网址）。2.统一的资源访问方式：HTTP（超文本传输协议）。3.统一的信息组织方式：HTML（超文本标记语言）。,2023/7/8,网页设计与制作,4,Web的特点和结构,URL（统一资源定位符）主要用来指明通信协议和地址的方式，以取得网络上的各种服务，它包括通信协议（Protocol）、主机名、所要访问文件的路径和文件名等几个部分。统一资源定位符（URL）是用于完整地描述Internet上网页和其他资源的地址的一种标识方法。Internet上的每一个网页都具有一个唯一的名称标识，通常称之为URL地址，这种地址可以是本地磁盘，也可以是局域网上的某一台计算机，更多的是Internet上的站点。简单地说，URL就是Web地址，俗称“网址”。,2023/7/8,网页设计与制作,5,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（路径）：由零或多个“/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。,2023/7/8,网页设计与制作,6,Web的特点和结构,URL（统一资源定位符）示例http:/zh.wikipedia.org:80/wiki/Special:Search?search=铁路&go=Gohttp，是协议；，是服务器；80，是服务器上的网络端口号；/wiki/Special:Search，是路径；?search=铁路&go=Go，是询问。,2023/7/8,网页设计与制作,7,Web的特点和结构,超级文本超级文本（Hypertext）与普通文本不同，它是一种使用户与计算机之间能够更加密切交流的文本显示技术，它通过对相关词汇进行索引链接，可以使带链接的词汇或语句指向文本中的其他段落、注解或文本。用户可以沿着超级文本中的索引链接跳转阅读，也可以随时返回到原来的阅读之处。超级文本的出现，使计算机中的文本呈现出崭新的面目。HTTP：超文本传输协议,2023/7/8,网页设计与制作,8,Web的特点和结构,Protocol，一组在网络上发送信息的规则和约定。这些规则控制在网络设备间交换消息的内容、格式、定时、顺序和错误控制。通俗的说就是不同的网络程序的交流语言，我们常见的OICQ使用UDP协议、ICQ使用TCP协议、E-mail程序使用POP3和SMTP协议，正像我们国人使用汉语一样.,2023/7/8,网页设计与制作,9,Web的特点和结构,HTMLHTML（Hypertext Markup Language，超级文本标记语言）一种用来制作网络中超级文本的简单标记语言。它是在文本文件的基础上加上一系列标记，用以描述其颜色、字体、文字大小和格式，再加上声音、图像、动画甚至视频等形成精彩的页面。严格来说，HTML语言并不是一种编程语言，只是一些能让浏览器看懂的标记。当用户浏览WWW上包含HTML语言标签的网页时，浏览器会“翻译”由这些HTML语言标签提供的网页结构、外观和内容的信息，并按照一定的格式在屏幕上显示出来。HTML是在客户端被执行的，它包含许多HTML标签（标记），这些标签都包括在“”符号里，并且大部分是成对出现的。,2023/7/8,网页设计与制作,10,Web的特点和结构,2.WWW的特点分布式的信息资源。统一的用户界面。支持各种信息资源和各种媒体的演播。广泛的用途。,2023/7/8,网页设计与制作,11,Web的特点和结构,3.WWW的结构WWW是成千上万个网站连結而成的页面式网络信息系统。WWW采用“客户机/服务器”结构。,2023/7/8,网页设计与制作,12,Web的特点和结构,网页存放在被称为Web服务器(Web Server)的计算机上，等待用户访问。,2023/7/8,网页设计与制作,13,Web的特点和结构,4.Web技术经历了3个发展阶段第一代，提供对静态网页的管理和访问。第二代，提供对动态网页的访问和显示。第三代，除动态网页生成和访问之外，还提供基于Web的联机事务处理能力。静态网页是从放置到服务器以后，直到发送给浏览器不会发生更改的网页，通常用HTML语言编写其代码，保存为.htm文件。动态网页是在发送到浏览器之前由应用程序服务器修改的网页。动态网页的源文件可用HTML语言和VBScript或JavaScript等脚本语言编写，保存为.asp文件，也称为Web应用程序。,2023/7/8,网页设计与制作,14,Web的特点和结构,静态网页指的是HTML网页，即用HTML语言编写的网页，它是所有其他网页技术的基础。网页中所有的对象，包括文字、图片、超链接、Flash动画、表格、列表等都需要通过HTML才能展现出来。,2023/7/8,网页设计与制作,15,Web的特点和结构,Web 应用程序是用HTML语言和VBScript或JavaScript等脚本语言编写的动态网页源文件，也称为服务器端脚本。当从服务器请求这样一个页时，Web服务器先将该页传递给应用程序服务器进行处理，然后再将该页发送给浏览器。应用程序服务器是一种软件，它帮助Web服务器处理Web 应用程序，以便生成动态网页。ASP（Active Server Page动态服务器网页）是Windows系统所包含的应用程序服务器软件。,2023/7/8,网页设计与制作,16,Web的特点和结构,动态服务器网页是在WWW服务器端动态生成网页的技术，ASP、JSP、PHP等都属于动态服务器网页技术。动态服务器网页一般都需要通过访问数据库（或文本类文件）来实现网页的生成，系统中有一台单独的数据库服务器，也可以将WWW服务器与数据库服务器合二为一。,2023/7/8,网页设计与制作,17,Web服务器配置,二、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。,2023/7/8,网页设计与制作,18,Web服务器配置,2.五种常见的Web应用程序服务器Dreamweaver可以使用以下五种服务器技术的任何一种 设计Web 应用程序：ColdFusion（可用于Windows和Solaris操作系统平台的动态服务器网页技术）ASP（Active Server Page：动态服务器网页技术）ASP.NET（.NET平台的动态服务器网页技术）JSP（Java Server Page：Java服务器网页技术）PHP（Personal Home Page：个人主页技术）每种技术都与 Dreamweaver 中的一种文档类型相对应。,2023/7/8,网页设计与制作,19,Web服务器配置,ASP、JSP、PHP的比较,2023/7/8,网页设计与制作,20,Web服务器配置,选择哪一种Web 应用程序技术取决于多个因素，其中包括对各种脚本语言的熟悉程度以及要使用的应用程序服务器。如果采用ColdFusionMX服务器，则可以选择 ColdFusion。如果采用IIS服务器，则可以选择 ASP或ASP.NET。如果采用PHP服务器，则可以选择 PHP；如果采用JSP服务器，则可以选择 JSP。本课程选择了Windows的ASP动态网页技术。,2023/7/8,网页设计与制作,21,Web服务器配置,3.两种Web系统配置方案,一种配置是将 IIS或PWS安装在本地Windows 计算机硬盘中，另一种是将IIS或PWS安装在远程Windows计算机硬盘中。,2023/7/8,网页设计与制作,22,Web服务器配置,4.如何用Windows操作系统建立Web服务器？可以安装下列系统之一：1Windows 2000/2003 Server和IIS 5.0。2Windows XP和IIS 5.1。3Windows 98/2000 Professional和PWS。其中 IIS：Internet Information Service（Internet信息服务器）；PWS：Personal Web Service（个人Web服务）。,2023/7/8,网页设计与制作,23,Web服务器配置,Windows2000/2003 Server和IIS 5.0安装 在Windows2000 Server软件里带有IIS 5.0。插入Windows2000 Server光盘，自动启动，按照提示进行安装，同时自动安装IIS 5.0。Windows 2003 Server不自动安装IIS。若要安装IIS，可以单击“开始”“程序”“管理工具”“配置服务器”，选择“高级”选项，打开显示可供安装的组件的对话框；也可以在控制面板中使用“添加/删除程序”。,2023/7/8,网页设计与制作,24,Web服务器配置,注意，由于ASP处理程序会随着IIS自动安装。所以，运行ASP的应用程序服务器会随着Web服务器的建立而自动地建立。,2023/7/8,网页设计与制作,25,Web服务器配置,如何在Windows XP中安装IIS（1）单击“开始”“控制面板”，双击“添加或删除程序”；（2）单击“添加/删除 Windows 组件”；（3）出现“Windows 组件向导”，单击“下一步”；（4）在“Windows 组件”列表中，选中“Internet 信息服务(IIS)”；（5）单击“下一步”，然后根据提示操作。在安装后，可以启动浏览器，输入地址：localhost。若显示其网页，则表示IIS正常安装。,演示,2023/7/8,网页设计与制作,26,Web服务器配置,5.服务器上的根文件夹Inetpubwwwroot假定读者在计算机的D:盘中安装了Windows XP操作系统。那末，该系统会自动创建根文件夹D:Inetpubwwwroot。默认情况下，Web 服务器从 D:Inetpubwwwroot 文件夹提供网页。Web 服务器将根据来自 Web 浏览器的 HTTP 请求，提供此文件夹中的任何页或其子文件夹中的任何页。在D:Inetpubwwwroot 文件夹中可以创建子文件夹，例如“MyPage”用以存放一组网页源文件。,演示,2023/7/8,网页设计与制作,27,Web服务器配置,6.如何设置默认网站主目录（根文件夹）（1）单击“开始”“控制面板”“性能和维护”“管理工具”“Internet 信息服务”；展开“本地计算机”列表，展开“Web站点”文件夹，然后展开“默认Web站点”文件夹，右击“默认网站”；单击“属性”。（2）输入默认网站IP地址（若本机作Web服务器，则用）。（3）输入默认网站的主目录，以及为该文件夹设置脚本权限。现在已完成了Web服务器的配置，它将根据浏览器的请求，提供根文件夹中的网页。假如建立网页文件test.htm，将它存放到本机默认网站的主目录d:inetpubwwwroot下。那末，其浏览地址为：127.0.0.1 test.htm。,演示,2023/7/8,网页设计与制作,28,创建虚拟目录,三、如何创建虚拟目录 1.存放网页源文件的两种做法将网页文件保存到默认网站的主目录里，如上节所述，默认网站的主目录直接采用Windows系统已经建立的d:Inetpubwwwroot根文件夹。将网页文件保存到默认网站的主目录之外。这就需要建立一个虚拟目录，在建立虚拟目录的过程中指定虚拟目录及其实际目录，从而建立虚拟目录和实际目录的联系。,2023/7/8,网页设计与制作,29,创建虚拟目录,2.什麽是虚拟目录虚拟目录是实际目录的别名，它代表存放网页的实际目录，以便用在网址中代替实际目录。虚拟目录的名称可以与实际目录的名称相同，也可以不同。虚拟目录在磁盘目录中并不存在，实际目录是存放网页内容的目录。例如，存放网页文件 test.htm的实际目录为d:x1，若为该目录设置一个别名，即虚拟目录zhang，则虚拟目录Zhang就可以用在网址127.0.0.1zhangtest.htm中代表存放网页的实际目录d:x1。,2023/7/8,网页设计与制作,30,创建虚拟目录,3.设置默认网站的虚拟目录单击“开始”“控制面板”“性能和维护”“管理工具”“Internet 信息服务”；展开，右击“默认网站”；单击“新建”“虚拟目录”。详细创建过程参见教材图1-7图1-12。,演示,2023/7/8,网页设计与制作,31,浏览器IE的配置,四、网页浏览器IE的配置 浏览器IE的配置可以使用浏览器的“工具”和“Internet选项”菜单命令进行设置，也可以通过修改操作系统的注册表进行设置。本节介绍如何使用“工具”和“Internet选项”进行下列设置。1.设置Internet连接（1）启动Internet Explorer。（2）单击“工具”“Internet 选项”。出现Internet 选项对话框。（3）单击“连接”选项卡单击“建立连接”。（4）按照屏幕上的提示操作。,演示,2023/7/8,网页设计与制作,32,浏览器IE的配置,2.设置起始页面（1）单击IE菜单栏中的“工具”“Internet选项”出现Internet选项对话框。（2）输入“主页”的“地址”，例如，单击“确定”。3.设置IE缓存 在“Internet选项”对话框中，单击“设置”，出现“设置”对话框。可以设置IE缓存“使用的磁盘空间”等。,演示,2023/7/8,网页设计与制作,33,浏览器IE的配置,4.IE安全设置 在“Internet选项”对话框中，单击“安全”，出现“安全设置”对话框。其中主要包括ActiveX控件和插件、Java权限、JavaApplet和脚本、Cookies、文件下载或用户验证设置，可选择“禁用”或“启用”等。5.调整自动完成功能的设置 在IE的“工具”菜单上，单击“Internet选项”；单击“内容”标签；在“个人信息”区域，单击“自动完成”；选中要应用“自动完成”功能的选项前面的复选框。,演示,2023/7/8,网页设计与制作,34,浏览器IE的配置,6.清除已访问过的网页 为了加快浏览速度，IE会自动把浏览过的网页保存在系统盘的Temporary Internet Files文件夹内。当用户不再需要这些网页时，在该文件夹下全选且删除即可。或者，在“常规”标签下单击“Internet临时文件”项目的“删除文件”按钮，选中“删除所有脱机内容”，单击“确定”按钮即可。这种方法不太彻底，还会留少许Cookies在文件夹内。在“常规”标签下，“删除文件”按钮旁边还有一个“删除Cookies”按钮，通过它可以很方便地删除遗留的Cookies。Cookies（小甜饼）是客户端逐块保存用户信息的小文本文件。,演示,2023/7/8,网页设计与制作,35,WWW技术简介,五、如何设计网页1.网站的分类资讯类站点资讯和形象相结合的网站形象类网站.网页设计的步骤设计版面布局排放文字和图片,2023/7/8,网页设计与制作,36,WWW技术简介,五、如何设计网页.网页设计的基本原则统一：网页的整体性、一致性连贯：页面间的相互关系分割：页面分成若干小块对比：设计更醒目和谐：页面美观,2023/7/8,网页设计与制作,37,网页美的标准,简洁实用使用方便整体性好网站形象突出页面用色协调交互性强,2023/7/8,网页设计与制作,38,网站建设的一般流程,确定网站主题网站整体规划收集资料与素材设计网页图像制作网页开发动态网站模块发布与上传后期更新、维护与推广,2023/7/8,网页设计与制作,39,网页中的色彩搭配,三原色红、黄、蓝色彩搭配原则用一种色彩用两种色彩用一个色系色彩数以内背景和前文对比要大,2023/7/8,网页设计与制作,40,网页中的色彩搭配,红色：热情，易造成疲劳黄色：明朗、愉快蓝色：深远、公正、权威白色：朴实、纯洁紫色：优雅绿色：希望、和平、青春灰色：柔和,2023/7/8,网页设计与制作,41,2023/7/8,网页设计与制作,42,Thank You！Any Questions?,