如何使用Dreamweaver 制作一个网页?
创建网页页面
1、在Dreamveaver“文件－新建－常规－基本页－HTML”，这样就建好了一个页面，英文版的默认的文件名为untitled.htm 。中文版的的默认的文件名为“无标题文档”。htm 就表示这个网页文件是一个静态的HTML 文件。给它改名为index.htm 。
注：网站第一页的名字通常是index.htm 或index.html 。其它页面的名字可以自己取。这也就是主页，上传后打开网页默认连接到此页。
2、在标题空格里输入网页名称，点击修改－页面属性，打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背景图像，超级链接的颜色（一般默认即可），其他都保持默认即可。
3．此时光标位于左上角，可输入一句话，如“欢迎来到我的主页”。选取文字，用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车使其位于页面中间等。
4．如要选取字体，则选择字体中的最后一项：编辑字体列表。然后在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。
注：在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用，
因为别人电脑上未装就看不到。如果需要用的话，要做成图片后再使用。 注：在网页上打入空格的办法是：把输入法调为全角。
注：在网页上换行的办法是：shift+Enter。只按Enter 则为换段。 下面拿一个现成的例子来给大家讲解一下：
现在，以下边的简单网页为例，叙述一下制作过程。简单网页如下图： 在开始制作之前，我们先对这个页面进行一下分析。看看这个页面用到了哪些东西。
□网页顶端的标题“我的主页”是一段文字。
□网页中间是一幅图片。
□最下端的欢迎词是一段文字。
□网页背景是一深紫红颜色。
构思好这个网页的结构，我们就可以开始制作了。
首先启动Dreamweaver ，确保你已经用站点管理器建立好了一个网站（根目录）。
为了制作方便，请您事先打开资源管理器，把要使用的图片收集到网站目录images 文件夹内。
进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标
在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧，我们可以对它进行设置。
【设置文字的格式】 选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“B”将字体变粗。
【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。
【设置网页的标题和背景颜色】
点击“修改”菜单选“页面属性”。系统弹出页面属性对话框（如下图） 请在标题输入框填入标题“我的主页”。
设置背景颜色： 网页背景可以是图片，也可以是颜色。此例是颜色。如上图打开背景颜色选择器进行选取。如果背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。
设计视图状态，在标题“我的主页”右边空白处单击鼠标，回车换一行，按照以下的步骤插入一幅画图片，并使这张图片居中。您也可以通过属性面板中的左对齐按钮让其居左安放。
【插入图像】选择以下任意一种方法：
（1）使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。如下图：
（2）使用插入栏：单击插入栏对象按钮>选 按钮，弹出“选择图像源文件”对话框，其余操作同上。
（3）使用面板组“资源”面板（如下图）：点按钮，展开根目录的图片文件夹，选定该文件，用鼠标拖动至工作区合适位置。
注：为了管理方便，我们把图片放在“images”文件夹内。如果图片少，您也可以放在站点根目录下。注意文件名要用英文或用拼音文字命名 而且使用小写，不能用中文，否则要出现一些麻烦。
一个图片就插入完毕了。（插入*.swf动画文件，选择“插入”菜单＞媒体＞Flash ）。
【输入欢迎文字】
在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字“欢迎您„„”然后，利用属性面板对文字进行设置。
保存页面。
一个简单的页面就这样编辑完毕了。
【预览网页】在页面编辑器中按F12预览网页效果。
网站中的第一页，也就是首页，我们通常在存盘时取名为index.htm 。
【小结】我们制作了一个简单的网页。
内容有四：
①图片插入和对齐设置；
②文字的格式、颜色和加粗等设置；
③背景颜色的设置；
④预览网页，查看实际效果。
不仅要掌握还要举一反三反复练习。
表格设计
表格是现代网页制作的一个重要组成部分。表格之所以重要是因为表格可以实现网页的精确排版和定位。本节教程我们分为两步来进行。首先看表格操作的一个实例。然后来看一些表格操作的基本方法。在开始制作表格之前，我们首先对表格的各部分的名称做一个介绍。（看下图）
一张表格横向叫行，纵向叫列。行列交叉部分就叫做单元格。
单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。
下面看看我们使用表格制作的页面的实例
这幅页面的排版格式，如果用以前我们所讲的对齐方式是无法实现的。因此我们需要用到表格来做。实际上是用两行两列的表格来制作。
1、 在插入栏中选择按钮或“插入”菜单>选“表格”。系统弹出表格对话框如下图。这些参数我们都已经认识了。行：2。列：2。其余的参数都保留其默认值。。
2、 在编辑视图界面中生成了一个表格。表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。当光标移到点上就可以分别调整表格的高和宽。移到表格的边框线上也可以调整。（如下图）
3、 在表格的第一格按住左键不放，向下拖拽选中二格单元格。（如下图）
然后在展开的属性面板中选择合并单元格按钮（如下图红框所示）。将表格的单元格合并。如果要分割单元格，则可以用合并单元格按钮右边的按钮。
合并结果如下图。
4、 用鼠标拖拽表格的边框调整到适当的大小。
5、 单击左边的单元格，然后输入“摄影作品赏析”文字，并调整大小，因是竖排应每个字回车一次。如果需要调整格子的大小。只需要鼠标的光标移动到边框上拖拽即可。
6、 在右边上下单元格内分别插入图片和文本。页面的基本样子有了。
7、 光标移动到表格的边框上单击。表格周围出现调整框，表示选中整张表格。然后，在属性面板中将“边框”值设置适合的值，如果为0，边框在编辑状态，为虚线显示，浏览时就看不见了。
一个符合要求的页面在表格的帮助下做好了。
通过上面的操作我们对于表格有了一个初步的认识。还要提示一点，对整幅表格操作和对一个单元格操作的时候，相应的属性面板是不同的。
表格颜色设置，选择整幅表格后，利用属性面板的颜色选择器设置背景色。单元格也可单独设置。鼠标在需要设置的单元格点一下，其余操作同上。
下面我们就来看看这些属性面板的区别。
表格的属性面板，要出现这个面板必须先选中整幅表格，方法上面已经提到过了。您可以在众多选项中填入需要的参数。如下图：
选中了单元格之后属性面板就发生如下变化了。选择行或者列都属于选中单元格。如下图：
对表格操作的几种常用方式：
合并：将选中的连续单元格合并成为一个单元格。 分割：将一个单元格分割成若干单元格。 水平对齐方式：分为（左）（中）（右）三种。
垂直对齐方式：分为（顶）（居中）（居底）（基线对齐）
表格还可以增加或者删除行或者列。在一个单元格中单击鼠标右键。在右键菜单中选择表格选项>>选择“插入行或列”。系统会弹出对话框如下。
在对话框里填入数据即可。最后要说的是选中表格中的各种元素的方法：
选中一行，把光标移到该行的最左边单元格的左面，光标会变成箭头状。单击就可以选中一行。 选中一列，把光标移到该列的最上边单元格的上面，光标会变成箭头状，然后单击可以选中一列。 选中整张表格，把光标移到表格的左上角或右边框或下边框线上。单击即可选中整幅表格。选中的表格会在周围出现一个黑框表示整张表格选中了。请看如下示意：
选中单元格。单元格可以同时选中多个。选择连续的单元格，光标先选中的一个单元格，按shift 键不放，选取最后一个单元格。选不连续的单元格。按住Ctrl 键，点取所需要的单元格即可。
我们对于表格的使用就讲到这里，表格是网页制作的基本技术，只有通过不断实践才能充 框架技术
在浏览网页的时候，我们常常会遇到这样的一种导航结构。就是超级连接做在左边单击以后链接的目标出现在右面。或者在上边单击链接指向的目标页面出现在下面。要做出这样的效果，必须使用框架。为了更好的理解什么是框架。我们画一张示意图来进行讨论。
这是一个左右结构的框架。事实上这样的一个结构是由三个网页文件组成的。首先外部的框架是一个文件，图中我们用index.htm 命名。框架中左边命名为A ，指向的是一个网页A.htm 。右边命名为B ，指向的是一个网页B.htm 。
下面我们就来从头开始制作一个框架。（以左右框架结构为例） 1、点“文件”菜单>新建，弹出“新建文档”对话框如下图：
或在插入栏>布局>选＂框架：左框架＂如下图：
Dreamweaver MX 2004生成一个空白的框架页面，如下图：
2、选择「窗口」菜单＞“框架”，弹出“框架”面板如下图。从框架面板可知，系统对左右框架生成命名。左框架名为：leftFrame ，右框架名为：mainFrame ，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。
3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是一个框架结构文件。我们按照惯例都命名为index.htm 。
保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。（下图）
虚线笼罩在右边就是保存框架中右边网页。（如下图）
虚线笼罩在左边就是保存框架中左边的网页：（如下图）
三个页面保存完毕。
4、下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为mainFrame 。(如下图）
6、设置完毕，保存全部，按F12预览网页。链接指向的页面出现在右边框架中。 7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。
框架有很多优点，但是若理解不很透彻，容易搞混。如果您的网站页面不多，可以创建一个不使用框架的Web 页面来完成框架的功能。例如，如果您想让导航条显示在页面的左侧或顶部，既可以使用框架页面，也可以在每一页包含该导航条而不使用框架。
Dreamweaver 教程：层及其应用
2006-07-01 08:30作者：龙犊整理出处：天极网责任编辑：龙犊
层（Layer ）是一种 HTML 页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。首先，请看下图：
我们首先来做一个层
1、 在「窗口」菜单＞选“层”，或点「插入」菜单＞布局对象＞选“层”。 2、 在页面中显示一个层。
3、 通过周围的黑色调整柄拖动控制层的大小 4、 拖动层左上角的选择柄可以移动层的位置。
5、 单击层标记可以选中一个层。
6、 在层中可以插入其他任何元素包括图片文字链接表格等。
一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。层面板可以通过菜单「窗口」菜单＞选“层”打开。
这里我们需要对几个概念进行解释。层有隐藏和显示的属性。这是层的一个重要属性和以后说到的行为相结合就变成了重要的参数。单击层面板列表的左边，可以打开关闭眼睛。眼睛挣开和关闭表示层的显示和隐藏。
层还有一个概念就是层数，层数决定了重叠时哪个层在上面哪个层在下面。 比如层数为２的层在层数为１的层的上面。改变层数就可以改变层的重叠顺序。
层面板上面还有一个参数就是防止层重叠。一旦选中，页面中层就无法重叠了。 层还有一种父子关系也就是隶属关系。在层面板中是这样表示的。
图中Layer2挂在Layer1的下面。Layer1为父层，Layer2为子层。在页面中拖动Layer1，Layer2也跟着动起来。因为他们已经链在一起了，并且Layer2隶属于Layer1。父层移动会影响到子层。移动layer2层，Layer1层不动。也就是子层不会影响到父层。
要建立这样的一种隶属关系方法很简单。在层面板中按Ctrl 键将子层拖拽到父层即可。
［层和表格之间转换］
由于层在网页布局上非常方便，所以，一些人可能不喜欢使用表格或“布局”模式来创建自己的页面，而是喜欢通过层来进行设计。Dreamweaver MX 2004可以使用层来创建自己的布局，然后将它们转换为表格。
在转换为表格之前，请确保层没有重叠。请执行以下操作：选择“修改”＞“转换”＞“层到表格”。即可显示“转换层为表格”对话框。
选择所需的选项。单击“确定”。
若要将表转换为层，请选择“修改”＞“转换”＞“表格到层”。即可显示“转换表格为层。对话框。
选择所需的选项。单击“确定”。
层及应用我们就简单介绍到这里。
Dreamweaver 教程：操作框架
2006-07-01 07:00作者：龙犊整理出处：天极网责任编辑：龙犊
本文介绍操作框架的一些方面：拆分框架，查看和设置框架集属性，设置链接的目标框架。 拆分框架
1. 在框架页面中，将插入点放在边框上，出现双向箭头。
2. 拖动边框，产生一个新的框架文件。
3. 在属性面板上，为新框架命名，并且点击“浏览文件”，选择一个文件作为框架的“源文件”。
4. 选择“文件”>“保存全部”。
注：要使用不在“设计”视图边缘的框架边框拆分一个框架，在按住 Alt 键的同时拖动框架边框。
查看和设置框架集属性
选择“窗口”>“其他”>“框架”,打开“框架”面板。
在“框架”面板中单击环绕框架集的边框，选中框架集。 在属性面板上，选中框架区，然后修改框架集属性。 使用类似的方法修改框架文件的属性。
设置链接的目标框架
在框架页面中选择一个链接，在“目标”弹出式菜单中，选择链接的文档应在其中显示的框架或窗口。 _blank 在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。
_parent 在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。 _self 在当前框架中打开链接，同时替换该框架中的内容。 _top 在当前浏览器窗口中打开链接的文档，同时替换所有框架。
如果链接需要在框架页之外打开，使用 target="_top" 或 target="_blank"。
Dreamweaver 教程：添加背景音乐
2006-06-30 15:52作者：龙犊整理出处：天极网责任编辑：龙犊
1. 打开一个网页文档，在文档左下角的“标签选择器”中选择“ body ”标签。
2. 打开行为面板，点击“＋”按钮添加行为。
3. 选择“播放声音”。
4. 选择声音文件。一个网页的背景音乐就添加好了。
如果要修改背景音乐属性
1. 在文档中选择背景音乐的图标。
2. 在属性检查器中，点击“参数”按钮。
3. 修改参数。
自己动手用Dreamweaver 制作活动菜单条
2006-06-19 10:44作者：龙犊整理出处：天极网责任编辑：龙犊
用QQ 聊过天的朋友都对它的自动隐藏窗口功能爱不释手，它可以使窗口显得清爽整洁而且富有动感，笔者的几个朋友都想在自己的网页中加入类似的东东，经过共同摸索发现用Dreamweaer 就可以实现这种效果，下面我们通过一个活动菜单条的制作来看看吧。
第1步：制作菜单外貌
图1
在Dreamweaer 中新建一个文件，绘制一个层，在该层中插入一个表格(如图1) ，对该表格进行修饰，然后加入菜单项并建立各项的超链接，为了去掉超链接的下划线，可以编辑超链接的CSS 样式，在CSS
样式面板中通过CSS 选择器将“Link”和“Hover”的“Decoration(装饰)”均设置为“None(无)”，将“Hover”的“Color(颜色)”设置为红色，最后将设置好的样式应用到各个菜单条中(可按“F12”键预览效果) 。
第2步：设计菜单的动态效果
1、选定层面，当鼠标变成“十”字形时按住左键将层面拖动到页面右上角(使整个菜单条完全露出但上边缘正好靠拢页面上边界) ，在窗口菜单中打开时间线面板，选定层面将其拖动到时间线上，Dreamweaer 会自动产生一个长度为15帧的动画对象，拖动该动画对象的最后一个关键帧到第30帧，将其长度设置为30帧。然后在第15帧处单击右键，在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧，并将层面拖动到适当位置(如图2) 。在时间线窗口中的第15帧处再次单击右键，在弹出的快捷菜单中选择“添加动作”，为该帧添加一个交互行为，Dreamweaer 将自动打开行为面板。单击行为面板中的“+”按钮，从弹出的菜单中选择“Timeline/Stop Timeline”，打开“Stop Timeline”对话框，选择“Timeline1”后单击“确定”按钮关闭该对话框。交互行为的事件为“onFrame15”，动作为“Stop Timeline”，这样当时间线运行到第15帧时，动画将停止播放，这样就实现了菜单条弹回的功能。
图2
2、用同样的方法在时间线的第30帧处也添加一个“Stop Timeline”的交互行为，这样就实现了菜单弹出的功能。添加了这两个交互行为后，在时间线窗口的相应帧上面都出现了一个蓝色方块，它代表一个交互行为。选择“自动播放和循环”复选框，使动画能够自动循环播放(如图3) 。
图3
3、现在还要设置一个行为让时间线停止后能继续播放。我的设想是这样的：在一般状态下菜单条弹回但仅保留下方的“校园大观”字样，而菜单条再次弹出和弹回则由鼠标是否经过了菜单条上的“校园大观”来控制。如此可以这样继续进行：选定菜单条中的“校园大观”(要确保该字样的超链接地址为“#”，即空链接) 字样，单击行为面板中的“+”按钮，在弹出的菜单中选择“Timeline/Play Timeline”，在接着弹出的对话框中选择“Timeline1”后单击确定按钮，这时行为面板中将增加一个行为，在其“Events”下拉列表中选择
“onMouseOver”事件，表示当鼠标处于该字样上方时播放动画(如图4) 。
图4
至此，一个活动菜单条制作完成了。可以按“F12”键预览其效果。
但这个菜单条还有一点美中不足的是，它的消失必须在鼠标经过了菜单条下方的特定区域(本例中为“校园大观”字样) 时才行，要想在菜单条弹出后，只要把鼠标从该菜单条上移开即可使菜单消失，可能就要借助Fireworks 或Flash 了，如果你有什么好方法，不妨来信和我们一起交流一下。
用Dreamweaer 制作活动菜单条——欢迎访问天极软件Dreamweaver 教程专区
Dreamweaver 超级技巧之文字特效
2007-02-28 08:19作者：龙犊整理出处：天极yesky 责任编辑：龙犊
应用目标：制作文字特效
应用软件：Dreamweaver MX
操作难度：★★☆☆☆
我们常用的网页制作工具Dreamweaver MX不仅可以制作网页，而且利用其中的CSS 滤镜我们还可以对文字或图片进行简单的特效处理。下面我们就通过几个例子来看一看在Dreamweaver 中是如何制作特效文字的。
光晕字
首先启动Dreamweaver ，在新文档中插入一个1×1的表格，边框设置为0，然后在其中输入需要修饰的文字。
单击右面的浮动面板中的“设计→CSS样式”打开这一浮动面板。
面板右下角的四个按钮分别是：添加、新建、编辑以及删除CSS 样式。
注意：在Dreamweaver 中，CSS 滤镜只能作用于有区域限制的对象，如表格、单元格、图片等，而不能直接用于文字，所以我们要把所需要增加特效的文字事先放在表格中，然后对表格应用CSS 样式，从而使文字产生特殊效果。
图1 新建CSS 样式
单击新建CSS 样式按钮，弹出如图1的对话框。
“类型”项选择“创建自定义样式”，“定义在”选择“仅对该文档”，点确定后弹出CSS 样式定义对话框(如图
2) ，在类型面板中我们可以定义字体、字号、颜色等内容，本例中我们选择字体为隶书，大小50像素，颜色为白色。
图2 定义CSS 样式
在Dreamweaver 中精细化你的表格外观
2006-03-01 13:34作者：龙犊整理出处：天极网责任编辑：龙犊
表格无疑是网页制作中最为重要的一个对象，因为通常的网页都是依靠表格来进行版面布局和各元素组织的，它直接决定了网页是否美观，内容组织是否清晰。但很多朋友常常忽视对表格的研究，而把目光投向其他的层、图片、特效等等，其实合理的利用表格可以方便的美化你得页面，我们也常常听到有朋友
抱怨表格作出的页面单调、粗糙、缺乏变化，也常常听到有人问如何作出1个像素的表格边框。其实在Dreamweaver 中我们可以非常方便的精细化你的表格，从而使你的网页更加美观精细。我们将分下面三个方面介绍如何在Dreamweaver 中精细化你的表格。
一、利用属性面板。
图一
首先我们需要了解两个表格属性面板上的参数:CellPad和CellSpace 。如图一所示，CellPad 是指表格中两个单元格之间的距离，CellSpace 是指每个单元格与它中间的内容之间的间隔距离。通过改变这两个参数，并配合背景色彩的变化，可以方便的做出1像素的表格边框。
1、使用Object 面板插入一个表格，定义表格宽、高及行数和列数。注意此时Dreamweaver 中插入表格的默认CellPad 和CellSpace 、Border 都为0。如图二：
图二
2、在属性面板中定义表格的Border 为0，CellPad 为5(这项可使单元格中的内容与单元格边缘之间保持5个像素);CellSpace 为1(此项使得单元格之间保持1个项素的间距) 。如图三;
图三
3、设置表格的背景色#999999，如图四;
图四
4、设置单元格的背景色#FFFFFF，如图五
;
图五
5、在浏览器中预览一下效果，我们可以看到表格呈现一个像素的边框，如图六;
图六
二、利用表格嵌套。
还是上面的主要原理，我们在利用表格之间的互相嵌套，就可以实现更多的效果。
1、首先我们绘制一个表格，参照前面的例子设定此表格的CellPad 和CellSpace 的数值和颜色。具体效果如图七;
图七
2、接下来绘制另一个单行单列的表格，设置CellPad=2，CellSpace=1具体参数如图八;
图八
3、将第一步中作好的表格移动到第二步中的表格中，此时的表格外观如图九;
图九
我们看到此表格具有双线外框，单线内框。
4、再修改第二步中的表格为单行双列，在每个单元格中都放置一个第一步中的表格，最后的表格外观如图十;
三、利用样式表美化表格。
1、直接重新定义，样式表的详细定义我不作介绍，定义表格边框主要是在样式编辑器的Border 选项中，如图十一;
图十一
Width 代表上下左右的边框宽度;Color 可以分别定义上下左右边框的颜色;Style 可以丁一边框的样式，常用的为solid(实线) ，其它类型还有:dotted(点线) 、dashed(虚线) 、double(双线) 、groove(槽线) 、ridge(脊线) 、inset(内陷) 、outset(外陷) 。不过有几个类型必须是IE5.5以上版本才可以看到的。
2、重新定义了后的表格外观如图十二
;
图十二
3、我们取消对的重新定义，单独定义一个.tdstyle 样式，具体参数如图十三;
Dreamweaver 制作复杂交换图像
2006-06-19 10:40作者：龙犊整理出处：天极网责任编辑：龙犊
制作效果
我们要制作出一列7个按钮的图片，并且在这一列的按钮图片的前面加上一个指针，我
们要实现的效果是当我们在将鼠标移向某一个按钮图片的时候，这个按钮上面的文字变换颜色。并且指针指向这张图片(效果如图1所示) 。
图1
制作原理
交换图像的制作原理是应用到Dreamweaver 中的行为面板上的翻转图像(Swap image)这一个工具。将它设置成为当产生鼠标悬停在某一个按钮图片的动作的时候，让按钮本身实现一个图像的交换(交换成为黄色文字的图片) ，与此同时设计指针图像的交换(交换成为指针指向当前按钮的指针图片) ，以实现上述效果的实现。
^-^：其实网页上的一些东西看起来似乎很神秘，可究其根源它也只不过是几张图片或几个图层的简单变化而已。
制作材料
这里演示的是7张按钮图片的翻转，所以，我们需要14张按钮图片和7张指针图片共21张图片的制作来实现所示效果。其中7张前台按钮图片分别命名为B1-1~B1-7，7张后台按钮图片分别命名为
B2-1~B2-7，其中7张指针图片分别命名为Z1~Z7，它们的指针分别指向第一到第七个按钮。您可以用Fireworks 等图片制作软件来制作按钮图片。
制作方法
1、建立网页文件。
2、插入一个7乘2的表格，并且把左面的一列表格合并，用来插入指针图片。而右面的七个表格用来插入按钮图片。
3、在左面的表格中插入第一张指针图片Z1，在右面的7行单元格中分别插入蓝色的前台按钮B1-1~B1-7(效果如图2所示) 。
图2
4、点击“窗口(Windows)→行为”，调出行为面板。
5、选中第一个要设置行为的图片，这里是写有“指导思想”的按钮图片，即图片B1-1。
6、点击加号按钮，在弹出菜单下选择交换图像(Swap image)，弹出交换图像对话框。我们的主要部分的设置将在这个对话框中进行。
7、点击对话框当中的浏览按钮，然后选择好这张按钮图片将要翻转成的目的图片，在本例中是带有黄色文字的按钮图片，即图片B2-1。然后点击确定。
8、重复第6步的操作，在图像的文本框中选中指针图片Z1，然后，再次点击浏览按钮，把它翻转成第1个指针文件，即Z1。点击确定。完成上述操作后，行为面板上的显示结果如图3所示。
图3
9、选中第2张按钮图片B1-2，按照上面的方法将它本身翻转成按钮B2-2，并且将指针图片翻转成第2号指针图片Z2。
10、依以上步骤，分别将下面5张图片分别设置成为交换图像的行为。
11、按F12预览，把鼠标的指针悬停在每张图片上，怎么样，感觉还不错吧？
巧用背景颜色和间距快速制作出细边线表格
2006-06-19 10:16作者：龙犊整理出处：天极网责任编辑：龙犊
在中插入一个表格，若设置其“边框(Border)”为1，预览时其边框线较粗。对于不熟悉HTML 语言的网页制作者，如何快速制作出细边线的表格呢? 下面，我给大家介绍一个小技巧——巧用背景颜色和间距制作细边线表格。
以制作一个4行3列、边框线为红色细线的表格为例:
Step 1 在Dreamweaver 的设计视图中插入一个4行3列的表格。
Step 2 在“属性”面板中设置此表格的属性如下:边距(CellPad)根据需要自行设置值(例如10); 间距(CellSpace)为1; 边框(Border)为0; 背景颜色(Bg Color)为红色。
Step 3 选中此表格的所有单元格，在“属性”面板中设置所有单元格的属性如下:背景颜色(Bg)为白色或红色以外的颜色。
最后，保存网页，按F12预览。怎么样，一个4行3列的红色细线表格是不是呈现在你面前?
另外，如果我们照常想用表格来布局定位，但只要外边框线显示为细线，而内部单元格的分隔线不显示的效果，则可以配合使用嵌套表格。下面以表格外边框线为红色细线为例来说明操作方法:
Step 1 在Dreamweaver 的设计视图插入一个1行1列的表格。
Step 2 在“属性”面板设置此表格的属性如下:“边距”根据需要自行设置(例如5):“间距”为1:“边框”为0:“背景颜色”为红色。
Step 3 选中此表格唯一的单元格，在“属性”面板设置此单元格的“背景颜色”为白色或红色以外的其他颜色。
Step 4 将光标定位在此1行1列的表格中，根据需要插入一个几行几列的嵌套表格，此嵌套表格的“边框”一定设置为0，“边距”和“间距”可以根据需要设置或不设置，其他属性可不进行设置。
这样，我们就可以在嵌套表格的不同单元格内插入文字、图片等其他网页元素了。
是否有点动心了? 赶快试试吧!
图十三
注意在这里我们定义了顶端和下端的边框宽度为1像素，左右两边的为0。
4、最后的表格效果见图十四;
图十五
此时表格呈现类似立体的效果。
6、上面这个表格感觉不太完美，整个表格的右边和下方无边框。我们可以再定义一个样式.table1，定义此样式的四边都为1像素，并将它附给
，此时表格外观如图十六;
图十六
小结:合理利用上面介绍的表格技巧，可以非常方便的创造各种常见的表格样式，从而达到美化你的页面的目的。而样式表的运用更加扩充了表格的样式外观，配合高浏览器的支持，可以实现更加多样的效果，如虚线、立体线、等等。个人感觉在商业网站的设计中，更多的使用表格可以整加页面层次，同时可以使页面简洁大方，但也要提醒大家在表格嵌套时的嵌套层次不要超过三层。
如何使用Dreamweaver 制作一个网页?
创建网页页面
1、在Dreamveaver“文件－新建－常规－基本页－HTML”，这样就建好了一个页面，英文版的默认的文件名为untitled.htm 。中文版的的默认的文件名为“无标题文档”。htm 就表示这个网页文件是一个静态的HTML 文件。给它改名为index.htm 。
注：网站第一页的名字通常是index.htm 或index.html 。其它页面的名字可以自己取。这也就是主页，上传后打开网页默认连接到此页。
2、在标题空格里输入网页名称，点击修改－页面属性，打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背景图像，超级链接的颜色（一般默认即可），其他都保持默认即可。
3．此时光标位于左上角，可输入一句话，如“欢迎来到我的主页”。选取文字，用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车使其位于页面中间等。
4．如要选取字体，则选择字体中的最后一项：编辑字体列表。然后在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。
注：在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用，
因为别人电脑上未装就看不到。如果需要用的话，要做成图片后再使用。 注：在网页上打入空格的办法是：把输入法调为全角。
注：在网页上换行的办法是：shift+Enter。只按Enter 则为换段。 下面拿一个现成的例子来给大家讲解一下：
现在，以下边的简单网页为例，叙述一下制作过程。简单网页如下图： 在开始制作之前，我们先对这个页面进行一下分析。看看这个页面用到了哪些东西。
□网页顶端的标题“我的主页”是一段文字。
□网页中间是一幅图片。
□最下端的欢迎词是一段文字。
□网页背景是一深紫红颜色。
构思好这个网页的结构，我们就可以开始制作了。
首先启动Dreamweaver ，确保你已经用站点管理器建立好了一个网站（根目录）。
为了制作方便，请您事先打开资源管理器，把要使用的图片收集到网站目录images 文件夹内。
进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标
在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧，我们可以对它进行设置。
【设置文字的格式】 选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“B”将字体变粗。
【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。
【设置网页的标题和背景颜色】
点击“修改”菜单选“页面属性”。系统弹出页面属性对话框（如下图） 请在标题输入框填入标题“我的主页”。
设置背景颜色： 网页背景可以是图片，也可以是颜色。此例是颜色。如上图打开背景颜色选择器进行选取。如果背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。
设计视图状态，在标题“我的主页”右边空白处单击鼠标，回车换一行，按照以下的步骤插入一幅画图片，并使这张图片居中。您也可以通过属性面板中的左对齐按钮让其居左安放。
【插入图像】选择以下任意一种方法：
（1）使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。如下图：
（2）使用插入栏：单击插入栏对象按钮>选 按钮，弹出“选择图像源文件”对话框，其余操作同上。
（3）使用面板组“资源”面板（如下图）：点按钮，展开根目录的图片文件夹，选定该文件，用鼠标拖动至工作区合适位置。
注：为了管理方便，我们把图片放在“images”文件夹内。如果图片少，您也可以放在站点根目录下。注意文件名要用英文或用拼音文字命名 而且使用小写，不能用中文，否则要出现一些麻烦。
一个图片就插入完毕了。（插入*.swf动画文件，选择“插入”菜单＞媒体＞Flash ）。
【输入欢迎文字】
在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字“欢迎您„„”然后，利用属性面板对文字进行设置。
保存页面。
一个简单的页面就这样编辑完毕了。
【预览网页】在页面编辑器中按F12预览网页效果。
网站中的第一页，也就是首页，我们通常在存盘时取名为index.htm 。
【小结】我们制作了一个简单的网页。
内容有四：
①图片插入和对齐设置；
②文字的格式、颜色和加粗等设置；
③背景颜色的设置；
④预览网页，查看实际效果。
不仅要掌握还要举一反三反复练习。
表格设计
表格是现代网页制作的一个重要组成部分。表格之所以重要是因为表格可以实现网页的精确排版和定位。本节教程我们分为两步来进行。首先看表格操作的一个实例。然后来看一些表格操作的基本方法。在开始制作表格之前，我们首先对表格的各部分的名称做一个介绍。（看下图）
一张表格横向叫行，纵向叫列。行列交叉部分就叫做单元格。
单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。
下面看看我们使用表格制作的页面的实例
这幅页面的排版格式，如果用以前我们所讲的对齐方式是无法实现的。因此我们需要用到表格来做。实际上是用两行两列的表格来制作。
1、 在插入栏中选择按钮或“插入”菜单>选“表格”。系统弹出表格对话框如下图。这些参数我们都已经认识了。行：2。列：2。其余的参数都保留其默认值。。
2、 在编辑视图界面中生成了一个表格。表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。当光标移到点上就可以分别调整表格的高和宽。移到表格的边框线上也可以调整。（如下图）
3、 在表格的第一格按住左键不放，向下拖拽选中二格单元格。（如下图）
然后在展开的属性面板中选择合并单元格按钮（如下图红框所示）。将表格的单元格合并。如果要分割单元格，则可以用合并单元格按钮右边的按钮。
合并结果如下图。
4、 用鼠标拖拽表格的边框调整到适当的大小。
5、 单击左边的单元格，然后输入“摄影作品赏析”文字，并调整大小，因是竖排应每个字回车一次。如果需要调整格子的大小。只需要鼠标的光标移动到边框上拖拽即可。
6、 在右边上下单元格内分别插入图片和文本。页面的基本样子有了。
7、 光标移动到表格的边框上单击。表格周围出现调整框，表示选中整张表格。然后，在属性面板中将“边框”值设置适合的值，如果为0，边框在编辑状态，为虚线显示，浏览时就看不见了。
一个符合要求的页面在表格的帮助下做好了。
通过上面的操作我们对于表格有了一个初步的认识。还要提示一点，对整幅表格操作和对一个单元格操作的时候，相应的属性面板是不同的。
表格颜色设置，选择整幅表格后，利用属性面板的颜色选择器设置背景色。单元格也可单独设置。鼠标在需要设置的单元格点一下，其余操作同上。
下面我们就来看看这些属性面板的区别。
表格的属性面板，要出现这个面板必须先选中整幅表格，方法上面已经提到过了。您可以在众多选项中填入需要的参数。如下图：
选中了单元格之后属性面板就发生如下变化了。选择行或者列都属于选中单元格。如下图：
对表格操作的几种常用方式：
合并：将选中的连续单元格合并成为一个单元格。 分割：将一个单元格分割成若干单元格。 水平对齐方式：分为（左）（中）（右）三种。
垂直对齐方式：分为（顶）（居中）（居底）（基线对齐）
表格还可以增加或者删除行或者列。在一个单元格中单击鼠标右键。在右键菜单中选择表格选项>>选择“插入行或列”。系统会弹出对话框如下。
在对话框里填入数据即可。最后要说的是选中表格中的各种元素的方法：
选中一行，把光标移到该行的最左边单元格的左面，光标会变成箭头状。单击就可以选中一行。 选中一列，把光标移到该列的最上边单元格的上面，光标会变成箭头状，然后单击可以选中一列。 选中整张表格，把光标移到表格的左上角或右边框或下边框线上。单击即可选中整幅表格。选中的表格会在周围出现一个黑框表示整张表格选中了。请看如下示意：
选中单元格。单元格可以同时选中多个。选择连续的单元格，光标先选中的一个单元格，按shift 键不放，选取最后一个单元格。选不连续的单元格。按住Ctrl 键，点取所需要的单元格即可。
我们对于表格的使用就讲到这里，表格是网页制作的基本技术，只有通过不断实践才能充 框架技术
在浏览网页的时候，我们常常会遇到这样的一种导航结构。就是超级连接做在左边单击以后链接的目标出现在右面。或者在上边单击链接指向的目标页面出现在下面。要做出这样的效果，必须使用框架。为了更好的理解什么是框架。我们画一张示意图来进行讨论。
这是一个左右结构的框架。事实上这样的一个结构是由三个网页文件组成的。首先外部的框架是一个文件，图中我们用index.htm 命名。框架中左边命名为A ，指向的是一个网页A.htm 。右边命名为B ，指向的是一个网页B.htm 。
下面我们就来从头开始制作一个框架。（以左右框架结构为例） 1、点“文件”菜单>新建，弹出“新建文档”对话框如下图：
或在插入栏>布局>选＂框架：左框架＂如下图：
Dreamweaver MX 2004生成一个空白的框架页面，如下图：
2、选择「窗口」菜单＞“框架”，弹出“框架”面板如下图。从框架面板可知，系统对左右框架生成命名。左框架名为：leftFrame ，右框架名为：mainFrame ，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。
3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是一个框架结构文件。我们按照惯例都命名为index.htm 。
保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。（下图）
虚线笼罩在右边就是保存框架中右边网页。（如下图）
虚线笼罩在左边就是保存框架中左边的网页：（如下图）
三个页面保存完毕。
4、下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为mainFrame 。(如下图）
6、设置完毕，保存全部，按F12预览网页。链接指向的页面出现在右边框架中。 7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。
框架有很多优点，但是若理解不很透彻，容易搞混。如果您的网站页面不多，可以创建一个不使用框架的Web 页面来完成框架的功能。例如，如果您想让导航条显示在页面的左侧或顶部，既可以使用框架页面，也可以在每一页包含该导航条而不使用框架。
Dreamweaver 教程：层及其应用
2006-07-01 08:30作者：龙犊整理出处：天极网责任编辑：龙犊
层（Layer ）是一种 HTML 页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。首先，请看下图：
我们首先来做一个层
1、 在「窗口」菜单＞选“层”，或点「插入」菜单＞布局对象＞选“层”。 2、 在页面中显示一个层。
3、 通过周围的黑色调整柄拖动控制层的大小 4、 拖动层左上角的选择柄可以移动层的位置。
5、 单击层标记可以选中一个层。
6、 在层中可以插入其他任何元素包括图片文字链接表格等。
一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。层面板可以通过菜单「窗口」菜单＞选“层”打开。
这里我们需要对几个概念进行解释。层有隐藏和显示的属性。这是层的一个重要属性和以后说到的行为相结合就变成了重要的参数。单击层面板列表的左边，可以打开关闭眼睛。眼睛挣开和关闭表示层的显示和隐藏。
层还有一个概念就是层数，层数决定了重叠时哪个层在上面哪个层在下面。 比如层数为２的层在层数为１的层的上面。改变层数就可以改变层的重叠顺序。
层面板上面还有一个参数就是防止层重叠。一旦选中，页面中层就无法重叠了。 层还有一种父子关系也就是隶属关系。在层面板中是这样表示的。
图中Layer2挂在Layer1的下面。Layer1为父层，Layer2为子层。在页面中拖动Layer1，Layer2也跟着动起来。因为他们已经链在一起了，并且Layer2隶属于Layer1。父层移动会影响到子层。移动layer2层，Layer1层不动。也就是子层不会影响到父层。
要建立这样的一种隶属关系方法很简单。在层面板中按Ctrl 键将子层拖拽到父层即可。
［层和表格之间转换］
由于层在网页布局上非常方便，所以，一些人可能不喜欢使用表格或“布局”模式来创建自己的页面，而是喜欢通过层来进行设计。Dreamweaver MX 2004可以使用层来创建自己的布局，然后将它们转换为表格。
在转换为表格之前，请确保层没有重叠。请执行以下操作：选择“修改”＞“转换”＞“层到表格”。即可显示“转换层为表格”对话框。
选择所需的选项。单击“确定”。
若要将表转换为层，请选择“修改”＞“转换”＞“表格到层”。即可显示“转换表格为层。对话框。
选择所需的选项。单击“确定”。
层及应用我们就简单介绍到这里。
Dreamweaver 教程：操作框架
2006-07-01 07:00作者：龙犊整理出处：天极网责任编辑：龙犊
本文介绍操作框架的一些方面：拆分框架，查看和设置框架集属性，设置链接的目标框架。 拆分框架
1. 在框架页面中，将插入点放在边框上，出现双向箭头。
2. 拖动边框，产生一个新的框架文件。
3. 在属性面板上，为新框架命名，并且点击“浏览文件”，选择一个文件作为框架的“源文件”。
4. 选择“文件”>“保存全部”。
注：要使用不在“设计”视图边缘的框架边框拆分一个框架，在按住 Alt 键的同时拖动框架边框。
查看和设置框架集属性
选择“窗口”>“其他”>“框架”,打开“框架”面板。
在“框架”面板中单击环绕框架集的边框，选中框架集。 在属性面板上，选中框架区，然后修改框架集属性。 使用类似的方法修改框架文件的属性。
设置链接的目标框架
在框架页面中选择一个链接，在“目标”弹出式菜单中，选择链接的文档应在其中显示的框架或窗口。 _blank 在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。
_parent 在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。 _self 在当前框架中打开链接，同时替换该框架中的内容。 _top 在当前浏览器窗口中打开链接的文档，同时替换所有框架。
如果链接需要在框架页之外打开，使用 target="_top" 或 target="_blank"。
Dreamweaver 教程：添加背景音乐
2006-06-30 15:52作者：龙犊整理出处：天极网责任编辑：龙犊
1. 打开一个网页文档，在文档左下角的“标签选择器”中选择“ body ”标签。
2. 打开行为面板，点击“＋”按钮添加行为。
3. 选择“播放声音”。
4. 选择声音文件。一个网页的背景音乐就添加好了。
如果要修改背景音乐属性
1. 在文档中选择背景音乐的图标。
2. 在属性检查器中，点击“参数”按钮。
3. 修改参数。
自己动手用Dreamweaver 制作活动菜单条
2006-06-19 10:44作者：龙犊整理出处：天极网责任编辑：龙犊
用QQ 聊过天的朋友都对它的自动隐藏窗口功能爱不释手，它可以使窗口显得清爽整洁而且富有动感，笔者的几个朋友都想在自己的网页中加入类似的东东，经过共同摸索发现用Dreamweaer 就可以实现这种效果，下面我们通过一个活动菜单条的制作来看看吧。
第1步：制作菜单外貌
图1
在Dreamweaer 中新建一个文件，绘制一个层，在该层中插入一个表格(如图1) ，对该表格进行修饰，然后加入菜单项并建立各项的超链接，为了去掉超链接的下划线，可以编辑超链接的CSS 样式，在CSS
样式面板中通过CSS 选择器将“Link”和“Hover”的“Decoration(装饰)”均设置为“None(无)”，将“Hover”的“Color(颜色)”设置为红色，最后将设置好的样式应用到各个菜单条中(可按“F12”键预览效果) 。
第2步：设计菜单的动态效果
1、选定层面，当鼠标变成“十”字形时按住左键将层面拖动到页面右上角(使整个菜单条完全露出但上边缘正好靠拢页面上边界) ，在窗口菜单中打开时间线面板，选定层面将其拖动到时间线上，Dreamweaer 会自动产生一个长度为15帧的动画对象，拖动该动画对象的最后一个关键帧到第30帧，将其长度设置为30帧。然后在第15帧处单击右键，在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧，并将层面拖动到适当位置(如图2) 。在时间线窗口中的第15帧处再次单击右键，在弹出的快捷菜单中选择“添加动作”，为该帧添加一个交互行为，Dreamweaer 将自动打开行为面板。单击行为面板中的“+”按钮，从弹出的菜单中选择“Timeline/Stop Timeline”，打开“Stop Timeline”对话框，选择“Timeline1”后单击“确定”按钮关闭该对话框。交互行为的事件为“onFrame15”，动作为“Stop Timeline”，这样当时间线运行到第15帧时，动画将停止播放，这样就实现了菜单条弹回的功能。
图2
2、用同样的方法在时间线的第30帧处也添加一个“Stop Timeline”的交互行为，这样就实现了菜单弹出的功能。添加了这两个交互行为后，在时间线窗口的相应帧上面都出现了一个蓝色方块，它代表一个交互行为。选择“自动播放和循环”复选框，使动画能够自动循环播放(如图3) 。
图3
3、现在还要设置一个行为让时间线停止后能继续播放。我的设想是这样的：在一般状态下菜单条弹回但仅保留下方的“校园大观”字样，而菜单条再次弹出和弹回则由鼠标是否经过了菜单条上的“校园大观”来控制。如此可以这样继续进行：选定菜单条中的“校园大观”(要确保该字样的超链接地址为“#”，即空链接) 字样，单击行为面板中的“+”按钮，在弹出的菜单中选择“Timeline/Play Timeline”，在接着弹出的对话框中选择“Timeline1”后单击确定按钮，这时行为面板中将增加一个行为，在其“Events”下拉列表中选择
“onMouseOver”事件，表示当鼠标处于该字样上方时播放动画(如图4) 。
图4
至此，一个活动菜单条制作完成了。可以按“F12”键预览其效果。
但这个菜单条还有一点美中不足的是，它的消失必须在鼠标经过了菜单条下方的特定区域(本例中为“校园大观”字样) 时才行，要想在菜单条弹出后，只要把鼠标从该菜单条上移开即可使菜单消失，可能就要借助Fireworks 或Flash 了，如果你有什么好方法，不妨来信和我们一起交流一下。
用Dreamweaer 制作活动菜单条——欢迎访问天极软件Dreamweaver 教程专区
Dreamweaver 超级技巧之文字特效
2007-02-28 08:19作者：龙犊整理出处：天极yesky 责任编辑：龙犊
应用目标：制作文字特效
应用软件：Dreamweaver MX
操作难度：★★☆☆☆
我们常用的网页制作工具Dreamweaver MX不仅可以制作网页，而且利用其中的CSS 滤镜我们还可以对文字或图片进行简单的特效处理。下面我们就通过几个例子来看一看在Dreamweaver 中是如何制作特效文字的。
光晕字
首先启动Dreamweaver ，在新文档中插入一个1×1的表格，边框设置为0，然后在其中输入需要修饰的文字。
单击右面的浮动面板中的“设计→CSS样式”打开这一浮动面板。
面板右下角的四个按钮分别是：添加、新建、编辑以及删除CSS 样式。
注意：在Dreamweaver 中，CSS 滤镜只能作用于有区域限制的对象，如表格、单元格、图片等，而不能直接用于文字，所以我们要把所需要增加特效的文字事先放在表格中，然后对表格应用CSS 样式，从而使文字产生特殊效果。
图1 新建CSS 样式
单击新建CSS 样式按钮，弹出如图1的对话框。
“类型”项选择“创建自定义样式”，“定义在”选择“仅对该文档”，点确定后弹出CSS 样式定义对话框(如图
2) ，在类型面板中我们可以定义字体、字号、颜色等内容，本例中我们选择字体为隶书，大小50像素，颜色为白色。
图2 定义CSS 样式
在Dreamweaver 中精细化你的表格外观
2006-03-01 13:34作者：龙犊整理出处：天极网责任编辑：龙犊
表格无疑是网页制作中最为重要的一个对象，因为通常的网页都是依靠表格来进行版面布局和各元素组织的，它直接决定了网页是否美观，内容组织是否清晰。但很多朋友常常忽视对表格的研究，而把目光投向其他的层、图片、特效等等，其实合理的利用表格可以方便的美化你得页面，我们也常常听到有朋友
抱怨表格作出的页面单调、粗糙、缺乏变化，也常常听到有人问如何作出1个像素的表格边框。其实在Dreamweaver 中我们可以非常方便的精细化你的表格，从而使你的网页更加美观精细。我们将分下面三个方面介绍如何在Dreamweaver 中精细化你的表格。
一、利用属性面板。
图一
首先我们需要了解两个表格属性面板上的参数:CellPad和CellSpace 。如图一所示，CellPad 是指表格中两个单元格之间的距离，CellSpace 是指每个单元格与它中间的内容之间的间隔距离。通过改变这两个参数，并配合背景色彩的变化，可以方便的做出1像素的表格边框。
1、使用Object 面板插入一个表格，定义表格宽、高及行数和列数。注意此时Dreamweaver 中插入表格的默认CellPad 和CellSpace 、Border 都为0。如图二：
图二
2、在属性面板中定义表格的Border 为0，CellPad 为5(这项可使单元格中的内容与单元格边缘之间保持5个像素);CellSpace 为1(此项使得单元格之间保持1个项素的间距) 。如图三;
图三
3、设置表格的背景色#999999，如图四;
图四
4、设置单元格的背景色#FFFFFF，如图五
;
图五
5、在浏览器中预览一下效果，我们可以看到表格呈现一个像素的边框，如图六;
图六
二、利用表格嵌套。
还是上面的主要原理，我们在利用表格之间的互相嵌套，就可以实现更多的效果。
1、首先我们绘制一个表格，参照前面的例子设定此表格的CellPad 和CellSpace 的数值和颜色。具体效果如图七;
图七
2、接下来绘制另一个单行单列的表格，设置CellPad=2，CellSpace=1具体参数如图八;
图八
3、将第一步中作好的表格移动到第二步中的表格中，此时的表格外观如图九;
图九
我们看到此表格具有双线外框，单线内框。
4、再修改第二步中的表格为单行双列，在每个单元格中都放置一个第一步中的表格，最后的表格外观如图十;
三、利用样式表美化表格。
1、直接重新定义，样式表的详细定义我不作介绍，定义表格边框主要是在样式编辑器的Border 选项中，如图十一;
图十一
Width 代表上下左右的边框宽度;Color 可以分别定义上下左右边框的颜色;Style 可以丁一边框的样式，常用的为solid(实线) ，其它类型还有:dotted(点线) 、dashed(虚线) 、double(双线) 、groove(槽线) 、ridge(脊线) 、inset(内陷) 、outset(外陷) 。不过有几个类型必须是IE5.5以上版本才可以看到的。
2、重新定义了后的表格外观如图十二
;
图十二
3、我们取消对的重新定义，单独定义一个.tdstyle 样式，具体参数如图十三;
Dreamweaver 制作复杂交换图像
2006-06-19 10:40作者：龙犊整理出处：天极网责任编辑：龙犊
制作效果
我们要制作出一列7个按钮的图片，并且在这一列的按钮图片的前面加上一个指针，我
们要实现的效果是当我们在将鼠标移向某一个按钮图片的时候，这个按钮上面的文字变换颜色。并且指针指向这张图片(效果如图1所示) 。
图1
制作原理
交换图像的制作原理是应用到Dreamweaver 中的行为面板上的翻转图像(Swap image)这一个工具。将它设置成为当产生鼠标悬停在某一个按钮图片的动作的时候，让按钮本身实现一个图像的交换(交换成为黄色文字的图片) ，与此同时设计指针图像的交换(交换成为指针指向当前按钮的指针图片) ，以实现上述效果的实现。
^-^：其实网页上的一些东西看起来似乎很神秘，可究其根源它也只不过是几张图片或几个图层的简单变化而已。
制作材料
这里演示的是7张按钮图片的翻转，所以，我们需要14张按钮图片和7张指针图片共21张图片的制作来实现所示效果。其中7张前台按钮图片分别命名为B1-1~B1-7，7张后台按钮图片分别命名为
B2-1~B2-7，其中7张指针图片分别命名为Z1~Z7，它们的指针分别指向第一到第七个按钮。您可以用Fireworks 等图片制作软件来制作按钮图片。
制作方法
1、建立网页文件。
2、插入一个7乘2的表格，并且把左面的一列表格合并，用来插入指针图片。而右面的七个表格用来插入按钮图片。
3、在左面的表格中插入第一张指针图片Z1，在右面的7行单元格中分别插入蓝色的前台按钮B1-1~B1-7(效果如图2所示) 。
图2
4、点击“窗口(Windows)→行为”，调出行为面板。
5、选中第一个要设置行为的图片，这里是写有“指导思想”的按钮图片，即图片B1-1。
6、点击加号按钮，在弹出菜单下选择交换图像(Swap image)，弹出交换图像对话框。我们的主要部分的设置将在这个对话框中进行。
7、点击对话框当中的浏览按钮，然后选择好这张按钮图片将要翻转成的目的图片，在本例中是带有黄色文字的按钮图片，即图片B2-1。然后点击确定。
8、重复第6步的操作，在图像的文本框中选中指针图片Z1，然后，再次点击浏览按钮，把它翻转成第1个指针文件，即Z1。点击确定。完成上述操作后，行为面板上的显示结果如图3所示。
图3
9、选中第2张按钮图片B1-2，按照上面的方法将它本身翻转成按钮B2-2，并且将指针图片翻转成第2号指针图片Z2。
10、依以上步骤，分别将下面5张图片分别设置成为交换图像的行为。
11、按F12预览，把鼠标的指针悬停在每张图片上，怎么样，感觉还不错吧？
巧用背景颜色和间距快速制作出细边线表格
2006-06-19 10:16作者：龙犊整理出处：天极网责任编辑：龙犊
在中插入一个表格，若设置其“边框(Border)”为1，预览时其边框线较粗。对于不熟悉HTML 语言的网页制作者，如何快速制作出细边线的表格呢? 下面，我给大家介绍一个小技巧——巧用背景颜色和间距制作细边线表格。
以制作一个4行3列、边框线为红色细线的表格为例:
Step 1 在Dreamweaver 的设计视图中插入一个4行3列的表格。
Step 2 在“属性”面板中设置此表格的属性如下:边距(CellPad)根据需要自行设置值(例如10); 间距(CellSpace)为1; 边框(Border)为0; 背景颜色(Bg Color)为红色。
Step 3 选中此表格的所有单元格，在“属性”面板中设置所有单元格的属性如下:背景颜色(Bg)为白色或红色以外的颜色。
最后，保存网页，按F12预览。怎么样，一个4行3列的红色细线表格是不是呈现在你面前?
另外，如果我们照常想用表格来布局定位，但只要外边框线显示为细线，而内部单元格的分隔线不显示的效果，则可以配合使用嵌套表格。下面以表格外边框线为红色细线为例来说明操作方法:
Step 1 在Dreamweaver 的设计视图插入一个1行1列的表格。
Step 2 在“属性”面板设置此表格的属性如下:“边距”根据需要自行设置(例如5):“间距”为1:“边框”为0:“背景颜色”为红色。
Step 3 选中此表格唯一的单元格，在“属性”面板设置此单元格的“背景颜色”为白色或红色以外的其他颜色。
Step 4 将光标定位在此1行1列的表格中，根据需要插入一个几行几列的嵌套表格，此嵌套表格的“边框”一定设置为0，“边距”和“间距”可以根据需要设置或不设置，其他属性可不进行设置。
这样，我们就可以在嵌套表格的不同单元格内插入文字、图片等其他网页元素了。
是否有点动心了? 赶快试试吧!
图十三
注意在这里我们定义了顶端和下端的边框宽度为1像素，左右两边的为0。
4、最后的表格效果见图十四;
图十五
此时表格呈现类似立体的效果。
6、上面这个表格感觉不太完美，整个表格的右边和下方无边框。我们可以再定义一个样式.table1，定义此样式的四边都为1像素，并将它附给
，此时表格外观如图十六;
图十六
小结:合理利用上面介绍的表格技巧，可以非常方便的创造各种常见的表格样式，从而达到美化你的页面的目的。而样式表的运用更加扩充了表格的样式外观，配合高浏览器的支持，可以实现更加多样的效果，如虚线、立体线、等等。个人感觉在商业网站的设计中，更多的使用表格可以整加页面层次，同时可以使页面简洁大方，但也要提醒大家在表格嵌套时的嵌套层次不要超过三层。