數(shù)字媒體藝術(shù)專業(yè)《網(wǎng)頁設(shè)計(jì)》課程教學(xué)大綱

本科課程教學(xué)大綱（理論課）一、課程基本信息課程名稱（中文）網(wǎng)頁設(shè)計(jì)（英文）WebsiteDesign課程代碼2040149課程學(xué)分4課程學(xué)時(shí)64理論學(xué)時(shí)32實(shí)踐學(xué)時(shí)32開課學(xué)院藝術(shù)設(shè)計(jì)學(xué)院適用專業(yè)與年級(jí)數(shù)字媒體藝術(shù)專業(yè)二年級(jí)課程類別與性質(zhì)專業(yè)必修課考核方式考查選用教材《完美網(wǎng)頁的視覺設(shè)計(jì)法則》，賈森·貝爾德，978-7-121-14202-4，電子工業(yè)出版社，2011.11第一版是否為馬工程教材否先修課程人機(jī)界面設(shè)計(jì)2040215（4），圖標(biāo)設(shè)計(jì)(1)2040650（2）課程簡介互聯(lián)網(wǎng)已經(jīng)深深融入人們的日常生活、工作中。作為萬維網(wǎng)（WWW）技術(shù)具象化的網(wǎng)頁是普通用戶接觸互聯(lián)網(wǎng)信息的一個(gè)重要而基礎(chǔ)的媒介，是瀏覽器/服務(wù)器系統(tǒng)架構(gòu)的前端表現(xiàn)，在信息架構(gòu)與交互方式上有其獨(dú)特性。本課程主要介紹網(wǎng)頁作為網(wǎng)絡(luò)前端（Front-ends）的視覺設(shè)計(jì)基本方法。課程首先從學(xué)習(xí)基礎(chǔ)、技術(shù)基礎(chǔ)、觀念基礎(chǔ)三個(gè)方面來切入主題，然后通過多個(gè)設(shè)計(jì)實(shí)踐環(huán)節(jié)，包括頁面分析，頁面表現(xiàn)技法，頁面布局設(shè)計(jì)，頁面原型設(shè)計(jì)等內(nèi)容，使學(xué)生初步掌握網(wǎng)頁設(shè)計(jì)的方法；再通過課程設(shè)計(jì)，從理解課題、創(chuàng)意設(shè)計(jì)，到信息設(shè)計(jì)、視覺設(shè)計(jì)、原型設(shè)計(jì)，到提案制作，通過全流程的制作，使學(xué)生對(duì)網(wǎng)頁設(shè)計(jì)的過程有全面的理解。通過本課程的學(xué)習(xí)，使學(xué)生能夠從專業(yè)視角解析網(wǎng)頁，理解網(wǎng)頁結(jié)構(gòu)與元素，并獨(dú)立進(jìn)行初步的常規(guī)網(wǎng)頁設(shè)計(jì)與原型制作。選課建議與學(xué)習(xí)要求本課程適合數(shù)字媒體藝術(shù)專業(yè)、視覺傳達(dá)設(shè)計(jì)專業(yè)或者其他設(shè)計(jì)類專業(yè)的二年級(jí)以上的學(xué)生學(xué)習(xí)，要求學(xué)生具備較豐富的互聯(lián)網(wǎng)使用經(jīng)驗(yàn)，較熟練掌握AdobePhotoshop，AdobeIllustrator等軟件的基本繪圖技巧，具備一定的版式設(shè)計(jì)能力。

