HTML音画介绍之一--基本原理和边框的制作（原创） - 紫寒燕雨的日志 - 网易博客

  紫雨文学音画世界
HTML音画介绍之一--基本原理和边框的制作（原创）
HTML音画介绍之一--基本原理和边框的制作（原创）
编辑 | 删除 | 权限设置 | 更多▼
紫雨    发表于2010年07月06日 00:30 阅读(60) 评论(48) 分类： 紫雨制作教程 权限: 公开
HTMLI代码音画介绍之一
--基本原理和音画边框的制作
谨以此系列篇献给需要学习HTML代码音画的紫雨朋友们。
晕，写这篇教程，熬了几个深夜。欣慰的是，紫雨的教程
是自己用心写出来的，绝不雷同。这是紫雨对朋友的负
责。
HTML音画最大的好处是简便易学，效果美观。它不需要软
件，又可胜于和取代信纸。熟能生巧，特别适合于时间紧
张的朋友和文人墨客。昨晚紫雨的联师联友都来了，这令
紫雨大为感动，也更不敢懈怠和造次。急于把自己的领悟
写出来。这厢紫雨向我的朋友们致歉，紫雨暂时耽搁回
访，等完成了教程以后，紫雨定当上门答谢。
初步计划介绍五个内容：
1、HTML音画介绍之一：基本原理和边框的制作
2、HTML音画介绍之二：运用各种代码编辑特效图片
3、HTML音画介绍之三：运用各种代码编辑特效文字
4、HTML音画介绍之四：运用各种代码，制作图文并排的音
画贴。
5、在线制作小工具介绍，出人意外的简便快捷
一、关于HTML代码音画的基本概念
1、 概念：
HTML代码，就是网页代码，HTML代码的英文全称是Hyperte
xt Marked Language，中文叫做“超文本标记语言”。通
过使用HTML代码，可以巧妙的将多种元素组合在一起形成
漂亮的音画帖。
它是一种用来制作超文本文档的简单标记语言。
所谓标记，就是它采用了一系列的指令符号来控制输出的
效果。
需要说明的是，HTML代码是一种网络语言，世界任何网页
通用。但是QQ空间不是完全开放的网页，因此有的代码在Q
Q空间不通用，凡是紫雨试下来不见效果的，就暂不推荐。
但是也接近囊括QQ空间的日志编辑HTML代码了。
2、代码音画主要表现：在QQ空间里，我们
使用HTML代码音画，主要是音画边框、特效图片、特效文
字以及图文并排，从而产生各种美不胜收的意境或效果。
至于音乐播放器隐藏代码，不用在HTML状态下编辑也行，
而且另有其他办法设置，紫雨放在最后一篇介绍。
3、制作代码音画主要手段（务请搞懂牢记）：
一是HTML在线编辑器。主要功能是制作边框（其他功能需
要注册，但紫雨还没找到注册处，况且目前为止其他功能
意义不大）。神奇在于对所选图片的大小均可不计，但是
把制成的边框放到空间里，就可以根据文图容量随意变宽
变长。
二是代码指令，从而形成文字和图图各种特效。效果可详
见紫雨日志:：雨纺冰纨、冰心翠玉晶如雪、鸾凤齐鸣千钟
醉。
以后，我们会对代码渐渐熟悉，紫雨会尽可能提供规律性
的原理、公式，便于大家套用代码指令制作图文特效甚至
边框，形成完整的音画贴。
4、关于图片地址（务请搞懂牢记）：
音画边框的素材和代码特效图图，均需要图片的地址。
这地址需把握两点：
一是对准所选图片点击右键，在出来的菜单最下面，有个
“属性”，点击它，出现一个框。
如下图：

