切片和擴展插件

1、切片和擴展插件第1頁，共19頁，2022年，5月20日，11點10分，星期一10.1.dreamweaver與fireworks的結合Fireworks與Dreamweaver具有強大的兼容性， 它們獨特的集成功能使得在Fireworks與Dreamweaver之中交替處理文件變得十分容易。Dreamweaver和Fireworks識別和共享許多相同的文件編輯結果，其中包括對鏈接、圖像映射、表格切片等的更改。這兩個應用程序共同為在HTML頁面中編輯、優(yōu)化和放置網(wǎng)頁圖形文件提供了一個優(yōu)化的工作流程。第2頁，共19頁，2022年，5月20日，11點10分，星期一10.1.1用fireworks制作

2、網(wǎng)頁切片1切片的定義和作用切片定義：就是將一幅大圖像分割為一些小的圖像切片，然后在網(wǎng)頁中通過沒有間距和寬度的表格重新將這些小的圖像沒有縫隙的拼接起來，成為一幅完整的圖像。切片在網(wǎng)頁制作中的作用 減少下載時間。圖片較大時，瀏覽器下載整個圖片的話需要花很長時間，使用切片使得整個圖片分為多個不同的小圖片分開下載，這樣就大大縮短了下載的時間。第3頁，共19頁，2022年，5月20日，11點10分，星期一制作動態(tài)效果。利用切片可以制作出各種交互效果。 優(yōu)化圖像 。完整的圖像只能使用一種文件格式，應用一種優(yōu)化方式，而對于作為切片的各幅小圖片我們就可以分別對其優(yōu)化，并根據(jù)各幅切片的情況還可以存為不同的文件格

3、式。這樣既能夠保證圖片質(zhì)量，有能夠使得圖片變小。創(chuàng)建鏈接?？梢詫Σ煌那衅谱鞑煌逆溄樱恍枰诖蟮膱D片上創(chuàng)建熱區(qū)了。 第4頁，共19頁，2022年，5月20日，11點10分，星期一2創(chuàng)建切片 Fireworks工具箱上的切片工具有兩類：“矩形切片”工具（Slice tool）和“多邊形切片”工具（Polygon Slice tool）。第5頁，共19頁，2022年，5月20日，11點10分，星期一創(chuàng)建矩形切片首先打開圖像，選擇工具箱上的的切片工具，在圖像的適當位置上按下鼠標左鍵并拖動繪制一個矩形區(qū)域，當矩形大小適當時釋放鼠標，這樣就生成了一個矩形切片。該切片區(qū)域被半透明的綠色所覆蓋，稱為

4、切片對象，另外Fireworks根據(jù)切片對象的位置以紅色分割線對圖像進行了分割，稱為切片向導。第6頁，共19頁，2022年，5月20日，11點10分，星期一創(chuàng)建多邊形切片打開一幅圖像，可以利用多邊形切片工具，在多邊形的每個頂點單擊，制作多邊形切片。實際上多邊形切片的形狀主要是用于設置相應的行為觸發(fā)區(qū)域的。可以給切片對象設置鏈接。如下： 第7頁，共19頁，2022年，5月20日，11點10分，星期一3編輯切片 如果要選取切片，可以利用指針工具、部分選定工具來選中它，也可以使用層面板來進行；選中切片之后，若要移動切片可以利用鼠標、方向鍵或者屬性面板的位置值。切片屬性面板簡介（參看課本p270圖10

5、-52）第8頁，共19頁，2022年，5月20日，11點10分，星期一4導出切片 選擇“文件”-“導出”，會彈出導出對話框。選擇需要保存的文件夾，在文件名中輸入文件名稱，再設置一下其他選項選擇確定即可。第9頁，共19頁，2022年，5月20日，11點10分，星期一10.1.2Dreamweaver中插入Fireworks HTML 將Fireworks HTML插入到Dreamweaver中有許多不同的方法。 1.將圖片從Fireworks復制到剪貼板上，然后直接粘貼到Dreamweaver文檔的代碼視圖中的相應位置處。我們可以用兩種方法在Fireworks中復制HTML代碼到剪貼板。一種是可

