【跟我学弘帝建站系列教程】每天学一点(争取控制在5分钟内),一周会建站。
上一期我们学习了框架脚本的编写,了解了DIV的实现方法,下一步,我们要让每一个DIV赋予其真实的功能,也是弘帝建站系统的难点,但您也不用怕,我们提供了二次开发参考及功能脚本说明,您只需对号入座,复制粘贴就可以了。
学习功能脚本前,必须找到二次开发参考库,这里列出,也可以在二次开栏目中找到,如下:
弘帝建站系统内部二次开发技术参考资料
http://wh.ac.cn/forum.php?mod=viewthread&tid=28&fromuid=1
当您有了这个神奇的参考库后,一切就迎刃而解了。
回到Blue101案例:
如果您的命名直观有意义,那么下面的脚本编写将变得简单。
<div class="logo"></div>
一看是logo,就知道函数也一定要找logo,在参考资料页面,按F5,查找logo,复制$show_logo$插入,代码变成:
<div class="logo">$show_logo$</div>
<div class="search"></div>就知道要插入$func_search(table=1|2,btn=1)$得到:
<div class="search">$func_search(table=1|2,btn=1)$</div>
<div class="menu"></div>和<div class="banner"></div>得到
<div class="menu">$func_menu(css=Menu,pos=0,divi=null)$</div>
<div class="banner">$show_banner$</div>
<div class="favi"></div>可能有点让您不知所措,但经仔细分析后,您会发现与参考库中的功能$show_addfavorite$ | $show_sethomepage$ | $show_gb2big5$极为贴近,于是所有top.zhg代码整理完毕,如下:
top:zhg文件:
<div class="top">
<div class="logo">$show_logo$</div>
<div class="nav">
<div class="favi">$show_addfavorite$ | $show_sethomepage$ | $show_gb2big5$</div>
<div class="search">$func_search(table=1|2,btn=1)$</div>
</div>
</div>
<div class="menu">$func_menu(css=Menu,pos=0,divi=null)$</div>
<div class="banner">$show_banner$</div>
整个过程,只需要复制粘贴,不需要写一个字的代码就完成了。
下面开始写main.zhg的完整代码:
about对应:$func_about(navi=Navigator,para=About,plus=card,len=250,more=enter.gif)$
news对应:$func_article(navi=Navigator,css=List,para=News,len=13,rows=5,more=moreplus.gif)$
image对应:$func_article(navi=Navigator,css=List,para=News,len=13,rows=5,more=moreplus.gif)$
info对应:$func_article(navi=Navigator,css=List,para=News,len=13,rows=5,more=moreplus.gif)$
case对应:$func_product(navi=Navigator,css=Product,para=Product,len=8,rows=9,more=more.gif)$
我们发现一些问题,news,image,info显示的代码完全一样,但实际网站内容是不可能一样的,这时候,我们可以调整Para参数,比如:news保持不变,image的para改成para=Image,info的para改成para=Info
再仔细观察设计,可以发现,news是支持第一行图片新闻的,后五是新闻列表,再找资料库里找有没有支持图片的,发现:
$func_article(navi=NavigatorGray7,css=ArticleIndex,para=News,summ=3,len=18,rows=3,more=moreplus.gif)$适用。
同时,image是只显示图片,没有列表的,那么回到资料库再找,发现:
$func_article(navi=Navigator,css=List,para=News,pic=1,len=40,rows=10,type=7,imgW=250,imgH=200,more=more.gif)$
经过以上调整,我们得到main.zhg最终代码,如下:
main.zhg文件:
<div class="main">
<div class="box">
<div class="box1">
<div class="about">$func_about(navi=Navigator,para=About,plus=card,len=250,more=enter.gif)$</div>
<div class="news">$func_article(navi=NavigatorGray7,css=ArticleIndex,para=News,summ=3,len=18,rows=3,more=moreplus.gif)$</div>
</div>
<div class="box2">
<div class="image">$func_article(navi=Navigator,css=List,para=Image,pic=1,len=40,rows=10,type=7,imgW=250,imgH=200,more=more.gif)$</div>
<div class="info">$func_article(navi=Navigator,css=List,para=News,len=13,rows=5,more=moreplus.gif)$</div>
</div>
</div>
<div class="case">$func_product(navi=Navigator,css=Product,para=Product,len=8,rows=9,more=more.gif)$</div>
</div>
大功告成,整个过程,除了复制粘贴外,还可能需要更换para值!
最后是bottom.zhg的代码,这里就直接写出,不再解释:
bottom.zhg文件:
<div class="bottom">
<div class="link">$func_link(navi=NavigatorHSML,para=FriendLink,title=友情链接,type=1)$</div>
<div class="copyright">$func_copyright(type=3)$</div>
</div>
全站首页代码全部完成,就是这么简单,子页代码由大家结合二次开发参考自己练习或观看相关视频学习,也可以加群讨论或者参加课程培训(支持远程一对一辅导)
下一课,我们将测试开发结果和美化网站,让您的网站灵动起来,满足您的审美!
|