星期四, 9月 04, 2008

AS3:呼叫外部XML的連結(Using links from external xml file in AS3)

前陣子做了個Flash的Banner,這個連結之前是做在Flash裡面,但現在我想用連結外部XML檔案的方式來達到連結的效果。好處是之後若要改連結的話,只要改XML檔案的內容即可,無需再開啟Flash、輸出成SWF檔、再上傳。

XML程式碼如下:
<links>
<title link="http://www.homepage.com/promotion.htm">
The Promotion</title>

</links>
AS3的程式碼如下:
import flash.net.URLRequest;
import flash.events.MouseEvent;

var myXML:XML;
var myLoader:URLLoader = new URLLoader();
myLoader.load(new URLRequest("my-xml-file.xml"));
myLoader.addEventListener(Event.COMPLETE, processXML);

var promotionLinkAttribute:XMLList;

function processXML(e:Event):void {
myXML = new XML(e.target.data);
promotionLinkAttribute = myXML.title[0].attribute("link");
}

senser.buttonMode=true;

senser.addEventListener(MouseEvent.MOUSE_OVER, hoverPromotionBanner);
senser.addEventListener(MouseEvent.MOUSE_OUT, visitedPromotionBanner);
senser.addEventListener(MouseEvent.CLICK, openPromotionPage);

function hoverPromotionBanner(e:MouseEvent):void{
MovieClip(getChildByName("senser")).gotoAndPlay("active");
this.gotoAndStop(currentFrame);
}
function visitedPromotionBanner(e:MouseEvent):void{
MovieClip(getChildByName("senser")).gotoAndPlay("visited");
this.play();
}
function openPromotionPage(e:MouseEvent):void {
var promotionLink:URLRequest = new
URLRequest(promotionLinkAttribute);
navigateToURL(promotionLink, "_self");
//trace(promotionLinkAttribute);
}

星期日, 8月 31, 2008

AS3:TweenMax

介紹一個Flash AS3很方便的Tween Class: TweenMAX。這是一隻Jack Doyle所撰寫的程式,是TweenLite的加強版本;可以讓你以程式碼控制的方式更快速的達到許多Flash動態的效果。

首先先到TweenMAX下載免費的Tween。

下載後,將"GS"資料夾放置在與.FLA相同的地方。

接著你就可以使用TweenMAX的功能了。程式碼範例如下:
import gs.*;
var myTween:TweenMax = new TweenMax(mc, 2, {x:500, y:200});
//then later, if you need to change the tween
//so that the "x" property tweens to 100 instead of 500...

myTween.setDestination("x", 100);
//even if the tween is in progress, the value will be updated

星期三, 8月 27, 2008

神魂顛倒與RiS合辦網聚

上星期天我參加了神魂顛倒和RiS論壇的網聚,地點在台北市光復南路260巷28號的「味子」。在去參加這個活動之前,我到世貿參觀了機器人大展,因為有朋友在那邊參展,我順道參觀了他們公司的「作品」。參觀結束,等我到味子的時候,已經下午兩點四十分左右了…裡面的人超多的!而且講師已經開講了…沒想到加入這個網聚活動的人還真不少!居然沒位子可以坐著聽講師說明他準備的資料…我只好「罰站」在門口的地方聽講。

可能是我沒有很認真的去了解這個網聚的主題與內容,所以這個網聚跟我想像的很不一樣。

我以為來這邊可以和許多人有互動,進而多認識從事網路工作的同好;然而,事實上幾乎都是在聽兩位講師講演投影片。當然,講師不時也會出問題給大家,所以獎品可說是大放送,獎品內容大部份是小公仔、記事本之類的小東西。

我在他們的意見上填了兩個意見。

第一個意見很自私,就是希望每個人都有位子坐,雖然我比較晚來,但如果我站在其他人的前面把別人的視線擋住,這並不是件好事。

