來自偶然

個人資料

來自偶然

博客訪問：

石頭製貼講座之一（HTML基礎及模版一號）

(2009-05-22 08:25:09) 下一個

金班讓我搞做貼教學，簡直就是趕鴨子上架，俺那水平，咳咳，連菜鳥都算不上。每次做貼子總要請教師傅，感覺自己超級笨蛋。既然被趕上來了，就花點時間給大家介紹一下貼子該怎麽做。
看到很多大腕的精彩演唱，沒有好圖好貼子來配，也蠻可惜的。如果有個美貼，肯定是錦上添花。做貼子說難也很複雜，說簡單也不算太難。哎，羅裏羅唆的，就分幾個級別來介紹吧，大概有個十講八講的，我知道啥就說啥，老實交待。
首先今天給大家介紹一個最最簡單的模版，一個圖片加一個flash的，就那麽四句HTML語言，會做貼的高手們千萬別看，因為這是入門級別的，看了有害無益，哢哢。
以後呢我再介紹：
如何製圖
如何寫歌詞
如何“偷”code
如何做滾動歌詞
滾動圖片
多重flash定位
自己做flash動畫歌詞
歌詞歌曲同步顯示貼
。。。
天！真賣弄，感覺自己要當教授，趕緊向自己的師傅們求救先，哢哢。

這一貼很簡單，就當石頭模版一號，一個圖片加一個flash就搞定。
原料：一個圖，一個恰當的flash. 一個歌曲鏈接地址。
1）圖
可以說做貼子成功與否80%看圖選的好不好，恰當不恰當，這個很重要。網上的圖片多的不計其數，去百度圖片裏搜一下，按你的歌曲所要表現的主題去搜，然後選好圖放進自己的電腦裏。我是專門有一個圖片收藏夾，看到好的圖片就蕩下來存裏麵，做貼子時候去找。圖是不是好看和你的藝術品位很有關係哦。
圖片一般要找大圖，寬度600 到1024 的都可以。但是貼子要用600 到900之間寬度的。如果你找到的圖片是1024的大圖（一般用作壁紙），需要用軟件來resize, 去搜一下“光影魔術手”這個軟件，用它來resize和加邊框就很好。
大的貼子我一般用寬度是800的，一般的帖子用750或者700的，太寬了不好，會出現滾動條，看著不方便。
圖選好後，可以在圖片上寫上歌詞，寫歌詞有很多方法。簡單的可以用WINDOWS自帶的PAINT, POWERPOINT, 下載一些製圖軟件最好，比如PHOTOSHOP, 功能非常強大，我們平常所說的照片被PS過了，就是被這個軟件加工過的意思。也可以用其他的免費軟件，功能簡單一些，但作貼子足夠了。我現在用的是isee，搜一下又免費版。
字體很重要，如果你的電腦裏沒有裝各種好看的字體，那就寫不出花樣繁多的漂亮中文。去這個網站下載字體吧：http://font.knowsky.com/
字體庫非常浩瀚，什麽樣的漂亮字體都有，你就下載解壓成font文件，然後拷貝在C盤windows下麵的font文件夾裏就ok了！
我上麵的貼子就是這個圖：http://hiphotos.baidu.com/sttsyan/pic/item/d77cc137dbb0f0fda3cc2bd3.jpg
原圖大小是800X600
縮小後用isee軟件寫上歌詞：http://i44.tinypic.com/11j6uqo.jpg
我這個圖的最後大小是 700X525
圖要上載到網上，拿到圖片鏈接地址，最常用的是tinypic.com，非常好用。

2）FLASH
來看看這個鏈接：
http://web.wenxuecity.com/BBSView.php?SubID=ktv&MsgID=177749
我現在還在用這些FLASH, 鏈接不容易過期，調用方便，選擇很多。
去網上搜索一下，就會有很多FLASH資源。這個是自稱最大的FLASH集合網站：
http://flashline.cn/
在別的網站上找到的FLASH文件，有調用地址，但不一定有保證，鏈接很容易過期，這時候，可以把FLASH文件蕩下來，再上傳到文學城，得到文學城的FLASH鏈接地址，這樣就像上傳歌曲一樣，隻要文學城不出現問題，鏈接就能用。
FLASH用好了，錦上添花，不用也沒關係。

3）歌曲鏈接
這個大家都會，這裏是文學城上傳文件的鏈接：http://web.wenxuecity.com/upload.php
選好自己的歌曲UPLOAD上去，一個連接地址就送到你的悄悄話裏了。
有了這三個原料就可以做貼了。

首先在HTML語言裏，一個貼子就是一個table, 所有的話要擴上尖刻號“<>”才能起作用。所以第一句要定義一個table, 也就是表單。
第一句話就是定義表單的大小了。在括號裏寫上：
table height="你圖片的高度" width="你圖片的寬度"
cellspacing是表格裏單元格之間的距離;
cellpadding是表格裏單元格內的空白部分;
俗稱就是外補丁和內補丁，也就是表格裏麵的東西距離邊框的寬度距離。在本模版裏麵我都設置成0，這樣圖片到邊框之間就沒有距離了。
border="編框寬度" 一般呢用5號寬度就行了，3也行，如果作圖的時候已經有了邊筐，不想要了就用0
bordercolor="顏色代碼"，如果有邊框，你就可選擇合適顏色來定義你的邊框了，顏色代碼的選擇看這個網址：http://www.citymao.com/n4863c37.aspx
另外你還可以定義四個邊框分別有不同的顏色，那就要用這句話：
style="border-right: 顏色寬度虛實 border-top:顏色寬度虛實 border-left: 顏色寬度虛實border-bottom:顏色寬度虛實"
比如說 BORDER-RIGHT: rgb(153,153,153) 3px solid; 那就是右邊線顏色是 rgb(153,153,153) （銀灰色）；寬度是3個pixel, 實線，（虛線就是dotted) 但一般不用那麽複雜，可以不寫這句。
說到這裏第一句話就說完了，就可以把這句話用括號括起來了。貌似很複雜，用慣了就快了，別忘了咱們現在在講最簡單的貼子模版，後麵還有複雜的，準備好。

