2010年10月8日 星期五

Nginx+Apache2+PHP+MySQL|關於大型論壇系統環境搭建(20萬日IP負載均衡實戰)

測試環境:理想論壇(55188).
理想論壇為國內人氣最旺的股票論壇,注冊會員已超過100萬,並以每月60000人的速度穩定遞增,每日頁面訪問量超過200萬,並保持穩定增長的趨勢,60分鐘在線平均約2萬多人,最高記錄3萬3千多。 目前主題超過30萬,帖子接近1千萬,數據庫大小5.8GB,附件總大小大約150GB
之前理想論壇有三台服務器,兩台WEB服務器以及一台數據庫服務器,訪問已經漸漸出現瓶頸,在豬頭的建議下,站長決定增加一台服務器放數據庫,另外三台做WEB,並且對原有的服務器的操作系統進行升級。
硬件具體情況
MySQL服務器: DualXeon 5335/8GB內存/73G SAS硬盤(RAID0+1)/CentOS5.1-x86_64/MySQL5
三台WEB服務器如下:
N1. Dual Xeon 3.0 2GB 內存
N1. Dual Xeon 3.0 4GB 內存
N1. Dual Xeon 3.0(雙核) 4G內存
另外有三塊300G的SCSI硬盤准備做RAID5,用來存放附件,四台機器通過內網連接
豬頭考慮過的解決方案如下:
1. ZEUS + PHP5 + eAccelerator
2. squid + Apache2 + PHP + eAccelerator
3. nginx + PHP(fastcgi) + eAccelerator
4. nginx + Apache2 + PHP + eAccelerator
第一個方案,屬於比較完美的,而且很穩定,但是最大的問題是ZEUS是收費軟件,用盜版總會受良心責備的,所以暫時押後做候補方案
第二個方案,squid轉發請求給Apache2,很多網站都采用這種方式,而且效率也非常高,豬頭也測試了一下,但是問題非常嚴重,因為squid是把文件緩存起來的,所以每一個訪問過的文件,squid都要把它打開,理想論壇擁有150G的附件,而且訪問量巨大,這種情況下只有打開squid,機器很快就會因為打開文件過多而拒絕響應任何請求了,看來也不適合,只適合緩存文件只有幾百M以內的網站.
第三個方案,豬頭對第三個方案的測試結果是訪問量大的時候,PHP經常會出現bad gateway,看來通過TCP連接Fastcgi執行PHP的方法不夠穩定,豬頭也測試了通過Unix Socket連接執行PHP,同樣還是不穩定.
Apache2的安裝。
(由於服務器采用FreeBSD7,所以大部分軟件將會通過ports安裝)
由於Apache2只需要處理PHP請求,所以其他模塊基本上都不需要,所以不要選擇安裝其他模塊,即使rewrite也不需要,因為rewrite將會在nginx上面實現,如果熟悉,還可以修改Makefile刪掉不需要的部分,這樣經過優化之後,apache將會以最穩定最高效的方式處理PHP請求
cd /usr/ports/www/apache20
make install clean
修改httpd.conf(這裡僅列出要修改/增加的部分)
vi /usr/local/etc/apache2/httpd.conf
把KeepAlive On修改為KeepAlive Off,在下面添加
ServerLimit 2048
MaxClients增加到512
Listen 127.0.0.1:81 #由於httpd服務器不需要對外開放,僅僅處理nginx轉發過來的PHP請求,所以僅僅需要監聽本地的端口.
另外增加對PHP的支持
AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps
至於添加虛擬主機的部分將不再羅嗦,注意虛擬主機也監聽本地81端口就可以了
PHP5的安裝(GD庫等模塊請提前裝好)
cd /usr/ports/lang/php5
修改一下Makefile,把需要的東西加上去吧
本來應該有這樣一段的
CONFIGURE_ARGS= \
–with-layout=GNU \
–with-config-file-scan-dir=${PREFIX}/etc/php \
–disable-all \
–enable-libxml \
–with-libxml-dir=${LOCALBASE} \
–enable-reflection \
–program-prefix=」」
我們要把它修改成
CONFIGURE_ARGS= \
–with-layout=GNU \
–with-config-file-scan-dir=${PREFIX}/etc/php \
–disable-all \
–enable-libxml \
–with-libxml-dir=${LOCALBASE} \
–enable-reflection \
–program-prefix=」」 \
–with-config-file-path=/etc –enable-mbstring –enable-ftp –with-gd –with-jpeg-dir=/usr/local –with-png-dir=/usr/local –enable-magic-quotes –with-mysql=/usr/local –with-pear –enable-sockets –with-ttf –with-freetype-dir=/usr/local –enable-gd-native-ttf –with-zlib –enable-sysvsem –enable-sysvshm –with-libxml-dir=/usr/local –with-pcre-regex –enable-xml
make install clean
cp work/php-5.2.5/php.ini-dist /etc/php.ini
安裝eAccelerator
cd /usr/ports/www/eaccelerator
make install clean
把以下部分添加到php.ini尾端:
extension_dir=」/usr/local/lib/php/20060613/」
extension=」eaccelerator.so」
eaccelerator.cache_dir=」/tmp/eaccelerator」
eaccelerator.shm_size=」64〞
eaccelerator.enable=」1〞
eaccelerator.optimizer=」1〞
eaccelerator.check_mtime=」1〞
eaccelerator.debug=」0〞
eaccelerator.filter=」」
eaccelerator.shm_max=」0〞
eaccelerator.shm_ttl=」60〞
eaccelerator.shm_prune_period=」60〞
eaccelerator.shm_only=」0〞
eaccelerator.compress=」1〞
eaccelerator.compress_level=」9〞
eaccelerator.keys=」shm_and_disk」
eaccelerator.sessions=」shm_and_disk」
eaccelerator.content=」shm_and_disk」
建立緩存目錄以及修改權限
mkdir /tmp/eaccelerator
chmod 777 /tmp/eaccelerator
chown nobody:nobody /tmp/eaccelerator
nginx的安裝以及配置
cd /usr/ports/www/nginx
make install
有幾個module是我們需要的,要選上
HTTP module
http_addition module
http_rewrite module
http_realip module
http_stub_status module
其他的看自己需要了
修改配置文件
vi /usr/local/etc/nginx/nginx.conf
user nobody nobody;
worker_processes 4;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid /var/log/nginx.pid;
events {
worker_connections 10240;
}
http {
include mime.types;
default_type application/octet-stream;
limit_zone one $binary_remote_addr 10m;
#log_format main 『$remote_addr – $remote_user [$time_local] $request 『
# 『」$status」 $body_bytes_sent 「$http_referer」 『
# 『」$http_user_agent」 「$http_x_forwarded_for」『;
sendfile off;
tcp_nopush off;
#keepalive_timeout 0;
keepalive_timeout 10;
gzip off;
server {
listen 80;
server_name www.55188.net www.55188.com www1.55188.com www2.55188.com 55188.com 55188.net www.55188.cn 55188.cn bbs.55188.net bbs.55188.com bbs.55188.cn;
index index.html index.htm index.php;
root /home/www;
access_log /dev/null combined;
limit_conn one 5;#限制一個IP並發連接數為五個
error_page 404 /404.html;
error_page 403 /403.html;
location /status {
stub_status on;
access_log off;
auth_basic 「NginxStatus」;
auth_basic_user_file conf/htpasswd;
}
#在根目錄使用Discuz6.0 rewrite規則,如果你的論壇在二級目錄下面,則要相應修改location
location / {
rewrite ^/archiver/((fid|tid)-[\w\-]+\.html)$ /archiver/index.php?$1 last;
rewrite ^/forum-([0-9]+)-([0-9]+)\.html$ /forumdisplay.php?fid=$1&page=$2 last;
rewrite ^/thread-([0-9]+)-([0-9]+)-([0-9]+)\.html$ /viewthread.php?tid=$1&extra=page\%3D$3&page=$2 last;
rewrite ^/space-(username|uid)-(.+)\.html$ /space.php?$1=$2 last;
rewrite ^/tag-(.+)\.html$ /tag.php?name=$1 last;
break;
error_page 404 /404.html;
error_page 403 /403.html;
}
#對附件做防盜鏈,沒有正確的referer將會返回403頁面
location ~* ^.+\.(gif|jpg|png|swf|flv|rar|zip|doc|pdf|gz|bz2|jpeg|bmp|xls)$ {
valid_referers none blocked server_names *.55188.net *.55188.com;
if ($invalid_referer) {
rewrite ^/ http://www.55188.com/403.html;
}
}
#轉發PHP請求到本地的81端口,讓Apache處理.
location ~ \.php$ {
proxy_pass http://127.0.0.1:81;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_hide_header Content-Type;
}
}
}
測試一下你的配置文件是否都正確
/usr/local/sbin/apachectl configtest
/usr/local/sbin/nginx -t
都沒問題的話就啟動服務器吧
/usr/local/sbin/apachectl start
/usr/local/sbin/nginx -c /usr/local/etc/nginx/nginx.conf
瀏覽一下主頁,應該正常了
後繼討論,
1.數據庫.
數據庫的編譯安裝不再重復討論,僅僅討論環境,由於理想論壇的數據庫比較大,而且發展比較快,所以要作比較前一點的預算,硬盤需要使用15K RPM的SAS硬盤做RAID0+1,操作系統需要使用64位版本,因為服務器需要8GB內存,要注意的時,使用了64位系統之後部分比較老的軟件可能你無法找到64位的版本,這台機器就專門做MySQL服務器吧,如果數據庫超過10G,應該考慮MySQL_Cluster
2.附件.
因為有三台服務器做WEB,所以附件要使用nfs的方式通過內網進行共享,至於如何設置nfs這裡不再討論,如果有不明白的請將學費交給Google
3.WEB.
由於三台機器硬件配置不一致,所以有必要考慮一下負載平衡的問題,nginx本身附帶有負載平衡的功能,但是如果啟用負載平衡的功能的話,每台機器都將會把客戶端請求的數據緩存到本機,這樣增加了硬盤的IO,對於理想論壇的訪問量來說,這是個不小的開銷,最後我們是使用DNS查詢的方式來分配流量, 通過不同的A記錄,配置好點的機器,多分一條A記錄,配置差的就少一條A記錄,這樣從整體上看,流量分配應該比較平衡.
4.關於nginx並發連接
豬頭給nginx限制了每個IP的並發連接,因為對於大論壇來說,總是比較出名的,不說人家攻擊你什麼的.采集都特別多,如果不限制,很容易出問題,經常會導致PHP罷工.
以上只是豬頭愚見,如果有其他進展,豬頭會更新本貼,如有疑問或者不同見解,歡迎提出討論
當然還有很多很瘋狂的方法,例如說把WEB文件(附件除外)全部放內存裡面,MYSQL如果小於5G,也可以全部放內存裡面,不過這些方法都是太極端的了,優化效果須然好,但是風險很大。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
優化之後的效果
由於還有兩台機器升級沒完成,只帖一下其中一台WEB的狀況了。目前
Active connections: 1143
server accepts handled requests
1211445 1211445 6221785
Reading: 67 Writing: 136 Waiting: 940
Apache最優化要關閉不用的模塊,因為httpd請求全部讓nginx處理了,Apache僅僅需要處理PHP就可以了,目前我開啟的模塊
LoadModule access_module libexec/apache2/mod_access.so
LoadModule setenvif_module libexec/apache2/mod_setenvif.so
LoadModule mime_module libexec/apache2/mod_mime.so
LoadModule autoindex_module libexec/apache2/mod_autoindex.so
LoadModule negotiation_module libexec/apache2/mod_negotiation.so
LoadModule alias_module libexec/apache2/mod_alias.so
LoadModule rewrite_module libexec/apache2/mod_rewrite.so
LoadModule php5_module libexec/apache2/libphp5.so
autoindex negotiation以及rewrite這些應該都關閉的,但是要做相應的修改.目前跑起來絕對比Fastcgi要好
作者:豬頭
版權沒有,歡迎轉載,轉載請勿注明出處
(本文只針對Discuz論壇系統討論,由於軟件包更新速度比較快,你看本貼的時候可能已經是使用新版本的軟件包了,安裝方法可能不一致,詳細請查看軟件包的README文件)

