第一篇：《網(wǎng)頁設(shè)計(jì)與制作》課程設(shè)計(jì)任務(wù)書(2011-2012-2)

《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)》課程設(shè)計(jì)

課程設(shè)計(jì)是課程教學(xué)中的一項(xiàng)重要內(nèi)容，是完成專業(yè)教學(xué)計(jì)劃，達(dá)到教學(xué)目標(biāo)的重要環(huán)節(jié)，課程設(shè)計(jì)是通過真實(shí)工作任務(wù)或產(chǎn)品設(shè)計(jì)等綜合性較強(qiáng)的實(shí)例而進(jìn)行的實(shí)踐環(huán)節(jié)，它對(duì)幫助學(xué)生全面掌握課堂教學(xué)內(nèi)容，培養(yǎng)學(xué)生實(shí)踐和實(shí)際動(dòng)手能力，培養(yǎng)團(tuán)隊(duì)協(xié)作，人際交往等素質(zhì)的提高具有很重要的意義，《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)》是一門實(shí)用性和實(shí)踐性都很強(qiáng)的課程，課程設(shè)計(jì)應(yīng)占有更重要的地位。

一、課程設(shè)計(jì)任務(wù)

針對(duì)計(jì)算機(jī)各專業(yè)崗位技能要求，進(jìn)行網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)項(xiàng)目工作，培養(yǎng)學(xué)生計(jì)算機(jī)操作的能力和用計(jì)算機(jī)設(shè)計(jì)網(wǎng)站的基本技能，使學(xué)生具備分析問題、用編程思維解決問題的能力，達(dá)到計(jì)算機(jī)初級(jí)網(wǎng)頁設(shè)計(jì)員的水平，使學(xué)生養(yǎng)成既善于獨(dú)立思考，又樂于與人溝通、具備團(tuán)隊(duì)合作意識(shí)的職業(yè)素質(zhì)。

二、課程設(shè)計(jì)目的

課程設(shè)計(jì)總的目的在于加深對(duì)網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)的基本知識(shí)的理解，網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)技能綜合運(yùn)用和提高，通過真實(shí)工作任務(wù)，是學(xué)生能設(shè)計(jì)出有一定水平的網(wǎng)頁并解決培養(yǎng)解決實(shí)際問題的能力，掌握實(shí)際網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)開發(fā)流程和開發(fā)方法。

具體的課程設(shè)計(jì)應(yīng)達(dá)到以下目的：

1．提高學(xué)生在實(shí)際操作中收集信息，對(duì)信息進(jìn)行價(jià)值判斷，進(jìn)行信息整理、加工的能力。

2．在實(shí)際的項(xiàng)目任務(wù)中培養(yǎng)網(wǎng)頁設(shè)計(jì)方面的素養(yǎng)。

3．在實(shí)際的項(xiàng)目任務(wù)中使學(xué)生網(wǎng)頁編程和制作的能力得到提高。4．培養(yǎng)學(xué)生團(tuán)隊(duì)協(xié)作和人際交往方面的能力。5.培養(yǎng)相關(guān)知識(shí)和技能的綜合應(yīng)用能力。

三、課程設(shè)計(jì)的要求

《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)》的課程設(shè)計(jì)課題選擇應(yīng)從專業(yè)網(wǎng)站建設(shè)的實(shí)際出發(fā)。具體要求如下：

1.自選主題，主題內(nèi)容要合法、健康、實(shí)用。

2.學(xué)生是課程設(shè)計(jì)環(huán)節(jié)的主體，教師只起輔助引導(dǎo)、協(xié)調(diào)作用。

3.站點(diǎn)設(shè)計(jì)合理、管理有序、無多余文件和文件夾、大小合適。首頁命名要規(guī)范，存放位置要正確，不可以是zhuye.htm、main.htm、我的主頁.htm等。主頁文件名應(yīng)該使用 1 index。其他文件或文件名命名也要規(guī)范，不使用漢字或帶有空格的名稱。最好是符合各種系統(tǒng)命名規(guī)則。

4.站點(diǎn)至少要有二層結(jié)構(gòu)，頁面數(shù)不得少于6頁； 5.必須包含的布局方式：表格、浮動(dòng)框架。6.網(wǎng)頁中必須適當(dāng)添加行為效果。

7.必須對(duì)頁面元素進(jìn)行合理的CSS設(shè)置，使頁面、文字美觀。8.網(wǎng)頁要有版權(quán)說明； 9.網(wǎng)站主題突出、內(nèi)容豐富；

