本篇文章給大家談談簡單網站框架模板，以及網站框架設計圖對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、用PHP制作靜態(tài)網站的模板框架(二)
• 2、請給我一個網站的框架模板
• 3、如何用PHP制作靜態(tài)網站的模板框架
• 4、網頁框架制作模板的問題
• 5、網頁設計框架怎么做
• 6、網站搭建首頁時常用的框架有哪些

用PHP制作靜態(tài)網站的模板框架(二)

PHP代碼全部保存到單獨的文件中，這個文件也就是由頁面URL實際調用的文件。Web服務器通過PHP引擎解析該文件，然后把結果返回給瀏覽器。一般地，PHP代碼總是動態(tài)地生成頁面內容，比如查詢數據庫或者執(zhí)行某種計算等。下面是一個例子：

?php

//

example.php

require('class.FastTemplate.php');

$tpl

=

new

FastTemplate('.');

$tpl-define(

array(

'main'

=

'main.htm',

'header'

=

'header.htm',

'leftnav'

=

'leftnav.htm'

)

);

//

此處的PHP代碼設置$content使其包含合適的頁面內容

$tpl-assign('CONTENT',

$content);

$tpl-parse('HEADER',

'header');

$tpl-parse('LEFTNAV',

'leftnav');

$tpl-parse('MAIN',

'main');

$tpl-FastPrint('MAIN');

?

這里我們使用的是流行的FastTemplate模板類，但其基本思路對于其他許多模板類來說都一樣。首先你實例化一個類，告訴它到哪里去尋找模板文件以及哪一個模板文件與頁面的哪部分對應；接下來是生成頁面內容，把結果賦予內容的標識符；然后，依次解析各個模板文件，模板類將執(zhí)行必要的替換操作；最后把解析結果輸出到瀏覽器。

這個文件完全由PHP代碼構成，不包含任何HTML代碼，這是它最大的優(yōu)點?，F在，PHP程序員可以集中精力編寫生成頁面內容的代碼，而不必為了如何生成HTML去正確地格式化最終頁面而擔心。

你可以使用這種方法和上面的文件構造出一個完整的網站。如果PHP代碼是以URL中的查詢字符串為基礎生成頁面內容，例如，你可以據此構造出一個完整的雜志網站。

很容易看出采用模板還有第二個好處。如上例所示，頁面左邊的導航條單獨保存為一個文件，我們只需編輯這一個模板文件就可以改變網站所有頁面左邊的導航條。

請給我一個網站的框架模板

是不是類似馬克斯后臺那種？

點頂部的導航，可以換下面左邊的內容，

點下面左邊的內容，可以換下面右邊的顯示頁面？

下個馬克斯CMS看看吧

如何用PHP制作靜態(tài)網站的模板框架

