基于Dreamweaver动态网页制作技术技巧

在Dreamweaver中有很多有用的技巧，如果运用得当，不仅能提高效率，而且可以实现很多实用的效果。

一、 站点及窗口规划的技巧

1、快速添加站点导航。

使用站点窗口中的网站地图可以快速制作网站雏形，并可以方便的在个页面之间加入导航链接。首先打开站点地图窗口，选中index.htm文件，点击并拖动站点导航(Site Navigation)窗口中index.htm文件右上角的小圆圈，将它拖动到左边文件窗口中的某一个文件上，如图1所示。

图1 快速添加站点导航

Dreamweaver会自动将mydesign.htm的链 接加入到index.htm文件中，同样执行此操作并分别指向其他相关链接文件后，导航窗口如图2所示。

图2 利用站点导航快速添加网页链接

此时打开index.htm文件，可以看到相应的链接文字和链接都已经添加好了，可以根据需要将他们合理的修改和组织。如图3所示。

图3 快速添加网页链接

2、快速修改文件Title。很多时候新建的文件往往忽视设定文件Title的内容，事后需要修改时，常常得打开每一个文件分别修改。其实这个工作可以在站点窗口中方便的完成。打开站点窗口View菜单下的Show Page Titles，可以使站点窗口中的文件显示出文件头，而不是原先的文件名。默认的文件头是Untitled Document可以分别两次点击，改变默认的文字为需要的文件头。如图4所示。

图4 快速修改文件Title

3、快速生成站点地图。有时需要制作一

个包含当前站点所有文件结构的站点地图而找不到合适的方法。Dreamweaver本身就带有这个功能，方法如下：打开File—Save Site Map命令，在弹出对话框中输入保存的文件名，Dreamweaver会在当前站点的根目录下自动生成一个.bmp或.png格式的站点图片。

二、 页面布局阶段的技巧

Dreamweaver不仅是一个良好的页面制作工具，同时他还可以进行精确的页面排版和布局，这一部分介绍几个页面布局方面的技巧。

1、打开辅助表格。制作者都特别希望能精确的定位网页元素，特别是希望每个元素都能

按自己的愿望精确的定位。Dreamweaver自带的Grid功能可以有助于这种希望的实现。执行命令View－Edit Grid打开坐标辅助，可以选择网格状或者是点状显示，同时打开Snap to Grid，以后插入或添加新的元素时，都会按设定精确定位。如图5所示。

图5 利用Grid功能定位网页元素

2、利用表格排版页面技巧。合理利用

Dreamweaver中的表格功能，可以方便的达到美化页面的目的，下面我介绍几个技巧。

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

2）导入数据表格。有时需要将一些在Execel文件中创建的表格导入Dreamweaver中，可以下将原来的Execel文件另存为带制表符分隔的.txt文本文件。在Dreamweaver中执行Insert—Tabular Date打开如图6所示窗口。添好各个参数后即可将其中的数据导入Dreamweaver的一个表格中。

3）格式化表格。如果对重复设定各个单元格的参数感到厌烦的话，使用Format Table命令可以帮你快速格式化表格，此命令在Command菜单下，此命令内带多种表格配色方

案，你可以选择一种，Dreamweaver会自动将色彩方案应用到你选定的表格上。如图7所示。

图6 利用Insert Tabular Date导入数据表格

图7 使用Format Table命令快速格式化表格

4、表格和层互转。利用灵活的层来安排页

面内容，当觉得满意时再将它转换为表格。选中需要转换的层，执行命令Modify－Convert－Layers to Table。如图8所示。

图8 表格和层互转

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

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

2）打开行为面板(Behaviors)，点击加号添加Go to URL行为。如图9所示。

图9 同时更新多个框架页面

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

图10 Go to URL利用同时更新多个框架页面

4）完成后点确定即可，点此链接，会同时更新多个窗口的内容。

三、 网页内容设计技巧

如何更快更方便得对内容进行组织，是每个朋友都想了解的，下面这几个技巧也许你知道，也许不知道，但重要的是通过不断的运用，你会发现它的优越性的。

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

图11 快速标签编辑

2、快速添加图片边框。对于插入网页中的许多图片都是没有边框的，有时需对图片添加边框，不需要打开图像处理软件即可实现。一种方法是选中图片后直接在属性面板定义Border为1px，这会给图片添加1像素的边框；另一种方法是定义一个样式，可以将img标签直接定义为四边都为1px的样式，则网页中所有插入的图片都会带有相同的边框。如图12所示。

图12 快速添加图片边框

