旅游网页设计概述 (2).ppt

《旅游网页设计概述 (2).ppt》由会员分享，可在线阅读，更多相关《旅游网页设计概述 (2).ppt（44页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、旅游网页设计基础王红崧 王红崧 教师：王红崧学时分配n n 48（实践教学+实验）n n 实验内容：操作实训教材n n 任一本Dreamweaver 8.0 教程n n 任一本HTML 教程考试安排n n成绩构成：机试成绩构成：机试+实验作业实验作业n n作业提交：作业提交：建自己的文件夹（姓名 建自己的文件夹（姓名+学号）第一次上机放到指定 学号）第一次上机放到指定FTP FTP 位置。位置。每次作业练习单独建文件夹（如 每次作业练习单独建文件夹（如 练习一、练习二）放 练习一、练习二）放所有本次练习，然后添加到 所有本次练习，然后添加到FTP FTP 自己的文件夹中 自己的文件夹中 作业练

2、习在指定时间按时完成，作业练习在指定时间按时完成，缺一次不给课程成绩 缺一次不给课程成绩第一章 旅游网页设计概述n n 1.1 基本概念n n 1.2 旅游网页设计相关软件介绍n n 1.3 网站设计相关程序语言1.1 基本概念n一、WWW网页n二、网站的工作原理n三、网页的组成n四、URL介绍 n n万维网万维网：简称：简称WWWWWW或或3W3W，是目前，是目前InternetInternet最最流行的一种基于超文本形式的资源组织形式。流行的一种基于超文本形式的资源组织形式。使用了使用了HTML(HTML(超文本标记语言超文本标记语言)文件格式，其中文件格式，其中可以包含图像、动画和声音等

3、信息。可以包含图像、动画和声音等信息。网页和文件可以放在网页和文件可以放在InternetInternet的任何一个地方，的任何一个地方，通过超级链接将它们组织在一起，用户通过超通过超级链接将它们组织在一起，用户通过超级链接可以从一个页跳到其它页面。级链接可以从一个页跳到其它页面。在客户机端，访问在客户机端，访问WebWeb需要需要TCP/IPTCP/IP协议、一个协议、一个独一无二的独一无二的IPIP地址、与地址、与InternetInternet的连接，以及的连接，以及称为浏览器的本地称为浏览器的本地WebWeb接口。接口。在服务器端，在服务器端，WebWeb站点需要站点需要TCP/IPT

4、CP/IP协议、与协议、与D D NSNS和和浏览器浏览器一、WWW网页WWW 有3个基本内容组成，分别是URL、HTTP 和HTML。1)URL1)URL（UniformResourceLocatorsUniformResourceLocators）：统一资源）：统一资源定位符定位符22）HTTPHTTP（HypertextTransferProtocolHypertextTransferProtocol）：超文本）：超文本传输协议传输协议3)HTML3)HTML语言语言(HypertextMarkupLanguage)(HypertextMarkupLanguage)：HTMLHTML文档

5、是一个放置了标记（文档是一个放置了标记（TagsTags）的）的ASCIIASCII文文本文件本文件二、网站的工作原理概述:网站的一般工作原理是指 Web 服务器与客户端浏览器交互的基本原理，简单的说就是网站服务器上的文件和数据库最终成为客户所看到的页面的过程。实质上这个过程就是解决下面三个问题的过程：(1)网站的数据如何变成页面数据网站程序解决。(2)如何根据用户请求将指定的数据体送达客户端Internet解决。(3)客户端如何将页面数据显示为页面（所谓页面就是图形界面上的文本、图像、图形的集合）浏览器解决。三、网页的组成1.文本n n 网页中也需要大量的文字，这需要用到网页编辑器中的HTM

6、L 语言标签来编写。也可以利用网页编辑工具中的“所见即所得”功能直接写入文字。2.图片n n除了文字之外，网页中一般也会包括很多图片，这除了文字之外，网页中一般也会包括很多图片，这样图文并茂就显得内容更加丰富了。其实有时候图样图文并茂就显得内容更加丰富了。其实有时候图片比文字更有说服力、更加直观。目前，网页中图片比文字更有说服力、更加直观。目前，网页中图形格式大部分都是形格式大部分都是gifgif或或jpegjpeg格式，在网上这两种格格式，在网上这两种格式的图片传输速度快，而位图式的图片传输速度快，而位图bmpbmp文件占用空间大，文件占用空间大，传输速度慢。传输速度慢。3.动画n n上面所

