Z-BlogPHP主题制作教程#2:制作静态网站页面

 2016-03-01 18:54

好的设计和制作都是沿用了一个好的习惯,如果想制作一个好的主题模板,首先要做出静态页面。博客类型的页面比较简单,一般由两种页面组成:文章列表页面(index)和文章内容页面(single)。有了这两个页面,我们才能继续做下去,下面是我“度娘”模板的两个源页面稿:


先说说页面的结构吧:  

网站的页面结构其实都有一定的规律,它可以分为3块,头部(header),躯体(body),尾部(footer)。所以,我们可以将没用的省略掉后,网页的基本架构就变成了这样:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    ……
</head>
<body>
    ……
    <footer>……</footer>
</body>
</html>

网页头部(header)是看不到的,给计算机预设了一些值,告诉网络的那段:“您打开的是一个html页面”,“这个页面叫做Document”,“这个页面可以用UTF-8来解码”等。躯体(body)中的东西是给浏览者看到的东西。这里也可以分成好多小模块,比如<section><aside><footer><video>等。

Z-blogPHP的模板也是这种靠拼凑组成的。我们可以看到,在“安装程序域名\zb_system\defend\default”文件夹下,有很多小的PHP文件,将这些PHP文件进行合理有效的拼凑,我们就做成了模板。下面就是一个文件列表页面(index.php)所调用的结构逻辑。

Z-BlogPHP主题制作教程

暂时看不明白没关系,下面的几个教程里,我会针对每个PHP进行详细的讲解。

当然,如果想快速入手,可以直接阅读下Z-BlogPHP wiki中说提到的 模块语言模板与标签


Z-BlogPHP主题制作教程:

  1. Z-BlogPHP主题制作教程#1:了解Z-BlogPHP主题
  2. Z-BlogPHP主题制作教程#2:制作静态网站页面
  3. Z-BlogPHP主题制作教程#3:快速制作一个主题
  4. Z-BlogPHP主题制作教程#4:了解template文件夹
  5. Z-BlogPHP主题制作教程#5:模板基本语言
  6. Z-BlogPHP主题制作教程#6:index.php模版
  7. Z-BlogPHP主题制作教程#7:header.php模版
  8. Z-BlogPHP主题制作教程#8:footer.php模版
  9. Z-BlogPHP主题制作教程#9:post-multi和post-istop
  10. Z-BlogPHP主题制作教程#10:分页的pagebar.php
  11. Z-BlogPHP主题制作教程#11:sidebar.php和module.php
  12. Z-BlogPHP主题制作教程#12:内容模版single.php
  13. Z-BlogPHP主题制作教程#13:post-single和post-page
  14. Z-BlogPHP主题制作教程#14:评论外框comments.php
  15. Z-BlogPHP主题制作教程#15:评论框commentpost.php
  16. Z-BlogPHP主题制作教程#16:评论输出comment.php
  17. Z-BlogPHP主题制作教程#17:总结
作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: