十二個dreamweaver鮮為人知的小秘訣

來源:互聯網
上載者:User
事不宜遲,以下我們介紹怎麼善用Dreamweaver裡的一些功能。以下密技共有十二項,可分成四個主題。

一、背景分析

  對想要在視覺化環境下製作複雜網頁的專業網頁製作者來說,Dreamweaver已漸漸在網頁編輯工具中展露頭角,成為專業人士編寫網頁的最佳選擇。根據Macromedia公司的調查,Dreamweaver目前已累積有超過七十萬名的使用者,佔有率在網頁編輯工具中居冠,像“Adobe GoLive”和“NetObjects Fusion”等競爭者都被遙遙拋在後頭。因此一般地預估Dreamweaver的使用群體將會持續的增加。

  在這種勢不可擋的普及率席捲之下,可想而知Dreamweaver內建的功能可說是越來越多、越來越豐富、齊全。在這次我們的介紹中,就有新增一些功能提供網頁製作者一些更快速的設計、更容易地編碼及整合性更強的功能。事不宜遲,以下我們介紹怎麼善用Dreamweaver裡的一些功能。以下密技共有十二項,可分成四個主題。分別是:設計網頁頁面(Dreamweaver裡具有彈性的頁面設計功能)、搭配Macromedia其他產品一起使用Dreamweaver(製作動畫和圖片不求人)、自訂使用介面(享受個人化的使用經驗)和最後的加入Dreamweaver擴充程式(在網頁中載入擴充進階功能)。

