切版閃電五連邊-從W3schools學習layout設計

切板對很多新手來說是一個不易跨過的門檻，但是有時候是自己沒有找到適合自己的方法學習。
這邊我們從W3schools的Website 來帶大家學習什麼是閃電邊（Ｘ）切版常見的layout。

導讀W3schools文件

其實W3schools是一個很好的學習平台，介面也做得比以前更簡潔好用，但是可能有些人光是看到內容是英文就投降了。
事實上以coding來說，英文並不用很厲害就可以閱讀大部分你需要用到的資訊了。
但是提升英文對於survey一些技術文件是多少有加分的，可以降低不少負擔與時間成本。
所以各位從現在開始，一起來閱讀W3schools的文件吧！

什麼是閃電邊

這就要從不久前的事件說起了，傳說有一名武功傳奇人物展示了一套絕世武功。
原本以為他是在展示武術，但是不得了呀，原來也是在暗喻一套切版武功呀！
俗話說，切版老手熟能生巧，有豐富經驗的人切版的速度可以說像是閃電般的快速呀。
究竟是哪一位奇才人物最近展示了這套武功呢，讓我們來瞧瞧：

就連我們的談話性節目主持人也按耐不住想學切板閃電邊啦～

View post on imgur.com

好…這不是重點，重點是我們要有實戰性！要動作！實戰性！！一定要有動作！！！

以下將會以這篇文章作為教材導讀來一口氣學習一些基本觀念。

這邊展示了常見的網頁layout設計：（但是不代表這就是固定的格式，網站上可以找到各種layout觀察）

我們藉由W3schools的這個範例來學習切版閃電邊

原文為：

1	A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name.

意思大概是Header通常會在網頁的最上方，時常包含logo或是網站名稱。
範例code非常簡單，你只需要把HTML和CSS分別設置好即可

主要先放置header的tag

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div class="header">
    <h1>Header</h1>
  </div>
</body>
</html>

補充：為了節省空間，以下的HTML範例我將只會放置body內的tags。

放置header的CSS
除了放置header style，為了避免旁邊留白，這裏reset margin為0。

body {
  margin: 0;
}

.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

這樣你就完成了第一邊了！

原文：

1	A navigation bar contains a list of links to help visitors navigating through your website

Navigation內時常包含一個list，這個list會包含很多個連結，讓使用者方便點選使用。

新增topnav
W3schools直接把topnav放在剛剛第一邊的下面

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

放置topnav styles
這邊先設定overflow hidden來避免超出範圍而跑版。
並且將裡面的連結靠左，不然會直接寬度佔滿整行。
最後賦予每個連結hover的效果。

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

設置完之後，你會發現第二邊也出來了！

終於來到第三邊了，看來我們離切版武功修煉成果的目標不遠了原文：

1	The footer is placed at the bottom of your page. It often contains information like copyright and contact info

新增footer的tag
直接新增在body的最下方，通常我們不太會動到footer
1
2
3
<div class="footer">
<p>Footer</p>
</div>

設置

.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}

哇～原來第三邊也是這麼簡單呀！
雖然第一邊到第三邊是網頁很重要的元素，但是第四邊和第五邊可以說是網頁最重要的靈魂喔。

第四邊 - Main Content

原文：

The layout in this section, often depends on the target users. The most common layout is one (or combining them) of the following
1-column (often used for mobile browsers)
2-column (often used for tablets and laptops)
3-column layout (only used for desktops)

第四邊一般來說會在網頁的中間，你可以視為是夾心餅乾或是漢堡，隨著目標客群或是使用者的不同，每個網站所呈現的也會不一樣。
最常見的網站形式通常是1~3-column的形式。
筆者認為1-column是最常見的樣式，3-column有可能會做成RWD的形式讓手機版也能瀏覽。

設置HTML
第四邊直接直接放到header和footer的正中間。

<div class="row">
    <div class="column middle">
        <h2>Main Content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
</div>

設置CSS
這邊設置column的class預設靠左
並且讓Main content佔整個content的50%

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

/* Middle column */
.column.middle {
  width: 50%;
}

第四邊的內容通常會是整理網頁的主餐，呈現的內容可能決定使用者到底有沒有誘因繼續使用這個網站。
最後即將加入最後的第五邊，如此就完成切版閃電邊的全套功夫了！

第五邊 - Side contents

最後我們來閱讀以下原文 - Unequal Columns：

1
2

The main content is the biggest and the most important part of your site.
It is common with unequal column widths, so that most of the space is reserved for the main content. The side content (if any) is often used as an alternative navigation or to specify information relevant to the main content. Change the widths as you like, only remember that it should add up to 100% in total

表示column的寬度是不一致的，因為我們必須要刻意強調某一個content作為主角，也就是剛剛提到的第四邊。
上面有提到兩個比較重要的關鍵字，也就是我們第五邊要討論到的。
alternative navigation 或 to specify information，也就是我們有時候也會把第五邊當作是第二邊的Navigation，或者是補述第四邊的main content所要提到的內容，最後寬度加起來會是100%。

加入HTML
我們直接加在第四邊的上方與下方

<div class="row">
  <div class="column side">
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
  
  <div class="column middle">
    <h2>Main Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column side">
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
</div>

加入side的CSS
只要和第四邊加起來是100%即可

/* Left and right column */
.column.side {
  width: 25%;
}

加入RWD
當第四邊和第五邊受到瀏覽器寬度擠壓或是本身寬度受限時，就會調整展示方式。
這邊是當寬度低於600時，將會讓第四邊和第五邊寬度佔滿100%，這樣使用者閱讀起來也比較清楚。

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}