使用手冊 取消

使用表單向使用者收集資訊

  1. Dreamweaver 使用手冊
  2. 簡介
    1. 多方互動網頁設計基本概念
    2. Dreamweaver 的新增功能
    3. 使用 Dreamweaver 開發網頁 - 總覽
    4. Dreamweaver / 常見問題
    5. 鍵盤快速鍵
    6. Dreamweaver 系統需求
    7. 功能摘要
  3. Dreamweaver 和 Creative Cloud
    1. 將 Dreamweaver 設定與 Creative Cloud 同步
    2. Dreamweaver 中的 Creative Cloud Libraries
    3. 在 Dreamweaver 中使用 Photoshop 檔案
    4. 使用 Adobe Animate 和 Dreamweaver
    5. 從資料庫擷取網頁最佳化的 SVG 檔案
  4. Dreamweaver 工作區和檢視
    1. Dreamweaver 工作區
    2. 最佳化視覺開發的 Dreamweaver 工作區
    3. 根據檔案名稱或內容搜尋檔案 | Mac OS
  5. 設定網站
    1. 關於 Dreamweaver 網站
    2. 設定網站的本機版本
    3. 連線到發佈伺服器
    4. 設定測試伺服器
    5. 匯入和匯出 Dreamweaver 網站設定
    6. 將現有網站從遠端伺服器帶入本機網站根目錄
    7. Dreamweaver 中的輔助功能
    8. 進階設定
    9. 設定網站偏好設定以傳送檔案
    10. 在 Dreamweaver 中指定 Proxy 伺服器設定
    11. 將 Dreamweaver 設定與 Creative Cloud 同步
    12. 在 Dreamweaver 中使用 Git
  6. 管理檔案
    1. 建立和開啟檔案
    2. 管理檔案和資料夾
    3. 下載和上傳伺服器檔案
    4. 存回和取出檔案
    5. 同步化檔案
    6. 比較檔案差異
    7. 遮罩 Dreamweaver 網站中的檔案和資料夾
    8. 啟用 Dreamweaver 網站的設計備註
    9. 防止 Gatekeeper 遭到潛在惡意利用
  7. 版面和設計
    1. 使用視覺輔助以配置版面
    2. 關於使用 CSS 配置頁面
    3. 使用 Bootstrap 設計回應式網站
    4. 在 Dreamweaver 中建立及使用媒體查詢
    5. 以表格呈現內容
    6. 顏色
    7. 使用流變格線版面的互動設計
    8. Dreamweaver 中的 Extract
  8. CSS
    1. 了解串接樣式表
    2. 使用 CSS 設計工具配置頁面
    3. 在 Dreamweaver 中使用 CSS 預處理器
    4. 如何在 Dreamweaver 中設定 CSS 樣式偏好設定
    5. 在 Dreamweaver 中移動 CSS 規則
    6. 在 Dreamweaver 中將行內 CSS 轉換為 CSS 規則
    7. 使用 div 標籤
    8. 套用漸層至背景
    9. 在 Dreamweaver 中建立與編輯 CSS3 轉變效果
    10. 格式化程式碼
  9. 頁面內容和資產
    1. 設定頁面屬性
    2. 設定 CSS 標題屬性和 CSS 連結屬性
    3. 處理文字
    4. 尋找和取代文字、標籤和屬性
    5. DOM 面板
    6. 在即時檢視中編輯
    7. 在 Dreamweaver 中進行文件編碼
    8. 在文件視窗中選取並檢視元素
    9. 在屬性檢視窗中設定文字屬性
    10. 檢查網頁拼字
    11. 在 Dreamweaver 中使用水平線
    12. 在 Dreamweaver 中新增和修改字體組合
    13. 使用資源
    14. 在 Dreamweaver 中插入和更新日期
    15. 在 Dreamweaver 中建立和管理最愛資源
    16. 在 Dreamweaver 中插入及編輯影像
    17. 新增媒體物件
    18. 在 Dreamweaver 中加入視訊
    19. 插入 HTML5 視訊
    20. 插入 SWF 檔
    21. 新增音效效果
    22. 在 Dreamweaver 中插入 HTML5 音效
    23. 使用圖庫項目
    24. 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
  10. 連結和導覽
    1. 關於連結和導覽
    2. 連結
    3. 影像地圖
    4. 連結疑難排解
  11. jQuery Widget 和效果
    1. 在 Dreamweaver 中使用 jQuery UI 和 Mobile Widget
    2. 在 Dreamweaver 中使用 jQuery 效果
  12. 撰寫網站程式碼
    1. 關於在 Dreamweaver 中撰寫程式碼
    2. Dreamweaver 的程式碼撰寫環境
    3. 設定程式碼撰寫偏好設定
    4. 自訂程式碼色彩標示
    5. 撰寫和編輯程式碼
    6. 程式碼提示和程式碼完成
    7. 收合和展開程式碼
    8. 利用片段重複使用程式碼
    9. Lint 程式碼
    10. 最佳化程式碼
    11. 在設計檢視中編輯程式碼
    12. 使用頁面的檔頭內容
    13. 在 Dreamweaver 中插入伺服器端包含
    14. 在 Dreamweaver 中使用標籤資料庫
    15. 匯入自訂標籤到 Dreamweaver
    16. 使用 JavaScript 行為 (一般說明)
    17. 套用內建的 JavaScript 行為
    18. 關於 XML 與 XSLT
    19. 在 Dreamweaver 中執行伺服器端 XSL 轉換
    20. 在 Dreamweaver 中執行用戶端 XSL 轉換
    21. 在 Dreamweaver 中新增 XSLT 字元實體
    22. 格式化程式碼
  13. 跨產品工作流程
    1. 安裝與使用 Dreamweaver 的擴充功能
    2. Dreamweaver 中的應用程式內更新
    3. 在 Dreamweaver 中插入 Microsoft Office 文件 (僅適用於 Windows)
    4. 使用 Fireworks 和 Dreamweaver
    5. 使用 Contribute 編輯 Dreamweaver 網站的內容
    6. Dreamweaver-Business Catalyst 整合
    7. 建立個人化的電子郵件行銷活動
  14. 範本
    1. 關於 Dreamweaver 範本
    2. 辨識範本和以範本為架構的文件
    3. 建立 Dreamweaver 範本
    4. 建立範本的可編輯區域
    5. 在 Dreamweaver 中建立重複區域和表格
    6. 使用範本中的選擇性區域
    7. 在 Dreamweaver 中定義可編輯的標籤屬性
    8. 如何在 Dreamweaver 中建立巢狀範本
    9. 編輯、更新和刪除範本
    10. 在 Dreamweaver 中匯出及匯入 XML 內容
    11. 對現有的文件套用或移除範本
    12. 編輯 Dreamweaver 範本的內容
    13. Dreamweaver 中範本標籤的語法規則
    14. 設定範本區域的標示偏好設定
    15. 使用 Dreamweaver 範本的好處
  15. 行動裝置和多螢幕
    1. 建立媒體查詢
    2. 為行動裝置變更頁面方向
    3. 使用 Dreamweaver 為行動裝置建立網頁用程式
  16. 動態網站、網頁和網站表單
    1. 了解網頁用程式
    2. 設定您的電腦以進行應用程式開發
    3. 疑難排解資料庫連線
    4. 在 Dreamweaver 中移除連線 Script
    5. 設計動態網頁
    6. 動態內容來源總覽
    7. 定義動態內容的來源
    8. 將動態內容新增至頁面
    9. 在 Dreamweaver 中變更動態內容
    10. 顯示資料庫記錄
    11. 在 Dreamweaver 中提供即時資料及進行疑難排解
    12. 在 Dreamweaver 中新增自訂伺服器行為
    13. 使用 Dreamweaver 建立表單
    14. 使用表單向使用者收集資訊
    15. 在 Dreamweaver 中建立及啟用 ColdFusion 表單
    16. 建立網站表單
    17. 加強對 HTML5 表單元素的支援
    18. 使用 Dreamweaver 開發表單
  17. 以視覺化方式建立應用程式
    1. 在 Dreamweaver 中建立主要和細節頁面
    2. 建立搜尋及結果頁面
    3. 建立記錄插入頁面
    4. 在 Dreamweaver 中建立更新記錄頁面
    5. 在 Dreamweaver 中建立記錄刪除頁面
    6. 在 Dreamweaver 中使用 ASP 命令修改資料庫
    7. 建立註冊頁面
    8. 建立登入頁面
    9. 建立唯有授權用戶才能存取的頁面
    10. 使用 Dreamweaver 保護 ColdFusion 中的資料夾
    11. 在 Dreamweaver 中使用 ColdFusion 組件
  18. 測試、預覽和發佈網站
    1. 預覽頁面
    2. 在多部裝置上預覽 Dreamweaver 網頁
    3. 測試 Dreamweaver 網站

 

