（四） 嵌套表格。由于我把表格主要当作一种布局工具，因此对一些常规的表格属性并未作详细介绍，如表格边框、表格色彩、表格背景等等，这些朋友可自己练习一下。为了满足我们页面的需要，我们常常需要进行表格嵌套，进行表格嵌套只需将光标定位在一格单元格中，然后插入一个新的表格即可。总的来说嵌套表格可以最大程度的满足页面布局的要求，如下图：

但是表格的嵌套也有一些不利因素，例如过多的嵌套影响浏览器的解析，影响页

面的显示速度，因此建议表格的嵌套不要超过三层。在开始嵌套表格前最好计划好，避免反复的合并拆分、嵌套、取消，尽量少拖动表格来确定表格的大小，多注意底部标示选择器的标签状态，这样可以准确的选择需要的单元格。

二、框架篇。

介绍完表格我们再来看看另一种主要的布局方式，这就是框架结构Frame。也许很多朋友已经注意到我们站点页面通常具有一个统一的外观，一些基本的导航菜单和网站Logo、Banner并不会在每个页面发生变动，页面中变化的只是一些具体的内容。针对这种情况，我们可以使用框架结构来将不变的导航放入一个页面，而将变化的内容放入各自的页面，再将这两部分组合起来即构成了框架结构外观。

（一） 创建框架结构。既然我们已经知道框架结构是由一些单独的页面组成，在创建框架结构页面前，最好先将组成词框架结构的各个单独页面做好，你也可以在Site（站点管理器）窗口中先生成需要的各个空白页面，例如顶部的导航页面，下部左侧的和下部右面的，这在前面的站点部分我们已经介绍过。在Dreamweaver4的Object面板中新增了Frames面板，我们可以利用此工具方便快捷的创造我们的框架页面集。

打开我们的页面，点击框架面板的 图标，可在当前页面的左边和上边增加相应的框架集页面。此时需要打开Windows—Frames，在此框架窗口可以统览整个框架集的组成情况。首先我们需要制定框架集的各个组成页面，用鼠标点击其中的一个组成部分，例如mainFrame，在属性面板中的Src部分指定此页面是调用的我们的页面，顶部的topFrame是调用的页面，左侧的leftFrame是调用的页面。此时属性面板中显示的各个页面的路径是类似file:///F|/ExampleSite/形式，这时需要用鼠标在Frame面板中选定最外端的边框，然后执行File—Save Frameset将此框架页面命名保存。

（二） 设定框架属性。保持框架面板的最外端边框被选定，打开框架属性面板，在这里设定框架的基本属性，如图：

用鼠标在右侧选定框架中的一个组成部分，然后在左侧设定此部分在整个框架击中所占的高度Row为80pix，此部分不使用边框Borders-No。接下来将其余两部分的框架参数设定完成，记得首先需要在框架面板中选定对应的框架边框才可

以。设定完框架击的属性后，在Frames面板点击其中一个框架页面，再来看看属性面板：

我们主要需要设定Scroll：滚动条是否出现；No Resize：框架尺寸是否可以在浏览时调整；Margin Width/Margin Height：框架边与内容之间所预留的间隔大小；FrameName：设定框架页的名称，这将在以后的文件之间互相链接时用到；Borders：设定当前框架是否出现边框。

（三） 设定框架集页面之间的互链。框架页面的主要用途就是用于导航，浏览者点击一个链接时，相关的内容页会在另一个框架中显示出来，这其实就是为链接指定了一个目标框架窗口。通过前面我们定义的框架的名称属性，我们可以将组成框架的任意一个部分甚至整个框架作为目标窗口。要指定一个到指定框架的链接，可以按照如下步骤：

1、选择链接文字或图片，如我们在顶端框架页中输入About Me文字。

2、选定这个文字内容，打开属性面板，在链接地址中（Link），输入相应的地址。在Target下拉框选择需要的窗口名称，如图

这里显示的是当前页面所包含的窗口以及Dreamweaver预设的四个窗口名称，

_blank：此选项将使链接在新窗口打开。

_parent：此选项将使链接在当前窗口的上一级窗口打开。

