網(wǎng)絡(luò)頁面設(shè)計綜合實際示例

1、.Fireworks 網(wǎng)絡(luò)頁面設(shè)計綜合實際示例在本文中我們將幫助您親身體驗Fireworks在網(wǎng)頁創(chuàng)作中的強大功能，我們通過一個網(wǎng)站頁面的設(shè)計過程，為您詳細介紹Fireworks在網(wǎng)頁設(shè)計的不同階段是如何處理各種不同任務(wù)的。通過解決您所遇到的每一個具體的任務(wù)，您將對Fireworks的主要功能有一個統(tǒng)一的全局性的了解，同時為您在設(shè)計中如何利用Fireworks提供一個清晰的思路。下圖是這個教程完成后的外觀：我們將根據(jù)這一個典型網(wǎng)站其中一個頁面設(shè)計流程，使您逐步學(xué)習(xí)到以下內(nèi)容： 1、導(dǎo)入并編輯位圖圖像。 2、自動任務(wù)處理 3、創(chuàng)造矢量圖形 4、創(chuàng)建文字 5、創(chuàng)建按鈕 6、創(chuàng)建導(dǎo)航條 7

2、、設(shè)定按鈕屬性 8、建立切片 9、創(chuàng)建拖拽翻轉(zhuǎn)效果 10、創(chuàng)建彈出菜單 11、創(chuàng)建變形動畫 12、優(yōu)化圖像 13、輸出HTML文件到Dreamweaver 14、在Dreamweaver中進行往返表格編輯 一、設(shè)計前準(zhǔn)備 1、網(wǎng)站介紹： 在教程介紹之前首先讓我們來看一下我們將要完成的主要任務(wù)。這是一個服飾公司的企業(yè)網(wǎng)站設(shè)計，公司主要以男式服飾為主，同時也兼顧部分女士服飾。網(wǎng)站的主要任務(wù)是幫助瀏覽者了解公司的基本概況和產(chǎn)品信息，并作為公司的一個展示窗口，向參觀者展示企業(yè)的形象及產(chǎn)品系列。根據(jù)業(yè)主的要求，網(wǎng)站包含了企業(yè)概況、企業(yè)人才、產(chǎn)品展示、公司榮譽以及聯(lián)系方式。我們將以此得到網(wǎng)站的導(dǎo)航結(jié)構(gòu)。

3、2、設(shè)計指導(dǎo)思想： 本網(wǎng)站設(shè)計的指導(dǎo)思想是在網(wǎng)絡(luò)上營造一個優(yōu)雅、高貴、寧靜的氛圍，為了體現(xiàn)這一主題，設(shè)計者將紋理、景深、光影、基調(diào)與有形的模特照片和靜態(tài)的文字結(jié)合起來，更多的使用直線、堅硬的邊緣、暗的色調(diào)來組成網(wǎng)站界面。頁面中以較大面積的男性模特圖片突出男式服飾這一主題，以穿插的直線段體現(xiàn)一種服裝紋理的感覺。公司的名稱則以一種柔軟光滑的粗倩體來表現(xiàn)，以打破整個頁面的堅硬感，同時以白色突出企業(yè)名稱，達到非常亮眼的感覺。 3、頁面結(jié)構(gòu)： 整個網(wǎng)站采用統(tǒng)一的結(jié)構(gòu)，分為上下兩個部分，上面為網(wǎng)站的導(dǎo)航條，下面左邊以不同的男式服飾圖片及文字標(biāo)題表示各頁主題。右邊為內(nèi)容區(qū)，以深色帶條紋的圖片作為背景。 下面

4、我們將根據(jù)上述設(shè)計分析，分不同的部分為您介紹制作過程。在新建一個文件后，我們需要對我們的工作環(huán)境進行簡單的設(shè)定，以符合我們的任務(wù)要求。首先需要設(shè)定工作區(qū)的面積及背景顏色，打開Modify>Canvas Size針對常見的800x600分辨率，我們設(shè)定工作區(qū)的長為776這可以根據(jù)需要設(shè)定，但最好不要超過778，高為515根據(jù)實際內(nèi)容確定，再執(zhí)行Modify>Canvas Color設(shè)定背景色為黑色。再打開View>Grid>Edit Grid對話框，設(shè)定水平方向網(wǎng)格間距為10像素，垂直方向為5像素，并將網(wǎng)格顏色設(shè)為暗灰色以不影響觀察頁面，打開網(wǎng)格顯示和網(wǎng)格捕捉。如下圖所示

