fireworks_網(wǎng)絡(luò)頁(yè)面設(shè)計(jì)綜合實(shí)際示例(編輯修改稿)
2024-09-10 19:03 本頁(yè)面
【文章內(nèi)容簡(jiǎn)介】 頁(yè)導(dǎo)航條，并且可以分別設(shè)定每個(gè)按鈕的外觀和文字，但同時(shí)保持它們的相似性。 我們先對(duì)上面創(chuàng)建好的按鈕實(shí)例增加一種特效，打開(kāi) 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í)例，打開(kāi) Modify 面板，選擇水平居中對(duì)齊，如下圖所示： 現(xiàn)在導(dǎo)航條的效果如下圖： 我們需要對(duì)導(dǎo)航條中的每個(gè)按鈕設(shè)定不同的色彩，打開(kāi) 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)的鏈接地址。 打開(kāi) Object 面板，選擇第二個(gè)按鈕實(shí)例，將 Object 面板上的 Button Text 改為 “企業(yè)人才 ”。 按下回車(chē)鍵后，會(huì)彈出下面的提示框： 我們選擇 Current 使文字的改變只對(duì)當(dāng)前按鈕有效。 將其余的按鈕文字分別修改為 “產(chǎn)品展示 ”、 “企業(yè)榮譽(yù) ”、 “聯(lián)系方式 ”。切換導(dǎo)文檔的預(yù)覽窗口 Preview，可以看一下最終的效果。 打開(kāi) 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)將圖形切割成不同的部分，并在瀏覽器中通過(guò)表格組裝到一起。同時(shí)，所有的交互行為也是通過(guò)切片之間的聯(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ì)話(huà)框中設(shè)定鼠標(biāo)滑過(guò)時(shí)交換為第二幀的內(nèi)容，如下圖所示： 重復(fù)上述步驟，分別為 “企業(yè)人才 ”、 “產(chǎn)品展示 ”兩個(gè)按鈕增加翻轉(zhuǎn)效果，并分別對(duì)應(yīng)第三幀和第四幀。 我們?cè)诤竺娓鲙?同的位置出分別放置對(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)前顯示及切片可見(jiàn)。 點(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í)菜單。最后的結(jié)果入圖所示： 點(diǎn)擊 Next進(jìn)入下一個(gè)設(shè)置窗口，在這里我們可以設(shè)置文字的大小，菜單的樣式等屬性，您既可以選擇最終的菜單外觀是標(biāo)準(zhǔn)的 HTML 格式，或
研究報(bào)告相關(guān)推薦
鄂ICP備17016276號(hào)-1