Dreamweaver簡明手冊——經常使用功能介紹

1.概述

Dreamweaver 是一款集網頁製做和管理網站於一身的所見即所得網頁編輯器，在開發前端視圖頁面的時候，用這個工具，能讓代碼更清晰化，界面更整潔，能夠大大的提高Web前端開發效率。
基於數通暢聯的AEAI DP開發平臺能夠直接生成JSP前端頁面，一般在AEAI DP中使用JSP編輯器編輯JSP頁面，可是JSP編輯器強於在JSP頁面上寫JAVA代碼片斷，但調整頁面裏的表單元素以及CSS樣式等不方便，所以，通常採用AEAI D跟Dreamweaver配合進行前端JSP頁面擴展開發。本文對Dreamweaver的常見用法進行說明，爲相關技術人員提供參考。

2.預計讀者

1. 數通暢聯軟件新進技術人員

2. 數通暢聯合做夥伴的技術人員

3. 外部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圖像

1. 圖像

點圖像圖標邊的箭頭後，選擇第一個。



下一步，如圖所示找到對應圖像文件



肯定後會提示，文件在站點根文件之外須要拷貝到，根文件裏，點擊「是」。



下一步，點擊保存，複製到站點根文件裏。



下一步，點擊肯定便可。



圖像添加成功以下圖



頁面測試效果圖，以下：


 

1. 圖像佔位符

圖像佔位符，是在界面上顯示圖片，用來佔位。根據下圖點擊。


 
下一步，彈出窗口，名稱爲圖像name的值（隨意起），而後點擊肯定。



而後，代碼和設計界面以下圖。



若是掌握很差寬度與高度，能夠直接在設計頁面裏直接拉拽圖像。



效果測試，以下圖：

1. 鼠標通過圖像

主要現象是，當鼠標懸浮在原始圖片上，變爲新的圖片。根據下圖點擊。



下一步，圖像名稱爲id元素的值，原始圖像爲鼠標通過前的圖像。設置好後按肯定。



而後，代碼和設計界面以下圖。



頁面測試：鼠標通過先後的圖像
  
 

1. 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簡明手冊---經常使用功能介紹原文             下載