1. 用Dreamweaver 4.0轻松设计会自动弹性调整网页 　　首先需要保证是你页面内容采用了表格格式然后打开你要编辑页面按“Ctrl+F6”或者菜单“View→TableView→Layout?View”转换到布局视图这时可以看到单元格列宽在列宽数字旁边还有个小小下拉式箭头点击你要设定弹性显示列上方小箭头接着选择“将列设为弹性显示”(Make Column Autostretch)该列方框上方就会出现条波浪形线而不是刚才表示列宽数字完成后你页面就变成了个具有弹性页面了此外需要注意页面中不要有尺寸过大图片

　　2. 用Dreamweaver 4.0制作有闪动效果Flash按钮

　　选择菜单Insert→Interactive?Images→Flash?Button就可看到有哪些内嵌按钮在弹出对话框里你可以在“Style”列表里选择自己想要按钮样式在预览(Sample)窗口里可以看到这种样式效果如何选择好的后在“Button?Text”窗口输入按钮上面文字在“Font”窗口选择字体在“Size”窗口输入文字大小在“Link”窗口输入链接目标在“Target”窗口选择链接打开方式在“BgColor”选择按钮背景颜色在“Save?As”窗口输入保存文件名完成这些后按下“OK”按钮你就完成了个Flash按钮啦这个按钮还会自动插入你网页中然后在Dreamweaver编辑窗口选中你刚才制作按钮属性窗口就会显示出这个按钮属性单击上面“Play”按钮你就可直接在编辑窗口预览这个按钮闪动效果需要注意是Dreamweaver?4.0这个功能不支持中文字体

　　3. 在Dreamweaver 4.0中自定义键盘快捷键

　　选择菜单“Edit→Keyboard?Shortcuts”在对话框中会列出目前已经启用以及可以更改快捷键览表你可以在这里把快捷键改成自己习惯用如果要更改快捷键首先要选取你要更改命令接着选取目前快捷键这个快捷键就会出现在“Shortcuts”列表中然后在“Press Key”窗口输入你想要使用快捷键然后点击“Change”按钮更改即可完毕你还可以利用“+”、“-”按钮增加或者删除当前快捷键

　　4. 让DreamweaverMX4.0和Fireworks整合

　　如果你电脑里同时安装了Dreamweaver/Fireworks那么你就可以使用Dreamweaver?4.0提供整合Fireworks功能利用这个功能你可以把你GIF图片修改得更加动人轻松地实现动画效果在Dreamweaver编辑窗口选择好你要修改GIF图片然后在图片属性窗口单击“编辑(Edit)”按钮这时系统会自动启动Fireworks软件Software编辑这个图片仔细看你会发现Fireworks图片编辑窗口已出现Editing-From-Dreamweaver这样文字和图样也就是说这个图片是为Dreamweaver页面进行图片编辑现在我们在Fireworks里选择要编辑图片选择菜单“Mody→Animate→Animate?Selection”在弹出窗口里设置动画属性:选定动画帧数、动画移动方向、透明度等等然后把修改好文件导出即可这样在Dreamweaver编辑窗口会自动更新刚才修改好文件使你页面图片动起来

　　5. 巧用网站WebSite报告器

　　在Dreamweaver?4.0里提供了个网站WebSite报告器利用这个网站WebSite报告器可以帮助你在你网站WebSite众多文件中快速找到和修复单击菜单“Site→Reports”即可启动报告器选择你要检查项目然后单击“Run”按钮即可查出你网站WebSite上般问题你也可以自己编写报告器来查出网站WebSite上些特殊问题 (般问题通常是些文本丢失或文档未命名)

　　6. 快速恢复多次操作

　　在制作页面时我们可能需要不停地修改页面有时还要恢复过去操作我们可以使用“Edit”菜单里“Undo”命令可是这个命令每次只能恢复次如果我们需要恢复多次操作那就要不停地“Undo”实在太烦在Dreamweaver?4.0里提供了个History窗口可以让我们轻松地恢复多次操作在“Windows”菜单里选择“History”即可开启这个历史窗口在这个窗口把你每次操作都保留下来了利用窗口左边那个滑动指针就可以不停地恢复还可以撤销每次操作包括已经存盘而且还可以把这个历史纪录保存下来共享

