用Dreamweaver 打開dede文件的index.htm模板頁面,首先講一下怎么看模板的css。
<link href="{dede:global.cfg_templeturl/}/style/dedecms.css" rel="stylesheet" media="screen" type="text/css" />
在index.htm里第八行里就是這一句,通過這句話大家可以看到一個css路徑,也就是在 empletsstyle這個文件下的所有文件都是dede默認模板的css文件,而index.htm的css就是dedecms。
打開這個css文件后大家會看到
@import url("layout.css");
@import url("page.css");
這兩句話
這兩句的意思就是dedecms.css這個css文件還引用了
layout.css和page.css這2個css
通過查看dedecms.css文件大家可以發現這個css主要控制的是所有模板文件的頭部和尾部以及所有css的全局設計
大家找到/*---------- base ---------*/這句下面一直到/*---------- frame ---------*/這里基本上都是全局css
下面的透過看單詞就明白是header和foot的css
也就是模板的頭尾部css
關于page和layout這兩個css是關于列表部分css、翻頁css、以及一些通用的css,大家可以通過查看css了解一下
下面大家打開head.htm模板文件
dede的前臺模板在 empletsdefault文件夾下
下面根據默認模板簡單講解一下css的對應關系和部分標簽的基礎應用
首先大家打開head.htm后會看到<div class="header">這句話
那么其中的header就是一個定義為header的css
那我們可以復制header,然后再dedecms.css
里用Ctrl+f來查找有關header的所有css定義
其它css的查找同樣,如果你在某個css文件中找不到相應的css那么就在其他幾個css文件中查找,然后修改
至于具體怎么修改css就不再本次講解之內了,有關css的學習在網上有很多教程
在這里只是簡單說明一下css的查找和應用
下面講解一些標簽的應用
我會通過實例來和大家分享
【呵呵,css的知識范圍太廣了,不是一兩句話就可以說清楚的,如果大家在學習的過程有什么不明白的地方可以在另一個群(83086030)里討論。】
打開index.htm文件,刪除body里的所有內容。
首先說一下arclist即文檔列表標簽,這個標簽在模板當中應用是最廣也是最基本的標簽,熟悉這個標簽后只要學會變通,基本可以學會dede的所有標簽應用。
arclist這個標簽是全局標簽,也就是說這個標簽基本上在任何模板都可以使用,當然不包括一些特殊模板。
如search.htm這個模板貌似就不能用
arclist標簽的基本結構:
{dede:arclist}
<a href='[field:arcurl/]'>[field:title/]</a>
{/dede:arclist}
首先dede大部分的標簽html語言一樣,都是需要閉合的。
{dede:arclist}
{/dede:arclist}
也就是必須要有這2個部分組成
然后再中間插入,如:<a href='[field:arcurl/]'>[field:title/]</a>這樣的標題標簽
(dede的標簽除了channelartlist標簽是可以嵌套的之外,其它標簽都不可以嵌套的)
大家在后臺添加好文章后,在剛打開的index.htm模板里輸入{dede:arclist}
<a href='[field:arcurl/]'>[field:title/]</a>
{/dede:arclist}
并保存
然后打開首頁就會看到前臺頁面中已經輸出了幾個標題(默認是10個標題)