如何 - 構建網站
瞭解如何建立一個快速且出色的響應式網站，該網站可在所有裝置、PC、筆記型電腦、平板電腦和手機上執行。
使用 CSS 框架建立網站
“佈局草圖”
在構建網站之前，繪製頁面設計的佈局草圖明智之舉。
擁有“佈局草圖”將使建立網站變得容易得多
導航欄
樂隊
樂隊描述
樂隊描述
樂隊描述
文章
文章
文章
頁尾
Doctype、Meta 標籤和 CSS
doctype 應將頁面定義為 HTML5 文件
<!DOCTYPE html>
meta 標籤應定義字元集為 UTF-8
<meta charset="UTF-8">
viewport meta 標籤應使網站適用於所有裝置和螢幕解析度
<meta name="viewport" content="width=device-width, initial-scale=1">
W3.CSS 應滿足我們所有的樣式需求以及所有裝置和瀏覽器的差異
<link rel="stylesheet" href="https://w3schools.tw/w3css/3/w3.css">
要了解更多關於使用 W3.CSS 進行樣式設計的資訊，請訪問我們的 W3.CSS 教程。
我們第一個空的網頁將看起來像這樣
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.tw/w3css/3/w3.css">
<body>
<!-- Content will go here -->
</body>
</html>
注意：如果您想從頭開始建立一個網站，而無需 CSS 框架的幫助，請閱讀我們的 如何製作網站教程。
建立頁面內容
在我們的網站的 <body> 元素內，我們將使用我們的“佈局圖”並建立
- 導航欄
- 幻燈片
- 頁首
- 一些部分和文章
- 頁尾
語義元素
HTML5 引入了幾個新的語義元素。使用語義元素很重要，因為它們定義了網頁的結構，並幫助螢幕閱讀器和搜尋引擎正確讀取頁面。
這些是一些最常見的語義 HTML 元素
<section> 元素可用於定義網站中具有相關內容的部分。
<article> 元素可用於定義單個內容塊。
<header> 元素可用於定義頁首（文件、部分或文章中的）。
<footer> 元素可用於定義頁尾（文件、部分或文章中的）。
<nav> 元素可用於定義導航連結的容器。
在本教程中，我們將使用語義元素。
但是，是否使用 <div> 元素取決於您。
導航欄
在我們的“佈局草圖”中，我們有一個“導航欄”。
<!-- Navigation -->
<nav class="w3-bar w3-black">
<a href="#home" class="w3-button w3-bar-item">Home</a>
<a href="#band" class="w3-button w3-bar-item">Band</a>
<a href="#tour" class="w3-button w3-bar-item">Tour</a>
<a href="#contact" class="w3-button w3-bar-item">Contact</a>
</nav>
我們可以使用 <nav> 或 <div> 元素作為導航連結的容器。
w3-bar 類是導航連結的容器。
w3-black 類定義了導航欄的顏色。
w3-bar-item 和 w3-button 類樣式化了欄中的導航連結。
幻燈片
在“佈局草圖”中，我們有一個“幻燈片”。
對於幻燈片，我們可以使用 <section> 或 <div> 元素作為圖片容器
<!-- Slide Show -->
<section>
<img class="mySlides" src="img_la.jpg" style="width:100%">
<img class="mySlides" src="img_ny.jpg" style="width:100%">
<img class="mySlides" src="img_chicago.jpg" style="width:100%">
</section>
我們需要新增一些 JavaScript 來每 3 秒更改一次影像
// Automatic Slideshow - change image every 3 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000);
}
部分和文章
檢視“佈局草圖”，我們可以看到下一步是建立文章。
首先，我們將建立一個包含樂隊資訊的 <section> 或 <div> 元素
<section class="w3-container w3-center" style="max-width:600px">
<h2 class="w3-wide">THE BAND</h2>
<p class="w3-opacity"><i>We love music</i></p>
</section>
w3-container 類負責標準內邊距。
w3-center 類使內容居中。
w3-wide 類提供了一個更寬的標題。
w3-opacity 類提供文字透明度。
max-width 樣式設定了樂隊描述部分的最大寬度。
然後我們將新增一個描述樂隊的段落
<section class="w3-container w3-content w3-center" style="max-width:600px">
<p class="w3-justify">
我們建立了一個虛構的樂隊網站。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
w3-justify 類使文字的左右邊距對齊。
然後建立帶有每個樂隊成員的 <article> 或 <div> 的 <section> 或 <div>
<section class="w3-row-padding w3-center w3-light-grey">
<article class="w3-third">
<p>John</p>
<img src="img_bandmember.jpg" alt="Random Name" style="width:100%">
</article>
<article class="w3-third">
<p>Paul</p>
<img src="img_bandmember.jpg" alt="Random Name" style="width:100%">
</article>
<article class="w3-third">
<p>Ringo</p>
<img src="img_bandmember.jpg" alt="Random Name" style="width:100%">
</article>
</section>
頁尾
最後，我們將使用 <footer> 或 <div> 建立頁尾
<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-black w3-xlarge">
<a href="#"><i class="fa fa-facebook-official"></i></a>
<a href="#"><i class="fa fa-pinterest-p"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-flickr"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<p class="w3-medium">
Powered by <a href="https://w3schools.tw/w3css/default.asp" target="_blank">w3.css</a>
</p>
</footer>
fa fa 類是 Font Awesome 圖示類。
要使用這些類，您必須連結到 Font Awesome 庫
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
要了解更多關於使用圖示的資訊，請訪問我們的 圖示教程。
