建構一個PHP5框架：第三部分
現在我們已經有了一個基本框架（請參閱本系列的第 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 id="a-href-title-Website-name-Website-name-a"><a href="#" title="Website name">Website name</a></h2>
</div>
<div id="content">
<h1 id="pagetitle">{pagetitle}</h1>
<img class="photo lazy" src="/static/imghw/default1.png" data-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 id="Secondary-heading">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 id="Tertiary-heading">Tertiary heading</h3>
<table>
<tr>
<th>Heading</th>
<td>Data</td>
</tr>
<tr>
<th>Heading</th>
<td>Data</td>
</tr>
</table>
<p>
<img src="/static/imghw/default1.png" data-src="image.jpg" class="lazy" 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>
© 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 框架前端的基礎：
# 當然，為了獲得額外的靈活性，預設允許 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 id="a-href-title-Website-name-Website-name-a"><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 id="pagetitle">{pagetitle}</h1>
{maincontent}
</div><!--/content-->
<div id="column">
<!-- START rcolumn -->
<h2 id="btitle">{btitle}</h2>
{bcontent}
<!-- END rcolumn -->
</div><!--/column-->
PHP 框架的页脚模板 (skins/default/templates/footer.tpl.php)
最后，剩余的 XHTML 放入页脚文件中，该文件关闭 XHTML 文档和正文部分。我们通常使用它来在我们的网站上包含版权声明和“网页设计者”链接。
<div id="footer"> <p> © Website name, 2008. </p> </div><!--/footer--> </div><!--/wrapper--> </body> </html>
对于我们系列中 PHP 的中断表示歉意，但为我们的框架和使用它的应用程序构建皮肤格式的相关模板非常重要。 PHP5 框架开发系列中的第 4 部分将介绍基本的安全注意事项和基本的身份验证处理程序，然后我们将继续创建内容管理模型，并在第 5 部分中研究模型如何组合在一起。该系列中的内容：发送电子邮件、扩展我们的框架以及以创新的方式记录用户事件流。
以上是建構一個PHP5框架：第三部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南
Dec 24, 2024 pm 04:42 PM
PHP 8.4 帶來了多項新功能、安全性改進和效能改進，同時棄用和刪除了大量功能。 本指南介紹如何在 Ubuntu、Debian 或其衍生版本上安裝 PHP 8.4 或升級到 PHP 8.4
如何設定 Visual Studio Code (VS Code) 進行 PHP 開發
Dec 20, 2024 am 11:31 AM
Visual Studio Code，也稱為 VS Code，是一個免費的原始碼編輯器 - 或整合開發環境 (IDE) - 可用於所有主要作業系統。 VS Code 擁有大量針對多種程式語言的擴展，可以輕鬆編寫
您如何在PHP中解析和處理HTML/XML？
Feb 07, 2025 am 11:57 AM
本教程演示瞭如何使用PHP有效地處理XML文檔。 XML（可擴展的標記語言）是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲
在PHP API中說明JSON Web令牌（JWT）及其用例。
Apr 05, 2025 am 12:04 AM
JWT是一種基於JSON的開放標準，用於在各方之間安全地傳輸信息，主要用於身份驗證和信息交換。 1.JWT由Header、Payload和Signature三部分組成。 2.JWT的工作原理包括生成JWT、驗證JWT和解析Payload三個步驟。 3.在PHP中使用JWT進行身份驗證時，可以生成和驗證JWT，並在高級用法中包含用戶角色和權限信息。 4.常見錯誤包括簽名驗證失敗、令牌過期和Payload過大，調試技巧包括使用調試工具和日誌記錄。 5.性能優化和最佳實踐包括使用合適的簽名算法、合理設置有效期、
php程序在字符串中計數元音
Feb 07, 2025 pm 12:12 PM
字符串是由字符組成的序列，包括字母、數字和符號。本教程將學習如何使用不同的方法在PHP中計算給定字符串中元音的數量。英語中的元音是a、e、i、o、u，它們可以是大寫或小寫。 什麼是元音？ 元音是代表特定語音的字母字符。英語中共有五個元音，包括大寫和小寫： a, e, i, o, u 示例 1 輸入：字符串 = "Tutorialspoint" 輸出：6 解釋 字符串 "Tutorialspoint" 中的元音是 u、o、i、a、o、i。總共有 6 個元
解釋PHP中的晚期靜態綁定（靜態：:)。
Apr 03, 2025 am 12:04 AM
靜態綁定（static::）在PHP中實現晚期靜態綁定（LSB），允許在靜態上下文中引用調用類而非定義類。 1）解析過程在運行時進行，2）在繼承關係中向上查找調用類，3）可能帶來性能開銷。
什麼是PHP魔術方法（__ -construct，__destruct，__call，__get，__ set等）並提供用例？
Apr 03, 2025 am 12:03 AM
PHP的魔法方法有哪些？ PHP的魔法方法包括：1.\_\_construct，用於初始化對象；2.\_\_destruct，用於清理資源；3.\_\_call，處理不存在的方法調用；4.\_\_get，實現動態屬性訪問；5.\_\_set，實現動態屬性設置。這些方法在特定情況下自動調用，提升代碼的靈活性和效率。
