1.  Comfy Magazine Free WordPress Theme| Demo | Download |

2. Malawak Free WordPress Theme | Demo | Download |

3. Irresistible WordPress Theme | Demo | Download |

4. NewsTheme Free WordPress Theme | Demo | Download |

5. AutosSlug Free WordPress Theme | Demo | Download |

6. FREEmium Free WordPress Theme | Demo | Download |

7. Agregado Lifestream Free WordPress Theme | Demo | Download |

8. Snapshot Free WordPress Theme | Demo | Download |

9. Versatility Lite Free WordPress Theme | Demo | Download |

10. CHARA Free WordPress Theme | Demo | Download |

11. Blues Free WordPress Theme | Demo | Download |

12. Deskspace Free WordPress Theme | Demo | Download |

13. Notepad Chaos Free WordPress Theme | Demo | Download |

14. Mahusay Free WordPress Theme | Demo | Download |

15. Hamasaki Free WordPress Theme | Demo | Download |

16. Androida Free WordPress Theme | Demo | Download |

17. Arthemia Free WordPress Theme | Demo | Download |

18. WP Newsmag Free WordPress Theme | Demo | Download |

19. Brightness Free WordPress Theme | Demo | Download |

20. DesignMagz Free WordPress Theme | Demo | Download |

21. Alivapress Free WordPress Theme | Demo | Donwload |

22. Magazeen Free WordPress Theme | Demo | Download |

23. Blogging Pro Theme | Demo | Download |

24. Dilectio Free WordPress Theme | Demo | Donwload |

25. The Original Premium News | Download |

26. Journalized Theme Version 2

27. WP DashboardLike

28. Google Chrome

29. Typebased

30. Absynthe

下面是rubiqube收集並推薦的20個做得比較成功且設計十分優秀的CMS型WordPress網站，其中我自己最喜歡的就是「Cubicle Ninjas」的這個版型的設計，實在太令我驚豔了，此外「Frisk Design」這家網頁設計公司也非常厲害，因為在這二十款的CMS版型設計中，就收錄該公司設計的許多作品，話不多說，趕緊來欣賞吧^^

1. Cubicle Ninjas

2. Ford Auto Shows

3. Frisk Design

4. Gaijin Film and Sound

5. Huck Magazine

6. Quasar Software

7. Aid – Sri Lanka

8. Tim Wilson

9. TP Hire

10. Executive Warfare

11. Feedback Audio

12. fraai

13. Future Snowboarding Magazine

14. Ginger Restaurant

15. Inbound Pass

16. International Screening Solutions

17. kineda

18. Little White Lies

19. Miami Dating Coach

20. ten24media

█ 版本說明：

Version 1.0

　　嘿嘿！這個教學已經欠大家很久很久囉！很多人看到我網站上放置影片的視迅，都感覺很好玩，也很想自己弄一段試試看，紛紛問我相關製作的問題，我都說我會寫一段教學來告訴大家，不過要等我有空的時候才行，一拖就過了好久，今天索性牙根咬緊，來開始撰寫這段教學囉！

　　文章用色說明：紅字：語法的指令 綠字：指令的參數 紫字：語法註解

　　在開始進入本篇教學的時候，你如果還搞不清這篇要教的是什麼，那請你參考一下：

1. 2005-05-20 生活忙茫盲 http://www.wretch.cc/blog/tjliu&article_id=1844758

2. 2005/03/07 集集班遊 http://www.wretch.cc/blog/tjliu&article_id=1715254

　　看完之後，有比較清楚了嗎？如果你也想要做出這樣美美的視迅框，就趕緊繼續看下去囉！

★注意：這裡將條列出你所必須準備的軟體，請一一準備好喔！

1. Macromedia Flash MX 2004 Professional
   　
2. Macromedia Video Update 1.2 for Flash MX Professional 2004
   Download the Video Update for Flash MX Professional 2004:
   • Download the Windows Video Update (2.28 MB)
   • Download the Macintosh Video Update (1.63 MB)
3. Apple QuickTime 6.0以上之版本

   http://www.apple.com/quicktime/download/win.html

PS 1第二、三項軟體均可免費取得。第一項軟體必須購買喔！

PS 2 取得軟體之後，請一一安裝到你的電腦，這邊就不在說明安裝過程囉！（原則上都是「下一步」一直給他下去）

█ 教學說明：
　

STEP 1 ： 取得QuickTime的影片檔案 (*.mov)

　　事前的準備都好了嗎？那非常的恭喜你喔！那接下來你必須取得一段影片，而此影片的格式必須是QuickTime的影片檔案格式(副檔名為mov , *.mov)。

　　通常要取得影片的方式，最好當然是用DV或數位向機錄影的功能錄製，我的數位相機錄影的影片存檔格式剛好就是QuickTime的格式(*.mov)，所以不用在經過影片轉檔的步驟。如果你的影片不是(*.mov)，那你可以經由下列幾種影片剪輯軟體，來進行轉檔的工作。

• Adobe After Effects 5.5 and 6.0
• Apple Final Cut Express
• Apple Final Cut Pro (3.x and 4.x)
• Apple QuickTime Player 6.3
• Avid Media Composer
• Avid Xpress DV and Avid Xpress Pro

　　如果你真的無法取得QuickTime的影片(*.mov)，那下面有個方式可以方便你取得影片。

1. 通常你安裝完QuickTime，在預設的安裝目錄下（ex:C:\Program Files\QuickTime），你可以找到「Sample.mov」的這段影片，稍後你可以用它來進行下面的步驟。

STEP 2 ： 進行 QuickTime 檔案(*.mov)轉換為 Flash Viedo (*.flv)

★注意：你必須先安裝好「Macromedia Video Update 1.2 for Flash MX Professional 2004」，詳見「事前準備」之部分！

接下來請點選以下網址，進行觀看STEP2 ： http://home.educities.edu.tw/andyliu/flv/step2.htm

STEP 3 ： 進入 Macromedia Flash MX 2004 Professional 開始編輯檔案

