集团公司网络架构设计 集团公司架构如何搭建

建设一个集团网站，最关键的就是进行分类，首先将需要完成的网站分成几个页面，比如首页以及其他子页面，页面与页面之间通过链接实现跳转，其次再逐步对各个页面进行编辑。就拿下面一个网站的首页来讲，根据网页效果可以将网页分成各个模块，这样可以方便我们写代码时不容易出错，可以进行好的模块化设计，一个个部分拼接在一起就可以建成一个网页，下面就是一个常见的网页模板：

知道了模块图，我们也可以把代码也进行模块化，比如根据上图我们可以先把代码的格式确定好，首先可以将该网页分成3个大的部分用div表示该区域（网页头部/网页内容/网页页脚）。

网页头部

从效果图来看网页头部分为logo、搜索框和导航栏3个部分。在网页头部部分再嵌套使用div将3个部分分隔开，在分别编辑各个部分的代码，一个网页头部就做好了，具体嵌套的方式如下：

// An highlighted block
var foo = 'bar';
<div id="header_wrapper">
    <header>
        <div class="container">
            <div id="logo">
                <h1><a href="index.html"><img src="images/logo.jpg" alt="集团首页"></a> </h1>
            </div>
            <div id="sousuo">
                <form action="index.html">
                    <input type="text" placeholder="搜索其实很简单"><input type="submit" value="搜索">
                </form>
            </div>
        </div>
        <div id="nav">
            <nav class="container">
                <ul>
                    <li class="on"><a href="index.html">集团首页</a></li><li>
                    <a href="piclist.html">产品列表</a></li><li>
                    <a href="list.html">新闻列表</a></li><li>
                    <a href="content.html">内容页面</a></li><li>
                    <a href="index.html">关于我们</a></li>
                </ul>
            </nav>
        </div>
    </header>
</div>

body部分

其中最为复杂的部分就是主要body部分，这个部分的section模块很多，也就需要很多层的嵌套语句，首先使用article和aside将中间部分分为左右两个区域，article区域中又包含着轮播图、新闻部分、活动展示、列表4各部分用section分隔开来，aside区域包含博文、招聘、联系我们和会员介绍也用section进行分隔，然后在各个部分添加他们的信息，这里必须要注意的是不要在嵌套时输错了，把不是这样区域的东西输入到这个区域，所以我们常常给他们设置id用代码表示如下图
下面展示一些 内联代码片。

