【製圖幫助】基本音畫貼的製作（一）

來源: smallguy 於 2012-10-08 17:24:28 [檔案] [博客] [舊帖] [給我悄悄話] 閱讀數 : (4256 bytes)

本帖於 2012-10-11 15:28:16 時間, 由普通用戶 smallguy 編輯

【製圖幫助】基本音畫貼的製作（一）

最基礎的音畫貼由一張圖片和一首樂曲組成。

一、學習基礎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地址。
========================================================================
效果圖：