註解:

Dreamweaver CC (含) 以後版本的使用者介面已經簡化了。因此,您在 Dreamweaver CC 和更新版本中可能會找不到本文所描述的一些選項。如需詳細資訊,請參閱本文

關於向使用者收集資訊

您可以利用網站表單或超文字連結向使用者收集資訊,並將這項資訊儲存在伺服器的記憶體中,然後再根據使用者輸入的內容,使用這項資訊建立動態回應。收集資訊最常用的工具是 HTML 表單和超文字連結。

HTML 表單

可以讓您收集來自使用者的資訊,並將該資訊儲存在伺服器的記憶體中。HTML 表單可以將資訊視為表單參數或 URL 參數傳送。

超文字連結

可以讓您收集來自使用者的資訊,並將該資訊儲存在伺服器的記憶體中。您要指定一個值 (或多個值),讓使用者按一下連結 (偏好設定) 時能將這個值送出,例如:將值附加到錨點標籤中所指定的 URL。當使用者按一下連結時,瀏覽器會將 URL 和附加值傳送到伺服器。

HTML 表單參數

表單參數是藉由使用 POSTGET 方法的 HTML 表單傳送至伺服器。

使用 POST 方法時,會將參數當做文件檔頭的一部分傳送至網頁伺服器,任何使用一般方法檢視頁面的使用者都無法看到或存取這些參數。POST 方法應該用於會影響資料庫內容的值 (例如插入、更新或刪除記錄),或用於藉由電子郵件傳送的值。

