第一篇：《網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書(shū)

武漢商貿(mào)職業(yè)學(xué)院 信息工程學(xué)院

《網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書(shū)

軟件教研室 2013年9月 《網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書(shū)

目錄

實(shí)訓(xùn)目的...........................................................................................................................................1 實(shí)訓(xùn)內(nèi)容及要求...............................................................................................................................1 實(shí)訓(xùn)性質(zhì)、實(shí)訓(xùn)地點(diǎn)、實(shí)習(xí)時(shí)間安排，適用專(zhuān)業(yè)班級(jí)...............................................................2 實(shí)訓(xùn)一 站點(diǎn)的規(guī)劃設(shè)計(jì)..................................................................................................................3 實(shí)訓(xùn)二 設(shè)計(jì)案例網(wǎng)站LOGO.........................................................................................................4 實(shí)訓(xùn)三 設(shè)計(jì)案例網(wǎng)站BANNER...................................................................................................5 實(shí)訓(xùn)四 設(shè)計(jì)案例網(wǎng)站導(dǎo)航條.........................................................................................................6 實(shí)訓(xùn)五 設(shè)計(jì)案例網(wǎng)站網(wǎng)頁(yè)內(nèi)容和網(wǎng)頁(yè)版權(quán)聲明.........................................................................7 實(shí)訓(xùn)六 對(duì)案例網(wǎng)站版面切圖.........................................................................................................8 實(shí)訓(xùn)七 制作完成案例網(wǎng)站首頁(yè).....................................................................................................9 實(shí)訓(xùn)八 案例網(wǎng)站模板的制作.......................................................................................................10 實(shí)訓(xùn)九 案例網(wǎng)頁(yè)超級(jí)鏈接的添加...............................................................................................11 實(shí)訓(xùn)十 案例網(wǎng)站加入動(dòng)態(tài)元素...................................................................................................12

第2頁(yè) 《網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書(shū)

實(shí)訓(xùn)目的

在前一階段，學(xué)生完成了《網(wǎng)頁(yè)設(shè)計(jì)與制作》、《圖形圖像處理》、《CSS設(shè)計(jì)》、等專(zhuān)業(yè)課程的學(xué)習(xí)，為了讓學(xué)生將前期的專(zhuān)業(yè)課程學(xué)以致用，融會(huì)貫通，特開(kāi)設(shè)本系統(tǒng)化實(shí)訓(xùn)。

本次綜合實(shí)訓(xùn)基于學(xué)生的興趣，選取專(zhuān)業(yè)建設(shè)網(wǎng)站開(kāi)發(fā)為主題，基于網(wǎng)頁(yè)開(kāi)發(fā)的流程，把實(shí)訓(xùn)周期當(dāng)做是一個(gè)項(xiàng)目的開(kāi)發(fā)周期，嚴(yán)格把握項(xiàng)目進(jìn)度，最終要求學(xué)生完成網(wǎng)站的前臺(tái)設(shè)計(jì)。

通過(guò)本次實(shí)訓(xùn)希望達(dá)到以下目的：

1.熟悉和掌握Dreamweaver軟件的使用方法； 2.熟悉和掌握PS軟件的使用方法； 3.熟悉FLASH軟件應(yīng)用的方法； 4.學(xué)會(huì)使用CSS+DIV做網(wǎng)頁(yè)布局； 5.熟練掌握站點(diǎn)的規(guī)劃與設(shè)計(jì)

實(shí)訓(xùn)內(nèi)容及要求

本實(shí)訓(xùn)的內(nèi)容簡(jiǎn)述： 1.網(wǎng)站首頁(yè)（1）專(zhuān)業(yè)概況（2）專(zhuān)業(yè)建設(shè)規(guī)劃

（3）展示最新動(dòng)態(tài)文章標(biāo)題（8條）（4）專(zhuān)業(yè)建設(shè)成效的文章標(biāo)題（8項(xiàng)）（5）專(zhuān)業(yè)建設(shè)特色文章標(biāo)題（8項(xiàng)）2.專(zhuān)業(yè)概況

點(diǎn)擊項(xiàng)目概況，顯示相關(guān)文本 3.專(zhuān)業(yè)建設(shè)規(guī)劃

點(diǎn)擊項(xiàng)目申報(bào)書(shū)菜單，顯示flashpaper格式的申報(bào)書(shū)內(nèi)容 4.專(zhuān)業(yè)建設(shè)特色

顯示專(zhuān)業(yè)建設(shè)特色的文章標(biāo)題列表，點(diǎn)擊標(biāo)題進(jìn)入內(nèi)容 5.專(zhuān)業(yè)建設(shè)動(dòng)態(tài)

顯示專(zhuān)業(yè)建設(shè)動(dòng)態(tài)的標(biāo)題列表，點(diǎn)擊標(biāo)題進(jìn)入成果詳細(xì)展示 6.專(zhuān)業(yè)建設(shè)成效

顯示專(zhuān)業(yè)建設(shè)成效的標(biāo)題列表，點(diǎn)擊標(biāo)題進(jìn)入成果詳細(xì)展示。本實(shí)訓(xùn)的要求：

1.應(yīng)用css和html（div+css）技術(shù)完成至少4個(gè)頁(yè)面，其中必須包括網(wǎng)站主頁(yè)面設(shè)計(jì)、欄目頁(yè)設(shè)計(jì)、管理員管理登陸頁(yè)面、管理員登錄以后的頁(yè)面。2.顯示環(huán)境：網(wǎng)頁(yè)視覺(jué)效果應(yīng)采用Internet Explorer 6.0以上版本瀏覽器，顯示分辨率以1024×768狀態(tài)為準(zhǔn)。

第1頁(yè) 《網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書(shū)

3.網(wǎng)頁(yè)規(guī)模：網(wǎng)頁(yè)總量原則上不應(yīng)超過(guò)10M，且必須要是不連接互聯(lián)網(wǎng)就可以進(jìn)行展示的作品。

4.網(wǎng)站結(jié)構(gòu)：要求結(jié)構(gòu)清晰，文件有清晰的分類(lèi)，比如圖片都放在images文件夾下等。

5.要求頁(yè)面美觀大方、顏色搭配協(xié)調(diào)；

6.作品留存，下學(xué)期或下一階段繼續(xù)完善、開(kāi)發(fā)。

實(shí)訓(xùn)性質(zhì)、實(shí)訓(xùn)地點(diǎn)、實(shí)習(xí)時(shí)間安排，適用專(zhuān)業(yè)班級(jí)

該實(shí)訓(xùn)為校內(nèi)模擬實(shí)訓(xùn)。根據(jù)高等教育教學(xué)大綱規(guī)定和學(xué)院教學(xué)計(jì)劃安排及培養(yǎng)學(xué)生職業(yè)技能的要求，軟微班的學(xué)生于第一學(xué)期進(jìn)行為期4周的校內(nèi)實(shí)訓(xùn)，項(xiàng)目名稱(chēng)為《網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)》。

實(shí)訓(xùn)時(shí)間：2013-2014學(xué)年第一學(xué)期第15-18周 實(shí)訓(xùn)班級(jí)：軟件1301班、軟件1302班 實(shí)訓(xùn)地點(diǎn)： 學(xué)校機(jī)房

第2頁(yè) 《網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書(shū)

實(shí)訓(xùn)一 站點(diǎn)的規(guī)劃設(shè)計(jì)

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Dreamweaver軟件的界面布局和工作環(huán)境。（2）熟練掌握本地站點(diǎn)創(chuàng)建和管理的方法。

3、實(shí)訓(xùn)任務(wù)

