fireworks_網(wǎng)絡(luò)頁面設(shè)計綜合實際示例-全文預(yù)覽
【正文】 色彩時，只需修改此特效中的混合色彩即可，而不需對按鈕符號作修改。改變矩形的漸變填充方向，改變按鈕的特效類型為 Smooth，如下圖： 切換到 Down狀態(tài)，點擊下方的 “Copy Over Graphic”將 Over狀態(tài)的對象復(fù)制到 Down狀態(tài)窗口。選定上面創(chuàng)建的矩形和文字，按 F8 將它轉(zhuǎn)換為符號，符號類型為 Button。ADORNMENT CO..LTD”文字增加 Drop Shadow 特效。 接下來我們將在文檔頂端創(chuàng)建按鈕對象，首先在層面板中新建一個 “導(dǎo)航層 ”，利 用矩形工具創(chuàng)建 “公司首頁 ”按鈕對象，大小為 140x15，填充為紅色與黑色之間的線性漸變填充，打開Effect 面板，設(shè)定 Inner Bevel 特效，如下圖所示： 我們還可以在背景層繪制一些線段，以打破背景的單調(diào)感覺。Fireworks 同時提供了編輯這兩種格式圖像的方法，默認情況下 Fireworks 是以矢量的方式創(chuàng)建和編輯對象。 此時我們打開 Effect 面板就可以看到我們自定義的 Mydesign特效已經(jīng)在其中了，我們可以像使用其它特效一樣使用它。打開歷史面板 History，選定最后兩步 Effect 紀錄，在彈出菜單中選擇 Save as Command，將這兩個步驟保存為一個可執(zhí)行的 Command，命名為BMPmodify。如下圖所示： 我們將一張男性模特的照片導(dǎo)入此層中。再打開 ViewGridEdit Grid 對話框，設(shè)定水平方向網(wǎng)格間距為 10 像素，垂直方向為 5 像素，并將網(wǎng) 格顏色設(shè)為暗灰色以不影響觀察頁面，打開網(wǎng)格顯示和網(wǎng)格捕捉。右邊為內(nèi)容區(qū)，以深色帶條紋的圖片作為背景。 設(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)站界面。這是一個服飾公司的企業(yè)網(wǎng)站設(shè)計，公司主要以男式服飾為主，同時也兼顧部分女士服飾。 Fireworks 網(wǎng)絡(luò)頁面設(shè)計綜合實際示例 在本文中我們將幫助您親身體驗 Fireworks 在網(wǎng)頁創(chuàng)作中的強大功能，我們通過一個網(wǎng)站頁面的設(shè)計過程，為您詳細介紹 Fireworks 在網(wǎng)頁設(shè)計的不同階段是如何處理各種不同任務(wù)的。 自動任務(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 中 進行往返表格編輯 一、設(shè)計前準備 網(wǎng)站介紹： 在教程介紹之前首先讓我們來看一下我們將要完成的主要任務(wù)。我們將以此得到網(wǎng)站的導(dǎo)航結(jié)構(gòu)。 頁面結(jié)構(gòu)： 整個網(wǎng)站采用統(tǒng)一的結(jié)構(gòu)，分為上下兩個部分，上面為網(wǎng)站的導(dǎo)航條，下面左邊以不同的男式服飾圖片及文字標題表示各頁主題。首先需要設(shè)定工作區(qū)的面積及背景顏色，打開 ModifyCanvas Size 針對常見的 800x600 分辨率，我們設(shè)定工作區(qū)的長為776 這可以根據(jù)需要設(shè)定，但最好不要超過 778，高為 515 根據(jù)實際內(nèi)容確定，再執(zhí)行ModifyCanvas Color 設(shè)定背景色為黑色。我們的工作將從層面板開始，新建一個文件后， 默認的只有兩個圖層 Web 層和 Layer1層，雙擊 Layer1 層，將層名改為 “背景層 ”。 由于我們在后面將多次使用這個處理過程對位圖進行加工，因此可以利用 Fireworks 提供的自動處理功能加快我們后面的工作，這種自動任務(wù)處理可以有很多種途徑，我們介紹其中最常用的三種： 1 保存為一個 Command。我們也可以將作用在圖片上的所有特效保存為一個內(nèi)置特效，打開Effect 面板，在彈出菜單中 執(zhí)行 Save Effect As，將它保存為 Mydesign 特效。選定剛才的位圖圖像，打開樣式面板 Style，在彈出菜單中執(zhí)行 New Style，我們只需保留對圖片施加的特效即可，按下圖進行設(shè)定： 三、 創(chuàng)造矢量對象 位圖是用像素來描述物體的，它適合于表現(xiàn)色彩變化豐富的照片，而矢量 圖是使用路徑和填充來定義對象的外觀，它非常容易編輯，并且它的質(zhì)量不會因大小的改變而丟失或減弱。 設(shè)定填充為線性漸變填充，點擊填充面板的 Edit 按鈕編輯填充，如下圖所示： 在人像的右半邊繪制一個
研究報告相關(guān)推薦
鄂ICP備17016276號-1