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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7.必須對頁面元素進(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)容重點突出，頁面設(shè)計要符合追求色彩的搭配、布局和合理性，以及要有一定的創(chuàng)意。

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

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

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

（一）選題的基本原則

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

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

（二）選題范圍

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

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

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

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

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

1.設(shè)計方案。

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

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

(1)切割圖片；(2)制作動畫；(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)制作動態(tài)效果

五、成績考核辦法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

主頁文件名正確

本地 主頁保存位置正確

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

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

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

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

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

內(nèi)容

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

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

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

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

動靜搭配合理

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

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

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

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

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

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

按時提交課程設(shè)計報告（提交報告后評分）

合計 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ī)學(xué)院學(xué)生成績查詢系統(tǒng) 2.花卉市場 3.理發(fā)店 4.洗衣店

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

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

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

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

一、設(shè)計目的

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

二、設(shè)計要求

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

三、需求分析

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

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

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

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

1、網(wǎng)站目錄

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

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

主要代碼：