（1）創(chuàng)建一個(gè)靜態(tài)網(wǎng)站站點(diǎn)。（2）從網(wǎng)絡(luò)上收集網(wǎng)頁(yè)素材。

（3）根據(jù)提供的網(wǎng)站策劃方案范本，結(jié)合自己要制作完成的網(wǎng)站，開(kāi)始著手書(shū)寫(xiě)網(wǎng)站策劃方案。

4、實(shí)訓(xùn)內(nèi)容

（1）打開(kāi)Dreamweaver 軟件，熟悉軟件的界面布局和工作面板的擺放，能夠熟練使用Dreamweaver 軟件。

（2）在本機(jī)D盤(pán)上創(chuàng)建文件夾“home”，在“home”文件夾下根據(jù)網(wǎng)站的規(guī)劃設(shè)計(jì)，創(chuàng)建相關(guān)的文件夾，用來(lái)放置不同的文件。

（3）在Dreamweaver 軟件中，將D盤(pán) “home” 文件夾定義成靜態(tài)網(wǎng)站站點(diǎn)，站點(diǎn)名稱(chēng)任意。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

（2）實(shí)訓(xùn)不分小組，要求每位同學(xué)均能獨(dú)立地完全相關(guān)實(shí)訓(xùn)的設(shè)計(jì)與制作。（3）教學(xué)實(shí)訓(xùn)除了驗(yàn)證課程理論外，還要求學(xué)生掌握網(wǎng)絡(luò)資源的搜索與應(yīng)用。（4）除了教師的指導(dǎo)外，還要著重培養(yǎng)學(xué)生自學(xué)的能力。

第3頁(yè) 《網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書(shū)

實(shí)訓(xùn)二 設(shè)計(jì)案例網(wǎng)站LOGO

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Photoshop軟件的界面布局和工作環(huán)境。（2）熟練掌握網(wǎng)站LOGO的設(shè)計(jì)方法。（3）創(chuàng)建項(xiàng)目案例網(wǎng)站的LOGO。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Photoshop軟件文字工具工具的使用方法。（2）查看網(wǎng)絡(luò)上相關(guān)網(wǎng)站LOGO。

（3）根據(jù)小組討論結(jié)果，實(shí)際動(dòng)手完成網(wǎng)站的LOGO。

4、實(shí)訓(xùn)內(nèi)容

（1）打開(kāi)Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，能夠熟練使用Photoshop軟件。

（2）新建Photoshop文件，大小為980*600像素，分辨率為72像素/英寸，顏色模式為RGB顏色8位，背景顏色為白色或者透明都可以。（3）使用文字工具，輸入MZD三個(gè)字母，設(shè)置文字屬性。

（4）柵格化文字圖層，將柵格化后的圖層上的3個(gè)字母分別移動(dòng)到不同的3個(gè)圖層上。

（5）分別對(duì)3個(gè)字母進(jìn)行藝術(shù)化處理。（6）輸入其他的文字。

（7）為輸入的文字圖層設(shè)置“混合選項(xiàng)”。（8）保存文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

（2）實(shí)訓(xùn)不分小組，要求每位同學(xué)均能獨(dú)立地完全相關(guān)實(shí)訓(xùn)的設(shè)計(jì)與制作。（3）教學(xué)實(shí)訓(xùn)除了驗(yàn)證課程理論外，還要求學(xué)生掌握網(wǎng)絡(luò)資源的搜索與應(yīng)用。（4）除了教師的指導(dǎo)外，還要著重培養(yǎng)學(xué)生自學(xué)的能力。

第4頁(yè) 《網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書(shū)

實(shí)訓(xùn)三 設(shè)計(jì)案例網(wǎng)站BANNER

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Photoshop軟件的使用方法。（2）熟練掌握網(wǎng)站BANNER的設(shè)計(jì)方法。（3）創(chuàng)建項(xiàng)目案例網(wǎng)站的BANNER。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Photoshop軟件漸變工具的使用方法。（2）查看網(wǎng)絡(luò)上相關(guān)網(wǎng)站BANNER。

（3）根據(jù)小組討論結(jié)果，實(shí)際動(dòng)手完成網(wǎng)站的BANNER。

4、實(shí)訓(xùn)內(nèi)容

（1）打開(kāi)Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，熟練使用Photoshop軟件。

（2）打開(kāi)上次保存好的Photoshop源文件，在上次完成的LOGO基礎(chǔ)上，準(zhǔn)備開(kāi)始制作本次的BANNER。

（3）根據(jù)網(wǎng)站策劃方案里的主色調(diào)和主題的要求，開(kāi)始設(shè)計(jì)網(wǎng)站的BANNER，首先去選擇一張適合的圖片。

（4）使用矩形選框工具選擇要使用的圖片部分，圖片的其他部分刪除。（5）根據(jù)設(shè)計(jì)要求，在BANNER上添加其他元素，比如文字或者其他能夠表達(dá)網(wǎng)站主題的圖片。

（6）使用魔術(shù)棒工具將要放置到BANNER上的圖片的某一部分扣出來(lái)，然后設(shè)置適合的大小，旋轉(zhuǎn)好方向后放好。

（7）設(shè)置圖層的樣式，以及文字的混合選項(xiàng)等。（8）保存文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

（2）實(shí)訓(xùn)不分小組，要求每位同學(xué)均能獨(dú)立地完全相關(guān)實(shí)訓(xùn)的設(shè)計(jì)與制作。（3）教學(xué)實(shí)訓(xùn)除了驗(yàn)證課程理論外，還要求學(xué)生掌握網(wǎng)絡(luò)資源的搜索與應(yīng)用。（4）除了教師的指導(dǎo)外，還要著重培養(yǎng)學(xué)生自學(xué)的能力。

第5頁(yè) 《網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書(shū)

實(shí)訓(xùn)四 設(shè)計(jì)案例網(wǎng)站導(dǎo)航條

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Photoshop軟件的使用方法。（2）熟練掌握網(wǎng)站導(dǎo)航條的設(shè)計(jì)方法。（3）創(chuàng)建項(xiàng)目案例網(wǎng)站的導(dǎo)航條。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Photoshop軟件圓角矩形工具的使用方法。（2）查看網(wǎng)絡(luò)上相關(guān)網(wǎng)站導(dǎo)航條。

（3）根據(jù)小組討論結(jié)果，實(shí)際動(dòng)手完成網(wǎng)站的導(dǎo)航條。

4、實(shí)訓(xùn)內(nèi)容

（1）打開(kāi)Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，熟練使用Photoshop軟件。

（2）查看網(wǎng)上其它網(wǎng)站的導(dǎo)航條，了解導(dǎo)航條的基本情況。

（3）打開(kāi)上次保存好的Photoshop源文件，在上次完成的基礎(chǔ)上，準(zhǔn)備開(kāi)始制作本次的導(dǎo)航條。

（4）根據(jù)網(wǎng)站策劃方案里的主色調(diào)和主題的要求，開(kāi)始設(shè)計(jì)網(wǎng)站的導(dǎo)航條，首先去選擇一張適合的圖片。

（5）使用圓角矩形工具繪制一個(gè)圓角矩形，顏色與大小要與整個(gè)網(wǎng)站的風(fēng)格與主題相一致。

（6）選中繪制好的圓角矩形，使用漸變工具，繪制立體感導(dǎo)航條背景。（7）輸入導(dǎo)航條文字，輸入導(dǎo)航條文字間的豎線間隔。（8）設(shè)置文字和豎線的混合選項(xiàng)，增加立體感。（9）保存文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