_self：此选项将使链接在本身所在的窗口打开。

_top：此选项将使链接在整个框架集的最外端窗口打开。

mainFrame：我们前面为右边窗口设定的名称，选择此项文档将在此窗口中打开。

leftFrame：我们前面为左边窗口设定的名称。

topFrame：我们前面为顶端窗口设定的名称。

3、在浏览器中浏览时，当点击About栏目后，相应的栏目内容将在右下方的mainFrame窗口打开。

三、技巧提示。

关于页面布局的主要内容就是这些，但是实际操作中肯定还会遇到很多问题，学习没有什么捷径，只有实践、实践再实践。朋友们有什么疑问可以到/提出并讨论，下面我再总结几个页面布局阶段有用的技巧。

（一） 精确的定位页面元素。搞过设计的朋友都特别希望能精确的定位网页元素，他们喜欢每个元素都能按自己的愿望精确的定位。Dreamweaver自带的Grid功能可以有助于这种希望的实现。执行命令View—Edit Grid打开坐标辅助，可以选择网格状或者是点状显示，同时打开Snap to Grid，以后插入或添加新的元素时，都会按你的设定精确定位。

（二） 表格的技巧。

1、 创建一个像素边框。有些朋友抱怨Dreamweaver无法做出单像素的表格边框，其实仔细利用表格的属性面板即可做出这种单像素表格。首先使用Object面板插入一个表格，定义表格宽、高及行数和列数。此时表格的默认CellPad和CellSpace、Border都为0。在属性面板中定义表格的Border为0，CellPad为5（这项可使单元格中的内容与单元格边缘之间保持5个像素）；CellSpace为1（此项使得单元格之间保持1个项素的间距）。设置表格的背景色为深色（如#999999），设置每一个单元格的背景色为浅色（如#FFFFFF）。在浏览器中观察效果即可。

2、 导入数据表格。有时我们需要将一些在Execel文件中创建的表格导入Dreamweaver中，可以先将原来的Execel文件另存为带制表符分隔的.txt文本文件。在Dreamweaver中执行Insert—Tabular Date打开如下窗口：

添好各个参数后即可将其中的数据导入Dreamweaver的一个表格中。

3、 格式化表格。如果你对重复的设定各个单元格的参数感到厌烦的话，使用Format Table命令可以帮你快速格式化表格，此命令在Command菜单下，此命令内带多种表格配色方案，你可以选择一种，Dreamweaver会自动将色彩方案应用到你选定的表格上。

（三） 更新多个框架页面。有时我们需要在点击一个链接同时更新另外的两个或多个框架页面内容，这可以通过以下步骤使用Dreamweaver的行为来实现。

1）选择链接的文字或图片。

2）打开行为面板（Behaviors），点击加号添加Go to URL行为。

3）在Go to URL对话框中显示了当前已有的所有框架窗口，我们分别选定一个窗口名称，可以分别单独设定每个窗口将要更新的文件内容。Dreamweaver会在设定了目标文件的窗口后面加一个“*” 号，表示此框架窗口已设定了URL。

第三部分、内容篇

良好的结构需要与充实的内容相结合，才能表达出一个网站所需的各种信息。Web媒体的不断变化发展让每个人兴奋异常，但同时也让许多人对它的发展感到迷惑和手足无措，作为设计师的我们需要集中精力将所有信息转化为合理的页面内容。而良好的页面不应是简单的内容罗列，它需要合理的将信息组织的富有韵律和节奏，才能表达出我们希望传达给浏览者的信息。本篇将介绍Dreamweaver在内容组织方面的作用和需要遵循的规则，但并不仅仅是简单的教你如何将内容添加入页面中。我希望能传达给大家一些制作中重要的思想，希望朋友们能更多的考虑在内容方面应更多的关注什么？如何以简洁但又富有吸引力的内容来充实你的网站。

一、 内容制作主要工具。Dreamweaver提供了清晰、有效、功能强大的工具，只有熟练的掌握了这些高效工具，才能使你将更多的注意力集中到Web页面内容上。

