当前页:网页制作>>>Dreamweaver使用技巧集锦
Dreamweaver使用技巧集锦
责任编辑:黄舒奇  发表时间:2006年4月20日  最后修改时间2016-05-23 
1、在Dreamweaver 3中输入空格 
1)可以用中文的全角状态下按空格键,强烈推荐
2)插入一个透明的图
3)用pre标签里写你的内容
4)object 里的invisiables 里的 none-breaking space 点一下
5)instert 菜单下的 none-breaking space
6)CTRL+SHIFT+空格键加入
7)CTRL+T 去掉尖括号,键入  
(注后面四个是的实质都是一样的)
2、实现浏览器状态栏中的滚动字幕
按下F8键,在Behaviors窗口中选取Behaviors,单击“+”号,再选取“Set Text→Set Text of Status Bar”,最后在弹出的对话框中写上你想在状态栏出现的文字就可以了。
3、制作鼠标移动上去会有变化的动态链接图像
首先准备两幅图,第一幅是原始图像,另一幅是鼠标移动上去后的图像。用鼠标单击第一幅图,在属性面板中的链接栏中填上要链接的文件,然后按F8,在Behaviors窗口中点击“+”号,选择“Swap Image”,在出现的窗口中选择第二幅图,点击确定,就成功了。
4、将 Dreamweaver 集成到 IE 浏览器
Dreamweaver 安装程序会在上下文选单增加一个“Edit with Dreamweaver”命令。还可以修改 Windows 的注册表,就象 MS Word 、Frontpage 和 Notepad 一样,通过 IE 工具栏的编辑按钮来调用 Dreamweaver 打开当前网页。
将下面文本的最后一行要改为你自己的 Dreamweaver 安装路径,把它们保存为一个 *.reg 文件,双击它将信息添加到注册表即可。
REGEDIT4
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver]
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell]
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit]
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit\command]
@="\"D:\\Macromedia\\Dreamweaver 3\\dreamweaver.exe\" \"%1\""

  如果要设置为 IE 缺省的编辑器,打开 IE 的“Internet 选项”,在程序标签指定。
5、如何避免点击空链接的对象时会跳到页面的顶端的现象 
浏览器以为链接到同一页,可它又找不到定义的书签(anchor),于是停留在页面的顶端。用“javascript:void(null)”替换空链接的“#”,解决这个问题,或者加多几个#号。
6、如何解决使用 CSS 、层时,在不同浏览器的效果不一样,有时甚至出现错位的现象?
不要混合使用层和表格排版(如果是父子关系,如层中表格,不在此原则范围内)
内联式的 CSS 在 Netscape Navigator 中经常会出现问题,使用链式或内嵌式;
有时需要在空层插入表格或者透明图片,以保证在 Netscape Navigator 里的效果。对于只有几个像素宽度或高度的层,改用图片来实现;
避免使用 W3C 组织不推荐的排版属性,用 CSS 代替。
7、如何在网页中加入注释
代码:< !-- 这是注释 -->
8、如何在网页中加入EMAIL链接并显示预定的主题
代码:< a href=“mailto:yourmail@xxx.xxx?Subject=你好”>Send Mail< /a>
9、如何制作电子邮件表单
在<FORM>中输入Action=“youremail@XXX.XXX”,提交采用POST方法。
10、如何避免别人将你的网页放入他的框架(FRAME)中
在源代码中的<HEAD>…< /HEAD>之间加入如下代码:
<script language=“javascript”><!--
if (self!=top){top.location=self.location;}
-->< /script>
11、如何自动加入最后修改日期
在源代码中的<BODY>…< /BODY>之间加入如下代码:
< Script Language=“JavaScript”><!--
document.write(“Last Updated:”+document.lastModified);
-->< /Script>
12、如何让背景图象不滚动
代码:<BODY Background=“bg.gif”Bgproperties=“fixed”>
在Dreamweaver中用「Text」-「Custom Style」-「Edit Style Sheet」-「New」-Redefine HTML Tag中选择Body,然后在Background中的Attachment里选fixed
13、如何将网页定时关闭 
在源代码中的<BODY>后面加入如下代码:
< script LANGUAGE=“JavaScript”> <!--
setTimeout('window.close();', 60); --> < /script>
在代码中的60表示1分钟,它是以毫秒为单位的。
14、如何定义网页的关键字(KeyWords) 
格式如下:
< meta name=“keywords”content=“dreamweaver,flash,fireworks”>
content中的即为关键字,用逗号隔开,在Dreamweaver中用「Insert」-「Head」-KeyWords命令
15、如何设置命令来关闭打开的窗口
在源代码中加入如下代码:
< a href=“/”onclick=“javascript:window.close(); return false;”>关闭窗口< /a>
16、如何在网页中加入书签,在页面内任意跳转 
在源代码中需要插入书签的地方输入,在调用的地方输入Top,其中的top是你设定的书签名字。在Dreamweaver中用菜单的「Insert」-「Name Anchor」命令插入书签,调用时,在Link中输入#top,top为书签名。
     如果要在多个页面之间任意跳转,方法与上面类似,不过做链接时要在书签名前加上网页文件名,如:other.htm#top,这样一来就会跳转到other.htm页面中的top书签处。
