Fireworks網頁設計綜合實例4

2024-09-11 13:31:28

字體：大中小

來源：轉載

供稿：網友

五、創建按鈕

    利用提供的按鈕編輯器，我們可以快速創建具有相似外觀的一組按鈕，并可以設定按鈕的不同狀態外觀。
    1、使用矩形工具繪制一個90x15的矩形按鈕對象，設定它的填充為線性漸變填充，在矩形上方輸入“企業概況”。
    2、上一步我們建好了按鈕的基本外觀，我們可以把它轉換為一個按鈕符號重復利用。選定上面創建的矩形和文字，按f8將它轉換為符號，符號類型為button。

3、此時的按鈕符號只具有基本的外形，雙擊剛創建好的這個符號，打開按鈕編輯窗口。
4、常見按鈕的up狀態，在按鈕編輯器的up窗口我們可以向編輯普通對象一樣，為按鈕增加一些特效。打開effect面板，為此按鈕矩形增加inner bevel特效，類型為frame，如圖所示：

5、切換到over狀態，點擊下方的“copy up graphic”將up狀態的對象復制到over狀態窗口。改變矩形的漸變填充方向，改變按鈕的特效類型為smooth，如下圖：

6、切換到down狀態，點擊下方的“copy over graphic”將over狀態的對象復制到down狀態窗口。改變矩形的填充類型為實色填充solid，改變按鈕的特效類型為frame1，最后將文字的色彩改變為紅色，如下圖：

7、需要注意的是，在按鈕的down狀態下，需要取消對“show down state upon load”的勾選，同時要保證“include nav bar down state”被勾選，這可以使將來輸出時會根據不同的按鈕按下情況輸出相應的html文件。
8、關閉按鈕編輯窗口，按鈕的一個實例已經放置在了文檔當中。

六、創建導航條

利用上面創建的按鈕我們可以快速創建風格一致的網頁導航條，并且可以分別設定每個按鈕的外觀和文字，但同時保持它們的相似性。

1、我們先對上面創建好的按鈕實例增加一種特效，打開effect面板，選擇adjust color>color fill，設定此特效的混合模式為hue色調，如下圖所示：

    這樣當我們想改變每個按鈕實例的色彩時，只需修改此特效中的混合色彩即可，而不需對按鈕符號作修改。
    2、創建多個按鈕實例。選定上面的按鈕實例，按住alt鍵的同時，拖動并復制這個按鈕實例，重復執行此步驟，創建五個按鈕實例。
    3、選中這五個按鈕實例，打開modify面板，選擇水平居中對齊，如下圖所示：