andyz
 
   
 惡靈退散 o(╬￣皿￣)=○ &nb ..
|
分享:
▼
x0
|
Dreamweaver終極秘訣
一、背景分析
對想要在視覺化環境下製作複雜網頁的專業網頁製作者來說， Dreamweaver 已經漸漸在網頁編輯工具中展露頭角，成為專業人士編寫網頁的最佳選擇。根據Macromedia公司的調查，Dreamweaver
目前已累積有超過七十萬名的使用者，占有率在網頁編輯工具中居冠，像"Adobe GoLive"和"Netts Fusion"等競爭者都被遙遙拋在后頭。因此一般地預估Dreamweaver的使用群體將會持續的增加。
在這種勢不可擋的普及率席捲之下，可想而知Dreamweaver 內置的功能可說是越來越多、越來越丰富、齊全。在這次我們的介紹中，就有新增一些功能提供網頁製作者一些更快速的設計、更容易地編碼
及整合性更強的功能。事不宜遲，以下我們介紹如何善用 Dreamweaver 裡的一些功能。以下密技共有十二項，可分成四個主題。
分別是：設計網頁頁面( Dreamweaver 裡具有彈性的頁面設計功能)、****配Macromedia其它產品一起使用Dreamweaver (製作動畫和圖片不求人 )、自訂使用界面( 享受個性化的使用經驗 )和最後的加入Dreamweaver 擴充程序(在網頁中載入擴充高級功能 )。
二、設計網頁頁面的秘訣
不管你是要運用HTML原始語法逐字逐字來編寫網頁，或是運用標準化窗口來進行網頁的視覺設計，以下的小秘訣都可以派得上用場。
秘訣01：讓網頁頁面大小更有彈性
有些網頁開發者稱以下要介紹的這種技巧為"liquid"，在這兒則把這種技巧叫做是"彈性延伸的技巧"。這是一種技巧，可在訪客瀏覽器窗口大小改變時也隨之調整網頁頁面大小，因此如果窗口過大就不
會有空白處﹔窗口過小邊緣就不會跑出上下移動的拉條。其實大多數簡單的網頁會自己隨著瀏覽器窗口大小來調整頁面大小，但是如果是網頁裡用到很多不同的框架及表格，網頁頁面大小就很難自動彈性地
調整。通常網頁設計者會用混合運用固定寬度的框架，和GIF 圖片作為間隔來設計網頁頁面，這樣一來不論是用Internet Explorer 或是用Netscape Navigator，頁面大小都會固定而不會跑掉。用Dreamweaver 可以輕而易舉的設計出會自動彈性調整的網頁。要怎麼做呢﹖
具體做法：用工具面板(temp palette) 上的按鈕打開網頁，並且轉換到"格式查看"(Layout view)。 這時可以看到文字方塊的欄度，每一欄的方框上方中間還有一個小小的下拉式箭頭，點選想要設置彈
性顯示的欄上方的小箭頭，接著選擇"將欄設為彈性顯示"(Make Col-umn Autostretch)。(設置自動調整欄的寬度以一欄為限)這時該欄方框上方就會出現一條波浪形的線，而不是原本表示欄度的數字。 Dreamweaver 會自動製作出固定版面的空格圖片，這個空白圖片是以欄上方的兩個長條形的空白表格表示，如此版面會自動被填充，才會完成彈性版面設置。 (在第一次增加空白圖片時會跳出一個對話框問你
是否要使用內置圖片，為求效果，我們建議你讓Dreamweaver 自動產生一個，不然就不用使用空白圖片來填充版面。)
Dreamweaver 終極秘訣#02#
秘訣02：創造個人調色板
Dreamweaver 新的"Assets panel"(屬性控制面板)是一種可以在編輯網站時根據文件格式，例如圖片、樣式等來管理文件的新工具。
具體做法：當你定義新站點時(點選Site New Site)，所有類型的物體會自動增加到 "Asset panel" 裡的適當表框中。這個新加入的"Assets panel"屬性控制面板裡也有顏色框，儲存你網站裡所用到的
所有色彩，包含文字的顏色、背景的顏色，以及超鏈接的顏色等。這是一個為使用者量身定做的網站導航顏色盤。只要啟動"Assets panel" (先選 "Window"再點"Assets") ，接著點左方那個小小的色彩卷
軸，就可以看到你網站裡各式各樣的顏色選項。當然你可以將這些顏色拉到某些特定選取的文字中。甚至當你選擇某種顏色時，畫面上會出現這種顏色的十六進位值的色彩淡濃度，和三原色對照碼(RGB) 。
如果想將調色板工具欄縮小一點，甚至可以僅加入某些顏色到調色板的 "我的最愛"裡。只需將選取的顏色反白、點選窗口裡一個叫做"新增到我的最愛的"按鈕(最下方靠右的按鈕)，就可以完成了。
秘訣03：製作彈出式選單導航系統
原本要製作彈出式選單導航系統(Pop-up Menu Navigation System) 要用到很多的一些t的語法和技巧，但是如果你有Dreamweaver 、Fireworks Studio，即可輕輕松松快速辦到。
具體做法：首先在"Fireworks" 裡開始，選擇某個圖片，然後在"Set Pop-Up Menu"的對話框裡點選" Insert Pop-Up Menu"，你可以輸入項目(items)的名稱並點"Plus"(加入) 按鈕，來新增該項目。你
可以繼續在跳出來的信息框裡進行細項設置，例如設置該項目所要用的文字及超鏈接，當然也可以新增子選單，並重新安排下一層的設置。完成時，點選"Next"(下一步)，繼續設置各種參數值，例如顏色、
字體等等。這時選單完成後，既可以預覽HTML語法，也可預覽圖象。再點" Finish"(完成) 。這時當鼠標移動到原來的圖片時，會出現菜單系統的內容一覽。接著將製作好的文件導出時，"Fireworks" 會自動生產出所有 Dreamweaver 需要用到的HTML、t，以及圖象文件。
秘訣04：讓圖片動起來
如果你同時安裝有Dreamweaver 、Fireworks Studio，這兩種軟件****配的完美程度將使你贊不絕口。即使你不是專業的圖片設計者，在設計網頁時也多多少少想把一些GIF圖片修改得活靈活現。Dreamweaver 可以讓你製作動畫不求人。
具體做法：在標準窗口裡選擇要進行修改的圖片，然後在 "Property Inspector"裡點選"編輯"(Edit)。如果你安裝的Dreamweaver裡附有"Fireworks"，"Fireworks"就是Dreamweaver 預設圖片編輯器，這時圖片就會自動載入到 "Fireworks" 。(如果仔細看，你會發現Fireworks的畫面會出現"Editing From Dreamweaver "這樣的文字和圖樣，指示你可以在Dreamweaver 裡進行圖片編輯。)好了，現在在"Fireworks"裡點選要編輯的圖片，選擇" Modify Animate Animate-Selection"。 接下來完成 "Animate dialog box" 裡的設置，選定動畫的幀數，動畫移動的方向、透明度等等設置。你也可以點選"Frames" 工具設置移動速度，選擇"t" 面板來改變設置。要導出文件時，只要點選" Optimize "工具欄，在文件類型的地方選擇"Animated GIF"。
完成以後，"Fireworks" 就會自動將圖片以最佳化設置導出，並且自動將GIF 圖片更新，還會在Dreamweaver 裡將更新過的圖片顯示出來。點選 "File Preview in Browser"，這樣就可以在瀏覽器裡預
覽剛剛制作完成的可愛圖片。
Dreamweaver 終極秘訣#03#
秘訣05：讓按鈕有閃動效果
在Dreamweaver 中，不用有Flashs，也可以製作有閃動效果的Flash按鈕物體。Dreamweaver 內置有好几個 Flash 按鈕物體，可以製作好几個不同形式的按鈕。
具體做法：點選"Insert Interactive Images Flash Button"
就可看到有那些內置按鈕。在對話框內甚至可以用鼠標指到想要使用的按鈕形式，然後看看在瀏覽器裡的效果如何。用鼠標指針把要用的按鈕形式選定，再依順序輸入參數，例如按鈕上的文字、字形、顏色
、超鏈接等，或是自設文件名字。按下OK。接下來就會有一個"SWF"格式的文件產生，文件並會自動導入你的網頁中。
按一下這個做好的文件，會看到"Property Inspector" (屬性明細) 中會顯示出文件的屬性。將文件屬性顯示出來時，如果擴展文件屬性明細表，會出現"Play"(播放)，點選之後可以不用打開瀏覽器來
預覽按鈕的閃動效果。
秘訣06：製作流動文字
在網頁中增加流動文字就像增加我們剛剛介紹的Flash 按鈕一樣簡單。相同地，不用安裝Flash，用 Dreamweaver 提供的新功能就可以輕松辦到。常用HTML語法寫網頁、沒有互動式媒體經驗的網頁製作
者也可以輕松製作出小巧的Flash 形式的流動文字。這項新功能可以在不添加相兼容性麻煩的情況下為網頁增添一些瀏覽上與訪客的互動性。
具體做法：點選"Insert Interactive Images Flash Text"，再將參數設置一一填入 (例如要更改效果的文字、字形、字體顏色及字體大小等等)。
秘訣07：更改鍵盤快捷鍵
Dreamweaver 可讓使用者自訂使用界面，這項設計十分有彈性。舉例來說，使用者可以通過編寫程序或自行增加物體(t) 的方式來更改選單。
不必功力高深，你就可以更改鍵盤快捷鍵，因為Dreamweaver 有一項叫做"Keyboard Shortcut Editor"的圖形界面。
具體做法：只要點選"Edit Keyboard Shortcuts"，對話框將載入欄位出可以改動的快捷鍵一覽表，讓你把快捷鍵改成自己習慣用的設置值。要改動快捷鍵，只要使用現行設置 (Current Set) 和命令欄
(Command) 的下拉選單，在現有的命令中找到想要更改的命令，接著選取目前的快捷鍵，就會出現在快捷鍵的列表中。另外，如果要增加快捷鍵設置，可以點選"Plus"、在鍵盤上敲入你想使用的新快捷代表
鍵，點選"改變"(Change)即可。同時你也可以選取某快捷鍵、點選"移除"(Minus)，就可以移除某個快捷鍵。
Dreamweaver 終極秘訣#04#
秘訣08：重新設置網站窗口(Site window)欄
具體做法：只要從 "Site window" 中點選"View File View Columns" ，就可以自字查看網站(Site view) 欄的大小及出現方式。選取某一欄的名稱，使用上下箭頭重新調整，或不要勾選顯示欄
(Show field) 以隱藏該欄。另外，點選"Plus"鈕也可以新增欄，並自創欄名。此外，你也可以在下拉式選單中選擇現有的"note"來將欄和"Design Note" 產生關聯。
秘訣09：查看網頁原始碼
具體做法：當你打開"Reilly Code Reference"(Window Reference)來檢查屬性或是瀏覽器的兼容性時，預設的窗口會以細小的字型顯示出"參考設置值"。但是如果你按下窗口右上方的右鍵 (就在關閉按鈕的下方) ，就會出現一排下拉式選單，可以在這邊選擇原始代碼字體的大小(小型字到中型字體以及大型字體)。選擇大型字體比較不會"虐待"眼睛，因為這樣你看HTML原始碼時就不用拿著放大鏡看螢幕了
。
秘訣10：新增Flash按鈕
秘訣05中，我們介紹如何用20種預設的按鈕類型，來製作Dreamweaver 裡的Flash按鈕。這是不用另外安裝任何文件或程序的方法。下面有另一種方法，就是安裝"Fireworks buttons" ，這種擴充功能
和秘訣05有相同的效果。
具體做法：到 "Exchange for Dreamweaver "(Dreamweaver 擴充功能交換中心) ，輸入"InstaGraphics Extensions for Dreamweaver"的關鍵字搜尋，然後再下載這個大約577K 的文件。轉換到Dreamweaver，選擇"Commands Manage Extensions"，再選擇"File Install Extension"，就可以開始安裝。一旦重新啟動 "Dreamweaver "，就有六個新奇有趣的按鈕格式，包括"Surfboard"及"Bulletbar" 在內， 這時只要使用"Insert Interactive Images Fireworks Button"命令，就可以製作出一個酷炫的按鈕。你也可以用"commands Convert Bullets To Images" 及 "Commands Convert Text To Images"，上述兩種方法都可以自動執行"Fireworks"。
秘訣11：在網頁中加入 "設置成我的最愛" 功能
具體做法：在"Exchange" 裡搜尋，你就可以發現"Add To Favorites" 的擴充功能。這個小小的文件才占3K，下載時間不會等太久，接著循相同步驟，由"Extension Manager"載入(Commands
Manage Extensions、File Install Extension)。接著重新啟動Dreamweaver ，這個新載入的擴充文件會在Dreamweaver 裡新增一項功能。如果你的網頁中加入這個 "加入我的收藏集" 的功能，這樣一
來使用者看到你的網站時，輕輕一按，就可以輕易地將你的網站加入他使用瀏覽器的 "我的最愛" (或是個人書簽) 。此外，最炫的是也可以自訂 "我的最愛" 名稱，以及 "我的最愛" 名稱前會出現的小圖
示 (一般IE中"我的最愛"前面的小圖示都是 IE 的預設值，如果你有自己設計的小圖示，那就炫多了)。注意，這項功能只支持用 IE 4.0 以及更高版本的瀏覽器。只要選擇"Windows"選單裡的"Behavior" 面
板，再到 IE 功能下拉選單點選此項功能，即可輕松啟動此酷炫功能。
秘訣12：超酷的圖表
如果你想製作表格，還要自己花時間再逐字編寫網頁原始碼嗎﹖不需要了，已經有現成的了﹗
具體做法：到Exchange 下載"Form Builder extension" ，就有現成的表格，可讓你馬上複制包含像：國家、性別、婚姻狀況、年齡層及其他目錄等的表格。到Exchange下載這個小巧(只有11K) 的文件
，然後由"Extension Manager"安裝進來(Commands Manage Extensions， File Install Extension)。接著只要重新啟動Dreamweaver，點選"Insert FormBuilder"，就會在(Insert FormBuilder)中發現擴充功能。點選了之後這時會有一個對話框出現，會顯示出所有可以套用的格式選單，實在非常方便。
[ 此文章被codeboy在2004-12-12 11:30重新編輯 ]
|