5、：一、 導(dǎo)入并編輯位圖圖像。 Fireworks4帶有完善的位圖創(chuàng)建、修改和處理功能，我們可以導(dǎo)入外部位圖文件并對它進行編輯，可以修改和刪除位圖中的顏色，可以向?qū)κ噶繄D一樣增加效果。我們的工作將從層面板開始，新建一個文件后，默認的只有兩個圖層Web層和Layer1層，雙擊Layer1層，將層名改為“背景層”。如下圖所示：1、我們將一張男性模特的照片導(dǎo)入此層中。2、雙擊圖片可以進入位圖編輯模式，我們可以用矩形選擇工具選定不需要的部分并刪除它。3、位圖大小調(diào)整好后可以使用實時特效進行色彩調(diào)節(jié)，打開Effect面板，選擇Adjust Color/Levels，在Levels分布圖中分別拖動三個滑尺，

6、按照下圖所示進行色彩調(diào)節(jié)：4、導(dǎo)入的位圖一般都有一些細小的雜點，我們可以使用Effect>Blur>Gaussian Blur對圖像進行一些模糊處理，使其增加一些柔和的感覺，如下圖所示：二、 自動任務(wù)處理。 由于我們在后面將多次使用這個處理過程對位圖進行加工，因此可以利用Fireworks提供的自動處理功能加快我們后面的工作，這種自動任務(wù)處理可以有很多種途徑，我們介紹其中最常用的三種： 1 保存為一個Command。打開歷史面板History，選定最后兩步Effect紀(jì)錄，在彈出菜單中選擇Save as Command，將這兩個步驟保存為一個可執(zhí)行的Command，命名為BMPmo

7、dify。以后我們需要時只需執(zhí)行Commands菜單下的這個BMPmodify命令即可。2 保存為一個Effect。我們也可以將作用在圖片上的所有特效保存為一個內(nèi)置特效，打開Effect面板，在彈出菜單中執(zhí)行Save Effect As，將它保存為Mydesign特效。此時我們打開Effect面板就可以看到我們自定義的Mydesign特效已經(jīng)在其中了，我們可以像使用其它特效一樣使用它。如下圖：3 保存為一個Style。樣式是Fireworks中包含對象的描邊、填充、特效、字體等屬性的一種組合，它可以快速設(shè)定對象具有統(tǒng)一的外觀，我們也可以將上面的設(shè)定作為一個樣式保存。選定剛才的位圖圖像，打開樣式

8、面板Style，在彈出菜單中執(zhí)行New Style，我們只需保留對圖片施加的特效即可，按下圖進行設(shè)定：三、 創(chuàng)造矢量對象 位圖是用像素來描述物體的，它適合于表現(xiàn)色彩變化豐富的照片，而矢量圖是使用路徑和填充來定義對象的外觀，它非常容易編輯，并且它的質(zhì)量不會因大小的改變而丟失或減弱。Fireworks同時提供了編輯這兩種格式圖像的方法，默認情況下Fireworks是以矢量的方式創(chuàng)建和編輯對象。Fireworks提供了常用的創(chuàng)建矢量對象的工具，我們下面利用這些工具創(chuàng)建基本的矢量圖形。1、 選擇工具面板上的矩形工具 ，在文檔頂端繪制一776x30的矩形。2、 設(shè)定填充為線性漸變填充，點擊填充面板的Ed

9、it按鈕編輯填充，如下圖所示：3、 在人像的右半邊繪制一個130x400的矩形實色填充對象。 4、 接下來我們將在文檔頂端創(chuàng)建按鈕對象，首先在層面板中新建一個“導(dǎo)航層”，利用矩形工具創(chuàng)建“公司首頁”按鈕對象，大小為140x15，填充為紅色與黑色之間的線性漸變填充，打開Effect面板，設(shè)定Inner Bevel特效，如下圖所示：5、 我們還可以在背景層繪制一些線段，以打破背景的單調(diào)感覺。如下圖所示：四、 創(chuàng)建文字 Fireworks還提供了強大的文字處理功能，利用文字編輯窗口可以靈活的對文字進行設(shè)定，并且與其它對象一樣我們也可以對文字施加各種特效。 1、 選擇工具面板的文字工具，打開文字編輯窗

