网站系统模板网站制作规范

网站制作规范

 

1.网站顶部固定版块不可以缺少：企业微博，网站地图，XML，收藏本站，询盘信息

2.首页板块不可以缺少：产品列表（一般放在第一个板块），公司简介，新闻列表，产品展示，联系我们（里面加网址）

3.网站关键词描述标签放四个页面（其中新闻详细页面news_article.html要加网站关键词标签）

index.html    

products_article.html  

products_contrast.html     

products_two.html 

4.新闻详细页面：相关标签、相关新闻、相关产品三个板块不可缺少

5.产品详细页面：相关标签、相关新闻、相关产品三个板块不可缺少

6.网站内页的每个页面需要加上产品列表和联系我们（加公司网址）版块

7.网站底部：Copyright ©   域名 (复制链接) 公司名称 是专业生产 关键字   的企业 （参考模式）网站底部需要有：CNZZ流量统计、

 

 

网站制作实用版

 

 

 一：经常用到的模块和标签

 

1.网站标题关键词和描述（注意网站关键词和描述在  index.html  products_article.html  products_contrast.html  products_two.html   四个页面使用其他页面不需要加，新闻的详细页面加网站关键词）

 

     网站标题：  <title>field:titleinfo</title>                                

     网站关键字：<meta name="Keywords" content="">

     网站描述：  <meta name="Description" content="[field:description]">

   

2.网站顶部链接（不能随意删除固定版块）

 

     企业微博: <a href="http://www.zuoseoyh.com/weibo/">企业微博</a>

     网站地图: <a href="http://www.zuoseoyh.com/sitemap.html">网站地图</a>

     XML:      <a href="http://www.zuoseoyh.com/sitemap.xml">XML</a>

 

     首页登录显示展示标签[field:login]

     模板中引用jquery.js

     采购单链接标签： [field:cart]

 

3.网站logo:客户服务商可以设计在后台添加

网站logo: <img src="[field:logopath]" alt="[field:companyname]" width="" height=""/>

 

 4.一页艘站内站外搜索：（需要注意和以前的代码有不同）  

<SCRIPT language=javascript>

           function Seach() {

            var obj;    

            obj=document.getElementsByName("nest");

             if(obj!=null) {

               var i;

              for(i=0;i<obj.length;i++) {

                 if(obj[i].checked) {

                t= obj[i].value;            

                  }

             }

           }

              if(t=="2") {

                   document.getElementById("formSeach").action="http://www.yiyeso.net/s.asp"; 

                 document.getElementById("formSeach").target="_blank"

                } else {

                  document.getElementById("formSeach").action="/key.aspx";

            document.getElementById("formSeach").target="_blank"

                   }

                  }

            </SCRIPT>

        <form  name="formSeach" id="formSeach" action="/key.aspx" onSubmit="Seach()">

           <input type="text" name="k" size="25" class="cpkey" value="" />

        站内<input type="radio" name="nest" value="1" checked="CHECKED" />

        站外<input type="radio" name="nest" value="2" />

        <input type="image" class="image" onClick="doAdvancedSearchSubmit('')" value="" src="http://www.zuoseoyh.com/template/[field:css_color]/images/btn.gif" align="top" >

       </form>

   

5.调用关于我们分类列表:

{nest:about (row='all')}

<a href="[arcurl]" target="">[title]</a>

{/nest:about}

 

6.调用新闻分类列表：

{nest:newstype (row='all')}

<a href="[arcurl]"><span>[typename]</span></a>

{/nest:newstype}

 

7.产品分类类表：

 

《{nest:prolist (row='6' orderby='typetjpx' list='protypelist' typerecommend='true' )}》

 

 

一级分类列表：注意理解一次理解可随处应用、灵活应用

{nest:protypelist(row='all' orderby='tj' parentid='0')}

 <a href="[arcurl]">[typename(length='6')]</a>

 

一级分类下产品：

{nest:prolist( row='all' orderby='typetjpx' list='protypelist' typerecommend='true')}

<a href="[prolist.arcurl]">[prolist.productname]</a>

