最新消息:新席地网:网页制作,360度全景摄影,微信营销推广,详情见:新席地网xxidi.com,电话:13913571631

dedecms模板制作图示教程

dedecms admin 2107浏览 0评论

lingcenwangye

下载到本机的首页文件

步骤二
1.在template目录下面建立新的模板目录tp_1(这个目录放新的模板)
#如图3

建立模板目录

2.在根目录下建立新的目录tpimg (这个目录放模板的图片,css,js)
#如图4

建立放模板图片的目录

步骤三
1.复制下载到本地的网页到template/tp_1目录下,并且改名为index.htm
#如图5
复制模板首页到模板目录

改名为首页index.htm

2.复制下载到本地的网页文件夹(Q卡汽车网 www_Qcar_cn.files)所有文件到tpimg目录下
#如图6

复制图片到tpimg目录

步骤八
1.用dreamweaver 打开首页模板把(Q卡汽车网 www_Qcar_cn.files)全部替换成tpimg(为了使模板生成首页能够正常显示图片)
#如图7

替换首页模板图片路径

步骤七
1.进入dedecms后台,在 HTML更新–>更新主页HTML–>主页更新向导–>选择主页模板
把default/index.htm改为tp_1/index.htm–>单击更新主页HTML按钮–>^_^ok!!!
#如图8

修改选择的模板路径

2.打开首页看看首页是否已经变成了汽车网站了
如图9

生成的主页

描述:初期首页模板
附件: 模板.rar (186 K)

 

 

 

汽车网模板制作图文教程 (二)

步骤一:
进入dedecms后台
网站栏目管理–>增加顶级栏目–>输入如图所示
#图1

1建立新的栏目

步骤二:
用dreamweaver打开模板文件index.htm 找到如图所示的代码地方
#图2

2选中模板要修改的版块

步骤三:
找到具体要修改的代码,把不需要的代码注释掉或者删除.
#图3

3具体要修改代码的地方

步骤四:
下面的代码是修改过的代码

CODE:
{dede:arclist typeid=1 titlelen=’20’ row=”6″}   
·<A
href=”[field:arcurl /]”>[field:title /]</A><BR>
{/dede:arclist}
[Copy to clipboard]

#图4

4增加_修改代码

步骤五:
1.到dedecms后台在新建立的栏目(中原车市[ID:1])发布至少6篇文章,(首页模板显示标题的时候就把版面撑起来,比较美观)
#图5

5发布至少六个文章

2.这是已经发布的六篇文章
#图6

6已经发布6个文章

步骤6:进入dedecms后台
HTML更新–>更新文档HTML,更新栏目HTML,更新主页HTML
#图7

7更新文档_栏目_主页html

步骤7:浏览首页就会发现新发布的主题,已经显示出来
#图8

8生成的首页显示发布的标题

描述:已经修改首页标题显示模板
附件: 模板2.rar (186 K)

 

 

 

汽车网模板制作图文教程 (三)
步骤一:
1.打开
http://www.qcar.cn/auto/22/
另存本地
#图1

1另存网页列表模板

步骤二:
1.将下载本地的网页文件夹(-中原车市-.files)该目录里的文件拷贝到tpimg目录里(作为列表模板需要的图片,js)
#图2

2下载本地的目录文件夹里的所有文件复制到tpimg

步骤三:
1.将下载到本地的网页拷贝到./templets/tp_1/ 这个目录下面(做为列表模板),并且改名字为list_article.htm
#图3

3复制下载的页面到tp_1目录下

步骤四:
1.用dreamweaver 打开./templates/tp_1/list_article.htm
替换(-中原车市-.files) 为../../tpimg (为了列表模板能够正常显示图片)
#图4

4替换模板的图片js路径

步骤五:
1.用dreamweaver 打开./templates/tp_1/list_article.htm
根据图示找到这些代码,注释掉多余的内容代码
#图5
5标记需要修改代码的地方

步骤六:
1.用dreamweaver 打开./templates/tp_1/list_article.htm
根据图示,修改找到的代码,
只要添加dedecms固定模板标记 {dede:list type=’full’/}就可以了
#图6
6添加显示标题的模板代码

步骤7:
1.进入dedecms后台
HTML更新–>更新栏目HTML–>点开始生成HTML

#图7
7生成列表页面

步骤八:
1.看以下列表页面效果

#图8

8看到的列表页面