第二個意見,是在我看了講師滿頭大汗的在講解投影片內容時的一種感慨!為什麼講師分享知識給大家時,是這樣的一種情境?

這二個意見,說實在的,都是場地的問題。場地不夠理想,因此有些人得坐地上、有些人得一直站著、有些人得一直頭歪歪的…講師的汗會流成這樣,也是場地不理想的結果。我想,這可能是經費問題,所以沒辦法找出一個場地能像Adobe、數位時代或商業週刊等大公司一樣來舉辦活動。

回過頭來看,這只是個網聚而已!

到底這個網聚的目的是什麼?在我看來,我只是想去認識新朋友、透過網聚了解到底大家的「程度」在哪裡、有沒有機會互相分享經驗、…

我確實是認識了幾位新朋友,而且我還跟其中一位有聯絡,雖然他住在鶯歌比較遠。此外,雖然我看不出大家的程度在哪裡,但從講師的程度可以約略有個想法…互動經驗嘛…90%以上都是單向的。

關於網聚講授的內容:第一位講師長得很像名嘴陳輝文,專門在介紹Flex和AIR;第二位講師「奶綠茶」專門在介紹PaperVision 3D,也就是Flash的3D;第三位是每次都壓軸的Atom,專門在紹介Flash Mobile。

Flex的部份很吃資源,PV3D同樣也是,Flash Mobile(flash lite)會用的人更少!比較引人注目的可能是奶綠茶介紹的Flash 3D了,效果看起來還滿炫的!雖然PV3D已經出來很久了,但能把它這樣運用的人並不多!Flex在網路頻寬以及電腦效能還沒辦法大幅進步之前,跑起來可能會很吃力,可是它做出來的效果卻也不是一般網頁能比擬的;Flash Lite則是很有潛力,只是需要更多的人一起加入研究與開發,不然光靠Atom這樣跑團可能效果不大。

經過這次網聚的洗禮,我只能給Flash2u以及RiS的站長祝福,很希望這樣的網聚能一次比一次好,畢竟知識的累積並不容易!加油!!

星期六, 8月 23, 2008

無敵難吃的咖啡口味思樂冰!

今天下午台北下了一場大雨,直到晚上才停下來。我和小瑜去緣心豆花兩個人點一份豆花來吃,雖然覺得滿不錯吃的,但總覺得想再喝點什麼東西;於是,我們就到7-11逛了一下…好像夏天到現在,我都還沒吃到思樂冰呢!而且現在又推出新的咖啡口味!好吧,那我裝一杯來喝吧!

結完帳,剛離開7-11,我吸了一口咖啡口味的思樂冰,嗯嗯…我真的是選錯了!有夠難吃的!那味道很像沙士加上一些咖啡,這…能喝嗎?下次我再也不要買這東西了!還是原來的口味比較好吃!

用Camera Profile讓Lightroom的照片美豔動人!

Photoshop Lightroom 2.0的版本推出後,解決了一個之前非常讓人遺憾的問題…色彩。有時候你會發現Photoshop Lightroom的照片顏色似乎和我們想像的不大一樣,例如明明是深紅色的一朵花,怎麼看起來有點兒偏橘色?而且飽和度似乎也不夠,相機原廠軟體設定的色彩還比較好看…

Photoshop Lightroom的軟體工程人員看來也注意到了這個問題,Eric Chan(如果你注意Photoshop Lightroom一開始啟動時所顯示的開發人員清單裡,其中有一個就是他)在John Nack On Adobe發表了一篇文章:「The DNG Profile Editor: What's it all about?」針對這部份提出身為一名Adobe電腦科學家的看法。

如果你使用這些Profile檔的話,可以注意到「暖色(Warm Colors)」的部份,如紅色(Red)、橘色(Orange)、黃色(Yellow)等,有明顯的強化與進步;非常飽和的紅(Deep Saturated Red)顯示出來的就是紅,不會摻雜膚色(skin tone)。Mobile01的一篇文章:「覺得 Adobe Lightroom 2 的顏色不合你意嗎?」裡面有相當多使用這些Profile的照片讓你參考。

