当前位置:软件学习 > Dreamweaver >>

Dreamweaver的使用


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

   在這種勢不可擋的普及率席捲之下,可想而知Dreamweaver 內置 
 的功能可說是越來越多、越來越丰富、齊全。在這次我們的介紹中, 
 就有新增一些功能提供網頁製作者一些更快速的設計、更容易地編易做图 
 及整合性更強的功能。事不宜遲,以下我們介紹如何善用 Dreamwea- 
 ver 裡的一些功能。以下密技共有十二項,可分成四個主題。 

   分別是:設計網頁頁面( Dreamweaver 裡具有彈性的頁面設計功 
 能)、看配Macromedia其它產品一起使用Dreamweaver (製作動畫和圖 
 片不求人 )、自訂使用界面( 享受個性化的使用經驗 )和最後的加入 
 Dreamweaver 擴充程序(在網頁中載入擴充高級功能 )。 

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

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

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

 Dreamweaver 終極秘訣#02# 
   秘訣02:創造個人調色板 
   Dreamweaver 新的"Assets panel"(屬性控制面板)是一種可以在 
 編輯網站時根據文件格式,例如圖片、樣式等來管理文件的新工具。 

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

   秘訣03:製作彈出式選單導航系統 
   原本要製作彈出式選單導航系統(Pop-up Menu Navigation 
 System) 要用到很多的一些t的語法和技巧,但是如果你有Dream- 
 weaver 、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圖片修改得活靈活現。Dream- 
 weaver 可以讓你製作動畫不求人。 

   具體做法:在標準窗口裡選擇要進行修改的圖片,然後在 "Pro- 
 perty 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"。
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,