第一步:選擇File > Open,導入準備要切割的圖片,如圖1。在主菜單中選中View > Guides,View > Slice Guides,View > Guide Option > Snap to Guides,如圖2。
圖 1 導入的圖片
圖 2 選中切割時使用導軌
第二步:想把這副圖片切割成三部分:咖啡杯、糕點和上面的空白區。選擇工具箱中右下角的Slice Tool > Rectagle(矩形切割工具),按住鼠標左鍵在圖片上拖動,畫出三個矩形(矩形之間不要重疊),它們就會被一層綠色蒙板所覆蓋,并顯示出紅色導軌線(瀏覽器中不會顯示蒙板和導軌線),這幅圖片就切割完備,如圖3,可以輸出存盤以便將來使用到你的HTML中。輸出時除了可以在Export Preview中調整一些屬性外,按下Export還會有一個輸出項目設置欄,如圖4,其中Base Name是存盤時的主文件名,使用GIF格式,Slicing選 Use Slice Objects,Style選擇你將把它用于何種網頁編輯工具,或存為Dreamweaver 3 的模板文件(選擇Dreamweavwer 3 Library.lbi),也可存為標準HTML格式文件(選擇Generic),Location欄中選擇存盤路徑。存盤后有一個HTM文件和三個GIF文件,而HTM文件主要是一段自動生成的Javascript代碼。
圖 3 切割后的圖片
圖 4 輸出設置欄
第三步:如果切割圖片后,想要把它用于熱點響應,就不忙著進行上面第二步的輸出工作,而接著圖片切割以后按下面的步驟繼續。選擇Window > Object,點擊一下上面空白處的切片,在出現的屬性面板中,清空 Auto-Name Slices前面的選擇框,在下面輸入一個該切片的名字,例如show,見圖5。重復進行以上步驟,把咖啡杯圖像的切片命名為hotspot1,把糕點圖像的切片命名為hotspot2,都不要取中文名。暫時停下目前的工作,做兩個帶有文字的圖像文件,輸出為text1.gif和text2.gif,見圖6,存入一個目錄中(將來完成的本例所有文件均存到同一目錄)。繼續前面的工作,點擊圖片中的咖啡杯切片,選擇Window > Behaviors,在Behaviors面板中點擊 + 符號,在彈出的菜單中選擇Swap Image,如圖7。
圖 5 為切片命名
圖 6 另做兩個GIF文字圖片
圖 7 動作響應面板
第四步:在Swap Image的彈出菜單中,第一欄選擇show,見圖8。在下一欄的Image File中,選擇剛才所存盤的text1.gif文字圖像的路徑,見圖9。下面的兩欄均勾上。點擊糕點切片,也在Behaviors面板中點擊 + 符號,再選擇Swap Image,也選中彈出菜單的show,下一欄的Image File中,要選text2.gif文字圖像的路徑,后面的兩欄也要勾上。
圖 8 交換圖像選擇欄
圖 9 選擇文字圖像路徑
第五步:點擊“OK”后,在Behaviors面板中就會出現鼠標的事件響應onMouseOver一行字,見圖10。下面該存盤了,輸出設置如第二步所述,參見圖4。完成后的切圖在瀏覽器中如圖11,當鼠標指向咖啡杯時,上方顯示前述第一個文字圖像,指向糕點時,上方顯示第二個文字圖像,鼠標移開時,不顯示文字圖像。以后在網頁編輯軟件中,可以為熱點切片分別加上超鏈接。切圖的事件響應常用來為網頁內容作導航。
圖 10 完成鼠標指向的事件響應
另外,第二步開始時,如果不選擇切圖工具,改為選擇工具箱左下角的Hotspot Tool(熱點工具)來分割圖片,后面采用相同的方法,也可以得到相同的熱點事件響應效果,但原圖不被分割保存。