定制Dreamweaver

Dreamweaver ３标准培训教程

定制Dreamweaver

F本课简介　　

　　Dreamweaver可以生成干净的代码，使用户按自己最熟悉、最喜欢的方式进行设计。

　　本课详细地讲解了Clean Up HTML、Apply Source Formatting、Set Color Scheme、Sort Table、格式化表格等命令。

　　接下来用较大的篇幅详细地讲解了创建命令以及自定义和设计Property Inspectors。随着Dreamweaver中自定义标识的增加，因此添加自定义Property Inspectors的能力就自然而然地随之而生。另外对应于Property Inspector的所有属性必须被安放到一个设计紧凑的空间中。

F本课要点及难点

　　自定义Property Inspectors

　　设计Property Inspectors

F1、Dreamweaver命令

　　Dreamweaver提供了许多个性化的机会，用户可以按照自己最熟悉、最喜欢的方式使用，并且生成干净的代码。

　　随着W3C Document Object Model的引进，对象和行为得到了增强，以至于它们比从前功能强大了很多。另外，Dreamweaver 还提出了几种新的途径来扩展它的功能：

　　（1） Commands：【Commands】是在设计阶段用来处理Web页的JavaScript和HTML代码。

　　（2） Property Inspectors：自定义【Property Inspetors】，与自定义标识联合，允许用与Dreamweaver用户界面相同的方式来直接输入属性和值。

　　Dreamweaver采用了W3C Document Object Model（DOM）使命令切实可行。 Dreamweaver中的DOM使HTML页的每个部分（每个标识，每个属性，每一点内容）都可以被读取、修改、删除或者添加变为可能。而且，Dreamweaver命令可以在本地系统上打开、读取和修改其它的文件。

　　依靠命令的编写方式，命令可以带有一个参数窗体，或者不带。通常命令被排列在【Commands】菜单中，但是通过改变CommandMenu.htm文件，用户可以使自己的命令作为任意菜单的部分显示出来，或者根本不出现。因为一个命令可以调用其他的，所以这样的隐藏命令更容易被修改。

　　Dreamweaver配置了五条标准的命令，除了添加一些额外的功能外，还让用户体验到了命令的功能是何等强大：

　　（1） Clean Up HTML：为了得到更小的文件大小，以及更可读的代码，删除不需要的或者多余的HTML。

　　（2） Apply Source Formatting：将在Dreamweaver之外创建的HTML设计成类似于Dreamweaver创建的文档。

　　（3） Set Color Scheme：为当前页面的背景、文本和连接状态选择颜色。

　　（4） Sort Table：使用任何列的升序或者降序方式，在任意表格上执行一或者二级排序。

　　（5） Format Table：为被选择的表格应用17种不同的预设计格式中的任意一个，或所设计的自定义格式。

1.1 Clean Up HTML

　　即使用户从来没有在一个外部编辑器中打开HTML Inspectors或者接触过代码，用的HTML仍然可能变得很笨拙。最常见的问题之一就是多余的<font>标识，这是来自于诸如选择某些文本，然后先改变字体本身，接着是字体尺寸，最后改变字体颜色等操作的结果。这样会使用户代码类似于下面：

　　【Clean Up HTML】命令正如它字面上的意义，被定制用来合并这样的代码，并删除会在页面设计过程中不断堆积的混乱的代码。用户有六种不同的可供选择的清洁操作。【Clean Up HTML】命令仅可应用于当前的页面，并能被应用到整个站点的范围。

　　要使用【Clean Up HTML】命令，可以使用下面的步骤：

J步骤

　　（1）选择【Commands】->【Clean Up HTML】命令，如图1所示。

图1 【Clean Up HTML】对话框

　　（2）要删除在它们之间没有代码的标识对，应确认【Remove:Empty Tags】选项已经被选择。

　　（3）要删除包含了相同代码的多余标识，可选择【Remove:Redundant nested tags】选项。

　　（4）要删除任何非Dreamweaver所创建的库或模板项目的注释，选择【Remove:Non-Dreamweaver HTML Comments】选项。

　　（5）要清除所有的Dreamweaver特殊注释，可选择【Remove:Dreamweaver HTML Comments】选项。

　　（6）要删除任意特殊的标识和它的属性，可以选择【Remove:Specific tag（s）】选项，并在文本框中输入标识的名称。

　　（7）要合并<font>标识，可以选择【Combine nested <font> tags when possible】（在可能的时候合并嵌套<font>标识）选项。

　　（8）要查看一个被应用到用户页面的变化的列表，可以选择【Show log on completion?】选项。

