建構一個PHP5框架：第三部分-php教程-PHP中文網

現在我們已經有了一個基本框架（請參閱本系列的第 1 部分和第 2 部分），我們可以開始考慮將設計與 PHP 框架整合。現在，我們將專注於前端設計，包括如何輕鬆地「換膚」我們的新框架。

一切如何組合在一起

到目前為止，我們已經有了邏輯結構中的核心檔案和由登錄機碼存取的核心物件集。這些物件之一是我們的模板處理程序，它使我們可以輕鬆建立和產生 HTML 輸出。輸出是由一系列文件建構的，包括構成「皮膚」的圖像、CSS 和模板。

第 1 步：我們的框架前端設計需要什麼

模板的通用前端設計可能很難正確思考。如果設計的基本 HTML 範本包含您可能使用該框架建立的任何網站的所有內容，那麼它會很有用。我考慮的最低限度是：

主要內容區域，我們稱之為
```
#content
```
登入後複製
登入後複製
.
一兩欄內容的重要性不如
```
#content
```
登入後複製
登入後複製
.
一些表格資料。
無序列表和有序列表（定義列表也是如此，如果您可能會使用的話）。
圖像。我發現為照片添加單獨的樣式很有用，我將其標識為 HTML 中的“photo”類；例如。
用於資料擷取的表單。

# 我們將從為頁面建立基本的 XHTML 結構開始。我們先從本節開始：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{pagetitle}</title>
<meta name="description" content="{metadesc}" />
<meta name="keywords" content="{metakey}" />
<style type="text/css" title="Default page style" media="screen"><!--@import "skins/fmwk/style.css";--></style>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>

登入後複製

您可以更改文件類型以匹配，甚至可以在使用框架創建的每個網站的設定中定義它，並且能夠更改文件類型也很有用

lang

登入後複製

。將樣式表也定義為設定會很有用，我們將在以後的教程中介紹這一點。

此外，元描述和元鍵屬性可以硬編碼到您創建的每個網站的皮膚中，但明智的做法是為每個頁面提供不同的描述和關鍵字集以防止頁面被破壞出現在Google 的補充索引中。

{pagetitle} 佔位符將用於將目前頁面的標題插入到範本中。

# 現在，我們可以繼續討論模板 XHTML 檔案的主體，為我們的框架進行通用前端設計。我們暫時保持佈局簡單，假設我們將使用該框架創建的大多數網站將使用傳統的頁首、內容、列和頁尾方案。

<div id="wrapper">
<div id="header">

</div>
<div id="content">

</div><!--/content-->
<div id="column">

</div><!--/column-->

<div id="footer">

</div><!--/footer-->

</div><!--/wrapper-->
</body>
</html>

登入後複製

第2步：基本內容

正如所承諾的，我們將填寫一些基本內容，以便我們可以設計樣式，以便我們至少擁有可能出現在已準備好樣式的頁面中的大多數標籤：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{pagetitle}</title>
<meta name="description" content="{metadesc}" />
<meta name="keywords" content="{metakey}" />
<style type="text/css" title="Default page style" media="screen"><!--@import "skins/fmwk/style.css";--></style>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h2><a href="#" title="Website name">Website name</a></h2>
</div>
<div id="content">
<h1>{pagetitle}</h1>
<img class="photo" src="photo.jpg" alt="Photo test" />
<p>
Lorem ipsum dolor sit amet, <strong>consectetuer adipiscing elit</strong>. Quisque urna augue, fringilla quis, pulvinar non, feugiat in, pede. Curabitur vitae pede. Cras vehicula varius tellus. Sed consequat, enim tristique euismod volutpat, <em>tellus magna aliquet risus</em>, id aliquet eros metus at purus. 
</p>
<h2>Secondary heading</h2>
<p>
Aliquam dictum, nibh eget <a href="#" title="Test link">ullamcorper condimentum</a>, magna turpis placerat pede, tempor facilisis tortor urna commodo turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras luctus cursus velit. Nullam imperdiet turpis.
</p>
<h3>Tertiary heading</h3>
<table>
<tr>
<th>Heading</th>
<td>Data</td>
</tr>
<tr>
<th>Heading</th>
<td>Data</td>
</tr>
</table>
<p>
<img src="image.jpg" alt="Generic image" />
Cras a eros eget lorem fermentum malesuada. Phasellus condimentum libero vel lacus. Donec lectus nisl, adipiscing malesuada, sodales tincidunt, sagittis vitae, lacus. Proin nec pede. Maecenas adipiscing adipiscing risus.
</p>
</div><!--/content-->
<div id="column">

<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>

</div><!--/column-->

