使用Pages（頁面）面板制作網頁

 　　下面通過一個具體的實例來說明Pages(頁面)面板的實際作用，具體操作步驟如下。

　　1、新建一個Fireworks文件。

　　2、在彈出的【新建文檔】對話框中設置畫布的寬度為932像素、高度為538像素，背景顏色為白色。如圖1.3所示。

　　圖1.3 新建文檔對話框

　　3、把實現准備好的背景素材復制到當前的文檔中。並且把背景圖像所在圖層的名稱更改為“背景”。效果如圖1.4所示。

　　圖1.4 復制圖像素材到當前文檔

　　4、在背景圖層中制作頁面左側的按鈕和圖像廣告，頁面右上角的導航背景，效果如圖1.5所示。

　　圖1.5 制作頁面廣告和導航

　　5、【Windows(窗口)】【layers(圖層)】(快捷鍵：【F2】)命令，打開Fireworks 9的圖層面板，創建一個新的圖層“內容”。

　　6、在圖層“內容”中制作導航中的內容和頁面右下角的正文內容，效果如圖效果如圖1.6所示。

　　圖1.6 制作網頁中的內容

　　7、選擇【Windows(窗口)】【Pages(頁面)】(快捷鍵：【F5】)命令，即可打開Fireworks 9的Pages(頁面)面板。

　　8、單擊Pages(頁面)面板右下角的新建頁面按鈕，創建三個頁面，頁面總數是四個，和欄目按鈕的數量一致。效果如圖1.7所示。

　　圖1.7 創建三個新的頁面

　　9、在Pages(頁面)面板中對所有的頁面進行重命名，這裡的名稱將是最終輸出後網頁的文件名，效果如圖1.8所示。

　　圖1.8 對頁面進行重命名

　　10、這時新建出來的頁面都是空白的，效果如圖1.9所示。

　　圖1.9 新建出來的空白頁面

　　【說明】在制作多個頁面的時候，往往會使用相同的頁面布局，或者相同的logo、背景、或按鈕。這個時候就可以把前面創建出來的第一個頁面中的部分內容“共享”到其它頁面中，這也就是Pages(頁面)功能最強大之處。由於在前面的制作過程中，把整個網站中所有頁面的相同內容都制作到了“背景”圖層，所以這個時候就可以把“背景”圖層中的內容“共享”到所有的Pages(頁面)中去。而“內容”圖層中的文本和圖片是需要根據不同欄目來進行更改的，所以在這裡就不需要“共享”到Pages(頁面)了。

　　11、選擇頁面“index”，然後切換到圖層面板中。選擇圖層“背景”，打開圖層面板的選項菜單，選擇【share layer to pages(共享圖層到頁面)】命令，效果如圖1.10所示。

　　圖1.10 在圖層面板的選項菜單中選擇

　　【share layer to pages(共享圖層到頁面)】命令

　　12、選擇【share layer to pages(共享圖層到頁面)】命令後，會彈出【share layer to pages(共享圖層到頁面)】對話框。效果如圖1.11所示。

　　圖1.11 【share layer to pages(共享圖層到頁面)】對話框

　　13、在左側【exclude layer from pages(不共享圖層到頁面)】對話框中的所有頁面選中，單擊【add(添加)】按鈕，即可添加到【include layer to pages(共享圖層到頁面)】對話框中。效果如圖1.12所示。

　　圖1.12 把頁面添加到【include layer to pages(共享圖層到頁面)】對話框中

　　14、這時圖層“背景”中的內容，在每一個頁面中都可以看到了。所有共享到頁面的圖層都以黃色的背景來顯示。效果如圖1.13所示。

　　圖1.13 把圖層“背景”共享到所有的頁面

　　15、這時，可以分別在不同的Pages(頁面)中制作完全不同的內容，但是所有的Pages(頁面)都保持相同的背景效果。選擇Pages(頁面)面板中的“webdesign”頁面。然後切換到圖層面板中，這時顯示的是“webdesign”頁面所對應的圖層。

　　16、在圖層“背景”上新建一個圖層“內容”。並且在這個圖層中制作頁面“webdesign”中的內容，效果如圖1.14所示。

　　圖1.14 制作頁面“webdesign”中的內容

