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

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

1、  header.html

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

         <?php

         if(isset($message)){

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

                   </script>

         }

         ?>

當(dāng)PHP遇到錯誤時，例如驗(yàn)證用戶輸入的密碼有誤，這段代碼用于將錯誤信息用JavaScript中的警告框彈出，提醒用戶。同時header.html在登錄、注冊模塊還嵌套了一些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">注冊</a>

                   </div>

                   <?php}else{?>

                   歡迎您，<?.php echo

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

         <?php}?>

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

2、  index.html

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

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

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

3、footer.html

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

4、login.html

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

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

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

5.register.html

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

6、loginheader.html

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

<?php

         if(isset($message)){

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

                   </script>

         }

 ?>

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

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