網頁設計與網站建設,主講人：杜永紅,第3章 利用fireworks CS5設計網頁界面,本章詳細介紹了如何利用Fireworks軟件進行圖像處理和網頁界面的設計。 本章學習目的 通過學習，讀者能夠： 1.掌握Fireworks軟件基本操作 2.掌握使用fireworks軟件設計logo、導航欄、banner、網站平面效果圖 3.掌握將圖像切割、導出為網頁的方法,案例導入： 本章將帶你親身體驗Fireworks在網頁創作中的強大功能，通過一個網站界面的設計過程，詳細介紹Fireworks在網頁設計的不同階段是如何處理各種不同任務的。,天星電子元件公司網站,3.1 圖像類型,（1）矢量圖 矢量圖形是用線條和填充色等數學信息來描述圖形的，一般矢量格式的文件通常比較小，對矢量圖進行操作，改變圖形尺寸、形狀等，不會改變圖形的顯示品質。制作矢量格式圖形的軟件有Freehand、CorelDraw、AutoCAD等。 （2）位圖 位圖圖像是用像素點描述圖像的。在位圖中，圖像的細節由每一個像素點的位置和色彩來決定。位圖圖像的品質與圖像生成時采用的分辨率有關，即在一定面積的圖像上包含有固定數量的像素。當圖像放大顯示時，圖像變成馬賽克狀，因此放大圖像的尺寸，會降低圖像的顯示品質，如圖所示。制作位圖圖像的軟件常有Photoshop、Fireworks、ImageReady等。,3.1 圖像基礎知識,3.1.2 圖像分辨率,分辨率確定了一幅圖像的品質和能夠打印或顯示的細節含量。分辨率的單位為像素/英寸（英文縮寫為dpi），表示圖像上每一線性英寸的像素數。線性是指在直線上計算像素數，如果圖像的分辨率是72dpi，即每英寸72個像素，則每平方英寸上有5184個像素。假設圖像中的像素數是固定的，增加圖像的尺寸將降低其分辨率，反之亦然。 分辨率的大小直接影響圖像的品質。分辨率越高，圖像越清晰，文件也就越大，計算機運行就越慢。 所以在制作圖像時，不同品質的圖像設置適當的分辨率即可。例如打印輸出的圖像分辨率就需要高一些，一般設置為300dpi，如果只是網頁圖像72dpi就足夠了。,3.1.3 圖像文件格式,在計算機繪圖中，有較多的圖形和圖像處理軟件，而不同的軟件所保存的圖像格式則是不相同的。 例如：Photoshop軟件所支持位圖文件格式有：PSD、TIF、BMP、JPG、GIF和PNG等20余種格式的文件。PSD是Photoshop軟件的源文件格式，可保留圖層等圖像文件的全部信息。,3.2 fireworks CS5簡介,Fireworks是一款專為網絡圖形設計的圖形編輯軟件，這就大大簡化了網絡圖形設計的工作難度。使用Fireworks即可以設計靜態圖像，也可以輕松地制作出十分動感的GIF動畫，還可以輕易地完成大圖切割、動態按鈕、動態翻轉圖等。借助于Fireworks CS5，您可以在直觀、可定制的環境中創建和優化用于網頁的圖像并進行精確控制。Fireworks的優化工具可幫助您在最佳圖像品質和最小壓縮大小之間達到平衡。它與 Dreamweaver 和Flash 共同構成的集成工作流程可以讓您創建并優化圖像。利用可視化工具，無需學習代碼即可創建具有專業品質的網頁圖形和動畫，如變換圖像和彈出菜單等。,Fireworks可創建和編輯矢量圖像與位圖圖像，并可導入和編輯Photoshop 和 Illustrator 文件。fireworks源文件格式為png，可以保存圖層、圖像特效、圖像切片等相應的信息。 在圖像插入到網頁之前，一般需要將圖像進行處理。在Fireworks中處理網頁圖像一般遵循以下步驟：創建圖形和圖像創建Web對象優化圖像導出圖像。,3.2.1 Fireworks中圖像處理的流程,Fireworks CS5是一個強大的網頁圖形設計工具，使用它可以創建和編輯位圖、矢量圖形，還可非常輕松地做出各種網頁設計中常見的效果，例如動畫、翻轉圖像、導航條、下拉菜單等。設計完成以后，如果要在網頁設計中使用，可將它輸出為HTML文件，還能輸出在Photoshop，Illustrator和Flash等軟件中編輯的格式。 Fireworks CS5的工作界面由5個部分組成：“菜單”欄、“文檔”窗口、“工具箱”面板、“屬性”面板、集成工作面板，如圖所示。,3.2.2 Fireworks CS5工作界面,3.3 logo的設計,本實例主要涉及的知識點：文本輸入、濾鏡效果的應用、漸變效果的設置以及矢量工具的使用等。操作步驟如下： （1）新建文檔：400*140像素 （2）輸入文本：“天星” （3）“濾鏡效果”使用：陰影和光暈中的光暈 （4）“漸變”工具的使用：淺綠色到鵝黃色再到白色 （5）克隆圖像：克隆文本后，修改文字為“電子元件”，修改字體大小。 （6）“矢量”工具的使用：繪制五角星，并復制多個。,在市場競爭日逾激烈的今天，嚴格管理和正確使用統一標準的公司的徽標，將為我們提供一個更有效、更清晰和更親切的市場形象。LOGO是人們在長期的生活和實踐中形成的一種視覺化的信息表達方式，具有一定含義并能夠使人理解的視覺圖形，具有簡潔、明確、一目了然的視覺傳遞效果。本節講述天星電子元件公司網站的LOGO設計。,3.4 設計網站按鈕和導航欄,導航欄是指位于頁眉區域的橫幅圖片上方或下方的水平或垂直的導航按鈕，它起著鏈接網站各個頁面的作用。網站使用導航欄是為了讓訪問者方便地找到所需要的資源。,本實例主要涉及的知識點：漸變效果的設置、文本輸入、按鈕的制作、對齊工具的使用、導航欄設計等。 操作步驟如下： （1）新建文檔：1000*50像素 （2）背景顏色設置：繪制和畫布大小一致的矩形，填充為輪廓漸變：由#293036到#181D21 （3）輸入文本：首頁 （4）按鈕的制作：選中文本，單擊F8快捷鍵，將文本轉換為按鈕元件，命名為首頁，雙擊“首頁”按鈕元件，進入到按鈕的編輯中，編輯彈起、滑過、按下三個狀態。 （5）多次復制“首頁”按鈕，并分別修改“首頁”按鈕文本為“公司簡介”、“新聞動態”等。 （6）單擊“直線”工具，設置顏色為灰色#A1ACB2，繪制多段垂直線段作為按鈕的分割線。利用對齊面板將分割線對齊。,3.5 制作精美Banner,Banner可以是網站頁面的橫幅廣告，也可以是游行活動時用的旗幟，還可以是報紙雜志上的大標題。Banner主要體現中心意旨，形象鮮明表達最主要的情感思想或宣傳中心。放置在廣告商的頁面上，是互聯網廣告中最基本的廣告形式。,本實例主要涉及的知識點：漸變效果的設置、文本輸入、素材導入、圖層混合模式的使用、圖層不透明度的設置、以及圖層位置的設置等。,操作步驟如下： （1）新建文檔：1000*222像素 （2）背景顏色設置：繪制一個與畫布大小一致的矩形，填充為線性漸變，由#003C58到#0176AB再到#00C4EC。 （3）輸入文本：十年品質 創造一流服務理念。 （4）單擊“文件”菜單“導入”命令，將素材文件夾中的素材導入到畫布中，設置圖層的混合模式，圖層的不透明度，并調整圖像的位置和圖層的上下順序。,3.6 網站首頁的界面設計,一般而言，首頁設計幾乎等同于整個網站設計，因此網站首頁設計非常重要。首頁設計要考慮的問題涉及配色方案的確定、版面布局、網站內容的填充等。 要制作首頁，首先要對主頁有一個規劃，即首頁的版面布局，這樣才能合理安排網頁的內容。,在3.3至3.5節中已經把公司的logo、導航欄、banner設計完成。本節延續前面的內容。 新建一個文檔，畫布大小為1024*1070，然后根據頁面的版面布局，導入公司的logo、導航欄、banner等。 繼續網頁界面中主體內容的設計。用線段將頁面分成三欄，左欄：產品分類樹和聯系方式，右欄是廣告區域，中間欄內容較多，為公司新聞、產品展示以及公司簡介等，分別填充相應的圖像和文本。 作為設計者來說，一般采用Fireworks或Photoshop之類的設計軟件來設計網頁界面的效果圖，圖像切片后，導出到網頁編輯軟件，如Dreamweaver中進行編輯，這種方法可以使頁面控制更加得心應手。,3.7 網頁圖像的切片和導出,使用Fireworks進行網頁界面設計的過程中，經常會使用“切片”工具將一幅大圖像分割為一些小的圖像切片，然后在網頁中通過沒有間距和填充的表格重新將這些小的圖像無縫地拼接起來，成為一幅完整的圖像。這樣做可以降低圖像的大小，減少網頁的下載時間，并且能創造交互的效果，如翻轉圖像等，還能將圖像的一些區域用html來代替。Fireworks在網頁切片制作方面有很強的優勢。 切片區域的創建有兩種不同的方法，第一種是單擊工具欄的“切片”工具 ，進行指定區域大小的切割；第二種是直接選中某個對象，在右鍵彈出菜單上選擇“插入矩形切片”或“插入多邊形切片”，為添加切片后的網頁文件效果。 在完成切片分割后，單擊“文件”“導出”，選擇導出類型為“HTML和圖像”，切片類型為“導出切片”，選擇導出路徑后，便可以完成切片區域的導出，得到眾多小的網頁分割圖和網頁，用于網站建設。,本章小結,本章主要介紹了Fireworks使用方法和技巧，創建圖形圖像。 1. 利用Fireworks 設計LOGO 2. 利用Fireworks設計導航條 3. 利用Fireworks設計banner 4. 利用Fireworks設計整幅Web頁面,本章練習題,（1）簡述位圖和矢量圖的區別。 （2）對待文本可以像對待矢量對象一樣處理嗎？ （3）將大圖分隔成小圖有什么優點？如何使用切片工具？ （4）按鈕有幾種狀態，哪種狀態可不用編輯？,上機實驗,1背景知識 根據前面所學的色彩應用的知識，再結合本章所學的Fireworks軟件操作的知識，制作靜態圖像及動態圖像的效果圖，能夠獨立設計出網頁平面圖。 2實驗準備工作 將實驗的樣圖及相應的圖像及文本素材發送到學生主機，供學生參考使用。 3實驗要求 （1）制作LOGO。要求： 1）使用鋼筆工具，繪制一個盾形路徑的一半，并拷貝翻轉合成一個完整的盾形，盾形是對稱的； 2）合成盾形后填充色彩，并添加文本，生成企業LOGO。,（2）制作Banner。要求： 1）導入