[筆記] 基本RWD版型設計 ~ PJCHENder<br>那些沒告訴你的小細節

最近在馬老師雲端工作室開始上了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來達到水平置中的效果。

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

PJCHENder
那些沒告訴你的小細節

—不怕面對改變，敢於挑戰不熟悉的事物—

2015年5月1日

[筆記] 基本RWD版型設計

0 意見:

張貼留言