按鈕是網頁上必備的互動圖形,雖然是個小東西,不過要做好他也是有點小技巧,先就一般最簡單的立體化的按鈕來做點說明. 野人獻曝的一樣使用fireworks為操作軟體,簡單幾個小步驟,就可以做出依個基本型的按鈕.

1.開一個新文件,"畫布"背景色隨你高興設定,由於一般按鈕只是網頁上的小元件,所以使用網頁背景為畫布背景色最好囉.

2.在fireworks的"工具"視窗,選擇"矩形工具". 就是"矩形工具"喔!就算你點住這個icon,出現了一串選項,也是選第一個"矩形工具"


3. 在畫布上,托拉出一個矩形,大小盡量符合你要的大小


4.接著點選此矩形,或是保持這矩形被選取,到屬性面板上,做填色的調整,首先改為"漸層">"線性"填色,調整漸層的分布.



5.接著,修改畫筆填色,選擇"畫筆選項",出現的視窗,選擇"噴槍","基本",與你要的顏色,還有"筆尖大小"以及"路徑內部".




6. 之後,如果想要圓角的方塊,就在屬性面板上選擇"矩形圓度",輸入適當的數值.


7.接著,回到物件上,調整漸層方向,成為垂直.



8.最後,點選物件,在屬性面板上,濾鏡,按一下+號,選擇"陰影和光暈">"陰影",調整陰影.



9.一個有簡單立體感的按鈕就完成囉!


10.接著就輸出你要的按鈕囉!

常常可以看到許多網頁標題影像加上倒影的效果,其實做這樣的效果在Fireworks不難,而用其他影像處理軟體也很簡單,主要的要訣只在遮罩(Mask)的使用,來看看怎麼使用囉!

1.開一個新文件,"畫布"背景色隨你高興設定,要漸層的背景就看上一篇文章囉.

2.輸入或是建立一個要做倒影效果的物件,如圖所示.


3. 如果要建立倒影的物件有很多個,記得將他群組起來,全選物件,點選 主功能列 > 修改 > 群組物件


4.接著複製這個物件,可以按著Alt鍵,托拉此物件到適當位置,(要準確的垂直托拉,請按住Shift+Alt做拖拉動作)


5.有了要倒影的物件,點選要倒影的物件,執行 主功能列 > 修改 > 變形 > 垂直翻轉


6. 接著,點選工具視窗的矩型工具,繪製一個可以覆蓋倒影物件的矩形.這個目的是要用這矩形當作遮罩


7.接著,將這個舉行剪下,(按著Ctrl+X)

8.點選要倒影的物件按右鍵,編輯 > 選擇貼上成遮色片


9.目前看不到任何效果,打開主功能列 > 視窗 > 圖層, 點選遮罩物件


10.在下方屬性視窗, 遮色片,點選"灰階外觀",填色方式"選擇線性"


11. 點選漸層視窗,選擇漸層,從白(不透明)到黑(透明)


12. 調整漸層方向,之後還可以調整漸層的透明度(從漸層視窗做調整..)


13.基本的倒影樣子已經做好,如上圖所示

14.要讓視覺效果好點, 使用變形工具的"自由變形工具" , 適當的調整倒影物件


15. 這樣,基本的倒影效果就完成了,要它更加好看,就看個人的調整囉!

16.要輸出這樣的圖片,點選原本物件跟倒影物件,按右鍵,選擇"插入矩形分割"


17.出現視窗,教你選擇"多重"或是"單一"分割區域,選擇"單一"就會建立這樣的分割區域


18.接著就輸出你要的畫面囉!

2.1 因為畫布背景無法使用漸層色 ,所以先使用"矩形工具"製作一個與文件大小相同的"矩形",(大小位置可以在下一步調整) 2.2 接著選取此矩形,在屬性面板,調整大小到文件大小,位置到x:0, y:0 , 填色部份選擇漸層>線性,調整起始顏色與結束顏色. 2.3 使用"指標工具"或是"漸層工具"調整漸層方向,與漸層的範圍

3.1 選取橢圓型工具,在適當位置畫一正圓(按住Shift鍵同時拉動) 3.2 由於之前使用了漸層填色,所以這個圓形會自動使用之前的漸層填色. 調整漸層填色,也調整漸層方式為"橢圓形" 3.3 拉動兩個漸層控制到適當位置

4.1 同樣使用橢圓型工具,在適當位置繪製一個橢圓形 4.2 一樣使用漸層,這次使用放射狀漸層,調整好漸層的位置與大小

5.1 繪製一個橢圓形,調整到適合位置 5.2 調整線性漸層顏色,從透明度100 到透明度0 (可以嘗試調整透明數值,測試效果) 5.3 調整漸層方向,表現反光效果

6.1 使用文字工具,輸入數字"1" 6.2 在主功能列,選擇 文字 > 轉換成路徑 6.3 使用變形工具的"扭曲工具" , 適當的調整轉換成路徑的數字變形

7.1 建立一個橢圓形, 在適當位置 7.2 在圖層視窗,將此物件圖層拉到倒數第二層 7.3 調整填色邊緣為羽化 , 設為羽化後旁邊的數字就可以選擇,調整此數值到合適

Dreamweaver 可以很輕易的使用網站伺服器技術，官方說法,可以使用ASP，ASP.NET，JSP，PHP以及自家的ColdFusion。
不過在使用這方便的工具前，都需要先設定好伺服器，在Dreamweaver設定好網站，然後設定好資料庫連線，完成後才能使用托拉方式很快的製作出一個動態網站。
先來說說ASP.NET的設定方式。

Dreamweaver在網站管理方面,有個好用的項目"圖庫",一般人使用時可能不太注意這部份.
不過這功能是蠻方便的小工具,當你在建立或管理網站時,這工具可以瞬間更新網站內的所有頁面.
簡單的介紹一下這功能的使用.

使用部落格記錄發表文章,幾乎是當今網路上最熱門的活動.
而部落格內容編輯器,也在部落格系統商改進下變的更容易使用.
不過,如果想完全控制文字編排,或是插入圖片,甚至flash動畫...
那還是得回歸最基本的概念...html標籤,與檔案相關位置。