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

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

《Dreamweaver 4教程使用Dreamweaver 4开始工作Word格式.docx》由会员分享，可在线阅读，更多相关《Dreamweaver 4教程使用Dreamweaver 4开始工作Word格式.docx（22页珍藏版）》请在冰豆网上搜索。

对于网页设计的新手，也可以快速提高他们的工作效率，因为使用Dreamweaver4，可以轻松地可视化编辑加入网页的相关对象。

Dreamweaver4提供了友好的用户界面和强大功能的快捷工具，支持多种浏览器，可建立跨平台的网页，同时还可以制作不需要编写任何代码的动态网页。

它具有强大的网页排版及制作功能，如可通过层叠样式表格式化文本、通过层定位网页元素、通过时间链制作动画，以及使用库项目实现代码的重复使用等。

1.1Dreamweaver4新增功能简介

Dreamweaver是Macromedia公司推出的主页编辑工具。

它是一个所见即所得网页编辑器，支持最新的DHTML和CSS标准。

采用了多种先进技术，能够快速高效地创建极具表现力和动感效果的网页，使网页创作过程变得非常简单。

值得称道的是，Dreamweaver不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制，可以说，它是一个集网页创作和站点管理两大利器于一身的创作工具。

在学习使用Dreamweaver4之前，我们先了解Dreamweaver4的一些新增功能。

1．独特的往返HTML功能

这个功能可以同步访问设计视图（DesignView）和HTML源代码，可以打开用其他编辑器编辑的文档，但它不会改写手工输入的HTML标记或第三方标记。

这就使得Dreamweaver4自动生成的代码与手工输入的代码融为一体。

2．整合文本编辑器

现在Dreamweaver4增加了以代码为中心的新特性。

手工编写代码就如设计视图环境一样方便，可以自动缩排、标点平衡、选择多行后一次缩进。

可以在使用代码视图工具栏（CodeViewToolbar）的下拉列表定义的JavaScript函数之间轻松导航。

对于使用JavaScript编程的专业人员来说，这种代码导航无疑是一种高效的导航帮助。

输入代码时Dreamweaver4自动对HTML和JavaScript代码使用不同的颜色显示。

3．把主窗口分割为代码视图和设计试图

可以把Dreamweaver的主窗口分割为代码视图和设计试图。

能够查看整页代码而无需离开文档窗口。

这样，就可以在同一个窗口同时查看代码视图和设计视图，同时编辑多个文档的代码。

4．JavaScript调试器

使用新增的JavaScript调试器，可以直接在浏览器中调试客户端JavaScript脚本，观察JavaScript的执行，就像它在Netscape或IE浏览器中一样，因而能够更好地了解每种浏览器是怎样执行JavaScript的。

可以设置断点调试代码，然后在逐步执行代码的过程中观察变量的变化，及时发现编程错误。

5．编辑非HTML文档

可以把Dreamweaver4当作文本编辑器编辑非HTML文档，直接在代码视图（CodeView）中编辑JavaScript，XML和其他文本文件。

6．自定义标记数据库

使用自定义标记数据库可随时定义新的标记或编辑默认标记。

Dreamweaver4的可配置自定义数据库让你能够定制翻译引擎来支持属性代码。

7．超强页面排版功能

网页对象的排版一般有表格和图层两种方式，这两种方式各有优缺点，Dreamweaver4的LayoutView技术可以轻松地把两者的优点结合起来，用此功能编写的网页，任何浏览器都兼容，解决了后顾之忧。

Dreamweaver4中提供了两种可视化编辑方式，一种是大家再也熟悉不过的老版面，另一种是全新的版面排版方式。

它提出了一个全新页面排版概念，它可以使你轻松地拖曳出复杂的透明表格，而且绝无冗余代码。

8．MacromediaFlash文字和按钮

Flash动画向来让人津津乐道的是文件小、效果棒，而且可以随着视窗大小做不失真的缩放，这些都要归功于使用矢量图的优点。

使用Dreamweaver4的这个新功能，就算你不会使用Flash也可以在Dreamweaver4中直接插入Flash动画格式的文字或按钮，只要简简单单输入文字就可以了，比起传统的点阵图文字或按钮，文件更小、效果更漂亮。

不过很可惜的是，目前Flash文字和按钮还不支持中文。

9．双向绘图编辑

大家都知道在Fireworks中分割图形保存后，可以利用Dreamweaver4的Insert|InteractiveImages|Fireworkshtml命令，将Html，JavaScript一并插入，然后，在Dreamweaver4中右击图像，从弹出的菜单中选择EditwithFirework4命令，就可以马上启动Fireworks并把原PNG文件打开并开始编辑，这是非常方便的，而且Dreamweaver4把Fireworks与Dreamweaver结合的更紧密了，在Fireworks中编辑完图片不用保存，只需单击ReturnDreamweaver按钮，就可以立刻切换到Dreamweaver4中去，而且所有的修改都已经保存好了，当然也可以在Dreamweaver中方便地切换到Fireworks。

1.2Dreamweaver4的工作环境

所有的工作环境（包括工具栏、浮动面板等），都是通过XML加以控制，可根据需求进行调整。

