星期四, 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…投資一下自己吧!

沒有留言: