smallguy2012-10-09 01:24:28

【制图帮助】基本音画贴的制作(一)

最基础的音画贴由一张图片和一首乐曲组成。

一、学习基础html代码。

W3Schools Online Web Tutorials - English

http://www.w3schools.com/

w3school 在线教程 - 中文

http://www.w3school.com.cn/

我们经常会用到的标识符号,如<p>,<table>,<tbody>,<tr>,<td>,<center>,<embed>,<img>, <html><body>等等都可以在html教程中接触到。
而<style><div>则属于CSS范畴,有兴趣的童鞋们一样可以在CSS教程中学习、了解相关内容。

二、制作音画贴所需的免费工具和网站。

1.“光影魔术手” - 图片处理工具,用于调整图片的大小、添加文字及边框,还可以做更多特效处理。
免费,下载链接:

光影魔术手

2.“Format Factory” - 格式工厂。顾名思义,用于音频、视频的格式转换、压缩。如将wma转为mp3,给mp3档做压缩,等等。更多的功能,童鞋们可以自己深入学习、了解。
免费。官网地址:

http://www.formatoz.com/

有了图片、音乐,就需要上传到相关网站,取得url地址。

3.图片上传地址,免费的有三个:

A.tinypic网站,可以上传图片、视频到此网站。官网地址:

http://tinypic.com/

B.picturetrail网站,一样可以上传图片、视频到该网站,但图片处理功能更为强大,有多种特效提供使用,比如3D, 图片跑马灯等等。

http://www.picturetrail.com/

C.photobucket网站,一样可以上传图片、视频到该网站,但图片处理功能更为强大,有多种特效提供使用,有点类似于picturetrail。

http://beta.photobucket.com/

4.音乐上传 - 文学城提供影音文件上传链接:

http://bbs.wenxuecity.com/legacy/upload.php

这样,分别得到了图片、音乐的url地址,保存起来。
接下来就需要html editor来编辑、制作html文本了。

5.免费的两款html editor.

A.notepad - 大多数童鞋应该不会陌生。

Start - All Programs - Accessories - Notepad.

notepad制作完文本,保存时要把后缀txt改为html。

B.Notepad++ - 功能更为强大,除了可以编辑、制作html文本,还可以制作CSS, as, js等等其他文本。
官网地址:

http://notepad-plus-plus.org/

制作好文本后,保存时在“save as type”的下拉菜单里选择“Hyoer Text Markup Language file”。
保存好文件,点击打开这个html文件,在发表之前做local test,查看效果并作适当修改。

三、最基本的html文件格式:

<html>
<body>

<center>
<img src="http://i46.tinypic.com/wisnio.jpg" /><br/>
<embed height="30" type="audio/mpeg" width="700"
src="http://space.wenxuecity.com/media/201209/25/1348640352.mp3" autostart="true" loop="true"></embed>
</center><br/><br/>

</body>
</html>

========================================================================
在博客或者论坛发表时,只需要两个<center>之间的代码:

<center>
<img src="http://i46.tinypic.com/wisnio.jpg" /><br/>
<embed height="30" type="audio/mpeg" width="700"
src="http://space.wenxuecity.com/media/201209/25/1348640352.mp3" autostart="true" loop="true"></embed>
</center><br/><br/>

做练习时,替换代码中的jpg和mp3的url地址。
========================================================================
效果图:






片片红叶2012-10-09 01:56:56
这么详细的制帖帮助,想学做帖的朋友有福了:)
弓尒2012-10-09 02:07:58
再造浮屠~~
smallguy2012-10-09 02:09:36
谢谢丽丽!想起俺初学做贴时,也曾经四处寻找此类的文章,受益匪浅,
annann92012-10-09 02:51:23
哇,谢谢!每次来这里听歌都对这里的童鞋做出的精美帖子艳羡不止。正想学习怎么做音画帖呢
229712012-10-09 03:17:48
我这个电脑盲试着也学学,希望关键的时候可以出手,变成制帖高手,哈,谢谢了
yy8882012-10-09 03:24:44
******收入论坛帮助“教你如何制作音乐贴子的程序。。。”
nakatsu_akira2012-10-09 03:41:42
在文学城下载音乐现在安全吗?
小得2012-10-09 03:44:27
谢谢大雅的分享,先存下这些资料,留待好好学习:))
小声音2012-10-09 04:54:57
是教材又是一个精美的歌贴,谢谢雅雅无私的奉献与分享:))
碧云天2012-10-09 05:17:18
谢谢!
beautifulwind2012-10-09 07:34:21
谢谢啦!俺转贴到美语世界坛啦!:)
smallguy2012-10-09 16:16:12
修订过,收藏的朋友们请update一下!
法国薰衣草2012-10-09 16:42:19
谢谢雅雅传授制贴知识
smallguy2012-10-09 17:14:12
草草的油管搬运功夫一直做的有声有色,就接着做搬运工吧:))
大灰狼太太2012-10-09 21:11:00
谢谢你的详细介绍
DUMARTINI2012-10-10 03:15:04
谢啊!非常有用的工具/资料帖
大石2012-10-10 17:32:12
练习(一)
法国薰衣草2012-10-11 10:48:29
唉。。。
墨游2013-03-18 23:03:16
回复:【制图帮助】基本音画贴的制作(一)
墨游2013-03-18 23:03:54
回复:【制图帮助】基本音画贴的制作(一)