http://denistsao.pixnet.net/blog <![CDATA[草叢的一小塊田地:: PIXNET 痞客邦 ::]]> denistsao denistsao@not-valid.com 2008-05-10T14:36:41+08:00 2008-05-10T14:36:41+08:00 Copyright 2003-2008 denistsao,Pixnet Digital Media Coporation. All rights reserved. PIXNET Media Digital Coporation http://denistsao.pixnet.net/blog/post/17466924 <![CDATA[網頁樣板]]> 2008-05-10T14:36:41+08:00 www.freewebsitetemplates.com
www.webpage.com
裡面可以看到好多樣板，
並且介紹更多的樣版網站及好看的樣板，
個人建議，
不需要購買，價格蠻高的，可以當作參考，
尤其是CSS相關的樣板，值得好好研究與學習。
也提醒各位，網站中所用到的照片，務必擁有版權，不要心存僥倖喔！
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/17466924#comments http://denistsao.pixnet.net/blog/post/16553277 <![CDATA[CSS樣式表_2]]> 2008-04-14T16:15:28+08:00 且要做到背景圖片固定在右下角，並不會隨著捲軸動作而上下跑。

各位可以自行準備文字與圖片練習，
動作十分簡單，不過文字量要夠，
要有捲軸出現才看得到效果。
示範如影片：(請點按右下方"切換全螢幕模式"會比較清楚，按"ESC"可關閉全螢幕)

建立流程是：
1.新增樣式表，三個類別中直接選取"標籤"，選取"body"標籤。
2.切換到"背景"，設定背景圖片。
3.下方選項設定為：不重複、固定、水平靠右、垂直靠下。
這樣就可以了，
當然，各位可以設定重複、捲動等其他選項試試，
相信可以體會更多CSS的使用方法。

待續.................................
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/16553277#comments http://denistsao.pixnet.net/blog/post/16087388 <![CDATA[雀喙之謎]]> 2008-04-03T19:41:15+08:00 一九九四年在美國出版後獲得極高的評價，
一九九八年大樹文化出版中文版本，
此書明確揭示演化論不是個藏在實驗室的老舊觀念，
演化仍無時無刻在我們周遭進行著，
天擇的運作可以在極短時間內 造成生物構造極大的變異。

主角是住在加拉巴哥群島上的"加拉巴哥雀"，
因為居住環境與食物因氣候所產生的變化，
可以讓鳥喙的大小隨之改變，每一年都可以測量到變化！
這是個很顯眼的事實，代表演化無時不在進行，
也代表演化可以導致物種的變化如此快速，
如此真實地在我們生活的地球上發生！
這是個人最喜歡、最推崇的一本書，
期盼喜歡演化相關的書，可是不知如何著手的人，
可以從這本書開始，絕對好看！

"加拉巴哥群島"、"小獵犬號"、"物競天擇論"、"達爾文"，
這四個看似無關的名詞，關係可大了！.............................
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/16087388#comments http://denistsao.pixnet.net/blog/post/15961926 <![CDATA[反省、反省]]> 2008-03-31T17:47:23+08:00 心裡一直急著要來更新，卻發現光是急，腦子卻開始不靈光！
想談談這個，想聊聊那個主題，真是..........................

後來，
退一步仔細思考，想起當初開始這個部落格的心情，
才真的想到，我的初衷是將所知與大家分享，也期盼可以得到一些迴響，
可是三月份那一陣子密集更新，有些為更新而更新，
不但很急，而且發表時並沒感覺什麼愉快，真有些難過！

因此，決定緩下來，真的想要討論何種主題，就好好將資料準備再談，
也算是部落格生手的錯誤，請大家原諒，
也請大家耐心等候後續的文章，
影片的大小與長短很難控制，努力中..........................
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/15961926#comments http://denistsao.pixnet.net/blog/post/15633514 <![CDATA[CSS樣式表之一]]> 2008-03-21T15:56:19+08:00 或可說成強化既有HTML程式碼的不足。
可以快速訂定網頁樣式，可以快速套用在大量的網頁中。

使用上可分為三種類型，
第一種是直接定義在網頁內部，

即是使用時點選"只有此文件"，到網頁程式碼中檢查，可以看到


第二種則是建立獨立的樣式表檔，

個人最推薦這種使用方式，因為其他網頁皆可連結使用，不過必須視設計情況而定，
在程式碼中則呈現


第三種是直接寫入HTML標籤中，如：

則網頁中這段文字的表現就會是這樣：


這就是在網頁中使用CSS的方法，
當然，還有各式各樣的表現方式，會陸續在此介紹...............................................
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/15633514#comments http://denistsao.pixnet.net/blog/post/15427397 <![CDATA[大自然的獵人]]> 2008-03-15T14:30:26+08:00 個人會沉迷科普相關書籍的世界，就是因本書作者的影響。
個人也是從他的書中第一次得知"生物多樣性"這個名詞與意義，
他被稱為"生物多樣性之父"、"社會生物學之父"以及"螞蟻之父"，文筆流暢，刻畫深入。
這本書算是他的自述，從幼時成長開始寫，說明為何會走向學術，為何會成為螞蟻專家。
由此也陸續購買數本他的其他著作，真是令我著迷！

書中所提到的生物世界，個人的思緒不斷受到衝擊，
直到拜讀他所著的"螞蟻"時，達到最高峰！
好棒的一個世界，可惜個人的學業成績中，生物與理化向來是最弱的一環，
這輩子沒機會像威爾森先生一樣投入那迷人的世界中，
只好將此願投注在威爾森先生的身上，跟著他上山又下海，
跟著他仔細研究螞蟻、跟著他清理一個小島上的所有昆蟲，
再持續觀察有哪些生物會拔得頭籌地成為島上的第一個進駐者........................

To be continued.........................................
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/15427397#comments http://denistsao.pixnet.net/blog/post/15245503 <![CDATA[網站施工_2]]> 2008-03-10T15:35:13+08:00 先到智邦生活館租用一個虛擬主機(或說網站代管)，
先租用平價型，待日後需要用到資料庫再增租資料庫空間，
而後到Seednet網站申請網址，租用屬性型，也就是"com.tw"這一種。
款項皆已繳納，開始使用，重點是，必須將兩者結合起來，
如此，在瀏覽器輸入網址才能看到網頁。

先到智邦生活館，進入"虛擬主機"，以管理者身分登入，
按下列按鈕

將所看到的網站IP位址抄下來，不要抄錯喔！

隨後到Seednet首頁，點選"產品資訊/申請網址"，
會進到下列畫面

再點按"資料查詢與異動"，

輸入資料之後，會進入到設定的畫面，
再輸入之前在智邦生活館抄錄的IP位址即可。

請注意，即使不是在智邦生活館及Seednet申請，其他的主機設定大致類似，
重點一：即使日後更換虛擬主機(不論同公司與否)，DNS一定會隨之改變，
只要改變網址那邊的DNS設定即可，
繼續繳納所申請的網址管理費，即可繼續使用。
重點二：如果是將server建立在自己電腦，網站放在自己的電腦中，
而所使用的ADSL不是固定IP者，也就是浮動IP者，則處理方式不同，
相關資訊可參考臺灣網路資訊中心網域名稱註冊系統的說明文件：動態DNS問答集。

待續..................................................
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/15245503#comments http://denistsao.pixnet.net/blog/post/15132011 <![CDATA[網站施工_1]]> 2008-03-07T16:09:16+08:00 在此建議，所準備的文字檔案都存為純文字檔(.txt)，
不要存為word檔，不然直接複製貼上會產生一些不必要的HTML碼，
還有一種處理方式是貼上後，執行"命令/清除Word的HTML"。

開啟Photoshop，建立新檔，這是首頁要用的版型，
下回還要利用其他圖片建立內頁要用的版型。

為何要建立984X200的圖，因為是以1024x768的螢幕解析度為目標，
個人認為要扣掉IE瀏覽器右方捲軸的寬度。
將準備的圖片放入，形成以下狀況，


又覺得圖片下方草地呈直線過於平整，
利用圖層遮色片加上筆刷處理成以下狀況，


刷為白色是要與下方網頁白色的背景相連，儲存為up1.psd檔。
又因為單張圖片過大，怕下載網頁過慢，
利用切片切為三張圖片，進DW再組合起來。
另外還以純草地圖片建立down1.psd檔，作為首頁下方圖片。
對兩個檔案分別執行"檔案/儲存為網頁用"，
也就是執行最佳化，將圖片儲存為jpg檔。

待續......................................
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/15132011#comments http://denistsao.pixnet.net/blog/post/15058676 <![CDATA[Action Script_7]]> 2008-03-05T15:20:45+08:00 場景中央放置一朵花，這是個影片片段，
因為我們要用AS去控制它放大、縮小及旋轉。

外圍有個框，下方則是四個按鈕，先為這朵花命名為"flower"(實體名稱)。
接著點選"+"這個按鈕，我們要設定放大。在按鈕加入語法：
on(release){
   _root.flower._xscale=150;
   _root.flower._yscale=150;
}
表示按下按鈕則會讓花的寬度與高度都放大150%。
接著點選"-"這個按鈕，我們要設定縮小。在按鈕加入語法：
on(release){
   _root.flower._xscale=60;
   _root.flower._yscale=60;
}
表示按下按鈕則會讓花縮小60%。
接著點選"順時針方向轉"這個按鈕，我們要設定往右旋轉。在按鈕加入語法：
on(release){
   _root.flower._rotation=90;
}
表示按下按鈕則會讓花順時針旋轉90度。
接著點選"逆時針方向轉"這個按鈕，我們要設定往左旋轉。在按鈕加入語法：
on(release){
   _root.flower._rotation=-90;
}
表示按下按鈕則會讓花逆時針旋轉90度。
_root.flower代表回到場景時間軸再去找到"flower'這個物件。
其實該再做個按鈕"Reset"設定原來大小與座標，讓它恢復原狀。

重點：試著將這些語法放到圖層上。
作法：新增"Action"圖層，在影格1加入語法。
_root.big.onRelease = function() {
    _root.flower._xscale = 150;
    _root.flower._yscale = 150;
};
第一行的"big"是"+"按鈕的實體名稱，其他按鈕的語法比照辦理，
將每一段都放到"Action"圖層的影格1。各位可以練習一下。

待續...............................
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/15058676#comments http://denistsao.pixnet.net/blog/post/14984943 <![CDATA[Action Script_6]]> 2008-03-03T15:19:39+08:00 但是是使用AS來指定影片片段的位置。
開個新檔，400X300，背景為黑色，

先建立一個影片片段"apple"，並命名為"apple"。

它的位置是

建立一個"action"圖層，並在影格1輸入AS碼，
apple._x=200;
apple._y=200;
apple是這個影片片段的實體名稱，_x表示x座標，_y表示y座標，
則測試影片時，apple的位置就在場景(200,200)的位置。如圖：

有興趣的人可以試一下，很簡單的一個展示，
會陸陸續續發表這類型的文章，供大家參考。
待續....................
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/14984943#comments http://denistsao.pixnet.net/blog/post/14859292 <![CDATA[Action Script_5]]> 2008-02-29T14:13:12+08:00
影片片段提供不少AS屬性，讓我們在影片播放時可以控制元件。
以下列出一些：(請注意，英文字母前面的是底線"_"，而非橫線"-")
屬性
值
說明
_x 數字(像素) X座標
_y 數字(像素) Y座標
_xscale 數字(百分比) 寬度的縮放
_yscale 數字(百分比) 高度的縮放
_height 數字(像素) 高度
_width 數字(像素) 寬度
_alpha 數字(百分比) 透明度
_rotation 數字(角度) 旋轉
_visible true/false 顯示與否(顯示/隱藏)
當然，不只這些屬性，這些是最常用的。
下次開始，我們會用一些簡單的範例跟各位介紹AS的實際用法。

待續............................................
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/14859292#comments http://denistsao.pixnet.net/blog/post/14780634 <![CDATA[Action Script_4]]> 2008-02-27T13:25:01+08:00 最能夠程式化，是最能用AS來控制的元件。

因此，我們先仔細釐清元件(Symbols)與實體(Instance)之間的關係，
以便將來使用AS加以控制時，可以更加得心應手。
1.將圖形轉換成元件時，在元件庫中會看這個元件，
   可是，同樣的圖形可以轉成不同的元件，
   所以，同樣的內容，可以是不同的元件，不同的名稱。
2.在元件庫的元件稱為"原型"，可以想像為元件的"本尊"。
   本尊只能有一個，可是"分身'可以有無數個。
   換言之，在元件庫中的都是本尊(元件)，出現在場景中的全都是分身(實體)。
3.存檔時，只儲存本尊的相關資訊，當動畫檔播放時，才會即時將分身"分"出來。
    因此，只有本尊會占用檔案大小，分身所使用的檔案大小幾乎可以不計。
4.本尊若有所改變，則每個分身會同時產生變化。
    但是，分身可以加以修改，擁有一些不同於本尊的屬性。
5.要使用AS去控制場景中的分身時，必須先將這些分身予以命名，
   這樣的話，AS才能辨識出各個分身誰是誰。

待續...............................
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/14780634#comments http://denistsao.pixnet.net/blog/post/14635436 <![CDATA[Action Script_3]]> 2008-02-23T14:16:04+08:00 假設場景中有10個元件，都加上AS，如果要除錯時，是不是要一個一個找？都沒效率。
如果能夠建立一個as圖層，將所有語法都放在這個圖層上，在管理與除錯上勢必更加便利。
主要作法如下：
    物件的實體名稱.事件名稱 = function(){
                執行動作;
   }
以下是加在影片片段上的
事件
說明
onPress = function(){}
在影片片段上按下左鍵時觸發動作。
onRelease = function(){}在影片片段上放開左鍵時觸發動作。
onReleaseOutside = function(){}在影片片段上按下左鍵，並在移出按鈕區域時放開滑鼠而觸發動作。
onRollOut = function(){}滑鼠游標移出影片片段區域時觸發。
onRollOver = function(){}滑鼠游標移入影片片段區域時觸發。
onLoad = function(){}當影片片段完成下載，出現在時間軸時觸發動作。
onUnload = function(){}當影片片段從時間軸上被移除後觸發動作。
onEnterFrame = function(){}以SWF檔案的影格速率重複啟動。
onMouseDown = function(){}按下左鍵時觸發動作。
onMouseMove = function(){}移動滑鼠時觸發動作。
onMouseUp = function(){}放開滑鼠按鍵時觸發動作。
onDragOut = function(){}按下左鍵並按著滑鼠拖曳到物件外面區域時觸發動作。
onDragOver = function(){}按下左鍵並按著滑鼠滑過物件區域時觸發動作。
onKeyDown = function(){}按下指定的鍵盤按鍵。
onKeyUp = function(){}放開指定的鍵盤按鍵。
onData = function(){}當影片片段接收資料時觸發動作。


待續....................................
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/14635436#comments http://denistsao.pixnet.net/blog/post/14599710 <![CDATA[Action Script_2]]> 2008-02-22T13:11:05+08:00 onClipEvent(事件){
     執行動作;
}
而影片片段的事件如下：
事件
說明
load當影片片段下載到目前時間軸時，觸發動作。
unload當影片片段由目前時間軸被移除時，觸發動作。
enterFrame該執行動作以影片片段的播放速率連續觸發。
mouseMove每次移動滑鼠時觸發動作。
mouseDown每次按下滑鼠左鍵時觸發動作。
mouseUp放開滑鼠左鍵時觸發動作。
keyDown按下鍵盤某按鍵時觸發。
keyUp放開鍵盤某按鍵時觸發動作。
data接收到某些資料時觸發。