想要用這些功能嗎?先到Adobe Labs的DNG Profiles下載Camera Profile吧!下載並安裝後,啟動Photoshop Lightroom 2.0,你就擁有讓色彩更美豔動人的能力了!

要使用Adobe Camera Profile,你可以在這裡看到面版所在位置的圖片。基本上,只能在「進階」模式(Develop)才能使用,所以…當我發現某一個Camera Profile的色彩很棒!或者和我相機的原始色彩很接近時,難道我要一張張圖片來套用嗎?

如果是的話,還真慘呢!還好…有方法。當你想把某一個Camera Profile做為預設色彩Profile時,只要按下Alt(在Mac按Option)鍵不放,Camera Calibration面版最底下的「Reset」按鈕會變成「Set Default...」,按下去再選擇「Update to Current Settings」,就會把這個被選定的Camera Profile變成預設的Profile了。

其它相關連結:
  1. 下載Camera Profile(Beta)與DNG Profile Editor
  2. DNG Profile FAQ
  3. DNG Profile Editor教學與相關文件
  4. Adobe Photoshop Lightroom 2 - 學習中心

星期一, 8月 11, 2008

Photoshop Lightroom 2.0 正式推出!


經過長時間Beta版的試煉,Adobe終於正式販售Photoshop Lightroom 2.0了!新版的功能包括了Local adjustment brush(局部區域調整筆刷)、64-bit processing support(支援64位元處理器)、Flexible print packages(彈性列印組件)、Multiple monitor support(支援多重螢幕)、Extensible architecture(擴充式架構)、Volume management(大容量的磁碟儲存管理);同時也強化了既有的功能:Improved organizational tools(強化分類工具)、Nondestructive photo editing(非破壞性相片編輯功能)、Streamlined Photoshop CS3 integration(與Photoshop CS3的緊密整合)、Batch processing(批次處理)、Output sharpening(銳利化輸出)。

想更進一步了解Photoshop Lightroom 2.0,可以到這裡參考。

星期六, 8月 09, 2008

將影像從RGB轉到CMYK模式

因為印刷輸出的需求,把RGB影像模式轉換成CMYK模式在Photoshop裡面似乎是件再簡單不過的事情,也就是直接「影像」>「模式」>「CMYK色彩」。但如果我們要求影像的品質的話,會發現影像從RGB轉換到CMYK模式之後會損失亮部色彩的質感,顏色沒那麼漂亮了,畢竟RGB與CMYK的色域不同,CMYK能顯示的色域沒辦法像RGB一樣的廣。

那麼,我們有辦法控制這個轉換的結果嗎?

這個答案在Photoshop裡。

用Photoshop開啟一張照片影像,開啟「色域警告」功能(「檢視」>「色域警告 Gamut Warning」),你會發現照片上多了一些「灰色區塊」,它是影像中CMYK無法呈現的色彩,也就是RGB轉到CMYK模式時主要會產生的色彩差異的地方,也是我們需要調整的區域。

透過「顏色範圍」(「選取」>「顏色範圍 Color Range」)功能視窗裡的「超出色域 Out of Gamut」(選取下拉選單裡最後的一個選項)來選取這個區塊,羽化選取區域(先擴張 Expand 選取範圍、再羽化 Feather 選取區域),再透過「色相/飽合度 Hue/Saturation」調整圖層將被羽化選取區域的彩度(Saturation)降到大部份灰色區域都消失、只留下一些雜點的灰色;然後再用「海綿工具(Sponge)」(去除飽和度 Desaturation,並將流量 Flow 設低,如10%)降低這些灰色雜點的彩度,直到所有的灰色區域都消失為止。

最後就是將影像平面化,並且把RGB轉換成CMYK模式以確保CMYK的色彩和RGB不會有太大的出入。

星期日, 7月 27, 2008