其中的URL地址就是这图图的地址，有时地址会很长，你点
全选，然后复制地址待用；
还有一种取得图片地址法，就是用鼠标对准图片，如果出
现一个“手”的图标。双击它，图片单独跳出，那地址栏
内的地址就是图片地址。但是这法有个问题，就是不易发
觉地址是否经上传网站。如果仅是空间图片地址，编辑器
会拒绝QQ图片，那就在编辑器上多了个无效劳动。
二是在复制前仔细看URL上图片类型，是jpg或者gif类型
的，一般就没有问题。但有时会出现“不可用”字样，那
就是这图片没有在网站上正式上传过，这种图片绝对不能
用于制作边框。编辑器会拒绝这类图片。最好是上传网站
后得到地址。
如果不会上传，那么就上传到自己空间相册，得到图片属
性地址，可用于空间日志特效图片。建议大家尽量到网页
上寻找图片。
5、 关于编辑状态切换互用（务请搞懂牢记）：
在空间日志编辑时，我们平时使用的是“常用”状
态。而代码音画需要我们在“高级”和“常用”编辑状态
间切换互用。即在我们制作完边框后，将得到的代码复
制，来到日志编辑框里，如下图：

点“高级”，出现下图：

3、点HTML

然后清空所有符号，

黏贴代码（包括特效文字和特效图片的代码，都是这种方
法。以后就不赘述）

然后点“返回”，就看到效果了。
上述五条务请搞懂牢记，尤其是3、4、5条。这是代码音
画制作的基本手段。以后就不赘述。
二、关于音画边框的制作原理
（制作规律，一通百通，务请搞懂牢记）
制作音画边框，就是把图片一层层叠加，预留好图文位
置，形成与图文浑然一体又熠熠生辉的边框，给人以视觉
享受。
因此，边框的层数可多可少。少则一层，多则十多层。
一般建议在3-8层间，毕竟是边框，不能喧宾夺主。况且层
数太多，制作费力，给日志也带来压力，不易打开日志。
还有边框的格数，就是边框内有几个可以放图文的格子。
可以1---5个，再多日志就承受不了了，难以打开日志。
所以边框有简易边框（单格）和多格边框两种。
有的朋友如果仅仅需要信纸效果，那么就是一层也强于腾
讯信纸，因为这边框音画的图可以随意拉长变宽，而且都
有现成的PS音画素材用于制作。（素材另发）。
音画边框的制作，有两种方法：
一是在HTML在线编辑器上制作，这是最基本的手段；
二是依靠代码指令和数据来制作，方便简洁，依葫芦画
瓢。但须仔细，一不留神，少了哪个代码就会失效。
鉴于初学者还不熟悉代码，本篇日志先就第一种方法介绍
音画边框的制作。
但是最后，你会有意外的惊喜---用代码制作音画边框，你
也行！
我们先打开HTML在线编辑器
即：HTML在线编辑器：http://ny.xmu.edu.cn/editor.asp
此地址请保存好，以后常用。
先了解一下编辑器功能（很重要，务请搞懂牢记）：

这就是编辑器界面的上端，在最后一排图标中，第九个图
标，你把鼠标对准它，就出现字样：“插入表格”，这就
是专门制作边框的图标，请牢记。其余图标可以忽略。

这是编辑器界面的下端，注意第一至第三个图标：“编
辑”、“源代码”、“预览”三项，主要是前两项，其余
图标和数据可以忽略。
3、点编辑，然后把光标定在编辑器界面最顶端，如下图：

4、点“插入表格”，出现一张图：
我们先来认识一下这图：

插入表格主要设置介绍（很重要，务请搞懂牢记）：
1】、边框粗细（指边线粗细）可以根据需要调整，一般在
0---5之间；有个1-2就可见一个细边条。本日志边框第三
层，紫雨就设置了2.
2】、单元间距、单元边距主要是根据图片的完整体现进行
宽、高度调整。比如紫雨选用的第一张图是一朵花，为了
完整体现花，所以设置单元间距和边距为45。这是属于大
边了。
大边一般在20-100，小边一般在1-20；
3】、对齐方式全部为居中，熟记就行。
4】、再下面的表格尺寸和表格样式的前三个都别去管它。
5】、只要在表格样式的最后一个：“背景图片”粘帖进所
选好的一个图片地址（注意，这里随图片地址的变化，就
会出现一层层的图片效果，可以是jpg静态图，也可以是gi
f动画图，如要效果好，一般多选用gif动画图）
。
点：“确定”，就可见一层效果。
6】、然后再点：“编辑”，把光标放在第一层的左端中
间。如图：