{/nest:prolist}

 

一级分类下的二级分类列表：

{nest:selflist (row='4'  orderby='tj' type='parentid')}

<dt><a href="[selflist.arcurl]">[selflist.typename]</a></dt>

 

一级分类下的二级分类下的产品列表：

{nest:prolist ( row='all'orderby='typetjpx' list='selflist' typerecommend='true')}

<a href="[prolist.arcurl]">[prolist.productname (length='11')]</a>

{/nest:prolist}

{/nest:selflist}

{/nest:protypelist}

</dl>

   

   

调用一级分类下面的类别推荐：                

{nest:protypelist(row='all' orderby='tj' parentid='0')}

{nest:prolist( row='all' orderby='typetjpx' list='protypelist' typerecommend='true')}

<a href="[prolist.arcurl]">[prolist.productname]</a>

{/nest:prolist}

{nest:selflist (row='4'  orderby='tj' type='parentid')}

{nest:prolist ( row='all'orderby='typetjpx' list='selflist' typerecommend='true')}

<a href="[prolist.arcurl]">[prolist.productname (length='11')]</a>

{/nest:prolist}

{/nest:selflist}

{/nest:protypelist}

  

8.常用联系我们格式：更多标签参考筑巢标签文档  

  

<p>联系:[field:linkpeople]</p>

<p>手机: [field:mobile]</p>

<p>电话: [field:phone]</p>

<p>传真: [field:companyfax]</p>

<p>邮箱: <a href="mailto:[field:companyemail]">[field:companyemail]</a></p>

<p>网址:[field:companyurl]</p>

<p>地址: [field:companyaddress]</p>  

 

9.新闻动态：调用新闻列表：

{nest:newslist (row='10')}

<a href="[arcurl]" target="">[title]</a>

{/nest:newslist}

   

调用某个新闻类别下的新闻列表：注意id 和后台添加的新闻类别对应

{nest:newslist (category='id' row='5')}

<a href="[arcurl]" target="">[title]</a>

{/nest:newslist}

  

10.首页推荐产品展示：（调用后台首页推荐的产品）

{nest:prolist (row='10' orderby='indextjpx' indexrecommend='true')}

<div>

<h2><a href="[arcurl]" target=""><img src="[path]" width="100" height="100" onload="imgZoomer(this,100,100)" /></a></h2>

<h3><a href="[arcurl]" target="">[productname (length='6')]</a></h3>

</div>

{/nest:prolist}  

   

11.类别推荐产品展示：（调用后台类别推荐的产品）

{nest:prolist (row='10' orderby='typetjpx' typerecommend='true')}

<div>

<h2><a href="[arcurl]" target=""><img src="[path]" width="100" height="100" onload="imgZoomer(this,100,100)" /></a></h2>

<h3><a href="[arcurl]" target="">[productname (length='6')]</a></h3>

</div>

{/nest:prolist}  

   

12.热门产品图片切换效果： （经常出现产品图片不切换效果可以参考此代码）

<div class="hotpro" >

{nest:prolist (row='10' orderby='indextjpx' indexrecommend='true')}

<div id="pic[xh]" class="hotpropic" style="display:none;">

<div class="cn" >

<h2><a href="[arcurl]" target=""><img src="[path]" width="150" height="135"/></a></h2>                                     <p><a href="[arcurl]" target="">[productname]</a></p>

</div>

</div>

{/nest:prolist}

<script>document.getElementById("pic0").removeNode(true); document.getElementById("pic1").style.display="";</script>                    <script language=javascript src="http://www.zuoseoyh.com/template/[field:css_color]/product.js" type="text/javascript"></script>

</div>  

 

13.首页公司概况：（length='200'注意尽量多调点内容）

[field:company_indexinfo(length='200')]...   

  

14.商盟成员：（注意不要限制个数不要限制标题长度。不要删除隐藏等）

<div class="shangmeng">

<ul>

{nest:business (row='all')}

<li ><a href="[url]" title="[keyname]">[keyname]</a></li>

