【跟我学建站】【入门三】弘帝建站系统模板的框架脚本编写！

admin

【跟我学弘帝建站系列教程】每天学一点（争取控制在5分钟内），一周会建站。
通过前章的学习，我们了解到树型结构的形成，这里我们将树型结构编成代码，非常简单。
在这之前，我们通过整站了解到首页与子页是有共同部分的，如下图

共同部分有顶部菜单+BANNER，底部有友情链接+版权，分别命名为top.zhg，bottom.zhg，中间部分我们称之为主体部分命名为main.zhg。
那么index.zhg就由top.zhg,main.zhg,bottom.zhg三部组成。
index.zhg的写法为：
$frame_top$
$frame_main$
$frame_bottom$
三行就可以表达该三个框架文件。

下一步写top.zhg
结合前图，我们将ABCD命名成有意义的英文：
底部附上命名规则，可供参考，一方面：免去您想名字的麻烦；另一方面：规范命名规范，尽可能命名一致性，这在团队开发中非常重要，避免随意命名导致每个开发人员命名都不同，这对于团队来说是重大伤害。
分别依次为：黄线-A-top，代码：<div class="top"></div>
红线-B-logo，代码：<div class="logo"></div>
红线-C-nav，代码：<div class="nav"></div>
蓝色-D-favi，代码：<div class="favi"></div>
蓝线-E-search，代码：<div class="search"></div>
黄线-F-menu，代码：<div class="menu"></div>
黄线-G-Banner，代码：<div class="banner"></div>
我们将代码按树型关系得到：
<div class="top">
<div class="logo"></div>
<div class="nav">
<div class="favi"></div>
<div class="search"></div>
</div>
</div>
<div class="menu"></div>
<div class="banner"></div>
仔细观察是否难以理解呢？如果不理解，请看教学视频。

同样，我们可以得到main.zhg代码为：
黄线：<div class="G">
红线：<div class="H">
蓝线：<div class="I">
绿线：<div class="J"></div>
绿线：<div class="K"></div>
蓝线结束：</div>
蓝线：<div class="L">
绿线：<div class="M"></div>
绿线：<div class="N"></div>
蓝线结束：</div>
红线结束：</div>
红线：<div class="O"></div>
黄线结束：</div>
于是修改一下命名，得到标准代码：
<div class="main">
<div class="box">
<div class="box1">
<div class="about"></div>
<div class="news"></div>
</div>
<div class="box2">
<div class="image"></div>
<div class="info"></div>
</div>
</div>
<div class="case"></div>
</div>
这样，main.zhg代码完成。

最后，bottom.zhg就一气呵成了，不再解释，代码如下：
<div class="bottom">
<div class="link"></div>
<div class="copyright"></div>
</div>

子页其实也是一样，由list.zhg分解成top.zhg,left.zhg,bottom.zhg三部分，这里就不明述了，可以参见首页的代码编写，很好理解，如果您还是理解不了，请观看教学视频，或者群内讨论，也可以参加培训课程。
这一讲到此结束，如果您理解了，可以关注下一课程的学习。

admin

http://wh.ac.cn/forum.php?mod=viewthread&tid=494&fromuid=1