Fireworks 網頁設計綜合執行個體-1

來源:互聯網
上載者:User
設計|網頁|網頁設計   在本文中我們將協助您親身體驗Fireworks在網頁創作中的強大功能,我們通過一個網站頁面的設計過程,為您詳細介紹Fireworks在網頁設計的不同階段是如何處理各種不同任務的。通過解決您所遇到的每一個具體的任務,您將對Fireworks的主要功能有一個統一的全域性的瞭解,同時為您在設計中如何利用Fireworks提供一個清晰的思路。下圖是這個教程完成後的外觀:

  我們將根據這一個典型網站其中一個頁面設計流程,使您逐步學習到以下內容:
  1、匯入並編輯位元影像映像。
  2、自動任務處理
  3、創造向量圖形
  4、建立文字
  5、建立按鈕
  6、建立導航條
  7、設定按鈕屬性
  8、建立切片
  9、建立拖拽翻轉效果
  10、建立快顯功能表
  11、建立變形動畫
  12、最佳化映像
  13、輸出HTML檔案到Dreamweaver
  14、在Dreamweaver中進行往返表格編輯

   一、設計前準備

  1、網站介紹:
  在教程介紹之前首先讓我們來看一下我們將要完成的主要任務。這是一個服飾公司的企業網站設計,公司主要以男式服飾為主,同時也兼顧部分女士服飾。網站的主要任務是協助瀏覽者瞭解公司的基本概況和產品資訊,並作為公司的一個展示視窗,向參觀者展示企業的形象及產品系列。根據業主的要求,網站包含了企業概況、企業人才、產品展示、公司榮譽以及連絡方式。我們將以此得到網站的導航結構。

  2、設計指導思想:
  本網站設計的指導思想是在網路上營造一個優雅、高貴、寧靜的氛圍,為了體現這一主題,設計者將紋理、景深、光影、基調與有形的模特照片和靜態文字結合起來,更多的使用直線、堅硬的邊緣、暗的色調來組成網站介面。頁面中以較大面積的男性模特圖片突出男式服飾這一主題,以穿插的直線段體現一種服裝紋理的感覺。公司的名稱則以一種柔軟光滑的粗倩體來表現,以打破整個頁面的堅硬感,同時以白色突出企業名稱,達到非常亮眼的感覺。

  3、頁面結構:
  整個網站採用統一的結構,分為上下兩個部分,上面為網站的導航條,下面左邊以不同的男式服飾圖片及文字標題表示各頁面主題。右邊為內容區,以深色帶條紋的圖片作為背景。
  下面我們將根據上述設計分析,分不同的部分為您介紹製作過程。在建立一個檔案後,我們需要對我們的工作環境進行簡單的設定,以符合我們的任務要求。首先需要設定工作區的面積及背景顏色,開啟Modify>Canvas Size針對常見的800x600解析度,我們設定工作區的長為776這可以根據需要設定,但最好不要超過778,高為515根據實際內容確定,再執行Modify>Canvas Color設定背景色為黑色。再開啟View>Grid>Edit Grid對話方塊,設定水平方向網格間距為10像素,垂直方向為5像素,並將網格顏色設為暗灰色以不影響觀察頁面,開啟網格顯示和網格捕捉。如下圖所示:

   一、 匯入並編輯位元影像映像。
  Fireworks4帶有完善的位元影像建立、修改和處理功能,我們可以匯入外部位元影像檔案並對它進行編輯,可以修改和刪除位元圖中的顏色,可以向對向量圖一樣增加效果。我們的工作將從層面板開始,建立一個檔案後,預設的只有兩個圖層Web層和Layer1層,雙擊Layer1層,將層名改為“背景層”。如下圖所示:

  1、我們將一張男性模特的照片匯入此層中。
  2、雙擊圖片可以進入位元影像編輯模式,我們可以用矩形選擇工具選定不需要的部分並刪除它。
  3、位元影像大小調整好後可以使用即時特效進行色彩調節,開啟Effect面板,選擇Adjust Color/Levels,在Levels分布圖中分別拖動三個滑尺,按照下圖所示進行色彩調節:

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

   二、 自動任務處理。
  由於我們在後面將多次使用這個處理過程對位元影像進行加工,因此可以利用Fireworks提供的自動處理功能加快我們後面的工作,這種自動任務處理可以有很多種途徑,我們介紹其中最常用的三種:
  1 儲存為一個Command。開啟曆史面板History,選定最後兩步Effect紀錄,在快顯功能表中選擇Save as Command,將這兩個步驟儲存為一個可執行檔Command,命名為BMPmodify。以後我們需要時只需執行Commands菜單下的這個BMPmodify命令即可。

  2 儲存為一個Effect。我們也可以將作用在圖片上的所有特效儲存為一個內建特效,開啟Effect面板,在快顯功能表中執行Save Effect As,將它儲存為Mydesign特效。

  此時我們開啟Effect面板就可以看到我們自訂的Mydesign特效已經在其中了,我們可以像使用其它特效一樣使用它。如下圖:

  3 儲存為一個Style。樣式是Fireworks中包含對象的描邊、填充、特效、字型等屬性的一種組合,它可以快速設定對象具有統一的外觀,我們也可以將上面的設定作為一個樣式儲存。選定剛才的位元影像映像,開啟樣式面板Style,在快顯功能表中執行New Style,我們只需保留對圖片施加的特效即可,按下圖進行設定:

   三、 創造向量對象

  位元影像是用像素來描述物體的,它適合於表現色彩變化豐富的照片,而向量圖是使用路徑和填充來定義對象的外觀,它非常容易編輯,並且它的品質不會因大小的改變而丟失或減弱。Fireworks同時提供了編輯這兩種格式映像的方法,預設情況下Fireworks是以向量的方式建立和編輯對象。Fireworks提供了常用的建立向量對象的工具,我們下面利用這些工具建立基本的向量圖形。
  1、 選擇工具面板上的矩形工具,在文檔頂端繪製一776x30的矩形。
  2、 設定填充為線性漸層填充,點擊填充面板的Edit按鈕編輯填充,如下圖所示:

  3、 在人像的右半邊繪製一個130x400的矩形實色填充對象。
  4、 接下來我們將在文檔頂端建立按鈕對象,首先在層面板中建立一個“導航層”,利用矩形工具建立“公司首頁”按鈕對象,大小為140x15,填充為紅色與黑色之間的線性漸層填充,開啟Effect面板,設定Inner Bevel特效,如下圖所示:

  5、 我們還可以在背景層繪製一些線段,以打破背景的單調感覺。如下圖所示:


相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。