{/nest:business}

</ul>    

</div>

 

对应样式：（仅供参考）

.shangmeng{ float:left; width:203px; height:88px; overflow:hidden;border:1px solid #ccc;}

.shangmeng ul {float:left;list-style:none; border-bottom:none; border-left:none; border-right:none; border-top:none;}

.shangmeng ul li { display:block; width:80px; height:auto; float:left; padding-left:5px;                                 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} 

 

15.友情连接：

{nest:link (row='all')}

<li><a href="[arcurl]" target="_blank"><img src="[logopath]" alt="[sm]" width="" height=""  /></a></li>

{/nest:link}   

  

以上标签的使用方法一般多数在首页使用............

 

二、about 模版页面常用标签：

 

1.页面导航： 每个页面可以使用

  

您现在的位置:顶尖SEO首页 > SEO行业新闻 > 详细内容

 

2.单页面的标题和内容效果可以参考附带的案例模版

  

<div class="title2 ">[title]</div>

<div class="detail" ><p>[info]</p></div>

 

3.企业资质展示

{nest:comApprove()} {/nest:comApprove}

 

 lib文件夹下添加css 、js文件：productComApp.css 、resizeImage.js

模版页面中添加css，js引用：

<link href="http://www.zuoseoyh.com/template/[field:css_color]/lib/productComApp.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://www.zuoseoyh.com/template/[field:css_color]/lib/resizeImage.js"></script>

   

三、information页面标签： （当新闻有多个分类的时候这个页面不做新闻分类的页面打开不能显示内容）

<div class="news_t"  >[field:typename]</div>

{nest:newslist (category='1' row='20' page='true')}

<li><a href="[arcurl]">[title]</a><span>[begintime]</span></li>

{/nest:newslist}  

   

四、news_article页面：

（注意：相关标签、相关新闻、相关产品几个板块不能少。新闻详细细页面加关键字：<meta name="Keywords" content="">）

<h3>[title]</h3>（新闻标题）

<h6>发布时间：[begintime]</h6>

<div>[info]</div> （新闻详细内容）

 

新闻上一条下一条：<div class="n_article_next">

 </div>

 

<div class="tag">相关标签：[tag]</div>

 

<!-- 相关产品 -->

<div class="related">相关产品</div>

<div class="c_product_b" >

{nest:prorelated (row='5')}

<dl>

<dt><a href="[arcurl]"><img src="[path]" alt="[productname]" /></a></dt>

<dd><a href="[arcurl]">[productname]</a></dd>

</dl>

{/nest:prorelated}

</div> 

<!-- 相关产品结束 -->

 

_______________________________________________________

 

<!-- 相关新闻 -->

<div class="related">相关新闻</div>

<dl class="news">

<ul>

{nest:newsrelated (row='4')}

<li><a href="[arcurl]">[title]</a><span></span></li>

{/nest:newsrelated}

</ul>

</dl>

<!-- 相关新闻结束 -->

</div>

        

对应CSS样式

.tag { margin-left:20px; margin-top:50px; margin-bottom:20px; font-size:14px; clear:both; }

.tag a { color:#09f; border-bottom:1px dashed; text-decoration:none; }

.tag a:hover { border-bottom:1px dashed; }

.c_product_b { width:680px; margin-top:5px; clear:both; }

.c_product_b dl { width:103px; float:left; padding-left:34px; }

.c_product_b dt { width:101px; height:101px; border:1px solid #cccccc; }

.c_product_b dt img { width:95px; height:95px;  padding:3px 0 0 3px; }

.c_product_b dd {  margin-top:8px; text-align:center; padding-bottom:20px; }

.c_product_b dd a { color:#666; }

 

.news { width:600px; margin-left:26px; margin-top:8px;  }

.news a { color:#333; }

.news ul { line-height:30px; }

.news ul li { background:url(images/point.gif) no-repeat scroll 0 12px; padding-left:10px; }

.news span { color:#999; }

 

（样式仅供参考注意学习代码的使用方法）

   

        

五、products.html页面

<div class="product_list_b">

{nest:prolist (row='16' orderby='px' page='true')}

<div>

<h2><a href="[arcurl]"><img src="[path]" width="100" height="100" alt="[productname]"/></a></h2>

<h3><a href="[arcurl]" title="[productname]">[productname]</a></h3>   

</div>

{/nest:prolist}

</div>

<div class="pages"><ul>{pagelist:prolist/}</ul></div>

 

对应CSS样式

.product_list_b{margin-top:15px; margin:auto;}

.product_list_b div{float:left;width:110px; height:150px;_width:105px;margin:10px 10px 5px 30px!important;margin:10px 12px 5px 32px;text-align:center;}

.product_list_b h2{width:100px;height:100px;margin:0 auto 5px;}

.product_list_b h2 a{width:100px;height:100px;border:#d3d3d3 solid 1px;padding:1px;display: table-cell;vertical-align:middle;text-align:center;*display:block;*font-size: 87px;*font-family:Arial;}

.product_list_b h2 img{vertical-align:middle;}

.product_list_b h3 a{color:#000;font-weight:normal; line-height:20px;}

 

.pages { clear:both; padding:20px 45px 0 0; color:#00c; }

.pages a { color:#00c; }

.pages a:hover { color:#f60; text-decoration:none; }

.pages ul { float:right; }

.pages li { float:left; margin-left:8px; }

  

六、products_two.html页面标签

 <div class="product_list_b">

{nest:protypelist (row='16' orderby='px'  page='true')}

<div>

<h2><a href="[arcurl]"><img src="[path]" width="100" height="100" alt="[typename]"/></a></h2>

<h3><a href="[arcurl]" title="[typename]">[typename]</a></h3>   

</div>

{/nest:protypelist}

</div>

<div class="pages"><ul>{pagelist:protypelist/}</ul></div>

     

七、products_article.html页面（注意：相关标签、相关新闻、相关产品几个板块不能少）

 1.产品多图   标签格式：

{nest:productShow(width='230' height='230' imgMidColor='#FFAAA0' imgSmallColor='#f5f5f5')}{/nest:productShow}

标签说明：width设置产品展示图片的宽度、height设置产品展示图片的高度、imgMidColor设置产品展示原图边框颜色，imgSmallColor设置产品展示小图的边框颜色，根据实际页面需求更改对应的参数即可。

 

引用js，cs

在模板页面中引用地图相关js、将相关js,cs加入相应的路径中。

<SCRIPT type="text/javascript" src="http://www.zuoseoyh.com/template/[field:css_color]/lib/jquery-1.4.2.js"></SCRIPT>

<script type="text/javascript" src="http://www.zuoseoyh.com/template/[field:css_color]/lib/cloud-zoom.1.0.2.js"></script>

<script type="text/javascript" src="http://www.zuoseoyh.com/template/[field:css_color]/lib/picCloud.js"></script>

<script type="text/javascript" src="http://www.zuoseoyh.com/template/[field:css_color]/lib/lib.js"></script>

<link href="http://www.zuoseoyh.com/template/[field:css_color]/lib/cloud-zoom.css" rel="stylesheet" type="text/css" />

<link href="http://www.zuoseoyh.com/template/[field:css_color]/lib/picCloud.css" rel="stylesheet" type="text/css" />

 

2.产品描述 ：[remark] 

上一个产品：<a href="[url_pre]">[product_pre]</a>    下一个产品：<a href="[url_next]">[product_next]</a>

八、contact.html联系我们页面

 

地理位置（地图效果）

 

标签格式：{nest:map(width: 400px; height: 200px;)} {/nest:map}

标签说明：width设置前台显示地图的宽度、height设置前台显示地图的高度、根据实际页面需求更改对应的数字即可

引用js在模板页面中引用地图相关js、将BaiduMap.js加入相应的路径中。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

<script type="text/javascript" src="http://www.zuoseoyh.com/template/[field:css_color]/BaiduMap.js"></script>

 

九、bottom.html底部模版页面

流量统计：[field:cnzz]