GET 方法則是將參數附加到要求的 URL。所有檢視頁面的人都可以看到參數。GET 方法應該用於搜尋表單。

您可以使用 Dreamweaver 來快速設計將表單參數傳送給伺服器的 HTML 表單。請小心選擇您用來將資訊從瀏覽器傳輸到伺服器的方法。

表單參數會採用對應表單物件的名稱。例如,如果您的表單中包含名為 txtLastName 的文字欄位,則當使用者按一下「送出」按鈕時,下列表單參數便會傳送至伺服器:

txtLastName=enteredvalue

在網路應用程式預期有精確參數值的情況下 (例如,當它根據其中一個選項來執行動作時),請使用選項按鈕、核取方塊或清單/選單表單物件,以控制使用者可送出的值。這麼做可以防止使用者輸入錯誤資訊,而造成應用程式錯誤。下列範例顯示提供三種選項的彈出式選單表單:

彈出式選單表單

每個選單選項會對應到一個硬式編碼值,而這個值會以表單參數的形式送出至伺服器。在下列範例中,「清單值」對話方塊會將每個清單項目和值 (Add、Update 或 Delete) 進行配對:

「清單值」對話方塊

建立表單參數之後,Dreamweaver 就可以擷取該值,並在網路應用程式中使用。在 Dreamweaver 中定義表單參數之後,便可以在網頁內插入其值。

