新萤火虫论坛

 找回密码
 注册

[贴图公式(教你编辑漂亮图片)]+[HTML中/高级教程在389楼处]

 关闭 [复制链接]
mymusic123 该用户已被删除
发表于 2005-6-23 10:19:07 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

发表于 2005-6-23 13:31:42 | 显示全部楼层
这下可要好好学习一下了!太感谢了!
回复 支持 反对

使用道具 举报

东风 该用户已被删除
发表于 2005-6-24 17:20:38 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

发表于 2005-6-24 22:55:40 | 显示全部楼层
小辣椒斑斑的分隔线借偶用用撒 好吗??
回复 支持 反对

使用道具 举报

发表于 2005-6-26 21:46:40 | 显示全部楼层
Originally posted by 飛飛 at 2005-6-24 22:55 小辣椒斑斑的分隔线借偶用用撒 好吗??
米问题 那去用好了 当上班班记得给我加分就好
回复 支持 反对

使用道具 举报

若凡 该用户已被删除
发表于 2005-7-1 20:37:02 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

发表于 2005-7-4 14:14:20 | 显示全部楼层
不错!!!!!!!
回复 支持 反对

使用道具 举报

发表于 2005-7-6 13:27:14 | 显示全部楼层

[07/07][帮助帖]HTML特效代码及HTML中、高级篇教程

基本公告




1、请遵循精品贴图区这个重要原则!爱护图区的环境

2、请不要单独开贴测试,用跟贴的办法。

3、原则上是不同意单图单贴。

4、内容类似的情况下,尽可能一贴和跟贴。

5、请尊重别人的劳动,不要刷屏!

6、请不要侮辱、漫骂他人。

7、版主有权按照规则删除贴,如果不满意,可以发短信和投诉。


中级篇

这一部分我重点讲关于表格的嵌套使用。我曾经多次实验,加上看其他朋友的帖子,总结出了一些表格的使用技巧。


首先,介绍表格的HTML格式。



表格标记


<TABLE><TR><TD><TH><CAPTION>

■<TABLE><TR><TD><CENTER>..........</TD></TR></TABLE>

这三个标记是定义表格的最重要的标记,可以说只学这三个己足够。<TABLE>是一个容器标记,意思是说它用以声明这是表格而且其他表格标记只能在他的范围内才适用,属容器标记的还有其他。
<TR>用以标示表格列(row)
<TD>用以标示储存格(cell)
<TABLE>的参数设定(常用):
例如: <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">
  • width="400"
    表格宽度,接受绝对值(如 80)及相对值(如 80%)。
  • border="1"
    表格边框厚度,不同浏览器有不同的内定值,故请指明。
  • cellspacing="2"
    表格格线厚度。
  • cellpadding="2"
    文字与格线的距离。
  • align="CENTER"
    表格的摆放位置(水平),可选值为: left, right, center,请看例子五或六,那表格是放于中间的,为怕一些浏览器不支援,故特加上居中标记<CENTER>,只是多层保证而己,当然只用<CENTER>亦可。
  • valign="TOP".
    表格内字画等的摆放贴位置(垂直),可选值为: top, middle, bottom。
  • background="myweb.gif"
    表格 纸,与 bgcolor 不要同用。
  • bgcolor="#0000FF"
    表格底色,与background不要同用。
  • bordercolor="#FF00FF"
    表格边框颜色,NC 与 IE 有不同的效果。
  • bordercolorlight="#00FF00"
    表格边框向光部分的颜色。『只适用于 IE』
  • bordercolordark="#00FFFF"
    表格边框背光部分的颜色,使用bordercolorlight或bordercolordark时 bordercolor将会失效。『只适用于 IE』
  • cols="2"
    表格栏位数目,只是让浏览器在下载表格是先画出整个表格而己。
■<TR>的参数设定(常用):


例如:<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">

  • align="RIGHT"
    该一列内字画等的摆放贴位置(水平),可选值为:left, center, right。
  • valign="MIDDLE"
    该一列内字画等的摆放贴位置(垂直),可选值为: top, middle, bottom。
  • bgcolor="#0000FF"
    该一列底色,请看。
  • bordercolor="#FF00FF"
    该一列边框颜色,请看。『只适用于 IE』

    bordercolorlight="#808080"
    该一列边框向光部分的颜色,请看。『只适用于 IE』
  • bordercolordark="#FF0000"
    该一列边框背光部分的颜色,使用bordercolorlightbordercolordarkbordercolor 将会失效。『只适用于 IE』
■<TD>的参数设定(常用):


