第7章  网页制作Dreamweaver 教学提示：当前在网页制作领域中，首屈一指的工具就是Macromedia公司出品的网页三剑客，这3个软件的功能分别为：
Dreamweaver是创建和管理网站的专业软件，不但能够快速构建网站结构，制作网页链接，而且还可以基于模板创建风格统一的网站。Flash是一种用于制作和编辑交互性动画和电影的软件，由它生成的文件可以单独成为网页，代表了网页和多媒体技术发展的方向，现在是网上最热的动画制作软件。Fireworks是同时处理矢量图和位图的专业化Web图像设计软件，可以直接生成包含HTML和JavaScript代码的动态图像，而且能和DW无缝链接。由于篇幅所限，下面主要介绍Dreamweaver的使用方法。
教学目标：本章主要介绍使用Dreamweaver制作网页的基本方法，包括网站的构建、网页的编辑、简单动态网页的制作等。通过本章的学习，使大家掌握如何运用Dreamweaver 制作出图文并茂、生动形象的网页。
7.1  Dreamweaver基础知识
Macromedia Dreamweaver MX 2004(DW MX 2004)，用于对Web站点、Web页和 Web 应用程序进行设计、编码和开发。和FrontPage相比，DW MX 2004 包含有一个崭新、简洁、高效的界面，且性能也得到了改进。此外，还包含了众多新增的功能，改善了软件的易用性并使你无论处于设计环境还是编码环境都可以方便地生成页面。通过本节的学习，你将了解关于网页制作的基础知识，熟悉Dreamweaver灵活的用
户界面，并学习制作简单的网页。
7.1.1  窗口布局
Dreamweaver MX 2004 提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。可以选择面向设计人员的布局或面向手工编码人员需求的布局。首次启动 Dreamweaver 时，会出现一个工作区设置对话框(如图7.1所示)。
可以从中选择一种工作区布局。如果你不熟悉编写代码，选择“设计者”，用户可以直观地设计并查看网页。在“代码编写者”窗口中，用户可以直接编写脚本代码，方便了手工编码人员使用Dreamweaver进行操作。如果以后想更改工作区，可以使用“编辑”菜单“首选参数”对话框切换到一种不同的工作区。“编辑”菜单“首选参数”对话框如图7.2所示。
第7章  网页制作Dreamweaver
·285·
·
285·
图7.1  “工作区设置”对话框
图7.2  “首选参数”对话框
7.1.2  工具栏
Dreamweaver 包含3种工具栏，“标准”工具栏，“文档”工具栏，“插入”工具栏。如图7.3所示。如果要将这些工具栏显示在“文档”窗口中，可以执行“查看”→“工具栏”命令。
1. “插入”工具栏
“插入”工具栏(如图7.4所示)，包含用于将各种类型的“对象”(如图像、表格和层)插入到文档中的按钮。每个对象都是一段HTML 代码，允许你在插入它时设置不同的属性。例如，你可以通过单击“插入”工具栏中的“表格”按钮插入一个表格，也可以不使用“插入”工具栏而使用“插入”菜单插入对象。
某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。例如，如果从“图像”按钮的快捷菜单中单击“图像占位符”，下次单击
微机应用基础
·286· ·286·
“图像”按钮时，
Dreamweaver 会插入一个图像占位符。每当从快捷菜单中单击一个新选项时，该按钮的默认操作都会改变。“插入”栏按以下的类别进行组织。
图
7.3  栏目说明
图7.4 “插入”工具栏
“常用”类别可以创建和插入最常用的对象，例如图像和表格。
“布局”类别可以插入表格、div 标签、层和框架。还可以从3个表格视图中进行选
择：“标准”(默认)、“扩展表格”和“布局”。当选择“布局”模式后，可以使用Dreamweaver
布局工具：“绘制布局单元格”和“绘制布局表格”。
“表单”类别包含用于创建表单和插入表单元素的按钮。
“文本”类别可以插入各种文本格式设置标签和列表格式设置标签。
“HTML ”类别可以插入用于水平线、头内容、表格、框架和脚本的HTML 标签。  “服务器代码”类别仅适用于使用特定服务器语言的页面，这些类别中的每一个都提供了服务器代码对象，可以将这些对象插入代码视图中。
“应用程序”类别可以插入动态元素，例如记录集、重复区域以及记录插入和更新    表单。
“Flash 元素”类别可以插入Flash 元素。
“收藏”类别可以将“插入”工具栏中最常用的按钮分组和组织到某一常用位置。
2. “文档”工具栏
“文档”工具栏中包含按钮，这些按钮可以在文档的不同视图间快速切换：代码视图、
第7章网页制作Dreamweaver·287·设计视图、同时显示代码和设计视图的拆分视图。
“文档”工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图7.5所示。
图7.5  “文档”工具栏
以下对选项进行说明。
显示代码视图：仅在“文档”窗口中显示代码视图。
显示代码视图和设计视图：在“文档”窗口的一部分中显示代码视图，而在另一部分中显示设计视图。当选择了这种组合视图时，“视图选项”菜单中的“在顶部查看设计视图”命令变为可用。使用该选项指定在“文档”窗口的顶部显示哪种视图。
显示设计视图仅在“文档”窗口中显示设计视图。
标题允许你为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。
没有浏览器/检查错误：使你可以检查跨浏览器兼容性。
文件管理：显示“文件管理”弹出菜单。
在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。
刷新设计视图：当在代码视图中进行更改后刷新文档的设计视图。
视图选项：允许你为代码视图和设计视图设置选项。
3. 状态栏
状态栏提供与你正在创建的文档有关的其他信息，如图7.6所示。
图7.6  状态栏
标签选择器：显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击body可以选择文档的整个正文。
窗口大小：弹出菜单(仅在设计视图中可见)用来将“文档”窗口的大小调整到预定义或自定义的尺寸。
“窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。
·287·
微机应用基础
·288· ·288· 4. 属性检查器
属性检查器(如图7.7所示
)用于查看和更改所选对象或文本的各种属性。
弹出窗口代码编写
图7.7  属性检查器
5. 面板组
面板组(如图7.8所示)是分组在某个标题下面的相关面板的集合。若要展开一个面板组，单击组名称左侧的展开箭头；若要取消停靠一个面板组，拖动该组标题条左边缘的手柄。
“文件”面板(如图7.9所示)可以管理你的文件和文件夹，无论它们是Dreamweaver 站点的一部分还是在远
程服务器上。“文件”面板还使你可以访问本地磁盘上的全部文件，类似于 Windows
资源管理器。
图7.8  面板组      图7.9 “文件”面板 Dreamweaver MX 2004提供了多种此处未说明的其他面板、检查器和窗口。若要打开其他面板，使用“窗口”菜单。
7.1.3  设置站点
W eb 站点是一组具有如相关主题、类似的设计、链接文档和资源。Dreamweaver MX 是一个站点创建和管理的工具，因此使用它不仅可以创建单独的文档，还可以创建完整的Web 站点。创建Web 站点的第一步是规划，为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。确定要创建多少页，每页上显示什么内容，页面布局的外观以及页是如何互相连接起来的，具体操作如下。
(1) 启动 Dreamweaver MX 2004。
(2) 单击“站点”→“管理站点”命令(即，从“站点”菜单中单击“管理站点”命令)，出现“管理站点”对话框。
(3) 在“管理站点”对话框中，单击“新建”按钮，然后从弹出菜单中选择“站点”命令。出现“站点定义”对话框。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。