10、口，輸入“卡爾松服飾有限公司”，如圖所示：我們看到，在文字編輯窗口我們可以分別對不同的文字設(shè)定各自的屬性。 2、 在文檔左半部分輸入相應(yīng)的英文文字內(nèi)容，并旋轉(zhuǎn)文字90度，如下圖所示：3、 打開層面板，選定“Karsong”設(shè)定它的合成方式為“Luminosity”4、 打開Effect面板，為“DRESS&ADORNMENT CO.LTD”文字增加Drop Shadow特效。五、 創(chuàng)建按鈕 利用Fireworks提供的按鈕編輯器，我們可以快速創(chuàng)建具有相似外觀的一組按鈕，并可以設(shè)定按鈕的不同狀態(tài)外觀。 1、 使用矩形工具繪制一個90x15的矩形按鈕對象，設(shè)定它的填充為線性漸變填充，在矩形

11、上方輸入“企業(yè)概況”。 2、 上一步我們建好了按鈕的基本外觀，我們可以把它轉(zhuǎn)換為一個按鈕符號重復(fù)利用。選定上面創(chuàng)建的矩形和文字，按F8將它轉(zhuǎn)換為符號，符號類型為Button。 3、 此時的按鈕符號只具有基本的外形，雙擊剛創(chuàng)建好的這個符號，打開按鈕編輯窗口。 4、 常見按鈕的Up狀態(tài)，在按鈕編輯器的Up窗口我們可以向編輯普通對象一樣，為按鈕增加一些特效。打開Effect面板，為此按鈕矩形增加Inner Bevel特效，類型為Frame，如圖所示：5、 切換到Over狀態(tài)，點擊下方的“Copy Up Graphic”將Up狀態(tài)的對象復(fù)制到Over狀態(tài)窗口。改變矩形的漸變填充方向，改變按鈕的特效類型

12、為Smooth，如下圖：6、 切換到Down狀態(tài)，點擊下方的“Copy Over Graphic”將Over狀態(tài)的對象復(fù)制到Down狀態(tài)窗口。改變矩形的填充類型為實色填充Solid，改變按鈕的特效類型為Frame1，最后將文字的色彩改變?yōu)榧t色，如下圖：7、 需要注意的是，在按鈕的Down狀態(tài)下，需要取消對“Show Down State Upon Load”的勾選，同時要保證“Include Nav Bar Down state”被勾選，這可以使將來輸出時會根據(jù)不同的按鈕按下情況輸出相應(yīng)的HTML文件。 8、 關(guān)閉按鈕編輯窗口，按鈕的一個實例已經(jīng)放置在了文檔當(dāng)中。 六、 創(chuàng)建導(dǎo)航條 利用上面創(chuàng)

13、建的按鈕我們可以快速創(chuàng)建風(fēng)格一致的網(wǎng)頁導(dǎo)航條，并且可以分別設(shè)定每個按鈕的外觀和文字，但同時保持它們的相似性。1、 我們先對上面創(chuàng)建好的按鈕實例增加一種特效，打開Effect面板，選擇Adjust Color>Color Fill，設(shè)定此特效的混合模式為Hue色調(diào)，如下圖所示： 這樣當(dāng)我們想改變每個按鈕實例的色彩時，只需修改此特效中的混合色彩即可，而不需對按鈕符號作修改。 2、 創(chuàng)建多個按鈕實例。選定上面的按鈕實例，按住Alt鍵的同時，拖動并復(fù)制這個按鈕實例，重復(fù)執(zhí)行此步驟，創(chuàng)建五個按鈕實例。 3、 選中這五個按鈕實例，打開Modify面板，選擇水平居中對齊，如下圖所示：4、 現(xiàn)在導(dǎo)航條的

