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

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

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像素以下景點圖片會被隱藏,而超過這個大小圖片就會自動顯示,大家也可以自行用行動裝置瀏覽這個網址,也準備這個範例的原始檔讓大家下載研究。

You may also like...

12,780 Responses

  1. Ninjaehq表示:

    Анонимный психолог. Сайт переписки. Онлайн психологическая консультация.

    Психолог владеет множеством приемов и техник, которые помогут разобраться в себе.
    Задайте интересующие вас вопросы или запишитесь на сеанс к психологу.
    Индивидуальное консультирование.

  2. Josephmew表示:

    cialis patent expiration 2016 cialis coupon code does cialis make you harder

  3. Josephmew表示:

    cialis professional review TadalAccess when will cialis become generic

  4. Frankiegeops表示:

    https://tadalaccess.com/# best price on cialis

  5. Moneyupf表示:

    Психолог онлайн чат. Поиск психолога. Психолог онлайн чат.

    Задайте интересующие вас вопросы или запишитесь на сеанс к психологу.
    Индивидуальное консультирование.
    Записаться на консультацию.

  6. ScottTrefs表示:

    cialis 20 mg best price: TadalAccess – cialis online usa

  7. ScottTrefs表示:

    tadalafil (megalis-macleods) reviews: buy cialis no prescription – cialis for sale over the counter

  8. LorenOmigo表示:

    cialis for sale online in canada: Tadal Access – how to get cialis without doctor

  9. LorenOmigo表示:

    cialis best price: TadalAccess – order generic cialis

  10. Josephmew表示:

    cialis free samples Tadal Access cialis recreational use

  11. Josephmew表示:

    tadalafil soft tabs TadalAccess where can i buy cialis over the counter

  12. Frankiegeops表示:

    https://tadalaccess.com/# canadian pharmacy cialis 20mg

  13. Frankiegeops表示:

    https://tadalaccess.com/# what are the side effect of cialis

  14. Josephmew表示:

    cialis online reviews cialis pills online canada drug cialis

  15. ScottTrefs表示:

    cialis a domicilio new jersey: cialis generic purchase – how many 5mg cialis can i take at once

  16. ScottTrefs表示:

    where to buy tadalafil in singapore: Tadal Access – cialis generic timeline

  17. LorenOmigo表示:

    cialis from canada: Tadal Access – difference between sildenafil and tadalafil

  18. LorenOmigo表示:

    cialis pill: cialis information – purchasing cialis online

  19. Josephmew表示:

    cialis generic canada mint pharmaceuticals tadalafil reviews cialis cheapest price

  20. Frankiegeops表示:

    https://tadalaccess.com/# what is cialis good for

  21. Frankiegeops表示:

    https://tadalaccess.com/# buy cialis/canada

  22. Shadowums表示:

    Помощь психолога анонимно. Психолог онлайн. Подбор психолога.

    Мы обязательно поможем преодолеть эмоциональный кризис, избавиться от тревожности и апатии, справиться со стрессом и депрессией, связанными с неуверенностью и многим другим.
    Психолог Москва. Психолог СПБ. Психолог онлайн.
    Психологическое консультирование заключается в том, чтобы помочь клиенту разобраться в своих проблемах и вместе с ним найти пути выхода из сложной ситуации.

  23. Masterkqb表示:

    Где найти психолога. Психологическая помощь онлайн анонимно. Чат анон.

    Психологическая помощь онлайн.
    Психолог, Сайт психологов.
    Нужен хороший психолог?

  24. ScottTrefs表示:

    centurion laboratories tadalafil review: cialis stopped working – blue sky peptide tadalafil review

  25. ScottTrefs表示:

    cialis online with no prescription: Tadal Access – cialis super active reviews

  26. LorenOmigo表示:

    cialis generic best price that accepts mastercard: TadalAccess – cialis online canada

  27. Frankiegeops表示:

    https://tadalaccess.com/# cialis generic timeline 2018

  28. Josephmew表示:

    cialis results Tadal Access buy cialis overnight shipping

  29. Josephmew表示:

    cialis 5mg review TadalAccess cialis 10mg ireland

發佈留言

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