2012-02-20 36 views
1

在教學介紹網絡課程的學生,我想找到最直接的方式建立一個多頁靜態網站約7沒有他們的頁面必須製作7個不同的頁面。很顯然,我可以讓他們製作一個單獨的頁眉,頁腳和菜單文件,並使用服務器端包含,並將這些內容放到7個不同的內容頁面上,但這種感覺很髒。尋找一個演示網站,使用最簡單的形式重複使用多個頁面儘可能

在過去,我讓他們這樣做:http://www.tropicalteachers.com/web110/?Ignore_WEB_119_CLEAN:MX_-old_Extra_Credit:Dynamic_PHP - 這是使用賦值爲模型進行快速實驗:http://www.yetirobotics.org/index2.php?pagename=team_yeti

不過我覺得應該是用做清潔/更簡單的方法JavaScript的,或者也許在PHP中 - 但我不知道如何。

基本上我想要一個主菜單和一個菜單 - 當菜單項被點擊時,它會加載不同的內容。我相信最好有七個不同文件的內容,但我可以想象它們都在同一個頁面內的JS中 - 記住,這個網站應該非常簡單。

我想限制爲html/css/js/php,最好是js或php而不是兩者。

只有索引頁控制(和加載)的一切。

謝謝!

回答

1

如果你想創建一個更現代的框架,那麼你應該考慮使用JavaScript動態顯示內容(如你在你的問題中所建議的)。要做到這一點,我會利用像jQuery這樣的框架,因爲它使得異步請求調用變得更加簡單。要做到這一點,您需要編寫一個頁面,其中包含標記爲動態內容的特定區域。

服務器端您可以設置頁面或數據庫返回主要內容區域,將根據請求更改。

客戶端可以使用jQuery的load將請求的內容放入內容區域。

$('#contentArea').load('url', function() { 
    //callback area in case there is other stuff you want to do with js 
    location.hash = 'blah'; 
}); 

或許,這將是有意義的改變頁面的hashmark使網頁似乎仍然靜態的,是可連接爲內容的變化。

location.hash = 'blah'; 

此外,您將需要在單擊時返回false覆蓋默認的鏈接行爲。

myLink.click = function() { 
    $('#contentArea').load('url', function() { 
     //callback area in case there is other stuff you want to do with js 
     location.hash = 'blah'; 
    }); 
    return false; 
} 

我認爲這將是對學生很好的一課,因爲它顯示了客戶端,服務器端,以及如何之間的差異將它們通過JavaScript動態連接。

相關問題