標籤：
第三期教程語言有些浮誇了，而且內容不太充實，請原諒。
第四期我想介紹的是header.php即每個頁面都有的頭部，製作單獨的頭部，之後在設計其他頁面的時候就可以直接引用。軟體設計中有一個原則就是避免書寫重複代碼。把這個原則用於網頁設計，就是把一個網站共同的部分提出來單獨編寫。
header.php用到的主要技術是bootstrap和php的session。bootstrap是一個css和javascript架構。官方的宣傳語是：Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
使用bootstrap最大的兩點好處是：
1.響應式布局：用bootstrap製作的網頁會根據螢幕解析度自適應，這點是非常實用的，在移動終端盛行的年代，網站不可能只面向一種裝置。
2.bootstrap可以讓一個不擅長美工的碼農設計出漂亮的網站，現在快速開發的網站很多都採用bootstrap架構。
session原理：session簡單來說就是將內容臨時儲存在伺服器，而與之相對應的cookie則是將內容儲存在使用者端。session預設有三種儲存機制：檔案儲存體方式，記憶體儲存方式和使用者自訂儲存方式。對於伺服器不是很好的開發人員來說，採用預設的檔案儲存體方式就可以了，對於記憶體大，追求速度，並且並發量較小的網站可以採用記憶體儲存。修改儲存方式可以通過修改php.ini檔案中的session.save_handler的值。
最終效果如下：
下面就是header.php的源碼，想說的基本都寫在注釋中了，有什麼不理解或者覺得不對的地方可以一起交流。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<link href="css/bootstrap.css" rel="stylesheet">
<script src="JS/jquery-2.1.4.js" language="JavaScript"></script>
<script src="JS/bootstrap.js" language="JavaScript"></script>
<!-- 引入樣式表和JS檔案 -->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<!-- 定義navbar（導航條） navbar-default（預設導航條）navbar-fixed-top（固定在頂端，不會消失）以上第二第三個參數可以自行修改，參考bootstrap中文網 -->
<div class="container">
<!-- 定義一個容器，讓兩端有間距 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 這個button是為手機平板等自適應而設計的，你可以將瀏覽器縮小就可以看到效果，icon-bar就是一條橫線表徵圖 -->
<a class="navbar-brand" href="#">Blog_Logo</a>
<!-- 這個是網站的logo，如果你有以上這行可以改成
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
-->
</div>
<div id="navbar" class="navbar-collapse collapse">
<!-- collapse也是為響應式而設計，當螢幕解析度小到一定程度時導航就會摺疊 -->
<ul class="nav navbar-nav">
<li><a href="index.php">Home</a></li>
<!-- 首頁 -->
<li><a href="about_me.php">About</a></li>
<!-- 自我簡介 -->
<li><a href="list.php">Article List</a></li>
<!-- 文章列表 -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">classification <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">類型1</a></li>
<li><a href="#">類型2</a></li>
<li><a href="#">類型3</a></li>
<li role="separator" class="divider"></li>
<!-- 一條橫線 -->
<li class="dropdown-header">類型4</li>
<li><a href="#">類型4的子類1</a></li>
<li><a href="#">類型4的子類2</a></li>
</ul>
</li>
<!--這是一個下拉式功能表可以包含一些文章分類資訊-->
</ul>
<ul class="nav navbar-nav navbar-right">
<?php
session_start();//啟動session
if($_SESSION[username]){//如果使用者名稱存在則輸出使用者名稱，增加退出按鈕
/* 需要說明的是這兒最好還需要驗證以下密碼，等設計完登入頁面，我們再回頭加上 */
echo "<ul class=\"nav navbar-nav navbar-right\">";
echo "<li><a href=\"admin/admin.php\">$_SESSION[username]</a></li>";
echo "<li><a href=\"config/logout.php\">退出</a></li>";
echo "</ul>";
}else{ //否則顯示登入，這裡要注意雙引號內的轉義
echo "<ul class=\"nav navbar-nav navbar-right\">";
echo "<li><a href=\"login.html\">請登入</a></li>";
echo "</ul>";
}
?>
</ul>
<!-- 導航右側的內容 -->
</div>
</div>
</nav>
</body>
</html>
邊學邊做之php+mysql+smarty+apache搭建個人部落格(4):header.php詳解