（2）實(shí)訓(xùn)不分小組，要求每位同學(xué)均能獨(dú)立地完全相關(guān)實(shí)訓(xùn)的設(shè)計(jì)與制作。（3）教學(xué)實(shí)訓(xùn)除了驗(yàn)證課程理論外，還要求學(xué)生掌握網(wǎng)絡(luò)資源的搜索與應(yīng)用。（4）除了教師的指導(dǎo)外，還要著重培養(yǎng)學(xué)生自學(xué)的能力。

第6頁(yè) 《網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書(shū)

實(shí)訓(xùn)五 設(shè)計(jì)案例網(wǎng)站網(wǎng)頁(yè)內(nèi)容和網(wǎng)頁(yè)版權(quán)聲明

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Photoshop軟件的使用方法。

（2）熟練掌握網(wǎng)站網(wǎng)頁(yè)內(nèi)容和網(wǎng)頁(yè)版權(quán)聲明的設(shè)計(jì)方法。（3）創(chuàng)建項(xiàng)目案例網(wǎng)站的網(wǎng)頁(yè)內(nèi)容和網(wǎng)頁(yè)版權(quán)聲明。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Photoshop軟件多種工具結(jié)合的使用方法。（2）查看網(wǎng)絡(luò)上相關(guān)網(wǎng)站網(wǎng)頁(yè)。

（3）根據(jù)小組討論結(jié)果，實(shí)際動(dòng)手完成網(wǎng)站的網(wǎng)頁(yè)內(nèi)容和網(wǎng)頁(yè)版權(quán)聲明。

4、實(shí)訓(xùn)內(nèi)容

（1）打開(kāi)Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，熟練使用Photoshop軟件。

（2）查看網(wǎng)上其它網(wǎng)站的網(wǎng)頁(yè)，了解網(wǎng)頁(yè)對(duì)象分布的基本情況。

（3）打開(kāi)上次保存好的Photoshop源文件，在上次完成的基礎(chǔ)上，準(zhǔn)備開(kāi)始制作本次的網(wǎng)頁(yè)內(nèi)容和網(wǎng)頁(yè)版權(quán)聲明。

（4）根據(jù)網(wǎng)站策劃方案里的主色調(diào)和主題的要求，選擇灰色與深藍(lán)色作為邊框顏色，網(wǎng)頁(yè)內(nèi)容標(biāo)題文字顏色為黑色。

（5）以制作通知公告為例，使用文字工具輸入文字“通知公告”，文字大小為14號(hào)，文字顏色為黑色，文字字體為“宋體或者黑體”，根據(jù)自己的理解，可以為文字增加“混合選項(xiàng)”，設(shè)置文字效果。（6）新建圖層，選擇“線條工具”，線條粗細(xì)為1 像素，顏色為黑色或者深藍(lán)色都可以，繪制一條直線。

（7）新建圖層，選擇“圓角矩形工具”，半徑為50 像素，顏色為黑色或者深藍(lán)色。

（8）新建圖層，選擇“文字工具”，在剛才繪制好的圓角矩形上輸入“More”，文字大小是12，顏色為白色，字體為“Arial”。

（9）使用同樣的辦法可以制作完成其他網(wǎng)頁(yè)內(nèi)容部分的標(biāo)題。（10）保存文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

（2）實(shí)訓(xùn)不分小組，要求每位同學(xué)均能獨(dú)立地完全相關(guān)實(shí)訓(xùn)的設(shè)計(jì)與制作。（3）教學(xué)實(shí)訓(xùn)除了驗(yàn)證課程理論外，還要求學(xué)生掌握網(wǎng)絡(luò)資源的搜索與應(yīng)用。（4）除了教師的指導(dǎo)外，還要著重培養(yǎng)學(xué)生自學(xué)的能力。

第7頁(yè) 《網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書(shū)

實(shí)訓(xùn)六 對(duì)案例網(wǎng)站版面切圖

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Photoshop軟件的使用方法。（2）掌握網(wǎng)站版面設(shè)計(jì)的方法。（3）對(duì)案例網(wǎng)站版面進(jìn)行切圖。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Photoshop軟件切片工具的使用方法。（2）查看網(wǎng)絡(luò)上相關(guān)網(wǎng)站網(wǎng)頁(yè)。

（3）根據(jù)小組討論結(jié)果，實(shí)際動(dòng)手對(duì)網(wǎng)站版面進(jìn)行切圖。

4、實(shí)訓(xùn)內(nèi)容

（1）打開(kāi)Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，熟練使用Photoshop軟件。

（2）查看網(wǎng)上其它網(wǎng)站的網(wǎng)頁(yè)，了解網(wǎng)頁(yè)對(duì)象分布的基本情況。

（3）打開(kāi)制作好的網(wǎng)站版面源文件，使用切片工具準(zhǔn)備對(duì)版面進(jìn)行切圖。（4）使用參考線將網(wǎng)站版面部分之間進(jìn)行分割。（5）使用切片工具對(duì)網(wǎng)站版面進(jìn)行切割。

（6）切圖完成后，選擇“文件”——“存儲(chǔ)為WEB所用格式”，存儲(chǔ)文件類(lèi)型可以選擇“JPEG”或者“GIF”。（7）整理保存好的文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

（2）實(shí)訓(xùn)不分小組，要求每位同學(xué)均能獨(dú)立地完全相關(guān)實(shí)訓(xùn)的設(shè)計(jì)與制作。（3）教學(xué)實(shí)訓(xùn)除了驗(yàn)證課程理論外，還要求學(xué)生掌握網(wǎng)絡(luò)資源的搜索與應(yīng)用。（4）除了教師的指導(dǎo)外，還要著重培養(yǎng)學(xué)生自學(xué)的能力。

第8頁(yè) 《網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書(shū)

實(shí)訓(xùn)七 制作完成案例網(wǎng)站首頁(yè)

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Dreamweaver軟件的使用方法。（2）掌握使用表格布局網(wǎng)頁(yè)的方法。（3）制作完成案例網(wǎng)站首頁(yè)。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Dreamweaver軟件的使用方法。（2）查看網(wǎng)絡(luò)上相關(guān)網(wǎng)站網(wǎng)頁(yè)。

（3）根據(jù)小組討論結(jié)果，實(shí)際動(dòng)手完成案例網(wǎng)站首頁(yè)。

4、實(shí)訓(xùn)內(nèi)容

（1）預(yù)覽實(shí)訓(xùn)網(wǎng)頁(yè)。

（2）在D盤(pán)根目錄下新建一個(gè)文件夾“home”，在該文件夾中分別新建“css”、“images”，“html”三個(gè)文件夾，（3）打開(kāi)Dreamweaver軟件，將“home”文件夾定義為站點(diǎn)。

（4）創(chuàng)建一個(gè)命名為“index.html”的網(wǎng)頁(yè)文檔，設(shè)置網(wǎng)頁(yè)的頁(yè)面屬性。（5）根據(jù)網(wǎng)頁(yè)首頁(yè)效果圖，插入表格，進(jìn)行表格的嵌套，完成網(wǎng)頁(yè)首頁(yè)的布局。（6）在網(wǎng)頁(yè)插入的表格中輸入文字、水平線和日期等內(nèi)容，設(shè)置文本的屬性。（7）在網(wǎng)頁(yè)中插入圖像，設(shè)置圖像的屬性。

（8）創(chuàng)建CSS樣式表文件，分別定義需要添加效果的不同CSS樣式。（9）在網(wǎng)頁(yè)上分別應(yīng)用不同的CSS樣式。（10）保存網(wǎng)頁(yè)文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

（2）實(shí)訓(xùn)不分小組，要求每位同學(xué)均能獨(dú)立地完全相關(guān)實(shí)訓(xùn)的設(shè)計(jì)與制作。（3）教學(xué)實(shí)訓(xùn)除了驗(yàn)證課程理論外，還要求學(xué)生掌握網(wǎng)絡(luò)資源的搜索與應(yīng)用。（4）除了教師的指導(dǎo)外，還要著重培養(yǎng)學(xué)生自學(xué)的能力。

第9頁(yè) 《網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書(shū)

實(shí)訓(xùn)八 案例網(wǎng)站模板的制作

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Dreamweaver軟件的使用方法。（2）掌握網(wǎng)頁(yè)模板的制作方法。

（3）掌握使用網(wǎng)頁(yè)模板創(chuàng)建網(wǎng)頁(yè)的方法。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Dreamweaver軟件的使用方法。（2）查看網(wǎng)絡(luò)上相關(guān)網(wǎng)站網(wǎng)頁(yè)。

（3）根據(jù)小組討論結(jié)果，實(shí)際動(dòng)手制作網(wǎng)頁(yè)模板。

4、實(shí)訓(xùn)內(nèi)容（1）根據(jù)下發(fā)的“二級(jí)網(wǎng)頁(yè).jpg”，在Photoshop軟件中設(shè)計(jì)完成二級(jí)網(wǎng)頁(yè)版面，并且切圖制作網(wǎng)頁(yè)。

（2）查看網(wǎng)上其它網(wǎng)站的網(wǎng)頁(yè)，了解網(wǎng)頁(yè)對(duì)象分布的基本情況。

（3）在Dreamweaver軟件中打開(kāi)制作好的二級(jí)網(wǎng)頁(yè)，選擇“文件”—“另存為模板”，將制作好的網(wǎng)頁(yè)轉(zhuǎn)化為模板文件。（4）在創(chuàng)建好的模板網(wǎng)頁(yè)上插入“可編輯區(qū)域”，根據(jù)需要可以插入多個(gè)可編輯區(qū)域。

（5）也可以選擇“文件”—“新建”—“模板文件”，重新創(chuàng)建一個(gè)新的模板文件，跟制作網(wǎng)頁(yè)的方法一樣，制作完成模板網(wǎng)頁(yè)后，一定要在模板網(wǎng)頁(yè)中插入可編輯區(qū)域。

（6）選擇“文件”—“模板”，選擇創(chuàng)建好的網(wǎng)頁(yè)模板，選擇“由模板創(chuàng)建”，利用制作好的模板來(lái)生成網(wǎng)頁(yè)。

（7）在生成的網(wǎng)頁(yè)中的可編輯區(qū)域中添加相應(yīng)的網(wǎng)頁(yè)內(nèi)容。（8）對(duì)創(chuàng)建好的網(wǎng)頁(yè)模板進(jìn)行編輯，并且進(jìn)行更新。（9）整理保存好的文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

（2）實(shí)訓(xùn)不分小組，要求每位同學(xué)均能獨(dú)立地完全相關(guān)實(shí)訓(xùn)的設(shè)計(jì)與制作。（3）教學(xué)實(shí)訓(xùn)除了驗(yàn)證課程理論外，還要求學(xué)生掌握網(wǎng)絡(luò)資源的搜索與應(yīng)用。（4）除了教師的指導(dǎo)外，還要著重培養(yǎng)學(xué)生自學(xué)的能力。

第10頁(yè) 《網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書(shū)

實(shí)訓(xùn)九 案例網(wǎng)頁(yè)超級(jí)鏈接的添加

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Dreamweaver軟件的使用方法；（2）掌握網(wǎng)頁(yè)超連接的添加和設(shè)置方法；（3）創(chuàng)建完成案例網(wǎng)頁(yè)的超連接。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Dreamweaver軟件的使用方法。（2）查看網(wǎng)絡(luò)上相關(guān)網(wǎng)站網(wǎng)頁(yè)。

（3）根據(jù)小組討論結(jié)果，實(shí)際動(dòng)手創(chuàng)建網(wǎng)頁(yè)超鏈接。

4、實(shí)訓(xùn)內(nèi)容

（1）根據(jù)設(shè)計(jì)好的二級(jí)網(wǎng)頁(yè)版面，制作網(wǎng)頁(yè)模板。（2）打開(kāi)Dreamweaver軟件使用創(chuàng)建的二級(jí)網(wǎng)頁(yè)模板來(lái)創(chuàng)建主頁(yè)的新聞網(wǎng)頁(yè)。（3）根據(jù)首頁(yè)新聞鏈接標(biāo)題內(nèi)容，選擇新聞網(wǎng)頁(yè)內(nèi)容，并將新聞內(nèi)容添加到使用網(wǎng)頁(yè)模板生成的新聞網(wǎng)頁(yè)中。

（4）為首頁(yè)新聞文字添加文字超鏈接。

（5）在創(chuàng)建新聞網(wǎng)頁(yè)的模板文件中添加返回首頁(yè)的鏈接。（6）更新網(wǎng)頁(yè)。

（7）根據(jù)首頁(yè)導(dǎo)航條內(nèi)容，選擇合適的網(wǎng)頁(yè)內(nèi)容，使用二級(jí)網(wǎng)頁(yè)模板生成相應(yīng)網(wǎng)頁(yè)。

（8）為首頁(yè)導(dǎo)航條添加圖片超鏈接，鏈接到相應(yīng)的二級(jí)網(wǎng)頁(yè)。

（9）在創(chuàng)建二級(jí)網(wǎng)頁(yè)的模板文件中創(chuàng)建返回首頁(yè)，以及二級(jí)網(wǎng)頁(yè)之間互相鏈接的超鏈接。

（10）更新網(wǎng)頁(yè)。（11）為首頁(yè)添加郵件鏈接、錨點(diǎn)鏈接、跳轉(zhuǎn)菜單鏈接、下載鏈接等其他超鏈接。（12）測(cè)試網(wǎng)頁(yè)超鏈接，保存相關(guān)文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

（2）實(shí)訓(xùn)不分小組，要求每位同學(xué)均能獨(dú)立地完全相關(guān)實(shí)訓(xùn)的設(shè)計(jì)與制作。（3）教學(xué)實(shí)訓(xùn)除了驗(yàn)證課程理論外，還要求學(xué)生掌握網(wǎng)絡(luò)資源的搜索與應(yīng)用。（4）除了教師的指導(dǎo)外，還要著重培養(yǎng)學(xué)生自學(xué)的能力。

第11頁(yè) 《網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書(shū)

實(shí)訓(xùn)十 案例網(wǎng)站加入動(dòng)態(tài)元素

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Flash軟件的使用方法；（2）掌握創(chuàng)建滾動(dòng)效果的方法；（3）為案例網(wǎng)站加入動(dòng)態(tài)效果。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Dreamweaver軟件和Flash軟件的使用方法。（2）實(shí)際動(dòng)手為網(wǎng)站首頁(yè)制作一個(gè)Flash動(dòng)畫(huà)。

（3）為首頁(yè)增加新聞動(dòng)態(tài)滾動(dòng)效果，以及圖片動(dòng)態(tài)滾動(dòng)效果。

4、實(shí)訓(xùn)內(nèi)容

（1）打開(kāi)Flash軟件，熟悉Flash軟件的使用方法。

（2）使用Flash軟件創(chuàng)建一個(gè)簡(jiǎn)單動(dòng)畫(huà)，比如圖片之間的簡(jiǎn)單切換。（3）打開(kāi)Dreamweaver軟件，將Flash中生成的SWF格式動(dòng)畫(huà)文件插入到網(wǎng)頁(yè)中，設(shè)置動(dòng)畫(huà)屬性。

