旅游网页设计概述 (2).ppt
旅游网页设计基础王红崧,教师：王红崧,学时分配,48（实践教学+实验）实验内容：操作实训,教材,任一本Dreamweaver 8.0 教程任一本HTML教程,考试安排,成绩构成：机试+实验作业作业提交：建自己的文件夹（姓名+学号）第一次上机放到指定FTP位置。每次作业练习单独建文件夹（如 练习一、练习二）放所有本次练习，然后添加到FTP自己的文件夹中作业练习在指定时间按时完成，缺一次不给课程成绩,第一章 旅游网页设计概述,1.1 基本概念1.2 旅游网页设计相关软件介绍1.3 网站设计相关程序语言,1.1 基本概念,一、WWW网页二、网站的工作原理三、网页的组成四、URL介绍,万维网：简称WWW或3W，是目前Internet最流行的一种基于超文本形式的资源组织形式。使用了HTML(超文本标记语言)文件格式，其中可以包含图像、动画和声音等信息。网页和文件可以放在Internet的任何一个地方，通过超级链接将它们组织在一起，用户通过超级链接可以从一个页跳到其它页面。在客户机端，访问Web需要TCP/IP协议、一个独一无二的IP地址、与Internet的连接，以及称为浏览器的本地Web接口。在服务器端，Web站点需要TCP/IP协议、与D NS和浏览器,一、WWW网页,WWW有3个基本内容组成，分别是URL、HTTP和HTML。1)URL（Uniform Resource Locators）：统一资源定位符2）HTTP（Hypertext Transfer Protocol）：超文本传输协议 3)HTML语言(Hypertext Markup Language)：HTML文档是一个放置了标记（Tags）的ASCII文本文件,二、网站的工作原理概述:网站的一般工作原理是指 Web 服务器与客户端浏览器交互的基本原理，简单的说就是网站服务器上的文件和数据库最终成为客户所看到的页面的过程。实质上这个过程就是解决下面三个问题的过程：,(1)网站的数据如何变成页面数据网站程序解决。(2)如何根据用户请求将指定的数据体送达客户端Internet解决。(3)客户端如何将页面数据显示为页面（所谓页面就是图形界面上的文本、图像、图形的集合）浏览器解决。,三、网页的组成,1.文本网页中也需要大量的文字，这需要用到网页编辑器中的HTML语言标签来编写。也可以利用网页编辑工具中的“所见即所得”功能直接写入文字。,2.图片除了文字之外，网页中一般也会包括很多图片，这样图文并茂就显得内容更加丰富了。其实有时候图片比文字更有说服力、更加直观。目前，网页中图形格式大部分都是gif或jpeg格式，在网上这两种格式的图片传输速度快，而位图bmp文件占用空间大，传输速度慢。,3.动画上面所说的网页都是静态网页，像是定格的风景，如果加入动画，就更为丰富生动了。1995年Sun公司开发的Java语言使用户可以创建能够调用图片和声音的多媒体应用小程序，于是短期内Java就风靡全球。但是如果对程序语言不熟，又要轻松地制作便于浏览的动画，那就学习使用Flash或Fireworks等软件进行制作，用它们制作的动画小巧迷人，用*.swf文件保存，再导入网页编辑器中，这样就可以在浏览器中浏览动画了。,4.超链接拥有美妙的文字、漂亮的图片以及生动的动画的网页还不能称为网站，别人还不能访问，此时通过一种方式把它们整合成一个有机的整体，这种方式就是超链接，可以说超链接是网站的脉络。超链接是网站中的重要部分，网页上的一段文字、一幅图像或图像的某一部分都可以进行超链接，当用户单击它时，浏览器就会根据指示或地址转到相应的位置或进入新的页面。,超链接是连接其他一些网页的入口，含有此连接点的文字通常以蓝字底线显示，一般的，当用户将鼠标指针移到网页的某一项时，如果指针变成手形，那么表示该链接是超链接，用户通过单击超链接，就可以进一步进行信息的查询，大多数超链接在Web页面上显示为蓝色文本，单击后会改变颜色，以便用户记住哪个超链接的页面已经浏览过，避免重复访问。超链接可以分为文本超链接和图像超链接。,5.其他组件以上讲过的文字、图片、动画是网页中最为常见的组件，还有另外一些能起到丰富网页内容、增强网页生动性的组件，如JavaScript、Java Applet、VBScript、流动字幕、计数器和背景音乐等等。,四、URL介绍,URL（Universal Resource Locator）中文意思是“统一资源定位地址”，它是用来表示每个站点及站点上网页的地址，且地址是惟一相对应的。向浏览器中输入URL，就可以访问URL指出的网页，制作网页中的超链接要用到URL。我们看下面的例子:,从图可以看到的基本结构为：通信协议：/服务器名称：通信端口编号/文 件夹/文件名各部分的含义如下：（1）通信协议 通信协议是连接网页所使用的的网络传输协议，如HTTP代表超文本传输协议，FTP代表文件传输协议等，常见的传输协议有以下几种：,http协议超文本传输协议，主要用来连接远端的服务器。例如：即可连接到网易的WWW服务器。ftp协议文件传输协议，主要是用来取得服务器上的文件资源。例如：或者ftp:/。file 协议存取本地磁盘文件的服务。例如：file:/c:/mydocument/hello.exe,telnets 协议登陆远程系统服务。例如：telnets:/news 协议网络新闻组协议。例如：mailto 协议传送E-mail协议。例如：,（2）服务器名称它是指提供服务的主机名称或者它的地址。冒号后的数字是通信端口号，一般可有可无，默认的是80，即http协议的端口，这个端口号告诉服务器用TCP/IP协议软件去打开哪一个通信端口，因为一台计算机常常同时作为Web、FTP等服务器，为了便于区别，每种服务器要对应一个通信端口，保证不与其他的服务端口有冲突。,（3）文件夹与文件名文件夹是用来存放文件的，通常若干个同类型的文件应建立一个文件目录来保存，如果是多级文件目录，就必须指定是第几级文件夹，直到找出文件的位置。文件则是包括文件名和扩展名在内的完整名称。,绝对URL是指Internet网址的完整定位，如http:/就是一个完整的绝对URL形式，它包含协议种类、服务器域名、文件路径和文件名。相对URL是指上资源相对于当前页面的地址，它包含从当前指向目的页面位置的路径。如news/hello.html就是一个相对URL，表示的是当前页面所在目录下news子目录中的hello.html文件。,1.2 旅游网页设计相关软件介绍,一、Dreamweaver二、Fireworks三、Flash,当前网站设计的软件中比较流行的是Adobe公司的Dreamweaver、Flash、Fireworks三剑客和Microsoft公司的FrontPage。还有专业图像处理软件Photoshop（点阵图处理）以及CorelDRAW（绘制向量图），在网页制作中都比较常用,一、Dreamweaver,Dreamweaver是由美国著名的软件开发商Adobe公司推出的一个“所见即所得”的可视化网站开发工具。它易学易用，用户不需要任何代码就可以利用它做出令人满意的HTML网页。Dreamweaver 8的出现使创作网页成为一件轻松的事。提供了强大的设计工具，在不用书写任何代码的情况下，就能创建具有动态特性的网页，例如动画和分层等。,二、Fireworks,Fireworks是图形/图像处理软件。它是Adobe公司网页设计“三剑客”之“火焰”，它以处理网页图片为特长，并可以轻松创作GIF动画。Fireworks是一款用来设计网页图形的应用程序。它所含的创新性解决方案解决了图形设计人员和网站管理员所面临的主要问题。Fireworks 中的工具种类齐全，使用这些工具，可以在单个文件中创建和编辑矢量和位图图形。,三、Flash,Flash也是美国Adobe公司推出的动画制作软件，它是全球使用最广泛，最受广大用户青睐的平面动画制作软件。用它制作的动画不但流畅生动、画面精美，而且文件数据量非常小，下载速度很快，软件界面直观，对制作者的要求不是很高，非常简单易学。,1.3 网站设计相关程序语言,一、HTML简介二、XHTML三、ASP和ASP.NET四、PHP五、JSP六、JavaScript七、CSS,在网站设计中，HTML格式的网页，通常被称为静态网页。这样的网页只是在页面上显示一些文本图象等信息，并不与访问者交换信息。从视觉效果上静态的HTML格式网页上，也可以出现各种动态的效果，例如：GIF格式的动画，FLASH，滚动字幕等等。然而，这些“动态效果”只是视觉上的，要区分开动态网页的概念。动态网页是相对于ASP、JSP等数据库网页的，那些网页的页面上可以有访问者和服务器的数据互相交换，所以称之为动态。,静态网页制作技术是一种通过HTML标记语言,按照一定的格式整合各种媒体,如图片、文字、声音等,结合Web服务器实现信息网络发布的技术。常见的静态网页制作工具有FrontPage、Dreamweaver、Flash等。,动态网页编程工具 动态网页，就是放在服务器端的一些执行脚本。而Web服务器起到了一个连接这些脚本和浏览者的作用。Web服务器首先接受浏览者的浏览请求及提交的要求信息，然后根据这些请求，执行相应的动态网页脚本，完成特定的操作，并生成相应的网页页面，再将这些页面发送给浏览者，从而实现一个完整的Web应用操作过程。用户通过浏览器接收的，是通过Web服务器对服务器端的脚本进行处理后生成的网页文件，脚本程序代码是不会出现在客户端的。,一、HTML简介,HTML是普通文件中某些字句加上标识，它的目的在于运用标签使文件达到预期的显示效果。每个基本Web页都对应一个HTML文件。网页是浏览器对HTML标签的解释和显示的结果。HTML中超文本功能，也就是链接功能，使网页之间可以链接起来。,HTML语言，又称超文本标记语言，英文全称是Hypertext Markup Language。它是一种标识性的语言，由一些特定符号组成，语法简单，其目的在于运用标记使文件达到预期的显示效果。,HTML文本包含两种信息：页面本身的文本和表示页面元素、结构、格式、及其他超文本链接的HTML标记。HTML标记规定了HTML文本的逻辑结构，并且控制其显示格式，也就是说，设计者可以用标记定义HTML文本的文档结构，可以使用HTML标记来设置链接、标题、段落、列表和字符加亮区域等等。,二、XHTML,随着应用Web越来越广泛，HTML过于简单的弱点也越来越明显了：1）链路不能及时更新2）动态内容需要下载的太多3）搜索时间长4）HTML对多国文字无支持或者说支持不够5）可扩展性差,XHTML:是XML的过渡语言，是基于HTML的，是对HTML的制约性的调整，是面向结构的语言，其设计目的不像HTML是为了网页的设计和表现，而是对网页内容进行结构设计。相比HTML它的优势是结构严密，代码更简洁。如：所有标签要有相应的结束标签进行关闭 标签及其属性名称必须小写 标签属性值必须带上双引号 标签的属性必须有值.,Dreamweaver8默认是以符合XHTML的规范来新建网页(在数据区前面有定义区声明，一般是两行，包括DTD文档类型声明，指出XHTML的版本；详细DTD的url，为html标签添加命名空间，收集元素类型和属性名字)。,三、ASP和ASP.NET,1.ASPASP（Active Server Pages）是一种服务器端脚本编写环境，是微软（Microsoft）公司的新一代开发动态网页的技术，具有开发简单、功能强大等优点，可以直观、简易地实现复杂的Web应用。使用ASP可以组合HTML页、脚本命令和ActiveX组件创建交互的Web页和基于Web的功能强大的应用程序。,ASP页与标准HTML页既有区别也有联系：ASP页的文件扩展名为.ASP，标准HTML页的文件扩展名则是.htm 或.html;标准HTML页不经过处理即可发送到浏览器，处理ASP页时先执行服务器端脚本而后生成HTML页;从浏览器来看，ASP页与标准HTML页几乎是完全相同的，向Web服务器发出一个ASP请求后，浏览器将收到一个标准HTML页.此处，ASP文件是一种无格式的纯文本文件，可以使用记事本之类的文本编辑器通过手工方式来编写，也可以使用 Dreamweaver 之类的网页编辑软件通过可视化操作来创建。,ASP有如下主要特点：（1）编写容易，可以使用Windows的记事本之类的文本编辑器编写，而且只需VBScript、JavaScript等简单的脚本语言，结合HTML即可完成。（2）不需编译，直接在服务器端执行。（3）ASP网页与浏览器的无关，只要能执行HTML就能执行它。（4）有一定安全性。由于ASP在服务器端运行，运行结果以HTML主页形式返回用户浏览器，因而ASP源程序不会泄密，增加了系统的安全保密性。,2.ASP.NET ASP存在下面的不足：（1）界面和代码没有分开。（2）解释性的脚本语言。ASP.NET克服了上述不足。利用Visual Studio.NET集成开发工具，开发人员甚至可以像设计Visual Basic程序那样开发ASP.NET应用程序。而且，ASP.NET通过一种所谓的隐藏代码技术，彻底实现了界面和代码分离。,四、PHP PHP是一种跨平台的服务器端的嵌入式脚本语言。它大量地借用C、Java和Perl语言的语法,并结合PHP自己的特性,使WEB开发者能够快速地写出动态产生页面。它支持目前绝大多数数据库。还有一点，PHP是完全免费的，用户可以从PHP官方站点(http:/)自由下载。,五、JSP JSP（Java Server Page）是Sun公司推出的新一代网站开发语言。JSP可以在Serverlet和JavaBean的支持下，完成功能强大的站点程序。JSP的特点有：1将内容的产生和显示进行分离 2强调可重用的群组件 3采用标识简化页面开发,六、JavaScript,JavaScript是目前应用最广泛的一种脚本语言，它的主要特点是基于对象（Object）和事件驱动（Event Driven），并具有安全性能。JavaScript特点：1）JavaScript是一种解释性的脚本语言2）JavaScript是基于对象的语言。3）JavaScript是简单的语言4）JavaScript是安全的语言5）JavaScript是动态的语言6）JavaScript是跨平台的语言,七、CSS,CSS是Cascading Style Sheets的缩写，中文译为“层叠样式表”。它是由W3C协会为了弥补在HTML样式编排上的不足而制定的一套扩展样式标准。CSS技术作为一种格式化网页的标准方式，主要的用途是定义网页数据的编排、显示、格式化及特殊效果，它扩展了HTML的功能。CSS具有CSS布局和CSS修饰,
