前端開發(fā)設(shè)計(jì)課程教學(xué)大綱

1、前端開發(fā)設(shè)計(jì)課程教學(xué)大綱課程名稱：Web前端開發(fā)設(shè)計(jì)英文名稱：Web front-end development design課程編碼：X3141701學(xué) 時(shí) 數(shù)：64其中實(shí)踐學(xué)時(shí)數(shù): 0 課外學(xué)時(shí)數(shù)：0學(xué) 分 數(shù)：4.0適用專業(yè)：視覺傳達(dá)設(shè)計(jì)一、課程簡介Web前端開發(fā)設(shè)計(jì)是視覺傳達(dá)設(shè)計(jì)專業(yè)的專業(yè)課程。課程內(nèi)容包括網(wǎng)頁設(shè)計(jì)的基礎(chǔ)知識(shí)和基本流程；網(wǎng)頁制作軟件的相關(guān)操作和網(wǎng)頁設(shè)計(jì)的基本理論；表格、文本、圖像、多媒體、鏈接、層、表單的創(chuàng)建；網(wǎng)頁結(jié)構(gòu)的搭建（HTML）和樣式應(yīng)用（CSS）；網(wǎng)頁界面設(shè)計(jì)的創(chuàng)意方法與程序。通過Web前端開發(fā)設(shè)計(jì)課程的學(xué)習(xí)，使學(xué)生獲得以用戶為中心的設(shè)計(jì)思維，培養(yǎng)學(xué)生具備將技

2、術(shù)與藝術(shù)相結(jié)合的能力，并能夠制作出具有良好用戶體驗(yàn)的網(wǎng)頁。二、課程目標(biāo)與畢業(yè)要求關(guān)系表課程目標(biāo)畢業(yè)要求（一）使學(xué)生掌握以用戶為中心的設(shè)計(jì)思想；掌握網(wǎng)頁設(shè)計(jì)的基本方法與網(wǎng)頁的結(jié)構(gòu)；掌握網(wǎng)頁設(shè)計(jì)的配色；熟練掌握網(wǎng)頁設(shè)計(jì)的基本程序；掌握網(wǎng)頁設(shè)計(jì)的前期準(zhǔn)備；熟練掌握網(wǎng)頁設(shè)計(jì)的創(chuàng)造性思維及不同類型網(wǎng)站的設(shè)計(jì)手法。（一）支撐視覺傳達(dá)設(shè)計(jì)專業(yè)畢業(yè)要求第1點(diǎn)，綜合社會(huì)、媒介、科技、文化及環(huán)境等因素，洞察國內(nèi)外設(shè)計(jì)理論前沿和研究動(dòng)態(tài)，設(shè)計(jì)滿足專業(yè)領(lǐng)域需求的項(xiàng)目，清晰表達(dá)設(shè)計(jì)思想，熟悉設(shè)計(jì)程序與方法，能夠運(yùn)用專業(yè)知識(shí)解決設(shè)計(jì)項(xiàng)目的策劃、創(chuàng)意、組織及實(shí)施，并在設(shè)計(jì)各個(gè)環(huán)節(jié)中體現(xiàn)理性的思維方式與創(chuàng)新意識(shí)。（二）熟練掌

3、握Dreamweaver軟件的基本操作；掌握標(biāo)簽、文本、超鏈接、列表、表格、表單的操作。掌握切圖的方法；掌握CSS樣式引入的三種樣式；字體、文本、邊框、列表、表格、圖片、背景樣式的設(shè)定；通過盒子模型來創(chuàng)建網(wǎng)頁。（二）支撐視覺傳達(dá)設(shè)計(jì)專業(yè)畢業(yè)要求第3點(diǎn)，能夠跟隨媒介與科技發(fā)展，掌握多種專業(yè)軟件、信息手段，針對(duì)具體的設(shè)計(jì)對(duì)象與設(shè)計(jì)要求，分析所使用工具的優(yōu)勢及局限性，利用恰當(dāng)?shù)募夹g(shù)、資源，選用能滿足特定需求的現(xiàn)代工具，并能夠在多平臺(tái)下綜合運(yùn)用。三、課程教學(xué)內(nèi)容、基本要求、重點(diǎn)和難點(diǎn) （一）以用戶為中心的設(shè)計(jì)思想1. 教學(xué)內(nèi)容以用戶為中心的設(shè)計(jì)思想。2. 基本要求（1）了解：生活中的用戶體驗(yàn)；（2）理

