目录
一切如何组合在一起
第 1 步:我们的框架前端设计需要什么
第2步:基本内容
Website name" >Website name
{pagetitle}
Secondary heading
Tertiary heading
第 3 步:基本样式
第 4 步:来自 XHTML 的模板
PHP 框架的标头模板 (skins/default/templates/header.tpl.php)
PHP 框架的主模板 (skins/default/templates/main.tpl.php)
{btitle}
PHP 框架的页脚模板 (skins/default/templates/footer.tpl.php)
首页 后端开发 php教程 构建一个PHP5框架:第三部分

构建一个PHP5框架:第三部分

Sep 03, 2023 am 11:09 AM
php 框架 构建

现在我们已经有了一个基本框架(请参阅本系列的第 1 部分和第 2 部分),我们可以开始考虑将设计与 PHP 框架集成。现在,我们将专注于前端设计,包括如何轻松地“换肤”我们的新框架。

一切如何组合在一起

到目前为止,我们已经有了逻辑结构中的核心文件和由注册表访问的核心对象集。这些对象之一是我们的模板处理程序,它使我们可以轻松构建和生成 HTML 输出。输出是由一系列文件构建的,包括构成“皮肤”的图像、CSS 和模板。

第 1 步:我们的框架前端设计需要什么

模板的通用前端设计可能很难正确思考。如果设计的基本 HTML 模板包含您可能使用该框架创建的任何网站的所有内容,那么它会很有用。我考虑的最低限度是:

  • 主要内容区域,我们称之为
    #content
    
    登录后复制
    登录后复制

    .

  • 一两栏内容的重要性不如
    #content
    
    登录后复制
    登录后复制

    .

  • 一些表格数据。
  • 无序列表和有序列表(定义列表也是如此,如果您可能会使用的话)。
  • 图像。我发现为照片添加单独的样式很有用,我将其标识为 HTML 中的“photo”类;例如 构建一个PHP5框架:第三部分
  • 用于数据捕获的表单。

我们将从为页面创建基本的 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>
&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 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-->
登录后复制

最后,剩余的 XHTML 放入页脚文件中,该文件关闭 XHTML 文档和正文部分。我们通常使用它来在我们的网站上包含版权声明和“网页设计者”链接。

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

</div><!--/wrapper-->
</body>
</html>
登录后复制

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

以上是构建一个PHP5框架:第三部分的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

适用于 Ubuntu 和 Debian 的 PHP 8.4 安装和升级指南 适用于 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 开发 如何设置 Visual Studio Code (VS Code) 进行 PHP 开发 Dec 20, 2024 am 11:31 AM

Visual Studio Code,也称为 VS Code,是一个免费的源代码编辑器 - 或集成开发环境 (IDE) - 可用于所有主要操作系统。 VS Code 拥有针对多种编程语言的大量扩展,可以轻松编写

您如何在PHP中解析和处理HTML/XML? 您如何在PHP中解析和处理HTML/XML? Feb 07, 2025 am 11:57 AM

本教程演示了如何使用PHP有效地处理XML文档。 XML(可扩展的标记语言)是一种用于人类可读性和机器解析的多功能文本标记语言。它通常用于数据存储

在PHP API中说明JSON Web令牌(JWT)及其用例。 在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.性能优化和最佳实践包括使用合适的签名算法、合理设置有效期、

我后悔之前不知道的 7 个 PHP 函数 我后悔之前不知道的 7 个 PHP 函数 Nov 13, 2024 am 09:42 AM

如果您是一位经验丰富的 PHP 开发人员,您可能会感觉您已经在那里并且已经完成了。您已经开发了大量的应用程序,调试了数百万行代码,并调整了一堆脚本来实现操作

php程序在字符串中计数元音 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中的晚期静态绑定(静态::)。 解释PHP中的晚期静态绑定(静态::)。 Apr 03, 2025 am 12:04 AM

静态绑定(static::)在PHP中实现晚期静态绑定(LSB),允许在静态上下文中引用调用类而非定义类。1)解析过程在运行时进行,2)在继承关系中向上查找调用类,3)可能带来性能开销。

什么是PHP魔术方法(__ -construct,__destruct,__call,__get,__ set等)并提供用例? 什么是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,实现动态属性设置。这些方法在特定情况下自动调用,提升代码的灵活性和效率。

See all articles