- Dreamweaver 使用手冊
- 簡介
- Dreamweaver 和 Creative Cloud
- Dreamweaver 工作區和檢視
- 設定網站
- 管理檔案
- 版面和設計
- CSS
- 頁面內容和資產
- 設定頁面屬性
- 設定 CSS 標題屬性和 CSS 連結屬性
- 處理文字
- 尋找和取代文字、標籤和屬性
- DOM 面板
- 在即時檢視中編輯
- 在 Dreamweaver 中進行文件編碼
- 在文件視窗中選取並檢視元素
- 在屬性檢視窗中設定文字屬性
- 檢查網頁拼字
- 在 Dreamweaver 中使用水平線
- 在 Dreamweaver 中新增和修改字體組合
- 使用資源
- 在 Dreamweaver 中插入和更新日期
- 在 Dreamweaver 中建立和管理最愛資源
- 在 Dreamweaver 中插入及編輯影像
- 新增媒體物件
- 在 Dreamweaver 中加入視訊
- 插入 HTML5 視訊
- 插入 SWF 檔
- 新增音效效果
- 在 Dreamweaver 中插入 HTML5 音效
- 使用圖庫項目
- 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
- 連結和導覽
- jQuery Widget 和效果
- 撰寫網站程式碼
- 關於在 Dreamweaver 中撰寫程式碼
- Dreamweaver 的程式碼撰寫環境
- 設定程式碼撰寫偏好設定
- 自訂程式碼色彩標示
- 撰寫和編輯程式碼
- 程式碼提示和程式碼完成
- 收合和展開程式碼
- 利用片段重複使用程式碼
- Lint 程式碼
- 最佳化程式碼
- 在設計檢視中編輯程式碼
- 使用頁面的檔頭內容
- 在 Dreamweaver 中插入伺服器端包含
- 在 Dreamweaver 中使用標籤資料庫
- 匯入自訂標籤到 Dreamweaver
- 使用 JavaScript 行為 (一般說明)
- 套用內建的 JavaScript 行為
- 關於 XML 與 XSLT
- 在 Dreamweaver 中執行伺服器端 XSL 轉換
- 在 Dreamweaver 中執行用戶端 XSL 轉換
- 在 Dreamweaver 中新增 XSLT 字元實體
- 格式化程式碼
- 跨產品工作流程
- 範本
- 行動裝置和多螢幕
- 動態網站、網頁和網站表單
- 以視覺化方式建立應用程式
- 測試、預覽和發佈網站
- 疑難排解
了解網站測試方針並且在您上傳網站之前先使用報表測試 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 中。
執行報表以測試網站
-
選取「網站>報表」。
-
從「報表」彈出式選單中選取要執行報表的對象,並設定要執行的任何報表類型 (工作流程或 HTML)。
除非在「檔案」面板中已經選取檔案,否則無法執行「網站中選取的檔案」報表。
-
如果您選取了工作流程報表,請按一下「報表設定」。否則,請略過這個步驟。註解:
如果選取了一個以上的工作流程報表,就必須按一下每個報表的「報表設定」按鈕。請選取報表,按一下「報表設定」後輸入設定;然後為任何其他工作流程報表重複以上程序。
取出者
會建立一份報表,列出由指定小組成員取出的所有文件。請輸入小組成員的名稱,然後按一下「確定」返回「報表」對話方塊。
設計備註
會建立一份報表,列出選取文件或網站的所有「設計備註」。請輸入一或多個名稱和值配對,然後從對應的彈出式選單中選取比較值。按一下「確定」以返回「報表」對話方塊。
最近修改的檔案
會建立一份報表,列出在指定時間內變更過的檔案。請輸入所要檢視檔案的日期範圍和位置。
-
如果選取了 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 會報告包含預設標題、多重標題標籤或遺失標題標籤的所有文件。
-
按一下「執行」建立報表。
依據您執行的報表類型,可能會提示您儲存檔案、定義網站,或選取資料夾 (如果您還沒有做這些動作)。
結果清單會出現在「網站報表」面板中 (位於「結果」面板群組)。
使用和儲存報表
-
執行報表 (請參閱前面的程序)。
-
在「網站報表」面板中,請執行下列其中一項作業以檢視報表:
按一下要用來排序結果的欄標題。
您可以依據檔案名稱、行號或描述來排序。您也可以執行數種不同的報表,並且讓不同的報表保持開啟。
選取報表中任何一行,然後按一下「網站報表」面板左邊的「更多資訊」按鈕,以獲得問題的描述。
按兩下報表中的任何一行,即可在「文件」視窗中檢視對應的程式碼。
註解:如果您是在「設計」檢視中,Dreamweaver 會將顯示變更為分割檢視,以顯示程式碼中報表的問題。
-
按一下「儲存報表」以儲存報表。
儲存報表時,您可以將它匯入現有的範本檔案。然後您可以將檔案匯入到資料庫或試算表並列印出來,或使用檔案在網站上顯示報表。
註解:在執行 HTML 報表之後,請使用「清理 HTML」命令,修正報表列出的任何 HTML 錯誤。