分享

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

 wuyuwuqiu 2010-08-09
HTMLI代码音画介绍之一

 

--基本原理和音画边框的制作

    谨以此系列篇献给需要学习HTML代码音画的紫雨朋友们。晕,写这篇教程,熬了几个深夜。欣慰的是,紫雨的教程是自己用心写出来的,绝不雷同。是紫雨对朋友的责。

    HTML音画最大的好处是简便易学,效果美观。它不需要软件,又可胜于和取代信纸。熟能生巧,特别适合于时间紧张的朋友和文人墨客。昨晚紫雨的联师联友都来了,这令紫雨大为感动,也更不敢懈怠和造次。急于把自己的领悟写出来。这厢紫雨向我的朋友们致歉,紫雨暂时耽搁回访,等完成了教程以后,紫雨定当上门答谢。

初步计划介绍五个内容:

 1、HTML音画介绍之一:基本原理和边框的制作
 
 2、HTML音画介绍之二:运用各种代码编辑特效图片

   3、HTML音画介绍之三:运用各种代码编辑特效文字

   4、HTML音画介绍之四:运用各种代码,制作图文并排的音画贴。

   5、在线制作小工具介绍,出人意外的简便快捷

 一、关于HTML代码音画的基本概念

 1、 概念:

         HTML代码,就是网页代码,HTML代码的英文全称HypertextMarked Language,中文叫做“超文本标记语言”。通使用HTML代码,可以巧妙的将多种元素组合在一起形成漂亮的音画帖。它是一种用来制作超文本文档的简单标记语言。所谓标记,就是它采用了一系列的指令符号来控制输出的效果。

            需要说明的是,HTML代码是一种网络语言,世界任何网页通用。但是QQ空间不是完全开放的网页,因此有的代码在QQ空间不通用,凡是紫雨试下来不见效果的,就暂不推荐。

           但是也接近囊括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静态图,也可以是gif动画图,如要效果好,一般多选用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、

 

3、在最里面两层用删除键调节距离

    点:编辑---用鼠标找第三层左上端,点一下删除键:Backspsce;再用鼠标找第四层左上端,点一下删除键:Backspsce。删除键就是有一个左箭头的,向前删除的键。这个作用是为了调节边框等距离,有时不用它也行。

4、接着做边框第二格。

    好,一个简易边框就做成了。做边框第二格,鼠标点:编辑---在第一格下面第一层上,左端的定光标,如果需要距离相隔多点,就按回车键,如果距离太大了,就按删除键Backspace,直到满意为止---依次再做一遍第二层到第四层的步骤就行了。如果要制作更多格,方法依次类推。

5、获取“源代码”:

OK!边框制作完成。

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

 1、  把源代码放到日志里: 打开自己的空间写日志,点日志编辑窗口上的“高级”,点“HTML”,把窗口里面的符号删干净,定好光标,然后把源代码粘贴到空处,点“返回”,就出现你制作的边框了。

    什么?你看到有2组四个以“http”当头的有下划线的蓝色的图片地址。你再复制粘贴所有源代码,把其中的2组四个图片地址换成你选中的其他图片地址。其他代码你都不用代码制作边框!

   为了便于大家制作边框,紫雨发表几篇素材,全是网站的图片,表明均已上传过,因此可以放心使用。特效文字的代码和制作。如果你看了这篇教程,回过头来再去看我转来的想入非非的日志,如果看得懂,那就表明本篇日志有点价值了。

   万事开头难,本篇是有点难度。但是本篇你懂了,接下来只不过给你一系列公式,你只要依葫芦画瓢就行!

后记:

紫雨醉心文字,向来不愿写制作教程,太费时间。只因营造诗词意境和防止诗词被窃而自学了几个软件的制作。纯属自娱自乐。 

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

一是我的朋友大多是文人墨客,其中落世缘梦、一笑、仙翁同时也是制图高手。但毕竟有许多诗友不可能花太多时间用于制作,而HTML代码音画则是无需软件,简便快捷就能图文并茂营造意境,紫雨有心为我的诗友们尽点心意;

二是近来找紫雨想学HTML代码音画的朋友太多,况且都是我的好友或者我挚友的好友,实难推却;

三是我曾遇到一个所谓HTML音画高手。漫天要价,而教程却是故弄玄虚,云里雾里,令人摸不到北。如此简单的技艺却令人望而生畏,紫雨着实为朋友忧心。

其实HTML代码音画非常简单。如果不是限于篇幅,我可以一篇日志就能讲完所有要点,然后你也立即就会制作一篇完整的音画贴。

朋友们都比紫雨聪明,你一定能行!即使一点不熟悉制作,但只要你会编辑日志,你就也是一定能行!

另外声明一点,HTML代码音画是紫雨百度了许多博客参考资料,在编辑器上做过反复试验,又结交了想入非非、深秋红叶朋友。这些都给了紫雨许多启发和指导。

所以紫雨教程只是HTML代码音画的概括和领悟,不是紫雨本人的发明创造,而且紫雨的音画作品也不比高手制作的好。在此谢过所有知名的和无名的音画高手们。

紫雨空间有许多F8、PS、U5、3D等软件制作和HTML高手,友。本日志让你们见笑了。敬请指教!

http://ywlfy666./

 

 

 

紫雨空间有许多F8、PS、U5、3D等软件制作和HTML高手,友。本日志让你们见笑了。敬请指教!

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多