馬老師 雲端研究室

Passion inspires professional

馬老師 雲端研究室

利用Dreamweaver CS5.5設計行動裝置網頁

by · 2011-09-28

智慧型手機竄紅、平板電腦普及、行動網路發達，讓上網不再是只需要宅在家裡才能做到的事情，不管是走路、等車、坐車、吃飯、蹲馬桶以及許多的時候，都可以利用這些裝置來進入網際網路的花花世界，所以許多的網站也針對這些行動裝置來製作獨立的頁面，甚至根據螢幕尺寸來最佳化頁面。

iPhone 臉書網站直式
iPhone 臉書網站橫式

上面這兩張圖，就是Facebook為了行動裝置而製作的頁面，左邊是iPhone直拿觀賞，右手邊則是橫拿，可以看到在左邊最上排只看到「個人檔案、訊息、更多」，右邊可看到「個人檔案、訊息、朋友、相片、更多」，橫拿比直拿多出了兩個選項，雖然只是小地方，但設計就是要掌握每一個細節，那我們該如何設計這樣的網頁呢？就讓我們慢慢來體驗吧！

很久很久以前在製作網頁的時候，我們可以在同一個頁面使用不同媒體的CSS樣式表來控制顯示內容，例如：

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/handheld.css" rel="stylesheet" type="text/css" media="handheld" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

上面的第一行是代表螢幕樣式、第二行為行動裝置樣式、第三行為列印樣式，不過目前有關行動裝置樣式已經因為時代的演進與科技的發達，已經瀕臨淘汰的邊緣了，現在我們製作行動裝置樣式，主要是靠裝置的螢幕寬度來決定不同的樣式表。

在Dreamweaver CS5.5中除了提供多螢幕預覽的模式之外：

Dreamweaver CS5.5 多螢幕預覽
Dreamweaver CS5.5 多螢幕預覽介面

還可以針對不同的螢幕尺寸來設定該使用哪個CSS樣式表檔，只要按下多螢幕預覽上方的媒體查詢按鈕。

Dreamweaver CS5.5 媒體查詢

上面的範例是針對螢幕寬度小於320像素的裝置使用phone.css，螢幕尺寸介於321像素～768像素之間的裝置使用tablet.css，加入了這樣的設定後在頁面內會多出兩段CSS的連結語法：

<link href="css/phone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)" />
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:768px)" />

當然要看你在這兩個CSS中如何設定呈現頁面樣式囉！我的範例是在phone.css裡面將景點圖片的display設為none，另外要注意在<head></head>區段中要加入以下的語法：

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">

否則在手機橫向後頁面將會被放大，這樣我們的樣式表就會失效，瀏覽的效果可以參考下面的影片：

可以看到在320像素以下景點圖片會被隱藏，而超過這個大小圖片就會自動顯示，大家也可以自行用行動裝置瀏覽這個網址，也準備這個範例的原始檔讓大家下載研究。

Tags:

You may also like...