<div id="footer">
<p>
&copy; Website name, 2008.
</p>
</div><!--/footer-->

</div><!--/wrapper-->
</body>
</html>

登入後複製

現在內容已準備好進行一些簡單的樣式設定。

第 3 步：基本樣式

我們首先使用 CSS 重設 XHTML 文件中元素的邊距和填充：

body, * {
margin: 0;
padding 0;
}

登入後複製

我們將花一些時間為 body 元素指定樣式，並確保文件中的連結適當地反白：

body {
background: #FFF;
color: #000;
font-family: "helvetica", "arial", "verdana", sans-serif;
font-size: 62.5%;
}

a, a:active, a:link  {
color: #1A64AC;
text-decoration: underline;	
}

a:visited {
color: #0D2F4F;
}

登入後複製

接下來，我們將把我們的設計集中在 #wrapper div 中，並為每個 div 分配一個微弱的邊框，以便我們能夠在設計樣式時看到它們。

#wrapper {
margin: 0 auto;
width: 950px;	
}
<br />
#wrapper, #header, #content, #column, #footer {
border: 1px #DDD solid;
}

登入後複製

雖然上述 CSS 不會在 Internet Explorer 6 中集中此設計，但 CSS 已保持基本狀態以實現最大的靈活性。有了更多的 CSS，我們幾乎有了一個完整的框架前端的骨架設計 - 剩下的只是一些簡單的定位：

#column, #content {
float: left;
font-size: 125%;
padding: 5px;
}

#column {
width: 200px;
}

#content {
margin-left 5px;
width: 	725px;
}

#header, #footer {
clear: both;
}

登入後複製

現在剩下的就是圖像了：

#column img, #content img {
border: 2px #DDD solid;
float: left;
margin: 0 5px 0 10px;
}
img.photo {
background: #DDD;
float: right !important;
padding: 25px 2px;
}

登入後複製

現階段我們剩下的是一個簡單的網站佈局，我們可以將其用作 PHP 框架前端的基礎：

建構一個PHP5框架：第三部分

# 當然，為了獲得額外的靈活性，預設允許 2 列內容可能會很有用，這可以透過添加更多的 XHTML 和 CSS 來完成。

第 4 步：來自 XHTML 的範本

下一步是將 XHTML、CSS 和圖像傳輸到適合我們 PHP 框架的皮膚。為此，我們需要將 XHTML 分成三個範本：頁首、主模板和頁尾。由於模板系統的結構方式，可以從任意數量的模板生成頁面，但是建議至少使用頁眉、頁腳和主模板，這意味著，一般來說，我們只需要複製和更改如果我們要創建一個結構略有不同的新頁面，則使用主模板檔案。

PHP 框架的標頭模板 (skins/default/templates/header.tpl.php)

PHP 框架的標頭模板應包含 XHTML 部分，以及

的

部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{pagetitle}</title>
<meta name="description" content="{metadesc}" />
<meta name="keywords" content="{metakey}" />
<style type="text/css" title="Default page style" media="screen"><!--@import "style.css";--></style>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h2><a href="#" title="Website name">Website name</a></h2>
</div>

登入後複製

PHP 框架的主模板 (skins/default/templates/main.tpl.php)

主模板应包括包含主要内容和列中任何内容的 div。我们现在可以为此内容插入占位符，而不是复制我们用来设置段落、有序列表和表格等元素样式的虚拟文本，占位符将根据内容所在的位置进行更新。

占位符内容是：

{pagetitle} 页面标题。
{maincontent} 页面的主要内容。
{btitle} 和 {bcontent} 内容块的标题和内容。它包含在 rcolumn 循环中，因此可以在列中放置多个块。

<div id="content">
<h1>{pagetitle}</h1>
{maincontent}
</div><!--/content-->

<div id="column">
<!-- START rcolumn -->
<h2>{btitle}</h2>
{bcontent}
<!-- END rcolumn -->
</div><!--/column-->

登入後複製

PHP 框架的页脚模板 (skins/default/templates/footer.tpl.php)

<div id="footer">
<p>
© Website name, 2008.
</p>
</div><!--/footer-->

</div><!--/wrapper-->
</body>
</html>

登入後複製

对于我们系列中 PHP 的中断表示歉意，但为我们的框架和使用它的应用程序构建皮肤格式的相关模板非常重要。 PHP5 框架开发系列中的第 4 部分将介绍基本的安全注意事项和基本的身份验证处理程序，然后我们将继续创建内容管理模型，并在第 5 部分中研究模型如何组合在一起。该系列中的内容：发送电子邮件、扩展我们的框架以及以创新的方式记录用户事件流。

以上是建構一個PHP5框架：第三部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！