靜態(tài)網(wǎng)站模板源代碼(靜態(tài)網(wǎng)站代碼案例)
本篇文章給大家談?wù)勳o態(tài)網(wǎng)站模板源代碼,以及靜態(tài)網(wǎng)站代碼案例對應(yīng)的知識點(diǎn),希望對各位有所幫助,不要忘了收藏本站喔。
本文目錄一覽:
怎么制作 HTML靜態(tài)網(wǎng)頁?
網(wǎng)頁制作需要下載軟件:
DREAMWEAVER、PHOTOSHOP、FLASH MX
均中文版,安全無毒,支持WIN7、XP、WIN2K 32位及64位
地址:
安裝完成即可永久使用
求html靜態(tài)網(wǎng)頁源碼
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title濺/title
style
!--
body {
background:url(img/bg9.gif);
margin:0px;
padding:0px;
}
.pic{
border:1px solid #00406c;
}
p {
padding-top:30px;
color:#001671;
}
p.con{
padding-left:4px;
padding-right:4px;
}
p.title {
paddin-top;0px;
}
.chara1 {
font-size:12px;
background-color:#90bcff;
}
.chara1 td{
text-align:center;
}
.chara2 {
background-color:#d2e7ff;
text-align:center;
font-size:12px;
vertical-align:top;
}
.chara3 {
background:#e9fbff url(img/self.jpg) no-repeat bottom right;
vertical-align:top;
padding-top:15px;
padding-left:30px;
font-size:12px;padding-right:15px;
}
--
/style
/head
body
table align="center" cellpadding="1" cellspacing="0"
trtdimg src="img/banner3.jpg" border="0" //td/tr
/table
table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center"
trtd首面/tdtd心情日記/tdtdFree/tdtd一起走到/tdtd從明天起/tdtd紙飛機(jī)/tdtd下一站/td/tr
/table
table width="600px" align="center" cellpadding="0" cellspacing="1"
tr
td width="150px" class="chara2" pimg src="img/selfpic.jpg" class="pic"/br /我的日記本/p
p class="con"他們彼此深信,是瞬間并發(fā)的熱情讓他們相遇。這樣的確定是美麗的,但變幻無常更為美麗。/p
p img src="img/selfpic2.jpg" class="pic"/br/心情軌跡/p
p class="con"董事長的一切都讓人既羨慕又忌妒,但更讓人受不了的是,有一天,上蒼忽然賜給他一個(gè)神奇的禮物/p /td
td class="chara3"
h4介紹/h4
p我努力的抓緊世界,最后卻仍被世界淘汰,如果一開始就松手,我會(huì)不那么傷心嗎?你說,親愛的孩子,世事難料,隨它去吧!/p
h4照相本子/h4
p關(guān)于童年,你記住了什么? br
兩歲時(shí),我擁有一只巨大的粉紅豬,它總在我嚎啕大哭時(shí)逗我笑。br
三歲時(shí),我騎著小木馬一路搖到外婆家,它不喝水也不吃草。br
四歲時(shí),我離家出走,在公車上睡著了,最后是太空超人送我回家。br
我真的沒騙你,我通通都記得,還有照片為證。
/p
h4地下鐵/h4
p天使在地下鐵的入口,br
和我說再見的那一年,br
我漸漸看不見了。br
十五歲生日的那年秋天早晨,br
窗外下著毛毛雨,br
我喂好我的貓。br
六點(diǎn)零五分,br
我走進(jìn)地下鐵。/p
h4向左走向右走/h4
pThey're both convincedbr
that a sudden passion joined them.br
Such certainth is beautiful,br
but uncertainty is more beautiful still./p
br
/td
/tr
/table
/body
/html
如何用PHP制作靜態(tài)網(wǎng)站的模板框架
分離功能和布局的基本思想就是使得這兩組人能夠各自編寫和使用獨(dú)立的一組文件:程序員只需關(guān)心那些只包含PHP代碼的文件,無需關(guān)心頁面的外觀;而頁面設(shè)計(jì)人員可以用自己最熟悉的可視化編輯器設(shè)計(jì)頁面布局,無需擔(dān)心破壞任何嵌入到頁面的PHP代碼。 如果你曾經(jīng)看過幾個(gè)關(guān)于PHP模板的教程,那么你應(yīng)該已經(jīng)明白模板的工作機(jī)制。考慮一個(gè)簡單的頁面局部:頁面的上方是頁頭,左邊是導(dǎo)航條,其余部分是內(nèi)容區(qū)域。 可以看出頁面如何由這些模板構(gòu)造而成:main模板控制著整個(gè)頁面的布局;header模板和leftnav模板控制著頁面的公共元素。花括號“{}”里面的標(biāo)識符是內(nèi)容占位符。使用模板最主要的好處在于界面設(shè)計(jì)者能夠按照自己的意愿編輯這些文件,比如設(shè)置字體、修改顏色和圖形,或者完全地改變頁面的布局。界面設(shè)計(jì)者可以用任何普通HTML編輯器或者可視化工具編輯這些頁面,因?yàn)檫@些文件都只包含HTML代碼,沒有任何PHP代碼。 PHP代碼全部保存到單獨(dú)的文件中,這個(gè)文件也就是由頁面URL實(shí)際調(diào)用的文件。Web服務(wù)器通過PHP引擎解析該文件,然后把結(jié)果返回給瀏覽器。一般地,PHP代碼總是動(dòng)態(tài)地生成頁面內(nèi)容,比如查詢數(shù)據(jù)庫或者執(zhí)行某種計(jì)算等。下面是一個(gè)例子: // 此處的PHP代碼設(shè)置 $content使其包含合適的頁面內(nèi)容 $tpl-assign('CONTENT', $content); $tpl-parse('HEADER', 'header'); $tpl-parse('LEFTNAV', 'leftnav'); $tpl-parse('MAIN', 'main'); $tpl-FastPrint('MAIN'); ?這里我們使用的是流行的FastTemplate模板類,但其基本思路對于其他許多模板類來說都一樣。首先你實(shí)例化一個(gè)類,告訴它到哪里去尋找模板文件以及哪一個(gè)模板文件與頁面的哪部分對應(yīng);接下來是生成頁面內(nèi)容,把結(jié)果賦予內(nèi)容的標(biāo)識符;然后,依次解析各個(gè)模板文件,模板類將執(zhí)行必要的替換操作;最后把解析結(jié)果輸出到瀏覽器。 這個(gè)文件完全由PHP代碼構(gòu)成,不包含任何HTML代碼,這是它最大的優(yōu)點(diǎn)?,F(xiàn)在,PHP程序員可以集中精力編寫生成頁面內(nèi)容的代碼,而不必為了如何生成HTML去正確地格式化最終頁面而擔(dān)心。 很容易看出采用模板還有第二個(gè)好處。如上例所示,頁面左邊的導(dǎo)航條單獨(dú)保存為一個(gè)文件,我們只需編輯這一個(gè)模板文件就可以改變網(wǎng)站所有頁面左邊的導(dǎo)航條。 避免頁面元素重復(fù) “這確實(shí)不錯(cuò)”,你也許會(huì)想,“我的網(wǎng)站主要就是由大量的靜態(tài)頁面構(gòu)成。現(xiàn)在我可以從所有頁面中刪除它們的公共部分,要更新這些公共部分實(shí)在太麻煩了。以后我就可以用模板制作出很容易維護(hù)的統(tǒng)一頁面布局。”但事情并非這么簡單,“大量的靜態(tài)頁面”道出了問題的所在。 請考慮上面的例子。這個(gè)例子實(shí)際上只有一個(gè)example.php頁面,它之所以能夠生成整個(gè)網(wǎng)站的所有頁面,是因?yàn)樗昧薝RL中的查詢字符串從數(shù)據(jù)庫之類的信息源動(dòng)態(tài)地構(gòu)造出頁面。 我們之中的大多數(shù)人所運(yùn)行的網(wǎng)站并不一定都有數(shù)據(jù)庫支持。我們的網(wǎng)站大多數(shù)由靜態(tài)頁面構(gòu)成,然后用PHP在這里、那里加上一些動(dòng)態(tài)功能,比如搜索引擎、反饋表單等。那么,如何在這種網(wǎng)站上應(yīng)用模板呢? 最簡單的方法是為每一個(gè)頁面復(fù)制一份PHP文件,然后在每一個(gè)頁面中把PHP代碼里代表內(nèi)容的變量設(shè)置成合適的頁面內(nèi)容。例如,假設(shè)有三個(gè)頁面,它們分別是主頁(home)、關(guān)于(about)和產(chǎn)品(product),我們可以用三個(gè)文件分別生成它們。這三個(gè)文件的內(nèi)容都類如: 希望你能夠喜歡本網(wǎng)站"; $tpl-assign('CONTENT', $content); $tpl-parse('HEADER', 'header'); $tpl-parse('LEFTNAV', 'leftnav'); $tpl-parse('MAIN', 'main'); $tpl-FastPrint('MAIN'); ?顯然,這種方法有三個(gè)問題:我們必須為每一個(gè)頁面復(fù)制這些復(fù)雜的、牽涉到模板的PHP代碼,這與重復(fù)公共頁面元素一樣使得頁面難以維護(hù);現(xiàn)在文件又混合了HTML和PHP代碼;為內(nèi)容變量賦值將變得非常困難,因?yàn)槲覀儽仨毺幚砗么罅康奶厥庾址?解決這個(gè)問題的關(guān)鍵就在于分離PHP代碼和HTML內(nèi)容,雖然我們不能從文件中刪除所有的HTML內(nèi)容,但可以移出絕大多數(shù)PHP代碼。靜態(tài)網(wǎng)站的模板框架: ob_end_clean(); $tpl-assign('CONTENT', $content); $tpl-parse('HEADER', 'header'); $tpl-parse('LEFTNAV', 'leftnav'); $tpl-parse('MAIN', 'main'); $tpl-FastPrint('MAIN'); } ?ageStart函數(shù)首先創(chuàng)建并設(shè)置了一個(gè)模板實(shí)例,然后啟用輸出緩存。此后,所有來自頁面本身的HTML內(nèi)容都將進(jìn)入緩存。pageFinish函數(shù)取出緩存中的內(nèi)容,然后在模板對象中指定這些內(nèi)容,最后解析模板并輸出完成后的頁面。 這就是整個(gè)模板框架全部的工作過程了。
靜態(tài)網(wǎng)站模板源代碼的介紹就聊到這里吧,感謝你花時(shí)間閱讀本站內(nèi)容,更多關(guān)于靜態(tài)網(wǎng)站代碼案例、靜態(tài)網(wǎng)站模板源代碼的信息別忘了在本站進(jìn)行查找喔。
掃描二維碼推送至手機(jī)訪問。
版權(quán)聲明:本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布,如需轉(zhuǎn)載請注明出處。