DREAMWEAVER

王朝百科·作者佚名 2009-10-24

注：由于Macromedia2005年被Adobe并购，故此软件现已为Adobe旗下产品。目前最新版本为Dreamweaver CS4。

简介Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

Dreamweaver、FLASH以及在DREAMWEAVER之后推出的针对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)，足见市场的反响和MACROMEDIA公司对它们的自信。说到DREAMWEAVER我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点：

Dreamweaver CS4

Dreamweaver CS4的界面几乎是做了一次脱胎换骨的改进，从中看到了更多的设计元素，让DW也稍稍带着点苹果的味道。如果说VISTA和OFFICE 2007创造了软件界面设计的新纪元，那么Adobe相当于取代了苹果的设计地位而紧随MS之后。唯一的区别就是，MS老是抄人家苹果的（汗一个，微软的Fans别砸我），而Adobe却是实实在在的自己创造，设计界的老大地位实至名归……

布局按钮：这个按钮似乎和下方的代码、分割、设计按钮功能重复，目前还不明白DW的意图，唯一增加的新功能是垂直分割，让代码和设计界面以垂直对比的方式呈现。

精简设计：这是我最喜欢的一个布局，它提供了更多的可视区域，同时可以把右边的菜单收缩到只剩下图标。对于习惯了Adobe其他设计软件的朋友来说，这的确是非常贴心的设计。

应用程序开发增强：左上方是和数据相关的面板，包括数据库面板、数据绑定面板和行为面板；左下方则是文件与资源相关的面板，包括文件面板、相关资源面板、代码收集器等；右边则是设计相关面板，包括插入面板、CSS样式表面板、AP元素面板（用来为浮动层定位）。应该说这是一个万金油布局，几乎适用所有的开发者，同时，它也把大部分菜单展示在用户面前，其他的七种布局可以说只是在这个基础上进行一些排列和隐藏。

在下方的文档面板上，DW新增加了一个实时预览功能——Live View。它的作用是在DW窗口中实时查看代码的效果，包括Javascript特效！

优点1．最佳的制作效率

Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dremweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。

2．网站管理

使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。

3．无可比拟的控制能力

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。

Dreamweaver还集成了程序开发语言，对ASP、.NET、PHP、JS的基本语言和连接操作数据库，都是完全支持的。

缺点一、难以精确达到与浏览器完全一致的显示效果。也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来；

二、页面原始代码的难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求可能需要几十分钟，甚至更多时间。而相比之下，非所见则所得的网页编辑器，就不存在这个问题，因为所有的HTML代码都在您的监控下产生，但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。如何实现两者的完美结合，则既产生干净、准确的HTML代码，又具备则见则所得的高效率、直观性，一直是网页设计师梦想。在DREAMWEAVER之前，FRONTPAGE98一直被人们认为是最好的所见即所得网页编辑器，但是它同样继承了所见即所得的种种劣性。但是我说过这是在DREAMWEAVER之前，现在我无意说DREAMWEAVER已经实现网页设计师的梦想，但我觉得DREAMWEAVER正在努力向这个梦想一步步走去。

软件版本图片DreamWeaver3 及早期版本

DreamWeaver3.0及早期版本

DreamWeaver4

DreamWeaver4.0

DreamWeaverMX

DreamWeaverMX2004

DreamWeaver8

DreamWeaver8.0

Adobe DreamWeaverCS3

(MacroMedia被Adobe收购后推出的第一个版本)

DreamWeaverCS3

Dreamweaver快捷键新建(New)一个网页【Ctrl】+【N】

打开(Open)一个存在的网页【Ctrl】+【O】

在框架中打开(Open)...【Ctrl】+【Shift】+【O】

关闭(closedoWn)当前网页【Ctrl】+【W】

保存（Save）当前网页【Ctrl】+【S】

将当前网页换名存盘SaveAs...【Ctrl】+【Shift】+【S】

检查联接的有效性【Shift】+【F8】

撤消上一步操作【Ctrl】+【Z】/【Alt】+【BackSpace】

重复上一步操作【Ctrl】+【Y】/【Ctrl】+【Shift】+【Z】

剪切到剪贴板【Ctrl】+【X】/【Shift】+【Del】

拷贝（Copy）到剪贴板【Ctrl】+【C】/【Ctrl】+【Ins】

将剪贴板的内容粘贴到当前文件中【Ctrl】+【V】/【Shift】+【Ins】

拷贝（Copy）HTML代码【Ctrl】+【Shift】+【C】