分離功能和布局的基本思想就是使得這兩組人能夠各自編寫和使用獨立的一組文件：程序員只需關心那些只包含PHP代碼的文件，無需關心頁面的外觀；而頁面設計人員可以用自己最熟悉的可視化編輯器設計頁面布局，無需擔心破壞任何嵌入到頁面的PHP代碼。 如果你曾經看過幾個關于PHP模板的教程，那么你應該已經明白模板的工作機制?？紤]一個簡單的頁面局部：頁面的上方是頁頭，左邊是導航條，其余部分是內容區(qū)域。 可以看出頁面如何由這些模板構造而成：main模板控制著整個頁面的布局；header模板和leftnav模板控制著頁面的公共元素。花括號“{}”里面的標識符是內容占位符。使用模板最主要的好處在于界面設計者能夠按照自己的意愿編輯這些文件，比如設置字體、修改顏色和圖形，或者完全地改變頁面的布局。界面設計者可以用任何普通HTML編輯器或者可視化工具編輯這些頁面，因為這些文件都只包含HTML代碼，沒有任何PHP代碼。 PHP代碼全部保存到單獨的文件中，這個文件也就是由頁面URL實際調用的文件。Web服務器通過PHP引擎解析該文件，然后把結果返回給瀏覽器。一般地，PHP代碼總是動態(tài)地生成頁面內容，比如查詢數據庫或者執(zhí)行某種計算等。下面是一個例子： // 此處的PHP代碼設置 $content使其包含合適的頁面內容 $tpl-assign('CONTENT', $content); $tpl-parse('HEADER', 'header'); $tpl-parse('LEFTNAV', 'leftnav'); $tpl-parse('MAIN', 'main'); $tpl-FastPrint('MAIN'); ?這里我們使用的是流行的FastTemplate模板類，但其基本思路對于其他許多模板類來說都一樣。首先你實例化一個類，告訴它到哪里去尋找模板文件以及哪一個模板文件與頁面的哪部分對應；接下來是生成頁面內容，把結果賦予內容的標識符；然后，依次解析各個模板文件，模板類將執(zhí)行必要的替換操作；最后把解析結果輸出到瀏覽器。 這個文件完全由PHP代碼構成，不包含任何HTML代碼，這是它最大的優(yōu)點。現在，PHP程序員可以集中精力編寫生成頁面內容的代碼，而不必為了如何生成HTML去正確地格式化最終頁面而擔心。 很容易看出采用模板還有第二個好處。如上例所示，頁面左邊的導航條單獨保存為一個文件，我們只需編輯這一個模板文件就可以改變網站所有頁面左邊的導航條。 避免頁面元素重復 “這確實不錯”，你也許會想，“我的網站主要就是由大量的靜態(tài)頁面構成。現在我可以從所有頁面中刪除它們的公共部分，要更新這些公共部分實在太麻煩了。以后我就可以用模板制作出很容易維護的統(tǒng)一頁面布局。”但事情并非這么簡單，“大量的靜態(tài)頁面”道出了問題的所在。 請考慮上面的例子。這個例子實際上只有一個example.php頁面，它之所以能夠生成整個網站的所有頁面，是因為它利用了URL中的查詢字符串從數據庫之類的信息源動態(tài)地構造出頁面。 我們之中的大多數人所運行的網站并不一定都有數據庫支持。我們的網站大多數由靜態(tài)頁面構成，然后用PHP在這里、那里加上一些動態(tài)功能，比如搜索引擎、反饋表單等。那么，如何在這種網站上應用模板呢？ 最簡單的方法是為每一個頁面復制一份PHP文件，然后在每一個頁面中把PHP代碼里代表內容的變量設置成合適的頁面內容。例如，假設有三個頁面，它們分別是主頁（home）、關于（about）和產品（product），我們可以用三個文件分別生成它們。這三個文件的內容都類如： 希望你能夠喜歡本網站"; $tpl-assign('CONTENT', $content); $tpl-parse('HEADER', 'header'); $tpl-parse('LEFTNAV', 'leftnav'); $tpl-parse('MAIN', 'main'); $tpl-FastPrint('MAIN'); ?顯然，這種方法有三個問題：我們必須為每一個頁面復制這些復雜的、牽涉到模板的PHP代碼，這與重復公共頁面元素一樣使得頁面難以維護；現在文件又混合了HTML和PHP代碼；為內容變量賦值將變得非常困難，因為我們必須處理好大量的特殊字符。 解決這個問題的關鍵就在于分離PHP代碼和HTML內容，雖然我們不能從文件中刪除所有的HTML內容，但可以移出絕大多數PHP代碼。靜態(tài)網站的模板框架： ob_end_clean(); $tpl-assign('CONTENT', $content); $tpl-parse('HEADER', 'header'); $tpl-parse('LEFTNAV', 'leftnav'); $tpl-parse('MAIN', 'main'); $tpl-FastPrint('MAIN'); } ?ageStart函數首先創(chuàng)建并設置了一個模板實例，然后啟用輸出緩存。此后，所有來自頁面本身的HTML內容都將進入緩存。pageFinish函數取出緩存中的內容，然后在模板對象中指定這些內容，最后解析模板并輸出完成后的頁面。 這就是整個模板框架全部的工作過程了。

網頁框架制作模板的問題

■ 什么是框架型網頁?