　　7. 隐藏浮动面板

　　打开Dreamweaver给人第印象是堆浮动面板往往弄得你眼花缭乱虽然它可以拖开但毕竟占据着本来就很有限屏幕若把它关闭了等下用它时又要去打开其实你只要按下F4键所有浮动面板都不见再按F4他们又都重现于屏幕上了

　　8. 快速预览网页

　　初学Dreamweaver往往找不到预览菜单不得不另外启动IE浏览器来预览网页实际效果其实Dreamweaver预览菜单放到File菜单下了要预览正在编辑网页按F12键就可以了方便得很呢！而且还可设置在区别浏览器中预览在File菜单下Preview in Browser中选择Edit Browser List就可选择区别浏览器进行预览以测试你网页对区别浏览器适应性

　　9. 在HTML检示窗中显示行号和自动换行

　　虽然DreamweaverBehaviors是个javascript小巨集许多实现特殊网页效果javascript都不用动手编程但有时需要编写点小时显示行号显得尤为必要特别是在发生时往往都有是提示在“XX行有”若行行地去数行号不仅太累而且还容易数错在FrontPage中老是为数错行号而烦恼在Dreamweaver中可方便了只要在HTML源代码检视器窗口中选中“Line Numbers”(行号)复选框则会在源代码检视器窗口中对每条HTML语句自动显示行号目了然同样有时行代码较长只要在HTML源代码检视器窗口中选中“Warp”(自动换行)复选框则会激活窗口自动换行特性过长代码会自动从窗口边缘绕回

　　10. 如何获得颜色十 6进制代码

　　在设计网页时有时要用到16进制颜色代码以前经常为这事头痛在Dreamweaver中只要按属性面板上“bg”边上小方框右下角小 3角形在弹出颜色板上鼠标指到哪儿马上就能显示出相应颜色16进制代码真方便



11. 制作背景音乐

　　在Dreamweaver中插入背景音乐是非常容易实现这里介绍两种思路方法由大家选择



　　(1)在页面不显眼地方插入空层 并在层内放入个ActivX对象 双击该对象在打开对话框中选择个MIDI音乐文件然后在层对象属性面板中设定其可视性为“Hidden”保存变动后按F12预览网页听听是否有音乐声

　　(2)另种思路方法是利用Dreamweaver“Behaviors”行为编辑器 单击“＋”按钮选择其中“Play Sound”选项在弹出对话框中选择个音乐文件即可自己动手试试吧！

　　12. 让背景图不滚动

　　和FrontPage区别Dreamweaver中插入背景图是会随文字滚动有时候我们需要制作固定背景图如何办呢？先定义张背景图按“F10”打开HTML源文件找到定义背景图片语句例如background=″images/background.JPG″在它后面空格加上句bgproperties=″fixed″预览下是不是有点小小成就感

　　13. 定义大小不变文字

　　为什么别人网页上文字那么漂亮不管你如何按浏览器字体按钮上大小他们字体尺寸都不会发生变化其实他们使用了网页中“CSS”样式表技术在Dreamweaver中要实现这功能是非常简单首先按“F7”或者选择“窗口”菜单中“样式表”选项打开样式表编辑器在窗口中单击鼠标右键选择“新建”在弹出对话框中输入需要定义样式表名称按“确定”然后在列表中选择第项“类型”并给具体文字属性定义参数(般来说文字大小在800×600屏幕中选择10.5较为适宜)按“确定”后定义好样式表就出现了选择网页编辑窗中文本单击新样式表名可以看到选中文本发生变化预览下试试定义文本字体尺寸还会不会随浏览器选择字体大小而改变　　

　　14. 插入Flash动画

