动态网页设计
This presentation is the property of its rightful owner.
Sponsored Links
1 / 64

主讲教师:张丹 PowerPoint PPT Presentation


  • 102 Views
  • Uploaded on
  • Presentation posted in: General

动态网页设计. 主讲教师:张丹. 联系电话: 82116781 ( A1001 ). E-mail:[email protected] 二、建立动态网站的基础知识. 2.1 有关网站的基本概念 1. 网络、因特网和万维网. 网络 网络是纵横交错的组织或系统。网络就是信息和服务共享。 计算机网络就是利用通信线路将分布在不同地理位置上的计算机设备连接在一起,实现资源共享和信息交流。. Internet Internet 是由不同类型、不同规模、独立管理和运行的主机或计算机网络组成的一个全球性的特大网络。. WWW

Download Presentation

主讲教师:张丹

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


3745233

动态网页设计

主讲教师:张丹

联系电话:82116781(A1001)

E-mail:[email protected]


3745233

二、建立动态网站的基础知识

2.1 有关网站的基本概念

1.网络、因特网和万维网

网络

网络是纵横交错的组织或系统。网络就是信息和服务共享。

计算机网络就是利用通信线路将分布在不同地理位置上的计算机设备连接在一起,实现资源共享和信息交流。


3745233

Internet

Internet是由不同类型、不同规模、独立管理和运行的主机或计算机网络组成的一个全球性的特大网络。

WWW

WWW是Internet上的超文本系统。


3745233

Internet的产生

  • 1983年

    ARPA和美国国防部通信局研制成功TCP/IP协议

  • 1986年

    美国国家科学基金会(NSF)成立了NSFnet

  • 1991年

    CIEA(商用英特网协会)成立,Internet开始 用于商业用途,企业和个人纷纷加入,带动了英特网的发展。

  • 1992年

    CERN研发成功WWW,促进了Internet的普及。


3745233

Internet的发展

1.计算机网络向高速化、宽带化发展。

2.计算机网络向多媒体方向发展。

3.未来通信和网络的目标是实现5W的个人通信。

任何人(whoever) 在任何时间(whenever) 任何地方(wherever) 可以和任何一个其他人(whomever)通过网络进 行通信以传送任何信息(whatever)


3745233

7950

8000

7000

5910

6000

5000

4000

3000

1690

2000

800

1000

10

0

1996年

2000年

2004年

中国Internet发展现状

图1-5 中国网民人数增长统计图


3745233

59.555

60

50

37.16

40

30

20

1.5

10

WWW网站

0

1999年12月

2003年1月

2004年

中国Internet网站发展现状

图1-6 中国网站发展状况


3745233

客户机

服务器

客户机进程

服务器进程

请求

响应

图1-7 C/S模型

2.Web

Web的工作原理


3745233

DNS服务器

域名解析

响应请求,返回页面

客户端

客户端

WWW服务器

输入域名、地址

客户端

图1-8 Web工作原理


3745233

协 议

3.Internet网络协议

协议的必要性

使用裸硬件进行通信就象用二进制位的0和1编程一样。

联网的计算机使用软件,为应用程序提供方便的高层接口。这些软件自动处理大部分低层的通信细节问题。

通信双方关于通信如何进行而达成的一致说明或约定。

规定计算机信息交换中信息的格式和含义的协定。


3745233

(1) TCP/IP协议

TCP/IP协议是一个协议集。它把整个网络分成4个层次:应用层、传输层、网络层和物理链路层。它们都建立在硬件基础之上。

TCP/IP协议特点:

  • 协议标准具有开放性

  • 统一分配网络地址

  • 实现了高层协议的标准化

TCP/IP协议结构


3745233

应用层

表示层

会话层

传输层

网络层

数据链路层

Application

物理层

FTP

HTTP

SMTP

DNS

SNMP

TELNET

UDP

Transport

TCP

Internet

ICMP

IP

IGMP

ARP

WAN

Technologies

Network

LAN

Technologies


3745233

应用层

应用层

表示层

表示层

会话层

会话层

传输层

传输层

网络层

网络层

链路层

链路层

物理层

物理层

传输介质

系统A

系统B

用户数据

用户数据

图1-9 ISO/OSI七层协议模型


Tcp ip osi

TCP/IP协议模型和 OSI协议模型的对照


3745233

(2) HTTP协议

  • 客户与服务器建立连接;

  • 客户向服务器提出请求;

  • 如果请求被接受,则服务器送回响应,在响应中包括状态码和所需的文件;

  • 客户和服务器断开连接。


