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

來源:互聯網
上載者:User
設計|網頁|網頁設計    四、 建立文字
  Fireworks還提供了強大的文文書處理功能,利用文字編輯視窗可以靈活的對文字進行設定,並且與其它對象一樣我們也可以對文字施加各種特效。
  1、 選擇工具面板的文字工具,開啟文字編輯視窗,輸入“卡爾松服飾有限公司”,如圖所示:

  我們看到,在文字編輯視窗我們可以分別對不同的文字設定各自的屬性。
  2、 在文檔左半部分輸入相應的英文文字內容,並旋轉文字90度,如下圖所示:

  3、 開啟層面板,選定“Karsong”設定它的合成方式為“Luminosity”

  4、 開啟Effect面板,為“DRESS&ADORNMENT CO..LTD”文字增加Drop Shadow特效。

   五、 建立按鈕
  利用Fireworks提供的按鈕編輯器,我們可以快速建立具有相似外觀的一組按鈕,並可以設定按鈕的不同狀態外觀。
  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面板,選擇水平置中對齊,如下圖所示:

  4、 現在導航條的效果如下圖:

  5、 我們需要對導航條中的每個按鈕設定不同的色彩,開啟Effect面板,分別改變每個按鈕所加特效中的混合色彩設定,將其設為不同的色值,分別改為#CC9900,#663399,#33FF00,#FF00FF。此時的導航條效果如下圖所示:

   七、 設定按鈕屬性
  上面我們做好的導航條外觀雖然不同,但它們卻有著相同的文字內容,我們需要將它們修改為各自的內容,並設定每個按鈕對應的連結地址。
  1、 開啟Object面板,選擇第二個按鈕執行個體,將Object面板上的Button Text改為“企業人才”。

  2、 按下斷行符號鍵後,會彈出下面的提示框:

  我們選擇Current使文字的改變只對當前按鈕有效。
  3、 將其餘的按鈕文字分別修改為“產品展示”、“企業榮譽”、“連絡方式”。切換導文檔的預覽視窗Preview,可以看一下最終的效果。

  4、 開啟URL面板,分別選擇每一個按鈕,在URL面板中設定它們對應的連結地址。


相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。