fireworks網(wǎng)頁設計的使用方法

　　Macromedia Fireworks是一個制作和處理網(wǎng)頁圖形圖像的工具軟件,由Macromedia公司開發(fā)，那么在fireworks中怎樣設計網(wǎng)頁及如何使用呢?下面學習啦小編給大家整理了關(guān)于fireworks 網(wǎng)頁設計的使用方法，希望大家喜歡。

　　fireworks 網(wǎng)頁設計的使用方法

　　我們將根據(jù)這一個典型網(wǎng)站其中一個頁面設計流程，使您逐步學習到以下內(nèi)容：

　　1、導入并編輯位圖圖像。

　　2、自動任務處理

　　3、創(chuàng)造矢量圖形

　　4、創(chuàng)建文字

　　5、創(chuàng)建按鈕

　　6、創(chuàng)建導航條

　　7、設定按鈕屬性

　　8、建立切片

　　9、創(chuàng)建拖拽翻轉(zhuǎn)效果

　　10、創(chuàng)建彈出菜單

　　11、創(chuàng)建變形動畫

　　12、優(yōu)化圖像

　　13、輸出HTML文件到Dreamweaver

　　14、在Dreamweaver中進行往返表格編輯

　　一、設計前準備

　　1、網(wǎng)站介紹：

　　在教程介紹之前首先讓我們來看一下我們將要完成的主要任務。這是一個服飾公司的企業(yè)網(wǎng)站設計，公司主要以男式服飾為主，同時也兼顧部分女士服飾。網(wǎng)站的主要任務是幫助瀏覽者了解公司的基本概況和產(chǎn)品信息，并作為公司的一個展示窗口，向參觀者展示企業(yè)的形象及產(chǎn)品系列。根據(jù)業(yè)主的要求，網(wǎng)站包含了企業(yè)概況、企業(yè)人才、產(chǎn)品展示、公司榮譽以及聯(lián)系方式。我們將以此得到網(wǎng)站的導航結(jié)構(gòu)。

　　2、設計指導思想：

　　本網(wǎng)站設計的指導思想是在網(wǎng)絡上營造一個優(yōu)雅、高貴、寧靜的氛圍，為了體現(xiàn)這一主題，設計者將紋理、景深、光影、基調(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)站的導航條，下面左邊以不同的男式服飾圖片及文字標題表示各頁主題。右邊為內(nèi)容區(qū)，以深色帶條紋的圖片作為背景。

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

　　一、 導入并編輯位圖圖像

　　Fireworks4帶有完善的位圖創(chuàng)建、修改和處理功能，我們可以導入外部位圖文件并對它進行編輯，可以修改和刪除位圖中的顏色，可以向?qū)κ噶繄D一樣增加效果。我們的工作將從層面板開始，新建一個文件后，默認的只有兩個圖層Web層和Layer1層，雙擊Layer1層，將層名改為“背景層”。如下圖所示：

　　1、我們將一張男性模特的照片導入此層中。

　　2、雙擊圖片可以進入位圖編輯模式，我們可以用矩形選擇工具選定不需要的部分并刪除它。

　　3、位圖大小調(diào)整好后可以使用實時特效進行色彩調(diào)節(jié)，打開Effect面板，選擇Adjust Color/Levels，在Levels分布圖中分別拖動三個滑尺，按照下圖所示進行色彩調(diào)節(jié)：

　　4、導入的位圖一般都有一些細小的雜點，我們可以使用Effect>Blur>Gaussian Blur對圖像進行一些模糊處理，使其增加一些柔和的感覺，如下圖所示：

　　二、 自動任務處理。

　　由于我們在后面將多次使用這個處理過程對位圖進行加工，因此可以利用Fireworks提供的自動處理功能加快我們后面的工作，這種自動任務處理可以有很多種途徑，我們介紹其中最常用的三種：

　　1 保存為一個Command。打開歷史面板History，選定最后兩步Effect紀錄，在彈出菜單中選擇Save as Command，將這兩個步驟保存為一個可執(zhí)行的Command，命名為BMPmodify。以后我們需要時只需執(zhí)行Commands菜單下的這個BMPmodify命令即可

　　2 保存為一個Effect。我們也可以將作用在圖片上的所有特效保存為一個內(nèi)置特效，打開Effect面板，在彈出菜單中執(zhí)行Save Effect As，將它保存為Mydesign特效

　　此時我們打開Effect面板就可以看到我們自定義的Mydesign特效已經(jīng)在其中了，我們可以像使用其它特效一樣使用它。如下圖：

　　3 保存為一個Style。樣式是Fireworks中包含對象的描邊、填充、特效、字體等屬性的一種組合，它可以快速設定對象具有統(tǒng)一的外觀，我們也可以將上面的設定作為一個樣式保存。選定剛才的位圖圖像，打開樣式面板Style，在彈出菜單中執(zhí)行New Style，我們只需保留對圖片施加的特效即可，按下圖進行設定：

　　三、 創(chuàng)造矢量對象

　　位圖是用像素來描述物體的，它適合于表現(xiàn)色彩變化豐富的照片，而矢量圖是使用路徑和填充來定義對象的外觀，它非常容易編輯，并且它的質(zhì)量不會因大小的改變而丟失或減弱。Fireworks同時提供了編輯這兩種格式圖像的方法，默認情況下Fireworks是以矢量的方式創(chuàng)建和編輯對象。Fireworks提供了常用的創(chuàng)建矢量對象的工具，我們下面利用這些工具創(chuàng)建基本的矢量圖形。

　　1、 選擇工具面板上的矩形工具，在文檔頂端繪制一776x30的矩形。

　　2、 設定填充為線性漸變填充，點擊填充面板的Edit按鈕編輯填充，如下圖所示：

　　3、 在人像的右半邊繪制一個130x400的矩形實色填充對象。

　　4、 接下來我們將在文檔頂端創(chuàng)建按鈕對象，首先在層面板中新建一個“導航層”，利用矩形工具創(chuàng)建“公司首頁”按鈕對象，大小為140x15，填充為紅色與黑色之間的線性漸變填充，打開Effect面板，設定Inner Bevel特效，如下圖所示：

　　5、 我們還可以在背景層繪制一些線段，以打破背景的單調(diào)感覺。如下圖所示：

　　四、 創(chuàng)建文字

　　Fireworks還提供了強大的文字處理功能，利用文字編輯窗口可以靈活的對文字進行設定，并且與其它對象一樣我們也可以對文字施加各種特效。

　　1、 選擇工具面板的文字工具，打開文字編輯窗口，輸入“卡爾松服飾有限公司”，如圖所示：

　　我們看到，在文字編輯窗口我們可以分別對不同的文字設定各自的屬性。

　　2、 在文檔左半部分輸入相應的英文文字內(nèi)容，并旋轉(zhuǎn)文字90度，如下圖所示：

　　3、 打開層面板，選定“Karsong”設定它的合成方式為“Luminosity”

　　4、 打開Effect面板，為“DRESS&ADORNMENT CO..LTD”文字增加Drop Shadow特效。