3745233

(3) 远程登录协议Telnet

Telnet是国际互联网上除了电子邮件和文件传输外提供的又一个基本服务。

通过网络对已知地址和管理口令的设备进行远程登录,并进行各种命令操作和管理。

针对单台设备。

在UNIX操作系统中使用telnet或rlogin命令,只要对方允许,就可以登录到另一台国际互联网的计算机上,使用那台计算机的部分或全部资源。


3745233

(4) 文件传输协议FTP

  • 启动FTP客户端程序,先与远程主机建立连接;

  • 向远程主机发出传输命令;

  • 远程主机在收到命令后就给予响应,并执行正确的命令。

FTP(File Transfer Protocol)文件传输协议,用于管理计算机之间的文件传送。

使用方法:

FTP有一个根本的限制,就是不能远程登录(Remote Login)进入该主机,与该主机进行文件传输。Anonymous FTP(匿名FTP)取消了这种限制。


3745233

在DOS界面下FTP命令的使用

  • 在“开始”菜单中选择“运行”;

  • 在对话框中输入“ftp ftp.xjtu.edu.cn”;

  • 直接弹出FTP界面,按照系统提示输入授权的用户名和密码,登录成功后即可使用FTP服务。

    如果使用匿名登录:用户名:anonymous

    密码:[email protected](不显示)

在“FTP>”提示符后输入命令即可进行相关操作。输入“?”可以查询DOS下的FTP命令。


3745233

在IE浏览器中使用FTP命令

  • 在IE浏览器的地址栏中输入需要连接的FTP站点的相关信息,如ftp:[email protected]/;

    注:[email protected]

  • 系统自动弹出密码输入框,在相应的位置填入用户名和密码;

  • 如果使用匿名FTP,则用户名和密码都可以不填,在浏览器中直接输入FTP站点:ftp://ftp.xjtu.edu.cn即可。


3745233

使用其它FTP软件

在软件不断推陈出新的时候,FTP也摆脱了繁琐的命令和枯燥的界面。很多优秀的FTP客户端软件都为用户提供了便捷的操作,如Cuteftp,WS-FTP等。

Cuteftp最大的优点就是提供了断点续传的功能。用户可以按New键自己增加一个FTP站点。


3745233

4.IP地址、域名和URL

IP地址

用于标识连入因特网上的每台主机,它是每台主机唯一的标识。在IPv4中,一个IP地址由32个二进制比特数字组成,通常被分割为4段,每段8比特,并用点分十进制表示。

aaa.bbb.ccc.ddd

每段的取值范围是0-255

最多容纳的机器数是:255×255×255×255约42亿台。

很多时候,用户甚至不知道对方的协议地址,而使用计算机名字,通过DNS转化。


3745233

IP地址的层次

计算机知识

每个32位的IP地址被分为前缀和后缀两个部分。

前缀:用于确定计算机从属的物理网络。

后缀:用于确定该网络中的一台计算机。

ISP负责向用户提供IP地址的前缀。

IP地址层次的作用

1.保证每台计算机分配一个唯一的地址。

2.保证虽然网络号分配必须全球一致,但后缀可本地分配,不需全球一致。


3745233

32 Bits

Network ID

Host ID

Class B

w. x. y. z.

131.107.3.24

Example:

IP地址分类

A、B、C类为基本类

D类用于组播传输

E类保留

Network ID and Host ID


3745233

A类网:aaa的取值为1-127,前8位中的首位为1,并表示网 络地址,后24位表示主机地址,代表主机所在的网络为大型网。

B类网:aaa的取值为128-191,前两位为10,前16位表示网络地址,后16位表示主机地址,代表主机所在的网络为中型网。

C类网:aaa的取值为192-223,前三位为110,前24位表示网络地址,后8位表示主机地址。

D类网:前4位为1110,后28位为组播地址。

E类网:前5位为11110,后面各位保留。


3745233

Network

ID

Host ID

0

Network ID

Host ID

1 0

Network ID

Host ID

1 1 0

Class A

Class B

Class C

w

x

y

z


3745233

域名

IP地址记忆不方便,为了便于使用,采用与计算机的用途或所属的单位有关的名称来标识计算机的地址,这种名称就是计算机域名。

域名一般是英文字母和数字的组合,并由以圆点“.”隔开的若干个子域名组成,从左至右子域表示的范围逐渐扩大,最右边的子域称为一级域名或顶级域名,一级域名左边为二级域名,以此类推。