6、以使用“編輯”-復制HTML代碼；另一種是在“導入”對話框中HTML選項中選擇“復制到剪貼板”選項，。 然后可以在Dreamweaver中將該HTML粘貼到文檔中。第10頁，共19頁，2022年，5月20日，11點10分，星期一2.直接將Fireworks HTML插入到Dw中步驟是：首先將Fireworks HTML文件導出到已定義的Dreamweaver站點中；將光標放在文檔中要插入的位置，選擇“插入” - “圖像對象”-“Fireworks HTML；設置后就將HTML代碼連同它的相關圖像、切片和JavaScript 一起插入到Dw文檔中了。如果插入后不再需要Fireworks HTML

7、文件，請選擇“插入后刪除文件”選項。此選項不會影響與HTML文件關聯(lián)的PNG源文件。第11頁，共19頁，2022年，5月20日，11點10分，星期一10.1.3在dw中編輯導入的圖像切片dw屬性面板可以幫助識別fireworks生成的圖像、表格切片和表格。1編輯fireworks表格 在dw中完成切片的插入后，選擇table標簽，然后在dw屬性面板選擇“編輯”按鈕，完成設置后進入fireworks編輯界面即可進行表格的編輯。2編輯fireworks圖像在dw中完成切片的插入后，選擇要做修改的圖像，單擊dw屬性面板的fireworks編輯按鈕即可進入fireworks編輯界面即可進行表格的編輯。

8、第12頁，共19頁，2022年，5月20日，11點10分，星期一10.2使用dreamweaver擴展1.安裝擴展插件（有2種方法）開始所有程序MacromediaMacromedia Extension Manager命令,啟動擴展管理器，在擴展管理器窗口中進行安裝直接找到擴展插件的安裝程序，雙擊即可快速安裝。第13頁，共19頁，2022年，5月20日，11點10分，星期一第14頁，共19頁，2022年，5月20日，11點10分，星期一第15頁，共19頁，2022年，5月20日，11點10分，星期一2.使用擴展插件使用擴展插件主要有2個步驟：先安裝插件，安裝后擴展器窗口中將列出所有已經(jīng)安裝的

9、插件，請在擴展管理器中看清楚擴展的類型（命令、對象、行為），以便使用時快速找到位置。然后啟動dreamweaver，在相應的位置找到調(diào)用擴展的命令即可。第16頁，共19頁，2022年，5月20日，11點10分，星期一在“類型”欄中顯示擴展的類型含義：類型含義對象在dw界面的“插入”工具欄調(diào)用該擴展插件命令在dw的“命令”菜單中調(diào)用擴展行為在dw的“行為”面板中調(diào)用擴展第17頁，共19頁，2022年，5月20日，11點10分，星期一3.常用擴展插件的安裝和使用Page transitions.mxp有超級鏈接時，頁過渡（進入/退出）效果命令要選定整個頁面（即body標簽），再在命令菜單中找到該命

10、令即可實現(xiàn)（效果見實例站點中guodong1.html、 guodong2.html 、 guodong3.html ）Typewriter.mxp模擬打字行為先把要添加該效果的對象放入層中，然后在行為面板中找到y(tǒng)aromat|typewriter即可實現(xiàn)，文字的打印效果就顯示在層中。 (guodong1.html中打印文字）Sound.mxp插入背景音樂對象要選定整個頁面（即body標簽），再在“常用”插入欄中找到sound按鈕即可實現(xiàn)Marquee.mxp滾動文字插件對象要選定整個頁面（即body標簽），再在“常用”插入欄中找到marquee按鈕即可實現(xiàn)Insert Greeting.mxp插入問候語對象把光標定位在頁面的合適位置，然后選擇“插入”欄中的“CN Insert Greeting”按鈕即可實現(xiàn)Calander.mxp對象把光標定位在頁面的合適位置，然后選擇“插入”欄中的“calander”按鈕即可實現(xiàn)Persistent layers滾動鏈接的層行為先把要添加該效果的對象放入層中，然后在行為面