17、如何为不支持框架的浏览器指定内容
在源代码中加入下面代码:
< BODY><noframes>本网页有框架结构,请下载新的浏览器观看< /noframes></ BODY>
18、如何使表格(TABLE)没有边框线
将表格的边框属性:border=“0”
19、如何隐藏状态栏里出现的LINK信息
请使用如下代码:
< a href="http://www.tastelife.net" onMouseOver="window.status='none';return true">品味人生< /a>
20、如何定时载入另一个网页内容 在源代码中的<HEAD>…< /HEAD> 加入如下代码:
< meta http-equiv=“refresh”content=“40;URL=http://www.tastelife.net ”>
40秒后将自动载入http://www.tastelife.net所在的网页
21、如何为网页设置背景音乐
代码:< EMBED src=“music.mid”autostart=“true”loop=“2”width=“80”height=“30”>
src:音乐文件的路径及文件名;
autostart:true为音乐文件上传完后自动开始播放,默认为false(否)
loop:true为无限次重播,false为不重播,某一具体值(整数)为重播多少次
volume:取值范围为“0-100”,设置音量,默认为系统本身的音量
starttime:“分:秒”,设置歌曲开始播放的时间,如,starttime=“00:10”,从第10开始播放
endtime: “分:秒”,设置歌曲结束播放的时间
width:控制面板的宽
height:控制面板的高
controls:控制面板的外观
controls=“console/smallconsole/playbutton/pausebutton/stopbutton/volumelever”

