上篇说到520模板的文件组织架构，这一篇进一步深入探讨，讲讲每个文件的使用。

首页文件：

首选：default.zhg，一般用得比较少，过去传统页因为FLASH动画的原因，常用来Loading页进度条页面控制按纽。

主要：index.zhg，这是常用的文件，且default.zhg不存在时默认文件。

子页文件：

列表页：list.zhg，一般来说特指列表页，当内容页content.zhg不存在时也可替代。

内容页：一般用list.zhg替代，当list.zhg无法替代时，需要增加该文件。

因此，在520文件夹中，index.zhg是首页文件，list.zhg是子页/内容页文件。

打开index.zhg代码：

$frame_top$
$frame_main$
$frame_bottom$

通过之前的学习，我们知道首页包括3个子文件，分别为top.zhg，main.zhg，bottom.zhg。

略懂英文就应该知道其含义，分别表示：

top：网页的顶部设计，对应的文件是top.zhg

main：网页的主要设计，对应的文件是main.zhg

bottom：网页的底部设计，对应的文件是bottom.zhg

为什么要这么设计呢？

主要考虑到子页list.zhg也有top和bottom，并且和首页是一模一样的，那么分离出来单独成页，就可以被index.zhg和list.zhg调用，不需要重复编写相同代码，同时index.zhg和list.zhg代码也精简起来，读来清晰明了。

下面将top.zhg代码复制如下：

    

        

            
$show_welcomelt;/div>
            

                

                    $func_search(para=Search,table=1|2,btn=1)lt;/div>
                
$func_contact(show=hotline)lt;/div>
            
        
    


    

        
$show_logolt;/div>
        

            $func_menu(pos=0,divi=none)lt;/div>
    

上面的代码看不懂吧？初学者，确实很糊涂，我们之前要求大家先学一些Bootstrap知识，大家可以读一读《用弘帝建站系统开发模板，需要学习哪些知识点？》，有了一些基础就很容易理解了。

为了让不懂Bootstrap的网友看懂这段代码想表达的意图，我们简化一下，画个图就明白了。

其中红框（这里框用英文BOX表达）是最外层。

在红BOX内，绿BOX是第二层上下结构，分别“欢迎"行和"LOGO"行

在绿BOX内，蓝BOX是第三层左右结构，内容见图。

在网页设计师看来，不管多复杂，网页总能被上下左右的细分下去，直到变成一个功能模块，功能模块可以用弘帝建站系统的$方法$来实现。

其实top.zhg可以通过以下代码来实现：

		

      
$show_welcome$方法实现欢迎词功能
      

        
$func_search(para=Search,table=1|2,btn=1)lt;/div>
        
$func_contact(show=hotline)lt;/div>
      
    
    

      
$show_logolt;/div>
      
$func_menu(pos=0,divi=none)lt;/div>
    

这段代码解释了上面红绿蓝分层图的架构，相对而言比较容易理解。

在过去，2016年前以前，弘帝开发网站早期都是这么设计的，随着2010年后，对HTML5有了新的认识触发了新的开发思想，弘帝开展了新技术应用，对HTML4/5有了兼容性考虑，重零开发出弘帝建站系统，从此对H5技术的应用打下了基石，随着Win7和IE11的淘汰，Edge启用Chrome核心，Bootstrap技术的日益成熟，我们认为改变时机已到，才有了当前520代码的全新设计思想。

为了让CSS代码更简洁，大量减轻CSS员工的工作量和复杂度，我们采用了Bootstrap技术和布局思想，利用DIV多层概念实现网页整站的设计，虽增加了HTML员工的工作量，但从均衡编程小组的组织架构工作量来看，但这是值得的。

这里，提一下H5概念，弘帝建站系统基于H5设计理念，什么设备什么屏幕分辨率，显示的网页效果是不同的，也是最舒适的，即网上常言的响应式网页。top.zhg代码里，navbar-toggler是boostrap实现H5的一种技术，即在宽屏下是菜单展示，如上图，窄屏下手机展示形式，如下图：

限于文字篇幅可以写成十万长篇的原因，仍然理解不了的，有关代码详解教程，找到头条视频里的《弘帝课堂》相关视频，也可以私信交流心得。