Web开发与技术设计一.ppt

Web 开发与技术设计 网络中心,课程内容,网站设计技术：网站规划、风格创意设计、版面布局、色彩运用等 网页上的图像、多媒体及交互性 服务器端的设计 网站设计新技术：CSS、Javascrip、JavaApplet、DHTML、ASP、JSP、PHP、CGI、ActiveX、ISAPI、VRML、XML 课件下载：ftp:/,第一章 绪论,11 Internet的发展方向和用途 12 Internet的底层服务 13 Web页Internet体面的外衣 14 丰富多彩的Web页制作技术 15 Web开发制作工具,Internet的概念,简单地说，Internet是信息的载体，任何可以通过交互信息完成的事情都可以借助Internet来完成。广义上讲，Internet是遍布全球的联络各个计算机平台的总网络，是成千上万信息资源的总称；从本质上讲，Internet是一个使世界上不同类型的计算机能交换各类数据的通信媒介。从Internet提供的资源及对人类的作用这方面来理解，Internet是建立在高灵活性的通信技术之上的一个已硕果累累，正迅猛发展的全球数字化数据库。,Internet是怎样工作的,Internet好比一个货运中心，当Internet传输数据或信息时，它会先在货物里装入集装箱单（TCP协议），然后将它们分解，并在每个包中装入一张单（IP协议）。分解后的货物经过的第一个“路口”就是路由器，它的作用就是检查这些单条，确定无误后就让这些包走不同的路。上路后它们就根据单条（IP协议）上所记载的收发信人的名称地址，往收信人的地址送去。当所有的包都送到后，就按照集装箱单（TCP协议），把它们重组成原来的模样，文仵的传送就这样完成了。如果在传输中其中的一部分丢失了，它就会根据TCP协议重发那一部分的数据，这样就确保了数据的安全。Internet就是在TCP/IP协议的协调下，高速而有效的工作着。,1.1 Internet的发展方向和用途,Internet服务提供商 Internet咨询服务业 Internet广告服务业 电子商务 个人服务领域,Internet服务提供商,Internet服务提供者提供的是这样的一种服务：由于租用数据专线与Internet主干线联接需要很高的费用，一般用户很难负担得起，所以迫切需要一些商业机构，由他们出钱架设或租用某地区到Internet主干线路的数据专线，并把位于本地区的某台称为Internet服务器的计算机主机与Internet骨干线联通。然后，如果本地区的用户想上网，就可以通过便宜的拨号电话线进入Internet服务器，接着通过服务器间接进入Internet。,Internet咨询服务业,对于普通用户来说，网上已经提供了许多的搜索引擎，如yahoo、sohu、yeah、netease、等，人们可以方便的敲入自己想要查询的内容关键字，由搜索引擎为用户查找注册在该引擎上的相关网站。这是广泛意义上的咨询服务，适用于大多数的网络用户。 对于企业用户，网上还有很多更为专业的咨询服务网站，为企业提供全面的分析和服务。,Internet广告服务业,Internet庞大的用户群。世界性的覆盖范围、丰富的表现手段、合理的广告成本以及高科技的形象吸引了众多厂商选择了Internet作为广告媒体。他们可以通过专题论坛、邮件目录、广告服务器、在广告服务商的服务器上租用空间等手段发布广告。在服务器上租用“空间”的这种方法比在电视上租用“时间”所花费的投资要少得多，而且服务好，效果佳，广播范围也比电视广告广。虽然不能使所有需要它的人都能及时得到，但对于中小型企业和一些不太具有时效性的产品，Internet广告是首选途径。,电子商务,电子商务是指通过信息网络以电子数据信息流通的方式在全世界范围内进行并完成的各种商务活动、交易活动、金融活动和相关的综合服务活动。目前电子商务已涉及和可以进行的业务包括：商家在销售前后向客户提供所销售的产品和服务的有关细节、产品的使用技术指南、回答顾客的询问和意见、销售过程的处理等服务；在交易后采用电子资金转帐、信用卡、电子支票、电子现金等多种方式进行电子支付；对客户所购买的商品进行发送管理和运输跟踪，包括对可以用电子化方式来传送的产品如软件资料等的实际发送；在因特网上组建一个虚拟企业来提供产品和服务、组织志同道合的公司和贸易伙伴共同拥有和运营共享的商业方法；政府部门和某些机构通过因特网进行的办公业务和行政作业流程等。,电子商务,按参与交易的对象分类 企业与消费者之间的电子商务（Business to Customer 即B TO C） 企业与企业之间的电子商务（Business to Business 即B TO B） 企业与政府方面的电子商务（Business to Government 即B TO B）,电子商务,按交易涉及的商品内容分类 间接电子商务（有形货物的电子订货，如鲜花、书籍等，需依靠传统的运输系统） 直接电子商务（无形的货物和服务，如计算机软件、全球规模的信息服务等）,电子商务,按电子商务使用的网络类型分类 EDI网络电子商务（Electronic Data Interchange，电子数据交换） 因特网电子商务（Internet 网络） 内联网络电子商务（Intranet 网络）,电子商务,从应用和功能方面来看，可以把电子商务分为三个层次或3S，即SHOW、SALE、SERVE。 SHOW（展示）：提供电子商情，企业以网页方式在网上发布商品及其它信息，和在网上做广告等 SALE（交易）：将传统形式的交易活动的全过程在网络上以电子方式来实现，如网上购物等 SERVE（服务）：企业通过网络开展的与商务活动有关的各种售前和售后的服务,个人服务领域,个人服务领域是Internet最人性化的一面，它体现了全世界各个地区，不同民族，不同文化背景的人们的思想和观念。它把个人风格融于Web页中，每个人建立属于自己的主页，表达自己的看法，提供自己的服务，既方便了他人又满足了自身的某种需要。因此，个人服务领域是存在于公共服务之外的另一片美好的天空。,1.2 Internet的底层服务,电子邮件服务E_mail 网络论坛BBS 网络新闻组Newsgroup 文件传输服务FTP 万维网服务WWW,电子邮件服务E_mail,电子邮件在传送的时候所采用的是“简单邮件传输协议”（SMTP：Simple Mail Transfer Protocol），邮件本身由三部分所组成：信封、信头和信体。信封由协议生成，而信头必须为发信人所指明，否则，信件的传送会发生错误。信体部分是最重要的，在电子邮件中，信体的概念被广延了，它不再单指文字，只要愿意，它可以包涵任意内容，如多媒体信息、数据库软件、应用软件等等。,网络论坛BBS,BBS，全称“电子公告版系统“（Bulletin Board System）是Internet上著名的信息服务系统之一，发展非常迅速，几乎遍及整个Internet。它提供的信息服务领域包括科学、教育、政治、经济、股市、法律、图书、社区服务、校园信息、文化、体育、艺术、娱乐等等。,网络新闻组Newsgroup,News可以被看作一个国际范围内的大BBS讨论群，在Internet上有很多新闻服务器（News Server），不同的用户通过一些软件连接到新闻服务器上，选择相应的讨论区（或称作新闻组Newsgroup），发表文章，其它的用户则可以通过相同的办法获得这些文章。,文件传输服务FTP,FTP：File Transfer Protocol，将文件从某一台文件服务器上取下来，或将自己的文件放到某一台主机上（Upload/Download）。最初的设计目的是从一般网络文件的传输角度出发的，然而至今它以用于从Internet网络上获取远程主机的各类文件信息，包括公用程序、源程序代码、可执行程序代码、程序说明文件、研究报告、技术情报、科技论文、数据和图表等等。,万维网服务WWW,WWW（World Wide Web），万维网。它的创建是为了解决Internet上的信息传递问题。它是一种特殊的结构框架，它的目的是为了访问遍布在因特网上数以万计的机器上的链接文件。WWW是随着HTTP和HTML一起出现的，已经成为信息交换的一种很有效的方式。在特殊应用程序和浏览器的推动下，Web很快成为Internet上发布文本和多媒体信息的一种有效手段。,1.3 Web页Internet体面的外衣,流动在Internet最顶层的信息，就是Web页。它是当今Internet上最流行的资源交互形式，人们通过建立自己的Web页和访问他人的Web页来交流信息，提供服务，它创造了一个公开的Web世界，这个世界里的人们拥有平等的权力和共同的义务。,Web页Internet体面的外衣,Web不是一个计算机网络。Internet是一个实际的网络，导线把成千上万的计算机连接到一起全球性的计算机。Web是一个运行在Internet上的软件系统。首先有Web文件，储存在各地的计算机中的文件。然后有Web服务器，知道这些文件在哪并能在Internet上发送它们的专门程序。还有Web浏览器，请求发送文件服务的程序。当你使用Internet时，你是在阅读浏览器中显示的文件。,Web页Internet体面的外衣,Web站点是向用户或潜在客户提供信息(包括产品和服务)的一种方式。其文档所包含的内容是由被称为超文本(HyperText)的文本、图形图象、声音，甚至电影等组成。使这些超文本能够有机地关联并可使浏览器识别，是通过HTML语言(HyperText Markup Language超文本标记语言)实现的。同时CGI(Common Gateway Interface公共网关接口)等能使Web具有交互功能。Web站点指引用户浏览该站点或其他站点上的分页信息，可以通过表格和电子邮件的连接提供双向交互方式。,Web页是如何工作的,Internet上的服务都要基于某种协议，由该协议以一定的形式和规则分发文档，同一网络内部和各个不同网络之间传递的内容都需要协议才能互相识别和转换。我们所提到的Web页是通过WWW服务实现的，WWW基于一种TCP/IP的协议，这种协议已经被决大多数的服务器操作系统所支持，它可以在不同的计算机操作系统上对服务信息进行适当的格式化和显示。而最终用户浏览这些信息的工具被称作浏览器。,Web页的构成,Web页中的多媒体技术 Web页中的超文本技术 技术和创意Web页的灵魂,Web页中的多媒体技术,在Web页的世界里充满了各式各样的资源：文本、图形、动画、音乐、影视、三维场景，应有尽有。这完全用Bit建造起来的Internet，经过人们的悉心雕琢，原来页可以变的那么生动逼真。这些生动画面都来源于本世纪一项具有划时代意义的新技术多媒体技术。,Web页中的超文本技术,Web页是以超文本 这种信息检索概念为基础建立起来的。,超文本是一种全新的文本组织方式，它通过在每个页面中加入链接标记来和其它地方的文本进行连接，把查找人们需要的信息和显示信息的过程集成在网络中，由网络为你完成。,技术和创意Web页的灵魂,Web页开发人员的技术和创意这就是Web页的主宰者，一个好的Web页，不光来源于华丽的媒体信息，更在于它是否具备高超的技术和出奇的创意。有技术的Web页使人产生由衷的佩服和敬意，平庸的Web页只能被人另眼看待。而有创意的Web页会使人心旷神怡、耳目一新。相形之下，毫无创意的Web页就只能徒具其形了。,如何构造技术与创意兼得的网站,掌握一定的Web页制作技术，熟练运用某种Web页制作工具 针对不同的浏览器和显示器进行设计 遵循一定的Web设计原则（包括Web上的颜色、图像、版面控制等） 进行网站的规划与形象设计 确定网站的目录结构和链接结构 网站的风格与创意设计 版面布局与首页设计 网页的色彩搭配及图形的运用 处理网站内的多媒体（动画、音频、视频等）及增加交互性,1.4 丰富多彩的Web页制作技术,不断完善发展自己的HTML 新兴的脚本语言Javascript和VBScript 提供网页继承功能的级连样式单语言CSS 最新流行的动态网页编程概念DHTML 为网页增添光彩的Java Applet ActiveX技术,丰富多彩的Web页制作技术,通用网关接口编程CGI Internet服务器应用程序接口ISAPI 动态服务器页面ASP 虚拟现实语言VRML PHP : Hypertext Preprocessor JSP （Java Server Page） 可扩展标记语言XML,超文本标记语言HTML,这种简单易学的语言如今以成为编写web页的最基本而且必不可少的语言，他通过标记这一概念把各种网络资源有效地组织到web页中，由标记告诉浏览器这些资源的显示格式和显示位置，并利用超级连接建立文档和文档之间的联系，从而空前合理地把原本令人头痛的网络资源组织起来。,新兴的脚本语言Javascript和VBScript,脚本语言出现的原因是基于HTML不能很好解决动态交互这个缺点，用HTML编写的语言普遍缺乏动态特性，出现在一个web页上的内容不会改变，更不会运动 。脚本语言便是一种能够通过对web页元素进行控制，并嵌入HTML页中编程来进行对web页的动态化的方法。脚本语言一般分为客户端和服务器端两个不同的版本。脚本语言和HTML是无缝连接的，通过一个标记嵌入HTML文档当中，并可以被浏览器选择编译，插入的脚本语言就如同子程序般被HTML元素所调用成为它的一部分。,提供网页继承功能的级连样式单语言CSS,CSS的出现使得Web页的编写速度逐渐趋近于高级结构化语言（如C），它所定义的样式既可以直接嵌入HTML文档，实现单一文件中的继承功能，还可以将所有样式定义于一个样式文件中被以后的不同HTML文档所调用，从而使具有较多共性的Web页的代码只需做很少的改动就可以完成。这样编写出的HTML文档想当有规律，结构性好，程序的调试改动量都相对减少。 CSS在HTML中的标识方法很简单，它的所有语法定义在名为的标记中。,最新流行的动态网页编程概念DHTML,DHTML（Dynamic HTML）有三个最主要的优点，即动态样式。动态内容和动态定位。动态样式能使开发者改变内容的外部特征而不强制用户再次下载全部内容；动态内容可以使开发者改变显示在一页上的文本或图像，以便内容能够交互式地对用户的鼠标和键盘操作作出响应；动态定位则让Web页制作者以自动方式对用户的操作做出响应的方式，移动页面上的文本和图像。,为网页增添光彩的Java Applet,Java Applet 是Java小程序的一种说法，在Internet上应用相当广泛。它的作用并不是像HTML等描述语言标明内容和位置，而是描述一种产生结果的过程。 Java Applet在HTML文档中是以嵌入方式存储的，它被定义于的标记中，其参数由标记进行标识。,ActiveX技术,ActiveX可以说是这样的一种技术： “建立在COM(Componet Object Model)的基础上，以OLE(Object Linking and Embedding)为原形，结合对网络的支持，使OLE控件能够动态处理信息。” ActiveX技术包括很多方面，但对于Internet来说，最常用的还是ActiveX控件（ActiveX Control），简称AC。AC一般是DLL形式的，因而必须在一个被称之为“容器”（Container）的环境下执行，Windows视窗上的许多软件都属于这种“容器”，包括Internet Explorer、Netscape、Visual Basic、Visual C、Visual Foxpro和Delphi等等。,通用网关接口编程CGI,CGI是这样的一种通信标准，他接受客户端的请求，经过辨认和处理，生成HTML文档并重新传送到客户端，实现这种交流过程的编程就叫做通用网关接口（CGI）编程。 CGI可以运行在许多平台上，并完成一定的功能，特别是单一的HTML所能完成的。比如：处理表单、创建表单，创建Web页上的动态内容，处理服务器端的图像映像文件，在Web页中增加搜索功能，创建聊天室等与用户进行交流的应用程序等。,Internet服务器应用程序接口ISAPI,ISAPI可用于编写服务器端的应用程序，Web用户可通过填写HTML表单或单击Web节点上HTML页面中的链接来激活该应用程序。远程应用程序可获取用户提供的信息，并且用这些可编程的信息做出任何事情，然后返回HTML页面中的结果或传递数据库中的信息。 ISAPI由两大部分组成，同时也是它的两大特征：Internet服务器应用程序（ISA）和ISAPI过滤器。,动态服务器页面ASP,“Asp（Active Server Pages）是一种开放式的非编译应用环境，使你能够组合HTML、脚本和可重用的ActiveX服务器组建来建立动态的、强大的基于web的商业应用。Asp支持基于IIS的服务器端脚本，并完全支持VBScript和Javascript。” Asp是由服务器方动态产生的页面，它可以调动其它的程序趋做如存取数据库之类的事情，也能根据不同浏览器类型给出不同的结果，基本上，所有我们用cgi可做的事情它都可以做。Asp就像编写本机应用程序一样高效，它比cgi更有效率，因为是它作为一个服务来运行的，并且能够利用多线程结构的优点。,JSP (Java Server Pages),JSP是由Sun公司倡导、许多公司参与一起建立的一种动态网页技术标准。在传统的网页HTML文件(*.htm,*.html)中加入Java程序片段(Scriptlet)和JSP标记(tag)，就构成了JSP网页(*.jsp)。Web服务器在遇到访问JSP网页的请求时，首先执行其中的程序片段，然后将执行结果以HTML格式返回给客户。程序片段可以操作数据库、重新定向网页以及发送 email 等等，这就是建立动态网站所需要的功能。所有程序操作都在服务器端执行，网络上传送给客户端的仅是得到的结果，对客户浏览器的要求最低，可以实现无Plugin，无ActiveX，无Java Applet，甚至无Frame。,JSP和ASP的比较,相似之处：两者都是为基于WEB应用实现动态交互网页制作提供的技术环境支持。同等程度上来讲，两者都能够为程序开发人员提供实现应用程序的编制与自带组件设计网页从逻辑上分离的技术。而且两者都能够替代CGI使网站建设与发展变的较为简单与快捷。 本质区别：两者是来源于不同的技术规范组织，其实现的基础：WEB服务器平台要求不相同，ASP一般只应用于Windows NT/2000平台，而JSP则可以不加修改地在85%以上的Web Server上运行，其中包括了NT的系统。JSP技术是用JAVA语言作为脚本语言的，而ASP网页使用微软的VBScrip或Jscrip。,PHP : Hypertext Preprocessor,PHP是一种HTML内嵌式的语言，和ASP类似，其语法混合了C、Java、Perl的特点。它是一个Web服务器的 脚本环境，在这里可以生成和运行动态的、交互的、高性能的Web服务器应用程序。因此，PHP不是一种开发工具，而是一种技术框架描述的语言，其主要功能式为生成动态交互式的web应用程序提供一种功能强大 的方好似或者说是技术。,PHP : Hypertext Preprocessor,它属于是一种服务器端的技术，其命令和脚本都是在服务器中解释执行，而送到浏览器的是标准的HTML页面。它可以比CGI或者Perl更快速的执行交互式的网页。,利用PHP可实现如下Web应用程序,根据不同访问者显示不同内容，创建个性化主页 在网站页面上添加滚动显示的广告栏 从HTML的Form中接受信息并且存到不同档次的内容 在页面中添加点击计数器 根据客户浏览器的类型、版本和能力，显示相应不同档次的内容 自己创建web页面导航器 跟踪用户在网站上的用户信息，并且存入日志文件中 通过一些函数，实现服务器端文件系统的远程管理 应用PHP强大 的数据库链接能力，实现web方式的交互式数据库查询,PHP与其它CGI方式的比较,虚拟现实语言VRML,VRML（Virtul Reality Modeling Language）是iternet独特的框架。如同HTML一般，Viml也是一种ACSCII的语言描述语言，其来源为Open In Venter，是SGI公司为其本身需求而开发的3d图形描述语言，只是HTML用于平面 的排版与创VRML则像是雕塑，甚至是装置艺术，可以用其产生物体、才质、灯光与摄影视觉角度等,可扩展标记语言XML,XML和HTML是有联系的，但仅仅是有个共同的根源，即SGML，标准通用标记语言一种元语言，一套用于标记文件和和资料的语法规则的综合。 SGML并不是为网络而设计的。SGML由于一些不必要的及无用的特性而显得过于臃肿。而且，SGML文件本身太大，毫无必要的占用了太多的网络宽带。 XML是一套简化了特征的SGML。它足以能够描述资料，也轻便的可以在网络里自由穿梭。它允许在Internet上进行复杂的信息处理，是一种大有前途的新型自定义标记语言。,可扩展标记语言XML,XML（Extensible Markup Language）突破了HTML固定标记集合的约束，而允许Web开发者根据自己特定的需要而创建一种自定义标记语言。这些自由定义的标记被用来描述文档中的数据元素，这些数据元素可以组成一个信息体系，就像文件夹中的纸张一样。一个合法的XML文档也就是信息体系被适当定义和组织的文档。在外部声明这些标记和体系结构大大减少了创建一个结构化应用程序所需编写的代码量。,XML的三要素,文档类型定义（DTD：Document Type Definition），它是XML的布局语言； 可扩展的样式语言（XSL：Extensible Style Language），也就是XML的样式表语言； 可扩展链接语言（XLL：Extensible Link Language）。,文档类型定义（DTD）,DTD（Document Type Definition ）规定了XML文档的逻辑结构，它可以定义文档的语法，而文档的语法反过来能够让XML语法分析程序确认某个页面标记使用的合法性。,可扩展的样式语言（XSL）,XSL（Extensible Style Language ）是用于规定XML文档样式的语言。它能使浏览器改变文档的表示法，例如不需要与服务器进行交互通信就可以使文档数据的显示颜色或者格式作某种改变。这样的功能类似于CSS，它们同样能达到使一篇原本相同的文档对于不同的用户显示不同的结果。,可扩展链接语言（XLL）,XLL（Extensible Link Language ）将支持目前Web上已有的简单链接，并将进一步扩展链接，在为XML所设想的真正的超文本系统中，所有典型的超文本链接机制都将得到支持，包括：与位置无关的命名、单向链接、可以在文档外规定和管理的链接、多元超链接（如环路、多个窗口）、组合链接（多来源）、链接目标文档是链接源文档的一部分、间接属性（链接类型）。,XML的应用范围,要求Web客户机在两个或多个不同的数据库之间传递信息 为了减少Web服务器的工作量而将部分负荷转移给Web客户机 希望Web页在不同的客户机上表现为不同的形式 某些特定用户需要开发Web环境,1.5 Web开发制作工具,Microsoft FrontPage 2000制作功能强大的网页 Netscape编辑器制作简单的网页 Adobe Pagemill制作多框架、表单和Image Map图像的网页 Claris Home Page快速创建动态的网页 DreamWeaver自制动态HTML动画的网页,Web开发制作工具,HotDog Professional制作要加入多种复杂技术的网页 HomeSite制作可完全控制页面进程的网页 HotMetal Pro制作具有强大数据嵌入能力的网页,