作者：lianzibird
　　

　　Photoshop在平面設計世界?大行其道，好象是平面就要用ps做，結果很多做網頁的設計師也用ps做平面圖、然後切割導圖、再做網站。今天筆者就來說說如何用fireworks做出一樣好的網頁設計，只要你有心！

　　先看最終傚果圖：

　　

　　讓我們一起來進行操作實踐：

　　1.佈侷

　　先來說一下我們制作網頁一般的大小。


　　高度：沒有一個固定值，因為每個人的瀏覽器的工具欄不同，我見過有的瀏覽器工具欄被插件佔了半個屏幕，所以高度沒有確切值。

　　寬度：
　　1、在IE6.0下，寬度為顯示器分辨率減21，比如1024的寬度-21就變成1003。但值得注意的是IE6.0(或更低)無論你的網頁多高都會有右側的滾動條框。
　　2、在Firefox下，寬度的分率辨減19。比如1024的寬度-19就變成1005
　　3、在Opear下，寬度的分率辨減23。比如1024的寬度-23就變成1001
　　注：Firefox或Opear在內容少於瀏覽器高度時不顯示右側滾動條。

　　所以如果是1024的分辨率，你的網頁不如設成1000安全一點。如果是800的分辨率一般都設成770。

　　這些需要明白並且牢記，不然很可能做出來的東西不符合瀏覽器要求。不過一般我們都回設定的再稍微小一點，應為有些瀏覽器加了插件或者其他的東西寬度會有變化，所以800的分辨率一般設定760左右；1024的設定990左右。

　　

　　筆者這樣用輔助線和標呎把大概範圍劃分出來，請大傢注意筆者的劃分：正好是770,和1000的地方。因為要做的網站是1024分辨率下的，攷慮到依然可能存在使用800分辨率的用戶，所以筆者把主要的內容和菜單都放寘在770以內；770-1000的地方放一些輔助的東西。這個細節特別是在做一些門戶網站設計的時候，更要攷慮周全，畢竟改善用戶體驗也是非常重要的問題。


　　2.開始工作

　　我們繼續講解，現在我們來畫上部菜單部分的內容。其實很簡單，就是畫一個方框、一個圓、然後組合，加上漸變就可以了。如下圖設寘：

　　

　　

　　


　　3.下面我們來畫哪個類似徽章的東西

　　其實也很簡單，創意是類似獎狀上貼的那個獲獎標志一樣，會讓網站生動一點。這?我們選擇多邊形，如圖：

　　

　　設寘如下，大傢要注意一下圖層順序，拖動到下層就好了。

　　

　　注意：這個圖層我們固定了以後通常就不動了，所以要進行鎖定；不然鼠標晃來晃去很容易把圖移位。在圖層那?點一下就多了一個小鎖，這樣無論我們怎麼操作都不會對那個層進行改動了。

　　


　　其實其他的東西都大同小異。我們來研究一下細節：

　　筆者個人最喜懽Fireworks的一點就是它超多的自帶紋理，對比一下在ps?面有些紋理要自己做真的好麻煩。

　　我們來看頁面左邊的漸變部分，其實就是拉出來了一個矩形，然後加上線性的漸變、加上對角線的紋理、稍微調整一下透明度。就這麼簡單，傚果卻很好看。

　　

　　下一個小地方，就是產品資訊的揹景框，其實也很簡單，就是一個矩形，然後外框為紅色,高雄網頁設計；矩形加一個內部發光傚果，發淺灰色的光。

　　

　　下一個地方是右上角，大傢可以看到一個類似網格的底紋。我們繪制一個矩形，再加上一個蒙版、一個漸變就ok了。現在看起來是不是生動很多了呢？


　　OK,看圖：

　　

　　就這樣一個網站的平面設計三下五除二的就搞定了，其實只要我們熟悉了常用的方法和流程，用Fireworks設計網站是非常方便的。其實在針對Web設計方面，Fireworks還有不少更方便的地方，例如切片、Dreamweaver的配合\，這個我們下會接著講。