使用手冊 取消

測試 Dreamweaver 網站

  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 網站
  19. 疑難排解
    1. 已修正的問題
    2. 已知問題

 

 

了解網站測試方針並且在您上傳網站之前先使用報表測試 Dreamweaver 網站。

網站測試方針

將網站上傳到伺服器並宣告可供檢視之前,最好先在本機上測試一下 (事實上,您最好經常針對網站的整個建構進行測試及移難排解,這樣您就可以及早發現問題並避免問題重複發生)。

您應該確定在目標瀏覽器中,網頁的外觀和功能跟您預期的一樣、沒有無效的連結,而且下載網頁不需要花太長的時間。您也可以執行網站報表,對整個網站進行測試及疑難排解。

下列方針將有助於讓訪客造訪您的網站時留下美好的經驗:

確定您的網頁在目標瀏覽器中能如預期般地運作。

您的網頁應該在不支援樣式、圖層、外掛程式或 JavaScript 的瀏覽器中,也能清楚易讀且運作正常。如果有網頁在較舊版的瀏覽器中發生錯誤而失敗,請考慮使用「檢查瀏覽器」行為,自動將訪客重新導向其他網頁。

在不同的瀏覽器和平台中預覽頁面。

這麼做讓您有機會看到版面、顏色、字體大小的差異,以及在目標瀏覽器檢查中無法預測的預設瀏覽器視窗大小。

檢查網站中是否有無效的連結,然後加以修正。

其他的網站也會進行重新設計或重新組織,而且可能已經移動或刪除您所連結的網頁。您可以執行連結檢查報表以測試連結。

監視網頁的檔案大小,以及下載所需花費的時間。

請記住,有些瀏覽器中,如果網頁是由大型表格所組成,在完成整個表格的載入之前,訪客將看不到任何東西。考慮將大型表格分成幾份,如果不能這樣做,請考慮在網頁頂端的表格之外置入少量的內容 (如歡迎訊息或廣告橫幅),如此一來使用者就能在下載表格時看到這份資料。

執行網站報表對整個網站進行測試及排解疑難。

您可以檢查整個網站的問題,例如未命名的文件、空白標籤及多餘的巢狀標籤。

驗證您的程式碼以找出標籤或語法錯誤。

在發佈網站之後進行更新和維護。

您可以用數種方式完成發佈網站 (也就是讓網站上線),而且這項作業是持續進行的處理過程。這個處理過程中很重要的部分是,使用 Dreamweaver 包含的工具或是透過外部的版本控制應用程式定義及實作版本控制系統。

使用討論區。

Adobe 網站上可找到 Dreamweaver 討論區,網址為:www.adobe.com/go/dreamweaver_newsgroup

如需取得不同瀏覽器、平台等等的相關資訊,討論區是絕佳的資源。您也可以討論技術問題並和其他 Dreamweaver 使用者分享有用的建議。

如需疑難排解發佈問題的教學課程,請參閱 www.adobe.com/go/vid0164_tw

使用報表測試網站

您可以針對工作流程或 HTML 屬性執行網站報表。您也可以使用「報表」命令來檢查網站中的連結。

工作流程報表可以改善網路小組成員間的共同作業。您可以執行工作流程報表,以顯示檔案的取出者、哪些檔案具有相關聯的「設計備註」以及哪些檔案最近經過修改。您還可以指定 name/value 參數,使「設計備註」報表更完善。

註解:

您必須先定義遠端網站的連線,才能執行工作流程報表。

HTML 報表可以讓您編譯和產生數種 HTML 屬性的報表。您可以檢查可結合巢狀字體標籤、遺失的替代文字 (ALT)、多餘的巢狀標籤、可移除的空標籤和無標題的文件。

執行報表之後,您可以將其儲存為 XML 檔案,然後匯入範本實體、資料庫或試算表中,並加以列印,或將其顯示在網站上。

註解:

您也可以透過 Adobe Dreamweaver Exchange 網站,將不同的報表類型加入 Dreamweaver 中。

執行報表以測試網站

  1. 選取「網站>報表」。
  2. 從「報表」彈出式選單中選取要執行報表的對象,並設定要執行的任何報表類型 (工作流程或 HTML)。

    除非在「檔案」面板中已經選取檔案,否則無法執行「網站中選取的檔案」報表。

  3. 如果您選取了工作流程報表,請按一下「報表設定」。否則,請略過這個步驟。
    註解:

    如果選取了一個以上的工作流程報表,就必須按一下每個報表的「報表設定」按鈕。請選取報表,按一下「報表設定」後輸入設定;然後為任何其他工作流程報表重複以上程序。

    取出者

    會建立一份報表,列出由指定小組成員取出的所有文件。請輸入小組成員的名稱,然後按一下「確定」返回「報表」對話方塊。

    設計備註

    會建立一份報表,列出選取文件或網站的所有「設計備註」。請輸入一或多個名稱和值配對,然後從對應的彈出式選單中選取比較值。按一下「確定」以返回「報表」對話方塊。

    最近修改的檔案

    會建立一份報表,列出在指定時間內變更過的檔案。請輸入所要檢視檔案的日期範圍和位置。

  4. 如果選取了 HTML 報表,請從下列報表中選取:

    可結合巢狀字體標籤

    會建立一份報表,列出所有可結合以清理程式碼的巢狀字體標籤。

    例如,<font color="#FF0000"><font size="4">STOP!</font></font> 就會報告出來。

    沒有替代文字

    會建立一份報表,列出全部沒有替代文字的 img 標籤。

    對純文字瀏覽器或已設定為要手動下載影像的瀏覽器而言,影像的部分會出現替代文字。螢幕讀取器會朗讀替代文字,而某些瀏覽器會在使用者滑鼠滑過影像時顯示替代文字。

    多餘的巢狀標籤

    會建立一份報表,詳列所有應該清理的巢狀標籤。

    例如,<i> The rain <i> in</i> Spain stays mainly in the plain</i> 就會在報表上。

    可移除的空標籤

    會建立一份報表,詳列所有可移除以清理 HTML 程式碼的空標籤。

    例如,您可能已在「程式碼」檢視中將某個項目或影像刪除了,但卻將套用於該項目的標籤留下來而未刪掉。

    未命名文件

    會建立一份報表,列出在選取參數內發現的所有未命名文件。Dreamweaver 會報告包含預設標題、多重標題標籤或遺失標題標籤的所有文件。

  5. 按一下「執行」建立報表。

    依據您執行的報表類型,可能會提示您儲存檔案、定義網站,或選取資料夾 (如果您還沒有做這些動作)。

    結果清單會出現在「網站報表」面板中 (位於「結果」面板群組)。

使用和儲存報表

  1. 執行報表 (請參閱前面的程序)。
  2. 在「網站報表」面板中,請執行下列其中一項作業以檢視報表:
    • 按一下要用來排序結果的欄標題。

      您可以依據檔案名稱、行號或描述來排序。您也可以執行數種不同的報表,並且讓不同的報表保持開啟。

    • 選取報表中任何一行,然後按一下「網站報表」面板左邊的「更多資訊」按鈕,以獲得問題的描述。

    • 按兩下報表中的任何一行,即可在「文件」視窗中檢視對應的程式碼。

    註解:

    如果您是在「設計」檢視中,Dreamweaver 會將顯示變更為分割檢視,以顯示程式碼中報表的問題。

  3. 按一下「儲存報表」以儲存報表。

    儲存報表時,您可以將它匯入現有的範本檔案。然後您可以將檔案匯入到資料庫或試算表並列印出來,或使用檔案在網站上顯示報表。

    註解:

    在執行 HTML 報表之後,請使用「清理 HTML」命令,修正報表列出的任何 HTML 錯誤。

更快、更輕鬆地獲得協助

新的使用者?