時間：10月17日晚8：30' q& p+ d( f. L% f8 U# l
主講：*啊啦哈哩（13607920）
9 a5 U M* @2 [9 A' p主題：如何使用帝國系統仿你想要的風格. f* ~" [# l' O) [2 {5 ?: c! T
$ \& b" g- B0 b, e4 o' { Z
大家好！我是啊啦，第一次講課，講得不好大家多包涵！
1 j8 X! R8 j- C5 P2 D) ^% I* y今天主要是講看到一個好的風格後如何利用現有的cms把他仿下來！
! l; h" W' M5 L$ y" \1 J" E本來想講帝國的，不過看到群裡很多朋友要DEDE的製作方法，因為我對DEDE的接觸不多，第一個接觸的就是帝國的，所以就拿帝國的做例子了，
: m. x- @$ R0 D5 \4 W3 p其實基本所有的CMS模版的製作方法都是一樣的，只是調用的方式不一樣而已，大家用dede,phpcms或是其它的動易，新雲等的模版製作方法都是一樣的。只要會了其中一種，基本上其它的所有系統都會了。至於不同的就是一些細節和調用方面的問題了。那些就不在今天討論的範圍了，以後有時間再給大家詳細講解！7 G7 N* @( `2 c9 G+ H U$ q# d
經常看到有新手朋友要模版，其實做模版很簡單的！希望你們聽了這課後，能對你們有所幫助！
2 Z# j+ T5 Q. J3 C* E好了，現在正式開始！首先我們來找個目標！因為準備的有點蒼促，所以我們找個簡單點的站來做試驗！就拿QQ的讀書頻道吧，佈局比較簡單，而且有部分地方利用到了DIV+CSS的佈局，正好前些天稻草人講了DIV+CSS的好處，今天正好用到，呵呵，不過出於對新手的考慮我沒有選擇全DIV+CSS的站來仿！不過只要會仿table表格的了，再來仿div+css的就相對簡單多了！7 X5 N# D& _, z+ B
好了，扯遠了，我們打開book.qq.com來！大家看到了，他的佈局還是比較簡潔的，我們先來看看他的源碼！有很多朋友可能會直接在網頁上點右鍵然後選查看源代碼！我不推薦這種方法，因為如果你點的地方剛好是一個form的話，那就不是整個網頁的源碼了！所以還是用IE上的查看→源文件來查看！7 Q+ L* O8 `* ?* h4 {5 S8 [
好了！現在彈出一個記事本，就些代碼就是他的首頁的源代碼了！現在要做的就是把這個代碼先保存起來
3 S# G' e- e Y) E0 | N* N8 u5 YOK了，然後我再打開Dreamweaver，當然也可以fontpage不過用Dreamweaver的功能和操作性要強些！
$ d% Z7 i4 C& W8 x6 K! [ D' C% a現在我們用Dreamweaver把剛剛保存那個源碼文件打開！
& a) h7 Q( L: C! I3 w9 s$ d0 ?找到<link href="/css/index910nd.css" rel="stylesheet" type="text/css">這段，這個就是CSS的調用了！到這裡，就要用到迅雷或是QQ的超級旋風了，大家可以直接在/css/index910nd.css前面加上http://book.qq.com，然後複製到迅雷裡新建任務，然後把http://book.qq.com/css/index910nd.css粘貼到新建任務裡，然後下載下來！1 @. U. `: e Y$ O- q2 g
再把這個Css文件複製到你的網站目錄，比如放在img這個目錄下！那麼<link href="/css/index910nd.css" rel="stylesheet" type="text/css">這裡就要換成<link href="/img/index910nd.css" rel="stylesheet" type="text/css">當然也可以直接新建一個他的目錄名css也可以！看個人愛好了！只要記得放到其它目錄下的時候，要把路徑改對就行了！4 _7 n5 e8 N; y3 y' C. M
OK了，這樣，他的css樣式表我們就下載下來了！下面就再到book.qq.com上，再次用到迅雷！在網頁的空白處點右鍵，選用迅雷下載全部鏈接！這樣就會看到這個頁面上所有的鏈接都可以被下載，當然也包括圖片啦！前面提到的css也可以在這裡下載，當然我們不是要他的全部鏈接，這時就要用到篩選功能了，點篩選按鈕，在彈出的對話框裡把不要的都去掉！左邊是鏈接的來源，右邊是文件的擴展名。這裡我只要book.qq.com這個毒命的圖片，所以把其它不要的都去掉！左邊只留下book.qq.com，右邊只留下gif就可以了！點確定。就開始下載了！再把下載的圖片全部弄到你的網站目錄下，這裡就用img目錄，好了，第一步已經基本完成了！: F. l6 Q: b- _2 z
現在開始進行深加工，回到Dreamweaver，打開剛剛保存的源碼，把圖片的路徑全部更正，比如book.qq.com上的圖片目錄是images/img910/,我們就把他全改成自己的目錄，我用的是img就全改成/img/124.gif的形式，路徑一定要做好！再保存下，在DW裡預覽下，快捷鍵是F12，看看跟book.qq.com是不是一模一樣了，如果還有部分圖片不顯示。或是某個表格的背景不一樣，那就是用了背景圖片，在源代碼裡找到，並把它下載下來放到網站的圖片目錄，這個就要自己細心了，就這樣一直檢查到跟模仿頁面完全一致為止，這裡建議新手在操作這步的時候先把代碼備份一下，要不到時候改錯了，就前功盡棄了。
/ S! k% k' x" k3 ^) l+ _然後把代碼裡面調用的代碼全去掉！像script語句，iframe語句全給他去掉！去完後，再保存下，在DW裡預覽下，看看頁面的整體佈局有沒有變動，如有變動，就恢復到初始，然後再檢查是哪裡出錯，這裡就不細說了！跟前面一樣，直到跟模仿頁面完全一致為止！好了，做完這步你就已經完成一半了！
5 _7 y4 G7 a* ^" D* J現在要做的就是到帝國系統裡把調用的標籤引入進來就可以了！: f, g% `7 a$ w( c$ o6 q/ L
因為大家用的系統都不一樣，為了照顧到大部分的朋友！我這裡就不細說帝國的是如何調用了！至於詳細的調用可以到官方去查找，那邊都有很詳細的說明了！4 M: |7 A) j& W3 J1 d
今天我就拿調用文章列表來做試驗！首先在模版上找到你要調用文章列表的地方，比如調用文章排行，那就把相應調用的地方先清理出來！比如QQ的這個
9 ~! s8 `( y. s: B, i$ n發圖
' Q% S1 t) q1 i0 O8 r4 f# S4 Y
b4 o% g) S6 M3 d+ _" s像這個，我們就先找到這個表格所在的位置！在dw裡查找關鍵字喜歡你，OK，找到後會看到很多代碼，到這裡很多新手朋友都不知道做了，其實很簡單！因為在html代碼都是一一對應的，比如<td>就一定有個對應的</td>來結束！所以知道這點了就好辦了！我們先來看看他的代碼8 f6 t, J! J7 u' C6 `/ A; a/ W# g
6 c1 [% F1 s9 \) Z% I
<td width="142" align="left" valign="bottom" background="http://mat1.qq.com/book/images/img910/bookc26.gif" class="fontbold">周排行</td>% T' m( P6 |& W* s
<td width="7" background="http://mat1.qq.com/book/images/img910/bookc27.gif"></td>
5 b+ Y2 w. B3 B2 |: e# ^: G { </tr>
* q. r+ I, H7 L& O! P6 G) A' N </table>
3 v9 }, X: d9 ^% _, V: u8 B( U<table width="174" border="0" cellspacing="0" cellpadding="0">
* P7 k# o" n- e4 Y3 T <tr>
1 |6 u1 K, I' B8 m. B( {: s <td height="197" align="left" class="paddind6 fontl22"><table width="174" border="0" cellspacing="0" cellpadding="0"><tr><td align="left" class="paddind6 fontl22">
5 }# F) X0 X: C H. G; J·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/274/index.htm">喜歡你</a><br> 1 e3 T" t1 B: H" s
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/195/index.htm">逃</a><br>
/ h# x' c. j3 d·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/3952/index.htm">舊愛新歡</a><br> 2 P5 [- K+ r6 r& D: y
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/233/index.htm">頑童時代</a><br> , W! h/ n8 b' i0 Q- Z
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/3812/index.htm">你相信婚姻能拯救嗎</a><br>
+ E5 b7 r( q7 w5 b# Z$ _·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/1679/index.htm">職場紅樓</a><br>
, y0 q* D& J2 E·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/241/index.htm">白色魔力</a><br>
g" f( k4 u5 j. y1 V3 C$ Q·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/1685/index.htm">玩轉三十六計</a><br>
4 }) v' J; n$ x" }</td></tr></table>
& R/ T) c( ~; `: q* k! |1 i</td>3 j) g# j" _" y# r
</tr>( R8 I; ]/ g$ h( }" `! J" M
</table>9 G% N5 ~- ~$ S1 H
<table width="174" border="0" cellspacing="0" cellpadding="0">8 g) N k. a k& V0 D6 ]3 E* d
<tr>
+ N8 Q1 M; M" w P <td width="25" height="21" background="http://mat1.qq.com/book/images/img910/bookc25.gif"></td>
# N* f; M7 v7 F9 U: \3 z& | <td width="142" align="left" valign="bottom" background="http://mat1.qq.com/book/images/img910/bookc26.gif" class="fontbold">月排行</td>0 j( A* v; e! B& \& h8 N8 g, K4 b% O5 Y
這裡就要找到一個目標代碼區，我們選擇周排行到月排行之間的這段代碼，再來看看如何清掉無用代碼而換上我們自己的調用代碼！
$ b2 K Y. a3 o5 C- R: f: Y* Y而在上面的代碼中我們可以看到他的文章列表並沒有使用html裡的表格，所以就好辦了！
) Z; B8 @3 {/ [6 @; A% w直接把9 \8 `# ^8 `5 O: z
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/274/index.htm">喜歡你</a><br>
. V- l7 D1 J& a" \" Y% g: {·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/195/index.htm">逃</a><br> 7 G3 z/ R/ L/ M* u5 x
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/3952/index.htm">舊愛新歡</a><br> " l2 }. T" s2 J" M! c8 K5 l
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/233/index.htm">頑童時代</a><br>
" ]; O4 a4 X6 r·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/3812/index.htm">你相信婚姻能拯救嗎</a><br> A$ j; C/ G+ ^
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/1679/index.htm">職場紅樓</a><br>
- F+ ?. ^5 J8 b4 W7 j* r·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/241/index.htm">白色魔力</a><br>
/ m0 n% N; Z# M% K·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/1685/index.htm">玩轉三十六計</a><br>) r. q& `6 @$ D2 F
這段刪掉，然後換上自己的調用代碼！就OK了！
" s9 U4 c( f3 l* x這裡就用帝國來舉例！用帝國的話，建議大家多用萬能標籤，可以實現很多功能！
2 u3 z+ M: W( B9 t$ H P! a好了，他那是周排行！因為我對帝國也不太瞭解，就用熱門排行來代替吧！
' ^2 ]# n% Z& }7 u' j9 X這樣，修改後的代碼就是0 y3 ~# n2 e3 s4 p( ]
<td width="142" align="left" valign="bottom" background="http://mat1.qq.com/book/images/img910/bookc26.gif" class="fontbold">周排行</td>" w/ L) K* v& J0 n
<td width="7" background="http://mat1.qq.com/book/images/img910/bookc27.gif"></td>
" {2 V7 {1 o+ x4 C </tr>8 T7 L; o* u. ^. \
</table>
1 V6 J( |8 ?! j3 @% | q8 n! U8 r<table width="174" border="0" cellspacing="0" cellpadding="0">! Q! h- T% N {+ n) ^
<tr>
/ _ \% r- |% r1 r. \+ l <td height="197" align="left" class="paddind6 fontl22"><table width="174" border="0" cellspacing="0" cellpadding="0"><tr><td align="left" class="paddind6 fontl22"> [ecmsinfo]32,10,24,0,1,20,0[/ecmsinfo]8 a0 r, @ ^5 ^' b( p
</td></tr></table>
! j: X( h8 `" w" q1 Y</td>1 K# U8 l( g4 o3 q+ B+ @
</tr>9 i9 y! W% H& g* b5 a1 Q
</table>
( e3 `* Y( |3 [' X: s <table width="174" border="0" cellspacing="0" cellpadding="0">. ~% X5 C' I, ?& B6 j* Y" Q: Y" i
<tr>: U. I8 w! q. Y" P" S' L. T
<td width="25" height="21" background="http://mat1.qq.com/book/images/img910/bookc25.gif"></td>
" C7 ]6 F- v) z# M- f. H% { <td width="142" align="left" valign="bottom" background="http://mat1.qq.com/book/images/img910/bookc26.gif" class="fontbold">月排行</td>
, p# u' u& ^1 p+ x6 ~9 L0 b. d, X其中，[ecmsinfo]32,10,24,0,1,20,0[/ecmsinfo]這段代碼是意思是，調用欄目ID為32下的10篇文章，文章標題為24個字符（英文），不顯示欄目名，顯示類型為熱門文章，調用的是ID為20的模版，顯示所有文章！+ W; G5 m( \' k4 K& ]- r
下面就來看看如果文章調用方面出現了<td>之類的代碼，如何把不要的代碼清除！因為很多新手朋友不知道怎麼判斷哪些能刪哪些不能刪而導致進行代碼刪減後網頁佈局混亂！+ I6 E4 I" k2 ]+ l0 w
這裡就拿這個來做為例子吧，請大家看圖9 S2 s1 g. Q9 l7 U* f+ I( S
發圖2
9 c; B( r7 J! a. I' B$ `好了，我們再來分析一下他的源代碼，取調用的第一個文章標題前面的<table代碼開始！* t- `/ U4 X' B% J- Q" J
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
' t+ [& `3 ?( Q, k<tr><td width="171" align="left" class="fontl24">+ u1 n* T6 a9 s0 A- Q/ [
·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11405/index.shtml">開往侏羅紀的浪漫</a>
- |( p# Q- p' W* x( Z</td></tr>
: B! Z2 Q! w) s1 }% l<tr><td width="171" align="left" class="fontl24">
& u! s/ w1 b! w+ v- x ·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11363/index.shtml">快樂男聲：飛越城堡</a>. g3 v6 G* h0 k/ u0 o1 Q# ]( R# `
</td></tr>5 g/ m1 B- Q `. }
<tr><td width="171" align="left" class="fontl24">
. C# J6 r' J+ x4 h# a ·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11381/index.shtml">女人的私人故事：出軌</a>, `/ y( l+ \6 [7 h. V( ], k6 Z
</td></tr>
# z% _8 n( R2 x. \2 n8 ~4 c<tr><td width="171" align="left" class="fontl24">; {5 w6 H9 f: S0 P3 y
·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11360/index.shtml">陰謀毀滅的眷戀：絕戀</a>
" i" V- S4 Y% z0 r1 G3 o. e! o# b</td></tr>" ?$ q6 d6 T! K2 x: y
<tr><td width="171" align="left" class="fontl24">. H* ]$ Q: R8 H* w
·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11332/index.shtml">花與愛麗絲：忽而今夏</a>9 g: F2 s$ I# F2 w$ X L' g
</td></tr>
% d6 N& q; [4 r: P- x<tr><td width="171" align="left" class="fontl24">
3 f( q$ [& l3 x3 B) [ ·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11335/index.shtml">一直孤單：OL單身日記</a>4 Z8 |. r, f1 r6 T2 g e4 b9 `$ h& m
</td></tr>
" @6 g+ G9 H b( Q3 H' d! k* c! Y9 [<tr><td width="171" align="left" class="fontl24">
0 }7 v2 B; R5 x8 m- r0 ]) d ·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11327/index.shtml">空事：性與愛的追逐</a>
0 c0 ?" o: g6 Z- c0 N4 z7 N6 z* o</td></tr>1 ]! Y% J, V2 N% [* R
<tr><td width="171" align="left" class="fontl24">' L1 u5 V5 n; J( h9 i' N! L
·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11295/index.shtml">饒雪漫青春系列：甜酸</a>! d7 {0 f) i \3 U9 U
</td></tr>
& c# v) ?$ \* `3 o$ m5 P<tr><td width="171" align="left" class="fontl24">
- X B: Z* z) m" S1 j ·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11308/index.shtml">安妮寶貝：素年錦時</a>2 e0 v2 z# g# L* r) `' ?
</td></tr>
7 O4 }9 q1 J- [% c% ~8 P</table>( c8 r2 [4 c3 ?: z* b6 ]
從這段代碼裡，我們可以發現每個文章標題前面都有<tr><td width="171" align="left" class="fontl24">這段，而在標題結尾處也有</td></tr>這段。這樣前面提到的<tr>和</tr>，<td>和</td>相對應的關係就存在！那麼就可以斷定關鍵代碼為
" U: z* k- \+ ?$ O<tr><td width="171" align="left" class="fontl24">調用標籤</td></tr>' _5 n5 T1 k& \! K" Q
OK了，基本上做模版就大概這樣！其它的都需要大家去多多實踐了！這裡感謝站友群bbs.foradmin.com，感覺KING提供這麼好的機會給我學習交流！歡迎大家多多光顧！
7 }! L* [/ F/ g2 o
" s# k0 d& I! `2 r! q好了，今天的課就到這裡，希望大家都能做出屬於自己的風格。呵呵！
6 C* d7 c$ U" s( C. K! ~7 o0 `+ t1 `; m! v
原貼來自：站友網：http://www.foradmin.com/html/46/t-1146.html |
|
發表於 2007-11-15 23:29:23
提升卡
沉默卡
变色卡