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./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./domName/gxlan88/20073232364226719.jpg     2、好，下面我们进入在线编辑器制作： 分四层设置。   第一层：   点：编辑--定光标--点“插入表格”---    在这张图上设置：表格行数和列数：1；对齐方式：“居   中”；边框粗细：0；单元间距和边距：45， 在背景图片   处粘贴第一层图片地址。     点确定，我们就看到第一层效果：         第二层： 点：编辑--在图片第一层左端定光标--点“插入表格”---    在这张图上设置：表格行数和列数：1；对齐方式：“居   中”；边框粗细：0；单元间距和边距：15    在背景图片处粘贴 第二层图片地址，点：确定     出来效果。   第三层：   点：编辑--在第二层左端定光标---点“插入表格”---    在这张图上设置：表格行数和列数：1；对齐方式：“居   中”；边框粗细：0；单元间距和边距：5    在背景图片处粘贴 第三层图片地址，点：确定       出来效果。   第四层   点：编辑--在第三层左端定光标---点“插入表格”---   在这张图上设置：表格行数和列数：1；对齐方式：“居   中”；边框粗细：2；单元间距和边距：6    在背景图片处粘贴 第四层图片地址，点：确定      出来效果。     3、