【制图帮助】基本音画贴的制作（一）

来源: smallguy 于 2012-10-08 17:24:28 [档案] [博客] [旧帖] [给我悄悄话] 本文已被阅读：次 (4256 bytes)

本文内容已被 [ smallguy ] 在 2012-10-11 15:28:16 编辑过。如有问题，请报告版主或论坛管理删除.

【制图帮助】基本音画贴的制作（一）

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

一、学习基础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地址。
========================================================================
效果图：