如果一個網頁的左邊導航菜單是固定的，而頁面中間的信息可以上下移動，這一般就可以認為是一個框架型網頁。此外，一些框架型站點的模板在其頁面上方放置了公司的LOGO或圖片。不過這一塊也是位置固定的。而頁面的其它部分則可以上下左右移動。有的框架型站點模板還會在其固定區(qū)域中放入鏈接或導航按鈕。

在一些關于搜索引擎優(yōu)化方面的文章中，基本上都認為網站用框架來設計是極不可取的。這是由于大多數的搜索引擎都無法識別網頁中的框架，或者無法對框架中的內容進行遍歷或搜索。

■ 為什么使用框架的網頁無法被正確索引?

我們將向大家解釋為何使用框架的網頁無法被使用網絡蜘蛛(spiders)或網絡爬蟲(crawlers) 的搜索引擎(如Google)正確索引的主要原因。在一個框架網頁的后臺代碼中，我們一般能夠看到的是網頁的標題標記(Meta Title)、描述標記(Meta Description)、關鍵字標記(Meta Keywords)及其它原標記(Meta Tags)，同時你還會看到一個框架集標記(Frameset Tag)?？蚣苤械膬热菰诤笈_代碼中是無法被體現的，而對于那些主要搜索引擎的搜索程序來說，如Google的GoogleBot和Freshbot，其設計思路都是完全忽略某些HTML代碼，轉而直接鎖定網頁上的實際內容進行索引。這樣一來，網絡蜘蛛在那些一般性的框架網頁上根本找不到要搜索的內容。這是由于那些具體內容都被放到我們稱之為“內部網頁”中去了。

使用“Noframes”標記進行優(yōu)化

使用了框架型網頁并不意味著就完全無法對其網頁進行優(yōu)化。實際上在HTML標記中，有一個叫做NOFRAME的標記，如果使用得當的話我們就可以有效地對頁面進行優(yōu)化了，從而使得搜索引擎能夠正確索引你框架網頁上的內容信息。也有網站這樣使用NOFRAMES標記：他們在NOFRAMES標記里放上這么一段話：“本網頁使用了框架，但您的瀏覽器不支持框架。請下載新的瀏覽器觀看?！?

讓我們看看那些專業(yè)的搜索引擎優(yōu)化公司是怎么做的吧。他們在使用了框架的網頁中，有效的提供含有豐富關鍵字和關鍵短語的重要文字和內容，從而有效幫助網站在SERP(搜索引擎搜索結果頁)中取得較高的排名(頁面等級)。

這樣優(yōu)化的結果，其實就是讓主要搜索引擎不但讀取了你的網頁后臺代碼中的標題和其它原標記，而且對那些不支持框架的瀏覽器所無法顯示的頁面內容信息，也進行了索引。如果你出于某種原因非要使用框架結構，那么請緊記：在你的后臺代碼中一定要正確的使用NOFRAMES標記，這一點非常重要。

很顯然，我們所說的這些優(yōu)化措施，只有對那些網頁內容經過精心撰寫，并且在內容中充分使用了重要關鍵字和關鍵短語的網站才起作用。

綜上所述，不管是使用框架技術的網站還是非框架技術的網站，只要你采用的是恰當的技術和正確的技巧，都可以進行完美的優(yōu)化從而取得理想的頁面等級。

什么是框架

前面我們介紹了很多網站的頁面是用表格制作的，還有一種更方便的工具，就是使用框架。

框架的作用就是把瀏覽器窗口劃分為若干個區(qū)域，每個區(qū)域可以分別顯示不同的網頁。

iframe/iframe

將文檔分割為幾個框架后，Dreamweaver會自動產生一個沒名字的框架體文件，比如我們看到的一個簡單的左右框架頁面，實際上包含3個不同的文件，一個是框架體文件，還有兩個在框架中顯示內容的文件。

框架體文件中保存頁面中框架的數量，框架的尺寸、位置及每個框架的網頁源文件和其它可定義的屬性

網頁設計框架怎么做

網頁設計框架做法如下：學習網頁設計框架推薦咨詢【達內教育】。

1、第一步：新建網頁

首先；打開軟件，選擇菜單欄下“修改”——“框架集”——“拆分為左右框架”。進行三個網頁的保存。

2、第二步：制作左邊的框架網頁

