dw网页制作入学教程_网站制作之dreamweaver入门

1

dreamweaver入门(2004版本):功能简介：

Macromedia Dreamweaver MX 2004 (简称DW MX 2004)，是Macromedia 最新开发的的HTML编辑器，用于对Web站点、Web页和 Web应用程序进行设计、编码和开发。 DW MX 2004 包含有一个崭新、简洁、高效的界面，且性能也得到了改进。此外，还包含了众多新增的功能，改善了软件的易用性并使您无论处于设计环境还是编码环境都可以方 便地生成页面。

【DW MX 2004 MX 2004 的新功能简介】

▲简洁高效的设计和开发界面：界面更易于使用，可使您的工作效率和工作质量均得到提高。

▲“插入”栏的改进：简洁高效的新外观，占用更少的工作区空间。还新增加了一个“收藏”类别，您可以对“插入”栏进行自定义，将最常使用的对象放置在该栏上。

▲表格编辑可视化：在表格中进行列调整操作时能看到实际效果。

▲用户界面改进：可得到最大的可用工作区，更清晰地显示上下文和焦点，更易于使用和更具逻辑性。

▲起始页：使您能够访问最近使用过的文件，创建新文件和访问DW MX 2004资源。起始页会在您启动DW MX 2004 或尚未打开文档时显示。

▲保存桌面选项：使您可以选择当您重新启动DW MX 2004 时重新打开您上一次使用的文档。

▲完全支持 Unicode：DW MX 2004支持 Internet Explorer所支持的所有文本编码方式。您可以使用几乎所有您的系统中安装的语言字体，DW MX 2004 会正确地显示和保存这些字体。

▲安全 FTP：使您能够完全加密所有文件传输。

▲新式的页面布局和设计环境。

▲增强的 CSS 功能：提供了一个更为精巧的方法来进行样式设计及提高设计交互性。

▲动态跨浏览器验证：在您保存文档时自动检查当前文档的跨浏览器兼容性问题。

本教程针对DW MX 2004简体中文版进行讨论，供学习网页制作创建静态网站的朋友们参考。因本人水平有限，不当之处在所难免，欢迎批评指正。

【图象处理软件】

Photoshop：制作图文并茂的网页，需要处理图片， PS 是最好的图象处理软件。最新版为Photoshop CS(俗称8.0)版本。对初学者来说稍微专业了。您可以使用简单易学、功能强大的的 Photoshop Elements(即：PSE)，对于网页图片文件制作PSE就足够用了。。

Fireworks：最新为 MX 2004版本，网页制作三剑客之一。能和DW无缝链接。该软件请您自行收集下载。

Flash： 最新为 MX 2004版本，网页制作三剑客之一。网上最火的动画制作软件。该软件请您自行收集下载。

Ulead GIF Animator：友立公司开发的功能强大的GIF动画软件。该软件请您自行收集下载。

【其他软件】

CuteFTP：是专业的FTP上传软件，用于往服务器端上传文件用。 Dreamweaver MX 2004 有此功能，而且功能强大。但是，不少人还是习惯用专业的FTP软件。该软件请您自行收集下载。

最终您还需要有一个网络空间。以便您的大作让更多的人浏览。

2

dreamweaver入门(2004版本):窗口布局：

窗口布局

Dreamweaver MX 2004 提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。您可以选择面向设计人员的布局或面向手工编码人 员需求的布局。首次启动 Dreamweaver 时，会出现一个工作区设置对话框(如下图)：

您可以从中选择一种工作区布局。如果您不熟悉编写代码，请您选择“设计者”。如果您以后想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。编辑菜单“首选参数”对话框如下图：

【栏目说明】

“插入”栏(如下图)：包含用于将各种类型的“对象”(如图像、表格和层)插入到文档中的按钮。每个对象都是一段 HTML 代码，允许您在插入它时设置不同的属性。例如，您可以通过单击“插入”栏中的“表格”按钮插入一个表格。也可以不使用“插入”栏而使用“插入”菜单插入对 象。

“文档”窗口 显示您当前创建和编辑的文档。

“属性检查器”(如下图)： 用于查看和更改所选对象或文本的各种属性。

“面板组”(如下图) 是分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。

“文件”面板(如下图) 使您可以管理您的文件和文件夹，无论它们是 Dreamweaver 站点的一部分还是在远程服务器上。“文件”面板还使您可以访问本地磁盘上的全部文件，类似于 Windows 资源管理器。

