Dreamweaver CS3简介

Dreamweaver CS3特点(形式灵活: 可视化编辑环境: 强大CSS功能: 站点管理功能完善: 集成性高: 媒体支持能力强: 扩展能力强: Dreamweaver CS3中的CSS布局规则)

DreamWeaver cs3的前身(软件信息 初识界面 启动面板 对象面板 属性面板 工具简介 网页制作 构建站点)

Dreamweaver快捷键

Dreamweaver CS3简介

Dreamweaver CS3是Adobe（奥多比）公司收购Macromedia公司后最新推出的Creative Suite 3 设计套装中用于网页设计与制作的组件。作为全球最流行，最优秀的所见即所得的网页编辑器，Dreamweaver可以轻而易举地制作出跨操作系统平台，跨浏览器的充满动感的网页，是目前制作Web页站点,Web页和Web应用程序开发的理想工具。Dreamweaver，Fireworks，Flash被称为网页制作的“三剑客”，这三款工具相辅相承，是制作网页的最佳拍档之一。与其他网页编辑工具相比，Dreamweaver的新版Dreamweaver CS3 主要功能和具体应用方法，Dreamweaver的主要特点有：

Dreamweaver CS3特点

形式灵活:

Dreamweaver将“设计”和“代码”编辑器集成在一起，既可以方便的进行源代码编辑，也可以使用鼠标方式添加和设置对象。

可视化编辑环境:

Dreamweaver是一种所见即所得的网页编辑器，既有效的减少了代码编写的工作量，也确保所设计文档的专业性和兼容性。

强大CSS功能:

CSS样式可以有效的控制网页对象的外观，美化网页界面，如文本字体，颜色，表单样式、图像风格等。Dreamweaver中有强大的CSS样式表编辑器，可以比较轻松的编辑CSS样式。

站点管理功能完善:

Dreamweaver提供了强大的站点管理功能，可以安全，系统的维护和管理各种规模的网站。

集成性高:

Dreamweaver与Fireworks，Flash，Shockwave具有良好的集成性，可以在这些Web创作工具之间自由的进行切换。

媒体支持能力强:

在Dreamweaver文档中，可以灵活加入JAVA，Flash，Shockwave，ActiveX以及其他媒体元素，也可以对各种多媒体元素进行处理。

扩展能力强:

Dreamweaver可以实现功能的扩展。利用Adobe公司免费提供的Dreamweaver插件，可以丰富Dreamweaver的媒体处理能力。

Dreamweaver CS3中的CSS布局规则

虽然我们一直建议大家不用Dreamweaver可视化编辑的方式进行CSS网页布局，但依然很多朋友在使用。建立您可以使用DW的代码编辑器进行CSS代码的编写。今天向大家介绍Dreamweaver CS3网页制作中的CSS布局规则 。

CSS文件的链接方式

·附加链接：外部CSS文件

·导入CSS：常用应用多个CSS文件时，将多个CSS导入一个CSS文件中

CSS规则定义有三种

·类比如“.RedText”、“.BlueText”和“.BigText”等等

·标签针对原有HTML标签做的重新CSS定义

·高级伪类、定义了ID的元素，以及综合性定义

CSS规则的应用

·只有“类”样式才需要应用，class=”xxxx”。任何元素都可以应用类。

·class与id的区别

·标签应用一般对于“body”标签一次性使用，对于诸如“li”、“td”等在页面中重复性比较大的标签不推荐定义。

·高级多运用，定义“#id li”比定义“li”要好得多。

CSS规则的执行顺序

·按照CSS代码的执行先后顺序

·如果有重复的规则，按照后执行的定义

·最终规则是多个定义规则的综合

重点：高级规则定义

·对于不同表格的文字样式定义。（不同表格使用不同ID、使用类样式定义）

·一页中的多种超级链接样式定义

·多个相同规则不同对象的CSS共同定义

·对于同一对象定义的多种CSS方式考虑哪种更科学（扩展性和代码精简性）

DreamWeaver cs3的前身

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

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

软件信息

Macromedia Dreamweaver 8.0 简体中文版

软件大小： 60.24 M

开 发 商： Adobe

软件类别： 国外软件 / 网页制作

软件语言： 简体中文

应用平台： Win9x/WinNT/Win2000/WinXP

软件性质： 共享(收费)软件

初识界面

安装后，它会自动在 Windows 的菜单中创建程序组。与 FrontPage有很大的不同，是的，它

把工具栏省去了，然后增加了几个浮动的工具栏。在 Dreamwaver3.0 中，它的工具栏全是浮动工具栏，可以将工具栏缩小，也可以关闭。在专业术语里面，他们叫“浮动面板”，利用浮动面板来控制对页面的编写，而不是利用烦琐的对话框，这是 Dreamwaver3.0 编辑网页中最值得人赞赏的特性。通过在浮动面板中进行属性设置，这样就直接可以在文档中看到结果，避免了中间过程，提高了工作效率。但对于熟悉了微软的应用程序的用户来说，开始的时候可能很不习惯。那好，就先来介绍它的三个最重要的浮动面板。

启动面板