例如:<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">

  • width="48%"
    该一储存格宽度,接受绝对值(如 80)及相对值(如 80%)。
  • height="400"
    该一储存格高度。
  • colspan="5"
    该一储存格向右打通的栏数。
  • rowspan="4"
    该一储存格向下打通的列数。
  • align="RIGHT"
    该一储存格内字画等的摆放贴位置(水平),可选值为:left, center, right。
  • valign="BOTTOM"
    该一储存格内字画等的摆放贴位置(垂直),可选值为:top, middle, bottom。
  • bgcolor="#FF00FF"
    该一储存格底色。
  • bordercolor="#808080"
    该一储存格边框颜色。『只适用于 IE』
  • bordercolorlight="#FF0000"
    该一储存格边框向光部分的颜色。『只适用于 IE』
  • bordercolordark="#00FF00"
    该一储存格边框背光部分的颜色,使用bordercolorlightbordercolordarkbordercolor将会失效。『只适用于 IE』
  • background="myweb.gif"
    该一储存格纸,与bgcolor任用其一。


肯定已经有人不耐烦了,那么我简单介绍一下使用,基本格式如下:



大家看这个范例


好看吗?


刚才给出的只是一个表格,如果使用表格的嵌套,你的帖子会更有魅力,如同一个彩色的画框。原理是这样:

表格1开始+表格2开始+...+表格2结束+表格1结束
下面给出3层表格的范例,如果你要多层,继续加入即可:



注意:关键在于这几个方面,也是我们修改的内容:
1、第一个表格的width可以取你想要的宽度,其他全部取100%,操作简单。
2、cellspacing的取值决定了表格边的宽度,我下面分别取30、20、40,大家看效果。
3、border的取值也是重要的,建议取0或者1。
4、这个才是重点,颜色搭配非常重要,不要反差太大,有点像女士配衣服,男士搭配西装、衬衣和领带,千万不要大红配大绿,那就是丑。








精品贴图



字体集锦字体集锦



69贴图


~欢迎你~


欢迎你



欢迎你



69




精品贴图


特效字体


谢谢支持


流水字体





贴图


精品贴图


跑动跑动


精彩人生




滤镜让你更精彩


愿你喜欢它




学会了吗?


又一种滤镜


倒影效果

果效影倒


圈边的字


右阴影的字


你好棒!


倒影

 

倒影


精品贴图区


飛飛收集整理,希望你喜欢




  一、移动字体(字幕)基础

大家注意:可以结合上面的艺术文字部分使用,只是将“文字部分”全部用上面的文字代码替代!同时,图片也可以这样制作,只是注意高度和宽度要大于等于你的图片尺寸,可以试试。

    代码:

    注释:

  (1)标签marquee:大帐篷,字幕。

  (2)direction:方位,设置移动的方向。可取值up(向上)、down(向下)、left(向左)、right(向右),默认值left(向左)。

  (3)scrolldelay:移动延迟,以毫秒为单位,设置移动的延迟时间,默认值为90毫秒。

  (4)scrollamount:移动量,设置移动的数量、速度。数量越大、速度越快。

  (5)behavior:表现,设置移动的表现方式、效果。默认值scroll(一次次循环),可取值:

    scroll:移动。滚动条效果,一次一次循环重复。
    slide:滑动。幻灯片效果,只播放一次。
    alternate:交替发生。交替循环,来回走动。

  (6)align:对齐方式,可取值top(顶边对齐)、middle(垂直居中)、bottom(底边对齐),默认值top(顶边对齐)。

  (7)width:宽。设定移动区域的宽度。可取值绝对值像素、相对值百分比,默认值为上一级区域的宽度。

  (8)height:高。设定移动区域的高度。可取值绝对值像素、相对值百分比,默认值为字移动范围内的字体整体高度。

  (9)loop:循环。设置移动的次数,默认值为无限循环。

  (10)bgcolor:背景颜色。设置移动区域的背景颜色,默认为透明。



二、移动字体(字幕)实例

  1、滚动条:

☆欢迎您到精品贴图来☆

   代码:

  2、来回走动:

☆欢迎您到精品贴图来☆

   代码:

  3、幻灯片:

☆欢迎您到精品贴图来☆

   代码:

  4、走走停停:

☆欢迎您到精品贴图来☆

   代码:

  5、字体飞翔*

精品贴图宝典

   代码:

 

 

  6、分割镜像:

   注释:二个字幕的宽度不能大于或等于上一级区域的宽度;
      后一个字幕的字、书出顺序必须相反。

精品贴图宝典典宝图贴品精

   代码:

贴图乐园园乐图贴

   代码:


欢迎光临精品贴图!欢迎光临精品贴图!

    代码:


欢迎光临唯美贴图!欢迎光临精品贴图!

    代码:


  7、同进同出

   代码:


  8、字体跳舞*

   代码:

   代码:

高级篇

透明flash及GIF动画的使用



我个人将这个技术划分为框架定位和浮动定位。

框架定位

