方法流变格线版面网页排版.DOCVIP

手機、平板電腦、桌上電腦的綜合網頁排版 兩種方式：媒體查詢，流變格線版面 目錄 1. 本章目的： 2 2. 常見主流手機，平板電腦的螢幕大小與解析度 4 3. 方法1：媒體查詢 網頁排版 4 4. 方法2：媒體查詢 網頁排版 17 本章目的： 如何設計一個網頁，可以同時在各種平台都可以顯示：手機、平板電腦、桌上電腦都可以顯示， 方法：兩種方式網頁排版：媒體查詢，流變格線版面 手機 平板電腦 桌上電腦 常見主流手機，平板電腦的螢幕大小與解析度 主流手機(iPhone, android)的螢幕大小與解析度： 480 x 800 960 x640 平板電腦的螢幕大小與解析度 1024 x 768 桌上電腦的螢幕大小與解析度 2048 x 1536 方法1：媒體查詢 網頁排版 下載練習範本，解壓縮 Dreamweaver新增網站 web10 打開 媒體查詢.html，以chrome瀏覽 開啟手機模擬器，以手機瀏覽 等一下我們的規劃是，要建立3種CSS版面設定（CSS設定放在外部檔案） style_01.css（這是手機版面） style_02.css（這是平板電腦版面） style_03.css（這是桌上電腦版面） 製作手機版面 附加外部樣式表 開啟 媒體查詢.html 按右方『CSS樣式』面板 按『附加樣式表』：選 style_01.css（這是手機版面） 結果 編輯網頁寬度 #container是網頁body內的標籤，是所有文字圖案案的最外框 右方『CSS樣式』面板 打開『全部』 #container，快速按兩下 設定#container區域的寬度 『方框』：width = 460 結果：變成手機版面 （因為主流手機版面解析度：480 x 800） 再編輯#left寬度 #left是包住『關於我們』那個區塊的文字與圖案 右方『CSS樣式』面板 #left，快速按兩下 設定#left區域的寬度 『方框』：width = 440 結果：只有縮小一點點 再編輯#middle, #right寬度，寬度width 都是190 # middle是包住『植物發電的電子鐘』那個區塊的文字與圖案 結果： 最後一定要儲存style_01.css檔案（否則白設定了） 檔案：全部儲存  製作平板電腦版面 到程式碼區， head meta http-equiv=Content-Type content=text/html; charset=big5 / title創意商品城/title link href=style_01.css rel=stylesheet type=text/css / /head 改成style_02.css head meta http-equiv=Content-Type content=text/html; charset=big5 / title創意商品城/title link href=style_02.css rel=stylesheet type=text/css / /head 設定style_02.css的各種區域寬度 style_02.css #container #left #middle #right Width寬度 700 440 205 680 注意：要預覽前，一定要先『全部儲存』，style_02.css才能被存檔 結果：  製作桌上電腦版面 到程式碼區， head meta http-equiv=Content-Type content=text/html; charset=big5 / title創意商品城/title link href=style_01.css rel=stylesheet type=text/css / /head 改成style_03.css head meta http-equiv=Content-Type content=text/html; charset=big5 / title創意商品城/title link href=style_03.css rel=stylesheet type=text/css / /head 設定style_03css的各種區域寬度 style_03.css #container #left #middle #right Width寬度 898 410 200 200 注意：要預覽前，一定要先『全部儲存』，style_03.css才能被存檔 結果：  建立媒體查詢 設定 在上方工具列『多螢幕』按鈕：『媒體查詢』 設定媒體查詢 手機設定 描述 最大寬度 CSS檔案 手機 767 Style_01.css  設定其它媒體查詢 平板設定 描述 最小寬度 最大寬度 CSS檔案 平板 768