Rumah > Artikel > pembangunan bahagian belakang > Membina rangka kerja PHP5: Bahagian 3
Memandangkan kita mempunyai rangka kerja asas (lihat Bahagian 1 dan Bahagian 2 siri ini), kita boleh mula memikirkan tentang menyepadukan reka bentuk dengan rangka kerja PHP. Kini, kami akan menumpukan pada reka bentuk bahagian hadapan, termasuk cara mudah "mengulit" rangka kerja baharu kami.
Bagaimana semuanya sesuai bersama
Langkah 1: Apa yang diperlukan untuk reka bentuk bahagian hadapan rangka kerja kami
Kawasan kandungan utama, kami memanggilnya
#content
Satu atau dua lajur kandungan tidak sepenting
#content
Sesetengah data jadual.
<!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>
Anda boleh menukar jenis dokumen untuk dipadankan, malah anda boleh mentakrifkannya dalam tetapan setiap tapak web yang dibuat menggunakan rangka kerja, dan dapat menukar jenis dokumen juga berguna
lang
. Ia boleh berguna untuk menentukan helaian gaya sebagai tetapan juga, yang akan kami bincangkan dalam tutorial akan datang.
Selain itu, perihalan meta dan atribut kunci meta boleh dikodkan keras ke dalam kulit setiap tapak web yang anda buat, tetapi adalah bijak untuk
menyediakan setiap halaman dengan set perihalan dan kata kunci yang berbezahingga #🎜 🎜 #Cegah halaman rosak daripada muncul dalam indeks tambahan Google. Pemegang tempat {pagetitle} akan digunakan untuk memasukkan tajuk halaman semasa ke dalam templat.
<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>
Seperti yang dijanjikan, kami akan mengisi beberapa perkara asas supaya kami boleh menggayakannya supaya kami mempunyai sekurang-kurangnya kebanyakan teg yang mungkin muncul dalam halaman yang sedia untuk digayakan:
<!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> © Website name, 2008. </p> </div><!--/footer--> </div><!--/wrapper--> </body> </html>
Langkah 3: Gaya Asas
Kami mula-mula menggunakan CSS untuk menetapkan semula jidar dan padding elemen dalam dokumen XHTML:
body, * { margin: 0; padding 0; }
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; }Seterusnya, kami akan memusatkan reka bentuk kami dalam divs #wrapper dan memberikan setiap div sempadan samar supaya kami dapat melihatnya semasa menggayakan.
#wrapper { margin: 0 auto; width: 950px; } <br /> #wrapper, #header, #content, #column, #footer { border: 1px #DDD solid; }Walaupun CSS di atas tidak memusatkan reka bentuk ini dalam Internet Explorer 6, CSS telah disimpan asas untuk fleksibiliti maksimum. Dengan sedikit lagi CSS, kami hampir mempunyai reka bentuk rangka
yang lengkap untuk hujung hadapan rangka kerja
- yang tinggal hanyalah beberapa kedudukan mudah:
#column, #content { float: left; font-size: 125%; padding: 5px; } #column { width: 200px; } #content { margin-left 5px; width: 725px; } #header, #footer { clear: both; }Kini yang tinggal hanyalah imej:
#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; }Apa yang kita tinggalkan pada peringkat ini ialah susun atur laman web mudah yang boleh kita gunakan sebagai asas untuk rangka kerja PHP bahagian hadapan:
Sudah tentu, untuk fleksibiliti tambahan mungkin berguna untuk membenarkan 2 lajur kandungan secara lalai, yang boleh dilakukan dengan menambahkan lebih banyak XHTML dan CSS.
Langkah 4: Templat daripada XHTMLLangkah seterusnya ialah memindahkan XHTML, CSS dan imej ke
Templat pengepala untuk rangka kerja PHP (skins/default/templates/header.tpl.php)
Templat pengepala rangka kerja PHP hendaklah mengandungi bahagian XHTML danBahagian
:<!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>
主模板应包括包含主要内容和列中任何内容的 div。我们现在可以为此内容插入占位符,而不是复制我们用来设置段落、有序列表和表格等元素样式的虚拟文本,占位符将根据内容所在的位置进行更新。
占位符内容是:
<div id="content"> <h1>{pagetitle}</h1> {maincontent} </div><!--/content--> <div id="column"> <!-- START rcolumn --> <h2>{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 部分中研究模型如何组合在一起。该系列中的内容:发送电子邮件、扩展我们的框架以及以创新的方式记录用户事件流。
Atas ialah kandungan terperinci Membina rangka kerja PHP5: Bahagian 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!