7、说的网页都是静态网页，像是定格的风景，上面所说的网页都是静态网页，像是定格的风景，如果加入动画，就更为丰富生动了。如果加入动画，就更为丰富生动了。19951995年年SunSun公公司开发的司开发的JavaJava语言使用户可以创建能够调用图片和语言使用户可以创建能够调用图片和声音的多媒体应用小程序，于是短期内声音的多媒体应用小程序，于是短期内JavaJava就风靡就风靡全球。但是如果对程序语言不熟，又要轻松地制作全球。但是如果对程序语言不熟，又要轻松地制作便于浏览的动画，那就学习使用便于浏览的动画，那就学习使用FlashFlash或或FireworksFireworks等软件进行制作，用它们

8、制作的动画小巧迷人，用等软件进行制作，用它们制作的动画小巧迷人，用*.swf.swf文件保存，再导入网页编辑器中，这样就可文件保存，再导入网页编辑器中，这样就可以在浏览器中浏览动画了。以在浏览器中浏览动画了。4.超链接n n拥有美妙的文字、漂亮的图片以及生动的动画的网拥有美妙的文字、漂亮的图片以及生动的动画的网页还不能称为网站，别人还不能访问，此时通过一页还不能称为网站，别人还不能访问，此时通过一种方式把它们整合成一个有机的整体，这种方式就种方式把它们整合成一个有机的整体，这种方式就是超链接，可以说超链接是网站的脉络。是超链接，可以说超链接是网站的脉络。n n超链接是网站中的重要部分，网页上的

9、一段文字、超链接是网站中的重要部分，网页上的一段文字、一幅图像或图像的某一部分都可以进行超链接，当一幅图像或图像的某一部分都可以进行超链接，当用户单击它时，浏览器就会根据指示或地址转到相用户单击它时，浏览器就会根据指示或地址转到相应的位置或进入新的页面。应的位置或进入新的页面。n n超链接是连接其他一些网页的入口，含有此连接点超链接是连接其他一些网页的入口，含有此连接点的文字通常以蓝字底线显示，一般的，当用户将鼠的文字通常以蓝字底线显示，一般的，当用户将鼠标指针移到网页的某一项时，如果指针变成标指针移到网页的某一项时，如果指针变成手形手形，那么表示该链接是超链接，用户通过单击超链接，那么表示该

10、链接是超链接，用户通过单击超链接，就可以进一步进行信息的查询，大多数超链接在就可以进一步进行信息的查询，大多数超链接在WebWeb页面上显示为蓝色文本，单击后会改变颜色，页面上显示为蓝色文本，单击后会改变颜色，以便用户记住哪个超链接的页面已经浏览过，避免以便用户记住哪个超链接的页面已经浏览过，避免重复访问。超链接可以分为重复访问。超链接可以分为文本超链接和图像超链文本超链接和图像超链接。接。5.其他组件n n以上讲过的文字、图片、动画是网页中最为常见的以上讲过的文字、图片、动画是网页中最为常见的组件，还有另外一些能起到丰富网页内容、增强网组件，还有另外一些能起到丰富网页内容、增强网页生动性的组

11、件，如页生动性的组件，如JavaScriptJavaScript、Java AppletJava Applet、VBScriptVBScript、流动字幕、计数器和背景音乐等等。、流动字幕、计数器和背景音乐等等。四、URL介绍n nURLURL（Universal Resource LocatorUniversal Resource Locator）中文意思是）中文意思是“统一资源定位地址统一资源定位地址”，它是用来表示每个站点及，它是用来表示每个站点及站点上网页的地址，且地址是惟一相对应的。向浏站点上网页的地址，且地址是惟一相对应的。向浏览器中输入览器中输入URLURL，就可以访问，就可以访

