【任务1-3】 Dreamweaver工具的使用_网页设计与制作项目教程（HTML+CSS+JavaScript）-QQ阅读男生轻小说网

上QQ阅读APP看书，第一时间看更新

【任务1-3】 Dreamweaver工具的使用

需求分析

网页制作过程中，为了开发方便，通常我们会选择一些较便捷的工具，如Editplus、notepad++、sublime、Dreamweaver等。实际工作中，最常用的网页制作工具是Dreamweaver，本书中的案例将全部使用Dreamweaver工具编写。下面，本节将详细介绍Dreamweaver工具的使用。

知识储备

1.Dreamweaver界面介绍

本书使用的版本是Adobe Dreamweaver CS6，关于软件的安装在此就不介绍了，我们直接讲解软件安装后如何使用。

双击运行桌面上的软件图标，进入软件界面。为了统一，建议大家选择菜单栏中的【窗口】→【工作区布局】→【经典】选项，如图1-16所示。

图1-16 Dreamweaver软件打开界面

接下来，选择菜单栏中的【文件】→【新建】选项，会出现“新建文档”窗口。这时，在文档类型下拉选项中选择XHTML 1.0 Transitional，单击【创建】按钮，如图1-17所示，即可创建一个空白的HTML文档，如图1-18所示。

图1-17 新建HTML文档窗口

图1-18 空白的HTML文档

如果是初次安装使用Dreamweaver工具，创建空白HTML文档时可能会出现图1-19所示的界面，这时单击【代码】选项即可出现图1-18所示的界面效果。

图1-19 初次使用Dreamweaver新建HTML文档

图1-20所示即为软件的操作界面，主要由6部分组成，包括菜单栏、插入栏、文档工具栏、文档窗口、属性面板及其他常用面板。

图1-20 Dreamweaver操作界面

下面，将对图1-20中的每个部分进行详细讲解，具体如下。

（1）菜单栏

Dreamweaver 菜单栏包括文件、编辑、查看、插入、修改、格式、命令、站点、窗口、帮助这10个菜单项，如图1-21所示。

图1-21 Dreamweaver菜单栏

每个菜单项的简单介绍如下。

•“文件”菜单：包含文件操作的标准菜单项，如“新建”“打开”“保存”等。文件菜单还包含各种其他选项，用于查看当前文档或对当前文档执行操作，如“在浏览器中预览”等。

•“编辑”菜单：包含文件编辑的标准菜单项，如“剪切”“拷贝”和“粘贴”等。还包括选择和查找选项，并且提供软件快捷键编辑器、标签库编辑器和首选参数编辑器的访问。

•“查看”菜单：用于选择文档的视图方式（设计视图和代码视图），并且可以用于显示或隐藏不同类型的页面元素和工具。

•“插入”菜单：用于将各个对象插入文档，例如插入图像、Flash等。

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

•“格式”菜单：用于设置文本的各种格式和样式。

•“命令”菜单：提供对各种命令的访问，包括根据格式参数选择设置代码格式的命令，以及优化图像、排序表格等命令。

•“站点”菜单：包括站点操作菜单项，这些菜单项可用于创建、打开和编辑站点，以及管理当前站点中的文件。

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

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

（2）插入栏

Dreamweaver 很贴心，对于一些经常使用的标记，可以直接选择插入栏里的相关按钮，这些按钮一般都和菜单中的命令相对应。插入栏集成了多种网页元素，包括超链接、图像、表格、多媒体等，如图1-22所示。

图1-22 插入栏常用元素

单击插入栏上方相应的选项，如“布局”“表单”等，插入栏下方会出现不同的工具组。选择工具组中不同的按钮，可以创建不同的网页元素，例如选择“常用”选项下面的按钮时，可以快速创建超链接。

（3）文档工具栏

“文档”工具栏提供了各种“文档”视图窗口，如代码、拆分、设计视图，还提供了各种查看选项和一些常用操作，如图1-23所示。

图1-23 文档工具栏

如果要显示或隐藏文档工具栏，可以选择【查看】→【工具栏】→【文档】菜单命令。下面，介绍其中几个常用的按钮，它们的功能如下。

• “显示代码视图”：单击此按钮，文档窗口中将只留下代码视图，收起设计视图。

• “显示代码和设计视图”：单击此按钮，文档窗口中将同时显示代码视图和设计视图，以一条间隔线分开，拖曳间隔线可以改变两者所占屏幕的比例。

• “显示设计视图”：单击此按钮，文档窗口中收起代码视图，只留下设计视图。

