1.3　網(wǎng)頁(yè)的基本操作

通過(guò)1.2節(jié)的學(xué)習(xí)，讀者對(duì)Dreamweaver CC 2018的工作界面應(yīng)該有一個(gè)初步的認(rèn)識(shí)。本節(jié)將介紹網(wǎng)頁(yè)操作最基本的三個(gè)操作，即創(chuàng)建新頁(yè)面、保存網(wǎng)頁(yè)和打開(kāi)已有的網(wǎng)頁(yè)文件，讓讀者進(jìn)一步了解Dreamweaver CC 2018的用戶(hù)界面和操作體驗(yàn)。

1.3.1　上機(jī)練習(xí)——?jiǎng)?chuàng)建一個(gè)HTML頁(yè)面

練習(xí)目標(biāo)

本節(jié)通過(guò)講解創(chuàng)建HTML頁(yè)面的具體步驟，介紹Dreamweaver CC 2018支持的文檔類(lèi)型和預(yù)定義的框架、模板，使讀者掌握使用“新建文檔”創(chuàng)建頁(yè)面的方法。

設(shè)計(jì)思路

首先使用“新建”命令打開(kāi)“新建文檔”對(duì)話(huà)框，然后選擇文檔類(lèi)型、是否使用框架，最后單擊“創(chuàng)建”按鈕新建一個(gè)頁(yè)面。

操作步驟

（1）執(zhí)行“文件”|“新建”命令，彈出如圖1-37所示的“新建文檔”對(duì)話(huà)框。

（2）在對(duì)話(huà)框最左側(cè)選擇想要?jiǎng)?chuàng)建文件的類(lèi)型和模板。

　新建文檔：新建一個(gè)空白的網(wǎng)頁(yè)文件。

　啟動(dòng)器模板：創(chuàng)建一個(gè)啟動(dòng)器頁(yè)面。選中這一項(xiàng)后，可以在預(yù)置的啟動(dòng)器類(lèi)型中選擇示例頁(yè)面布局，快速地創(chuàng)建比較專(zhuān)業(yè)的頁(yè)面。

　網(wǎng)站模板：在已有的站點(diǎn)中選擇一個(gè)模板，創(chuàng)建一個(gè)與模板文件布局、風(fēng)格相同的頁(yè)面。但只有可編輯區(qū)域中的內(nèi)容可以修改，頁(yè)面的其他區(qū)域處于鎖定狀態(tài)。

本節(jié)練習(xí)選擇“新建文檔”。

（3）在“新建文檔”對(duì)話(huà)框中的“文檔類(lèi)型”列表中選擇“HTML”。

在這里，讀者可以看到Dreamweaver CC 2018可創(chuàng)建的文檔類(lèi)型有十多種。

（4）在“框架”區(qū)域選擇是否應(yīng)用Bootstrap框架。

　無(wú)：不采用框架。

　Bootstrap框架：基于Bootstrap網(wǎng)頁(yè)設(shè)計(jì)框架生成頁(yè)面。Bootstrap框架包括適用于按鈕、表格、導(dǎo)航、圖像旋轉(zhuǎn)視圖等網(wǎng)頁(yè)元素的CSS和HTML模板，以及幾個(gè)可選的JavaScript插件，用于開(kāi)發(fā)或編輯移動(dòng)優(yōu)先的網(wǎng)站，以適應(yīng)不同屏幕大小。只具備基本編碼知識(shí)的開(kāi)發(fā)人員也能夠開(kāi)發(fā)出快速響應(yīng)的出色網(wǎng)站。

新版本軟件提供對(duì)Boots trap 4.0.0版的支持。

知識(shí)拓展

Bootstrap文檔與流體網(wǎng)格文檔的區(qū)別

在Dreamweaver CC 2018中創(chuàng)建Bootstrap文檔與創(chuàng)建流體網(wǎng)格文檔類(lèi)似。不同的是，流體網(wǎng)格文檔針對(duì)三種基本外形規(guī)格（手機(jī)、平板和臺(tái)式機(jī)）創(chuàng)建，而B(niǎo)ootstrap針對(duì)四種基本屏幕大?。ㄐ⌒?、中型、大型和特大型）創(chuàng)建文檔，如圖1-38所示。

本節(jié)練習(xí)選擇“無(wú)”。

（5）設(shè)置文檔類(lèi)型，也就是設(shè)置網(wǎng)頁(yè)的HTML代碼的版本。默認(rèn)使用HTML5。

（6）單擊“創(chuàng)建”按鈕關(guān)閉對(duì)話(huà)框。即可創(chuàng)建一個(gè)空白的HTML文件，“拆分”視圖如圖1-39所示。

從圖1-39可以看出，盡管當(dāng)前的網(wǎng)頁(yè)文件是空白的，但“代碼”視圖中已自動(dòng)生成了必要的HTML代碼。

1.3.2　保存網(wǎng)頁(yè)

在Dreamweaver CC 2018中，保存網(wǎng)頁(yè)文件的方法隨保存文件目的的不同而不同。

1. 只保存當(dāng)前編輯的頁(yè)面

執(zhí)行“文件”|“保存”命令。

如果要將當(dāng)前編輯的頁(yè)面以另一個(gè)文件名保存，則執(zhí)行“文件”|“另存為”命令。

2. 保存打開(kāi)的所有頁(yè)面

執(zhí)行“文件”|“保存全部”命令。

3. 以模板的形式保存

執(zhí)行“文件”|“另存為模板”命令，打開(kāi)“另存模板”對(duì)話(huà)框：在“站點(diǎn)”下拉列表框中選擇模板保存的站點(diǎn)，在“另存為”文本框中輸入文件的名稱(chēng)，然后單擊“保存”按鈕。

1.3.3　上機(jī)練習(xí)——打開(kāi)已有的網(wǎng)頁(yè)

練習(xí)目標(biāo)

如果要編輯一個(gè)網(wǎng)頁(yè)文件，必須先打開(kāi)該文件。Dreamweaver CC 2018可以打開(kāi)多種格式的文件，如htm、html、shtml、asp、php、js、dwt、xml、lbi、as、css等。通過(guò)本節(jié)的練習(xí)實(shí)例使讀者掌握打開(kāi)網(wǎng)頁(yè)文件的操作方法。

設(shè)計(jì)思路

首先使用“打開(kāi)”命令彈出“打開(kāi)”對(duì)話(huà)框，然后選擇網(wǎng)頁(yè)文件所在的路徑，選中要打開(kāi)的文件，最后單擊“打開(kāi)”按鈕。

操作步驟

（1）啟動(dòng)Dreamweaver CC 2018，執(zhí)行“文件”|“打開(kāi)”命令，彈出“打開(kāi)”對(duì)話(huà)框，如圖1-40所示。

（2）瀏覽到網(wǎng)頁(yè)所在的路徑，在文件列表中選中要打開(kāi)的文件，然后單擊“打開(kāi)”按鈕；或者雙擊所需的文件，即可在Dreamweaver CC 2018中打開(kāi)指定的網(wǎng)頁(yè)，如圖1-41所示。

在Dreamweaver CC 2018中打開(kāi)網(wǎng)頁(yè)之后，用戶(hù)在“設(shè)計(jì)”視圖或“代碼”視圖中選中網(wǎng)頁(yè)上的對(duì)象，對(duì)網(wǎng)頁(yè)上的內(nèi)容進(jìn)行修改，例如替換圖片、編輯文本等。具體方法將在本書(shū)后續(xù)章節(jié)中進(jìn)行介紹。