Dreamweaver基础技巧全面接触

1、DreamweaverDreamweaver 基础技巧全面接触基础技巧全面接触本文关键字：本文关键字：很多朋友使用 Dreamweaver 一段时间后，开始热衷于寻找各式各样的插件，追求各种各样的特效，而对于 Dreamweaver 中的基本功能反而不去深入研究，其实在 Dreamweaver 中有很多有用的技巧，如果你多加运用，不仅能提高效率，而且可以实现很多实用的效果。今天我把工作中常用的一些技巧介绍给大家，希望对大家能有些用途，同时也希望能唤起大家深入研究的愿望。我准备根据工作中的不同阶段分别介绍各种技巧。一、一、 规划阶段规划阶段站点窗口的技巧站点窗口的技巧Dreamweavr 的站点

2、窗口常常被很多朋友忽视，其实利用站点窗口我们可以方便的完成很多任务。下面我介绍几个实用的技巧。1 1、快速添加站点导航、快速添加站点导航。使用站点窗口中的网站地图可以快速制作网站雏形，并可以方便的在个页面之间加入导航链接。首先按如下图标打开站点地图窗口；选中 index.htm 文件；点击并拖动站点导航（SiteNavigation）窗口中 index.htm 文件右上角的小圆圈，将它拖动到左边文件窗口中的某一个文件上，如下图所示；Dreamweaver 会自动将 mydesign.htm 的链接加入到 index.htm 文件中，同样执行此操作并分别指向其他相关链接文件后，导航窗口如下图：此

3、时打开 index.htm 文件，可以看到相应的连接文字和链接都已经添加好了，我们可以根据需要将他们合理的修改和组织。如图：2 2、快速修改文件、快速修改文件 TitleTitle。很多时候我们新建的文件往往忽视设定文件Title 的内容，事后需要修改时，常常得打开每一个文件分别修改。其实这个工作可以在站点窗口中方便的完成。打开站点窗口 View 菜单下的 Show PageTitles，可以使站点窗口中的文件显示出文件头，而不是原先的文件名。默认的文件头是 Untitled Document 我们可以分别两次点击，改变默认的文字为我们需要的文件头。如图：3 3、快速生成站点地图。、快速生成站

4、点地图。有时我们需要制作一个包含当前站点所有文件结构的站点地图而找不到合适的方法。Dreamweaver 本身就带有这个功能，方法如下：打开 FileSave Site Map 命令，在弹出对话框中输入保存的文件名，Dreamweaver 会在当前站点的根目录下自动生成一个.bmp 或.png 格式的站点图片。二、二、 页面布局阶段的技巧页面布局阶段的技巧Dreamweaver 不仅仅是一个良好的页面制作工具，同时他还可以进行精确的页面排版和布局，这一部分我们介绍几个页面布局方面的技巧。1 1、打开辅助表格。、打开辅助表格。搞过设计的朋友都特别希望能精确的定位网页元素，他们喜欢每个元素都能按自

5、己的愿望精确的定位。Dreamweaver 自带的 Grid 功能可以有助于这种希望的实现。执行命令 ViewEdit Grid 打开坐标辅助，可以选择网格状或者是点状显示，同时打开 Snap to Grid，以后插入或添加新的元素时，都会按你的设定精确定位。2 2、利用表格排版页面技巧。、利用表格排版页面技巧。合理利用 Dreamweaver 中的表格功能，可以方便的达到美化页面的目的，下面我介绍几个技巧。1）创建 1px 边框。有些朋友抱怨 Dreamweaver 无法做出单像素的表格边框，其实仔细利用表格的属性面板即可做出这种单像素表格。首先使用 Object面板插入一个表格，定义表格宽

6、、高及行数和列数。此时 Dreamweaver 中插入表格的默认 CellPad 和 CellSpace、Border 都为 0。在属性面板中定义表格的Border 为 0，CellPad 为 5（这项可使单元格中的内容与单元格边缘之间保持 5个像素）；CellSpace 为 1（此项使得单元格之间保持 1 个项素的间距）。设置表格的背景色为深色（如#999999），设置单元格的背景色为浅色（如#FFFFFF）。在浏览其中观察效果即可。2）导入数据表格。有时我们需要将一些在 Execel 文件中创建的表格导入Dreamweaver 中，我们可以下将原来的 Execel 文件另存为带制表符分隔的