1、 使用状态栏工作。在进行内容的添加和组织过程中，养成时刻关注状态栏的变化是非常好的习惯。状态栏位于文档窗口的底部，如图一，包括如下四个工具：

1） Tag Select(标示选择器)：可以准确快速的选定文档中的任何内容，当你的页面结构变得复杂和多样时，它可以帮助你快速找到需要编辑的内容，你选定的标签内容会相应的在属性面板反映出来。

2） Window Size(窗口尺寸)：这个弹出菜单中包含了常见的浏览器分辨率大小，从中选择一种屏幕分辨率可以快速观察你的页面在相应的屏幕中的状况。

3） 下载时间指示器：很多朋友在添加内容时常常会把尽可能多的内容放在页面中，例如大量的图片、声音和其他多媒体文件，也许看起来非常的漂亮，但作为一个Web设计者应更多的从访问者的角度来考虑问题。下载时间指示器提供了页面累计大小和通过特定的Modem访问页面所需的时间，过大得页面尺寸和太长的下载时间会使浏览者离开你的页面。一般来说，超过50K的页面对普通浏览者来说会难以忍受，当然这还要和你的页面具体内容相关。

4） Launcher(快速启动栏)：这个区域包含了常用的工具窗口的启动按钮，在制作过程中可以快速的将需要用到的工具窗口快速的打开和关闭，这不仅方便，而且使工作窗口保持简洁。

2、 Object面板简介。介绍完我们的工作状态栏，我们再来看看最重要的内容制作工具，Object面板。可以说网页中的绝大多数内容的添加都可以通过Object面板实现。

1) Common(通用对象)：这个面板包含了除文本以外最常用的HTML元素，例如图片、表格、水平标尺、E-mail链接、导航条、Flash文字、Flash按钮等等，从简单单一元素到复杂交互式元素都可以从这里插入，但对于初学者来说，最好先将其中的表格和图片两个元素掌握精通了，基本上可以应对网页中的绝大多数内容，贪多并不是一个好的学习方法。

2) Character对象：在这个面板中可以插入一些复杂特殊的字符，前面的11种是常用的一些字符，最后一种其实包含了99种不常用的更多字符。

3) Forms对象。这里是插入交互式页面元素的主要手段，如果不接触一些程序方面的交互式程序，这部分可以暂且放置到以后学习。

4) Frames(框架元素)：这是我们在上一讲介绍过的生成框架页面的工具。

5) Head(文件头元素)：插入Web页面头中常见的一些元素，这些元素有助于你的网页能被更多的人了解和发现。

6) Invisible(隐藏对象)：这里可以将一些不可见的页面代码插入你的文件中。包括命名锚、备注、脚本。

7) Special(特殊元素)：对一些浏览器扩充支持的元素我们可以在这里插入，一般我们用到的时候比较少。

3、 Property Inspector属性检查器。对于每个插入页面中的元素来说，都有不同的细节和参数需要我们设定，选择前面我们插入的不同元素对象，属性面板会有相应的变化，对于初学者来说，精通属性面板的每个参数设置至关重要，特别是关于文字、图像、链接和表格的属性面板参数。可以说成为高手往往从属性面板开始，进而深入每个属性参数的细节，直至源代码。

二、 如何抓住浏览者的注意力。网页制作人员不仅仅是简单的输入、编辑、格式化网页内容，更重要的是如何使你的内容更有吸引力，使浏览者可以享受你的内容，而不仅仅是得到你的内容。

1、 文字内容组织要点。文字在网页中出现已经很久了，与其它文本处理相比网页文本处理有许多相似的部分，例如标题、段落、列表、对齐方式等等，但网页

文本有它独特的要求，即必须努力的精简代码，必须尽可能使样式和内容分离，必须尽可能使样式保持一定的规律。看看文本的属性面板，相信大多数参数对朋友们来说都不陌生，因为在其他的文本处理软件中也会遇到相似的这些设置参数。

