如何建设一个PHP网站模板

如何从头开始创建一个PHP网站模板

这是一个创建一个PHP网站模板,HTML和CSS教程。我们会从基础开始,你也可以下载的最终产品。请记住,易雅达在这个例子中使用非常基本的CSS样 式,只为你的想法,并没有这么多,以使它看起来很漂亮。下载将包含样式的例子,以及一个完整的空白模板,您可以使用任何个人或商业项目,为自己的起点。

php网站设计开始

本教程假定您已基本了解HTML和CSS。在本教程结束时,你应该有一个基本的了解,使用PHP和转换HTML网站,以php.You也可以下载演示文件。

实际的模板将创建10个简单的步骤。然后,我将采取更进了一步向您展示如何添加到您的模板的变量。

设置文件结构和文件夹

第1步

让我们开始创建一个新的文件夹。我有一个名为此文件夹php_site

此文件夹内,我们现在要创建两个新文件。一个是index.html和其他文件将是名为style.css

第二步

现在,我们要创造我们的主文件夹内两个文件夹。第一个文件夹被命名为包括,和第二个文件夹将被命名为变量。

我们现在应该有一个看起来像下面的设置:

php_template_start


第三步

现在,使用您喜欢的HTML编辑器打开index.html文件。我们将创建一个基本的HTML网站文件。这是我使用的代码:

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="yiyada.com" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>1stWebDesigner PHP Template</title>
</head>
    <body>
        <div id="wrapper">
<div id="header">
</div> <!-- end #header -->
<div id="nav">
</div> <!-- end #nav -->
<div id="content">
</div> <!-- end #content -->
<div id="sidebar">
</div> <!-- end #sidebar -->
<div id="footer">
</div> <!-- end #footer -->
        </div> <!-- End #wrapper -->
    </body>
</html>

第四步

现在我打开style.css文件,我们将使用添加的div。我加入了非常基本的造型,这样你可以看到网站和得到我们正在做的的想法。记住,你可以使用自己的造型时创建您的网站,以满足您的需求。

这是我加入到样式表CSS的:

body {
background-color:#f1f1f1;
font-family: georgia,sans-serif;
color:#333;
margin:0;
padding:0;
}

#wrapper {
width:960px;
background-color:#f8f8f8;
margin:0 auto;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}

#header {
width:960px;
height:135px;
margin:0 auto;
margin-bottom:25px;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
}

#header h2 {
padding:10px;
}

#nav {
width:960px;
height:40px;
border-bottom:1px solid #ccc;
}

#nav a {
display:inline;
padding:10px;
text-decoration:none;
background-color:#f1f1f1;
}

#nav a:hover {
background-color:#bababa;
height:80px;
}

#content {
width:675px;
float:left;
padding:10px;
}

#sidebar {
width:200px;
float:right;
margin-bottom:25px;
}

#sidebar a {
text-decoration:none;
}

#sidebar li {
list-style:none;
}

#footer {
clear:both;
width:960px;
height:135px;
border-top:1px solid #ccc;
}

#footer p {
padding:10px;
}


第五步

下一步,我们将创造更多的文件,我们将使用当我们开始我们的模板转换到PHP。

打开我们创建的文件夹内我们的主要文件夹,名为变量。接下来,创建一个空白文件名为variables.php

php网站模板开发第5步

然后,进入到其他的文件夹,名为我们创建,包括创建下列文件:

header.php文件
nav.php
的sidebar.php
footer.php

php_template,php做网站模板第6步骤

第六步

现在我们需要添加一些内容,我们的index.html文件。我已经在头区填写一个网站头标题H2标记。我也将加入在导航领域的联系,以及一些文字内容区,边栏和页脚。最后的index.html文件现在看起来像这样:

<!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>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>1stWebDesigner PHP Template</title>

</head>

    <body>

        <div id="wrapper">

<div id="header">

    <h2>1stWebDesigner PHP Template</h2>

</div> <!-- end #header -->

<div id="nav">

    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Portfolio</a>
    <a href="#">Contact</a>

</div> <!-- end #nav -->

<div id="content">

<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>

<h3>Paragraph Element</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<h3>Another Heading Starting Point</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

</div> <!-- end #content -->

<div id="sidebar">

<h3>Navigation</h3>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>

<h3>Box Two</h3>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>

<h3>Box Three</h3>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>

</div> <!-- end #sidebar -->

<div id="footer">
    <p>Copyright &copy 2010 <a href="https://www.yiyada.com/">PHP网站模板开发Template</a></p>
</div> <!-- end #footer -->

        </div> <!-- End #wrapper -->

    </body>

</html>

第七步

现在我们将开始我们的模板转换到PHP。我们需要一个简单的介绍一下,我们已经和决定哪些领域将切片的HTML代码。我们将删除从index.html文件的具体领域和放入他们的PHP文件,包括文件夹内创建。

让我们开始的HTML文档头顶部。复制标题div和削减从文档。然后打开你的包括文件夹,我们创建的header.php文件,并添加代码的header.php

header.php文件

