Seabird

my father was a captain in Chinese navy. His ship arrived in Oce
个人资料
正文

石头制贴讲座之一(HTML基础及模版一号)

(2011-05-20 11:28:18) 下一个
这一贴很简单,就当石头模版一号,一个图片加一个flash就搞定。原料:一个图,一个恰当的flash. 一个歌曲链接地址。1)图可以说做贴子成功与否80%看图选的好不好,恰当不恰当,这个很重要。网上的图片多的不计其数,去百度图片里搜一下,按你的歌曲所要表现的主题去搜,然后选好图放进自己的电脑里。我是专门有一个图片收藏夹,看到好的图片就荡下来存里面,做贴子时候去找。图是不是好看和你的艺术品位很有关系哦。图片一般要找大图,宽度600 到1024 的都可以。但是贴子要用600 到900之间宽度的。如果你找到的图片是1024的大图(一般用作壁纸),需要用软件来resize, 去搜一下“光影魔术手”这个软件,用它来resize和加边框就很好。大的贴子我一般用宽度是800的,一般的帖子用750或者700的,太宽了不好,会出现滚动条,看着不方便。图选好后,可以在图片上写上歌词,写歌词有很多方法。简单的可以用WINDOWS自带的PAINT, POWERPOINT, 下载一些制图软件最好,比如PHOTOSHOP, 功能非常强大,我们平常所说的照片被PS过了,就是被这个软件加工过的意思。也可以用其他的免费软件,功能简单一些,但作贴子足够了。我现在用的是 isee,搜一下又免费版。字体很重要,如果你的电脑里没有装各种好看的字体,那就写不出花样繁多的漂亮中文。去这个网站下载字体吧:http://font.knowsky.com/字体库非常浩瀚,什么样的漂亮字体都有,你就下载解压成font文件,然后拷贝在C盘windows下面的font文件夹里就ok了!我上面的贴子就是这个图:http://hiphotos.baidu.com/sttsyan/pic/item/d77cc137dbb0f0fda3cc2bd3.jpg原图大小是800X600缩小后用isee软件写上歌词:http://i44.tinypic.com/11j6uqo.jpg我这个图的最后大小是 700X525图要上载到网上,拿到图片链接地址,最常用的是tinypic.com,非常好用。2)FLASH来看看这个链接:http://web.wenxuecity.com/BBSView.php?SubID=ktv&MsgID=177749我现在还在用这些FLASH, 链接不容易过期,调用方便,选择很多。去网上搜索一下,就会有很多FLASH资源。这个是自称最大的FLASH集合网站:http://flashline.cn/在别的网站上找到的FLASH文件,有调用地址,但不一定有保证,链接很容易过期,这时候,可以把FLASH文件荡下来,再上传到文学城,得到文学城的FLASH链接地址,这样就像上传歌曲一样,只要文学城不出现问题,链接就能用。FLASH用好了,锦上添花,不用也没关系。3)歌曲链接这个大家都会,这里是文学城上传文件的链接:http://web.wenxuecity.com/upload.php选好自己的歌曲UPLOAD上去,一个连接地址就送到你的悄悄话里了。有了这三个原料就可以做贴了。首先在HTML语言里,一个贴子就是一个table, 所有的话要扩上尖刻号“<>”才能起作用。所以第一句要定义一个table, 也就是表单。第一句话就是定义表单的大小了。在括号里写上:table height="你图片的高度" width="你图片的宽度"cellspacing是表格里单元格之间的距离;cellpadding是表格里单元格内的空白部分;俗称就是外补丁和内补丁,也就是表格里面的东西距离边框的宽度距离。在本模版里面我都设置成0,这样图片到边框之间就没有距离了。border="编框宽度" 一般呢用5号宽度就行了,3也行,如果作图的时候已经有了边筐,不想要了就用0bordercolor="颜色代码",如果有边框,你就可选择合适颜色来定义你的边框了,颜色代码的选择看这个网址:http://www.citymao.com/n4863c37.aspx另外你还可以定义四个边框分别有不同的颜色,那就要用这句话:style="border-right: 颜色 宽度 虚实 border-top:颜色 宽度 虚实 border-left: 颜色 宽度 虚实border-bottom:颜色 宽度 虚实"比如说 BORDER-RIGHT: rgb(153,153,153) 3px solid; 那就是右边线颜色是 rgb(153,153,153) (银灰色); 宽度是3个pixel, 实线,(虚线就是dotted) 但一般不用那么复杂,可以不写这句。说到这里第一句话就说完了,就可以把这句话用括号括起来了。貌似很复杂,用惯了就快了,别忘了咱们现在在讲最简单的贴子模版,后面还有复杂的,准备好。第一句范例:(上面我的歌贴)Photobucket说完了第一句话,表单定义好了,就开始写表单里面的内容了。表单里有什么呢,包括上面提到的三个原料:图片,flash,歌曲三个原料都要是网页链接形式的,比如:图片地址:http://i44.tinypic.com/11j6uqo.jpgflash地址:http://imgfree.21cn.com/free/flash/92.swf歌曲地址:http://space.wenxuecity.com/media/1241932876.mp3首先来个尖括号,尖括号里面写上:tbody意思就是说,我现在要写表格里面的内容了。然后又一个括号,里面写上: trtr 是什么呢?就是table row的缩写,就是这一块东西我要写什么了。然后又一个括号,写上td (表中的一个单元格)以及下内容:valign="bottom" 纵向对齐的定义句,这样flash和歌曲播放器就能放在贴子的最下面了。align="center" 水平对齐的定义,这样flash和歌曲播放器就能在中央了。width="图片宽度"background="图片地址"注意只能用background来定义的图片在博客里面才不会被强制缩小,否则其他形式显实的图片到了博客里面会被强制减小到宽度450。第二句话说完了,括起来。第二句范例:(上面我的歌贴)Photobucket第三句话定义flash又是一个括号,里面写上embed 是用来插入多媒体的命令。src等于"flash调用地址" 就是让它显示这个flash, 至于位置嘛,前面第二句里面都定义好了,向下中看齐。width="flash宽度" 在本模版为了简单就选择图片宽度了,700,这样flash就可以覆盖整个图片。当然你要选窄一点也可以。height="图片高度减去20" 在这个例子里面是525-20=505,为什么短了20呢?就是留20的空间来放音乐播放器。否则歌曲播放器就掉出贴子了,不好看。type="application/x-shockwave-flash" 定义flash类型,加上就行了wmode="transparent" / 定义flash是透明的,能显示背景图片第三句就写完了。括起来。第三句范例:(上面我的歌贴)Photobucket第四句定义声音播放器。括号,再embed 然后 src等于号"音乐地址"width="播放器宽度" 任意宽度,只要不比图片宽就行了,我这里是270。height="20" 上面说了,给播放器就留了20的位置播放器向下向中对齐,上面定义完了。type="audio/x-pn-realaudio-plugin" 这个是播放器的播放格式,决定使用哪个软件播放,这里是用real player播放,你也可以选择其他的。我这个realplayer的格式在IE和Firefox里面都能听,有的播放器在某些浏览器里面放不出来,要注意。autostart="true" 播放自动开始,如果是false的话,看贴的时候还要按播放键才能放音乐。loop="true" / 自动循环,没完没了的放。你也可以选次数,比如loop="1",就是只放一次就停。第四句就结束了。结束语:HTML语言要有头有尾才完整,比如前面的tr,后面就要有/tr,才能成一对。这样就有下面几个括号,里面分别是:/div 结束模块/tr 结束/td 结束单元/tbody 结束表体内容/table 结束表单第四句和结尾句范例:(上面我的歌贴)Photobucket最后整个贴子就写完了,最后别忘了,我们想让贴子放在显示屏的中间才好看,不是靠左。所以贴子最前面要加上尖括号,里面写center最后面也要相应的加上尖括号斜杠center: /center全贴代码的范例:(抱歉这个忘了加center)Photobucket现在就可以看看贴子效果了,把这些code拷贝并粘贴到这里:http://web.wenxuecity.com/BBSAdd.php?SubID=ktv点击“预览“就能在下面看到效果了。如果觉得满意就可以放到博客里去欣赏,在博客里发的时候要注意,一定要点击那个转换键,转成HTML编辑格式,再复制到里面就行了。http://blog.wenxuecity.com/help/images//blog-help-11-a.gif这就是最简单的一个模版了,我掰开了揉碎了讲的细了点,为了让大家有点基础HTML语言的常识,以后再介绍复杂的就不那么多废话了,还是那句话,贴子好看与否关键是看图片选择的好坏。这里是我的“石头模版一号“范例全部code,你可以拿回去,换上自己的图片,flash和歌曲地址就是你的了。还要注意下面code里面有两句onload="javascript:if(this.width>450) this.width=450" 这个是帖子发博客的时候被强行加上去的,是废话,完全没用,要删掉。
由石头弟弟张贴 @ 2009-05-21
[ 打印 ]
阅读 ()评论 (1)
评论
目前还没有任何评论
登录后才可评论.