《網(wǎng)站與網(wǎng)頁(yè)設(shè)計(jì)》課程教學(xué)大綱

“網(wǎng)站與網(wǎng)頁(yè)設(shè)計(jì)”課程教學(xué)大綱課程編號(hào)：08072020課程名稱：網(wǎng)站與網(wǎng)頁(yè)設(shè)計(jì)/Websiteandwebdesign學(xué)時(shí)：32 學(xué)分：2適用專業(yè)：計(jì)算機(jī)科學(xué)與技術(shù)、軟件工程、網(wǎng)絡(luò)工程開課學(xué)期：5開課部門：數(shù)計(jì)學(xué)院先修課程：計(jì)算機(jī)文化基礎(chǔ)考核要求：1．平時(shí)考勤：30%；2．考試成績(jī)：70%使用教材及主要參考書：劉增杰主編，《HTML5+CSS3+JAVASCRIPT網(wǎng)頁(yè)設(shè)計(jì)》，清華大學(xué)出版社，2014年一、課程的性質(zhì)和任務(wù)當(dāng)我們使用瀏覽器進(jìn)入互聯(lián)網(wǎng)的虛擬世界，首先映入眼前的便是網(wǎng)站的首頁(yè)，一個(gè)好的首頁(yè)能夠帶動(dòng)瀏覽者的想象情境，增加視覺(jué)感官的想象空間，同時(shí)也決定了網(wǎng)站是否能夠永續(xù)經(jīng)營(yíng)，能否帶來(lái)無(wú)可限量的商機(jī)。如何設(shè)計(jì)和制作出一個(gè)功能強(qiáng)大并吸引人的網(wǎng)站，是網(wǎng)頁(yè)設(shè)計(jì)師和制作者的向往。制作一個(gè)網(wǎng)站需要很多的技術(shù)，包括圖像設(shè)計(jì)和處理、網(wǎng)頁(yè)的動(dòng)畫效果和最終合成網(wǎng)頁(yè)等。這門課程開設(shè)的目的就是讓學(xué)生掌握這些技術(shù)。《網(wǎng)站與網(wǎng)頁(yè)設(shè)計(jì)》是一門操作性和實(shí)踐性很強(qiáng)的課程。本課程的主要內(nèi)容有網(wǎng)頁(yè)編輯與制作軟件FrontPage、DreamweaverMX、HTML基礎(chǔ)知識(shí)、CSS樣式表、JavaScript、網(wǎng)頁(yè)設(shè)計(jì)思想，并簡(jiǎn)單介紹了圖像處理軟件FireworksMX和矢量動(dòng)畫編輯與制作軟件FlashMX。教材體現(xiàn)網(wǎng)頁(yè)制作技術(shù)的特點(diǎn)，注重實(shí)用性和操作性。全書共分入門篇、提高篇、設(shè)計(jì)篇三篇。綜合講述了網(wǎng)頁(yè)制作中的網(wǎng)頁(yè)編輯工具、HTML、Web圖像制作以及網(wǎng)頁(yè)中動(dòng)畫設(shè)計(jì)的基本概念和基本操作技能。書中文字?jǐn)⑹龊?jiǎn)單明了、通俗易懂。由淺入深、循序漸進(jìn)，符合學(xué)習(xí)者的認(rèn)知規(guī)律。書中列舉了大量的實(shí)例，并配套有實(shí)驗(yàn)指導(dǎo)書。利用這些資源可以構(gòu)建全新的教學(xué)模式，最大限度地調(diào)動(dòng)學(xué)生的興趣和自我能動(dòng)性，為學(xué)習(xí)者提供理想的學(xué)習(xí)環(huán)境。二、教學(xué)目的與要求《網(wǎng)站與網(wǎng)頁(yè)設(shè)計(jì)》是計(jì)算機(jī)科學(xué)與技術(shù)專業(yè)開設(shè)的一門很重要的實(shí)踐環(huán)節(jié)課程。通過(guò)本課程學(xué)習(xí)，要求了解當(dāng)今網(wǎng)頁(yè)制作的基本風(fēng)格，理解網(wǎng)頁(yè)制作的全程步驟。掌握網(wǎng)頁(yè)制作和設(shè)計(jì)的基礎(chǔ)知識(shí)，掌握CSS樣式表和動(dòng)態(tài)網(wǎng)頁(yè)JavaScript等綜合運(yùn)用并學(xué)會(huì)網(wǎng)頁(yè)三頁(yè)個(gè)關(guān)鍵軟件工具的使用。課程的教學(xué)要求大體上分為三個(gè)層次：了解、理解和掌握。了解：是能正確判別有關(guān)概念和方法；理解：是能正確表達(dá)有關(guān)概念和方法的含義；掌握：是在理解的基礎(chǔ)上加以靈活應(yīng)用。三、學(xué)時(shí)分配章節(jié)課程內(nèi)容學(xué)時(shí)1網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)22普通主頁(yè)的制作43HTML的認(rèn)識(shí)64CSS樣式表65動(dòng)態(tài)網(wǎng)頁(yè)以及JavaScript26網(wǎng)頁(yè)構(gòu)圖與色彩27網(wǎng)站設(shè)計(jì)思想28網(wǎng)站建設(shè)29Flash與Photoshop的學(xué)習(xí)6四、教學(xué)中應(yīng)注意的問(wèn)題 注意多使用實(shí)例注意培養(yǎng)學(xué)生的實(shí)際動(dòng)手能力五、教學(xué)內(nèi)容

