1.3 提高
——网页设计扩展知识

Dreamweaver CS5支持目前网页设计领域中所有的网页脚本语言格式，从HTML、XHTML、CSS、JavaScript、ASP到PHP、JSP等，下面针对一些扩展知识进行简单的介绍。

1.3.1 常见的网页脚本语言

1．HTML

“World Wide Web”（WWW，万维网）是一种建立在Internet上的、全球性的、交互的、多平台的、分布式的信息资源网络。它采用HTML描述超文本（Hypertext）文件。这里所说的超文本指的是包含链接关系的文本，并且包含了多媒体对象的文件。

WWW万维网有三个基本组成，它们是URL（统一资源定位器）、HTTP（超文本传输协议）和HTML（超文本标识语言）。

URL(Universal Resource Locators) ：提供在№b上进入资源的统一方法和路径，使得用户所要访问的站点具有唯一性，相当于实际生活中的门牌地址。它说明了链接所指向的每个文件的类型及其准确位置。

HTTP（Hypertext Transfer Protocol，超文本传输协议）： 是一种网络上传输数据的协议，专门用于传输WWW上的信息资源，在服务器和客户机之间使用HTTP进行通信。WWW遵循HTTP主要以“超文本”（Hypertext）或“超媒体”（Hypermedia）的形式提供信息。

HTML（Hypertext Markup Language，超文本置标语言或超文本标记语言）： 是一种文本类、解释执行的标记语言，它是Internet上用于编写网页的主要语言。用HTML编写的超文本文件称为HTML文件。

HTML是种简易的文件交换标准，有别于物理的文件结构，它旨在定义文件内的对象和描述文件的逻辑结构，而并不定义文件的显示。由于HTML所描述的文件具有极高的适应性，所以特别适合于WWW的出版环境。

HTML是纯文本类型的语言，使用HTML编写的网页文件也是标准的纯文本文件。我们可以用任何文本编辑器，例如Windows的记事本程序打开它，查看其中的HTML源代码，也可以在用浏览器打开网页时，通过相应的“查看/源文件”命令查看网页中的HTML代码。HTML文件可以直接由浏览器解释执行，而无须编译。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容，正是因为如此，网页显示的速度同网页代码的质量有很大关系，保持精简和高效的HTML源代码是十分重要的。如图1-28所示是使用HTML制作的网页效果。

2．XHTML

HTML是我们建立网页的工具，从它出现发展到现在，规范不断完善，功能越来越强。但是依然有缺陷和不足，人们仍在不断地改进它，使它更加便于控制和有弹性，以适应网络上日新月异的应用需求。XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用的更多需求。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的基于HTML设计的网站，直接采用XML还为时过早。因此，在HTML 4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。所以，建立XHTML的目的就是实现HTML向XML的过渡。目前国际上在网站设计中推崇的Web标准就是基于XHTML的应用（即通常所说的CSS＋DIV）。

XHTML是HTML 4.0的重新组织，确切地说它是HTML 4.01，是一个修正版本的HTML 4.0，只不过以XHTML 1.0命名发行。它们在XML里的解释会有一些必要的差别，但另一方面，它们依然非常相似，我们可以把XHTML的工作看作是HTML 4.0基础上的延续，其特点说明如下。

XHTML解决HTML所存在的严重制约其发展的问题。HTML发展到今天存在三个主要缺点

不能适应现在越来越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML；由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML；数据与表现混杂，这样你的页面要改变显示，就必须重新制作HTML。因此W3C又制定了XHTML，XHTML是HTML向XML过渡的一个桥梁。

XML是Web发展的趋势，所以人们急切地希望加入XML的潮流中。XHTML是当前替代HTML 4标记语言的标准，使用XHTML 1.0，只要你小心遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。也就是说，你可以立刻设计使用XML，而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使Web平滑地过渡到XML。

使用XHTML的另一个优势是：它非常严密。当前网络上HTML的糟糕情况让人震惊，早期的浏览器接受私有的HTML标签，所以人们在页面设计完毕后必须使用各种浏览器来检测页面是否兼容，往往会有许多差异，人们不得不修改设计以便适应不同的浏览器。

XHTML能与其他基于XML的标记语言、应用程序及协议进行良好的交互工作。