14、效果如下圖：5、 我們需要對導(dǎo)航條中的每個按鈕設(shè)定不同的色彩，打開Effect面板，分別改變每個按鈕所加特效中的混合色彩設(shè)定，將其設(shè)為不同的色值，分別改為#CC9900，#663399，#33FF00，#FF00FF。此時的導(dǎo)航條效果如下圖所示：七、 設(shè)定按鈕屬性 上面我們做好的導(dǎo)航條外觀雖然不同，但它們卻有著相同的文字內(nèi)容，我們需要將它們修改為各自的內(nèi)容，并設(shè)定每個按鈕對應(yīng)的鏈接地址。 1、 打開Object面板，選擇第二個按鈕實例，將Object面板上的Button Text改為“企業(yè)人才”。 2、 按下回車鍵后，會彈出下面的提示框：我們選擇Current使文字的改變只對當(dāng)前按鈕有效。 3

15、、 將其余的按鈕文字分別修改為“產(chǎn)品展示”、“企業(yè)榮譽”、“聯(lián)系方式”。切換導(dǎo)文檔的預(yù)覽窗口Preview，可以看一下最終的效果。4、 打開URL面板，分別選擇每一個按鈕，在URL面板中設(shè)定它們對應(yīng)的鏈接地址。八、 建立切片 我們的基本導(dǎo)航及頁面結(jié)構(gòu)已經(jīng)建立好了，現(xiàn)在到了增加切片的時候了。Fireworks中的切片是輸出圖形及產(chǎn)生交互的主要參考物件，導(dǎo)出的文檔將根據(jù)切片來將圖形切割成不同的部分，并在瀏覽器中通過表格組裝到一起。同時，所有的交互行為也是通過切片之間的聯(lián)系來產(chǎn)生的，如翻轉(zhuǎn)圖、彈出菜單等等。 1、 我們前面建立的按鈕本身已經(jīng)帶有了自己的切片，因此我們需要對其他對象建立各自的切片。 2

16、、 創(chuàng)建切片通常使用工具面板中的Slice工具直接繪制 ，但如果想創(chuàng)建精確大小的切片，我們可以選擇對象并執(zhí)行右鍵菜單中的Insert Slice自動插入切片。 3、 我們使用工具面板中的Slice工具在頁面中間繪制一個信息顯示切片，我們將在下一步把導(dǎo)航條的每個按鈕相關(guān)信息顯示在這里。4、 我們增加的切片默認情況下是綠色的半透明對象，它們都放置在Web Layer層上. 九、 創(chuàng)建拖拽翻轉(zhuǎn)效果 1、 單擊“企業(yè)概況”按鈕處的切片，此切片中心將出現(xiàn)一個圓形標(biāo)志，用鼠標(biāo)將其拖動到上一步創(chuàng)建的切片左上角，這將設(shè)置一個翻轉(zhuǎn)效果，在彈出的對話框中設(shè)定鼠標(biāo)滑過時交換為第二幀的內(nèi)容，如下圖所示：2、 重復(fù)上述

17、步驟，分別為“企業(yè)人才”、“產(chǎn)品展示”兩個按鈕增加翻轉(zhuǎn)效果，并分別對應(yīng)第三幀和第四幀。 3、 我們在后面各幀相同的位置出分別放置對應(yīng)每個按鈕的說明文字。 4、 最后的效果如下圖所示：十、 創(chuàng)建彈出菜單 通常我們站點里的導(dǎo)航信息必須非常的簡練和實用，只有那些最重要的信息才出現(xiàn)在導(dǎo)航條中，而更多的導(dǎo)航和內(nèi)容信息通常都隱藏起來。對于復(fù)雜的展點和多重信息組織，彈出菜單是分層導(dǎo)航的最有效工具，彈出菜單可以在很小的空間中設(shè)置大量的目標(biāo)選項。Fireworks4新增的創(chuàng)建彈出菜單功能，可以非常容易的實現(xiàn)這種導(dǎo)航結(jié)構(gòu)，我們只需將分層信息添加到彈出菜單編輯器中，程序會自動生成相應(yīng)的交互式代碼。1、 選擇導(dǎo)航欄上