★注意：你必須先安裝好「Macromedia Flash MX Professional 2004」 ，如果你的FLASH版本不是「Professional」，便無法支援接下來要做的動作喔！詳見「事前準備」之部分！

接下來請點選以下網址，進行觀看STEP3 ：http://home.educities.edu.tw/andyliu/flv/step3.htm

STEP 4 ： 開啟SWF檔案，測試影片無誤

★注意：再次強調：你的SWF檔案（FLASH匯出的檔案格式，必須要和你的*.flv檔案在同一個資料夾底下，這樣才不會發生問題）

接下來請點選以下網址，進行觀看STEP4 ：http://home.educities.edu.tw/andyliu/flv/step4.htm

STEP 5： 上傳 *.swf 和 *.flv 兩個檔案到網頁空間當中

　　在這個步驟當中，你必須先擁有「網頁空間」，你可以到「亞卓市」申請，或是你本身就是「HINET」的撥街、寬頻用戶，HINET也會提供免費的網頁空間，其他的像SEEDNet、SoNet等網路服務公司，應該都有類似的服務。

　　至於像是Yahoo!奇摩、PChome這些免費網頁空間，因為都會有檔案格式的限制，所以無法使用*.FLV的檔案，所以不建議使用。

　　你擁有「網頁空間」之後，接著將 *.swf 和 *.flv 兩個檔案上傳到你的網頁空間。

★注意：必須兩個檔案都上傳！因為 *.swf的FLASH檔案只是影片的「面版」，實際影片的內容還是在 *.flv這個檔案，必須都同時上傳才不用有問題。

STEP 6： 在網誌（BLOG）文章中嵌入FLASH檔案

<"FLASH檔案網址" width="320" height="320" >

★注意：width、height 這是設定FLASH檔案的寬度、高度，你必須依照FLASH的大小做設定，這邊的教學之FLASH檔案是320*320，因此做此設定，請參照的部分

　　恭喜拉！目前到此為止應該都非常順利吧！如果你也成功做出來有放在網誌中，記得「留言」給我，和我分享喔！

█ 常見問題收集：

　　資料收集中…

|| 歡迎轉載 但請勿盜用|| http://andyliu.24cc.com
Copyright © 2005 Andyliu Design . All rights reserved .

標準語法大整理

▍CSS 標準語法大整理 [ Version:1.1 Power by Andy Liu . ]

昨天將CSS「邊框」的語法整理好之後（已經放在▍留言區域大動工（含表單設計） [ Version 2.0 ]這篇教學裡面 ），今天想一想，乾脆來將CSS的標準語法作一次的整理好囉！也方便大家以後查詢指令方便。（當然我也很需要^^）

整理的CSS語法包括下列幾種：

• 背景控制
• 邊框控制
• 文字控制
• 文字連結控制
• 滑鼠樣式控制
• 方框控制（邊界、欄位間距）

PS 如果你不清楚語法究竟要怎樣加入或設定？請見文章最下面的「實際操作」。

█ 語法說明 — 背景控制：

/* 語法開始 */

body{ /* body 是可以依照需要作改變的，下面的內容才是重要的！ */

background-image:url(圖片位址); /* 圖片連結位置 */
background-attachment:fixed; /* 圖片位置是否要固定 */
background-repeat:no-repeat; /* 圖片是否要重複顯示 */
background-position:right; /* 圖片對齊格式 */
width:400px; /* 文字區塊的寬度 */

}

1. /* XXX */(註解)：註解幫助自己看懂，這部分程式不會執行！XXX可以自行填寫！

2. textarea(文字區塊)：這個部分稱作CSS樣式定義類別，一般來說可以自己定義名稱，但是由於這裡我們是要定義HTML語法的標籤，所以是不能更改的！必須使用textarea。當然如果要定義<h1>，就改為h1！(★注意： 不用"<>")

3. background-image(背景影像)：看你的圖片位址在何處就怎麼寫！只要填在url()的()裡面即可！

4. background-attachment（背景附著）：在這裡你可以決定背景圖片的位置。
   屬性有：scroll：隨著捲軸捲動 inherit：繼承之前的設定 fixed：固定不動

5. background-repeat(背景重複)：看看背景圖片是不是要重複顯示。
   屬性有：repeat：重複顯示 no-repeat：不重複顯示 repeat-x：只在X軸重複顯示 repeat-y：只在Y軸重複顯示

6. background-position(背景位置)：決定背景要置中、靠左、靠右的設定。
   屬性有：left：靠左對齊 center：置中對齊 right：靠右對齊 top：向上對齊 bottom：向下對齊 inherit：傳統繼承(預設)

7. width(寬)：文字區塊的寬度 (可以不設定，系統會自動設定大小)

8. height(高)：文字區塊的高度 (可以不設定，系統會自動設定大小)

PS1 其餘在「textarea」裡面還能夠加上許多設定。例如邊線、文字顏色等等！因為部屬於這部分的討論範圍！暫時就不列出來！

PS2 如果你不使用背景影像的話，只想用純顏色當背景時，可以將background-image(背景影像)用background-color(背景顏色)取代！但是儘量避免兩個語法同時使用！

範例：background-color:#FF6600; 綠色的部分就是填上自己喜歡的顏色！

█ 語法說明 — 邊框控制：

/* 分成上下左右(4部分) 寬度樣式顏色(3部分) 總計12(4×3)行 */

body { /* body 是可以依照需要作改變的，下面的內容才是重要的！ */

border-XXX-width: 1px; /* 邊框寬度 */
border-XXX-style: dotted; /* 邊框樣式 */
border-XXX-color: #0066FF; /* 邊框顏色 */

}

1. XXX：請各位先注意XXX的部分，這裡XXX代表著是邊框的上下左右。
   屬性有：top：上方　bottom：下方　left：左邊　right：右邊