　　Macromedia公司Flash动画因其具有交互性、传送速度快等特点已逐渐成为网页制作项新武器如果你网页上能插入段Flash动画那么定会使你作品增色不少在Dreamweaver中插入Flash制作SWF格式动画十分容易单击对象工具栏上Flash徽标或单击“媒体”下“Flash”就可以打开选择SWF动画文件对话框了选好文件后可在其属性面板中设定播放参数即大功告成

　　15. 让表格给网页留白

　　在Dreamweaver新网页上输入文字时默认格式是顶天立地十分不美观要避免这缺憾其实很简单只要大家用好表格工具就行了具体做法是:在新页面上插入张居中对齐表格为了能够使表格方便控制最好设定奇数列并且数值不要太大这样在单元格内输入文字就被限制在个可以随意调整宽度区域内就不愁文字不听使唤了

　　16. 改变状态栏提示文字

　　般情况下当浏览器装入个页面时在其状态栏上显示是该页面地址名称十分呆板你有没有想过给浏览器状态栏增加点个性呢？如果有话那么请按照以下步骤定制自己喜欢文字吧！首先打开“Behaviors”行为编辑窗单击“＋”按钮选择“Set Text Set”下“Text Of Status Bar”选项然后在方框中输入自己文字例如“欢迎来到我主页”等单击“确定”即可

　　17. 整合文本代码编辑器

　　可视化网页编辑软件Software最大不便的处就是很难对源代码进行编辑更别说JavaScript了；不过Dreamweaver?将使你处理代码变得异常轻松这个内建文本代码编辑器主要新功能是:自动缩排(可以次选取多行进行缩排)?还可以进行符号检测如果在编写代码忘了个“”它将给出提示在工具表中下拉菜单会列出当前网页中所有自定义JavaScript可让你在网页原代码中自由跳转“原始码导航工具”可以让专业人士方便地处理JavaScript在文本代码编辑器中输入JavaScript代码系统将用区别颜色来显示

　　18. 在Dreamweaver中输入多个空格

　　我们平时输入空格是半角在Dreamweaver中只能输入个要想输入多个空格只要输入全角空格就可以了输入全角空格思路方法是:打开中文输入法按Sht+Space切换到全角状态这时你输入空格就是全角空格了

　　19. 解决DreamweaverBUG的

　　在Dreamweaver 3.0中行为面板(Behavior inspector)中“Events for”下拉菜单项无法打开这样来很多特技效果形同虚设根本没法制作其实这应该算Dreamweaver 3.0和中文Windows98不兼容个地方吧在英文Windows98中就没有这个问题而实际上这个菜单还是可以打开只不过是不能正确显示罢了在选中下拉菜单后我们可以用上下键来选择我们想要用浏览器

　　20. 用Dreamweaver 3.0模版制作网页设置行为(Behavior)

　　在使用模板(Template)做出 淼耐 页中不能新增行为这是新增行为需要在HTML文件Head部分的中插入JavaScript而使用了Template后HTML文件Head部分会被“封锁”住如果要在使用模板生成网页中应用行为你就需要事先在模板中定义好行为然后把它定义为模板可编辑区域随后你就可以在网页中更改这个行为了但这也只限于更改行为触发事件(events)和动作(actions)具体内容而不能更改动作类型

21. 给文字施加行为(Behavior)制作动态文字特效

在Dreamweaver中普通文字是以为单位不能作为对象即些非常有用JavaScript事件不能赋予文字文字不像图片和其他Control控件有具体“标记”所以文字和很多特效失的交臂为了给文字添加特效只有把文字做成超链接来处理这样文字就成为了对象可以施加行为了但是这样又带来了些不需要超链接属性比如下划线以及hover、visited等颜色变化 要想单纯为文字添加特效可以先把所想设置文字做成超链接然后再在它上面添加行为最后我们再把超链接转变为普通文字具体步骤如下:

　　选中你想编辑文字在链接目标框里随便填入几个选中这个链接单击窗口(Windows)→行为(Behaviors)弹出行为面板按下“+”添加你想要行为如play sound等打开Dreamweaver超文本编辑器找到这个链接把改为把改为最后把“href=...”删掉保存此页按F12预览下效果还不错吧！