18、的“產(chǎn)品展示”按鈕，確保Web Layer當(dāng)前顯示及切片可見。 2、 點擊此按鈕上切片中心的圓形標(biāo)志，從彈出菜單中選擇“Add Pop-up Menu”增加彈出菜單，如下圖所示：3、 在彈出的編輯器中輸入如下圖所示內(nèi)容，在Text和Link輸入框中輸入內(nèi)容后，點及上部的“+”即可添加新的菜單內(nèi)容：4、 繼續(xù)輸入二級菜單內(nèi)容，選中一個條目后，點擊上部的 可以使當(dāng)前條目縮進，成為下一級菜單；點擊 可以使當(dāng)前的條目恢復(fù)為上一級菜單。最后的結(jié)果入圖所示：5、 點擊Next進入下一個設(shè)置窗口，在這里我們可以設(shè)置文字的大小，菜單的樣式等屬性，您既可以選擇最終的菜單外觀是標(biāo)準(zhǔn)的HTML格式，或者是Image

19、圖片格式。我們選擇圖片格式，并設(shè)定文字大小為10。6、 當(dāng)您選擇了Image格式時，需要在下部的兩個窗口設(shè)置Up和Over狀態(tài)的菜單樣式，您的懸想也許和我們這里的不同，這是因為我們使用了自定義的樣式文件。我們可以根據(jù)不同設(shè)計項目的需要將自定義的樣式作為彈出菜單的選項。7、 我們首先繪制一個最終的彈出菜單的矩形，并設(shè)定好需要的填充、描邊和特效。如下圖： 8、 打開Style面板，選中剛才創(chuàng)建的矩形，在Style面板的彈出菜單中選擇New Style創(chuàng)建一個新的樣式，并命名為MyStyle，如下圖：此時您的Style面板中已經(jīng)添加了一個新的樣式。9、 選擇Style面板彈出菜單中的Export S

20、tyles將剛才的這個自定義樣式輸出到Fireworks目錄里/Configuration/Nav Menu/，并將它命名為Styles.stl，但要注意必須先將原有的Styles.stl文件備份。10、 我們再次編輯剛才創(chuàng)建的彈出菜單，就可以選擇我們自定義的樣式了。11、 按F12預(yù)覽生成的彈出菜單，如下圖：12、 此時表示二級菜單的小箭頭默認為黑色，所以看不見，我們也可以在最后修改此箭頭樣式和顏色，具體方法參見本書前面章節(jié)。十一、 創(chuàng)建變形動畫 給一個網(wǎng)站添加動畫對于訪問者的時間和金錢都是一個不小的花銷，因此在添加您的動畫前，一定要先考慮好如下問題：動畫能否增進您的信息傳達力度，訪問者下載

21、和播放動畫是否迅速、方便，是否有足夠的組成動畫的內(nèi)容和資源。盡管網(wǎng)絡(luò)動畫及其傳遞方式正在不斷的發(fā)生改變，但傳統(tǒng)的GIF動畫依然有著不可忽視的優(yōu)勢，我們在這里介紹一下創(chuàng)建GIF動畫的兩種途徑。1、 在層面板新建一個Logo層，將其置于Web Layer層下方。2、 我們需要將背景層修改為一個共享圖層，打開層面板，切換到背景層，在彈出菜單中選擇Share This Layer，將背景層共享，此層上的內(nèi)容將在所有幀都可見，此層的后面將出現(xiàn)一個共享圖標(biāo)，如下圖：3、 切換到Logo層，在文檔的右上角創(chuàng)建文字。4、 按F8將其轉(zhuǎn)換為圖形符號Graphic Symbol。5、 打開Effect面板，對此符

22、號的實例添加紅色Glow效果，如下圖所示：6、 選中此實例，在右鍵彈出菜單中執(zhí)行Edit>Clone，復(fù)制出一個新的實例，并且?guī)в邢嗤腉low特效。 7、 在Effect面板修改第二個實例的特效，將其改為黃色，并改變Glow的范圍和大小，如下圖：8、 選擇這兩個實例，在右鍵彈出菜單中執(zhí)行Symbols>Tween Instances創(chuàng)建變形動畫，設(shè)定插入幀數(shù)為6幀，并勾選Distribute to Frames分布到幀，如下圖所示：9、 打開Web Layer圖層的顯示，在此動畫位置創(chuàng)建一個切片。 10、 打開Optimize優(yōu)化面板，設(shè)定此切片的類型為Animated GIF，