2. Width(寬)：邊框寬度。屬性有：N px：像素　N pt：點　N in：英吋　N %：百分比 (N為大小，必須為正整數)
3. Style（樣式）：邊框樣式。屬性有：dotted：點狀線　dashed：虛線　solid：實線　double：雙實線 groove：溝道狀 ridge：山脊狀inset：凹陷狀 outset凸起狀
4. Color(顏色)：邊框顏色。屬性為：#XXXXXX (XXXXXX為顏色代碼)

/* 語法開始：寫法二 — 精簡寫法，功用一樣 */

/* 只分成上下左右(4部分) 寬度樣式顏色並列在同一行程式 */

body {

border-XXX: width  style color; /* 邊框 寬度 樣式 顏色 */
}

★注意：相關的語法大致和第一種都像同，只是寫法不一樣！假設我要設定上方邊框為寬度一像素、虛線、紅色，就可以寫成：

border-top: 1px dashed #FF0000; /* 邊框 寬度 樣式 顏色 */

/* 語法開始：寫法三 — 最為精簡、但有限制 */

/* 使用時機：當上下左右、寬度、樣式、顏色都要設定一樣的時候 */

body {

border: width  style color; /* 邊框 寬度 樣式 顏色 */
}

★注意：相關的語法大致和第二種都像同，只是這部分 border-XXX 改為 border 。因為此時我們已經不用在設定上下左右了！

█ 語法說明 — 文字控制：

body { /* body 是可以依照需要作改變的，下面的內容才是重要的！ */

color: #006699; /* 文字顏色 */
font-family:"Times New Roman"; /* 文字字型 */
font-size: 14pt; /* 文字大小 */
font-style: normal; /* 文字樣式 */
line-height: 1.5px; /* 文字行高 */
font-weight: bold; /* 文字粗細 */
font-variant: normal; /* 文字變形 */
text-transform: capitalize; /* 文字大小寫 */
text-decoration: underline overline line-through blink; /* 文字裝飾 */

vertical-align: super ; /*文字上、下標字*/

text-align: center; /* 文字對齊方式（水平） */
vertical-align: top; /* 文字對齊方式（垂直） */

letter-spacing: 120%; /* 單字間距 */
word-spacing: 120%; /* 字母間距 */
text-indent: 10px; /* 文字縮排 */
}

1. color(顏色)：設定字體顏色。屬性為：color:#XXXXXX (XXXXXX 為顏色代碼)
2. font-family(文字字型)：設定文字字型。屬性為：font-family:"XXX" （XXX為字體顏色）

例如要用新細明體就是：font-family:"新細明體"

★注意：你所設定的字型必須對方的電腦也有這樣的字型，當別人在瀏覽網頁時，才能正常顯示喔！

1. font-size(文字大小)：設定文字大小。屬性有：N px：像素   N pt：點 (N必須為正整數)
2. font-style(文字樣式)：設定文字樣式。屬性有：normal：正常 italic：斜體 oblique：偏斜體
3. line-height(文字行高)：設定文字行高。屬性有：N %：百分比 (100為正常值 150 就是1.5倍 依此類推) N px：像素   N pt：點 (N必須為正整數)
4. font-weight(文字粗細)：設定文字粗細。屬性有：normal：正常　bold：粗體　bolder：特粗　細體：lighter 另外你也可以直接設定為：font-weight: N; (N為正整數 起始值為100)
5. font-variant(文字變形)：設定文字變形。屬性有：normal：正常　small-caps：小型大寫字.
6. text-transform(文字大小寫)：設定文字大小寫。屬性有：capitalize：字首大寫　uppercase：全部大寫　lowercase：全部小寫
7. text-decoration(文字裝飾)：設定文字裝飾。屬性有：underline：底線　overline：上端線　line-through：刪除線　blink：文字閃爍 none：無線(亦可刪除連結底線)
8. vertical-align(上下標字型)：設定上下標字型。屬性有：super：上標字　sub：下標字
9. text-align(文字對齊)：決定 文字水平對齊方式。屬性有：left：靠左對齊 center：置中對齊 right：靠右對齊
10. vertical-align(垂直對齊)：決定 垂直對齊方式。屬性有：top：向上對齊 bottom：向下對齊 inherit：傳統繼承(預設)
11. letter-spacing(單字間距 )：設定單字間距。屬性有：N %：百分比 (100為正常值 150 就是1.5倍 依此類推) N px：像素   N pt：點 (N必須為正整數)
12. word-spacing(字母間距)：設定字母間距。屬性有：N %：百分比 (100為正常值 150 就是1.5倍 依此類推) N px：像素   N pt：點 (N必須為正整數)
13. text-indent(文字縮排)：設定文字 縮排距離。屬性有：N px：像素   N pt：點 (N必須為正整數)

★注意：關於第9點中的「閃爍」效果和第10點的「上下標字型」，會依據瀏覽器、網頁語法編寫不同，而決定是否有支援！也就是不一定設定了就會顯示此類效果！

█ 語法說明 — 文字連結控制：

/* 語法開始 */

