[返回前页]
唯美贴图公告及-贴图指导-

基本公告


1、请遵循唯美这个重要原则！爱护唯美的环境

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

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

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

5、请尊重别人的劳动，不要刷屏！

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

7、版主有权按照规则删除贴，如果不满意，可以写邮件和投诉。



唯美贴图是瞬间的美丽和温罄。

让美妙的歌曲回旋我们身边，让图片留住你的记忆，

把美丽的世界浓缩，把精彩的瞬间留住……



唯美贴图导航
1.入门篇
2.初级篇
3.中级篇
  3.1.中级篇(表格标识)
  3.2.中级篇(字体集锦)
  3.3.中级篇(移动字体)
4.高级篇(透明flash)



点击进入

贴图技术专区



  下面是总结了在留园发贴的心得送给大家，其实很多是比较简单的，关键就是看你有没有耐心。因为每做一个帖子都是很消耗时间，即便是转贴，也需要自己做合理的编辑。
  下面将分层次介绍如何使用留园网作出一个漂亮的帖子，其中包含了图片、文字、框架等，希望能给大家一个启迪，算是抛砖引玉。

关于留园网贴图特性的说明。

1、网页不接受直接的页面类型输入，只能以代码形式发出。
2、网页不接受高级语言，因此你的代码绝对不要出现java和ASP。（尤其此点，即使你预览正确，发出时仍然报错，而且不会说你是java出错。）
3、可以使用frontpage或者dreamwave提前制作你的网页，包括底板、表格、文字、动画、flash嵌入等等。制作好之后提出代码，但是注意：此时的代码尚且不能在留园使用！
4、检查代码，是否有高级语言出现？
5、检查代码的连续性，也就是说，代码中的文字、描述语言完全连续输入，中间没有回车或者空格，否则此处将被“www.6park.com”和“6park.com”替代，尤其是在有底板的情况下会严重影响美观。 www.6park.com

技巧：
1、注意看别人的代码，经常保留，形成自己的框架。
2、搜索长期有效的网页素材地址。
3、在代码形成之后，最好在记事本那仔细审核连续性。
4、留园的主体页面为表格式，所以在使用表格是要注意开始和结尾的描述语句，一一对应非常重要！如果想摆脱限制，可以提前结束留园的表格。


入 门 篇

  首先介绍如何简单的粘贴图片，发出一个简单的图文并茂的帖子，利用留园的编辑帖子的功能，你已经可以很好的完成这个工作了。

1、 确定你要转贴的图片后，单击鼠标右键，选择“属性（Properties）”。

2、 弹出的属性框之中部有个“地址（URL）”，其后跟着一串地址，例如：http://gb.qjinfo.com/userfilepath/xiaotan/xt001/k15.gif，拷贝这个地址，这里注意，有时候这个地址很长，一定要全部选中再拷贝。

3、 回到咱们留园发贴区，（单击[ -- 加新贴 -- ]进入发帖界面），点击“插入图片”几个字，在跳出的Javascript栏中，粘贴您图片的URL地址（可同时按Ctrl+v 键快速粘贴），然后点击OK确认，程序将自动生成的代码并拷贝到下面的“内容栏”中；图片一般我们都居中，所以把你刚才那部分内容选中，点击“”图标，这样，你的图形就居中了；重复以上四个步逐可插入多张图片。

4、 发出之前测试一下，点击内容栏下面的“测试”按钮；若没问题了，为您的帖子起一个好的标题，填写上您的网名和密码，最后点击“送交”。

技巧：
1、其实这个不是技巧，只是你不要太懒就可以。如果你的全部图片希望居中，那么最后再做居中；选中你刚才发贴的全部内容，再居中操作，这里注意，如果你有文字部分，但是文字部分你不想居中，那么不要用这个操作。
2、假如你看好了其他BBS上的帖子，而且全部是图片，先看那个网页的源代码（在“查看”菜单内），找到图片全部代码，一般是连续的，直接复制全部图片代码，粘贴到内容栏。但是，不是所有的网页你都可以看源代码，而且即使看到了，有时候在留园不能使用。