4、 解：用戶需求層次分析；設(shè)計(jì)師的審美培養(yǎng)；（3）掌 握：互聯(lián)網(wǎng)產(chǎn)品中的用戶體驗(yàn)；（4）熟練掌握：專業(yè)的設(shè)計(jì)網(wǎng)站風(fēng)格解析；網(wǎng)站的配色。3. 重點(diǎn)和難點(diǎn)（1）重 點(diǎn)：互聯(lián)網(wǎng)產(chǎn)品中的用戶體驗(yàn)；（2）難 點(diǎn)：網(wǎng)站的配色及常用網(wǎng)站類型色彩搭配。（二）網(wǎng)頁界面設(shè)計(jì)1. 教學(xué)內(nèi)容網(wǎng)頁界面設(shè)計(jì)。2. 基本要求（1）了 解：草圖的繪制；（2）理 解：確定網(wǎng)頁的基本風(fēng)格和規(guī)范；（3）掌 握：網(wǎng)頁設(shè)計(jì)的程序；（4）熟 練：網(wǎng)頁設(shè)計(jì)的基本方法；導(dǎo)航欄、主要內(nèi)容、二級(jí)頁面、banner設(shè)計(jì)。3. 重點(diǎn)和難點(diǎn)（1）重 點(diǎn)：導(dǎo)航欄、主要內(nèi)容、二級(jí)頁面、banner設(shè)計(jì)；（2）難 點(diǎn)：通過典型案例，剖析網(wǎng)頁設(shè)計(jì)的程序與基本方

5、法。（三）dreamweawer基本標(biāo)簽1. 教學(xué)內(nèi)容Dreamweaver基本標(biāo)簽。2. 基本要求（1）了 解：什么是HTML；（2）理 解：操作界面及工作區(qū)使用；標(biāo)簽的作用；（3）掌 握：HTML結(jié)構(gòu)；站點(diǎn)的建立；（4）熟練掌握：head標(biāo)簽、title標(biāo)簽、meta標(biāo)簽、style標(biāo)簽、script標(biāo)簽、link標(biāo)簽、body標(biāo)簽、注釋。 3. 重點(diǎn)和難點(diǎn)（1）重 點(diǎn)：標(biāo)簽的語法規(guī)范；相關(guān)標(biāo)簽的應(yīng)用；（2）難 點(diǎn)：HTML結(jié)構(gòu)；用HTML標(biāo)記語言編寫一個(gè)簡單的網(wǎng)頁。（四）文本與列表1. 教學(xué)內(nèi)容文本與列表。2. 基本要求（1）了 解：網(wǎng)頁中的文本類型；列表的作用；（2）理 解：水平線、空

6、格和特殊符號(hào)；（3）掌 握：標(biāo)題、段落、文本標(biāo)簽；塊元素與行內(nèi)元素的特點(diǎn)；有序列表與無序列表；（4）熟練掌握：文本標(biāo)簽的多種樣式設(shè)計(jì)；塊元素與行內(nèi)元素的區(qū)別。3. 重點(diǎn)和難點(diǎn)（1）重 點(diǎn)：粗體、斜體、上標(biāo)、下標(biāo)、下劃線等文本標(biāo)簽的多種樣式設(shè)計(jì)；（2）難 點(diǎn)：利用文本標(biāo)簽，列表標(biāo)簽，進(jìn)行簡單的頁面設(shè)計(jì)。（五）表格、圖片、超鏈接和表單1. 教學(xué)內(nèi)容表格、圖片、超鏈接和表單。2. 基本要求（1）了 解：表格的基本結(jié)構(gòu)；（2）理 解：圖片的格式；超鏈接的標(biāo)簽構(gòu)成；form標(biāo)簽的作用；（3）掌 握：表格的行、列、合并；圖片的標(biāo)簽、路徑；內(nèi)部鏈接、錨點(diǎn)鏈接；form標(biāo)簽屬性；（4）熟練掌握：插入表格、圖片

