<<  Drupal 5 简易安装指南（文字版） | 首 页 | XOOPS模块的开发设计教程文档  >>

  • xoops的页面结构 - [xoops]

    2008-03-14

    版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://yaho.blogbus.com/logs/16986957.html

    xoops目录里,一般都有/themes/default/目录,这个目录是xoops默认页面,主页面文件是theme.html,整个网站风格的关键就在这个文件和 style.css 文件.
    xoops的布局是块,就是说我们一般能控制的最小单位是块,相比一些其他CMS能控制的是元素,灵活性自然会降低了一些,对于想随心所欲来修改版面的人来说,总会报怨xoops很难在版面上有大突破的效果.
    我研究一下theme.html文件,其实还是有一些办法来处理的.先把theme.html改为div布局,结构会很清晰了:

    <body>

    头部:

    <div id="header">
    <    h1></h1    >
    <    h2></h2    >
    </    div>


    <!--
    举例把左栏放在标题的右边:

    <div id="leftcolumn">
    <{foreach     item=block from=$xoops_lblocks    }>
    <{include     file="default/theme_blockleft.html"    }>
    <{/foreach}>
    </    div>

    -->

    水平导航栏

    <ul id="">
    <    li id=""><a href="">首页</a><li    >
    <    li id=""><a href=""></a><li    >
    <    li id=""><a href=""></a><li    >
    <    li id=""><a href=""></a><li    >
    <    li id=""><a href=""></a><li    >
    </    ul>



    图片:

    <div id="img">
    <    img src="" alt="header image"     />
    </    div>


    下面是修改为div的布局:
    左栏:

    <div id="leftcolumn">
    <{foreach     item=block from=$xoops_lblocks    }>
    <{include     file="default/theme_blockleft.html"    }>
    <{/foreach}>
    </    div>


    中间栏

    <{if $xoops_showcblock == 1}> #先判断

    <div id="centercolumn">



    中间左栏

    <div id="centerLcolumn">

    <{foreach     item=block from=$xoops_clblocks    }>

    <{include     file="default/theme_blockcenter_l.html"    }>
    #调用文件
    <{/foreach}>

    </    div>


    中间中栏

    <div id="centerCcolumn" >

    <{foreach     item=block from=$xoops_ccblocks    }>

    <{include     file="default/theme_blockcenter_c.html"    }>

    <{/foreach}>

    </    div>


    中间右栏

    <div id="centerRcolumn">

    <{foreach     item=block from=$xoops_crblocks    }>

    <{include     file="default/theme_blockcenter_r.html"    }>

    <{/foreach}>

    </    div    >


    </    div    >
    <{/if}>


    内容栏

    <div id="content">

    <{    $xoops_contents    }>
    </    div>



    底栏

    <{if $xoBlocks.page_bottomleft or $xoBlocks.page_bottomright or $xoBlocks.page_bottomcenter}>
    <    div id="bottomcolumn">


    底左栏

    <{if $xoBlocks.page_bottomleft or $xoBlocks.page_bottomright}>

    <    div id="bottomLcolumn"    >

    <{foreach     from=$xoBlocks.page_bottomleft item=block    }>
    <{include     file="default/theme_blockcenter_l.html"    }>
    <{/foreach}>

    </    div>


    底中栏

    <{if $xoBlocks.page_bottomcenter}>

    <    div id="bottomCcolumn"     >

    <{foreach     from=$xoBlocks.page_bottomcenter item=block    }>
    <{include     file="default/theme_blockcenter_c.html"    }>
    <{/foreach}>

    </    div    >

    <{/if}>


    底右栏

    <div id="bottomRcolumn">

    <{foreach     from=$xoBlocks.page_bottomright item=block    }>
    <{include     file="default/theme_blockcenter_r.html"    }>
    <{/foreach}>

    </    div    >

    <{/if}>
    </    div    >

    <{/if}>



    右栏

    <{if $xoops_showrblock == 1}>

    <    div id="rightcolumn"    >

    <{foreach     item=block from=$xoops_rblocks    }>

    <{include     file="default/theme_blockright.html"    }>

    <{/foreach}>

    </    div    >

    <{/if}>



    脚底栏

    <div id="footerbar">

    <{    $xoops_footer    }>

    </    div    >


    </    body>


    其实用网页标准化的div处理一下,结构明晰,为什么xoops不用网页标准化呢?提议默认网页不要漂亮,但一定要结构清晰,标准.用div布局!


    明白了结构后,就要在结构上动动脑筋了,理论上,各栏位可以位置颠倒,或随心放置的,例如,有些网页把搜索元素放在标题的右边,可以在块定义为左栏,然后把左栏部分放在标题下,用css定义为标题右边显示就行了.至此,大家应该明白,在左栏的东东不一定在左显示,各个栏只是容器而已,如何显示,在乎你的心了.提议:以后的栏位不用左中右来命名,用1.2.3.来命名更好些,是不是?

    历史上的今天：


    随机文章：


    收藏到：Del.icio.us




    Tag：
    引用地址:
    发表于13:26:53 | 编辑 | 继续话题 | 转发 | 分享　0