另一方面，使用下列語法在按鈕上設定：
on(事件){
     執行動作;
}
事件
說明
press在按鈕上按下左鍵時觸發動作。
release在按鈕上放開左鍵時觸發動作。
releaseOutside在按鈕上按下左鍵，並在移出按鈕區域時放開滑鼠而觸發動作。
rollOut滑鼠游標移出按鈕區域時觸發。
rollOver滑鼠游標移入按鈕區域時觸發。
dragOut在按鈕上按下左鍵，並按著滑鼠移出按鈕區域時觸發動作。
dragOver在按鈕上按下左鍵，並按著滑鼠滑過按鈕區域時觸發動作。
keyPress"< key >"按下指定的鍵盤按鍵。

待續......................................
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/14599710#comments http://denistsao.pixnet.net/blog/post/14516170 <![CDATA[Action Script_1]]> 2008-02-20T17:02:49+08:00 想製作擁有互動功能的動畫，就需要使用AS。
AS演進至今為3,0版(CS3版)，在功能上不斷改良，語法結構上接近JavaScript，有一定的文法與標點符號規則，
AS主要功能是用來與FLASH的影片溝通，除了控制播放流程與程序外，還可以讓影格中的物件執行動作。
因此，先在此介紹幾個較常用的指令：在時間軸控制項函數中

函數說明 
gotoAndPlay 讓播放畫面移到場景中的指定影格，
並從該影隔開始播放。 
gotoAndStop讓播放畫面移到場景中的指定影格，
並停止播放。
play 讓時間軸往前播放。 
stop停止正在播放的動畫或元件。
nextFrame 令播放畫面往上一個影格移動。
prevFrame令播放畫面往下一個影格移動。












待續........................

