Dreamweaver簡明手冊——常用功能介紹
1.概述
Dreamweaver 是一款集網頁製作和管理網站於一身的所見即所得網頁編輯器，在開發前端檢視頁面的時候，用這個工具，能讓程式碼更清晰化，介面更整潔，可以大大的提升Web前端開發效率。
基於數通暢聯的AEAI DP開發平臺可以直接生成JSP前端頁面，通常在AEAI DP中使用JSP編輯器編輯JSP頁面，但是JSP編輯器強於在JSP頁面上寫JAVA程式碼片段，但調整頁面裡的表單元素以及CSS樣式等不方便，因此，一般採用AEAI D跟Dreamweaver配合進行前端JSP頁面擴充套件開發。本文對Dreamweaver的常見用法進行說明，為相關技術人員提供參考。
2.預計讀者
數通暢聯軟體新進技術人員
數通暢聯合作夥伴的技術人員
外部IT從業者
3.介質安裝
3.1安裝及下載
下載地址如下：http://pan.baidu.com/s/1c0vqeK4#path=%252F%25E5%2589%258D%25E7%25AB%25AF%25E5%25BC%2580%25E5%258F%2591%25E5%25B7%25A5%25E5%2585%25B7%252FDreamweaver
解壓到指定資料夾，點選安裝
3.2主介面預覽
4.使用說明
4.1建立站點
Deramweaver站點是網站中使用的所有檔案的資源的集合。Dreamweaver站點通常包含兩個部分：可在其中儲存和處理檔案的計算機上的本地資料夾，以及可在其中將相同檔案釋出到Web上的伺服器上的遠端資料夾。我們在開發及除錯過程中主要使用本地資料夾站點，下面會詳細介紹。
站點名稱：任意，例如aeaihr。
本地站點檔案：一般直接選擇開發平臺生成的工程的WebRoot目錄
儲存後，如下圖，這樣可以方便我們直接查詢和修改檔案，雙擊JSP、CSS、JS檔案都可以直接在主介面上開啟。
4.2插入功能
插入功能可以直接在頁面上插入一些頁面元素
通過點選選單—》視窗---》插入，如下圖。一般同時選中“屬性”項。
以下對插入面板裡面的各類功能進行介紹：
4.1.1常用
4.1.1.1超連結
點選超連結功能直接點入設計頁面裡，出現下圖，只要在文本里新增上超連結標籤名稱（任意起）:
點選確定後，如下圖，
程式碼部門 body元素裡有了a標籤，然後在設計頁面裡有了連線。然後在頁面下方找到
釋放按鍵後再來看程式碼部門的變化
然後到瀏覽器頁面上超連結可跳轉到上方的連線路徑裡。
4.1.1.2電子郵件連結
電子郵件連結也是超連結，這是跳轉到電子郵件裡，而不是其他的頁面。
點選電子郵件連結功能，出現資訊框，文字是名稱（隨意起），電子郵件裡填上要傳送目標的電子郵箱地址。
點選確定以後，如下圖。
儲存後，切換到頁面測試
點選dw連線後將跳轉發送郵件功能，如下圖。
4.1.1.3命名錨記
錨點連結，此類連結跳轉至文件內的特定位置。
首先要定位找到需要跳轉的位置，如圖所示：
將游標留在箭頭處，然後點選錨鏈接
按鈕，彈出命名框體，如下圖。
我將名稱命名為dw，確定後，#15前會出現個錨標記。
下一步，我們設計介面拉到上面將游標#1上，然後我們觀察工具下方的屬性。將連線名字改為#+錨點命。
然後，進入網頁測試，首先在網頁頂部，然後點選#1直接跳入#15位置。
4.1.1.4水平線
在頁面上新增一條水平線美觀，新增後如下。
頁面測試效果圖如下。
4.1.1.5表格
點選表格按鈕
後，如下圖
可以跟據自己的需求調整表格的行數，列和大小寬度，點選確定後，如下圖
可以表格新增需要的字元，如果不加預設為佔位符，頁面測試結果如下圖：
4.1.1.6Div標籤
可以使用div標籤建立 CSS 佈局塊並在文件中對它們進行定位。如果將包含定位樣式的現有 CSS 樣式表附加到文件，這將很有用。Dreamweaver 使您能夠快速插入 div 標籤並對它應用現有樣式。
點選Div按鈕
後，如下圖：
插入：可用於選擇div標籤的位置以及標籤名稱（如果不是新標籤的話）。
類：顯示了當前應用於標籤的類樣式。如果附加了樣式表，則該樣式表中定義的類將出現在列表中。可以使用此彈出選單選擇要應用於標籤的樣式。
ID：可讓您更改用於標識div標籤的名稱。
4.1.1.7影象
影象
點影象圖示邊的箭頭後，選擇第一個。
下一步，如圖所示找到對應影象檔案
確定後會提示，檔案在站點根檔案以外需要拷貝到，根檔案裡，點選“是”。
下一步，點選儲存，複製到站點根檔案裡。
下一步，點選確定即可。
影象新增成功如下圖
頁面測試效果圖，如下：
影象佔位符
影象佔位符，是在介面上顯示圖片，用來佔位。根據下圖點選。
下一步，彈出視窗，名稱為影象name的值（隨意起），然後點選確定。
然後，程式碼和設計介面如下圖。
如果掌握不好寬度與高度，可以直接在設計頁面裡直接拉拽影象。
效果測試，如下圖：
滑鼠經過影象
主要現象是，當滑鼠懸浮在原始圖片上，變為新的圖片。根據下圖點選。
下一步，影象名稱為id元素的值，原始影象為滑鼠經過前的影象。設定好後按確定。
然後，程式碼和設計介面如下圖。
頁面測試：滑鼠經過前後的影象
Fireworks HTML
在 Fireworks 中，可以使用“匯出”命令將優化後的影象和 HTML 檔案匯出並儲存到 Dreamweaver 站點資料夾下的某個位置。然後，可以在 Dreamweaver 中插入該檔案。Dreamweaver 允許您將 Fireworks 生成的 HTML 程式碼連同相關影象、切片和 JavaScript 一起插入到文件中。
按照下圖點選
下一步
1.在 Dreamweaver 文件中，將插入點放在希望影象出現的位置，然後執行下列操作之一：
選擇“插入”>“影象”。
2.在“插入”面板的“常用”類別中，單擊“影象”按鈕或將其拖動到文件中。
導航到所需的 Fireworks 匯出檔案，然後單擊“確定”(Windows) 或“開啟”(Macintosh)。
注：如果 Fireworks 檔案不在當前 Dreamweaver 站點中，則會顯示一條訊息，詢問是否要將該檔案複製到根資料夾。單擊“是”。
4.1.1.8日期
Dreamweaver 提供了一個方便的日期物件，該物件使您可以以喜歡的格式插入當前日期（包含或不包含時間都可以），並且您可以選擇在每次儲存檔案時都自動更新該日期。
在頁面上插入日期，點選按鈕
後，如下圖
按照個人需求選擇格式資訊後確定，頁面會顯示出時間，如下圖，每次重新整理介面，同時也會重新整理時間。
4.1.1.9註釋
點選註釋按鈕
後，程式碼頁面會出現註釋元素，可以在裡面備註一些文字，或者程式碼，此處的程式碼不會被程式執行。具體如下圖。
4.1.1.10指令碼
您可以通過下列方式在“程式碼”檢視和“設計”檢視中使用客戶端 JavaScript 和 VBScript：
在不退出“設計”檢視的情況下，為頁面寫入 JavaScript 或 VBScript 指令碼。
在不退出“設計”檢視的情況下，在文件中建立指向外部指令碼檔案的連結。
在不退出“設計”檢視的情況下編輯指令碼。
如下圖：
4.1.1.11模板
可以基於現有文件（如 HTML、Adobe ColdFusion 或 Microsoft Active Server Pages 文件）建立模板，也可以基於新文件建立模板。
4.1.1.12標籤選擇器
使用“標籤選擇器”可以將 Dreamweaver 標籤庫（包括 ColdFusion 標籤庫和 ASP.NET 標籤庫）中的任何標籤插入您的頁面中。
點選標籤選擇器選項後，如下圖，選擇指定標籤，單擊確定即可。
4.1.2佈局
這裡主要對佈局裡面的表格進行介紹說明。首先點選表格
按鈕，彈出選擇框，如下圖，根據需求擴充套件行數和列，如果寬度掌握不好，也可以在設計頁面里拉拽。
點選確定後，程式碼和設計介面預覽，如下圖，為拉拽後效果圖，也可以表格內填寫字元。
介面測試效果圖如下：
4.1.3表單
表單在網頁中主要負責資料採集功能。一個表單有三個基本組成部分： 表單標籤：這裡麵包含了處理表單資料所用CGI程式的URL以及資料提交到伺服器的方法。表單域：包含了文字框、密碼框、隱藏域、多行文字框、複選框、單選框、下拉選擇框和檔案上傳框等。 表單按鈕：包括提交按鈕、復位按鈕和一般按鈕；用於將資料傳送到伺服器上的CGI指令碼或者取消輸入，還可以用表單按鈕來控制其他定義了處理指令碼的處理工作。
4.1.3.1建立表單
首先點選表單按鈕，彈出選擇框如下圖，方法有兩個get和post，兩種方法為提交表單方式，決定於呼叫servlet的都doget或dopost方法。名稱是name屬性的值。
點選確定後如下圖，紅色虛線框體內為表單域，也就是標籤form裡。
4.1.3.2文字欄位
首先點選文字欄位按鈕，彈出選擇框體如下圖。
型別有很多種，可以根據需求更改，可以參考下圖，名稱為name屬性的值，型別為type屬性的值，值是value屬性的值，大小是size屬性的值，最大長度是maxlength屬性的值。
下圖為測試頁面效果圖。
4.1.3.3隱藏域
隱藏域在網頁中不會有任何顯示，只是用來在網頁之間傳遞資訊。它是下個比較特殊的表單元素，在某種程度上可以保留網頁的某些值。網頁的執行是不保留狀態的，一個網頁瀏覽完畢，所有的內容都不會保留，通過隱藏域就可以保留一些網頁執行過程中的一些值。
比如在一個from時放一個使用者名稱，密碼等資料，這些是可見的，如果你放在隱藏域，當它點選的時候不但把使用者名稱和密碼的值傳出去，還會把隱藏域你設定好了的值傳給伺服器。
首先可點選
按鈕，在表單域裡生成隱藏域，如下圖：
4.1.3.4文字區域
首先在點選文字區域按鈕，彈出選擇框，如下圖根據需求填寫ID和標籤屬性，點選確定。
然後會在表單內出現一塊可編輯的文字域，如下圖
下圖為測試頁面效果圖。
4.1.3.5複選框和單選按鈕
首先在點選選擇框按鈕，彈出選擇框，如下圖根據需求填寫ID和標籤屬性，點選確定。
然後會在表單內出現一個可選擇的複選框和單選按鈕，如下圖
下圖為測試頁面效果圖，可以勾選。
4.1.3.6複選框組和單選按鈕組
首先在點選選擇框按鈕，彈出選擇框，名稱是name屬性的值，可點選+號和-號曾複選框和單選按鈕的數量，點選確定。
然後會在表單內出現一個可選擇的複選框組和單選按鈕組，如下圖
下圖為測試頁面效果圖，可以勾選。
4.1.3.7選擇（列表/選單）和跳轉選單
首先在點選選擇（列表/選單）和跳轉選單按鈕，彈出選擇框，如下圖，點選確定。
然後會在表單內出現一個可選擇的選擇（列表/選單）和跳轉選單，如下圖
下圖為測試頁面效果圖
4.1.3.8影象域
首先點選影象域按鈕彈出選擇框，如下圖，可以根據需求找到對應圖片，實現在表單中新增影象。
然後會在表單內出現一個影象域。
下圖為測試頁面效果圖
4.1.3.9檔案域
首先點選檔案域，彈出選擇框，如下圖，根據需求設定ID和標籤，點選確定。
然後會在表單內出現一個影象域。
下圖為測試頁面效果圖，點選瀏覽…彈出查詢檔案選擇框。
4.1.3.10按鈕
首先點選按鈕的按鈕，彈出選擇框，如下圖，根據需求設定ID和標籤，點選確定。
然後表單內會生成一個按鈕，按鈕預設type型別為submit，value為提交。如下圖
下面為測試頁面的效果圖。按鈕可點選，預設型別為submit，所以點選時就是提交，因為沒有設定，所以只能重新整理頁面。
4.1.3.11標籤
首先點選標籤按鈕，在表單域裡增加標籤。如下圖：
然後可以在裡新增字元。設為標籤，在頁面中不可修改的固定字元。如下圖：
4.1.3.12欄位集
欄位集fieldset元素一種標籤，作用是將它所包圍的元素用線框襯托出來。
首先點選欄位集按鈕，如下圖：
然後在表單域裡生成了欄位集，如下圖
然後擴充套件下程式碼，在fieldset標籤內legend標籤外，新增字元，如下圖。
下面為頁面測試效果圖。
4.1.4Spry
Spry框架是一個JavaScript庫，Web 設計人員使用它可以構建能夠向站點訪問者提供更豐富體驗的 Web 頁。有了 Spry，就可以使用HTML、CSS 和極少量的 JavaScript 將XML資料合併到 HTML 文件中，建立構件（如摺疊構件和選單欄），向各種頁面元素中新增不同種類的效果。
4.1.4.1Spry選單欄
首先點選Spry選單欄按鈕，然後選擇水平或者垂直，點選確定。如下圖：下圖兩個功能都實現了。
下面是頁面測試效果圖：
4.1.4.2Spry選項卡面板
首先點選Spry選項卡按鈕，程式碼和設計頁面會直接彈出選項卡。如下圖
下面是頁面測試效果圖，點選標籤1或標籤2可以來回切換。
4.1.4.3Spry摺疊式
首先點選Spr摺疊式按鈕，程式碼和設計頁面會直接彈摺疊式。如下圖
下面是頁面測試效果圖，點選標籤1或標籤2可以來回切換。
4.1.4.4Spry可摺疊面板
首先點選Spr可摺疊式面板按鈕，程式碼和設計頁面會直接彈可摺疊式面板。如下圖：
下面是頁面測試效果圖，點選藍條標籤後內容部分摺疊起來。
5.總結說明
以上內容僅對Dreamweaver的插入功能相關部分進行介紹，實際使用過程中還會使用屬性面板來設定選中元素的相關屬性。一旦對HTML各標記以及對應屬性、style屬性熟練後，通常在程式碼檢視編輯HTML程式碼，切換設計或者實時檢視來檢視、驗證效果，此時Dreamweaver亮點就在於程式碼自動完成了。
Dreamweaver簡明手冊---常用功能介紹原文 下載
轉載於:https://my.oschina.net/agileai/blog/395770