AS3:用URLLoader載入外部文字

想用ActionScript 3.0載入外部的文字檔案(例:context.txt)到動態文字區塊(例:myText),可以使用URLLoader配合URLRequest來達到!不過…這邊要注意的是,你得用EventListener去監聽這個「URL」是否已載入完成(Event.COMPLETE),否則你會連一個字都看不到的…:
var myLoader:URLLoader = new URLLoader();
var myRequest:URLRequest = new URLRequest("context.txt");
myLoader.load(myRequest);

myLoader.addEventListener(Event.COMPLETE, loadText);

function loadText(e:Event):void {
myText.text = myLoader.data;
}

星期六, 7月 26, 2008

好站推薦:Photoshop Disasters

做設計的人常常因為種種因素,只能把東西「做完」而沒辦法「做好」,所以只要稍加注意,你就會發現許多Photoshop特效下「不為人知」的一面!Photoshop Disasters不止告訴你「不為人知」的那一面,而且還把它放大給你看!告訴你「不為人知」在哪裡!這下子你用Photoshop處理照片或影像的時候可得小心了!別被拿來當做負面教材呀!

星期二, 7月 22, 2008

快速「確認」Photoshop的文字輸入

這句話講得真是奇怪,但我不知道該怎麼形容比較好!有時候你在Photoshop使用文字工具("T"),當你將文字輸入完畢後,你可能會用滑鼠按「打勾」的確認鈕,或是換成其它工具,例如黑色的選取箭頭("V")…可是,當你把所有的工具列都隱藏起來("Tab")、讓Photoshop的顯示範圍最大化的時候("F"),你使用了文字工具打幾個字…好,字打完了;結果你發現沒有任何可以讓你執行「確定文字輸入已完成」的方法,因為浮動工具列被隱藏起來了…沒辦法換其它的工具!不管你按了什麼 "V"、"M"、"Tab"、"Enter"、…都沒用,它都會把你按的東西加到文字框裡面!怎麼辦?

其實Photoshop藏了一個快速完成文字輸入的組合鍵,就是 "Ctrl"+"Enter"。當你完成文字輸入的動作後,按下這兩個按鍵就等於是告訴Photoshop「我已經把字打好了、快讓我用其它的工具吧!」小小的技巧,但有時候真的很重要!

星期二, 7月 15, 2008

下拉選單(Drop-Down Menu)被Flash擋住了…

今天遇到一個奇怪的問題,就是當我們用Dreamweaver的SPRY來做下拉選單(Drop Down Menu)功能的時候,如果底下有個Flash的話,會造成這個下拉選單被擋住!

被擋住會怎樣嗎?…很明顯的,會讓人很生氣!

我首先想到的是 z-index 屬性,它的數值愈大,愈不會被別的東西擋住;數值愈低,則代表這個元素在愈底層…不過,前提是它只能在設有 position 屬性的元素裡面才有作用。所以我在 ul 裡面加了一個 class="zTop" 的類別,在zTop加入底下的屬性:
position:static; z-index:999;
結果,發現…根本就沒有任何作用!難不成得在Flash裡面加上 position:static; z-index:-1; 這樣的屬性嗎?仍然是一個完全無效的結果…ap4a有一篇文章可以參考: Z-index Oddities: Menu dropdowns overlapped by positioned elements,但在目前的狀況下,似乎幫助不大。

所以這問題可能不在 z-index 的深度,而是在Flash本身的問題。webmasterworld.com的一篇文章有提到另一個解決的方法:mozilla - dropdown menu will does not overlap flash movie。這方法確實解決了這個問題!

請在Flash的Object標籤底下加入一個空白標籤,裡面寫進底下的參數:
<param name="wmode" value="transparent">
在 embed 標籤裡再加入底下的參數:
wmode="transparent"
沒想到這樣就解決我的問題了!棒!Adobe針對Flash Object與Embed標籤的屬性也有做詳細的說明。事實上,不一定只有將 wmode 的參數值設成 Transparent(透明) 才行,其實 Opaque(不透明) 也可以!所以只要設定透明度,不論是否透明,都能有效解決這個問題。(設成 window 則是肯定不行!因為我試過了~)