第1章網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)1.基本內(nèi)容：

1.1Internet網(wǎng)簡(jiǎn)介

1.2網(wǎng)頁(yè)的概述

1.3網(wǎng)頁(yè)制作工具

1.4制作前的準(zhǔn)備工作2.教學(xué)基本要求：1.1-1.4要求了解3.教學(xué)重點(diǎn)難點(diǎn)：1.1和1.44.教學(xué)建議：通過(guò)本章學(xué)習(xí)充分調(diào)動(dòng)學(xué)生學(xué)習(xí)積極性第2章普通主頁(yè)的制作1.基本內(nèi)容：2.1制作時(shí)應(yīng)該注意的原則

2.2用FrontPage制作網(wǎng)頁(yè)

2.3用DreamWeaver制作網(wǎng)頁(yè)2.教學(xué)基本要求：2.1和2.2要求了解2.3要求掌握3.教學(xué)重點(diǎn)難點(diǎn)：2.34.教學(xué)建議：重在比較2.2和2.3之后,選擇使用DreamWeaver軟件的用戶較多的原因第3章HTML的認(rèn)識(shí)1.基本內(nèi)容：3.1HTML基本結(jié)構(gòu)

3.2頁(yè)面排版的基本元素

3.3清單列表的設(shè)計(jì)

3.4表格

3.5圖片與多媒體

3.6在網(wǎng)頁(yè)中建立超鏈接

3.7框架網(wǎng)頁(yè)的學(xué)習(xí)

3.8交互網(wǎng)頁(yè)的制作2.教學(xué)基本要求：所有內(nèi)容要求全部掌握3.教學(xué)重點(diǎn)難點(diǎn)：3.4和3.74.教學(xué)建議：不要求個(gè)人寫出完整的HTML代碼,可結(jié)合使用DreamWeaver教學(xué)第4章CSS樣式表1.基本內(nèi)容：

4.1CSS樣式的定義和使用

4.2CSS過(guò)濾器效果

4.3CSS樣式在DreamWeaver中的使用2.教學(xué)基本要求：所有內(nèi)容要求全部掌握3.教學(xué)重點(diǎn)難點(diǎn)：4.34.教學(xué)建議：結(jié)合DreamWeaver中CSS的使用

第5章動(dòng)態(tài)網(wǎng)頁(yè)以及JavaScript1.基本內(nèi)容：

5.1動(dòng)態(tài)網(wǎng)頁(yè)的認(rèn)識(shí)

5.2使用DreamWeaver制作動(dòng)態(tài)網(wǎng)頁(yè)的幾個(gè)特效

5.3JavaScript的使用2.教學(xué)基本要求：學(xué)會(huì)在DreamWeaver中行為的應(yīng)用3.教學(xué)重點(diǎn)難點(diǎn)：5.24.教學(xué)建議：通過(guò)幾個(gè)特效的介紹來(lái)認(rèn)識(shí)JavaScript的使用

第6章網(wǎng)頁(yè)構(gòu)圖與色彩1.基本內(nèi)容：6.1頁(yè)面的重心平衡6.2頁(yè)面色彩以及圖片的格式6.3圖像的優(yōu)化6.4頁(yè)面構(gòu)圖方法6.5文本色彩體系2.教學(xué)基本要求：理解構(gòu)圖和色彩網(wǎng)頁(yè)設(shè)計(jì)中的作用3.教學(xué)重點(diǎn)難點(diǎn)：6.2和6.34.教學(xué)建議：盡量結(jié)構(gòu)網(wǎng)站實(shí)例去比較,建立自己的網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)第7章網(wǎng)站設(shè)計(jì)思想1.基本內(nèi)容：7.1定位網(wǎng)站主題和名稱7.2定位網(wǎng)上CI形象7.3確定欄目和板塊7.4確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)7.5確定網(wǎng)站的整體風(fēng)格和創(chuàng)意設(shè)計(jì)7.6首頁(yè)設(shè)計(jì)7.7版面布局的竅門7.8網(wǎng)頁(yè)設(shè)計(jì)的通用規(guī)則7.9網(wǎng)頁(yè)字體的設(shè)置7.10網(wǎng)頁(yè)中表格的應(yīng)用7.11網(wǎng)頁(yè)設(shè)計(jì)師風(fēng)格的形成2.教學(xué)基本要求：建立起自己的網(wǎng)站設(shè)計(jì)風(fēng)格3.教學(xué)重點(diǎn)難點(diǎn)：7.17.27.47.67.77.104.教學(xué)建議：多展示實(shí)例來(lái)引導(dǎo)學(xué)生建立網(wǎng)站設(shè)計(jì)思想

第8章網(wǎng)站建設(shè)1.基本內(nèi)容：8.1網(wǎng)站設(shè)計(jì)的原則與頁(yè)面風(fēng)格8.2個(gè)人網(wǎng)站的結(jié)構(gòu)8.3網(wǎng)站目錄結(jié)構(gòu)組