12、问URLURL指出的网页，制指出的网页，制作网页中的超链接要用到作网页中的超链接要用到URLURL。我们看下面的例子。我们看下面的例子:从图可以看到的基本结构为：从图可以看到的基本结构为：通信协议：通信协议：/服务器名称：通信端口编号服务器名称：通信端口编号/文文 件夹件夹/文件名文件名各部分的含义如下：各部分的含义如下：（1）通信协议 通信协议是连接网页所使用的的网络传输协议，通信协议是连接网页所使用的的网络传输协议，如如HTTPHTTP代表超文本传输协议，代表超文本传输协议，FTPFTP代表文件传代表文件传输协议等，常见的传输协议有以下几种：输协议等，常见的传输协议有以下几种：n n ht

13、tp 协议超文本传输协议，主要用来连接远端的服务器。例如：即可连接到网易的WWW 服务器。n n ftp 协议文件传输协议，主要是用来取得服务器上的文件资源。例如：或者ftp:/。n n file 协议存取本地磁盘文件的服务。例如：file:/c:/mydocument/hello.exen n telnets 协议登陆远程系统服务。例如：telnets:/n n news 协议网络新闻组协议。例如：n n mailto 协议传送E-mail 协议。例如：（2）服务器名称n n它是指提供服务的主机名称或者它的地址。冒号后它是指提供服务的主机名称或者它的地址。冒号后的数字是通信端口号，一般可有可

14、无，默认的是的数字是通信端口号，一般可有可无，默认的是8080，即，即httphttp协议的端口，这个端口号告诉服务器用协议的端口，这个端口号告诉服务器用TCP/IPTCP/IP协议软件去打开哪一个通信端口，因为一协议软件去打开哪一个通信端口，因为一台计算机常常同时作为台计算机常常同时作为WebWeb、FTPFTP等服务器，为了等服务器，为了便于区别，每种服务器要对应一个通信端口，保证便于区别，每种服务器要对应一个通信端口，保证不与其他的服务端口有冲突。不与其他的服务端口有冲突。（3）文件夹与文件名n n文件夹是用来存放文件的，通常若干个同类型的文件夹是用来存放文件的，通常若干个同类型的文件应

15、建立一个文件目录来保存，如果是多级文文件应建立一个文件目录来保存，如果是多级文件目录，就必须指定是第几级文件夹，直到找出件目录，就必须指定是第几级文件夹，直到找出文件的位置。文件则是包括文件名和扩展名在内文件的位置。文件则是包括文件名和扩展名在内的完整名称。的完整名称。n n绝对绝对URLURL是指是指InternetInternet网址的完整定位，如网址的完整定位，如http:/http:/就就是一个完整的绝对是一个完整的绝对URLURL形式，它包含协议种类、服形式，它包含协议种类、服务器域名、文件路径和文件名。务器域名、文件路径和文件名。n n相对相对URLURL是指上资源相对于当前页面的

16、地址，它包是指上资源相对于当前页面的地址，它包含从当前指向目的页面位置的路径。如含从当前指向目的页面位置的路径。如news/hello.htmlnews/hello.html就是一个相对就是一个相对URLURL，表示的是当前，表示的是当前页面所在目录下页面所在目录下newsnews子目录中的子目录中的hello.htmlhello.html文件。文件。1.2 旅游网页设计相关软件介绍n一、Dreamweavern二、Fireworksn三、Flashn n 当前网站设计的软件中比较流行的是Adobe公司的Dreamweaver、Flash、Fireworks 三剑客和Microsoft 公司的

17、FrontPage。n n 还有专业图像处理软件Photoshop（点阵图处理）以及CorelDRAW（绘制向量图），在网页制作中都比较常用 一、Dreamweavern nDreamweaverDreamweaver是由美国著名的软件开发商是由美国著名的软件开发商AdobeAdobe公公司推出的一个司推出的一个“所见即所得所见即所得”的可视化网站开发工的可视化网站开发工具。它易学易用，用户不需要任何代码就可以利用具。它易学易用，用户不需要任何代码就可以利用它做出令人满意的它做出令人满意的HTMLHTML网页。网页。Dreamweaver 8Dreamweaver 8的的出现使创作网页成为一件