XHTML是Web标准家族的一部分，能很好地工作在无线设备或其他用户代理上。

在网站设计方面，XHTML可以帮助你去掉表现层代码的恶习，并养成标记校验来测试页面工作的习惯。

3．XML

XML（The Extensible Markup Language，可扩展标识语言）目前推荐遵循的是W3C于2000年10月6日发布的XML 1.0（参考地址www.w3.org/TR/2000/REC-XML-20001006）。与HTML一样，XML同样源于SGML，但XML是一种能定义其他语言的语言。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，现在逐渐用于网络数据交换标准的格式。

4．CSS

CSS是一种叫做Cascading Style Sheets（层叠样式表）的技术。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者多个网页的外观。这样可以大大减少网页设计师的工作量，所以它是每一个网页设计人员的必修课。

CSS语言是一种标记语言，它不需要编译，可以直接由浏览器执行（属于浏览器解释型语言）。CSS文件也可以说是一个文本文件，它包含了一些CSS标记，CSS文件必须使用css为文件名后缀。CSS是由W3C的CSS工作组产生和维护的。目前很多网站已经开始使用(X)HTML结合CSS的方法对网站进行重构，包括国内的一些大型网站如闪客帝国、雅虎、网易等，如图1-29所示。

5．ASP

ASP是Active Server Page的缩写，意为“活动服务器网页”。ASP是微软公司开发的代替CGI脚本程序的一种应用，它可以与数据库和其他程序进行交互，是一种简单、方便的编程工具。ASP网页文件的格式是.asp，现在常用于各种动态网站中。ASP是一种服务器端脚本编写环境，可以用来创建和运行动态网页或Web应用程序。ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等。利用ASP可以向网页中添加交互式内容（如在线表单），也可以创建使用HTML网页作为用户界面的Web应用程序。与HTML相比，ASP网页具有以下特点。

利用ASP可以突破静态网页的一些功能限制，实现动态网页技术。

ASP文件包含在(X)HTML代码所组成的文件中，易于修改和测试。

服务器上的ASP解释程序会在服务器端制定ASP程序，并将结果以(X)HTML格式传送到客户端浏览器上，因此使用各种浏览器都可以正常浏览ASP所产生的网页。

ASP提供了一些内置对象，使用这些对象可以使服务器端脚本功能更强。例如可以从Web浏览器中获取用户通过(X)HTML表单提交的信息，并在脚本中对这些信息进行处理，然后向Web浏览器发送信息。

ASP可以使用服务器端ActiveX组件来执行各种任务，例如存取数据库、发送E-mail或访问文件系统等。

由于服务器是将ASP程序执行的结果以(X)HTML格式传回客户端浏览器，因此使用者不会看到ASP所编写的原始程序代码，可防止ASP程序代码被窃取。

目前很多网站的论坛都是直接通过动网论坛系统修改而来，如图1-30所示。

6．JSP

JSP（JavaServer Pages）是由Sun Microsystems公司倡导、许多公司参与共同建立的一种动态网页技术标准。JSP技术有点类似于ASP技术，它是在传统的网页HTML文件（*.htm，*.html）中插入Java程序段（Scriptlet）和JSP标记（tag），从而形成JSP文件（*.jsp）。

用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。JSP技术使用Java编程语言编写类XML的tags和scriptlets来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计和显示分离，支持可重用的基于组件的设计，使基于Web的应用程序开发变得迅速和容易。

Web服务器在遇到访问JSP网页的请求时，首先执行其中的程序段，然后将执行结果连同JSP文件中的(X)HTML代码一起返回给客户。插入的Java程序段可以操作数据库、重新定向网页等，以实现建立动态网页所需要的功能。JSP与Java Servlet一样，是在服务器端执行的，通常返回该客户端的就是一个(X)HTML文本，因此客户端只要有浏览器就能浏览。

JSP页面由(X)HTML代码和嵌入其中的Java代码组成。服务器在页面被客户端请求以后对这些Java代码进行处理，然后将生成的(X)HTML页面返回给客户端的浏览器。Java Servlet是JSP的技术基础，而且大型的Web应用程序开发需要Java Servlet和JSP配合才能完成。JSP具备了Java技术简单易用、完全面向对象、具有平台无关性且安全可靠、主要面向互联网等所有特点。在国内使用JSP技术为后台的网站有网易、中国移动、博客动力和PConline等，如图1-31所示。