首先插入表格并設置基本屬性：選擇主菜單下的“插入”——“表格”。接著設置表格的屬性：（4行1列的表格“高300像素、寬100像素”，表格邊框為黃色、背景為綠色。）其中的高，邊框顏色都是使用代碼輸入。

3、第三步：設置css樣式

首先打開css面板，選擇該面板的下面的“+”號，出現下圖所示的效果。設置樣式。選擇“id”類型，取名為“stlye1”，保存了“僅存為該文檔”。設置樣式屬性?！叭A文楷體、14磅、加粗、黑色”。

4、第四步：使用css樣式

在表格中書寫相應的文字。選中所有的文字，然后來到屬性面板。選擇“類”——“stlye1”，；就設置好css樣式。

5、第五步：設置文字的位置。

選中文字，來到屬性面板，設置“水平”，“垂直”的屬性等。感興趣的話點擊此處，免費學習一下

想了解更多有關框架的相關信息，推薦咨詢【達內教育】。達內與阿里、Adobe、紅帽、ORACLE、微軟、美國計算機行業(yè)協會（CompTIA）、百度等國際知名廠商建立了項目合作關系。共同制定行業(yè)培訓標準，為達內學員提供高端技術、所學課程受國際廠商認可，讓達內學員更具國際化就業(yè)競爭力。達內IT培訓機構,試聽名額限時搶購。

網站搭建首頁時常用的框架有哪些

如何搭建完整的網站架構并設計出一個出色的網站?關于這個問題，我們很難提出一個絕對權威和正確的設計思路，但任何網站的設計都需要遵循一個循序漸進的步驟。此次IT設計欄目特別邀請網站設計專業(yè)人士，自本期起進行為期5期的連載，分別從網站模型構建、審美與交互設計、風格設計、代碼設計、可用性測試及對設計的折回補充等五方面，詳細闡述如何設計一個優(yōu)秀的網站，敬請讀者關注。

網站設計是一門新興的邊緣性職業(yè)，既要從外觀上進行創(chuàng)意，又要結合圖形和版面設計，交互設計等諸多相關原理，這使得網站設計變成了一門獨特的藝術。

良好的網站設計能使網站在同類站點中獨具特色，優(yōu)秀的創(chuàng)意和表現方式能給瀏覽者留下深刻的印象，使網站訪問流量增加甚至直接增加網站收入。 因此，在設計的初始階段就規(guī)劃好網站的設計步驟是非常重要的，通常情況下網站設計步驟分為模型構建、審美及交互設計、風格設計、代碼設計、可用性測試等幾大方面。首先我們由以下四個步驟來了解一下網站模型設計中的內涵與重點。

一、網站設計，不僅僅是美術設計

你的工作究竟屬于設計師還是美工?那得看你做的活是真正的設計，還是點綴頁面使之更好看的操作。設計師的工作是高屋建瓴的，而美工只是軟件工具的使用者。

很多人把在網站中的設計定義為美術設計，認為設計師的工作任務就是使用Photoshop一類的繪圖軟件把需要展示的頁面畫出來，其實這是很狹義的理解。合格的設計師應該立足于整個網站的全局，在規(guī)劃上對整個網站進行完整的設計，在宏觀上把握設計風格導向，微觀上再針對該網站的具體定位來決定如何對設計進行元素上的細化。當然，網站設計還包括了數據庫設計及程序設計，在這里，我僅以我的從業(yè)經驗，舉例談談網站前端設計。

北京奧運會即將開幕，我們先來舉兩個奧運類型網站的例子：

奧運會官網：如圖，這是一個設計得非常成功的例子，設計師并沒有像一般涉及奧運主題的設計一樣使用大量紅色，而是把頁面風格完全國際化，其中把各種資訊和功能模塊都恰到好處地融合在一起，粗毛筆一般的元素設計使網站得到了豐富的整體效果。

新浪奧運頻道：如圖，我們可以看到設計師的創(chuàng)意僅僅被壓縮在頁面滾屏幾次后看到的內容區(qū)塊上，使用了奧運五環(huán)色彩來進行設計。頁面頭部基本是套在任何一個專題網站都能使用的結構素材，而新浪的資訊系統(tǒng)一定是能支持實現一個更脫離內容專題模板的好設計的，可見其并沒有從網站設計的角度出發(fā)去處理這個項目。

