偶看新闻男朋友的前任:HTML音画介绍之二：运用各种代码编辑特效图片（上） - Qzone日志
来源：百度文库 编辑：偶看新闻 时间：2024/04/27 23:12:53
日志
上一篇
下一篇
|返回日志列表
[转] HTML音画介绍之二：运用各种代码编辑特效图片（上） [图片]
- 分享
- 转载
- 复制地址
请用Ctrl+C复制后贴给好友。
转载自 188320571 2010年08月29日 20:31 阅读(loading...) 评论(0) 分类：紫雨制作教程
- 举报
- 字体：大▼
- 小
- 中
- 大
HTML音画 介绍之二 编辑 特效图片（上）
运用各种代码
HTML音画的第二个手段就是运用各种代码指令，对图片
进行特效处理，形成与音画边框相映生辉的音画贴。
本篇尽量将QQ空间能识别的图片特效代码，集中
码此，以方便朋友们取用。因容量太大，故将本日志
分为上下两篇。
关于图片地址的获得请详见紫雨教程1---直接点击：
HTML音画介绍之一--基本原理和边框的制作。
本篇我们还要了解三个概念：
代码。就是网页所识别的各种指令。本篇就是通过不
同的代码，来产生图片的不同特效。
我们重在方法和规律。暂时先记住下面两个主要点：
图片的维度（尺寸）。这很方便查找。就在我们点
开图片属性以后，在网页框上，地址的下面，有个
“维度（也叫尺寸）”，这个参数就是该图片的实
际宽和高。
颜色的代码。这在我们设置特效文字时会用的更多，
但是本篇日志里也有些图片效果需要设置颜色代码。
紫雨把颜色代码另外发篇日志，供朋友们选用。
一、QQ空间图片的代码特效种类
一般有如下几种：
（一）、羽化图片（常用）：
我们制作完边框，开始使用边框时，一定会对图片
颜色，怎样与边框最里层底色相一致而发愁吧。
过去，我们习惯于蕾丝黑屏风格底色，所以我们收
集了许多黑背景的图片，或者使用PS软件制作音画
大图，看去整篇日志很协调。
但在音画边框里，底色不一定是黑色的，有赤橙黄
绿青蓝紫等各种色彩。我们的图片颜色不一，但都
可以通过代码指令使图片与音画边框似出一炉。
这手法就是羽化图片。所谓羽化，就是把图片的周
边透明化，使图片放在任何边框里，底色是什么样
的色彩，图片周边也就与之相配。羽化图片的特效
有四个：一是长形羽化、二是圆形羽化；三是方形
羽化；四是走动羽化。
（二）、百叶窗图片：
就是把同一张或者2---4张图片连在一组代码里，出
现走动的闭合效果，形似竖形百叶窗。如果和闪烁
的底色或者有图案的底色相配，会给人以若隐若现的
视觉享受。
因为图片在百叶窗里显示，所以一般用同一张图片
效果更佳。
（三）、平行滚动图片
将多张图（最好维度相一致）放在一起从第一张图
到最后一张平行从右向左移动。
（四）、变异图片：通过各种代码指令，把一张图
片变形为另一种特异图片。
其效果一共有6个：波纹效果； 黑白效果；翻转效
果；底片效果；翻面效果；重影效果。
（五）、倒影图片：就是把同一张图片，通过代码
指令，出现图片的倒影。看似上下两张图。如果是
GIF动画图，则效果更佳。
（六）在背景图上写字和放图（推荐）。
外框是一个不靠图片，而靠颜色代码设置出来的
边条框，甚至无需边框条，就是一张底图做背景
图。可以在背景图上按常用编辑状态随心所欲编
辑图文，并随图文自由拉长变大。
但是背景图以全景为宜。不要变成第二张图。
（七）、滚动条边框（推荐）
是很奇妙的代码边框，在不靠图片而靠色彩
组成的边框条内，靠拉动滚动条，页面上的文字
或图片会慢慢的向上走，以致看到全部内容。很
实用。
（八）、FLASH效果。
用代码指令来将图和FLASH结合起来，出现更为
便捷和美观的效果。
这个效果也可以通过常用编辑来实现。用代码
的好处只是可以复制---黏贴效果图。就好比给
透明FLASH穿上了一件外衣，便于我们“抱”起
它。有的博主可以做出十多种效果。可是腾讯空
间有好多不识别，紫雨尚未调试到位的代码就暂
不介绍。
介绍两个：一是叠影效果，就是把透明FLASH连
放三幅，可以是同样的，也可以是不同的三幅
FLASH，通过代码叠加在一起，出现立体效果。
二是FLASH特效覆盖整篇日志。
（九）大图上加透明FLASH
一是靠大图，加透明FLASH，出现效果，可以像
图片一样，在边框外完成编辑，然后剪切---黏
贴进边框。
二是将FLASH和图通过代码指令形成双重效果
（这个调试是出来效果了，但是背景图过一会
就消失了，奇怪。朋友们可以把实例代码拿到
HTML状态下，点返回，就看到暂时的效果）。
（十）边条框
有时我们需要简洁的音画边框，只要起个信纸
作用即可。这时就需要靠颜色和代码来组成边
条框。效果见：长形羽化实例的边条框1和百
叶窗效果的边条框2。
二、图片代码特效的制作方法
很简单，制作步骤如下：
1、选图，存进电脑图片收藏夹----存进空间相册
（为了支撑日志图片）
保存后，全部引入到日志里来---然后我们开始找
每张图的地址和宽高度。---对准选中的图，鼠标
点击右键----出现一个菜单，点：属性，出现下
图所示：
上图中“地址URL”就是图片的地址，“维度”就是图
片的宽和高。有的对话框写的是“尺寸”，同样含义。
5、建立一个记事本或word文档，把选中的图地址
和宽度高度做好记录。为了备忘，可以对图片编序
或者起个图片名。
6、把图地址分别放进代码指令的“图地址”一栏，
再按图的实际宽度和高度修改代码的图宽度和高度
参数。
说明两点，一是有的指令只有图的宽度甚至宽度高
度都没有，这无妨，空间网页语言会自动识别其实
际高度；二是图的宽度一般不要超过500，因为边
框需要一定宽度。如果图片太大，你就按比例缩小
图片宽度和高度。
7、把你选用的图片都按要求编进图片特效代码以后，
全选-----复制。然后到日志编辑框里，把事先已经
放好的音画边框---转为高级编辑状态----进入HTML
编辑状态，会出现音画边框的一大堆代码。
8、别怕，你在代码最下面点三次回车键（这是为
了与边框拉开距离），黏贴你刚才复制的所有代码。
---好，点“返回”。
9、出现“所见即所得”实际效果。接下来，就是布局
特效图片了。分别把特效图：剪切一张----黏贴到你
需要的边框内位置；再剪切一张，黏贴进边框---依
次类推。
注意，必须一张张地剪切---黏贴。把特效图全部黏
贴进边框，预览---如果不满意，再换图片，重新修
改代码图地址和参数。再从第六步开始做起。
10、如果是多张走动的羽化图，也可以一张张地剪
切----黏贴，但是从第二张起，每一张都要紧贴第
一张的尾部，找到光标，然后黏贴，不管其在边框
内宽度是否够，只要紧贴前图---黏贴，尽管出现
几行图片，没关系，预览看看，嘿，在同一排走动
了。
11、开始其他常用编辑，可以设置图 可以写文字，
和以往编辑一样。满意了，OK!
----点发表。
三、各种特效图片的代码 通过对代码的设置，就会出现各种图片特效： 主要填上其中的图片地址和图片的宽度高度 （有时没有宽度、高度设置，或只有宽度设 置。没关系，有就填。没有，系统会自动识别）。 以及有的时候需要填上你选中的颜色代码。 再次，边条框和滚动条还需要设置边条框的粗 细，一般在5--15之间。 下面提供的代码，凡是有编号的（代码1--代码22）， 就是该效果的通用代码。只要填好你喜欢的图地址和 维度，就可以出效果了。 （一） 羽化图片的代码： 代码1、长形羽化代码： UND: none transparent scroll repeat 0% 0%; HEIGHT: 图高度px" alt="" src=" 图片地址" eventsListUID="e5" orgsrc=" 相同图片地址" quoteTimer="272716835"> 同一张图片分两次粘贴 适用于维度较大的图。 长图羽化实例：内图尺寸300---425（边条框1、实线边条框） 100,Style=2); WIDTH: 图宽度 px; BACKGRO
长形羽化实例代码：
style="BACKGROUND: none transparent
scroll repeat 0% 0%; FILTER: Alpha(Opa
city=100,Style=2); WIDTH: 300px; HEIGHT:
425px" alt="" src="
代码2、圆形羽化代码：
(opacity=100,style=2)"width=图宽，一般
在300—500之间>
代码3、方形羽化代码：
(opacity=100,style=3)"width=图宽，一般在
300—500之间
>
代码4，走动的羽化代码：
在300—500之间
>
（二）百叶窗图片代码（一般填用同一张图片地址）
代码5、百叶窗代码：
width="70%" align=center border=0>
百叶窗实例（边条框2--虚线边条框）
实例代码：