鈴兒響叮鐺 - 風鈴妹
知足者常樂
正文
非常感謝石頭弟弟製貼講座，給了俺們初學者很大滴幫助，石頭弟弟歌唱滴好帖也做滴漂亮，很欣賞和敬佩，俺就慢慢學習了。
石頭製貼講座之一（HTML基礎及模版一號）
金班讓我搞做貼教學，簡直就是趕鴨子上架，俺那水平，咳咳，連菜鳥都算不上。每次做貼子總要請教師傅，感覺自己超級笨蛋。既然被趕上來了，就花點時間給大家介紹一下貼子該怎麽做。看到很多大腕的精彩演唱，沒有好圖好貼子來配，也蠻可惜的。如果有個美貼，肯定是錦上添花。做貼子說難也很複雜，說簡單也不算太難。哎，羅裏羅唆的，就分幾個級別來介紹吧，大概有個十講八講的，我知道啥就說啥，老實交待。
首先今天給大家介紹一個最最簡單的模版，一個圖片加一個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) 但一般不用那麽複雜，可以不寫這句。說到這裏第一句話就說完了，就可以把這句話用括號括起來了。貌似很複雜，用慣了就快了，別忘了咱們現在在講最簡單的貼子模版，後麵還有複雜的，準備好。
第一句範例：（上麵我的歌貼）
<*center*><*table height="525" width="700" cellspacing="0" cellpadding="0" border="5" bordercolor="#949449"*>
說完了第一句話，表單定義好了，就開始寫表單裏麵的內容了。表單裏有什麽呢，包括上麵提到的三個原料：圖片，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。第二句話說完了，括起來。
第二句範例：（上麵我的歌貼）
<*tbody*><*tr*><*td valign="bottom" align="center" width="700"background="http://i44.tinypic.com/11j6uqo.jpg"*>
第三句話定義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 onload="javascript:if(this.width>450) this.width=450"src="http://imgfree.21cn.com/free/flash/92.swf" width=700 height=505 type="application/x-shockwave-flash" wmode="transparent"*>
第四句定義聲音播放器。括號，再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 結束表單
第四句和結尾句範例：（上麵我的歌貼）
<*embed src="http://space.wenxuecity.com/media/1241932876.mp3"width="270" height="20" type="audio/x-pn-realaudio-plugin" autostart="true" loop="true" /*><*/embed /*><*/td*><*/tr*><*/tbody*><*/table*>
最後整個貼子就寫完了，最後別忘了，我們想讓貼子放在顯示屏的中間才好看，不是靠左。所以貼子最前麵要加上尖括號，裏麵寫center 最後麵也要相應的加上尖括號斜杠center: /center 全貼代碼的範例
（抱歉這個忘了加center）-----用的時候必須把*號全部去掉
<*table height="525" width="700" cellspacing="0" cellpadding="0"border="5" bordercolor="#949449"*><*tbody*><*tr*><*td valign="bottom" align="center" width="700"background="http://i44.tinypic.com/11j6uqo.jpg"*> <*embed onload="javascript:if(this.width>450) this.width=450" src="http://imgfree.21cn.com/free/flash/92.swf" width=700 height=505 type="application/x-shockwave-flash" wmode="transparent"*> <*embed onload="javascript:if(this.width>450) this.width=450" src="http://space.wenxuecity.com/media/1241932876.mp3"width="270" height="20" type="audio/x-pn-realaudio-plugin"autostart="true" loop="true" /*> <*/embed /*><*/td*><*/tr*><*/tbody*><*/table*><*/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" 這個是帖子發博客的時候被強行加上去的，是廢話，完全沒用，要刪掉。
-----用的時候必須把*號全部去掉
<*center*><*table height="525" width="700" cellspacing="0" cellpadding="0"border="5" bordercolor="#949449"*><*tbody*><*tr*><*td valign="bottom" align="center" width="700"background="http://i44.tinypic.com/11j6uqo.jpg"*> <*embed onload="javascript:if(this.width>450) this.width=450" src="http://imgfree.21cn.com/free/flash/92.swf" width=700 height=505 type="application/x-shockwave-flash" wmode="transparent"*> <*embed onload="javascript:if(this.width>450) this.width=450" src="http://space.wenxuecity.com/media/1241932876.mp3"width="270" height="20" type="audio/x-pn-realaudio-plugin"autostart="true" loop="true" /*> <*/embed /*><*/td*><*/tr*><*/tbody*><*/table*><*/center*>
##################################################################################################
石頭製貼講座之二（Flash定位及模版二號）
自從第一次講座發出後，同學們反響強烈，尤其讓本班高興的是已經有同學開始使用模版一號，製作的貼子像摸像樣，非常棒！希望大家繼續努力。也有的同學反映講座內容深奧看不懂，無奈本班水平實在有限，自我感覺已經用了最通俗易懂的語言來解釋HTML語法了。如果還是看著費勁，就拷貝模版code再換成你自己的圖片什麽的就行了，別的也不用多研究。
今天的這一講非常的重要，請同學們做好筆記哈。為什麽呢，因為不但俺的很多貼子都是用這個模版做的，還有很多的大腕的貼子也是這個版。這個模版可謂是放之四海而皆準的毛選級別的模版，就作為模版石頭二號（其實也是從師傅那裏偷來的，嘿嘿）。會用了這個版，你以後就所向無敵了。本貼子歌曲錄音的時候話筒有問題，所以很難聽又沒有時間重錄了，希望大家把上麵貼子的音樂播放器關掉，專心學習。
貼子的構思：首先根據歌詞內容找了一張這樣的照片，有些網友也曾經用過這個圖。一大輪金黃圓月，有神秘的河流和山川，就像夢境。正體現了歌詞裏描寫的意境。同樣寫好歌詞，調整大小，上傳得到圖片鏈接。注意寫歌詞的時候要讓歌詞清楚一些，不然看著費勁。這個圖片的大小是750X563 圖片地址：http://i42.tinypic.com/2cr3dkp.jpg 寫好歌詞後，我想再加上以下flash來強調主題：
1） 霧蒙蒙的飄動的雲霧，進一步體現夢幻效果。 http://podmedia.imhb.cn/uploadpodmedia/2008/7/6/20080706135757_68639.swf 2） 天空比較單薄，加上了一顆伴月星閃亮。 http://www.leiyu668.com/flash/transparent1/starlight/014.swf 3）
河灣的流水要體現動感，我以後會單獨講水波紋的製作，但現在就靠這個flash來體現： http://imgfree.21cn.com/free/flash/137.swf 原料都有了就可以做了，顯然把這幾個flash定位在自己想要的位置非常重要。所以就需要一些定位語句來給flash模塊定位。
首先第一句開頭是這樣的：
<*center><*table*><*tr*><*td*><*div style="LEFT: 0px; POSITION: relative; TOP: 0px"*>
center: 就是要把貼子放在中間位置顯示，這上次講了 table: 現在要開始一個表單來做貼子，和上次不同的是這次要嵌套表單，後麵還會再有一個表單套在這一層裏。 tr: 開始表單內的行 td: 開始行的內容 div 的概念說起來會很複雜，你隻要記住它的意思是開是一個模塊就行了，模塊是什麽呢，它可以是一個圖片，歌曲播放器，flash，或什麽別的東西。隻要定義在div和/div之內的東西都屬於這一個模塊。這第一句的div一句非常重要，有時候會看到一些網友的貼子，flash的位置不對，不在貼子裏麵。有的貼子在IE裏看得好好的，到了firefox看就不對了。或者flash不對或者播放器位置不對，都是因為位置沒搞好。這句話就是說以下的這一個模塊都相對於最左上角的0X0這個位置而定，後邊的所有flash都要“絕對”的定位於這個模塊之內。這樣就不會出現位置差錯了。不管是瀏覽器是IE也好還是firefox,都不會位置不對。另外你還可以靠Z-INDEX來實現flash模塊的層疊顯示，這個以後再講。
<*table height="563"cellspacing="0"bordercolor="#5151A2"cellpadding="30"width="750"
background="http://i42.tinypic.com/2cr3dkp.jpg"border="5"*>
你看又一個table開始了，是嵌套在前麵的表單裏的。這句話定義了整個貼子的大小，因為我的圖片像素是750X563的，所以簡單起見貼子的高度寬度也設置成同樣大小。邊框顏色寬度我第一課已經講過了。 cellpadding是30，就是說下一個模塊（播放器）到邊框的距離是30，這個距離可以調整任意大小。
<*tr*><*td valign="bottom" align="left"*><*embed style="FILTER: Xray" onload="javascript:if(this.width>450) this.width=450" src="http://space.wenxuecity.com/media/1243917150.mp3" width="80" height="30" type="audio/mpeg" autostart="true" loop="1" /*> <*/embed /*><*/td*><*/tr*><*/table*>
這句話定義了播放器的格式和位置上節課講過valign和align, 所以可以看出來，播放器是被放在了下麵靠左的位置，但是會留出離邊框30像素的距離（由前麵的padding決定）。 style="FILTER: Xray" 定義的是播放器的外觀，顧名思義x射線就是把播放器顯示成黑色透明狀的，就像醫院裏照出來的X光透視片的感覺。但是這個命令在不同版本的瀏覽器裏看效果是不同的。播放格式是mpeg，是一種比較普通的播放格式，IE和firefox都能聽得見。注意這個播放格式和第一節課的realplayer播放格式不一樣。 loop播放循環是1，就是說放一次，如果是loop="true" 就是無限循環，不停的放。至此大table裏的小table就結束了，所以要加上/td/tr/table.
<*div style="LEFT: 5px; POSITION: absolute; TOP: 5px"*><*embed onload="javascript:if(this.width>450) this.width=450" src="http://podmedia.imhb.cn/uploadpodmedia/2008/7/6/20080706135757_68639.swf"width="740" height="500" type="application/x-shockwave-flash" wmode="transparent" quality="high" /*><*/embed /*><*/div*>
這個單元是定義第一個flash動畫：雲霧效果在開始的style的地方，我就定位了flash的具體位置，我讓它在最左邊5個像素開始，上麵也留下5個像素的空間。為什麽呢，因為我不想讓這個雲霧飄到邊框上去，讓flash控製在貼子範圍之內。注意position是絕對absolute，不是相對，是讓本單元顯示的內容把位置定位於第二句的開始點。 flash的寬度和高度是740x500，740=圖寬度750-邊框5X2=750-10=740 500的高度是讓雲霧能覆蓋畫麵大部分地方。
<*div style="LEFT: 550px; POSITION: absolute; TOP: -50px"*><*embed onload="javascript:if(this.width>450) this.width=450" src="http://www.leiyu668.com/flash/transparent1/starlight/014.swf"width="200" height="200" type="application/x-shockwave-flash" wmode="transparent" quality="high" /*><*/embed /*><*/div*>
這個單元是定義伴月星的flash, 我想讓這個星星顯示在貼子右上方天空處。它的位置是從上麵數負50，隻有是負數才能讓這個flash顯示在比較靠上的位置。 <*div style="LEFT: 50px; POSITION: absolute; TOP: 290px"*><*embed onload="javascript:if(this.width>450) this.width=450" src="http://imgfree.21cn.com/free/flash/137.swf" width="300" height="300" type="application/x-shockwave-flash" wmode="transparent" quality="high" /*><*/div*> 這個單元是定義水波紋的動畫效果。它的位置大小也是通過這四個數值來設定的（左右寬高）。變量就是這個四個數字和flash鏈接。
<*div style="LEFT: 300px; POSITION: absolute; TOP: 280px"*><*embed onload="javascript:if(this.width>450) this.width=450" src="http://imgfree.21cn.com/free/flash/137.swf" width="400" height="400" type="application/x-shockwave-flash" wmode="transparent" quality="high" /*><*/div*>
又一個同樣的水波紋，隻不過大一些400X400 放在河道寬的地方。貼子快做完了，注意這些flash動畫的單元都是一個模式，隻是更換4個變量來改變他們的大小和位置，所以理論上你可以想放多少個flash都可以，多了隻不過顯示起來會慢一些。 結尾句： <*/div*><*/td*><*/tr*><*/table*><*/center*> 對應開始第一句，這樣就結束了這個貼子。 掌握了這個模版，會自如運用了，你就差不多可以畢業了。以後的一些技巧都可以在這個基礎上加。還是那句話，HTML語言隻是工具，貼子做得好不好取決於選圖flash是不是恰當，好看，字體做的是不是漂亮，等等。
所以大家應該多在選圖作圖上下功夫。 -----用的時候必須把*號全部去掉
<*center*><*table*><*tr*><*td*><*div style="LEFT: 0px; POSITION: relative; TOP: 0px"*><*table height="563" cellspacing="0" bordercolor="#5151A2" cellpadding="30" width="750" background="http://i42.tinypic.com/2cr3dkp.jpg" border="5"*><*tr*><*td valign="bottom" align="left"*><*embed style="FILTER: Xray" onload="javascript:if(this.width*>450) this.width=450" src="http://space.wenxuecity.com/media/1243917150.mp3" width="80" height="30" type="audio/mpeg" autostart="true" loop="1" /*><*/embed /*><*/td*><*/tr><*/table*><*div style="LEFT: 5px; POSITION: absolute; TOP: 5px"*><*embed onload="javascript:if(this.width*>450) this.width=450" src="http://podmedia.imhb.cn/uploadpodmedia/2008/7/6/20080706135757_68639.swf" width="740" height="500" type="application/x-shockwave-flash" wmode="transparent" quality="high" /*><*/embed /*><*/div*> <*div style="LEFT: 550px; POSITION: absolute; TOP: -50px"*><*embed onload="javascript:if(this.width*>450) this.width=450" src="http://www.leiyu668.com/flash/transparent1/starlight/014.swf" width="200" height="200" type="application/x-shockwave-flash" wmode="transparent" quality="high" /*><*/embed /*><*/div*><*div style="LEFT: 50px; POSITION: absolute; TOP: 290px"*><*embed onload="javascript:if(this.width*>450) this.width=450" src="http://imgfree.21cn.com/free/flash/137.swf" width="300" height="300" type="application/x-shockwave-flash" wmode="transparent" quality="high" /*><*/div*><*div style="LEFT: 300px; POSITION: absolute; TOP: 280px"*><*embed onload="javascript:if(this.width*>450) this.width=450" src="http://imgfree.21cn.com/free/flash/137.swf" width="400" height="400" type="application/x-shockwave-flash" wmode="transparent" quality="high" /*><*/div*><*/div*><*/td*><*/tr*><*/table*><*/center*><*/body*> <*/html*>
########################################################################################################
石頭製貼講座之三（邊框底圖和滾動圖片/字幕）
叮呤呤，上課了。看看這個豪華貼子，貌似很複雜，其實很簡單。我沒有使用一個flash, 但是很有動感，所有的東西都在動，今天要給同學們介紹一個很重要的html語句：Marquee還是一句一句的講，講到哪裏就說那裏吧。
第一句：定義邊框和底圖
<*TABLE borderColor=#97CBFF cellpadding="8" width="100%" border=8 background="http://i42.tinypic.com/6tedmw.gif"*><*TBODY*><*TR*><*TD*>
這句話定義了邊框和底圖。可以看到這個邊框是兩道淺藍色的框框加了一條閃閃星星的帶子。這不是從誰家抄襲來的，是俺的原創，大家可以發揮改成不同的顏色不同的圖。兩個淺藍色邊框是兩個嵌套的table, 所以這句話裏重複出現了兩次table,tbody, tr和td。但是注意要把內補丁設置成為8不能是0，這樣才能顯示出來星星閃的夾層，也就是cellpadding=8星星閃是怎麽出來的呢，實際上就是一個小gif圖片： 圖片地址是：http://i42.tinypic.com/6tedmw.gif 我隻要在第一個table裏麵把這個圖片設置成底圖就行了。 background=http://i42.tinypic.com/6tedmw.gif 第二個table的底圖是另外一個小圖片： 圖片地址是：http://www.sucai123.com/sucai/img4/639/b057.gif 第二個table覆蓋了第一個table的大部分，隻露一個8像素的邊邊，所以就能看到星星閃閃的一條帶子了。另外注意這兩個table, 我定義的寬度是100%， 不是實際的多少pixel, 而是一個百分數，意思就是你給我多大的寬度我就占多大的寬度好了，所以發貼時候會看著寬一些，再博客裏看會窄一些，取決於網頁給了貼子多大的寬度了。這個邊框大家可以任意發揮，你可以用不同顏色，兩個框框分別是用不同顏色也好看，可以用三個邊框，四個邊框，可以調節寬度，讓它窄一點也行，底圖可以換成不同的圖片。圖片可以在網上找，搜索一下網頁素材，就一大堆一大堆的圖。
第二句：歌曲標題來回動
<*center*><*FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=gray); WIDTH: 50%; COLOR: #97CBFF; LINE-HEIGHT: 150%; FONT-FAMILY: 華文彩雲"*><*B*><*marquee behavior=alternate*>不想讓你哭<*/marquee*><*/B*><*/FONT*><*br*><*br*>
現在就要介紹這個Marquee, 基本語法就是marquee你想要動的東西/marquee marquee有很多參數可以設定，就定了你要動的東西怎麽動，往哪個方向動，來回循環還是就一次，運動的速度等等。這裏我想讓這個“不想讓你哭”動起來，來回動，那我就設置marquee的behavior是alternate就好了。另外還有scroll, slide兩種屬性，scroll, 就是一圈一圈的走，slide就是像幻燈片一樣走一次就完了，你可以自己嚐試一下看看效果。在這句裏麵我還定義了字體的顯示，font這個句法是來定義字體的，在它的style定義句中，我把自號定為40號，另外我加上了影子，影子的效果是灰色的, shadow(color=gray)，要注意用firefox是看不出來這個陰影效果的。寬度是50%顯示，這樣子就在table內部中央50%的寬度內來回走了，字體本身的顏色是和邊框相同的顏色，你也可以用其它顏色。lineheight就是行間句，150%就是空行1.5，但因為“不想讓你哭“就一行，所以沒用。字體我定義的是華文彩雲，但是如果你的電腦是英文係統有沒有安裝中文字體，你是看不出來空心的華文彩雲字體的。
第三句：圖片slide show
<*marquee height="338" width=80% deplay="0" loop="infinite" direction='left'scrollamount="3"*> <*img onload="javascript:if(this.width>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/4e066d58bdd79fff9d82042c.jpg"><*img onload="javascript:i(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/d1a2eace160cf918b700c82d.jpg"*><*/marquee*><*br*><*br*>
還是這個marquee, 讓這些圖片動起來形成slideshow效果，注意高度要定義成圖片高度，寬度是80%,也就是要顯示在表格中央80%的寬度區域內。方向是向左，loop是控製它無限次的運轉，scrollamount控製速度，數字越小越動的慢，可以自己調試，我這裏用的是3。注意圖片是提前找好的，並且改成了統一大小並上傳的。圖片的顯示用img src就行了。
第四句： 滾動歌詞
<*marquee direction=up scrollamount=1*><*center*><*FONT style="FONT-SIZE:18pt;filter:glow(color=gray,strength=4);WIDTH:100%; COLOR:crimson;LINE-HEIGHT:200%;FONT-FAMILY:華文行楷"*>總想對你有些話要說<*br*>可不知道該說些什麽<*br*>總想給你帶來些歡樂<*br*>可不知道你喜歡什麽<*br*>過了一夜又多了一天<*br*>時間讓人變得好心煩<*br*>不知何時又才能見麵<*br*>難道就這樣天各一邊<*br*>我不想讓你哭 我也不想認輸<*br*>隻想用我的愛 再次把你留住<*br*>誰的眼淚隨風飄向了遠處<*br*>那也是我在為你祝福<*br*>我不想讓你哭 我也不想認輸<*br*>隻想用我的愛 再次把你留住<*br*>如果愛情就是 我這場的賭注<*br*>輸了你也就等於 輸了全部 <*br*><*/font*><*/center*><*/marquee*><*center*><*br*><*br*> 接下來是滾動歌詞了，還是依舊使用marquee來使文字運動起來，隻不過是向上滾動顯示，速度是1。行間距是兩倍，對字體的定義和歌名的定義有幾處不同，字號要小，陰影效果變成了閃光效果，還是灰色，但是是在字的周圍包了一層灰色，firefox還是看不到的。字體定義成為華文行楷。自體本身的顏色我設成了紅色：crimson 我這裏有一個英文顏色名稱對照表，你可以參考： http://school.21tx.com/2005/08/15/12819.html
第五句：播放器
<*embed onload="javascript:if(this.width>450) this.width=450" src="http://space.wenxuecity.com/media/1245569215.mp3" width=300 height=40 controls=ControlPanel loop=true autostart=true volume=100 type=audio/x-pn-realaudio-plugin Initfn=load-types mime-types=mime.types*>
哈哈，偷懶啦，到文學城發新貼的地方去搞個自動生成的code就行了。鏈接：http://web.wenxuecity.com/BBSAdd.php?SubID=ktv
第六句：下載鏈接和結束
<*br*><*a href="http://space.wenxuecity.com/media/1245569215.mp3" target="_blank"*>下載鏈接<*/a*><*center*><*/TD*><*/TR*><*/TBODY*><*/TABLE*><*/TD*><*/TR*><*/TBODY*><*/table*>
提供一個歌曲文件超級鏈接，以供聽不到音樂的人下載收聽。結束句就是結束第一句裏麵的兩個table，現在table裏麵東西就都寫完了。 整個貼字沒有使用一個flash, 沒有使用一個div模塊，純靠html語言來搞效果，也不錯。
-----用的時候必須把*號全部去掉
<*TABLE borderColor=#97CBFF cellpadding="8" width="100%" border=8 background="http://i42.tinypic.com/6tedmw.gif"*><*TBODY*><*TR*><*TD*><*TABLE borderColor=#97CBFF cellpadding="8" width="100%" border=8 background=http://www.sucai123.com/sucai/img4/639/b057.gif*><*TBODY*><*TR*><*TD*><*center*><*FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=gray); WIDTH: 50%; COLOR: #97CBFF; LINE-HEIGHT: 150%; FONT-FAMILY: 華文彩雲"*><*B*><*marquee behavior=alternate*>不想讓你哭<*/marquee*><*/B*><*/FONT*><*br*><*br>*<*marquee height="338" width=80% deplay="0" loop="infinite" direction='left'scrollamount="3"*> <*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/4e066d58bdd79fff9d82042c.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/5e6bf6f7948db403730eec2d.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/756ab04a21796a0208f7ef23.jpg"*><*img onload="javascript:if(this.width>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/764ee295e2a62e297af4802c.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/896b68dd929e81155882dd20.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/9a4aa5af1cd967dafaed5024.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/d1a2eace160cf918b700c82d.jpg"*><*/marquee*><*br*><*br*><*marquee direction=up scrollamount=1*><*center*><*FONT style="FONT-SIZE:18pt;filter:glow(color=gray,strength=4);WIDTH:100%; COLOR:crimson;LINE-HEIGHT:200%;FONT-FAMILY:華文行楷"*>總想對你有些話要說<*br*>可不知道該說些什麽<*br*>總想給你帶來些歡樂<*br*>可不知道你喜歡什麽<*br*>過了一夜又多了一天<*br*>時間讓人變得好心煩<*br*>不知何時又才能見麵<*br*>難道就這樣天各一邊<*br*>我不想讓你哭 我也不想認輸<*br*>隻想用我的愛 再次把你留住<*br*>誰的眼淚隨風飄向了遠處<*br*>那也是我在為你祝福<*br*>我不想讓你哭 我也不想認輸<*br*>隻想用我的愛 再次把你留住<*br*>如果愛情就是 我這場的賭注<*br*>輸了你也就等於 輸了全部 <*br*><*/font*><*/center*><*/marquee*><*center*><*br*><*br*><*embed onload="javascript:if(this.width*>450) this.width=450" src="http://space.wenxuecity.com/media/1245569215.mp3" width=300 height=40 controls=ControlPanel loop=true autostart=true volume=100 type=audio/x-pn-realaudio-plugin Initfn=load-types mime-types=mime.types *><*br*><*a href="http://space.wenxuecity.com/media/1245569215.mp3" target="_blank"*>下載鏈接<*/a*><*center*><*/TD*><*/TR*><*/TBODY*><*/TABLE*><*/TD*><*/TR*><*/TBODY*><*/table*><*/body*> <*/html*>
##########################################################################################################
石頭製貼講座之四（閃字和水波紋的製作）
這首《藍色的故鄉》還是上次紅卡請我一起合唱的，很好聽的一首歌。但是當時伴奏有問題，怎麽也搞不定，隻能換別的歌。現在伴奏終於好了，但是感覺唱得很雷人，象催眠曲。大家湊活聽。今天要講的是閃字和水波紋的製作，從這堂課起，就不再講基礎知識了，開始傳授高級課程。
1）閃字的製作漂亮的歌名閃閃發亮，其實是一個小的GIF圖片，製作非常簡單。去百度搜索一下“閃字製作“，就會有好多網站出來了，隨便選一個。 http://www.shanziba.com/ 在這些網站輸入你想要製作的字，選中你想要的樣子，點擊“生成閃字”或“效果預覽”，漂亮的閃字就出來了，就這麽簡單。然後把做好的字存在你的電腦硬盤裏麵，以後再上傳到tinypic等網站就可以調用了。使用的時候就是用一般的貼圖語句就好了，比如〈img〉等。這就是我做好的標題：
2）水波紋的製作這種歌唱自然景色的歌曲很適合來個帶水麵的景色圖片，而動感逼真的水波紋需要一個軟件來製作。到這裏下載：點擊這裏下載！ Sqirlz Water Reflections軟件是專門用來給圖片做動態美工的軟件，用該軟件做出來的flash水波紋效果極棒 ，另外它還可以製作下雨的動畫和水滴入水的波瀾。水波紋提供了5種動畫類型，其參數也相當豐富，如水波幅度、波紋方向、亮度、透視、透明度及漣漪特性等。各參數的配合、調整可以使你得到極其豐富的波紋效果，能夠滿足自然界各種波紋景象，SWR的使用也很簡單，如果你隻考慮缺省效果，那麽產生一個作品隻需載入圖片、選定區域、保存swf文件這三步。選區的操作除了移動，還有平滑和“組合”選區（比如可以組合出一個類似“馬蹄形”的選區）等。 除了可以保存為SWF文件，它還能為AVI視頻動畫添加波紋，當然還有靜 態的水波效果 安裝好以後，就可以打開使用了。
首先要把圖搞好，我找了這麽一幅圖： 裏麵有一半的內容全是水麵，可以用水波紋把水麵動起來。
第一步：首先打開軟件，然後點擊綠色folder打開你想要製作的圖片。
第二步：用左邊第一個工具（藍箭頭所指）來選定你想要變成波紋的區域，下圖虛線範圍之內的東西都要被變成波紋。
第三步：選擇波紋頻率也就是動的快慢，我選了10，你可以多嚐試些數字。
第四步：波紋的形勢有5種不同的波紋，你可以挨個試試，哪個好看用哪個。但要注意選擇100%透明。
第五步：保存flash文件選擇這個隻保存波紋，不用保存全圖，否則文件太大。在按這個導出swf文件：選擇圖像質量，越高的質量文件越大：確定並導出：
第六步：導出完畢一定要記錄下swf文件的尺寸，以後有用 這是最後成品，一個flash文件，上傳到文學城空間拿到link備用，使用的時候就像調用其他的flash一樣，放到恰當的位置就行了。大小就是最後告訴你的大小。到此製貼講座已經有四講了，現在要求同鞋們趕緊交作業，否則我可要考試了！
石頭製貼講座之一（HTML基礎及模版一號）
金班讓我搞做貼教學，簡直就是趕鴨子上架，俺那水平，咳咳，連菜鳥都算不上。每次做貼子總要請教師傅，感覺自己超級笨蛋。既然被趕上來了，就花點時間給大家介紹一下貼子該怎麽做。看到很多大腕的精彩演唱，沒有好圖好貼子來配，也蠻可惜的。如果有個美貼，肯定是錦上添花。做貼子說難也很複雜，說簡單也不算太難。哎，羅裏羅唆的，就分幾個級別來介紹吧，大概有個十講八講的，我知道啥就說啥，老實交待。
首先今天給大家介紹一個最最簡單的模版，一個圖片加一個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) 但一般不用那麽複雜，可以不寫這句。說到這裏第一句話就說完了，就可以把這句話用括號括起來了。貌似很複雜，用慣了就快了，別忘了咱們現在在講最簡單的貼子模版，後麵還有複雜的，準備好。
第一句範例：（上麵我的歌貼）
<*center*><*table height="525" width="700" cellspacing="0" cellpadding="0" border="5" bordercolor="#949449"*>
說完了第一句話，表單定義好了，就開始寫表單裏麵的內容了。表單裏有什麽呢，包括上麵提到的三個原料：圖片，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。第二句話說完了，括起來。
第二句範例：（上麵我的歌貼）
<*tbody*><*tr*><*td valign="bottom" align="center" width="700"background="http://i44.tinypic.com/11j6uqo.jpg"*>
第三句話定義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 onload="javascript:if(this.width>450) this.width=450"src="http://imgfree.21cn.com/free/flash/92.swf" width=700 height=505 type="application/x-shockwave-flash" wmode="transparent"*>
第四句定義聲音播放器。括號，再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 結束表單
第四句和結尾句範例：（上麵我的歌貼）
<*embed src="http://space.wenxuecity.com/media/1241932876.mp3"width="270" height="20" type="audio/x-pn-realaudio-plugin" autostart="true" loop="true" /*><*/embed /*><*/td*><*/tr*><*/tbody*><*/table*>
最後整個貼子就寫完了，最後別忘了，我們想讓貼子放在顯示屏的中間才好看，不是靠左。所以貼子最前麵要加上尖括號，裏麵寫center 最後麵也要相應的加上尖括號斜杠center: /center 全貼代碼的範例
（抱歉這個忘了加center）-----用的時候必須把*號全部去掉
<*table height="525" width="700" cellspacing="0" cellpadding="0"border="5" bordercolor="#949449"*><*tbody*><*tr*><*td valign="bottom" align="center" width="700"background="http://i44.tinypic.com/11j6uqo.jpg"*> <*embed onload="javascript:if(this.width>450) this.width=450" src="http://imgfree.21cn.com/free/flash/92.swf" width=700 height=505 type="application/x-shockwave-flash" wmode="transparent"*> <*embed onload="javascript:if(this.width>450) this.width=450" src="http://space.wenxuecity.com/media/1241932876.mp3"width="270" height="20" type="audio/x-pn-realaudio-plugin"autostart="true" loop="true" /*> <*/embed /*><*/td*><*/tr*><*/tbody*><*/table*><*/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" 這個是帖子發博客的時候被強行加上去的，是廢話，完全沒用，要刪掉。
-----用的時候必須把*號全部去掉
<*center*><*table height="525" width="700" cellspacing="0" cellpadding="0"border="5" bordercolor="#949449"*><*tbody*><*tr*><*td valign="bottom" align="center" width="700"background="http://i44.tinypic.com/11j6uqo.jpg"*> <*embed onload="javascript:if(this.width>450) this.width=450" src="http://imgfree.21cn.com/free/flash/92.swf" width=700 height=505 type="application/x-shockwave-flash" wmode="transparent"*> <*embed onload="javascript:if(this.width>450) this.width=450" src="http://space.wenxuecity.com/media/1241932876.mp3"width="270" height="20" type="audio/x-pn-realaudio-plugin"autostart="true" loop="true" /*> <*/embed /*><*/td*><*/tr*><*/tbody*><*/table*><*/center*>
##################################################################################################
石頭製貼講座之二（Flash定位及模版二號）
自從第一次講座發出後，同學們反響強烈，尤其讓本班高興的是已經有同學開始使用模版一號，製作的貼子像摸像樣，非常棒！希望大家繼續努力。也有的同學反映講座內容深奧看不懂，無奈本班水平實在有限，自我感覺已經用了最通俗易懂的語言來解釋HTML語法了。如果還是看著費勁，就拷貝模版code再換成你自己的圖片什麽的就行了，別的也不用多研究。
今天的這一講非常的重要，請同學們做好筆記哈。為什麽呢，因為不但俺的很多貼子都是用這個模版做的，還有很多的大腕的貼子也是這個版。這個模版可謂是放之四海而皆準的毛選級別的模版，就作為模版石頭二號（其實也是從師傅那裏偷來的，嘿嘿）。會用了這個版，你以後就所向無敵了。本貼子歌曲錄音的時候話筒有問題，所以很難聽又沒有時間重錄了，希望大家把上麵貼子的音樂播放器關掉，專心學習。
貼子的構思：首先根據歌詞內容找了一張這樣的照片，有些網友也曾經用過這個圖。一大輪金黃圓月，有神秘的河流和山川，就像夢境。正體現了歌詞裏描寫的意境。同樣寫好歌詞，調整大小，上傳得到圖片鏈接。注意寫歌詞的時候要讓歌詞清楚一些，不然看著費勁。這個圖片的大小是750X563 圖片地址：http://i42.tinypic.com/2cr3dkp.jpg 寫好歌詞後，我想再加上以下flash來強調主題：
1） 霧蒙蒙的飄動的雲霧，進一步體現夢幻效果。 http://podmedia.imhb.cn/uploadpodmedia/2008/7/6/20080706135757_68639.swf 2） 天空比較單薄，加上了一顆伴月星閃亮。 http://www.leiyu668.com/flash/transparent1/starlight/014.swf 3）
河灣的流水要體現動感，我以後會單獨講水波紋的製作，但現在就靠這個flash來體現： http://imgfree.21cn.com/free/flash/137.swf 原料都有了就可以做了，顯然把這幾個flash定位在自己想要的位置非常重要。所以就需要一些定位語句來給flash模塊定位。
首先第一句開頭是這樣的：
<*center><*table*><*tr*><*td*><*div style="LEFT: 0px; POSITION: relative; TOP: 0px"*>
center: 就是要把貼子放在中間位置顯示，這上次講了 table: 現在要開始一個表單來做貼子，和上次不同的是這次要嵌套表單，後麵還會再有一個表單套在這一層裏。 tr: 開始表單內的行 td: 開始行的內容 div 的概念說起來會很複雜，你隻要記住它的意思是開是一個模塊就行了，模塊是什麽呢，它可以是一個圖片，歌曲播放器，flash，或什麽別的東西。隻要定義在div和/div之內的東西都屬於這一個模塊。這第一句的div一句非常重要，有時候會看到一些網友的貼子，flash的位置不對，不在貼子裏麵。有的貼子在IE裏看得好好的，到了firefox看就不對了。或者flash不對或者播放器位置不對，都是因為位置沒搞好。這句話就是說以下的這一個模塊都相對於最左上角的0X0這個位置而定，後邊的所有flash都要“絕對”的定位於這個模塊之內。這樣就不會出現位置差錯了。不管是瀏覽器是IE也好還是firefox,都不會位置不對。另外你還可以靠Z-INDEX來實現flash模塊的層疊顯示，這個以後再講。
<*table height="563"cellspacing="0"bordercolor="#5151A2"cellpadding="30"width="750"
background="http://i42.tinypic.com/2cr3dkp.jpg"border="5"*>
你看又一個table開始了，是嵌套在前麵的表單裏的。這句話定義了整個貼子的大小，因為我的圖片像素是750X563的，所以簡單起見貼子的高度寬度也設置成同樣大小。邊框顏色寬度我第一課已經講過了。 cellpadding是30，就是說下一個模塊（播放器）到邊框的距離是30，這個距離可以調整任意大小。
<*tr*><*td valign="bottom" align="left"*><*embed style="FILTER: Xray" onload="javascript:if(this.width>450) this.width=450" src="http://space.wenxuecity.com/media/1243917150.mp3" width="80" height="30" type="audio/mpeg" autostart="true" loop="1" /*> <*/embed /*><*/td*><*/tr*><*/table*>
這句話定義了播放器的格式和位置上節課講過valign和align, 所以可以看出來，播放器是被放在了下麵靠左的位置，但是會留出離邊框30像素的距離（由前麵的padding決定）。 style="FILTER: Xray" 定義的是播放器的外觀，顧名思義x射線就是把播放器顯示成黑色透明狀的，就像醫院裏照出來的X光透視片的感覺。但是這個命令在不同版本的瀏覽器裏看效果是不同的。播放格式是mpeg，是一種比較普通的播放格式，IE和firefox都能聽得見。注意這個播放格式和第一節課的realplayer播放格式不一樣。 loop播放循環是1，就是說放一次，如果是loop="true" 就是無限循環，不停的放。至此大table裏的小table就結束了，所以要加上/td/tr/table.
<*div style="LEFT: 5px; POSITION: absolute; TOP: 5px"*><*embed onload="javascript:if(this.width>450) this.width=450" src="http://podmedia.imhb.cn/uploadpodmedia/2008/7/6/20080706135757_68639.swf"width="740" height="500" type="application/x-shockwave-flash" wmode="transparent" quality="high" /*><*/embed /*><*/div*>
這個單元是定義第一個flash動畫：雲霧效果在開始的style的地方，我就定位了flash的具體位置，我讓它在最左邊5個像素開始，上麵也留下5個像素的空間。為什麽呢，因為我不想讓這個雲霧飄到邊框上去，讓flash控製在貼子範圍之內。注意position是絕對absolute，不是相對，是讓本單元顯示的內容把位置定位於第二句的開始點。 flash的寬度和高度是740x500，740=圖寬度750-邊框5X2=750-10=740 500的高度是讓雲霧能覆蓋畫麵大部分地方。
<*div style="LEFT: 550px; POSITION: absolute; TOP: -50px"*><*embed onload="javascript:if(this.width>450) this.width=450" src="http://www.leiyu668.com/flash/transparent1/starlight/014.swf"width="200" height="200" type="application/x-shockwave-flash" wmode="transparent" quality="high" /*><*/embed /*><*/div*>
這個單元是定義伴月星的flash, 我想讓這個星星顯示在貼子右上方天空處。它的位置是從上麵數負50，隻有是負數才能讓這個flash顯示在比較靠上的位置。 <*div style="LEFT: 50px; POSITION: absolute; TOP: 290px"*><*embed onload="javascript:if(this.width>450) this.width=450" src="http://imgfree.21cn.com/free/flash/137.swf" width="300" height="300" type="application/x-shockwave-flash" wmode="transparent" quality="high" /*><*/div*> 這個單元是定義水波紋的動畫效果。它的位置大小也是通過這四個數值來設定的（左右寬高）。變量就是這個四個數字和flash鏈接。
<*div style="LEFT: 300px; POSITION: absolute; TOP: 280px"*><*embed onload="javascript:if(this.width>450) this.width=450" src="http://imgfree.21cn.com/free/flash/137.swf" width="400" height="400" type="application/x-shockwave-flash" wmode="transparent" quality="high" /*><*/div*>
又一個同樣的水波紋，隻不過大一些400X400 放在河道寬的地方。貼子快做完了，注意這些flash動畫的單元都是一個模式，隻是更換4個變量來改變他們的大小和位置，所以理論上你可以想放多少個flash都可以，多了隻不過顯示起來會慢一些。 結尾句： <*/div*><*/td*><*/tr*><*/table*><*/center*> 對應開始第一句，這樣就結束了這個貼子。 掌握了這個模版，會自如運用了，你就差不多可以畢業了。以後的一些技巧都可以在這個基礎上加。還是那句話，HTML語言隻是工具，貼子做得好不好取決於選圖flash是不是恰當，好看，字體做的是不是漂亮，等等。
所以大家應該多在選圖作圖上下功夫。 -----用的時候必須把*號全部去掉
<*center*><*table*><*tr*><*td*><*div style="LEFT: 0px; POSITION: relative; TOP: 0px"*><*table height="563" cellspacing="0" bordercolor="#5151A2" cellpadding="30" width="750" background="http://i42.tinypic.com/2cr3dkp.jpg" border="5"*><*tr*><*td valign="bottom" align="left"*><*embed style="FILTER: Xray" onload="javascript:if(this.width*>450) this.width=450" src="http://space.wenxuecity.com/media/1243917150.mp3" width="80" height="30" type="audio/mpeg" autostart="true" loop="1" /*><*/embed /*><*/td*><*/tr><*/table*><*div style="LEFT: 5px; POSITION: absolute; TOP: 5px"*><*embed onload="javascript:if(this.width*>450) this.width=450" src="http://podmedia.imhb.cn/uploadpodmedia/2008/7/6/20080706135757_68639.swf" width="740" height="500" type="application/x-shockwave-flash" wmode="transparent" quality="high" /*><*/embed /*><*/div*> <*div style="LEFT: 550px; POSITION: absolute; TOP: -50px"*><*embed onload="javascript:if(this.width*>450) this.width=450" src="http://www.leiyu668.com/flash/transparent1/starlight/014.swf" width="200" height="200" type="application/x-shockwave-flash" wmode="transparent" quality="high" /*><*/embed /*><*/div*><*div style="LEFT: 50px; POSITION: absolute; TOP: 290px"*><*embed onload="javascript:if(this.width*>450) this.width=450" src="http://imgfree.21cn.com/free/flash/137.swf" width="300" height="300" type="application/x-shockwave-flash" wmode="transparent" quality="high" /*><*/div*><*div style="LEFT: 300px; POSITION: absolute; TOP: 280px"*><*embed onload="javascript:if(this.width*>450) this.width=450" src="http://imgfree.21cn.com/free/flash/137.swf" width="400" height="400" type="application/x-shockwave-flash" wmode="transparent" quality="high" /*><*/div*><*/div*><*/td*><*/tr*><*/table*><*/center*><*/body*> <*/html*>
########################################################################################################
石頭製貼講座之三（邊框底圖和滾動圖片/字幕）
叮呤呤，上課了。看看這個豪華貼子，貌似很複雜，其實很簡單。我沒有使用一個flash, 但是很有動感，所有的東西都在動，今天要給同學們介紹一個很重要的html語句：Marquee還是一句一句的講，講到哪裏就說那裏吧。
第一句：定義邊框和底圖
<*TABLE borderColor=#97CBFF cellpadding="8" width="100%" border=8 background="http://i42.tinypic.com/6tedmw.gif"*><*TBODY*><*TR*><*TD*>
這句話定義了邊框和底圖。可以看到這個邊框是兩道淺藍色的框框加了一條閃閃星星的帶子。這不是從誰家抄襲來的，是俺的原創，大家可以發揮改成不同的顏色不同的圖。兩個淺藍色邊框是兩個嵌套的table, 所以這句話裏重複出現了兩次table,tbody, tr和td。但是注意要把內補丁設置成為8不能是0，這樣才能顯示出來星星閃的夾層，也就是cellpadding=8星星閃是怎麽出來的呢，實際上就是一個小gif圖片： 圖片地址是：http://i42.tinypic.com/6tedmw.gif 我隻要在第一個table裏麵把這個圖片設置成底圖就行了。 background=http://i42.tinypic.com/6tedmw.gif 第二個table的底圖是另外一個小圖片： 圖片地址是：http://www.sucai123.com/sucai/img4/639/b057.gif 第二個table覆蓋了第一個table的大部分，隻露一個8像素的邊邊，所以就能看到星星閃閃的一條帶子了。另外注意這兩個table, 我定義的寬度是100%， 不是實際的多少pixel, 而是一個百分數，意思就是你給我多大的寬度我就占多大的寬度好了，所以發貼時候會看著寬一些，再博客裏看會窄一些，取決於網頁給了貼子多大的寬度了。這個邊框大家可以任意發揮，你可以用不同顏色，兩個框框分別是用不同顏色也好看，可以用三個邊框，四個邊框，可以調節寬度，讓它窄一點也行，底圖可以換成不同的圖片。圖片可以在網上找，搜索一下網頁素材，就一大堆一大堆的圖。
第二句：歌曲標題來回動
<*center*><*FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=gray); WIDTH: 50%; COLOR: #97CBFF; LINE-HEIGHT: 150%; FONT-FAMILY: 華文彩雲"*><*B*><*marquee behavior=alternate*>不想讓你哭<*/marquee*><*/B*><*/FONT*><*br*><*br*>
現在就要介紹這個Marquee, 基本語法就是marquee你想要動的東西/marquee marquee有很多參數可以設定，就定了你要動的東西怎麽動，往哪個方向動，來回循環還是就一次，運動的速度等等。這裏我想讓這個“不想讓你哭”動起來，來回動，那我就設置marquee的behavior是alternate就好了。另外還有scroll, slide兩種屬性，scroll, 就是一圈一圈的走，slide就是像幻燈片一樣走一次就完了，你可以自己嚐試一下看看效果。在這句裏麵我還定義了字體的顯示，font這個句法是來定義字體的，在它的style定義句中，我把自號定為40號，另外我加上了影子，影子的效果是灰色的, shadow(color=gray)，要注意用firefox是看不出來這個陰影效果的。寬度是50%顯示，這樣子就在table內部中央50%的寬度內來回走了，字體本身的顏色是和邊框相同的顏色，你也可以用其它顏色。lineheight就是行間句，150%就是空行1.5，但因為“不想讓你哭“就一行，所以沒用。字體我定義的是華文彩雲，但是如果你的電腦是英文係統有沒有安裝中文字體，你是看不出來空心的華文彩雲字體的。
第三句：圖片slide show
<*marquee height="338" width=80% deplay="0" loop="infinite" direction='left'scrollamount="3"*> <*img onload="javascript:if(this.width>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/4e066d58bdd79fff9d82042c.jpg"><*img onload="javascript:i(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/d1a2eace160cf918b700c82d.jpg"*><*/marquee*><*br*><*br*>
還是這個marquee, 讓這些圖片動起來形成slideshow效果，注意高度要定義成圖片高度，寬度是80%,也就是要顯示在表格中央80%的寬度區域內。方向是向左，loop是控製它無限次的運轉，scrollamount控製速度，數字越小越動的慢，可以自己調試，我這裏用的是3。注意圖片是提前找好的，並且改成了統一大小並上傳的。圖片的顯示用img src就行了。
第四句： 滾動歌詞
<*marquee direction=up scrollamount=1*><*center*><*FONT style="FONT-SIZE:18pt;filter:glow(color=gray,strength=4);WIDTH:100%; COLOR:crimson;LINE-HEIGHT:200%;FONT-FAMILY:華文行楷"*>總想對你有些話要說<*br*>可不知道該說些什麽<*br*>總想給你帶來些歡樂<*br*>可不知道你喜歡什麽<*br*>過了一夜又多了一天<*br*>時間讓人變得好心煩<*br*>不知何時又才能見麵<*br*>難道就這樣天各一邊<*br*>我不想讓你哭 我也不想認輸<*br*>隻想用我的愛 再次把你留住<*br*>誰的眼淚隨風飄向了遠處<*br*>那也是我在為你祝福<*br*>我不想讓你哭 我也不想認輸<*br*>隻想用我的愛 再次把你留住<*br*>如果愛情就是 我這場的賭注<*br*>輸了你也就等於 輸了全部 <*br*><*/font*><*/center*><*/marquee*><*center*><*br*><*br*> 接下來是滾動歌詞了，還是依舊使用marquee來使文字運動起來，隻不過是向上滾動顯示，速度是1。行間距是兩倍，對字體的定義和歌名的定義有幾處不同，字號要小，陰影效果變成了閃光效果，還是灰色，但是是在字的周圍包了一層灰色，firefox還是看不到的。字體定義成為華文行楷。自體本身的顏色我設成了紅色：crimson 我這裏有一個英文顏色名稱對照表，你可以參考： http://school.21tx.com/2005/08/15/12819.html
第五句：播放器
<*embed onload="javascript:if(this.width>450) this.width=450" src="http://space.wenxuecity.com/media/1245569215.mp3" width=300 height=40 controls=ControlPanel loop=true autostart=true volume=100 type=audio/x-pn-realaudio-plugin Initfn=load-types mime-types=mime.types*>
哈哈，偷懶啦，到文學城發新貼的地方去搞個自動生成的code就行了。鏈接：http://web.wenxuecity.com/BBSAdd.php?SubID=ktv
第六句：下載鏈接和結束
<*br*><*a href="http://space.wenxuecity.com/media/1245569215.mp3" target="_blank"*>下載鏈接<*/a*><*center*><*/TD*><*/TR*><*/TBODY*><*/TABLE*><*/TD*><*/TR*><*/TBODY*><*/table*>
提供一個歌曲文件超級鏈接，以供聽不到音樂的人下載收聽。結束句就是結束第一句裏麵的兩個table，現在table裏麵東西就都寫完了。 整個貼字沒有使用一個flash, 沒有使用一個div模塊，純靠html語言來搞效果，也不錯。
-----用的時候必須把*號全部去掉
<*TABLE borderColor=#97CBFF cellpadding="8" width="100%" border=8 background="http://i42.tinypic.com/6tedmw.gif"*><*TBODY*><*TR*><*TD*><*TABLE borderColor=#97CBFF cellpadding="8" width="100%" border=8 background=http://www.sucai123.com/sucai/img4/639/b057.gif*><*TBODY*><*TR*><*TD*><*center*><*FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=gray); WIDTH: 50%; COLOR: #97CBFF; LINE-HEIGHT: 150%; FONT-FAMILY: 華文彩雲"*><*B*><*marquee behavior=alternate*>不想讓你哭<*/marquee*><*/B*><*/FONT*><*br*><*br>*<*marquee height="338" width=80% deplay="0" loop="infinite" direction='left'scrollamount="3"*> <*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/4e066d58bdd79fff9d82042c.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/5e6bf6f7948db403730eec2d.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/756ab04a21796a0208f7ef23.jpg"*><*img onload="javascript:if(this.width>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/764ee295e2a62e297af4802c.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/896b68dd929e81155882dd20.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/9a4aa5af1cd967dafaed5024.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/d1a2eace160cf918b700c82d.jpg"*><*/marquee*><*br*><*br*><*marquee direction=up scrollamount=1*><*center*><*FONT style="FONT-SIZE:18pt;filter:glow(color=gray,strength=4);WIDTH:100%; COLOR:crimson;LINE-HEIGHT:200%;FONT-FAMILY:華文行楷"*>總想對你有些話要說<*br*>可不知道該說些什麽<*br*>總想給你帶來些歡樂<*br*>可不知道你喜歡什麽<*br*>過了一夜又多了一天<*br*>時間讓人變得好心煩<*br*>不知何時又才能見麵<*br*>難道就這樣天各一邊<*br*>我不想讓你哭 我也不想認輸<*br*>隻想用我的愛 再次把你留住<*br*>誰的眼淚隨風飄向了遠處<*br*>那也是我在為你祝福<*br*>我不想讓你哭 我也不想認輸<*br*>隻想用我的愛 再次把你留住<*br*>如果愛情就是 我這場的賭注<*br*>輸了你也就等於 輸了全部 <*br*><*/font*><*/center*><*/marquee*><*center*><*br*><*br*><*embed onload="javascript:if(this.width*>450) this.width=450" src="http://space.wenxuecity.com/media/1245569215.mp3" width=300 height=40 controls=ControlPanel loop=true autostart=true volume=100 type=audio/x-pn-realaudio-plugin Initfn=load-types mime-types=mime.types *><*br*><*a href="http://space.wenxuecity.com/media/1245569215.mp3" target="_blank"*>下載鏈接<*/a*><*center*><*/TD*><*/TR*><*/TBODY*><*/TABLE*><*/TD*><*/TR*><*/TBODY*><*/table*><*/body*> <*/html*>
##########################################################################################################
石頭製貼講座之四（閃字和水波紋的製作）
這首《藍色的故鄉》還是上次紅卡請我一起合唱的，很好聽的一首歌。但是當時伴奏有問題，怎麽也搞不定，隻能換別的歌。現在伴奏終於好了，但是感覺唱得很雷人，象催眠曲。大家湊活聽。今天要講的是閃字和水波紋的製作，從這堂課起，就不再講基礎知識了，開始傳授高級課程。
1）閃字的製作漂亮的歌名閃閃發亮，其實是一個小的GIF圖片，製作非常簡單。去百度搜索一下“閃字製作“，就會有好多網站出來了，隨便選一個。 http://www.shanziba.com/ 在這些網站輸入你想要製作的字，選中你想要的樣子，點擊“生成閃字”或“效果預覽”，漂亮的閃字就出來了，就這麽簡單。然後把做好的字存在你的電腦硬盤裏麵，以後再上傳到tinypic等網站就可以調用了。使用的時候就是用一般的貼圖語句就好了，比如〈img〉等。這就是我做好的標題：
2）水波紋的製作這種歌唱自然景色的歌曲很適合來個帶水麵的景色圖片，而動感逼真的水波紋需要一個軟件來製作。到這裏下載：點擊這裏下載！ Sqirlz Water Reflections軟件是專門用來給圖片做動態美工的軟件，用該軟件做出來的flash水波紋效果極棒 ，另外它還可以製作下雨的動畫和水滴入水的波瀾。水波紋提供了5種動畫類型，其參數也相當豐富，如水波幅度、波紋方向、亮度、透視、透明度及漣漪特性等。各參數的配合、調整可以使你得到極其豐富的波紋效果，能夠滿足自然界各種波紋景象，SWR的使用也很簡單，如果你隻考慮缺省效果，那麽產生一個作品隻需載入圖片、選定區域、保存swf文件這三步。選區的操作除了移動，還有平滑和“組合”選區（比如可以組合出一個類似“馬蹄形”的選區）等。 除了可以保存為SWF文件，它還能為AVI視頻動畫添加波紋，當然還有靜 態的水波效果 安裝好以後，就可以打開使用了。
首先要把圖搞好，我找了這麽一幅圖： 裏麵有一半的內容全是水麵，可以用水波紋把水麵動起來。
第一步：首先打開軟件，然後點擊綠色folder打開你想要製作的圖片。
第二步：用左邊第一個工具（藍箭頭所指）來選定你想要變成波紋的區域，下圖虛線範圍之內的東西都要被變成波紋。
第三步：選擇波紋頻率也就是動的快慢，我選了10，你可以多嚐試些數字。
第四步：波紋的形勢有5種不同的波紋，你可以挨個試試，哪個好看用哪個。但要注意選擇100%透明。
第五步：保存flash文件選擇這個隻保存波紋，不用保存全圖，否則文件太大。在按這個導出swf文件：選擇圖像質量，越高的質量文件越大：確定並導出：
第六步：導出完畢一定要記錄下swf文件的尺寸，以後有用 這是最後成品，一個flash文件，上傳到文學城空間拿到link備用，使用的時候就像調用其他的flash一樣，放到恰當的位置就行了。大小就是最後告訴你的大小。到此製貼講座已經有四講了，現在要求同鞋們趕緊交作業，否則我可要考試了！
評論
目前還沒有任何評論
登錄後才可評論.