二、設計人員在需求階段介入，影響需求，而不干預需求

我們常聽到有設計師抱怨：“這個設計讓我改了十多遍怎么還不能定稿?”，也常聽到產品經理說：“這個設計師怎么就是把握不住要點?”

不論設計在網站的實現過程中有多么重要，網站該是什么模樣，還是必須由需求決定。所以網站項目的前期需求是至關重要的環(huán)節(jié)，也可以理解成房屋建筑的地基。需求也許是經過若干調查，將結果匯總后產生的報告，也可能是領導或老板的一時沖動而引發(fā)的大討論。

在需求的確立過程中，遺憾的是，網站設計人員的分量是極其有限的，產品經理、頻道主管、某級領導的想法往往直接決定著需求的最終形態(tài)。但是設計人員在需求階段的介入還是很有必要的，設計師能以自己專業(yè)獨到的眼光，提出科學合理的建議，影響需求的細節(jié)。這樣做的結果是能在最大限度上取得需求方和設計方的思想一致，而不至于在設計過程中面對著有意見卻不讓更改的需求問題而大發(fā)牢騷。

三、學會掌控用戶路徑

用戶從哪個頁面來?他最有可能點哪個鏈接或者按鈕?他使用了搜索框嗎?他下一頁去哪里?最后哪個頁面會被他打印輸出?

站在整個網站的角度出發(fā)，這些流程也許只是產品經理需要把握的，設計師拿到UE圖只管一個接一個繪制頁面就行。其實不然，好的設計師往往能承擔一部分產品經理的職責，設計出一個典型的用戶路徑，這對網站頁面流程有著很大的影響。

頁面和頁面之間有很多關聯，成片的超鏈接把流程頁面和外部頁面混亂地串在一起，區(qū)域A的文字鏈接要鏈到頁面2，區(qū)域B的圖片鏈接是指向頁面3，側邊的一個位置顯著的大按鈕其實是鏈接到網站X……頁面和頁面之間也是有繼承關系的，繼承的過程要讓用戶覺得理所當然，在視覺上實現平滑過渡，這就是設計師要考慮的具體問題。從一個頁面到另一個頁面的路徑組成里，哪些模塊要原樣保留，哪些控件要發(fā)生變化?頁面結構是否可以變動，頁面色彩是否可以更換?這些都是需要參照用戶路徑進行設計的地方。把自己想象成為一個普通用戶，一頁一頁地點進來，你就能明白用戶需要的是什么樣的合理設計。在此我們可以參考如圖所示的網站設計流程圖。

四、初步實現UE產品模型，并審核

設計師需要以什么作為參考來進行頁面設計?所有的元素和流程都在腦子里，這個時候設計師需要稍加整理把它們簡要地畫出來，畫出線框和注釋就可以了。

我們可以把UE模型理解為設計草圖，在UE階段，設計師主要根據用戶路徑得來的線索，加上對用戶交互習慣的探索，進而整理出一個大概的模型框架。這個框架里，要明確畫出有幾個關鍵頁面，每個關鍵頁面的關鍵元素和模塊有哪些，這些關鍵元素和模塊哪些是必須以某種特定位置排列或者是務必要強調突出的。

其中，網站的首頁、最終頁面是最重要的兩級頁面，首頁會是用戶使用網站的第一站，在首頁的體驗好壞，直接決定著他的去留;而最終頁面是用戶想要獲得信息的具體頁面，他會在這個頁面停留最久，可能會進行仔細的閱讀，或是打印出這一頁備用。通常在繪制完UE模型之后，會有一個開發(fā)小組來討論并且審核這個模型，這時候就需要著重確定首頁和最終頁的大概模樣，每個討論參與者對此都很關心。UE模型的繪制我們可以參考如圖的某商城的UE圖。UE模型通過之后，傳統(tǒng)意義的設計終于派上用場，要進行具體的頁面設計了。

關于簡單網站框架模板和網站框架設計圖的介紹到此就結束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關注本站。