HTML音画介绍之二:运用各种代码编辑特效图片(上)
来源:百度文库 编辑:神马文学网 时间:2024/04/18 15:28:01
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、长形羽化代码: 同一张图片分两次粘贴 适用于维度较大的图。 长图羽化实例:内图尺寸300---425(边条框1、实线边条框) 长形羽化实例代码: 代码4,走动的羽化代码: (二)百叶窗图片代码(一般填用同一张图片地址) 代码5、百叶窗代码:
百叶窗实例(边条框2--虚线边条框) 实例代码:
<字/FONT><字/P> 图片可多可少,但宽度高度要一致,这个比较方便, 类似于我们以往图文走动的效果。故不示例了。 (四)变异图片 代码7、波纹效果代码 代码8、黑白效果代码 代码9、翻转效果代码 代码10、底片效果代码 代码11、翻面效果代码 代码12、重影效果代码 (五)、倒影图片 代码13、倒影效果代码
进行特效处理,形成与音画边框相映生辉的音画贴。
本篇尽量将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、长形羽化代码: 同一张图片分两次粘贴 适用于维度较大的图。 长图羽化实例:内图尺寸300---425(边条框1、实线边条框) 长形羽化实例代码:
代码3、方形羽化代码:
HTML音画介绍之二:运用各种代码编辑特效图片(上)
HTML音画介绍之二:运用各种代码编辑特效图片(上)
HTML特效音画代码 透明flash
html代码特效
html代码特效2
html代码特效1
html代码特效4
html代码特效 值得一看
html代码特效5666
html特效文字代码
如何在图片上编辑文字代码
在图片上编辑文字代码
怎样用FrontPage软件编辑HTML帖子 | 音画代码学堂 - 中国音画家园 - Po..*******.
各种分割线Html代码(转)
HTML代码音画基础与初级全部教程 [图片]
(十)用HTML代码制作的各种图片效果(淡化边缘效果)
运用HTML代码来做分割线
【Earls】HTML学习编辑小平台-克隆代码做音画贴
HTML学习编辑小平台-克隆代码做音画贴、
HTML代码学习(二) 00
HTML代码学习(二)1
html特效文字代码1
html特效文字代码1
图片羽化----html代码