（4）熟悉鏈接網(wǎng)頁(yè)源代碼的編寫(xiě)方法，掌握基本的網(wǎng)頁(yè)代碼標(biāo)簽。（5）在“通知公告”中給網(wǎng)頁(yè)新聞添加由下向上的動(dòng)態(tài)滾動(dòng)效果。（6）在“專(zhuān)業(yè)展板”中給圖片添加由右向左的動(dòng)態(tài)滾動(dòng)效果。（7）測(cè)試網(wǎng)頁(yè)效果，整理保存好的文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

（2）實(shí)訓(xùn)不分小組，要求每位同學(xué)均能獨(dú)立地完全相關(guān)實(shí)訓(xùn)的設(shè)計(jì)與制作。（3）教學(xué)實(shí)訓(xùn)除了驗(yàn)證課程理論外，還要求學(xué)生掌握網(wǎng)絡(luò)資源的搜索與應(yīng)用。（4）除了教師的指導(dǎo)外，還要著重培養(yǎng)學(xué)生自學(xué)的能力。

第12頁(yè)

第二篇：《網(wǎng)頁(yè)設(shè)計(jì)與制作》綜合實(shí)訓(xùn)

《網(wǎng)頁(yè)制作》期末大作業(yè)

一、概述：

要求設(shè)計(jì)并制作一個(gè)表達(dá)某個(gè)主題的網(wǎng)站，通過(guò)網(wǎng)站的制作，綜合運(yùn)用本課程各單元所學(xué)的知識(shí)。網(wǎng)站的內(nèi)容不能是一些素材如圖片、音樂(lè)等的堆積，必須有鮮明的主題。可以從網(wǎng)上下載部分資料，但不能超過(guò)整個(gè)內(nèi)容的30%，更不要指望從網(wǎng)上下一個(gè)完整的網(wǎng)站應(yīng)付老師。總的頁(yè)數(shù)應(yīng)超過(guò)10頁(yè)（一個(gè)包含主題內(nèi)容的htm文件算一頁(yè)）。請(qǐng)同學(xué)們注意不要下載相同的資料，如果出現(xiàn)網(wǎng)頁(yè)內(nèi)容雷同，雙方都要扣分，嚴(yán)重的必須重做。

二、網(wǎng)站內(nèi)容：

自行選擇如下內(nèi)容：科普、科幻知識(shí)；公益形象宣傳；大、中、小學(xué)教學(xué)用動(dòng)畫(huà)形象；奧林匹克體育；環(huán)境保護(hù)；戰(zhàn)爭(zhēng)與和平；求職；校園生活；誠(chéng)信、傳統(tǒng)美德；交通安全；衛(wèi)生與健康；愛(ài)心；教育；新青年；管理；實(shí)用工具等。自己確定一個(gè)主題，整個(gè)網(wǎng)站要突出主題，信息分類(lèi)合理，導(dǎo)航清晰。要求必須有自己創(chuàng)作的內(nèi)容，這些原創(chuàng)內(nèi)容可以是文字、圖片、動(dòng)畫(huà)等。

三、版面及格式：

l、要求圖文并茂，顏色搭配合理，但是圖片及聲音文件不要太大。如果能加入自己創(chuàng)作的動(dòng)態(tài)元素(如Flash，Gif動(dòng)畫(huà)等)將獲得加分。希望充分發(fā)揮自己的創(chuàng)作能力。

2、要求每個(gè)網(wǎng)頁(yè)都使用表格布局。

3、要求網(wǎng)頁(yè)中插入有Web組件，包括懸停按鈕、滾動(dòng)字幕、橫幅廣告管理器等。

4、導(dǎo)航設(shè)計(jì)簡(jiǎn)潔明了，不能有“死鏈接”，要保證能夠在網(wǎng)絡(luò)上瀏覽。

5、自創(chuàng)內(nèi)容越多越好，得分越高。

四、遞交方式：

1、每個(gè)同學(xué)以自己的學(xué)號(hào)姓名建一個(gè)文件夾，上交時(shí)間為18周2、所做網(wǎng)頁(yè)的首頁(yè)文件名必須為index.htm3、所有文件名和目錄名全部使用英文字母和數(shù)字，不得使用漢字或全角符號(hào)，否則，網(wǎng)絡(luò)將出現(xiàn)死鏈接。

4、遞交時(shí)必須把網(wǎng)頁(yè)中所有用到的圖片、聲音、動(dòng)畫(huà)等都一起上傳到服務(wù)器。網(wǎng)頁(yè)的總?cè)萘恳话悴灰笥?MB5、建議將網(wǎng)頁(yè)中的素材分類(lèi)，建立不同的子目錄存放。

五、網(wǎng)頁(yè)評(píng)分標(biāo)準(zhǔn):

整個(gè)網(wǎng)頁(yè)的評(píng)分強(qiáng)調(diào)“自己的創(chuàng)意”，不管主題是什么，也不論是哪一個(gè)欄目的內(nèi)容，如果創(chuàng)意獨(dú)特，有自己鮮明的個(gè)性、觀點(diǎn)，得分較高。

1、主題鮮明，有關(guān)主題的內(nèi)容豐富（30分）

2、原創(chuàng)內(nèi)容豐富，能體現(xiàn)自己的想法，文字流利通順（30分）

3、版面布局合理，整理效果美觀（20分）

4、其他內(nèi)容如友情鏈接、相關(guān)資料等（5分）

5、插入的圖片等素材恰當(dāng)、美觀（5分）

6、技術(shù)含量（使用了各種效果、技術(shù)等）（10分）

六、網(wǎng)頁(yè)制作特別注意事項(xiàng)：

1、網(wǎng)頁(yè)文件名最好全部用英文字母或數(shù)字（不能包含漢字）；

2、整理圖片和其他素材；

