網站規劃與設計上課補充教材

第四堂課: 使用 PHP 的簡單函式將網頁切割成數個固定與變動項目

所謂的『網站』應該是要有一致風格的項目,至少畫面風格、版面配置都得要有大略相同、相似的模樣才行。如果使用所見即所得的模式來處理, 一開始使用複製的方式應該可以建立相當相同的網頁,只是,如果版面風格需要變動時,你得要每個檔案都拿出來重新修改才行。如果只是十幾二十個檔案, 那修改的幅度還 OK 啊!如果像鳥哥的網站動不動就幾百個檔案,要修改完備,會要了你的老命~所以,這時透過將網頁『固定』的項目與『變動』的項目獨立出來, 放在不同的檔案,以『變動的內容』為主體,去呼叫『固定不變的』檔案,那就能夠將整個網站組合起來。雖然使用框架 (frame) 也能夠達成此目標, 不過,鳥哥不是很建議 frame 啦!畢竟我們現在設計的內容需要『瀏覽器看得懂』,不只是人眼看得懂而已。瀏覽器看得懂的話,未來他就能夠將資料帶給其他硬體。 而使用 frame 恐怕會讓瀏覽器看不懂啦!
本章重點目標:
  1. 由於 header, nav, aside, footer 大多是固定的內容,而 content 才是變動的內容,因此我們將 header, nav, aside 放置於 include/header.php 檔案中, 將 footer 放入 include/footer.php 檔案中,並且將 content 的 <div class="content"> 放在 header.php 檔案中,這樣變動的檔案內容可以更精簡, 至於 content 的 </div>則可以放置到 footer.php 檔案中喔!也就是說,每次讀取任何一個網頁時,該網頁會這樣讀取:
    1. 先到 include/header.php 讀取前面的部分 (包括 <head> 的宣告部分等等)
    2. 然後是該網頁自己的內容
    3. 最後再讀入 include/footer.php 的檔案內容,以完成全部的網頁資料
    在這樣的條件下,每一個新的網頁都不需要 header.php, footer.php 的內容,只需要加入一點點資訊,就是一個完整的網頁。 而當你修改了 footer.php 或 header.php 時,系統的所有網頁也都會同步更新顯示新的資料!

  2. 由於我們會用到 PHP 的功能,因此需要瞭解幾個重要的 PHP 網頁程式語言的說明:
    • 副檔名一定要是 .php 才行!否則我們的瀏覽器並不會知道那是程式語言;
    • PHP 的程式碼一定要包含在 <?php xxxxx ?> 當中,其中 xxxx 則是 PHP 所提供的程式語言,包括 include, if() 等等的函數功能呦!
    • 最單純的呼叫其他檔案來到本檔案,可以使用 include("filename"); 來處理,注意每一行指令結尾必須是分號 (;) 喔!

  3. 修改你的 index.html 讓他變成 index.php,將『固定不變的』 header, nav, aside 搬動到前述的 header.php 檔案中,將 footer 搬動到 footer.php 檔案中, 並將會持續變動的資料保存在 index.php 當中,再透過 include 或 require 的方式將這兩個檔案『呼叫到正確的位置』上, 這樣,你的 index.php 內容將保持與原本相同喔!最終 index.php 會點像這樣:
    <?php 
    	include ('include/header.php');
    ?>
    xxxxxx
    xxxxxx
    <?php 
    	include ('include/footer.php');
    ?>
    
  4. 在撰寫連結時,你必須要知道所謂的【絕對路徑】與【相對路徑】的檔名,任何時刻,從主機名稱的網址列 (url) 的斜線(/)開始寫起的檔名, 就是所謂的絕對路徑。而如果沒有從斜線開始寫的,就是相對路徑。相對路徑的呼叫與呼叫者網頁的位置有關係。常見的特別目錄有底下幾個:
    • .  本目錄
    • .. 上層目錄

  5. 將剛剛完成的 index.php 複製到 class/ 目錄下,且檔名設定為 class04_1.php 的檔案,然後嘗試直接在網址列輸入這個 class04_1.php,然後進行下列的修訂:
    • 結果網頁內容是否能夠正常的顯示?如果不能,要如何進行修改?
    • 在 class04_1.php 裡面,點選回首頁,能否回到首頁?
    • 在 header.php 裡面,將所有的連結都使用絕對路徑 (/~xxxx/xxx....) 的方法來處理一下,這樣能否順利瀏覽?
    • 思考一下,如果這個網頁被移動,那麼所有的超連結項目全部都要重新修訂,有沒有很複雜? (雖然還是只改一個網頁)

  6. 任何在 header.php 或 footer.php 當中的超連結項目,請務必使用絕對路徑,亦即由根目錄寫起的路徑!舉例來說,本學期有 4070cxxx 的學生帳號, 這個帳號的根目錄就是 /~4070cxxx/ ,你的所有超連結資料均須從這個連結寫起,否則由於不同的檔案放置到不同的目錄中,可能會有父目錄、子目錄的問題, 可能會導致某些檔案的錯亂喔!這點特別留意!
    <?php 
    	$wwwroot="/~4070cxxx/";
    	include ('include/header.php');
    ?>
    ...
    	<a href="<?php echo $wwwroot; ?>/your/page.php">連結顯示</a>
    
  7. 請將 header.php 裡面,有關絕對路徑的位置,全部調整成上述的模樣 (透過變數來處理的樣式)

  8. 將上課的課程連結放置到網站根目錄的 mylink.php 檔案中,使用清單的模式來處理!並做一個名為 class 的子目錄,在此子目錄下建立 myclass_04.php 的檔案, 內容為 mylink.php 的內容,只是在標題的部份可加入不同的說明就是了。請將 mylink.php 取代 nav 第一層選單的點選中,至於 myclass_04.php 則加入此項目的第二層選單中。再次去瞧一瞧有沒有正確的顯示,同時去感受一下,什麼叫做『絕對』與『相對』路徑的差異!非常重要的練習!

  9. 將所有作業的連結放入 nav 的第一層與第二層選單中,但是需要注意的是,之前某些課程中,包括 style1.css, style2.css, demo.html, demo2.html 等檔案,由於需要呼叫不同的 style 檔案風格,因此需要個別的需要獨立的頁面,不需要跟本周的處理方式結合。 這是因為一個是網頁風格檔,一個是呼叫不同的 style 檔,所以需要進行分隔!

  10. 如果想要在 <title> 裡面加入不同的名詞時,可以在變動的網頁中最上方,加入類似『 $mytitle = "my title name"; 』的內容, 然後修改 header.php 的資料,透過 <?php echo $mytitle ; ?> 來將這個資料取代出來~就能夠有每一頁的獨特顯示資料了! 這也能夠展示『變數』對於網頁設計的重要性喔!

  11. 以後進行網頁設計時,均須將資料上傳到伺服器後,才能夠確認修改的正確性喔!因為使用了 PHP 呼叫了資料!

本章練習與習題:
  1. 讓整體網站風格一致化!可以簡化很多的管理問題!
  2. 『固定』的網頁部份,請使用絕對路徑,『變動』的部份則隨意均可!
  3. 將上述資料進行完畢,並於首頁加入正確的連結,將結果上傳後,到上傳網站查閱是否正確處理才可以!