DreamWeaver 的操作環(huán)境

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

1. Dreamweaver 的操作界面？

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

1.1 菜單欄

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

1.2 文檔窗口

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

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

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

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

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

1.3 屬性面板

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

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

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

經(jīng)驗：

有過 HTML 基礎的同學或許能夠明白，這里調(diào)整的屬性對應的是 HTML 中 HTML 元素的屬性。

我們要時刻注意點擊了屏幕上的元素后，屏幕下方屬性面板中各屬性顏色?；疑拇韺傩圆豢尚薷囊膊豢牲c擊。其余的屬性我們可以根據(jù)需求編輯更改。

1.4 浮動面板組

浮動面板組，除了上述我們說的之外的所有面板就是浮動面板，所有浮動面板編一個組的話就叫浮動面板組。

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

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

操作步驟：

步驟1：

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

步驟2：

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

經(jīng)驗：

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

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

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

步驟3：

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

3. 小結(jié)

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

本小節(jié)的重點是：學習用 Dreamweaver 創(chuàng)建一個空白文檔。

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