Dreamweaver 4教程使用Dreamweaver 4开始工作Word格式.docx

1、对于网页设计的新手，也可以快速提高他们的工作效率，因为使用Dreamweaver 4，可以轻松地可视化编辑加入网页的相关对象。Dreamweaver 4提供了友好的用户界面和强大功能的快捷工具，支持多种浏览器，可建立跨平台的网页，同时还可以制作不需要编写任何代码的动态网页。它具有强大的网页排版及制作功能，如可通过层叠样式表格式化文本、通过层定位网页元素、通过时间链制作动画，以及使用库项目实现代码的重复使用等。1.1 Dreamweaver 4新增功能简介Dreamweaver是Macromedia公司推出的主页编辑工具。它是一个所见即所得网页编辑器，支持最新的DHTML和CSS标准。采用了多种

2、先进技术，能够快速高效地创建极具表现力和动感效果的网页，使网页创作过程变得非常简单。值得称道的是，Dreamweaver不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制，可以说，它是一个集网页创作和站点管理两大利器于一身的创作工具。在学习使用Dreamweaver 4之前，我们先了解Dreamweaver 4的一些新增功能。1独特的往返HTML功能这个功能可以同步访问设计视图（Design View）和HTML源代码，可以打开用其他编辑器编辑的文档，但它不会改写手工输入的HTML标记或第三方标记。这就使得Dreamweaver 4自动生成的代码与手工输入的代码融为一体。2整合文本编辑

3、器现在Dreamweaver 4增加了以代码为中心的新特性。手工编写代码就如设计视图环境一样方便，可以自动缩排、标点平衡、选择多行后一次缩进。可以在使用代码视图工具栏（Code View Toolbar）的下拉列表定义的JavaScript函数之间轻松导航。对于使用JavaScript编程的专业人员来说，这种代码导航无疑是一种高效的导航帮助。输入代码时Dreamweaver 4自动对HTML和JavaScript 代码使用不同的颜色显示。3把主窗口分割为代码视图和设计试图可以把Dreamweaver的主窗口分割为代码视图和设计试图。能够查看整页代码而无需离开文档窗口。这样，就可以在同一个窗口同

4、时查看代码视图和设计视图，同时编辑多个文档的代码。4JavaScript调试器使用新增的JavaScript调试器，可以直接在浏览器中调试客户端JavaScript脚本，观察JavaScript的执行，就像它在Netscape或IE浏览器中一样，因而能够更好地了解每种浏览器是怎样执行JavaScript的。可以设置断点调试代码，然后在逐步执行代码的过程中观察变量的变化，及时发现编程错误。5编辑非HTML文档可以把Dreamweaver 4当作文本编辑器编辑非HTML文档，直接在代码视图（Code View）中编辑JavaScript，XML和其他文本文件。6自定义标记数据库使用自定义标记数据库

5、可随时定义新的标记或编辑默认标记。Dreamweaver 4的可配置自定义数据库让你能够定制翻译引擎来支持属性代码。7超强页面排版功能网页对象的排版一般有表格和图层两种方式，这两种方式各有优缺点，Dreamweaver 4的Layout View技术可以轻松地把两者的优点结合起来，用此功能编写的网页，任何浏览器都兼容，解决了后顾之忧。Dreamweaver 4中提供了两种可视化编辑方式，一种是大家再也熟悉不过的老版面，另一种是全新的版面排版方式。它提出了一个全新页面排版概念，它可以使你轻松地拖曳出复杂的透明表格，而且绝无冗余代码。8Macromedia Flash 文字和按钮Flash动画向来

6、让人津津乐道的是文件小、效果棒，而且可以随着视窗大小做不失真的缩放，这些都要归功于使用矢量图的优点。使用Dreamweaver 4的这个新功能，就算你不会使用Flash也可以在Dreamweaver 4中直接插入Flash 动画格式的文字或按钮，只要简简单单输入文字就可以了，比起传统的点阵图文字或按钮，文件更小、效果更漂亮。不过很可惜的是，目前Flash文字和按钮还不支持中文。9双向绘图编辑大家都知道在Fireworks中分割图形保存后，可以利用Dreamweaver 4的Insert|Interactive Images|Fireworks html命令，将Html，JavaScript一并

7、插入，然后，在Dreamweaver 4中右击图像，从弹出的菜单中选择Edit with Firework 4命令，就可以马上启动Fireworks并把原PNG文件打开并开始编辑，这是非常方便的，而且Dreamweaver 4把Fireworks与Dreamweaver结合的更紧密了，在Fireworks中编辑完图片不用保存，只需单击Return Dreamweaver按钮，就可以立刻切换到Dreamweaver 4中去，而且所有的修改都已经保存好了，当然也可以在Dreamweaver中方便地切换到Fireworks。1.2 Dreamweaver 4的工作环境所有的工作环境（包括工具栏、浮动

