如何制作HTML模板？[web前端培訓(xùn)]

動(dòng)態(tài)網(wǎng)站需要將網(wǎng)頁(yè)的各部分靜態(tài)模塊拆外，制作成HTML模板，然后通過(guò)PHP代碼調(diào)用、生成新的頁(yè)面。例如在路徑chapter\ww.itheima到文件夾ww.itheima.com，清空里面的文件。將css， images， template，javascrip文件夾復(fù)制到該目錄下。然后創(chuàng)建一個(gè)html文件夾，用于存放拆分的html模板。接下來(lái)分別創(chuàng)建header.hml (用于存放首頁(yè)頭部和nav模塊)、 index.html (用于存放首頁(yè)banner， content等內(nèi)容)， footer.himl (用于存放首頁(yè)的底部版權(quán))、 login.html (用于存放網(wǎng)站登錄頁(yè)表單內(nèi)容)、 register.hml (用于存放網(wǎng)站注冊(cè)頁(yè)表單內(nèi)容)、 loginhead.html (用于存放注冊(cè)頁(yè)和登錄頁(yè)頭部的共有模塊)，具體介紹如下。

1、  header.html

該頁(yè)面主要用于存放網(wǎng)站的首頁(yè)頭部和nav模塊，該結(jié)構(gòu)代碼和首頁(yè)靜態(tài)頁(yè)面的結(jié)構(gòu)代碼基本相同，差別在于多出了一些PHP代碼，具體代碼如下:

         <?php

         if(isset($message)){

                   echo'<script type="text/javascript">alert("'.$message.'");

                   </script>

         }

         ?>

當(dāng)PHP遇到錯(cuò)誤時(shí)，例如驗(yàn)證用戶輸入的密碼有誤，這段代碼用于將錯(cuò)誤信息用JavaScript中的警告框彈出，提醒用戶。同時(shí)header.html在登錄、注冊(cè)模塊還嵌套了一些PHP代碼，具體代碼如下:
         <?php if(empty($_SESSION['user'])){?>

                   <div id="test">

                            <span></span>

                            <a href="login.php">登錄</a>

                            <em></em>

                   </div>

                   <div id="lx">

                            <span></span>

                            <a href="register.php">注冊(cè)</a>

                   </div>

                   <?php}else{?>

                   歡迎您，<?.php echo

                   htmlspecialchars($_SESSION['uesr']);?> <a href="logout.php">退出</a>

         <?php}?>

該段代碼同于獲取登錄時(shí)用戶信息，并將用戶信息顯示到首頁(yè)中。

2、  index.html

該頁(yè)面主要用于存放banner、content等內(nèi)容，該結(jié)構(gòu)代碼和首頁(yè)靜態(tài)頁(yè)面代碼基本相同，只是在頭部和尾引入了PHP代碼，具體代碼如下：

<?php require'./html/header.html'; ?>

<?php require.html/footer.html'; ?>

3、footer.html

該頁(yè)面主要用于存放首頁(yè)底部的版權(quán)內(nèi)容，該結(jié)構(gòu)代碼和首頁(yè)靜態(tài)頁(yè)面代碼基本相同。

4、login.html

該頁(yè)面主要用于存放登錄頁(yè)面表單模塊，該頁(yè)面添加了method和name屬性的表單代碼，和靜態(tài)登錄頁(yè)面的表單代碼基本相似。不同的是該代碼頭部添加了如下所示的PHP代碼：

<?php require’./html/loginhead.html'; ?>

上述代碼用于引入登錄頁(yè)和表單頭部模板。

5.register.html

該頁(yè)面主要用于存放注冊(cè)頁(yè)表單模塊，該結(jié)構(gòu)代碼同樣添加了method和name屬性的表單代碼，和靜態(tài)注冊(cè)頁(yè)的表單代碼基本相似。并且register.html頁(yè)面也要添加和login.html相同的PHP引入代碼。

6、loginheader.html

該頁(yè)面主要用于存放注冊(cè)頁(yè)和登錄頁(yè)頭部的公共模塊，改結(jié)構(gòu)代碼添加了和header代碼系相同的PHP驗(yàn)證碼，具體代碼如下：

<?php

         if(isset($message)){

                   echo'<script type="text/javascript">alert("'.$message.'");

                   </script>

         }

 ?>

當(dāng)php遇到錯(cuò)誤時(shí)，這段代碼用于將錯(cuò)誤信息用于JavaScript中的警告框彈出。

以上我們介紹了，制作html模板的方法，希望對(duì)您有所幫助。如果想系統(tǒng)深入系統(tǒng)學(xué)習(xí)web前端知識(shí)，可以了解黑馬web前端培訓(xùn)課程。