Dreamweaver MX 2004提供了多种此处未说明的其他面板、检查器和窗口。若要打开其它面板，请使用“窗口”菜单。

3

dreamweaver入门(2004版本):菜单概述：

菜单概述

本节提供 Dreamweaver MX 2004中各菜单的简要说明。下图为菜单条：

以下分别叙述菜单选项：

文件菜单编辑菜单

“文件”菜单　包含“新建”、“打开”、“保存”、“保存全部”，还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。

“编辑”菜单　包含选择和搜索命令，例如“选择父标签”和“查找和替换”。“编辑”菜单还提供对DW菜单中“首选参数”的访问。

查看菜单插入菜单

“查看”菜单　使您可以看到文档的各种视图(例如“设计”视图和“代码”视图)，并且可以显示和隐藏不同类型的页面元素和 DW工具及工具栏。

“插入”菜单提供“插入”栏的替代项，用于将对象插入您的文档。

修改菜单文本菜单

“修改”菜单 使您可以更改选定页面元素或项的属性。使用此菜单，您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。

“文本”菜单使您可以轻松地设置文本的格式。

命令菜单站点菜单

“命令”菜单　提供对各种命令的访问；包括一个根据您的格式首选参数设置代码格式的命令、一个创建相册的命令等。

“站点”菜单　提供用于管理站点以及上传和下载文件的菜单项。

窗口菜单帮助菜单

“窗口”菜单　提供对 DW中的所有面板、检查器和窗口的访问。

“帮助”菜单　提供对 Dreamweaver 文档的访问，包括关于使用 Dreamweaver 以及创建 Dreamweaver 扩展功能的帮助系统，还包括各种语言的参考材料。

除了菜单栏菜单外，Dreamweaver 还提供多种右键显示上下文菜单，您可以利用它们方便地访问与当前选择或区域有关的有用命令。若要显示上下文菜单，右击窗口中的某一项。

4

dreamweaver入门(2004版本):常用工具栏：

“插入”栏“插入”栏包含用于创建和插入对象(如表格、层和图像)的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。　　某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像 占位符”，下次单击“图像”按钮时，Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。

“插入”栏按以下的类别进行组织：

“常用”类别使您可以创建和插入最常用的对象，例如图像和表格。

“布局”类别使您可以插入表格、div 标签、层和框架。您还可以从三个表格视图中进行选择：“标准”(默认)、“扩展表格”和“布局”。当选择“布局”模式后，您可以使用 Dreamweaver 布局工具：“绘制布局单元格”和“绘制布局表格”。

“表单”类别包含用于创建表单和插入表单元素的按钮。

“文本”类别使您可以插入各种文本格式设置标签和列表格式设置标签。

“HTML”类别使您可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。

“服务器代码”类别仅适用于使用特定服务器语言的页面，这些类别中的每一个都提供了服务器代码对象，您可以将这些对象插入“代码”视图中。

“应用程序”类别使您可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。

“Flash 元素”类别使您可以插入 Flash 元素。

“收藏”类别使您可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。

文档工具栏

文档工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。

工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。　　以下对选项进行说明：

显示代码视图　仅在“文档”窗口中显示“代码”视图。

显示代码视图和设计视图　在“文档”窗口的一部分中显示“代码”视图，而在另一部分中显示“设计”视图。当选择了这种组合视图时，“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。请使用该选项指定在“文档”窗口的顶部显示哪种视图。

显示设计视图　仅在“文档”窗口中显示“设计”视图。

标题　允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。

没有浏览器/检查错误　使您可以检查跨浏览器兼容性。

文件管理　显示“文件管理”弹出菜单。

在浏览器中预览/调试　在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。

刷新设计视图　当您在“代码”视图中进行更改后刷新文档的“设计”视图。

视图选项　允许您为“代码”视图和“设计”视图设置选项。

状态栏

状态栏提供与您正创建的文档有关的其它信息　　标签选择器 显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击

可以选择文档的整个正文。

窗口大小 弹出菜单(仅在“设计”视图中可见)用来将“文档”窗口的大小调整到预定义或自定义的尺寸。

“窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。

5

dreamweaver入门(2004版本):定义站点：

设置站点

Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。Dreamweaver MX 2004 是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。创建 Web 站点的第一步是规划。为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及页是如何互相连接起来的。

请执行以下操作：

启动 Dreamweaver MX 2004：