　　17、使用同樣的方法，把所有頁面中的內容都制作出來，需要注意的是，所有的內容都需要制作到新的圖層中，並且這個圖層是不能“共享”的。

　　18、接下來給頁面添加切片，選擇頁面“index”，使用Fireworks 9的切片工具給頁面中的四個按鈕添加切片，效果如圖1.15所示。

　　圖1.15 給按鈕添加切片

　　19、但是這個時候所添加的切片只能在頁面“index”中顯示，其它頁面是看不到這些切片的。也就是說在Fireworks 9中，可以給每個頁面添加不同的切片效果。如圖1.16所示。

　　圖1.16 給按鈕添加切片

　　20、但是在這個例子中，每個頁面按鈕的切片應該是完全一樣的，這個時候同樣可以把切片所在的網頁層“共享”到所有的頁面中。

　　21、在Pages(頁面)面板中選擇“index”頁面，打開圖層面板，選擇圖層面板中的網頁層，在網頁層中包含有四個按鈕的切片，效果如圖1.17所示。

　　圖1.17 網頁層中的切片

　　22、這時如果直接選擇網頁層的選項菜單，是沒有【share layer to pages(共享圖層到頁面)】命令的，網頁層本身並不支持“共享”到頁的功能，效果如圖1.18所示。

　　圖1.18 網頁層的選項菜單

　　23、這時可以單擊圖層面板右下角的第二個按鈕，在網頁層中創建一個子圖層，並且把四個按鈕的切片拖拽到子圖層中，這也是Fireworks 9的一個新功能，效果如圖1.19所示。

　　圖1.19 創建網頁層的子圖層

　　24、對於網頁層的子圖層，是可以使用“共享”到頁的命令的，這樣就可以把當前的切片共享到所有的頁面中了，效果如圖1.20所示。

　　圖1.20 共享網頁層的子圖層

　　25、對於多個頁面之間的鏈接，也可以之間在Fireworks 9中完成。選擇添加好的切片，在【屬性】面板中的【link(鏈接)】文本框中即可設置多個頁面之間的鏈接，效果如圖1.21所示。

　　圖1.21 設置多個頁面之間的鏈接

　　26、和Fireworks 8一樣，可以使用優化面板對所有的切片進行優化，然後就可以選擇【file(文件)】【export(導出)】(快捷鍵：【Ctrl+Shift+X】)命令進行網頁的輸出了。

　　27、選擇導出命令後，會彈出Fireworks 9的導出對話框，效果如圖1.22所示。

　　圖1.22 導出對話框

　　其中：

　　文件名：這裡不需要進行設置，因為導出後的網頁名稱和pages(頁面)面板中的名稱一致。

　　Export：和已往的版本一樣，要選擇導出網頁和圖像“HTML and Images”。

　　Current page only：只導出當前頁，這裡建議取消這個復選框，因為我們要導出所有的頁面，而並不只是當前的一個頁面。

　　Put images in subfolder：把所生成的頁面放置到文件夾中，這個選項是一定要選中的。

　　28、單擊【保持】按鈕，Fireworks 9會自動生成所有的頁面，你只需要找到保存文件的文件夾，慢慢欣賞你的作品吧!效果如圖1.23所示。

　　圖1.23 導出後生成的網站

　　操作技巧：

　　1、在制作基本頁面的時候一定要分圖層，把不會改變的內容和需要改變的內容分到不同的圖層中來制作。那麼在“共享”到頁面的時候只需要共享部分圖層就可以了。

　　2、網頁層是不能直接共享的，需要在網頁中創建子圖層才能共享到頁面。

　　寫在後面的話

　　關於新的pages(頁面)的功能，還會繼續的研究下去，在本教程中還沒有涉及到“主頁面”的使用，但是可以告訴大家的是，一旦把某個頁面設置為“主頁面”，那麼所有的頁面都會套用“主頁面”中的內容，有點類似於Dreamweaver裡的模板。

　　Fireworks針對於網頁的圖像處理可以說是到了非常專業的地步，在Adobe現有的軟件體系中，還沒有那個軟件能夠和它相比，但是Fireworks能否在新的東家續寫它的神化?我相信這是每一個Fireworkser所期望的，我們拭目以待。