以后每层都是在确定后见到效果，然后再点--编辑---定光
标--开始下一层的设置。
以上原理搞懂了，接下来制作边框就可以按照原理举一反
三，随心所欲地制作边框了。
紫雨特意把原理提炼出来，是为了给大家一个方法（规
律），与其给你一条鱼，不如给你一根钓竿，让你得到更
多的鱼。掌握了这个方法，千姿百态的边框你完全可以任
意发挥。
三、边框制作步骤实例介绍
先看一个边框效果：
字
这是紫雨制作的一个四层两格的边框（多格边框）。
下面紫雨讲这个边框制作步骤：
1、建立一个word文档，先找好图片素材，复制其属性，黏
贴到文档里并给他们编好号，第一层是1号，依次类推。
朋友们制作时只需复制地址就行，不必复制图片本身，紫
雨这里是为了大家直观方便。
1】、http://b47.photo.store.qq.com/http_imgload.cgi?/rurl4_b=c16586001905aa365424eee80d7ac70cdd6ffd05a114d2450716bd25699bbe14f126265ef4c94482f1cd733a2b2fc454a2f819e0e7ef78da043736f344122dfa9dc65cb89cfb7b4147b6292ccb95ebefdef8aae5&a=39&b=47)

2】、http://b31.photo.store.qq.com/http_imgload.cgi?/rurl4_b=f021868723df205a1431413632656e06d6077b42727a1587147eb0adbb2b43781c6057f55cb68bd9236974869938d2e7bcb87bc4d2c6be37c1ef4dad0259885f711403ecd84a956e880997953f485320f7d18983&a=38&b=31)

3】、http://b31.photo.store.qq.com/http_imgload.cgi?/rurl4_b=f021868723df205a1431413632656e067a789ea82bce911f3633620780c426049fb2ca8d59a5701669b3c730a588384790ad64ad6a360e072a8093e6ee26719ced19602a12de87d96f3c1aace09ff0559a65daab&a=38&b=31)

4】、http://gxlan88.16789.net/domName/gxlan88/20073232364226719.jpg

2、好，下面我们进入在线编辑器制作：
分四层设置。
第一层：
点：编辑--定光标--点“插入表格”---
在这张图上设置：表格行数和列数：1；对齐方式：“居
中”；边框粗细：0；单元间距和边距：45， 在背景图片
处粘贴第一层图片地址。

点确定，我们就看到第一层效果：
 
 
第二层：
点：编辑--在图片第一层左端定光标--点“插入表格”---
在这张图上设置：表格行数和列数：1；对齐方式：“居
中”；边框粗细：0；单元间距和边距：15
在背景图片处粘贴 第二层图片地址，点：确定

出来效果。
第三层：
点：编辑--在第二层左端定光标---点“插入表格”---
在这张图上设置：表格行数和列数：1；对齐方式：“居
中”；边框粗细：0；单元间距和边距：5
在背景图片处粘贴 第三层图片地址，点：确定

出来效果。
第四层
点：编辑--在第三层左端定光标---点“插入表格”---
在这张图上设置：表格行数和列数：1；对齐方式：“居
中”；边框粗细：2；单元间距和边距：6
在背景图片处粘贴 第四层图片地址，点：确定

出来效果。
3、
 
