DreamWeaver 的操作環(huán)境

通過這一節(jié)知識(shí)點(diǎn)的學(xué)習(xí)，大家將會(huì)了解和掌握 Dreamweaver 的操作環(huán)境，基本的操作，你會(huì)見識(shí)到 Dreamweaver 主界面都有哪些神奇的功能？ 以及如何用 Dreamweaver 創(chuàng)建你的第一個(gè)空白網(wǎng)頁。這一節(jié)將是踏入 Dreamweaver 世界的基礎(chǔ)，難度較低也很容易跟上，下面就讓我們正式進(jìn)入Dreamweaver 的世界吧。

1. Dreamweaver 的操作界面？

Dreamweaver 2018 CC 的操作界面主要有 菜單欄，文檔窗口，屬性面板，浮動(dòng)面板組 四個(gè)部分，下面我們來逐個(gè)看一下它們是干什么用的？

1.1 菜單欄

菜單欄主要有：文件、編輯、查看、插入、工具、查找、站點(diǎn)、窗口、幫助幾個(gè)按鈕組成，大家不要覺得很多理不清頭緒，我們接下來的學(xué)習(xí)中都會(huì)用到，只要用過了，你就很難再忘記這個(gè)功能是如何使用的了。在后面的知識(shí)點(diǎn)中我們講解 Dreamweaver 功能具體操作中將給以上按鈕充分的講解?，F(xiàn)階段，我們只需要大致知曉這些按鈕的存在就好。

1.2 文檔窗口

文檔窗口就是咱們當(dāng)前制作的這個(gè)頁面的編輯區(qū)域，也就是說今后咱們的主要操作都會(huì)在這個(gè)文檔窗口里面操作。這個(gè)文檔窗口四周有橫向、縱向2個(gè)方向的標(biāo)尺，這個(gè)標(biāo)尺可以今后幫助我們精準(zhǔn)定位咱們要操作的元素。

這里的元素，指的是超鏈接、圖片、文本塊等構(gòu)成一個(gè)網(wǎng)頁的組成部分。現(xiàn)在大千世界的每一個(gè)網(wǎng)頁都是由很多這樣的元素組成的。

文檔窗口有三種狀態(tài)可以給大家查看，分別是：代碼視圖、拆分視圖、設(shè)計(jì)視圖。這里的每一種視圖就是我們想以怎樣的方式來看我們正在做的網(wǎng)頁。比如，你想看網(wǎng)頁的源代碼，就打開代碼視圖，想用肉眼邊看邊調(diào)整元素屬性，就用設(shè)計(jì)視圖。

那么我們分別點(diǎn)擊屏幕上文檔窗口里的代碼、拆分、設(shè)計(jì)幾個(gè)詞的按鈕，就可以在不同的視圖之間切換，十分方便迅速。

所謂“術(shù)業(yè)有專攻”，Dreamweaver 這個(gè)軟件的優(yōu)秀之處就在于，在每個(gè)細(xì)節(jié)都做到盡量讓大家體驗(yàn)舒適和方便。

1.3 屬性面板

屬性面板上面已經(jīng)說過元素是什么了。而這個(gè)屬性面板就是咱們?nèi)?duì)元素進(jìn)行調(diào)整的。同學(xué)們想一想，一個(gè)元素?cái)[放在文檔窗口里后，不一定就是我們最終的想要的樣子。那如何改變這個(gè)元素？就是改變它的屬性。屬性，就是事物的性質(zhì)，比如桌子有長、寬、高的屬性，一頭大象有體重的屬性。我們要想讓一個(gè)元素按照我們想要的樣子顯示在屏幕上的網(wǎng)頁里，就屬性面板里在改它的屬性就對(duì)了。每個(gè)頁面中不同的元素有不同的屬性，我們不必全部記憶，這樣既耗費(fèi)時(shí)間，最終也不一定達(dá)到長久記憶。

如果第一次打開 Dreamweaver CC 2018 的小伙伴可能看不到這個(gè)屬性面板，不必恐慌，只要點(diǎn)擊菜單欄中的窗口（W），再在下拉列表中選擇屬性。這樣屬性面板就會(huì)出現(xiàn)在屏幕上了！操作如圖：

Tips：每個(gè)頁面中不同的元素有不同的屬性，我們不必全部記憶，這樣既耗費(fèi)時(shí)間，最終也不一定達(dá)到長久記憶。正確做法是在使用到某個(gè)元素的時(shí)候在屏幕上的文檔窗口里點(diǎn)擊這個(gè)元素，這個(gè)時(shí)候?qū)傩悦姘鍟?huì)根據(jù)你點(diǎn)擊的元素的不同，展示出不同的屬性設(shè)置，到時(shí)候我們可以通過 Dreamweaver 清晰地看到每個(gè)元素有哪些屬性，以及這些屬性可以調(diào)整的范圍。

