首頁(yè)技術(shù)文章正文

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

更新時(shí)間:2019-12-13 來(lái)源:黑馬程序員 瀏覽量:

動(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è)頭部的共有模塊),具體介紹如下。

1576207654177_前端6.jpg

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)課程。

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!