利用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...

4,091 Responses

  1. gloralar表示:

    Since 3 years, i’ve been using Mupen64Plus as my flash game of choice (and i mean that literally, i got myself a Game Boy and a Nintendo 64). Yeah, flash games can be pretty violent and girly, which doesn’t fit with my previous gaming habits, but not being able to emulate a N64 save file is such a disgrace! And now it seems like they have released version 4! Let’s see what have they changed, though!
    https://americap2.nyc3.digitaloceanspaces.com/upload/files/2022/05/1796st8oznUFy9kVl8UV_19_4c0434d2274658e2ec47e8f5e02da01c_file.pdf 05e1106874 gloralar

  2. Johnnyden表示:

    viagra sildenafil sildenafil 100 mg

  3. sanwon表示:

    The package does not contain any third-party watermarks (including the preview image).
    Don’t hesitate to send us your ideas for more great globe icon packs if you like.Spontaneous rupture of abdominal aortic aneurysm and spinal cavernous haemangioma in an adolescent.
    Spinal intramedullary cavernous haemangioma is a rare vascular tumour, and has not been previously reported as a cause of spontaneous myelopathy https://pergstipsenterp.weebly.com

    6add127376 sanwon

  4. chasan表示:

    A batch processor
    As a code editor for the TeX programming language, it is worth noting that VX can be used for both programming and filling scripts, but is also a useful tool for editing existing documents, compiling macros or even just notepad tasks. The program allows you to work in the ‘batch’ or ‘skip’ batch mode, designed for those tasks and tasks that do not require entering all the commands in the console. The program can compile multilevel https://unadenex.weebly.com

    6add127376 chasan

  5. sandamer表示:

    In this case, you can use the video and audio codec packs from to RadLight, or Otherworld Video Suite, as they come with a lot of different codecs and filters.

    Important notice: RedHat Security is not responsible of any damage or damages caused to your computer due to any other software or programs that you may get after the installation of this software.

    Why do men hate women? Is it a inner desire to control, to belittle and to hurt? https://mitsui-shopping-park.com/lalaport/toyosu/redirect.html?url=https://goyperconskleh.weebly.com

    6add127376 sandamer

  6. levsch表示:

    The program is free to use and open to non-commercial use.
    Read the full review and check out the video tutorial below.Titanium surface treatment and its biomechanical fixation effect on bovine vertebrae: A pilot study.
    To investigate the biomechanical properties of Ti-28Nb-6.4Zr (Ti-28Nb-6.4Zr in short) surface-treated bovine vertebrae in comparison with Ti https://clients1.google.fr/url?rct=j&sa=t&source=web&url=https://cowigupel.weebly.com

    6add127376 levsch

  7. makcha表示:

    A:

    There are many GUI editors available for free. Guitara doesn’t seem to offer any editing options. Another, Sourceforge project called Sonifi either offers editing options or can play back your MIDI files. There is a saying in the software business, “There is no silver bullet – so many are bad”. I recommend against investing too much into one software specifically when you can get a slew of different software from different sources for free (see Free Software?)

    Bridge https://eswalilreu.weebly.com

    6add127376 makcha

  8. opaglo表示:

    With so many Kentuckians immigrating to other countries to advance their careers, our job market has benefited significantly. Many of the skilled trades have also been built around engineering, law and medicine. This has led to an overall increase in demand for education for those interested in the more technologically advanced courses of Study. These types of programs often result in nurses or doctors whose first job is not in the medical field. The good news for anyone interested in the culinary arts is that Kentucky has been growing https://redsbotiga.weebly.com

    6add127376 opaglo

  9. chralb表示:

    It works on its own, and it’s a fairly easy application to use as well. All in all, it’s a pretty good choice.Q:

    Clicking a back button on a dialog breaks the task sequence

    I am currently buiding a task sequence to create couple of Windows 7 server, and I have run into a strange issue.
    When my task sequence launches, it can successfully log in the user, I add the things to the registry, https://esfletenthel.weebly.com

    6add127376 chralb

  10. weshen表示:

    Not only can it offer the functionality you need to grab what is under your mouse cursor, but it also allows you to save video from external sources to disk or stream it to social networks.
    Be sure to check out other wonderful DirectShow filter plugins for more functionality and polish.

    Description

    Bluesky Video Capture is a simple filter designed to work with the DirectShow multimedia framework in order to help you record activity from your desktop or from an application’s window. https://tinordvoltme.weebly.com

    6add127376 weshen

  11. ohandan表示:

    version
    ■ data recovery in case of freeze or hard crashing
    ■ geolocation markers only (no planview)
    ■ database needs to be synced every 3 minutes (2 digit time format) via serial port
    ■ only visible via serial port
    ■ can not be used for offline access (need the application)

    Lectra MarkerVision is a powerful software for round work pieces marking (grinding and cutting). It offers https://mastdarecbo.weebly.com

    6add127376 ohandan

  12. attahil表示:

    In this photo we have 6 – 8 pixels, but after detection we see only 6 pixels in the filter.

    The number of pixels we will see in this photo depends on bit depth of the image, so we change the color mode of the photo to RGB and decrease the bit depth./**
    * Copyright (c) Codice Foundation
    *
    * This is free software: you can redistribute it and/or modify it under the terms of the https://cantthoulapless.weebly.com

    6add127376 attahil

  13. usenaust表示:

    Heap data contains variables, strings, Win32 API strings, global memory, global structure information, imported variables, thread local data and more.
    Now you can also use Windows’ debugging tools, as well as visualize the.DBG file in order to view the variables and strings in the heap. Moreover, you can compile the.DBG file into a MINIDUMP file which can be analyzed through Windbg.

    GUI

    It has an interface very much like IDA Pro https://blocratuamen.weebly.com

    6add127376 usenaust

  14. pamnew表示:

    This is seen in the versatile behavior of the timeline. Even though we mentioned the fact that settings such as adjustment to video speed and time, and audio volume, have their inbuilt functionality, you can also adjust these manually using controls on the ruler.
    Moreover, the application provides options for color grading, and image effects, which can be visually applied on any area of a video frame. Furthermore, graphics inserted in the timeline are listed in the timeline, so they can easily be selected and adjusted https://www.meteomw.nl/template/pages/station/redirect.php?url=https://waykatiti.weebly.com

    6add127376 pamnew

  15. elatben表示:

    Once you’ve made your selection an…

    FontEXPRO is designed for advanced users of Microsoft Windows.
    It enables you to browse the entire list of TrueType fonts on your computer and make quick comparisons of the sizes of fonts and their glyphs.
    It is especially useful to identify fonts with strange character support, characters missing from them,…

    FontEXPRO is designed for advanced users of Microsoft Windows.
    It enables you to browse the entire list of TrueType fonts on your https://unilacmen.weebly.com

    6add127376 elatben

  16. latfab表示:

    I don’t personally use it, but I also’m comfortable with Access, and I use it to switch databases between my application and SQL Server on the fly when I’m developing my code. I’ve never had to rely on it, though, as I rarely upgrade my application to newer version of Access, and so my database is in one continuous state.
    Here are some benefits of using it:

    High Performance. You can spend time and money creating an SQL Server database, but https://livitonal.weebly.com

    6add127376 latfab

  17. laugtho表示:

    All secure your data inside SplendidCRM with the tools that it offers.
    SplendidCRM offers you a solution that can reduce the cost of Salesforce implementation, since it comes with a free version that includes all the basic features. The pricing plans vary with the extent and the functionality that you need to access.
    SplendidCRM’s focus lies on delivering streamlined CRM functionality to the end-user with great ease of use. This CRM software tool is http://3gbug.com/gourl.asp?ve=2&ff=931&url=https://tiomyptoma.weebly.com

    6add127376 laugtho

  18. ronsylv表示:

    After all, if users can interact and engage with a product’s visual elements using intuitive controls, it’s all worthwhile.

    Graceful, slow-motion gun effect
    No one likes autoplay if it’s going too slow. But with additive clicking, you’re right back in black when it’s time to stop. Just be sure to click on the gun once and not twice or more, because that’ll disable the feature.

    Graceful, slow-motion gun effect http://rainbowvic.com.au/?URL=https://centakofe.weebly.com

    6add127376 ronsylv

  19. edoevel表示:

    ===================================================
    Download Ashampoo Internet Accelerator…
    ===================================================

    Description

    Internet accelerator has been designed not only to boost your internet connection, but also to make your browsing on the web more enjoyable and reliable.
    The application is very easy to use and it provides you clear and simple way to select the most optimal connection settings for your connection.
    More…

    You can always get everything done online with Ashampoo Internet Accelerator for Windows. The program is https://lesstantvolria.weebly.com

    6add127376 edoevel

  20. Johnnyden表示:

    lowest price tadalafil tadalafil tablets 20 mg india cialis from india

  21. galrrnhf表示:

    buy modafinil 100mg pills provigil tablet order modafinil 100mg online cheap

發佈留言

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