URL 參數

透過 URL 參數,您可以將使用者提供的資訊從瀏覽器傳遞給伺服器。當伺服器收到要求,而且參數已附加到要求的 URL 時,伺服器會在將要求的網頁提供給瀏覽器之前,先將該網頁的存取權提供給參數。

URL 參數是附加到 URL 的名稱/值配對。此參數是以問號 (?) 開頭, 並採用格式 name=value 的格式。如果有一個以上的 URL 參數,則每個參數會以 & 分隔。下列範例會顯示具有兩組名稱/值配對的 URL 參數:

http://server/path/document?name1=value1&name2=value2

在這個範例工作流程中,應用程式是一個網路架構的店面。由於網站的開發人員想要盡可能吸引各地的使用者族群,因此將網站設計為支援外幣。當使用者登入網站時,可以選取要用何種貨幣來檢視可用項目的價格。

  1. 瀏覽器會向伺服器要求 report.cfm 網頁。這項要求包含 URL 參數 Currency="euro"。Currency="euro" 變數指定擷取到的所有金額都要以歐盟的歐元 (Euro) 來顯示。

  2. 伺服器會將 URL 參數暫時儲存在記憶體中。

  3. report.cfm 網頁會使用該參數,以歐元擷取各個項目的費用。這些金額可以儲存在不同貨幣的資料庫表格中,或是從每個項目相關的單一貨幣轉換為應用程式支援的任何貨幣。

  4. 伺服器會將 report.cfm 網頁傳送至瀏覽器,並以要求的貨幣單位顯示項目的價值。當這位使用者結束工作階段時,伺服器會清除 URL 參數的值,並釋放伺服器記憶體以保留新使用者的要求。

    當 HTTP 的 GET 方法與 HTML 表單結合使用時,也會建立 URL 參數。送出表單時,GET 方法會指定要將參數值附加到 URL 要求。

    URL 參數的一般用法,包括根據使用者的偏好設定,對網站進行個人化動作。例如,由使用者名稱和密碼組成的 URL 參數可以用來對使用者進行驗證,而且只顯示使用者已訂閱的資訊。這種常見範例包括財務網站,這類網站會根據使用者先前所選擇的股票市場符號,顯示個別股票價格。網路應用程式研發人員通常會使用 URL 參數,將值傳遞給應用程式內的變數。例如,您可以在網路應用程式中將搜尋條件傳遞給 SQL 變數,產生搜尋結果。

使用 HTML 連結建立 URL 參數

使用 HTML 錨點標籤的 href 屬性,在 HTML 連結內建立 URL 參數。您可以在「程式碼」檢視 (「檢視 > 程式碼」) 中,將 URL 參數直接輸入該屬性中,或是在「屬性」檢視窗的「連結」方塊中,將 URL 參數附加至該連結 URL 的結尾。

在以下範例中,三個連結建立了單一的 URL 參數 (action) 並具有三個可能的值 (AddUpdateDelete)。當使用者按一下連結時,便會將參數值傳送至伺服器,並執行所要求的動作。

<a href="http://www.mysite.com/index.cfm?action=Add">Add a record</a> 
<a href="http://www.mysite.com/index.cfm?action=Update">Update a record</a> 
<a href="http://www.mysite.com/index.cfm?action=Delete">Delete a record</a>

您可以使用「屬性」檢視窗 (「視窗 > 屬性」) 來建立相同的 URL 參數,方法是選取該連結,然後在「連結」方塊中,將該 URL 參數值附加至該連結 URL 的結尾。

屬性檢視窗

建立 URL 參數之後,Dreamweaver 就可以擷取該值,並在網路應用程式中使用。在 Dreamweaver 中定義 URL 參數之後,便可以在網頁內插入其值。

Adobe 標誌

登入您的帳戶