7．PHP

PHP是英文“超级文本预处理语言”（Hypertext Preprocessor）的缩写。PHP是一种(X)HTML内嵌式的语言，PHP与微软的ASP颇有几分相似，都是一种在服务器端执行的嵌入(X)HTML文档的脚本语言，语言的风格又类似于C语言，现在被很多网站编程人员广泛运用。PHP独特的语法混合了C、Java、Perl以及PHP自创新的语法，它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到(X)HTML文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；与同样是嵌入(X)HTML文档的脚本语言JavaScript相比，PHP在服务器端执行，充分利用了服务器的性能；PHP执行引擎还会将用户经常访问的PHP程序驻留在内存中，其他用户再一次访问这个程序时就不需要重新编译程序了，只要直接执行内存中的代码就可以了，这也是PHP高效率的体现之一。PHP具有非常强大的功能，所有CGI或者JavaScript的功能PHP都能实现，而且支持几乎所有流行的数据库以及操作系统。

PHP的特性主要有以下几点。

开放的源代码： 所有的PHP源代码都可以得到。

免费： PHP是免费的。

基于服务器端： 由于PHP是运行在服务器端的脚本，可以运行在UNIX、Linux和Windows下。

嵌入(X)HTML： 因为PHP可以嵌入(X)HTML，所以学习起来并不困难。

简单的语言： PHP坚持以脚本语言为主，与Java和C++不同。

效率高： PHP消耗相当少的系统资源。

图像处理 ：使用PHP可以动态创建图像。

目前在国内应用PHP技术最为成熟的应该算是Discuz论坛了，国内的很多知名论坛都是使用Discuz论坛系统进行改版制作的，如图1-32所示。

1.3.2 Web标准化布局概述

CSS规则在互联网发展之初就已经产生了，但因为一直以来缺乏浏览器的支持，它的重要性和优势在很大程度上打了折扣。网页设计师们渴望通过改变Web的展示来为自己的网页加入创新的动力，于是(X)HTML功能就被无限扩展，而不是依靠功能更强大的CSS。这是很自然的，但也与W3C所倡导的Web设计理念越走越远，简单的问题被复杂化了。

Web标准化布局相比表格布局而言是有很多优势的，主要包括以下几点。

表现和内容相分离： 将设计部分剥离出来放在一个独立样式文件中，(X)HTML文件中只存放文本信息。

提高搜索引擎对网页的索引效率： 用只包含结构化内容的(X)HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。

提高页面浏览速度： 对于同一个页面视觉效果，采用DIV+CSS重构的页面容量要比表格编码的页面文件容量小得多，前者一般只有后者的1/2大小。

易于维护和改版： 你只要简单地修改几个CSS文件就可以重新设计整个网站的页面。

浏览器将成为更友好的界面： 样式表的代码有很好的兼容性，也就是说，如果用户丢失了某个插件时不会发生中断，或者使用老版本的浏览器时代码不会出现杂乱无章的情况。只要是可以识别串接样式表的浏览器就可以应用它。

如何评价一个网页设计的好坏，也许没有一个统一的标准。但是，建立在一个良好结构基础上的网页代码，肯定也是最易于维护和扩展的。Table和CSS本身没有优劣之分，我们只要坚持和追求最基本的实用目标，即：

对于设计者易于设计。

对于编程者易于整合。

对于管理者易于维护。

对于浏览者易于阅读。

对于浏览者易于交互。

但是，到目前而言，还没有出现一个对Web标准化布局完美支持的所见即所得的网页设计工具，哪怕是Dreamweaver、FrontPage等软件，也仅仅局限于对表格布局可视化的支持，对于复杂结构的CSS的支持还远没有达到让人满意的地步。这也是阻碍CSS普及应用的一个重要因素，或者说是实现完全CSS布局的一个障碍。相比起基于图形界面的软件的学习，CSS代码的学习就显得有些困难和枯燥无味了。

