草芽学习网提供织梦建站和织梦仿站培训,从零基础讲解DEDECMS程序建站和DEDE仿站方法!

dede手机仿站教程(学会织梦仿手机站一篇足矣)

作者:草芽学习网 来源:织梦百科
dede手机仿站第一课:仿手机站的准备工作 如果你没有一点点的网页基础,没关系,你可以关闭次页面内容,直接联系博客(342422610)让他帮你干活了。 如果你想学,建议先看懂简单的

dede手机仿站第一步:仿手机站的准备工作

如果你没有一点点的网页基础,没关系,你可以关闭次页面内容,直接联系博客(342422610)让他帮你干活了。

 

如果你想学,建议先看懂简单的HTML代码,本站没有,建议百度搜索

 

使用工具:博主已经习惯了Sublime,sublime text 3.0破解以及 安装 HTML-CSS-JS Prettify

 

关于Sublime这款工具,也可以先行百度了解更多一点,毕竟是你吃饭的东西,一定要掌握的好一点。

 

 

一条新闻内容,两条新闻,三条,四天,老板,我大约算了,这个网站大概有800多个页面,老板震惊另外,我艹,这么大的单子,一年也不用接单了。

 

老板他们就给500块钱,员工卒

 

dede仿站第一课:打好基础功dede仿站第一课:打好基础功dede仿站第一课:打好基础功在上面的三张图片中很明显的可以看到只有关于她,关于他,关于它产生的变化(开启自动忽略头部不一样这个问题)。

 

一般的企业网站大概包含的页面只有几个,举例来说:首页,产品列表页,产品详细页,新闻列表页,新闻详细页,单页面(适用于:关于我们、联系我们、企业资质、企业招聘、企业荣誉。。。)。如果一个单页面解决不了你的问题,那就两个。

 

网页分段

看图说话,方便更容易的理解。

 

如果你有浏览过很多个网站,你会发现大部分的网站头部与底部是固定,所以当我们把首页下载下来后,后面的页面头部与底部就需要被你拆分开来,减少工作量。(图中包含了一个侧边菜单,也是固定的?)

 

 

编码问题

本来准备独立些一篇内容,发现TM的没啥好写的,简单的判断。

 

GBK(GBK2312) 与UTF-8,一个中国,一个外国的,我们常用的工具很多是外国的,所以建议直接用UTF-8来搞,虽然多消耗一点,但是有没什么关系呢?

 

 

 

dede仿站第二步:安装一个网站

删除一些不要的目录,简单删除,精细删除以后再说。

 

先看各目录的功能:http://www.lijinlong.cc/dedecms/dedejiaocheng/718.html

 

删除:member(会员)、a(默认存放静态文件的目录,多占了位置,并没有啥用)、special(专题) 这三个目录

 

 

 

准备环境

