Google
      
发新话题
打印

dw使用技巧集锦

dw使用技巧集锦

使用技巧集锦
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();', 60000);
--> < /script>
  在代码中的60000表示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.pyinfo.ha.cn" onMouseOver="window.status='none';return true">梦想天空< /a>

20、如何定时载入另一个网页内容

  在源代码中的<HEAD>…< /HEAD> 加入如下代码:
< meta http-equiv=“refresh”content=“40;URL=http://www.goEway.com ”>
40秒后将自动载入http://www.goEway.com所在的网页
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%的宽度。所以活用这两个功能可以是网页排版事半功倍
 用表格设置细线框:
  在网页中,线框作为区分开不同的内容板块的线条经常会出现,但如果将表格边框宽度“Border”设置为“1”,那么必然会落得个“不会做网页”的评论,因为稍有美感的人都不会把表框设置得如此粗陋的,所以你要学会利用表格制作细线框。

  Step 1 插入一个一行一列的表格,将表格的“Border”、“Cellpad”设置为“0”,“Cellspace”设置为“1”。

  Step 2 设置表格的背景颜色“Bg”,如黑色“#000000”,注意这将是你要的线框颜色。

  Step 3 将单元格的内背景“Bg”设置为“#FFFFFF”,这样你将看到一个黑色线框,当然你也可以设置为其他的颜色,两种颜色由你去把握了。

前面我推出了“巧用Dreamweaver的线条美”的这个专题,只要说了一下如何处理Dreamweaver使用框架时的线条,结果收到了很多意见,有网友针对那篇文章,提出了另外一些新的问题,如“垂直的直线怎么做”;又或者对文中的某些设置方法提出异议,并列举另外的做法。有人说,网页制作的几道工序一点不难,难的是一些细小的环节,这些方法往往是在教程上学不到,所以能够跟大家交流的确是一件幸事。因此归结大家提出的疑问,继续整理了这个专题,权当一个书面交流,如果大家还有什么疑问,可以继续讨论。Dreamweaver的世界是一个神奇的梦网,变化多端是它的一个特征,因此同一个设计效果可能有多种方法完成,关键是我们熟悉和方便操作就可以了,并没有对错之分,效果出来了,我们的目的也就达到了。
  在Dreamweaver 4 中垂直插入有颜色的直线
  在网页设计中常常需要插入垂直直线作为分割线条或美化版面,但是在dreameaver4 的Object窗口中是没有直接加入垂直直线项的。会很难吗?一定要用框架来设置吗?其实你只要明白跨栏的水平直线是怎样设置的,那么要作一条垂直直线出来一点也不难,长度多少、粗细程度以及颜色都能随意把握。

  Step 1 在需要编辑垂直直线的地方插入一个一行一列的表格,将表格的“cellpad”、“cellspace”以及“Border”同时设置为“0”,不用说也是0了。

  Step 2 为了方便你的编辑,先不用急把框架的宽度设置得太小,否则不好选取。选上框架,将“Bg”设置为你需要的线条颜色,表格的高度“H”设置为你需要的高度,要想延伸好一点,可以设置为100%,直线会随你输入内容的多少变化。搞好以上工作再将框架宽度设置为“1”。

  Step 3 准备工作完成了,剩下最重要的一项就是修改源代码。点击编辑页面左上角的“源代码和设计视窗Code and Design View”查看源代码,将<td>……</td>中的“ ”删去,因为这个没用的代码是占用一定空间的。保存再重新回到页面你就可以看到一条1px的细线,至于你想直线粗一点或者变换颜色你重新设置框架的相应参数就是了。


如何改变插入的水平线颜色
  有朋友说我就喜欢使用dreamweaver中的Insert Horizontal Rule (插入水平线)功能,但又想对插入的水平线动动手术,怎么办呢?默认情况下这根线是灰白色的立体效果,去掉阴影,就是灰色的。如果在灰色底图或黑色背景下,这些线条就得自废武功了。所以要改变它的颜色,当然也可以改变他的粗细。
  Step 1 在需要插入横线的适当位置插入一根Horizontal Rule,点击这根线就能看到Property inspector(属性面板),


  Step 2 在这个属性面板中,把shading(阴影)前的勾去掉。在宽度“W”中输入像素值(pixels)或者百分比%,可以自由设置这条线的长度。而高度“H”同样可以输入不同数值改变水平线的粗细,如输入“1”可以使插入的线条变成最细的一个像素,也是一般人最喜欢用的Style。如果想要的是粗线,可以在H中输入更大的值。

  Step 3 细线就插好了,但你会发现线条还是灰色的,在属性面板上是没有设置颜色的选项的。要改变颜色?用css就可以了,而且不会太难,跟着下面的步骤做一次就会了。按Shift+F11打开CSS style窗口,或者选择Text菜单下的CSS style | New Style ,在点击CSS style窗口右上角的三角会出现一个下拉菜单,选择New Style (新样式)进入(选Text的可以直接在菜单上选)。

  Step 4 在“New Style (新样式)”对话框中,在name(名称)栏中输入一个名称,如“color1”,并在Define(定义)单选框中选择“This document only(只用于此页)”,然后点ok。随后会弹出“Style definition for .colorline”窗口。


  Step 5 在type项目中,选择想要的颜色,比如说蓝色,然后点ok,再按done,于是一个新的样式就建好了。选定网页编辑窗口中的细线,选择CSS style窗口中的“color1”的样式(就是刚才你建立的那个新样式),这时在网页编辑窗口中线条的颜色依然还是灰色的,但按F12预览,在浏览器中就可以看到所插入细线的颜色已经变成了你喜欢的蓝色。


发新话题
查看积分策略说明

快速回复主题

选项

[完成后可按 Ctrl+Enter 发布]  预览帖子  恢复数据  清空内容