3、在與網(wǎng)頁(yè)主文件（index.htm)同級(jí)的目錄中建立子目錄image(圖片）、wave(聲音）、?等，將取得的素材按類(lèi)保存好，在制作網(wǎng)頁(yè)（即編輯HTM文件）時(shí)，必須從這些目錄中插入素材，以保證顯示正確，不能從其他目錄插入，提示另外保存圖片時(shí)，不要改變保存目錄，直接按[確定]即可。同學(xué)們要改變那種在編輯網(wǎng)頁(yè)時(shí)到處找圖片，找到了就往HTML文件中插的壞習(xí)慣(也不管這個(gè)文件在哪里）；

4、作好筆記將對(duì)后期調(diào)試非常有利，從開(kāi)始規(guī)劃起就記錄目錄名、文件名的分配，以便調(diào)試時(shí)節(jié)省時(shí)間。

第三篇：網(wǎng)頁(yè)設(shè)計(jì)綜合實(shí)訓(xùn)

《網(wǎng)頁(yè)制作綜合實(shí)訓(xùn)》考核要求

一、課程考核

采用期末大作業(yè)與形成性考核相結(jié)合的方式。形成性考核占50分，視平時(shí)參加教學(xué)活動(dòng)和作業(yè)完成情況而定；期末大作業(yè)考核占50分，根據(jù)期末大作業(yè)的完成而定。兩方面成績(jī)累計(jì)達(dá)到60分者為及格。

二、大作業(yè)要求

1．學(xué)生獨(dú)立自主地完成源程序量（包含HTML、JavaScript、VBScript各種代碼均算在內(nèi)）在500行以上的動(dòng)態(tài)Web程序。

2．本課程設(shè)計(jì)要求所有的腳本程序最終都可運(yùn)行。

3.本課程設(shè)計(jì)中有關(guān)Web頁(yè)界面設(shè)計(jì)部分可以用快速所見(jiàn)即所得類(lèi)型的開(kāi)發(fā)工具設(shè)計(jì)（比如FrontPage、Dreamweaver等）

4.可以借鑒一些源代碼，但是禁止只對(duì)界面部分修改后冒充獨(dú)立開(kāi)發(fā)產(chǎn)品提交。

5.學(xué)生應(yīng)按時(shí)(十六周前)、認(rèn)真地完成課程設(shè)計(jì)，并作設(shè)計(jì)報(bào)告。

6.大作業(yè)電子稿上傳至課程論壇/班級(jí)論壇！

第四篇：營(yíng)銷(xiāo)-網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)指導(dǎo)書(shū)

《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程設(shè)計(jì)指導(dǎo)書(shū)

《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程設(shè)計(jì)指導(dǎo)書(shū)

設(shè)計(jì)專(zhuān)業(yè)： 設(shè)計(jì)時(shí)間：

一、實(shí)訓(xùn)意義

網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)是教學(xué)過(guò)程中重要的實(shí)踐性教學(xué)環(huán)節(jié)。它是根據(jù)專(zhuān)業(yè)教學(xué)計(jì)劃的要求，在教師指導(dǎo)下對(duì)學(xué)生進(jìn)行的網(wǎng)頁(yè)制作專(zhuān)業(yè)技能的訓(xùn)練，培養(yǎng)學(xué)生綜合運(yùn)用理論知識(shí)分析和解決實(shí)際問(wèn)題的能力，實(shí)現(xiàn)由理論知識(shí)向操作技能的轉(zhuǎn)化，是對(duì)理論與實(shí)踐教學(xué)效果的檢驗(yàn)，也是對(duì)學(xué)生綜合分析能力與獨(dú)立工作能力的培養(yǎng)過(guò)程。因此，加強(qiáng)實(shí)踐教學(xué)環(huán)節(jié)，搞好實(shí)訓(xùn)教學(xué)，對(duì)實(shí)現(xiàn)本專(zhuān)業(yè)的培養(yǎng)目標(biāo)，提高學(xué)生的綜合素有著重要的作用。

二、實(shí)訓(xùn)目的

1．通過(guò)綜合實(shí)訓(xùn)進(jìn)一步鞏固、深化和擴(kuò)展學(xué)生的理論知識(shí)與專(zhuān)業(yè)技能。

（1）掌握規(guī)劃網(wǎng)站的內(nèi)容結(jié)構(gòu)、目錄結(jié)構(gòu)、鏈接結(jié)構(gòu)的方法。（2）熟練掌握網(wǎng)頁(yè)制作軟件Dreamweaver 8的基本操作和使用技能。（3）掌握頁(yè)面的整體控制和頭部?jī)?nèi)容設(shè)置的方法。（4）熟練掌握網(wǎng)頁(yè)頁(yè)面布局的各種方法。

（5）熟練掌握在網(wǎng)頁(yè)中輸入、設(shè)置標(biāo)題和正文文字的方法。

（6）熟練掌握在網(wǎng)頁(yè)中插入圖像、flash動(dòng)畫(huà)、背景音樂(lè)的方法。（7）掌握建立各種形式超級(jí)鏈接的方法。（8）掌握表單網(wǎng)頁(yè)制作方法。（9）掌握網(wǎng)頁(yè)特效的制作方法。

（10）掌握網(wǎng)站測(cè)試的方法。

2．訓(xùn)練和培養(yǎng)學(xué)生獲取信息和處理信息的能力，充分培養(yǎng)和提高學(xué)生的動(dòng)手能力，學(xué)會(huì)通過(guò)網(wǎng)站、書(shū)籍、素材光盤(pán)等方式收集所需的文字資料、圖像資料、flash動(dòng)畫(huà)和網(wǎng)頁(yè)特效等。

3．培養(yǎng)學(xué)生運(yùn)用所學(xué)的理論知識(shí)和技能解決網(wǎng)站開(kāi)發(fā)過(guò)程中所遇到的實(shí)際問(wèn)題的能力及其基本工作素質(zhì)。

4．培養(yǎng)學(xué)生理論聯(lián)系實(shí)際的工作作風(fēng)、嚴(yán)肅認(rèn)真的科學(xué)態(tài)度以及獨(dú)立工作的能力，樹(shù)立自信心。

5．訓(xùn)練和培養(yǎng)團(tuán)隊(duì)協(xié)作精神和共同開(kāi)發(fā)網(wǎng)站的綜合能力。

三、實(shí)訓(xùn)要求

1．實(shí)訓(xùn)參考題：

第1頁(yè)

《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程設(shè)計(jì)指導(dǎo)書(shū)

（1）制作教學(xué)資源網(wǎng)站（2）制作個(gè)人網(wǎng)站。（3）制作班級(jí)網(wǎng)站。（4）制作學(xué)習(xí)網(wǎng)站。（5）制作體育網(wǎng)站。（6）制作旅游網(wǎng)站。（7）制作上海世博會(huì)網(wǎng)站。

2．方式：以小組為單位，每組3－4人；請(qǐng)?jiān)趯?shí)訓(xùn)第一天每個(gè)小組把人員分工情況和選題上交給指導(dǎo)教師。

具體要求如下：

1．動(dòng)手制作網(wǎng)頁(yè)之前，必須認(rèn)真做好網(wǎng)站的需求分析，策劃好網(wǎng)站的主題，規(guī)劃好網(wǎng)站的風(fēng)格和結(jié)構(gòu)，創(chuàng)建完善的目錄結(jié)構(gòu)。

2．制作網(wǎng)頁(yè)前，收集好所需的文字資料、圖像資料、flash動(dòng)畫(huà)和網(wǎng)頁(yè)特效。

3．所創(chuàng)建的網(wǎng)站至少分為二層，包括5個(gè)頁(yè)面。（1）首頁(yè)必須包含有滾動(dòng)的公告牌效果；

（2）網(wǎng)站的各個(gè)頁(yè)面應(yīng)包含有框架網(wǎng)頁(yè)、表單網(wǎng)頁(yè)、表格網(wǎng)頁(yè)、層布局網(wǎng)頁(yè)等；（3）各個(gè)頁(yè)面根據(jù)需要插入合適的圖像和多媒體元素。（4）適當(dāng)采用CSS樣式表修飾各個(gè)頁(yè)面內(nèi)容；

（5）所有頁(yè)面要求內(nèi)容充實(shí)、布局合理、顏色搭配協(xié)調(diào)、美觀大方。（6）各個(gè)頁(yè)面之間導(dǎo)航清晰、鏈接準(zhǔn)確無(wú)誤。

（7）選取個(gè)別頁(yè)面，可以適當(dāng)調(diào)用JavaScript程序，制作網(wǎng)頁(yè)特效。（8）附加內(nèi)容：視各自情況而定，可以制作動(dòng)態(tài)網(wǎng)頁(yè)。

4．網(wǎng)頁(yè)的版面尺寸應(yīng)用符合網(wǎng)頁(yè)設(shè)計(jì)的規(guī)范，網(wǎng)站中所有文件、文件夾的命名應(yīng)規(guī)范，盡量做到字母數(shù)量少，見(jiàn)名知意、容易理解。

5．實(shí)訓(xùn)過(guò)程中既要虛心接受老師的指導(dǎo)，又要充分發(fā)揮主觀能動(dòng)性、獨(dú)立思考、努力鉆研、勤于實(shí)踐、勇于創(chuàng)新。

6．在設(shè)計(jì)過(guò)程中，要嚴(yán)格要求自己，樹(shù)立嚴(yán)密、嚴(yán)謹(jǐn)?shù)目茖W(xué)態(tài)度，必須按時(shí)、保質(zhì)、保量完成實(shí)訓(xùn)任務(wù)。要求獨(dú)立完成規(guī)定的實(shí)訓(xùn)內(nèi)容，不得弄虛作假，不準(zhǔn)抄襲或拷貝他人的網(wǎng)頁(yè)或其他內(nèi)容。