慾望城市:官方網站


最近在播放的電影:慾望城市,我覺得它的官方網站設計得相當不錯!純白的背景、灰階的紐約街景,襯托出四位女主角的身影!彩色的主體與黑白的背景對比,加上鑽石般閃亮的SEX AND THE CITY,可說是一整個白色時尚簡潔的高雅與貴氣!

這個網站整個都是Flash的,當你在畫面左右移動滑鼠的時候,畫面也會跟著移動;當你選取其它項目的時候,利用上下的兩個虛線開合,產生一種把頻道開啟的錯覺,這就是Flash的互動表現囉!

除了整個設計感讓人覺得很時尚之外,可能會有人很好奇那些紅色大大的、像鑽石一樣發亮的字要怎麼做?其實我也有一些好奇,但我懷疑那是「純手工」的…也就是一個一個排上去的,因為裡面的鑽石並不是排列得非常整齊,有一些地方還是有歪掉…不過,瑕不掩瑜,它的效果還是非常的棒!這個網站非常值得我們參考與借鏡!

星期一, 7月 14, 2008

CSS:簡單解決「飄浮(float)」的問題

當我們在Div裡面再放進不同的Div的時候,只要你有使用 "float" (float:Left;或float:Right;)這個屬性的話,常常會發現外面的Div立刻就會忘記自己裡面還有其它的小Div…所以會變成「外面的Div是外面的Div、裡面的Div是裡面的Div」,好像沒什麼關係似的!?

到底應該怎麼弄才能讓外面的Div想起來自己應該要隨著裡面的Div來調整高度呢?畢竟它們是有連帶關係的!不能因為裡面的Div會飄來飄去的就不予理會呀~!?

其實是有幾個解決的方法,例如W3C就建議用額外的標籤來解決這個問題:在裡面最後的一個Div底下,加上強制換行的 BR 標籤,並且在裡面加入 Style="clear:both" 屬性;如此一來,就可以解決這個問題了!

不過,這會讓我們的程式碼看起來有點兒多餘!有別的方法嗎?

有,用假類別(pseudo class) ":after" 屬性一樣能達到同樣的目的!不過…那很複雜!

目前最簡單也最直接的方法,是由英國的Paul O'Brien所發現!只要把外面的Div加上 "overflow:auto;" 屬性,外面的Div就會知道…原來裡面有其它的Div存在!真的是很神奇!

Alex Walker在SitePoint.com的Simple Clearing of Floats以及Peter-Paul Koch在QuirksMode.org的Clearing Floats都有更詳細的圖示與說明。

星期四, 7月 10, 2008

Adobe CS3 一氣呵成研討會


七月一日的時候,我參加了Adobe舉辦的「CS3一氣呵成」研討會(Adobe CS3 Master Class 2008);原本我不打算參加的,但是Adobe寄了很多次它的EDM給我,我想,應該是不錯的活動,不然不會發這麼多次同樣的東西!所以我決定還是參加了!

一大早,誠品信義店的門口就排了很多的人,我也就加入了…因為得排隊才能上六樓!從人潮看來,這天參與研討會的人就比我想像中的還要多了!

這次研討會主講的是三位「大師級」的人物,其中為首的是Greg Rewis(the Group Manager of Creative Solutions Evangelism at Adobe Systems, Inc.),他是Dreamweaver和之前GoLive的創始人之一,長得跟 Richard Gear滿神似的,他主要是針對網頁設計的部份做說明…另外兩位,一位是Rufus Deuchler(主講平面設計),一位是Jason Levine(主講影像多媒體)。

我試著把他們演說的技巧寫下來,分享給自己,也分享給有需要的人。

