｛念汐。（汐颜。）HTML教程(H码编辑器、阿里妈妈、表格参数、播放器、图片效果等）

II.〆石Zi° 发表于 2013-5-7 10:29:30

本帖最后由 II.〆石Zi° 于 2013-9-29 16:36 编辑 <TABLE style="BORDER-BOTTOM: #b03060 2px dashed; POSITION: relative; BORDER-LEFT: #b03060 2px dashed; WIDTH: 600px; BORDER-TOP: #b03060 2px dashed; BORDER-RIGHT: #b03060 2px dashed" border=0 cellSpacing=0 cellPadding=0 bgColor=#b03060 align=center>
<TBODY>
<TR>
<TD> 
<TABLE style="BORDER-BOTTOM: #ffffff 1px dotted; BORDER-LEFT: #ffffff 1px dotted; WIDTH: 550px; BORDER-TOP: #ffffff 1px dotted; BORDER-RIGHT: #ffffff 1px dotted; TOP: 10px" border=0 cellSpacing=0 cellPadding=0 bgColor=#ffc1c1 align=center>
<TBODY>
<TR>
<TD align=center> 
<TABLE style="BORDER-BOTTOM: #ffffff 10px dotted; BORDER-LEFT: #ffffff 10px dotted; WIDTH: 85%; BORDER-TOP: #ffffff 10px dotted; BORDER-RIGHT: #ffffff 10px dotted" border=3 cellSpacing=0 cellPadding=0 background=http://img170.poco.cn/mypoco/myphoto/20120914/13/64081293201209141323473037126033171_025.jpg>
<TBODY>
<TR>
<TD style="PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 35px; PADDING-TOP: 10px">
 HTML码-新手入门-系列教程 by  念汐。（汐颜。） </TD></TR></TBODY></TABLE> 对于HTML码的学习与运用，相信许多人都尝试过。这里， 总结一些个人代码学习以及运用的经验以供新手参考，欢迎大家一起交流。 爱上学院群:220818465   YY：23509875 注意事项： 1、 对于任何想学习HTML码的童鞋绝对欢迎。在学习之前， 请考虑清楚你是否有恒心与耐心，没有笨学生，只有懒学生。 </EMBED>2、 本帖将有针对性的对新手做出教程指导， 请学习的童鞋按照教程课时要求留下作业以便了解掌握程度。 还是那一句，懒人请自重，对于不按要求做的报学院处理。 学习重点： 1、HTML码美帖必备工具 2、FLASH网页播放器运用及其HTML属性了解 3、常用HTML码基本属性及运用 4、FLASH效果的HTML码运用 5、美帖配色学习与运用 6、HTML码套用模板示范 
<TABLE style="BORDER-BOTTOM: #ffffff 10px dotted; BORDER-LEFT: #ffffff 10px dotted; WIDTH: 45%; BORDER-TOP: #ffffff 10px dotted; BORDER-RIGHT: #ffffff 10px dotted" border=3 cellSpacing=0 cellPadding=0 background=http://img170.poco.cn/mypoco/myphoto/20120806/14/64081293201208061424383146313423580_060.jpg>
<TBODY>
<TR>
<TD style="PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 10px">
 编辑：念汐  2012-12 </TD></TR></TBODY></TABLE> <EMBED style="WIDTH: 27px; HEIGHT: 25px" type=application/x-shockwave-flash src=http://www.51119.com/play/swf/2.swf?file=http://storage.live.com/items/5ED4CFA8BE6EFE7E!568?filename=1.mp3&autoStart=true&repeatPlay=true&backColor=b03060&frontColor=FFFFFF&songVolume=120 menu="false" wmode="transparent"> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>

II.〆石Zi° 发表于 2013-5-7 10:29:31

1、HTML码美帖必备工具

本帖最后由 II.〆石Zi° 于 2013-8-22 19:13 编辑 <DIV align=center>
<DIV style="FILTER: glow(color= #cd5c5c ,strength=20); WIDTH: 580px"> 
<TABLE style="WIDTH: 520px; POSITION: relative; HEIGHT: 328px" borderColor=#cd5c5c align=center background=http://img170.poco.cn/mypoco/myphoto/20120703/14/64081293201207031433262116784512217_002.jpg border=5>
<TBODY>
<TR>
<TD> 
<TABLE style="MARGIN-TOP: 350px; WIDTH: 99%" cellSpacing=0 align=center background=http://img13.poco.cn/mypoco/myphoto/20120531/07/61860215201205310745503808530111272_026.gif border=0>
<TBODY>
<TR>
<TD align=middle>
<TABLE style="BORDER-RIGHT: seashell 3px dotted; BORDER-TOP: seashell 3px dotted; BORDER-LEFT: seashell 3px dotted; WIDTH: 98%; BORDER-BOTTOM: seashell 3px dotted; HEIGHT: 160px" borderColor=#feeff8 height=160 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 15px; FILTER: alpha(opacity=95); PADDING-BOTTOM: 30px; WIDTH: 99%; PADDING-TOP: 25px" bgColor=#cd5c5c height=250 cellspacing="4" border="0">
 
HTML码美帖必备工具 1、作图软件 PS、光影魔术手、ISEE （百度下载，也可以使用你熟悉的软件） 2、HTML码在线编辑器 网址：<A href="http://ny.xmu.edu.cn/editor.asp">http://ny.xmu.edu.cn/editor.asp</A> （相关使用教程下一节贴出） 3、配色表（颜色代码表：论坛自带的也不错） 网址：<A href="http://www.wahart.com.hk/rgb.htm">http://www.wahart.com.hk/rgb.htm</A> 4、阿里妈妈 网址：<A href="http://banner.alimama.com/">http://banner.alimama.com/</A> 注册建号，注意登陆使用淘宝联盟会员登陆界面。 5、56相册（用于FLASH效果） 网址：<A href="http://www.56.com/">http://www.56.com/</A> 6、POCO相册 网址：<A href="http://my.poco.cn/">http://my.poco.cn/</A> 支持图片外链，长期有效；动态相册功能可用于FLASH效果 7、音乐外链网盘skydrive 网址：<A href="https://skydrive.live.com/">https://skydrive.live.com/</A> 请使用谷歌（火狐）浏览器进入网站注册，关于使用教程后面会贴出。 暂时就这些，如有需要其他的工具会更新此内容，请注意关注！ <EMBED style="LEFT: 0px; WIDTH: 570px; POSITION: absolute; TOP: 10px; HEIGHT: 320px" src=http://xt.2000y.net/106939/uploadpic/2009051216163351247.swf type=application/octet-stream wmode="transparent" quality="high"></EMBED><EMBED style="LEFT: 50px; WIDTH: 470px; POSITION: absolute; TOP: 0px; HEIGHT: 320px" src=http://ftp.oolove.com/youyuan/flash/星光14.swf type=application/octet-stream wmode="transparent" quality="high"> </EMBED></TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> </DIV> </DIV>

II.〆石Zi° 发表于 2013-5-7 10:29:32

本帖最后由 II.〆石Zi° 于 2013-1-3 18:37 编辑 
<table style="WIDTH: 650px; HEIGHT: 1630px" cellSpacing=10 cellPadding=0 align=center bgColor=#ff6eb4>
<tr>
 <td borderColor=#e1deda bgColor=#ff6eb4 border="1">
<div style="FILTER: glow(color=FFB5C5,strength=20); WIDTH: 630px; POSITION: relative; HEIGHT: 1620px; TEXT-ALIGN: center"> 
 <table style="BORDER-TOP: #d5e5e8 1px solid; BORDER-LEFT: #d5e5e8 1px solid; WIDTH: 580px" cellSpacing=0 cellPadding=0>
 <tr>
 <td align=middle>
 <table cellSpacing=0 cellPadding=3 width=580 align=center border=0>
 <tr>
 <td>
<div style="LEFT: -30px; WIDTH: 300px; POSITION: relative; TOP: -10px; HEIGHT: 260px"><?import namespace = v urn = "urn:schemas-microsoft-com:vml" implementation = "#default#VML" declareNamespace /><v:shape id=alw style="LEFT: 0px; WIDTH: 420px; POSITION: absolute; TOP: 0px; HEIGHT: 350px" coordsize = "110,110" filled = "t" fillcolor = "white" stroked = "t" strokecolor = "#ffb5c5" strokeweight = "8pt" path = " m20,40 l40,20,70,20,90,40,90,70,70,90,40,90,20,70 xe"><v:path></v:path><v:fill pacity="1" src = "http://img13.poco.cn/mypoco/myphoto/20120712/09/61860215201207120920583726359624603_018.jpg" type = "frame"></v:fill></v:shape></div>
 <div></div></td>
 <td style="PADDING-RIGHT: 45px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px">
 HTML码在线编辑器  使-用-教-程 编辑: 念汐  2012-12-28</td>
 </tr>
 </table>
<div style="RIGHT: 50px; WIDTH: 200px; POSITION: absolute; TOP: 230px; HEIGHT: 53px"><IMG style="WIDTH: 236px; HEIGHT: 39px" height=71 src="http://img2081.poco.cn/mypoco/myphoto/20110720/10/61860215201107201100223555605548261_000.gif" width=236> </div>
 <table style="WIDTH: 500px; POSITION: relative" cellSpacing=4 cellPadding=4 align=center background=http://img13.poco.cn/mypoco/myphoto/20120717/10/64081293201207171014192740553708316_000.gif>
 <tr>
 <td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 25px; PADDING-TOP: 15px" align=left bgColor=#c1cdc1>
 1、点击<A href="http://ny.xmu.edu.cn/editor.asp">http://ny.xmu.edu.cn/editor.asp</A>进入，无需注册。 2、编辑器界面其实和WORD或者论坛发帖编辑框界面相类似。把鼠标移到 功能键的图标上都有中文的注解，相信对功能键的熟悉大家不难做到。 （底下我附上一张HTML在线编辑器功能键文字注解图） 3、以下为HTML在线编辑器的了解重点： 
 1）源代码：即为代码模式。相当于论坛发帖编辑框的纯文本模式 一般编辑代码首先点这个功能键复制粘贴你编辑的代码进入空白处， 对于有一定代码基础的童鞋，可以在这个模式下直接进编辑。 2）编辑：即为修改模式。如果你在预览过后对于你帖子的某部分不满意， 要进行修改，那么就要点击这个功能键进入修改代码内容， 这个模式下文字和图片也能够预览，但是FLASH包括FLASH的播放器不能看到 3）关于<IMG height=31 src="http://img13.poco.cn/mypoco/myphoto/20120725/22/61860215201207252258054115184171637_000.jpg" width=43>：图解中有解释，换行的意思，对于初学者，这里有必要 提下，一般换行大家可能会直接在帖子中直接回车，这里提醒大家以后编辑代码 养成好习惯，换行使用 键，以免产生多余的代码导致帖子变形。 4）HTML在线编辑器中不能直接使用图片，这里我给出一个使用图片的代码 <IMG src="图片地址">，输入图片地址后，整段代码直接在代码模式下输入。 </td>
 </tr>
 </table>
 <IMG src="http://img13.poco.cn/mypoco/myphoto/20120724/09/61860215201207240942437024726575905_009.jpg" width=580> </td>
 </tr>
 </table>
 </div></td>
</tr>
</table>

II.〆石Zi° 发表于 2013-5-7 10:29:33

学习内容： 1、熟悉了解光影魔术手、ISEE的图片缩放功能（改变图片大小）以及边框美化功能 2、熟悉了解使用HTML在线编辑器的基本功能 3、熟悉了解POCO相册

II.〆石Zi° 发表于 2013-5-7 10:29:34

<TABLE style="BORDER-RIGHT: #d8bfd8 2px solid; BORDER-LEFT: #d8bfd8 2px solid; WIDTH: 600px; BORDER-BOTTOM: #d8bfd8 2px solid; POSITION: relative" cellSpacing=0 cellPadding=0 align=center bgColor=#d8bfd8 border=0>
<TBODY>
<TR>
<TD> 
<TABLE style="BORDER-RIGHT: #ffffff 1px dotted; BORDER-TOP: #ffffff 1px dotted; BORDER-LEFT: #ffffff 1px dotted; WIDTH: 550px; BORDER-BOTTOM: #ffffff 1px dotted; TOP: 10px" cellSpacing=0 cellPadding=0 align=center bgColor=#dcdcdc border=0>
<TBODY>
<TR>
<TD align=middle> 
<TABLE style="BORDER-RIGHT: #ffffff 10px dotted; BORDER-TOP: #ffffff 10px dotted; BORDER-LEFT: #ffffff 10px dotted; WIDTH: 85%; BORDER-BOTTOM: #ffffff 10px dotted" cellSpacing=0 cellPadding=0 background=http://img13.poco.cn/mypoco/myphoto/20120805/15/64081293201208051520503980942685643_000.jpg border=3>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 35px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px">
 音乐外链-Skydrive网盘-教程 </TD></TR></TBODY></TABLE> 1、首先打开<A href="https://skydrive.live.com/" rel=nofollow>https://skydrive.live.com/</A>这个地址注册好 SkyDrive 网盘是微软服务项目之一，它只支持与微软服务有关的浏览器： 如Mozilla Firefox（火狐）、Google Chrome （谷歌）等， 360浏览器不支持 
 2、点击上载，本地上传你需要的音乐。注意一下： 
把你需要外链的音乐文件（必须是MP3）上传到SkyDrive公开的文件夹内， 不要弄到私人文件夹，不然别人是访问不了的。 
3、上传完毕后，你上传的文件会出现在你的文件列表中。下面边举例边说明。 
<IMG src="http://img2081.poco.cn/mypoco/myphoto/20121228/20/6408129320121228205844077.jpg"> 
4、在你需要外链的MP3文件前点上勾，鼠标右键点击MP3标题上， 会弹出一个下拉框，如上图选择“共享”； 
<DIV>5、点击弹出框上的菜单“获取链接”，复制公开链接和歌曲名。 如下图所示，红线标记所指：</DIV> <IMG src="http://img170.poco.cn/mypoco/myphoto/20121112/19/64081293201211121921162466526274169_000.jpg" border=0> 从上图我们可以得到： 文件名：Bgm - 空之境界 - 八音盒般的一段 也就是你上传的音乐文件名 公开链接：<A href="https://skydrive.live.com/redir?resid=5ED4CFA8BE6EFE7E!119">https://skydrive.live.com/redir?resid=5ED4CFA8BE6EFE7E!119</A> 这个公开链接是点上图中红框内所示的地方全选复制获得。  5、上述操作完毕后，这里我给出一个获取外链地址的固定公式： <A href="http://storage.live.com/items/">http://storage.live.com/items/</A>公共链接地址ID?filename=文件名.mp3 6、复制第四步中我们得到的公开链接中的那段ID（上面公开链接中红色标记的） 替换公式中问号前面的公开链接地址ID，公式中的 文件名可以任意写，数字，汉字都行。根据个人使用经验，建议你 公式中的文件名用一个固定数字代替就好。用英文或者中文的话容易引起 播放器代码的出错，我曾经使用时出现过这样的情况。 如下面我示范，得到该文件的外链地址为： <A href="http://storage.live.com/items/5ED4CFA8BE6EFE7E!119?filename=1.mp3">http://storage.live.com/items/5ED4CFA8BE6EFE7E!119?filename=1.mp3</A> 每次获取的外链中文件名我都用“1”代替。前缀和后缀我都一样。 实际上每次获取外链只须公共链接地址ID部分变更就好，其他部分无须改变。 对于做合辑的朋友也是很方便，因为它的ID数字是连着的，可以事先拿到地址。 完毕。 -------------------------------------------------------------------- 备注：所有加色部分是重点，大家注意看。 </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>

II.〆石Zi° 发表于 2013-5-7 10:29:35

<table style="BORDER-RIGHT: #fff0f5 15px solid; BORDER-TOP: #fff0f5 15px solid; BORDER-LEFT: #fff0f5 15px solid; WIDTH: 600px; BORDER-BOTTOM: #fff0f5 15px solid; HEIGHT: 90px" borderColor=#fff0f5 height=90 cellSpacing=25 borderColorDark=#ffffe0 cellPadding=0 width=600 align=center borderColorLight=#ffffe0 background=http://img2081.poco.cn/mypoco/myphoto/20110720/15/61860215201107201514411587435428738_007.jpg border=0>
<tr>
 <td align=middle bgColor=#faf0e6 height=90> 
<IMG style="FILTER: alpha(opacity=380, finishOpacity=0,style=3); WIDTH: 478px; HEIGHT: 312px" height=286 src="http://img13.poco.cn/mypoco/myphoto/20120805/13/64081293201208051308513625649539284_047.jpg" width=366>
 ◇◆先从这个边框介绍，下面有具体的属性分析◆◇ ※边框示例： 

 <table style="BORDER-RIGHT: #424242 20px solid; BORDER-TOP: #424242 20px solid; BORDER-LEFT: #424242 20px solid; WIDTH: 400px; BORDER-BOTTOM: #424242 20px solid; HEIGHT: 90px" borderColor=#eb7aa7 cellSpacing=0 cellPadding=0 align=center bgColor=#eb7aa7 border=0>
 <tr>
 <td>
 实线</td>
 </tr>
 </table>
 
<HR style="WIDTH: 389px; HEIGHT: 3px" align=center width=389 color=#ff7777 noShade SIZE=1>
 

 <table style="BORDER-RIGHT: #8cbb44 2px dotted; BORDER-TOP: #8cbb44 2px dotted; BORDER-LEFT: #8cbb44 2px dotted; WIDTH: 400px; BORDER-BOTTOM: #8cbb44 2px dotted; HEIGHT: 90px" cellSpacing=0 cellPadding=0 align=center bgColor=#ffffff background=http://img13.poco.cn/mypoco/myphoto/20121103/14/64081293201211031359023756794857216_002.jpg border=0>
 <tr>
 <td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px">
 上面实线代码框详解 【上边界属性※颜色，宽度，边框样式】 （BORDER-TOP: #424242 20px solid） 【右边界属性※颜色，宽度，边框样式】 （BORDER-RIGHT: #424242 20px solid） 【下边界属性※颜色，宽度，边框样式】 （BORDER-BOTTOM: #424242 20px solid） 【左边界属性※颜色，宽度，边框样式】 （BORDER-LEFT: #424242 20px solid） 【单元间距】cellSpacing=0 【边框颜色】borderColor=#424242 【单元边距】cellPadding=0   【宽高设定】WIDTH: 400px; HEIGHT: 90px; 【背景颜色】bgColor=#eb7aa7 【边框大小】border=0 （这里可以不设定或不用） 【对齐方式】align=center  ------------下面的这段是添加文字的代码------------- 【这段是文字的对齐方式】 【文字颜色】 【文字加粗】 颜色较浅的边框可以设置如下： 【亮边框颜色】（borderColorLight=#ffffe0） 【暗边框颜色】（borderColorDark=#ffffe0 ） <table style="BORDER-BOTTOM: #424242 20px solid; BORDER-LEFT: #424242 20px solid; WIDTH: 400px; HEIGHT: 90px; BORDER-TOP: #424242 20px solid; BORDER-RIGHT: #424242 20px solid" border=0 cellSpacing=0 borderColor=#424242 cellPadding=0 bgColor=#eb7aa7 align=center >     <tr>       <td>       color=#ebf1f1>实线</td>     </tr>   </table> </td>
 </tr>
 </table>
 
<HR style="WIDTH: 389px; HEIGHT: 3px" align=center width=389 color=#ff7777 noShade SIZE=1>

<div align=center> ◇◆◇具体的属性分析◇◆◇ </div>
<HR style="WIDTH: 389px; HEIGHT: 3px" align=center width=389 color=#ff7777 noShade SIZE=1>
 

 <table style="BORDER-RIGHT: #8cbb44 2px dotted; BORDER-TOP: #8cbb44 2px dotted; BORDER-LEFT: #8cbb44 2px dotted; WIDTH: 400px; BORDER-BOTTOM: #8cbb44 2px dotted; HEIGHT: 90px" cellSpacing=0 cellPadding=0 align=center bgColor=#ffffff background=http://img13.poco.cn/mypoco/myphoto/20121103/14/64081293201211031359023756794857216_002.jpg border=0>
 <tr>
 <td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px">
一、边框样式属性： 这个属性用来设定上下左右边框的宽度，设定上下左右边框的风格，它的样式如下： none (没有边框，无论边框宽度设为多大) dotted (点线式边框) dashed (破折线式边框) solid (直线式边框) double (双线式边框) groove (槽线式边框) ridge(脊线式边框) inset (内嵌效果的边框) outset (突起效果的边框) 用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。 medium (是缺省值) thin (比medium细) thick (比medium粗)   二、边框颜色属性(border-color） 这个属性用来设定上下左右边框的颜色。 
 三、边框尺寸属性： 定义边框的宽度width和高度height。 四、边界属性： ·上边界（border-top） ·右边界（border-right） ·下边界（border-bottom） ·左边界（border-left） ·边界（border） </td>
 </tr>
 </table>
 
<HR style="WIDTH: 389px; HEIGHT: 3px" align=center width=389 color=#ff7777 noShade SIZE=1>
 </td>
</tr>
</table>

II.〆石Zi° 发表于 2013-5-7 10:29:36

<TABLE style="BORDER-RIGHT: #2e8b57 15px solid; BORDER-TOP: #2e8b57 15px solid; BORDER-LEFT: #2e8b57 15px solid; WIDTH: 650px; BORDER-BOTTOM: #2e8b57 15px solid; HEIGHT: 90px" borderColor=#fff0f5 height=90 cellSpacing=20 borderColorDark=#ffffe0 cellPadding=0 width=600 align=center borderColorLight=#ffffe0 background=http://img13.poco.cn/mypoco/myphoto/20120805/13/64081293201208051308513625649539284_040.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #f0fff0 1px dashed; BORDER-TOP: #f0fff0 1px dashed; BORDER-LEFT: #f0fff0 1px dashed; WIDTH: 580px; BORDER-BOTTOM: #f0fff0 1px dashed" cellSpacing=0 cellPadding=0 align=center bgColor=#f0fff0 border=0>
<TBODY>
<TR>
<TD>
 ◇◆如何在背景图片上添加文字◆◇ 
<HR style="WIDTH: 389px; HEIGHT: 3px" align=center width=389 color=#da70d6 noShade SIZE=1>
 
<TABLE style="BORDER-RIGHT: #8cbb44 2px dotted; BORDER-TOP: #8cbb44 2px dotted; BORDER-LEFT: #8cbb44 2px dotted; WIDTH: 500px; BORDER-BOTTOM: #8cbb44 2px dotted; HEIGHT: 341px" cellSpacing=0 cellPadding=0 align=center bgColor=#ffffff background=http://img170.poco.cn/mypoco/myphoto/20120806/13/64081293201208061333583184330616314_008.jpg border=0>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 100px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px">
我是光标，在这里打字</TD></TR></TBODY></TABLE>
 上面示例代码如下： 
<HR style="WIDTH: 389px; HEIGHT: 3px" align=center width=389 color=#da70d6 noShade SIZE=1>
 
<TABLE style="BORDER-RIGHT: #8cbb44 2px dotted; BORDER-TOP: #8cbb44 2px dotted; BORDER-LEFT: #8cbb44 2px dotted; WIDTH: 424px; BORDER-BOTTOM: #8cbb44 2px dotted; HEIGHT: 233px" cellSpacing=0 cellPadding=0 align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px">
  <table style="BORDER-RIGHT: #8cbb44 2px dotted; BORDER-TOP: #8cbb44 2px dotted; BORDER-LEFT: #8cbb44 2px dotted; WIDTH: 500px; BORDER-BOTTOM: #8cbb44 2px dotted; HEIGHT: 341px" cellSpacing=0 cellPadding=0 align=center bgColor=#ffffff background=http://img170.poco.cn/mypoco/myphoto/20120806/13/64081293201208061333583184330616314_008.jpg  border=0>     <tr>       <td style="PADDING-RIGHT: 100px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px" >       我是光标，在这里打字</td>     </tr>   </table></TD></TR></TBODY></TABLE>
 紫色部分：background=背景图片地址 关于如何让背景图片完整显示在边框内，这里提示一下， 首先查看背景图片的宽度与高度，一般情况下，边框的宽与高要比 背景图片的宽高要大，对比完图片，边框的宽度和高度再做调整， 这样，就不会出现边框内有图片的多余部分。 绿色部分：设置添加的文字与边框的边距。 有些同学反映添加的文字位置不好调，这里补充一个 关于文字与边框距离的设置方法，在设置完文字居左居右居中的操作以后， 如果还是觉得文字太挨着边框，看起来显得挤挤的，可以使用上面示范中 绿色部分使用到的代码：如（PADDING-RIGHT:100px） 理解为与右边框相隔100px。其他以此类推。 如例所示，在需设置边距的文字前的<td>内添加设置 
<HR style="WIDTH: 389px; HEIGHT: 3px" align=center width=389 color=#da70d6 noShade SIZE=1>

  </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

II.〆石Zi° 发表于 2013-5-7 10:29:37

学习内容：

以实线边框为例，熟悉了解以下几个方面：

1、边框样式属性
2、边框颜色属性
3、边框尺寸属性
4、边界属性
5、背景颜色

学习重点：

1、边框各属性之间如何替换
2、如何在边框内添加背景图片
3、如何在背景图片在添加文字

II.〆石Zi° 发表于 2013-5-7 10:29:38

<table style="BORDER-RIGHT: #11000a 15px solid; BORDER-TOP: #11000a 15px solid; BORDER-LEFT: #11000a 15px solid; WIDTH: 650px; BORDER-BOTTOM: #11000a 15px solid; HEIGHT: 90px" cellSpacing=20 borderColorDark=#ffffe0 cellPadding=0 width=600 align=center borderColorLight=#ffffe0 background=http://img13.poco.cn/mypoco/myphoto/20120805/13/64081293201208051308513625649539284_040.jpg border=0>
<tr>
 <td>
<div align=center>
 <table style="BORDER-RIGHT: #f0fff0 1px dashed; BORDER-TOP: #f0fff0 1px dashed; BORDER-LEFT: #f0fff0 1px dashed; WIDTH: 580px; BORDER-BOTTOM: #f0fff0 1px dashed" cellSpacing=0 cellPadding=0 align=center bgColor=#f0fff0 border=0>
 <tr>
 <td>
 <table style="BORDER-RIGHT: #f0fff0 1px dotted; BORDER-TOP: #f0fff0 1px dotted; BORDER-LEFT: #f0fff0 1px dotted; WIDTH: 580px; BORDER-BOTTOM: #f0fff0 1px dotted" cellSpacing=0 cellPadding=0 align=center bgColor=#f0fff0 border=0>
 <tr>
 <td>
 <EMBED id=34287367 name=34287367 src=http://img.uu1001.cn/bcv3.swf?v=20121219 width=580 height=150 type=application/x-shockwave-flash quality="high" allowscriptaccess="always" wmode="transparent" flashvars="bannerWidth=580&bannerHeight=150&bannerSID=http://img2.tbcdn.cn/tfscom/T14LUOXXtfXXXgzXjX.xml&bannerXML=&bannerLink=http%3A%2F%2F&dataSource=&bid=34287367&appSource=default"></EMBED></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 </div>
 <table style="BORDER-RIGHT: #f0fff0 1px dashed; BORDER-TOP: #f0fff0 1px dashed; BORDER-LEFT: #f0fff0 1px dashed; WIDTH: 580px; BORDER-BOTTOM: #f0fff0 1px dashed" cellSpacing=0 cellPadding=0 align=center bgColor=#f0fff0 border=0>
 <tr>
 <td>

 <table style="WIDTH: 100%" borderColor=#eed5d2 height=260 cellSpacing=2 cellPadding=0 align=center bgColor=#11000a border=1>
 <tr>
 <td style="PADDING-LEFT: 15px" bgColor=#ffe1ff height=44>
 <table borderColor=#cccccc cellSpacing=2 cellPadding=3 width=520 align=center bgColor=#ffe1ff border=0>
 <tr>
 <td>
 1、图片的雾化效果</td>
 <td>
 <div align=right><EMBED style="WIDTH: 50px; HEIGHT: 20px" src=http://www.51119.com/play/swf/2.swf?file=http://storage.live.com/items/5ED4CFA8BE6EFE7E!583?filename=1.mp3&autoStart=false&repeatPlay=true&backColor=11000a&frontColor=FFFFFF&songVolume=90 width=63 height=17 type=application/x-shockwave-flash allowNetworking="internal" allowScriptAccess="never" invokeurls="false" wmode="transparent"></div></td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 4px; PADDING-TOP: 10px" align=left background=http://img170.poco.cn/mypoco/myphoto/20120908/16/64081293201209081621444251954970486_000.jpg>
 效  果  一  ： 
<IMG style="FILTER: alpha(opacity=100, finishOpacity=0,style=2)" src="http://img170.poco.cn/mypoco/myphoto/20120805/15/64081293201208051526389360299434942_029.jpg"> 
 <table style="BORDER-RIGHT: #8cbb44 2px dotted; BORDER-TOP: #8cbb44 2px dotted; BORDER-LEFT: #8cbb44 2px dotted; WIDTH: 400px; BORDER-BOTTOM: #8cbb44 2px dotted" cellSpacing=0 cellPadding=0 align=center bgColor=#ffffff border=0>
 <tr>
 <td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px">
代码如下： 
<HR align=left width=400 color=#8cbb44 noShade SIZE=1>
 <IMG style="FILTER: alpha(opacity=100, finishOpacity=0,style=2)" src="http://img170.poco.cn/mypoco/myphoto/20120805/15/64081293201208051526389360299434942_029.jpg"></td>
 </tr>
 </table>
 效  果  二  ： <IMG style="FILTER: alpha(opacity=380, finishOpacity=0,style=3)" src="http://img170.poco.cn/mypoco/myphoto/20120805/16/64081293201208051644482219731566197_027.jpg"> 
 <table style="BORDER-RIGHT: #8cbb44 2px dotted; BORDER-TOP: #8cbb44 2px dotted; BORDER-LEFT: #8cbb44 2px dotted; WIDTH: 400px; BORDER-BOTTOM: #8cbb44 2px dotted" cellSpacing=0 cellPadding=0 align=center bgColor=#ffffff border=0>
 <tr>
 <td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px">
代码如下： 
<HR align=left width=400 color=#8cbb44 noShade SIZE=1>
 <IMG style="FILTER: alpha(opacity=380, finishOpacity=0,style=3)" src="http://img170.poco.cn/mypoco/myphoto/20120805/15/64081293201208051526389360299434942_029.jpg"></td>
 </tr>
 </table>
 →  雾化的样式根据代码中紫色标注的数据来变化 </td>
 </tr>
 </table>
 <IMG height=20 src="http://img2081.poco.cn/mypoco/myphoto/20121230/12/61860215201212301207021085431361455_017.gif" width=498 border=0> 
 <table style="WIDTH: 100%" borderColor=#eed5d2 height=260 cellSpacing=2 cellPadding=0 align=center bgColor=#11000a border=1>
 <tr>
 <td style="PADDING-LEFT: 15px" bgColor=#ffe1ff height=44>
 <table borderColor=#cccccc cellSpacing=2 cellPadding=3 width=520 align=center bgColor=#ffe1ff border=0>
 <tr>
 <td>
 2、图片的波浪效果</td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 4px; PADDING-TOP: 10px" align=left background=http://img170.poco.cn/mypoco/myphoto/20120908/16/64081293201209081621444251954970486_000.jpg>
 原   图   效  果  ： <IMG src="http://img13.poco.cn/mypoco/myphoto/20120823/16/64081293201208231615163944576700106_025.jpg"> 代   码   效   果   ： 
<IMG style="FILTER: wave(add=true,freq=100,lightstrength=50 phase=20 strength=5)" src="http://img13.poco.cn/mypoco/myphoto/20120823/16/64081293201208231615163944576700106_025.jpg"> 
 <table style="BORDER-RIGHT: #8cbb44 2px dotted; BORDER-TOP: #8cbb44 2px dotted; BORDER-LEFT: #8cbb44 2px dotted; WIDTH: 400px; BORDER-BOTTOM: #8cbb44 2px dotted" cellSpacing=0 cellPadding=0 align=center bgColor=#ffffff border=0>
 <tr>
 <td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px">
代码如下： 
<HR align=left width=400 color=#8cbb44 noShade SIZE=1>
 <IMG style="FILTER: wave(add=true,freq=100,lightstrength=50 phase=20 strength=5)" src="http://img13.poco.cn/mypoco/myphoto/20120823/16/64081293201208231615163944576700106_025.jpg"></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <IMG height=20 src="http://img2081.poco.cn/mypoco/myphoto/20121230/12/61860215201212301207021085431361455_017.gif" width=498 border=0>  
 <table style="WIDTH: 100%" borderColor=#eed5d2 height=260 cellSpacing=2 cellPadding=0 align=center bgColor=#11000a border=1>
 <tr>
 <td style="PADDING-LEFT: 15px" bgColor=#ffe1ff height=44>
 <table borderColor=#cccccc cellSpacing=2 cellPadding=3 width=520 align=center bgColor=#ffe1ff border=0>
 <tr>
 <td>
 3、图片的透明效果</td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 4px; PADDING-TOP: 10px" align=left background=http://img170.poco.cn/mypoco/myphoto/20120908/16/64081293201209081621444251954970486_000.jpg>
 原   图   效  果  ： <IMG src="http://img13.poco.cn/mypoco/myphoto/20120805/13/64081293201208051308513625649539284_040.jpg"> 代   码   效   果   ： 

 <table style="FILTER: alpha(opacity=50)’; WIDTH: 510px; HEIGHT: 382px" align=center background=http://img13.poco.cn/mypoco/myphoto/20120805/13/64081293201208051308513625649539284_040.jpg border=0>
 <tr>
 <td></td>
 </tr>
 </table>
 
 <table style="BORDER-RIGHT: #8cbb44 2px dotted; BORDER-TOP: #8cbb44 2px dotted; BORDER-LEFT: #8cbb44 2px dotted; WIDTH: 400px; BORDER-BOTTOM: #8cbb44 2px dotted" cellSpacing=0 cellPadding=0 align=center bgColor=#ffffff border=0>
 <tr>
 <td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px">
代码如下： 
<HR align=left width=400 color=#8cbb44 noShade SIZE=1>
  <table style="FILTER: alpha(opacity=50)’; WIDTH: 510px; HEIGHT: 382px" align=center background=http://img13.poco.cn/mypoco/myphoto/20120805/13/64081293201208051308513625649539284_040.jpg border=0>     <tr>       <td></td>     </tr>   </table> 其中“WIDTH: 510px; HEIGHT: 382px”为图片宽高。 紫色标注的数值越大透明度越大。</td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <IMG height=20 src="http://img2081.poco.cn/mypoco/myphoto/20121230/12/61860215201212301207021085431361455_017.gif" width=498 border=0> 
 <table style="WIDTH: 100%" borderColor=#eed5d2 height=260 cellSpacing=2 cellPadding=0 align=center bgColor=#11000a border=1>
 <tr>
 <td style="PADDING-LEFT: 15px" bgColor=#ffe1ff height=44>
 <table borderColor=#cccccc cellSpacing=2 cellPadding=3 width=520 align=center bgColor=#ffe1ff border=0>
 <tr>
 <td>
 4、图片的左右翻转效果</td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 4px; PADDING-TOP: 10px" align=left background=http://img170.poco.cn/mypoco/myphoto/20120908/16/64081293201209081621444251954970486_000.jpg>
 原   图   效  果  ： <IMG src="http://img170.poco.cn/mypoco/myphoto/20120805/16/64081293201208051633413963731957328_030.jpg"> 代   码   效   果   ： 

 <table style="FILTER: fliph; WIDTH: 500px; HEIGHT: 335px" align=center background=http://img170.poco.cn/mypoco/myphoto/20120805/16/64081293201208051633413963731957328_030.jpg border=0>
 <tr>
 <td></td>
 </tr>
 </table>
 
 <table style="BORDER-RIGHT: #8cbb44 2px dotted; BORDER-TOP: #8cbb44 2px dotted; BORDER-LEFT: #8cbb44 2px dotted; WIDTH: 400px; BORDER-BOTTOM: #8cbb44 2px dotted" cellSpacing=0 cellPadding=0 align=center bgColor=#ffffff border=0>
 <tr>
 <td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px">
代码如下： 
<HR align=left width=400 color=#8cbb44 noShade SIZE=1>
  <table style="FILTER: fliph; WIDTH: 500px; HEIGHT: 335px" align=center background=http://img170.poco.cn/mypoco/myphoto/20120805/16/64081293201208051633413963731957328_030.jpg border=0>     <tr>       <td></td>     </tr>   </table> 其中“WIDTH: 500px; HEIGHT: 335px”为图片宽高。 </td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <IMG height=20 src="http://img2081.poco.cn/mypoco/myphoto/20121230/12/61860215201212301207021085431361455_017.gif" width=498 border=0> 
 <table style="WIDTH: 100%" borderColor=#eed5d2 height=260 cellSpacing=2 cellPadding=0 align=center bgColor=#11000a border=1>
 <tr>
 <td style="PADDING-LEFT: 15px" bgColor=#ffe1ff height=44>
 <table borderColor=#cccccc cellSpacing=2 cellPadding=3 width=520 align=center bgColor=#ffe1ff border=0>
 <tr>
 <td>
 5、图片的模糊效果</td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 4px; PADDING-TOP: 10px" align=left background=http://img170.poco.cn/mypoco/myphoto/20120908/16/64081293201209081621444251954970486_000.jpg>
 原   图   效  果  ： <IMG src="http://img13.poco.cn/mypoco/myphoto/20120805/13/64081293201208051308513625649539284_027.jpg"> 代   码   效   果   ： 

 <table style="FILTER: blur(add=5,direction=300,strength=50); WIDTH: 500px; HEIGHT: 376px" align=center background=http://img13.poco.cn/mypoco/myphoto/20120805/13/64081293201208051308513625649539284_027.jpg border=0>
 <tr>
 <td></td>
 </tr>
 </table>
 
 <table style="BORDER-RIGHT: #8cbb44 2px dotted; BORDER-TOP: #8cbb44 2px dotted; BORDER-LEFT: #8cbb44 2px dotted; WIDTH: 400px; BORDER-BOTTOM: #8cbb44 2px dotted" cellSpacing=0 cellPadding=0 align=center bgColor=#ffffff border=0>
 <tr>
 <td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px">
代码如下： 
<HR align=left width=400 color=#8cbb44 noShade SIZE=1>
    <table style="FILTER: blur(add=5,direction=300,strength=50); WIDTH: 500px; HEIGHT: 376px" align=center background=http://img13.poco.cn/mypoco/myphoto/20120805/13/64081293201208051308513625649539284_027.jpg border=0>     <tr>       <td></td>     </tr>   </table> 其中“WIDTH: 500px; HEIGHT: 376px”为图片宽高。 括号里的数值可以根据自己喜好设置，可以动手尝试。 </td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 </td>
</tr>
</table>

II.〆石Zi° 发表于 2013-5-7 10:29:39

flash网页播放器HTML代码【一】

本帖最后由 II.〆石Zi° 于 2013-1-3 18:31 编辑 
<TABLE style="POSITION: relative" cellSpacing=20 cellPadding=0 width=600 align=center bgColor=#feeff8 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=8 cellPadding=10 width="100%" bgColor=#dd77b4 border=1>
<TBODY>
<TR>
<TD bgColor=#feeff8>
 播放器与播放器的定位代码 
<TABLE style="BORDER-RIGHT: #dd77b4 5px dashed; BORDER-TOP: #dd77b4 5px dashed; MARGIN-TOP: 50px; BORDER-LEFT: #dd77b4 5px dashed; WIDTH: 92%; BORDER-BOTTOM: #dd77b4 6px dashed" cellSpacing=1 cellPadding=1 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px" bgColor=#feeff8>
 这是无定位的普通播放器： <embed height="20" type="application/x-shockwave-flash" width="50" src="http://www.51119.com/play/swf/2.swf?file=mp3</A>地址&autoStart=true&repeatPlay=true&backColor=dd77bb&frontColor=ffffff&songVolume=120" menu="false" wmode="transparent" /> 
<TABLE style="BORDER-TOP: #d3ef34 1px solid; BORDER-LEFT: #d3ef34 1px solid; WIDTH: 95%" cellSpacing=0 cellPadding=4 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 20px; PADDING-BOTTOM: 10px; WIDTH: 95%; PADDING-TOP: 10px" bgColor=#d3ef34> 播放器效果 【宽度分别是25,150,350】 <EMBED src=http://www.51119.com/play/swf/2.swf?file=mp3地址&autoStart=true&repeatPlay=true&backColor=dd77bb&frontColor=ffffff&songVolume=120 width=25 height=20 type=application/x-shockwave-flash menu="false" wmode="transparent"> <EMBED src=http://www.51119.com/play/swf/2.swf?file=mp3地址&autoStart=true&repeatPlay=true&backColor=dd77bb&frontColor=ffffff&songVolume=120 width=150 height=20 type=application/x-shockwave-flash menu="false" wmode="transparent"> <EMBED src=http://www.51119.com/play/swf/2.swf?file=mp3地址&autoStart=true&repeatPlay=true&backColor=dd77bb&frontColor=ffffff&songVolume=120 width=350 height=20 type=application/x-shockwave-flash menu="false" wmode="transparent"> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> 
<DIV align=center> </DIV>
<DIV align=center>
<TABLE style="BORDER-RIGHT: #b8dd22 6px solid; BORDER-TOP: #b8dd22 6px solid; MARGIN-TOP: 50px; BORDER-LEFT: #b8dd22 6px solid; WIDTH: 92%; BORDER-BOTTOM: #b8dd22 6px solid" cellSpacing=1 cellPadding=1 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 20px; PADDING-TOP: 20px" bgColor=#feeff8 height=90>
 ◇ 播放器的代码说明： 
<TABLE style="BORDER-TOP: #d3ef34 1px solid; BORDER-LEFT: #d3ef34 1px solid; WIDTH: 98%" cellSpacing=0 cellPadding=4 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 20px; PADDING-BOTTOM: 10px; WIDTH: 95%; PADDING-TOP: 10px">
 ● height=20 这是播放器的高 width=50 这是播放器的宽 ● file=mp3地址这就是你的歌曲链接 ● autoStart=false或true【false是手动播放；true是自动播放】 ● repeatPlay=true【这是重复的意思，这里一般不用改】 ● backColor=564353【这是播放器背景颜色，注意颜色代码前不用#】 ● frontColor=ffffff 【这是播放器按键加载条的颜色】 ● songVolume=120 【这是音量，一般也不用动】 ● wmode="transparent" menu="false"【这是窗体模式不用改】 注：播放器颜色可以自主调，不管换什么样的图片都可以根据主图色设置播放器为相近的色，适合任何帖。
  </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV> 
<TABLE style="BORDER-RIGHT: #dd77b4 5px dashed; BORDER-TOP: #dd77b4 5px dashed; MARGIN-TOP: 50px; BORDER-LEFT: #dd77b4 5px dashed; WIDTH: 92%; BORDER-BOTTOM: #dd77b4 6px dashed" cellSpacing=1 cellPadding=1 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 20px; PADDING-TOP: 20px" bgColor=#feeff8 height=90> 这是简单定位的播放器：
 <div align="right"><embed style="WIDTH: 50px; HEIGHT: 20px; MARGIN-RIGHT: 20px" type="application/x-shockwave-flash" src="<A href="http://www.51119.com/play/swf/2.swf?file=mp3">http://www.51119.com/play/swf/2.swf?file=mp3</A>地址&autoStart=false&repeatPlay=true&backColor=dd77bb&frontColor=ffffff&songVolume=120" menu="false" wmode="transparent" /></div> 定位播放器只是比不定位播放器多了一项设置而已【如下红色标记】 先是设定播放器靠右边或是左边：<div align="right"> 然后通过播放器的代码设定播放器与右边框的距离：MARGIN-RIGHT: 40px; 宽高自己可以随意设置WIDTH（宽）: 50px; HEIGHT（高）: 20px; 【一定记得大写的部分要用""引号括起来，当然；分号也是不能少的】 
<TABLE style="BORDER-TOP: #d3ef34 1px solid; BORDER-LEFT: #d3ef34 1px solid; WIDTH: 95%" cellSpacing=0 cellPadding=4 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 20px; PADDING-BOTTOM: 10px; WIDTH: 95%; PADDING-TOP: 10px" bgColor=#d3ef34>播放器定位效果 【边距分别设定为MARGIN-RIGHT: 80px；150px】 
<DIV align=right><EMBED style="WIDTH: 50px; MARGIN-RIGHT: 80px; HEIGHT: 20px" src=http://www.51119.com/play/swf/2.swf?file=mp3地址&autoStart=false&repeatPlay=true&backColor=dd77bb&frontColor=ffffff&songVolume=120 type=application/x-shockwave-flash wmode="transparent" menu="false"></DIV> 
<DIV align=right><EMBED style="WIDTH: 93px; MARGIN-RIGHT: 150px; HEIGHT: 20px" src=http://www.51119.com/play/swf/2.swf?file=mp3地址&autoStart=false&repeatPlay=true&backColor=dd77bb&frontColor=ffffff&songVolume=120 type=application/x-shockwave-flash menu="false" wmode="transparent"></DIV> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> 
<TABLE style="BORDER-RIGHT: #dd77b4 5px dashed; BORDER-TOP: #dd77b4 5px dashed; MARGIN-TOP: 50px; BORDER-LEFT: #dd77b4 5px dashed; WIDTH: 92%; BORDER-BOTTOM: #dd77b4 6px dashed" cellSpacing=1 cellPadding=1 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 20px; PADDING-TOP: 20px" bgColor=#feeff8 height=90> 这是播放器的浮动设定：
 <EMBED style="WIDTH: 50px; FLOAT: right; HEIGHT: 20px; MARGIN-RIGHT: 40px" type=application/x-shockwave-flash src=http://www.51119.com/play/swf/2.swf?file=mp3地址&autoStart=false&repeatPlay=true&backColor=dd77bb&frontColor=ffffff&songVolume=120 wmode="transparent" menu="false">我是文字 定位播放器只是比不定位播放器多了一项设置而已【如下红色标记】 先是设定播放器靠浮动在文字或图片的右边或是左边： FLOAT: right； 然后通过播放器的代码设定播放器与右边框的浮动距离：MARGIN-RIGHT: 40px; 宽高自己可以随意设置WIDTH（宽）: 50px; HEIGHT（高）: 20px; 【一定记得大写的部分要用""引号括起来，当然；分号也是不能少的】 
<TABLE style="BORDER-TOP: #d3ef34 1px solid; BORDER-LEFT: #d3ef34 1px solid; WIDTH: 95%" cellSpacing=0 cellPadding=4 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 20px; PADDING-BOTTOM: 10px; WIDTH: 95%; PADDING-TOP: 10px" bgColor=#d3ef34>播放器浮动效果 【浮动距离分别设定为MARGIN-RIGHT: 40px；MARGIN-LEFT: 40px】 <EMBED style="FLOAT: right; WIDTH: 50px; MARGIN-RIGHT: 40px; HEIGHT: 20px" src=http://www.51119.com/play/swf/2.swf?file=mp3地址&autoStart=false&repeatPlay=true&backColor=dd77bb&frontColor=ffffff&songVolume=120 type=application/x-shockwave-flash wmode="transparent" menu="false"> 我是文字 <EMBED style="FLOAT: left; MARGIN-LEFT: 40px; WIDTH: 50px; HEIGHT: 20px" src=http://www.51119.com/play/swf/2.swf?file=mp3地址&autoStart=false&repeatPlay=true&backColor=dd77bb&frontColor=ffffff&songVolume=120 type=application/x-shockwave-flash menu="false" wmode="transparent"> 我是文字 </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
 以上就是关于播放器的基本设定，当然关于播放器的定位和浮动效果的设定也可以用于 图片或文字的设定等等，你可以自己根据需要搭配 有问题可留言 </TD></TR></TBODY></TABLE>
 整理：幸福 </TD></TR></TBODY></TABLE>

II.〆石Zi° 发表于 2013-5-7 10:29:40

flash网页播放器HTML代码【二】

本帖最后由 II.〆石Zi° 于 2013-1-3 18:30 编辑 
<TABLE style="POSITION: relative" cellSpacing=20 cellPadding=0 width=600 align=center bgColor=#feeff8 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=8 cellPadding=10 width="100%" bgColor=#dd77b4 border=1>
<TBODY>
<TR>
<TD bgColor=#feeff8>
 播放器有无背景色的设定代码 
<TABLE style="BORDER-RIGHT: #dd77b4 5px dashed; BORDER-TOP: #dd77b4 5px dashed; MARGIN-TOP: 50px; BORDER-LEFT: #dd77b4 5px dashed; WIDTH: 92%; BORDER-BOTTOM: #dd77b4 6px dashed" cellSpacing=1 cellPadding=1 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px" bgColor=#feeff8>
 这是透明播放器： 
<H6 class=quote> <EMBED src=http://www.estvideo.com/dew/media/dewplayer-multi.swf width=44 height=20 type=application/x-shockwave-flash flashvars="son=mp3地址&autoplay=0" wmode="transparent"</H6> 

<TABLE style="BORDER-TOP: #d3ef34 1px solid; BORDER-LEFT: #d3ef34 1px solid; WIDTH: 95%" cellSpacing=0 cellPadding=4 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 20px; PADDING-BOTTOM: 10px; WIDTH: 95%; PADDING-TOP: 10px" bgColor=#d3ef34> 播放器效果 【宽度分别是25,44,63,240】 <EMBED src=http://www.estvideo.com/dew/media/dewplayer-multi.swf width=25 height=20 type=application/x-shockwave-flash flashvars="son=mp3地址&autoplay=0" wmode="transparent"> <EMBED src=http://www.estvideo.com/dew/media/dewplayer-multi.swf width=44 height=20 type=application/x-shockwave-flash wmode="transparent" flashvars="son=mp3地址&autoplay=0"> <EMBED src=http://www.estvideo.com/dew/media/dewplayer-multi.swf width=63 height=20 type=application/x-shockwave-flash wmode="transparent" flashvars="son=mp3地址&autoplay=0"> <EMBED src=http://www.estvideo.com/dew/media/dewplayer-multi.swf width=240 height=20 type=application/x-shockwave-flash wmode="transparent" flashvars="son=mp3地址&autoplay=0"> </TD></TR></TBODY></TABLE>
<H6></H6></TD></TR></TBODY></TABLE>
<DIV align=center> </DIV>
<DIV align=center>
<TABLE style="BORDER-RIGHT: #b8dd22 6px solid; BORDER-TOP: #b8dd22 6px solid; MARGIN-TOP: 50px; BORDER-LEFT: #b8dd22 6px solid; WIDTH: 92%; BORDER-BOTTOM: #b8dd22 6px solid" cellSpacing=1 cellPadding=1 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 20px; PADDING-TOP: 20px" bgColor=#feeff8 height=90>
 ◇ 播放器的代码说明： 
<TABLE style="BORDER-TOP: #d3ef34 1px solid; BORDER-LEFT: #d3ef34 1px solid; WIDTH: 98%" cellSpacing=0 cellPadding=4 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 20px; PADDING-BOTTOM: 10px; WIDTH: 95%; PADDING-TOP: 10px">
 ● width=290【播放器宽度】 ● height=25【播放器高度】 ● bg=0xfff7fb【中部背景色】 ● leftbg=0xff6fb7【播放器左边背景色】 ● lefticon=0xfff4fa【播放器左边标准的颜色】 ● rightbg=0xff6fb7【播放器右边背景色】 ● rightbghover=0xffd0e8【播放器右边背景接触颜色】 ● righticon=0xfff4fa【播放器右边标志色】 ● righticonhover=0xeb5f8f【播放器右边标志接触色】 ● track=0xfef8fa【播放器滑条进度颜色】 ● loader=0xf999cb【播放器加载条颜色】 ● slider=0xf2228f【滑块颜色】 ● border=0xeb5f8f【滑块边框颜色】 ● text=0xf2228f【文本颜色】 ● autostart=no【手动播放no，自动播放yes】 ● loop=no"【循环播放yes，不循环no】 ● wmode="transparent" 【窗体透明】 
 </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV> 
<TABLE style="BORDER-RIGHT: #dd77b4 5px dashed; BORDER-TOP: #dd77b4 5px dashed; MARGIN-TOP: 50px; BORDER-LEFT: #dd77b4 5px dashed; WIDTH: 92%; BORDER-BOTTOM: #dd77b4 6px dashed" cellSpacing=1 cellPadding=1 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 20px; PADDING-TOP: 20px" bgColor=#feeff8 height=90> 这是有背景的播放器： 
<H6 class=quote> <EMBED src=http://www.estvideo.com/dew/media/dewplayer-multi.swf width=240 height=20 type=application/x-shockwave-flash flashvars="son=mp3地址&autoplay=0" bgcolor="#ee1169"></H6>
  
<TABLE style="BORDER-TOP: #d3ef34 1px solid; BORDER-LEFT: #d3ef34 1px solid; WIDTH: 95%" cellSpacing=0 cellPadding=4 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 20px; PADDING-BOTTOM: 10px; WIDTH: 95%; PADDING-TOP: 10px" bgColor=#d3ef34> 有背景播放器效果 【宽度分别是25,44,63,240】 <EMBED src=http://www.estvideo.com/dew/media/dewplayer-multi.swf width=25 height=20 type=application/x-shockwave-flash bgcolor="#ee1169" flashvars="son=mp3地址&autoplay=0"> <EMBED src=http://www.estvideo.com/dew/media/dewplayer-multi.swf width=44 height=20 type=application/x-shockwave-flash bgcolor="#ee1169" flashvars="son=mp3地址&autoplay=0"> <EMBED src=http://www.estvideo.com/dew/media/dewplayer-multi.swf width=63 height=20 type=application/x-shockwave-flash bgcolor="#ee1169" flashvars="son=mp3地址&autoplay=0"> <EMBED src=http://www.estvideo.com/dew/media/dewplayer-multi.swf width=240 height=20 type=application/x-shockwave-flash bgcolor="#ee1169" flashvars="son=mp3地址&autoplay=0">  </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> 
 以上是这款播放器的基本设定，如果点定位或设置浮动， 按照上一款播放器的设置就可以，这里就不做说明了， 当然你可以自己根据需要搭配 有问题可留言 </TD></TR></TBODY></TABLE>
 整理：幸福 </TD></TR></TBODY></TABLE>

II.〆石Zi° 发表于 2013-5-7 10:29:41

flash网页播放器HTML代码【三】

本帖最后由 II.〆石Zi° 于 2013-1-3 18:30 编辑 <TABLE style="POSITION: relative" cellSpacing=20 cellPadding=0 width=600 align=center bgColor=#feeff8 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=8 cellPadding=10 width="100%" bgColor=#dd77b4 border=1>
<TBODY>
<TR>
<TD bgColor=#feeff8>
 网页播放器HTML代码的设定 
<DIV align=center> </DIV>
<DIV align=center>
<TABLE style="BORDER-RIGHT: #b8dd22 6px solid; BORDER-TOP: #b8dd22 6px solid; MARGIN-TOP: 50px; BORDER-LEFT: #b8dd22 6px solid; WIDTH: 92%; BORDER-BOTTOM: #b8dd22 6px solid" cellSpacing=1 cellPadding=1 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 20px; PADDING-TOP: 20px" bgColor=#feeff8 height=90> 
 ◇ 播放器的代码 
<H6 class=quote align=left>
<BLOCKQUOTE class=blockquote><EMBED height=25 type=application/x-shockwave-flash width=290 src=http://www.51119.com/play/swf/03.swf?soundFile=mp3地址&bg=0xfff7fb&leftbg=0xff6fb7&lefticon=0xfff4fa&rightbg=0xff6fb7&rightbghover=0xffd0e8&righticon=0xfff4fa&righticonhover=0xeb5f8f&text=0xf2228f&slider=0xf2228f&track=0xfef8fa&border=0xeb5f8f&loader=0xf999cb&autostart=no&loop=no quality="high" wmode="transparent" > </BLOCKQUOTE></H6> 
<TABLE style="BORDER-TOP: #d3ef34 1px solid; BORDER-LEFT: #d3ef34 1px solid; WIDTH: 98%" cellSpacing=0 cellPadding=4 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 20px; PADDING-BOTTOM: 10px; WIDTH: 95%; PADDING-TOP: 10px" align=left> ◇ 播放器的代码解释 ● width=290【播放器宽度】 ● height=25【播放器高度】 ● bg=0xfff7fb【中部背景色】 ● leftbg=0xff6fb7【播放器左边背景色】 ● lefticon=0xfff4fa【播放器左边标准的颜色】 ● rightbg=0xff6fb7【播放器右边背景色】 ● rightbghover=0xffd0e8【播放器右边背景接触颜色】 ● righticon=0xfff4fa【播放器右边标志色】 ● righticonhover=0xeb5f8f【播放器右边标志接触色】 ● track=0xfef8fa【播放器滑条进度颜色】 ● loader=0xf999cb【播放器加载条颜色】 ● slider=0xf2228f【滑块颜色】 ● border=0xeb5f8f【滑块边框颜色】 ● text=0xf2228f【文本颜色】 ● autostart=no【手动播放no，自动播放yes】 ● loop=no"【循环播放yes，不循环no】 ● wmode="transparent" 【窗体透明】 </TD></TR></TBODY></TABLE> 
<TABLE style="BORDER-TOP: #d3ef34 1px solid; BORDER-LEFT: #d3ef34 1px solid; WIDTH: 95%" cellSpacing=0 cellPadding=4 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 20px; PADDING-BOTTOM: 10px; WIDTH: 98%; PADDING-TOP: 10px" bgColor=#d3ef34> 播放器效果 
<TABLE style="WIDTH: 95%" borderColor=#664466 cellSpacing=0 cellPadding=3 border=1>
<TBODY>
<TR>
<TD> <EMBED src=http://www.51119.com/play/swf/03.swf?soundFile=mp3地址&bg=0xfff7fb&leftbg=0xff6fb7&lefticon=0xfff4fa&rightbg=0xff6fb7&rightbghover=0xffd0e8&righticon=0xfff4fa&righticonhover=0xeb5f8f&text=0xf2228f&slider=0xf2228f&track=0xfef8fa&border=0xeb5f8f&loader=0xf999cb&autostart=no&loop=no width=150 height=20 type=application/x-shockwave-flash wmode="transparent" quality="high"> 
<H6 class=quote align=left>
<BLOCKQUOTE class=blockquote><embed src="http://www.51119.com/play/swf/03.swf?soundFile=mp3地址&bg=0xfff7fb&leftbg=0xff6fb7&lefticon=0xfff4fa&rightbg=0xff6fb7&rightbghover=0xffd0e8&righticon=0xfff4fa&righticonhover=0xeb5f8f&text=0xf2228f&slider=0xf2228f&track=0xfef8fa&border=0xeb5f8f&loader=0xf999cb&autostart=no&loop=no" width="150" height="20" quality="high" type="application/x-shockwave-flash"wmode="transparent" ></BLOCKQUOTE></H6> </TD></TR>
<TR>
<TD> <EMBED src=http://www.51119.com/play/swf/03.swf?soundFile=mp3地址&bg=0xfff7fb&leftbg=0xff6fb7&lefticon=0xfff4fa&rightbg=0xff6fb7&rightbghover=0xffd0e8&righticon=0xfff4fa&righticonhover=0xeb5f8f&text=0xf2228f&slider=0xf2228f&track=0xfef8fa&border=0xeb5f8f&loader=0xf999cb&autostart=no&loop=no width=290 height=25 type=application/x-shockwave-flash wmode="transparent" quality="high"> 
<H6 class=quote align=left>
<BLOCKQUOTE class=blockquote><EMBED src=http://www.51119.com/play/swf/03.swf?soundFile=mp3地址&bg=0xfff7fb&leftbg=0xff6fb7&lefticon=0xfff4fa&rightbg=0xff6fb7&rightbghover=0xffd0e8&righticon=0xfff4fa&righticonhover=0xeb5f8f&text=0xf2228f&slider=0xf2228f&track=0xfef8fa&border=0xeb5f8f&loader=0xf999cb&autostart=no&loop=no width=290 height=25 type=application/x-shockwave-flash quality="high" wmode="transparent"> </BLOCKQUOTE></H6> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV> 
 以上是这款播放器的基本设定，如果点定位或设置浮动， 依然是按照第一款播放器的设置就可以，这里就不做说明了， 有问题可留言 </TD></TR></TBODY></TABLE>
 整理：幸福 </TD></TR></TBODY></TABLE>

II.〆石Zi° 发表于 2013-5-7 10:29:42

flash网页播放器HTML代码【四】

本帖最后由 II.〆石Zi° 于 2013-1-3 18:29 编辑 <DIV align=center>
<TABLE style="WIDTH: 640px; POSITION: relative" cellSpacing=10 cellPadding=0 align=center bgColor=#feeff8 border=0>
<TBODY>
<TR>
<TD> 
<TABLE style="WIDTH: 560px" cellSpacing=8 cellPadding=0 bgColor=#dd77b4 border=1>
<TBODY>
<TR>
<TD bgColor=#feeff8>
 flash网页播放器HTML代码【四】 
<DIV align=center>
<TABLE style="WIDTH: 520px; BORDER-COLLAPSE: collapse" borderColor=#99cc00 cellSpacing=2 cellPadding=3 align=center bgColor=#99cc00 border=1>
<TBODY>
<TR>
<TD align=middle> 
<FIELDSET style="WIDTH: 420px" align=center>
<DIV align=left><LEGEND style="WIDTH: 109px; HEIGHT: 22px" align=left>
播放器说明 </LEGEND> “autoStart=yes”是自动播放，改成NO就是手动播放了 “repeatPlay=yes”是循环播放,改成NO就是取消循环播放 “歌曲地址”就是mp3地址，“歌曲名称”就不用说了吧 “wmode ”= 窗体模式 “transparent ”= 透明 “autostart=true ”是否在音乐档下载完之后就自动播放 “true”=是，“false”=否 (内定值) “loop"="true" 是否自动反复播放。 "LOOP''=2 表示重复两次，true 是， false 否。 </DIV></FIELDSET> <EMBED src=http://www.zqzone.cn/show/mp3/swf/zQzone_cn279.swf?song=歌曲名称&autoStart=yes&repeatPlay=yes&mp3=mp3地址&.swf width=300 height=200 type=application/x-shockwave-flash wmode="transparent" autostart="1" invokeurls="false" loop="1" allownetworking="internal" allowscriptaccess="never"> <EMBED src=http://www.zqzone.cn/show/mp3/swf/zQzone_cn375.swf?song=歌曲名称&autoStart=yes&repeatPlay=yes&mp3=mp3地址&.swf width=300 height=200 type=application/x-shockwave-flash wmode="transparent" autostart="1" invokeurls="false" loop="1" allownetworking="internal" allowscriptaccess="never"> <EMBED src=http://www.zqzone.cn/show/mp3/swf/zQzone_cn389.swf?song=歌曲名称&autoStart=yes&repeatPlay=yes&mp3=mp3地址&.swf width=300 height=200 type=application/x-shockwave-flash wmode="transparent" autostart="1" invokeurls="false" loop="1" allownetworking="internal" allowscriptaccess="never"> <EMBED src=http://www.zqzone.cn/show/mp3/swf/zQzone_cn263.swf?song=歌曲名称&autoStart=yes&repeatPlay=yes&mp3=mp3地址&.swf width=300 height=200 type=application/x-shockwave-flash wmode="transparent" autostart="1" invokeurls="false" loop="1" allownetworking="internal" allowscriptaccess="never"> <EMBED src=http://www.zqzone.cn/show/mp3/swf/zQzone_cn350.swf?song=歌曲名称&autoStart=yes&repeatPlay=yes&mp3=mp3地址&.swf width=300 height=200 type=application/x-shockwave-flash wmode="transparent" autostart="1" invokeurls="false" loop="1" allownetworking="internal" allowscriptaccess="never"> <EMBED src=http://www.xcwhw.cn/fla/bfq/120.swf?n=歌曲名称&mp3=mp3地址&.swf width=300 height=200 type=application/x-shockwave-flash wmode="transparent" autostart="1" loop="1" invokeurls="false" allownetworking="internal" allowscriptaccess="never"> <EMBED src=http://www.xcwhw.cn/fla/bfq/113.swf?n=歌曲名称&mp3=mp3地址&.swf width=300 height=200 type=application/x-shockwave-flash wmode="transparent" autostart="1" loop="1" invokeurls="false" allownetworking="internal" allowscriptaccess="never"> <EMBED src=http://www.xcwhw.cn/fla/bfq/105.swf?n=歌曲名称&mp3=mp3地址&.swf width=300 height=200 type=application/x-shockwave-flash wmode="transparent" autostart="1" loop="1" invokeurls="false" allownetworking="internal" allowscriptaccess="never">  <EMBED src=http://www.zqzone.cn/show/mp3/swf/zQzone_cn292.swf?song=歌曲名称&autoStart=yes&repeatPlay=yes&mp3=mp3地址&.swf width=300 height=200 type=application/x-shockwave-flash wmode="transparent" autostart="1" invokeurls="false" loop="1" allownetworking="internal" allowscriptaccess="never">  
<TABLE style="BORDER-TOP: #d3ef34 1px solid; BORDER-LEFT: #d3ef34 1px solid; WIDTH: 95%" cellSpacing=0 cellPadding=4 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 20px; PADDING-BOTTOM: 10px; WIDTH: 98%; PADDING-TOP: 10px" bgColor=#feeff2> 播放器代码 
<TABLE style="WIDTH: 95%" borderColor=#664466 cellSpacing=0 cellPadding=3 border=1>
<TBODY>
<TR>
<TD> 这是播放器的样式，按照下面的数字279位置替换即可 【替换码：292，279，375，389，263，350】 
<H6 class=quote align=left>
<BLOCKQUOTE class=blockquote><EMBED height=200 type=application/x-shockwave-flash width=300 src=http://www.zqzone.cn/show/mp3/swf/zQzone_cn279.swf?song=歌曲名称&autoStart=yes&repeatPlay=yes&mp3=mp3地址&.swf allowscriptaccess="never" allownetworking="internal" loop="1" invokeurls="false" autostart="1" wmode="transparent" ></BLOCKQUOTE></H6> </TD></TR>
<TR>
<TD> 这是播放器的样式，按照下面的数字120位置替换即可 【替换码：113，105，120】 
<H6 class=quote align=left>
<BLOCKQUOTE class=blockquote><EMBED height=200 type=application/x-shockwave-flash width=300 src=http://www.xcwhw.cn/fla/bfq/120.swf?n=歌曲名称&mp3=mp3地址&.swf wmode="transparent" autostart="1" loop="1" invokeurls="false" allownetworking="internal" allowscriptaccess="never" ></BLOCKQUOTE></H6> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE></DIV> 
 整理：幸福  </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE></DIV>

II.〆石Zi° 发表于 2013-5-7 10:29:43

flash网页播放器HTML代码【五】

本帖最后由 II.〆石Zi° 于 2013-1-3 18:28 编辑 
<DIV align=center>
<TABLE style="WIDTH: 680px; POSITION: relative" cellSpacing=10 cellPadding=0 align=center bgColor=#feeff8 border=0>
<TBODY>
<TR>
<TD> 
<TABLE style="WIDTH: 600px" cellSpacing=8 cellPadding=0 bgColor=#dd77b4 border=1>
<TBODY>
<TR>
<TD bgColor=#feeff8>
 豆瓣网页播放器HTML代码  
<DIV align=center>
<TABLE style="WIDTH: 520px; BORDER-COLLAPSE: collapse" borderColor=#99cc00 cellSpacing=2 cellPadding=3 align=center bgColor=#99cc00 border=1>
<TBODY>
<TR>
<TD align=middle>  <EMBED src=http://www.douban.com/swf/player.swf?url=http://storage.live.com/items/5ED4CFA8BE6EFE7E!168?filename=ThankYouForEverything.mp3&autoplay=0 width=260 height=30 type=application/x-shockwave-flash wmode="transparent" allowscriptaccess="always"> 
<TABLE style="BORDER-TOP: #d3ef34 1px solid; BORDER-LEFT: #d3ef34 1px solid; WIDTH: 95%" cellSpacing=0 cellPadding=4 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 20px; PADDING-BOTTOM: 10px; WIDTH: 98%; PADDING-TOP: 10px" bgColor=#feeff2> 播放器代码 
<TABLE style="WIDTH: 95%" borderColor=#664466 cellSpacing=0 cellPadding=3 border=1>
<TBODY>
<TR>
<TD>
 【自动播放】 
<H6 class=quote align=left>
<BLOCKQUOTE class=blockquote><EMBED src='http://www.douban.com/swf/player.swf?url=MP3地址&autoplay="1" width=260 height=30 type=application/x-shockwave-flash allowscriptaccess="always" wmode="transparent"></BLOCKQUOTE></H6> </TD></TR>
<TR>
<TD>
 【手动播放】 
<H6 class=quote align=left>
<BLOCKQUOTE class=blockquote>
<BLOCKQUOTE class=blockquote><EMBED src='http://www.douban.com/swf/player.swf?url=MP3地址&autoplay="0" width=260 height=30 type=application/x-shockwave-flash allowscriptaccess="always" wmode="transparent"></BLOCKQUOTE></BLOCKQUOTE></H6> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE></DIV> 
 整理：念汐。  </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE></DIV>

II.〆石Zi° 发表于 2013-5-7 10:29:44

flash网页播放器HTML代码【六】

<DIV align=center>
<TABLE style="WIDTH: 640px; POSITION: relative" cellSpacing=10 cellPadding=0 align=center bgColor=#feeff8 border=0>
<TBODY>
<TR>
<TD> 
<TABLE style="WIDTH: 600px" cellSpacing=8 cellPadding=0 bgColor=#dd77b4 border=1>
<TBODY>
<TR>
<TD bgColor=#feeff8>
 flash网页播放器HTML代码【六】  
<DIV align=center>
<TABLE style="WIDTH: 520px; BORDER-COLLAPSE: collapse" borderColor=#99cc00 cellSpacing=2 cellPadding=3 align=center bgColor=#99cc00 border=1>
<TBODY>
<TR>
<TD align=middle> 
<TABLE style="BORDER-TOP: #d3ef34 1px solid; BORDER-LEFT: #d3ef34 1px solid; WIDTH: 95%" cellSpacing=0 cellPadding=4 align=center border=1>
<TBODY>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 20px; PADDING-BOTTOM: 10px; WIDTH: 98%; PADDING-TOP: 10px" bgColor=#feeff2> 播放器代码 
<TABLE style="WIDTH: 95%" borderColor=#664466 cellSpacing=0 cellPadding=3 border=1>
<TBODY>
<TR>
<TD>
 1、进入<A href="http://muzicons.com/" rel=nofollow>http://muzicons.com/</A> 
2、可以看到如下图，填写设置项目： 
<DIV><IMG src="http://img2081.poco.cn/mypoco/myphoto/20130101/00/64081293201301010009343185149315247_001.jpg"></DIV>
<DIV> </DIV>
<DIV> 可以选择表情，也可以选择播放器的背景颜色， 但是按键只能为绿色。输入音乐外链即可。 </DIV>
<DIV>
<DIV>3、在设置选项表右边生成播放器代码，如下图： </DIV></DIV>
<DIV> </DIV>
<DIV><IMG src="http://img2081.poco.cn/mypoco/myphoto/20130101/00/64081293201301010009343185149315247_000.jpg"></DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV>可以选择使用HTML码，也可以选择使用FLASH。</DIV> </TD></TR>
<TR>
<TD> 【播放器示范】：只能手动播放，不能设置自动播放 
<DIV><EMBED align=middle src=http://muzicons.com/musicon_v_srv_new.swf width=150 height=50 type=application/x-shockwave-flash wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" flashvars="&nomuz=muzicon%20unavailable&site=http://muzicons.com/&icon_pic=12.png&music_file=http://t.cn/zOnmQlI?a.mp3&bg_color=e86562&type_of_clip=simple_text&text_color=FFFFFF&text_message=%E7%A0%82%E5%A1%B5%E3%81%AE%E5%BD%BC%E6%96%B9%E3%81%B8%E2%80%A6" allowNetworking="internal"> <A style="FONT-SIZE: 11px; COLOR: #e86562" href="http://muzicons.com/" target=_blank rel=nofollow>妳好 | 舊莳光 ……</A> </DIV> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE></DIV>
 整理：念汐 </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE></DIV>

夕颜染梦 发表于 2013-5-7 10:34:27

石老大辛苦了，这些对我的帮助很大，一定认真学习

三世烟火 发表于 2013-5-7 10:36:47

谢谢石头的发帖，辛苦了

六月飞霜 发表于 2013-5-7 10:42:09

没有笨学生，只有懒学生，我就是个懒人
谢谢楼主的教程，我个笨人慢慢看

独自安好。 发表于 2013-5-7 11:17:14

去年一起学习的点滴出现在眼前是那么的亲切

晓清发表于 2013-5-7 11:19:56

本帖最后由清水洗尘于 2013-5-11 01:30 编辑 
<TABLE style="WIDTH: 98%" class=t_table cellSpacing=0 cellPadding=0 bgColor=dimgray>
<TBODY>
<TR>
<TD>  
 
<TABLE style="BORDER-BOTTOM: rgb(255,255,255) 10px dotted; BORDER-LEFT: rgb(255,255,255) 10px dotted; WIDTH: 65.76%; HEIGHT: 345px; BORDER-TOP: rgb(255,255,255) 10px dotted; BORDER-RIGHT: rgb(255,255,255) 10px dotted" border=1 cellSpacing=0 cellPadding=0 background=http://img170.poco.cn/mypoco/myphoto/20120914/13/64081293201209141323473037126033171_019.jpg>
<TBODY>
<TR>
<TD style="PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 30px; PADDING-TOP: 10px">
 阿里妈妈-使用教程 编辑：念汐      <A href="http://www.ii23.cn/home.php?mod=spacecp&ac=profile&op=verify&vid=6" target=_blank></A>  摘自ii23<A class=xw1 href="http://www.ii23.cn/space-uid-572137.html" target=_blank>優蕥の徊眸</A>收藏贴 <A href="http://www.ii23.cn/home.php?mod=spacecp&ac=profile&op=verify&vid=6" target=_blank></A>  </TD></TR></TBODY></TABLE> 首先进入阿里妈妈网址：<A href="http://banner.alimama.com/">http://banner.alimama.com/</A>注册登陆 登陆首页后，我们可以点击（如图示）下列红箭头所指的选项查看模板 <IMG border=0 src="http://img170.poco.cn/mypoco/myphoto/20121213/15/64081293201212131530272213797359594_000.jpg"> 1、通栏/店招选项里一般为横条模板，我们可以选择喜欢的式样做帖子头图 或插图，高度为150左右，长度根据你帖子的实际情况更改到你需要的长度， 这里，我先贴一个我自己DIY过的通栏图效果做为预览示范： http://img3.tbcdn.cn/tfscom/T1MLmyXuBdXXXtxVjX.swf 2、图文选项里的模板，无论从长度高度大小式样都是比较综合的， 可以根据搜索条件搜索你需要的，搜索的关键词有很多选择，如下面图示： <IMG border=0 src="http://img170.poco.cn/mypoco/myphoto/20121213/16/6408129320121213163716082.jpg" width=458 height=214> 1）点开图文选项，我们看到图文类目，有行业和主题，这里我们只截取了一部分 这都是搜索的关键词，个人觉得这两大分类可以视为风格的 <IMG border=0 src="http://img170.poco.cn/mypoco/myphoto/20121213/16/64081293201212131641203772187384131_000.jpg" width=301 height=66> 2）同一页面上，按排行搜索，包括排序筛选、评价排行、人气排行三种。 <IMG border=0 src="http://img170.poco.cn/mypoco/myphoto/20121213/16/64081293201212131641203772187384131_001.jpg" width=262 height=59> 3）同一页面上，自己输入文字关键词搜索，这个基本用得少。 <IMG border=0 src="http://img170.poco.cn/mypoco/myphoto/20121213/16/64081293201212131641203772187384131_002.jpg" width=228 height=66> 4）同一页面上，按尺寸、色彩搜索，可以任选一，也可以同时选择搜索。 5）、设计师选项：为专业设计的模板选项，如果你在通栏和图文选项中 没有发现自己喜欢的模板，也可以点击这个选项进去浏览选择。 <IMG border=0 src="http://img2081.poco.cn/mypoco/myphoto/20130104/15/6408129320130104154203021.jpg" width=404 height=53> 选择。一：在每个模板前进如图上示： 如果你在阿里找到自己喜欢的模板，可以点击“收藏” 收藏的模板点击右上角我的设计中“收藏”选项查看 二、如何编辑模板及重点： 1）、如果需要套用模板，点击“开始制作”进入模板编辑模式。 以下是编辑模式下功能键的指示图： <IMG border=0 src="http://img2081.poco.cn/mypoco/myphoto/20130104/17/6408129320130104172627083.jpg" width=454 height=372> 2）、当你选择的模板的长宽与你实际需要的不一样时，你首先需要改变 边框宽度与高度。而边框内的内容大小，这里主要是指图片、文字以及FLASH素材的大小。 用鼠标单击你需要改变的部分，然后根据实际情况，通过鼠标拖动来改变它的大小。 3）、下面，首先讲到的是设置一栏的设置，如下图所示： <IMG border=0 src="http://img2081.poco.cn/mypoco/myphoto/20130104/17/6408129320130104172957035.jpg" width=454 height=372> 上图中的宽度和高度分别指的是背景的宽度和高度，圆角旁边的参数设置 指的是边框四个角的弧度，设置为零的话边框就是方形。 而边框旁边的参数设置指的是添加到背景的边框的宽度，设置好 数值后，再点击数字部分会出现一个颜色表，这里就选择边框的颜色 <IMG border=0 src="http://img14.poco.cn/mypoco/myphoto/20130111/14/6408129320130111142349074.jpg" width=286 height=303> 上图是边框设置颜色卡，这里特别标注到的是下面的透明选项 如果觉得上面的颜色卡颜色太过浓烈，也可以使用下面的透明度设置减淡 <IMG border=0 src="http://img14.poco.cn/mypoco/myphoto/20130111/14/6408129320130111143300071.jpg" width=289 height=243> 继续点击到基本属性框的右上的背景色设置选项，上图已用红箭头标注了。 这里也会出现一个颜色卡，这是设置整个背景的颜色的，同样的下面依然有个透明度设置， 大家可以适当地用下。到这里，边框以及背景部分的设置就差不多了。 4）、接着讲到的是第二栏文字的设置，点击文字选项，它会有两种文字设置： 一种是动画文字，即是动态效果的文字，二是静态文字。如下图所示： <IMG border=0 src="http://img14.poco.cn/mypoco/myphoto/20130111/14/6408129320130111144819059.jpg" width=283 height=441> 这里先讲到动画文字，设置参数有字体、动画、滤镜以及颜色卡中的透明度 字体不多说，都明白，动画一栏是动态效果的选择，而滤镜有点类似PS中的字效选项 一般有投影、内投影、发光、内发光、斜角、描边等，选择无表示不使用任何效果 滤镜右侧是各种效果的颜色选择，这里我们可以看到，不管是字体本身的颜色卡， 还是滤镜的颜色卡下面都有透明度的调动拉条，根据实际情况注意使用。 动画文字大小是通过鼠标拖动拉大拉小来设置的。继续讲到静态文字，如下图： <IMG border=0 src="http://img14.poco.cn/mypoco/myphoto/20130112/13/6408129320130112134144088.jpg" width=282 height=410> ①的设置和一般文档编辑功能一样，不详细讲。 ②文字所在部分背景色的设置，单击点开我们可以看到颜色卡，下面依旧有透明度设置 ③文字前固定符号的设置选项，分别是图标形状选项、图标大小设置、图标颜色设置 ④静态文字颜色设置选项，前面部分是固定颜色选择，后面是颜色卡选择。 5）、下图是关于图片选项功能的截图，这里我只截了重要部分： <IMG border=0 src="http://img14.poco.cn/mypoco/myphoto/20130112/14/6408129320130112140051098.jpg" width=282 height=272> 如图中所示，标签和背景两栏里是一些阿里自带图片素材，包括动态素材 “我的素材”选项是上传本地图片地方，一般只能上传不大于30K的图片。所以， 如果要使用这个上传功能，只能先将图片做压缩处理，我一般用ISEE来进行处理。 具体的素材运用就要靠大家多做练习去慢慢发掘和设计了。 6）、继续讲到第四个选项“商品”，前面有讲到这个选项是 输入单张图片的地方，点击商品，如下图所示，随便选择一个商品模块： <IMG border=0 src="http://img14.poco.cn/mypoco/myphoto/20130112/14/64081293201301121423351687531569291_001.jpg" width=284 height=520> 大家都看到了，每个模块都是图片带文字，删除图片旁边的文字与数字 然后点击图片，在右边会出图文广告属性框，如下图所示： <IMG border=0 src="http://img14.poco.cn/mypoco/myphoto/20130112/14/64081293201301121423351687531569291_000.jpg" width=282 height=385> 图上特别标注的图片右侧空白框，替换你要用的图片地址， 即可用到你自己的素材。链接右侧空白框的地址，这里删除掉，不用管。 下面的宽度和高度是指图片的宽度和高度，按原图尺寸填就好 位置栏，我们注意选好后面的拉伸效果就好，不然图片与模块的尺寸不一样的话 图片四周会出现多余部分。效果部分一般是对图片边框效果的选择， 旁边是颜色选项，和静态文字一样有两种选择，一个是固定的一个是颜色卡的。 图上中宽度右侧的背景色设置和前面设置里的背景色是一样的，这里不重复说。 7）、接下来要讲到的是第五个选项轮播——多张图片动态效果，如下图所示： <IMG border=0 src="http://img14.poco.cn/mypoco/myphoto/20130112/15/6408129320130112153127042.jpg" width=282 height=487> 点击“轮播”，与商品模块一样，会出现多种轮播模块供你选择 这里依旧随便选择一个模块做为示范，然后点击一下模块的图片，右侧会出现上图 所示的动态模块属性框，我们首先可以看到一排图片，这就是轮播图片。 与单张图片输入的方法是一样的，看到①部分，每点击一下模块自带的图片 我们在图片选项右侧空白框内换上自己的图片地址，多张图片以此类推。同样下面链接选项 右侧的地址要删除。上图②所指的是轮播图片添加的地方，点击图标右下的“+”号即可。 接下来是模块整体设置，包括宽高、边框、背景色等，这里应该看得懂 接下来是轮播中图片部分的设置，缩放注意选择拉伸效果，宽高看图片属性填写 而③是图片形状的选项，包括方形、菱形、六边形、花形、圆形、心形等 可根据帖子设计自形选择图片形状。再下面是轮播效果的设置。 ④所在的选项是轮播的各种方式以及轮播时间的设置。 ⑤是对轮播功能中控件的设置选项，如下图红框标注的地方： <IMG border=0 src="http://img14.poco.cn/mypoco/myphoto/20130112/15/6408129320130112155221093.jpg" width=255 height=291> 前面部分是对控件图标式样的选择，其中无表示不显示控件图标， 点击后面部分的图标，会出现对控件中图标更详细的设置选项，如下图所示： <IMG border=0 src="http://img14.poco.cn/mypoco/myphoto/20130112/15/64081293201301121558333603220058545_000.jpg" width=255 height=291> 这个部分设置包括图标式样、背景、大小、边距以及图标中文字或者数字的设置。 8）、到这里，阿里妈妈的基本使用方法讲完了，下面附加一个网站的自带教学视频： http://player.youku.com/player.php/sid/XMjI4NzMzOTgw/v.swf </TD></TR></TBODY></TABLE>

页: [1] 2

三毛钱's Archiver