網(wǎng)頁設(shè)計教學(xué)大綱

網(wǎng)頁設(shè)計教學(xué)大綱課程英文名WebDesign課程代碼S0504Z76學(xué)分4總學(xué)時64理論學(xué)時24實驗/實踐學(xué)時40課程類別學(xué)科專業(yè)課課程性質(zhì)必修先修課程《字體設(shè)計》《品牌設(shè)計》《版面設(shè)計與軟件應(yīng)用》《計算機(jī)應(yīng)用》等適用專業(yè)視覺傳達(dá)開課學(xué)院藝術(shù)與傳播一、課程地位與課程目標(biāo)（一）課程地位本課程是藝術(shù)設(shè)計專業(yè)本科生必修的專業(yè)方向課程。為了更好地適應(yīng)時代發(fā)展的需要，開發(fā)更有特色的多媒體領(lǐng)域，特此開設(shè)了這門課程。網(wǎng)頁設(shè)計課程是視覺傳達(dá)設(shè)計系的專業(yè)基礎(chǔ)課，也是一門必修課，該課程有64個課時，學(xué)分為4分。在現(xiàn)代信息社會里，為了更好地適應(yīng)時代發(fā)展的需要，開發(fā)更有特色的多媒體領(lǐng)域，特此開設(shè)了這門課程。學(xué)生可以更好地掌握網(wǎng)頁設(shè)計的方法和技巧，提高動手能力，我們借助于多媒體手段、電子機(jī)房、教學(xué)網(wǎng)站等手段，在教學(xué)方法上進(jìn)行了一系列的改革。本課程對設(shè)計學(xué)生計算機(jī)和美學(xué)應(yīng)用能力的培養(yǎng)，實際操作和設(shè)計水平的提高，對畢業(yè)后能迅速適應(yīng)崗位需要、具有可持續(xù)發(fā)展的再學(xué)習(xí)能力，具有很重要的作用。本課程作為藝術(shù)設(shè)計專業(yè)必修課程，主要面向高年級學(xué)生（大四，一般在第7學(xué)期）開設(shè)，課程是集設(shè)計、軟件、策劃、調(diào)研于一體的綜合性交叉性課程，在專業(yè)培養(yǎng)計劃中具有獨特的重要地位，重在培養(yǎng)藝術(shù)設(shè)計專業(yè)學(xué)生對網(wǎng)頁三劍客Dreamweaver、Fireworks、Flash等軟件的操作和使用，基本掌握網(wǎng)站設(shè)計的全過程，并能制作出有專業(yè)水準(zhǔn)的網(wǎng)站。是軟件操作與網(wǎng)站設(shè)計以及個人或企業(yè)品牌策劃的理論與實踐相結(jié)合的能力，為理論教學(xué)與實踐教學(xué)相結(jié)合的“一體化”教學(xué)培養(yǎng)模式提供有益的借鑒與參考。（二）課程目標(biāo)1）知識目標(biāo)：

1．了解WEB站點的工作原理；

2．了解WWW、HTTP、HTML、CSS的定義，概念和作用；3．掌握HTML語言中的各種文本格式、字符格式、段落設(shè)置、列表、表單、框架、多媒體標(biāo)記的作用；4．掌握Dreamweaver應(yīng)用軟件的使用功能；

5．掌握表格、表單的使用；理解對象的定義，及含義；理解DIV的概念；理解屬性CSS與方法的概念；理解和掌握定位和浮動的概念。2）能力目標(biāo)：1．能熟練運用Dreamweaver應(yīng)用軟件；熟練掌握使用絕對和相對URL，創(chuàng)建超鏈接，圖像鏈接，圖像映射的建立方法；

2．學(xué)會運用HTML語言中的標(biāo)記設(shè)置顏色、文本格式和列表；熟練掌握顏色值的配置和背景圖案的設(shè)置方法,熟練掌握字符、鏈接顏色的設(shè)置方法；