上午他們三位輪流演說,好像在唱戲一樣,滿有趣的!他們三人合作把一個網頁做出來,這樣應該就算是一氣呵成了吧!至於重點嘛…主要的有三個(當然是不會只有三個而已…):
1. Photoshop的Layer Camp功能
2. Fireworks的分享圖層功能
3. 直接把Photoshop的PSD檔拉進Dreamweaver裡
[ 說明 ]
1. Photoshop的Layer Camp功能
其實有很多人都還不大會用Layer Camp這個功能,它可以很方便的將你的圖層記錄下來;你只需要在Layer Camp裡新增圖層,之後只需要簡單的點選,就可以讓圖層自動開啟與關閉,很方便的功能!

2. Fireworks的分享圖層功能
在圖層上按右鍵,就會有一個「分享圖層」的功能;當你在製作許多不同的頁面時,有可能會有主要的版面是不變的,利用這個功能,你可以讓每個頁面都有同樣的東西。

3. 直接把Photoshop的PSD檔拉進Dreamweaver裡
很多人都是利用切割功能,把一張一張的圖切成個別的圖片,然後再放到Dreamweaver裡。其實你可以直接把Photoshop的PSD檔直接拉進Dreamweaver裡,Dreamweaver會自動開啟一個視窗,讓你選擇要轉換的圖片格式(如JPG/GIF/PNG);並且在需要更新或修改的時候,你可以點選Dreamweaver屬性面板的Photoshop編輯圖示,Dreamweaver就會幫你打開Photoshop、讓你修改這個圖片了!修改完,只需要按「儲存」,Dreamweaver就會自動幫你把圖片更新唷!真的很神奇!而且很方便!

下午的時候,分成三個場地,由他們三個人分別主講不同的主題;由於我目前從事網頁設計的工作,理所當然的就是去聽Greg Rewis的網頁設計囉!

網頁設計的場地,不知為什麼,人似乎特別多!多到有些人得坐在走道上,還有一票人是直接坐在講台前面的空地…看來,想學網頁設計的人真不少!

Greg一開始就強調使用CSS來設計網頁的重要性,而且他一再強調,要用CSS而不要用Table來製作網頁!但是,剛開始要用CSS來設計網頁確實是比用Table來得難多了!尤其是對那些CSS不很了解的人來說。他用Rufus先前設計的版面來將它做成網頁給大家看…

下午的小技巧:
1. 使用正確的網頁文件格式(Doc-Type)
2. 從一開始設計網頁就用Dreamweaver提供的CSS起始版面(CSS Starter Layout)
3. 養成「先按一下Element Inspector,然後再按左、右鍵」的習慣
4. 雙擊工作視窗的標題列就可以將該工作視窗最大化
5. Dreamweaver的尺規工具
6. 使用EM而不要用PX來做為文字的單位
7. 方塊理論(Box Model)
8. 從Photoshop複製,然後直接在Dreamweaver貼上
9. 浮動(Float)的屬性:先往上靠齊,然後才向左或向右
10.用Dreamweaver直接調整CSS
11.用Dreamweaver內建的SPRY來建構標準的Ajax頁面
12.在同一個標籤裡使用多個「類別(Class)」
13.絕對不要一開始就在IE裡檢查你的網頁
14.IE修正碼「[if IE lte7]」
[ 說明 ]
1. 使用正確的網頁文件格式(Doc-Type)
很少有網頁設計師會一個一個字的把網頁文件格式打下來,因為我們可以直接用Dreamweaver來建構一個具有正確網頁文件格式的網頁。

2. 從一開始設計網頁就用Dreamweaver提供的CSS起始版面(CSS Starter Layout)
Dreamweaver CS3提供了許多方便而且有效的CSS起始版面;使用這些內建的版面不止確保你會使用正確的網頁文件格式,也讓你避免掉許多的衝突與問題,同時它也會給你許多網頁設計的提示 ;當然,你得先了解自己的設計是屬於哪一種的CSS樣式,你才能選到適合你的CSS起始版面。

