DreamWeaver 的操作環境

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

1. Dreamweaver 的操作界面？

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

1.1 菜單欄

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

1.2 文檔窗口

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

這里的元素，指的是超鏈接、圖片、文本塊等構成一個網頁的組成部分?，F在大千世界的每一個網頁都是由很多這樣的元素組成的。

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

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

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

1.3 屬性面板

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

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

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

經驗：

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

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

1.4 浮動面板組

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

2. Dreamweaver 如何創建一個文檔/網頁？

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

操作步驟：

步驟1：

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

步驟2：

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

經驗：

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

什么是靜態網頁？什么又是動態網頁？

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

步驟3：

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

3. 小結

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

本小節的重點是：學習用 Dreamweaver 創建一個空白文檔。

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