正文
石頭製貼講座之一（HTML基礎及模版一號） 2009-05-21 23:15:42 
金班讓我搞做貼教學，簡直就是趕鴨子上架，俺那水平，咳咳，連菜鳥都算不上。每次做貼子總要請教師傅，感覺自己超級笨蛋。既然被趕上來了，就花點時間給大家介紹一下貼子該怎麽做。 看到很多大腕的精彩演唱，沒有好圖好貼子來配，也蠻可惜的。如果有個美貼，肯定是錦上添花。做貼子說難也很複雜，說簡單也不算太難。哎，羅裏羅唆的，就分幾個級別來介紹吧，大概有個十講八講的，我知道啥就說啥，老實交待。 首先今天給大家介紹一個最最簡單的模版，一個圖片加一個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）歌曲鏈接 這個大家都會，這裏是文學城上傳文件的鏈接： 選好自己的歌曲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" 這個是帖子發博客的時候被強行加上去的，是廢話，完全沒用，要刪掉。 | |
| [打印] | |
