通过使用php母版页实现一致的外观

Brand recognition is one of the most notable elements companies need when building a website. When navigating through a company’s website, it will confuse you if each page within the site looks drastically different. You may ask, “How in the world did I get here? Am I still on the same website for ACME Catapults? Somehow, I think the Roadrunner suckered me?”

品牌知名度是公司建立网站时最需要注意的要素之一。 在浏览公司网站时,如果网站中的每个页面看起来都大不相同,将会使您感到困惑。 您可能会问:“我是怎么来到这里的? 我仍在ACME弹射器的同一网站上吗? 不知何故,我认为走鹃吸引了我?”

You can keep your webpages consistent by copying and pasting and making sure that the same CSS style sheets are on each page, copying all images (if the content goes into multiple folders); ensuring the header, footer, body, and other sections all contain the same layout and styling. That would be a lot of needless copying and pasting.

通过复制和粘贴并确保每个页面上都有相同CSS样式表,然后复制所有图像(如果内容进入多个文件夹),可以使网页保持一致。 确保页眉,页脚,正文和其他部分都包含相同的布局和样式。 那将是很多不必要的复制和粘贴。

Imagine if you wanted to rebrand and revamp your design? You would be busy going through all your pages and replacing the previous template with the new one. You hope you miss nothing because you would end up with an inconsistent look and feel for your website (MEEP MEEP), but chances are you will.

想象一下,如果您想重新命名和修改设计? 您将忙于浏览所有页面,并用新模板替换以前的模板。 您希望自己什么都不会错过,因为最终会使您的网站外观和风格不一致(MEEP MEEP),但是您可能会。

ASPX Web Forms and ASPX MVC, two methods of constructing webpages using Microsoft’s dot Net framework, use a concept called the Master page. Master pages contain the layout for the website. On the master page file is a mixture of server-side controls and raw HTML.

ASPX Web Forms和ASPX MVC是使用Microsoft的dot Net框架构造网页的两种方法,它们使用称为母版页的概念。 母版页包含网站的布局。 在母版页文件中,混合了服务器端控件和原始HTML。

There is typically a stubbed out section that is a content placeholder. You usually want one in the header section to add some customized CSS styling and JavaScript to each page. You will also want a content placeholder somewhere in the body of your HTML document. There isn’t a limit on how many placeholders, but it would probably be best to keep it to a minimum of three, but this is a personal preference.

通常有一个存根节,它是内容占位符。 通常,您希望标题部分中的一个向每个页面添加一些自定义CSS样式和JavaScript。 您还将在HTML文档的正文中的某个位置需要一个内容占位符。 占位符的数量没有限制,但最好将其最少保持三个,但这是个人喜好。

PHP does not have “Master pages,” but you can create them because PHP supports OO (Object-Oriented) programming. Just to let you know, this is not new, so there is not really a wow factor. However, a standard template is beneficial because it will help you stay organized with your PHP projects.

PHP没有“母版页”,但是您可以创建它们,因为PHP支持OO(面向对象)编程。 只是想让您知道,这并不是什么新鲜事物,因此并没有真正令人赞叹的因素。 但是,标准模板是有益的,因为它将帮助您保持PHP项目的井井有条。

模板 (The Template)

The first thing you have to do is get a template. Responsive design is accessible and provides a great way to put forth a mobile-friendly website. You can grab a template off W3 Schools, they are free to use, and you can share with your friends. Here is a link to a beautiful layout that I will use for the demo.

您要做的第一件事就是获取模板。 响应式设计是可访问的,并提供了一种发布适合移动设备访问的网站的好方法。 您可以从W3 Schools处获取模板,这些模板可免费使用,并且可以与朋友共享。 这是我将在演示中使用的精美布局的链接

Next, you have to get the HTML file that makes up the page. W3 Schools allows you to edit the page and preview it. Then you can download it to your Google Drive. Download the CSS files and image files that are part of the template manually. This is easy to do. You can get them using Chrome, IE, or Firefox by using the “inspect element” feature of the browser.

接下来,您必须获取组成页面HTML文件。 W3 Schools允许您编辑页面并预览。 然后,您可以将其下载到您的Google云端硬盘。 手动下载模板中CSS文件和图像文件。 这很容易做到。 您可以通过使用浏览器的“检查元素”功能,使用Chrome,IE或Firefox来获取它们。