18、轻松的事。提供了强大的出现使创作网页成为一件轻松的事。提供了强大的设计工具，在不用书写任何代码的情况下，就能创设计工具，在不用书写任何代码的情况下，就能创建具有动态特性的网页，例如动画和分层等。建具有动态特性的网页，例如动画和分层等。二、Fireworksn n Fireworks 是图形/图像处理软件。它是Adobe 公司网页设计“三剑客”之“火焰”，它以处理网页图片为特长，并可以轻松创作GIF 动画。Fireworks 是一款用来设计网页图形的应用程序。它所含的创新性解决方案解决了图形设计人员和网站管理员所面临的主要问题。Fireworks 中的工具种类齐全，使用这些工具，可以在单个文件中

19、创建和编辑矢量和位图图形。三、Flashn n Flash 也是美国Adobe 公司推出的动画制作软件，它是全球使用最广泛，最受广大用户青睐的平面动画制作软件。用它制作的动画不但流畅生动、画面精美，而且文件数据量非常小，下载速度很快，软件界面直观，对制作者的要求不是很高，非常简单易学。1.3 网站设计相关程序语言nn一、HTML简介nn二、XHTMLnn三、ASP和ASP.NETnn四、PHPnn五、JSPnn六、JavaScriptnn七、CSS 在网站设计中，在网站设计中，HTMLHTML格式的网页，通常被称为静格式的网页，通常被称为静态网页。这样的网页只是在页面上显示一些文本图象态网页。

20、这样的网页只是在页面上显示一些文本图象等信息，并不与访问者交换信息。从视觉效果上静态等信息，并不与访问者交换信息。从视觉效果上静态的的HTMLHTML格式网页上，也可以出现各种动态的效果，格式网页上，也可以出现各种动态的效果，例如：例如：GIFGIF格式的动画，格式的动画，FLASHFLASH，滚动字幕等等。然，滚动字幕等等。然而，这些而，这些“动态效果动态效果”只是视觉上的，要区分开动态只是视觉上的，要区分开动态网页的概念。网页的概念。动态网页是相对于动态网页是相对于ASPASP、JSPJSP等数据库网页的，那些等数据库网页的，那些网页的页面上可以有访问者和服务器的数据互相交换，网页的页面上

21、可以有访问者和服务器的数据互相交换，所以称之为动态。所以称之为动态。静态网页制作技术是一种通过静态网页制作技术是一种通过HTMLHTML标记语言标记语言,按照一定的格式整合各种媒体按照一定的格式整合各种媒体,如图片、文字、声音等如图片、文字、声音等,结合结合WebWeb服务器实现信息网络发布的技术。服务器实现信息网络发布的技术。常见的静态网页制作工具有常见的静态网页制作工具有FrontPageFrontPage、Dreamweaver Dreamweaver、FlashFlash等。等。动态网页编程工具动态网页编程工具 动态网页，就是放在服务器端的一些执行脚本。动态网页，就是放在服务器端的一些

22、执行脚本。而而WebWeb服务器起到了一个连接这些脚本和浏览者的作服务器起到了一个连接这些脚本和浏览者的作用。用。WebWeb服务器首先接受浏览者的浏览请求及提交的服务器首先接受浏览者的浏览请求及提交的要求信息，然后根据这些请求，执行相应的动态网页要求信息，然后根据这些请求，执行相应的动态网页脚本，完成特定的操作，并生成相应的网页页面，再脚本，完成特定的操作，并生成相应的网页页面，再将这些页面发送给浏览者，从而实现一个完整的将这些页面发送给浏览者，从而实现一个完整的WebWeb应用操作过程。用户通过浏览器接收的，是通过应用操作过程。用户通过浏览器接收的，是通过WebWeb服务器对服务器端的脚本

23、进行处理后生成的网页文件，服务器对服务器端的脚本进行处理后生成的网页文件，脚本程序代码是不会出现在客户端的。脚本程序代码是不会出现在客户端的。一、HTML简介n n HTML HTML 是普通文件中某些字句加上标识，它的目的在于运 是普通文件中某些字句加上标识，它的目的在于运用标签使文件达到预期的显示效果。每个基本 用标签使文件达到预期的显示效果。每个基本Web Web 页都 页都对应一个 对应一个HTML HTML 文件。网页是浏览器对 文件。网页是浏览器对HTML HTML 标签的解释 标签的解释和显示的结果。和显示的结果。HTML HTML 中超文本功能，也就是链接功能，中超文本功能，也