3、在最里面两层用删除键调节距离
点:编辑---用鼠标找第三层左上端，点一下删除键：Backs
psce；再用鼠标找第四层左上端，点一下删除键：Backsps
ce。删除键就是有一个左箭头的，向前删除的键。这个作
用是为了调节边框等距离，有时不用它也行。
4、接着做边框第二格。
好，一个简易边框就做成了。做边框第二格，鼠标点：编
辑---在第一格下面第一层上，左端的定光标，如果需要距
离相隔多点，就按回车键，如果距离太大了，就按删除键B
ackspace，直到满意为止---依次再做一遍第二层到第四层
的步骤就行了。
如果要制作更多格，方法依次类推。
5、获取“源代码”：
OK！边框制作完成。
点：全选，复制“源代码”。
1、  把源代码放到日志里： 打开自己的空间写日
志，点日志编辑窗口上的“高级”，点“HTML”，把窗口
里面的符号删干净，定好光标，然后把源代码粘贴到空
处，点“返回”，就出现你制作的边框了。
什么？你看到有2组四个以“http”当头的有下划线的蓝色
的图片地址。你再复制粘贴所有源代码，把其中的2组四个
图片地址换成你选中的其他图片地址。其他代码你都不
用代码制作边框！
为了便于大家制作边框，紫雨发表几篇素材，全是网站的
图片，表明均已上传过，因此可以放心使用。
特效文字的代码和制作。如果你看了这篇教程，回过头来
再去看我转来的想入非非的日志，如果看得懂，那就表明
本篇日志有点价值了。
万事开头难，本篇是有点难度。但是本篇你懂了，接下来
只不过给你一系列公式，你只要依葫芦画瓢就行！
后记：
紫雨醉心文字，向来不愿写制作教程，太费时间。只因营
造诗词意境和防止诗词被窃而自学了几个软件的制作。纯
属自娱自乐。
但是这次紫雨不得已而写起制作教程，缘于三点：
一是我的朋友大多是文人墨客，其中落世缘梦、一笑、仙
翁同时也是制图高手。但毕竟有许多诗友不可能花太多时
间用于制作，而HTML代码音画则是无需软件，简便快捷就
能图文并茂营造意境，紫雨有心为我的诗友们尽点心意；
二是近来找紫雨想学HTML代码音画的朋友太多，况且都是
我的好友或者我挚友的好友，实难推却；
三是我曾遇到一个所谓HTML音画高手。漫天要价，而教程
却是故弄玄虚，云里雾里，令人摸不到北。如此简单的技
艺却令人望而生畏，紫雨着实为朋友忧心。
其实HTML代码音画非常简单。如果不是限于篇幅，我可以
一篇日志就能讲完所有要点，然后你也立即就会制作一篇
完整的音画贴。
朋友们都比紫雨聪明，你一定能行！即使一点不熟悉制
作，但只要你会编辑日志，你就也是一定能行！
另外声明一点，HTML代码音画是紫雨百度了许多博客参考
资料，在编辑器上做过反复试验，又结交了想入非非、深
秋红叶朋友。这些都给了紫雨许多启发和指导。
所以紫雨教程只是HTML代码音画的概括和领悟，不是紫雨
本人的发明创造，而且紫雨的音画作品也不比高手制作的
好。在此谢过所有知名的和无名的音画高手们。
紫雨空间有许多F8、PS、U5、3D等软件制作和HTML高手，
友。本日志让你们见笑了。敬请指教！
http://ywlfy666.web-12.com/
 
 
 
紫雨空间有许多F8、PS、U5、3D等软件制作和HTML高手，
友。本日志让你们见笑了。敬请指教！
http://ywlfy666.web-12.com/
朋友好炎热的夏天
【牵 手】
为了五百年的承诺
佛前的青莲
挣脱了污泥的束缚
跃出水面牵手欢颜
※
你清澈的眸里
许是露珠 许是酸泪
只是为了此时的等待
你羞涩地牵手忘怀
※
牵了手感到温暖
牵了手觉得颤抖
温暖意味了相逢
颤抖却怕会分手
※
星辰含羞躲藏
山峰感动俯首
多么地多么地期盼
牵手牵手牵到永久
共48篇评论，第1页/共4页
引文来源紫雨  HTML音画介绍之一--基本原理和边框的制作 - Qzone日志
本音画边框代码：