首先我来介绍第一种,在表格框架内加入flash,注意,做法的精髓在于图片做背景,flash叠加在上面!!前面我已经介绍了如何使用多层表格得到带有框架的页面,这里就不做介绍了。在嵌入flsah前,有两个准备工作:
1、找到合适的图片,图片不要太大,因为一旦使用背景,图片大小不能改变!一般宽度在480~640之间最合适。
2、找到合适的flash,这个比较重要,第一,flash必须是透明的,这个在很多网站有素材,可以搜索,或者看其他人的网页,注意保留flash的类型和地址。第二,必须和你的图片很好的搭配才体现出美。下面举例说明如何使用。

例如,我找到的这张图片是宽度=617,高度=424的(看图片属性的时候有显示),那么我的表格就做617×424的,比如:height=424 width=617。然后,图片上有湖泊,而且面积和大,那么选用下雨模式的透明FLASH就很好了,同时,我们在加入flsah的时候要给出flash的大小最好,大小的确定要取决于背景图片,不要比图片大,小一点就可以,例如这里取height=410 width=600就合适了。
代码如下:你可以直接拷贝使用,需要改动的是图片地址,宽度、高度,flash的地址、宽度、高度。


效果如下:


再来一个多层表格加多flash(光环加蝴蝶)的范例,代码如下:


效果如下:




浮动定位

这里关系到style的技术,很多朋友没有这方面的知识,讲解起来就很麻烦,所以我这里介绍简单的操作,办法仍然是拷贝模板,自己设计。先看代码:style="LEFT: 10px; WIDTH: 900px; POSITION: absolute; TOP: 3200px; HEIGHT: 580px",想必那些英文单词我不用介绍了,大家全懂,就是定位和定义大小的,那么数值是什么概念呢?大家知道自己的计算机屏幕是1024×768,这个数值和上面语句的数值是一个单位,所以,根据你屏幕的位置,甚至下拉屏幕后大概的位置,你可以定义动画的近似位置,这个很难,主要是难以一次定位准确,即便测设结果也是有误差的,左右误差小,但是上下误差相对大,办法是跟贴测试,多实验几次就能做好。另外,这种定位代码可以加在你要贴如的GIF动画的代码内部,全部代码可以在你帖子代码的任何位置,习惯上我们放在后面。下面我定位一个蓝色小精灵在屏幕左上方。
效果可以看屏幕。代码如下:


再来一个烟火效果在屏幕中间。代码如下:



隐藏音乐

很多朋友问我为什么帖子听到音乐却没有播放器,这个很简单,我给出代码,大家只需要改掉音乐的地址就可以了,代码放在帖子的最后就完成了。
代码如下:


飛飛收集制作

[ Last edited by 飛飛 on 2005-7-8 at 10:24 ]

评分

1

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2005-7-6 13:29:04 | 显示全部楼层
为了避免混乱,我就不显示代码特效效果 用的时候把以下代码COPY过去即可
  1. 满屏蓝雪飘
  2. <EMBED style="LEFT: 50px; WIDTH: 700px; POSITION: absolute; TOP: 80px; HEIGHT: 1200px" align=center src=http://lain1978.com/collection/flash/005.swf width=650 height=1200 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
复制代码
[ Last edited by 飛飛 on 2005-7-8 at 10:26 ]
回复 支持 反对

使用道具 举报

发表于 2005-7-6 13:29:48 | 显示全部楼层
  1. 流光溢彩
  2. <EMBED style="LEFT: 4px; WIDTH: 1000px; POSITION: absolute; TOP: 6527px; HEIGHT: 600px" align=right src=http://hlm.nease.net/swf/red/cloud.swf width=906 height=452 type=application/octet-stream wmode="transparent" quality="high" ;;><EMBED style="LEFT: -4px; WIDTH: 1000px; POSITION: absolute; TOP: 5554px; HEIGHT: 600px" align=right src=http://hlm.nease.net/swf/red/cloud.swf width=967 height=452 type=application/octet-stream wmode="transparent" quality="high" ;;><EMBED style="LEFT: 0px; WIDTH: 1000px; POSITION: absolute; TOP: 450px; HEIGHT: 600px" align=right src=http://hlm.nease.net/swf/red/cloud.swf width=909 height=452 type=application/octet-stream wmode="transparent" quality="high" ;;><EMBED style="LEFT: -289px; WIDTH: 1000px; POSITION: absolute; TOP: 4960px; HEIGHT: 600px" align=right src=http://hlm.nease.net/swf/red/cloud.swf width=1203 height=452 type=application/octet-stream wmode="transparent" quality="high" ;;>
复制代码
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|萤火虫

GMT++8, 2024-11-23 07:09 , Processed in 0.334407 second(s), 9 queries , File On.

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表