24、就是链接功能，使网页之间可以链接起来。使网页之间可以链接起来。l HTML 语言，又称超文本标记语言，英文全称是Hypertext Markup Language。它是一种标识性的语言，由一些特定符号组成，语法简单，其目的在于运用标记使文件达到预期的显示效果。n n HTML 文本包含两种信息：页面本身的文本和表示页面元素、结构、格式、及其他超文本链接的HTML 标记。HTML 标记规定了HTML 文本的逻辑结构，并且控制其显示格式，也就是说，设计者可以用标记定义HTML 文本的文档结构，可以使用HTML 标记来设置链接、标题、段落、列表和字符加亮区域等等。二、XHTMLn n 随着应用Web

25、 越来越广泛，HTML 过于简单的弱点也越来越明显了：n n 1）链路不能及时更新n n 2）动态内容需要下载的太多n n 3）搜索时间长n n 4）HTML 对多国文字无支持或者说支持不够n n 5）可扩展性差nn XHTML:是是XMLXML的过渡语言，是基于的过渡语言，是基于HTMLHTML的，是对的，是对HTMLHTML的制约性的调整，是面向结构的语言，其设计目的不的制约性的调整，是面向结构的语言，其设计目的不像像HTMLHTML是为了网页的设计和表现，而是对网页内容是为了网页的设计和表现，而是对网页内容进行结构设计。相比进行结构设计。相比HTMLHTML它的优势是结构严密，代它的优势

26、是结构严密，代码更简洁。码更简洁。如：所有标签要有相应的结束标签进行关闭如：所有标签要有相应的结束标签进行关闭 标签及其属性名称必须小写标签及其属性名称必须小写 标签属性值必须带上双引号标签属性值必须带上双引号 标签的属性必须有值标签的属性必须有值.Dreamweaver8Dreamweaver8默认是以符合默认是以符合XHTMLXHTML的规范来新建网的规范来新建网页页(在数据区前面有定义区声明，一般是两行，包括在数据区前面有定义区声明，一般是两行，包括DTDDTD文档类型声明，指出文档类型声明，指出XHTMLXHTML的版本；详细的版本；详细DTDDTD的的urlurl，为，为htmlht

27、ml标签添加命名空间，收集元素类型和属标签添加命名空间，收集元素类型和属性名字性名字)。三、ASP 和ASP.NET1.ASPn n ASP（Active Server Pages）是一种服务器端脚本编写环境，是微软（Microsoft）公司的新一代开发动态网页的技术，具有开发简单、功能强大等优点，可以直观、简易地实现复杂的Web 应用。使用ASP 可以组合HTML 页、脚本命令和ActiveX 组件创建交互的Web 页和基于Web 的功能强大的应用程序。ASPASP页与标准页与标准HTMLHTML页既有区别也有联系：页既有区别也有联系：ASP ASP 页的文件扩展名为 页的文件扩展名为.AS

28、P.ASP，标准，标准HTML HTML 页的文件扩展 页的文件扩展名则是 名则是.htm htm 或 或.html;.html;标准 标准HTML HTML 页不经过处理即可发送到浏览器，处理 页不经过处理即可发送到浏览器，处理ASP ASP页时先执行服务器端脚本而后生成 页时先执行服务器端脚本而后生成HTML HTML 页 页;从浏览器来看，从浏览器来看，ASP ASP 页与标准 页与标准HTML HTML 页几乎是完全相同 页几乎是完全相同的，向 的，向Web Web 服务器发出一个 服务器发出一个ASP ASP 请求后，浏览器将收到一 请求后，浏览器将收到一个标准 个标准HTML HT

29、ML 页 页.此处，此处，ASP ASP 文件是一种无格式的纯文本文 文件是一种无格式的纯文本文件 件，可以使用记事本之类的文本编辑器通过手工方式来编，可以使用记事本之类的文本编辑器通过手工方式来编写，也可以使用 写，也可以使用 Dreamweaver Dreamweaver 之类的网页编辑软件通过可 之类的网页编辑软件通过可视化操作来创建。视化操作来创建。ASP ASP有如下主要特点：有如下主要特点：（11）编写容易，可以使用）编写容易，可以使用WindowsWindows的记事本之类的的记事本之类的文本编辑器编写，而且只需文本编辑器编写，而且只需VBScriptVBScript、JavaS

