2014-02-08 136 views
1

我開發了一個15-20頁的小型網站。格式化網頁內容。

該網站由 -

  1. 標題菜單。
  2. 內容(每頁不同)。
  3. 頁腳。

我以某種方式無法消化的事實,我必須在所有頁面上編寫頁眉菜單和頁腳的代碼。

有人可以幫助我瞭解如何設法在一個地方寫入重複代碼並將其導入或包含在所有頁面中。

另外,如果您能提及一個人如何處理與javascript代碼,圖像和css相同的情況,這將是一個獎金?

回答

1

你的問題是非常廣泛和通用的,非常正確的軌道上。看起來好像你從一個非常靜態的角度來接近這個網站建設項目,而你實際上需要動態地接近它。

最低限度,你可以做的是使用SSI的建議在這裏:

現在,這取決於你的知識和學習的意願,你將能夠以更優雅,如果你使用做到這一點的水平一個腳本語言,比如php。

http://www.w3schools.com/php/

腳本語言允許您一次創建內容,然後包括與該內容與一行代碼到另一個文件的文件。如果您的網站需要增長,PLUS會在下面做更多的工作。

例如,您可以創建header.php和footer.php並將它們包含在您的頁面中,該頁面也必須是php文件。這樣,您只能創建頁眉和頁腳一次,並重新使用它們。

如果您創建header.php並將您的標題代碼放入該文件中,然後創建somepage.php這是您的內容頁面。 。爲了包括你必須寫爲若干page.php文件,你想要這個頭部代碼你的頭是

<?Php include('header.php'); ?> 

這是您必須遵守包含元素結構的HTML是非常重要的。 SSI方法在包含文件中逐字地注入精確的內容。

您可以將文件分成多個部分,將它們保存爲php並將它們包含到第三個文件中,並獲得與原始文件相同的結果。

您必須確保您的託管服務器支持您要使用的動態腳本語言。大多數主機支持PHP。

另外,就包括JavaScript而言。如果您正確編寫JavaScript,則可以將所有JavaScript代碼寫入.js文件,然後在需要時將這些文件包含到您的php或html文件中。 CSS文件也是如此。你把CSS代碼到style.css的文件和文件鏈接到您的something.php

這是你如何包含JavaScript文件.. http://www.w3schools.com/tags/att_script_src.asp 你通常把這個到你的頁面的元素

<script type="text/javascript" src="jsfile.js"></script> 

這就是你如何鏈接一個css文件與你的其他文件。 http://www.w3schools.com/css/css_howto.asp 你把它放到你頁面的元素中。

<link rel="stylesheet" type="text/css" href="style.css" /> 

但是,,,

這一切仍然是相當簡陋。也許你應該考慮使用託管的WordPress或類似的內容管理系統來幫助你建立一個漂亮的動態網站。

或者,一個好的開始,如果你有實際學習的慾望,是從www.w3schools.com

您將需要經過

HTML和HTML5, 學習基礎知識CSS2和CSS3, PHP(這是允許動態stuff-你可以嘗試學習蟒蛇或者..我喜歡PHP的自己), 的JavaScript, JSON

然後當你學習JavaScript,你會想進入JavaScript庫,如jQ uery和最終Angularjs(這是一個更高級的庫,但非常有用)

此外,您還想了解如何使用數據庫來存儲數據,因此您無需每次都創建新頁面。你應該考慮使用MySQL與MySQL。你也可以考慮Postgress,liteSQL和其他選項。

除了Angularjs,所有這些都可以在w3schools網站上免費學習。你可以只是谷歌它。

一件事...

這看起來可能比較麻煩,但如果你暫停,在第一感覺,並堅持通過第一個範式的挑戰,您將學習,這是不那麼複雜。

祝你好運!

P.S.

我的網頁編程的職業生涯始於15年前,當我試圖建立一個小網站,並獲得沮喪完全相同的問題,你現在面臨:)

+0

我很欣賞你深有見地的答案。不能要求更多。謝謝。 – webExplorer

+0

不客氣:)你可能想看看這個http://www.w3schools.com/sitemap/default.asp – GRowing

1

如果服務器支持它(),則可以使用服務器端包含(SSI)。

至於CSS和JavaScript - 移動代碼,並聲明,像這樣單獨的文件,包括您的網頁上(通常在頭元素)鏈接到他們:<script type="text/javascript" src="javascript-file.js"></script><link rel="stylesheet" type="text/css" href="css-file.css" />(詳見http://www.w3schools.com/tags/att_script_src.asphttp://www.w3schools.com/css/css_howto.asp)。