IP地址和域名由专门机构分配、定义,一个域名只能对应一个IP地址,但一个IP地址可以用多个域名来表示。

域名服务器(DNS)根据用户输入的域名查找对应的计算机IP地址,然后供计算机系统内部使用。


3745233

统一资源定位器

URL(Uniform Resource Locator)就是用来确定某信息位置的方法。它通过定义资源位置的抽象标识来定位网络资源,其格式如下 :

<信息服务类型>://<信息资源地址>/<文件路径>

http://www.whitehouse.gov

telnet://odysseus.circe.com:70

ftp://ftp.w3.org/pub/www/doc

gopher://gopher.internet.com

news:comps.sys.novell

wais://quake.think.com/directory-of-servers


3745233

2.2 网页与网站

1.网页

静态网页

在网站中,纯粹HTML格式的网页通常被称为“静态网页”,早期的网站一般都是由静态网页组成的。

静态网页的网址形式通常为: www.example.com/eg/eg.htm

也就是以.htm、.html、.shtml、.xml等为后缀的网页。


3745233

静态网页具有以下特征:

(1)每个静态网页都有一个固定的URL,且网页URL以.htm、.html、.shtml等形式为后缀,而不含有“?”。 (2)网页内容一经发布到网站服务器上,即成为实际存在的保存在服务器上的文件,每个网页都是一个独立的文件。 (3)静态网页的内容相对固定,因此容易被搜索引擎检索。 (4)静态网页没有数据库的支持,采用静态网页技术的网站在制作和维护方面工作量较大,因此当网站信息量很大时完全依靠静态网页制作方式是很难进行后期的维护和管理的。 (5)静态网页的交互性较差,在功能方面有较大的限制。


3745233

动态网页

动态网页的网址后缀不是 .htm、.html、.shtml、.xml等形式,而是以.asp、.jsp、.php、.perl、.cgi等形式为后缀,并且在动态网页网址中有一个标志性的符号“?”。

注:无论网页是否具有动态效果,采用动态网站技术生成的网页都称为动态网页。


3745233

动态网页一般具有以下特点:

(1)动态网页以数据库技术为基础,可以大大降低网站维护的工作量。 (2)采用动态网页技术的网站可以实现更多的功能,如用户注册、用户登录、在线调查、用户管理、订单管理等等。 (3)动态网页实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才生成一个完整的网页。 (4)动态网页中的“?”对搜索引擎检索存在问题,搜索引擎一般不能从一个网站的数据库中访问全部网页,或者出于技术方面的考虑,搜索引擎不去检索网址中“?”后面的内容,因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。


3745233

2.网站

静态网站

静态网站都是由静态网页组成的,网页中只有文字、图形、图像等,用户只能被动地接受这些信息。网页的核心是HTML格式的文档。 静态站点仅提供单向的信息服务。

静态网站是指网站中网页内容是真实存在的网页文件。当用户发送请求时,只是将设计好的并存放在服务器中的网页发送给用户,这个网页中的内容和形式任何用户在查看时都是相同的。


3745233

静态网站具有以下特征:

(1)由静态网页组成。

(2)无法提供交互功能,只可以单向提供信息。

(3)静态网站中的所有网页都是真实存在的,这一点与动态网站有着本质区别。

注:静态网站适合规模小、内容少的企业和个人建站需求。


3745233

动态网站

动态网站是指这个网站使用了动态网页技术,如PHP、ASP和JSP等技术中的一种,网站中使用了数据库管理网站的信息。可以执行交互操作,如注册用户、发表文章。使用数据库管理部分或全部的网站信息。


3745233

注 意

动态网站并不是不包含静态网页,即HTML形式的文档(或是静态网页技术),通常动态网站是在静态网页或是HTML文档基础之上加入动态网页技术。它最核心的标志是使用了动态网页技术,应用了数据库进行管理。对于大型网站来说,为了提高网站的性能,往往对于一些不用产生交互的内容,如单向的公告网页、新闻页面时使用动态网页技术直接生成一个真实存在的静态网页存放在服务器中。


3745233

动态网站具有以下特征:

(1)网站中使用了动态网页技术,如PHP、ASP和JSP等技术中的一种。 (2)网站中使用了数据库管理信息。 (3)网站提供了后台管理系统、注册用户、在线调查和用户登录等功能。

注:动态网站适合开发中型和大型网站。


3745233

动态网站和静态网站的联系:

(1)都是信息的载体。

(2)建站的宏观过程相同,都需要策划、设计和制作三个阶段。