第一句範例：（上麵我的歌貼）

說完了第一句話，表單定義好了，就開始寫表單裏麵的內容了。表單裏有什麽呢，包括上麵提到的三個原料：圖片，flash，歌曲
三個原料都要是網頁鏈接形式的，比如：
圖片地址：http://i44.tinypic.com/11j6uqo.jpg
flash地址：http://imgfree.21cn.com/free/flash/92.swf
歌曲地址：http://space.wenxuecity.com/media/1241932876.mp3
首先來個尖括號，尖括號裏麵寫上：tbody
意思就是說，我現在要寫表格裏麵的內容了。
然後又一個括號，裏麵寫上: tr
tr 是什麽呢？就是table row的縮寫，就是這一塊東西我要寫什麽了。
然後又一個括號，寫上td （表中的一個單元格）以及下內容：
valign="bottom" 縱向對齊的定義句，這樣flash和歌曲播放器就能放在貼子的最下麵了。
align="center" 水平對齊的定義，這樣flash和歌曲播放器就能在中央了。
width="圖片寬度"
background="圖片地址"
注意隻能用background來定義的圖片在博客裏麵才不會被強製縮小，否則其他形式顯實的圖片到了博客裏麵會被強製減小到寬度450。
第二句話說完了，括起來。

第二句範例：（上麵我的歌貼）

第三句話定義flash
又是一個括號，裏麵寫上
embed 是用來插入多媒體的命令。
src等於"flash調用地址" 就是讓它顯示這個flash, 至於位置嘛，前麵第二句裏麵都定義好了，向下中看齊。
width="flash寬度" 在本模版為了簡單就選擇圖片寬度了，700，這樣flash就可以覆蓋整個圖片。當然你要選窄一點也可以。
height="圖片高度減去20" 在這個例子裏麵是525-20=505，為什麽短了20呢？就是留20的空間來放音樂播放器。否則歌曲播放器就掉出貼子了，不好看。
type="application/x-shockwave-flash" 定義flash類型，加上就行了
wmode="transparent" / 定義flash是透明的，能顯示背景圖片
第三句就寫完了。括起來。

第三句範例：（上麵我的歌貼）

第四句定義聲音播放器。
括號，再embed 然後 src等於號"音樂地址"
width="播放器寬度" 任意寬度，隻要不比圖片寬就行了，我這裏是270。
height="20" 上麵說了，給播放器就留了20的位置
播放器向下向中對齊，上麵定義完了。
type="audio/x-pn-realaudio-plugin" 這個是播放器的播放格式，決定使用哪個軟件播放，這裏是用real player播放，你也可以選擇其他的。我這個realplayer的格式在IE和Firefox裏麵都能聽，有的播放器在某些瀏覽器裏麵放不出來，要注意。
autostart="true" 播放自動開始，如果是false的話，看貼的時候還要按播放鍵才能放音樂。
loop="true" / 自動循環，沒完沒了的放。你也可以選次數，比如loop="1"，就是隻放一次就停。
第四句就結束了。
結束語：
HTML語言要有頭有尾才完整，比如前麵的tr，後麵就要有/tr，才能成一對。
這樣就有下麵幾個括號，裏麵分別是：
/div 結束模塊
/tr 結束
/td 結束單元
/tbody 結束表體內容
/table 結束表單
第四句和結尾句範例：（上麵我的歌貼）

最後整個貼子就寫完了，最後別忘了，我們想讓貼子放在顯示屏的中間才好看，不是靠左。所以貼子最前麵要加上尖括號，裏麵寫center
最後麵也要相應的加上尖括號斜杠center: /center

全貼代碼的範例：（抱歉這個忘了加center）

現在就可以看看貼子效果了，把這些code拷貝並粘貼到這裏:
http://web.wenxuecity.com/BBSAdd.php?SubID=ktv
點擊“預覽“就能在下麵看到效果了。
如果覺得滿意就可以放到博客裏去欣賞，在博客裏發的時候要注意，一定要點擊那個轉換鍵，轉成HTML編輯格式，再複製到裏麵就行了。
http://blog.wenxuecity.com/help/images//blog-help-11-a.gif
這就是最簡單的一個模版了，我掰開了揉碎了講的細了點，為了讓大家有點基礎HTML語言的常識，以後再介紹複雜的就不那麽多廢話了，還是那句話，貼子好看與否關鍵是看圖片選擇的好壞。
這裏是我的“石頭模版一號“範例全部code，你可以拿回去，換上自己的圖片，flash和歌曲地址就是你的了。

還要注意下麵code裏麵有兩句onload="javascript:if(this.width>450) this.width=450" 這個是帖子發博客的時候被強行加上去的，是廢話，完全沒用，要刪掉。