3、使用拖动方式增加链接。Dreamweaver支持从文档内直接托动链接到站点内的其他文件，可将站点窗口和文档窗口并排放置，如图13所示。然后选中文档中需要链接的文字，打开属性面版，将链接地址栏后的Point to File指向站点窗口中的目标文件，如图14所示。

图13 站点窗口和文档窗口并排放置

图14 使用拖动方式增加链接

4、如何加入背景声音。在Dreamweaver中插入一些多媒体声音文件，其实很简单，点击Dreamweaver 工作窗口最左下角的 标签，打开Behavior面板，在弹出的behavior窗口点+号，选择Play Sound，选择你需要的声音文件即可加入。在文档窗口中选中声音文件标识，在属性面板点击Parameters就可以自行设定背景音乐的循环次数、是否自动播放等属性了，如图15所示。

图15 插入声音文件

四、 网页美化技巧

美化各种网页元素是一件既耗时又不一定出效果的工作，下面我介绍的几个技巧也许能帮你一点忙。

1、快速创建配色方案。经常需要设定链接各个状态的文字颜色，有些朋友感觉自己的色彩感不太好，总去寻找一些配色手册。其实Dreamweaver本身已经带了一些配色方案，打开Commands—Set Color Scheme命令，可以看到有许多成套的配色方案，每个都定义了背景色、文字色、链接各个状态的颜色，你只需选择一种即可，如图16所示。

2、CSS链接样式技巧。文字链接一般有四个状态，link、hover、active、visited，通常都会对文字链接的各个状态定义不同的色彩和样式，但经常有朋友发现自己定义的样式在浏览时并未像设想的那样。主要原因是在样式表中对链接的定义顺序有一定的要求，正确的顺序是：A:link—A:visited—A:hover。对一般的朋友来说，其实很多时候只是想Hover状态有变化，有个小技巧就是不按上面的方法定义链接

样式，而只需定义a和a:hover状态的样式即可，这样只有hover状态的样式与其他状态的不同。修改方法如图17所示。

图16 快速创建配色方案

图17 CSS链接样式技巧

3、创建不同色彩的连接文字与下划线。普通的链接文字与链接下划线都是相同的色彩，其实也可以利用样式表中的Border属性来替代普通链接的划线，由于Border有更多的控制参数和样式，因此只要将Border的色彩和文字的色彩定义的不同即可实现的目的。例如可以将文字定义为黑色，而在Border选项中定义下划线为红色，如图18所示。

图18 创建不同色彩的链接文字

Dreamweaver还包含了许多可以极大提高工作效率的命令，包括库项目的建立、模板的运用、历史面板的功能及查找替换功能。这里我介绍几个小的技巧来演示这些命令的强大。

1、清理Word文件技巧。经常需要将一些Word文件转换为HTML文件，但这种转换的结果是生成的HTML文件非常的大，里面包含了许多重复代码，综合利用Dreamweaver的几个功能可以方便的清理掉无用代码。首先打开Word生成的HTML文件，执行Commands菜

单下Clean Up Word HTML命令，程序会自动识别原来Word的版本，并将无用的代码清除。但此时的文件仍就有许多重复代码，主要是包含了大量的和标签，可以再次执行Commands菜单下的Clean up HTML命令，在弹出的对话框中选定Specific Tag(s) 选项，并输入span 和p标签，中间用空格分开，执行命令后，所有的span和p标签都被清除掉。如图19所示。 图19 清理Word文件技巧

但此时文件中的每个图片属性中还包含了类似v:shapes=\"_x0000_i1025\"的属性，还需将这些属性清除。打开查找替换面板，按下图的设置设定替换规则，执行后即可清除所有图片的这些属性。如图20所示。

图20 清除所有图片的这些属性

2、快速替换文件标题。站点窗口替换文件标题，只能一次替换一个文件的标题，可以尝试着利用上一步介绍的查找替换命令一次替换多个文件的标题。通常新建的文件标题都是Untitled Document，可以打开Edit—Find And Replace命令，进行如下设置，将当前站点所有文件标题为Untitled Document的都替换为自己的标题。如图21所示。

图21 快速替换文件标题

3、设置默认文档格式。上面的方法虽然快捷，但是每次新建一个文件时，默认的文件标题仍旧是Untitled Document。因为新建文档时，Dreamweaver会调用一个默认的页面作为缺省格式，这个文件是\\Dreamweaver 4\\Configuration\\Templates\\Default.html，这样就可以将站点中统一的一些格式设置好，如背景色、字体大小、文件标题等，然后将它保存覆盖上面的Default.html文件。在以后新建文件时，Dreamweaver会自动套用设定好的格式，这可以提高很大的工作效率。