fireworks_網(wǎng)絡(luò)頁面設(shè)計(jì)綜合實(shí)際示例-資料下載頁
2025-07-27 19:03本頁面
【導(dǎo)讀】面的設(shè)計(jì)過程，為您詳細(xì)介紹Fireworks在網(wǎng)頁設(shè)計(jì)的不同階段是如何處理各種不同任務(wù)的。過解決您所遇到的每一個(gè)具體的任務(wù)，您將對Fireworks的主要功能有一個(gè)統(tǒng)一的全局性的了解，同時(shí)為您在設(shè)計(jì)中如何利用Fireworks提供一個(gè)清晰的思路。站設(shè)計(jì)，公司主要以男式服飾為主，同時(shí)也兼顧部分女士服飾。們將以此得到網(wǎng)站的導(dǎo)航結(jié)構(gòu)。本網(wǎng)站設(shè)計(jì)的指導(dǎo)思想是在網(wǎng)絡(luò)上營造一個(gè)優(yōu)雅、高貴、寧靜的氛圍，為了體現(xiàn)這一主題，頁面中以較大面積的男性模特圖片突出男式服飾這一主。公司的名稱則以一種柔軟光滑的粗倩體來表現(xiàn)，需要對我們的工作環(huán)境進(jìn)行簡單的設(shè)定，以符合我們的任務(wù)要求。Modify>CanvasColor設(shè)定背景色為黑色。開網(wǎng)格顯示和網(wǎng)格捕捉。打開歷史面板History，選定最后兩步Effect紀(jì)錄，在彈出菜。2保存為一個(gè)Effect。我們看到，在文字編輯窗口我們可以分別對不同的文字設(shè)定各自的屬性。
【正文】 片，打開優(yōu)化面板，設(shè)定輸出格式為 JPEG，質(zhì)量為 60。 我們可以切換到 2Up 預(yù)覽窗口觀察優(yōu)化前后的結(jié)果，如下圖所示： 對于上面創(chuàng)建的兩個(gè)動(dòng)畫，我們已經(jīng)設(shè)置了輸出類型為 Animated GIF。 我們還可以對文檔正中的切片設(shè)定為文字切片，及將來輸出時(shí)此部分輸出為文字內(nèi)容。 選中文檔中間部分的切片，打開 Object 面板，在對象類型里選擇 Text，在下部的窗口輸入最終的文字內(nèi)容。需要注意的是，您在這里不僅可以輸入普通的文字內(nèi)容，還可以輸入標(biāo)準(zhǔn)的 HTML 格式內(nèi)容，如我們輸入的 center和 font color=”white”。這樣最終的輸出結(jié)果將根據(jù)這里的定義自動(dòng)格式化文本。如下圖所示： 十四、 輸出 HTML 文件到 Dreamweaver 我們的設(shè)計(jì)文檔已經(jīng)完成，可以將其輸出為 HTML 文件，并轉(zhuǎn)到 Dreamweaver 中繼續(xù)進(jìn) 行編輯。 選擇文件菜單下的 Export Preview，打開輸出優(yōu)化面板，在優(yōu)化面板中，所有沒有使用切片的會(huì)自動(dòng)使用缺省的輸出設(shè)置。選擇輸出格式為 GIF 格式，色彩數(shù)為 128 色。 點(diǎn)擊 Export，保存類型選擇 “Html and Images”； HTML 選項(xiàng)里選擇 “Export HTML File”； Slices 選項(xiàng)里選擇 “Export Slices”。 在 Option 選項(xiàng)中可以進(jìn)行更詳細(xì)的設(shè)置，選擇 General標(biāo)簽，確定在 HTML style 選項(xiàng)中 Dreamweaver 被選擇。 切換到 Table 標(biāo)簽，在 Space from中選擇 “1Pixel Transparent SpacerNested Tables”。 在 Empty Cell 區(qū)域，在彈出菜單中選擇 “Spacer Image”。 切換到 Document Specific 面板，勾選下部的 “Multiple Nav Bar HTML Pages”，這樣建會(huì)為每個(gè)按鈕所對應(yīng)的欄目輸出各自的頁面。 點(diǎn)擊確定將文件輸出。查看輸出的文件如下圖所示： 十五、 在 Dreamweaver 中進(jìn)行往返表格編輯 啟動(dòng) Dreamweaver，在您的輸出文件夾中打開剛才輸出的 在中間的表格單元中選擇文本，并改變其中的內(nèi)容，在這段文本的最上端加入一句話 “企業(yè)理念 ”，然后改變文字的顏色為淺灰色。此時(shí)文本的樣式如下圖所示： 選擇整個(gè)表格使用文檔窗口底部的快速標(biāo)簽選擇器選擇 table標(biāo)簽。 打開屬性面板，注意此時(shí)的屬性面板左上方有 Fireworks Table 標(biāo)簽，點(diǎn)擊右下方的Edit 編輯按鈕。 此時(shí)會(huì)啟動(dòng) Fireworks4，并打開 文檔。注意此時(shí)文檔窗口頂端有 “Edit From Dreamweaver”標(biāo)志，如下圖所示： 選中文檔中間的文本切片，打開 Object 面板，我們可以看到剛才在 Dreamweaver 中隊(duì)文字所作的修改已經(jīng)反映在了這里，相應(yīng)的 HTML 代碼也已經(jīng)添加。如下圖所示： 我們現(xiàn)在在 Fireworks 中作一點(diǎn)小修改，在 “卡爾松服飾有限公司 ”下方增加文字“”。 點(diǎn)擊文檔窗口頂部的 Done按鈕，這將返回 DW，你將看到圖片被更新了，但文檔切片部分的文字格式化信息 依然存在。 寫在后面的話 到這里，我們的這個(gè)網(wǎng)頁設(shè)計(jì)實(shí)例教程介紹完了。需要指出的是，我們最終輸出的是整個(gè)頁面，在 Dreamweaver 中可編輯的部分只有中間一小部分，但 Fireworks 能做到的并不僅僅是這樣，作為一個(gè)實(shí)例我們只是介紹了利用 Fireworks 進(jìn)行頁面設(shè)計(jì)時(shí)，可以做到的方方面面。但是具體到實(shí)際應(yīng)用，我們應(yīng)該根據(jù)具體的內(nèi)容設(shè)計(jì)您的版面，而且盡可能的多利用 Fireworks 的局部輸出功能，將一個(gè)頁面分成多個(gè)部分輸出，這樣可以使頁面具有更大的靈活性和可操作性。例如本例我們可以將整個(gè)頁面分為上中下 三部分單獨(dú)輸出，上部的導(dǎo)航條與動(dòng)畫作為一部分輸出，中間部分還可以分為左右兩部分，下部的版權(quán)信息可以單獨(dú)作為一部分，或者可以在Dreamweaver 中輸入單獨(dú)的文字。最后將這些單獨(dú)輸出的部分在 Dreamweaver 中利用表格組裝起來，這樣可以最大限度的保持頁面的適應(yīng)性和靈活性。此外還可以將一些可以作為背景圖片使用的內(nèi)容以圖片輸出，如頁面主要部分的直線紋理可以單獨(dú)輸出為一個(gè)背景圖片，并在Dreamweaver 中定義為單元格的背景。關(guān)于本教程，朋友們有什么疑問可以到 討論。
研究報(bào)告相關(guān)推薦
鄂ICP備17016276號-1