《网页设计与制作》

网页设计与制作第1章网页设计与制作本课程知识结构第2章第3章第5章第6章第7章第4章第8章第1章网页设计的基础1.1认识网页和网站1.1.1网站概述网站（website）是指在互联网上根据一定的规则使用HTML等工具制作的用于展示特定内容的相关网页的集合。通过网站，用户可以发布自己想要公开的资讯，或者利用网站来提供相关的网络服务，也可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。网站通常是存放在一个固定的主机上的，这台主机称为网页服务器或web服务器，它以虚拟主机或主机托管的方式进行存放和运作。为了能使用户访问网站，这台服务器通常都拥有固定的网址或域名。返回第1章网页设计的基础1.1.1网站概述1.IP地址和域名为了可以在Internet上正确地将信息传送到目的地，每台主机都必须有一个唯一的网络地址，才不会在传输数据时出现混乱。1）IP地址在Internet中，每台连接到网络上的主机的唯一的网络地址就是IP地址。IP地址是一个点分十进制的结构，即将32位的二进制数利用点（.）分成4个部分，然后将每个部分转换成一个十进制数，如210.45.23.101。IP地址是由Internet名字与号码指派公司ICANN进行分配的。用户必须向ICANN申请IP地址，并在获取批准后，方可使用。凡是可以使用Internet域名的地方都可以使用IP地址。第1章网页设计的基础1.1.1网站概述2）域名在Internet上使用主机的IP地址来定位和标识主机，尽管为了方便记忆这些IP地址，采用了4段点分十进制的数字表示，但是要记住这些枯燥的数字，还是非常烦琐的。为了解决这个问题，提出了网络域名的概念。简单地说，域名就相当于每台服务器或主机的别名，Internet域名是Internet网络上的一个服务器或一个网络系统的名字。域名是唯一的。按照Internet的组织模式，对域名进行分级，一级域名主要包括.com（商业组织）、.net（网管部门）、.edu（教育机构）、.gov（政府机关）、.mil（军事机构）、.org（非营利性组织）等。大部分国家和地区都拥有自己的独立域名，如.cn（中国）、.us（美国）、.hk（香港）等。第1章网页设计的基础1.1.1网站概述2.URLURL（uniformresourcelocator，统一资源定位器）主要用来指明网络通信协议和地址的方式。因为用户想要获取Internet站点通信，获取服务器主机提供的网络服务，就必须通知服务器主机，通信使用的协议类型、主机地址以及资源文件的位置等信息。简单地说，URL就是Web地址，俗称“网址”。URL包括通信协议（protocol）、主机名、欲访问的资源文件的路径和资源文件名等几部分，如。第1章网页设计的基础1.1.2网页概述一个功能多样的网站是由一幅幅彩色网页组成的。网页是中最基本的文档，也是web站点中最重要的组成部分。用户想要浏览网页，其计算机中必须安装相应的网页浏览器，如Microsoft公司的IE浏览器。1．网页的定义一般地，网页是一个文本文档，其扩展名通常是.htm或.html等，通过网页制作HTML语言提供的超链接、表格、APDiv、框架等技术将文本、图像、动画、音频和视频等媒体嵌入其中，利用浏览器将网页中的内容展现给用户。网页常见的构成元素有文本、图像、动画、音频和视频。第1章网页设计的基础1.1.2网页概述1）文本文本是网页的基本元素之一，是网页信息的主要载体。文字、字母、数字和符号等都可以称为文本。文本是网页中表述信息最完备的元素，网页中的绝大多数内容都是通过文本来传递的，如图所示。第1章网页设计的基础1.1.2网页概述2）图像图像是网页中重要的元素，图像能传递文本无法表达的特定信息。一个良好的站点设计离不开图像的使用。图像既可以作为背景图片来使用，也可以作为说明事物的照片来使用，网页设计人员可以根据需要合理安排，如图所示。在网页中，常见的图像格式有GIF、JPG/JPEG、PNG等。第1章网页设计的基础1.1.2网页概述3）动画动画是网页的一个重要成分，在网页中使用动画可以使得页面效果更加活泼生动，引人入胜。常用的动画类型有GIF动画、Flash动画等，也可以使用编程的方法制作动画。目前网络上广泛使用的动画是Flash动画，并且逐渐成为网页内嵌动画的主流，如图所示。第1章网页设计的基础1.1.2网页概述4）音频音频文件是Internet中运用最早，也是运用最多的多媒体文件。目前音频文件在网络上被空前广泛地运用，类型多种多样，主要有MP3、ASF、WMA、APE、FLAC、WAV、RM和OGG等类型。（1）MP3具有压缩程度高、音质好的特点，当MP3的压缩率达到160Kp/s以上时就非常接近CD音质了，因此，MP3已成为最为流行的一种音频格式，如图所示。第1章网页设计的基础1.1.2网页概述（2）ASF和WMA都是Microsoft公司针对Real公司开发的新一代网络流行的数字音频压缩技术，这种压缩技术具有同时兼顾保真度和网络传输需求的特点，WMA音频正在被越来越多的人认可和支持。（3）APE和FLAC是两种无损压缩音频格式，与MP3、WMA等格式为了获取较小音频文件而允许损失一定的音质不同，APE和FLAC在保有原来的高品质音质基础上，将WAV文件压缩到原来大小的1/2左右，方便在网络上传输。另外，APE和FLAC还可以和WAV音频文件进行相互无损转换。（4）WAV是MicrosoftWindows系统提供的音频格式，这种格式可以和CD进行无损转换，并且已经成为事实上的通用音频格式。第1章网页设计的基础1.1.2网页概述（5）RM是目前网络上流行的主流多媒体文件格式之一，它是由RealNetworks公司制定的音频视频压缩规范，主要包含RealAudio、RealVideo和RealFlash，该类文件具有压缩比高、文件小、音频和视频同时能保持较好的质量等特点。由于使用流式（streaming）播放媒体技术，因此，RM文件只有使用RealNetworks公司开发的RealMedia引擎播放器（如RealPlayer等）才能正常播放，但它支持在网上实时收听音频及收看视频。（6）OGG是一种新的音频压缩格式，类似于MP3等现有的音乐格式。同时具备完全免费开放、没有专利限制和支持多声道等特点。第1章网页设计的基础1.1.2网页概述5）视频现代多媒体网页的一个重要特点就是在网页页面上添加视频，视频的加入可以大大增加站点的可读性。网页中的视频能够运行在网站上的视频文件类型正日益增多，主要有AVI、MPEG、DIVX、RealVideo、QuickTime、ASF以及WMV等。第1章网页设计的基础1.1.2网页概述（1）AVI(扩展名为.avi）音频视频交，即视频和音频交织在一起进行同步播放。这种视频格式的优点是图像质量好，可以跨多个平台使用；其缺点是体积过于庞大，而且压缩标准不统一，是目前视频文件的主流。（2）MPEG（扩展名为.mpeg、.mpg或.dat）动态图像专家组，是运动图像压缩算法的国际标准。它采用有损压缩的方法减少运动图像中的冗余信息，同时保证了动态图像应有的每秒30帧的刷新率。已被几乎所有的计算机平台共同支持。（3）DIVX是由MPEG4衍生出的一种视频编码压缩标准，它采用了MPEG4的压缩算法，同时又综合了MPEG4与MP3各方面的技术。通俗地说，就是使用DIVX压缩技术对DVD盘片的视频图像进行高质量压缩，同时用MP3或AC3对音频进行压缩，然后再将视频与音频合成并加上相应的外挂字幕文件而形成的视频格式。第1章网页设计的基础1.1.2网页概述（4）RealVideo（扩展名为.ra、.rm或.rmvb）文件是由RealNetworks公司开发的一种新型流式视频文件格式，它包含在RealNetworks公司所制定的音频、视频压缩规范RealMedia中，主要用来在低速率的广域网上实时传输视频影像活动，可以根据网络数据传输速率的不同而采用不同的压缩比率，从而实现影像数据的实时传送和实时播放。（5）QuickTime（扩展名为.mov或.qt）是Apple计算机公司开发的一种音频、视频文件格式，用于保存音频和视频信息。QuickTime因具有跨平台、存储空间要求小等技术特点，得到业界的广泛认可，目前已成为数字媒体软件技术领域的事实上的工业标准。（6）ASF（扩展名为.asf）高级流格式，是Microsoft公司开发的一个在Internet上实时传播多媒体的技术标准。（7）WMV（扩展名为.wmv）是ASF格式的升级和延伸。在同等视频质量下，WMV格式的体积非常小，因此很适合在网上播放和传输。第1章网页设计的基础1.1.2网页概述2．网页的类型根据网页执行的方式不同可以将网页分为静态网页和动态网页。1）静态网页静态网页是指没有后台数据库、不含程序和不可交互的网页。网页中仅包含HTML（超文本标记语言）代码，而且页面内容完全包含在网页的代码中并由浏览器解释执行。静态网页可以是以.htm、.html、.shtml等为扩展名的文本文件，2）动态网页网页文件中包含一定的程序和组件，并且这些程序和组件必须在服务器端运行，这样的网页就是动态网页。动态网页能够随不同客户、不同时间，返回不同的网页。因此，动态网页的页面内容并不是完全包含在页面文件中，而是采用ASP、ASP.NET、PHP（或JSP技术，从服务器的数据库中提取数据后，自动生成HTML文档的。第1章网页设计的基础1.2网站开发技术1．网站的工作流程客户端通过浏览器来显示数据并实现与服务器的交互。在服务器端由Web服务器通过HTTP协议与客户端的浏览器交互，Web服务器和应用服务器也使用HTTP作为它们之间的通信协议。而应用服务器与数据库服务器之间采用标准的机制进行通信，如ODBC、JDBC、SQL等。通常Web服务器接受客户端的请求，并根据请求的类型要么直接回复HTML页面给客户端，要么将请求提交应用服务器处理。应用服务器接受由Web服务器传来的处理请求，并根据需要查询或更新数据库，进行应用逻辑的处理，然后将处理结果传回给Web服务器。数据库服务器实现数据的存取功能，负责数据库的组织并向应用逻辑提供接口。第1章网页设计的基础1.2网站开发技术2．网站的服务器端技术这里的服务器端技术是指服务器端构造动态页面的技术。下文中介绍的客户端技术是指浏览器的网页标记语言技术。在网站设计过程中，最重要的是服务器端应用程序的开发。通俗地说，就是要在Web服务器上构造动态网页。流行的服务器端构造动态网页的技术有ASP、PHP和JSP等。（1）ASP。ASP是微软提供的一种运行于服务器端的脚本编写环境，它使开发者可以使用几乎所有的脚本语言（如VBScript、JavaScript、Perl等）编写脚本，这些脚本可以执行应用程序逻辑，并能够调用ActiveX标签和文本、脚本命令以及与ActiveX控件混合在一起实现动态网页，创建交互式的Web站点，而不需要进行复杂的编程。第1章网页设计的基础1.2网站开发技术（2）PHP。PHP是一种内嵌式的语言，而且PHP的语法混合了UNIX、Shell、C、C++、Java、Perl以及PHP自己的特性。它可以比CGI更快速地生成动态网页。Perl执行数据操作要另外通过DBI，但是PHP本身自带了操作几乎所有数据的能力，不需借助其他软件。（3）JSP。Java语言是Sun公司开发的一种面向对象的网络时代的语言，但Java不仅仅是一种语言，而是一种架构应用的技术系列。Java构造动态页面的技术包括Servlet和JSP。一个JavaServlet就是一个基于Java技术的运行在服务器端的程序，它可以接收来自用户的Web浏览器端的HTTP请求，并且动态地生成响应或应答，将网页文件发送到浏览器。第1章网页设计的基础1.2网站开发技术3．网站的客户端技术从Internet诞生开始，客户端技术就不断地发展，从最早的HTML到DH