在各个页面之间进行文本的格式化时，保持前后的一致性非常重要，一个站点的各个页面标题、子标题、主题内容都应有着统一的格式。但我想提醒大家的是：尽可能的忘记属性面板最上方的属性和它的参数，在可能的情况下不要使用这部分参数，因为反复的使用font定义文本不仅会使代码复杂，而且缺乏有效的控制手段。我们推荐使用样式表来对文本进行全面的控制，后面我们将详细介绍样式表的功能。

2、 网页中图像的使用。 图像是使网页充满吸引力的最早的非文本元素，插入图像虽然简单，但使图像和其他页面内容能布局合理却并不简单。

1） 插入：对象面板中点击 图标插入图像后，在属性面板我们可以看到此时图像只有最基本的宽和高尺寸参数以及图片路径，其他参数并未设置。

2） 设定边框：改变Border的数值可以使图片添加指定数值的边框，而边框的颜色将与当前文档的文本默认颜色一致。有时为图片添加链接时，会突然出现一个蓝色的边框，这时只要将Border值设为0级可消除这个边框。

3） 设置边距：V Space和H Space的值可以使图片与周围的元素保持一定的数值。

4） 命名标识：在属性面板图像缩略图旁边可以给图片一个标识文字，这个标识名可以使页面中的其他交互式程序能够调用这个图片进行交互动作。

5） 图像说明：Alt名称可以使鼠标移到图像上方时显示这个名称。

6） 指定低分辨率替代图片Low Src：在这个栏里可以为当前图片指定一个低分辨率版本的替代图片。在正式图片文件下载之前会先显示这个图片，所以我们常制作一个图片的灰度、低分辨率版本来使浏览者尽早看到图片外观。

7） 对齐方式：与普通文字的左中右对齐方士相比，图片还增加了更多的对齐选择，这个选项主要是指定图片与周围的文本的排版方式。其中设定此参数为Left和Right可以使图片与周围的文本混合起来排列，如图：

同使会在文本中出现一个标示图片实际位置的浮动图像锚，移动它可以改变图片

和文本的实际排列位置。

8） Reset Size：有时我们常常不小心改变了图片的原始尺寸，使用这个恢复尺寸按钮可以使图片以原始尺寸显示。

3、 创建链接。Web最重要的特点就是不同的文件和资源之间的相互链接，也就是说网络上的任何资源都可以通过链接的方法得到。链接不仅可以指向外部的一个文件，同时也可以指向当前文档中的一个部分。

1) 添加链接。选定一个文本或图片，通过在链接地址中添入链接文件或地址，或者从打开文件按钮定位外部的一个文件，我们都可以为指定的对象添加链接。链接格式可能是标准的/绝对地址，也可能是../lesson/相对地址格式。需要注意的事，通常中文路径和文件名不能得到很好的支持，所以最好避免这种现象的发生。

2) 添加锚点链接。如果想准确的定位到当前文档的特定位置，可以先在目标位置插入一个命名锚符号，这可以通过Object面板的 符号插入。然后点击属性面板链结旁边的指向锚点符号，指向此位置即可。如图：

3) 目标窗口。我们还可以指定链接的目标文件打开的方式，_blank将使文件在一个新窗口中打开;_parent使文件在当前窗口的父级窗口中打开；_self使目标文件替代当前文件在同一窗口中打开；_top使目标文件在窗口组的最外级窗口中打开，这常用在框架结构的页面组中。

4、 创建列表内容。列表可以清晰的创建可识别的大纲和目录结构，常用的列表有无需列表和有序列表两种形式。

1) 无序列表。在属性面板点击无序列表按钮，可以在当前位置插入一个无序列表符号，输入你的列表文字后回车，会自动添加下一个列表项。在添加了多个列表项后。

2) 有序列表。有序列表的优点是可以自动产生项目的编号。

3) 嵌套列表。我们也可以改变某个列表项的层次，选中一个列表项点击缩进按钮，当前列表项会自动成为上一个列表项的子内容列表，即多级列表，而前面的列表符号也自动与它的父级不同。

4) 改变列表符号。将光标定位在一个列表项中，打开属性面板的List Item对话框，我们可以修改列表符号的默认外观，对于无序列表，有矩形和圆形两种符号。

