现在的位置: 首页 > web前端 > 正文

HTML网站模板怎么制作

2020年02月10日 web前端 ⁄ 共 1668字 ⁄ 字号 评论关闭

  动态网站需要将网页的各部分静态模块拆外,制作成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 (用于存放注册页和登录页头部的共有模块),具体介绍如下。

  1、 header.html

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

  < ?php   if(isset($message)){   echo'   }   ?>

  当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']);?> 退出

  < ?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前端知识,可以上学步园。

抱歉!评论已关闭.