(3)组成网站的基本要素相同。

(4)存放网站的服务器端和显示网页的客户端基本相同。


3745233

动态网站和静态网站的区别:

(1)制作网页的形式不同。

(2)管理方式不同。

(3)信息的管理方式不同。

(4)互动方式不同。


3745233

2.3 网站设计

1.网站的建站流程

网站的建设一般包括四个阶段:策划、设计、制作(技术实施)及维护。

制作网站一般包括以下内容:

1)选择一种主要的动态网页制作技术

2)设置本地站点

3)制作各级网页模板,创建CSS样式

4)利用模板最终完成各级网页的制作

5)测试

6)发布


3745233

申请站点

购买域名和空间、免费申请域名和空间

制作网页

整体设计、页面编写、媒体文件准备等

上传网页

浏览器中上传、Email上传、FTP上传

维护网站

网站更新、网页修改、其他维护工作

2.网站开发步骤


3745233

域名注册

域名注册是企业的“网上商标”,所以域名的选择要与注册商标相复合,以便记忆。

虚拟主机

虚拟主机是网页的存放空间,虚拟主机的优劣和稳定性直接影响网站访问速度。空间适量即可,对虚拟主机的主要考察是带宽、主机配置、CGI权限、数据库、服务和技术支持。

网页设计(程序开发)

网页设计要和公司的企业形象识别(VI)相符合,主要是根据建设网站的目的和功能,计划以下需要什么样的风格,是否需要安装程序,如论坛、社区、留言簿(反馈表单)等。


3745233

域名注册


3745233

3.网站开发技术


3745233

A. 网站开发工具

Macromedia:Dreamweaver、Fireworks、 Flash

微软:Frontpage

Adobe:GoLive、Photoshop


3745233

Web服务器

  • 目前主要使用.NET和J2EE设计网站,Web服务器很多

  • 在实际的企业应用中,最常用的4种Web服务器是WebLogic、WebSphere、Tomcat和IIS(Internet Information Server),其中前三种是J2EE的Web服务器,IIS是.NET的Web服务器。


3745233

B. 多媒体技术

掌握以下几种软件的使用对Web设计开发是十分必要的。

(1)GIF图像动画制作软件,如GIF Animator。

(2)图片处理软件,如Photoshop,Fireworks等,图片处理功能强大,支持多种图片文件格式。

(3)矢量动画制作软件。网页中较流行的有Flash动画制作软件。

(4)多媒体信息的压缩。例如,将图片压缩为JPG格式,将声音压缩为MP3或其他格式。


3745233

C. 动态网站开发技术

ASP

ASP全称是Active Server Pages,是微软公司推出的用以取代通用网关接口的动态服务器网页技术。

它与IIS高度集成,是目前使用最广泛的Web应用程序编程技术之一。

ASP程序必须在支持ASP的Web服务器上才能运行,对于个人用户,可以首先将计算机虚拟为Web服务器。


3745233

ASP程序的优点:

(1)不存在浏览器兼容问题 。

(2)将脚本语言直接嵌入HTML文档中,不需要编译和连接就可直接运行。

(3)面向对象编程。

(4)可扩展ActiveX Server组件功能,可以使用第三方组件或自己开发的ActiveX Server组件。

(5)与CGI相比,运行速度快,占用资源少。

(6)代码运行于服务器端。

(7)利用ADO组件技术直接存取数据库。

(8)编辑简单,所有文本编辑器都可以编辑ASP。


3745233

ASP程序的缺点:

(1)运行速度比HTML程序要慢 。

(2)ASP程序的可移植性稍差,因为ASP只支持Windows系列的操作系统。

(3)网络安全性不够高,适合于对网络安全性要求不高的站点。


3745233

PHP

PHP代表超文本预处理器(Hypertext Preprocessor)