粘贴HTML代码【Ctrl】+【Shift】+【V】

全部（All）选择【Ctrl】+【A】

选择上一级标签【Ctrl】+【Shift】+【<】

选择下一级标签【Ctrl】+【Shift】+【>】

查找（Find）和替换...【Ctrl】+【F】/【Ctrl】+【H】

查找下一个【F3】

缩进代码【Ctrl】+【]】

取消缩进代码【Ctrl】+【[】

平衡背带【Ctrl】+【】

设置断点（Breakpoint）【Ctrl】+【Alt】+【B】

调用外部编辑器（ExternalEditor【Ctrl】+【E】

参数设置（setUp）...【Ctrl】+【U】

在编辑窗口和代码窗口间进行切换【Ctrl】+【Tab】

刷新视窗显示【F5】

显示/隐藏头文件【Ctrl】+【Shift】+【W】

表格用标准显示方式【Ctrl】+【Shift】+【F6】

表格显示为版面【Ctrl】+【F6】

显示/隐藏不可见因素【Ctrl】+【Shift】+【I】

显示/隐藏标尺（Rulers）【Ctrl】+【Alt】+【R】

显示/隐藏网格【Ctrl】+【Alt】+【G】

捕捉到网格（Grid）【Ctrl】+【Alt】+【Shift】+【G】

播放（Play）外部插件【Ctrl】+【Alt】+【P】

停止播放外部插件【Ctrl】+【Alt】+【X】

播放所有的外部插件【Ctrl】+【Alt】+【Shift】+【P】

停止所有外部插件【Ctrl】+【Alt】+【Shift】+【X】

插入图像（Image）【Ctrl】+【Alt】+【I】

插入Flash动画【Ctrl】+【Alt】+【F】

插入Shockwave影片【Ctrl】+【Alt】+【D】

插入表格（Table）【Ctrl】+【Alt】+【T】

插入书签命名锚点（Anchor）【Ctrl】+【Alt】+【A】

插入回车符号【Shift】+【Enter】

插入非间断空格【Ctrl】+【Shift】+【Space】

修改页面属性...【Ctrl】+【J】

打开/关闭物体属性设置面板【Ctrl】+【Shift】+【J】

快速代码编辑【Ctrl】+【T】

新建链接（Link）...【Ctrl】+【L】

删除链接（Link）【Ctrl】+【Shift】+【L】

选择表格【Ctrl】+【A】

合并（Merge）单元格【Ctrl】+【Alt】+【M】

[1]分离（Split）单元格...【Ctrl】+【Alt】+【S】

插入一行【Ctrl】+【M】

插入一列【Ctrl】+【Shift】+【A】

删除一行【Ctrl】+【Shift】+【M】

删除一列【Ctrl】+【Shift】+【-】

增加单元格跨度【Ctrl】+【Shift】+【]】

减少单元格跨度【Ctrl】+【Shift】+【[】

左对齐选择物体【Ctrl】+【Shift】+【1】

右对齐选择物体【Ctrl】+【Shift】+【3】

顶对齐选择物体【Ctrl】+【Shift】+【4】

底对齐选择物体【Ctrl】+【Shift】+【6】

使宽度相同【Ctrl】+【Shift】+【7】

使高度相同【Ctrl】+【Shift】+【9】

将对象添加到库（Library）中【Ctrl】+【Shift】+【B】

在模板中新建一个可编辑区域...【Ctrl】+【Alt】+【V】

添加物体到时间线（Timeline）上【Ctrl】+【Alt】+【Shift】+【T】

在时间线上添加关键帧【F6】

删除时间线上的关键帧【Shift】+【F6】

文本缩进【Ctrl】+【Alt】+【]】

