《dw网页设计—第1章了解网页剖析》由会员分享，可在线阅读，更多相关《dw网页设计—第1章了解网页剖析（46页珍藏版）》请在金锄头文库上搜索。
1、第1章 了解网页,15年前，“网上冲浪”还是一个很时髦的新兴名词，但随着互联网的飞速发展，时至今日，使用网络已经成为了生活中的一部分。Web 1.0时代，人们只是在网页上浏览信息，而在现在所处的Web 2.0时代里，人们可以在网页上和朋友讨论话题、听音乐、看电影、进行电子商务的操作。纽约时报专栏作家托马斯弗里曼在他的世界是平的一书中说到：“2000年世界进入了一个新纪元：全球化3.0。世界从小缩成微小，竞赛场地铲平了。”,1.1 什么是网页,21世纪是信息化的时代，互联网使用者可以在Internet上通过网页浏览信息，如新闻、图片等；也可以通过互联网发布信息，如招聘信息、各种广告；或者是追赶潮
2、流，加入现今十分流行的博客一族。然而这些都离不开互联网的这扇窗户网页。在下面的章节里将介绍网页的相关知识。,1.1.1 网页的概述,网页其实是在这个世界的某一个地方某一台计算机上的一个文件，通过互联网，也就是Internet将两个不同的地址相连，把人们的信息传达到网络世界的各个角落。人们通过互联网，可以在世界的任何一个地方互相交流沟通。,1.1.1 网页的概述,什么是互联网？互联网是一种概念，一个虚拟的东西。人们可以通过浏览器浏览新浪、百度等页面，但是不会有人说“浏览互联网”。互联网指的正是把所有网页链接在一起的巨大信息交流形式，它基于很多的协议来体现出它的表现形式。1989年欧洲粒子物理实验
3、室的科学家们提出了一个分类互联网信息的协议。这个协议极大地推动了互联网的发展和普及，后来它有了一个十分响亮的名字WWW（World Wide Web），中文又称万维网（Wan Wei Wang）。可以认为，从20世纪90年代开始，互联网进入了Web 1.0的时代。,1.1.1 网页的概述,早期的Web 1.0时代，大部分网页只有文字、图像信息可以浏览，这个时候最典型的互联网标志就是门户网站，比如新浪、搜狐。从2001开始，人们认为互联网开始进入Web 2.0时代，这时候的网页可以包含动画、音频、视频，也可以在网页中进行交流、上传文件，使用完全交互式的程序。互联网开始更注重个人化的网络服务，任何
4、使用网络的人，都可以参与到网页的制作中。,1.1.1 网页的概述,笼统地说，网页主要由3部分组成：结构、表现和行为。对应的标准也分为3类，其中大部分都是由W3C（World Wide Web协会）所制定，这其中就包括HTML和CSS（Cascading Style Sheets，简称CSS指层叠样式表）。对于初学者来说，了解网页的制作，一定要分清楚HTML和CSS的不同作用。,1.1.1 网页的概述,比如使用，这是一个表格标签，意思是“将在这里放入一个表格”。那么这个表格该如何表现在浏览者的面前呢？比如它的颜色、边框粗细等。而CSS的出现为设计者解决了这些问题。如下图所示为不同样式的表格。,1
5、.1.1 网页的概述,所以通俗地说，HTML表现了页面的结构，而CSS修饰了页面中的这些内容。如果把制作网页比做一个人在设计一间屋子，那么HTML语言的作用是用来明确这个屋子内要放入哪些家具，或者是床、书柜、椅子等。而CSS的作用就是改变这些家具的样式，对应的如床的样式、书柜的样式、椅子的样式等。,1.1.2 静态网页,在网站设计中，纯粹的HTML格式网页通常被称为“静态网页”，早期的网站一般都是由静态网页组成的。静态网页的特点是这个网页不论何时何地浏览，都将显示相同的形式和内容，且仅能供浏览，无法与网站进行互动。也就是说，无法提供信息给网站，让网站响应使用者的需求。,1.1.3 动态网页,动
6、态网页是与静态网页相对应的，动态网页指网页的内容可以根据某种条件的改变而自动改变。 动态网页是以.asp、.jsp、.php等形式为后缀的，并且在动态网页网址中有一个标志性的符号“?”。一个典型的动态网页的URL（Uniform Resource Locator，译为统一资源定位器）形式为：,1.1.3 动态网页,动态网页可以是纯文字内容的，也可以是包含各种动画的内容。这些只是网页具体内容的表现形式，并不是动态技术生成的页面，它不能根据用户的要求来更新页面。而一个网页，无论是否具有动态效果，只有采用动态网站技术生成的网页，才可以称为动态网页。,1.1.3 动态网页,在了解了动态网页的概念之后，
7、下面通过一个动态网页的例子来说明动态页面是如何和用户互动的。,1.1.4 开发动态页面和静态页面的联系,早期的动态网页主要采用CGI（Common Gateway Interface）技术。它是HTTP服务器与用户或其他机器上的程序进行“交谈”的一种工具，其程序需运行在网络服务器上，可以使用多种不同的程序语言（如Visual Basic、Delphi或C/C+等）编写适合的CGI程序。,1.1.4 开发动态页面和静态页面的联系,当用户在页面上留言，输入一段信息，接着单击确定按钮时，此时都是工作在客户端。而接下来浏览器会将用户的信息传递到CGI程序，于是CGI程序在服务器上按照预定的方法进行处理
8、。虽然CGI技术已经应用很长时间而且功能比较强大，但由于其有编程困难、效率低下、修改复杂等缺点而逐渐被新技术取代。,1.1.4 开发动态页面和静态页面的联系,目前常用的新技术有3种，这3种技术在制作网页上各有特色，但都在发展中。在互联网领域中，这3种技术的格局像三国分立的局面一样，都占有市场的一席之地，它们就是PHP脚本语言、ASP脚本语言和JSP脚本语言。,1PHP脚本语言,PHP即Hypertext Preprocessor（超文本预处理器），是目前在Internet上应用的较为广泛的脚本语言，其语法借鉴了C、Java、PERL等语言。它对编程能力的要求不高，只需少量的编程知识就可以使用P
9、HP建立一个交互的Web站点。,2ASP脚本语言,ASP即Active Server Pages，是微软开发的一种语言，它本身没有专门的编程语言，而是允许用户使用许多已有的脚本语言编写ASP的应用程序。它的工作方式是在Web服务器端运行，运行后再将运行结果以HTML格式传送至客户端的浏览器。正因为如此，ASP要比一般的脚本语言安全得多。,3JSP脚本语言,JSP即Java Server Pages，它是由Sun Microsystem推出的，是以Java Servlet和整个Java体系的Web开发技术为基础。JSP和ASP在技术方面有许多相似之处，不过ASP一般只应用于微软的平台上。而JSP
10、则可以在大多数的服务器上运行，而且采用JSP技术开发的应用程序比采用ASP开发的应用程序，更具有可维护性和可管理性，所以被业界认为是未来最有发展前途的动态网站技术。,1.1.4 开发动态页面和静态页面的联系,这3种技术目前是制作动态页面的主流，而且在未来一段时间内，PHP、ASP、JSP也会在竞争中共存。对微软服务器较熟悉的程序员采用ASP技术会更容易得心应手。对于Linux的爱好者来说，采用PHP技术是比较合适的选择。对可维护性和可管理性要求较高的设计者，适合使用JSP技术，尤其是在构建大型网站的应用中。,1.2 开发网页的工具,如果说制作网页的设计者是一个画家，那么开发程序的工具就相当于画
11、家手中的画笔和颜料。这些工具能为设计者编写代码、调试代码、运行代码时提供一个方便的环境。在开发网页时也有属于它的开发工具、为这种语言量身定做的开发工具。如记事本、Dreamweaver等工具可以用来开发PHP、ASP和JSP中的任何一种程序。,1.2.1 HTML页面的开发工具,HTML语言作为一种语义派生出来的语言，最常见的有3种开发工具。分别是记事本、Dreamweaver和Frontpage。,1记事本,记事本是Windows系统自带的简单的文本编辑软件，但由于大部分代码都是纯文本的，所以记事本可以编写任何网页。不过对于稍大型的网页需要编辑大量代码时，记事本就显得不是那么适合了，但对于初
12、学者来说，记事本是较好的练习工具。,2Dreamweaver开发工具,Dreamweaver是MACROMEDIA公司开发的集网页制作和管理网站于一身的网页编辑器。它是一款专业网页设计师的视觉化网页开发工具，利用它可以制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 Dreamweaver最大的特点是所见即所得。可以使用它的网站地图快速制作网站雏形、设计、更新和重组网页。此外，Dreamweaver可以自动生成源代码，大大提高了网页开发人员的工作效率。,3Frontpage开发工具,Frontpage是微软公司发布的一款入门级网页制作工具，是微软Office组件的一部分。如下图所示为Fro
13、ntpage的使用界面。,1.2.2 动态页面的开发工具,动态页面的开发工具根据开发语言不同而不同。本节主要介绍常见的3种开发语言：PHP、JSP、ASP的开发工具。,1PHP开发工具,PHP作为一种开放型的语言，其开发工具并没有标准的开发工具，可以用很多工具进行开发（包括记事本），也可以用ZDE等工具进行开发，只要语法正确就可以了。比较好的是ZDE和PHPED开发工具。,1PHP开发工具,ZDE（Zend Development Enviorment）是ZEND公司推出的一款集成开发平台。ZDE是用JAVA语言编写的，其同样具有多平台性。 PHPED是由NUSPHERE公司推出的，它提供的功
14、能最全，同样具有语法加亮、函数补全和工程管理等功能。除此之外，还有自动代码补全功能、可视化的数据库管理功能、常见HTML标签集、支持插件等功能。同时它还内置DAV、CVS、FTP、WEBSERVER、DEBUGGER、JS代码列表。,2ASP开发工具,Visual Interdev是Microsoft公司所开发的ASP开发工具，是一款可视化工具，可以对ASP代码进行颜色识别、自动代码提示。Visual InterDev是为程序员设计的网页开发工具，而Microsoft FrontPage是针对非程序员的编辑工具。Microsoft FrontPage是Microsoft Office中的一部分
15、。,3JSP开发工具,MyEclipse+Struts是比较流行的JSP开发工具。Struts最早是作为Apache Jakarta项目的组成部分，项目的创立者希望通过对该项目的研究，改进和提高JavaServer Pages 、Servlet、标签库以及面向对象的技术水准。,1.3 使用网页浏览器,网页浏览器是显示网页服务器或档案系统内的文件，并让用户与这些文件互动的一种软件。它用来显示在万维网或局部局域网络等内的文字、影像及其他资讯。浏览器就是设计者的画廊，设计者把网页放在这里展示给用户。,1.3.1 网页浏览器的工作原理,Windows系统中自带了IE浏览器，普通用户在使用它浏览网页时，
16、很多时候都忽视了自己在使用的浏览器。对于一个页面设计者来说，了解浏览器的原理可以令设计者找到适合的途径把网页展示给用户。,1.3.1 网页浏览器的工作原理,那么用户是如何使用浏览器浏览网页的呢？WWW是一种采用B/S（Browser/Server）的结构，即浏览器和服务器结构。它随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。在这种结构下，用户工作界面是通过WWW浏览器来实现，主要事务逻辑在服务器端（Server）实现，很少部分事务逻辑在前端（Browser）实现。,1.3.1 网页浏览器的工作原理,浏览器的工作原理可以分以下几步来理解。 （1）浏览器通过HTML表单或超链接请求指向一个应用程序的URL。 （2）服务器收发到用户的请求。 （3）服务器执行已接受创建的指定应用程序。 （4）应用程序通常是基于用户输入的内容，执行所需要的操作。 （5）应用程序把结果格式化为网络服务器和浏览器能够理解的文档，即我们所说的HTML网页。 （6）网络服务器最后将结果返回到浏览器中。,1.3.1 网页浏览器的工作原理,如下图所示为浏览器的工作原理