10.網(wǎng)站與網(wǎng)頁風(fēng)格應(yīng)該協(xié)調(diào)一致，網(wǎng)站結(jié)構(gòu)應(yīng)層次分明，內(nèi)容重點(diǎn)突出，頁面設(shè)計(jì)要符合追求色彩的搭配、布局和合理性，以及要有一定的創(chuàng)意。

11.各頁面設(shè)計(jì)合理、美觀，有創(chuàng)意。不要太花哨或太孩子氣。要有網(wǎng)頁平面設(shè)計(jì)過程，不要只是各種元素的隨意拼湊。圖片動(dòng)畫選用要適合主題，不要在網(wǎng)頁中插入不相干的圖片。適用于各種顯示器的分辨率和顏色。不要太寬，否則顯示器分辨率小時(shí)會(huì)出現(xiàn)水平滾動(dòng)條。

12.各個(gè)頁面之間的鏈接要合理有效，路徑要正確（相對(duì)路徑）； 13.注意網(wǎng)站的大小，圖片保存格式和圖片大小要合適； 14.代碼結(jié)構(gòu)清晰，無垃圾代碼

四、課程設(shè)計(jì)內(nèi)容

（一）選題的基本原則

（1）選題應(yīng)反映本專業(yè)的培養(yǎng)目標(biāo)，符合專業(yè)綜合訓(xùn)練的要求。（2）選題要有利于深化所學(xué)的專業(yè)知識(shí)和拓展所學(xué)的知識(shí)面。

（3）選題的難易程度和工作量要適當(dāng)，保證在規(guī)定的時(shí)間內(nèi)，在教師的指導(dǎo)下，經(jīng)過努力能夠完成。

（二）選題范圍

圍繞本課程的教育目標(biāo)，根據(jù)課程的教學(xué)大綱和教材內(nèi)容，結(jié)合網(wǎng)站在生產(chǎn)、科研、管理、教學(xué)以及日常生活等各個(gè)領(lǐng)域的應(yīng)用都可作為課程設(shè)計(jì)的選題。以下課題可供參考：

1.山西大學(xué)商務(wù)學(xué)院 2.山西大學(xué)商務(wù)學(xué)院學(xué)生會(huì) 3.山西大學(xué)商務(wù)學(xué)院飲食服務(wù)公司 4.山西大學(xué)商務(wù)學(xué)院后勤服務(wù)中心 5.校內(nèi)精品課程網(wǎng)站 6.求職網(wǎng) 7.個(gè)人網(wǎng)站

8.公司網(wǎng)站 9.娛樂性網(wǎng)站 10.旅游網(wǎng)站 11.花卉市場

12.其他類型的網(wǎng)站等等

（三）課程設(shè)計(jì)進(jìn)程表

1.設(shè)計(jì)方案。

(1)潛在訪客群體的需求特點(diǎn)：版式和內(nèi)容的需求；(2)站點(diǎn)目錄結(jié)構(gòu)圖：(3)色彩方案：主色調(diào)、次色調(diào)；(4)布局方案：導(dǎo)航和其他網(wǎng)頁內(nèi)容的位置；

(5)平面設(shè)計(jì)圖：使用Photoshop或Fireworks繪制網(wǎng)頁平面設(shè)計(jì)圖； 2.制作網(wǎng)頁主頁。

(1)切割圖片；(2)制作動(dòng)畫；(3)錄入文字；(4)制作網(wǎng)頁； 3.制作其他頁，完善優(yōu)化網(wǎng)站。(1)優(yōu)化代碼(2)優(yōu)化圖片(3)鏈接各網(wǎng)頁 4.完善優(yōu)化網(wǎng)站。

(1)測試網(wǎng)站(2)優(yōu)化網(wǎng)站(3)制作動(dòng)態(tài)效果

五、成績考核辦法

課程設(shè)計(jì)的考核必須充分重視學(xué)生的創(chuàng)新能力和實(shí)踐能力的培養(yǎng)，全面提高學(xué)生的工作能力和綜合素質(zhì)。考該方法如下：

（1）指導(dǎo)教師在評(píng)分中堅(jiān)持嚴(yán)格要求和實(shí)事求是的原則，根據(jù)學(xué)生在課程設(shè)計(jì)中獨(dú)立完成的實(shí)際情況和評(píng)分標(biāo)準(zhǔn)做出評(píng)定。

（2）采取“結(jié)構(gòu)評(píng)定成績”進(jìn)行成績的綜合評(píng)定，即課程設(shè)計(jì)成績由平時(shí)成績、實(shí)驗(yàn)成績、課程設(shè)計(jì)作品及課程設(shè)計(jì)說明書三部分組成。其中：平時(shí)成績占20%（其中：出勤10%，作業(yè)10%)，實(shí)驗(yàn)10 %，課程設(shè)計(jì)作品占70 %。

