Fireworks 8 尋夢之旅(9):製作快顯功能表

來源:互聯網
上載者:User
菜單

  上一節:製作逼真的水珠

  六、CSS格式快顯功能表製作匯出

  有關快顯功能表的製作方法,不是我們本部分的講授重點,有關CSS格式控制的地方,才是需要我們注意的。所以本小節就通過一個簡單的快顯功能表的製作講解,使大家對於Fireworks 8裡面新增的CSS格式化菜單有一個初步的瞭解和印象,以更好的進一步的來使用它。

  源檔案下載(37KB, Winzip壓縮)

  1、開啟Fireworks 8,建立一個檔案,檔案的大小可以根據菜單的大小直接來設定。在編輯區繪製需要在頁面上顯示的菜單。

  2、使用工具箱的“矩形熱點”工具給功能表列直接插入熱區,不做轉化為按鈕元件的操作了。

  3、選中“新書推薦”欄所在熱區,選擇菜單“修改|快顯功能表|添加快顯功能表”命令。在“內容”設定對話方塊內,將快顯功能表內容的文本、連結及其目標等都設定完畢,單擊“繼續”按鈕,轉到“外觀”設定對話方塊。

  4、在“外觀”設定對話方塊內,選擇儲存格格式為“HTML”,將字型、文字大小、彈起狀態、滑過狀態的文本、儲存格顏色都做一個設定。設定完畢,單擊“繼續”按鈕,切換到“進階”設定對話方塊。

  5、在本處,將儲存格的相關屬性進行一番設定,具體的內容設定此處就不詳細講解了,大家可以參考Fireworks先前版本的有關教程來對其作深入瞭解,掌握。全部設定完畢後,單擊“繼續”按鈕切換到“位置”設定對話方塊。

  6、菜單位置我們選擇“將菜單位置設定到切片的底部”這種格式,如果對於Y值不滿意的話,此處可以調整,也可以通過後期進行調整,這就需要用到我們今天要著重介紹的CSS格式菜單的知識了。設定完畢了,完成即可。

  7、參照上述方法,將其它菜單內容添加完畢。然後單擊工具列上的“匯出”按鈕,將菜單檔案匯出html格式檔案。在隨後彈出的“匯出”對話方塊中,單擊右側的“選項”按鈕,探出“HTML設定對話方塊”,注意一定要選定“對快顯功能表應用CSS、將CSS寫入外部檔案”這兩項前面的複選框,才可以感受到CSS格式化菜單的魅力所在。

  8、將菜單檔案匯出到你準備好的檔案夾內,開啟該檔案夾,會發現裡面出現了一個CSS層疊樣式表文檔,如下圖所示。這就是我們需要重點介紹的主角兒了。

  9、使用html編輯器或者記事本(使用記事本其實足夠了,因為檔案並不複雜)開啟這個CSS檔案。我們可以發現一些html代碼在裡面,如果我們對html一竅不通也不要害怕,你可以憑藉著剛才在Fireworks裡面設定菜單的印象來尋找一些與快顯功能表的設定有關的內容,比如我們在節選的一段css描述裡面可以發現對於菜單對象的一些描述第一個劃紅線的地方所指示的“general apperance”也就是我們在“菜單編輯器”中進行外觀設定的那一些內容,仔細看可以看到裡面有“font-family”,有關字型的設定;還有“font-size”,有關字型大小的設定,具體到還有字型顏色、背景顏色、字型樣式等等內容的設定,只要你稍微懂一些英文的話,下面這些應該對你沒有什麼大礙的。下圖中第2處劃紅線的地方是來設定滑鼠滑過時的狀態的,主要是對文本顏色和儲存格背景色這兩方面進行的設定。

  當然,還有其他的有關菜單外觀、及其儲存格邊框、背景色、菜單置放位置等內容的設定,都包含在這個css檔案裡面了。

  10、在沒有對該css檔案進行修改時,快顯功能表的樣式如下圖所示。

  11、接下來,我們對該css檔案的內容做一個簡單的調整。如下圖所示的淡黃色地區所示,我們將快顯功能表的文本顏色、背景顏色、還有滑鼠已淘汰的文本顏色、及其相應的背景顏色都做了一個簡單的改變。

  12、經過設定後,再次在瀏覽器中預覽快顯功能表的效果,發現已經發生變化了,如下圖所示。

  [小結]:對於CSS格式化菜單的製作、調整的方法就講解到這裡了,想必大家都已經發現了奧秘所在了,對了,就在那個產生的CSS層疊樣式表檔案裡了。只要對這個CSS檔案做簡單的調整,整個快顯功能表的面貌都會隨之改變的!



相關文章

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