3. 養成「先按一下Element Inspector,然後再按左、右鍵」的習慣
Dreamweaver有一個很強大的功能,就是 "Element Inspector"。你可以透過這個功能來選取某一個網頁元素。如果你想在某個網頁元素之後加上一個東西,你可以用Element Inspector選取這個網頁元素,然後再按「右鍵」,這樣你就完完全全的讓游標跑到這個元素之後了!這樣可以避免放錯網頁元素的位置。

4. 雙擊工作視窗的標題列就可以將該工作視窗最大化
有時候你想要用Dreamweaver的某個工作視窗,但你得不時調整它的大小,可能要往上拉,可能又要往下拉,很浪費時間!但其實你可以直接在工作視窗的標題列快點兩下,Dreamweaver就會知道你想要把它放大,它會自動把其實的工作視窗收合起來,把你要的工作視窗放到最大!很方便吧!

5. Dreamweaver的尺規工具
如果Photoshop的參考線工具的話,Dreamweaver也有!用法就跟Photoshop一樣!從尺規的地方拉出參考線就可以了!不過,Dreamweaver不止提供這個功能而已…按住你的「Ctrl」鍵,你會發現Dreamweaver告訴了你兩個參考線之間到底是多少Pixel的距離!哇!真是方便的功能!

6. 使用EM而不要用PX來做為文字的單位
Pixel是固定的大小,在許多瀏覽器上會無法讓文字放大或縮小;EM則是按照文字的空間,不論你是要放大或縮小,文字都可以自動將調整大小而且保持原始比例。1em = 16px,這是預設的字體大小,當然,你也可以用百分比來調整字體,和EM的道理是相通的。

7. 方塊理論(Box Model)
這個理論只是用來說明在不同瀏覽器中所存在的問題。如果你設定某個方塊的寬度為「300px, padding-20px, border:5px」,FireFox或Safari這類的網頁標準格式的瀏覽器會解讀實際的寬度為 350px(5+20+300+20+5)。但是微軟的Internet Explorer(IE)則會解讀為300px的實際寬度。IE會把裡面的內容自動縮小好讓實際的寬度可以是300px;換句話說,以這個例子來講,IE把內容的寬度改成250px了!這可能就是讓網頁設計師不喜歡CSS的原因之一了!(W3C有更多關於方塊模式(Box Model)的介紹)

8. 從Photoshop複製,然後直接在Dreamweaver貼上
一般來說,很多網頁設計師都會先把圖片切割好再匯出,然後再放進Dreamweaver裡;但是,現在你可以從Photoshop複製選取區域,然後直接貼進Dreamweaver裡!跟先前將PSD檔放進Dreamweaver很類似,Dreamweaver在你將複製的圖片貼進來的時候,會提示你需要儲存的圖片格式是什麼…又是一個超方便的功能!不過,這邊有個重點你必須要知道,就是這個功能是基於「圖層」的前提之下(Layer-Based);意思是說,它只能接受在選取的圖層上被複製的區域,如果你沒有選擇任何圖層,就無法複製。

9. 浮動(Float)的屬性:先往上靠齊,然後才向左或向右
如果這些向哪邊的屬性影響了你底下其它的Div,你可以用 "clear:both" 的屬性來隔離上方的浮動屬性,這樣它們就不會被影響了。

10.用Dreamweaver直接調整CSS
用Dreamweaver調整CSS是很正常的,但是你也可以直接從Dreamweaver裡面,將兩個不同CSS檔的內容做移動!也可以直接把網頁內置的CSS變成外部CSS檔!這個功能我之前還沒試過,現在…真的覺得滿方便的!

11.用Dreamweaver內建的SPRY來建構標準的Ajax頁面
Dreamweaver支援Ajax。如果你想做出像Ajax一樣的效果,Dreamweaver其實已經內建了一個Ajax的功能:SPRY。你不需要花很多時間來寫一個Ajax的元件,Dreamweaver已經幫你寫好了,你只需要拿來用就行了!目前最新的版本是1.3版,可以在Adobe Labs找到更新。