7．小組成員之間，既要分工明確，又要密切合作，培養(yǎng)良好的互助、協(xié)作精神。8．實(shí)訓(xùn)期間，嚴(yán)格遵守學(xué)校的規(guī)章制度，不得遲到、早退、曠課。缺課節(jié)數(shù)達(dá)三分之一以上者，實(shí)訓(xùn)成績(jī)按不及格處理。

9．實(shí)訓(xùn)環(huán)境為Windows XP及以上版本的操作系統(tǒng)，網(wǎng)頁(yè)制作軟件為Dreamweaver 8，根據(jù)需要可以運(yùn)用Fireworks 8處理圖像，運(yùn)用Flash 8制作動(dòng)畫(huà)。

四、實(shí)訓(xùn)步驟

1．實(shí)訓(xùn)準(zhǔn)備、制定實(shí)訓(xùn)計(jì)劃

（1）分組：每一組選定一名組長(zhǎng)，組長(zhǎng)主要負(fù)責(zé)考勤以及與指導(dǎo)教師聯(lián)系。（2）選題：確定網(wǎng)站主題，各小組進(jìn)行分工。

（3）根據(jù)實(shí)訓(xùn)時(shí)間的長(zhǎng)短制定一個(gè)切實(shí)可行的網(wǎng)站開(kāi)發(fā)計(jì)劃。2．準(zhǔn)備素材，搜集與主題相關(guān)的文字、圖像、動(dòng)畫(huà)、音樂(lè)等資料。

3．設(shè)計(jì)網(wǎng)站的內(nèi)容結(jié)構(gòu)、目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)，設(shè)計(jì)首頁(yè)及其頁(yè)面的版式結(jié)構(gòu)。4．創(chuàng)建本地網(wǎng)站，建立網(wǎng)站的目錄結(jié)構(gòu)。5．制作首頁(yè)。6．制作二級(jí)子頁(yè)。

第2頁(yè)

《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程設(shè)計(jì)指導(dǎo)書(shū)

7．制作內(nèi)容頁(yè)。8．創(chuàng)建超級(jí)鏈接。9．測(cè)試與瀏覽網(wǎng)頁(yè)。10．書(shū)寫(xiě)實(shí)訓(xùn)報(bào)告書(shū)。

五、報(bào)告書(shū)寫(xiě)要求

1.通過(guò)報(bào)刊、互聯(lián)網(wǎng)查詢，整理，對(duì)參考資料需要注明來(lái)源地。文章名、作者、報(bào)刊名和期數(shù)、網(wǎng)址等。例如：

[1]郭誠(chéng)忠，電子商務(wù)發(fā)展與我國(guó)的電子商務(wù)總體框架 電子與信息化 2000（1）[2]EvanHirsh，How to TreatCustomer’s Right 2000,10 http://004km.cn/ 2.內(nèi)容應(yīng)包括以下幾個(gè)方面：

1)封面（樣張附后）2)引言

3)系統(tǒng)開(kāi)發(fā)及運(yùn)行環(huán)境 4)制作本網(wǎng)站的設(shè)計(jì)思路

5）繪制出網(wǎng)站的目錄結(jié)構(gòu)和網(wǎng)站的鏈接結(jié)構(gòu)圖（樣圖附后）

6)敘述網(wǎng)站建設(shè)及各頁(yè)面設(shè)計(jì)的過(guò)程（要求各頁(yè)面以圖片的形式存放到文檔合適位置）7）自己對(duì)本網(wǎng)站作一個(gè)全面的評(píng)價(jià)：包括有何特點(diǎn)、存在的問(wèn)題、改進(jìn)意見(jiàn)等。8)總結(jié)：自己對(duì)本次課程設(shè)計(jì)的體會(huì)及收獲。9)參考文獻(xiàn)

10)附：人員組織、分工表，工作進(jìn)度表 3.4.5.字?jǐn)?shù)(不包括圖表等)不得少于3000字。禁止直接抄襲網(wǎng)站或報(bào)刊內(nèi)容。

不允許雷同報(bào)告，發(fā)現(xiàn)后所有雷同以零分記。

六、報(bào)告提交方式

要求提交打印稿(A4紙張，正文宋體五號(hào)字)，并有基本的格式排版，同時(shí)將電子文檔（課程設(shè)計(jì)報(bào)告和網(wǎng)站源代碼）一并打包成.rar文檔，提交到j(luò)uyhlkl@126.com郵箱。

注意：在提交郵件中請(qǐng)注明：班級(jí)、姓名等字樣。

第3頁(yè)

《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程設(shè)計(jì)指導(dǎo)書(shū)

七、時(shí)間要求

在2012年07月25日前提交，過(guò)期不再受理，不記成績(jī)。

2012年5月20日

第4頁(yè)

第五篇：網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)訓(xùn)報(bào)告[范文]

《網(wǎng)頁(yè)設(shè)計(jì)與制作》

實(shí)習(xí)報(bào)告

指導(dǎo)老師：

實(shí)習(xí)地點(diǎn)：

實(shí)習(xí)時(shí)間：

實(shí)習(xí)班級(jí)：

學(xué)生姓名：

一、實(shí)習(xí)目的① 學(xué)會(huì)制作新聞發(fā)布系統(tǒng)。

② 學(xué)會(huì)制作在線調(diào)查系統(tǒng)。

③ 熟悉購(gòu)物網(wǎng)站的主要功能和欄目。

④ 學(xué)會(huì)購(gòu)物網(wǎng)站數(shù)據(jù)庫(kù)表的創(chuàng)建和數(shù)據(jù)庫(kù)連接的創(chuàng)建。

⑤ 學(xué)會(huì)購(gòu)物系統(tǒng)前臺(tái)頁(yè)面制作和后臺(tái)管理制作。

二、實(shí)訓(xùn)內(nèi)容

1.創(chuàng)建數(shù)據(jù)庫(kù)表

① 啟動(dòng)Microsoft Access，執(zhí)行“文件”——“新建”命令，打開(kāi)“新建文件”面板，在面板中單擊“空數(shù)據(jù)庫(kù)”。

② 彈出“文件新建數(shù)據(jù)庫(kù)”對(duì)話框，在對(duì)話框中選擇數(shù)據(jù)庫(kù)保存的路徑，“文件名”文本框中輸入shop。

③ 單擊“創(chuàng)建”按鈕，在對(duì)話框中雙擊“使用設(shè)計(jì)器創(chuàng)建表”選項(xiàng)。

④ 彈出“表1：表”對(duì)話框，在對(duì)話框中輸入“字段名稱(chēng)”和字段所對(duì)應(yīng)的“數(shù)據(jù)類(lèi)型”，將shopID字段設(shè)置為主鍵。

⑤ 執(zhí)行“文件”——“保存”命令，彈出“另存為”對(duì)話框，在對(duì)話框的“表名稱(chēng)”文本框中輸入products。

⑥ 單擊“確定”按鈕，保存表。按以上步驟的方法，創(chuàng)建表fen和admin。

2.創(chuàng)建數(shù)據(jù)庫(kù)連接

新建一個(gè)網(wǎng)頁(yè)文件夾，打開(kāi)IIS信息服務(wù)，創(chuàng)建IIS虛擬目錄，在文件夾安全性把來(lái)賓用戶的權(quán)限修改為完全控制，并導(dǎo)入數(shù)據(jù)庫(kù)。

3.制作購(gòu)物網(wǎng)系統(tǒng)頁(yè)面