选择“站点” >“管理站点”(即，从“站点”菜单选择“管理站点”)。 出现“管理站点”对话框。

在“管理站点”对话框中，单击“新建”，然后从弹出式菜单中选择“站点”。 出现“站点定义”对话框。

如果对话框显示的是“高级”选项卡，则单击“基本”。 出现“站点定义向导”的第一个界面，要求您为站点输入一个名称。

在文本框中，输入一个名称以在 Dreamweaver MX 2004中标识该站点。该名称可以是任何所需的名称。

单击“下一步”。出现向导的下一个界面，询问您是否要使用服务器技术。

选择“否”选项，指示目前该站点是一个静态站点，没有动态页。

单击“下一步”。出现向导的下一个界面，询问您要如何使用您的文件。

选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器(推荐)”的选项。 在站点开发过程中有多种处理文件的方式，初学网页制作的朋友请选择此选项。

单击该文本框旁边的文件夹图标。 随即会出现“选择站点的本地根文件夹”对话框。

单击“下一步”， 出现向导的下一个界面，询问您如何连接到远程服务器。从弹出式菜单中选择“无”。 您可以稍后设置有关远程站点的信息。目前，本地站点信息对于开始创建网页已经足够了。单击“下一步”，该向导的下一个屏幕将出现，其中显示您的设置概要。

单击“完成”完成设置。 随即出现“管理站点”对话框，显示您的新站点。单击“完成”关闭“管理站点”对话框。

现在，已经为您的站点定义了一个本地根文件夹。下一步，可以编辑自己的网页了。

6

dreamweaver入门(2004版本):创建页面：

页面编辑

本节介绍如何应用Dreamweaver MX 2004创建自己的网页。

从头创建自己的页面，可以使用 Dreamweaver MX 2004起始页创建新页，或者可以选择“文件” >“新建”，弹出如下对话框：

从各种预先设计的页面布局中选择一种。比如：选择“基本页”HTML，点击创建按钮。Dreamweaver MX 2004即展开工作区界面(一个空白页)：

您可以在这个空白页添加表格和输入文本进行编辑。如果您要向页面添加图片或其它元素，应先保存这个空白页。选择“文件”>“另存为”，在“另存为”对话框中，浏览到站点本地根文件夹下。填入文件名，保存退出。

7

dreamweaver基础教程:页面的总体设置：

我们已经描绘了小屋的蓝图，从现在开始，为我们的小屋添砖加瓦吧。打开01.html，制作一个图文混排的简单页面。

一、页面的总体设置

1、设置页面的头内容

头内容再浏览器中是不可见的，但是却携带着网页的重要信息，如关键字、描述文字等，还可以实现一些非常重要的功能，如自动刷新功能。

鼠标左键单击插入工具栏最左边按钮旁的下拉小三角，在弹出菜单中选择“HTML”项，出现“文件头”按钮，点开下拉菜单，就可以进行头内容的设置了。

设置标题，网页标题可以是中文、英文或符号，显示在浏览器的标题栏中。我们直接在设计窗口上方的标题栏内输入或更改，就可以完成网页标题的编辑了。

插入关键字，关键字用来协助网络上的搜索引擎寻找网页。要想让更多的人看见你的网站，这项要好好填哦^_^单击上图所示的“关键字”项，弹出“关键字”对话框，填入关键字即可。

插入META，META标记用于记录当前网页的相关信息，如编码，作者，版权等，也可以用来给服务器提供信息。单击上图所示的“META”项，弹出“META”对话框，在“属性”栏选择“名称”属性，在“值”文本框中输入相应的值，可以定义相应的信息。

author—作者信息，copyright—版权声明，generator—网页编辑器。

2、设置页面属性

单击“属性栏”中的“页面属性”按钮，打开的“页面属性”对话框。

设置外观，“外观”是设置页面的一些基本属性。我们可以定义页面中的默认文本字体、文本字号、文本颜色、背景颜色和背景图像等。我们设置页面的所有边距为0。

设置链接，“链接”选项内是一些与页面的链接效果有关的设置。“链接颜色”定义超链接文本默认状态下的字体颜色，“变换图像链接”定义鼠标放在链接上 时文本的颜色，“已访问链接”定义访问过的链接的颜色，“活动链接”定义活动链接的颜色。“下划线样式”可以定义链接的下划线样式。