// An highlighted block
var foo = 'bar';
<div id="body_wrapper" class="container">
    <article>
        <section id="lunbotu">
            <div class="wrap">
                <div id="slide-holder">
                    <div id="slide-runner">
                        <a href="/"><img id="slide-img-1" src="images/a1.jpg" class="slide" alt="" /></a>
                        <a href="/"><img id="slide-img-2" src="images/a2.jpg" class="slide" alt="" /></a>
                        <a href="/"><img id="slide-img-3" src="images/a3.jpg" class="slide" alt="" /></a>
                        <a href="/"><img id="slide-img-4" src="images/a4.jpg" class="slide" alt="" /></a>
                        <a href="/"><img id="slide-img-5" src="images/a5.jpg" class="slide" alt="" /></a>
                        <a href="/"><img id="slide-img-6" src="images/a6.jpg" class="slide" alt="" /></a>
                        <a href="/"><img id="slide-img-7" src="images/a4.jpg" class="slide" alt="" /></a>
                        <div id="slide-controls">
                            <p id="slide-client" class="text"><strong>联盟推荐: </strong><span></span></p>
                            <p id="slide-desc" class="text"></p>
                            <p id="slide-nav"></p>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"第一条的标题在这里","desc":"第一条的这里是描述信息"},{"id":"slide-img-2","client":"标题在这里","desc":"这里是描述信息"},{"id":"slide-img-3","client":"标题在这里","desc":"这里是描述信息"},{"id":"slide-img-4","client":"标题在这里","desc":"这里是描述信息"},{"id":"slide-img-5","client":"标题在这里","desc":"这里是描述信息"},{"id":"slide-img-6","client":"标题在这里","desc":"这里是描述信息"},{"id":"slide-img-7","client":"标题在这里","desc":"这里是描述信息"}];
                </script>
            </div>
        </section>
        <section id="xinwen">
            <div class="title_bg">
                <h2><a href="list.html">集团会员新闻</a></h2>
            </div>
            <ul>
                <li>
                    <a href="content.html"><img src="images/news_11.jpg" alt="新闻简介"> </a><a href="content.html" class="ms">
                        <div class="sanjiaoxing"></div>
                        <h3>...</h3>
                        <p>....</p>
                    </a>
                </li>
                <li>
                    <a href="content.html"><img src="images/news_11.jpg" alt="新闻简介"> </a><a href="content.html" class="ms">
                    <div class="sanjiaoxing"></div>
                    <h3>......</h3>
                    <p>......</p>
                </a>
                </li>
                <li>
                    <a href="content.html"><img src="images/news_11.jpg" alt="新闻简介"> </a><a href="content.html" class="ms">
                    <div class="sanjiaoxing"></div>
                    <h3>......</h3>
                    <p>......</p>
                </a>
                </li>
                <li>
                    <a href="content.html"><img src="images/news_10.jpg" alt="新闻简介"> </a><a href="content.html" class="ms">
                    <div class="sanjiaoxing"></div>
                    <h3>......</h3>
                    <p>......</p>
                </a>
                </li>
                <li>
                    <a href="content.html"><img src="images/news_10.jpg" alt="新闻简介"> </a><a href="content.html" class="ms">
                    <div class="sanjiaoxing"></div>
                    <h3>....</h3>
                    <p>....</p>
                </a>
                </li>
            </ul>
        </section>
        <section id="huodong">
            <div class="title_bg">
                <h2><a href="list.html">集团活动</a></h2>
            </div>
            <section id="huodong_a">
                <ul>
                    <li><a href="content.html"><img src="images/hd_1.jpg"> </a> </li><li>
                    <a href="content.html"><img src="images/hd2.jpg"> </a> </li><li>
                    <a href="content.html"><img src="images/hd3.jpg"> </a> </li><li>
                    <a href="content.html"><img src="images/hd2.jpg"> </a> </li>
                </ul>
            </section>
            <section id="huodong_b">
                <ul>
                    <li><a href="content.html">......</a></li>
                    <li><a href="content.html">......</a></li>
                    <li><a href="content.html">......</a></li>
                    <li><a href="content.html">......</a></li>
                    <li><a href="content.html">......</a></li>
                    <li><a href="content.html">......</a></li>
                    <li><a href="content.html">......</a></li>
                    <li><a href="content.html">......</a></li>
                    <li><a href="content.html">......</a></li>
                    <li><a href="content.html">......</a></li>
                </ul>
            </section><section id="huodong_c">
                <ul>
                    <li><a href="content.html"><img src="images/hd_17.jpg"> </a> </li>
                    <li><a href="content.html"><img src="images/hdd_20.jpg"> </a> </li>
                </ul>
            </section>
        </section>
    </article><aside>
        <section id="bowen">
            <div class="title_bg">
                <h2><a href="list.html">精彩博文</a></h2>
            </div>
            <section id="bowen_a">
                <ul>
                    <li><a href="content.html"><img src="images/bowen_06.jpg"></a><a href="content.html">精彩博文详细标题</a></li><li>
                    <a href="content.html"><img src="images/bowen_06.jpg"> </a><a href="content.html">精彩博文详细标题</a> </li>
                </ul>
            </section>
            <section id="bowen_b">
                <ul>
                    <li><a href="content.html">......</a></li>
                    <li><a href="content.html">......</a></li>
                    <li><a href="content.html">......</a></li>
                </ul>
            </section>
        </section>
        <section id="zhaoping">
            <div class="title_bg">
                <h2><a href="list.html">职位信息</a></h2>
            </div>
            <ul>
                <li><a href="content.html">......</a></li>
                <li><a href="content.html">......</a></li>
                <li><a href="content.html">......</a></li>
                <li><a href="content.html">......</a></li>
                <li><a href="content.html">......</a></li>
                <li><a href="content.html">......</a></li>
                <li><a href="content.html">......</a></li>
                <li><a href="content.html">......</a></li>
                <li><a href="content.html">......</a></li>
                <li><a href="content.html">......</a></li>
            </ul>
        </section>
        <section id="lianxi">
            <div class="title_bg">
                <h2><a href="list.html">联系我们</a></h2>
            </div>
            <a href="content.html"><img src="images/about_13.jpg"></a>
        </section>
        <section id="zigongsi">
            <div class="title_bg">
                <h2><a href="list.html">集团子公司</a></h2>
            </div>
            <ul>
                <li>
                    <h4><a href="content.html">子公司名称</a></h4>
                    <div class="zgsjj">
                        <a href="content.html"><img src="images/menber_19.jpg"></a>
                        <a href="content.html">......</a>
                    </div>
                </li>
                <li>
                    <h4><a href="content.html">子公司名称</a></h4>
                    <div class="zgsjj">
                        <a href="content.html"><img src="images/menber_19.jpg"></a>
                        <a href="content.html">....</a>
                    </div>
                </li>
                <li>
                    <h4><a href="content.html">子公司名称</a></h4>
                    <div class="zgsjj">
                        <a href="content.html"><img src="images/menber_19.jpg"></a>
                        <a href="content.html">......</a>
                    </div>
                </li>
                <li>
                    <h4><a href="content.html">子公司名称</a></h4>
                    <div class="zgsjj">
                        <a href="content.html"><img src="images/menber_19.jpg"></a>
                        <a href="content.html">......</a>
                    </div>
                </li>
                <li>
                    <h4><a href="content.html">子公司名称</a></h4>
                    <div class="zgsjj">
                        <a href="content.html"><img src="images/menber_19.jpg"></a>
                        <a href="content.html">......</a>
                    </div>
                </li>
                <li>
                    <h4><a href="content.html">子公司名称</a></h4>
                    <div class="zgsjj">
                        <a href="content.html"><img src="images/menber_19.jpg"></a>
                        <a href="content.html">......</a>
                    </div>
                </li>
                <li>
                    <h4><a href="content.html">子公司名称</a></h4>
                    <div class="zgsjj">
                        <a href="content.html"><img src="images/menber_19.jpg"></a>
                        <a href="content.html">......</a>
                    </div>
                </li>
                <li>
                    <h4><a href="content.html">子公司名称</a></h4>
                    <div class="zgsjj">
                        <a href="content.html"><img src="images/menber_19.jpg"></a>
                        <a href="content.html">......</a>
                    </div>
                </li>
            </ul>
        </section>
    </aside>
</div>

footer部分

整个网页最简单的部分就是页脚部分，这个部分只包含几条链接和版权所有，这些操作都只需要在一个div中就可以完成，在ul列表中显示3条链接，再使用一个p段落交代版权所有，代码如下：
下面展示一些 内联代码片。

<div id="footer_wrapper">
    <footer class="container">
        <ul>
            <li><a href="content.html">版权信息</a></li>
            <li><a href="content.html">站点地图</a></li>
            <li><a href="content.html">联系我们</a></li>
        </ul>
        <p>©2014 Maiziedu.com 京ICP证0000001号</p>
    </footer>
</div>

上述工作做完之后就可以编辑各个部分的样式了，建议分成一个个模块来完成，这样可以看得更清楚，不容易把样式用错在其他的模块，比如把body部分的样式用在footer.