页面设计篇
前面已经介绍了用表格实现排版布局的基本方法，但对于很多直接的页面设计人员来说，在表格中将他们的设计转化为实际页面是一件非常枯燥、充满制约的工作，因为他们需要重新面对空白页面将他们的设计稿转换为实际页面，一些设计师也抱怨表格禁锢了他们的想象力，也听到一些制作人员抱怨表格缺乏灵活性，缺乏准确性。其实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中使用样式表》，本篇我就不再作详细的介绍了，我只简单再说明几个非常重要的概念和规则。
一、 样式表基本概念和规则。之所以再强调以下的一些概念和规则，是因为这些常常是初学者容易混淆和模糊的知识，理解好了这些概念会使我们对样式表的使用有一个更加清晰的思路。
1、 层叠的概念：样式表及CSS是层叠样式表单的缩写，因此它最基本的概念就是层叠。及样式表分为外联、内联、内嵌三种定义和使用的途径，而这几种方法又是互相影响的。所谓外联样式表是值我们将一些样式信息定义在一个单独的外部文件中，我们在整个站点的所有文件中都可以链接此文件并使用其中定义的样式；内联是指我们将一些样式定义的信息块放在HTML文件内的头部，我们只可以在当前网页中使用这些定义信息；内嵌时只我们将样式信息直接定义在网页中特定的标签和元素上，例如一个表格、一个图片或一段文字，这个样式信息并不会被页面上其它部分的元素使用。而这三种定义方式又是互相继承的关系，它们的优先级是内嵌<内联<外链，即越靠近页面元素的样式属性，它的优先级越高，也就是说元素最终显示的样式是优先级最高的样式定义，同时各元素会自动继承上级父元素中定义的样式。
2、 类、伪类。传统的HTML标签元素对页面的控制能力是有限的，在样式表中引入了选择符的概念后，极大的增强了我们控制每个元素的能力。现在我们可以根据需要定义单独的一种样式类，然后将它付给不同的页面元素，而它们保持相似的外观。在Dreamweaver中可以向下图所示定义一个类；
一般我们用一个”.name”格式来定义一个类，还有一种以”#name”格式定义的常用在特别指定某一个样式的唯一名称，一是我们可以动态的调用此元素。通常我们在上面定义的类都要在页面的某一个元素上指定才可以使它生效，还有一种特殊的类，它不需要在相应的元素上指定就可以使用，这叫作伪类，例如我们定义的文字链接样式：A.link,A.visited,A.hover，这里面所定义的类：.link,.visited,.hover并不需要在页面中单独增加到文字链接样式上。
3、 格式化模型、容器。
1） 容器：样式表其实就是对Web页面的内容进行格式化编排和显示，CSS的一个重要基础就是容器的定义，也就是说我们将页面上的各种元素都假想为一个个矩形的容器里（Box），然后控制它们的样式。这个概念是我们必须理解的，例如一个表格是一个容器，我们可以控制它里面的元素的属性。一个图片是一个容器，我们可以控制它与其它容器之间的关系。而单独的一段文字不能成为容器，所以不能格式化它们，只有讲它们放入一个容器才可以定义它们的样式，这个容器可以是<div>、</span>、<h1>、<font>等等许多可以将它包围起来的元素。
2） 格式化模型。格式化模型就是指如何定义这个容器内部及外部的一些属性值以及它们之间的相互关系。这里面包括核心的内容区域以及它周边的边距(margin)、边框(border)以及填充区域(padding)，在后面我将会详细介绍这些属性的设定。我们可以仔细的看看下面这张图以加深理解：
3） 块级元素和行内元素。从格式化的角度来看，Web页面中有两种元素。块级元素是指
4、 单位。样式表的另一个优势在于它可以精确的定义和控制元素的外观。这就要归功于样式表中的定位单位，通常的元素都可以设定相应的内容宽、高、左右边距以及字体尺寸等等。它们都遵循相同的单位格式，我们可以把它分为相对单位和绝对单位。
1） 绝对单位。Web页上常用的绝对单位有厘米(cm)、毫米(mm)、英寸(in)、点(pt)、派克(pc)。绝对长度通常不能适应各种浏览器的多样性变化，因此应用的比较少。
2） 相对单位。我们常用的单位是相对单位，所谓相对单位是指元素尺寸相对于浏览器的的系统默认值来相应的缩放。包括：像素(px)、em和ex。Px是相对于浏览者的计算机屏幕分辨率来显示的，Windows用户一般使用96像素/英寸的分辨率，而Mac用户使用72像素/英寸分辨率。而em则是相对于当前对象中文本M的字体尺寸大小，如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认M字体尺寸。而ex是相对于当前对象中文本x的字体尺寸大小，如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认x字体尺寸。
二、 Dreamweaver样式表面板操作。好了，上面讲了这么多样式表的基础概念和使用规则，下面我们来看看在Dreamweaver样式表面板中如何详细定义各个参数。进入样式表面板参数定义对话框后，我们可以看到左边一栏是样式表的属性分类，如图：
而右边是每一个分类里面的详细参数设置，下面我来分别介绍这几个分类，由于样式表的参数众多，我只介绍比较常用的参数。
1、 字体属性（Type）。
字体属性是每个页面中最基本的属性，需要注意的是，我们并不仅仅是对单独的文字定义字体属性，几乎所有得页面元素都会涉及到字体定义，如定义表格需要涉及表格中的字体、定义列表需要涉及列表中的字体、定义表单也会涉及到表单中的字体。字体属性面板中的参数比较好理解，它会涉及到我们上面介绍的字体长度单位。我简单介绍各个参数的意义。
1） Font：字体字型文件，对于中文，最好只使用系统自带的四种字体，常用宋体。
2） Size：字体大小。通常我们用12px大小的。
3） Style：字体的修饰，包括正常和斜体。
4） Line：字体的行间距，我们选用1.5ems是代表行距为字体大小的1.5倍。
5） Decoration：设置对象中文本的装饰，分别有下划线、上划线、删除线、闪烁。
6） Color：字体颜色。
2、 背景属性（Background）。
背景的属性通常包括背景色和背景图片，在样式表中Color通常指的是前景的颜色，更多时候也就是字体的颜色，而Background是指背景的颜色。在这个对话框离我们可以精确设定背景图片的位置、是否重复显示、是否随页面内容滚动。
1） Repeat：设定背景是否重复以及可以沿着特定方向重复。
2） Attachment：设定背景图片可以固定或随着内容而自动滚动。
3） Horizontal/Vertical设定背景图片的偏移值。
3、 文本块属性（Block）。
文本块属性主要是定义段落的一些属性值，需要注意的是在Dreamweaver样式面板里很多属性前面有“*”,这表示此属性只能在浏览器中看到效果，在Dreamweaver的编辑其中无法预览。
1） Word Spacing：这是定义各个单词之间的额外间距，对中文格式无效。
2） Letter Spacing：定义每个字符之间的额外间距，对中文同样有效。
3） Vertical Alignment：垂直对齐方式。
4） Text Align：水平对齐方式。
5） Text Indent：这是段落首行缩进的距离，通常我们定义2ems，及两个中文字的距离。
6） Whitespace：设置或检索对象内空格的处理方式。
4、 容器属性（Box）。这是样式表最为重要的一个属性类别，是实现页面元素精确定位的基础。
1） Width/Height：宽和高。实现容器概念的基础，只有定义了其中的一个值，才能使元素具有容器的空间。
2） Padding：填充距，决定了容器边框和容器内部的内容之间的距离。
3） Margin：边距，设置容器中的元素和周围的元素之间的距离。
4） Float：使元素悬浮在页面上，可以使周围的文字围绕在此元素周围，类似于图文混排的概念，但是在CSS中任何元素都可以像图片一样实现悬浮。
5） Clear：这个属性是配合上面的浮动属性，它可以决定浮动属性是否可以出现在指定的容器一边，例如设定Left表示浮动元素不可以出现在容器的左边。
5、 边框属性（Border）。此属性是容器概念中的重要内容，可以设定容器四边的边框宽度数值、颜色及边框样式。
1） Width：可以精确指定边框的数值，要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
2） Color：可以为每一个边框单独设定色彩。
3） Style：设定边框的外观样式，需要注意有些样式只有在IE5.5以上浏览器中才可以看到效果，如下图：
6、 列表属性（List）。
列表属性可以对分级列表内容进行更多的控制。
1） Type：设定列表显示的项目符号或编号的类型。
2） Bullet：可以为列表指定一个单独的图片作为标志，例如一个三角形的箭头。
3） Position：设定列表容器中的内容显示位置。
7、 定位属性（Position）。
定位属性是实现精确和自由定位的关键属性，它给了设计者更大的控制页面元素的能力，而且还扩展到了三维的z轴方向，从而为动态页面的实现创造了基础。
1） Type：定位属性的基本类型有相对定位和绝对定位，相对定位使元素倚赖页面元素的原始位置进行偏移，而绝对定位使元素脱离原始元素的束缚，实现自由偏移定位，绝对定位的元素与父级元素的位置无关。
2） Z-Index：当两个绝对定位的元素位置有相同的，则依赖此属性确定哪个元素遮挡另一个元素。
3） Placement：这里面的属性定义了容器的具体大小以及与已有的父级元素的距离。
4） Clip：设置对象的可视区域，所设定区域之外的内容将被剪切隐藏。必须将position的值设为absolute，此属性方可使用。
5） Visibility：决定元素的显示状态是可见还是不可见。
8、 扩充属性。这个对话框中的属性是一些增强性的样式属性，在低版本和不同类型的浏览器支持不好。
1） Page Break：设定打印时页面分页的位置。
2） Cursor：用来设定鼠标通过对像位置时显示何种系统内置光标外形。
3） Filter：使用这里的设置可以将一些特定的滤镜和转换效果添加到一个容器中的元素上，由于这个属性里的参数非常众多，我不在这里作详细介绍，有兴趣的朋友可以参见我的另一篇文章《CSS滤镜效果介绍》。
三、 Dreamweaver的样式表编辑器为样式表的建立和使用提供了方便快捷的途径，普通爱好者也可以从这里开始接触样式表的强大功能，通过样式表我们能更方便的将页面的样式控制在我们手中，一切都在你的掌握之中这将是多么惬意的感觉。
技巧提示：
1、 CSS链接样式技巧。文字链接一般有四个状态，link、hover、active、visited，我们通常都会对文字链接的各个状态定义不同的色彩和样式，但经常有朋友发现自己定义的样式在浏览时并未像设想的那样。主要原因是在样式表中对链接的定义顺序有一定的要求，正确的顺序是：A:link,A:visited,A:hover。对一般的朋友来说，其实很多时候只是想Hover状态有变化，有个小技巧就是不按上面的方法定义链接样式，而只需定义a和a:hover状态的样式即可，这样只有hover状态的样式与其它状态的不同。修改方法如下图；
2、 创建不同色彩的连接文字与下划线。普通的链接文字与链接下划线都是相同的色彩，其实我们也可以利用样式表中的Border属性来替代普通链接的划线，由于Border有更多的控制参数和样式，因此只要将Border的色彩和文字的色彩定义的不同即可实现我们的目的。例如我们可以将文字定义为黑色，而在Border选项中定义下划线为红色，如下图；
3、 减小样式表文件的大小。经常我们定义的外接样式表文件会慢慢变得非常大，一般来说，超过3K大小的样式表就非常的大了，它会影响文件的解释速度。有一个技巧就是充分利用样式表的继承属性，例如我们不需要定义每个样式的字体和字体大小，我们只需先对<body>和<td>定义基本的字体字型和字体大小，其它的样式定义都不用定义这两个属性，相应的会自动继承这里定义的属性。
4、 尽可能的使用外接样式表。既然样式表的初衷就是为了使页面内容和样式分离，因此我们应该尽可能的使样式的定义脱离具体的页面内容，即将样式定义在外部单独的样式表文件中，这样也有利于保持整个站点风格的一致性，而且方便我们随时修改整个站点的外观。