第二篇：《網(wǎng)頁制作課程設(shè)計(jì)》任務(wù)書

《網(wǎng)頁制作課程設(shè)計(jì)》任務(wù)書

一、課程設(shè)計(jì)的目的及功能定位：

1.鞏固遠(yuǎn)程站點(diǎn)管理的知識(shí)和技能； 2.鞏固本地站點(diǎn)管理的知識(shí)和技能； 3.鞏固網(wǎng)頁頁面設(shè)計(jì)的知識(shí)和技能； 4.鞏固網(wǎng)頁制作的知識(shí)和技能；

5.培養(yǎng)以上知識(shí)和技能的綜合應(yīng)用能力；

二、課程設(shè)計(jì)總體要求： 1.自己負(fù)責(zé)作品的保存；

2.課程設(shè)計(jì)可以獨(dú)立完成，也可以合作（不多余3人）； 3.申請免費(fèi)域名、免費(fèi)主頁空間，并發(fā)布站點(diǎn)；

4.站點(diǎn)設(shè)計(jì)合理、管理有序、無多余文件和文件夾、大小合適；不要使用媒體（視頻文件）； 5.站點(diǎn)至少要有三層結(jié)構(gòu)，頁面數(shù)不得少于5頁；其中一頁必須是留言板； 6.自選主題，主題內(nèi)容要合法、健康、實(shí)用； 7.網(wǎng)頁要有落款、版權(quán)說明；

8.分析面向的潛在訪客群體的需求特點(diǎn)，選擇內(nèi)容和版式； 9.網(wǎng)站主題突出、內(nèi)容豐富；

10.網(wǎng)站風(fēng)格統(tǒng)一，設(shè)計(jì)適合于主題的LOGO；

11.各頁面設(shè)計(jì)合理、美觀，有創(chuàng)意，適用于各種顯示器的分辨率和顏色； 12.各個(gè)頁面之間的鏈接要合理有效； 13.代碼結(jié)構(gòu)清晰，無垃圾代碼

三、課程設(shè)計(jì)進(jìn)程表： 1.設(shè)計(jì)方案：

(1)潛在訪客群體的需求特點(diǎn)：版式和內(nèi)容的需求；(2)站點(diǎn)目錄結(jié)構(gòu)圖：

(3)色彩方案：主色調(diào)、次色調(diào)；

(4)布局方案：導(dǎo)航和其他網(wǎng)頁內(nèi)容的位置；

(5)平面設(shè)計(jì)圖：使用photoshop繪制網(wǎng)頁平面設(shè)計(jì)圖； 2.制作網(wǎng)頁：(1)切割圖片；(2)制作動(dòng)畫；(3)錄入文字；(4)制作網(wǎng)頁；

3.在課程設(shè)計(jì)的最后一次課上提交課程設(shè)計(jì)報(bào)告和作品。

四、站點(diǎn)結(jié)構(gòu)圖：

五、課程設(shè)計(jì)評(píng)分細(xì)則：

項(xiàng)目 指標(biāo) 分?jǐn)?shù) 3 2 2 2 3 3 2 遠(yuǎn)程站點(diǎn) 有效的主頁空間，并上傳站點(diǎn) 5 分 有效的域名

主頁文件名正確

本地 主頁保存位置正確

站點(diǎn) 站點(diǎn)資源組織（目錄結(jié)構(gòu)）合理 42 分 站點(diǎn)中無多余文件和文件夾

站點(diǎn)中平均網(wǎng)頁大小小于 400K 站點(diǎn)至少有三層

頁面數(shù) 5 — 8 頁（2*5+1*3）

各頁之間跳轉(zhuǎn)方便，各子頁均可返回到主頁 沒有無效鏈接

文字內(nèi)容使用 CSS 樣式表文件控制 合理使用 JavaScript 腳本或行為 合理使用 Js 文件，并含有適當(dāng)?shù)淖⑨?各網(wǎng)頁內(nèi)容合法、健康、實(shí)用

內(nèi)容

網(wǎng)站主題突出、內(nèi)容豐富 分

各網(wǎng)頁主次分明，文章流暢，內(nèi)容正確

網(wǎng)站風(fēng)格統(tǒng)一 LOGO 設(shè)計(jì)新穎、美觀 網(wǎng)頁布局設(shè)計(jì)合理、清晰

網(wǎng)頁 色彩搭配合理平面

動(dòng)靜搭配合理

設(shè)計(jì) 分 圖像、動(dòng)畫設(shè)計(jì)美觀、大方、專業(yè)、有創(chuàng)意