取消文本缩进【Ctrl】+【Alt】+【[】

设置段落格式为无【Ctrl】+【0】

设置段落格式为“Paragraph”【Ctrl】+【Shift】+【P】

设置段落格式为“标题1”【Ctrl】+【1】

设置段落格式为“标题2”【Ctrl】+【2】

设置段落格式为“标题3”【Ctrl】+【3】

设置段落格式为“标题4”【Ctrl】+【4】

设置段落格式为“标题5”【Ctrl】+【5】

设置段落格式为“标题6”【Ctrl】+【6】

文字左（Left）对齐【Ctrl】+【Alt】+【Shift】+【L】

文字居中（Center）对齐【Ctrl】+【Alt】+【Shift】+【C】

文字右（Right）对齐【Ctrl】+【Alt】+【Shift】+【R】

文本样式使用粗体（Bold）【Ctrl】+【B】

文本样式使用斜体（Italic）【Ctrl】+【I】

编辑（Edit）样式表...【Ctrl】+【Shift】+【E】

拼写检查【Shift】+【F7】

开始录制命令【Ctrl】+【Shift】+【X】

播放（Play）录制好的命令【Ctrl】+【P】

获取站【Ctrl】+【Shift】+【D】

检查站点【Ctrl】+【Alt】+【Shift】+【D】

放置（pUt）站点【Ctrl】+【Shift】+【U】

登记站点【Ctrl】+【Alt】+【Shift】+【U】

检查链接【Ctrl】+【F8】

显示/隐藏面板和工具箱【F4】

显示/隐藏上方工具栏（Toolbar）【Ctrl】+【Shift】+【T】

显示/隐藏对象面板【Ctrl】+【F2】

显示/隐藏属性面板【Ctrl】+【F3】

显示/隐藏站点窗口【F8】

打开站点映射图【Alt】+【F8】

显示/隐藏资源面板【F11】

显示/隐藏行为面板【Shift】+【F3】

显示/隐藏代码窗口【F10】

显示/隐藏CSS样式面板【Shift】+【F11】

显示/隐藏框架面板【Shift】+【F2】

显示/隐藏历史面板【Shift】+【F10】

显示/隐藏HTML样式面板【Ctrl】+【F11】

显示/隐藏图层面板【F2】

显示/隐藏参考面板【Ctrl】+【Shift】+【F1】

显示/隐藏时间线面板【Shift】+【F9】

最小化Dreamweaver窗口【Shift】+【F4】

恢复Dreamweaver窗口【Alt】+【Shift】+【F4】

“站点”菜单命令

新建（New）窗口【Ctrl】+【N】

新建（New）一个文件【Ctrl】+【Shift】+【N】

新建（New）一个文件夹【Ctrl】+【Alt】+【Shift】+【N】

打开（Open）网页...【Ctrl】+【O】

打开（Open）选定的文件【Ctrl】+【Alt】+【Shift】+【O】

关闭（closedoWn）站点窗口【Ctrl】+【W】

重命名文件【F2】

删除文件【Delete】

检查链接【Shift】+【F8】

退出Dreamweaver【Ctrl】+【Q】[1]

Dreamweaver20个“标准的”配色方案

<html>

<head>

<title>Colors</title>

body{

margin:20px;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size:12px;

}

.style1{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #96C2F1;

background-color: #EFF7FF

}

.style1 h5{

margin: 1px;

background-color: #B2D3F5;

height: 24px;

}

.style2{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #9BDF70;

background-color: #F0FBEB

}

.style2 h5{

margin: 1px;

background-color: #C2ECA7;

height: 24px;

}

.style3{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #BBE1F1;

background-color: #EEFAFF

}

.style4{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #CCEFF5;

background-color: #FAFCFD

}

.style5{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #FFCC00;

background-color: #FFFFF7

}

.style6{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #92B0DD;

background-color: #FFFFFf

}

.style6 h5{

margin: 1px;

background-color: #E2EAF8;

height: 24px;

}

.style7{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #A9C9E2;

background-color: #E8F5FE

}

.style8{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #E3E197;

background-color: #FFFFDD

}

.style9{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #ADCD3C;

background-color: #F2FDDB

}

.style10{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #F8B3D0;

background-color: #FFF5FA

}

.style11{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #D3D3D3;

background-color: #F7F7F7

}

.style12{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #BFD1EB;

background-color: #F3FAFF

}

.style13{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #FFDD99;

background-color: #FFF9ED

}

.style14{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #CACAFF;

background-color: #F7F7FF

}

.style15{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #A5B6C8;

background-color: #EEF3F7

}

.style16{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #CEE3E9;

background-color: #F1F7F9

}

.style17{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #CAE3FF;

background-color: #F4F9FF

}

.style18{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #C9D9EE;

background-color: #ECF8FF

}

.style19{

width: 800px;

height: 100px;

margin: 0px auto;

margin-bottom:20px;

border:1px solid #5C9CC0;

background-color: #F2FAFF

}

h5{color:#CCCCCC;margin-left:680px}

a{color:#CCCCCC;text-decoration:none}

a:hover{color:#666666;text-decoration:underline}

</style>

<body>

<div class="style1"><h5>Title</h5></div>

<div class="style2"><h5>Title</h5></div>

<div class="style6"><h5>Title</h5></div>

</body>

</html>