xampp (Win /MAC)(教程:http://www.tuicool.com/articles/EfUVZb/ dede不用登陆创建数据库)

wamp  (Win) (教程:http://jingyan.baidu.com/article/2d5afd69efe9cf85a3e28e54.html)

apmserv (Win) 以前一直用的这个 (教程:http://www.jb51.net/softjc/55167.html)

MAMP(Win/Mac) 博主现在在用,挺好用 (Mac教程:http://blog.csdn.net/meegomeego/article/details/13289421)

这些程序的安装使用,自行百度,不想在此进行铺开来说,因为安装这里会出现很多问题,说不清,不过好在这些问题,均可以再搜索引擎得到解决方案。

 

 

 

安装程序

访问本地虚拟机设定的网址

进入安装页面(我已经阅读并同意此协议  打钩)

如果你删除了member、a、special这样的文件夹,权限检测会是红的,这个没关心,不影响程序的使用,如果你其他的文件也是X,这个就有问题了。(权限修改:http://jingyan.baidu.com/article/4b52d70271edd4fc5d774b77.html)

参数配置:模块选择如果你还不懂,可以都不选择,数据库表前缀可以修改成你的标识(以后开发的时候要留意,不要以为是默认的),其他的根据需求进行填写,体验数据如果你是第一次搞网站,可以试试,如果不是不用勾选。

安装完成了。

 

 

炫耀吧!

dede默认的后台是:域名/dede

 

如果你没修改过上面的密码,默认为admin,admin


dede手机仿站第三步:替换动态标签

一、三大标签

网站三大标题,标题(title),关键词(kewords),描述(description)尤为重要,有空我自己写份自己的理解。

 

 

  1. <title>{dede:global.cfg_webname/}</title>
  2. <meta name="description" content="{dede:global.cfg_description/}" />
  3. <meta name="keywords" content="{dede:global.cfg_keywords/}" />

 

将上述内容替换掉网页源代码里面,如下图

dede仿站第四课:为了他(她)套上它

各对应后台位置

  • title  后台 - 系统设置 - 系统基本参数 - 网站名称
  • kewords 后台 - 系统设置 - 系统基本参数 - 站点默认关键字(多个关键词用,分隔)
  • description  后台 - 系统设置 - 系统基本参数 - 站点描述

 

二、导航标签

 

 

  1. {dede:channel row="10" type="top"}
  2. {dede:channel row="需要的条数" type="顶级栏目"}
  3. <li><a href='[field:typeurl/]' ><span>[field:typename/]</span></a></li>
  4. <li><a href='栏目的链接' ><span>栏目的名称</span></a></li>
  5. {/dede:channel}

 

卧槽,这个要怎么套上去啊?看不懂了

注:类似 <!-- 他的栏目 --> 这样是网页的标记,方便大家能看懂

 

 

  1. <!-- 获取栏目标签 -->
  2. {dede:channel row="10" type="top"}
  3. <li><a href='[field:typeurl/]' [field:rel/]><span>[field:typename/]</span></a></li>
  4. {/dede:channel}
  5.  
  6. <!-- 他的栏目 -->
  7. <ul class="nav_ul">
  8.     <li>
  9.       <p class="big_nav"><a href="http://www.lijinlong.ccc" title="首页">首页</a></p>
  10.     </li>
  11.     <li class="menuii">
  12.       <p class="big_nav"><a href="http://www.lijinlong.cc/dedecms/" title="dede">dede</a></p>
  13.     </li>
  14.     <li class="menuii">
  15.       <p class="big_nav"><a href="http://www.lijinlong.cc/dedecms/dedefangzhan/" title="dede仿站">dede仿站</a></p>
  16.     </li>
  17.     <li class="menuii">
  18.       <p class="big_nav"><a href="http://www.lijinlong.cc/dedecms/dedemuban/" title="dede模板">dede模板</a></p>
  19.     </li>
  20.     <li class="menuii">
  21.       <p class="big_nav"><a href="http://www.lijinlong.cc/dedecms/dedejiaocheng/" title="dede教程">dede教程</a></p>
  22.     </li>
  23.     <li class="menuii">
  24.       <p class="big_nav"><a href="http://www.lijinlong.cc/dedecms/dedeanli/" title="dede案例">dede案例</a></p>
  25.     </li>
  26.     <li class="menuii">
  27.       <p class="big_nav"><a href="http://www.lijinlong.cc/dedecms/dedebiaoqian/" title="dede标签">dede标签</a></p>
  28.     </li>
  29.   </ul>
  30.  
  31.   <!-- 变身 -->
  32.   <ul class="nav_ul">
  33.     <li>
  34.       <p class="big_nav"><a href="http://www.lijinlong.ccc" title="首页">首页</a></p>
  35.     </li>
  36.     {dede:channel row="10" type="top"}
  37.     <li class="menuii">
  38.       <p class="big_nav"><a href="[field:typeurl/]" title="[field:typename/]">[field:typename/]</a></p>
  39.     </li>
  40.     {/dede:channel}
  41.   </ul>

 

看懂了吗,最简单的原理就是找相同,然后在其中替换掉一条,修改为标签,然后把其余的给删除掉。

 

三、幻灯片标签

其实幻灯片的标签等同于新闻标题,只是一个表现出来的是是展现图片,一个是展示文字。

模仿站的幻灯片文件内容

 

 

  1. <!--banner--开始-->
  2. <p id="banner_tabs" class="flexslider">
  3.   <ul class="slides">
  4.     <li><a  href="http://www.lijinlong.cc"><img width="1920" height="380" alt="" style="background: url('https://www.lijinlong.cc/wp-content/uploads/2017/02/product_center1.jpg') no-repeat center;" src="/lee/images/alpha.png"></a></li>
  5.     <li><a href="http://www.lijinlong.cc"><img width="1920" height="380" alt="" style="background: url('https://www.lijinlong.cc/wp-content/uploads/2017/02/product_center1.jpg') no-repeat center;" src="/lee/images/alpha.png"></a></li>
  6.     <li><a href="http://www.lijinlong.cc/"><img width="1920" height="380" alt="" style="background: url('https://www.lijinlong.cc/wp-content/uploads/2017/02/product_center1.jpg') no-repeat center;" src="/lee/images/alpha.png"></a></li>
  7.     <li><a href="http://www.lijinlong.cc/"><img width="1920" height="380" alt="" style="background: url('https://www.lijinlong.cc/wp-content/uploads/2017/02/product_center1.jpg') no-repeat center;" src="/lee/images/alpha.png"></a></li>
  8.     <li><a href="http://www.lijinlong.cc/"><img width="1920" height="380" alt="" style="background: url('https://www.lijinlong.cc/wp-content/uploads/2017/02/product_center1.jpg') no-repeat center;" src="/lee/images/alpha.png"></a></li>
  9.   </ul>
  10.   <ul class="flex-direction-nav">
  11.     <li><a class="flex-prev" href="javascript:;">Previous</a></li>
  12.     <li><a class="flex-next" href="javascript:;">Next</a></li>
  13.   </ul>
  14.   <ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
  15.     <li class="activebannaer"><a>1</a></li>
  16.     <li><a>2</a></li>
  17.     <li><a>3</a></li>
  18.     <li><a>4</a></li>
  19.     <li><a>5</a></li>
  20.   </ol>
  21. </p>
  22. <!--banner--结束-->

 

知识点:

  • 文章自定义属性的调用(flag="f",其中f为幻灯片,更多请查看系统--系统设置--自定义稳当熟悉)
  • 缩略图的调用(简单测试,先用缩略图作为测试,后期涉及到开发的时候,再来更新)
  • 数字标签调用

完成版代码:

 

 

  1. <!--banner开始-->
  2. <p id="banner_tabs" class="flexslider">
  3.   <ul class="slides">
  4.   <!-- 后台文章勾选自定义属性幻灯片的前五篇内容 -->
  5.   {dede:arclist row="5" flag="f"}
  6.     <li><a  href="[field:arcurl/]"><img width="1920" height="380" alt="" style="background: url('[field:litpic/]') no-repeat center;" src="/lee/images/alpha.png"></a></li>
  7.     {/dede:arclist}
  8.   </ul>
  9.   <!-- 幻灯片上面的左右切换按钮 -->
  10.   <ul class="flex-direction-nav">
  11.     <li><a class="flex-prev" href="javascript:;">Previous</a></li>
  12.     <li><a class="flex-next" href="javascript:;">Next</a></li>
  13.   </ul>
  14.   <ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
  15.   <!-- 循环输出数字,比方有有5个,下面就产生1-5的数字 -->
  16.   {dede:arclist row="5" flag="f"}
  17.     <li class="activebannaer"><a>[field:global.autoindex/]</a></li>
  18. {/dede:arclist}
  19.   </ol>
  20. </p>
  21. <!--banner结束-->

 

 

四、新闻标签

如果你看懂了上面的幻灯片内容,事实上你修改资讯的模板就变得很轻松了,看下面的代码:

 

 

  1. <!-- 新闻中心模块开始 -->
  2.     <p class="NewsBox">
  3.       <ul>
  4.         <li><a href="http://www.lijinlong.cc/dedecms/dedefangzhan/1311.html" title="dede仿站第一课:打好基础功">dede仿站第一课:打好基础功 </a><span>2017-01-16</span></li>
  5.         <li><a href="http://www.lijinlong.cc/dedecms/dedefangzhan/1333.html" title="dede仿站第二课:安装一个网站">dede仿站第二课:安装一个网站 </a><span>2017-01-13</span></li>
  6.         <li><a href="http://www.lijinlong.cc/dedecms/dedefangzhan/1341.html" title="dede仿站第三课:干掉一个网站">dede仿站第三课:干掉一个网站 </a><span>2016-12-24</span></li>
  7.         <li><a href="http://www.lijinlong.cc/dedecms/dedefangzhan/1373.html" title="dede仿站第四课:为了他(她)套上它">dede仿站第四课:为了他(她)套上它 </a><span>2016-12-23</span></li>
  8.       </ul>
  9.     </p>
  10.   </p>
  11. <!-- 新闻中心模块结束 -->

 

套上标签后代码,从上往下看,显示网址的数量为5条,网站目录的ID为5,文章的网站,文章的标题,时间的标签。

知识点:

  • 时间的标签的运用

 

 

  1. <!-- 新闻中心模块开始 -->
  2.     <p class="NewsBox">
  3.       <ul>
  4.       {dede:arclist row="5"  type="5" }
  5.         <li><a href="[field:arcurl/]" title="[field:title /]">[field:title /] </a><span>[field:pubdate function='strftime("%y-%m-%d",@me)'/]</span></li>
  6.         {/dede:arclist}
  7.       </ul>
  8.     </p>
  9.   </p>
  10. <!-- 新闻中心模块结束 -->

 

首页的大部分的标签,通过上述的标签转化而来。

给今天努力的自己鼓个掌,多尝试一下,先不要急着搞其他的,先把这些内容消化了。

DEDE手机仿站第四步:手机内页与单页仿制
 

创建新闻详细页面

详细页常用标签

  • 三大标签

 

 

  1. <title>{dede:field.title/}_{dede:global.cfg_webname/}</title>
  2. <meta name="keywords" content="{dede:field.keywords/}" />
  3. <meta name="description" content="{dede:field.description function='html2text(@me)'/}" />

 

 

  • 文章相关

 

 

  1. 标题:{dede:field.title/}
  2. 内容:{dede:field.body/}
  3. 时间:{dede:field.pubdate function="MyDate('Y-m-d',@me)"/}
  4. 文章来源:{dede:field.source/}
  5. 作者:{dede:field.writer/}
  6. 简介:{dede:field.description}
  7. 浏览次数:{dede:field.click/}
  8. 上一页:{dede:prenext get='pre'/}
  9. 下一页:{dede:prenext get='next'/}
  10. 当前位置:{dede:field name='position'/}

 

注:关于浏览次数看下这篇内容:dede动态获取浏览量和静态获取浏览量标签

剩下的就是你的战场了,去替换掉吧。

dede仿站第七课:万箭齐发

 

 关于单页

在内容的开头说了,在本页面你将会学到使用关于我们、联系我们、企业文化、、、等内容的。

还记得在创建栏目的时候,我们有看到常规管理、高级选项、栏目内容这些导航快

在常规管理里,我们就使用了栏目名称、栏目保存目录,在栏目保存目录下面还有个选择是栏目属性,默认值是最终栏目列表,而我们要做的就是:

  • 把栏目属性修改为--频道封面
  • 复制一份文章模板(article_article.htm)名称修改为index_article.htm
  • 将index_article.htm中的{dede:field.body/}修改为{dede:field.content/}
  • 填充单页面内容,后台--常用操作--网站栏目管理--更改(增加)--栏目内容
  • 尝试一下,是不是搞了一个单页面出来了?

至此大部分的仿站内容以及说完了,而剩下就是把细节的内容调整处理,明日将专门开帖子来说翻页的时候,后期的内容,逐渐步入移动端的仿站,移动端仿站结束后,将来做 dede开发的内容,需求是无止境的。

所以尽可能的将常见的需求,整理出来,方便大家可以不用到处找寻。

本文地址:https://www.caoyaedu.com/dedebk/135.html