--基本原理和音畫邊框的制作
謹(jǐn)以此系列篇獻(xiàn)給需要學(xué)習(xí)HTML代碼音畫的紫雨朋友們。暈，寫這篇教程，熬了幾個(gè)深夜。欣慰的是，紫雨的教程是自己用心寫出來(lái)的，絕不雷同。這是紫雨對(duì)朋友的負(fù)責(zé)。
HTML音畫最大的好處是簡(jiǎn)便易學(xué)，效果美觀。它不需要軟件，又可勝于和取代信紙。熟能生巧，特別適合于時(shí)間緊張的朋友和文人墨客。昨晚紫雨的聯(lián)師聯(lián)友都來(lái)了，這令紫雨大為感動(dòng)，也更不敢懈怠和造次。急于把自己的領(lǐng)悟寫出來(lái)。這廂紫雨向我的朋友們致歉，紫雨暫時(shí)耽擱回訪，等完成了教程以后，紫雨定當(dāng)上門答謝。
初步計(jì)劃介紹五個(gè)內(nèi)容：
3、HTML音畫介紹之三：運(yùn)用各種代碼編輯特效文字
5、在線制作小工具介紹，出人意外的簡(jiǎn)便快捷
一、關(guān)于HTML代碼音畫的基本概念
1、 概念：
HTML代碼，就是網(wǎng)頁(yè)代碼，HTML代碼的英文全稱HypertextMarked Language，中文叫做“超文本標(biāo)記語(yǔ)言”。通過使用HTML代碼，可以巧妙的將多種元素組合在一起形成漂亮的音畫帖。它是一種用來(lái)制作超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言。所謂標(biāo)記，就是它采用了一系列的指令符號(hào)來(lái)控制輸出的效果。
需要說(shuō)明的是，HTML代碼是一種網(wǎng)絡(luò)語(yǔ)言，世界任何網(wǎng)頁(yè)通用。但是QQ空間不是完全開放的網(wǎng)頁(yè)，因此有的代碼在QQ空間不通用，凡是紫雨試下來(lái)不見效果的，就暫不推薦。
但是也接近囊括QQ空間的日志編輯HTML代碼了。
3、制作代碼音畫主要手段（務(wù)請(qǐng)搞懂牢記）：
4、關(guān)于圖片地址（務(wù)請(qǐng)搞懂牢記）：
5、 關(guān)于編輯狀態(tài)切換互用（務(wù)請(qǐng)搞懂牢記）：
二、關(guān)于音畫邊框的制作原理
（制作規(guī)律，一通百通，務(wù)請(qǐng)搞懂牢記）
音畫邊框的制作，有兩種方法：
一是在HTML在線編輯器上制作，這是最基本的手段；
鑒于初學(xué)者還不熟悉代碼，本篇日志先就第一種方法介紹音畫邊框的制作。
但是最后，你會(huì)有意外的驚喜---用代碼制作音畫邊框，你也行！
我們先打開HTML在線編輯器
即：HTML在線編輯器：http://ny.xmu.edu.cn/editor.asp
此地址請(qǐng)保存好，以后常用。
先了解一下編輯器功能（很重要，務(wù)請(qǐng)搞懂牢記）：
這就是編輯器界面的上端，在最后一排圖標(biāo)中，第九個(gè)圖標(biāo)，你把鼠標(biāo)對(duì)準(zhǔn)它，就出現(xiàn)字樣：“插入表格”，這就是專門制作邊框的圖標(biāo)，請(qǐng)牢記。其余圖標(biāo)可以忽略。
這是編輯器界面的下端，注意第一至第三個(gè)圖標(biāo)：“編輯”、“源代碼”、“預(yù)覽”三項(xiàng)，主要是前兩項(xiàng)，其余圖標(biāo)和數(shù)據(jù)可以忽略。
3、點(diǎn)編輯，然后把光標(biāo)定在編輯器界面最頂端，如下圖：
4、點(diǎn)“插入表格”，出現(xiàn)一張圖：
我們先來(lái)認(rèn)識(shí)一下這圖：
插入表格主要設(shè)置介紹（很重要，務(wù)請(qǐng)搞懂牢記）：
1】、邊框粗細(xì)（指邊線粗細(xì)）可以根據(jù)需要調(diào)整，一般在0---5之間；有個(gè)1-2就可見一個(gè)細(xì)邊條。本日志邊框第三層，紫雨就設(shè)置了2.
2】、單元間距、單元邊距主要是根據(jù)圖片的完整體現(xiàn)進(jìn)行寬、高度調(diào)整。比如紫雨選用的第一張圖是一朵花，為了完整體現(xiàn)花，所以設(shè)置單元間距和邊距為45。這是屬于大邊了。
4】、再下面的表格尺寸和表格樣式的前三個(gè)都別去管它。
5】、只要在表格樣式的最后一個(gè)：“背景圖片”粘帖進(jìn)所選好的一個(gè)圖片地址（注意，這里隨圖片地址的變化，就會(huì)出現(xiàn)一層層的圖片效果，可以是jpg靜態(tài)圖，也可以是gif動(dòng)畫圖，如要效果好，一般多選用gif動(dòng)畫圖）。點(diǎn)：“確定”，就可見一層效果。
6】、然后再點(diǎn)：“編輯”，把光標(biāo)放在第一層的左端中間。如圖：
以后每層都是在確定后見到效果，然后再點(diǎn)--編輯---定光標(biāo)--開始下一層的設(shè)置。
以上原理搞懂了，接下來(lái)制作邊框就可以按照原理舉一反三，隨心所欲地制作邊框了。
紫雨特意把原理提煉出來(lái)，是為了給大家一個(gè)方法（規(guī)律），與其給你一條魚，不如給你一根釣竿，讓你得到更多的魚。掌握了這個(gè)方法，千姿百態(tài)的邊框你完全可以任意發(fā)揮。
三、邊框制作步驟實(shí)例介紹
先看一個(gè)邊框效果：字
這是紫雨制作的一個(gè)四層兩格的邊框（多格邊框）。
下面紫雨講這個(gè)邊框制作步驟：
1、建立一個(gè)word文檔，先找好圖片素材，復(fù)制其屬性，黏貼到文檔里并給他們編好號(hào)，第一層是1號(hào)，依次類推。
朋友們制作時(shí)只需復(fù)制地址就行，不必復(fù)制圖片本身，紫雨這里是為了大家直觀方便。
4】、http://gxlan
2、好，下面我們進(jìn)入在線編輯器制作：
分四層設(shè)置。
第一層：點(diǎn)：編輯--定光標(biāo)--點(diǎn)“插入表格”---
在這張圖上設(shè)置：表格行數(shù)和列數(shù)：1；對(duì)齊方式：“居中”；邊框粗細(xì)：0；單元間距和邊距：45， 在背景圖片處粘貼第一層圖片地址。
點(diǎn)確定，我們就看到第一層效果：
第二層：點(diǎn)：編輯--在圖片第一層左端定光標(biāo)--點(diǎn)“插入表格”---
點(diǎn)：編輯--在第二層左端定光標(biāo)---點(diǎn)“插入表格”---在這張圖上設(shè)置：表格行數(shù)和列數(shù)：1；對(duì)齊方式：“居中”；邊框粗細(xì)：0；單元間距和邊距：5
在背景圖片處粘貼 第四層圖片地址，點(diǎn)：確定
出來(lái)效果。
3、
3、在最里面兩層用刪除鍵調(diào)節(jié)距離
點(diǎn):編輯---用鼠標(biāo)找第三層左上端，點(diǎn)一下刪除鍵：Backspsce；再用鼠標(biāo)找第四層左上端，點(diǎn)一下刪除鍵：Backspsce。刪除鍵就是有一個(gè)左箭頭的，向前刪除的鍵。這個(gè)作用是為了調(diào)節(jié)邊框等距離，有時(shí)不用它也行。
4、接著做邊框第二格。
好，一個(gè)簡(jiǎn)易邊框就做成了。做邊框第二格，鼠標(biāo)點(diǎn)：編輯---在第一格下面第一層上，左端的定光標(biāo)，如果需要距離相隔多點(diǎn)，就按回車鍵，如果距離太大了，就按刪除鍵Backspace，直到滿意為止---依次再做一遍第二層到第四層的步驟就行了。如果要制作更多格，方法依次類推。
5、獲取“源代碼”：
OK！邊框制作完成。
點(diǎn)：全選，復(fù)制“源代碼”。
1、 把源代碼放到日志里： 打開自己的空間寫日志，點(diǎn)日志編輯窗口上的“高級(jí)”，點(diǎn)“HTML”，把窗口里面的符號(hào)刪干凈，定好光標(biāo)，然后把源代碼粘貼到空處，點(diǎn)“返回”，就出現(xiàn)你制作的邊框了。
什么？你看到有2組四個(gè)以“http”當(dāng)頭的有下劃線的藍(lán)色的圖片地址。你再?gòu)?fù)制粘貼所有源代碼，把其中的2組四個(gè)圖片地址換成你選中的其他圖片地址。其他代碼你都不用代碼制作邊框！
為了便于大家制作邊框，紫雨發(fā)表幾篇素材，全是網(wǎng)站的圖片，表明均已上傳過，因此可以放心使用。特效文字的代碼和制作。如果你看了這篇教程，回過頭來(lái)再去看我轉(zhuǎn)來(lái)的想入非非的日志，如果看得懂，那就表明本篇日志有點(diǎn)價(jià)值了。
萬(wàn)事開頭難，本篇是有點(diǎn)難度。但是本篇你懂了，接下來(lái)只不過給你一系列公式，你只要依葫蘆畫瓢就行！
后記：
紫雨醉心文字，向來(lái)不愿寫制作教程，太費(fèi)時(shí)間。只因營(yíng)造詩(shī)詞意境和防止詩(shī)詞被竊而自學(xué)了幾個(gè)軟件的制作。純屬自?shī)首詷贰?nbsp;
但是這次紫雨不得已而寫起制作教程，緣于三點(diǎn)：
一是我的朋友大多是文人墨客，其中落世緣夢(mèng)、一笑、仙翁同時(shí)也是制圖高手。但畢竟有許多詩(shī)友不可能花太多時(shí)間用于制作，而HTML代碼音畫則是無(wú)需軟件，簡(jiǎn)便快捷就能圖文并茂營(yíng)造意境，紫雨有心為我的詩(shī)友們盡點(diǎn)心意；
二是近來(lái)找紫雨想學(xué)HTML代碼音畫的朋友太多，況且都是我的好友或者我摯友的好友，實(shí)難推卻；
三是我曾遇到一個(gè)所謂HTML音畫高手。漫天要價(jià)，而教程卻是故弄玄虛，云里霧里，令人摸不到北。如此簡(jiǎn)單的技藝卻令人望而生畏，紫雨著實(shí)為朋友憂心。
其實(shí)HTML代碼音畫非常簡(jiǎn)單。如果不是限于篇幅，我可以一篇日志就能講完所有要點(diǎn)，然后你也立即就會(huì)制作一篇完整的音畫貼。
朋友們都比紫雨聰明，你一定能行！即使一點(diǎn)不熟悉制作，但只要你會(huì)編輯日志，你就也是一定能行！
另外聲明一點(diǎn)，HTML代碼音畫是紫雨百度了許多博客參考資料，在編輯器上做過反復(fù)試驗(yàn)，又結(jié)交了想入非非、深秋紅葉朋友。這些都給了紫雨許多啟發(fā)和指導(dǎo)。
所以紫雨教程只是HTML代碼音畫的概括和領(lǐng)悟，不是紫雨本人的發(fā)明創(chuàng)造，而且紫雨的音畫作品也不比高手制作的好。在此謝過所有知名的和無(wú)名的音畫高手們。
紫雨空間有許多F8、PS、U5、3D等軟件制作和HTML高手，友。本日志讓你們見笑了。敬請(qǐng)指教！ http://ywlfy666.web-12.com/
紫雨空間有許多F8、PS、U5、3D等軟件制作和HTML高手，友。本日志讓你們見笑了。敬請(qǐng)指教！
聯(lián)系客服