　　（9）用户设置完成后，单击【OK】按钮。

I注意

　　输入不带尖括弧的标识名称；使用逗号来分隔多个标识。

1.2 Apply Source Formatting

　　所有由Dreamweaver创建的代码，都是根据一个被称为Source Format Profile的文档来构造。Source Format Profile控制了哪些代码被缩进，同时哪些代码位于它自己的行上，还有很多其他的HTML书写的规定。有时候，Web页设计者必须处理一些早已创建或者其他设计者使用其它程序所创建的（甚至是手工创建）Web页面。【Apply Source Formatting】命令可以重写原始的代码，以便它可以根据当前的Source Format Profile来构造。用户的眼睛越习惯于Dreamweaver样式的HTML，那么用户对该命令的评价就越高。

　　【Apply Source Formatting】命令是不显示用来收集用户所选择参数的对话框的Dreamweaver命令的一个例子。要调用这个命令，选择【Commands】->【Apply Source Formatting】命令。该命令将立即执行，并且没有提供用来显示它已经完成的确认或反馈信息，如图2所示。

图2 应用源格式命令

I注意

　　【Clean Up HTML】和【Apply Source Formatting】命令组成了一个强大的工具集。这两个命令尤其擅长简化字处理程序（如Microsoft Word）所创建的HTML。

1.3 Set Color Scheme

　　当选择【Set Color Scheme】命令后，如图3所示，就可以设置自己喜欢的页面背景、文本和链接状态的颜色了。

图3 【Set Color Scheme Command】对话框

　　当选择好后，按【Apply】按钮，在【Document Window】窗口中就会立刻显示出效果来。

1.4 Sort Table

　　正如图4所示的那样，当在【Document Window】窗口中选择若干个表格时，用户就可以按照升序或者降序来对列进行排序。

图4 【Sort Table】对话框

K提示

　　（1） Sort By：一级排序，按照某一列进行。

　　（2） Order：排序规则，是按字母的顺序选择升序或者降序，还是按数字的顺序选择升序或者降序。

　　（3） Then By：二级排序，再选一列进行排序。

　　（4） Sort Includes First Row：排序时包括第一行。

　　（5） Keep TR Attributes With Sorted Row：对已排过序的行保持【TR】属性。

1.5 格式化表格

　　如图5所示，当选定一个表格后，就可以按照对话框中所显示的参数对表格进行格式化。这里要强调的是下列几个参数的属性：

图5 【Format Table】对话框

　　（1） Row Colors：【First】指表格的首行的背景颜色，【Second】指表格的次行的背景颜色，【Alternate】指以几行为一个单位间隔进行格式化。

　　（2） Top Row：最上面一行的表格属性。

　　（3） Left Col：最左边一列的表格属性。

　　（4） Apply All Attributes to TD Tags Instead of TR Tags：【TR】表示表格的行，【TD】表示数据单元格，若选此项表示将所有属性应用于【TD】标记而不是【TR】标记。

F2、创建命令

　　命令就像大部分行为一样，是一个JavaScript函数和HTML格式的组合体；HTML可以为任何需要被设置的参数提供用户界面，同时JavaScript将执行特定的命令。虽然用户可以在单独的HTML文件中组合语言，但是许多程序员，包括那些来自于 Macromedia的，都将JavaScript保存在一个单独的.js文件中，该文件使用一个 <script>标识被合并到HTML文件中。

　　命令的可扩充性很强。实际上，只有两个Dreamweaver函数对于命令是特殊的canAcceptCommand和commandButtons，并且不需要任何函数。

　　canAcceptCommand函数将控制什么时候菜单中的命令处于激活状态，什么时候在菜单中变灰。如果canAcceptCommand没有被定义，那么命令将总是可用的。该函数将返回True或者False；如果返回False，那么命令在菜单中会变灰。

　　用户可以在Sort Table和Format Table两个命令的动作中见到canAcceptCommand。要使这些命令中的任意一个起作用，就必须有一个表格被指明。胜于需要一个表格被选中，canAcceptCommand函数会调用一个子程序，findTable，如果使用者的指针被定位在表格中，它将返回true。

　　CommandButtons函数定义了出现在参数窗体右侧的按钮。该项被扩展了的功能在开发命令的时候特别有用。某些命令需要某个操作被反复地运行，并且【OK】按钮不止被选择一次。就像以前提到过的，在窗体扩展到充满整个对话框的情况下，用户根本不必声明该函数。

