fireworks_網(wǎng)絡頁面設計綜合實際示例-資料下載頁
2025-07-27 19:03本頁面
【導讀】面的設計過程，為您詳細介紹Fireworks在網(wǎng)頁設計的不同階段是如何處理各種不同任務的。過解決您所遇到的每一個具體的任務，您將對Fireworks的主要功能有一個統(tǒng)一的全局性的了解，同時為您在設計中如何利用Fireworks提供一個清晰的思路。站設計，公司主要以男式服飾為主，同時也兼顧部分女士服飾。們將以此得到網(wǎng)站的導航結(jié)構(gòu)。本網(wǎng)站設計的指導思想是在網(wǎng)絡上營造一個優(yōu)雅、高貴、寧靜的氛圍，為了體現(xiàn)這一主題，頁面中以較大面積的男性模特圖片突出男式服飾這一主。公司的名稱則以一種柔軟光滑的粗倩體來表現(xiàn)，需要對我們的工作環(huán)境進行簡單的設定，以符合我們的任務要求。Modify>CanvasColor設定背景色為黑色。開網(wǎng)格顯示和網(wǎng)格捕捉。打開歷史面板History，選定最后兩步Effect紀錄，在彈出菜。2保存為一個Effect。我們看到，在文字編輯窗口我們可以分別對不同的文字設定各自的屬性。
【正文】 片，打開優(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)于本教程，朋友們有什么疑問可以到 討論。
研究報告相關(guān)推薦
鄂ICP備17016276號-1