　　22. 精确定位网页中各个元素位置



　　精确定位网页中各个元素位置有两种思路方法:使用表格或层使用表格是目前比较通用做法具体思路方法是:先在网页中建立个表格注意表格边框宽度应为０然后再把各个元素按照你要求放在各个表格单元的中仔细调整表格单元大小以及表格边框位置这时在表格单元中元素也会随的移动位置这样你就可以比较精确地定位网页中各个元素位置了使用表格优点是通用几乎各个版本浏览器可以致支持表格它缺点是使用起来比较麻烦需要仔细进行调整而且定位不十分精确层在网页中可以随意放置因此我们可以使用层来进行精确定位使用思路方法是在网页中插入个层然后把你想要定位元素放在层里接着我们就可以把层放到所想要任何位置了此外你还可以借助标尺和网格进行精确定位层只在最新浏览器中被支持所以为了兼容旧浏览器我们可以把层转变为表格思路方法是选择“修改(Mody)→版面布局模式(Layout Mode) →把层转化成表格(convert layers to table)”即可注意这时层不能有重叠我们可以在插入层的前选择“查看(view) →防止层交错(prevent layer overlaps)”来避免层重叠般来说转换后页面可能会有些变化还需要我们手工进行调整最后有点要注意在进行表格和层相互转换时最好不要在个页面中同时使用层和表格那样可能会把你页面弄得团糟

　　23. 改变浏览者鼠标形状

　　这是通过编辑样式表来实现具体思路方法是:选择“文字(text)→定制样式(CSS Style)→编辑样式表(Edit Style Sheet)”弹出编辑样式表窗口在其中选择“新建()”接着选择“建立个定制样式(Make custom style)”给这个样式表起名单击确定编辑该样式表选择扩展项(extension)在右边光标项(Cursor)中选择要出现指针效果即可

　　24. 去掉超链接文字的下下划线 　　

　　这效果是通过编辑样式表来实现具体思路方法是:“点击文字(text)→定制样式(CSS Style)→编辑样式表(Edit Style Sheet)”出现编辑样式表窗口选择“新建()”接着选择重定义HTML标记(Re HTML Tag)并在下面标记(Tag)选单中选择a编辑该样式表选择类型(type)在右边装饰(decoration)中选中无(none )即可

　　25. 制作个跟着页面走图像

　　这效果是通过JavaScript实现般来说完成这样个效果需要定编程能力但现在我们可以通过Dreamweaver插件轻易地实现插件安装思路方法:解压缩后拷贝到Dreamweaver下文件夹Configuration\\Objects内个新建文件夹里面即可重新启动Dreamweaver的后我们就可以在对象面板的中找到新安装插件了点击插件图标在弹出对话框中填入图像存放地址以及图像显示位置就可以了

26. 制作鼠标移上去后有变化动态菜单

　　所谓动态菜单其实是两幅图幅是鼠标不放在上面所显示另副是鼠标移上去所显示我们可以利用Dreamweaver提供行为的中swap image来实现这个效果首先插入副图片用鼠标单击它在属性面版连接栏内输入要连接网页然后打开行为面板添点击“+”号选择swap image接着出现个窗口要你选择鼠标移上去后所显示图片在此选择第 2副图片点击“确定”好了效果完成了多简单

　　27. 用Dreamweaver制作出个类似于下拉菜单效果

　　制作个类似于下拉菜单效果需要用到层隐藏和显示特性具体思路方法是:在页面中插入个单行多列表格作为你菜单条表格列数由菜单选项多少决定插入个层在层中输入第个下拉菜单内容并把这个层移动到表格第列下面同理对其他菜单项也作如上操作插入相应层把所有层显示属性(vis)改为隐藏(Hidden)