对于有序列表有多种编号形式可选择。但需要注意的是，当列表内容包含在表格中时，这个选项并不会出现。这也许是一个小小的Bug。

以上我们简单的介绍了网页制作中添加常规内容需要注意的事项，实际工作中我们还会面对更多种类型的内容，如多媒体音频和视频文件等等，但只要你牢牢地掌握他们各自相对应得属性面板，你就会运用自如的操作这些内容。朋友们有什么意见和建议可以给我来信

mengjue@ 。也可以到经典论坛/ 提出

本期技巧提示：

1、 快速标签编辑。对于熟悉手写代码的朋友来说，经常需要切换到代码窗口手工添加一些代码。其实利用Dreamweaver的Quick Tag Editor可以快速插入各种HTML标签，一个是点击属性面板的 图标插入，另一种快捷方式是Ctrl+T，这两种方法都会打开快速标签编辑，可以直接从列表中选择需要的源代码标签，如下图：

2、 快速添加图片边框。虽然我们可以通过定以图片的Border属性为图片添加1px边框。但当需要对整个站点中的图片都添加一个像素边框时，就比较麻烦了。我们可以在样式表中重定义img标签，直接定义为四边都为1px的样式，则网页中所有插入的图片都会带有相同色彩和宽度类型的边框。如图：

3、 如何加入背景声音。在Dreamweaver中对于一些多媒体声音文件的插入，很多朋友都感到有些困惑，其实很简单，点击Dreamweaver 工作窗口最左下角的

标签，打开Behavior面板，在弹出的behavior窗口点+号，选择Play Sound，选择你需要的声音文件即可加入。在文档窗口中选中声音文件标识，在属性面板点击Parameters就可以自行设定背景音乐的循环次数、是否自动播放等属性了。

4、 显示和编辑Web文件的头信息。执行下拉菜单View下的Head Content命令可以在文档窗口的顶端显示头内容窗口。

再切换到Object面板的Head选项板，我们可以方便的加入多种Head标识对象，例如Keywords可以是搜索引擎更快的搜索到你定义的关键字；设定Base对象的Target属性值为Blank，可以使当前文档中的所有未定义链接目标窗口的连接都在空的新窗口中打开。

第四篇、页面设计篇

前面已经介绍了用表格实现排版布局的基本方法，但对于很多直接的页面设计人员来说，在表格中将他们的设计转化为实际页面是一件非常枯燥、充满制约的工作，因为他们需要重新面对空白页面将他们的设计稿转换为实际页面，一些设计师也抱怨表格禁锢了他们的想象力，也听到一些制作人员抱怨表格缺乏灵活性，缺乏准确性。其实Dreamweaver4中已经有了好几个专为设计师准备的工具，而这些工具也许并未被大多数人利用起来，利用好它们可以方便的满足设计师的工作习惯，本篇就给大家介绍这几个专为设计师的习惯而准备的工具，希望不要浪费了这些虽然隐蔽但却非常有效的工具和工作方法。

一、设定精确的工作环境。

对于设计师来说，精确的元素定位是首要的条件，在Dreamweaver中有多个有助于精确定位的功能，利用这些工具我们可以在灵活性与精确性之间运用自如。

1、 网格（Grid）：网格对设计师来说不会陌生，各种图像处理和制作软件都有此项功能，这是页面元素精确定位的基础，通过设定一定数值的网格，可以使页面元素有规则的排列。选择「查看＞网格＞编辑网格」，可以设定自己需要的网格大小,也可以改变网格显示为点状显示，还可以设定将层吸附到网格。

2、 标尺（Rule）：标尺是设计师良好的参考工具。它在页面的上方和左方显示，单位可以是象素，英寸或厘米。通常我们用它作为页面元素定位的参考坐标，默认的原点在页面的左上角，我们可以拖动网格原点到页面的任何位置，如图：

若要将原点还原到原来的位置，选择「查看＞标尺＞重设原点」即可。

3、 页面边空：默认状态下，页面内容和页面边框之间空着10个象素左右的距离，我们需要在页面属性中设定这个间距为0。点击右键选择页面属性，将其中的left和top值修改为0。