導(dǎo)航設(shè)計(jì)實(shí)用美觀 文字清晰、規(guī)范

適用于各種顯示器分辨率和顏色 瀏覽速度正常

技術(shù) 圖片和動(dòng)畫能夠正常顯示 12 分 代碼結(jié)構(gòu)清晰，無垃圾代碼

表單使用合理，提交后打開瀏覽留言頁； 考勤（缺勤 2 課時(shí)以上不予以評(píng)分）

其它 按時(shí)提交設(shè)計(jì)方案報(bào)告（課設(shè)進(jìn)行第二天前必須提交，否10 分 則不予以評(píng)分）

按時(shí)提交課程設(shè)計(jì)報(bào)告（提交報(bào)告后評(píng)分）

合計(jì) 13 2 3 4 2 3 4 2 2 2 5 2 3 3 5 3 2 3 2 3 3 4 4 3 3 105

六、推薦的主題：

1.肇慶學(xué)院計(jì)算機(jī)學(xué)院學(xué)生成績查詢系統(tǒng) 2.花卉市場 3.理發(fā)店 4.洗衣店

5.肇慶學(xué)院計(jì)算機(jī)科學(xué)學(xué)院學(xué)生會(huì) 6.肇慶學(xué)院飲食服務(wù)公司 7.肇慶學(xué)院后勤服務(wù)中心 8.肇慶學(xué)院求職網(wǎng) 9.個(gè)人網(wǎng)站

八、參考網(wǎng)站：

1.內(nèi)蒙古師范大學(xué)首頁http://004km.cn 4.中華手套網(wǎng)http://004km.cn

第三篇：網(wǎng)頁設(shè)計(jì)與制作課程設(shè)計(jì)

一、設(shè)計(jì)目的

通過一個(gè)月的網(wǎng)頁設(shè)計(jì)學(xué)習(xí)，設(shè)計(jì)一個(gè)簡單的網(wǎng)站來檢測自己的學(xué)習(xí)成果，看看哪些東西還沒有掌握，需要進(jìn)一步的去鞏固！網(wǎng)頁的設(shè)計(jì)區(qū)別于實(shí)體化的一些東西，其多為多媒體的存在，意味著它可以容納更多的信息以及更多的展示形式，網(wǎng)頁設(shè)計(jì)則要求設(shè)計(jì)者具備一些特殊技能以營造特定瀏覽情景。網(wǎng)頁設(shè)計(jì)可以在短時(shí)間內(nèi)增強(qiáng)我們的洞察力以更好察覺使用者的興趣點(diǎn)，只有這樣才能滿足他們的需要。

二、設(shè)計(jì)要求

運(yùn)用所學(xué)的知識(shí)設(shè)計(jì)一個(gè)簡單的網(wǎng)站，類型不限

三、需求分析

網(wǎng)頁設(shè)計(jì)是將技術(shù)性與藝術(shù)性融為一體的創(chuàng)造性活動(dòng)。網(wǎng)頁設(shè)計(jì)是以功能行為第一指導(dǎo)原則，以技術(shù)因素為主要考慮對(duì)象，以完成或?qū)崿F(xiàn)必要的功能為目標(biāo)。近幾年隨著網(wǎng)絡(luò)的發(fā)展而逐漸受到人們的重視，它本身已網(wǎng)絡(luò)為載體，把各種信息以快捷、方便的方式傳達(dá)給受眾，在這種標(biāo)準(zhǔn)的要求下，逐步產(chǎn)生了審

美需求和功能需求等。人們對(duì)美的追求是不斷深入的，網(wǎng)頁設(shè)計(jì)同樣如此。如何使受眾能更好的和有效率地接受網(wǎng)頁上的信息，這就需要從審美方面入手。網(wǎng)頁設(shè)計(jì)的審美需求是對(duì)視覺設(shè)計(jì)美學(xué)的一種繼承和延伸，兩者的表現(xiàn)形式和目的都有一定的相似性。

網(wǎng)頁設(shè)計(jì)的主題為我的籃球網(wǎng)，它是我根據(jù)自己的興趣做出來的網(wǎng)站，內(nèi)容非常簡單，但卻富有深意！它融合了當(dāng)今大多數(shù)青少年朋友的興趣愛好，可以說是一個(gè)大眾化的網(wǎng)站！

四、制作過程的內(nèi)容及結(jié)果

1、網(wǎng)站目錄

打開dreamweaver cs4，建立站點(diǎn)，放到F盤里，在目錄下有images(包括圖片、flash)、scripts、shipin、web（建立的網(wǎng)站）文件夾。如下圖示：

2、我的籃球網(wǎng)（首頁）

主要代碼：