a              {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
a:link      {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
a:visited {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
a:active  {font-weight:normal; font-size:10pt; color:#0033cc; text-decoration:none;}
a:hover   {font-weight:normal; font-size:10pt; color:#0033cc; text-decoration:none;}

/* 語法結束 */

★注意：這四行語法分別是獨立的語法，不用在在任何的 { … }當中，注意看，這些語法本身就有 { … }。

1. a：設定所有連結的樣式！

2. a:link：設定連結（正常情況之下）的樣式。

3. a:visited：設定拜訪過的連結樣式。（也就是點選過的連結）

4. a:active：設定正在作連結動作時候的樣式。（也就是當你滑鼠按下連結的那時刻）

5. a:hover：設定當滑鼠移到連結上面時候的連結樣式！

PS3 在大刮號中間 { … }，就是我們填寫語法控制的部分，你可以依據你自己想要的樣式，參考前面的「背景、邊框、文字」控制語法來加以設定！

★重要觀念說明：

Question：以上說的連結樣式設定是針對全部的網誌頁面來說，如果我現在只要針對「行事曆」的部分作連結設定，又該如何設定呢？請繼續看下去喔！

Ans：以無名網誌為例：在無名網誌的CSS設定當中，可以找到「.calendar」這個部分，這就是「行事曆」樣式設定的部分。那我們是將語法寫在「.calendar」當中嗎？答案是否定的！很多人以為要修改這部分的連結樣式，只要將上面五行文字寫到「.calendar」當中就可以囉，這是錯誤的觀念。因為在CSS語法當中，在一個相對應的 { … } 當中，不可以在包含有其他的 { … }，而在「.calendar」語法當中，它自己本身就已經有一組{ … }，所以不能將上面五行的連結語法加入到「.calendar」當中，因為這五行語法本身都包含著 { … }。

★注意：在CSS語法當中，在一個相對應的 { … } 當中，不可以在包含有其他的 { … }。

我們採取解決的方式，在程式語法當中稱之為「繼承」。在原先的屬性下再加入一個新的屬性。這段文字看不懂，就直接跳到下面吧！（這個對初學者有點難懂！）

/* 語法開始 */

.calendar a              {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
.calendar a:link      {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
.calendar a:visited {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
.calendar a:active  {font-weight:normal; font-size:10pt; color:#0033cc; text-decoration:none;}
.calendar a:hover   {font-weight:normal; font-size:10pt; color:#0033cc; text-decoration:none;}

/* 語法結束 */

我們必須另外定義五行新的樣式，在連結前面加上我們要設定的「.calendar」部分，這樣就可以特定為這個部分「.calendar」設定連結樣式，而不會和網誌的其他部分有所衝突！

同理，如果要修改其他部分，就將「.calendar」改為你要修正部分的名稱即可。例如：要修改「標題Banner」就將「.calendar」改成「#banner」。至於前面是 "." 、 "#" 還是沒有 ""，就必須根據你CSS樣式表裡面的設定決定囉！不要小看這一個符號喔！設定錯，可是沒有用的喔！

█ 語法說明 — 滑鼠樣式控制：

/* 語法開始 */

body { /* body 是可以依照需要作改變的，下面的內容才是重要的！ */

cursor: text;
}

1. cursor(游標)：設定滑鼠游標的樣式。

   屬性有：

   1. default：預設值

   2. hand：連結的手形

   3. crosshair：十字（無箭頭）

   4. move：十字（有箭頭）

   5. text：打字的 I 圖案

   6. wait：漏斗形狀

   7. help：預設值符號加上一個問號

   8. n-resize：箭頭朝上

   9. s-resize：箭頭朝下

   10. w-resize：箭頭朝左

   11. e-resize：箭頭朝右

   12. nw-resize：箭頭朝左上

   13. se-resize：箭頭朝右下

   14. ne-resize：箭頭朝右上

   15. sw-resize：箭頭朝左下

   圖例說明：

   

另外有些人或許覺得使用這些預設的符號還是不夠特別，想要讓滑鼠符號更為特別，那還可以用下面的語法！

/* 語法開始 */

body { /* body 是可以依照需要作改變的，下面的內容才是重要的！ */

cursor: url("圖檔名.cur");
}

★注意：圖檔名後面的 ".cur" 為檔案的副檔名，你可以使用兩種格式：一、 ".cur" 靜態游標；二、 ".cur" 動態游標。(所謂動態游標就是，滑鼠游標本身是會動的！)

PS4 如果你需要自行繪製滑鼠游標的圖案，你可以到（凱哥）這邊，他有詳細的說明！

http://www.wretch.cc/blog/ppkeigo&article_id=519816

█ 語法說明 — 方框控制（邊界、欄位間距）：

█ 版本說明：

Version 2.0

　　有鑑於部分人士喜歡求新求變，在此推出2.0版的教學文件！這次新的版本主要是提供「回應區的表單」和「每月文章彙集」這兩部分的語法修改補充教學！(請見文章最底下「補充說明」的部分)

• 新增「回應區的表單」語法說明
• 新增「每月文章彙集」語法說明
• ★ 新增修改「邊框大小、樣式、顏色」CSS語法說明

Version 1.0

　　很多人都喜歡在「留言區」加上背景圖片，但是卻不知道語法如何修改，故推出此教學文件！

█ 事前準備：

　　文章用色說明：紅字：語法的指令綠字：指令的參數 紫字：語法註解

　　留言區域？這是哪阿？在BLOG首頁你不會發現到他的蹤影，但是在每一篇文章最底下都會有個「回應」的部分，這就是今天的主題囉！

　　那這個部分到底有什麼好變化的呢？又能玩出什麼花樣呢？且先看看下面圖一的部分，這就是我在我的BLOG動的手腳！(★注意：I Need You有看到嗎？以後看文章要多多回應喔！^^)

　　想要和我一樣在留言區域裡面加上背景嗎？想讓留言區域更生動、更吸引人嗎？那就趕緊看下去囉！

[圖一]

█ 觀念說明：

★注意：觀念說明此部分，如果你是CSS、HTML語法初學者可以先略過，直接跳到「語法說明」，這部分主要是進階，針對一些想要真的學習語法、瞭解語法的朋友，而不是只是Step by Step，將語法複製、貼上，能夠真的瞭解語法的原理，靈活運用！

　　在正式進入文章之前，先必須有一個基本常識，CSS能夠讓我們自訂HTML標籤的樣式！觀念來囉！什麼是HTML標籤呢？所謂HTML標籤就是我們在寫HTML語法長常會看到的"<>"這個部分！為何要說到：CSS能夠讓我們自訂HTML標籤的樣式呢？舉個例子來說：我們在編寫HTML語法時，假如只打上

這個標籤，是代表要將文字大小變大！

範例：從

變成

　　這是我們單純使用

語法時是這樣，但是CSS提供了一個很方便我們編寫網頁管理的功能，讓我們能夠定義標籤的樣式，也就是你如果覺得

的語法只是單純讓字體變大，不夠好用，你可以自己定義

的功能，例如不僅僅變大，還能改變字體的顏色。但是你可能會問說，HTML語法不是就有的功能，可以直接調整顏色嗎？幹嘛多此一舉呢？沒錯！這麼方法的確可以，但是如果你的網頁有很多地方要用到

呢？那你是不是每次都要設定一次阿，這時候如果在CSS就定義好

的樣式，不就方便多了嗎？

　　之所以要講到這個觀念是因為和接下來我們要作的動作有關，要在「留言區域」動手腳，當然要先知道它是什麼咚咚！在HTML語法裡面，稱呼「留言區域」為「文字區塊」，在語法中是使用：「textarea」！接下來我們就往下繼續看下去吧！

---

█ 語法說明：

---

　　在之前我們已經知道「文字區塊」的HTML語法是：「textarea」，因此我們就開始從這裡著手吧！

/* 語法開始 */

　　 textarea{

　　　background-image:url(圖片位址);     /* 圖片連結位置 */
　　　background-attachment:fixed;            /* 圖片位置是否要固定 */
　　　background-repeat:no-repeat;             /* 圖片是否要重複顯示 */
　　　background-position:right;                 /* 圖片對齊格式 */
　　　width:400px;                                      /* 文字區塊的寬度 */

　　　}

1. /* XXX */(註解)：註解幫助自己看懂，這部分程式不會執行！XXX可以自行填寫！

2. textarea(文字區塊)：這個部分稱作CSS樣式定義類別，一般來說可以自己定義名稱，但是由於這裡我們是要定義HTML語法的標籤，所以是不能更改的！必須使用textarea。當然如果要定義
   

   ，就改為h1！(★注意：不用"<>")

3. background-image(背景影像)：看你的圖片位址在何處就怎麼寫！只要填在url()的()裡面即可！

4. background-attachment（背景附著）：在這裡你可以決定背景圖片的位置。
   屬性有：scroll：隨著捲軸捲動 inherit：繼承之前的設定 fixed：固定不動

5. background-repeat(背景重複)：看看背景圖片是不是要重複顯示。
   屬性有：repeat：重複顯示 no-repeat：不重複顯示 repeat-x：只在X軸重複顯示 repeat-y：只在Y軸重複顯示

6. background-position(背景位置)：決定背景要置中、靠左、靠右的設定。
   屬性有：left：靠左對齊 center：置中對齊 right：靠右對齊 top：向上對齊 bottom：向下對齊 inherit：傳統繼承(預設)

7. width(寬)：文字區塊的寬度 (可以不設定，系統會自動設定大小)

8. height(高)：文字區塊的高度 (可以不設定，系統會自動設定大小)

　　PS1 　其餘在「textarea」裡面還能夠加上許多設定。例如邊線、文字顏色等等！因為部屬於這部分的討論範圍！暫時就不列出來！

　　PS2　如果你不使用背景影像的話，只想用純顏色當背景時，可以將background-image(背景影像)用background-color(背景顏色)取代！但是盡量避免兩個語法同時使用！

　　　　　範例：background-color:#FF6600; 綠色的部分就是填上自己喜歡的顏色！

---

█ 實際操作：

---

1. 首先你必須登入你的BLOG！（雖然是廢話，但是有的人還是會忘記！）
2. 找到「樣式設定」(如圖二)，點選進入！

[圖二]

3. 找到「CSS樣式表」！然後在CSS樣式表的區塊當中，加入你的語法即可！

[圖三]

　　★注意：任意加在CSS樣式表當中都可以，但是請勿加入到其他的大括弧{ }當中，請獨立加到CSS樣式表的空白處！如果要避免錯誤，建議直接將語法加到你的CSS樣式表的最後面，就不會有問題了！

---

█ 補充說明：

---

Q1：請問除了修改留言區域之外，在NAME、E-Mail、URL這幾個長條填寫欄的部分也可以修改嗎？

Ans：當然！答案是肯定的！你只要將「textarea」改為「input」！

Q2：請問要修改「每月文章彙集」的部分，該如何修改呢？

Ans：同樣的！你只要將「textarea」改為「select」！

Q3：除了在 { … }中修改背景之外，邊線、邊框該如何修改呢？

Ans：以下以「每月文章彙集」(select)為例：[有好幾種語法的撰寫方式，請多多練習！]

/* 語法開始：寫法一 — 分門別類，無微不至 */

/* 分成上下左右(4部分) 寬度樣式顏色(3部分) 總計12(4×3)行 */

select {

border-XXX-width: 1px;                  /* 邊框寬度 */
border-XXX-style: dotted;              /* 邊框樣式 */
border-XXX-color: #0066FF;           /* 邊框顏色 */

}

1. XXX：請各位先注意XXX的部分，這裡XXX代表著是邊框的上下左右。
   屬性有：top：上方　bottom：下方　left：左邊　right：右邊
2. Width(寬)：邊框寬度。屬性有：N px：像素　Npt：點　N in：英吋　N%：百分比 (N為大小，必須為正整數)
3. Style（樣式）：邊框樣式。屬性有：dotted：點狀線　dashed：虛線　solid：實線　double：雙實線　groove：溝道狀　ridge：山脊狀inset：凹陷狀　outset凸起狀
4. Color(顏色)：邊框顏色。屬性為：#XXXXXX (XXXXXX為顏色代碼)

/* 語法開始：寫法二 — 精簡寫法，功用一樣 */

/* 只分成上下左右(4部分) 寬度樣式顏色並列在同一行程式 */

select {

border-XXX: width  style color;    /* 邊框 寬度 樣式 顏色 */
}

★注意：相關的語法大致和第一種都像同，只是寫法不一樣！假設我要設定上方邊框為寬度一像素、虛線、紅色，就可以寫成：

         border-top: 1px dashed #FF0000;  /* 邊框 寬度 樣式 顏色 */

/* 語法開始：寫法三 — 最為精簡、但有限制 */

/* 使用時機：當上下左右、寬度、樣式、顏色都要設定一樣的時候 */

select {

border: width  style color;    /* 邊框 寬度 樣式 顏色 */
}

★注意：相關的語法大致和第二種都像同，只是這部分border-XXX 改為 border 。因為此時我們已經不用在設定上下左右了！

　　至目前為止已經將CSS語法的「背景」、「邊框」的設定語法講解完畢，現在就只等大家好好的去熟練了喔！

　　PS3　有關於本篇教學文件所提到的「背景修改語法」、「邊框修改語法」，都是標準CSS語法，所以可以在任何地方使用！例如修改文章內容的背景、邊框等等，都可以用這樣語法喔！

---

|| 歡迎轉載 但請勿盜用|| http://andyliu.24cc.com
Copyright (C) 2004 Andyliu Design . All rights reserved .

]]> http://andyliudesign.idv.tw/29/feed 81 http://andyliudesign.idv.tw/28 http://andyliudesign.idv.tw/28#comments Wed, 15 Sep 2004 02:25:00 +0000 Andy Liu http://andyliudesign.idv.tw/?p=28 ▍在BLOG中放置影片 [ Version 1.0 Power by Andy Liu . ]

---

█ 事前準備：

---

　　文章用色說明：紅字：語法的指令 綠字：指令的參數 紫字：語法註解

　　更新速度永遠跟不上求新求變的各位！哈哈！前幾天剛剛有人問怎麼在網誌中放置背景，我也才剛寫好教學文件沒有多久，突然這幾天又有好多位網友在詢問，如果要放置影片呢？又要怎樣處理呢？答案其實已經在「▍在BLOG中放置音樂」這篇教學文件裡面了！不相信？恩！沒關係，我們繼續看下去吧！

　　PS1 　如果你是第一次看此篇文章，沒有看到「▍在BLOG中放置音樂」這篇教學文件的朋友，請麻煩你花點時間先看完「▍在BLOG中放置音樂」這篇教學文件，相信會更容易上手的！（部分重複語法不在此在說明！抱歉！）

---

█ 語法說明：

---

　　首先，先回答這個問題：「你看過『▍在BLOG中放置音樂」這篇教學文件』了嗎？對於裡面所談到的語法都熟悉了嗎？」。如果你的答案是「肯定」的，那恭喜接下來的步驟就快完成了！

　　還記得下面這個語法吧！

" width="100" height="50" loop="true" autostart="true">

　　沒錯這就是放置背景音樂的語法，現在你只要將「背景的音樂網址」改成「影片的放置網址」就可以了！如下列的語法：

網址" width="100" height="50" loop="true" autostart="true">

　　真的就只有這樣嗎？這麼簡單？沒錯，就是這麼簡單！那一定有人會想，那前面寫這麼多廢話幹嘛，就直接告訴我們這一行語法就好了阿！沒錯，當然是可以這樣，不過接下來要介紹的幾個語法才是更重要的！如果你想要讓你的「影片播放器」更為貼切好用，下面有幾個語法是你該好好揣摩的喔！

　　首先先來介紹大家熟悉的兩個語法，寬度與高度！在播放音樂的部分或許沒有這麼重要，但是在影片當中，便顯的很重要，怎麼說呢？因為影片有影片本身的大小，在設定播放器時，必須配合著影片大小，否則設定過小，會導致影片無法觀看；設定太大又會造成影片模糊，雖然看似一個小動作，但是也有不少的學問在裡面喔！

1. Width(寬)：播放面版的寬度，可以自行設定！
2. Height（高）：播放面版的高度，可以自行設定！

　　PS2　一般來說較常見的影片大小為320*240。

3. Hidden(隱藏)：決定播放器是否隱藏！屬性有：false：是顯示撥放器 true：是隱藏撥放器

　　PS3　除非影片有設定自動播放，不然不應該隱藏播放器！這樣會導致使用者無法觀看喔！

4. Loop(迴圈)：決定影片是否重複播放！之前有提到 Ture 和 False 的用法，這次提一下另一種用法！
   屬性有：loop=1：表示撥放一次即停止 loop=-1：表示無限撥放 loop=N：表示播放N次 (N必須為正整數)
5. Volume(聲音)：設定影片音量大小。屬性：volume="0-100″ 0為靜音 100為最大聲
6. StartTime(開始時間)：設定影片從幾分幾秒開始撥放。屬性：StartTime="分:秒" 分/秒為數字
7. Controls(控制)：控制影片播放器的大小。
   屬性有：
   1. Controls="console " 一般大小
   2. Controls="smallconsole"　 小面板
   3. Controls="playbutton"　 只顯示撥放按鈕
   4. Controls="pausecutton" 只顯示暫停按鈕
   5. Controls="stopbutton" 只顯示停止按鈕
   6. Controls="volumelever" 只顯示音量調整鈕

　　★注意：以上一到七的各種屬性，必須接在 src="影片的放置網址" 和 > 之間！

---

█ 實際操作：

---

　　之前我們已經在「▍在BLOG中放置音樂」這篇教學文件介紹過如何將HTML語法加在網誌當中！同樣的你可以將影片的語法加在「網誌名稱」、「網誌敘述」、「連結管理」這幾個部分！

　　另外這次補充說明一下：有的人問到如何把語法加到「文章」當中。事實上，你只要將HTML語法直接貼到文章中的任意一個部分就可以了！但是有些人會出現一個小問題，就是貼上語法之後，在文章中無法顯示「播放器」，顯示的是HTML語法，會出現這樣的問題，主要是因為「文字編碼」出了問題。

　　下面有兩個部分：

1. 枯燥無味的電腦常識：如果你想瞭解這問題的癥結就看吧！
2. 簡單的解決方法：如果只想解決這樣的問題，看這邊就好！

▍枯燥無味的電腦常識：

　　這部分有點複雜，我也就不詳細說明，只大概說一下，語法可以執行是因為電腦認定語法這些文字的編碼就是語法，但是會出現文字，而不是播放器，是因為電腦將你這些文字當作是「純文字」，而不是語法，所以便顯示出「文字」，這是因為我們常常在網頁上、記事本中剪貼文字所造成的！

▍簡單的解決方法：

　　在「▍魔法快速編輯漂亮文章」教學文件裡面（實際操作的第三個步驟到第六個步驟），有說明如何貼上「程式碼」（HTML語法）的方法，你只要將你的語法照這個步驟，貼到文章裡面，就不會有問題了！

---

|| 歡迎轉載 但請勿盜用|| http://andyliu.24cc.com
Copyright (C) 2004 Andyliu Design . All rights reserved .

]]> http://andyliudesign.idv.tw/28/feed 58 http://andyliudesign.idv.tw/26 http://andyliudesign.idv.tw/26#comments Tue, 14 Sep 2004 09:15:00 +0000 Andy Liu http://andyliudesign.idv.tw/?p=26 ▍魔法快速編輯漂亮文章 [ Version 1.5 Power by Andy Liu . ]

---

█ 事前準備：

---

　　文章用色說明：紅字：語法的指令綠字：指令的參數 紫字：語法註解

　　其實這只不過是個簡單的小技巧，稱不上什麼「語法」教學，但是我是覺得蠻好用的！「魔法快速編輯文章」聽起來好像很炫，其實也沒有這麼誇張拉，還魔法咧！你們可以看到「教學分享」裡面的文章，比起其他文章要來的「有看頭」，許多重點的部分都有加入顏色，使得瀏覽起來更為方便、舒服！一般來說要達到這樣的效果，只要在發表新文章時，在文章裡面加入語法控制就可以了，或者在發表文章時也有一個「進階編輯器」，都能夠幫助我們更為視覺化的編輯文章，但是說真的，網誌裡面發表文章的文字區塊還是有許多限制，文章一長，便顯的有點礙手礙腳！現在就往下看吧，一個好用的小技巧！

---

█ 觀念說明：

---

★注意：你必須要有 Microsoft Office FrontPage 或者是 Macromedia Dreamweaver 這兩套軟體其中一套！

　　這個小技巧，主要是利用這些網頁編輯軟體WYSIWYG(所見及所得)的特性，所謂的所見及所得就是說，在編輯網頁的時候，你想要什麼樣式，例如文字要紅色、要粗體、大小、位置怎樣，都可以直接調整，你不用自己寫語法，程式便能夠幫你編輯好，而且你在程式畫面看到的編輯畫面，就是網頁上傳之後的畫面，簡單來說，網誌（BLOG）經常都要動用的「語法手術」，常常你編寫了一段程式，就要讓他重新整理一次，才能看到結果，如果不滿意，又要回到「修改」中，去修改語法，真的是很麻煩！現在你能很方便的使用 Microsoft Office FrontPage 或者是 Macromedia Dreamweaver 這兩套軟體其中一套，來編寫網頁，編寫好了之後，再直接將「原始碼」貼到網誌裡面，就樣一來不是就方便多囉！

　　或許有的人覺得這樣好像多此一舉，反而更顯的麻煩，但是這樣的步驟其實不難！往下看下去就知道囉！

　　在此之前，我先來列出幾個使用這種方式編輯文章的優點：

1. 所見及所得，不會發生要重複作修正的問題！
2. 檔案可以直接存成網頁的檔案，儲存方便，檔案管理也方便許多！
3. 不需要學習或記得太多的語法！
4. 編輯文章更為快速！
5. (保留！有想到再補充！^^)

　

---

█ 實際操作：

---

1. 首先先開啟你的 Microsoft Office FrontPage 或者是 Macromedia Dreamweaver 軟體

[圖一]

2. 請先隨便開始一個空白的頁面（檔案），先隨便打上幾個文字(如圖二)！例如：我愛魔法快速編輯漂亮文章

★注意：在此僅作為示範，實際內容當然依照你文章的內容編寫！至於 Microsoft Office FrontPage 或是 Macromedia Dreamweaver 的軟體操作，並不是本文的重點，在此並不贅述，您可以參考相關書籍，以作進一步學習！

[圖二]

3. 接著請注意[圖三] (Microsoft Office FrontPage畫面)和[圖四] (Macromedia Dreamweaver畫面)。分別找到「程式碼」的部分，將其點一下，作切換的動作！

　　★注意：正常情況下，一進入軟體應該是處於「設計」的狀態！

[圖三]

　

[圖四]

　　PS1 　畫面會因為軟體的版本不同，而有所差異！但是選項應該都是相同！

3. 接著看到[圖五] 的部分，你會看到畫面已經轉化成「程式碼」，全部都是一堆HTML語法！仔細看一下，紅色圈選的部分，就是我們在「設計」畫面編輯的文字，其他程式碼都已經由軟體本身所產生出來！

[圖五]

4. 現在作重要的部分來了！請在程式語法中找到…..的部分！將…..之間的「程式碼」（HTML語法）全部複製起來。[圖六]

　　★注意：不包含…..！

[圖六]

5. 接下來回到BLOG的部分，在首頁找到「發表新文章」！[圖七]

[圖七]

6. 找到發表文章中「自動加
   」的部分[圖八]，將勾選取消。（就是不要打勾喔！）

[圖八]

　

6. 找到「文章內容」的部分[圖九]，將剛剛複製的「程式碼（HTML語法）」貼上，然後按確定！就大功告成囉！[圖十]

[圖九]

[圖十]

---

█ 語法說明：

---

★注意：此部分屬於補充知識，和本文並不直接的關係！可自行決定閱讀與否！

　　現在看到[圖十一]的部分，看一下裡面的HTML基本的語法。

[圖十一]

　　在一個完整的HTML網頁程式裡面，一定會包含下面三大部分：

1. …：為宣告HTML檔案的開始，加上斜線 "/" 的為HTML檔案的結束。所以網頁的HTML語法一定都要包含在這一個部分裡面。
2. …：head(頭)：在
   標籤裡面，就像我們人身體頭的部分一樣，記憶著許多的資訊。這部分裡面的語法，大都是記著網頁標題、網頁使用的程式語言、網頁使用的語系等等資訊。通常我們在瀏覽網頁的時候，這部分幾乎(少部分標籤會)是不會呈現在我們的眼前。雖然是這樣，但是這一個部分卻是缺之不可，正如你有看過那個人沒有頭嗎？
3. …：body(身體)：正如人的身體一般，佔了人的絕大部分，這也是網頁主要的部分，所有我們看到的網頁內容，包括文字、圖片等等這些語法，都是寫在這個部分裡面！

　　瞭解這些之後，在回顧一下剛剛「實際操作」的第四個步驟。為何我們只需要複製網頁…..之間的「程式碼」（HTML語法）呢？有猜到了嗎？因為當我們閱覽BLOG的時候，網頁都是透過伺服器產生出來，一開始就會幫我們寫好的…和…的部分，通常這部分也不會允許我們自行修改。而…的內容就是我們在發表新文章時，在「文章內容」裡面填寫的部分，所以囉！我們透過Microsoft Office FrontPage 或 Macromedia Dreamweaver 編寫網頁時，軟體本身又會產生一次…和…的部分，為了避免重複，當然我們必須將這個部分去除囉！

　　★注意：…、…和…在網頁當中都只能夠是唯一！不能有重複的語法出現！

---

|| 歡迎轉載 但請勿盜用|| http://andyliu.24cc.com
Copyright (C) 2004 Andyliu Design . All rights reserved .

]]> http://andyliudesign.idv.tw/26/feed 35 http://andyliudesign.idv.tw/24 http://andyliudesign.idv.tw/24#comments Mon, 13 Sep 2004 02:15:00 +0000 Andy Liu http://andyliudesign.idv.tw/?p=24 ▍在BLOG中放置音樂 [ Version 1.1 Power by Andy Liu . ]

 

---

█ 事前準備：

 

---

　　文章用色說明：紅字：語法的指令 綠字：指令的參數 紫字：語法註解

　　首先要學如何在BLOG中放置背景音樂，就必須先瞭解HTML語法！玩BLOG的初學者常常很容易將CSS語法和HTML語法搞混（等我有空我在寫一篇文章來說明這兩種的不同好囉！），簡單來說HTML語法一定會有"<>"，所有的HTML語法都一定是包含在"<>"裡面。所以以後看到"<>"，一定就不是CSS語法，但是不一定是HTML語法，這個要分清楚，不過我們先不在這裡討論這個！只要先釐清一個觀念：CSS語法不會出現"<>"這種符號！

　　至於放置背景音樂有兩種方式，一種是有播放面版(如圖一)，而另一種就像我的BLOG：沒有播放面版，是看不到播放面版但是卻能播放音樂！

[圖一]

 

---

 

█ 語法說明：

 

---

　　瞭解放置背景音樂的形式之後，我們開始介紹播放音樂的HTML語法了！

　　第一種：有播放面版之語法

<embed src="http://你上傳的音樂檔完整路徑" width="100" height="50" loop="true" autostart="true">

1. Src：為連結的語法，主要是看你音樂的檔案在哪，就寫怎樣！
2. Width(寬)：播放面版的寬度，可以自行設定！
3. Height（高）：播放面版的高度，可以自行設定！
4. Loop(迴圈)：設定音樂是否要重複播放。要重複播放：ture 不重複播放：false
5. Autostart(自動開始)：設定載入網頁時，音樂是否要自動播放。要自動播放：ture 不自動播放：false

　　PS1 　Embed：此為HTML語法中「插入元件」的語法！請務必記得後要也要加上，代表語法結束！

　　PS2　一般來說HTML語法大都是相對應的 代表開始 代表結束

　　第二種：沒有播放面版之語法

<embed src="http://你上傳的音樂檔完整路徑" hidden="true" loop="true" autostart="true">

1. Src：為連結的語法，主要是看你音樂的檔案在哪，就寫怎樣！
2. Hidden(隱藏)：你的播放面版要不要隱藏。要隱藏：true 不隱藏：false。
   ★注意：如果你隱藏面版，記得autostart要設定為true。

　　PS3　第一種和第二種的語法其實是共通的，看你的需要為何要適度的加入語法！只要加上<embed>裡面就可以了！

 

---

 

█ 實際操作：

 

---

　　目前語法的介紹已經算是完畢了！但是最多人有問題的部分就是：「我知道語法怎麼寫，但是我究竟要怎樣加到BLOG當中呢？」

　　一般來說（此以無名小站的BLOG為例），有下列幾個地方可以加入HTML語法！

1. 在BLOG的「網誌設定」(如圖一)裡面的網誌名稱(如圖三)、網誌敘述(如圖三)！

[圖二]

[圖三]

1. 在BLOG左邊或右邊（依照每個人得BLOG而不一定）的選單中的「連結管理」(如圖四、五)！

[圖四]

[圖五]
更正：與法應該貼在連結管理中的[名稱]欄位中，而不是[網址]欄位中喔！
2007/04/10修正

　　最後，你只要在以上的這三個地方，都可以加入播放背景音樂的語法！加入之後，就可以開始享受音樂的饗宴囉！

 

---

█ 補充說明：

 

---

　　此部分會收集一些網友發表的問題，然後再加以整理、解答！會隨時更新，請多多注意！

Q1：為何我的BLOG找不到「連結管理」？

Ans：那可能是你第一次使用BLOG或是未曾建立新的「資料夾」，你可以參閱圖六，找到「資料夾管理」點選之後便可以新增資料夾(如圖七)，然後點一下「新增」之後，便會像圖八一樣，接著填上自己想要的資料夾名稱，然後按「確定」即可！（★注意：一定要按「確定」設定才會生效！至於「順序」的選項可以自己設定，沒有規定一定要怎樣！）接下來回到BLOG首頁，再選單的部分就可以看到一個新多出來的部分（如圖九），再圖九當就能夠看到「連結管理」了！

[圖六]

[圖七]

[圖八]

[圖九]

 

---

 

|| 歡迎轉載 但請勿盜用|| http://andyliu.24cc.com
Copyright (C) 2004 Andyliu Design . All rights reserved .

]]> http://andyliudesign.idv.tw/24/feed 243