3．掌握在網(wǎng)頁中添加CSS、嵌入圖像、聲音、多媒體信息的方法；4．熟練掌握表格的使用方法，學(xué)會利用表格設(shè)布局網(wǎng)頁；掌握框架制作網(wǎng)頁的方法，會使用框架設(shè)計網(wǎng)頁；掌握制作表單的方法，會利用表單建立交互式頁面；

5.基本的視覺設(shè)計形式美法則，布局和編排設(shè)計；6.信息設(shè)計和柵格設(shè)計的配合，可以一目了然；7.與網(wǎng)站文化吻合的網(wǎng)站VI設(shè)計；8．個性化的風(fēng)格設(shè)計。3）素質(zhì)目標(biāo)：

1．具有較強(qiáng)的網(wǎng)頁設(shè)計創(chuàng)意思維、藝術(shù)設(shè)計素質(zhì)。2．具有勤奮學(xué)習(xí)的態(tài)度，嚴(yán)謹(jǐn)求實、創(chuàng)新的工作作風(fēng)；3．具有良好的心理素質(zhì)和職業(yè)道德素養(yǎng)；

4．具有高度責(zé)任心和良好的團(tuán)隊合作精神。二、課程目標(biāo)達(dá)成的途徑與方法突出代碼教學(xué)和模塊化教學(xué)和全多媒體機(jī)房教學(xué)。每個單元經(jīng)過效果展示，步驟演練，反復(fù)實踐和實訓(xùn)拓展等環(huán)節(jié)的學(xué)習(xí)過程。學(xué)生作為網(wǎng)頁設(shè)計師在進(jìn)行網(wǎng)頁設(shè)計之前必須進(jìn)行網(wǎng)站建設(shè)的前期策劃、規(guī)劃設(shè)計、項目組織。需要在了解了網(wǎng)站內(nèi)容、定位及頁面的組織結(jié)構(gòu)之后，才做出網(wǎng)頁設(shè)計的外觀決策。只有到了這一階段，在解決了頁面的結(jié)構(gòu)和功能之后，網(wǎng)頁設(shè)計才能最后開始。網(wǎng)頁設(shè)計并不是單純的平面設(shè)計那么簡單，網(wǎng)頁設(shè)計師不但要考慮到整個網(wǎng)站的總體美觀，更要很好的控制整個網(wǎng)頁的大小，網(wǎng)頁之間的交互，以及不同分辨率的適應(yīng)。學(xué)生以個人網(wǎng)站或某品牌為例，綜合考慮網(wǎng)頁內(nèi)容需求、功能需求、美術(shù)理論、技術(shù)平臺特點等設(shè)計完整的網(wǎng)站產(chǎn)品。教學(xué)方法：1）教師中心的方法，主要包括講授、提問、論證等方法；2）相互作用的方法，包括全班討論、小組討論、同伴教學(xué)、小組設(shè)計等方法；3）個體化的方法，如程序教學(xué)、單元教學(xué)、獨立設(shè)計、計算機(jī)教學(xué)等；4）實踐的方法，包括現(xiàn)場教學(xué)、實驗室學(xué)習(xí)、角色扮演、模擬和游戲、練習(xí)等方法。5）案例化、信息設(shè)計強(qiáng)化設(shè)計教學(xué)6）相關(guān)課程輔助教學(xué)三、課程目標(biāo)與相關(guān)畢業(yè)要求的對應(yīng)關(guān)系課程目標(biāo)課程目標(biāo)對畢業(yè)要求的支撐程度（H、M、L）畢業(yè)要求1畢業(yè)要求2畢業(yè)要求…課程目標(biāo)1HLM課程目標(biāo)2HHM……HML注：1.支撐強(qiáng)度分別填寫H、M或L（其中H表示支撐程度高、M為中等、L為低）；2.不涉及工程教育認(rèn)證的公共基礎(chǔ)課程（含必修和選修）不填寫上表；四、課程主要內(nèi)容與基本要求第一章網(wǎng)頁設(shè)計要點概述了解網(wǎng)頁前期策劃，掌握在網(wǎng)頁設(shè)計與多媒體設(shè)計中的要點及規(guī)范、界面研究、網(wǎng)頁制作程序及方法基礎(chǔ)，包括HTML的基本概念和在網(wǎng)頁中的應(yīng)用。網(wǎng)頁制作常識（了解／理解）