选择表格第个单元单击窗口(Windows)→行为(Behaviors)弹出行为面板按下“+”添加行为Show-Hide layers并将第个层(Layer1)属性改为显示(Show)其他层属性改为隐藏(Hide)接着在行为面板中编辑这个行为将它触发事件(events)改为onMouseover这样当鼠标移动到第个表格单元的上时第个下拉菜单就会显示出来接着再添加个行为Show-Hide layers并将所有层属性改为隐藏接着在行为面板中编辑这个行为将它触发事件(events)改为onMouseout这样当鼠标从第个表格单元的上移开时第个下拉菜单就会隐藏起来对其他菜单项重复上述操作但要注意设置“菜单 2”时第 2层显示其他层隐藏；设置“菜单 3”时第 3层显示其他层隐藏；依此类推下去好了做好了按F12看看吧

　　28. 轻松制作下载文件

　　用Dreamweaver其实很简单把要让浏览者下载文件名写上然后拖动鼠标选取这段文字在文本属性面板上“Link”属性输入框中写上文件名就行了注意:若被下载文件和该网页不在同目录下则文件名必须包含相对路径否则在下载时将提示找不到文件

　　29. 利用Dreamweaver书签制作跳转链接

　　利用Dreamweaver书签我们可以实现这个功能具体思路方法是:将光标移到你想跳转到地方选择菜单中“插入(Insert)→书签(Name Anchor)”输入书签名称接下来在你想链接链接目标框中填入“#书签名称”这样个页面内跳转链接就做好了在这里如果我们在书签名称前填入网页名称就会跳转到其他页面中书签处 比如说我们在Link处填入“index.htm#top”当浏览者点击这个链接时就会跳转到index页面中top书签处

　　30. 去掉图片和表格接触地方空隙

