綜合練習——俏江南網站之三——如何從一個網頁得到網站的其他頁面
我們已經制作了一個網頁的基本架構，下面的工作，我們将分為兩部分來做。
1.用動态頁結合資料庫生成頁面中的新聞清單部分。
2.以已經完成的頁面為基礎快速得到其餘頁面。
下面我們首先來談第二個部分，如何動态生成裡面的新聞清單，将在下一篇中談到。
首先來看我們做好的頁面
紅色文字和方框标注出來的部分是各個頁面相同的（除了首頁），藍色部分标出來的是每個頁面獨立的部分。為了加快頁面設計速度，降低網站管理成本。我們需要把公共的部分拿出來單獨建立檔案，然後再把檔案用include的方式放回去。這樣，未來每個頁面中，相同的部分都指向同一個檔案，需要修改公共内容時，不需要一個個修改，隻需要把指向的那個公共檔案修改掉就可以了。
下面我們來看詳細的步驟
1、從源檔案中建立公共部分
（1）首先來看源代碼
我們需要導出成單獨檔案的部分包括，logo和menu（頭部），mind（理念部分），導航（含電話号碼和位址部分），footer，right_edge(右邊的紅燈籠)。
公共部分（content）
這些部分，有的是一個div，有的是兩個div ，有的級别較高，有的級别較低。大家制作的時候要加以注意。
（2）導出頭部（logo和menu）
切換到代碼視圖，找到類似如下字樣（各個同學的可能不盡相同）。
<div id="logo"></div> <!--logo，需要左浮動-->
<div id="menu">
<ul>
<li class="index"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >首頁</a></li>
<li class="sub1"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >關于俏江南</a></li>
<li class="sub2"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >菜品介紹</a></li>
<li class="sub3"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >餐廳導航</a></li>
<li class="sub4"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >人才招聘</a></li>
<li class="sub5"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >新聞中心</a></li>
</ul>
</div> <!--菜單，需要左浮動-->
将之拷貝，在dw下建立一個靜态頁，切換到代碼視圖，如圖所示
将之全部删除，把上一步的logo和menu的代碼粘貼進來。如圖所示
将這個頁面另存為head.html。切換到設計視圖，可以看到，其實這個裡面隻有内容，沒有樣式。
(3)用相同的方法分離出mind
<div id="mind">
<div id="m1">
<p> <span class="STYLE13" >正是江南好風景</span></p>
<p class="STYLE13" >花開時節又<span class="STYLE7">逢</span>君</p>
</div>
</div>
同樣建立一個靜态頁，進入代碼視圖，将裡面所有的文字删除，把上面這段mind的代碼粘貼進來，另存為mind.html.
(4)分類導航部分
<div id="nav">
<div>
<h1>新聞中心</h1>
<ul>
<li>公司新聞</li>
<li>公關活動</li>
<li>優惠資訊</li>
<li>企業内刊</li>
<li>公益事業</li>
<li></li>
</ul>
</div>
<div id="tel"> <!--下面那個放電話号碼的紅塊-->
<p class="STYLE8"> </p>
<p align="left" class="STYLE8"> 公司位址</p>
<p align="left" class="STYLE11">北京東城區</p>
<p align="left" class="STYLE11">國貿大廈18樓1820号</p>
<p align="left" class="STYLE10"> Tel：010-1234567</p>
<p align="left" class="STYLE10"> </p>
</div> <!--下面那個放電話号碼的紅塊結束-->
</div> <!--nav結束-->
建立一個靜态頁，删掉裡面的代碼，把上面的代碼粘貼進去，另存為nav5.html（各個頁面的二級導航不同，這裡的nav是sub5，也就是第五個欄目“新聞中心”的二級導航）
（5）右邊的紅燈籠部分
這部分内容非常簡潔，很容易辨認。導出後另存為right_edge.html
<div id="right_edge">
<div id="r1"></div>
<div id="r2"></div>
</div> <!--右邊放燈籠和上面的小連結部分-->
（6）footer部分
footer部分邊界清晰，非常容易辨認。導出後另存為footer.html
<div id="footer">
<p class="STYLE14">俏江南飲食服務有限公司 2012 版權所有 京ICP 000123456号</p>
<p class="STYLE14"> </p>
<p><span class="STYLE14">South Beauty restaurant Co., Ltd. 2012 all right reseverd? <a href="[email protected]
mailto:[email protected]">[email protected]</a></span></p>
</div>
2.建立動态頁
因為上述這個公共部分需要用include的形式才能導回到頁面，而靜态頁并不認識include代碼，是以們需要建立一個動态頁。
在dw下建立一個動态頁（VBScript）。切換到代碼視圖
可以看到，動态頁和靜态頁相比，除了檔案本身的擴充名之外，代碼裡面最上面多了一行代碼，其他的沒有什麼差別。
（1）拷入樣式
回到原網頁，在兩個head之間找到類似如下代碼
<link href="style.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.STYLE7 {
color: #FF0000;
font-size: 48px;
}
.STYLE8 {font-size: 24px}
.STYLE10 {
color: #FFFFFF;
font-size: 24px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
}
.STYLE11 {color: #FFFFFF; font-size: 22px; }
.STYLE13 {font-family: "葉根友毛筆行書簡體"}
.STYLE14 {font-family: "楷體_GB2312"}
-->
</style>
其中，最上面的一句“<link href="style.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />”是導入相應的樣式表檔案，這個檔案是我們在設計過程中不斷建立的，下面的部分是我們生成的内嵌樣式，主要是在修改左變靠下的電話号碼和公司位址資訊的時候直接在屬性欄裡修改樣式得到的。這種嵌入在網頁中的樣式，我們并不提倡，因為它會使得網頁中樣式代碼比例太多，影響内容文字所占的比例，進而影響到SEO的品質。以後大家要加以注意，盡量不要圖省事，産生這種代碼。
大家可以把這些内容剪切出來，從.style7開始到</style>之前，然後打開樣式表檔案，把代碼粘貼到樣式表檔案的最後，最後把<style type="text/css">和</style>删除掉（這兩行标志樣式代碼的開頭和結束。裡面的樣式代碼拷出後就沒什麼用處了），這樣在網頁中，代碼部分看起來就幹淨多了。
修改過以後的網頁代碼頭部
CSS檔案（尾部）
可以看到剛才拷貝過來的代碼。從style7到style14
把原網頁<head></head>之間剩下的<link href="style.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
拷貝出來，拷貝到建立的動态頁同樣的位置。樣式檔案導入即告完工，下面我們開始導入内容部分。
(2)在<body>後面先寫入如下代碼
<div id="container">
<div id="main">
</div>
</div>
進一步的修改，将上面我們生成的各個頁面導入進來，注意br的使用和頁面的整體結構。
div id="container">
<div id="main">
<!--#include file="head.html"-->
<br>
<!--#include file="mind.html">
<!--#include file="nav5.html">
<div id="content">此處放内容</div>
</div>
<!--#include file="right_edge.html>
<br>
<!--#include file="footer.html>
</div>
回到設計視圖中預覽效果，在content裡面随意敲入幾個空行，将頁面拉長。最終需要傳到伺服器上才能看到完整的效果。
![網站制作公司[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)