一、创建高效集成的应用环境爲了使DreamWeaver和Firework的集成.ppt

一、創建高效集成的應用環境 　　爲了使DreamWeaver和Firework的集成功能得到最大程度的發揮,你必須按照指定的順序正確的安裝他們,當然如果你使用的是集成以後的安裝程式就可以忽略下面的操作了. 　　先啓動Dreamweaver4的的安裝程式,完成以後再開始Firework4的安裝.這時Firework會在安裝的過程中自動檢測本地是否已經安裝了DreamWeaver.如果發現的話,它會自動把必要的集成文件添加到相應的子目錄中.如果你已經搞錯了順序,建議利用Firework的反安裝程式卸載掉,然後重新安裝. 　　至於具體的添加文件,這裏就不細講了.不過爲了方便你確定是否集成成功,可以在DreamWeaver安裝子目錄Dreamweaver4/Configuration/Objects/Common下查看是否存在Fireworks HTML.htm,Fireworks HTML.js兩個文件,有的話.基本就沒什麽問題了. 　　好的!現在我們看一下究竟如何在DreamWeaver中靈活的應用Firework文件.這裏的Firework格式文件除了包括一般的PNG或其他擴展(GIF,GIF89a,JPEG)的圖片形式外,還有比較高級的Firework4 HTML文件.而我們所重點利用的也就是後者. 　　二、在DreamWeaver4中直接插入及編輯Firework圖片文件 　　在網頁中插入圖片文件應該是最簡單不過了,不論是何種格式的圖片都能夠通過功能表Insert-Image輕鬆的導進來.當然你也可以通過Object面板上的圖片插入按鈕來實現. 　　1、打開需要編輯的文件,將游標定位到需要插入圖片的位置. 　　2、單擊圖片插入按鈕,然後在Select Image Source視窗中選定文件的具體路徑.如果圖片文件恰恰在網站根文件夾中,確定後不會有任何提示資訊,如果是從網站以外引用的話,DreamWeaver會彈出如下的資訊提示框: 　　 　　單擊是,在另存爲對話方塊中選擇文件的保存目錄(默認爲網站的其實根目錄). 　　3、這時目標圖片已經進來了,除了在網頁中調整該圖片物件的屬性(大小,顯示色彩等)外.你還可以直接調用Firework4對它進行優化處理.這也是兩者集成操作的一個表現.　　三、在Dreamweaver4中插入Firework4 HTML文件 　　鑒於大家可能對這個概念還比較模糊,下面我們先介紹一下什麽是Firework4 HTML文件格式.顧名思義既然多了一個HTML的尾巴,當然在輸出中就少不了這個東西了.Fireworks4的HTML文件中包含了與它相關聯的諸多資訊:圖像的鏈結、圖像的切片資訊以及JavaScript腳本語言等等. 　　大家都知道在Firework4中增加了很多以前在網頁中才能實現的效果,包括熱點控制,下拉功能表製作.而這些的實現都是需要類似Javascript的腳本語言支援的.當然我們現在用Firework製作就變的相對簡單多了,並且程式本身提供的效果也是蠻不錯的. 　　製作完成了,下面一個問題就是如何在不影響效果的基礎上,將他們導入到指定的網頁中.根據不同的需求,我們提供了大概4種不同的導入方法: 1、以獨立的網頁文件輸出 　　這種情況可能比較少(多爲設計性的網頁),不過在需要時,倒是很簡單. 　　完成以後,選擇功能表File -Export,進入文件導出窗口,如圖 　　 　　在保存類型下拉清單中選擇HTML and Images即可.然後你就可以在瀏覽器裏查看效果了. 　　2、利用Insert Fireworks HTML功能表或按鈕完成 　　不過畢竟Firework所産生的HTML文件更多的時候是作爲網頁的某一部分出現的,因此DreamWeaver同時也提供了不錯的導入功能. 　　注意一下,在DreamWeaver4的Object面板中有一個代表Firework的圖示.滑鼠懸停,你會得到一個Insert Fireworks HTML的提示資訊,單擊這個按鈕就可以插入Firework導出的HTML文件了.具體的步驟如下: 　　1)保存當前文檔到DW所在的站點目錄中.注意一定要輸出爲.HTM的副檔名,否則DreamWeaver在插入時不能夠正確識別,同時在網頁編輯窗口中定位好游標位置. 　　2)單擊Insert Fireworks HTML按鈕或者使用功能表命令Insert-Interactive Image-Fireworks HTML.在彈出的的對話方塊裏單擊Browse,選擇需要插入的Firework HTML文件,如圖 　　 　　需要注意的是在對話方塊下部還有一個Delete fil