fireworks網(wǎng)頁(yè)設(shè)計(jì)綜合實(shí)例(編輯修改稿)
2025-07-26 18:04 本頁(yè)面
【文章內(nèi)容簡(jiǎn)介】 關(guān)閉按鈕編輯窗口，按鈕的一個(gè)實(shí)例已經(jīng)放置在了文檔當(dāng)中。 六、 創(chuàng)建導(dǎo)航條 利用上面創(chuàng)建的按鈕我們可以快速創(chuàng)建風(fēng)格一致的網(wǎng)頁(yè)導(dǎo)航條，并且可以分別設(shè)定每個(gè)按鈕的外觀和文字，但同時(shí)保持它們的相似性。 我們先對(duì)上面創(chuàng)建好的按鈕實(shí)例增加一種特效，打開Effect面板，選擇Adjust ColorColor Fill，設(shè)定此特效的混合模式為Hue色調(diào)，如下圖所示： 這樣當(dāng)我們想改變每個(gè)按鈕實(shí)例的色彩時(shí)，只需修改此特效中的混合色彩即可，而不需對(duì)按鈕符號(hào)作修改。 創(chuàng)建多個(gè)按鈕實(shí)例。選定上面的按鈕實(shí)例，按住Alt鍵的同時(shí)，拖動(dòng)并復(fù)制這個(gè)按鈕實(shí)例，重復(fù)執(zhí)行此步驟，創(chuàng)建五個(gè)按鈕實(shí)例。 選中這五個(gè)按鈕實(shí)例，打開Modify面板，選擇水平居中對(duì)齊，如下圖所示： 現(xiàn)在導(dǎo)航條的效果如下圖： 我們需要對(duì)導(dǎo)航條中的每個(gè)按鈕設(shè)定不同的色彩，打開Effect面板，分別改變每個(gè)按鈕所加特效中的混合色彩設(shè)定，將其設(shè)為不同的色值，分別改為CC9900，663399，33FF00，F(xiàn)F00FF。此時(shí)的導(dǎo)航條效果如下圖所示： 七、 設(shè)定按鈕屬性 上面我們做好的導(dǎo)航條外觀雖然不同，但它們卻有著相同的文字內(nèi)容，我們需要將它們修改為各自的內(nèi)容，并設(shè)定每個(gè)按鈕對(duì)應(yīng)的鏈接地址。 打開Object面板，選擇第二個(gè)按鈕實(shí)例，將Object面板上的Button Text改為“企業(yè)人才”?！ ?按下回車鍵后，會(huì)彈出下面的提示框： 我們選擇Current使文字的改變只對(duì)當(dāng)前按鈕有效?！ ?將其余的按鈕文字分別修改為“產(chǎn)品展示”、“企業(yè)榮譽(yù)”、“聯(lián)系方式”。切換導(dǎo)文檔的預(yù)覽窗口Preview，可以看一下最終的效果?！ ?打開URL面板，分別選擇每一個(gè)按鈕，在URL面板中設(shè)定它們對(duì)應(yīng)的鏈接地址。八、 建立切片 我們的基本導(dǎo)航及頁(yè)面結(jié)構(gòu)已經(jīng)建立好了，現(xiàn)在到了增加切片的時(shí)候了。Fireworks中的切片是輸出圖形及產(chǎn)生交互的主要參考物件，導(dǎo)出的文檔將根據(jù)切片來(lái)將圖形切割成不同的部分，并在瀏覽器中通過表格組裝到一起。同時(shí)，所有的交互行為也是通過切片之間的聯(lián)系來(lái)產(chǎn)生的，如翻轉(zhuǎn)圖、彈出菜單等等。 我們前面建立的按鈕本身已經(jīng)帶有了自己的切片，因此我們需要對(duì)其他對(duì)象建立各自的切片。 創(chuàng)建切片通常使用工具面板中的Slice工具直接繪制 ，但如果想創(chuàng)建精確大小的切片，我們可以選擇對(duì)象并執(zhí)行右鍵菜單中的Insert Slice自動(dòng)插入切片。 我們使用工具面板中的Slice工具在頁(yè)面中間繪制一個(gè)信息顯示切片，我們將在下一步把導(dǎo)航條的每個(gè)按鈕相關(guān)信息顯示在這里?！ ?我們?cè)黾拥那衅J(rèn)情況下是綠色的半透明對(duì)象，它們都放置在Web Layer層上. 九、 創(chuàng)建拖拽翻轉(zhuǎn)效果 單擊企業(yè)概況按鈕處的切片，此切片中心將出現(xiàn)一個(gè)圓形標(biāo)志，用鼠標(biāo)將其拖動(dòng)到上一步創(chuàng)建的切片左上角，這將設(shè)置一個(gè)翻轉(zhuǎn)效果，在彈出的對(duì)話框中設(shè)定鼠標(biāo)滑過時(shí)交換為第二幀的內(nèi)容，如下圖所示： 重復(fù)上述步驟，分別為企業(yè)人才、產(chǎn)品展示兩個(gè)按鈕增加翻轉(zhuǎn)效果，并分別對(duì)應(yīng)第三幀和第四幀。 我們?cè)诤竺娓鲙嗤奈恢贸龇謩e放置對(duì)應(yīng)每個(gè)按鈕的說(shuō)明文字。 最后的效果如下圖所示： 十、 創(chuàng)建彈出菜單 通常我們站點(diǎn)里的導(dǎo)航信息必須非常的簡(jiǎn)練和實(shí)用，只有那些最重要的信息才出現(xiàn)在導(dǎo)航條中，而更多的導(dǎo)航和內(nèi)容信息通常都隱藏起來(lái)。對(duì)于復(fù)雜的展點(diǎn)和多重信息組織，彈出菜單是分層導(dǎo)航的最有效工具，彈出菜單可以在很小的空間中設(shè)置大量的目標(biāo)選項(xiàng)。Fireworks4新增的創(chuàng)建彈出菜單功能，可以非常容易的實(shí)現(xiàn)這種導(dǎo)航結(jié)構(gòu)，我們只需將分層信息添加到彈出菜單編輯器中，程序會(huì)自動(dòng)生成相應(yīng)的交互式代碼?！ ?選擇導(dǎo)航欄上的產(chǎn)品展示按鈕，確保Web Layer當(dāng)前顯示及切片可見。 點(diǎn)擊此按鈕上切片中心的圓形標(biāo)志，從彈出菜單中選擇Add Popup Menu增加彈出菜單，如下圖所示： 在彈出的編輯器中輸入如下圖所示內(nèi)容，在Text和Link輸入框中輸入內(nèi)容后，點(diǎn)及上部的+即可添加新的菜單內(nèi)容： 繼續(xù)輸入二級(jí)菜單內(nèi)容，選中一個(gè)條目后，點(diǎn)擊上部的 可以使當(dāng)前條目縮進(jìn)，成為下一級(jí)菜單；點(diǎn)擊 可以使當(dāng)前的條目恢復(fù)為上一級(jí)菜單。最
法律信息相關(guān)推薦
鄂ICP備17016276號(hào)-1