CSS樣式表_2

這次為各位介紹如何運用CSS建立背景圖片，
且要做到背景圖片固定在右下角，並不會隨著捲軸動作而上下跑。

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

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

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

雀喙之謎

「雀喙之謎」這本講演化的書，
一九九四年在美國出版後獲得極高的評價，
一九九八年大樹文化出版中文版本，
此書明確揭示演化論不是個藏在實驗室的老舊觀念，
演化仍無時無刻在我們周遭進行著，
天擇的運作可以在極短時間內 造成生物構造極大的變異。

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

"加拉巴哥群島"、"小獵犬號"、"物競天擇論"、"達爾文"，
這四個看似無關的名詞，關係可大了！.............................

反省、反省

這陣子忙到一個不行！
心裡一直急著要來更新，卻發現光是急，腦子卻開始不靈光！
想談談這個，想聊聊那個主題，真是..........................

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

因此，決定緩下來，真的想要討論何種主題，就好好將資料準備再談，
也算是部落格生手的錯誤，請大家原諒，
也請大家耐心等候後續的文章，
影片的大小與長短很難控制，努力中..........................

CSS樣式表之一

CSS的全名是 Cascading Style Sheet，可以用來重新定義HTML，
或可說成強化既有HTML程式碼的不足。
可以快速訂定網頁樣式，可以快速套用在大量的網頁中。

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

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


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

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


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

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


這就是在網頁中使用CSS的方法，
當然，還有各式各樣的表現方式，會陸續在此介紹...............................................

大自然的獵人

天下文化出版，E.O威爾森所著，
個人會沉迷科普相關書籍的世界，就是因本書作者的影響。
個人也是從他的書中第一次得知"生物多樣性"這個名詞與意義，
他被稱為"生物多樣性之父"、"社會生物學之父"以及"螞蟻之父"，文筆流暢，刻畫深入。
這本書算是他的自述，從幼時成長開始寫，說明為何會走向學術，為何會成為螞蟻專家。
由此也陸續購買數本他的其他著作，真是令我著迷！

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

To be continued.........................................

網站施工_2

這次的工作是申請網址與租用空間。
先到智邦生活館租用一個虛擬主機(或說網站代管)，
先租用平價型，待日後需要用到資料庫再增租資料庫空間，
而後到Seednet網站申請網址，租用屬性型，也就是"com.tw"這一種。
款項皆已繳納，開始使用，重點是，必須將兩者結合起來，
如此，在瀏覽器輸入網址才能看到網頁。

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

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

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

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

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

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

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

網站施工_1

開始建立網站，文字與圖片都已蒐集完成，
在此建議，所準備的文字檔案都存為純文字檔(.txt)，
不要存為word檔，不然直接複製貼上會產生一些不必要的HTML碼，
還有一種處理方式是貼上後，執行"命令/清除Word的HTML"。

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

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


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


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

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

Action Script_7

繼續介紹，這次的例子是使用按鈕去控制元件。
場景中央放置一朵花，這是個影片片段，
因為我們要用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。各位可以練習一下。

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

Action Script_6

這次，我們建立一個很簡單的動畫檔，其實是靜態的，
但是是使用AS來指定影片片段的位置。
開個新檔，400X300，背景為黑色，

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

它的位置是

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

有興趣的人可以試一下，很簡單的一個展示，
會陸陸續續發表這類型的文章，供大家參考。
待續....................

Action Script_5

接下來，繼續介紹AS與影片片段元件的一些關係。

影片片段提供不少AS屬性，讓我們在影片播放時可以控制元件。
以下列出一些：(請注意，英文字母前面的是底線"_"，而非橫線"-")

屬性	值	說明
_x	數字(像素)	X座標
_y	數字(像素)	Y座標
_xscale	數字(百分比)	寬度的縮放
_yscale	數字(百分比)	高度的縮放
_height	數字(像素)	高度
_width	數字(像素)	寬度
_alpha	數字(百分比)	透明度
_rotation	數字(角度)	旋轉
_visible	true/false	顯示與否(顯示/隱藏)

當然，不只這些屬性，這些是最常用的。
下次開始，我們會用一些簡單的範例跟各位介紹AS的實際用法。

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

Action Script_4

FLASH中最重要的核心元件就是影片片段(MovieClip)，因為它支援最多的AS，
最能夠程式化，是最能用AS來控制的元件。

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

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