- Dreamweaver CC2018中文版入門與提高
- 職場無憂工作室
- 5198字
- 2019-11-15 20:40:59
1.2 Dreamweaver CC 2018的工作界面
Dreamweaver CC 2018的工作區將多個文檔集中到一個界面中，這樣不僅可以降低系統資源的占用，而且還可以更加方便地操作文檔。Dreamweaver CC 2018的操作界面包括菜單欄、文檔工具欄、通用工具欄、文檔窗口、狀態欄和浮動面板組。如圖1-7所示為Dreamweaver CC 2018的操作界面。
圖1-7 Dreamweaver CC 2018的操作界面
1.2.1 菜單欄
Dreamweaver CC 2018的主菜單共分九種，文件、編輯、查看、插入、工具、查找、站點、窗口和幫助，如圖1-8所示。
圖1-8 菜單欄
1. “文件”菜單
“文件”菜單如圖1-9所示，包含文件操作的標準菜單項，還包括用于查看當前文檔或對當前文檔執行操作的命令。
2. “編輯”菜單
“編輯”菜單如圖1-10所示，包含用于基本編輯操作的標準菜單項。不僅包括文本、圖像、表格等網頁元素命令，而且提供對鍵盤快捷方式編輯器和代碼格式的訪問，以及對Dreamweaver CC 2018“首選項”的訪問。
3. “查看”菜單
“查看”菜單如圖1-11所示，用于在文檔的各種視圖之間進行切換，并且可以顯示和隱藏相關文件。
圖1-9 “文件”菜單
圖1-10 “編輯”菜單
圖1-11 “查看”菜單
4. “插入”菜單
“插入”菜單如圖1-12所示，提供將頁面元素插入到網頁中的命令。
5. “工具”菜單
“工具”菜單如圖1-13所示，用于更改選定的頁面元素的屬性，并且為庫和模板執行不同的操作。
圖1-12 “插入”菜單
圖1-13 “工具”菜單
6. “查找”菜單
“查找”菜單如圖1-14所示，用于在當前窗口、整個站點的瀏覽器中查找，還可以在HTML源程序中查找或替換源代碼。
全新的“查找和替換”工具欄位于窗口頂部，如圖1-15所示。不會阻擋屏幕的任何部分，與Dreamweaver的早期版本相比，“查找和替換”功能更加便捷且高效，在“查找”面板中輸入搜索字符串時即開始查找該字符串，并在當前文檔中高亮顯示該字符串的所有實例。
圖1-14 “查找”菜單
圖1-15 “查找和替換”對話框
7. “站點”菜單
“站點”菜單如圖1-16所示，用于創建、打開和編輯站點，以及管理當前站點中的文件。
8. “窗口”菜單
“窗口”菜單如圖1-17所示，提供對Dreamweaver CC 2018中的所有浮動面板和窗口的訪問。
9. “幫助”菜單
“幫助”菜單如圖1-18所示，提供對Dreamweaver CC 2018幫助系統的訪問，以及上、下文功能提示重置和錯誤報告的處理。
圖1-16 “站點”菜單
圖1-17 “窗口”菜單
圖1-18 “幫助”菜單
1.2.2 文檔工具欄
新建或打開一個網頁文檔后，文檔窗口頂部顯示文檔工具欄，該工具欄集中在文檔的不同視圖之間快速切換的常用命令，如圖1-19所示。
圖1-19 文檔工具欄
各個按鈕圖標的功能如下：
：顯示代碼視圖。
：將文檔窗口進行拆分，在同一屏幕中顯示“代碼”視圖和“設計”視圖或“實時視圖”。
：在不打開瀏覽器的情況下實時預覽頁面的效果。Dreamweaver CC 2018整合了“設計視圖”和“實時視圖”，單擊該按鈕右側的倒三角形按鈕，在彈出的下拉菜單中可選擇“設計”視圖。
1.2.3 通用工具欄
通用工具欄位于界面左側，開始頁面的通用工具欄如圖1-20所示，主要集中了一些與查看文檔、在本地和遠程站點間傳輸文檔，以及代碼編輯有關的常用命令和選項。
圖1-20 通用工具欄
提示：不同的視圖和工作區模式下，顯示的通用工具欄也會有所不同。
：單擊該按鈕顯示當前打開的所有文檔列表。
：單擊該按鈕彈出文件管理下拉菜單。
：單擊該按鈕，彈出實時視圖選項下拉菜單。
：隱藏／顯示可視媒體查詢欄。
：打開實時視圖和CSS檢查模式，以可視方式調整CSS屬性。
：擴展全部。
：格式化源代碼。
：應用注釋。
：刪除注釋。
：自定義工具欄。單擊該按鈕打開如圖1-21所示的“自定義工具欄”對話框，在工具列表中勾選需要的工具左側的復選框，即可將工具添加到通用工具欄中。
圖1-21 “自定義工具欄”對話框
1.2.4 文檔窗口
文檔窗口用于顯示當前打開或編輯的文檔，根據選擇的視圖不同而顯示不同的內容。
單擊文檔工具欄中的
按鈕，切換到“設計”視圖，如圖1-22所示。文檔窗口顯示的內容與瀏覽器中顯示的內容基本相同。使用Dreamweaver CC 2018提供的工具或命令，可以方便地進行創建、編輯文檔的各種工作，即使完全不懂HTML代碼的讀者也可以制作出精美的網頁。
圖1-22 “設計”視圖
單擊文檔工具欄中的
按鈕，切換到“代碼”視圖，在文檔窗口中顯示的是當前文檔的代碼，如圖1-23所示。
在編寫文檔時，如果要兼顧設計樣式和實現代碼，可以單擊工具欄中的
按鈕，使“代碼”視圖與“設計”視圖（或“實時視圖”）同屏顯示，如圖1-24所示。如果選中“設計”視圖或者“代碼”視圖中的某一部分，“代碼”視圖或者“設計”視圖中相應的網頁元素也同時被選中。
圖1-23 “代碼”視圖
圖1-24 “拆分”視圖
教你一招：默認情況下，水平拆分文檔窗口，選擇“查看”|“拆分”|“頂部的實時視圖”命令，可以將拆分的兩個視圖上、下進行調換；選擇“查看”|“拆分”|“垂直拆分”菜單命令，可以將文檔窗口左、右拆分；選擇“查看”|“拆分”|“左側的實時視圖”命令，可以將拆分的兩個視圖左、右進行調換。
1.2.5 狀態欄
Dreamweaver CC 2018的狀態欄位于文檔窗口底部，嵌有幾個重要的工具如標簽選擇器、Linting圖標、實時預覽和窗口大小等。“拆分”視圖下的狀態欄如圖1-25所示。
圖1-25 “拆分”視圖下的狀態欄
提示：不同的視圖下，狀態欄上顯示的功能圖標的多少也不相同。在“代碼”視圖中工作時，狀態欄會顯示有用的信息。
1. 標簽選擇器
顯示當前選定內容的標簽。單擊該標簽，可以選中頁面上相應的區域。例如，單擊<body>標簽可以選擇文檔的全部正文。
2. Linting圖標
Dreamweaver CC 2018支持Linting，用于調試網頁或網頁的一部分代碼，以查找任何語法或邏輯錯誤。HTML語法錯誤、CSS中的分析錯誤或JavaScript文件中的警告都是Linting要標記的內容。
狀態欄中的Linting圖標指示Linting結果：紅色
表示當前文檔包含錯誤和警告；綠色
表示當前文檔沒有錯誤。
提示：當文檔中有錯誤或警告時，單擊狀態欄上的Linting圖標，將打開“輸出”面板，如圖1-26所示。包含錯誤或警告的行將分別以紅色和黃色突出顯示，雙擊“輸出”面板中的消息可跳轉到發生錯誤的行。修復錯誤后，面板中的列表會滾動以顯示下一組錯誤。在“代碼”視圖中，將鼠標懸停在錯誤行的行號上，可以查看錯誤或警告預覽。
圖1-26 “輸出”面板
3. 文件類型
更改不同文件類型的語法高亮顯示。Dreamweaver CC 2018目前適用于以下文件類型的代碼著色：HTML、JS、CSS、PHP、XML、LESS、Sass、SCSS、SVG、Bash、C、C#、C++、clojure、CoffeeScript、Dart、Diff、EJS、Embedded Ruby、Groovy、Handlebars、Haskell、Haxe、Java、JSON、Lua、Markdown、Markdown (GitHub)、Perl、屬性、Python、RDF Turtle、Ruby、Scala、SQL、Stylus、文本、VB、VBScript、XML和YAML。
4. 窗口大小
圖1-27 “窗口大小”菜單
單擊窗口大小區域可彈出如圖1-27所示的“窗口大小”菜單，該菜單僅在“設計”視圖和“拆分”視圖下可用，用于調整“文檔”窗口的大小到預定義或自定義的尺寸，以像素為單位。
顯示的窗口大小是指瀏覽器窗口的內部尺寸（不包括邊框）。更改“設計”視圖或“實時”視圖中頁面的視圖大小時，僅更改視圖大小的尺寸，而不更改文檔尺寸。
在大多數先進的移動設備中，可根據設備的持握方式更改頁面方向。當用戶以垂直方向把握設備時，顯示縱向視圖。當用戶水平翻轉設備時，頁面將重新調整自身，以適合橫向尺寸。在Dreamweaver CC 2018中，實時視圖和設計視圖中都提供縱向或橫向查看頁面的選項，使用這些選項可預覽用于移動設備的頁面。
注意：在Windows中，用戶可以選中“全大小”選項將文檔窗口最大化，以便它填充集成窗口的整個文檔區域，此時無法調整它的大小。
5. 行號和列號
行號和列號指示鼠標指針所在的行和列。
6. 輸入模式
輸入代碼時，在INS（插入）模式和OVR（覆蓋）模式之間切換。
7. 實時預覽
Dreamweaver CC 2018支持在多個設備上同時預覽、測試網頁，且不需要安裝任何移動應用程序或將設備物理連接到桌面。
單擊“實時預覽”按鈕
，彈出如圖1-28所示的“實時預覽”窗口。
1）在瀏覽器中預覽
默認情況下，將啟動Internet Explorer預覽網頁。單擊“編輯列表”命令，如圖1-29所示的“首選項”對話框，用戶可以添加瀏覽器，并指定主瀏覽器和次瀏覽器。
圖1-28 “實時預覽”窗口
圖1-29 “首選項”對話框
Dreamweaver CC 2018已與瀏覽器連接，在瀏覽器中預覽網頁時，不需刷新瀏覽器，就能在瀏覽器中實時預覽頁面更改。
2）在設備上預覽
在多個不同外形規格的設備上同時測試網頁。利用要預覽網頁的移動設備掃描“設備預覽”窗口左側的二維碼，或復制顯示的短鏈接，并粘貼到桌面瀏覽器中，在彈出的登錄窗口中成功登錄后，已連接設備的名稱將顯示在“設備預覽”窗口中（圖1-30），并可通過該設備預覽網頁。
圖1-30 “設備預覽”窗口
注意：要在設備上預覽網頁，必須具備以下條件：
（1）設備上安裝了QR代碼掃描儀。
（2）桌面和移動設備已連接到Internet，并位于同一網絡中。
（3）已準備好Adobe ID憑據。在預覽時，使用桌面上Dreamweaver所用的Adobe ID登錄設備。
（4）設備的瀏覽器設置中啟用了JavaScript和Cookie。
1.2.6 浮動面板組
在Dreamweaver CC 2018工作環境的右側停靠著許多浮動面板，并且自動對齊。這些面板可以自由地在界面上拖動，也可以將多個面板組合在一起，成為一個選項卡組，以擴充文檔窗口。
在“窗口”菜單的下拉菜單中單擊面板名稱可以打開或者關閉這些浮動面板。
1. “屬性”面板
在制作網頁時，對象都有各自的屬性，就要“屬性”面板對對象屬性進行設置。“屬性”面板的設置項目會根據對象的不同而變化，如圖1-31所示為在選中圖形對象時“屬性”面板上的內容。
圖1-31 “屬性”面板
默認情況下，Dreamweaver CC 2018沒有開啟“屬性”面板，用戶可以通過“窗口→屬性”命令打開，并且“屬性”面板上的大部分內容都可以在“編輯”菜單中找到。
“屬性”面板分成上、下兩部分，單擊面板右下角的
按鈕可以關閉“屬性”面板的下面部分。此時，
按鈕變成
按鈕，單擊此按鈕可以重新打開“屬性”面板的下面部分。
2. “插入”面板
網頁的內容雖然多種多樣，但是都可以稱為對象，大部分的對象都可以通過“插入”面板插入。Dreamweaver CC 2018默認開啟“插入”面板，在文檔窗口右側的浮動面板組中單擊“插入”頁簽，即可顯示“插入”面板，如圖1-32所示。
“插入”面板的初始視圖為“HTML”面板，單擊“插入”面板中“HTML”右側的下拉按鈕，即可在彈出的下拉菜單中選擇需要的面板，從而在不同的面板之間進行切換，如圖1-33所示的“隱藏標簽”命令。
如果要在文檔中添加某一個對象，打開相應類別的“插入”面板，然后單擊相應的圖標即可。
圖1-32 “插入”面板
圖1-33 “隱藏標簽”命令
教你一招：默認狀態下，“插入”面板中的對象圖標顯示右側標簽，如圖1-32所示。如果單擊如圖1-33中下拉菜單中的“隱藏標簽”命令，則只顯示對象圖標而不顯示圖標右側的標簽，如圖1-34所示。
圖1-34 隱藏標簽的“HTML”插入面板
3. 其他浮動面板
浮動面板的一個好處是可以節省屏幕空間。用戶可以根據需要顯示或隱藏浮動面板，其他浮動面板的功能簡要介紹如下。
資源：管理站點資源，比如模板、庫文件、各種媒體、腳本等。
行為：為頁面元素添加、修改Dreamweaver CC 2018預置的行為和觸發事件，創建簡單的交互效果。
代碼檢查器：在單獨的編碼窗口中查看、編寫或編輯代碼，就像在“代碼”視圖中工作一樣。
CSS設計器：定義、編輯CSS樣式。
CSS過渡效果：創建CSS過渡效果。使用CSS過渡效果可將平滑屬性變化應用于頁面元素，以響應觸發器事件，如懸停、單擊和聚焦。
DOM：呈現包含靜態和動態內容的交互式HTML樹。在DOM面板中編輯HTML結構，可在實時視圖中查看即時生效的更改。
Extract：提取Photoshop復合中的CSS、圖像、字體、顏色、漸變和度量值，直接添加到網頁中。
文件：管理本地計算機的文件及站點文件。
jQuery Mobile色板：使用此面板可以在jQuery Mobile CSS文件中預覽所有色板（主題），或從jQuery Mobile Web頁的各種元素中刪除色板。
Git：該面板用于高效地對網站資源進行版本管理，可以使用文件名搜索存儲庫中的文件，并在搜索結果中查看文件的狀態，幫助用戶跟蹤已暫存、已修改和未跟蹤的文件。
結果：提供HTML、CSS、ASP、JSP等一系列代碼的參考資料、驗證是否有代碼錯誤、檢查各種瀏覽器對當前文檔的支持情況、檢驗是否存在斷點鏈接，以及站點服務器的測試結果。
代碼片斷：收集、分類一些非常有用的小代碼，以便在網頁中反復使用。
擴展：添加擴展功能。
注意：在安裝擴展功能前必須安裝功能擴展管理器，用于安裝和管理Adobe應用程序中的擴展功能。如果要在多用戶操作系統中安裝所有用戶都能訪問的擴展功能，必須以管理員身份（Windows）或Root身份（Mac OS X）登錄。
1.2.7 上機練習——組合、拆分浮動面板組
練習目標
1-2 上機練習——組合、拆分浮動面板組
Dreamweaver CC 2018三個重要的功能分別是網頁設計、代碼編寫和應用程序開發，相應的浮動面板也可以這樣分類。在實際使用中，用戶應該根據自己的設計習慣，將常用的面板組合在一起，并放在適當的地方，以配置出最適合于個人使用的工作環境。結合本節的練習實例，使讀者掌握組合、拆分浮動面板組的具體操作方法。
設計思路
首先將“插入”面板從“文件”面板組中拆分出來，然后與“資源”面板合并為一個面板組。
操作步驟
（1）選擇“窗口”|“插入”命令，打開“插入”面板。
（2）在“插入”面板的標簽上按下鼠標左鍵，然后拖動到合適的位置，釋放鼠標。此時“插入”面板成為一個獨立的面板，可以在工作界面上隨意拖動，如圖1-35所示。
（3）選擇“窗口”|“資源”命令，打開“資源”面板。
（4）在“資源”面板的標簽上按下鼠標左鍵，然后拖動到“插入”面板上，此時“插入”面板頂端將以藍色顯示，表示“插入”面板將到達的目的位置，釋放鼠標。即可將“插入”面板與“資源”面板進行合并，如圖1-36所示。
圖1-35 分離出的“插入”面板
圖1-36 組合“資源”面板和“插入”面板