HTML音画介绍之一--基本原理和边框的制作

来源:百度文库 编辑:神马文学网 时间:2024/03/29 21:08:22
 

 

 

谨以此系列篇献给需要学习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、在最里面两层用删除键调节距离

 

点:编辑---用鼠标找第三层左上端,点一下删除键:Backs

 

psce;再用鼠标找第四层左上端,点一下删除键:Backsps

 

ce。删除键就是有一个左箭头的,向前删除的键。这个作

 

用是为了调节边框等距离,有时不用它也行。

 

 

4、接着做边框第二格。

 

好,一个简易边框就做成了。做边框第二格,鼠标点:编

 

辑---在第一格下面第一层上,左端的定光标,如果需要距

 

离相隔多点,就按回车键,如果距离太大了,就按删除键B

 

ackspace,直到满意为止---依次再做一遍第二层到第四层

 

的步骤就行了。

 

如果要制作更多格,方法依次类推。

 

 

5、获取“源代码”:

 

OK!边框制作完成。

 

 点编辑器左下方的“源代码”,便得到了边框的代码

 

 点:全选,复制“源代码”。

 

 

 6、这时请你做两件事

 

    1、  把源代码放到日志里: 打开自己的空间写日

 

志,点日志编辑窗口上的“高级”,点“HTML”,把窗口

 

里面的符号删干净,定好光标,然后把源代码粘贴到空

 

处,点“返回”,就出现你制作的边框了。

 

 

2、把源代码粘帖到你原先备好的word文档,这时你看见了

 

什么?你看到有2组四个以“http”当头的有下划线的蓝色

 

的图片地址。你再复制粘贴所有源代码,把其中的2组四个

 

图片地址换成你选中的其他图片地址。其他代码你都不

 

变,哇,又出现了一个新边框!就这么简单。这就是纯粹

 

用代码制作边框!

 

 

到此,你对代码已经开始熟悉,是意外之喜吧?


 

为了便于大家制作边框,紫雨发表几篇素材,全是网站的

 

图片,表明均已上传过,因此可以放心使用。

 

本篇一二部分尤为重要,它决定我们以后理解特效图片和

 

特效文字的代码和制作。如果你看了这篇教程,回过头来

 

再去看我转来的想入非非的日志,如果看得懂,那就表明

 

本篇日志有点价值了。

 

万事开头难,本篇是有点难度。但是本篇你懂了,接下来

 

只不过给你一系列公式,你只要依葫芦画瓢就行!

 

紫雨祝朋友们顺利安康快乐!

 

 

后记:

 

紫雨醉心文字,向来不愿写制作教程,太费时间。只因营

 

造诗词意境和防止诗词被窃而自学了几个软件的制作。纯

 

属自娱自乐。 

 

但是这次紫雨不得已而写起制作教程,缘于三点

 

 

一是我的朋友大多是文人墨客,其中落世缘梦、一笑、仙

 

同时也是制图高手。但毕竟有许多诗友不可能花太多时

 

间用于制作,而HTML代码音画则是无需软件,简便快捷就

 

能图文并茂营造意境,紫雨有心为我的诗友们尽点心意;

 

 

二是近来找紫雨想学HTML代码音画的朋友太多,况且都是

 

我的好友或者我挚友的好友,实难推却;

 

 

三是我曾遇到一个所谓HTML音画高手。漫天要价,而教程

 

却是故弄玄虚,云里雾里,令人摸不到北。如此简单的技

 

艺却令人望而生畏,紫雨着实为朋友忧心。

 

 

其实HTML代码音画非常简单。如果不是限于篇幅,我可以

 

一篇日志就能讲完所有要点,然后你也立即就会制作一篇

 

完整的音画贴。

 

朋友们都比紫雨聪明,你一定能行!即使一点不熟悉制

 

作,但只要你会编辑日志,你就也是一定能行!

 

另外声明一点,HTML代码音画是紫雨百度了许多博客参考

 

资料,在编辑器上做过反复试验,又结交了想入非非、深

 

秋红叶朋友。这些都给了紫雨许多启发和指导。

 

 

所以紫雨教程只是HTML代码音画的概括和领悟,不是紫雨

 

本人的发明创造,而且紫雨的音画作品也不比高手制作的

 

好。在此谢过所有知名的和无名的音画高手们。

 

 

紫雨空间有许多F8、PS、U5、3D等软件制作和HTML高手,

 

香衫紫蝶、岷雪、星之光、花匠、梅晋、飘逸长风、天

 

鹰、倩影紫梦、一叶知秋、落叶、想入非非、云梦大侠、

 

未来等好友。本日志让你们见笑了。敬请指教!

http://ywlfy666.web-12.com/