【跟我学建站】【入门二】弘帝建站系统模板的框架结构设计！

admin

【跟我学弘帝建站系列教程】每天学一点（争取控制在5分钟内），一周会建站。
我们了解了弘帝建站系统的模板命名与文件所存在位置，下一步就是如何制作这些文件。
如果没有学习上一篇开发教程，请点击以下链接仔细阅读！
【跟我学建站】弘帝建站系统模板的文件名称位置与用途？
http://wh.ac.cn/forum.php?mod=viewthread&tid=610&fromuid=1

当您掌握了以上知识，就可以学习下面的内容了。

以Blue101为例，网站效果演示网址：http://demo.wh.ac.cn/blue101
首先，我们在Userthemes文件夹下建立模板文件夹blue101
然后，按序先后建立：首页模板index.zhg和子页模板list.zhg
最后，我们对index.zhg进行代码设计，由于list.zhg和index.zhg的设计思想是完全一样的，这里就没有必要再解述。

这个过程根据视页面内容情况而定，如果比较复杂的页面，设计也较为复杂，但思想的原理都是一样，只需1-5分钟即可完成设计思想，这里已经假定页面为Blue101，效果图见下。
设计思想：1、先画横向框，即横向最大框，再画每个横框里的纵向最大框，再画纵框里的最大横向或最大纵向框，如图。

点击小图可放大，图示中，首先先画横向最大框，如黄色框，我们可以看到从上到下，共6个黄框。
按照思想，画完最大外部横向框后，应对每个横向框内的纵向内容从左到右进行画框，红色框即是第二次画框。
按照思想，画完内部纵框后，如果纵框还有细分，那么就继续画横框和纵框，如图所示，顶部的收藏本站与新闻搜索是第三次画次，蓝色标记，同样在首页主体区域，也有蓝色标记的第三次画框。
最后，首页主体区域，还有绿色框体第四次标记，至此结束网站框架构了

据此，我们得到一个由外至内的分级树型结构图：

点小图，可以看大图，有了这个树型图，我们可以尝试画框，能不对得出框型图，如果能得到，恭喜您，您学会网页框架设计了。
如果该树型图得不到上面的框形图，表明您还需要努力，继续学习树型图与框形图的练习。
在实际过程中，我们并不是以ABCD来命名的，我们用更有意义的英文名来替代，比如A实际为Logo,F用Banner,J为About,K用News，这样是不是更可以理解每个页面版面的意义呢？
那么这一节，我们就学完了，是不是很简单，没有难度吧？接下来，您可以学习下一步，也可以提前看看视频教学。

admin

由于H5时代的来到，网页设计变得更加简单，不再象过去传统建站那么，一行就是一行，没有那么多不可预估的列出现，也就是设计变得简洁和大气，所以基本上就没有红线，蓝线，绿线的画框了，这样网站制作更加高效。