二、描摹图像。设定好以上的工作环境后，就可以开始我们的工作了。通常设计师都是在图像处理软件里做好他们的设计稿，在Dreamweaver中设计师不需从一张白纸继续他们的工作。利用Dreamweaver中的描摹图像功能，我们可以在设计稿的基础上开始页面制作，这个图片只是一个制作过程中的参考，并不会在最终的页面中出现。

1、 使用描摹图像。选择View>Tracing Image>Load载入描摹图像，选择你希望载入作为描摹图像的设计稿，程序会自动打开页面属性面版，在这里你可以设定

这个描摹图像的透明度。

2、 控制描摹图像显示。选择View>Tracing Image>Show可以在显示和隐藏描摹图之间切换。

3、 改变描摹图像的位置。有时我们需要对描摹图像位置进行细微的调整，可以通过View>Tracing Image>Adjust Position命令设置描摹图像与原点的偏移值。

描摹图像的功能不仅仅是对整个页面使用描摹图，我们也可以对单独的一个页面局部使用，例如对一个表格使用一张单独的描摹图，首先我们将一个小的描摹图载入当前页面，然后选定需要使用描摹图的一个局部，例如一个表格，然后执行View>Tracing Image>Align With Selection即可将描摹图像的原点对齐到表格的左上角。

将描摹图定好位置后，我们就可以照着描摹图来安排我们的页面元素。

三、使用设计视图（Layout View）进行设计。在Dreamweaver的旧版本中，我们除了利用表格进行页面布局，利用描摹图像进行辅助外，也可以直接用层进行布局，最后再将层转换为表格来满足各种浏览器，但这种方法一直不太便利，而且也不太严谨，在Dreamweaver4中，新增了一个功能：Layout View，此功能可以使我们的页面转换到一个设计视图中，并利用新的布局单元随意的布置页面元素。

在这个新的设计视图中，我们可以随意的绘制布局单元或布局表格，在这些单元中再按照我们的需要插入相应的页面元素, 而这些布局单元在插入后还可以随意移动，当所有元素都放置在合适的位置后，我们可以切换回标准视图，所有的内容都各自组合在不同的表格中。

（一）两种布局方式开始工作。在设计视图中进行工作有两种方式，一种是从布局单元开始，另一种是从布局表格开始，他们的工作方式稍有不同，下面我来分别介绍。

1、 从布局单元开始。

1）绘制布局单元。当我们打开设计视图时，可以直接在上面绘制布局单元，当我们绘制了第一个布局单元时，Dreamweaver会将整个当前文档空间作为一个布局表格，并在页面的左上角显示Layout Table标签。

2）修改布局单元。蓝色高亮显示的就是布局单元，此布局单元可以随意移动，

并可以通过鼠标拖动控制手柄来随意改变大小，也可以先选中布局单元，再在属性面板直接输入相应的数值来改变大小和位置。

3）移动布局单元。将鼠标放置在布局单元的边线上方，可以拖动布局单元到新的位置。

4）添加内容。布局单元放置好位置后，我们就可以在中间放置我们各种页面元素。此时我们可以切换到标准视图看一下，我们发现Dreamweaver自动将布局单元转换为相应大小的一个表格。

2、 从布局表格开始。在上面这种方法中，我们看到Dreamweaver将整个文档作为一个大的容器，各个布局单元分别放置在合适的位置。而最终转换到标准视图时，这些布局单元都是一个大表格中的单元格。这样并不利于页面浏览时的速度，我们还可以通过另一个途径来实现这个目的，这就是从布局表格开始，逐步细化到布局单元。

1） 绘制布局表格。我们可以根据页面内容将页面分为从上到下不同的多个布局表格，而且只能是从上到下平行排列的多个布局表格，不能从左往右排列。

2） 插入布局单元。布局表格放好后，就可以在每个布局表格中分别放置各自的布局单元格。最后的效果如图：

3） 嵌套布局表格。在设计视图中我们也可以方便的插入嵌套布局表格。首先我们需要明白，嵌套表格只能存在于未放置布局单元的布局表格空间中，从页面上来看，当插入一个布局表格时，Dreamweaver会以一种浅灰色表示布局表格的范围，而当插入一个布局单元时，这部分布局表格的空间会变为白色。明白了这一点就可以方便的绘制了，用布局表格工具在已有的灰色布局表格区域拖动，即可绘制出另一个嵌套的布局表格。在这个嵌套的布局表格中同样可以继续绘制布局单元，当我们切换到标准视图时就会发现这个区域是两层互相嵌套的表格。

4） 取消嵌套表格。有时我们绘制了一些嵌套布局表格并插入了许多内容后，想取消这种嵌套关系，而将他们变为同一个布局表格中的内容。这需要先选中内部的嵌套表格，打开属性面版，点击 （Remove Nesting）取消嵌套关系，但原有的内容并不会丢失，而是在原位转换为上一个布局表格中的一部分。

3、 设计视图进阶应用。介绍完布局视图中的基本使用方法后，我们再来看看布局视图令一个重要的用途，既设计可扩展的页面结构，也就是可以随着浏览器分

辨率自动改变大小的结构。

1） 改变布局表格为可伸缩。选中布局表格后打开属性面版，在Width（宽度）一项里选择Autostretch（自动伸展），Dreamweaver会有三种选择方法来继续下一步的操作，你可以选择新建一个空白图片、或选择已有的一个图片、或不使用空白图片来生成伸缩性布局表格，这个空白图片将在当前布局表格的下方新增一行，以此固定最左方的单元宽度为固定值，而右方的单元将来会自动扩展到浏览器边缘。此时使用了透明图片固定的一列会如下图标示出来；

2） 改变布局单元为可扩展。在布局表格的上方显示了每列布局单元格的宽度，我们可以点击其中一列的数值从弹出菜单中选择Make Column Autostretch将此列转换为自动扩展的，Dreamweaver会以一段波浪线表示此列，如下图；

3） 创建可伸缩页面。上面两种做法掌握后我们就可以来制作可伸缩的页面了。通常我们会将需要固定宽度的表格列先设定好相应的固定值，然后将剩余不需特定数值的表格列设定为可扩展值。我们看下面两种情况：

此表格为左右结构，左边的列设定为固定宽度值，右边的列设定为可扩展值。

此表格为左中右结构，左边和右边为固定宽度列，中部列为可扩展宽度列。这两种表格都实现了自动适应浏览器分辨率。

4） 编辑可扩展单元。

对已经转换为可扩展的单元，我们还可以再将它转换为固定宽度，也可以将所有的支撑表格宽度的透明图片取消，这两个命令可以从单元格上方的下拉菜单里找到。有时由于我们来回的修改布局表格，会使得一些单元的宽度值与实际值不同，这是会在单元的标示位置出现两个数值，如图；

我们可以点击此处从弹出菜单里选择Make Cell Widths Consistent，使得此单元的宽度值统一。

4、 交互在两种视图中工作。上面我们介绍了在设计视图中进行页面布局的步骤和方法，但需要注意的是，设计视图中有许多的元素属性并不能直接设定和修改，此时我们可以转换到标准视图中按常规方式设定这些属性值，再随时切换回设计视图，两种情况非常兼容，并不会出现任何不适应的变化。

到这里我们介绍了设计视图中的基本工作方法，之所有在前面已介绍的表格布局方法之外再给大家这种方法，只是为了给广大的设计师提供另一个工作的界面和

方式，不可否认，这两种工作方式各有优缺点，至于具体使用那种方式，完全可以根据自己的习惯来决定。但是多条道路多个选择，相信多掌握一种方法可以给你更多更好的选择，也相信一定会有一种方法能适合你。朋友们有什么问题，可以到/提出讨论。

技巧提示：

1、 快速改变视图辅助参数。我们经常需要开关网格显示、开关标尺显示、开关描摹图像显示，此时不需要总从下拉菜单执行这几条命令，在工作窗口的最上方有一个 快速开关常见视图操作的按钮，在这里可以改变常用的视图辅助参数。