7、.txt文本文件。在 Dreamweaver 中执行 InsertTabular Date 打开如下窗口：添好各个参数后即可将其中的数据导入 Dreamweaver 的一个表格中。3）格式化表格。如果你对重复的设定各个单元格的参数感到厌烦的话，使用 Format Table 命令可以帮你快速格式化表格，此命令在 Command 菜单下，此命令内带多种表格配色方案，你可以选择一种，Dreamweaver 会自动将色彩方案应用到你选定的表格上。如图：123412344 4、表格和层互转。、表格和层互转。有的朋友喜欢自由自在的安排他的页面内容，总不喜欢表格的工作方式。其实你完全可以利用灵活的层来安排

8、你的页面内容，当你觉得满意时再将它转换为表格。选中你需要转换的层，执行命令 ModifyConvertLayers to Table。如图：5 5、同时更新多个框架页面。、同时更新多个框架页面。有是我们需要在点击一个链接时同时更新另外的两个或多个框架页面内容，这可以通过以下步骤使用 Dreamweaver 的行为来实现。1） 选择链接的文字或图片。2） 打开行为面板（Behaviors），点击加号添加 Go to URL 行为。本文关键字：本文关键字：3） 在 Go to URL 对话框中显示了当前已有的所有框架窗口，我们分别选定一个窗口名称，可以分别单独设定每个窗口将要更新的文件内容。Dre

9、amweaver 会在设定了目标文件的窗口后面加一个“*”号，表示此框架窗口已设定了 URL。4） 完成后点确定即可，我们点此链接，会同时更新多个窗口的内容。三、三、 内容篇内容篇如何更快更方便得对内容进行组织，是每个朋友都想了解的，下面这几个技巧也许你知道，也许不知道，但重要的是通过不断的运用，你会发现它的优越性的。1 1、快速标签编辑。、快速标签编辑。对于熟悉手写代码的朋友来说，经常需要切换到代码窗口手工添加一些代码。其实利用 Dreamweaver 的 Quick Tag Editor 可以快速插入各种 HTML 标签，一个是点击属性面板的图标插入，另一种快捷方式是Ctrl+T，这两种方

10、法都会打开快速标签编辑，可以直接从列表中选择需要的源代码标签，如下图：2 2、快速添加图片边框。、快速添加图片边框。对于插入网页中的许多图片都是没有边框的，有时我们需对图片添加边框，我们不需要打开图像处理软件即可实现。一种方法是选中图片后直接在属性面板定义 Border 为 1px，这会给图片添加 1 像素的边框；另一种方法是定义一个样式，我们可以将 img 标签直接定义为四边都为1px 的样式，则网页中所有插入的图片都会带有相同的边框。如图：3 3、使用拖动方式增加链接。、使用拖动方式增加链接。Dreamweaver 支持从文档内直接托动链接到站点内的其他文件，我们可以将站点窗口和文档窗口并

11、排放置，如图：然后选中文档中需要链接的文字，打开属性面版，将链接地址栏后的Point to File 指向站点窗口中的目标文件即可，如下图：4 4、如何加入背景声音。、如何加入背景声音。在 Dreamweaver 中对于一些多媒体声音文件的插入，很多朋友都感到有些困惑，其实很简单，点击 Dreamweaver 工作窗口最左下角的 标签，打开 Behavior 面板，在弹出的 behavior 窗口点+号，选择 PlaySound，选择你需要的声音文件即可加入。在文档窗口中选中声音文件标识，在属性面板点击 Parameters 就可以自行设定背景音乐的循环次数、是否自动播放等属性了，如图：四、四

12、、 美化篇美化篇美化各种网页元素是一件既耗时又不一定出效果的工作，下面我介绍的几个技巧也许能帮你一点忙。1 1、快速创建配色方案。、快速创建配色方案。我们经常需要设定链接各个状态的文字颜色，有些朋友感觉自己的色彩感不太好，总去寻找一些配色手册。其实 Dreamweaver 本身已经带了一些配色方案，打开 CommandsSet Color Scheme 命令，我们可以看到有许多成套的配色方案，每个都定义了背景色、文字色、链接各个状态的颜色，你只需选择一种即可，见下图：2 2、CSSCSS 链接样式技巧。链接样式技巧。文字链12341234 接一般有四个状态，link、hover、active、