• “标题”：此处可以修改文档的标题，它将修改源代码头部<title>标记中的内容，默认情况下为“无标题文档”。

• “在浏览器中预览/调试”：单击可选择浏览器对网页进行预览或调试。

• “刷新”：在“代码”视图中进行更改后，单击该按钮可刷新文档的“设计”视图。

（4）文档窗口

文档窗口是 Dreamweaver 中最常用到的区域之一，此处会显示所有打开的文档。单击文档工具栏里的“代码”“拆分”“设计”这3个按钮可变换区域的显示状态，图1-24所示为“拆分”状态下的结构，左方是代码区，右方是视图区。

图1-24 文档窗口

（5）属性面板

属性面板主要用于显示在文档窗口中所选中元素的属性，Dreamweaver 允许用户在属性面板中直接对元素的属性进行修改。选中的元素不同，属性面板中的内容也不一样。图1-25所示为图像的属性面板。

图1-25 图像属性面板

单击属性面板右上角的图标，可以打开选项菜单。如果属性面板没有显示，可以从菜单栏中选择【窗口】→【属性】选项，或者用快捷键Ctrl+F3直接调出。

2.Dreamweaver初始化设置

为了使初学者更好地认识Dreamweaver工具，希望大家按照本书要求对Dreamweaver进行初始化设置，具体如下。

（1）工作区布局设置

打开Dreamweaver工具界面，选择菜单栏里的【窗口】→【工作区布局】→【经典】选项。

（2）必备面板

设置为“经典”模式后，需要把常用的3个面板调出来，也就是分别选择菜单栏【窗口】菜单项下的【插入】、【属性】、【文件】这3个选项，如图1-26所示。

（3）新建默认文档设置

单击菜单栏中的【编辑】→【首选参数】选项（其快捷键为Ctrl+U），选中左侧分类中的“新建文档”菜单，右边就会出现对应的设置，按照图1-27中所示，选择目前最常用的HTML文档类型和编码类型。

设置好新建文档的首选参数后，再新建HTML文档时，Dreamweaver就会按照默认设置直接生成所需要的代码。

图1-26 工作区布局模式

图1-27 新建HTML默认文档设置

（4）代码提示

Dreamweaver 有强大的代码提示功能，可以提高书写代码的速度。在“首选参数”对话框中可设置代码提示，选择“代码提示”菜单，然后选中“结束标签”选项中的第二项，单击【确定】按钮即可，如图1-28所示。

（5）浏览器设置

对于初学者来说，计算机上可用的三大浏览器分别是火狐浏览器、IE浏览器和谷歌浏览器。建议将Dreamweaver的默认预览浏览器（也就是主浏览器）设置为“火狐浏览器”，使用主浏览器预览网页的快捷键是F12，一般把IE浏览器或谷歌浏览器设为次浏览器，快捷键Ctrl+F12，如图1-29所示。

图1-28 Dreamweaver代码提示设置

图1-29 网页预览浏览器设置

希望大家统一按照本书要求对Dreamweaver进行初始化设置，从一开始就养成良好的操作习惯。

注意

Dreamweaver“设计”视图中的网页显示效果只能作为参考，以最终浏览器中的效果为准。

3．创建第一个网页

前面我们已经对网页、HTML、CSS、JavaScript 以及常用的网页制作工具 Dreamweaver有了一定的了解，下面将通过一个案例学习如何使用Dreamweaver创建一个包含HTML结构和CSS样式的简单网页。具体步骤如下。

（1）编写HTML代码

打开Dreamweaver，新建一个HTML默认文档，其快捷键为Ctrl+Shift+N。切换到“代码”视图，这时在文档窗口中会出现Dreamweaver自带的代码，如图1-30所示。关于这些代码，在项目2中将会详细介绍。

图1-30 新建HTML文档代码视图窗口

在代码的第5行，即<title>与</title>标记之间输入 HTML 文档的标题，这里将其设置为“我的第一个网页”。

在<body>与</body>标记之间添加网页的主体内容，如下所示：

<p>使用Dreamweaver创建第一个网页</p>

在菜单栏中选择【文件】→【保存】选项，其快捷键为Ctrl+S。接着，在弹出的“另存为”对话框中选择文件的保存地址并输入文件名即可保存文件。例如，本书将文件命名为example01.html，保存在 D 盘“网页制作项目教程（HTML+CSS+JavaScript）”文件夹下的“chapter01”文件夹中，如图1-31所示。