12.在同一個標籤裡使用多個「類別(Class)」
其實你可以在網頁標籤裡使用不止一個的「類別Class」,你只要在兩個不同的類別中間加上空白就可以了。例如:class="style1 style2",這樣會用上style1和style2這兩個類別。

13.絕對不要一開始就在IE裡檢查你的網頁
因為IE並不符合網頁標準規格;即使是IE本身,不同的版本所呈現的網頁畫面也不一樣!所以IE的問題不少!你最好先從FireFox或Safari這類的標準網頁格式的瀏覽器來檢查你的網頁。

14.IE修正碼「[if IE lte7]」
你可以用這個修正碼來加註在網頁上,以修改IE7以下的版本所產生的問題…雖然…不同的版本還是有可能會有不同的問題…

嗯…差不多就這樣了!雖然我並不是Dreamweaver的新手,但這個研討會還是讓我覺得獲益匪淺!雖然也花了不少時間寫這個東西,但我相信這也是加深了自己的印象!Greg在研討會中不時的提醒我們他出的新書:Mastering CSS with Dreamweaver CS3;這本書是他和他未婚妻一起寫的,聽說有許多不錯的教學,Amazon上的評價也不錯!所以我昨天就訂了一本…NT$1383…投資一下自己吧!

星期二, 7月 08, 2008

From VX Revolution To VX Nano


前陣子我的滑鼠用起來怪怪的,有時候明明是點一下,會變成快點兩下,在操作的時候真的滿困擾的;直到上星期,我才把羅技「VX Revolution」拿去送修…在八德路四段123號6樓之四。我一次就送修了兩隻滑鼠,包括我之前用很久的那隻…

拿去的時候,那邊有一位小男生要我填個表格,表格拿給他之後,他問了一下我的問題是什麼,並且告訴我「年代久遠」的那隻如果早一點拿來的話,也許還可以修,那隻到今年四月就不保修了;但「VX Revolution」這隻,可以到2010年,所以沒有問題,但要等滑鼠才行,因為目前這隻滑鼠缺貨,可能要到月中或月底才能把滑鼠寄給我。我…也只能說:「沒問題!」不然也是沒辦法呀…慢慢等吧…

後來,那個人打電話給我,問我要不要換成「VX Nano」這隻?如果好的話,下個星期(這星期)就可以寄給我囉!我只是問他說,「這隻滑鼠的中間鍵可不可以用?」因為它的中間鍵現在按下去是啟動與關閉飛速捲動的功能;他說,可以設定滾輪後面那個按鍵的功能為中間鍵,一樣可以當第三鍵來用!於是我就跟他說:「沒問題!就是這隻了!」雖然我還不是很確定它的樣子,但是它是比VX Revolution更晚才推出的滑鼠,所以應該不會比較差,而且,它們是同一等級的產品。

今天,我終於拿到我的「VX Nano」了!看起來還滿不賴的耶!不但有送電池,而且還附上具有延長線的接收器,而且上面還有一個USB的插槽,不會讓這個延長線的接收器只是個接收器而已~另外,它還有一個旅行用的小包包,可以把VX Nano裝進去,一整個感覺就是「棒!」

沒想到舊的羅技VX Revolution滑鼠修完以後,居然變成一隻新的VX Nano滑鼠了~真是夢幻呀!(果然花大錢買東西有時候還是有好處的~:)

Au Revoir Simone

Au Revoir Simone是今天逛到的一個很不錯的音樂網站,一進去就可以聽到她們輕快而美妙的歌曲!有時候當你把手邊的音樂都聽到不想聽的時候,到這個網站來聽聽她們的歌吧!當然,不止是她們的歌曲聽了以後讓人覺得很輕鬆自在,她們的網頁也設計得很有剪貼簿的風格感!