关于几个常见问题的解释：
1、问：为什么我发的帖子，里面的图片我看的到，别人看不了？

解释：你帖的图被所在网站保护，也就是防盗连，或者限制一定范围的IP用户才可以看。你能看到的原因是：你看图的时候，计算机把网站的你正在看的图暂时存放到你计算机里的临时文件夹里，是“热图”。而别人不可能看见你计算机里临时文件夹里的“热图”的。你下网后清空临时文件夹里的东西后，再上网打开你所贴的图肯定看不到了。

2、问：如何将自己硬盘里的图片发到留园。

这个问题比较麻烦，首先，你要找一个属于你的相册，但是这里说明一下，国内的大部分相册是防盗连的，不要去实验了，这里我们给出两个，你自己注册后上传自己的图片，然后得到地址再贴到留园。
http://www.shutterfly.com
http://www.uploadit.org

其实还有个其他办法，我比较常用。就是多找几个可以上传图片的国内的论坛网站（一大堆，随便你挑），你直接把你的图片灌水进去，就得到地址了，操作简单，效果明显，实在是居家发贴，灌水取图的必备技巧啊，哈哈哈哈。


初 级 篇

  刚才我们只是讲了如何发图片，这只是生产出了产品而已，下面我们给它包装一下，给你的页面加上背景。

  一般情况下，背景是指网页主体的背景，其次就是表格内部背景。首先，我们看看主体参数的常见格式

例子：
<BODY text="#000000" link="#0000FF" alink="#FF0000" vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed">

由于我们只是谈论背景，所以这里只是介绍相关的三个。
background="bg1.gif"
设定背景墙纸。GIF 或 JPEG皆可，可以是绝对途径或相对途径。

bgcolor="#FFFFFF"
设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。

bgproperties="fixed"
固定背景墙纸，当卷动文字时墙纸不会跟著卷动。

注意：不想要背景图片，只是全部黑色底色，就去掉background部分。

那么，去掉我们不要的部分，就非常简单了



效果如下：



马上就有这个问题了，以前也有朋友问过多次，为什么只是两边有，中间是灰色？
解释：首先，让我们看看留园网页结构。留园网页在主体的基础上给出了一个表格（大部分论坛网站如此），我们平时发出的帖子全部在这个表格内部，而这个表格覆盖在网页的主体上面了，所以也就盖住了你的大部分背景。解决办法如下：

简单办法：提前结束留园表格，把整个网页主体留给你做空间，任意发挥，结束语句如下：</TD></TR></TABLE>。再加上图形文字的居中语句<CENTER>，你的准备工作就好了。
总结语句如下：


每次发贴之前，在你的代码窗体最前面，粘贴上面的语句即可。
再看看效果，是不是好了。



复杂办法：首先改主体背景，代码和前面的一样，其次改内部表格的背景。当然，如果你的希望所有背景一致，这种做法就没有意义了，但是如果主体和表格背景不同，这个办法就非常好。不改变主体背景，只是表格背景，代码如下：



这里解释几个代码：
cellspacing=20
表格格线厚度，加厚格线可以使之产生边框效果，也就是说，图形文字进入不了这个周边宽度区域。

cellpadding=2
文字与格线的距离

width=90%
表格的宽度，这个数值非常重要，当然接受绝对值的输入，比如width=900（我们平常看到留园的灰色部分就是900的数值，选择900就恰好把灰色去掉）。有时候，我们的图很小，如果你取width数值过大，就会失调。

看如下代码：



效果就是这样：



当然，这里为了看清楚，选取背景很艳，不要效仿，贴出你的精彩。
再给出一种留园广泛使用的代码

另外需要说明的是检查代码的连续性！！，也就是说，代码中的文字、描述语言完全连续输入，中间没有回车，否则此处将被“www.6park.com”和“6park.com”替代，尤其是在有背景的情况下会严重影响美观。

最后，要说明的是，背景图片不易过大，别看小图片，连成片非常好看，下面我给出4个背景、动画、装饰线条素材的网站：

http://www.cccen.com/sou/index.htm

http://www.sucaiw.com/index.asp