1.1.1網(wǎng)絡(luò)技術(shù)基礎(chǔ)

1.1.2Web瀏覽器

1.1.3IDC服務(wù)技術(shù)基礎(chǔ)

1.2網(wǎng)頁設(shè)計理論

1.2.1網(wǎng)頁配色藝術(shù)

1.2.2網(wǎng)頁布局藝術(shù)

1.3網(wǎng)頁標(biāo)準(zhǔn)化技術(shù)

1.3.1XHTML語言

1.3.2CSS樣式表

1.3.3ECMAScript腳本語言

1.4動態(tài)網(wǎng)頁開發(fā)技術(shù)

1.4.1ASP技術(shù)

1.4.2ASP.NET技術(shù)

1.4.3PHP技術(shù)

1.4.4JSP技術(shù)

1.5網(wǎng)頁設(shè)計軟件

1.5.1FireworksCS4

1.5.2FlashCS4

1.5.3DreamweaverCS4

1.6網(wǎng)站建設(shè)流程

1.6.1網(wǎng)站策劃

1.6.2方案實施

1.6.3后期維護(hù)工作

1.7課堂練習(xí)：配置網(wǎng)站服務(wù)器

1.8課堂練習(xí)：創(chuàng)建Dreamweaver

站點

1.9課堂練習(xí)：創(chuàng)建靜態(tài)網(wǎng)頁

1.10思考與練習(xí)第二章Dreamweaver基礎(chǔ)（熟練掌握）了解DreamweaverMX的主要特點掌握操作界面及基本命令介紹、DreamweaverMX創(chuàng)意技巧與實例第2章設(shè)計網(wǎng)頁元素

2.1設(shè)計網(wǎng)頁文本

2.1.1輸入網(wǎng)頁文本

2.1.2編輯文本屬性

2.1.3文本對象與樣式

2.2設(shè)計網(wǎng)頁圖像

2.2.1插入網(wǎng)頁圖像

2.2.2編輯網(wǎng)頁圖像

2.2.3圖像優(yōu)化與智能更新

2.3添加超級鏈接

2.3.1普通鏈接

2.3.2特殊鏈接

2.4應(yīng)用媒體元素

2.4.1插入Flash內(nèi)容

2.4.2插入音頻

2.5課堂練習(xí)：制作企業(yè)介紹

2.6課堂練習(xí)：制作網(wǎng)頁導(dǎo)航條

2.7課堂練習(xí)：插入透明Flash動畫

2.8思考與練習(xí)第3章數(shù)據(jù)顯示與簡單布局（熟練掌握）

3.1制作數(shù)據(jù)表格

3.1.1創(chuàng)建數(shù)據(jù)表格

3.1.2設(shè)置表格屬性

3.1.3表格標(biāo)簽

3.2管理表格單元

3.2.1調(diào)整單元格尺寸

3.2.2編輯表格單元格

3.2.3表格的進(jìn)階操作

3.3基本布局對象

3.3.1插入Div標(biāo)簽

3.3.2插入APDiv

3.3.3編輯APDiv

3.3.4操作APDiv元素第4章模版及應(yīng)用（掌握）4.1網(wǎng)頁模板

4.2.1創(chuàng)建網(wǎng)頁模板

4.2.2編輯模板

4.2.3應(yīng)用模板第5章樣式表及布局（熟練掌握）5.1XHTML結(jié)構(gòu)基礎(chǔ)

5.1.1XHTML語法規(guī)范

5.1.2標(biāo)簽的類型

5.1.3選擇與編輯標(biāo)簽

5.2CSS樣式表基礎(chǔ)

5.2.1CSS語法規(guī)則

5.2.2選擇器類型

5.2.3選擇方法

5.3應(yīng)用CSS樣式