　　要使图片和表格接触地方不留空隙仅在表格属性面板上把外框线(border)设为0是不行还需要在表格属性面板上把单元格两个属性设为0(即cellspacing=\"0\"和cellpadding=\"0\")

　　31. 用TracingImage帮助定位网页中各元素位置

　　TracingImage是Dreamweaver个非常有效功能它允许用户在网页中将原来图案设计作为辅助背景这么来用户就可以非常方便地定位文字、图像、表格、层等网页元素在该页面中位置了TracingImage具体使用是这样:首先使用各种绘图软件Software作出个想象中网页排版格局图然后将此图保存为网络图像格式(包括g、jpg、jpeg和png)用Dreamweaver打开你所编辑网页在页面空白区单击右键选择“Page Properties...”然后在弹出对话框中Tracing Image项中输入刚才创建网页排版格局图所在位置再在Image Transparen中设定TracingImage透明度OK这样你就可以在当前网页中方便地定位各个网页元素位置了使用了TracingImage网页在用Dreamweaver编辑时不会再显示背景图案但当使用浏览器浏览时正好相反TracingImage不见了所见就是经过编辑网页(当然能够显示背景图案)



　　32. 有关“Convert Table widths to Pixels”和“Convert Table widths to Percent”

　　“Convert Table widths to Pixels”和“Convert Table widths to Percent”是Dreamweaver两个设置表格宽度重要功能当你打开个带有表格网页时在状态栏中点中〈table〉标签在随后显示出表格属性工具面板中就能看到这两个按钮了顾名思义“Convert Table widths to Pixels”就是将表格中所有单元宽度以像素表示而“Convert Table widths to Percent”是将表格中所有单元宽度以百分比表示仔细想想他们作用如果将个表格宽度全以像素表示但浏览窗口被放大时表格就不会随的放大单元格宽度而使用了“Convert Table widths to Percent”后能够使你在640×480分辨率下建立100%宽表格在更高分辨率下依旧保持100%宽度所以活用这两个功能可以使网页排版事半功倍

　　33. Style而不致使网页原代码混乱不堪

　　Style思路方法很多你可以单击右键选择Custon Style来Style规范标准也可以在状态栏中元素列表上单击右键来Style虽然区别思路方法达到效果看似样但实际上产生HTML代码则完全区别比如用Custon Style来Style规范标准在网页代码中就生成个〈span〉标签这样标签多就会使文件十分臃肿而且影响浏览器解析速度所以我建议尽量使用状态栏中元素列表来Style还有个小窍门技巧如果你要使用个Style定义某表格单元中所有文字只要在〈td〉标签中Style就行了而不需要在个个定义〈p〉标签注意这个思路方法不适用于〈table〉标签在〈table〉标签中用Style定义文字格式会被Netscape忽略

　　34. 使用定制窗口功能测试网页在区别分辨率下效果

　　谁都不希望看见自己辛辛苦苦做网页在区别分辨率下面目全非所以测试网页在区别分辨率下浏览效果是网页制作中很重要步我们可以在Dreamweaver操作界面中状态栏中间选择需要分辨率来调节窗口大小从而实现在区别分辨率下测试网页效果

　　35. 上传网站WebSite时无需使用第 3方FTP软件Software

　　Dreamweaver中融入了FTP功能而且为网站WebSite上传作了优化我们可以做个简单比较当你使用般FTP软件Software上传网站WebSite时是不是都按本地机上网站WebSite目录在服务器中新建目录然后再个个文件上传这种做法实在没错但由于本地机中网站WebSite目录中并不是每个文件都被网页(比如在建网页时留下备份文件)所以筛选文件繁重工作量只有用户自己知道但使用Dreamweaver上传网页就可以方便得多由于FTP功能在幕后为用户进行了许多必要工作所以用户只要将网站WebSite地图内相关HTML文件上传Dreamweaver就会自动将和此HTML文件相关所有其他本地文件并上传(如图像、ZIP文件、FLASH文件甚至是各种REAL文件)使用Dreamweaver内带FTP功能具体做法是:编辑已经定义过SITE在“Site Definition for...”面板中选择“Web Server Info”如果网页是通过FTP方式上传话将“Server Access”设为FTP在FTP Host中添入FTP服务器地址在Host Directory中添入远程登入目录在Login中添入用户名再填好Password经过了以上设定就可以在Site面板中按Connect按钮当Dreamweaver成功连入服务器后Connect按钮会自动变为Disconnect并且在旁亮起个小绿灯接着要做事就是在要上传HTML文件上单击右键选择“Put”即可当此HTML文件上传成功后状态条中将显示Put Depanding File介绍说明Dreamweaver正在上传这个HTML文件所其他本地文件不仅如此Dreamweaver还可以直接下载服务器上文件进行修改思路方法么只要使试试Put旁Get按钮就明白了

　　36. 实现用鼠标指向链接时出现下划线效果

　　有些网页链接原先没有下划线你把鼠标指向链接处才会出现下划线鼠标移掉下划线就又没有了这种效果其实可以用层叠样式表(CSS)来实现在Dreamweaver中编辑层叠样式表不用编写代码具体操作思路方法如下:

　　(1)在快速启动栏中点击层叠样式表按钮(就是把鼠标放上去显示“show css styles”那个按钮)在弹出CSS Styles面板上双击(none)；

　　(2)此时可看到弹出Edit Style Sheet 面板在该面板上按New按钮；

　　(3)再在弹出New Style 面板上点取Re HTML Tag(重新定义HTML标记)再在Tag中选择“a”(超级链接标记)标记后按OK按钮；(4)这时可看到弹出Style dehinition for a 对话框在此对话框中可以设置超级链接许多属性你可以按你意愿设置但我们这里主要是要去掉那讨厌下划线所以我们在decoration 属性中选择“none”这样就把下划线去掉了；然后我们再选择颜色为:#339966按ＯＫ按钮返回到Edit Style Sheet 面板；

　　(5)在Edit Style Sheet 面板上再按New按钮；

　　(6)在弹出New Style 面板上点取Use CSS Selector 再在该面板上selector选择框中选择“a:hover”(定义当鼠标在超级链接上时链接属性)按OK按钮；

　　(7)在弹出Style dehinition for a:hover 对话框中我们在decoration 属性中选择“underline”这样就把下划线又加上了；然后我们再选择颜色为:#FF3300按OK按钮返回到Edit Style Sheet 面板；

　　(8)在Edit Style Sheet 面板上再按Don按钮至此所有设置结束