描述:增加列表模板
附件: 模板3.rar

 

 

汽车网模板制作图文教程 (四)
步骤一:
1.打开
http://www.qcar.cn/auto/22/5340.html看详细网页页面
#图1

1打开详细页面模板

步骤二:
1.把该页面保存到本机
#图2

2网页保存到本地

步骤三:
1.把保存到本机的网页文件夹里面的全部文件拷贝到 ./tpimg目录下面
#图3

3拷贝保存到本地文件夹到tpimg目录

步骤四:
1.把保存到本机的网页拷贝到 ./templets/tp_1/目录下面并且改名字为article_article.htm

#图4

4保存到本机的网页拷贝到tp_1目录里

步骤五:
1.用dreamweaver 打开./templets/tp_1/article_article.htm文件
把(经三路家世界2006“夏季购车风暴”火暴来袭 Q卡汽车网.files)全部替换成 ../../../../tpimg
(这么多../就是为了让详细页面浏览到图片)
#图5

5替换图片路径

步骤六:
1.进入dedecms后台
网站栏目管理–>更改中原车市栏目–>确认列表模板是 tp_1/list_{cid}.htm ,文章模板是 tp_1/article_{cid}.htm

#图6

6更改栏目模板路径

步骤7:
1.用dreamweaver 打开./templets/tp_1/article_article.htm文件
如图所示,把不需要的代码注释掉或去掉,准备增加模板代码

#图7

7找到不需要的代码注释掉

步骤8:
1.用dreamweaver 打开./templets/tp_1/article_article.htm文件
如图所示,增加三出代码如下:

CODE:
       <TH vAlign=bottom height=50>
         {dede:field name=”title” /}
       </TH>
[Copy to clipboard]

      

CODE:
<TR>
       <TD align=middle height=20>
       文章来源:{dede:field name=”source” /}
       文章作者:{dede:field name=”writer” /}
       发布时间:{dede:field name=”pubdate” function=”GetDateMk(‘@me’)”/}
       </TD>
</TR>       
[Copy to clipboard]

 

CODE:
       <TR>
         <TD>
           {dede:field name=”body”/}
         </TD>
       </TR>
[Copy to clipboard]

#图8

8添加文章标题内容模板代码

步骤9:
1.进入后台
HTML更新 –> 更新文档HTML –> 更新栏目HTML –> 更新主页HTML
生成新的html页面

#图9

9更新HTML

步骤10:
1.浏览新生成的html详细页面
#图10

10看看详细内容页面效果

描述:添加了详细页面模板
附件: 模板4.rar

 

 

汽车网模板制作图文教程(五) 首页模板整体分析

打开 http://www.qcar.cn/

步骤一:

1.先是导航条里面显示后台建立的栏目(导航条显示栏目名称和连接到该栏目页面)
2.右一是图片滚动新闻 (一共三个图片互相交替出现,显示后台发布的的图片,点连接进入该图片页面)
3.中间是最新的主题了
4.右边是baidu广告
5.接下来是论坛调用
6.靠边的是中原车市栏目里的最新主题
#图1

1首页版面布局分析1

步骤二:

1.汽车新闻栏目
2.热点新闻
3.汽车子栏目的连接
4.汽车新闻的最新标题(一共显示13个,包括标题 发布时间)
5.右边的是图片新闻(图片,和图片连接)
6.新闻搜索,这个dedecms提供这个功能

#图2

2首页版面布局分析2

步骤三:

1.新车快报
2.新车快报的子栏目(名称,连接)
3.国内新车,国外新车栏目(显示,图片,图片详细内容),该栏目标题
4.概念酷车图片栏目(图片,主题,连接,栏目连接)
5.右边的是新车预告栏目主题

#图3

3首页版面布局分析3

步骤四:

1.试驾评测
2.试驾评测子栏目(显示栏目名称,栏目连接)
3.汽车评测栏目的标题显示(标题,详细页面连接)
4.图片,标题,内容一体的栏目
5.右边的评估系统

6.汽车导购
7.汽车导购子栏目(显示栏目名称,栏目连接)
8.VIP经销商,都是广告的(只显示个图标,和文字解说)
9.中间是汽车导购最新主题显示(主题,连接,时间)
10.右边还搞个会员推荐,显示推荐公司名和用户名字
#图4

4首页版面布局分析

 



分享到: 更多

转载请注明:梦寻天涯的博客 » dedecms模板制作图示教程

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址