Dreamweaver MX 2004入门教程
界面详解（1）
Dreamweaver MX 2004 具有全新的风格和启动画面，文章末尾提供了这个软件的下载地址，在此不做详细介绍。Dreamweaver MX 2004提供了面向设计人员的布局和面向手工编码人员需求的布局。首次启动Dreamweaver MX 2004时，会出现一个工作区设置对话框（如下图）：
您可以从中选择一种适合您的工作区布局。如果您不熟悉编写代码，请您选择“设计者”。如果您以后想更改工作区，可以使用“编辑”菜单“首选参数”来实现切换如下图：
然后在出现的对话中可以切换到另一种不同的工作区。“编辑”菜单“首选参数”对话框如下图：
工作界面介绍
Dreamweaver MX 2004提供了一个将全部元素置于一个窗口中的集成布局。在集成的工作区中，全部窗口和面板都被集成到一个应用程序窗口中。（如下图）
【栏目说明】
标题栏 （如下图）：显示应用程序的名称、最小化、最大化和正常之间的切换按钮以及关闭按钮。
菜单栏 （如下图）：包含有文件、编辑、查看、插入、修改、文本、命令、站点、窗口、帮助10个菜单项，具体功能有：
“文件”菜单 ：包含有“新建”、“打开”、“保存”、“关闭”、“另存为”、“保存全部”等命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“另存为模板”。
“编辑”菜单 ：包含选择和查找命令，例如“选择父标签”和“查找和替换”，还包括“首选参数”命令。
“查看”菜单 ：可以设置文档的各种视图（例如“设计”视图和“代码”视图），并且可以显示和隐藏不同类型的页面元素和工具栏。
“插入”菜单 ：提供“插入”栏的扩充选项，用于将合适的对象插入您当前的文档。
“修改”菜单 ：使您可以更改选定页面元素或项的属性。使用此菜单，您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。
“文本”菜单 ：可以轻松的设置文本的格式。
“命令”菜单 ：提供对各种命令的访问；包括一个清理HTML、一个创建相册的命令、一个添加/移除Netscape调整修复(使你的网页适合netscape浏览)等。
“站点”菜单 ：提供用于管理站点以及上传和下载文件的菜单项。
“窗口”菜单 ：提供对 DW中的所有面板、属性、检查器和窗口的访问。
“帮助”菜单 ：提供对 Dreamweaver 文档的访问，包括关于使用 Dreamweaver 以及创建 Dreamweaver 扩展功能的帮助系统，还包括各种语言的参考材料。其中包含一个Dreamweaver入门教程，初学者可以去看看。
界面详解（2）
插入栏 （如下图）：包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。每个对象都是一段 HTML 代码，允许您在插入它时设置不同的属性。例如，您可以通过单击“插入”栏中的“表格”按钮插入一个表格。也可以不使用“插入”栏而使用“插入”菜单插入对象。
某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。
“插入”栏按以下的类别进行组织：
“常用”类别使您可以创建和插入最常用的对象，例如图像和表格。
“布局”类别使您可以插入表格、div 标签、层和框架。您还可以从三个表格视图中进行选择：“标准”（默认）、“扩展表格”和“布局”。当选择“布局”模式后，您可以使用 Dreamweaver 布局工具：“绘制布局单元格”和“绘制布局表格”。
“表单”类别包含用于创建表单和插入表单元素的按钮。
“文本”类别使您可以插入各种文本格式设置标签和列表格式设置标签。
“HTML”类别使您可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。
“服务器代码”类别仅适用于使用特定服务器语言的页面，这些类别中的每一个都提供了服务器代码对象，您可以将这些对象插入“代码”视图中。
“应用程序”类别使您可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。
“Flash 元素”类别使您可以插入 Flash 元素。
“收藏”类别使您可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。
文档工具栏（如下图 ）包含按钮和弹出式菜单，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）、各种查看选项和一些常用操作（如在浏览器中预览）。
以下对选项进行说明：
显示代码视图 仅在“文档”窗口中显示“代码”视图。
显示代码视图和设计视图 在“文档”窗口的一部分中显示“代码”视图，而在另一部分中显示“设计”视图。当选择了这种组合视图时，“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。请使用该选项指定在“文档”窗口的顶部显示哪种视图。
显示设计视图 仅在“文档”窗口中显示“设计”视图。
标题 允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。
没有浏览器/检查错误 使您可以检查跨浏览器兼容性。
文件管理 显示“文件管理”弹出菜单。
在浏览器中预览/调试 在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。
刷新设计视图 当您在“代码”视图中进行更改后刷新文档的“设计”视图。
视图选项 允许您为“代码”视图和“设计”视图设置选项。
“文档”窗口： 显示您当前创建和编辑的文档。
状态栏： 提供与您正创建的文档有关的其它信息。
标签选择器 显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击 <body> 可以选择文档的整个正文。
窗口大小 弹出菜单（仅在“设计”视图中可见）用来将“文档”窗口的大小调整到预定义或自定义的尺寸。
“窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。
“属性检查器”（如下图）： 用于查看和更改所选对象或文本的各种属性。
“面板组”（如下图） 是分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。
DW MX 2004中的面板被组织到面板组中。面板组中选定的面板显示为一个选项卡。每个面板组都可以展开或折叠，并且可以和其它面板组停靠在一起（或取消停靠）。面板组还可以停靠到集成的应用程序窗口中，这使得能够很容易地访问所需的面板，而不会使工作区变得混乱。
Dreamweaver MX 2004提供了多种此处未说明的其他面板、检查器和窗口。若要打开其它面板，请使用“窗口”菜单。
站点设置
Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。Dreamweaver MX 2004 是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。创建 Web 站点的第一步是规划。为了达到最佳效果，在创建任何 Web 站点页面之 前，应对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的 外观以及页是如何互相连接起来的。
使用站点定义向导定义本地文件夹
请执行以下操作：
启动 Dreamweaver MX 2004：
选择“站点”>“管理站点”（即，从“站点”菜单选择“管理站点”）。 出现“管 理站点”对话框。
在“管理站点”对话框中，单击“新建”，然后从弹出式菜单中选择“站点”。 出现 “站点定义”对话框。如下图：
如果对话框显示的是“高级”选项卡，则单击“基本”。 出现“站点定义向导”的第 一个界面，要求您为站点输入一个名称。
在文本框中，输入一个名称以在 Dreamweaver MX 2004中标识该站点。该名称可以是 任何所需的名称。
单击“下一步”。出现向导的下一个界面，询问您是否要使用服务器技术。
选择“否”选项，指示目前该站点是一个静态站点，没有动态页。
单击“下一步”。出现向导的下一个界面，询问您要如何使用您的文件。
选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项 。 在站点开发过程中有多种处理文件的方式，初学网页制作的朋友请选择此选项。
单击该文本框旁边的文件夹图标。 随即会出现“选择站点的本地根文件夹”对话框。
单击“下一步”， 出现向导的下一个界面，询问您如何连接到远程服务器。从弹出式 菜单中选择“无”。 您可以稍后设置有关远程站点的信息。目前，本地站点信息对于开始创 建网页已经足够了。
单击“下一步”，该向导的下一个屏幕将出现，其中显示您的设置概要。
单击“完成”完成设置。 随即出现“管理站点”对话框，显示您的新站点。单击“完 成”关闭“管理站点”对话框。
现在，已经为您的站点定义了一个本地根文件夹。下一步，可以编辑自己的网页了。
页面编排
启动中文版Dreamweaver MX 2004，窗口的中央有三项列表（如下图）。
打开最近项目列表：此栏目中列出了最近打开的文件列表。你可以双击打开此栏目中 的文件，如果你想打开的文件没在当前列表中，可以单击底部的“打开”进行打开文件操作。
创建新项目：列出了可以创建的新文件类型。
从范例创建：提供了许多网页模板，使用这些模板可以直接快捷地从模板中创建网页 文件，新建的网页继承了模板网页的布局设置。
下面我们开始介绍如何创建一个新的网页，可以选择“文件”>“新建”，弹出如下对 话框：
从各种预先设计的页面布局中选择一种。比如：选择“基本页”HTML，点击创建按钮 。 Dreamweaver MX 2004即展开工作区界面（一个空白页）：
您可以在这个空白页添加表格和输入文本进行编辑。如果您要向页面添加图片或其它 元素，应先保存这个空白页。选择“文件”>“另存为”，在“另存为”对话框中，浏览到站 点本地根文件夹下。填入文件名，保存退出。
实用技巧
· 空格输入的方法
（1）在编辑网页的时候，有时根据排版要求或其它原因需要输入空格，DW MX 2004提 供了对 中文输入的最好的支持。首先进行一下设置：点“编辑”菜单-->>“首选参数”-->>“常规”，勾选“允许多个连续的空格”。如下图：
直接敲空格键即可输入空格（半格）。
（2）或通过将输入法调整到全角模式敲空格键，每敲淮危淙胍桓隹崭瘛７椒ㄊ牵?打开中 文输入法（以智能ABC为例），按Shift+Space切换到全角状态，再敲空格键就可以自如的输入空格了。
（3）我们在智能ABC输入法状态下按小写字母v1然后选择1也可以输入空格
（4）此外，你还可以通过其它的方法输入空格，比如：拷贝空格粘贴在需要输入空格的位置。
或输入一定长度的文字或标点符号后，然后调整文字的颜色与当前的背景颜色相同。 （此方 法简单易行，但在不同设置的显示器下也可能不会百分之百的奏效。）
· 网页标题信息设置
浏览网页时，顶部的提示信息往往代表了网页内容的主题，有助于访问者提前了解网 页内容,如果不加以设置，那么访问者浏览器就会显示“无标题文档”：
设置方法如下：
（1）在工具条标题域中直接输入标题内容：
（2）在代码视图，应用“Title”属性来完成。<title>输入标题文字 </title>
· 换行的技巧
在DW4编辑中，大块文字输入时候，程序会自动换行，敲回车键的作用是另起一段，如 果只是想换行，用回车行间距显得过大。最简单的办法是在要换行的地方按下Shift键，然后 再敲回车键，就会换一行，使段落排列整齐有序。
· 添加图片提示信息
在我们浏览网页时，当鼠标停留在图片对象或链接上时，在鼠标的右下有时会出现一 个提示信息。对目标进行一定的注释说明。如下图所示：
选中图片，在属性面板里“替代”输入框输入“欢迎您…”。
注:上图我已经加了提示信息，请您用鼠标测试效果。
下图为属性面板状态：
图片提示信息的添加完毕。按F12键浏览一下效果。不满意的话还可以进行修改。
· 供别人下载的文件设置方法
除了ZIP、RAR、EXE类型文件以外，凡是不被浏览器识别的格式文件作为链接目标时， 浏览器默认的操作都是下载。所以，您只要把相关文件的链接路径写准确，告诉浏览者即可。 当然，您事先必须把供别人下载的文件传送到你自己的网络空间。
· 页面插入背景音乐
插入背景音乐有多种方法，如：使用插件、控件、代码都可以实现。
现在介绍使用简单代码插入背景音乐的方法：首先要说的是，您事先准备好一首midi 音乐，比如：文件名为：music.mid放在网站根目录下。
将下面这段代码插入到<body></body>标签之间。标签您可能不熟悉，不 妨您先照着做。先在编辑状态，用鼠标在网页的下方空白处点击（定一个插入点），确认光标 在这个位置闪烁。点工具栏 
按钮 ，显示代码视图状态，找到刚才确定的插入点光标位置，把下边的代码写进去。
<bgsound src="music.mid" loop="-1">
src="music.mid"是指定背景音乐文件的位置及文件名。Loop="-1"代表背景音乐循环 播放，你也可以指定播放次数。这种插入背景音乐的方法简单，但是只适用于IE浏览器。也不 易控制，没法关闭。
以下介绍适应范围比较广泛的控制音乐播放的代码：
<embed src="music.mid" autostart="false" loop="true"width="300"height="45" ></embed>
src="****.mid" 指定音乐文件的路径与文件名。最好用相对路径（目前就是相对路 径）。这里的****.mid跟网页文件在同一个目录。
autostart="****"设定当音乐文件载入后是否自动播放。有两个逻辑选项，true和 false。true表示自动播放。false不自动播放。
loop="****" 表示音乐文件是否循环播放，也可以指定循环播放的次数。比如 loop="3"表示重复播放3次，loop="-1"表示无限循环，loop="true"也表示无限循环。
width="***"height="**"表示显示控制面板的宽和高，当两个参数均设为0时，表示隐 藏控制面板。
超级连接
作为网站肯定有很多的页面，如果页面之间彼此是独立的，那么网页就好比是孤岛， 这样的网站是无法运行的。为了建立起网页之间的联系我们必须使用超级链接。称“超级链接 ”，是因为它什么都能链接，如：网页、下载文件、网站地址、邮件地址……等等。下边我们 就来讨论怎样在网页中创建超级链接。
【页面之间的超级连接】
在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中 去。
1、在网页中选中要做超级链接的文字或者图片。
2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成 了。做好超级链接属性面板出现链接文件显示。（如下图）
3、按F12预览网页。在浏览器里光标移到超级链接的地方就会变成手型。
〖提示〗你也可以手工在链接输入框中输入地址。给图片加上超级链接的方法和文字 完全相同。
如果超级链接指向的不是一个网页文件。而是其他文件例如zip、exe文件等等，单击 链接的时候就会下载文件。
超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址（"http://"，形式。）。
【邮件地址的超级连接】
在网页制作中，还经常看到这样的一些超级链接。单击了以后，会弹出邮件发送程序 ，联系人的地址也已经填写好了。这也是一种超级链接。制作方法是：在编辑状态下，先选定 要链接的图片或文字（比如：欢迎您给提出更好的意见！），在插入栏点或点插入菜单选“电 子邮件链接”弹出如下对话框，填入E-Mail地址即可。
提示：还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址 ”。
创建完成后，保存页面，按F12预览网页效果。
【制作图片上的超级链接】
注意，我们这里所说的图片上的超级链接是指在一张图片上实现多个局部区域指向不 同的网页链接。比如一张中国地图的图片，单击了不同的省跳转到不同的网页。可点的区域就 是热区。为了演示制作效果下面的中国地图我加了一些链接，你可以用鼠标测试。鼠标移动到 省份的热区，会显示提示，如果有预先设置的网站，点击会进入对方的网站。
【制作方法】
1、首先插入图片。单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。
2、属性面板改换为热点面板如图：链接输入框：填入相应的链接。替代框：填入你的 提示文字说明。目标框：不作选择则默认在新浏览器窗口打开。
3、保存页面， 按F12预览，用鼠标在设置的热区检验效果。
提示：对于复杂的热区图形我们可以直接选择多边形工具来进行描画。替代框填写了 说明文字以后，光标移上热区就会显示出相应的说明文字。
层和层的应用
层（Layer）是一种 HTML 页面元素，您可以将它定位在页面上的任意位置。层可以包 含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素 进行重叠和复杂的布局。首先，请看下图：
我们首先来做一个层
1、 在「窗口」菜单＞选“层”，或点「插入」菜单＞布局对象＞选“层”。
2、 在页面中显示一个层。
3、 通过周围的黑色调整柄拖动控制层的大小
4、 拖动层左上角的选择柄可以移动层的位置。
5、 单击层标记可以选中一个层。
6、 在层中可以插入其他任何元素包括图片文字链接表格等。
一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。 层面板可以通过菜单「窗口」菜单＞选“层”打开。
这里我们需要对几个概念进行解释。层有隐藏和显示的属性。这是层的一个重要属性 和以后说到的行为相结合就变成了重要的参数。单击层面板列表的左边，可以打开关闭眼睛。 眼睛挣开和关闭表示层的显示和隐藏。
层还有一个概念就是层数，层数决定了重叠时哪个层在上面哪个层在下面。 比如层 数为2的层在层数为1的层的上面。改变层数就可以改变层的重叠顺序。
层面板上面还有一个参数就是防止层重叠。一旦选中，页面中层就无法重叠了。
层还有一种父子关系也就是隶属关系。在层面板中是这样表示的。
图中Layer2挂在Layer1的下面。Layer1为父层，Layer2为子层。在页面中拖动Layer1 ，Layer2也跟着动起来。因为他们已经链在一起了，并且Layer2隶属于Layer1。父层移动会影 响到子层。移动layer2层，Layer1层不动。也就是子层不会影响到父层。
要建立这样的一种隶属关系方法很简单。在层面板中按Ctrl键将子层拖拽到父层即可 。
［层和表格之间转换］
由于层在网页布局上非常方便，所以，一些人可能不喜欢使用表格或“布局”模式来 创建自己的页面，而是喜欢通过层来进行设计。Dreamweaver MX 2004可以使用层来创建自己 的布局，然后将它们转换为表格。
在转换为表格之前，请确保层没有重叠。请执行以下操作：选择“修改”＞“转换” ＞“层到表格”。即可显示“转换层为表格”对话框。
选择所需的选项。单击“确定”。
若要将表转换为层，请选择“修改”＞“转换”＞“表格到层”。即可显示“转换表 格为层。对话框。
选择所需的选项。单击“确定”。
层及应用我们就简单介绍到这里。
发布站点（1）
在发布网站之前先使用Dreamweaver MX 2004 站点管理器对你的网站文件进行检查和 整理，这一步很必要。可以找出断掉的链接、错误的代码和未使用的孤立文件等，以便进行纠 正和处理。
步骤如下：在编辑视图点「站点」菜单＞选“检查站点范围的链接”，弹出“结果” 对话框，如下图：
下图是检查器检查出本网站与外部网站的链接的全部信息，对于外部链接，检查器不 能判断正确与否，请自行核对。
下图是检查器找出的孤立文件，这些文件您的网页没有使用，但是仍在你的网站文件 夹里存放，上传后它会占据有效空间，应该把它清除。清除办法是：先选中文件，点Delete键 ，确定。这些文件就放在“回收站”。
如果不想删除这些文件，点 
保存报告按钮（上图所示），在弹出的对话框中您给报告文件一个保存路径和文件 名即可。该报告文件为一个检查结果列表。你可以参照此表，进行处理。
纠正和整理之后，您的网站就可以发布了。
【发布站点操作】
如果您是第一次上传文件，您的远程 Web 服务器根文件夹是空文件夹时按以下操作进 行。如果不是空文件夹，另行操作附后。
服务器根文件夹是空文件夹时，连接到远程站点，请执行以下操作：
在 Dreamweaver MX 2004中，选择“站点”>“管理站点”。管理站点对话框中“网页 教学网”,这里这个站点在我们制作网站之前已经设置好了。
选择一个站点（即本地根文件夹），然后单击“编辑”。
单击对话框顶部的“基本”选项卡。在前面“设置站点”时，已填写了“基本”选项 卡中的前几个步骤，因此单击几次“下一步”，直到向导顶部高亮显示“共享文件”步骤。如 下图：
请输入以下选项：
输入服务器的主机名；（必须填入）
“您打算将您的文件储存在服务器上的什么文件夹中？”（可以留空）
在相应的文本框中输入您的用户名和密码。
“使用安全 FTP (SFTP)”选项。（可不勾选）
单击“测试连接”。
如果连接不成功，请检查设置或咨询系统管理员。
在输入相应的信息后，单击“下一步”。
发布站点（2）
不要为站点启用文件存回和取出。
单击“下一步”。
单击“完成”以完成远程站点的设置。
再次单击“完成”以退出“管理站点”对话框。
【上传文件】
在设置了本地文件夹和远程文件夹（空文件夹）之后，可以将文件从本地文件夹上传 到 Web 服务器。
请执行以下操作：
在“文件”面板（“窗口”>“文件”）中，选择站点的本地根文件夹。
单击“文件”面板工具栏上的“上传文件”蓝色箭头图标。 
Dreamweaver MX 2004会将所有文件复制到服务器默认的远程根文件夹。
多数空间提供商都设置有服务器默认的文件夹，请在此文件夹下创建一个空文件夹， 方法是：在“文件”面板，将“本地视图”转换为“远程视图”。右键点击文件夹，选“新建 文件夹”，输入一个名称，用作您的远程根文件夹，名称与您本地根文件夹的名称一致，便于 操作。
为了操作更直观，您也可以最大化“文件”面板。请打开“文件”面板的最右边的“ 扩展/折叠”按钮，最大化文件面板，如下图，左边为远端站点内容，右边为本地文件内容： （注）这是将文件夹展开的示例，便于您观察，供参考。
点击 ，Dreamweaver MX 2004将所有文件复制到您定义的远程文件夹。
提示：第一次上传必须搞清楚网络空间服务商指定的服务器默认的存放网页的文件夹 ，在此文件夹下存放您的站点文件。访问您的网站地址为： http://www.webjx.com/index.htm
如果你在服务器默认的文件夹下上建立了与本地根文件夹同名的文件夹，那么访问您 的网站，需要用这样的地址：http://www.webjx.com/ （您的文件夹名）/index.htm
上传完毕，请在浏览器中输入浏览地址，测试您上传的结果。
如果您喜欢使用专业的FTP软件(通常我们用的上传软件有CUTEFTP和LEADFTP都有中文 版的了，而且当我们自己买了空间之后，空间商主页那都有帮助如何使用的详细步骤)上传您 的站点文件，这里就不赘述了。
上一篇：DW MX 2004 动态站点开发新功能 下一篇：Dreamweaver快捷键大全
相关内容
赞助商链接