http://www.grsites.com/textures/

http://emu.main.jp/bbgemumenu3.htm
看大家的爱好了，自由选择！



中 级 篇

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


首先，介绍表格的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"
    该一列边框背光部分的颜色，使用bordercolorlight 或 bordercolordark时bordercolor 将会失效。『只适用于 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"
    该一储存格边框背光部分的颜色，使用bordercolorlight或bordercolordark 时bordercolor将会失效。『只适用于 IE』
  • background="myweb.gif"
    该一储存格纸，与bgcolor任用其一。

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



大家看这个范例


好看吗？


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

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



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








唯美贴图



字体集锦字体集锦





留园唯美

~欢迎你~







欢迎你






欢迎你





大家好





留园






字跳舞



唯美贴图





特效字体




谢谢支持



流水字体



百度、树熊



老狼王



跑动跑动





精彩人生





滤镜让你更精彩



Alpha滤镜：从效果中我们可以看出，Alpha滤镜使对象呈渐变透明的效果，其效果是由脚本中的filter:alpha(opacity=100,style=3)来决定的。其中：opacity属性：设置透明度，取值0至100之间的任意数值，100表示完全不透明；style属性：设置渐变风格，0表示均匀渐变，1表示线性渐变，2表示放射渐变，3表示直角渐变。而width:100%则表示参与渐变的对象的宽度，通常都设置为100%


愿你喜欢它



学会了吗?



又一种滤镜



倒影效果

果效影倒




圈边的字





右阴影的字





你好棒！




倒影
倒影





唯美贴图

脉冲波收集整理，希望你喜欢




　　一、移动字体（字幕）基础

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

　　　　代码：

　　　　注释：

　　（１）标签marquee：大帐篷，字幕。

　　（２）direction：方位，设置移动的方向。可取值up(向上)、down(向下)、left(向左)、right(向右)，默认值left(向左)。

　　（3）scrolldelay：移动延迟，以毫秒为单位，设置移动的延迟时间，默认值为90毫秒。

　　（4）scrollamount：移动量，设置移动的数量、速度。数量越大、速度越快。

　　（５）behavior：表现，设置移动的表现方式、效果。默认值scroll（一次次循环），可取值：

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

　　（６）align：对齐方式，可取值top(顶边对齐)、middle（垂直居中）、bottom（底边对齐），默认值top(顶边对齐)。

　　（７）width：宽。设定移动区域的宽度。可取值绝对值像素、相对值百分比，默认值为上一级区域的宽度。

　　（８）height：高。设定移动区域的高度。可取值绝对值像素、相对值百分比，默认值为字移动范围内的字体整体高度。

　　（９）loop：循环。设置移动的次数，默认值为无限循环。

　　（10）bgcolor：背景颜色。设置移动区域的背景颜色，默认为透明。



二、移动字体（字幕）实例

　　１、滚动条：

☆欢迎您到唯美贴图来☆

　　　代码：

　　2、来回走动：

☆欢迎您到唯美贴图来☆

　　　代码：

　　３、幻灯片：

☆欢迎您到唯美贴图来☆

　　　代码：

　　４、走走停停：

☆欢迎您到唯美贴图来☆

　　　代码：

　　５、字体飞翔＊

唯美贴图宝典

　　　代码：

　

　

　　６、分割镜像：

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

唯美贴图宝典典宝图贴美唯

　　　代码：

贴图乐园园乐图贴

　　　代码：


欢迎光临唯美贴图！欢迎光临唯美贴图！

　　　　代码：


欢迎光临唯美贴图！欢迎光临唯美贴图！

　　　　代码：


　　７、同进同出

大家好

　　　代码：


　　８、字体跳舞＊

字跳舞

　　　代码：

亲爱的朋友您好

　　　代码：

高 级 篇

透明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动画的代码内部，全部代码可以在你帖子代码的任何位置，习惯上我们放在后面。下面我定位一个蓝色小精灵在屏幕左上方。
效果可以看屏幕。代码如下：


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



隐藏音乐

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


脉冲波收集制作


Copyright (C) 2003-2004 6park.com All rights Reserved.