二、課程目標(biāo)與畢業(yè)要求（一）課程目標(biāo)類型序號(hào)內(nèi)容知識(shí)目標(biāo)1理解網(wǎng)頁設(shè)計(jì)理論2進(jìn)一步理解跨地域的設(shè)計(jì)風(fēng)格技能目標(biāo)3能進(jìn)行網(wǎng)頁分析4能進(jìn)行網(wǎng)頁各層次的原型設(shè)計(jì)5能制作設(shè)計(jì)提案報(bào)告材料素養(yǎng)目標(biāo)(含課程思政目標(biāo))6進(jìn)一步理解數(shù)字設(shè)計(jì)審美特點(diǎn)7具備數(shù)字版權(quán)意識(shí)，在設(shè)計(jì)實(shí)踐中能夠遵守設(shè)計(jì)規(guī)范8具備自主學(xué)習(xí)的意識(shí)與能力（二）課程支撐的畢業(yè)要求LO1擁護(hù)中國共產(chǎn)黨的領(lǐng)導(dǎo)，堅(jiān)定理想信念，自覺涵養(yǎng)和積極弘揚(yáng)社會(huì)主義核心價(jià)值觀，增強(qiáng)政治認(rèn)同、厚植家國情懷、遵守法律法規(guī)、傳承雷鋒精神，踐行“感恩、回報(bào)、愛心、責(zé)任”八字校訓(xùn)，積極服務(wù)他人、服務(wù)社會(huì)、誠信盡責(zé)、愛崗敬業(yè)。②遵紀(jì)守法，增強(qiáng)法律意識(shí)，培養(yǎng)法律思維，自覺遵守法律法規(guī)、校紀(jì)校規(guī)。LO2具有人文科學(xué)素養(yǎng)，具備從事某項(xiàng)工作或?qū)I(yè)的理論知識(shí)、實(shí)踐能力。⑤能夠?yàn)閿?shù)字媒體產(chǎn)品的界面與內(nèi)容提供設(shè)計(jì)支持。網(wǎng)絡(luò)與多媒體方向能夠?yàn)楫a(chǎn)品與品牌形象的維護(hù)、營銷活動(dòng)等需求提供設(shè)計(jì)支持；游戲與美術(shù)設(shè)計(jì)方向需具備游戲原畫的設(shè)計(jì)能力、游戲角色動(dòng)畫設(shè)計(jì)、特效設(shè)計(jì)、游戲界面設(shè)計(jì)能力。LO4能根據(jù)環(huán)境需要確定自己的學(xué)習(xí)目標(biāo)，并主動(dòng)地通過搜集信息、分析信息、討論、實(shí)踐、質(zhì)疑、創(chuàng)造等方法來實(shí)現(xiàn)學(xué)習(xí)目標(biāo)。②能搜集、獲取達(dá)到目標(biāo)所需要的學(xué)習(xí)資源，實(shí)施學(xué)習(xí)計(jì)劃、反思學(xué)習(xí)計(jì)劃、持續(xù)改進(jìn)，達(dá)到學(xué)習(xí)目標(biāo)。LO5健康發(fā)展：懂得審美、熱愛勞動(dòng)、為人熱忱、身心健康、耐挫折，具有可持續(xù)發(fā)展的能力。③懂得審美，有發(fā)現(xiàn)美、感受美、鑒賞美、評(píng)價(jià)美、創(chuàng)造美的能力。LO8國際視野：具有基本的外語表達(dá)溝通能力與跨文化理解能力，有國際競(jìng)爭與合作的意識(shí)。②理解其他國家歷史文化，有跨文化交流能力。（三）畢業(yè)要求與課程目標(biāo)的關(guān)系畢業(yè)要求指標(biāo)點(diǎn)支撐度課程目標(biāo)對(duì)指標(biāo)點(diǎn)的貢獻(xiàn)度LO1②M7.具備數(shù)字版權(quán)意識(shí)，在設(shè)計(jì)實(shí)踐中能夠遵守設(shè)計(jì)規(guī)范100%LO2⑤H1.理解網(wǎng)頁設(shè)計(jì)理論20%3.能進(jìn)行網(wǎng)頁分析15%4.能進(jìn)行網(wǎng)頁各層次的原型設(shè)計(jì)50%5.能制作設(shè)計(jì)提案報(bào)告材料15%LO4②M8.具備自主學(xué)習(xí)的意識(shí)與能力100%LO5③M6.進(jìn)一步理解數(shù)字設(shè)計(jì)審美特點(diǎn)100%LO8②M2.進(jìn)一步理解跨地域的設(shè)計(jì)風(fēng)格100%三、課程內(nèi)容與教學(xué)設(shè)計(jì)（一）各教學(xué)單元預(yù)期學(xué)習(xí)成果與教學(xué)內(nèi)容1.網(wǎng)頁分析預(yù)期教學(xué)成果：知曉互聯(lián)網(wǎng)、瀏覽器、網(wǎng)站的基本知識(shí)；知曉網(wǎng)頁設(shè)計(jì)的基本概念與所用工具；知曉網(wǎng)站與網(wǎng)頁的基本類型，知曉網(wǎng)頁設(shè)計(jì)的演變過程。能對(duì)跨地域網(wǎng)頁設(shè)計(jì)的異同點(diǎn)進(jìn)行分析、評(píng)價(jià)。能進(jìn)行網(wǎng)頁分析，包括：通過各種技術(shù)手段收集網(wǎng)站基本信息、分析網(wǎng)頁的網(wǎng)格系統(tǒng)、結(jié)構(gòu)與內(nèi)容以及整體與局部尺寸；根據(jù)網(wǎng)站結(jié)構(gòu)繪制頁面框架圖；分析頁面中的設(shè)計(jì)元素的使用情況，辨析頁面框架（frame）與其中的素材；總結(jié)網(wǎng)站功能、交互方式與設(shè)計(jì)特點(diǎn)，總結(jié)瀏覽體驗(yàn)。能進(jìn)行初步的網(wǎng)頁設(shè)計(jì)繪圖：熟悉完整的繪制過程；能進(jìn)行圖案的繪制；能進(jìn)行對(duì)象的精確創(chuàng)建與編輯；能使用智能對(duì)象、形狀圖層與蒙版等非破壞性編輯的方法；能根據(jù)設(shè)計(jì)進(jìn)行色彩的選擇與調(diào)制；能使用多種網(wǎng)頁細(xì)節(jié)表現(xiàn)；學(xué)習(xí)難點(diǎn)：從零散的尺寸中歸納出元素尺寸與間距的規(guī)律，并通過測(cè)量出的尺寸進(jìn)行網(wǎng)頁框架的繪制。把握網(wǎng)頁繪制過程中的像素級(jí)別的細(xì)節(jié)；套用960gs模版；區(qū)別網(wǎng)頁主體與背景。2.登錄頁面設(shè)計(jì)預(yù)期教學(xué)成果：理解網(wǎng)頁布局的基礎(chǔ)理論：常見的固定網(wǎng)頁布局方式與自適應(yīng)布局方式；網(wǎng)頁柵格系統(tǒng)的基本結(jié)構(gòu)；960gs的結(jié)構(gòu)；理解設(shè)計(jì)模式（DesignPattern）的概念，知曉幾種常見的設(shè)計(jì)模式；理解網(wǎng)頁設(shè)中的設(shè)計(jì)規(guī)范能運(yùn)用網(wǎng)頁設(shè)計(jì)理論進(jìn)行根據(jù)課題要求進(jìn)行網(wǎng)頁設(shè)計(jì)：運(yùn)用960gs柵格系統(tǒng)進(jìn)行網(wǎng)頁布局；在頁面設(shè)計(jì)中根據(jù)課題要求靈活應(yīng)用素材；在頁面設(shè)計(jì)中應(yīng)用表單（3.2）；在頁面設(shè)計(jì)中運(yùn)用平面設(shè)計(jì)的四種設(shè)計(jì)原則：對(duì)齊（Alignment）、對(duì)比（Contrast）、重復(fù)（Repetition）、相似（Proximity）；能制作網(wǎng)頁設(shè)計(jì)線框圖的技法、能制作網(wǎng)頁設(shè)計(jì)高保真原型，能初步制作可交互設(shè)計(jì)原型；能初步制作自適應(yīng)頁面。學(xué)習(xí)難點(diǎn)：理解并能夠運(yùn)用表單，能夠正確表單的結(jié)構(gòu)，并且能夠初步考慮表單設(shè)計(jì)中的用戶體驗(yàn)；合理運(yùn)用960gs柵格系統(tǒng)；能夠區(qū)分桌面端與移動(dòng)端網(wǎng)頁的區(qū)別。3.公益性主題網(wǎng)頁設(shè)計(jì)預(yù)期教學(xué)成果：理解網(wǎng)頁設(shè)計(jì)的流程、知道網(wǎng)頁設(shè)計(jì)的常見風(fēng)格；能根據(jù)課題設(shè)計(jì)要求理解設(shè)計(jì)主題；能夠進(jìn)行契合公益主題的設(shè)計(jì)演繹；能進(jìn)行網(wǎng)頁中幾種常見設(shè)計(jì)元素（logo、favicon、icon、header、footer）的設(shè)計(jì)；能進(jìn)行網(wǎng)站導(dǎo)航的設(shè)計(jì)；能進(jìn)行網(wǎng)頁banner的設(shè)計(jì)；能進(jìn)行紙面原型的制作；能使用柵格系統(tǒng)進(jìn)行多欄網(wǎng)頁布局；在設(shè)計(jì)中能妥善處理界面框架、布局、元素、文字、色彩、質(zhì)感等設(shè)計(jì)要素；能夠運(yùn)用網(wǎng)頁設(shè)計(jì)中的設(shè)計(jì)規(guī)范進(jìn)行設(shè)計(jì)。能在設(shè)計(jì)軟件中輸出圖片素材；能使用原型制作軟件制作可以交互設(shè)計(jì)模式（menu，tabs，slideshow）；能夠制作素材與參考圖版權(quán)自查清單；難點(diǎn)：根據(jù)設(shè)計(jì)簡報(bào)歸納出設(shè)計(jì)要點(diǎn)，歸納或者補(bǔ)全設(shè)計(jì)內(nèi)容；能根據(jù)設(shè)計(jì)內(nèi)容選擇合適的設(shè)計(jì)模式的表現(xiàn)形式。4.設(shè)計(jì)提案預(yù)期教學(xué)成果：知道設(shè)計(jì)提案的主要內(nèi)容與方法，知道設(shè)計(jì)成果物提交規(guī)范；能制作網(wǎng)頁mockup，能進(jìn)行版面編排；能進(jìn)行設(shè)計(jì)說明寫作；能進(jìn)行口頭表述設(shè)計(jì)作品創(chuàng)意、創(chuàng)作過程；能根據(jù)預(yù)定的設(shè)計(jì)目標(biāo)對(duì)設(shè)計(jì)進(jìn)行設(shè)計(jì)評(píng)價(jià)；難點(diǎn)：把握設(shè)計(jì)排版的美觀性；使用Axure制作完整的頁面；在設(shè)計(jì)評(píng)價(jià)中能歸納設(shè)計(jì)作品的優(yōu)點(diǎn)與不足。（二）教學(xué)單元對(duì)課程目標(biāo)的支撐關(guān)系課程目標(biāo)教學(xué)單元123456781.網(wǎng)頁分析√√√√2.登錄頁面設(shè)計(jì)√√√3.公益性主題網(wǎng)頁設(shè)計(jì)√√√4.設(shè)計(jì)提案√√（三）課程教學(xué)方法與學(xué)時(shí)分配教學(xué)單元教與學(xué)方式考核方式學(xué)時(shí)分配理論實(shí)踐小計(jì)1.網(wǎng)頁分析教師案例分析、演示操作；學(xué)生實(shí)踐、教師輔導(dǎo)分析報(bào)告4482.登錄頁面設(shè)計(jì)教師案例分析、演示操作；學(xué)生實(shí)踐、教師輔導(dǎo)設(shè)計(jì)作品88163.公益性主題網(wǎng)頁設(shè)計(jì)教師案例分析、演示操作；學(xué)生實(shí)踐、教師輔導(dǎo)設(shè)計(jì)作品1616324.設(shè)計(jì)提案教師案例分析、演示操作；學(xué)生實(shí)踐、教師輔導(dǎo)報(bào)告、視頻448合計(jì)323264（四）課內(nèi)實(shí)驗(yàn)項(xiàng)目與基本要求序號(hào)實(shí)驗(yàn)項(xiàng)目名稱目標(biāo)要求與主要內(nèi)容實(shí)驗(yàn)時(shí)數(shù)實(shí)驗(yàn)類型1網(wǎng)頁分析根據(jù)選題進(jìn)行網(wǎng)頁截圖、信息收集與分析總結(jié)、并制作展板2④2網(wǎng)頁繪制根據(jù)教程進(jìn)行網(wǎng)頁繪制技能的訓(xùn)練2②3登錄頁面設(shè)計(jì)根據(jù)要求進(jìn)行登錄頁面設(shè)計(jì)，包括桌面端與移動(dòng)端6③4原型設(shè)計(jì)應(yīng)用熟悉界面；網(wǎng)格系統(tǒng)的設(shè)置；元素制作；使用母板；制作網(wǎng)頁背景；制作Menu；制作Tabs；制作Slideshow；制作Lightbox；網(wǎng)頁發(fā)布2③5主題網(wǎng)頁設(shè)計(jì)在理解設(shè)計(jì)需求的基礎(chǔ)上，進(jìn)行網(wǎng)站中各個(gè)頁面的視覺設(shè)計(jì)，并使用原型制作軟件完成原型制作。16③6設(shè)計(jì)提案進(jìn)行項(xiàng)目提案簡報(bào)的設(shè)計(jì)，內(nèi)容包括課題要求，設(shè)計(jì)方案說明，設(shè)計(jì)細(xì)節(jié)說明以及網(wǎng)頁原型展示4④實(shí)驗(yàn)類型：①演示型②驗(yàn)證型③設(shè)計(jì)型④綜合型四、課程思政教學(xué)設(shè)計(jì)《網(wǎng)頁設(shè)計(jì)》是數(shù)字媒體藝術(shù)專業(yè)的一門核心課程。本門課程的課程思政設(shè)計(jì)基于OBE理念，對(duì)應(yīng)八項(xiàng)能力中的LO1-2“遵紀(jì)守法”。在“網(wǎng)頁設(shè)計(jì)”課程思政教學(xué)設(shè)計(jì)旨在通過技術(shù)教育與價(jià)值引領(lǐng)的有機(jī)結(jié)合，引導(dǎo)學(xué)生樹立正確的世界觀、人生觀和價(jià)值觀。具體設(shè)計(jì)原則如下：堅(jiān)持黨的領(lǐng)導(dǎo)，弘揚(yáng)社會(huì)主義核心價(jià)值觀，將愛國情懷和家國情懷融入課程教學(xué)中。強(qiáng)化法律意識(shí)，培養(yǎng)學(xué)生自覺遵守法律法規(guī)、校紀(jì)校規(guī)的良好習(xí)慣。結(jié)合課程內(nèi)容，踐行“感恩、回報(bào)、愛心、責(zé)任”八字校訓(xùn)，引導(dǎo)學(xué)生積極服務(wù)他人、服務(wù)社會(huì)；培養(yǎng)學(xué)生的誠信盡責(zé)和愛崗敬業(yè)精神，提高職業(yè)素養(yǎng)和專業(yè)技能，其中重點(diǎn)是具備數(shù)字版權(quán)意識(shí)，在設(shè)計(jì)實(shí)踐中能夠遵守設(shè)計(jì)規(guī)范。在具體教學(xué)環(huán)節(jié)中課程思政設(shè)計(jì)要點(diǎn)：一、網(wǎng)頁分析：引導(dǎo)學(xué)生分析國內(nèi)優(yōu)秀網(wǎng)站，感受中國特色和社會(huì)主義核心價(jià)值觀在網(wǎng)頁設(shè)計(jì)中的體現(xiàn)，增強(qiáng)民族自豪感和文化自信。通過分析國內(nèi)外網(wǎng)頁設(shè)計(jì)的異同點(diǎn)，培養(yǎng)學(xué)生的國際視野和跨文化交流能力。強(qiáng)調(diào)在網(wǎng)頁設(shè)計(jì)中遵守國家互聯(lián)網(wǎng)法律法規(guī)的重要性，引導(dǎo)學(xué)生樹立正確的網(wǎng)絡(luò)道德觀念。二、登錄頁面設(shè)計(jì)：結(jié)合960gs柵格系統(tǒng)的教學(xué)，引導(dǎo)學(xué)生理解并應(yīng)用國家標(biāo)準(zhǔn)和規(guī)范，培養(yǎng)學(xué)生的規(guī)范意識(shí)和嚴(yán)謹(jǐn)作風(fēng)。在設(shè)計(jì)表單時(shí)，注重用戶體驗(yàn)和人文關(guān)懷，引導(dǎo)學(xué)生關(guān)注用戶需求，培養(yǎng)服務(wù)意識(shí)和社會(huì)責(zé)任感。通過桌面端與移動(dòng)端網(wǎng)頁設(shè)計(jì)的比較，引導(dǎo)學(xué)生關(guān)注科技發(fā)展對(duì)國家和社會(huì)的影響，增強(qiáng)科技報(bào)國的使命感。三、公益性主題網(wǎng)頁設(shè)計(jì)：強(qiáng)調(diào)公益性主題網(wǎng)頁設(shè)計(jì)的社會(huì)意義和價(jià)值，引導(dǎo)學(xué)生樹立正確的價(jià)值導(dǎo)向和公益意識(shí)。在設(shè)計(jì)中注重運(yùn)用中國傳統(tǒng)文化元素，弘揚(yáng)中華優(yōu)秀傳統(tǒng)文化，增強(qiáng)學(xué)生的文化自信和民族自豪感。引導(dǎo)學(xué)生關(guān)注弱勢(shì)群體和社會(huì)問題，通過設(shè)計(jì)傳遞愛心和正能量，踐行社會(huì)責(zé)任。四、設(shè)計(jì)提案：通過設(shè)計(jì)提案的實(shí)踐，培養(yǎng)學(xué)生的