利用fireworkscs5設(shè)計網(wǎng)頁界面.ppt

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