fireworks網(wǎng)頁設(shè)計綜合實例-展示頁
2025-07-08 18:04本頁面
【正文】 Blur對圖像進(jìn)行一些模糊處理，使其增加一些柔和的感覺，如下圖所示： 二、 自動任務(wù)處理。如下圖所示： 我們將一張男性模特的照片導(dǎo)入此層中。 Fireworks4帶有完善的位圖創(chuàng)建、修改和處理功能，我們可以導(dǎo)入外部位圖文件并對它進(jìn)行編輯，可以修改和刪除位圖中的顏色，可以向?qū)κ噶繄D一樣增加效果。再打開ViewGridEdit Grid對話框，設(shè)定水平方向網(wǎng)格間距為10像素，垂直方向為5像素，并將網(wǎng)格顏色設(shè)為暗灰色以不影響觀察頁面，打開網(wǎng)格顯示和網(wǎng)格捕捉。在新建一個文件后，我們需要對我們的工作環(huán)境進(jìn)行簡單的設(shè)定，以符合我們的任務(wù)要求。右邊為內(nèi)容區(qū)，以深色帶條紋的圖片作為背景。公司的名稱則以一種柔軟光滑的粗倩體來表現(xiàn)，以打破整個頁面的堅硬感，同時以白色突出企業(yè)名稱，達(dá)到非常亮眼的感覺。 設(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)站界面。根據(jù)業(yè)主的要求，網(wǎng)站包含了企業(yè)概況、企業(yè)人才、產(chǎn)品展示、公司榮譽以及聯(lián)系方式。這是一個服飾公司的企業(yè)網(wǎng)站設(shè)計，公司主要以男式服飾為主，同時也兼顧部分女士服飾。下圖是這個教程完成后的外觀： 我們將根據(jù)這一個典型網(wǎng)站其中一個頁面設(shè)計流程，使您逐步學(xué)習(xí)到以下內(nèi)容： 導(dǎo)入并編輯位圖圖像。Fireworks 網(wǎng)頁設(shè)計綜合實例在本文中我們將幫助您親身體驗Fireworks在網(wǎng)頁創(chuàng)作中的強大功能，我們通過一個網(wǎng)站頁面的設(shè)計過程，為您詳細(xì)介紹Fireworks在網(wǎng)頁設(shè)計的不同階段是如何處理各種不同任務(wù)的。通過解決您所遇到的每一個具體的任務(wù)，您將對Fireworks的主要功能有一個統(tǒng)一的全局性的了解，同時為您在設(shè)計中如何利用Fireworks提供一個清晰的思路。 自動任務(wù)處理 創(chuàng)造矢量圖形 創(chuàng)建文字 創(chuàng)建按鈕 創(chuàng)建導(dǎo)航條 設(shè)定按鈕屬性 建立切片 創(chuàng)建拖拽翻轉(zhuǎn)效果 創(chuàng)建彈出菜單 1創(chuàng)建變形動畫 1優(yōu)化圖像 1輸出HTML文件到Dreamweaver 1在Dreamweaver中進(jìn)行往返表格編輯 一、設(shè)計前準(zhǔn)備 網(wǎng)站介紹： 在教程介紹之前首先讓我們來看一下我們將要完成的主要任務(wù)。網(wǎng)站的主要任務(wù)是幫助瀏覽者了解公司的基本概況和產(chǎn)品信息，并作為公司的一個展示窗口，向參觀者展示企業(yè)的形象及產(chǎn)品系列。我們將以此得到網(wǎng)站的導(dǎo)航結(jié)構(gòu)。頁面中以較大面積的男性模特圖片突出男式服飾這一主題，以穿插的直線段體現(xiàn)一種服裝紋理的感覺。 頁面結(jié)構(gòu)： 整個網(wǎng)站采用統(tǒng)一的結(jié)構(gòu)，分為上下兩個部分，上面為網(wǎng)站的導(dǎo)航條，下面左邊以不同的男式服飾圖片及文字標(biāo)題表示各頁主題。 下面我們將根據(jù)上述設(shè)計分析，分不同的部分為您介紹制作過程。首先需要設(shè)定工作區(qū)的面積及背景顏色，打開ModifyCanvas Size針對常見的800x600分辨率，我們設(shè)定工作區(qū)的長為776這可以根據(jù)需要設(shè)定，但最好不要超過778，高為515根據(jù)實際內(nèi)容確定，再執(zhí)行ModifyCanvas Color設(shè)定背景色為黑色。如下圖所示： 一、 導(dǎo)入并編輯位圖圖像。我們的工作將從層面板開始，新建一個文件后，默認(rèn)的只有兩個圖層Web層和Layer1層，雙擊Layer1層，將層名改為“背景層”?！ ‰p擊圖片可以進(jìn)入位圖編輯模式，我們可以用矩形選擇工具選定不需要的部分并刪除它?！ ∮捎谖覀冊诤竺鎸⒍啻问褂眠@個處理過程對位圖進(jìn)行加工，因此可以利用Fireworks提供的自動處理功能加快我們后面的工作，這種自動任務(wù)處理可以有很多種途徑，我們介紹其中最常用的三種： 1 保存為一個Command。以后我們需要時只需執(zhí)行Commands菜單下的這個BMPmodify命令即可。我們也可以將作用在圖片上的所有特效保存為一個內(nèi)置特效，打開Effect面板，在彈出菜單中執(zhí)行Save Effect As，將它保存為Mydesign特效。如下圖： 3 保存為一個Style。選定剛才的位圖圖像，打開樣式面板Style，在彈出菜單中執(zhí)行New Style，我們只需保留對圖片施加的特效即可，按下圖進(jìn)行設(shè)定： 三、 創(chuàng)造矢量對象
法律信息相關(guān)推薦
鄂ICP備17016276號-1