pg电子游戏招财猫破解

書名： Dreamweaver CC網頁設計從入門到精通（微課精編版）
作者名：前端科技
本章字數： 2046字
更新時間： 2019-12-09 14:39:22

1.1 Dreamweaver概述

Dreamweaver是Adobe推出的一款“所見即所得”的可視化網頁設計和開發工具。它提供了可視化布局、應用程序開發和代碼編輯的強大組合，使不同技術級別的開發者和設計人員都能夠快速創建符合標準的網頁和網站。

1.1.1 Dreamweaver歷史

Dreamweaver于1997年由Macromedia公司開發，版本經歷多次升級，目前為CC版本。

2000年推出的Dreamweaver UltraDev版本是第一個專為商業用戶設計的開發工具。成為當時最受歡迎的網頁設計工具，Dreamweaver也一舉成為專業網站外觀設計的先驅。

2002年5月Macromedia推出Dreamweaver MX（Dreamweaver 6.0），功能強大，不需要編寫任何代碼，即可設計動態的網頁，能提供智能代碼提示，使Dreamweaver一躍成為專業級別的開發工具。

2003年9月Macromedia推出Dreamweaver MX 2004（Dreamweaver 7.0），新增對CSS的可視化支持，將網頁設計提升到新的層次，促進了CSS的普及。

2005年年末，Adobe公司收購Macromedia，從此Dreamweaver就歸Adobe公司所有。

Dreamweaver主要版本以及它們的發布時間如表1.1所示。

表1.1 Dreamweaver主要版本列表

1.1.2 熟悉Dreamweaver主界面

啟動Dreamweaver CC之后，會顯示歡迎界面，并要求用戶從中選擇新建、打開或以其他方式創建文檔，然后就可以打開編輯窗口。如果不希望每次啟動軟件或者關閉所有文檔時，總顯示歡迎界面，在歡迎界面中選中【不再顯示】復選框即可，如圖1.1所示。

圖1.1 歡迎界面

打開編輯窗口，Dreamweaver CC主窗口工作界面分成了標題欄、菜單欄、狀態欄、【屬性】面板、浮動面板等，如圖1.2所示。

圖1.2 Dreamweaver CC主窗口操作界面

1．標題欄

在Dreamweaver CC主窗口的頂部是標題欄，當窗口變寬時，標題欄和菜單欄會并行顯示，如圖1.3所示。

圖1.3 標題欄和菜單欄并行顯示

標題欄左側是Dreamweaver圖標，右側提供3個常用工具按鈕：工作區布局、同步設置和幫助，最右側顯示有3個按鈕，分別對應主窗口的【最小化】【最大化】【關閉】命令。

2．菜單欄

Dreamweaver CC菜單欄共分10種，包括文件、編輯、查看、插入、修改、格式、命令、站點、窗口和幫助，如圖1.3所示。單擊其中任意一個菜單名，就會打開一個下拉菜單，如圖1.4所示打開【修改】下拉菜單。

如果菜單選項顯示為淺灰色，則表示在當前的狀態下不能執行。

如果菜單項右側顯示有鍵盤的代碼，則表示該命令的快捷鍵，熟練使用快捷鍵可有助于提高工作效率。

如果菜單項右側顯示有一個小黑三角的符號，則表示該命令還包含有子菜單，鼠標停留在該菜單項上片刻即可顯示子菜單，也可以單擊打開子菜單。

如果命令的右邊顯示有省略號的符號，則表示該命令能打開一個對話框，需要用戶進一步設置才能執行命令。

圖1.4 【修改】菜單

提示：除了菜單欄菜單外，Dreamweaver CC還提供各種快捷菜單，利用這些快捷菜單可以很方便地使用與當前選擇區域相關的命令。例如，單擊面板右上角的菜單按鈕，可以打開面板菜單，如圖1.5所示。右擊頁面對象或者編輯窗口，可以打開快捷菜單等。

圖1.5 面板菜單

3．工具欄

工具欄提供了一種快捷操作的方式。選擇【查看】｜【工具欄】命令，在打開的子菜單中可以選擇【文檔】【標準】【編碼】3種類型工具欄。其中，【編碼】工具欄只能夠在【代碼】視圖下可以看見和使用。

【插入】工具欄在CC版本中設計為【插入】面板。選擇【窗口】｜【插入】命令，可以打開或關閉【插入】面板，如圖1.6所示。

提示：【插入】面板中包含8類對象的快捷控制按鈕，如常用、結構、媒體、表單、jQuery Mobile、jQuery UI、模板和收藏夾。系統默認顯示為常用具欄，如果單擊【插入】面板頂部的向下箭頭，可以進行切換。

圖1.6 工具欄和【插入】面板

4．狀態欄

狀態欄位于文檔編輯窗口的底部，如圖1.7所示。在狀態欄最左側是【標簽選擇器】，顯示當前選定內容標簽的層次結構。單擊該層次結構中的任何標簽可以選擇該標簽及其全部內容。例如，單擊<body>可以選擇整個文檔。

圖1.7 文檔編輯窗口及其狀態欄

狀態欄右側為設備類型，用以選擇不同設備類型窗口，或者自定義窗口顯示大小，以便設計在不同尺寸的屏幕下的網頁顯示效果。

5．【屬性】面板

當在文檔編輯窗口中選中特定網頁對象，如文字、圖像、表格等，就可以在【屬性】面板中設置對象的屬性。【屬性】面板的設置項目會根據對象的不同而不同。

選擇【窗口】｜【屬性】命令，可以打開或關閉【屬性】面板，【屬性】面板上的大部分內容都可以在【修改】菜單項中找到。如圖1.8所示是選中文字之后的【屬性】面板效果。

圖1.8 【屬性】面板

【屬性】面板一般包含兩個選項卡：HTML和CSS。其中HTML表示使用HTML標簽或HTML標簽屬性定義對象的顯示效果，而CSS則使用CSS行內樣式定義對象的顯示效果。

提示：如果希望使用樣式表控制對象顯示效果，則建議使用【CSS設計器】進行定義，【屬性】面板設置所產生的代碼都會夾雜在標簽之中，不利于代碼優化，不便于HTML和CSS分離的設計原則。

6．浮動面板

浮動面板在Dreamweaver CC操作中使用頻率比較高，每個面板都集成了不同類型的功能。用戶可以根據需要顯示不同的浮動面板，拖動面板可以脫離面板組，使其停留在不同的位置。例如，使用鼠標單擊左側浮動面板上面的小三角按鈕，可以折疊或展開面板，如圖1.9所示。

圖1.9 展開／收縮整個浮動面板

雙擊浮動面板標題欄區域，可以展開或收縮當前面板組，如圖1.10所示。

圖1.10 展開／收縮當前浮動面板組

使用鼠標拖動面板標題欄，可以把面板從面板組中拖出來，作為單獨的窗口放置在Dreamweaver工作界面的任意位置上。同樣，用相同的方法可以將單獨面板拖回默認狀態。

官术网_书友最值得收藏!

Dreamweaver CC網頁設計從入門到精通（微課精編版）

1.1 Dreamweaver概述

1.1.1 Dreamweaver歷史

1.1.2 熟悉Dreamweaver主界面