11,358 Responses

  1. JamesGag表示:
    2025-03-2609:12:27

    canadian 24 hour pharmacy: Online pharmacy USA – canada drug pharmacy

    回覆
  2. Montebeera表示:
    2025-03-2609:09:03

    IndiaMedFast IndiaMedFast.com IndiaMedFast.com

    回覆
  3. JamesGag表示:
    2025-03-2608:51:08

    buying prescription drugs from india: online medicine shopping in india – online medicine shopping in india

    回覆
  4. Ремонт сигвеев в Воронеже表示:
    2025-03-2607:32:47

    pdacenter.ru – сервис по ремонту бытовой техники
    Ремонт сигвеев в Воронеже в официальном сервисном центре PDACENTER.
    Наши инженеры выполняют ремонт любой сложности по дотупным ценам!

    回覆
  5. Qqvpkz表示:
    2025-03-2607:23:17

    clarinex online buy – buy desloratadine 5mg pill dapoxetine 90mg over the counter

    回覆
  6. Arthurhow表示:
    2025-03-2607:23:08

    https://mexicanpharminter.com/# Mexican Pharm Inter
    pharmacy in canada

    回覆
  7. Ремонт сушильных машин в Омске表示:
    2025-03-2607:17:52

    pdacenter.ru – сервис по ремонту бытовой техники
    Ремонт сушильных машин в Омске в официальном сервисном центре PDACENTER.
    Наши инженеры выполняют ремонт любой сложности по дотупным ценам!

    回覆
  8. Williszew表示:
    2025-03-2606:40:20

    https://indiamedfast.com/# online medicine shopping in india

    回覆
  9. Arthurhow表示:
    2025-03-2606:14:33

    http://indiamedfast.com/# online medicine shopping in india
    canadian discount pharmacy

    回覆
  10. Howardenace表示:
    2025-03-2601:47:45

    adderall canadian pharmacy: InterPharmOnline.com – my canadian pharmacy reviews

    回覆
  11. JamesGag表示:
    2025-03-2601:20:14

    cheapest online pharmacy india: cheapest online pharmacy india – cheapest online pharmacy india

    回覆
  12. JamesGag表示:
    2025-03-2600:59:41

    canadian pharmacy king: Inter Pharm Online – canada ed drugs

    回覆
  13. Arthurhow表示:
    2025-03-2600:32:34

    http://mexicanpharminter.com/# mexican pharmacy online store
    reputable canadian pharmacy

    回覆
  14. Williszew表示:
    2025-03-2523:48:52

    https://mexicanpharminter.com/# MexicanPharmInter

    回覆
  15. Arthurhow表示:
    2025-03-2523:27:31

    https://mexicanpharminter.shop/# reliable mexican pharmacies
    legitimate canadian pharmacy online

    回覆
  16. Montebeera表示:
    2025-03-2522:38:34

    ed drugs online from canada online canadian pharmacy no prescription legitimate canadian pharmacy online

    回覆
  17. Montebeera表示:
    2025-03-2521:11:53

    Mexican Pharm International Mexican Pharm International mexican pharmacy online store

    回覆
  18. Arthurhow表示:
    2025-03-2517:58:09

    http://interpharmonline.com/# 77 canadian pharmacy
    best canadian pharmacy

    回覆
  19. JamesGag表示:
    2025-03-2517:48:05

    best canadian online pharmacy: fda approved canadian online pharmacies – pharmacy in canada

    回覆
  20. JamesGag表示:
    2025-03-2517:27:27

    safe canadian pharmacy: online canadian pharmacy no prescription – canadian pharmacy

    回覆
  21. Williszew表示:
    2025-03-2517:07:10

    https://mexicanpharminter.shop/# buying from online mexican pharmacy

    回覆
  22. Arthurhow表示:
    2025-03-2516:53:37

    http://indiamedfast.com/# IndiaMedFast.com
    canadian world pharmacy

    回覆
  23. Ремонт холодильников в Краснодаре表示:
    2025-03-2513:34:40

    pdacenter.ru – сервис по ремонту бытовой техники
    Ремонт холодильников в Краснодаре в официальном сервисном центре PDACENTER.
    Наши инженеры выполняют ремонт любой сложности по дотупным ценам!

    回覆
  24. Ремонт ноутбуков в Йошкар-Оле表示:
    2025-03-2512:29:44

    pdacenter.ru – сервис по ремонту бытовой техники
    Ремонт ноутбуков в Йошкар-Оле в официальном сервисном центре PDACENTER.
    Наши инженеры выполняют ремонт любой сложности по дотупным ценам!

    回覆
  25. Arthurhow表示:
    2025-03-2511:20:54

    http://interpharmonline.com/# canadian pharmacy meds
    my canadian pharmacy rx

    回覆
  26. Montebeera表示:
    2025-03-2510:58:36

    mexican pharmacy online store mexican pharmacy online mexican pharmacy online order

    回覆
  27. JamesGag表示:
    2025-03-2510:23:22

    online canadian pharmacy review: certified canada pharmacy online – best canadian online pharmacy reviews

    回覆
  28. Williszew表示:
    2025-03-2510:21:43

    https://indiamedfast.com/# lowest prescription prices online india

    回覆
  29. Arthurhow表示:
    2025-03-2510:13:35

    https://indiamedfast.shop/# online medicine shopping in india
    canadian family pharmacy

    回覆
  30. JamesGag表示:
    2025-03-2510:03:09

    india pharmacy without prescription: online medicine shopping in india – IndiaMedFast

    回覆

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。