　　每个被声明的按钮都有一个与之相关的函数，当用户选择了特定的按钮之后，它将被执行。一个命令所对应的所有按钮都排列在一个数组中，被commandButtons所返回。下面的例子声明了3个按钮：【OK】、【Cancel】和【Help】。

　　【OK】和【Help】按钮，调用自定义函数；但是【Cancel】按钮则简单地调用一个内建的JavaScript函数来关闭窗口。对于一个命令可以拥有的按钮数量没有限制，与用户界面设计的理解不同。

　　命令的用户界面的剩余部分（参数窗体）是使用与对象和行为相同的方式、相同的工具来构造的。命令参数窗体或者对话框在文件的<body>中使用HTML<form>。如果没有声明<form>，命令在执行时将不显示对话框。在对象中使用的所有窗体元素（文本框，无线按钮，复选框和列表），在命令中都可以使用。

　　（1）选择文本

　　找出使用者所选择的内容通常的方法需要getSelection函数。getSelection将返回两个字节偏移，标记出使用者所选择内容的起始和结束位置。

　　（2）选择对象

　　要找到被选择的对象，用户只需要得到它的【outerHTML】属性。

　　（3）将命令当作对象来使用

　　命令提供了范围广泛的功能，并可以执行对于行为或者对象都不可用的动作。要使用一个“指向并单击"界面来利用这些功能，最好是将用户的命令伪装成一个对象。作为一个对象，用户的命令将同时出现在【Objects Palette】和【Insert】菜单中。通常，Dreamweaver对象包含两个文件：对应于编码的HTML文件和对应于按钮的 GIF图像，两者都位于【Object】文件夹中。然而当将命令作为对象使用的时候，用户可以分别在【Object】和Command文件夹之间拥有5个文件。标准的Rollover对象是一个很好的例子：在【Object】文件夹中有3个相关的Rollover文件，在Command文件夹中有两个。

　　下面将介绍如何使用它们：

　　1） Object\Rollover.gif.：对应于出现在【Objects Palette】中【Rollover】按钮的图像。

　　2） Object\Rollover.htm.：读取Object\Rollover.js的命令解释程序文件（由Rollover按钮来调用）。

　　3） Object\Rollover.js：包含引用Command\Rollover.htm的ObjectTag函数。

　　4） Command\Rollover.htm：为“对象”创建用户界面，并读取所有的外部JavaScript文件，包括Command\Rollover.js。

　　5） Command\Rollover.js：包含了函数用来执行所需要操作的真实代码，将值返回到对应于Object\Rollover.js文件的Object\Rollover.htm文件中。

　　在Object\Rollover.js文件中，用户会发现objectTag，它被用来将一个对象连同该对象的返回值，都写入到一个已经存在的Web页中。既然这样，该函数首先将获取相应 Command文件（Command\Rollover.htm）的【Document Object Model】；该过程允许当前的函数引用其他文件中的任意的变量集合。然后运行Command\Rollover.htm，该HTML 文件将接着打开对话框，来获取使用者的参数。最终，来自于命令的结果被设置为 ObjectTag的返回值，并被写入到HTML页面中。

F3、自定义Property Inspectors

　　【Property Inspectors】被用在整个Dreamweaver中，用来显示许多不同类型标识的当前属性，这些标识包括：text, images, layers, plug-ins等。【Property Inspectors】不但使查看某个对象的细节变得容易，而且它们还可以快速修改同样的参数。随着 Dreamweaver中自定义标识的增加，添加自定义【Property Inspectors】的能力就自然而然地随之产生。此外，用户可以为已经存在的，并显示在内建的【Property Inspectors】中的标识创建一个自定义的【Property Inspectors】。

　　自定义【Property Inspectors】是HTML和JavaScript的组合体，【Property InspectorsHTML】文件本身被保存在【Configuration】->【Inspectors】文件夹中。然而，【 Property Inspectors】的版面布局与其他Dreamweaver扩展的相比较，受到的限制要多得多。命令或者行为的对话框可以设置为任何的尺寸和形状，任何自定义【Property Inspectors】必须匹配标准的【Property Inspectors】尺寸和设计。因为插入诸如文本框和下拉菜单列表等参数窗体元素需要精确地定位，所以层被广泛地用于创建版面布局。就像许多其他标准的扩展文件一样，许多为Dreamweaver准备的Property Inspectors 文件是由一个调用某个独立的JavaScript文件的HTML文件所组成。然而，将HTML和 JavaScript合并成一个单独的文件是完全可能的。不管它如何被构造，一个自定义【Property Inspectors】的HTML文件需要3个被适当定义的元素：

　　（1）一个初始HTML注释行，说明【Property Inspectors】是对应于哪个标识的。

