新手入门，做一个基于CSS+DIV的DEDECMS模板之一(页 1) - 站友QQ群原创文章 - 站友论坛 - 站长讲课，原创文章，建站经验，源码共享

sj21521 发表于 2007-11-15 20:28

新手入门，做一个基于CSS+DIV的DEDECMS模板之一

装好了DEDECMS，看了几天了不是找不到门道，如果你和我一样是新手，也是在这种状态，就看看我的方法吧，让我们一起起步！！！！
BS：最好有点HTML的基础吧
再BS:你是老鸟就不用看了。
再再BS:比我写的多的就不用问我了，我也不会啊，在学，等学会了我告诉你，OK?
-----------
注：
1.具体的标签说明你可以在后台－>模板管理->模板标记参考里找到。
2.有的时候要看数据表字段，你可以去后台->内容维护->批量管理->数据库内容替换里找。
3.模板的命名规则如下（可以在这里找[url=http://www.dedecms.com/archives/templethelp/help/index.htm]http://www.dedecms.com/archives/templethelp/help/index.htm[/url]）
（１）index_识别ID.htm：　表示板块（栏目封面）模板；
（２）list_识别ID.htm：　表示栏目列表模板；
（３）article_识别ID.htm：　表示内容查看页（文档模板，包括专题查看页）；
（４）search.htm：搜索结果列表模板；
（５）index.htm：主页模板；
先看效果，和这里讲的多加了一点点的东西。
[img]http://hiphotos.baidu.com/dayuan/pic/item/168e63090773fdc33ac7636f.jpg[/img]
-----------
基础知识：
要修改某个栏目的模板，就要先知道这个栏目的“识别ID”，可以先点后台左侧的“频道管理”，然后在右边的“识别ID”里找到。
我们以修改文章频道的列表模板为例，就要编辑list_article.html，为什么不以index.htm这个大门面为练习对象呢？嘿嘿，那个用的东西太多，我还不会，菜鸟嘛可以原谅。呵呵。
好，用DW打开这个文件，另存为list_article_bak.html（因为这样等我折磨完它，还可重改回来～～）。
把所有的东西都删除了。现在是一个空的文件，在里面加入基本的HTML结构。[code]
<html>
<body>
</body>
</html>[/code]现在更新一下你的栏目，什么也没有啊，对了，空的。
现在我们给他加模板的标记，我做一下注释，你可以一个一个加，看看出来的是什么。
然后在body和body之间加下面的DEDE标记[code] <div id="nav2">{dede:field name='position' col='1'/}</div>
<ul>
  {dede:list pagesize='10' titlelen='20'}
  <li> [field:typelink/]-[field:textlink/] [field:stime /]</li>
  {/dede:list}
</ul>{dede:pagelist listsize='3'/}[/code]再更新一下看？有内容了。
－－－－－－－
{dede:field name='position'/}
｛dede:field name='xxxxx'/}是一个常用的标签，它会把相应的XXXX的内容加到网页里，比如第一行就会把position(就是每一页上面的栏目一>栏目二那些东西）
----------
<div></div>成对出现，是属于HTML里的东东，这里我们叫他层。
<ul><li></li></ul>也是成对出现，也是HTML里的东西，这里的作用是让每条记录显示为列表形式。
-----
{dede:list pagesize='10' titlelen='20'}这个是DEDE的标记了，作用是显示２０条记录。具体显示什么要看它之后，和{dede:list/}之间的内容。（见下一段）
－－－－－－－－－
[field:typelink/]｜[field:textlink/] [field:stime /]这一行是用来设置每一行（列表的内容和形式）,用的是[field:xxxx/]，xxxx是一个变量名，你可以查手册，看哪些能用，我这里就用了typelink:栏目的名称(带链接的),textlink:文章的标题(带链接的,不带的话用title)，stime:发布时间
――――――――――――――
{dede:pagelist listsize='3'/}这里是做下一页、上一页那种链接。
这里是源文件[code] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<html>
<div id="nav2">{dede:field name='position' col='1'/}</div>
<ul>
  {dede:list pagesize='10' titlelen='20'}
  <li> [field:typelink/]-[field:textlink/] [field:stime /]</li>
  {/dede:list}
</ul>{dede:pagelist listsize='3'/}
</body></html>[/code]不好看吧，加上CSS。
把下面的加到<body>的后面,[code] <head>
<style type="text/css">

</style>
</head>[/code]再更新一下看看？

一个最简单的好看的，而且是基于DIV＋CSS的模板就做好了。
想想其实不复杂，主要是要去熟悉那个DEDE自己定义的标记，如果你有HTML和CSS的基础，应该很快上手的，主要是要去熟悉那些标记，找要到哪里改，其实改不了几个网页，模板嘛。工作量不大的。呵呵，这些话给大伙说说，也对自己说，要去看文档啊。记得啊。转载请注明出处：站友论坛 [url=http://bbs.foradmin.com][color=#000000]http://bbs.foradmin.com[/color][/url]

[[i] 本帖最后由蓝牙于 2007-11-15 20:32 编辑 [/i]]

sj21521 发表于 2007-11-15 20:29

这个是和上面图片一样的源码：
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">

</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<div id="banel"><img style="margin:10px 0 0 10px;" src="..{dede:field name='templeturl'/}/img/biao.png" title="toptie网站标志"></div>
<div id="nav2">{dede:field name='position' col='1'/}</div>
<ul>
  {dede:list pagesize='10' titlelen='20'}
  <li> [field:typelink/]-[field:textlink/] [field:stime /]</li>
  {/dede:list}
</ul><div class="pagemove">{dede:pagelist listsize='3'/}</div>
</body>
</html>

[/code]

cnnit 发表于 2007-11-15 20:59

顶一个,说的很仔细!:)

佳佳发表于 2007-11-15 21:58

顶一个，技术性的东西，永远支持。

梦想网络 发表于 2007-11-16 10:27

技术才能促进发展啊

raigen 发表于 2008-5-6 21:38

挺有意思，呵呵。支持一下，只不过我一点都看不懂

页: [1]

站友论坛's Archiver

新手入门，做一个基于CSS+DIV的DEDECMS模板之一