2015年5月1日 星期五

[筆記] 基本RWD版型設計

Responsive Web Design Logo
最近在馬老師雲端工作室開始上了RWD的課程,索性整理一些筆記。

設計出來的網頁長得像這樣

HTML部分
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
<!--    讓網頁不會自動因手機螢幕變小而扭曲,使得RWD網頁能正常執行-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>我的第一堂RWD</title>
    <link href="main.css" rel=stylesheet>
</head>
<body>

    
<div>
    <header></header>
    <nav><img src="images/btn1.gif"><img src="images/btn2.gif"><img src="images/btn3.gif"><img src="images/btn4.gif"><img src="images/btn5.gif"><img src="images/btn6.gif"><img src="images/btn7.gif"></nav>
    <aside><img src="images/logo.jpg"></aside>
    <span><a href="#">有名堂史</a>&nbsp;<a href="#">菜色導覽</a>&nbsp;<a href="#">最新活動</a>&nbsp;<a href="#">分店資訊</a>&nbsp;<a href="#">意見回饋</a>&nbsp;<a href="#">線上訂購</a>&nbsp;<a href="#">關於作者</a></span>
    <article>
        <h1>有名堂讓飲食富有新生命!</h1>
在這裡您可以品嘗到道地香港師傅料理的菜餚,手工捏製的點心,以及創意多元的料理,不論是熱炒、點心、飯麵粥品、煲湯、手工甜品等,全都是師傅的拿手好菜。
        <h2>台北市文山區木新路3段123號</h2></article>
    <footer>網站企劃製作:巨匠電腦 永和分校 馬世驊 老師 版型繪製:黃千秀</footer>
</div>

</body>
</html>
這裡面比較需要注意的地方:

1.多利用HTML預設的標籤:
在設計網頁時,可以多利用HTML預設的標籤,像是<nav></nav><header></header><sidebar></sidebar><article></article>,這樣也可以有利於SEO。關於HTML中的標籤,可以參考馬老師寫的這篇HTML介紹


2.插入一段meta:
在RWD中,為了要讓行動裝置能夠正確讀取RWD的版型,避免網頁因裝置螢幕變小而自動扭曲網頁的現象,我們要在<head></head>中加入下面這段語法:
<meta name="viewport" content="width=device-width, initial-scale=1">
這段的意思是把網站呈現的寬度設定成和裝置的寬度一樣(如果裝置的寬度是320px,則網站的寬度也設成320px),而不是把960px的網頁內容所小成320px來呈現;initial-scale=1的意思,就是不要縮放網頁的意思。

更多的說明可以參考<CSS-TRICKS:Responsive Meta Tag>這篇文章。

3.不重要的圖片放在Background
不重要的圖片指的不是網友會不會看到或圖片重不重要,而是指網友不會點選到的圖片,這類的圖片我們都在CSS中用background-image來呈現,而不要在網頁中用img屬性。



4.引入外部CSS檔案
我們可以在另一個檔案把CSS寫好,然後引入這個網頁中讀取,方法是使用:
 <link href="檔案路徑" rel=stylesheet>
rel指的是這個檔案和這個網頁的關係(relationship),這裡是樣式表的關係。

CSS部分

/*        適用於電腦螢幕*/
    @media screen{
        div{
            width:880px;
            height:560px;
            margin:auto;
        }
        header{
            width: 880px;
            height: 260px;
            background-image: url(images/header.jpg);
        }
        nav{
            width: 880px;
            height: 55px;
            background-image: url(images/nav.gif);
        }
        nav img{
            margin: 5px 25px 0px;
        }
        aside{
            width:635px;
            height: 265px;
            background-image: url(images/aside.jpg);
            float: left;
        }
        aside img{
            display:none;
        }
        span{
            display: none;
        }
        article{
            width:245px;
            height:265px;
            background-image: url(images/article.gif);
            float: left;
            font-size:13px;
        }
        article h1{
            font-size:20px;
            color:brown;
            text-align: center;
            font-family:微軟正黑體;
            text-align: center;
            margin-top:40px;
        }
        article h2{
            font-size:14px;
            font-weight: normal;
            text-align: center;
            margin-top: 30px;
        }
        footer{
            width:880px;
            height:20px;
            background-image: url(images/footer.gif);
            clear:both;
            font-size:13px;
            text-align: center;
        }
    }
/*        適用於印表機列印時*/
    @media print{
        div{
            width:80%;
            height:auto;
            margin:auto;
        }
        header{
            width: 880px;
            height: 260px;
            background-image: url(images/header.jpg);
            display:none;
        }
        nav{
            width: 880px;
            height: 55px;
            background-image: url(images/nav.gif);
            display:none;
        }
        nav img{
            margin: 5px 25px 0px;
        }
        aside{
            width:100%;
            height: auto;
            background-image: none;
            float: none;
            text-align: center;
        }
        span{
            display: none;
        }
        article{
            width:100%;
            height:auto;
            background-image: none;
            float: none;
            font-size:16pt;
        }
        article h1{
            font-size:20pt;
            color:brown;
            text-align: center;
            font-family:微軟正黑體;
            text-align: center;
            margin-top:40px;
        }
        article h2{
            font-size:16pt;
            font-weight: normal;
            text-align: center;
            margin-top: 30px;
        }
        footer{
            width:100%;
            height:auto;
            background-image: none;
            clear:both;
            font-size:13px;
            text-align: center;
        }
    }
