网页综合设计

第七章网页综合设计－Dreamweaver

Dreamweaver是Macromedia公司出品的专门用来创建和管理网站的专业软件，应用Dreamweaver，可以轻松构建网站结构，高效地制作网页。

7.1 案例回顾

在第二章中我们对“淡蓝的天空”个人网站进行了前期的规划和设计，现将第二章已做的工作汇总如下：

注：“感动你的心灵”和“那笨拙的脚印”为重点栏目。

以上为“淡蓝的天空”个人网站前期已做的相关工作，本章仍然以第二章案例为准来详细介绍完整的网页设计过程，期望以点代面使学习者对网站的设计过程有个完整设计思路。7.2网页综合设计

在使用Dreamweaver之前，必须先建立一个本地站点，然后才能进行后续的操作。本地站点是存放网站上所有文档和文件的地方，它可以将各种信息制作成网页的形式，然后以超链接的形式有效组织起来。本地站点需要一个名称和本地的根目录，以确定存放所有站点文件的位置，可以放在硬盘的任何位置。

实例7－1 熟悉Dreamweaver的基本环境

一、要求与目的

★掌握Dreamweaver的基本工作环境：窗口、菜单、插入、文档工具栏、状态栏等★掌握“属性”工作面板

二、过程与步骤

1．启动Dreamweaver软件

单击“开始－程序－启动－Macromedia－Macromedia Dreamweaver MX 2004”启动Dreamweaver软件。

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

图7－1 选择工作区布局

如果设计者熟悉编写代码，选择“代码编写者”；如果不熟悉编写代码，选择“设计者”。如果以后想更改工作区，可在软件正常启动后使用编辑菜单“首选参数”对话框切换到一种不同的工作区。编辑菜单“首选参数”对话框如图7－2所示：

图7－2 更改工作区

注释：“设计者”工作区是一个使用多文档界面的集成工作区，其中全部文档窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。

“代码编写者”同样是集成工作区，但将面板组停靠在左侧，文档默认状态下显示代码窗口。

本例选择“设计者”工作区界面。

2．Dreamweaver工作界面

建立新页面或者打开已经完成的页面时，会出现工作区窗口，如图7－3所示。栏目说明如下：

(1)“插入栏”，也叫工具栏（如图7－4）：包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名

称。每个对象都是一段HTML 代码，允许在插入它时设置不同的属性。例如，设计者可以通过单击“插入”栏中的“表格”按钮插入一个表格。

图7－3 Dreamweaver工作环境

图7－4 插入栏

某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。

“插入栏”中“常用”按钮里的选项说明：

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

◆“布局”类别可以插入表格、div 标签、层和框架。还可以从三个表格视图中进行

选择：“标准”（默认）、“扩展表格”和“布局”。当选择“布局”模式后，可以使用

Dreamweaver 布局工具：“绘制布局单元格”和“绘制布局表格”。

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

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

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

◆“服务器代码”类别仅适用于使用特定服务器语言的页面，这些类别中的每一个都

提供了服务器代码对象，可以将这些对象插入“代码”视图中。

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

表单。

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

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

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

(3)文档工具栏

文档工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。如图7－5。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。

图7－4 文档工具栏

以下对选项进行说明：

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

◆显示代码视图和设计视图在“文档”窗口的一部分中显示“代码”视图，而在另

一部分中显示“设计”视图。当选择了这种组合视图时，“视图选项”菜单中的“在

顶部查看设计视图”选项变为可用。请使用该选项指定在“文档”窗口的顶部显示

哪种视图。

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

◆文档标题允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档

已经有了一个标题，则该标题将显示在该区域中。

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

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

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