　　（2） canInspectSelection函数，它将决定【Propety Inspectors】是否根据当前所选内容来显示。

　　（3）第2个函数，inspectSelection，当在该【Property Inspectors】中输入新值时，该函数将更新标识的HTML。

　　【Property Inspectors】定义中相互独立的部分如下：

　　（1） tag：【 Property Inspectors】专门对应标识的名称。虽然不是强制的，但是标识的名称通常采用大写。标识ID也可以是3个关键字中的一个，当指定某个注释类标识时，为*COMMENT*；当检测一个被所定的区域时，为*LOCKED*或者是对应于所有 ASP元素的*ASP*。

I注意

　　标识关键字两边的星号是必须的。

　　（2） Priority：【Property Inspectors】的优先级被赋予从1到10中的一个数字。最高的优先级为10，意味着该【Property Inspectors】将位于其他任何可能的【Property Inspectors】之前。最低的优先级为1，使相应的【Property Inspectors】只能在没有其他的【Property Inspectors】可用时使用。

　　（3） Selection：根据当前所选的内容，光标可以是处于特定标识之中，也可以是正好围住它。依据将显示哪个【Property Inspectors】所遵循的条件，【Selection】属性可以被设置成Within或者Exact。

　　（4） Hline：插入一根单像素垂直的灰色直线，将被展开的【Property Inspectors】分为上下两半。

　　（5） Vline：在【Property Inspectors】上半部分中的标识名称和其他属性之间，放置一条单像素垂直的灰色直线。

F4、设计Property Inspectors

　　对应于【Property Inspectors】的所有属性必须被安放到一个设计紧凑的空间中。

　　（1）一个【Property Inspectors】的可用版面最大尺寸是482像素宽，87像素高。

　　（2）【Property Inspectors】的顶部（未展开）是42像素高，同时底部是44像素高。

　　（3）如果在【Property Inspectors】定义中指定了hline属性，一个单像素的直线增加了检测器的整个宽度，从顶部开始为43像素。

　　（4）如果指定了【vline】属性，一个单像素的直线将贯穿【Property Inspectors】的上半部分，从左侧开始为118像素。

　　（5）【Property Inspectors】的背景颜色是亮灰色，转换为十六进制就是 #D0D0D0FF，或者RGB值208，208，208。

　　（6）显示在【Property Inspectors】中的默认文本来自于【Arial】、【Helvetica】、【sans-serif】字体家族，采用9点大小。如果用户采用被选择的标准默认文本来输入文本，那么它将采用这个样式显示出来。

　　（7）被放置到【Property Inspectors】左上角的图像的尺寸通常为36像素的正方形大小，并被放置到距顶部3像素，左侧2像素的地方。虽然用户并不必保持该大小的图像（或者它的位置），但是遵循这些指导方针将帮助用户自定义【Property Inspectors】贴近于一个Dreamweaver标准的属性检测器。

　　（8）将【View】->【Invisible Elements】命令禁用，在对用户的【Property Inspectors】进行布局时，是一个好主意。表示层的小图标可以改变被感知的空间。

　　（9）保存【Layer】选用区可见。许多自定义的【Property Inspectors】使用多个层来精确地定位元素，同时【Layer】选用区通过选择单独的层来调整一个快照。

　　（10）使用嵌套的层来定位和分组【Property Inspectors】中相关的项目。几乎所有【Property Inspectors】中的窗体元素都是用作使用者输入的，例如使用标签标明的文本框和下拉列表框。在它们自己的层上放置标签和文本框，同时将它们聚合到某个父层之下，为放置它们提供具有最大的灵活性和简易性。

　　（11）在【Property Inspectors】中应用CSS样式单来简化对字体大小的管理，以及在一个“所见即所得”的环境中设计用户的【Property Inspectors】。

F5、上机习题及本课习题

上机习题

运用本课所讲的内容对制作的网页进行设置。

本课习题

判断题：

（1）自定义Property Inspectors是HTML和JavaScript的组合体。（）

（2）HTML和JavaScript合并成一个单独的文件是不可能的。（）

（3）使用一个“指向并单击"界面，最好是将用户的命令伪装成一个对象。（）

选择题：

（1）（）是一个JavaScript函数和HTML格式的组合体。

Ａ、命令Ｂ、格式Ｃ、文本Ｄ、动画

（2）用户可以在（）和（）两个命令的动作中见到canAcceptCommand。

Ａ、Sort Table Ｂ、Format Table Ｃ、Set Color Scheme Ｄ、Clean Up HTML