啟動 Dreamweaver。
上次更新時間
2021年4月29日
使用 Adobe Device Central 搭配 Dreamweaver
Device Central 可讓 Dreamweaver 網頁設計人員與開發人員預覽 Dreamweaver 檔案在各種行動裝置上的顯示效果。Device Central 使用 Opera 的 Small-Screen Rendering™，讓設計人員與開發人員能預先了解其網頁在小螢幕上的顯示效果。此外，它也能讓設計人員與開發人員測試自己的 CSS 是否正常作用。
例如，網頁開發人員的客戶想要製作可在行動電話顯示的網站， 網頁開發人員可以使用 Dreamweaver 初步建立幾個網頁，然後使用 Device Central 測試這些網頁在不同裝置上的表現。
-
-
開啟檔案。
-
請執行下列其中一項作業：
選取「檔案 > 在瀏覽器中預覽 > Device Central」。
在文件視窗工具列中，請按住「在瀏覽器中預覽/偵錯」按鈕
，然後選取「在 Device Central 中預覽」。
建立適合行動裝置的 Dreamweaver 網頁內容的秘訣
Device Central 可利用 Opera 小螢幕彩現，預視 Dreamweaver 建立的網頁。透過此預視，您可以清楚地了解網頁在行動裝置上顯示的樣子。
注意：Opera 的 Small-Screen Rendering 不一定會預先安裝在個別的模擬裝置上。Device Central 可讓您預覽安裝 Opera 的 Small-Screen Rendering 後的內容顯示效果。
如果要確保在 Dreamweaver 中建立的網頁能在行動裝置上正常顯示，請使用以下提示。
如果您使用 Adobe® Spry 架構來開發內容，請將下一行的 HTML 新增到您的網頁，讓這些網頁能正確地在 Device Central 中轉譯 CSS 並執行 JavaScript™：<link href="SpryAccordion.css" media="screen" rel="stylesheet" type="text/css"/> <link href="SpryAccordion2.css" media="handheld" rel="stylesheet" type="text/css"/>
Opera 小螢幕彩現 並不支援影格、快顯項目、底線、刪除線、頂線、閃爍和圈選範圍。盡量避免這些設計元素。
盡量讓行動裝置網頁內容簡單。尤其請盡量少用字體、字體大小與色彩。
縮減影像大小並減少所需的顏色數量，將更能讓影像正常顯示。使用 CSS 或 HTML 指定每個使用影像的確切高度與寬度。提供所有影像的替代文字。
註解：
如需最佳化行動裝置的網頁，建議您可至 Opera 軟體網站參考相關資料。
如需針對行動電話和裝置建立內容的更多秘訣和技巧，請參閱 www.adobe.com/go/learn_cs_mobilewiki_tw。