7、、建立鏈接、表單的方法。3. 重點(diǎn)和難點(diǎn)（1）重 點(diǎn)：插入表格、圖片、建立鏈接、表單的方法；（2）難 點(diǎn)：利用表格、圖片、超鏈接和表單標(biāo)簽，進(jìn)行簡單的頁面設(shè)計(jì)。（六）CSS基礎(chǔ)1. 教學(xué)內(nèi)容CSS基礎(chǔ)。2. 基本要求（1）了 解：CSS樣式三種引入方式；（2）理 解：CSS選擇器的類型；（3）掌 握：字體、文本、邊框、列表、表格、圖片、背景、超鏈接的樣式類型；（4）熟練掌握：字體、文本、邊框、列表、表格、圖片、背景、超鏈接的標(biāo)簽運(yùn)用；3. 重點(diǎn)和難點(diǎn)（1）重 點(diǎn)：字體、文本、邊框、列表、表格、圖片、背景、超鏈接的樣式設(shè)計(jì)；（2）難 點(diǎn)：能運(yùn)用相關(guān)標(biāo)簽設(shè)計(jì)出指定樣式。（七）盒子模型1. 教學(xué)內(nèi)容

8、盒子模型。2. 基本要求（1）了 解：盒子模型的作用；（2）理 解：width和height、border、padding、margin的界定；（3）掌 握：盒子模型相關(guān)標(biāo)簽的書寫規(guī)范；（4）熟練掌握：運(yùn)用盒子模型布局界面。3. 重點(diǎn)和難點(diǎn)（1）重 點(diǎn)：盒子模型相關(guān)標(biāo)簽書寫規(guī)范及設(shè)定；（2）難 點(diǎn)：能運(yùn)用盒子模型進(jìn)行指定樣式網(wǎng)頁界面的布局。四、教學(xué)方式及學(xué)時(shí)分配序號(hào)主要內(nèi)容主要教學(xué)方式學(xué)時(shí)分配輔導(dǎo)答疑比例一以用戶為中心的設(shè)計(jì)思想講授41：1二網(wǎng)頁界面設(shè)計(jì)指導(dǎo)16三dreamweawer基本標(biāo)簽講授4四文本與列表講授4五表格、圖片、超鏈接和表單講授8六CSS基礎(chǔ)講授12七盒子模型及綜合訓(xùn)練講授1

9、6五、課程其他教學(xué)環(huán)節(jié)要求（一）資料收集：1.結(jié)合理論知識(shí)及相關(guān)的課題訓(xùn)練，關(guān)注公眾號(hào)，收集優(yōu)秀的網(wǎng)頁設(shè)計(jì)案例；2.臨摹優(yōu)秀案例，理解網(wǎng)頁布局，色彩搭配等知識(shí)。六、本課程與其他課程的聯(lián)系（一）先修課程：計(jì)算機(jī)輔助設(shè)計(jì)（1）、綜合構(gòu)成基礎(chǔ)、圖形創(chuàng)意與思維、字體與版式設(shè)計(jì)、UI界面設(shè)計(jì)等。（二）后修課程：廣告策劃與表現(xiàn)、畢業(yè)設(shè)計(jì)等。七、建議教材及教學(xué)參考書目（一）教材：無。（二）參考書：1.形色:網(wǎng)頁設(shè)計(jì)法則及實(shí)例指導(dǎo) 姜鵬著 人民郵電出版社 2017年 第一版；2.Web前端開發(fā)精品課HTML:CSS JavaScript基礎(chǔ)教程 莫振杰著 人民郵電出版社 2017年 第一版； 3.形式感+:網(wǎng)頁視覺設(shè)計(jì)創(chuàng)意拓展與快速表現(xiàn) 晉小彥著 清華大學(xué)出版社 2014年 第一