(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/14516170#comments http://denistsao.pixnet.net/blog/post/14399057 <![CDATA[網站的前置作業]]> 2008-02-17T17:59:01+08:00 網站內容是一種新的蔬菜湯。
架構不複雜，分為首頁、認識蔬菜湯、嚴選物件、問與答、網站導覽。
並分別命名為index、product、material、qna、view，很簡單但與內容相關的檔名。
就這五頁，已經先將文字與圖片收集好，之間再視需要加入動畫或是其他東西。

首先開啟DW，新增網站，因為該公司名為"upwell"，因此已在E槽新增一個"upwell"的資料匣，
直接定義此資料匣為網站根資料匣，
在此建議，將根資料匣直接放在分割區內，而不要放在桌面或是我的文件匣中，
此外，所有要用的檔案皆以小寫英文名命名，不論是圖片、網頁或是資料匣。
新增網站完成後，就繼續新增五個網頁檔，並將index.html設為首頁。

下一個動作會到Photoshop建立網頁的版型，屆時就會有圖片或是影片檔。
請待續.................................................
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/14399057#comments http://denistsao.pixnet.net/blog/post/13826747 <![CDATA[Flash推薦書]]> 2008-02-01T14:46:25+08:00 Flash CS3 躍動的網頁，作者是威銘研究室，由旗標出版，
講解說的蠻詳細的，不過Action Script著墨不多，適合入門者練習。

flash網頁設計與動畫製作，作者為金允基，Pcuser出版。
作者是韓國人，所以所有範例皆為韓文，但是沒關係，
因為你要研究與注意的是與法，將哪些韓文換成中文，你就可以好好練習一下，
書中的範例很多樣化，有些相當炫，不錯！
但是，建議你思考的是，如何將喜歡或是看上眼的效果放在同一個網頁或網站中。

神魂顛倒FLASH8，碁峰出版。
這本書很棒，內容深淺處都提到，有些範例頗具深度，可以好好研習一下，

flash這套軟體對我的定義而言，真的是一套入門容易進階難的軟體。
建議各位學習時，絕對不要漏地的重點是圖層的安排、元件的運用，
最重要的是Action Script的使用，
對沒有程式設計經驗的人而言，剛開始真的會有些小難，
請各位加油，當你對語法的運用到一個程度時，你會很爽的！加油！
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/13826747#comments http://denistsao.pixnet.net/blog/post/13491560 <![CDATA[Dreamweaver相關、不錯的書]]> 2008-01-26T16:51:24+08:00 介紹幾本內容相當實用的書籍
1.Dreamweaver 8 無限延伸-網頁設計整合進階技巧(附光碟)，文魁資訊出版。
   介紹如何使用ImageReady切片，再利用dreamweaver建立樣板，
   實用度很高，很少有介紹這部份的書。
2.Dreamweaver 搞不定的網頁設計效果：CSS 關鍵救援密碼，
   作者為施威銘研究室，旗標出版。
   介紹CSS對於版面的處理，網頁元素在版面中位置的控制，區塊位置控制。
3.Dreamweaver CS3 網頁設計驚嘆號至高的網頁特效172招，
   作者為李啟宏，悅知文化出版。
   內容提供並介紹100多種擴充元件的使用，有些真的超好用！

各位若對這些書有興趣，可以考慮買回家實作，
不過，建議到網路上找二手書，新書太貴了，
但是，所附的光碟一定要還在喔！
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/13491560#comments http://denistsao.pixnet.net/blog/post/13476034 <![CDATA[網站建置_3]]> 2008-01-26T10:47:08+08:00 以Dreamweaver為核心，
使用photoshop建置樣版與處理圖片，
有時也會使用illustrator建立樣板及建立按鈕，建立動畫要使用的各類角色，
使用Xnview或是Irfanview批次處理多張圖片，
使用Flash建立動畫，
使用WinAVIConverter為影片轉檔。
若要用到資料庫，就用Access作個資料庫，使用asp與網頁連結。

為何要用到資料庫？
舉凡留言板、討論區、新聞公告、電子報、會員管理，甚至計數器都要用到資料庫。

為何沒有用到音樂相關軟體？
因為對於一個網站而言，很難找到適當的、可以與網頁內容或主題搭配的背景音樂。

待續...............................................
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/13476034#comments http://denistsao.pixnet.net/blog/post/13279040 <![CDATA[網站建置_2]]> 2008-01-22T11:46:33+08:00 如果是公司網站，當然必須相關人士好好開個會！
重點是，先將網站的層層架構建立起來，
如：首頁底下還有幾層網頁，超連結如何來來往往...等。
一般來說，以企業網站而言，
首頁、公司簡介、產品介紹、網站導覽等是基本頁面，
其他則視各公司需求增加。

建立好架構之後，建議畫出幾張草圖，標示出要做的內容。
1.架構的圖形，當然，如果要用Word或是其他軟體作也可以。
   此時，該已經可以將各頁面的檔案名稱建立好，如：index.html(首頁)、product.html(產品)
2.頁面的草圖，通常會有兩張主要頁面，一張是首頁，一張是內容頁。
   頁面中要擺上哪些元素，如：公司Logo、公司名稱、標題、插圖或背景圖片。
接著，就要開始蒐集資料，包括文字稿、照片與圖片，若需要，要開始建立動畫與影片。

因此，網站建置可以粗分為三個階段，
籌備期(蒐集與分類各種資料)、施工期(個人是以Dreamweaver為軸)、維護與更新期。
事實上，很多網站會無以為繼，通常都是忽略維護與更新的重要，
可以想像，昨日、今日與兩周後的今天，看到的資料都一樣，相信沒有人有興趣常來拜訪！
建議，可以在首頁某個角落放置一段文字，宣告更新的頻率或時間，想信可以稍稍解決這個問題。

待續........................................................
(繼續閱讀...)
]]> http://denistsao.pixnet.net/blog/post/13279040#comments