30、criptJavaScript等简单的脚本语言，结合等简单的脚本语言，结合HTMLHTML即可完成。即可完成。（22）不需编译，直接在服务器端执行。）不需编译，直接在服务器端执行。（33）ASPASP网页与浏览器的无关，只要能执行网页与浏览器的无关，只要能执行HTMLHTML就能执行它。就能执行它。（44）有一定安全性。由于）有一定安全性。由于ASPASP在服务器端运行，运在服务器端运行，运行结果以行结果以HTMLHTML主页形式返回用户浏览器，因而主页形式返回用户浏览器，因而ASPASP源程序不会泄密，增加了系统的安全保密性。源程序不会泄密，增加了系统的安全保密性。2.ASP.NET n n

31、 ASP 存在下面的不足：（1）界面和代码没有分开。（2）解释性的脚本语言。n n ASP.NET 克服了上述不足。利用Visual Studio.NET 集成开发工具，开发人员甚至可以像设计Visual Basic 程序那样开发ASP.NET 应用程序。而且，ASP.NET 通过一种所谓的隐藏代码技术，彻底实现了界面和代码分离。四、PHP PHP PHP是一种跨平台的服务器端的嵌入式脚本语言。是一种跨平台的服务器端的嵌入式脚本语言。它大量地借用它大量地借用CC、JavaJava和和PerlPerl语言的语法语言的语法,并结合并结合PHPPHP自己的特性自己的特性,使使WEBWEB开发者能够快

32、速地写出动态产生页开发者能够快速地写出动态产生页面。它支持目前绝大多数数据库。面。它支持目前绝大多数数据库。还有一点，还有一点，PHPPHP是完全免费的，用户可以从是完全免费的，用户可以从PHPPHP官方站点官方站点(http:/)(http:/)自由下载。自由下载。五、JSP JSPJSP（Java Server PageJava Server Page）是）是SunSun公司推出的新一代公司推出的新一代网站开发语言。网站开发语言。JSPJSP可以在可以在ServerletServerlet和和JavaBeanJavaBean的支持的支持下，完成功能强大的站点程序。下，完成功能强大的站点程序

33、。JSPJSP的特点有：的特点有：11将内容的产生和显示进行分离将内容的产生和显示进行分离 22强调可重用的群组件强调可重用的群组件 33采用标识简化页面开发采用标识简化页面开发六、JavaScriptn nJavaScriptJavaScript是目前应用最广泛的一种脚本语言，它是目前应用最广泛的一种脚本语言，它的主要特点是基于对象（的主要特点是基于对象（ObjectObject）和事件驱动）和事件驱动（Event DrivenEvent Driven），并具有安全性能。），并具有安全性能。JavaScriptJavaScript特点：特点：11）JavaScriptJavaScript是一

34、种解释性的脚本语言是一种解释性的脚本语言22）JavaScriptJavaScript是基于对象的语言。是基于对象的语言。33）JavaScriptJavaScript是简单的语言是简单的语言44）JavaScriptJavaScript是安全的语言是安全的语言55）JavaScriptJavaScript是动态的语言是动态的语言66）JavaScriptJavaScript是跨平台的语言是跨平台的语言七、CSSn nCSSCSS是是Cascading Style SheetsCascading Style Sheets的缩写，中文译为的缩写，中文译为“层叠样式表层叠样式表”。它是由。它是由W3CW3C协会为了弥补在协会为了弥补在HTMLHTML样式编排上的不足而制定的一套扩展样式标样式编排上的不足而制定的一套扩展样式标准。准。n nCSSCSS技术作为一种格式化网页的标准方式，主要的技术作为一种格式化网页的标准方式，主要的用途是定义网页数据的编排、显示、格式化及特殊用途是定义网页数据的编排、显示、格式化及特殊效果，它扩展了效果，它扩展了HTMLHTML的功能。的功能。n nCSSCSS具有具有CSSCSS布局和布局和CSSCSS修饰修饰