網(wǎng)頁設(shè)計與制作項目六

1、網(wǎng)頁設(shè)計與制作項目六網(wǎng)頁設(shè)計與制作綜合實例網(wǎng)站總體策劃1利用F i reworks CS6制作網(wǎng)頁效果2利用Fireworks CS6切片并導(dǎo)出3利用Flash CS6制作網(wǎng)站LogO動畫4利用Dreamweaver CS6制作網(wǎng)頁5任務(wù)1網(wǎng)站總體策劃網(wǎng)站首頁布局網(wǎng)站二級頁面布局任務(wù)2利用F i reworks CS6制作網(wǎng)頁效果一、繪制網(wǎng)頁基本效果新建文件拖出輔助線繪制網(wǎng)頁導(dǎo)航欄的基本效果繪制正文和頁面底部的漸變條繪制正文立體邊緣繪制網(wǎng)頁下方的導(dǎo)航條繪制頂部裝飾的漸變色繪制導(dǎo)航欄的陰影效果保存文件任務(wù)2利用F i reworks CS6制作網(wǎng)頁效果二、繪制導(dǎo)航欄繪制導(dǎo)航欄底色繪制裝飾線繪制導(dǎo)

2、航欄的形狀添加導(dǎo)航欄裝飾線添加鏈接文字任務(wù)2利用F i reworks CS6制作網(wǎng)頁效果三、繪制正文欄繪制正文欄的標(biāo)題欄規(guī)劃正文的結(jié)構(gòu)繪制頁面的裝飾效果添加標(biāo)題任務(wù)2利用F i reworks CS6制作網(wǎng)頁效果四、繪制二級頁面的效果(1)打開首頁，刪除不需要的圖層并保存。(2)因為首頁和二級頁面的效果基本上一樣，所以在完成上述操作后，將二級頁面的素材圖片和標(biāo)題進(jìn)行更換，即可進(jìn)行切片制作，如圖所示。任務(wù)3利用Fireworks CS6切片并導(dǎo)出(1)打開制作好的首頁和二級頁面文件，單擊工具欄上的切片工具，指針變?yōu)槭中沃缶涂梢栽诠ぷ鲄^(qū)進(jìn)行切片操作了。(2)根據(jù)輔助線的位置以及頁面整體布局的

3、需要，對網(wǎng)站首頁及二級頁面進(jìn)行切片操作，如圖所示。任務(wù)2利用F i reworks CS6制作網(wǎng)頁效果四、繪制二級頁面的效果(3)切片完成后，選擇“文件”“圖像預(yù)覽”命令，分別對“選項”和“文件”選項卡進(jìn)行設(shè)置，如圖所示。任務(wù)3利用Fireworks CS6切片并導(dǎo)出(4)單擊“導(dǎo)出”按鈕，彈出“導(dǎo)出”對話框，設(shè)置適當(dāng)參數(shù)后即可導(dǎo)出頁面文檔，如圖所示。任務(wù)4利用Flash CS6制作網(wǎng)站Logo動畫(1)創(chuàng)建Flash文檔。任務(wù)4利用Flash CS6制作網(wǎng)站Logo動畫(2)新建圖層1，導(dǎo)人“標(biāo)志.pn”廣圖片到庫。任務(wù)4利用Flash CS6制作網(wǎng)站Logo動畫(3)新建圖層2，導(dǎo)人“標(biāo)志

4、1. png” 。任務(wù)4利用Flash CS6制作網(wǎng)站Logo動畫(4)新建圖層3，選中第1幀，使用矩形工具繪制矩形并放置在相應(yīng)位置上。矩形的位置和大小幀和圖層的屬性設(shè)置任務(wù)5利用Dreamweaver CS6制作網(wǎng)頁一、在Dreamweaver CS6中制作首頁(1)打開Dreamweaver CS6，選擇菜單中的“站點”一“新建站點”命令，彈出“站點設(shè)置對象綜合”對話框，參數(shù)設(shè)置如圖所示。任務(wù)5利用Dreamweaver CS6制作網(wǎng)頁一、在Dreamweaver CS6中制作首頁(2)設(shè)置完成后，單擊“保存”按鈕，可以看到站點已經(jīng)建立。在文件面板中可以清楚地看到文件的存放情況。(3打開首

5、頁，首先將表格居中對齊，然后將需要輸入內(nèi)容的地方(15)設(shè)置為背景圖片，如圖所示。任務(wù)5利用Dreamweaver CS6制作網(wǎng)頁一、在Dreamweaver CS6中制作首頁(4)根據(jù)網(wǎng)頁布局要求分別在里面輸人相關(guān)信息，如圖所示。任務(wù)5利用Dreamweaver CS6制作網(wǎng)頁二、應(yīng)用模板創(chuàng)建二級頁面(1)打開二級頁面，制作版面如圖所示。任務(wù)5利用Dreamweaver CS6制作網(wǎng)頁二、應(yīng)用模板創(chuàng)建二級頁面(2)在圖中兩處分別插入可編輯區(qū)域，彈出對話框，如圖所示。任務(wù)5利用Dreamweaver CS6制作網(wǎng)頁二、應(yīng)用模板創(chuàng)建二級頁面(3)插入可編輯區(qū)域后，系統(tǒng)將自動轉(zhuǎn)換為模板，根據(jù)系統(tǒng)提示進(jìn)行保存，如圖。(4)根據(jù)版面要求，通過模板創(chuàng)建5個二級頁面并保存。任務(wù)5利用Dreamweaver CS6制作網(wǎng)頁三、制作所有頁面鏈接(1)打開首頁，分別對5個二級頁面進(jìn)行鏈接，如圖所示。任務(wù)5利用Dreamweaver CS6制作網(wǎng)頁二、應(yīng)用模板創(chuàng)建二級頁面(