<div id="header">
    <h2>1stWebDesigner PHP Template</h2>
</div> <!-- end #header -->


确保这方面现在已经被彻底删除index.html文件,并且放置到header.php文件。在这段代码的地方,现在我们将添加下面的index.html文件。

<?php include('includes/header.php'); ?>
现在我们的index.html应该是这样的:(请注意包括一个标题区现已取代我们的PHP函数,调用外部的header.php文件)

<!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>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>1stWebDesigner PHP Template</title>

</head>

    <body>

        <div id="wrapper">

<?php include('includes/header.php'); ?>

<div id="nav">

    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Portfolio</a>
    <a href="#">Contact</a>

</div> <!-- end #nav -->

<div id="content">

<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>

<h3>Paragraph Element</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<h3>Another Heading Starting Point</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

</div> <!-- end #content -->

<div id="sidebar">

<h3>Navigation</h3>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>

<h3>Box Two</h3>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>

<h3>Box Three</h3>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>

</div> <!-- end #sidebar -->

<div id="footer">
    <p>Copyright &copy 2010 <a href="#">Website Name</a></p>
</div> <!-- end #footer -->

        </div> <!-- End #wrapper -->

    </body>

</html>

第八步

现在,我们将继续切片的HTML文档,并将其放置在适当的PHP文件,我们的代码。

接下来,让我们的移动资产净值的div。与上述相同,我们要复制和剪切,一段代码,并放置到我们的nav.php文件,包括文件夹内位于的。

这是我们加入的nav.php文件:

<div id="nav">

    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Portfolio</a>
    <a href="#">Contact</a>

</div> <!-- end #nav -->


同样,我们将取代从下面的HTML文件中的代码:

<?php include(includes/nav.php); ?>

现在我们的index.html文件将看起来像这样:(再次注意,取代现在使用PHP的头,和NAV面积包括)

<!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>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>1stWebDesigner PHP Template</title>

</head>

    <body>

        <div id="wrapper">

<?php include('includes/header.php'); ?>

<?php include('includes/nav.php'); ?>

<div id="content">

<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>

<h3>Paragraph Element</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<h3>Another Heading Starting Point</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

</div> <!-- end #content -->

<div id="sidebar">

<h3>Navigation</h3>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>

<h3>Box Two</h3>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>

<h3>Box Three</h3>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>

</div> <!-- end #sidebar -->

<div id="footer">
    <p>Copyright &copy 2010 <a href="#">Website Name</a></p>
</div> <!-- end #footer -->

        </div> <!-- End #wrapper -->

    </body>

</html>

第九步

现在是时候做的侧边栏。复制和剪切边栏div和sidebar.php文件,我们创建了位于包括文件夹内放入。

这是我们添加的代码:

的sidebar.php
<div id="sidebar">

<h3>Navigation</h3>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>

<h3>Box Two</h3>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>

<h3>Box Three</h3>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>

</div> <!-- end #sidebar -->


页脚区域,我们将再次做同样的事情。复制和剪切页脚的div放到footer.php文件中,我们创造了在同一包括文件夹。

这里是footer.php的代码:

<div id="footer">
    <p>Copyright &copy 2010 <a href="#">Website Name</a></p>
</div> <!-- end #footer -->

现在我们的index.html文件,并添加不同的PHP文件的元素,最终的index.html看起来应该像这样:
<!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>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>1stWebDesigner PHP Template</title>

</head>

    <body>

        <div id="wrapper">

<?php include('includes/header.php'); ?>

<?php include('includes/nav.php'); ?>

<div id="content">

<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>

<h3>Paragraph Element</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<h3>Another Heading Starting Point</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

</div> <!-- end #content -->

<?php include('includes/sidebar.php'); ?>

<?php include('includes/footer.php'); ?>

        </div> <!-- End #wrapper -->

    </body>

</html>

第十步

现在,我们的index.html是正确的切片,我们可以重命名的index.html文件到index.php

现 在,我们已经创造了这个模板,只要PHP包含任何页面上,我们只需要修改一个单一的文件,使其在整个网站可见。这又是很好的很多内容和页面的人。而不必编 辑您的网站的每一页上的侧边栏,你现在可以只需编辑sidebar.php文件,它会反映您的所有网页上。这使得轻松了许多,以保持网站材料的大部分。

我们的文件夹现在应该看起来像这样:

PHP网站建设模板第十步骤

创建模板的PHP变量

现在,我们将尽了一点更具活力,更容易被需要时能够修改。让我们看在header.php文件,包括文件夹内。
<div id="header">

    <h2>1stWebDesigner PHP Template</h2>

</div> <!-- end #header -->


我们将对此作出修改,一点点改变的H2使用变量从不同​​的文件的标题。创建一个变量是为您的网站上的地区,可能会改变比别人更多的好。这也可能是一个很好的方式,允许客户端编辑一个文件,以改变在其网站上的某些项目。

现在让我们来取代文本内的H2标题:

<h2><?php echo $heading ?></h2>

