DreamWeaver cs3

Dreamweaver CS3是Adobe（奥多比）公司收购Macromedia公司后最新推出的Creative Suite 3 设计套装中用于网页设计与制作的组件。

软件介绍

作为全球最流行，最优秀的所见即所得的网页编辑器，Dreamweaver可以轻而易举地制作出跨操作系统平台，跨浏览器的充满动感的网页，是目前制作Web页站点,Web页和Web应用程序开发的理想工具。

Dreamweaver，Fireworks，Flash被称为网页制作的“三剑客”，这三款工具相辅相成，是制作网页的最佳拍档之一。

形式灵活

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方式考虑哪种更科学（扩展性和代码精简性）

软件前身

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

Dreamweaver、FLASH以及在DREAMWEAVER之后推出的针 对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)，足见市场的反响和MACROMEDIA公司对它们的自信。

说到DREAMWEAVER我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

初识界面

安装后，它会自动在 Windows 的菜单中创建程序组。与FrontPage有很大的不同，是的，它把工具栏省去了，然后增加了几个浮动的工具栏。在 Dreamwaver3.0 中，它的工具栏全是浮动工具栏，可以将工具栏缩小，也可以关闭。

在专业术语里面，他们叫“浮动面板”，利用浮动面板来控制对页面的编写，而不是利用烦琐的对话框，这是 Dreamwaver3.0 编辑网页中最值得人赞赏的特性。

通过在浮动面板中进行属性设置，这样就直接可以在文档中看到结果，避免了中间过程，提高了工作效率。但对于熟悉了微软的应用程序的用户来说，开始的时候可能很不习惯。那好，就先来介绍它的三个最重要的浮动面板。

启动面板

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

对象面板

对象面板主要功能相当于插入菜单，主要是向网页中插入一些对象，如表格，框架，图象，层，Flash 动画等，它通过一个下拉菜单，把要插入的选项都包括在了其中。每一个选项中都有若干个图标，只要在图表上单击一下，就可以插入想要插入的对象了。

属性面板

属性面板会随着编辑的内容而变化，这个图是文字属性面板，它里面包含了所要编辑的文字的所有内容，包括字体，颜色，大小，连接，缩进等，它的右下角还有一个向下的小三角箭头，单击它，会展开属性面板，它把一些不常用的属性也例出来。

展开后，箭头会变成向上，单击它，又会使属性面板复原。属性面板很多，还有图象属性控制面板，层属性控制面板等对象的属性控制面板，用户只要选择要编辑的对象，它就会自动变化，挺方便的。

用户对所有由启动面板弹出来的浮动面板在被打开后，可以重新组合，可以将经常用的面板单独地拉出来，只需要将鼠标放到想要拉的按钮上面，然后按住左键拖动就可以了，同理，把他们组合也是一样，用鼠标拖动后，放到上面就可以。

工具简介

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

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

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

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

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

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

第七个为插入层，这好象是 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”键就可以了。以后从本地站点中删除文件，拷贝文件时，站点会自动刷新站点文件列表。其余的管理操作，与文件浏览器一样，也就不多说了。