Once you have all the files, you will want to download it if you do not already have a WAMP, LAMP, or MAMP application so you can write some PHP. These are easy to set up; depending on your OS, you will have a different letter in front of AMP (Apache MySQL PHP). W for Windows, M for MAC OS, and L for Linux/Ubuntu.

拥有所有文件后,如果还没有WAMP,LAMP或MAMP应用程序,则需要下载它,以便可以编写一些PHP。 这些很容易设置; 根据您的操作系统,您在AMP(Apache MySQL PHP)前面会有一个不同的字母。 Windows操作系统为W,MAC OS操作系统为M,Linux / Ubuntu操作系统为L。

WAMP/MAMP/LAMP is unnecessary; there are other (you can even use IIS if you wanted to) ways to run PHP on your machine. However, these are the most straightforward methods that I can think of. You will also want to get an IDE (integrated development environment) of some sort; there are many to choose from, I am using Sublime.

不需要WAMP / MAMP / LAMP; 还有其他方法(如果需要,甚至可以使用IIS)在计算机上运行PHP。 但是,这些是我能想到的最简单的方法。 您还将需要获得某种形式的IDE(集成开发环境)。 有很多选择,我正在使用Sublime。

After you got your template in raw HTML, creating a “Master page” using PHP is simple. Create a new PHP file, call it “MyTemplate.php” or something cheesy like that. Depending on how many content sections you want on your template, for simplicity we will only do three, you will create a class like this:

在用原始HTML获取模板后,使用PHP创建“母版页”非常简单。 创建一个新PHP文件,将其命名为“ MyTemplate.php”或类似的名称。 根据模板上需要多少个内容部分,为简单起见,我们仅做三个,您将创建一个如下所示的类:

<?php

<?php

class MyTemplate { var $top; var $header; var $footer; function __construct() { $this->top = ‘HTML CODE FOR PRE-HEADER’; $this->header = ‘HTML SECTION FOR HEADER’; $this->footer = ‘HTML CODE FOR FOOTER’; }

类MyTemplate {var $ top; var $ header; var $ footer; 函数__construct(){$ this-> top ='HTML CODE FOR PRE-HEADER'; $ this-> header ='HTML SECTION FOR HEADER'; $ this-> footer ='HTML代码的脚'; }

?>

?>

Image for post
Photo Credit Joshua Dahl
图片来源Joshua Dahl

W3 Schools templates are well organized. You can dissect the raw HTML and place it into each appropriate placeholder.

W3学校模板井井有条。 您可以剖析原始HTML,并将其放入每个适当的占位符中。

Now adding pages with the same look and feel is smooth, each subsequent page that you add will look like this:

现在,添加具有相同外观的页面是很平滑的,随后添加的每个页面都将如下所示:

<?php

<?php

include_once “MyTemplate.php”;

include_once“ MyTemplate.php”;

$master = new MyTemplate();

$ master = new MyTemplate();

?>

?>

<?php

<?php

echo $master->top();

echo $ master-> top();

?>

?>

<title>My Web Site — About</title>

<title>我的网站-关于</ title>

</head>

</ head>

<?php

<?php

echo $master->header();

echo $ master-> header();

?>

?>

<p>Content Goes here </p>

<p>内容在此处</ p>

<?php

<?php

echo $master->footer();

echo $ master-> footer();

?>

?>

Image for post
Photo Credit Joshua Dahl
图片来源Joshua Dahl

When you call the echo function in PHP, what this does is write back to the client. In our example, we are writing HTML code in a particular sequence. PHP files can comprise HTML code and server-side processing. The class for the template is basic; we want to write back our template to provide our consistent layout.

当您在PHP中调用echo函数时,它所做的是写回到客户端。 在我们的示例中,我们以特定的顺序编写HTML代码。 PHP文件可以包含HTML代码和服务器端处理。 模板的类是基本的。 我们想写回我们的模板以提供一致的布局。

The trick to getting a good master page template is to take apart the main layout into sections, put on your Wile E. Coyote hat on this one, but don’t crash yourself into the cliff. If you want to change layouts and try to get that Roadrunner, all you have to do is update the MyTemplate.php class file, and away you go.

获得良好的母版页模板的技巧是将主要布局分解为多个部分,并在上面戴上您的Wile E. Coyote帽子,但不要使自己陷入悬崖。 如果要更改布局并尝试获取Roadrunner,只需要做的就是更新MyTemplate.php类文件,然后离开。

翻译自: https://medium.com/the-innovation/achieving-a-consistent-look-and-feel-using-master-pages-with-php-581dae5ff74a

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值