/*        適用螢幕寬度小於480px的裝置(當螢幕小於480px時)*/
    @media screen and (max-width:480px){
        div{
            width:100%;
            height:auto;
            margin:auto;
        }
        header{
            width: 880px;
            height: 260px;
            background-image: url(images/header.jpg);
            display:none;
        }
        nav{
            width: 880px;
            height: 55px;
            background-image: url(images/nav.gif);
            display:none;
        }
        nav img{
            margin: 5px 25px 0px;
        }
        aside{
            width:100%;
            height: auto;
            background-image: none;
            float: none;
        }
        aside img{
            display:block;
            margin: auto;
        }
        span{
            width:80%;
            margin: auto;
            height:auto;
            text-align: center;
            display: block;
            padding-top: 30px;
        }
        article{
            width:80%;
            height:auto;
            background-image: none;
            float: none;
            font-size:13px;
            margin: auto;
        }
        article h1{
            font-size:20px;
            color:brown;
            text-align: center;
            font-family:微軟正黑體;
            text-align: center;
            margin-top:40px;
        }
        article h2{
            font-size:14px;
            font-weight: normal;
            text-align: center;
            margin-top: 30px;
        }
        footer{
            width:100%;
            height:auto;
            background-image: none;
            clear:both;
            font-size:13px;
            text-align: center;
            display: none;
        }
    }
/*        適用於平版直著拿的情況(平版橫著拿的情況就和電腦螢幕相同)*/
    @media screen and (min-width:481px) and (max-width:768px){
         div{
            width:100%;
            height:auto;
            margin:auto;
        }
        header{
            width: 880px;
            height: 260px;
            background-image: url(images/header.jpg);
            display: none;
        }
        nav{
            width: 100%;
            height: auto;
            background-image: none;
            text-align: center;
            padding-bottom: 30px;
        }
        nav img{
            margin: 5px 5px 0px;
        }
        aside{
            width:100%;
            height: auto;
            background-image: none;
            float: none;
            text-align: center;
        }
        aside img{
            display:inline-block;
        }
        span{
            display: none;
        }
        article{
            width:80%;
            height:auto;
            background-image: none;
            float: none;
            font-size:16px;
            margin: auto;
        }
        article h1{
            font-size:24px;
            color:brown;
            text-align: center;
            font-family:微軟正黑體;
            text-align: center;
            margin-top:40px;
        }
        article h2{
            font-size:20px;
            font-weight: normal;
            text-align: center;
            margin-top: 30px;
        }
        footer{
            width:100%;
            height:auto;
            background-image: none;
            clear:both;
            font-size:16px;
            text-align: center;
        }
    }
CSS的部分看起來雖然很長,但可以分成幾個重點

1.利用@media來說明適用時機
這裡主要有四個不同的media
@media screen{css樣式}
是適用於一般的電腦螢幕,除非特別還有針對大螢幕設計,不然以寬度1024px以上的都算是電腦螢幕。

@media screen and (max-width:480px){css樣式}
是適用於手機的,意思是當螢幕小於480px時適用。一般手機的螢幕寬度大多都小於480px,所以我們可以把寬度小於480px的都當作手機適用的尺寸。

@media screen and (min-width:481px) and (max-width:768px){css樣式}
意思是當螢幕小於768px,大於481px的情況。這是給平版適用的,但是是平版直著拿的情況,因為一般平版橫著拿的時候寬度就是1024px了,所以一般來說可以直接適用電腦螢幕的格式,所以我們只需要設計平版直著拿的時候所看到的畫面

@media print{css樣式}
這是給印表機列印時使用的

2.適當的使用display:none
適當的使用CSS中的display:none把不需要呈現的區塊隱藏起來。



3.印表機的設計
印表機的CSS中,比較特別的是長度和寬度的單位要用cm,或者直接用%來表示,而文字大小則要用pt來表示



在列印時背景圖片並不會自動顯示出來,需要另外於列印時勾選「列印背景圖片」。



4.行動裝置的長度、寬度設計
行動裝置的寬度常根據想要的寬度用%來改變,而高度就用auto。一般來說,相當常用的是width:100%; height:auto,或如果左右要留邊的話就用width:80%。

5.並排呈現
在這個例子中,我們可以看到aside和article這兩個區塊是並排的,要做到這個功能,我們可以用float來達到,我們讓aside和article這兩個區塊都是float:left。最後有一個很重要的動作,是因為aside和article這兩個區塊都浮起來,所以下面的footer會趁虛而入,這時候在footer的區塊,我們要使用clear這個指令(clear:both)把float造成的效果清除掉。






6.關於水平置中
如果是區塊要水平置中,一般使用的是margin: auto這樣的指令,但有些時候雖然是區塊,卻還是沒辦法置中,這時候要注意是不是因為我們沒有給它寬度,當沒有給它寬度的時候,預設就是和螢幕一樣寬,所以也沒辦法再將區塊進行置中的動作。



如果是一個區塊內的內容要水平置中,這時候就要用到text-align:center這樣的指令。



在aside img這個css中,為了要讓它顯示出這個區塊,我們使用了display:block,但是這會使得在aside這個區塊中,無法使用text-align:center來置中圖片,因為img已經被當成一個區塊來處理的,這時候如果我們想要將aside img這張圖片置中的話,我們要直接在aside img這個區塊的css中加入margin:auto來達到水平置中的效果




以上內容均為本人在馬老師雲端研究室學習所整理之筆記
Share:

0 意見:

張貼留言