开发者社区> zting科技> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

如何设计通用的网站模板

简介:
+关注继续查看

现在网络上已经到处可以看到使用模板开发出来的网站。使用模板开发网站有很多好处,最主要的就是模板与程序完全脱离,用户可以根据规定好的标签任意开发模板,导入到模板引擎里就能正常运行。所以美工人员跟程序编写人员彻底的独立了。提高了开发网站的效率,程序的重用性发挥的淋漓尽致。 
   智能建站系统、速成网站、自助建站系统、只会打字就能做网站,等等广告字眼我们已经不再陌生了,所有的这些无非都是围绕着模板做文章。也正是因为这样的系统越来越普及,对于要求不高的企业或者个人用户,拥有一个完全属于自己的网站,用现成的模板要比找网络公司定制省钱的多。性价比要高的多,所以目前中小型网络公司的生存问题堪忧。 
   提供模板做论坛的discuz公司,各位站长应该都很熟悉,但是做企业网站、独立购物网系统,国内做的比较好的几家公司,想必大家可能不太熟悉:ShopEx 、 携购网店系统(ShopXG) 、HiShop 、 狼烟网络(mynet.cn) 等等,大家有机会可以去他们的官网看看各自的优势。 
   下面我们来详细讲解下如何开发网站模板。 
   涉及到模板的部分我们可以分成以下几块:自定义标签、模板文件、数据控制项、模板引擎 
   1. 自定义标签 自定义标签是模板文件与模板引擎之间交互的基础,也可以说是协议。 目前网络上普遍的标签样式为:{$****} {#*****#},这样的表示方法,主要是为了区分html等脚本标签。 标签的内容区可以设置多种属性。比如len=100 表示数据长度不超过100个字节。 标签变量根据不同的类型,我们可以把名称规定为如下方式: 
   {$var_**} 变量标签,表示这个标签的数据来源是某一个字段的值 
   {$const_**} 常量标签,表示这个标签是一个常量数据,比如,当前的日期等 
   {$temp_small} 小模板数据。(什么叫小模板,我们在后面详细讲解) 
   {$page_**} 分页数据。例如首页,上页,下页等翻页的代码部分。等等。 
   举例:{$var_news_title len=30} 表示显示新闻的标题,如果新闻标题的字数超过 30个字,那么截取。 
   2.模板文件 
   模板文件就是由美工人员开发的脚本代码,里面不涉及到任何程序。由于数据经常会涉及到一个循环显示的问题,所以我们把模板文件又分成:大模板、小模板。 
   模板文件一般都是普通的html文件,源代码里包含了事先约定好的自定义标签, 
   图标说明每个模块的共性: 

 

大家看上面两个模块,一个是新闻列表,一个是产品列表。无论从数据类型还是展现方式上乍一看截然不同。 
   但是大家仔细的看一下,很容易看出来他们其实有很多共同的特点--他们都是有大模板(模块的外框部分)、小模板(模块的数据循环部分)组成。另外,大家可以去找个网站分解下看看。是不是都可以把他们分解成不同的模块,然后每个模块又可以分成大模板、小模板组成。 
   我们以上图中新闻列表来给大家讲解下: 
   大模板文件就是整个外框部分。基本html如下面所示:
  <div class=”newslist”>
  <h>携购网店 – 不可多得的创业好项目</h>
  <ul>代理商加盟携购之后能得到什么?!</ul>
  <div>{$temp_small}</div>
  </div>
  
   从上面可以看出,大模板文件里并没有涉及到数据部分,只有一个小模板标签{$temp_small} ,当模板引擎解析到这个标签的时候,将对应的小模板文件解析后,用最终生成的html数据将该标签替换掉。 
   接下来,我们来看一下小模板的组成: 
   这里特别需要注意下,当模板引擎在解析小模板的时候,是把小模板的数据当作一个循环体,说明白些:比如有10条新闻,那么模板引擎将循环10次小模板数据,将具体的新闻内容分别去替换小模板里的标签,然后组合成一个最终的html. 
   小模板的脚本部分:
  <ul clas=”small_item”>
  <li>{$var_news_title len=100}</li>
  <li>{$var_news_add_time}</li>
  </ul>
  
   当然,需要分页的时候,还需要做分页模板,解析引擎会解析分页模板后,将查询到的当前数据替换掉对应的分页变量标签,最后,替换掉大模板中的分页模板标签。
   分页的脚本部分举例:
  <a href="{$var_link_firstpage_link}" id="modulelist_linkup_first">首页</a>
  <a href="{$var_link_prevpage_link}" id="modulelist_linkup_prev">上一页</a>
  {$var_link_pageteam} <a href="{$var_link_nextpage_link}" id="modulelist_linkup_next">下一页</a>
  <a href="{$var_link_lastpage_link}" id="modulelist_linkup_last">末页</a>总数:{$var_link_totalnum} 每页条数:{$var_link_perpagecnt}
  总页数:{$var_link_totalpage}当前页码:{$var_link_curpagenum}/{$var_link_totalpage}
  
   最后从结构上我们再总结下模板的组成关系: 

3.数据控制部分 
   该部分是要将哪些数据展示在模板数据项的核心。主要包括以下几部分: 
   a. 查询条件 ,从数据库里要查出哪些数据。 
   b. 排序类型, 将查询得到的数据,通过何种方式进行排序展示。 
   c. 当前页码, 跟每页显示条数配合使用, 
   d. 每页显示条数。 
   e. 是否忽略URL地址里传过来的参数,这个项非常重要,因为像分页和查询,他们都需要从url将参数传过来,而有些定死的数据又不希望受到url参数的影响,所以该项在控制数据显示方面尤为重要。 
   f. 接受url的参数列表。等等. 
   有了数据控制部分,才能让相同类型的模块展示不同的数据。 
   4. 模板引擎 
   我们知道模板文件是静态的html脚本页面,它并不具有业务操作能力,单纯的模板没有任何存在的意义。需要模板引擎通过数据控制将获取到的数据按照模板文件规定的样式展示出来, 
   模板引擎的好坏,直接影响到整个程序的性能,模板要跟数据库打交道,由于模板文件有非常多的数据冗余,而且,设计不合理的模板,同个页面可能需要多次相同的数据库查询操作,如果模板引擎不能很好的区分出来。那么对数据库的压力也是非常大的。 
   如果大家对开发模板网站有兴趣,强烈推荐去用下携购公司开发的VTEditor可视化网站模板开发系统。官方网站:http://www.xiegoo.com/ .是目前唯一真正实现可视化模板编辑的系统。



本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/archive/2010/12/25/1916829.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
设计师必备的25套漂亮的网站 LOGO 设计模板
  在网络时代,你可以充分使用你的才华与创造力获得成功。在网站设计中,有一个非常重要东西,那就是网站的标志(LOGO),标志的设计必须有创意,您的网站访问者才会被吸引。今天这篇文章我一组令人眼花缭乱的网站 LOGO 设计模板,你可以借助这些精美的 LOGO 模板为你的网站打造一个与众不同的网站 LOGO 图标。
613 0
推荐一套开源通用后台管理系统(附源码)
推荐一套开源通用后台管理系统(附源码)
0 0
另类设计:15个现代简约设计风格网站设计实例
  设计师在很多时候想通过使用很多的设计元素或复杂的调色板使一个网站脱颖而出,往往会导致一个网站过度设计,而忽视了最重要的内容。大多数时候,你会发现它更好的做法是采取简约的做法。因此,今天,我们收集了15个新鲜的简约设计的网站例子激发你的灵感。
583 0
常用的设计网站(收藏)
站酷(http://www.zcool.com.cn/ ):拥有丰富的网站资源与模板,很棒 51js和blueidea(http://bbs.51js.com ,http://www.blueidea.com ) :主要看一些js高手们探讨的帖子。
458 0
设计网站
引用: http://www.zzloop.com/999rmb.html
354 0
从0到1写一个网站(2)需求设计
这是《从0到1写一个网站》系列第二篇文章。 这篇文章主要描述我要做的这个网站的功能,以及我对这些功能的拆分,然后使用事件风暴的方式,归纳出主要的领域模型和领域事件。
0 0
酷站设计:学习制作单页网站的10个优秀案例
  这篇文章与大家分享10个学习制作单页网站的优秀案例。这些网站使用丰富多彩,令人惊叹的图像和干净的排版。从视差滚动和流畅的动画到固定和干净的菜单,你会发现单页网站的效果真的很酷,令人难忘!享受这些炫目的设计并获得到启发。
854 0
网站的通用注册原型设计
网站的通用注册原型设计 2015/07/24 阅读(1688) 评论(2) 收藏(11) 人人都是产品经理社区推出产品经理培训课程,让BAT产品总监手把手带你学产品吧! 点此查看详情! 一般注册过程包括以下步骤: 用户按照提示填写表单。
613 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
移动网页加速的通用解决方案探讨和实践
立即下载
优化4K制作流程打造“4K视觉云”
立即下载
优化4K制作流程,创建“4K视觉云”服务
立即下载