8、面板等），都是通过XML加以控制，可根据需求进行调整。另外Dreamweaver 4提供完整的快捷键，大大提高了网页设计的效率，还可以自行定义快捷键对应的功能。本章主要介绍Dreamweaver 4的工作环境，以引导用户快速了解Dreamweaver强大无比的创作能力。1.2.1 认识Dreamweaver 4的窗口结构 Dreamweaver由两大部分组成，即页面编辑器和站点管理器。其中，页面编辑器是一个可视化的网页编辑器，网页制作都是在页面编辑器中完成的；站点管理器用于管理网站内的文件和目录，检验链接情况，并控制站内文件的上传。一般来说，在做站点时应先建立好站点，再开始网页的制作，这样可以

9、保证页面内文件链接的正确性。启动Dreamweaver 4后，会看到如图1.1所示的窗口和浮动面板。图1.1 Dreamweaver 4界面组成第一次看到如图1.1所示的窗口和浮动面板，对于一个用惯了微软应用程序的人来说，可能一时会感到手足无措。事实上，Dreamweaver更像是一个从Macintosh计算机上移植而来的产品，而不像一个纯粹的Windows应用程序，它的使用方法与PageMaker之类的排版软件类似，而同微软建议的Windows应用程序的外观标准有一定的差别，Dreamweaver应用程序的外观同其异常灵活的功能特性分割不开，对于不同级别和经验的用户，都能够从这种应用程序外观

10、上获得显著的工作效率。Dreamweaver的用户界面令人耳目一新，这也使得有些人认为它不太适于初学者使用，其实对于网络这样的新生事物，谁又不是初学者呢？只要下一点功夫，每一个人都可以很快从一名初学者成为高手。Dreamweaver的开发者已经充分地为用户着想了，它的用户界面非常友好，下面就简单介绍一下，使大家对Dreamweaver有一个整体的了解。一般来说，一个典型的Dreamweaver应用程序操作环境包括以下几个部分： 标题栏：标题栏上显示当前正在编辑文档的标题和名称，它首先显示文档的标题，然后显示文档的文件名称。注意：文档的标题和文档的文件名称是不同的概念。文件的标题通常在文档中的和

11、标记中，是在用浏览器打开文档时显示在浏览器窗口的标题栏上的名称，而文件的名称则是文档存储在磁盘上的文件名。 菜单栏：几乎所有的工作都可以通过菜单来完成，尽管利用浮动面板可以加快操作速度，但是有时为了节省屏幕空间，会将浮动面板关闭，这时利用菜单就显得尤为重要。利用Window菜单，可以控制各种浮动窗口和面板的开启和关闭。 工具栏：工具栏包含了可以让你快速往返于不同显示之间的按钮：代码显示、分离显示和设计显示。工具栏也包含了一些在每个显示里共同的指令。当你在代码显示下工作时，选项菜单包含特殊的文本编辑操作。 文档窗口：文档窗口显示当前所创建和编辑的HTML文档内容。 启动面板（Launcher）：

12、启动面板上包含了用户最常使用的控制按钮，通过这些按钮，可以快速启动或关闭最常用的面板（Inspectors）和浮动面板（Palettes）。在文档窗口下方的状态栏上也出现和启动面板相同的按钮，称作微型启动栏（Mini-Launcher），使得即使启动面板被关闭，用户也能够很容易地使用启动面板上的功能。启动面板上的按钮类型是可以定制的。 对象面板：在对象面板上包含了多种不同类型的按钮，用于在文档中创建不同类型的对象，例如图像、表格、框架等。默认情况下，对象面板中显示的是常用工具组中的工具。对象面板中第一行的对象组名称按钮，可切换对象面板。例如，可切换到Frames，Characters，Form

13、s等对象组。 属性设置面板：该面板是页面编辑中较重要的面板。它主要用于设置页面元素的属性，比如文字的大小、图片的高宽、表格的对齐方式、链接地址等。值得一提的是，对于不同的元素，面板中的参数是不同的。此外，单击属性设置面板右下角的按钮，可展开属性设置面板，此时可查看和设置更多参数。 可停靠浮动面板：可停靠浮动面板是一个工具集合的控制框架，它仿佛一个船坞，可以将各种浮动窗口、面板放置在其中，组合成为选项卡的形式，以节省屏幕空间，必要时还可以将这些浮动窗口、面板从中剥离，成为独立的浮动面板。 状态行：Dreamweaver 4的状态行很有特色，它包括几个功能区，分别用于显示和控制文档源代码、显示页面大小、查看传输时间。其最右方包含了和启动栏一样的按钮组合，称作“微型启动栏”，可以完成启动栏同样的功能。系统从左至右显示了页面尺寸设置区、页面容量及传送时间，以及默认的导航条。其中，单击页面设置区可打开屏幕分辨率设置列表，用户可从中进行选择。例如，如果希望网页的最佳显示分辨率为800600，则可单击该位置，然后从弹出的列表中选择760420（800600 Maximized）。至于页面容量及预计传送时间，由于其中未考虑图像尺寸、网络的繁忙程度等因素，因此，该数值仅供参考。1.2.2 工具栏要显示工具栏，选择View|Toolbar命令，打开如图1.2所