① 用index.html創(chuàng)建zhanshi.asp商品分類(lèi)展示頁(yè)，新建站點(diǎn)，導(dǎo)入shop.mdb數(shù)據(jù)庫(kù)文件建立數(shù)據(jù)庫(kù)連接。插入表格并插入圖片、文字，創(chuàng)建記錄集并在表格相應(yīng)位置綁定數(shù)據(jù)。在服務(wù)器行為里為表格設(shè)置重復(fù)區(qū)域，創(chuàng)建記錄集RS2并在左邊的商品分類(lèi)表格里綁定

數(shù)據(jù)，在服務(wù)器行為里為左側(cè)的表格添加重復(fù)區(qū)域和轉(zhuǎn)到詳細(xì)頁(yè)，制作記錄集導(dǎo)航條。

② 用index.html創(chuàng)建xiangxi.asp商品詳細(xì)信息頁(yè)，首先創(chuàng)建記錄集并制作左側(cè)的商品分類(lèi)表格，之后在中間區(qū)域插入表格，在表格中插入圖片、文字，創(chuàng)建記錄集RS2并將數(shù)據(jù)綁定在表格相應(yīng)位置。

③ 用index.html創(chuàng)建denglu.asp商品詳細(xì)信息頁(yè),創(chuàng)建記錄集并制作左側(cè)的商品分類(lèi)表格，在中間區(qū)域插入表單，在表單里插入表格，在表格里插入文字、文本域、表單按鈕，并為表單設(shè)置檢查表單。創(chuàng)建記錄集RS2并在服務(wù)器行為里添加登錄用戶。

④ 用index.html創(chuàng)建fenlei.asp添加商品分類(lèi)頁(yè)，插入表單，在表單里插入文字、文本域、表單按鈕，創(chuàng)建記錄集并在服務(wù)器行為里添加插入記錄和限制對(duì)頁(yè)的訪問(wèn)。再用index.html創(chuàng)建fenleiok.asp,在其中插入表格輸入文字，并設(shè)置返回鏈接。

⑤ 用index.html創(chuàng)建tianjia.asp添加商品頁(yè)，創(chuàng)建記錄集，用插入記錄表單向?qū)?chuàng)建插入記錄表單，在服務(wù)器行為里添加限制對(duì)頁(yè)的訪問(wèn)。再用index.html創(chuàng)建tianjiaok.asp,在其中插入表格輸入文字，并設(shè)置返回鏈接。

⑥ 用index.html創(chuàng)建guanli.asp商品管理頁(yè)，創(chuàng)建記錄集并制作左側(cè)的商品分類(lèi)表格，在中間區(qū)域插入表格并插入文字，創(chuàng)建記錄集RS2并在表格相應(yīng)位置綁定數(shù)據(jù)，為該表格設(shè)置服務(wù)器行為的重復(fù)區(qū)域，制作修改和刪除鏈接，制作記錄集導(dǎo)航條。

⑦ 用tianjia.asp創(chuàng)建xiugai.asp修改頁(yè)面，創(chuàng)建記錄集在對(duì)應(yīng)的文本域中綁定數(shù)據(jù)，把服務(wù)器行為里的插入記錄刪除并添加更新記錄。在服務(wù)器行為里添加限制對(duì)頁(yè)的訪問(wèn)。再用index.html創(chuàng)建xiugaiok.asp,在其中插入表格輸入文字，并設(shè)置返回鏈接。

⑧ 用index.html創(chuàng)建shanchu.asp刪除頁(yè)面,插入表格并插入文字，建立記錄集，在表格相應(yīng)位置綁定數(shù)據(jù)，插入表單和表單按鈕，創(chuàng)建服務(wù)器行為限制對(duì)頁(yè)的訪問(wèn)和刪除記錄。再用index.html創(chuàng)建shanchuok.asp,在其中插入表格輸入文字，并設(shè)置返回鏈接。

三、疑難解惑

① 網(wǎng)頁(yè)不能正常打開(kāi)，電腦用戶權(quán)限沒(méi)有修改，在文件夾安全性把來(lái)賓用戶的權(quán)限修改為完全控制。

② 創(chuàng)建重復(fù)區(qū)域時(shí)，總顯示相同的內(nèi)容，仔細(xì)閱讀教材，發(fā)現(xiàn)創(chuàng)建重復(fù)區(qū)域時(shí)要選中表格，而不是文字內(nèi)容。

③ 登陸頁(yè)面不能登陸，把表格放入表單后，重新登錄，問(wèn)題解決。

④ 創(chuàng)建添加商品頁(yè)面時(shí)，無(wú)法顯示商品分類(lèi)。在插入記錄表單時(shí)，應(yīng)將feileiID“顯

示為”下拉列表中選擇“菜單”，并在“菜單屬性”里的“域”列表中選擇fenlei。

⑤ 修改頁(yè)面點(diǎn)進(jìn)去初始內(nèi)容都一樣，“唯一鍵列”下拉列表中應(yīng)選擇shpID。

⑥ 商品分類(lèi)點(diǎn)進(jìn)去每個(gè)種類(lèi)都一樣，查找原因，發(fā)現(xiàn)記錄集中篩選是shpID，把記錄集中的篩選改為fenleiID解決。

四、實(shí)訓(xùn)心得

經(jīng)過(guò)一周動(dòng)態(tài)網(wǎng)頁(yè)的實(shí)訓(xùn)，使我們對(duì)本學(xué)期的這門(mén)課進(jìn)行了整體的匯總。在這匯總期間，也算是對(duì)自己本學(xué)期的一個(gè)考核，此次實(shí)訓(xùn)暴露出了許多我自身存在的問(wèn)題，同時(shí)也對(duì)自身有了很大的提高。

在這次實(shí)訓(xùn)中，我也有許多收獲。首先，我體會(huì)到了作為一個(gè)計(jì)算機(jī)專(zhuān)業(yè)的人，不會(huì)用DW的痛苦和尷尬。在制作的過(guò)程中遇到問(wèn)題，可以說(shuō)得是困難重重，這畢竟是第一次獨(dú)自制作動(dòng)態(tài)網(wǎng)頁(yè)，難免會(huì)遇到過(guò)各種各樣的問(wèn)題，同時(shí)在制作的過(guò)程中發(fā)現(xiàn)了自己的不足之處，對(duì)以前所學(xué)過(guò)的知識(shí)理解得不夠深刻，掌握得不夠牢固。在此過(guò)程當(dāng)中彌補(bǔ)了我許多知識(shí)上的缺陷，弄清的以前沒(méi)有搞懂的知識(shí)點(diǎn)。經(jīng)過(guò)多番的努力和辛酸，我成功地完成了這次過(guò)程艱辛的實(shí)訓(xùn)，而且我從中體會(huì)到了一種叫做‘成功的喜悅’的感覺(jué)，那種小有成就的興奮是只有置身其中的人才能體會(huì)的。

在實(shí)訓(xùn)過(guò)程中，我更體會(huì)到了基礎(chǔ)知識(shí)的重要性，也許我們正在迷惘，我們是否學(xué)到了東西，但事實(shí)說(shuō)明零零散散的知識(shí)，在項(xiàng)目開(kāi)發(fā)當(dāng)中起到了非常關(guān)鍵的作用，我們不缺少時(shí)間和工具，我們只是缺少經(jīng)驗(yàn)和動(dòng)手能力，如果我們以后能更好的在各方面增長(zhǎng)自己的經(jīng)驗(yàn)，相信我們能在長(zhǎng)長(zhǎng)的就業(yè)隊(duì)伍中脫穎而出的！相信自己，相信未來(lái)。今后我將會(huì)更加努力的學(xué)習(xí)，不斷提高自身素質(zhì)，為我將來(lái)的就業(yè)打下良好的基礎(chǔ)