全国咨询/投诉热线:400-618-9090

首页技术文章正文

如何制作HTML模板?[web前端培训]

更新时间:2019-12-13 来源:黑马程序员 浏览量:

动态网站需要将网页的各部分静态模块拆外,制作成HTML模板,然后通过PHP代码调用、生成新的页面。例如在路径chapter\ww.itheima到文件夹ww.itheima.com,清空里面的文件。将css, images, template,javascrip文件夹复制到该目录下。然后创建一个html文件夹,用于存放拆分的html模板。接下来分别创建header.hml (用于存放首页头部和nav模块)、 index.html (用于存放首页banner, content等内容), footer.himl (用于存放首页的底部版权)、 login.html (用于存放网站登录页表单内容)、 register.hml (用于存放网站注册页表单内容)、 loginhead.html (用于存放注册页和登录页头部的共有模块),具体介绍如下。

1576207654177_前端6.jpg

1、  header.html

该页面主要用于存放网站的首页头部和nav模块,该结构代码和首页静态页面的结构代码基本相同,差别在于多出了一些PHP代码,具体代码如下:

         <?php

         if(isset($message)){

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

                   </script>

         }

         ?>

当PHP遇到错误时,例如验证用户输入的密码有误,这段代码用于将错误信息用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等内容,该结构代码和首页静态页面代码基本相同,只是在头部和尾引入了PHP代码,具体代码如下:

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

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

 

3、footer.html

该页面主要用于存放首页底部的版权内容,该结构代码和首页静态页面代码基本相同。

 

4、login.html

该页面主要用于存放登录页面表单模块,该页面添加了method和name属性的表单代码,和静态登录页面的表单代码基本相似。不同的是该代码头部添加了如下所示的PHP代码:

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

上述代码用于引入登录页和表单头部模板。

 

5.register.html

该页面主要用于存放注册页表单模块,该结构代码同样添加了method和name属性的表单代码,和静态注册页的表单代码基本相似。并且register.html页面也要添加和login.html相同的PHP引入代码。

 

6、loginheader.html

该页面主要用于存放注册页和登录页头部的公共模块,改结构代码添加了和header代码系相同的PHP验证码,具体代码如下:

<?php

         if(isset($message)){

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

                   </script>

         }

 ?>

当php遇到错误时,这段代码用于将错误信息用于JavaScript中的警告框弹出。

 

以上我们介绍了,制作html模板的方法,希望对您有所帮助。如果想系统深入系统学习web前端知识,可以了解黑马web前端培训课程。

javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

http://www.itcast.cn/subject/uizly/index.shtml?seozxuids

14天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

8天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

0天免费试学

基础班入门课程限时免费

申请试学名额

12天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

10天免费试学

基础班入门课程限时免费

申请试学名额
在线咨询 我要报名