现在我们的header.php文件的样子:请注意,我们放置的H2括号内回声PHP命令。H2的标题我们希望,这将给我们的可变输出。

<div id="header">

    <h2><?php echo $heading ?></h2>

</div> <!-- end #header -->


下一步,我们要打开文件里面的变量的文件夹,我们创建了一个名为variables.php

我们将添加变量,我们要呼应标题的网站上。我有一个名为这个变量的标题。

variables.php

<?php

$heading='1stWebDesigner PHP Template';

?>


现在,在任何时候,我们要改变什么是对我们的模板的标题名为,我们可以简单地打开我们variables.php文件,并修改引号之间的是什么。这将永远是我们的header.php文件的输出,我们把echo命令。

一步

现在,我们将做同样的事情对我们的footer.php文件。打开,我们已经在我们的footer.php包括文件夹,让我们一看:

<div id="footer">
    <p>Copyright &copy 2010 <a href="#">Website Name</a></p>
</div> <!-- end #footer -->


让我们改变这种像我们做的头文件,并添加一个变量来使用。

我们将会把我们的echo命令段括号内。现在,您应该在您的footer.php以下内容:
<div id="footer">
    <p><?php echo $footer ?></p>
</div> <!-- end #footer -->

我们将参观我们variables.php我们所做的变量文件夹中的文件,现在我们将更新我们的新的变量。最后应该是这个样子的:

variables.php

<?php

$heading='1stWebDesigner PHP Template';

$footer='Copyright &copy; 2010 1stWebDesigner PHP Template';

?>


请注意以上。当使用PHP变量,我们不能使用常规的报价。他们应该更换正如你看到的上面直接后的A HREF =

这是为了确保代码浏览器正确读取。如果使用常规的报价,它不会工作。

所有工作

为了使我们的变量的工作,我们需要做的最后一件事是在我们的模板做最后一个PHP的include调用的变量文件。

让我们打开了我们的header.php文件,添加以下:

<?php include('variables/variables.php'); ?>
这会告诉我们的模板,使用我们所创建的变量文件。

header.php文件应该是这个样子的:

<?php include('variables/variables.php'); ?>

<div id="header">

    <h2><?php echo $heading ?></h2>

</div> <!-- end #header -->


下一步,我们将需要做同样的,我们的footer.php文件。在顶部添加相同包括。footer.php应该是这个样子的:

<?php include('variables/variables.php'); ?>

<div id="footer">
    <p><?php echo $footer ?></p>
</div> <!-- end #footer -->


现在,这两个文件是调用的变量,你将看到的结果反映在最后的模板。您可以随时创建新的变量,并创建任何你想要的PHP文件类型。你甚至可以改变以任何方式,你想,只要​​你的PHP包括功能显示文件的正确路径的文件夹目录。

PHP模板播放

为了进一步测试它有点让index.html文件的复制,并在第二页,也将调用外部的PHP文件。这样一来,我们将能够看到更确切地说是如何工作的。

让你的index.php文件的副本,并重新命名新的文件,以about.php

在这个文件中,你可以改变内#内容div#包装内的网站任何你想要的

我已经创建了下面的测试目的:

<!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>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>1stWebDesigner PHP Template About Page</title>

</head>

    <body>

        <div id="wrapper">

<?php include('includes/header.php'); ?>

<?php include('includes/nav.php'); ?>

<div id="content">

<h3>About Me Page</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<h3>Another Heading Starting Point</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<h3>Notice The Include Files</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<h3>Another Heading Starting Point</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

</div> <!-- end #content -->

<?php include('includes/sidebar.php'); ?>

<?php include('includes/footer.php'); ?>

        </div> <!-- End #wrapper -->

    </body>

</html>

现在确保我们进去nav.php文件以及sidebar.php文件链接我们刚刚创建的新的一页。再次使用您选择的HTML编辑器,先打开nav.php文件。

更新的链接,使您的​​文件,现在看起来像下面这个例子:

nav.php

<div id="nav">

    <a href="index.php">Home</a>
    <a href="about.php">About</a>
    <a href="#">Portfolio</a>
    <a href="#">Contact</a>

</div> <!-- end #nav -->


下一步,我们将需要做同样的事情,我们的sidebar.php文件,以确保链接现在的工作。

的sidebar.php

<div id="sidebar">

<h3>Navigation</h3>
    <li><a href="index.php">Home</a></li>
    <li><a href="about.php">About Us</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>

<h3>Box Two</h3>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>

<h3>Box Three</h3>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>

</div> <!-- end #sidebar -->


现在我们是完整的。我们已经创建了一个两页的PHP网站模板,我们可以更多的扩大使已完成的项目。我们已经学会了如何使用基本的PHP包括和变量能够在许多不同的页面编辑的内容在同一时间。我真的希望你喜欢这篇文章,从它的东西获悉,以及。

只要采取一个新的文件结构与添加页面,您可以查看下面的图片,以供参考,最终看:

php模板设计网站完成了

本教程是易雅达给你的一些关于PHP的基本知识,并创建一个PHP网站模板。