2010年10月4日 星期一

GooEdit 內嵌於Google Chrome瀏覽器的「圖片編輯器」

GooEdit是個很特別的小工具,他是Google Chrome瀏覽器的擴充套件,可以讓我們在瀏覽網頁時,按一下GooEdit按鈕進入編輯模式,直接在網頁上為你選定的圖檔執行編輯、加工等工作。
GooEdit提供圖檔裁剪、放大、自定角度旋轉、上下左右翻轉、亮度與對比調整、色調、色彩飽和度、灰階、泛黃、過度曝光、模糊化、銳化、色彩調整、負片效果、油畫、浮雕、雜訊調整...等等特效與功能,幾乎常見的圖片調整效果都有了。
如果你常常需要針對網頁上的圖檔做些簡單的調整,可以直接使用內嵌於Google Chrome瀏覽器的GooEdit圖片編輯外掛來試試看。



▇ 軟體小檔案 ▇     (錯誤、版本更新回報)
  • 軟體名稱:GooEdit

  • 軟體版本: 1.1.0.5

  • 軟體語言:英文

  • 軟體性質:免費軟體

  • 檔案大小:262KB

  • 系統支援:此為Google Chrome瀏覽器擴充套件,支援4.1以上版本(下載

  • 官方網站:按這裡

  • 軟體下載:按這裡

  • 使用方法:

    第1步  用Google Chrome瀏覽器開啟GooEdit安裝頁面,按一下安裝按鈕把程式安裝到電腦中。安裝完成後,日後開啟有圖片的網頁時,如果要編輯圖檔,可以先按一下右上角的GooEdit按鈕,然後在你要編輯的圖檔上按一下滑鼠右鍵。
    01  

    第2步  此時,Google Chrome視窗上方會出現一排圖檔編輯特效與色彩調整…等功能,直接按一下工具列上的按鈕,即可依照自己的需求調整圖片的色調、套用各種特效濾鏡...等等。
    02  

    第3步  調整完成後,按一下左上角的「Save」按鈕,便可在另外一個新分頁開啟已修改完成的圖檔,此時只要將圖片拉到桌面上儲存出來即可。
    03

    csscan 網頁CSS屬性快速檢視工具(Google Chrome擴充套件)

    在Google Chrome瀏覽器裡面有個「開發人員工具」,可以讓我們詳細檢視網頁的HTML、CSS與各式各樣的網頁布局、資源應用...等等細節,對於程式設計師或網頁設計師來說是個相當方便的實用工具。

    不過如果你常常需要快速檢視某些網頁的CSS配置,又不想每次都開「開發人員工具」那麼複雜的工具來用的話,可以試試看下面這個比較小巧、簡單的CSS屬性快速檢視工具。

    當我們在Google Chrome瀏覽器裡下載、安裝好csscan擴充套件之後,開啟網頁時,按一下網址列右邊的csscan按鈕,此時只要將滑鼠移動到你想查看的區塊、標題或文字段落上,滑鼠指標右邊會自動顯示該區塊或網頁元件的CSS配置細節。







    ▇ 軟體小檔案 ▇ (錯誤、版本更新回報)

    軟體名稱:csscan 中文版
    軟體版本:2.0.1
    軟體語言:簡體中文
    軟體性質:免費軟體
    檔案大小:44.6KB
    系統支援:此為Google Chrome瀏覽器專用擴充套件,支援4.x以上版本(下載)
    官方網站:按這裡
    軟體下載:按這裡
    使用方法:
    第1步 用Google Chrome瀏覽器開啟csscan程式的安裝頁面,按一下「安裝」按鈕將程式下載、安裝到電腦。

    之後,當我們需要查看網頁中指定區塊的CSS屬性時,請按一下網址列右邊的「csscan」按鈕,接著將滑鼠指標移動到網頁中的區塊、元件或文字段落上方,即可在右邊顯示詳細的CSS屬性設定。

    電腦操作步驟錄製工具

    PSR」的原文為「Problem Steps Recorder」,是Windows 7系統中內建的相當實用的電腦操作步驟錄製工具。它可以讓使用者輕鬆、輕易地將目前電腦看到的錯誤畫面、操作過程中遇到的問題,轉成一般網頁的圖文顯示方式,用一步一圖的方式展示每個操作細節。讓一般使用者可以將這些畫面傳送給電腦維修公司或維修工程師,協助處理問題。
    除了當做維修用的錄製工具之外,其實也可以拿來當做電腦操作教學,因為每個步驟都會自動抓圖下來,圖片上方還有簡單的操作步驟敘述(中文),如果你剛好需要透過網路遠端示範如果用電腦做什麼設定或功能操作,都可以用PSR工具來幫我們錄製完整、詳細的電腦使用方式與操作步驟。




    使用方法:

    第1步  直接在開始選單下面的方框輸入「psr」再按「Enter」,或按「視窗」+「R」開啟執行視窗後,輸入「psr」後再按「確定」,開啟Windows 7系統內建的電腦操作步驟錄製工具。
    01  

    第2步  開啟Problem Steps Recorder之後,直接按一下「開始錄製」按鈕,或按「Alt」+「A」快速鍵,即可開始錄製電腦操作步驟。
    02  

    第3步  此時可以開始操作你要示範的軟體、進行電腦設定或展示有問題的電腦畫面,PSR軟體會自動將每個步驟、每個畫面都錄下來。如果要停止的話,請按一下「停止錄製」按鈕。
    03  

    第4步  按下「停止錄製」按鈕後,會自動跳出一個「另存新檔」的視窗,請輸入檔案名稱後再按「存檔」按鈕,將剛剛錄製下來的畫面與操作步驟全部存檔下來。
    04  

    第5步  找到剛剛儲存的檔案並解壓縮之後,裡面會有一個名稱為「Problem_xxxxxxx.mht」的網頁檔,直接按兩下或用IE、Firefox、Google Chrome等網路瀏覽器開啟即可瀏覽內容。
    05  

    第6步  如圖,剛剛錄製下來的操作步驟已經變成一步一圖的超完整說明圖文了!
    06

    For WinXP:

    如果要抓螢幕畫面,用鍵盤上的Print Screen按鍵就可以抓下來,或者可以用類似SnagIt這種抓圖軟體來擷取。不過如果你想把Windows中的電腦操作畫面「錄影」下來,該怎麼做呢?或者你想把一些電腦操作步驟錄成一個教學影片或Flash檔的話,那要用什麼軟體會比較方便呢?




    以下所介紹的Wink螢幕錄影軟體是國內外相當有名氣的免費軟體,不但可以讓我們很輕鬆的將Windows電腦中的螢幕畫面錄影下來,還可以讓我們在任何一個畫面中插入對話框、補充說明文字...等等,相當適合用在教育用途唷。
    更方便的是做好的錄影畫面可以直接存成Flash檔,讓我們直接將他掛在自己的部落格或網站中,讓大家就像在看教學錄影帶一樣方便唷。
    軟體名稱:Wink
    軟體版本:2.0 (build 1060)
    軟體語言:中文(內建多國語系)
    軟體性質:免費
    官方網站:http://www.debugmode.com/wink/
    軟體下載:下載1  下載2

    影片範例:



    以下先示範如何用Wink軟體將電腦操作畫面錄成swf影片檔,這是最基本的錄影操作之後有機會的話,再深入介紹如何在步驟中插入補充說明文字、箭頭、紅圈圈…等等。
    本文章節:
    一、安裝軟體,切換成繁體中文介面
    二、開啟新的錄影專案、設定錄影範圍
    三、開始錄製螢幕畫面
    四、設定播放速度,將影片匯出成Flash檔

    一、安裝軟體,切換成繁體中文介面

    第1步   從本文上方的網址將Wink軟體下載回來後,直接執行「wink20.exe」程式,將Wink軟體安裝到電腦中。
    21-49-38

    第2步   安裝好之後,依序按下〔開始〕→【所有程式】→【Debugmode】→【Wink】→【Wink】,開啟Wink軟體主視窗。如果要將軟體切換成中文顯示介面的話請依序按下〔File〕→【Choose Language】→【Traditional Chinese】,將軟體介面切換成正體中文語系。
    21-50-10

    二、開啟新的錄影專案、設定錄影範圍

    每次要開始錄製螢幕畫面前,都得新增一個「專案」,錄好的「專案」以後都可以存檔後再修改,方便我們編輯錄影步驟中的各項說明與調整設定。以下,我們以新增一個錄影專案、錄製螢幕畫面為範例依照下面方法操作,就可以錄製你指定視窗的操作畫面。
    第1步   依序按下〔檔案〕→【開新專案】,準備新增一個螢幕錄製專案。
    22-24-02

    第2步   接著請在中間的下拉選單中點選你要錄製的畫面範圍,這裡以「錄製固定視窗範圍」為範例,如果你想選擇其他錄影範圍的話,也可點選下方的固定尺寸,或者點選全螢幕或自訂範圍。
    以本文範例來說,點選【視窗】,然後再按一下右邊的〔選擇〕按鈕,選取你要錄影的視窗。
    22-24-03

    第3步  如圖,當我們按下上一步的〔選擇〕按鈕後,螢幕中會出現一個螢光綠色的方框,我們可以在出現綠色方式時,用滑鼠左鍵點選你要錄影的視窗,等該視窗被選定後,才可繼續後面的錄影工作。
    如果選錯視窗,一樣可以再回上一步,去按一下〔選擇〕按鈕,重新選取你要的視窗。
    22-25-21

    第4步  回到「建立新專案精靈」視窗後,「擷取區域」已經被設定好囉,接著便可按一下〔確定〕按鈕準備開始錄影。
    22-26-12

    三、開始錄製螢幕畫面


    第1步   延續前面步驟,開始錄製畫面前,會出現一個準備視窗,上面會標示開始、結束錄影的「鍵盤快速鍵」,當我們要開始錄影時,先按住鍵盤上的〔Shift〕鍵不放,再按一下〔Pause〕鍵,即可開始錄影。如果要結束錄影的話,一樣是按〔Shift〕+〔Pause〕組合鍵,即可結束錄影。如果你希望錄影時,這個Wink的準備畫面不要出現在那邊檔路的話,可以按一下左下角的〔縮小到通知區域〕按鈕,即可隱藏整個Wink視窗,等到錄影結束後再把他叫出來。
    現在,請按〔Shift〕+〔Pause〕組合鍵開始錄影吧。
    22-26-28

    第2步  錄影結束後,請按按〔Shift〕+〔Pause〕組合鍵,結束錄影工作接著按一下桌面右下角的Wink圖示,再點選【開啟擷取視窗】。
    22-26-58

    第3步  如圖,Wink視窗中會顯示目前已經錄製的畫面張數(之前設定每秒拍攝4張圖),按一下〔結束〕按鈕,完成營目錄影工作。錄影完成後,請再依照後面的步驟設定影片播放的速度,並將影片匯出成Flash影音檔。
    22-27-04

    四、設定播放速度,將影片匯出成Flash檔


    第1步  完成前面的錄影工作後,剛剛錄下來的操作畫面便會以縮圖的方式排列在Wink的主視窗中。此時我們可以使用Wink的其他編輯功能設定某個畫面停留的時間,或在影片中加入文字說明、畫圈圈、畫紅線…等,這些操作步驟之後會再另外說明。
    接著我們可以先來設定一下影片的播放速度與存檔位置,依序按下〔專案〕→【專案設定】。
    22-27-26

    第2步  出現「專案設定」視窗後,請先在「匯出檔案名」欄位中設定影片檔的儲存位置,如「C:\test.swf」,下面的「匯出檔案類型」可以選擇「.swf」檔或直接匯出成「.exe」的自動執行檔。「.swf」檔可以讓我們用embed的方式掛在網頁上,而「.exe」檔則可在Windows系統中自動播放,不用另外開網頁或安裝播放軟體。
    如果你想調整影片播放速度的話,可以在「頁面播放速度」中輸入你要的速度,數字越大,播放速度則快越。設定好之後,再按下〔確定〕按鈕,完成影片屬性的設定。另外右邊的「滑鼠移動速度」也可以跟著頁面播放速度來做調整,你也可以調整「滑鼠移動速度」的數值來改變影片播放速度。
    22-27-55

    第3步   設定好影片屬性後接著依序按下〔專案〕→【編譯】,將影片檔組合成一個Flash檔。
    22-28-04

    第4步  接著會出現一個編譯進度視窗,如果你的錄影時間比較長,錄影畫面比較大的話,這個編譯的動作則需要花比較久的時間。
    22-28-05

    第5步   編譯完成後,請依序按下〔專案〕→【檢視編譯結果】,即可預覽一下目前影片的畫面。
    22-28-15

    第6步  如圖,我們可以看到剛剛指定的存檔路徑中,會多出兩個檔案,一個是「.htm」網頁檔,這是用來顯示影片用的網頁,另外一個「.swf」檔則是Flash影片本身,你可以將這兩個檔案上傳到你的網站中,網友們就可以直接在你的網站上看到你所製作的教學影片囉。
    22-45-11

    第7步  剛剛錄下的畫面,長得就像下面一樣,可以在網頁中直接播放。


    第8步  當然你也可以先將「.swf」檔上傳到你的網站或堪用的網路空間去, 再用類似下面的語法來嵌入你的影片,這語法跟YouTube嵌入影片的語法類似。
    width="425" height="350">


    網路版繪圖、照片編修、GIF動畫製作工具

    之前曾經介紹過幾個「線上版」的網路繪圖工具,就是那種不用安裝軟體、直接用瀏覽器在網站上編輯、繪製圖形的線上工具,譬如「Pixlr Editor」跟「Sumo Paint」..等等。
    剛剛又看到一款長得跟Pixlr Editor很類似的線上繪圖工具uupoop,雖然目前只提供簡體中文版操作介面,不過跟一般繪圖工具不同的是,除了圖形繪製之外,還同時提供了照片編輯器與GIF動畫製作工具,如果你覺得這些都太複雜,還有「簡易版」圖片調整工具可用,很簡單,就上傳圖片、按一按就可以搞定。

     http://www.picnik.com/app#/home/welcome
    http://www.tuyitu.com/


  • 網站名稱:uupoop

  • 網站網址:http://www.uupoop.com/

  • MakePic 印章產生器

    大家在論壇、噗浪或各種社群網站聊天、交流時,可能很多人喜歡貼自己的相片、寵物照片或其他有趣圖片當做大頭貼,如果你喜歡識別度高一點、有特色一點的話,也可以試試看下面MakePic.com這個網站所提供的線上印章產生器,他可以幫我們製作典雅樣式的印章圖案,直接輸入你要顯示在印章中的中文字即可。
    目前MakePic網站提供經典繁印篆、經典繁方篆、楷體繁、中隸書繁、漢儀篆書繁..等等幾種字體,也可自行選擇「陰刻」或「陽刻」兩種不同刻印方式,做出來的印章看起來還頗有樣子的。




  • 網站名稱:MakePic.com

  • 網站網址:http://www.makepic.com/print.php

  • 使用方法:

    第1步  開啟MakePic網站,直接在「姓名」方框中輸入你的名字,如果想調整字體,可以在下拉選單中點選你要的樣式,再按「生成」按鈕即可。
    注意!此網站目前僅能支援簡體中文字輸入,如果你打出來的字是簡體中文字型裡無支援的繁體字型,請先用Word將繁體中文轉換為簡體字之後再填入。