启动面板主要用来快速启动响应的任务，或显示/隐藏相应的浮动面板。如果启动面板是竖的，那么，可以点击它又下角的一个小按钮，它就可以变成横向的了，这时，可能会发现，它的状态栏上也有这个面板上的所有选项。这也就为网页制作者提供了方便。可以直接从右下角点击相应的栏目进入想要进入的对话框。

对象面板

对象面板主要功能相当于插入菜单，主要是向网页中插入一些对象，如表格，框架，图象，层，Flash 动画等，它通过一个下拉菜单，把要插入的选项都包括在了其中，如图5。

每一个选项中都有若干个图标，只要在图表上单击一下，就可以插入想要插入的对象了。

属性面板

属性面板会随着编辑的内容而变化，这个图是文字属性面板，它里面包含了所要编辑的文字的所有内容，包括字体，颜色，大小，连接，缩进等，它的右下角还有一个向下的小三角箭头，单击它，会展开属性面板，它把一些不常用的属性也例出来。展开后，箭头会变成向上，单击它，又会使属性面板复原。属性面板很多，还有图象属性控制面板，层属性控制面板等对象的属性控制面板，用户只要选择要编辑的对象，它就会自动变化，挺方便的。用户对所有由启动面板弹出来的浮动面板在被打开后，可以重新组合，可以将经常用的面板单独地拉出来，只需要将鼠标放到想要拉的按钮上面，然后按住左键拖动就可以了，同理，把他们组合也是一样，用鼠标拖动后，放到上面就可以。

工具简介

第一个为插入图象的按钮，点击后，会弹出对话框，标准对话框，选择想要的图象就行了。

第二个（横向走）为插入轮替图象，它弹出的对话框会让选择两副图，以及鼠标点击时的连接等。作好后，用鼠标移动到图象上面，图象就会变成另外的一副图象，点击它，就会连接到另外一个页面上去。

第三个为表格，点击后，在弹出的对话框中，添入想要的行数和列数以及表格边距颜色等。

第四个为插入表格式数据，可以将以前作成的表格形状的数据表，直接插入到网页中来，而不用做任何的修改。

第五个按钮为插入水平线按钮，插入后，在属性浮动面板上改改它的大小等。

第六个为导航条，和第二个差不多，也可以换图象，不过，比起第二个要复杂的多，但绝对简单。

第七个为插入层，这好象是 Dreamweaver 特有的特性，其他的网页编辑软件中都没有这项功能。插入的层可以位于页面的任何位置。拖动就行。

第八个为插入换行符，有时网页中的文字想让它换行，按回车又太大，用换行符就是一种不错的选择。

第九个为插入 Email，将联系用的 Email 插入网页中，只要填上 Email 地址就行。

第十个为插入日期，很简单，没有什么好说的。

第十一个为插入 Flash 按钮，Flash 是现在网页中新兴的一种多媒体，有动画，有声音，但文件很小，极适合在网上传播。

第十二个为插入 Shockwave 按钮，做好了的 Shockwave 直接就可以插到这儿来。

第十三个为插入制作人，亲自制作的东西不想留名吗？点它就行。

第十四为插入 Firework 按钮，Firework是 Macromedia 公司的又一个产品，具有制作动画图象等动态功能。也是专门为网页制作设计的。

第十五为插入 Java语言编写的 Applet 小程序按钮。

第十六为插入 Active X 控件用的按钮。

第十七为插入插件用的按钮，这儿可以插入别的插件，上面未包括的。

第十八未插入服务器端接口联系的按钮。

网页制作

新建方法，就不用多说，一般软件中的新建方法在这儿同样使用，点击菜单File 中的 New 就行了，或者按 Ctrl+N 也行。

在这儿就可以插入文字，图象，层等，反正都随，是不是也是所见既所得。假如想看一下它的源文件，可以点击右下角的“〈〉”标记，也可以点击启动面板中的最后一个选项。就会弹出来一个小窗口如图：也可以打开外部编辑器来编辑它的源代码，比如说记事本。

只要点一下“External Editor”按钮，Wrap选项为换行，当不想横向拉动滚动条，把它选上，文字就自动会换行了，另外一个选项为行号选项，当选上它是，左边将会出项行号，这样特别便于查找，去掉后，就与普通的记事本没有什么区别了。编辑好后，关了它就可以了。

构建站点

所有设计好的网页，在放到网上去以前，都需要把它组建好，以便于上传，在本地机上就要组织好，而 DreamWeaver 也把这想到了，点击启动面板上的 Site 选项，就会弹出站点管理窗口，和文件浏览器差不多，在这儿，可以增加文件夹，删减文件，文件改名等等，只要是文件浏览器能干的事，它都能干。并且可以清楚地看到，哪个文件连接到了哪个文件，哪些文件是并列的关系，那些文件是父子关系。所做的第一步是先建立一个本地站点根目录。然后选择“New Site”打开对话框，在“Local Root Folder”中，输入本地站点根目录的位置。然后输入 HTTP Address，如果还没有该地址，随便输入一个也行，只要好记。最后，按“OK”键就可以了。以后从本地站点中删除文件，拷贝文件时，站点会自动刷新站点文件列表。其余的管理操作，与文件浏览器一样，也就不多说了。

Dreamweaver快捷键

新建(New)一个网页【Ctrl】+【N】

制作一个网页

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

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

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

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

另存为 【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】

分离（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】

发布站点【F12】