經(jīng)驗(yàn)：

有過 HTML 基礎(chǔ)的同學(xué)或許能夠明白，這里調(diào)整的屬性對(duì)應(yīng)的是 HTML 中 HTML 元素的屬性。

我們要時(shí)刻注意點(diǎn)擊了屏幕上的元素后，屏幕下方屬性面板中各屬性顏色。灰色的代表屬性不可修改也不可點(diǎn)擊。其余的屬性我們可以根據(jù)需求編輯更改。

1.4 浮動(dòng)面板組

浮動(dòng)面板組，除了上述我們說的之外的所有面板就是浮動(dòng)面板，所有浮動(dòng)面板編一個(gè)組的話就叫浮動(dòng)面板組。

2. Dreamweaver 如何創(chuàng)建一個(gè)文檔/網(wǎng)頁？

我們先來學(xué)習(xí)一下如何在 Dreamweaver 中創(chuàng)建一個(gè)空白文檔。

操作步驟：

步驟1：

首先，在你的電腦桌面上找到 Dreamweaver 圖標(biāo)，雙擊打開桌面上的 Dreamweaver.exe 。

步驟2：

點(diǎn)擊文件，點(diǎn)擊創(chuàng)建，選擇HTML，填寫一些頁面信息后，最后點(diǎn)擊創(chuàng)建：

經(jīng)驗(yàn)：

在這里我們可以看見 Dreamweaver 不僅可以創(chuàng)建 HTML 文檔，還可以創(chuàng)建 XML、XHTML、JSP、ASP 等多種類型的文檔。從這里我們可以看到，Dreamweaver 的功能遠(yuǎn)遠(yuǎn)不止創(chuàng)建靜態(tài)網(wǎng)頁，而是構(gòu)建一個(gè)動(dòng)態(tài)的功能強(qiáng)大的網(wǎng)站。

什么是靜態(tài)網(wǎng)頁？什么又是動(dòng)態(tài)網(wǎng)頁？

一般情況下，我們講的靜態(tài)網(wǎng)頁就是作為使用者的你，不能夠?qū)W(wǎng)頁展示的信息進(jìn)行更改的。而動(dòng)態(tài)網(wǎng)頁，正是你在現(xiàn)代社會(huì)中看到的那些可以用鼠標(biāo)點(diǎn)擊，并且給你的點(diǎn)擊做出響應(yīng)的網(wǎng)頁。咱們可以理解靜態(tài)網(wǎng)頁為沒有生命力的死掉的網(wǎng)頁。動(dòng)態(tài)網(wǎng)頁是觸角靈活的活網(wǎng)頁。

步驟3：

點(diǎn)擊菜單欄中修改按鈕，在彈出的下拉列表中，選擇頁面屬性。點(diǎn)擊頁面屬性，在這里我們可以看到，我們可以通過這個(gè)頁面屬性功能，設(shè)置頁面的尺寸，大小，背景顏色，字體，排版方式，超鏈接樣式等。

3. 小結(jié)

本小節(jié)對(duì) Dreamweaver 的軟件的主界面，一些專有名詞做了比較清晰的講解。同時(shí)，我們還講解了一下如何在 Dreamweaver 中創(chuàng)建一個(gè)空白文檔的過程。其實(shí)全程并沒有很難的內(nèi)容。只要大家在自己的電腦上跟著操作，相信很快就可以掌握的很熟練。

本小節(jié)的重點(diǎn)是：學(xué)習(xí)用 Dreamweaver 創(chuàng)建一個(gè)空白文檔。

本小節(jié)的難點(diǎn)是：理解 Dreamweaver 主界面各個(gè)面板的功能劃分。