課程簡(jiǎn)介
Course Introduction
教學(xué)大綱
Teaching Syllabus
《教育網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》課程教學(xué)大綱
一,、課程基本信息
（一）課程代碼及課程名稱
1.課程代碼:08193151
2.課程名稱（中/英文）: 教育網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)（Educational web design and website construction）
（二）課程類別及課程性質(zhì)
專業(yè)限選課
（三）學(xué)時(shí)及學(xué)分:
總學(xué)時(shí)數(shù):48,；總學(xué)分?jǐn)?shù):3。
其中,，講授學(xué)時(shí):32 ，實(shí)踐（實(shí)驗(yàn)）學(xué)時(shí):16,。
（四）適用專業(yè)及開設(shè)學(xué)期
適用專業(yè):教育技術(shù)學(xué)（本科）
開設(shè)學(xué)期:第4學(xué)期
（五）先修課程與后續(xù)課程
先修課程:圖像編輯技術(shù),、數(shù)據(jù)庫(kù)技術(shù)基礎(chǔ)、網(wǎng)絡(luò)技術(shù)基礎(chǔ)
后續(xù)課程:網(wǎng)站建設(shè)實(shí)踐
二,、課程簡(jiǎn)介
《教育網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》是一門講授網(wǎng)頁(yè)設(shè)計(jì)與開發(fā)相關(guān)知識(shí)的入門級(jí)課程,，也是一門將學(xué)生之前學(xué)習(xí)的大學(xué)計(jì)算機(jī)基礎(chǔ)、高級(jí)程序設(shè)計(jì),、網(wǎng)絡(luò)技術(shù)基礎(chǔ),、圖像編輯技術(shù)等課程較好地應(yīng)用于實(shí)踐的應(yīng)用性課程，是將學(xué)生的理論性學(xué)習(xí)為主過(guò)渡到應(yīng)用性學(xué)習(xí)為主的過(guò)渡性課程,。
三,、教學(xué)目的與基本要求
（一）該課程教學(xué)目的與專業(yè)培養(yǎng)要求對(duì)應(yīng)關(guān)系矩陣
培養(yǎng)要求
課程名稱 | 培養(yǎng) 要求1 | 培養(yǎng) 要求2 | 培養(yǎng) 要求3 | 培養(yǎng) 要求4 | 培養(yǎng) 要求5 | 培養(yǎng) 要求6 | 培養(yǎng) 要求7 | 培養(yǎng) 要求8 |
教育網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè) | ● | ● | ○ | ● | ● | ● |
說(shuō)明:表格要清晰展示該課程與每項(xiàng)培養(yǎng)要求達(dá)成的關(guān)聯(lián)度情況，關(guān)聯(lián)度強(qiáng)的用“●”標(biāo)識(shí),，關(guān)聯(lián)度中等的用“◎”標(biāo)識(shí),，關(guān)聯(lián)度弱的用“○”標(biāo)識(shí)；每門課程與4-8項(xiàng)（底線為總培養(yǎng)要求的50%）培養(yǎng)要求相關(guān)聯(lián),。
（二）教學(xué)目的
通過(guò)本課程的學(xué)習(xí),，學(xué)生應(yīng)當(dāng)達(dá)到以下四點(diǎn)核心目標(biāo)及一點(diǎn)附加目標(biāo):
核心目標(biāo)一是掌握HTML、CSS及Javascript的基本語(yǔ)法,；
核心目標(biāo)二是掌握基本的網(wǎng)頁(yè)設(shè)計(jì)知識(shí),；
核心目標(biāo)三是了解網(wǎng)頁(yè)設(shè)計(jì)的最新發(fā)展；
核心目標(biāo)四是能夠利用各種設(shè)計(jì)軟件制作出較為規(guī)范完整的網(wǎng)頁(yè)作品,；
附加目標(biāo)是部分學(xué)生晉升為初級(jí)網(wǎng)頁(yè)設(shè)計(jì)師,。
（三）教學(xué)要求
通過(guò)本課程的學(xué)習(xí)，學(xué)生應(yīng)當(dāng)對(duì)網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)的整個(gè)流程有所了解,，并重點(diǎn)掌握網(wǎng)頁(yè)前端開發(fā)的三大基本語(yǔ)言HTML,、CSS及Javascript，在課程結(jié)束后具備制作較為規(guī)范的教育網(wǎng)站的能力,。
四,、教學(xué)內(nèi)容
第一章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)（共4學(xué)時(shí)）
（一）本章教學(xué)目的和要求
通過(guò)本章學(xué)習(xí),，掌握超文本標(biāo)記語(yǔ)言、層疊樣式表,、網(wǎng)頁(yè)腳本語(yǔ)言及動(dòng)態(tài)網(wǎng)頁(yè)等基本概念,，了解常用的網(wǎng)頁(yè)設(shè)計(jì)軟件，熟悉網(wǎng)頁(yè)設(shè)計(jì)的基本流程,。
（二）本章教學(xué)重點(diǎn)與難點(diǎn)
重點(diǎn):
1. 超文本標(biāo)記語(yǔ)言,、層疊樣式表、網(wǎng)頁(yè)腳本語(yǔ)言及動(dòng)態(tài)網(wǎng)頁(yè)等基本概念
2. 網(wǎng)頁(yè)設(shè)計(jì)的基本流程
難點(diǎn):超文本標(biāo)記語(yǔ)言,、層疊樣式表,、網(wǎng)頁(yè)腳本語(yǔ)言及動(dòng)態(tài)網(wǎng)頁(yè)等基本概念
（三）教學(xué)內(nèi)容
1．超文本標(biāo)記語(yǔ)言、層疊樣式表,、網(wǎng)頁(yè)腳本語(yǔ)言及動(dòng)態(tài)網(wǎng)頁(yè)等基本概念,。
2．常用的網(wǎng)頁(yè)設(shè)計(jì)軟件。
3．網(wǎng)頁(yè)設(shè)計(jì)的基本流程,。
第二章 HTML入門（共4學(xué)時(shí)）
（一）本章教學(xué)目的和要求
通過(guò)本章學(xué)習(xí),，掌握HTML的基本語(yǔ)法，掌握HTML中與頁(yè)面布局和文字相關(guān)的標(biāo)簽,，掌握表格標(biāo)簽及超鏈接標(biāo)簽,，了解框架標(biāo)簽及表單標(biāo)簽。
（二）本章教學(xué)重點(diǎn)與難點(diǎn)
重點(diǎn):
1.HTML的基本語(yǔ)法
2.HTML中與頁(yè)面布局和文字相關(guān)的標(biāo)簽
3.表格標(biāo)簽及超鏈接標(biāo)簽
難點(diǎn):表格標(biāo)簽及超鏈接標(biāo)簽
（三）教學(xué)內(nèi)容
1．HTML的基本語(yǔ)法,。
2．HTML中與頁(yè)面布局和文字相關(guān)的標(biāo)簽,。
3．表格標(biāo)簽及超鏈接標(biāo)簽。
4．框架標(biāo)簽及表單標(biāo)簽,。
第三章 網(wǎng)站建設(shè)基礎(chǔ)與網(wǎng)頁(yè)中的色彩知識(shí)（共2學(xué)時(shí)）
（一）本章教學(xué)目的和要求
通過(guò)本章學(xué)習(xí),，掌握網(wǎng)站建設(shè)中涉及到的基本概念（WWW、域名,、URL）,，了解網(wǎng)頁(yè)建設(shè)的一般流程，熟悉網(wǎng)頁(yè)色彩搭配的原理,。
（二）本章教學(xué)重點(diǎn)與難點(diǎn)
重點(diǎn):
1.網(wǎng)站建設(shè)中涉及到的基本概念（WWW,、域名、URL）
2.網(wǎng)頁(yè)色彩搭配的原理
難點(diǎn):網(wǎng)頁(yè)色彩搭配的原理
（三）教學(xué)內(nèi)容
1．網(wǎng)站建設(shè)中涉及到的基本概念（WWW,、域名,、URL）。
2．網(wǎng)頁(yè)建設(shè)的一般流程,。
3．網(wǎng)頁(yè)色彩搭配的原理,。
第四章 使用表格排列網(wǎng)頁(yè)數(shù)據(jù)（共4學(xué)時(shí)）
（一）本章教學(xué)目的和要求
通過(guò)本章學(xué)習(xí)，掌握網(wǎng)站的基本結(jié)構(gòu)與網(wǎng)頁(yè)的基本構(gòu)成,，了解常見的網(wǎng)頁(yè)布局方法,，掌握常見的網(wǎng)頁(yè)布局,，掌握常見的網(wǎng)頁(yè)圖像格式，熟悉如何利用切片優(yōu)化網(wǎng)頁(yè)圖片,。
（二）本章教學(xué)重點(diǎn)與難點(diǎn)
重點(diǎn):
1. 網(wǎng)站的基本結(jié)構(gòu)與網(wǎng)頁(yè)的基本構(gòu)成
2. 常見的網(wǎng)頁(yè)布局
3. 常見的網(wǎng)頁(yè)圖像格式
4. 利用切片優(yōu)化網(wǎng)頁(yè)圖片
難點(diǎn):利用切片優(yōu)化網(wǎng)頁(yè)圖片
（三）教學(xué)內(nèi)容
1．網(wǎng)站的基本結(jié)構(gòu)與網(wǎng)頁(yè)的基本構(gòu)成,。
2．常見的網(wǎng)頁(yè)布局。
3．常見的網(wǎng)頁(yè)圖像格式,。
4. 利用切片優(yōu)化網(wǎng)頁(yè)圖片,。
第五章 CSS專題（共2學(xué)時(shí)）
（一）本章教學(xué)目的和要求
通過(guò)本章學(xué)習(xí)，掌握CSS的基本語(yǔ)法,。
（二）本章教學(xué)重點(diǎn)與難點(diǎn)
重點(diǎn):CSS的基本語(yǔ)法
難點(diǎn):CSS的基本語(yǔ)法
（三）教學(xué)內(nèi)容
CSS的基本語(yǔ)法,。
第六章 利用CSS+Div布局網(wǎng)頁(yè)（共2學(xué)時(shí)）
（一）本章教學(xué)目的和要求
通過(guò)本章學(xué)習(xí)，掌握CSS布局基礎(chǔ)知識(shí),，掌握CSS布局方法,。
（二）本章教學(xué)重點(diǎn)與難點(diǎn)
重點(diǎn):
1. CSS布局基礎(chǔ)知識(shí)
2. CSS布局方法
難點(diǎn):CSS布局方法
（三）教學(xué)內(nèi)容
1．CSS布局基礎(chǔ)知識(shí)。
2. CSS布局方法,。
第七章 Javascript專題（共6學(xué)時(shí)）
（一）本章教學(xué)目的和要求
通過(guò)本章學(xué)習(xí)，掌握J(rèn)avascript的基本語(yǔ)法,，理解Javascript中的DOM模型,，熟悉Javascript的高級(jí)語(yǔ)法。
（二）本章教學(xué)重點(diǎn)與難點(diǎn)
重點(diǎn):
1. Javascript的基本語(yǔ)法
2. Javascript中的DOM模型
3．Javascript的高級(jí)語(yǔ)法
難點(diǎn):Javascript中的DOM模型
（三）教學(xué)內(nèi)容
1．Javascript的基本語(yǔ)法,。
2. Javascript中的DOM模型,。
3. Javascript的高級(jí)語(yǔ)法
第八章 動(dòng)態(tài)網(wǎng)頁(yè)開發(fā)入門篇（共2學(xué)時(shí)）
（一）本章教學(xué)目的和要求
通過(guò)本章學(xué)習(xí)，掌握動(dòng)態(tài)網(wǎng)頁(yè)與靜態(tài)網(wǎng)頁(yè)的概念,，熟悉動(dòng)態(tài)網(wǎng)頁(yè)開發(fā)語(yǔ)言,。
（二）本章教學(xué)重點(diǎn)與難點(diǎn)
重點(diǎn):
1. 動(dòng)態(tài)網(wǎng)頁(yè)與靜態(tài)網(wǎng)頁(yè)的概念
2. 動(dòng)態(tài)網(wǎng)頁(yè)開發(fā)語(yǔ)言
難點(diǎn):動(dòng)態(tài)網(wǎng)頁(yè)開發(fā)語(yǔ)言
（三）教學(xué)內(nèi)容
1．動(dòng)態(tài)網(wǎng)頁(yè)與靜態(tài)網(wǎng)頁(yè)的概念。
2. 動(dòng)態(tài)網(wǎng)頁(yè)開發(fā)語(yǔ)言,。
第九章 網(wǎng)站發(fā)布入門篇（共2學(xué)時(shí)）
（一）本章教學(xué)目的和要求
通過(guò)本章學(xué)習(xí),，熟悉網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站開發(fā)流程，熟悉網(wǎng)站發(fā)布的幾種常見方式,。
（二）本章教學(xué)重點(diǎn)與難點(diǎn)
重點(diǎn):
1. 網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站開發(fā)流程
2. 網(wǎng)站發(fā)布的幾種常見方式
難點(diǎn):網(wǎng)站發(fā)布的幾種常見方式
（三）教學(xué)內(nèi)容
1．網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站開發(fā)流程,。
2. 網(wǎng)站發(fā)布的幾種常見方式。
第十章 網(wǎng)頁(yè)與網(wǎng)站終結(jié)篇（共2學(xué)時(shí)）
（一）本章教學(xué)目的和要求
通過(guò)本章學(xué)習(xí),，了解網(wǎng)頁(yè)設(shè)計(jì)的未來(lái),。
（二）本章教學(xué)重點(diǎn)與難點(diǎn)
重點(diǎn):網(wǎng)頁(yè)設(shè)計(jì)的未來(lái)
難點(diǎn):網(wǎng)頁(yè)設(shè)計(jì)的未來(lái)
（三）教學(xué)內(nèi)容
1．網(wǎng)頁(yè)設(shè)計(jì)的未來(lái)。
2. 已學(xué)知識(shí)點(diǎn)回顧,。
五,、教學(xué)時(shí)數(shù)分配
《教育網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》課程教學(xué)時(shí)數(shù)分配表
總學(xué)時(shí):48 學(xué)分:3
章次 | 章標(biāo)題名稱 | 學(xué)時(shí)小計(jì) | 講授 學(xué)時(shí) | 實(shí)驗(yàn) 學(xué)時(shí) | 實(shí)踐 學(xué)時(shí) | 討論、習(xí)題課等學(xué)時(shí) |
第一章 | 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ) | 4 | ||||
第二章 | HTML入門 | 4 | 2 | |||
第三章 | 網(wǎng)站建設(shè)基礎(chǔ)與網(wǎng)頁(yè)中的色彩知識(shí) | 2 | 2 | |||
第四章 | 使用表格排列網(wǎng)頁(yè)數(shù)據(jù) | 4 | 2 | |||
第五章 | CSS專題 | 2 | 2 | |||
第六章 | 利用CSS+Div布局網(wǎng)頁(yè) | 2 | 2 | |||
第七章 | Javascript專題 | 6 | 4 | |||
第八章 | 動(dòng)態(tài)網(wǎng)頁(yè)開發(fā)入門篇 | 2 | 2 | |||
第九章 | 網(wǎng)站發(fā)布入門篇 | 2 | ||||
第十章 | 網(wǎng)頁(yè)與網(wǎng)站終結(jié)篇 | 2 |
六,、實(shí)驗(yàn)內(nèi)容與學(xué)時(shí)分配
《教育網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》課程實(shí)驗(yàn)教學(xué)一覽表
序號(hào) | 項(xiàng)目名稱 | 內(nèi)容提要 | 學(xué)時(shí) | 實(shí)驗(yàn)類型（演示,、驗(yàn)證,、綜合、設(shè)計(jì)等） | 是否為 開放實(shí)驗(yàn) |
1 | 實(shí)驗(yàn)1:HTML入門 | 認(rèn)識(shí)Notepad++,、制作簡(jiǎn)單的網(wǎng)頁(yè) | 2 | 綜合 | |
2 | 實(shí)驗(yàn)2:熟悉Dreamweaver的工作環(huán)境 | Dreamweaver的安裝破解,、熟悉Dreamweaver CS6的工作環(huán)境 | 2 | 綜合 | |
3 | 實(shí)驗(yàn)3:使用表格排列網(wǎng)頁(yè)數(shù)據(jù) | “廠”型布局、表格排版 | 2 | 綜合 | |
4 | 實(shí)驗(yàn)4:CSS專題 | 掌握基本的CSS語(yǔ)法,、在DW中編輯CSS | 2 | 綜合 | |
5 | 實(shí)驗(yàn)5:CSS + Div布局網(wǎng)頁(yè) | 理解CSS中的box model,、掌握基本的CSS布局方法 | 2 | 綜合 | |
6 | 實(shí)驗(yàn)6:Javascript專題（上） | Javascript基本語(yǔ)法、學(xué)會(huì)在HTML中使用Javascript | 2 | 綜合 | |
7 | 實(shí)驗(yàn)7:Javascript專題（下） | 掌握J(rèn)avascript的高級(jí)語(yǔ)法,、學(xué)會(huì)利用Javascript實(shí)現(xiàn)交互 | 2 | 綜合 | |
實(shí)驗(yàn)8:網(wǎng)頁(yè)前端專題 | 掌握網(wǎng)頁(yè)前端設(shè)計(jì)的基本流程 | 2 | 綜合 |
七,、本課程的實(shí)踐環(huán)節(jié)
項(xiàng)目實(shí)踐環(huán)節(jié)共32學(xué)時(shí)，以項(xiàng)目驅(qū)動(dòng)的方式通過(guò)小組合作完成一個(gè)完整的網(wǎng)站作品,。
序號(hào) | 時(shí)數(shù) | 實(shí) 驗(yàn) 名 稱 | 實(shí)驗(yàn)內(nèi)容 |
1 | 4 | Part 1:網(wǎng)頁(yè)設(shè)計(jì)優(yōu)秀作品點(diǎn)評(píng) | 網(wǎng)頁(yè)設(shè)計(jì)優(yōu)秀作品展示與點(diǎn)評(píng) |
2 | 4 | Part 2:網(wǎng)站設(shè)計(jì)與建設(shè)團(tuán)隊(duì)項(xiàng)目立項(xiàng) | 分組進(jìn)行網(wǎng)站設(shè)計(jì)與建設(shè)開題匯報(bào) |
3 | 4 | Part 3:階段性成果匯報(bào)（網(wǎng)站框架與設(shè)計(jì)方案） | 分組進(jìn)行網(wǎng)站設(shè)計(jì)方案匯報(bào) |
4 | 16 | Part 4:網(wǎng)站建設(shè)階段 | 分組依照網(wǎng)站設(shè)計(jì)方案構(gòu)建網(wǎng)站 |
5 | 4 | Part 5:網(wǎng)站建設(shè)成果匯報(bào) | 分組進(jìn)行網(wǎng)站建設(shè)成果匯報(bào) |
八,、主要的教學(xué)方法與教學(xué)手段
1.課程與教學(xué)方法、教學(xué)手段對(duì)應(yīng)關(guān)系矩陣
課程名稱 | 對(duì)應(yīng)的教學(xué)方式方法 | ||||||||||||
講授法 | 啟發(fā)式 | 討論法 | 案例法 | 項(xiàng)目教學(xué) | 實(shí)驗(yàn)室 實(shí)驗(yàn) | 技能訓(xùn)練 | 研究與設(shè)計(jì) | 小組教學(xué) | 個(gè)別教學(xué) | 課程作業(yè) | 課外閱讀及自學(xué)鍛煉 | ||
教育網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè) | ? | ? | ? | ? | ? | ? | ? | ? | |||||
說(shuō)明:每門課程應(yīng)使用多種教學(xué)方式方法,，在相應(yīng)的教學(xué)方式方法中打“√”,。
2.主要采用的幾種教學(xué)方法和手段
課堂講授,，課堂討論
九,、考核與成績(jī)?cè)u(píng)定
1. 該課程與評(píng)價(jià)方法對(duì)應(yīng)關(guān)系矩陣
課程名稱 | 對(duì)應(yīng)的評(píng)價(jià)方法 | |||||||||
課堂表現(xiàn) | 實(shí)驗(yàn)報(bào)告 | 項(xiàng)目作業(yè)或報(bào)告 | 課程作業(yè)或報(bào)告 | 口試 | 口頭報(bào)告 | 上機(jī)操作 | 實(shí)踐操作 | 期中考核 | 期末考核 | |
教育網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè) | ? | ? | ? | ? | ||||||
說(shuō)明:每門課程應(yīng)使用多種評(píng)價(jià)方式，注重過(guò)程評(píng)價(jià),，實(shí)現(xiàn)平時(shí)成績(jī),、期中成績(jī)與期末成績(jī)相結(jié)合，在相應(yīng)的評(píng)價(jià)方法中打“√”,。
2.具體考核與成績(jī)?cè)u(píng)定辦法
課程總評(píng)成績(jī)=平時(shí)作業(yè)*0.25+平時(shí)表現(xiàn)*0.15 +期末作品*0.6
十,、推薦教材及參考書
（一）推薦教材
《HTML CSS Javascript 網(wǎng)頁(yè)制作從入門到精通》，劉西杰,，張婷 著，人民郵電出版社
（二）參考書
無(wú)
十一,、其他需要說(shuō)明的問(wèn)題
無(wú)
教學(xué)隊(duì)伍Teaching Members
相關(guān)課程Correlative
Courses
