使用 Adobe Device Central 搭配 Dreamweaver

Device Central 可讓 Dreamweaver 網頁設計人員與開發人員預覽 Dreamweaver 檔案在各種行動裝置上的顯示效果。Device Central 使用 Opera 的 Small-Screen Rendering™,讓設計人員與開發人員能預先了解其網頁在小螢幕上的顯示效果。此外,它也能讓設計人員與開發人員測試自己的 CSS 是否正常作用。

例如,網頁開發人員的客戶想要製作可在行動電話顯示的網站, 網頁開發人員可以使用 Dreamweaver 初步建立幾個網頁,然後使用 Device Central 測試這些網頁在不同裝置上的表現。

  1. 啟動 Dreamweaver。
  2. 開啟檔案。
  3. 請執行下列其中一項作業:
    • 選取「檔案 > 在瀏覽器中預覽 > 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

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策