如何设计通用的网站模板

news/2024/5/20 23:01:41/文章来源:https://blog.csdn.net/weixin_30362083/article/details/97203903

 现在网络上已经到处可以看到使用模板开发出来的网站。使用模板开发网站有很多好处,最主要的就是模板与程序完全脱离,用户可以根据规定好的标签任意开发模板,导入到模板引擎里就能正常运行。所以美工人员跟程序编写人员彻底的独立了。提高了开发网站的效率,程序的重用性发挥的淋漓尽致。
   智能建站系统、速成网站、自助建站系统、只会打字就能做网站,等等广告字眼我们已经不再陌生了,所有的这些无非都是围绕着模板做文章。也正是因为这样的系统越来越普及,对于要求不高的企业或者个人用户,拥有一个完全属于自己的网站,用现成的模板要比找网络公司定制省钱的多。性价比要高的多,所以目前中小型网络公司的生存问题堪忧。
   提供模板做论坛的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/ .是目前唯一真正实现可视化模板编辑的系统。

转载于:https://www.cnblogs.com/soundcode/archive/2010/12/25/1916829.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_780745.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大型网站技术架构(二)架构模式

2019独角兽企业重金招聘Python工程师标准>>> 每一个模式描述了一个在我们周围不断重复发生的问题及该问题解决方案的核心。这样&#xff0c;你就能一次又一次地使用该方案而不必做重复工作。 所谓网站架构模式即为了解决大型网站面临的高并发访问、海量数据、高可靠…

网站设计常用技巧(转)

先说一下写这篇文章的目的吧&#xff0c;这上面的东西很多不是我写的&#xff0c;也不是我总结的&#xff0c;这点我肯定&#xff0c;呵呵&#xff0c;我希望大家也能提提你自己的建议&#xff0c;希望不断总结&#xff0c; 让更多的网站设计技巧出现在这里&#xff0c;方便 查…

(一)高并发redis学习笔记:小电商网站架构与高并发架构区别

主要的知识&#xff1a; redis集群storm集群nginxtomcatmysql 真正能支撑高并发以及高可用的复杂系统中的缓存架构有哪些东西&#xff1f; &#xff08;1&#xff09;如何让redis集群支撑几十万QPS高并发99.99%高可用TB级海量数据企业级数据备份与恢复&#xff1f;&#xff1…

配置ISA Server以创建站点到站点*** 连接之二(接续之一)

在本练习中&#xff0c;您将对两个 ISAServer 阵列进行配置以创建站点到站点 *** 连接。注意&#xff1a;本实验室练习使用以下计算机&#xff1a;Denver - Florence - Berlin - Istanbul 注意&#xff1a;在以下任务中&#xff0c;您将配置 GERMANY 阵列以使用站点到站点 *** …

PHP网站头部通栏设计

1.把网站添加到桌面&#xff1a; <a href"shortcut.php">放到桌面上</a> <?PHP$Shortcut "[InternetShortcut]URLhttp://www.xxx.comIDListIconFilehttp://www.xxx.com/favicon.ico//图标IconIndex1[{000214A0-0000-0000-C000-000000000046}]P…

如何更有效使用 Rational AppScan 扫描大型网站,第 1 部分: 工作原理及技术分析...

近来看到AppScan的技术介绍&#xff0c;感觉不错&#xff0c;与同行分享。 Rational AppScan&#xff08;简称 AppScan&#xff09;其实是一个产品家族&#xff0c;包括众多的应用安全扫描产品&#xff0c;从开发阶段的源代码扫描的 AppScan source edition&#xff0c;到针对 …

黄聪:Discuz X2.0 SEO:论坛面包屑导航伪静态 去掉面包屑导航forum.php(转)

自从Discuz被腾讯这头大牛收购后的确越来越强大了&#xff0c;云平台是最大的亮点&#xff0c;但是Discuz X2.0在伪静态方面仍然非常不尽人意。目前世面主流的论坛程序phpwind和Discuz都无法做到全站完美伪静态&#xff0c;这对SEO影响很大&#xff0c;如果网站的权重不够高&am…

22个优秀的网站后台模板

22个优秀的网站后台模板 2011年09月3日 发布在 设计 由ding 留下评论不错的后台模版&#xff0c;不过&#xff0c;需要自己去汉化。这个应该问题不大。 还有&#xff0c;看模版的话&#xff0c;建议用火狐或chrome。外国网站一向不是很兼容ie6的&#xff0c;你懂的。 1&a…

PrestaShop加速11招立刻加速PrestaShop外贸电子商务网站无额外插件

2019独角兽企业重金招聘Python工程师标准>>> 自从PrestaShop进入1.4时代&#xff0c;我们会发现PrestaShop越来越慢了&#xff01;比如你用的是justhost空间总会收到服务商提示你cpu超负荷的邮件&#xff0c;最后你的PrestaShop VPS被关闭了&#xff01; 今天&#…

推荐10个堪称神器的学习网站

天一早做了个恶梦&#xff0c;梦到被老板辞退了。虽然说在我们公司&#xff0c;只有我辞退老板的份&#xff0c;没有老板辞退我这一说&#xff0c;但是还是被吓得 4 点多都起来了。&#xff08;主要是因为我掌握着公司所有的核心源码&#xff0c;哈哈哈&#xff09; 既然 4 点…

发布网站详细步骤(.Net)

&#xff08;i&#xff09;打开需要发布的网站 右键需要发布的项目 点击下拉框新建配置文件&#xff0c;输入配置文件名称&#xff0c;点击确定&#xff0c;下一步 发布方法选文件系统&#xff0c;目标位置&#xff1a;项目的根目录 配置选Release 点击发布 &#xff08;ii&…

linux查看某软件是否运行,linux如何查看某个软件是否安装_网站服务器运行维护...

linux中如何重命名文件_网站服务器运行维护linux中重命名文件的方法&#xff1a;可以使用mv命令来重命名文件&#xff0c;具体用法为【mv 源文件名 目标文件名】。例如【mv aaa bbb】&#xff0c;表示将aaa文件重命名为bbb。linux有多种方式安装软件&#xff0c;查看某个软件是…

静态网站托管_MQ

静态网站托管_MQ 1、安装surge npm install --global surge2、将需要部署的静态网页放到一个文件夹 3、命令行进入到该文件夹下&#xff0c;执行surge命令 surge4、然后一直根据提示注册账号和设置密码&#xff0c;使劲敲回车回车&#xff0c;知道完成生成域名&#xff1b;然…

[转载]网站地址栏小图标favicon.ico的制作方法

有人也许会好奇&#xff0c;有的网址前面有个漂亮的小图标而且有的网站图标还会动&#xff0c;这是怎么做到的呢&#xff1f; 如下图所示&#xff1a; 那个小图标有个名字叫favicon.ico&#xff0c;网站图标虽小但可以起到很好的点缀作用&#xff0c;尤其是当浏览者将你的网站放…

一个引号导致1个小时网站打不开

咱们就说下这个例子&#xff0c;提醒广大开发在写SQL的时候一定要仔细&#xff01;当时情况是这样的&#xff0c;一个慢SQL把数据库CPU连接数跑满&#xff0c;由于并发压力大&#xff0c;CPU空闲瞬时为0&#xff0c;过一会机器被HANG死&#xff0c;连接不上。因涉及公司隐私问题…

java已被阻止因为它已过时_Win7系统访问网站提示Silverlight已被阻止因为它已过时怎么办...

在win7系统中自带有IE浏览器&#xff0c;很多用户都喜欢使用IE浏览器来访问一些网站&#xff0c;有时候会遇到提示Silverlight已被阻止因为它已过时需要更新的提示&#xff0c;这是怎么回事呢&#xff0c;现在随小编一起来看看Win7系统访问网站提示Silverlight已被阻止因为它已…

google快速翻译英文网站

查资料、访问英文网站&#xff0c;看不懂英语&#xff1b;使用翻译器、翻译网站等等又嫌太麻烦&#xff01; 直接、快速简单一键直接翻译英文网站所有内容&#xff1b; http://translate.google.com/translate?u网址 ‘网址’换成你要翻译的英文网站&#xff1b;直接把上面地址…

java 企业 网站源码 后台 springmvc SSM 前台 静态化 代码生成器

前台&#xff1a; 支持四套模版&#xff0c; 可以在后台切换系统介绍&#xff1a;1.网站后台采用主流的 SSM 框架 jsp JSTL&#xff0c;网站后台采用freemaker静态化模版引擎生成html2.因为是生成的html&#xff0c;所以访问速度快&#xff0c;轻便&#xff0c;对服务器负担小3…

服务器上无此文件自动转到404,网站服务器经常性出现404错误的解决方案

网络上浏览页面呈现的过错链接提示多种多样&#xff0c;呈现404notfound也算是一个很普遍的问题&#xff0c;信任上网族都遇到过该情况&#xff0c;当咱们翻开某网页时会呈现提示&#xff1a;404NotFound&#xff0c;看到该页面心境本就糟糕了&#xff0c;404notfound首要用于浏…

(其他)80个提升自我的网站,只收藏,但并不看系列.

转载于:https://www.cnblogs.com/historylyt/p/9165686.html