13、visited，我们通常都会对文字链接的各个状态定义不同的色彩和样式，但经常有朋友发现自己定义的样式在浏览时并未像设想的那样。主要原因是在样式表中对链接的定义顺序有一定的要求，正确的顺序是：A:linkA:visitedA:hover。对一般的朋友来说，其实很多时候只是想 Hover 状态有变化，有个小技巧就是不按上面的方法定义链接样式，而只需定义 a 和 a:hover 状态的样式即可，这样只有 hover 状态的样式与其他状态的不同。修改方法如下图；3 3、创建不同色彩的连接文字与下划线。、创建不同色彩的连接文字与下划线。普通的链接文字与链接下划线都是相同的色彩，其实我们也可以利用样式表中

14、的 Border 属性来替代普通链接的划线，由于 Border 有更多的控制参数和样式，因此只要将 Border 的色彩和文字的色彩定义的不同即可实现我们的目的。例如我们可以将文字定义为黑色，而在 Border 选项中定义下划线为红色，如下图；五、五、 提高效率技巧提高效率技巧Dreamweaver 还包含了许多可以极大提高工作效率的命令，包括库项目的建立、模板的运用、历史面板的功能及查找替换功能。这里我介绍几个小的技巧来演示这些命令的强大。1 1、清理、清理 WordWord 文件技巧。文件技巧。我们经常需要将一些 Word 文件转换为 HTML 文件，但这种转换的结果是生成的 HTML 文

15、件非常的大，里面包含了许多重复代码，综合利用 Dreamweaver 的几个功能可以方便的清理掉无用代码。首先打开Word 生成的本文关键字：但此时文件中的每个图片属性中还包含了类似 v:shapes=_x0000_i1025的属性，我们还需将这些属性清除。打开查找替换面板，按下图的设置设定替换规则，执行后即可清除所有图片的这些属性。如图；2 2、快速替换文件标题。、快速替换文件标题。前面我介绍了可以在站点窗口替换文件标题，但是只能一次替换一个文件的标题，我们可以尝试着利用上一步介绍的查找替换命令一次替换多个文件的标题。通常我们新建的文件标题都是 UntitledDocument，可以打开 E

16、ditFind And Replace 命令，进行如下设置，将当前站点所有文件标题为 Untitled Document 的都替换为我们自己的标题。3 3、设置默认文档格式。、设置默认文档格式。上面的方法虽然快捷，但是我们每次新建一个文件时，默认的文件标题仍旧是 Untitled Document。因为新建文档时，Dreamweaver 会调用一个默认的页面作为缺省格式，这个文件是Dreamweaver4ConfigurationTemplatesDefault.html，这样我们就可以将我们站点中统一的一些格式设置好，如背景色、字体大小、文件标题等，然后将它保存覆盖上面的 Default.h

17、tml 文件。在以后我们新建文件时，Dreamweaver 会自动套用我们设定好的格式，这可以提高很大的工作效率。六、六、 后期维护篇后期维护篇好了，经过上面这么多的介绍，我们已经掌握了一些网页制作的技巧，但是您作完的页面是否不再包含错误？您的链接是否都正确的链接？您的页面在各种浏览器中是否都表现良好？您的站点中是否还有许多不再需要的文件？很多类似的问题都还存在着，这些都是属于站点后期检测和维护。这里我们再介绍几个后期检测方面的技巧。1 1、链接检测。、链接检测。执行菜单 FileCheck Links 命令，Dreamweaver 会自动检测当前站点中的所有链接，并检测出无效的链接，如下图：

18、双击检测出的一个结果，会自动打开相应的页面并直接定位到错误的链接处，很方便我们修改链接错误。2 2、快速检测无用文件。、快速检测无用文件。执行菜单命令 SiteCheck Links Sitewide 可以打开链接文件检测功能，我们也可以利用这个功能检查站点中无用的文件，并删除。只要选择最上方下拉框中为 Orphaned Files，所有站点中无用的文件会列在下方，将它们全部选中，按 Delete 键即可删除。3 3、快速生成站点报告、快速生成站点报告(Reports)(Reports)。运行12341234 菜单命令 SiteReports 可以快速的根据我们的需要生成符合某种条件的站点报告或文件报告，例如可删除的空标签、未命名的文件标题、无 Alt 属性的图片等等。如下图：