这似乎与(X)HTML的早期应用有点类似。那时的人们还没有开发出很好用的(X)HTML编辑器，设计一个网页需要设计师一行一行手工输入代码，当然编写一个页面的价格也不菲，一个页面的开价甚至高达上万元，与现在设计一张漂亮的页面仅需百十元真是不能够同日而语，不过这也限制了当时网页设计的应用与普及。好在各种网页设计工具不断涌现，并且功能越来越强大，直到需要简单的操作就可以设计出很漂亮的页面，这加速了网页设计的普及与推广，但也使网页设计师的单位劳动价值快速贬值。

1．什么是Web标准

Web标准是一个复杂的概念集合，它由一系列标准组成。这些标准大部分由W3C起草与发布，也有一些标准是由其他标准组织制定，如ECMA（European Computer Manufacturers Association，欧洲电脑厂商协会）的ECMAScript标准。

由于网页设计越来越趋向于整体结构化，因此网页设计也必须从三个方面入手：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分为三个方面：结构化标准语言主要包括(X)HTML和XML；表现标准语言主要包括CSS；行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

2．Web标准化布局的核心技术

DIV是(X)HTML中的一个标签，我们可以把DIV看成一个盒子，在这个盒子中可以包含网页中的所有内容，甚至是DIV本身。在Dreamweaver软件中，也把它称为图层，我想使用过Dreamweaver的读者一定不会很陌生，图层从Dreamweaver 3开始一直到现在的Dreamweaver CS5中都存在着。在早期，我们使用图层做简单的页面布局并制作网页中的时间轴动画。但是图层的真正意义在于和CSS样式表的结合，从而实现一种全新的布局方式。

在样式表中可以使用浮动或者是定位的方法来对DIV标签进行定位，我们可以把网页看成是一个个矩形区域的组成部分，首先我们来看一个网页效果图，如图1-34所示。

这个页面可以划分为如图1-35所示的矩形区域。

每一个矩形区域都可以看成是一个DIV，那么整个页面结构就由6个基础DIV构成，当然考虑到内容的嵌套，具体的DIV数量可能会更多一些，然后通过样式表对每个DIV进行定位，页面布局也就制作出来了。

使用DIV+CSS的另外一个核心技术就是把页面的结构和表现分离，我们可以把网页的内容都制作在(X)HTML页面中，而把所有的样式都写在外部的CSS文件中，一个网站中的多个网页都可以调用同一个样式表文件。如图1-36所示，闪客帝国就采用了图层和CSS的布局方式，每天大概会有上百万人访问这个Flash站点。是什么原因促使这样的大型商用网站选择了CSS样式布局呢？

使用图层结合样式布局，页面中不再有表格。

不需要使用重复的<font>标签。

使用了CSS样式，可以尽量少地使用(X)HTML标签，所以页面的文件量明显下降，能够有效地节约带宽。

对于所有的浏览器，只需要使用一个样式表，浏览的效果不会有太大的差别。

从技术层面而言，在使用图层加样式排版的网页中，你不会再看到<table>、<tr>、<td>这样的表格标签，取而代之的是<div>标签和CSS样式。页面中的所有内容都包含在<div>这个块级别元素之内，而通过一个外部的链接样式，就可以对这些块级别元素的位置、尺寸、颜色等效果进行控制。在记事本程序中打开闪客帝国网页的源文件，看到的是很多的DIV标签，如图1-37所示。

综上所述，Web标准是一个不断发展、逐步深入的过程，并不要求一步到位。在现有阶段，我们可以根据实际的需求来选择所需要的布局技术，如果是简单的应用或者小型项目，使用表格来排版布局是你不二的选择，这样做的好处是任何低版本的浏览器都能够正常地访问你的网站。如果是商业化的大型项目，则应该使用Web标准化布局技术来制作，尽量节约网站的带宽，让更多的人更快速地访问你的网站，同时节约你的成本。

结束语

本章重点介绍了Dreamweaver CS5的基本概念，以及Dreamweaver CS5软件所支持的文档类型。此外还着重介绍了Dreamweaver CS5较前一版本新增加的功能，以及网页布局的核心技术。本章所讲解的内容以概念居多，希望读者能够理解并且掌握。 HCNrVTYqzLEXATKsDbceVhfx2m/vg4xqPMLg4ih20Vi7tFaO2GNUu/EkMSuHLwoh