23、并設(shè)定顏色數(shù)為32色，如下圖所示：11、 此動畫完成，您可以打開幀面板設(shè)定動畫幀之間顯示的時間。 十二、 創(chuàng)建實時動畫Live Aniamation Fireworks4新增了一種實時動畫創(chuàng)作方式，這種方式可以快速的創(chuàng)建一個動畫符號，生成的動畫具有即時編輯性能，及您可以在任意時間修改形成動畫的各種元素屬性。1、 在文檔左上角新增一個切片，點擊工具面板最下方的 按鈕關(guān)閉切片顯示點擊旁邊的 按鈕可以打開切片顯示。 2、 在層面板中切換到Logo層，在剛才的左上角位置處輸入文字“Karsong”。 3、 選擇此文字對象，按F8快捷鍵將其轉(zhuǎn)換為一個動畫符號，將其命名為“Animate Logo”，符號

24、類型為“Animation”，如下圖所示：4、 在彈出的設(shè)置窗口中設(shè)置插入幀數(shù)為8，并進行如下設(shè)置：5、 拖動生成的動畫符號中心的小紅點，將其向右拖動到適當(dāng)位置，注意不要將其拖出剛才創(chuàng)建的切片范圍之外。6、 打開優(yōu)化面板Optimize設(shè)定此切片的類型為“Animated GIF”，顏色數(shù)為32，如下圖所示：十三、 優(yōu)化圖像 我們的設(shè)計稿基本完成，下面我們需要針對不同對象設(shè)定各自的優(yōu)化參數(shù)和輸出格式。 1、 根據(jù)不同的輸出質(zhì)量要求及各部分功能，分別設(shè)定各自的切片，注意切片應(yīng)盡可能劃分整齊、簡單。 2、 選中左邊人像部分的切片，打開優(yōu)化面板，設(shè)定輸出格式為JPEG，質(zhì)量為60。 3、 我們可以切

25、換到2-Up預(yù)覽窗口觀察優(yōu)化前后的結(jié)果，如下圖所示：4、 對于上面創(chuàng)建的兩個動畫，我們已經(jīng)設(shè)置了輸出類型為Animated GIF。 5、 我們還可以對文檔正中的切片設(shè)定為文字切片，及將來輸出時此部分輸出為文字內(nèi)容。 6、 選中文檔中間部分的切片，打開Object面板，在對象類型里選擇Text，在下部的窗口輸入最終的文字內(nèi)容。需要注意的是，您在這里不僅可以輸入普通的文字內(nèi)容，還可以輸入標(biāo)準(zhǔn)的HTML格式內(nèi)容，如我們輸入的<center>和<font color=”white”>。這樣最終的輸出結(jié)果將根據(jù)這里的定義自動格式化文本。如下圖所示：十四、 輸出HTML文件到Dr

26、eamweaver 我們的設(shè)計文檔已經(jīng)完成，可以將其輸出為HTML文件，并轉(zhuǎn)到Dreamweaver中繼續(xù)進行編輯。1、 選擇文件菜單下的Export Preview，打開輸出優(yōu)化面板，在優(yōu)化面板中，所有沒有使用切片的會自動使用缺省的輸出設(shè)置。選擇輸出格式為GIF格式，色彩數(shù)為128色。 2、 點擊Export，保存類型選擇“Html and Images”；HTML選項里選擇“Export HTML File”；Slices選項里選擇“Export Slices”。 3、 在Option選項中可以進行更詳細的設(shè)置，選擇General標(biāo)簽，確定在HTML style選項中Dreamweaver

27、被選擇。 4、 切換到Table標(biāo)簽，在"Space from"中選擇“1-Pixel Transparent SpacerNested Tables”。 5、 在Empty Cell區(qū)域，在彈出菜單中選擇“Spacer Image”。 6、 切換到Document Specific面板，勾選下部的“Multiple Nav Bar HTML Pages”，這樣建會為每個按鈕所對應(yīng)的欄目輸出各自的頁面。 7、 點擊確定將文件輸出。查看輸出的文件如下圖所示：十五、 在Dreamweaver中進行往返表格編輯1、 啟動Dreamweaver，在您的輸出文件夾中打開剛才輸出的Example.htm在中間的表格單元中選擇文本，并改變其中的內(nèi)容，在這段文本的最上端加入一句話“