2、 快速居中对齐布局表格。在设计视图中，我们创建的布局表格默认都是距页面左边的，这常和我们需要的居中放置不符，我们通常都的切换到标准视图来改变这个设置。其实我们可以选定这个布局表格，打开属性面版点击 ，或者按Ctrl+T打开快速标签编辑窗口，直接输入Align=”center”，则此布局表格自动居中布置。

3、 连续绘制多个布局单元。有时我们需要不停的点击Object面板上的布局单元按钮，绘制多个布局单元，这样很繁琐。其实我们可以按住Ctrl健，就可以连续的绘制多个布局单元。

第五篇、样式表篇

好了，前面几篇我们已经介绍了网页中的常见内容及排版布局的知识，这是我们Web制作的基础，打好这些基础后，可以往更高的台阶上走了。样式表将是你迈向更高台阶的必由之路。不管会不会使用样式表，样式表对于如今的网页制作者来说已经不是一个陌生的概念了，从它的相关标准制订到现在不过短短的几年，已经成为最为重要的技术，样式表制订的目标是使网页中的内容与样式分开，在各种介绍样式表的资料中，绝大多数都要求使用者能够直接的操作编写样式表代码，这是很多人对样式表的使用望而生畏，其实在Dreamweaver中我们就可以简单的对样式表进行操作和使用，关于在Dreamweaver中创建、定义和使用样式表的基本方法，朋友们可以参考我的另一篇文章《在Dreamweaver中使用样式表》，地址在：/doc/webpage/css/，本篇我就不再作详细的介绍了，我只简单再说明几个非常重要的概念和规则。

一、 样式表基本概念和规则。之所以再强调以下的一些概念和规则，是因为这些常常是初学者容易混淆和模糊的知识，理解好了这些概念会使我们对样式表的使用有一个更加清晰的思路。

1、 层叠的概念：样式表及CSS是层叠样式表单的缩写，因此它最基本的概念就是层叠。及样式表分为外联、内联、内嵌三种定义和使用的途径，而这几种方法又是互相影响的。所谓外联样式表是值我们将一些样式信息定义在一个单独的外部文件中，我们在整个站点的所有文件中都可以链接此文件并使用其中定义的样式；内联是指我们将一些样式定义的信息块放在HTML文件内的头部，我们只可以在当前网页中使用这些定义信息；内嵌时只我们将样式信息直接定义在网页中特定的标签和元素上，例如一个表格、一个图片或一段文字，这个样式信息并不会被页面上其它部分的元素使用。而这三种定义方式又是互相继承的关系，它们的优先级是内嵌<内联<外链，即越靠近页面元素的样式属性，它的优先级越高，也就是说元素最终显示的样式是优先级最高的样式定义，同时各元素会自动继承上级父元素中定义的样式。

2、 类、伪类。传统的HTML标签元素对页面的控制能力是有限的，在样式表中引入了选择符的概念后，极大的增强了我们控制每个元素的能力。现在我们可以根据需要定义单独的一种样式类，然后将它付给不同的页面元素，而它们保持相似的外观。在Dreamweaver中可以向下图所示定义一个类；

一般我们用一个”.name”格式来定义一个类，还有一种以”#name”格式定义的常用在特别指定某一个样式的唯一名称，一是我们可以动态的调用此元素。通常我们在上面定义的类都要在页面的某一个元素上指定才可以使它生效，还有一种特殊的类，它不需要在相应的元素上指定就可以使用，这叫作伪类，例如我们定义的文字链接样式：,d,，这里面所定义的类：.link,.visited,.hover并不需要在页面中单独增加到文字链接样式上。

3、 格式化模型、容器。

1） 容器：样式表其实就是对Web页面的内容进行格式化编排和显示，CSS的一个重要基础就是容器的定义，也就是说我们将页面上的各种元素都假想为一个个矩形的容器里（Box），然后控制它们的样式。这个概念是我们必须理解的，例如一个表格是一个容器，我们可以控制它里面的元素的属性。一个图片是一个容

器，我们可以控制它与其它容器之间的关系。而单独的一段文字不能成为容器，所以不能格式化它们，只有讲它们放入一个容器才可以定义它们的样式，这个容器可以是