PHP可以从PHP官方站点(http://www.php.net)自由下载。PHP遵守GNU公共许可(GPL),在这一许可下诞生了许多流行的软件诸如Linux和Emacs。可以不受限制的获得源码,甚至可以从中加进自己需要的特色。

PHP在大多数Unix平台,GUN/Linux和微软Windows平台上均可以运行。怎样在Windows环境的PC机器或Unix机器上安装PHP的资料可以在PHP官方站点上找到。安装过程很简单。


3745233

PHP的优点:

(1)学习简单

(2)数据库连接方便

(3)扩展性强

(4)面向对象编程

(5)可伸缩性

(6)其他特点


3745233

JSP

在Sun正式发布JSP(Java Server Pages)之后,这种新的Web应用开发技术很快引起了人们的关注。JSP为创建高度动态的Web应用提供了一个独特的开发环境。按照 Sun 的说法,JSP能够适应市场上包括Apache WebServer 、IIS4.0在内的85%的服务器产品。

JSP的技术方法:

1.将内容的生成和显示进行分离

2.可重用组件

3.采用标识

4.适应平台

5.数据库连接


3745233

D. 数据库技术

数据库是动态网站中的一个重要的组成部分,我们把网站中使用的数据库称作Web数据库。基本上常见的数据库管理系统都可作为Web数据库。

大中型的数据库管理系统有SQL Server、IBM DB2、Oracle、Sybase等,

小型数据库管理系统有Access、Prodox、FoxPro等。


3745233

数据库是信息的集合,这种集合与特定的主题或目标相联系。

例如:管理和维护音乐集合,每个音乐集合均定义了出版公司、出版日期和歌手等。当需要某个公司的产品时,只需输入出版公司的关键字,即可列出该公司的所有音乐产品。

同样在进行修改时,只需针对目标关键字进行修改即可以改变整个数据库中的相关信息。


3745233

在动态网站建设中最常用的数据库为SQL数据库。常用的版本有Microsoft SQL Server和MySQL。

选定数据库软件后,就不要随意更改数据库软件的版本,否则在数据转移过程中容易出现一些数据不兼容问题。


3745233

E. 程序设计语言

(1) HTML

HTML是Hyper Text Markup Language的缩写,中文名为“超文本标记语言”。

HTML是一种简单、通用的标记语言,可以用其制作包容图像、文字、声音等精彩内容的网页。

标记:字符和数据的语法结构通过标记来表示;是HTML语言的标签符号和用标签符号构成的各种元素的总称。

标签:是描述性的标记,用一对<>中间包含若干字符表示,通常成对出现,前一个是起始标签,后一个为结束标签。


3745233

(2) XML

XML是Extensible Markup Language的缩写,中文名为“可扩展标记语言”。

XML(eXtensible Markup Language)是W3C组织于1998年2月发布的标准。

XML的主要用途:

1)作为元标记语言,定义各种实例标记语言标准;

2)作为Web数据的标准交换语言,起到描述交换数据的作用。


Dreamweaver

Dreamweaver在网站建设中的作用

HTML和 XML的区别

  • Dreamweaver为简洁快速地制作功能强大的网站提供了最好的解决方案。

  • Dreamweaver提供了一个完整的建站环境。

  • Dreamweaver拥有灵活的工作环境。

XML专门用来描述文本的结构

HTML用于描述如何显示文本

XML并没有一套固定的标记


3745233

(3) CSS

CSS是Cascading Style Sheets的缩写,中文名为层叠样式表,主要用来对网页数据进行编排、格式化、显示、特效等。

(4) 脚本语言

脚本(Script)语言是嵌入到HTML代码中的程序,根据其运行的位置不同把它分为客户端的脚本和服务器端的脚本。

(5) DHTML

DHTML是动态的HTML,这种技术要求网页具备动态功能,如动态交互、动态更新等。


3745233

2.4 网站架构设计

1.两层架构

传统的两层应用包括用户接口和后台程序,后台程序通常是一个数据库,用户接口直接同数据库进行对话。实现上,通常使用ASP、ASP.NET、JSP或者VB等技术编写这类软件,结构如图所示。


3745233

两层应用架构显示逻辑层一般由HTML、JSP、ASP和ASP.NET页面实现,通过JSP和ASP直接和数据库相连。

2.三层架构

在两层应用中,应用程序直接同数据库进行对话。三层结构在用户接口代码和数据库中间加入了一个附加的逻辑层,通常这个层叫做“商务逻辑层”,如图所示。


3745233

3.N层架构

如果某个应用超过三个独立的代码层,那么这个应用叫做N应用,就不再叫四层或者五层等名称,而是统称为N层。如下图所示。


3745233

2.5 配置网站运行环境

1.安装IIS

  • ASP.NET是Web应用程序,运行必须依赖于Web服务器。ASP.NET正版对操作系统要求如下:

    • Windows 2000 Professional,Windows 2000 Server , Windows 2000 Advanced Server

    • 浏览器:IE 5.5

    • 建议的配置环境为:Windows 2000 Server SP2 + IE6.0+SQL Server 2000企业版。

2.安装.Net Framework SDK

3.SQL Server的安装


  • Login