fireworks網(wǎng)頁設計綜合實例-資料下載頁
2025-06-29 18:04本頁面
【正文】 不同的輸出質(zhì)量要求及各部分功能，分別設定各自的切片，注意切片應盡可能劃分整齊、簡單。 選中左邊人像部分的切片，打開優(yōu)化面板，設定輸出格式為JPEG，質(zhì)量為60。 我們可以切換到2Up預覽窗口觀察優(yōu)化前后的結(jié)果，如下圖所示： 對于上面創(chuàng)建的兩個動畫，我們已經(jīng)設置了輸出類型為Animated GIF。 我們還可以對文檔正中的切片設定為文字切片，及將來輸出時此部分輸出為文字內(nèi)容。 選中文檔中間部分的切片，打開Object面板，在對象類型里選擇Text，在下部的窗口輸入最終的文字內(nèi)容。需要注意的是，您在這里不僅可以輸入普通的文字內(nèi)容，還可以輸入標準的HTML格式內(nèi)容，如我們輸入的center和font color=white。這樣最終的輸出結(jié)果將根據(jù)這里的定義自動格式化文本。如下圖所示： 十四、 輸出HTML文件到Dreamweaver 我們的設計文檔已經(jīng)完成，可以將其輸出為HTML文件，并轉(zhuǎn)到Dreamweaver中繼續(xù)進行編輯。 選擇文件菜單下的Export Preview，打開輸出優(yōu)化面板，在優(yōu)化面板中，所有沒有使用切片的會自動使用缺省的輸出設置。選擇輸出格式為GIF格式，色彩數(shù)為128色。 點擊Export，保存類型選擇Html and Images；HTML選項里選擇Export HTML File；Slices選項里選擇Export Slices。 在Option選項中可以進行更詳細的設置，選擇General標簽，確定在HTML style選項中Dreamweaver被選擇。 切換到Table標簽，在Space from中選擇1Pixel Transparent SpacerNested Tables。 在Empty Cell區(qū)域，在彈出菜單中選擇Spacer Image。 切換到Document Specific面板，勾選下部的Multiple Nav Bar HTML Pages，這樣建會為每個按鈕所對應的欄目輸出各自的頁面。 點擊確定將文件輸出。查看輸出的文件如下圖所示： 十五、 在Dreamweaver中進行往返表格編輯 啟動Dreamweaver，并改變其中的內(nèi)容，在這段文本的最上端加入一句話企業(yè)理念，然后改變文字的顏色為淺灰色。此時文本的樣式如下圖所示： 選擇整個表格使用文檔窗口底部的快速標簽選擇器選擇table標簽。 打開屬性面板，注意此時的屬性面板左上方有Fireworks Table標簽，點擊右下方的Edit編輯按鈕?！ ?此時會啟動Fireworks4。注意此時文檔窗口頂端有Edit From Dreamweaver標志，如下圖所示： 選中文檔中間的文本切片，打開Object面板，我們可以看到剛才在Dreamweaver中隊文字所作的修改已經(jīng)反映在了這里，相應的HTML代碼也已經(jīng)添加。如下圖所示： 我們現(xiàn)在在Fireworks中作一點小修改，在卡爾松服飾有限公司下方增加文字。 點擊文檔窗口頂部的Done按鈕，這將返回DW，你將看到圖片被更新了，但文檔切片部分的文字格式化信息依然存在。 寫在后面的話 到這里，我們的這個網(wǎng)頁設計實例教程介紹完了。需要指出的是，我們最終輸出的是整個頁面，在Dreamweaver中可編輯的部分只有中間一小部分，但Fireworks能做到的并不僅僅是這樣，作為一個實例我們只是介紹了利用Fireworks進行頁面設計時，可以做到的方方面面。但是具體到實際應用，我們應該根據(jù)具體的內(nèi)容設計您的版面，而且盡可能的多利用Fireworks的局部輸出功能，將一個頁面分成多個部分輸出，這樣可以使頁面具有更大的靈活性和可操作性。例如本例我們可以將整個頁面分為上中下三部分單獨輸出，上部的導航條與動畫作為一部分輸出，中間部分還可以分為左右兩部分，下部的版權(quán)信息可以單獨作為一部分，或者可以在Dreamweaver中輸入單獨的文字。最后將這些單獨輸出的部分在Dreamweaver中利用表格組裝起來，這樣可以最大限度的保持頁面的適應性和靈活性。此外還可以將一些可以作為背景圖片使用的內(nèi)容以圖片輸出，如頁面主要部分的直線紋理可以單獨輸出為一個背景圖片，并在Dreamweaver中定義為單元格的背景。
法律信息相關(guān)推薦
鄂ICP備17016276號-1