某職業(yè)技術(shù)學(xué)院校園網(wǎng)站(編輯修改稿)
2025-02-09 01:51 本頁(yè)面
【文章內(nèi)容簡(jiǎn)介】 重點(diǎn)是要做好效果圖的內(nèi)容區(qū)域，下面詳細(xì)說(shuō)明制作過(guò)程。(1)設(shè)置網(wǎng)頁(yè)區(qū)域?qū)挾葹?775*830px。(2)在頂部區(qū)域繪制 Banner區(qū)域?yàn)?775*150px。(3)在 Banner區(qū)域下邊繪制導(dǎo)航區(qū)域?yàn)?775*35px。(4)在導(dǎo)航區(qū)域下面繪制一條分割區(qū)域?yàn)?775*15px。(5)在分割區(qū)域下邊繪制各個(gè)欄目?jī)?nèi)容所在的區(qū)域?yàn)?775*630px。17網(wǎng)站設(shè)計(jì)基礎(chǔ)與實(shí)例教程 網(wǎng)站主頁(yè)設(shè)計(jì)3 效果圖設(shè)計(jì)18網(wǎng)站設(shè)計(jì)基礎(chǔ)與實(shí)例教程 網(wǎng)站主頁(yè)設(shè)計(jì)3 效果圖設(shè)計(jì)19網(wǎng)站設(shè)計(jì)基礎(chǔ)與實(shí)例教程 網(wǎng)站主頁(yè)設(shè)計(jì)3 主頁(yè)制作 主頁(yè)制作頁(yè)面整合效果圖切片動(dòng)畫(huà)設(shè)計(jì)主頁(yè)開(kāi)發(fā)流程圖 20網(wǎng)站設(shè)計(jì)基礎(chǔ)與實(shí)例教程 網(wǎng)站主頁(yè)設(shè)計(jì)3 主頁(yè)制作 從效果圖中利用切片的方式提取網(wǎng)頁(yè)制作中所需的文字或圖片素材。切片如圖 Fireworks完成效果圖切片21網(wǎng)站設(shè)計(jì)基礎(chǔ)與實(shí)例教程 網(wǎng)站主頁(yè)設(shè)計(jì)3 主頁(yè)制作 在 Fireworks中設(shè)計(jì)好的效果圖，要進(jìn)行切片和優(yōu)化，然后在 XTHML中進(jìn)行布局，這是網(wǎng)頁(yè)設(shè)計(jì)與制作的一般流程，導(dǎo)出效果圖的步驟一般由切片、優(yōu)化、導(dǎo)出組成。一般背景由背景色與背景圖片組成，在實(shí)際使用中一般包括三種情況。網(wǎng)頁(yè)的背景僅有背景色，這樣情況下背景不需要作切片，只要在XHTML進(jìn)行整合時(shí)對(duì) body標(biāo)簽的背景色進(jìn)行設(shè)置就可以。網(wǎng)頁(yè)僅有背景圖片，這樣情況下要以圖片的效果為出發(fā)點(diǎn)，當(dāng)背景圖較大的情況下，可以采取對(duì)于切片中的大圖片分割成多個(gè)小圖片的方法。如果背景圖片有一定規(guī)律可尋的話(huà)，可通過(guò) CSS對(duì)小圖片進(jìn)行重復(fù)來(lái)完成背景圖片的重組。當(dāng)背景圖包含背景色和背景圖片時(shí)，背景色不用作切片，背景圖切片的規(guī)律同第二種情況。注：切片的目的是獲取圖像素材，要合理進(jìn)行選擇。 Fireworks完成效果圖切片22網(wǎng)站設(shè)計(jì)基礎(chǔ)與實(shí)例教程 網(wǎng)站主頁(yè)設(shè)計(jì)3 主頁(yè)制作 （ 1）選擇 “切片 ”工具，如圖所示。按照上圖中的切片規(guī)劃，在背景中繪制出切片區(qū)域。 Fireworks完成效果圖切片23網(wǎng)站設(shè)計(jì)基礎(chǔ)與實(shí)例教程 網(wǎng)站主頁(yè)設(shè)計(jì)3 主頁(yè)制作 （ 2）從 “窗口 ”菜單中打開(kāi) “優(yōu)化 ”面板，如圖所示?？梢愿鶕?jù)需要選擇合適的圖片格式進(jìn)行優(yōu)化。 Fireworks完成效果圖切片24網(wǎng)站設(shè)計(jì)基礎(chǔ)與實(shí)例教程 網(wǎng)站主頁(yè)設(shè)計(jì)3 主頁(yè)制作 （ 3）選擇菜單 “文件 ”|“導(dǎo)出 ”，打開(kāi) “導(dǎo)出 ”窗口，設(shè)置 “文件名 ”及 “導(dǎo)出 ”選項(xiàng)如圖所示。單擊 “保存 ”按鈕，完成背景圖片的切片。 Fireworks完成效果圖切片25網(wǎng)站設(shè)計(jì)基礎(chǔ)與實(shí)例教程 網(wǎng)站主頁(yè)設(shè)計(jì)3 主頁(yè)制作 在 Banner區(qū)域主要完成動(dòng)畫(huà)的制作，利用動(dòng)態(tài)效果，增強(qiáng)網(wǎng)站的活力與吸引力。（ 1）各種 Flash元件的創(chuàng)建。（ 2） Flash各種面板的使用。（ 3）常用動(dòng)畫(huà)效果的運(yùn)用。 Flash完成動(dòng)畫(huà)設(shè)計(jì)26網(wǎng)站設(shè)計(jì)基礎(chǔ)與實(shí)例教程 網(wǎng)站主頁(yè)設(shè)計(jì)3 主頁(yè)制作 （ 1）創(chuàng)建影片文檔 執(zhí)行 【 文件 】 |【 新建 】 命令，在彈出的面板中選擇 【 常規(guī) 】 |【Flash文件（ ActionScript） 】 選項(xiàng)后，點(diǎn)擊 【 確定 】 按鈕，新建一個(gè)影片文檔，在 【 屬性 】 面板上設(shè)置文件大小為 775*150象素， 【 背景色 】 為白色。 Flash完成動(dòng)畫(huà)設(shè)計(jì)27網(wǎng)站設(shè)計(jì)基礎(chǔ)與實(shí)例教程 網(wǎng)站主頁(yè)設(shè)計(jì)3 主頁(yè)制作 （ 2）設(shè)置背景圖層動(dòng)畫(huà)效果將 “圖層 1”重命名為 “背景圖層 ”。執(zhí)行 【 文件 】 |【 導(dǎo)入 】 |【 導(dǎo)入到舞臺(tái) 】 命令，將 “模糊背景 .jpg”導(dǎo)入到舞臺(tái)中。用鼠標(biāo)選中該圖片，將屬性面板中的寬和高設(shè)置成與舞臺(tái)寬和高相同，即寬 775像素，高 150像素。調(diào)整圖片位置讓其邊緣與舞臺(tái)邊緣重合。 Flash完成動(dòng)畫(huà)設(shè)計(jì)28網(wǎng)站設(shè)計(jì)基礎(chǔ)與實(shí)例教程 網(wǎng)站主頁(yè)設(shè)計(jì)3 主頁(yè)制作 選中該圖片，按 F8鍵，將該圖片轉(zhuǎn)換為圖形元件并命名為 “模糊背景”如圖所示。 Flash完成動(dòng)畫(huà)設(shè)計(jì)29網(wǎng)站設(shè)計(jì)基礎(chǔ)與實(shí)例教程 網(wǎng)站主頁(yè)設(shè)計(jì)3 主頁(yè)制作 在該圖層的第 24幀處按 F6鍵，加入關(guān)鍵幀，在該層
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1