視覺傳達(dá)設(shè)計-網(wǎng)頁設(shè)計-課程教學(xué)大綱

【網(wǎng)頁設(shè)計】【W(wǎng)ebDesign】一、基本信息課程代碼：【2040762】課程學(xué)分：【3】面向?qū)I(yè)：【視覺傳達(dá)設(shè)計】課程性質(zhì)：【系級必修課◎】開課院系：藝術(shù)設(shè)計學(xué)院視覺傳達(dá)設(shè)計系使用教材：【《網(wǎng)頁創(chuàng)意設(shè)計》，鐘垂貴主編，中國海洋大學(xué)出版社2015.1】參考書目：【《網(wǎng)頁的吸引力設(shè)計法則》ElliotJayStocks，電子工業(yè)出版社，2011.11】，【《視界·無界：寫給UI設(shè)計師的設(shè)計書》王涵，電子工業(yè)出版社，2016.6】，【UI設(shè)計必修課.Sketch移動界面設(shè)計教程》，李萬軍，電子工業(yè)出版社，2017.9】先修課程：【字體與版式設(shè)計2040219（4），設(shè)計基礎(chǔ)(3)2040599】二、課程簡介網(wǎng)站網(wǎng)頁設(shè)計（webdesign，又稱為WebUIdesign，WUIdesign，WUI），是根據(jù)傳達(dá)需要向?yàn)g覽者傳遞的信息，進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行的頁面設(shè)計美化工作。作為企、事業(yè)單位或者個人、或組織對外宣傳物料的其中一種，精美的網(wǎng)頁設(shè)計，對于提升企、事業(yè)單位或者個人、或組織的互聯(lián)網(wǎng)品牌形象至關(guān)重要。本課程主要介紹網(wǎng)頁作為網(wǎng)絡(luò)前端（Front-ends）的視覺設(shè)計基本方法。課程首先從學(xué)習(xí)基礎(chǔ)、技術(shù)基礎(chǔ)、觀念基礎(chǔ)三個方面來切入主題，然后通過多個設(shè)計實(shí)踐環(huán)節(jié)，包括頁面分析，頁面表現(xiàn)技法，頁面布局設(shè)計，頁面原型設(shè)計等內(nèi)容，使學(xué)生初步掌握網(wǎng)頁設(shè)計的方法；再通過課程設(shè)計，從理解課題、創(chuàng)意設(shè)計，到信息設(shè)計、視覺設(shè)計、原型設(shè)計，到提案制作，通過全流程的制作，使學(xué)生對網(wǎng)頁設(shè)計的過程有全面的理解。通過本課程的學(xué)習(xí)，使學(xué)生能夠從專業(yè)視角解析網(wǎng)頁，理解網(wǎng)頁結(jié)構(gòu)與元素，并獨(dú)立進(jìn)行初步的常規(guī)網(wǎng)頁設(shè)計與原型制作。三、選課建議本課程適合視覺傳達(dá)設(shè)計專業(yè)或者其他設(shè)計類專業(yè)的二年級以上的學(xué)生學(xué)習(xí)，要求學(xué)生具備較豐富的互聯(lián)網(wǎng)使用經(jīng)驗(yàn)，較熟練掌握AdobePhotoshop，AdobeIllustrator等軟件的基本繪圖技巧，具備一定的版式設(shè)計能力。四、課程與專業(yè)畢業(yè)要求的關(guān)聯(lián)性專業(yè)畢業(yè)要求關(guān)聯(lián)LO11：理解他人的觀點(diǎn)，尊重他人的價值觀，能在不同場合用書面或口頭形式進(jìn)行有效溝通。LO111傾聽他人意見、尊重他人觀點(diǎn)、分析他人需求。LO112應(yīng)用書面或口頭形式，闡釋自己的觀點(diǎn)，有效溝通。LO21：能根據(jù)環(huán)境需要確定學(xué)習(xí)目標(biāo)，并主動地通過搜集信息、分析信息、討論、實(shí)踐、質(zhì)疑、創(chuàng)造等方法來實(shí)現(xiàn)學(xué)習(xí)目標(biāo)。LO211能根據(jù)需要自己確定學(xué)習(xí)目標(biāo)，并設(shè)計學(xué)習(xí)計劃。L0212能夠根據(jù)項(xiàng)目設(shè)計需要搜集相關(guān)資料，并根據(jù)設(shè)計需要對所采集的信息進(jìn)行分析LO31：具備設(shè)計素養(yǎng)與審美能力，熟悉設(shè)計行業(yè)的發(fā)展歷程與趨勢，掌握藝術(shù)設(shè)計基本理論，具備設(shè)計基礎(chǔ)、設(shè)計造型的表現(xiàn)能力。LO311掌握藝術(shù)設(shè)計基本理論，并與實(shí)踐相結(jié)合。LO312具備設(shè)計基礎(chǔ)、設(shè)計造型的表現(xiàn)能力，達(dá)到本專業(yè)的設(shè)計要求。LO32：能夠掌握攝影、攝像基本原理，并進(jìn)行拍攝實(shí)踐與后期處理，能夠利用多媒體技術(shù)進(jìn)行個人設(shè)計創(chuàng)作。LO321能夠掌握攝影基本原理，與后期圖片設(shè)計處理與運(yùn)用。LO322能夠掌握攝像基本原理，并進(jìn)行后期拍攝與剪輯。LO33：掌握設(shè)計策劃與創(chuàng)意方法，根據(jù)市場要求，運(yùn)用視覺設(shè)計所需要的手繪和造型技能，進(jìn)行創(chuàng)意設(shè)計。LO331掌握設(shè)計的前期調(diào)研與設(shè)計定位，為后期設(shè)計奠定基礎(chǔ)。LO332提高手繪表現(xiàn)能力，為后期設(shè)計提案，提供有效表現(xiàn)力。LO333運(yùn)用造型能力,具備創(chuàng)意設(shè)計的表現(xiàn)力與執(zhí)行力。LO34：具備項(xiàng)目實(shí)踐能力，了解行業(yè)通行的作業(yè)流程與方法，能夠獨(dú)立執(zhí)行項(xiàng)目設(shè)計與制作。LO341設(shè)計與項(xiàng)目相結(jié)合，提高實(shí)踐能力，與市場緊密結(jié)合，有利于提高學(xué)生對市場的適應(yīng)性。LO342了解行業(yè)的設(shè)計流程與制作工藝。LO35：知曉常用的材料特性及工藝流程，能采用不同材料及工藝，并根據(jù)產(chǎn)品特點(diǎn)進(jìn)行創(chuàng)意與設(shè)計制作。LO351設(shè)計與材料相結(jié)合，有利于加強(qiáng)制作工藝。LO352了解工藝流程，提高設(shè)計制作的不同表現(xiàn)形式，更符合產(chǎn)品形象的表現(xiàn)。LO36：了解多媒體交互設(shè)計的基本知識，能夠應(yīng)用用戶體驗(yàn)原理與交互設(shè)計原理于設(shè)計過程中。LO361掌握網(wǎng)頁設(shè)計、UI設(shè)計的基本原理。LO362與交互設(shè)計相結(jié)合，體現(xiàn)人工智能化。LO41：遵守紀(jì)律、守信守責(zé)；具有耐挫折、抗壓力的能力。（“責(zé)任”為我校校訓(xùn)內(nèi)容之一）L0411遵紀(jì)守法:遵守校紀(jì)校規(guī)，具備法律意識。L0412誠實(shí)守信:為人誠實(shí)，信守承諾，盡職盡責(zé)。(誠實(shí)守信)?LO413愛崗敬業(yè):了解與專業(yè)相關(guān)的法律法規(guī)，在學(xué)習(xí)和社會實(shí)踐中遵守職業(yè)規(guī)范，具備職業(yè)道德操守。?LO414心理健康，能承受學(xué)習(xí)和生活中的壓力。LO51：同群體保持良好的合作關(guān)系，做集體中的積極成員；善于從多個維度思考問題，利用自己的知識與實(shí)踐來提出新設(shè)想。L0511在集體活動中能主動擔(dān)任自己的角色，與其他成員密切合作，共同完成任務(wù)。L0512有質(zhì)疑精神，能有邏輯的分析與批判。L0513能用創(chuàng)新的方法或者多種方法解決復(fù)雜問題或真實(shí)問題。L0514了解行業(yè)前沿知識技術(shù)。LO61：具備一定的信息素養(yǎng)，并能在工作中應(yīng)用信息技術(shù)解決問題。LO611能夠根據(jù)需要進(jìn)行專業(yè)文獻(xiàn)檢索。LO612能夠使用適合的工具來搜集信息，并對信息加以分析、鑒別、判斷與整合。LO613熟練使用計算機(jī)，掌握常用辦公軟件。LO71：愿意服務(wù)他人、服務(wù)企業(yè)、服務(wù)社會;為人熱忱，富于愛心，懂得感恩LO711愛黨愛國:了解祖國的優(yōu)秀傳統(tǒng)文化和革命歷史，構(gòu)建愛黨愛國的理想信念。LO712助人為樂:富于愛心，懂得感恩，具備助人為樂的品質(zhì)。LO713奉獻(xiàn)社會:具有服務(wù)企業(yè)、服務(wù)社會的意愿和行為能力。LO714愛護(hù)環(huán)境:具有愛護(hù)環(huán)境的意識和與自然和諧相處的環(huán)保理念。LO81：具有基本的外語表達(dá)溝通能力與跨文化理解能力，有國際競爭與合作的意識LO811具備外語表達(dá)溝通能力，達(dá)到本專業(yè)的要求。LO812理解其他國家歷史文化，有跨文化交流能力。LO813有國際競爭與合作意識。五、課程目標(biāo)/課程預(yù)期學(xué)習(xí)成果序號課程預(yù)期學(xué)習(xí)成果課程目標(biāo)（細(xì)化的預(yù)期學(xué)習(xí)成果）教與學(xué)方式評價方式1LO1121.1能夠制作網(wǎng)站設(shè)計報告材料教師案例分析、演示操作；學(xué)生實(shí)踐、教師輔導(dǎo)設(shè)計提案報告2L02122.1能夠進(jìn)行網(wǎng)頁分析教師理論授課、演示操作；學(xué)生實(shí)踐、教師輔導(dǎo)網(wǎng)頁分析報告3LO3423.1掌握網(wǎng)頁設(shè)計知識3.2掌握網(wǎng)頁設(shè)計技法與流程教師理論授課、案例分析、演示操作；學(xué)生實(shí)踐、教師輔導(dǎo)網(wǎng)頁設(shè)計作品4LO3614.1能夠使用dreamweaver軟件進(jìn)行網(wǎng)頁的設(shè)計及編排教師演示操作；學(xué)生實(shí)踐、教師輔導(dǎo)網(wǎng)頁設(shè)計作品5LO4135.1具備數(shù)字版權(quán)意識5.2在設(shè)計實(shí)踐中能夠遵守設(shè)計規(guī)范教師講解要點(diǎn),演示操作；學(xué)生實(shí)踐，教師點(diǎn)評1.素材與參考圖使用清單（侵權(quán)自查）2.作品設(shè)置設(shè)計規(guī)范執(zhí)行情況評分點(diǎn)6LO7136.1具備服務(wù)企業(yè)或社會的意識教師講解要點(diǎn)；學(xué)生實(shí)踐，教師點(diǎn)評個人自選主題網(wǎng)站設(shè)計作品六、課程內(nèi)容本課程總課時為48學(xué)時，其中教師課堂授課（含講解、演示、點(diǎn)評等環(huán)節(jié)）學(xué)時約為16學(xué)時；學(xué)生課內(nèi)實(shí)踐環(huán)節(jié)約為32學(xué)時；課外練習(xí)、調(diào)研、閱讀文獻(xiàn)及作業(yè)等時間不計在內(nèi)。序號課時工作任務(wù)知識要求技能要求理論實(shí)踐148網(wǎng)頁分析·了解互聯(lián)網(wǎng)、瀏覽器、網(wǎng)站的基本知識（3.1）·了解網(wǎng)頁設(shè)計的基本概念與所用工具（3.1）·了解網(wǎng)頁設(shè)計的演變過程（3.1）·了解網(wǎng)站與網(wǎng)頁的基本類型（3.1）·能夠收集網(wǎng)站基本信息（2.1）·能夠分析網(wǎng)頁的網(wǎng)格系統(tǒng)、結(jié)構(gòu)與內(nèi)容以及整體與局部尺寸（2.1）·能夠根據(jù)網(wǎng)站繪制頁面框架圖（2.1）·能夠分析頁面中的設(shè)計元素的使用情況，辨析頁面框架（frame）與其中的素材（2.1）·能夠總結(jié)網(wǎng)站功能、交互方式與設(shè)計特點(diǎn)，總結(jié)瀏覽體驗(yàn)（2.1）·掌握網(wǎng)頁繪制的技法：把握完整的繪制過程；圖案的繪制；對象的精確創(chuàng)建與編輯；智能對象、形狀圖層與蒙版等非破壞性編輯的方法；色彩的選擇與調(diào)制；網(wǎng)頁細(xì)節(jié)表現(xiàn)（4.1）難點(diǎn)：·從零散的尺寸中歸納出元素尺寸與間距的規(guī)律，并通過測量出的尺寸進(jìn)行網(wǎng)頁框架的繪制?！ぐ盐站W(wǎng)頁繪制過程中的像素級別的細(xì)節(jié)；套用960gs模版；區(qū)別網(wǎng)頁主體與背景2612Dreamweaver制作網(wǎng)頁技巧能熟悉Dreamweaver的工作環(huán)境（知道）能掌握網(wǎng)頁元素的編輯方法：添加文本、格式化文本、創(chuàng)建列表、插入圖像、文本超鏈接、圖像超鏈接、鼠標(biāo)經(jīng)過圖像（運(yùn)用）能掌握表格的基本操作與屬性設(shè)置（運(yùn)用）能熟悉框架布局網(wǎng)頁的方法（運(yùn)用）能了解行為動作的使用（理解）能熟練操作Dreamweaver軟件能創(chuàng)建并管理站點(diǎn)能創(chuàng)建基本的圖文網(wǎng)頁能在網(wǎng)頁中插入數(shù)據(jù)表格，并編輯表格屬性能在網(wǎng)頁中插入表單及表單對象能在網(wǎng)頁中插入flash、音頻、視頻等多媒體元素能制作框架網(wǎng)頁348個人自選主題網(wǎng)站設(shè)計·了解網(wǎng)頁設(shè)計的流程·了解網(wǎng)頁設(shè)計的常見風(fēng)格·理解設(shè)計主題·掌握理解設(shè)計需求的方法（3.2）·掌握網(wǎng)頁中幾種常見設(shè)計元素（logo、favicon、icon、header、footer）的設(shè)計方法（3.2）·掌握網(wǎng)站導(dǎo)航的設(shè)計方法（3.2）·掌握網(wǎng)頁banner的設(shè)計方法（3.2）·掌握紙面原型的制作方法（3.2）·掌握使用柵格系統(tǒng)進(jìn)行多欄網(wǎng)頁布局的方法（3.2）·在設(shè)計中能夠妥善處理界面框架、布局、元素、文字、色彩、質(zhì)感等設(shè)計要素（3.2）·能在網(wǎng)頁中應(yīng)用CSS樣式能創(chuàng)建CSS樣式規(guī)則美化網(wǎng)頁難點(diǎn)：·根據(jù)設(shè)計簡報歸納出設(shè)計要點(diǎn)，歸納或者補(bǔ)全設(shè)計內(nèi)容；·能夠根據(jù)設(shè)計內(nèi)容選擇合適的設(shè)計模式的表現(xiàn)形式。424設(shè)計提案·了解設(shè)計提案的主要內(nèi)容與方法（1.1）·了解設(shè)計成果物提交規(guī)范（5.2）·能夠制作網(wǎng)頁（1.1）·能夠進(jìn)行版面編排（1.1）·能夠進(jìn)行設(shè)計說明寫作（1.1）·能夠進(jìn)行口頭表述設(shè)計作品創(chuàng)意、創(chuàng)作過程（1.1）·能夠根據(jù)預(yù)定的公益目標(biāo)對設(shè)計進(jìn)行設(shè)計評價（5.1，5.2，6.1）難點(diǎn)：1.設(shè)計排版的美觀性2.使用DW制作完整的頁面3.在設(shè)計評價中能夠歸納設(shè)計作品的優(yōu)點(diǎn)與不足七、課內(nèi)實(shí)驗(yàn)名稱及基本要求序號實(shí)驗(yàn)名稱主要內(nèi)容實(shí)驗(yàn)時數(shù)實(shí)驗(yàn)類型備注1網(wǎng)頁策劃根據(jù)選題進(jìn)行網(wǎng)頁截圖、信息收集與策劃、并制作策劃報告8綜合型第1．2周開設(shè)2網(wǎng)頁制作根據(jù)