·console:正常大小的面板
·smallconsole:较小的面板
·playbutton:显示播放按钮
·pausebutton:显示暂停按钮
·stopbutton:显示停止按钮
·volumelever:显示音量调节按钮
hidden:为true时可以隐藏面板
22、如何去掉链接的下划线
在源代码中的<HEAD>…</HEAD>之间输入如下代码:
<style type=“text/css”> <!--
a { text-decoration: none}
--> < /style>
在Dreamweaver中用「Text」-「Custom Style」-「Edit Style Sheet」-「New」-Redefine HTML Tag中选择a,然后在decoration中选中none
23、timeline中的layer走曲线
要使得timeline中的layer走曲线,得先让他走出直线来,然后在最后一frame和第一frame中间的任何一frame上点右键,可以看到有个 add keyframe ,点一下,然后把你的layer移动到你要的位置,DW会自动生成曲线
24、如何隐藏不必要的标签
当用户在网页中插入了不可见的元素时,Dreamweaver会自动在页面上添加一个与之相应的元素标签,以便于用户选择不可见元素。但这并不全是件好事,比如你在一个有很多层的页面中的第一行便插入一个表格,就会发现由于首行排列了太多的层元素标签而使得表格自动退到了页面的第二行,虽然在浏览时并不影响效果,但这确确实实会阻碍你的工作。所以当你觉得某个元素标签碍手碍脚时,就索性将之屏蔽掉。方法是按“Ctrl+U”打开“Preferences”面板,在“Category”中选中“Invisibel Elements”,在面板的右边将会出现所有的元素标签。只要将讨你厌的元素标签前的勾去掉,以后它就保证不会再出现了。
25、如何调用“Style”而不致使网页原代码混乱不堪 
调用“Style”的方法很多,你可以单击右键选择“Custon Style”来调用“Style”规范,也可以在状态栏中的元素列表上单击右键来调用“Style”。虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同。比如用“CustonStyle”来调用“Style”规范,在网页代码中就生成一个〈span〉标签,这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度,所以我建议尽量使用状态栏中的元素列表来调用“Style”。还有一个小技巧,如果你要使用一个“Style”定义某表格单元中的所有文字,只要在〈td〉标签中调用“Style”就行了,而不需要在一个个定义〈p〉标签。注意这个方法不使用与〈table〉标签,因为在〈table〉标签中用“Style”定义的文字格式会被Netscape忽略。
26、如何改变浏览者的鼠标形状
这是通过编辑样式表来实现的。具体方法是:选择“文字(text)->定制样式(CSS Style)->编辑样式表(Edit Style Sheet)”,弹出编辑样式表窗口,在其中选择“新建(new)”。接着选择“建立一个定制的样式(Make custom style),给这个样式表起名,单击确定。编辑该样式表,选择扩展项(extension),在右边的光标项(Cursor)中选择要出现的指针效果即可。
27、如何安排布置Dreamweaver各种各样的工具面板
一个800X600分辩率的屏幕对于Dreamweaver来说确实小了些,不过即便是1024X768,也放不下所有的面板。
关闭那些在编辑中暂时用不到的面板,把常用的面板放在一起,节省屏幕空间;
除非现在要用,否则关闭“HTML Source Inspector”,它除开占用屏幕空间,还占用相当的系统资源;
按 F4 隐藏所有打开的面板,一览文档的全貌,再按一下,显示面板;
在“Windows”选单有个“Arrange Floating Palettes”命令,使用这个命令将所有打开的面板放在窗口四周,并互不重叠。
多用快捷键并熟练掌握是很好的提高工作效率的方法。
当添加不可见的对象时,Dreamweaver会在文档窗口的页面顶部加上相应的图标,如果图标太多,可能妨碍编辑。可以按“Ctrl+Shift+I”(主选单View|Invisible Elements)来隐藏和显示它们。也可以设定不出现这些图标,不过不建议这样作,因为它们能帮助选择对象,便于编辑。
28、改变状态栏提示文字  
一般情况下,当浏览器装入一个页面时,在其状态栏上显示的是该页面的地址名称,十分呆板。你有没有想过给浏览器的状态栏增加一点个性呢?如果有的话,那么请按照以下的步骤,定制自己喜欢的文字吧!首先打开“Behaviors”行为编辑窗,单击“+”按钮,选择“Set Text Set”下的“Text Of Status Bar”选项,然后在方框中输入自己的文字,例如“欢迎来到我的主页”等,单击[确定]即可。
29、在DW中设置水平标尺的颜色
由于在NC中不支持<hr>的COLOR属性,所以在DW中没有此项设置,你只能在HTML中加入代码: color=“颜色代码”
30、如何精确的定位网页中各个元素的位置
精确定位网页中各个元素的位置有两种方法:使用表格或层。  使用表格是目前比较通用的做法,具体方法是:先在网页中建立一个表格,注意表格的边框宽度应为0。然后再把各个元素按照你的要求放在各个表格单元之中。仔细调整表格单元的大小以及表格边框的位置,这时在表格单元中的元素也会随之移动位置。这样你就可以比较精确的定位网页中各个元素的位置了。使用表格的优点是通用,几乎各个版本的浏览器可以致支持表格。它的缺点是使用起来比较麻烦,需要仔细进行调整,而且定位不十分精确。

