1.3　网页的基本操作

通过1.2节的学习，读者对Dreamweaver CC 2018的工作界面应该有一个初步的认识。本节将介绍网页操作最基本的三个操作，即创建新页面、保存网页和打开已有的网页文件，让读者进一步了解Dreamweaver CC 2018的用户界面和操作体验。

1.3.1　上机练习——创建一个HTML页面

练习目标

本节通过讲解创建HTML页面的具体步骤，介绍Dreamweaver CC 2018支持的文档类型和预定义的框架、模板，使读者掌握使用“新建文档”创建页面的方法。

设计思路

首先使用“新建”命令打开“新建文档”对话框，然后选择文档类型、是否使用框架，最后单击“创建”按钮新建一个页面。

操作步骤

（1）执行“文件”|“新建”命令，弹出如图1-37所示的“新建文档”对话框。

（2）在对话框最左侧选择想要创建文件的类型和模板。

　新建文档：新建一个空白的网页文件。

　启动器模板：创建一个启动器页面。选中这一项后，可以在预置的启动器类型中选择示例页面布局，快速地创建比较专业的页面。

　网站模板：在已有的站点中选择一个模板，创建一个与模板文件布局、风格相同的页面。但只有可编辑区域中的内容可以修改，页面的其他区域处于锁定状态。

本节练习选择“新建文档”。

（3）在“新建文档”对话框中的“文档类型”列表中选择“HTML”。

在这里，读者可以看到Dreamweaver CC 2018可创建的文档类型有十多种。

（4）在“框架”区域选择是否应用Bootstrap框架。

　无：不采用框架。

　Bootstrap框架：基于Bootstrap网页设计框架生成页面。Bootstrap框架包括适用于按钮、表格、导航、图像旋转视图等网页元素的CSS和HTML模板，以及几个可选的JavaScript插件，用于开发或编辑移动优先的网站，以适应不同屏幕大小。只具备基本编码知识的开发人员也能够开发出快速响应的出色网站。

新版本软件提供对Boots trap 4.0.0版的支持。

知识拓展

Bootstrap文档与流体网格文档的区别

在Dreamweaver CC 2018中创建Bootstrap文档与创建流体网格文档类似。不同的是，流体网格文档针对三种基本外形规格（手机、平板和台式机）创建，而Bootstrap针对四种基本屏幕大小（小型、中型、大型和特大型）创建文档，如图1-38所示。

本节练习选择“无”。

（5）设置文档类型，也就是设置网页的HTML代码的版本。默认使用HTML5。

（6）单击“创建”按钮关闭对话框。即可创建一个空白的HTML文件，“拆分”视图如图1-39所示。

从图1-39可以看出，尽管当前的网页文件是空白的，但“代码”视图中已自动生成了必要的HTML代码。

1.3.2　保存网页

在Dreamweaver CC 2018中，保存网页文件的方法随保存文件目的的不同而不同。

1. 只保存当前编辑的页面

执行“文件”|“保存”命令。

如果要将当前编辑的页面以另一个文件名保存，则执行“文件”|“另存为”命令。

2. 保存打开的所有页面

执行“文件”|“保存全部”命令。

3. 以模板的形式保存

执行“文件”|“另存为模板”命令，打开“另存模板”对话框：在“站点”下拉列表框中选择模板保存的站点，在“另存为”文本框中输入文件的名称，然后单击“保存”按钮。

1.3.3　上机练习——打开已有的网页

练习目标

如果要编辑一个网页文件，必须先打开该文件。Dreamweaver CC 2018可以打开多种格式的文件，如htm、html、shtml、asp、php、js、dwt、xml、lbi、as、css等。通过本节的练习实例使读者掌握打开网页文件的操作方法。

设计思路

首先使用“打开”命令弹出“打开”对话框，然后选择网页文件所在的路径，选中要打开的文件，最后单击“打开”按钮。

操作步骤

（1）启动Dreamweaver CC 2018，执行“文件”|“打开”命令，弹出“打开”对话框，如图1-40所示。

（2）浏览到网页所在的路径，在文件列表中选中要打开的文件，然后单击“打开”按钮；或者双击所需的文件，即可在Dreamweaver CC 2018中打开指定的网页，如图1-41所示。

在Dreamweaver CC 2018中打开网页之后，用户在“设计”视图或“代码”视图中选中网页上的对象，对网页上的内容进行修改，例如替换图片、编辑文本等。具体方法将在本书后续章节中进行介绍。