二、設計網頁頁面的秘訣

  不管你是要運用HTML原始文法逐字逐字來編寫網頁,或是運用標準化視窗來進行網頁的視覺設計,以下的小秘訣都能派得上用場。

  秘訣1:讓網頁頁面大小更有彈性

  有些網頁研發者稱以下要介紹的這種技巧為“liquid”,在這兒則把這種技巧叫做是“彈性延伸的技巧”。這是一種技巧,可在訪客瀏覽器視窗大小改動時也隨之調整網頁頁面大小,因此如果視窗過大就不會有空白處;視窗過小邊緣就不會跑出上下移動的拉條。其實大多數簡單的網頁會自己隨著瀏覽器視窗大小來調整頁面大小,不過如果是網頁裡用到非常多不同的架構及表格,網頁頁面大小就非常難自動彈性地調整。通常網頁設計者會用混合運用固定寬度的架構,和GIF圖片作為間隔來設計網頁頁面,這樣一來不論是用Internet Explorer或是用Netscape Navigator,頁面大小都會固定而不會跑掉。用Dreamweaver 4.0能輕而易舉設計出會自動彈性調整的網頁。要怎麼做呢?

  ★具體做法:用工具面板(Object palette)上的按鈕開啟網頁,並且轉換到“格式查看”(Layout view)。這時能看到文字方塊的欄度,每一欄的方框上方中間更有一個小小的下拉式箭頭,點選想要設定彈性顯示的欄上方的小箭頭,接著選擇“將欄設為彈性顯示”(Make Column Autostretch)。(設定自動調整欄的寬度以一欄為限)這時該欄方框上方就會出現一條波浪形的線,而不是原本表示欄度的數字。 Dreamweaver會自動製作出固定版面的空格圖片,這個空白圖片是以欄上方的兩個長條形的空白表格表示,如此版面會自動被填充,才會完成彈性版面設定。(在第一次增加空白圖片時會跳出一個對話方塊問你是否要使用內建圖片,為求效果,我們建議你讓Dreamweaver自動產生一個,不然就不用使用空白圖片來填充版面。)

  秘訣2:創造個人調色盤

  Dreamweaver新的“Assets panel”(屬性控制台)是一種能在編輯網站時根據檔案格式,例如圖片、樣式等來管理檔案的新工具。

  ★具體做法:當你定義新網站時(點選Site New Site),所有類型的物體會自動增加到“Asset panel” 裡的適當表框中。這個新加入的“Assets panel”屬性控制台裡也有色塊,儲存你網站裡所用到的所有色彩,包含文字的顏色、背景的顏色,及超連結的顏色等。這是個為使用者量身定做的網站導航顏色盤。只要啟動“Assets panel”(先選 “Window”再點“Assets”),接著點左方那個小小的色彩捲軸,就能看到你網站裡各式各樣的顏色選項。當然你能將這些顏色拉到某些特定選取的文字中。甚至當你選擇某種顏色時,畫面上會出現這種顏色的十六進位值的色彩淡濃度,和三原色對照碼(RGB)。如果想將調色盤工具列縮小一點,甚至能僅加入某些顏色到調色盤的“我的最愛”裡。只需將選取的顏色反白、點選視窗裡一個叫做“新增到我的最愛的”按鈕(最下方靠右的按鈕),就能完成了。

  秘訣3:製作彈出式菜單導航系統

  原本要製作彈出式菜單導航系統(Pop-up Menu Navigation System)要用到非常多的一些java script的文法和技巧,不過如果你有Dreamweaver、Fireworks Studio,即可輕輕鬆鬆快速辦到。

  ★具體做法:首先在“Fireworks”裡開始,選擇某個圖片,然後在“Set Pop-Up Menu”的對話方塊裡點選“ Insert  Pop-Up Menu”,你能輸入項目(items)的名稱並點“Plus”(加入)按鈕,來新增該項目。你能繼續在跳出來的資訊框裡進行細項設定,例如設定該項目所要用的文字及超連結,當然也能新增子功能表,並重新安排下一層的設定。完成時,點選“Next”(下一步),繼續設定各種參數值,例如顏色、字型等等。這時菜單完成後,既能預覽HTML文法,也可預覽圖象。再點“ Finish”(完成)。這時當滑鼠移動到原來的圖片時,會出現菜單系統的內容一覽。接著將製作好的檔案匯出時,“Fireworks”會自動生產出所有 Dreamweaver 需要用到的HTML、java script,及圖象檔案。

  秘訣4:讓圖片動起來

  如果你同時安裝有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”工具設定移動速度,選擇“Object”面板來改動設定。要匯出檔案時,只要點選“ Optimize ”工具列,在檔案類型的地方選擇“Animated GIF”。完成以後,“Fireworks”就會自動將圖片以最佳化設定匯出,並且自動將 GIF 圖片更新,還會在Dreamweaver裡將更新過的圖片顯示出來。點選“File Preview in Browser”,這樣就能在瀏覽器裡預覽剛剛製作完成的可愛圖片。

  秘訣5:讓按鈕有閃動效果

  在Dreamweaver中,不用有Flashs,也能製作有閃動效果的Flash按鈕物體。Dreamweaver內建有好幾個 Flash按鈕物體,能製作好幾個不同形式的按鈕。

  ★具體做法:點選“Insert Interactive Images Flash Button”就可看到有那些內建按鈕。在對話方塊內甚至能用滑鼠指到想要使用的按鈕形式,然後看看在瀏覽器裡的效果怎麼。用滑鼠指標把要用的按鈕形式選定,再依順序輸入參數,例如按鈕上的文字、字形、顏色、超連結等,或是自設檔案名稱字。按下OK。接下來就會有一個“SWF”格式的檔案產生,檔案並會自動匯入你的網頁中。按一下這個做好的檔案,會看到“Property Inspector”(屬性明細)中會顯示出檔案的屬性。將檔案屬性顯示出來時,如果擴充檔案屬性明細表,會出現“Play”(播放),點選之後能不用開啟瀏覽器來預覽按鈕的閃動效果。

  秘訣6:製作流動文字

  在網頁中增加流動文字就像增加我們剛剛介紹的Flash按鈕相同簡單。相同地,不用安裝Flash,用 Dreamweaver提供的新功能就能輕鬆辦到。常用HTML文法寫網頁、沒有互動式媒體經驗的網頁製作者也能輕鬆製作出小巧的Flash形式的流動文字。這項新功能能在不添加相相容性麻煩的情況下為網頁增添一些瀏覽上和訪客的互動性。

      ★具體做法:點選“Insert Interactive Images Flash Text”,再將參數設定一一填入(例如要更改效果的文字、字形、字型顏色及字型大小等等)。
  秘訣7:更改鍵盤快速鍵

  Dreamweaver可讓使用者自訂使用介面,這項設計十分有彈性。舉例來說,使用者能通過編寫程式或自行增加物體(object)的方式來更改菜單。不必功力高深,你就能更改鍵盤快速鍵,因為Dreamweaver有一項叫做“Keyboard Shortcut Editor”的映像介面。

  ★具體做法:只要點選“Edit Keyboard Shortcuts”,對話方塊將載入並欄出能改動的快速鍵一覽表,讓你把快速鍵改成自己習慣用的設定值。要改動快速鍵,只要使用現行設定(Current Set)和命令欄(Command)的下拉式功能表,在現有的命令中找到想要更改的命令,接著選取目前的快速鍵,就會出目前快速鍵的列表中。另外,如果要增加快速鍵設定,能點選“Plus”、在鍵盤上敲入你想使用的新快捷代表鍵,點選“改動”(Change)即可。同時你也能選取某快速鍵、點選“移除”(Minus),就能移除某個快速鍵。

  秘訣8:重新設定網站視窗(Site window)欄

  ★具體做法:只要從“Site window”中點選“View File View Columns”,就能自字查看網站(Site view)欄的大小及出現方式。選取某一欄的名稱,使用上下箭頭重新調整,或不要勾選顯示欄(Show field)以隱藏該欄。另外,點選“Plus”鈕也能新增欄,並自創欄名。此外,你也能在下拉式菜單中選擇現有的“note”來將欄和“Design Note”產生關聯。

  秘訣9:查看網頁原代碼

  ★具體做法:當你開啟“Reilly Code Reference”(Window Reference)來檢查屬性或是瀏覽器的相容性時,預設的視窗會以細小的字型顯示出“參考設定值”。不過如果你按下視窗右上方的右鍵(就在關閉按鈕的下方),就會出現一排下拉式菜單,能在這邊選擇原始代碼字型的大小(小型字到中型字型及大型字型)。選擇大型字型比較不會“虐待”眼睛,因為這樣你看HTML原代碼時就不用拿著放大鏡看螢幕了。

  秘訣10:新增Flash按鈕

  秘訣5中,我們介紹怎麼用20種預設的按鈕類型,來製作Dreamweaver裡的Flash按鈕。這是不用另外安裝所有檔案或程式的方法。下面有另一種方法,就是安裝“Fireworks buttons”,這種擴充功能和秘訣5有相同的效果。

  ★具體做法:到 “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及更高版本的瀏覽器。只要選擇“視窗系統”菜單裡的“Behavior”面板,再到IE功能下拉式功能表點選此項功能,即可輕鬆啟動此酷炫功能。

  秘訣12:超酷的圖表

  如果你想製作表格,還要自己花時間再逐字編寫網頁原代碼嗎?不必了,已有現成的了!

  ★具體做法:到Exchange下載“Form Builder extension”,就有現成的表格,可讓你馬上複製包含像:國家、性別、婚姻狀況、年齡層及其他目錄等的表格。到Exchange下載這個小巧(只有11K)的檔案,然後由“Extension Manager”安裝進來(Commands Manage Extensions, File Install Extension)。接著只要重新啟動 Dreamweaver,點選“Insert FormBuilder”,就會在(Insert FormBuilder)中發現擴充功能。點選了之後這時會有一個對話方塊出現,會顯示出所有能套用的格式菜單,實在非常方便。



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。