设置标题，“标题”用来设置标题字体的一些属性。如下图所示，在左侧“分类”列表中选择“标题”，这里的标题指的并不是页面的标题内容，而是可以应用 在具体文章中各级不同标题上的一种标题字体样式。我们可以定义“标题字体”及6种预定义的标题字体样式，包括粗体、斜体、大小和颜色。按自己的喜欢的风格 设置吧。

8

dreamweaver入门(2004版本):超级链接：

超级链接

作为网站肯定有很多的页面，如果页面之间彼此是独立的，那么网页就好比是孤岛，这样的网站是无法运行的。为了建立起网页之间的联系我们必须使用超级链接。称“超级链接”，是因为它什么都能链接，如：网页、下载文件、网站地址、邮件地址……等等。下边我们就来讨论怎样在网页中创建超级链接。

【页面之间的超级连接】

在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。

1、在网页中选中要做超级链接的文字或者图片。

2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。做好超级链接属性面板出现链接文件显示。(如下图)

3、按F12预览网页。在浏览器里光标移到超级链接的地方就会变成手型。

〖提示〗你也可以手工在链接输入框中输入地址。给图片加上超级链接的方法和文字完全相同。

如果超级链接指向的不是一个网页文件。而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。

超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。例如，在链接框里写上http://www.dushuwu.net那么，单击链接就可以跳转到读书屋网站。

【邮件地址的超级连接】

在网页制作中，还经常看到这样的一些超级链接。单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。这也是一种超级链接。制作方法是：在编辑状态下，先选定要链接的图片或文字(比如：欢迎您来信赐教！)，在插入栏点或点插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。

提示：还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”。(如下图)

创建完成后，保存页面，按F12预览网页效果。

【制作图片上的超级链接】

注意，我们这里所说的图片上的超级链接是指在一张图片上实现多个局部区域指向不同的网页链接。比如一张中国地图的图片，单击了不同的省跳转到不同的网页。可点的区域就是热区。为了演示制作效果下面的中国地图我加了一些链接，你可以用鼠标测试。鼠标移动到省份的热区，会显示提示，如果有预先设置的网站，点击会进入对方的网站。

【制作方法】

1、首先插入图片。单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。

2、属性面板改换为热点面板如图：链接输入框：填入相应的链接。替代框：填入你的提示文字说明。目标框：不作选择则默认在新浏览器窗口打开。

3、保存页面， 按F12预览，用鼠标在设置的热区检验效果。

提示：对于复杂的热区图形我们可以直接选择多边形工具来进行描画。替代框填写了说明文字以后，光标移上热区就会显示出相应的说明文字。

超级链接属性面板中的目标选项。

“目标”我们称它为目标区。也就是超级链接指向的页面出现在什么目标区域。默认的情况下域中总有四个选项。

①_blank ：单击链接以后，指向页面出现在新窗口中。

②_parent：用指向页面替换他外面所在的框架结构。

③_self：　将连接页面显示在当前框架中。

④_top：　 跳出所有框架，页面直接出现在浏览器中。

【小结】本节教程主要探讨创建页面的链接。

1、内部链接：链接到本站点的其他文档。

2、外部链接：链接到本站点以外的其他文档。

3、E-Mail链接：单击该链接，可以打开浏览者的邮件系统。

4、图片热区链接：使你的链接更灵活更有个性。

9

dreamweaver入门(2004版本):表格设计：

表格设计

表格是现代网页制作的一个重要组成部分。表格之所以重要是因为表格可以实现网页的精确排版和定位。本节教程我们分为两步来进行。首先看表格操作的一个实例。然后来看一些表格操作的基本方法。在开始制作表格之前，我们首先对表格的各部分的名称做一个介绍。

一张表格横向叫行，纵向叫列。行列交叉部分就叫做单元格。

单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。

下面看看我们使用表格制作的页面的实例

这幅页面的排版格式，如果用以前我们所讲的对齐方式是无法实现的。因此我们需要用到表格来做。实际上是用两行两列的表格来制作。

1、 在插入栏中选择按钮或“插入”菜单>选“表格”。系统弹出表格对话框。这些参数我们都已经认识了。行：2。列：2。其余的参数都保留其默认值。。

2、 在编辑视图界面中生成了一个表格。表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。当光标移到点上就可以分别调整表格的高和宽。移到表格的边框线上也可以调整。

3、 在表格的第一格按住左键不放，向下拖拽选中二格单元格。

然后在展开的属性面板中选择合并单元格按钮。将表格的单元格合并。如果要分割单元格，则可以用合并单元格按钮右边的按钮。

4、 用鼠标拖拽表格的边框调整到适当的大小。

5、 单击左边的单元格，然后输入“摄影作品赏析”文字，并调整大小，因是竖排应每个字回车一次。如果需要调整格子的大小。只需要鼠标的光标移动到边框上拖拽即可。

6、 在右边上下单元格内分别插入图片和文本。页面的基本样子有了。

7、 光标移动到表格的边框上单击。表格周围出现调整框，表示选中整张表格。然后，在属性面板中将“边框”值设置适合的值，如果为0，边框在编辑状态，为虚线显示，浏览时就看不见了。

一个符合要求的页面在表格的帮助下做好了。

通过上面的操作我们对于表格有了一个初步的认识。还要提示一点，对整幅表格操作和对一个单元格操作的时候，相应的属性面板是不同的。

表格颜色设置，选择整幅表格后，利用属性面板的颜色选择器设置背景色。单元格也可单独设置。鼠标在需要设置的单元格点一下，其余操作同上。

下面我们就来看看这些属性面板的区别。

表格的属性面板，要出现这个面板必须先选中整幅表格，方法上面已经提到过了。您可以在众多选项中填入需要的参数。

选中了单元格之后属性面板就发生如下变化了。选择行或者列都属于选中单元格。

对表格操作的几种常用方式：

合并：将选中的连续单元格合并成为一个单元格。

分割：将一个单元格分割成若干单元格。

水平对齐方式：分为(左)(中)(右)三种。

垂直对齐方式：分为(顶)(居中)(居底)(基线对齐)

表格还可以增加或者删除行或者列。在一个单元格中单击鼠标右键。在右键菜单中选择表格选项>>选择“插入行或列”。系统会弹出对话框如下。

在对话框里填入数据即可。最后要说的是选中表格中的各种元素的方法：

选中一行，把光标移到该行的最左边单元格的左面，光标会变成箭头状。单击就可以选中一行。

选中一列，把光标移到该列的最上边单元格的上面，光标会变成箭头状，然后单击可以选中一列。

选中整张表格，把光标移到表格的左上角或右边框或下边框线上。单击即可选中整幅表格。选中的表格会在周围出现一个黑框表示整张表格选中了。

选中单元格。单元格可以同时选中多个。选择连续的单元格，光标先选中的一个单元格，按shift键不放，选取最后一个单元格。选不连续的单元格。按住Ctrl键，点取所需要的单元格即可。

我们对于表格的使用就讲到这里，表格是网页制作的基本技术，只有通过不断实践才能充分掌握。

10

dreamweaver入门(2004版本):框架技术：

框架技术

在浏览网页的时候，我们常常会遇到这样的一种导航结构。就是超级连接做在左边单击以后链接的目标出现在右面。或者在上边单击链接指向的目标页面出现在下面。要做出这样的效果，必须使用框架。为了更好的理解什么是框架。我们画一张示意图来进行讨论。

这是一个左右结构的框架。事实上这样的一个结构是由三个网页文件组成的。首先外部的框架是一个文件，图中我们用index.htm命名。框架中左边命名为A，指向的是一个网页A.htm。右边命名为B，指向的是一个网页B.htm。

下面我们就来从头开始制作一个框架。(以左右框架结构为例)

1、点“文件”菜单>新建，弹出“新建文档”

或在插入栏>布局>选＂框架：左框架＂

Dreamweaver MX 2004生成一个空白的框架页面，

2、选择「窗口」菜单＞“框架”，弹出“框架”面板。从框架面板可知，系统对左右框架生成命名。左框架名为：leftFrame，右框架名为：mainFrame，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。

3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是一个框架结构文件。我们按照惯例都命名为index.htm。

保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。

虚线笼罩在右边就是保存框架中右边网页。

虚线笼罩在左边就是保存框架中左边的网页：

三个页面保存完毕。

4、下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为mainFrame。

6、设置完毕，保存全部，按F12预览网页。链接指向的页面出现在右边框架中。

7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。

框架有很多优点，但是若理解不很透彻，容易搞混。如果您的网站页面不多，可以创建一个不使用框架的Web页面来完成框架的功能。例如，如果您想让导航条显示在页面的左侧或顶部，既可以使用框架页面，也可以在每一页包含该导航条而不使用框架。

END