层在网页中可以随意放置,因此我们可以使用层来进行精确定位。使用方法是,在网页中插入一个层,然后把你想要定位的元素放在层里,接着我们就可以把层放到所想要任何位置了。此外,你还可以借助标尺和网格进行精确的定位。   因为层只在最新的浏览器中被支持,所以为了兼容旧的浏览器,我们可以把层转变为表格。方法是:选择“修改(Modify)->版面布局模式(Layout Mode)->把层转化成表格(convert layers to table)”即可。注意这时的层不能有重叠,我们可以在插入层之前选择“查看(view)->防止层交错(prevent layer overlaps)”来避免层的重叠。一般来说转换后的页面可能会有一些变化,还需要我们手工进行调整。

最后有一点要注意,在进行表格和层的相互转换时,最好不要在一个页面中同时使用层与表格,那样可能会把你的页面弄的一团糟。
31、如何制作一个类似于下拉菜单的效果 
制作一个类似于下拉菜单的效果需要用到层的隐藏和显示特性。具体的方法是:  在页面中插入一个单行多列的表格,作为你的菜单条。表格的列数由菜单选项的多少决定。插入一个层,在层中输入第一个下拉菜单的内容,并把这个层移动到表格第一列的下面。 同理,对其它的菜单项也作如上的操作,插入相应的层。把所有层的显示属性(vis)改为隐藏(Hidden)。选择表格的第一个单元,单击窗口(Windows)->行为(Behaviors),弹出行为面板。按下“+”添加行为Show-Hide layers,并将第一个层(Layer1)属性改为显示(Show),其它层的属性改为隐藏(Hide)。接着在行为面板中编辑这个行为,将它的触发事件(events)改为onMouseover。这样,当鼠标移动到第一个表格单元之上时,第一个下拉菜单就会显示出来。接着再添加一个行为Show-Hide layers,并将所有层的属性改为隐藏。接着在行为面板中编辑这个行为,将它的触发事件(events)改为onMouseout。这样当鼠标从第一个表格单元之上移开时,第一个下拉菜单就会隐藏起来。

对其它的菜单项重复e、f操作。但要注意设置“菜单二”时,第二层显示,其它层隐藏;设置“菜单三”时,第三层显示,其它层隐藏;依此类推下去。
32、用TracingImage帮助定位网页中各元素的位置
TracingImage是Dreamweaver2新增的一个非常有效的功能,它允许用 户在网页中将原来的图案设计搞作为辅助的背景。这么一来,拥护就可以 非常方便地定位文字、图象、表格、层等网页元素在该页面中的位置了。TracingImage的具体使用是这样的:首先使用各种绘图软件作出一个想象中网页排版格局图,然后将此图保存为网络图象格式(包括gif,jpg,jpeg和png)。用Dreamweaver打开你所编辑的网页,在页面的空白区单击右键,选择“Page Properties...”,然后在弹出的对话框中的Tracing Image项中输入刚才创建的网页排版格局图所在位置。再在Image Transparen中设定TracingImage的透明度,OK。这样你就可以在当前网页中方便地定位各个网页元素的位置了。使用了TracingImage的网页在用Dreamweaver编辑时不会再显示背景图案,但当使用浏览器浏览时正好相反TracingImage不见了,所见的就是经过编辑的网页(当然能够 显示背景图案)。
33、关于“Convert Table widths to Pixels”和“Convert Table widths to Percent”
 “Convert Table widths to Pixels”和“Convert Table widths to Percent”是Dreamweaver2新增的两个设置表格宽度的重要功能。当你打开一个带有表格的网页时,在状态栏中点中〈table〉标签,在随后显示出的表格属性 工具面板中就能看到这两个按钮了。顾名思义“Convert Table widths to Pixels”就是将表格中所有单元的宽度以象素表示,而“Convert Table widths to Percent”是将表格中所有单元的宽度以百分比表示。仔细想想他们的 作用,如果将一个表格的宽度全以象素表示,但浏览窗口被放大时,表格 就不会随之放大单元格的宽度。而使用了“Convert Table widths to Percent”后能够使你在640*480分辨率下建立100%宽的表格在更高的分辨率下依旧保 持100%的宽度。所以活用这两个功能可以是网页排版事半功倍。