另外Dreamweaver4提供完整的快捷键，大大提高了网页设计的效率，还可以自行定义快捷键对应的功能。

本章主要介绍Dreamweaver4的工作环境，以引导用户快速了解Dreamweaver强大无比的创作能力。

1.2.1认识Dreamweaver4的窗口结构

Dreamweaver由两大部分组成，即页面编辑器和站点管理器。

其中，页面编辑器是一个可视化的网页编辑器，网页制作都是在页面编辑器中完成的；

站点管理器用于管理网站内的文件和目录，检验链接情况，并控制站内文件的上传。

一般来说，在做站点时应先建立好站点，再开始网页的制作，这样可以保证页面内文件链接的正确性。

启动Dreamweaver4后，会看到如图1.1所示的窗口和浮动面板。

图1.1Dreamweaver4界面组成

第一次看到如图1.1所示的窗口和浮动面板，对于一个用惯了微软应用程序的人来说，可能一时会感到手足无措。

事实上，Dreamweaver更像是一个从Macintosh计算机上移植而来的产品，而不像一个纯粹的Windows应用程序，它的使用方法与PageMaker之类的排版软件类似，而同微软建议的Windows应用程序的外观标准有一定的差别，Dreamweaver应用程序的外观同其异常灵活的功能特性分割不开，对于不同级别和经验的用户，都能够从这种应用程序外观上获得显著的工作效率。

Dreamweaver的用户界面令人耳目一新，这也使得有些人认为它不太适于初学者使用，其实对于网络这样的新生事物，谁又不是初学者呢？

只要下一点功夫，每一个人都可以很快从一名初学者成为高手。

Dreamweaver的开发者已经充分地为用户着想了，它的用户界面非常友好，下面就简单介绍一下，使大家对Dreamweaver有一个整体的了解。

一般来说，一个典型的Dreamweaver应用程序操作环境包括以下几个部分：

∙标题栏：

标题栏上显示当前正在编辑文档的标题和名称，它首先显示文档的标题，然后显示文档的文件名称。

注意：

文档的标题和文档的文件名称是不同的概念。

文件的标题通常在文档中的<

title>

和<

/title>

标记中，是在用浏览器打开文档时显示在浏览器窗口的标题栏上的名称，而文件的名称则是文档存储在磁盘上的文件名。

∙菜单栏：

几乎所有的工作都可以通过菜单来完成，尽管利用浮动面板可以加快操作速度，但是有时为了节省屏幕空间，会将浮动面板关闭，这时利用菜单就显得尤为重要。

利用Window菜单，可以控制各种浮动窗口和面板的开启和关闭。

∙工具栏：

工具栏包含了可以让你快速往返于不同显示之间的按钮：

代码显示、分离显示和设计显示。

工具栏也包含了一些在每个显示里共同的指令。

当你在代码显示下工作时，选项菜单包含特殊的文本编辑操作。

∙文档窗口：

文档窗口显示当前所创建和编辑的HTML文档内容。

∙启动面板（Launcher）：

启动面板上包含了用户最常使用的控制按钮，通过这些按钮，可以快速启动或关闭最常用的面板（Inspectors）和浮动面板（Palettes）。

在文档窗口下方的状态栏上也出现和启动面板相同的按钮，称作微型启动栏（Mini-Launcher），使得即使启动面板被关闭，用户也能够很容易地使用启动面板上的功能。

启动面板上的按钮类型是可以定制的。

∙对象面板：

在对象面板上包含了多种不同类型的按钮，用于在文档中创建不同类型的对象，例如图像、表格、框架等。

默认情况下，对象面板中显示的是常用工具组中的工具。

对象面板中第一行的对象组名称按钮，可切换对象面板。

例如，可切换到Frames，Characters，Forms等对象组。

∙属性设置面板：

该面板是页面编辑中较重要的面板。

它主要用于设置页面元素的属性，比如文字的大小、图片的高宽、表格的对齐方式、链接地址等。

值得一提的是，对于不同的元素，面板中的参数是不同的。

此外，单击属性设置面板右下角的按钮，可展开属性设置面板，此时可查看和设置更多参数。

∙可停靠浮动面板：

可停靠浮动面板是一个工具集合的控制框架，它仿佛一个船坞，可以将各种浮动窗口、面板放置在其中，组合成为选项卡的形式，以节省屏幕空间，必要时还可以将这些浮动窗口、面板从中剥离，成为独立的浮动面板。

∙状态行：

Dreamweaver4的状态行很有特色，它包括几个功能区，分别用于显示和控制文档源代码、显示页面大小、查看传输时间。

其最右方包含了和启动栏一样的按钮组合，称作“微型启动栏”，可以完成启动栏同样的功能。

系统从左至右显示了页面尺寸设置区、页面容量及传送时间，以及默认的导航条。

其中，单击页面设置区可打开屏幕分辨率设置列表，用户可从中进行选择。

例如，如果希望网页的最佳显示分辨率为800×

600，则可单击该位置，然后从弹出的列表中选择760×

420（800×

600Maximized）。

至于页面容量及预计传送时间，由于其中未考虑图像尺寸、网络的繁忙程度等因素，因此，该数值仅供参考。

1.2.2工具栏

要显示工具栏，选择View|Toolbar命令，打开如图1.2所