第1章 网页综述

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,中国高等院校计算机基础教育课程体系规划教材,教师：易唐唐,系部：信息技术系,基于,Web,标准的网页设计与制作,本书目录,第一章 网页设计概述,第二章,HTML,、,XHTML,和,Web,标准,第三章,HTML,标记,第四章,CSS,第五章,Fireworks,第六章 网站开发和网页设计的过程,第七章,JavaScript,第一章,网页与网站基础,本章要点,网页和网站的关系,Web,服务器和浏览器,动态网页和静态网页,域名与主机的关系,URL,的结构,internet,Internet,是由遍布全世界的各种各样的网络通过,TCP/IP,协议连接成的一个松散结合的全球网，它使网络上的各台计算机（,Internet,上称为主机，即,host,）可以互相交换信息。,Internet,为用户提供了各种各样的服务，如,WWW,，,Email,，,FTP,，,即时通信,等。,Google earth,WWW,WWW,的含义是全球信息网（,World Wide Web,），简称为,Web,或“万维网”。它是一个基于超文本,(hypertext),方式的,信息查询工具,，通过,http,协议传输超文本信息。是由欧洲核子物理研究中心（,CERN,）研制的。,WWW,将位于全世界,Internet,上不同网址的相关数据信息有机地编织在一起，通过,浏览器,（,browser,）提供一种友好的信息查询界面。,WWW,特点,WWW,具有三个统一：,1.,统一的,资源定位,方式：,URL,（,统一资源定位器，即网址）。,2.,统一的,资源访问,方式：,HTTP,（超文本传输协议）。,3.,统一的,信息组织,方式：,HTML,（,超文本标记语言）。,网 页,网页即是,超文本,，是通过超文本标记语言,HTML,（,HypeText,Markup Language,）书写的一种,纯文本文件,，,客户通过浏览器看到的包含了如文字、图像、声音和动画等多媒体信息的每一个页面，其本质是一个纯文本文件。,浏览器对该纯文本文件进行了解释，才生成了多姿多彩的网页，除文本外，其它媒体素材（图像、声音、动画和影像等），都需要保存成单独的文件，通过,URL,嵌入到网页文件中。,可以看出，,WWW,服务主要是通过一个个多媒体网页提供给用户各种信息的,HTML,超文本标记语言,超文本标记语言,HTML,作为一种语言，它具有语言的一般特征，即它是一种符号系统，具有自己的词汇（符号）和语法（规则）。,所谓标记，就是,作记号,。如我们写文章时通常用大体字标记文章的标题，用换行空两格标记一个段落,所谓超文本，就是相比普通文本有超越的地方，如超文本可以通过超链接转到指定的某一页，而普通文本只能一页页翻，超文本还具有图像，视频，声音等元素，并能和用户交互，这些都是普通文本无法达到的,HTML,的历史,超文本标记语言,HTML,是一种建立超文本,/,超媒体文档的语言，它用标签标记文档中的文本及图像等各种元素，指示浏览器如何显示这些元素。,HTML,的发展历程如图所示,GML(1969),SGML,(1985),HTML,(1993),XML,(1998),XHTML,(2000),CML,VML,Generalized Markup Language,Standard Generalized Markup Language,Hyper Text Markup Language,eXtensible,Markup Language,HTML,与编程语言的区别,HTML,语言与编程语言有明显不同，首先它不是一种计算机编程语言，而是一种描述文档结构的语言，或者说,排版语言,；,其次,HTML,是,弱语法语言,，随便怎么写都可以，计算机尽力去理解执行，不理解的按原样显示，而编程语言是严格语法的语言，写错一点点计算机就不执行，报告错误；,再次,HTML,语言不像大多数编程语言一样需要编译成指令后执行，而是每次由浏览器,解释执行,。,网 站,一个网站对应磁盘上的一个,文件夹,，网站的所有网页和其他资源文件都会放在该文件夹下或其子文件夹下，,设计良好的网站通常是将网页文档及其它资源分门别类地保存在相应的文件夹中以方便管理和维护。,这些网页通过链接组织在一起，其中有个网页称为,首页,，常命名为,index.htm,，必须放在网站的根目录下。,网页中所需要的图片文件一般单独保存在该目录下一个叫,images,的文件夹下。,网站结构,Wgzx,web,index.htm,images,style.css,about.html,h1.htm,h2.htm,h3.htm,首页文件的直接上级目录，是网站根目录,首页文件的间接上级目录，不是网站根目录,网站目录的建立,因此制作网站的第一步是在硬盘上新建一个文件夹，作为网站,根目录,，以后把这个目录上传到服务器上就可以了。由于我们制作网站一般需要用到,Dreamweaver,，所以还要配置网站在,Dreamweaver,下的开发环境，在,Dreamweaver,中新建站点，任意取一个站点名，把刚才新建的那个文件夹作为站点文件夹就可以了，这样站点目录内的,html,文件之间的链接会使用相对,Url,的形式。,示范,网站的特点,众多的网页,确定的主题,统一的风格、,便捷的导航、,栏目的分层,网站制作的流程：,确定站点的核心内容,网站的规划,网站外观的设计,网页具体制作,网站性能测试,网站发布,网站更新与维护。,网页和网站的制作工具,Adobe,的,Dreamweaver,CS3,Microsoft,的,Expression Web,VS,Web,服务器和浏览器,网页被放置在,Web,服务器上,用户通过,Url,请求,web,服务器时，,web,服务器把相应的网页传送到用户浏览器端,Web,服务器的作用：对于静态网页，,web,服务器仅仅是定位到网站对应的目录，找到每次请求的网页传送给客户端。,对于动态网页，,web,服务器找到该网页后要先对动态网页中的,服务器端程序代码,进行执行，生成静态网页代码再传送给客户端浏览器。,Web,服务器,由于,web,服务器对静态网页起的只是一个查找和传输的作用，因此我们测试静态网页时可不安装,web,服务器，直接找到该网站对应的目录双击网页文件预览测试，,而测试或运行动态网页则一定要在本机上安装,web,服务器,(,如,IIS),，因为动态网页要经过,web,服务器解释执行生成,html,文档才能被浏览器解释,浏览器,浏览器：用户浏览网页所用,浏览器的本质：解释,html,代码生成我们看到的网页,目前常见的浏览器（按使用量多少排列）有：,IE6,、,IE7,、,IE8,、,Firefox,3,、,Safari 4,、,Google Chrome 2,、,Opera 10,及,Netscape Navigator 9,浏览器的,logo,IE7&IE8,Firefox,3Netscape Navigator 9,Opera 10 Safari 4 Google Chrome 2,静态网页和动态网页,静态网页是,不包含服务器端代码,的,html,文件，,web,服务器只是负责把静态网页发送给浏览器，由浏览器解释执行,动态网页中含有服务器端代码，需要先由,web,服务器对这些服务器端代码进行解释执行生成客户端代码后再发送给客户端浏览器,动态网页的特征,同一个网页根据每次请求的不同，可每次显示不同的内容,因为要显示不同的内容，所以往往需要,数据库,做支持,从网页的源代码看，动态网页中含有服务器端代码，后缀名不能是,.,htm,域名、,ip,和主机,域名和主机的关系：多对一,即在一台主机上可建立多个网站，这些网站的存放方式称为“,虚拟主机,”，通过,web,服务器上设置“主机头”进行区别。,域名作用有二，一是将域名发送给,DNS,服务器解析,得到,web,服务器的,IP,地址,以进行连接，二是将域名信息发送给,web,服务器，通过域名与,web,服务器上设置的“主机头”进行匹配确认客户端,请求的是哪个网站,，若客户端没有发送域名信息给,web,服务器，例如直接输入,ip,，则,web,服务器将打开默认网站。,域名的作用,1.,方便记忆,IP,地址,2.,作为主机头信息识别请求的网站,URL,URL,（,Universal Resource Locator,）是统一资源定位器的英文缩写，每个站点或站点上的每个文件（网页及所有资源文件）都有一个唯一的地址，浏览器是通过,URL,来定位目标信息的,URL,的一般格式为：,协议名,:/,主机名,:,端口号,/,文件夹名,/,文件名,协议名一般有：,http,（超文本传输协议，用于传送网页）；,ftp,（文件传输协议，用于传送文件）,Url,的举例,http:/