「 LOMO·教程」HTML教程(H码编辑器、阿里妈妈、表格参数、播放器、图片效果等）

凉城旧梦

HTML码-新手入门-系列教程 by Hmily 对于HTML码的学习与运用，相信许多人都尝试过。这里， 总结一些个人代码学习以及运用的经验以供新手参考，欢迎大家一起交流。 LomoClub会员群:208280075 注 意 事 项： 1、 对于任何想学习HTML码的童鞋绝对欢迎。在学习之前， 请考虑清楚你是否有恒心与耐心，没有笨学生，只有懒学生。 2、 本帖将有针对性的对新手做出教程指导， 请学习的童鞋按照教程课时要求留下作业以便了解掌握程度。 还是那一句，懒人请自重，对于不按要求做的报学院处理。 学 习 重 点 ： 1、HTML码美帖必备工具 2、FLASH网页播放器运用及其HTML属性了解 3、常用HTML码基本属性及运用 4、FLASH效果的HTML码运用 5、美帖配色学习与运用 6、HTML码套用模板示范 编辑：Hmily 2014-07

凉城旧梦

HTML码美帖必备工具 1、作图软件 PS、光影魔术手、ISEE （百度下载，也可以使用你熟悉的软件） 2、HTML码在线编辑器 网址：http://ny.xmu.edu.cn/editor.asp （相关使用教程下一节贴出） 3、配色表（颜色代码表：论坛自带的也不错） 网址：http://bbs.lomoclub.com/color.html 4、阿里妈妈 网址：http://banner.alimama.com/ 注册建号，注意登陆使用淘宝联盟会员登陆界面。 5、56相册 （用于FLASH效果） 网址：http://www.56.com/ 6、POCO相册 网址：http://my.poco.cn/ 支持图片外链，长期有效；动态相册功能可用于FLASH效果 7、音乐外链网盘skydrive 网址：https://skydrive.live.com/ 请使用谷歌（火狐）浏览器进入网站注册，关于使用教程后面会贴出。 暂时就这些，如有需要其他的工具会更新此内容，请注意关注！

凉城旧梦

HTML码在线编辑器 使-用-教-程 编辑: Hmily 2014-07-26 1、点击http://ny.xmu.edu.cn/editor.asp进入，无需注册。 2、编辑器界面其实和WORD或者论坛发帖编辑框界面相类似。把鼠标移到 功能键的图标上都有中文的注解，相信对功能键的熟悉大家不难做到。 （底下我附上一张HTML在线编辑器功能键文字注解图） 3、以下为HTML在线编辑器的了解重点： 1）源代码：即为代码模式。相当于论坛发帖编辑框的纯文本模式 一般编辑代码首先点这个功能键复制粘贴你编辑的代码进入空白处， 对于有一定代码基础的童鞋，可以在这个模式下直接进编辑。 2）编辑：即为修改模式。如果你在预览过后对于你帖子的某部分不满意， 要进行修改，那么就要点击这个功能键进入修改代码内容， 这个模式下文字和图片也能够预览，但是FLASH包括FLASH的播放器不能看到 3）关于：图解中有解释，换行的意思，对于初学者，这里有必要 提下，一般换行大家可能会直接在帖子中直接回车，这里提醒大家以后编辑代码 养成好习惯，换行使用<BR>键，以免产生多余的代码导致帖子变形。 4）HTML在线编辑器中不能直接使用图片，这里我给出一个使用图片的代码 <IMG src="图片地址">，输入图片地址后，整段代码直接在代码模式下输入。

凉城旧梦

学习内容：

1、熟悉了解光影魔术手、ISEE的图片缩放功能（改变图片大小）以及边框美化功能

2、熟悉了解使用HTML在线编辑器的基本功能

3、熟悉了解POCO相册

凉城旧梦

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

凉城旧梦

◇◆先从这个边框介绍，下面有具体的属性分析◆◇ ※边框示例： 实线 上面实线代码框详解 【上边界属性※颜色，宽度，边框样式】 （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 ------------下面的这段是添加文字的代码------------- 【这段是文字的对齐方式】 <P align=center> 【文字颜色】 <FONT color=#ebf1f1> 【文字加粗】<STRONG></STRONG> 颜色较浅的边框可以设置如下： 【亮边框颜色】 （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> <P align=center><FONT color=#ebf1f1><STRONG>实线</STRONG></FONT></P></td> </tr> </table> ◇◆◇具体的属性分析◇◆◇ 一、边框样式属性： 这个属性用来设定上下左右边框的宽度，设定上下左右边框的风格，它的样式如下： 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）

凉城旧梦

◇◆如何在背景图片上添加文字◆◇ 我是光标，在这里打字 上面示例代码如下： <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" > <P align=right><FONT color=#000000 size=2>我是光标，在这里打字</FONT></P></td> </tr> </table> 紫色部分：background=背景图片地址 关于如何让背景图片完整显示在边框内，这里提示一下， 首先查看背景图片的宽度与高度，一般情况下，边框的宽与高要比 背景图片的宽高要大，对比完图片，边框的宽度和高度再做调整， 这样，就不会出现边框内有图片的多余部分。 绿色部分：设置添加的文字与边框的边距。 有些同学反映添加的文字位置不好调，这里补充一个 关于文字与边框距离的设置方法，在设置完文字居左居右居中的操作以后， 如果还是觉得文字太挨着边框，看起来显得挤挤的，可以使用上面示范中 绿色部分使用到的代码：如（PADDING-RIGHT:100px） 理解为与右边框相隔100px。其他以此类推。 如例所示，在需设置边距的文字前的<td>内添加设置

凉城旧梦

学习内容：

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

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

学习重点：

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

凉城旧梦

1、图片的雾化效果 效 果 一 ： 代码如下： <IMG style="FILTER: alpha(opacity=100, finishOpacity=0,style=2)" src="http://img170.poco.cn/mypoco/myphoto/20120805/15/64081293201208051526389360299434942_029.jpg"> 效 果 二 ： 代码如下： <IMG style="FILTER: alpha(opacity=380, finishOpacity=0,style=3)" src="http://img170.poco.cn/mypoco/myphoto/20120805/15/64081293201208051526389360299434942_029.jpg"> → 雾化的样式根据代码中紫色标注的数据来变化 2、图片的波浪效果 原 图 效 果 ： 代 码 效 果 ： 代码如下： <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"> 3、图片的透明效果 原 图 效 果 ： 代 码 效 果 ： 代码如下： <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”为图片宽高。 紫色标注的数值越大透明度越大。 4、图片的左右翻转效果 原 图 效 果 ： 代 码 效 果 ： 代码如下： <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”为图片宽高。 5、图片的模糊效果 原 图 效 果 ： 代 码 效 果 ： 代码如下： <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”为图片宽高。 括号里的数值可以根据自己喜好设置，可以动手尝试。

凉城旧梦

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

播放器与播放器的定位代码 这是无定位的普通播放器： <embed height="20" type="application/x-shockwave-flash" width="50" src="http://www.51119.com/play/swf/2.swf?file=mp3地址&autoStart=true&repeatPlay=true&backColor=dd77bb&frontColor=ffffff&songVolume=120" menu="false" wmode="transparent" /> 播放器效果 【宽度分别是25,150,350】 ◇ 播放器的代码说明： ● height=20 这是播放器的高 width=50 这是播放器的宽 ● file=mp3地址这就是你的歌曲链接 ● autoStart=false或true【false是手动播放；true是自动播放】 ● repeatPlay=true【这是重复的意思，这里一般不用改】 ● backColor=564353【这是播放器背景颜色，注意颜色代码前不用#】 ● frontColor=ffffff 【这是播放器按键加载条的颜色】 ● songVolume=120 【这是音量，一般也不用动】 ● wmode="transparent" menu="false"【这是窗体模式不用改】 注：播放器颜色可以自主调，不管换什么样的图片都可以根据主图色设置播放器为相近的色，适合任何帖。 这是简单定位的播放器： <div align="right"><embed style="WIDTH: 50px; HEIGHT: 20px; MARGIN-RIGHT: 20px" 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" menu="false" wmode="transparent" /></div> 定位播放器只是比不定位播放器多了一项设置而已【如下红色标记】 先是设定播放器靠右边或是左边：<div align="right"> 然后通过播放器的代码设定播放器与右边框的距离：MARGIN-RIGHT: 40px; 宽高自己可以随意设置WIDTH（宽）: 50px; HEIGHT（高）: 20px; 【一定记得大写的部分要用""引号括起来，当然；分号也是不能少的】 播放器定位效果 【边距分别设定为MARGIN-RIGHT: 80px；150px】 这是播放器的浮动设定： <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; 【一定记得大写的部分要用""引号括起来，当然；分号也是不能少的】 播放器浮动效果 【浮动距离分别设定为MARGIN-RIGHT: 40px；MARGIN-LEFT: 40px】 我是文字 我是文字 以上就是关于播放器的基本设定，当然关于播放器的定位和浮动效果的设定也可以用于 图片或文字的设定等等，你可以自己根据需要搭配 有问题可留言 整理：Hmily