5.3.1附加樣式表5.3.2新建CSS規(guī)則5.3.3編輯CSS規(guī)則5.4CSS布局技術(shù)5.4.1CSS盒模型5.4.2流動布局技術(shù)5.4.3浮動布局技術(shù)5.4.4定位布局技術(shù)5.5課堂練習(xí)：某品牌網(wǎng)頁第六章fireworks基礎(chǔ)和信息設(shè)計理念，掌握用fireworks設(shè)計基本的網(wǎng)頁平面圖及界面。（熟練掌握）了解fireworks的主要特點，掌握操作界面及基本命令介紹創(chuàng)意技巧與實例。6.1Fireworks技術(shù)基礎(chǔ)6.1.1矢量圖形與位圖圖像6.1.2Fireworks基本操作6.1.3矢量筆觸6.2繪制矢量圖形6.2.1繪制幾何圖形6.2.2設(shè)置圖形筆觸和填充6.3設(shè)計文本6.3.1輸入Fireworks文本6.3.2設(shè)置文本屬性6.4繪制路徑6.4.1繪制和修改路徑6.4.2操作路徑對象6.4.3應(yīng)用路徑文本6.5編輯位圖6.5.1創(chuàng)建與編輯位圖選區(qū)6.5.2編輯位圖尺寸與形狀6.5.3調(diào)整位圖6.6應(yīng)用濾鏡6.6.1調(diào)整顏色6.6.2斜角與浮雕6.6.3陰影與光暈6.6.4模糊6.7創(chuàng)建網(wǎng)頁元素6.7.1創(chuàng)建切片6.7.2創(chuàng)建熱點6.7.3優(yōu)化與導(dǎo)出網(wǎng)頁圖像6.8課堂練習(xí)：設(shè)計網(wǎng)頁Logo6.9課堂練習(xí)：設(shè)計網(wǎng)頁導(dǎo)航6.10思考與練習(xí)第七章Flash基礎(chǔ)（掌握）了解FlashMX的主要特點，掌握操作界面及基本命令介紹、FlashMX創(chuàng)意技巧與實例。7.1繪制矢量圖形7.1.1繪制線條7.1.2繪制圖形7.1.3編輯圖形7.2使用文本7.2.1創(chuàng)建文本7.2.2編輯文本7.2.3設(shè)置文本屬性7.3導(dǎo)入圖像7.3.1導(dǎo)入單個圖層圖像7.3.2將多個圖層圖像導(dǎo)入舞臺7.3.3將多個圖層圖像導(dǎo)入到庫7.4應(yīng)用元件7.4.1創(chuàng)建元件7.4.2編輯元件與實例7.5使用濾鏡7.5.1投影與模糊濾鏡7.5.2發(fā)光與斜角濾鏡7.5.3調(diào)整顏色濾鏡7.6應(yīng)用圖層7.6.1混合模式7.6.2特殊圖層7.6.3文本與圖層7.7課堂練習(xí)：制作背景圖像7.8課堂練習(xí)：制作特效文字7.9思考與練習(xí)第8章制作網(wǎng)頁動畫Flash（掌握）8.1時間軸與幀8.1.1時間軸8.1.2幀類型8.1.3編輯幀8.2逐幀動畫8.2.1創(chuàng)建逐幀動畫8.2.2通過序列圖像制作逐幀動畫8.3補(bǔ)間形狀動畫8.3.1創(chuàng)建補(bǔ)間形狀8.3.2使用形狀提示8.4補(bǔ)間動作動畫8.4.1創(chuàng)建補(bǔ)間動畫8.4.2創(chuàng)建傳統(tǒng)補(bǔ)間動畫8.4.3動畫編輯器8.5圖層動畫8.5.1制作遮罩動畫8.5.2創(chuàng)建引導(dǎo)動畫8.6動畫多媒體8.6.1導(dǎo)入聲音8.6.2導(dǎo)入視頻8.7課堂練習(xí)：制作網(wǎng)頁動畫8.8課堂練習(xí)：制作網(wǎng)頁Banner8.9思考與練習(xí)第九章網(wǎng)頁設(shè)計理念及學(xué)生作業(yè)講評（熟練掌握）了解網(wǎng)頁設(shè)計的設(shè)計理念及各主要軟件的技術(shù)特點；理解網(wǎng)頁設(shè)計的技術(shù)實質(zhì)；掌握常用網(wǎng)頁三劍客制作軟件的使用及制作的流程。網(wǎng)頁設(shè)計理念（熟練掌握）9.1柵格設(shè)計9.2扁平化設(shè)計9.3icon設(shè)計9.4按鈕及界面元素設(shè)計五、課程學(xué)時安排章節(jié)號教學(xué)內(nèi)容學(xué)時數(shù)學(xué)生任務(wù)作業(yè)要求自學(xué)要求討論第一章網(wǎng)頁設(shè)計要點概述及互聯(lián)網(wǎng)現(xiàn)狀4完成收集20個優(yōu)秀網(wǎng)站頁面——PPT課后完成分析其設(shè)計風(fēng)格、布局、顏色、字體等設(shè)計元素。分享收集網(wǎng)頁P(yáng)PT4預(yù)習(xí)網(wǎng)頁元素代碼課后完成第二章第三章設(shè)計網(wǎng)頁元素，簡單表格與復(fù)雜表格12練習(xí)包括詩歌、簡單表格和復(fù)雜表格。課后完成具有形式美感的網(wǎng)頁。代碼的準(zhǔn)確性。第四章第五章站點管理與模版應(yīng)用網(wǎng)頁元素樣式12應(yīng)用div設(shè)計網(wǎng)頁課后完成具有形式美感的網(wǎng)頁。代碼的準(zhǔn)確性。第六章Fireworks8臨摹一個典型的柵格設(shè)計網(wǎng)頁，并設(shè)計個人主頁的首頁課后完成具有形式美感的網(wǎng)頁。代碼的準(zhǔn)確性。第七章第八章Flash8Flash課后完成具有形式美感的網(wǎng)頁。代碼的準(zhǔn)確性。第九章網(wǎng)頁三劍客綜合應(yīng)用16應(yīng)用div設(shè)計個人網(wǎng)站頁面課后完成具有形式美感的網(wǎng)頁。代碼的準(zhǔn)確性。六、實踐環(huán)節(jié)及基本要求序號實驗項目名稱學(xué)時基本要求學(xué)生任務(wù)實驗性質(zhì)實驗類別1通過收集20個優(yōu)秀網(wǎng)站頁面——PPT4分析其設(shè)計風(fēng)格、布局、顏色、字體等設(shè)計元素，對如何合理運用平面設(shè)計要素，提高頁面設(shè)計整合能力做了一些基礎(chǔ)準(zhǔn)備。加強(qiáng)了學(xué)生對網(wǎng)頁的設(shè)計元素以及表現(xiàn)手法的認(rèn)識，提高了設(shè)計審美情趣。演示性必做2練習(xí)包括詩歌、簡單表格和復(fù)雜表格。4能運用html代碼編寫并識別頁面的基本設(shè)計。具有形式美感的網(wǎng)頁。熟練掌握和應(yīng)用html代碼編寫。能識別頁面中的錯誤并修改頁面。驗證性必做3表格網(wǎng)頁設(shè)計，要求有header、footer和導(dǎo)航4包含首頁不少于四個頁面，主題自定。熟練掌握和應(yīng)用表格設(shè)計頁面。驗證性必做4應(yīng)用div塊設(shè)計某品牌網(wǎng)頁4要求有主頁和具體頁面至少兩個頁面。注意代碼和設(shè)計的關(guān)系，應(yīng)用CSS和定位功能。驗證性設(shè)計性必做5用FIRWORKS或PS、AI根據(jù)網(wǎng)格臨摹網(wǎng)頁。4要求有圖片和標(biāo)題、正文、鏈接等綜合性內(nèi)容，文字部分須是從頁面拷貝過來的可編輯的內(nèi)