課程簡(jiǎn)介
Course Introduction
教學(xué)大綱
Teaching Syllabus
一、課程描述及課程目標(biāo)
（一）課程描述
《網(wǎng)站設(shè)計(jì)》課程是面向電氣學(xué)院非計(jì)算機(jī)類專業(yè)的一門專業(yè)選修課，涉及網(wǎng)頁(yè)基礎(chǔ)、HTML 標(biāo)記、CSS 樣式、網(wǎng)頁(yè)布局、Javascript 編程基礎(chǔ)與事件處理等內(nèi)容。通過本課程的學(xué)習(xí)，學(xué)生能夠熟悉Dreamweaver CS6環(huán)境，學(xué)會(huì)使用HTML設(shè)計(jì)網(wǎng)站的基本頁(yè)面，掌握網(wǎng)站發(fā)布和推廣的方法；通過CSS實(shí)現(xiàn)網(wǎng)站的整體變化上的美化和優(yōu)化，從而改善網(wǎng)站的整體效果；可以使用Javascript提升網(wǎng)站的靈活性和交互性，學(xué)會(huì)制作各種企業(yè)、門戶、電商類網(wǎng)站。
（二）課程目標(biāo)
本課程為計(jì)算機(jī)類專業(yè)的專業(yè)基礎(chǔ)課程，要求學(xué)生能夠應(yīng)用網(wǎng)站設(shè)計(jì)的基本知識(shí)及技能解決實(shí)際問題，通過本課程的學(xué)習(xí)，學(xué)生應(yīng)達(dá)到下列學(xué)習(xí)目標(biāo):
1.掌握網(wǎng)站設(shè)計(jì)的基本知識(shí)及技能，核心能力1.1。
2.具備使用HTML5+CSS3的基本技能進(jìn)行網(wǎng)頁(yè)程序設(shè)計(jì)的能力，核心能力2.1。
3.具備選擇合適的開發(fā)平臺(tái)進(jìn)行程序設(shè)計(jì)的能力，核心能力2.2。
4.具備初步的計(jì)算機(jī)應(yīng)用程序的設(shè)計(jì)能力，核心能力3.1。
5.能夠?qū)?shí)驗(yàn)結(jié)果，通過文字、圖、表的形式撰寫實(shí)驗(yàn)報(bào)告，從而能夠完整表達(dá)對(duì)實(shí)驗(yàn)原理及實(shí)驗(yàn)內(nèi)容的理解，核心能力4.1。
6.了解前端網(wǎng)站設(shè)計(jì)所涉及到的新技術(shù)和方法及在實(shí)際項(xiàng)目中的應(yīng)用，核心能力6.1。
7.能夠主動(dòng)做好課前預(yù)習(xí)和課后實(shí)踐，養(yǎng)成自主學(xué)習(xí)的意識(shí)和提高不斷學(xué)習(xí)的能力，核心能力6.2。
8.在教師的指導(dǎo)下，通過綜合實(shí)驗(yàn)訓(xùn)練遵守職業(yè)規(guī)范和道德，訓(xùn)練嚴(yán)謹(jǐn)?shù)膶I(yè)學(xué)習(xí)及工作習(xí)慣，核心能力7.1。
（一）項(xiàng)目1網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)
主要知識(shí)點(diǎn):
【任務(wù)1-1】 了解Web基本概念
【任務(wù)1-2】 網(wǎng)頁(yè)制作入門
【任務(wù)1-3】 Dreamweaver工具的使用
教學(xué)要求:通過本章的學(xué)習(xí)，使學(xué)生了解 Web 標(biāo)準(zhǔn)及基本概念，熟悉 HTML、CSS 及 Javascript 語(yǔ)言的發(fā)展歷史，掌握 Dreamweaver 工具的基本操作，能夠使用 Dreamweaver 創(chuàng)建簡(jiǎn)單的網(wǎng)頁(yè)。
重點(diǎn):Web標(biāo)準(zhǔn)、HTML語(yǔ)言、CSS語(yǔ)言和Javascript語(yǔ)言簡(jiǎn)介、創(chuàng)建第一個(gè)網(wǎng)頁(yè)
采用的教學(xué)方法:任務(wù)驅(qū)動(dòng)式教學(xué)。
講授學(xué)時(shí):1學(xué)時(shí)
實(shí)踐學(xué)時(shí):0.5學(xué)時(shí)
（二）項(xiàng)目2 “說旅游”專題頁(yè)制作
主要知識(shí)點(diǎn):
【任務(wù)2-1】認(rèn)識(shí)HTML
【任務(wù)2-2】HTML文本控制標(biāo)記
【任務(wù)2-3】HTML圖像標(biāo)記
教學(xué)要求:通過本章的學(xué)習(xí)，使學(xué)生掌握 HTML 文檔結(jié)構(gòu)，了解 HTML 文檔頭部相關(guān)標(biāo)記，熟悉 HTML 文本控制標(biāo)記，熟悉 HTML 文本控制標(biāo)記，掌握?qǐng)D文混排頁(yè)面的制作技巧，學(xué)會(huì)制作圖文混排頁(yè)面。，
重點(diǎn):HTML 標(biāo)記（單標(biāo)記與雙 標(biāo)記，標(biāo)題和段落標(biāo)記，div標(biāo)記，常用圖像格式，切片。
難點(diǎn):標(biāo)記屬性，div標(biāo)記。
采用的教學(xué)方法:任務(wù)驅(qū)動(dòng)式教學(xué)。
講授學(xué)時(shí):1學(xué)時(shí)
實(shí)踐學(xué)時(shí):0.5學(xué)時(shí)
（三）項(xiàng)目3 “網(wǎng)上花店”專題頁(yè)制作
主要知識(shí)點(diǎn):
【任務(wù)3-1】CSS核心基礎(chǔ)
【任務(wù)3-2】CSS控制文本
【任務(wù)3-3】CSS高級(jí)特性
教學(xué)要求:通過本章的學(xué)習(xí)，使學(xué)生了解 CSS 樣式規(guī)則，掌握 CSS 字體樣式及文本外觀屬性，熟悉 CSS 復(fù)合選擇器，掌握 CSS 層疊性、繼承性與優(yōu)先級(jí)，掌握引入 CSS 樣式表的不同方式，學(xué)會(huì)控制頁(yè)面中的文本外觀樣式。
重點(diǎn):引入 CSS 樣式表（行內(nèi)、 內(nèi)嵌、鏈入），CSS 基礎(chǔ)選擇器，CSS 字體樣式屬性，CSS 文本外觀屬性，CSS 定義背景顏色，CSS 復(fù)合選擇器（標(biāo)簽指 定、后代、并集），CSS 優(yōu)先級(jí)。
難點(diǎn):CSS 層疊性與繼承性， CSS 優(yōu)先級(jí)。
采用的教學(xué)方法:任務(wù)驅(qū)動(dòng)式教學(xué)。
講授學(xué)時(shí):3學(xué)時(shí)
實(shí)踐學(xué)時(shí):3學(xué)時(shí)
（四）項(xiàng)目4 “青春樹兒童攝影網(wǎng)”首頁(yè)
主要知識(shí)點(diǎn):
【任務(wù)4-1】認(rèn)識(shí)盒子模型
【任務(wù)4-2】盒子模型相關(guān)屬性
【任務(wù)4-3】元素的類型與轉(zhuǎn)換
【任務(wù)4-4】元素的浮動(dòng)
【任務(wù)4-5】元素的定位
教學(xué)要求:通過本章的學(xué)習(xí)，使學(xué)生了解盒子模型的概念，掌握盒子的相關(guān)屬性，熟悉元素的類型與轉(zhuǎn)換，掌握元素的浮動(dòng)與定位，掌握清除浮動(dòng)的方法，能夠使用 DIV 標(biāo)記與浮動(dòng)樣式對(duì)頁(yè)面進(jìn)行布局，
重點(diǎn):邊框?qū)傩?，?nèi)邊距屬性，外邊距屬性，背景屬性，標(biāo)記，元素的浮動(dòng)屬性，清除浮動(dòng)，元素的定位屬性，相對(duì)定位，絕對(duì)定位。 ，
難點(diǎn):元素的浮動(dòng)屬性，清除浮動(dòng)。
采用的教學(xué)方法:任務(wù)驅(qū)動(dòng)式教學(xué)。
講授學(xué)時(shí):3學(xué)時(shí)
實(shí)踐學(xué)時(shí):3學(xué)時(shí)
（五）項(xiàng)目5 “穿搭速遞”首頁(yè)制作
主要知識(shí)點(diǎn):
【任務(wù)5-1】列表標(biāo)記
【任務(wù)5-2】CSS控制列表樣式
【任務(wù)5-3】超鏈接標(biāo)記
教學(xué)要求:通過本章的學(xué)習(xí)，使學(xué)生掌握無序列表、有序列表及定義列表，熟悉列表的嵌套，掌握超鏈接標(biāo)記，掌握鏈接偽類，能夠使用無序列表、有序列表及定義列表對(duì)頁(yè)面進(jìn)行布局，學(xué)會(huì)使用鏈接偽類控制頁(yè)面中超鏈接的樣式。
重點(diǎn):無序列表，有序列表
，定義列表
北京圖像定義列表項(xiàng)目符號(hào)，創(chuàng)建超鏈接（超練級(jí)標(biāo)記a），鏈接偽類控制超鏈接。
難點(diǎn):背景圖像定義列表項(xiàng)目符號(hào)，鏈接偽類控制超鏈接。
采用的教學(xué)方法:任務(wù)驅(qū)動(dòng)式教學(xué)。
講授學(xué)時(shí):2學(xué)時(shí)
實(shí)踐學(xué)時(shí):1學(xué)時(shí)
（六）項(xiàng)目6 “千年之戀”注冊(cè)頁(yè)面制作
主要知識(shí)點(diǎn):
【任務(wù)6-1】認(rèn)識(shí)表格相關(guān)標(biāo)記
【任務(wù)6-2】CSS控制表格樣式
【任務(wù)6-3】認(rèn)識(shí)表單
【任務(wù)6-4】表單控件
【任務(wù)6-5】CSS控制表單樣式CSS控制表單樣式
【任務(wù)6-6】布局及定義基礎(chǔ)樣式
【任務(wù)6-7】制作頭部及導(dǎo)航模塊
【任務(wù)6-8】制作“banner”及“內(nèi)容”
【任務(wù)6-9】制作“頁(yè)腳”模塊
教學(xué)要求:通過本章的學(xué)習(xí)，使學(xué)生理解表格的創(chuàng)建，掌握表格樣式的控制，掌握表單相關(guān)標(biāo)記，熟悉表單樣式的控制，能夠創(chuàng)建具有相應(yīng)功能的表單控件，學(xué)會(huì)通過控制表單樣式美化表單界面。
重點(diǎn):CSS 控制表格邊框，CSS 控制單元格邊距，CSS 控制單元格的寬高，input 控件。
難點(diǎn):input 控件，CSS 控制表單樣式。
采用的教學(xué)方法:任務(wù)驅(qū)動(dòng)式教學(xué)。
講授學(xué)時(shí):5學(xué)時(shí)
實(shí)踐學(xué)時(shí):4學(xué)時(shí)
（七）項(xiàng)目7 “趕快回家網(wǎng)”首頁(yè)制作
主要知識(shí)點(diǎn):
【任務(wù)7-1】Javascript概述
【任務(wù)7-2】Javascript語(yǔ)言基礎(chǔ)
【任務(wù)7-3】流程控制語(yǔ)句
【任務(wù)7-4】函數(shù)
【任務(wù)7-5】布局及定義基礎(chǔ)樣式
【任務(wù)7-6】制作“頭部”模塊
【任務(wù)7-7】制作“導(dǎo)航”模塊
【任務(wù)7-8】制作“banner”和“時(shí)間”
【任務(wù)7-9】制作“客運(yùn)信息”模塊
【任務(wù)7-10】制作“底部”模塊
教學(xué)要求:通過本章的學(xué)習(xí)，使學(xué)生掌握 Javascript 基本語(yǔ)法，掌握運(yùn)算符和表達(dá)式的使用方法，掌握條件語(yǔ)句、循環(huán)語(yǔ)句及跳轉(zhuǎn)語(yǔ)句，掌握 Javascript 中函數(shù)的調(diào)用及變量的作用域，能夠通過運(yùn)算符和表達(dá)式進(jìn)行簡(jiǎn)單計(jì)算，學(xué)會(huì)使用流程控制語(yǔ)句編寫 Javascript 程序。
重點(diǎn):Javascript 引入方式，Javascript 基本語(yǔ)法，變量和數(shù)據(jù)類型，條件語(yǔ)句，條件語(yǔ)句，函數(shù)及其調(diào)用，。
難點(diǎn):函數(shù)變量的作用域。
采用的教學(xué)方法:任務(wù)驅(qū)動(dòng)式教學(xué)。
講授學(xué)時(shí):3學(xué)時(shí)
實(shí)踐學(xué)時(shí):3學(xué)時(shí)
（八）補(bǔ)充內(nèi)容:HTML5中的音視頻、過渡和動(dòng)畫。
主要知識(shí)點(diǎn):
1.audio和video標(biāo)簽的使用
2.CSS中的過渡屬性及其應(yīng)用
3.CSS3中的變形屬性及其應(yīng)用
4. CSS3中的動(dòng)畫及動(dòng)畫效果的應(yīng)用。
教學(xué)要求:通過本章的學(xué)習(xí)，使學(xué)生掌握 audio和video標(biāo)簽的使用，理解過渡屬性，能夠控制過渡時(shí)間、動(dòng)畫快慢等常見過渡效果，掌握CSS3中的變形屬性，能夠制作2D轉(zhuǎn)換、3D轉(zhuǎn)換效果，掌握CSS3中的動(dòng)畫，能夠熟練制作網(wǎng)頁(yè)中常見的動(dòng)畫效果。
重點(diǎn):CSS3中的過渡、變形與動(dòng)畫效果。
難點(diǎn):CSS3中的過渡、變形與動(dòng)畫效果
采用的教學(xué)方法:任務(wù)驅(qū)動(dòng)式教學(xué)。
講授學(xué)時(shí):2學(xué)時(shí)
實(shí)踐學(xué)時(shí):1學(xué)時(shí)
在本門課程結(jié)束時(shí)，學(xué)生應(yīng)該能夠:
1、熟悉網(wǎng)頁(yè)制作流程
2、掌握常見的網(wǎng)頁(yè)布局效果
3、掌握各類網(wǎng)頁(yè)的制作。
（一）出勤
學(xué)生應(yīng)積極參與課堂教學(xué)并完成相關(guān)的作業(yè)、實(shí)驗(yàn)內(nèi)容。
（二）閱讀資料
學(xué)生應(yīng)認(rèn)真進(jìn)行課前預(yù)習(xí)，閱讀教材和指定參考書及重要的參考文獻(xiàn)。
（三）課堂展示
根據(jù)時(shí)間及課堂班人數(shù)，在可能的情況下安排小組實(shí)驗(yàn)課程討論與效果演示。
（四）課外實(shí)踐
本課程是實(shí)踐類課程，不單獨(dú)安排課外實(shí)踐。
（五）小考與期末考
無小考，期末以課程設(shè)計(jì)的方式進(jìn)行考核。
（六）課程論文
以平時(shí)作業(yè)為主，安排小案例實(shí)驗(yàn)作為期中檢查。
（七）學(xué)術(shù)誠(chéng)信
按中山大學(xué)南方學(xué)院相關(guān)規(guī)定執(zhí)行。
（八）剽竊的定義以及相應(yīng)的懲罰
剽竊是嚴(yán)重違反學(xué)校規(guī)章制度的行為。一經(jīng)發(fā)現(xiàn)，將上報(bào)相關(guān)部門，并受到包括開除學(xué)籍在內(nèi)的嚴(yán)厲處罰。
（一）教科書-必讀
黑馬程序員.網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目教程（HTML+CSS+Javascript）.人民郵電出版社.2017.1.1
（二）教科書-強(qiáng)烈推薦
[1] 黑馬程序員.網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目教程（HTML+CSS+Javascript）.人民郵電出版社.2017.1.1
[2] 鄭婭峰、張永強(qiáng). 鄭婭峰、張永強(qiáng).清華大學(xué)出版社.2016.01
[3] 傳智播客高教產(chǎn)品研發(fā)部. HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程[M]. 人民郵電出版社, 2016.
[4] 黃睿. 網(wǎng)站設(shè)計(jì)項(xiàng)目化教程[M]. 人民郵電出版社, 2015.
（三）文章-必讀
[1] 狐貍不歸.網(wǎng)站建設(shè)步驟詳解.http://jingyan.baidu.com/article/c35dbcb0270a0e8917fcbc7f.html.2011.12.16
[2] 戴宏明. 營(yíng)銷型網(wǎng)站規(guī)劃六步法[J]. 現(xiàn)代計(jì)算機(jī), 2013(6):55-57.
（四）文章-強(qiáng)烈推薦
[1] 梁銀妮. Web網(wǎng)站中動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)技術(shù)的應(yīng)用和實(shí)現(xiàn)[J]. 數(shù)字技術(shù)與應(yīng)用, 2017(1):83-83.
[2] 楊遠(yuǎn)峰. FLASH交互性動(dòng)畫在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用與研究[J]. 電腦知識(shí)與技術(shù), 2017, 13(4):197-198.
[3] 孫晗. 網(wǎng)頁(yè)設(shè)計(jì)中計(jì)算機(jī)多媒體技術(shù)的應(yīng)用[J]. 無線互聯(lián)科技, 2018(4):133-134.
[4] 最好用的10種HTML5應(yīng)用開發(fā)工具推薦.http://www.php.cn/html5-tutorial-360161.html
（五）其他參考資料
[1] [美] 達(dá)科特（Jon Duckett） 著；劉濤，陳學(xué)敏 譯.Web設(shè)計(jì)與前端開發(fā)秘籍:HTML CSS Javascript jQuery 構(gòu)建網(wǎng)站（套裝共2冊(cè)）.北京.清華大學(xué)出版社.2015.06
[2] 劉西杰，張婷 著. HTML CSS Javascript 網(wǎng)頁(yè)制作從入門到精通 第3版.北京.人民郵電出版社.2016.07
[3] HTML系列教程.http://www.w3school.com.cn/
（一）教學(xué)活動(dòng)
1、個(gè)人預(yù)習(xí)
2、課堂講授
3、課堂問答
4、實(shí)驗(yàn)講解
5、案例討論
6、課后實(shí)驗(yàn)
7、期末課程設(shè)計(jì)
（二）對(duì)預(yù)期學(xué)習(xí)成果的考察
預(yù)期學(xué)習(xí)成果 | 教學(xué)活動(dòng) | 學(xué)習(xí)成果考察內(nèi)容:作業(yè)/課程實(shí)驗(yàn) |
項(xiàng)目1 網(wǎng)頁(yè)制作基礎(chǔ)知識(shí) | 1,2,3,4,5,6,7 | 實(shí)驗(yàn)1-1: 熟悉Dreamweaver工具的使用，利用文本控制標(biāo)記和圖像標(biāo)記制作一個(gè)簡(jiǎn)單的個(gè)人簡(jiǎn)歷頁(yè)面 |
項(xiàng)目2 “說旅游”專題制作 | 1,2,3,4,5,6,7 | 實(shí)驗(yàn)1-2:制作“說旅游”專題頁(yè) |
項(xiàng)目3: “網(wǎng)上花店”專題頁(yè)制作 | 1,2,3,4,5,6,7 | 實(shí)驗(yàn)2:利用CSS相關(guān)知識(shí)，對(duì)個(gè)人簡(jiǎn)歷頁(yè)面的樣式進(jìn)行設(shè)置，并重新對(duì)個(gè)人簡(jiǎn)歷頁(yè)面進(jìn)行美化和設(shè)計(jì)。 實(shí)驗(yàn)3:制作“網(wǎng)上花店”專題頁(yè) |
項(xiàng)目4 “青春樹兒童攝像網(wǎng)”首頁(yè) | 1,2,3,4,5,6,7 | 實(shí)驗(yàn)4:練習(xí)課堂中的例子，并重寫個(gè)人簡(jiǎn)歷頁(yè)面（需用到盒子模型） 實(shí)驗(yàn)5:制作“青春樹兒童攝影網(wǎng)”首頁(yè) |
項(xiàng)目5 “穿搭速遞”首頁(yè)制作 | 1,2,3,4,5,6,7 | 實(shí)驗(yàn)6: 制作“穿搭速遞”首頁(yè) |
項(xiàng)目6 “千年之戀”注冊(cè)頁(yè)面制作 | 1,2,3,4,5,6,7 | 實(shí)驗(yàn)7:利用表格重新制作個(gè)人簡(jiǎn)歷，并用CSS控制其樣式 實(shí)驗(yàn)8:制作“千年之戀”注冊(cè)頁(yè)面 |
項(xiàng)目7 “趕快回家網(wǎng)”首頁(yè)制作 | 1,2,3,4,5,6,7 | 實(shí)驗(yàn)9:練習(xí)課堂實(shí)例 實(shí)驗(yàn)10: 制作“趕快回家網(wǎng)”首頁(yè) |
HTML5中的音視頻、過渡和動(dòng)畫 | 1,2,3,4,5,6,7 | 實(shí)驗(yàn)11:制作“工作日天氣預(yù)報(bào)” |
（一）評(píng)分體系
1、出勤率: 20%
2、課堂參與: 加分
3、課堂實(shí)驗(yàn)及作業(yè): 30%
4、期末課程設(shè)計(jì): 50%
（二）考試內(nèi)容及要求
考試包含以下內(nèi)容:
1. 網(wǎng)站設(shè)計(jì)的基礎(chǔ)知識(shí)及使用（核心能力1.1）；
2. 能夠選用合適的程序開發(fā)工具（核心能力2.2）；
3. 能夠根據(jù)實(shí)際問題，對(duì)開發(fā)環(huán)境進(jìn)行環(huán)境的配置（核心能力2.2）；
4. 根據(jù)實(shí)際問題的需求，設(shè)計(jì)并完成綜合實(shí)驗(yàn)（核心能力3.1）；
5. 能夠根據(jù)課程要求，通過文字、圖、表的形式撰寫實(shí)驗(yàn)報(bào)告，并進(jìn)行簡(jiǎn)單的分析（核心能力4.1、6.2）；
6. 能夠按照綜合實(shí)驗(yàn)要求，按時(shí)完成綜合實(shí)驗(yàn)，并培養(yǎng)良好的職業(yè)習(xí)慣（核心能力7.1）。
周次 | 課程要點(diǎn) | 理論學(xué)時(shí) | 實(shí)驗(yàn)學(xué)時(shí) | 習(xí)題學(xué)時(shí) |
1 | 理論: 項(xiàng)目1 網(wǎng)頁(yè)制作基礎(chǔ)知識(shí) 【任務(wù)1-1】 了解Web基本概念 【任務(wù)1-2】 網(wǎng)頁(yè)制作入門 【任務(wù)1-3】 Dreamweaver工具的使用 項(xiàng)目2 “說旅游”專題頁(yè)制作 【任務(wù)2-1】認(rèn)識(shí)HTML 【任務(wù)2-2】HTML文本控制標(biāo)記 【任務(wù)2-3】HTML圖像標(biāo)記 實(shí)驗(yàn)1-1: 熟悉Dreamweaver工具的使用，利用文本控制標(biāo)記和圖像標(biāo)記制作一個(gè)簡(jiǎn)單的個(gè)人簡(jiǎn)歷頁(yè)面 實(shí)驗(yàn)1-2:制作“說旅游”專題頁(yè) | 2 | 1 | 0 |
2 | 理論: 項(xiàng)目3 “網(wǎng)上花店”專題頁(yè)制作 【任務(wù)3-1】CSS核心基礎(chǔ) 【任務(wù)3-2】CSS控制文本 實(shí)驗(yàn)2:利用CSS相關(guān)知識(shí)，對(duì)個(gè)人簡(jiǎn)歷頁(yè)面的樣式進(jìn)行設(shè)置，并重新對(duì)個(gè)人簡(jiǎn)歷頁(yè)面進(jìn)行美化和設(shè)計(jì)。 | 2 | 1 | 0 |
3 | 理論: 【任務(wù)3-3】CSS高級(jí)特性 實(shí)驗(yàn)3:制作“網(wǎng)上花店”專題頁(yè) | 1 | 2 | 0 |
4 | 理論: 項(xiàng)目4 “青春樹兒童攝影網(wǎng)”首頁(yè) 【任務(wù)4-1】認(rèn)識(shí)盒子模型 【任務(wù)4-2】盒子模型相關(guān)屬性 【任務(wù)4-3】元素的類型與轉(zhuǎn)換 實(shí)驗(yàn)4:練習(xí)課堂中的例子，并重寫個(gè)人簡(jiǎn)歷頁(yè)面（需用到盒子模型） | 2 | 1 | 0 |
5 | 理論: 項(xiàng)目4 “青春樹兒童攝影網(wǎng)”首頁(yè) 【任務(wù)4-4】元素的浮動(dòng) 【任務(wù)4-5】元素的定位 【任務(wù)4-6】布局及定義基礎(chǔ)樣式 實(shí)驗(yàn)5:制作“青春樹兒童攝影網(wǎng)”首頁(yè)。 | 1 | 2 | 0 |
6 | 理論: 項(xiàng)目5 “穿搭速遞”首頁(yè)制作 【任務(wù)5-1】列表標(biāo)記 【任務(wù)5-2】CSS控制列表樣式 【任務(wù)5-3】超鏈接標(biāo)記 實(shí)驗(yàn)6:制作“穿搭速遞”首頁(yè) | 2 | 1 | 0 |
7 | 理論: 項(xiàng)目6 “千年之戀”注冊(cè)頁(yè)面制作 【任務(wù)6-1】認(rèn)識(shí)表格相關(guān)標(biāo)記 【任務(wù)6-2】CSS控制表格樣式 實(shí)驗(yàn)7:利用表格重新制作個(gè)人簡(jiǎn)歷，并用CSS控制其樣式 | 2 | 1 | 0 |
8 | 理論: 項(xiàng)目6 “千年之戀”注冊(cè)頁(yè)面制作 【任務(wù)6-3】認(rèn)識(shí)表單 【任務(wù)6-4】表單控件 【任務(wù)6-5】CSS控制表單樣式CSS控制表單樣式 實(shí)驗(yàn)8:制作“千年之戀”注冊(cè)頁(yè)面 | 1 | 2 | 0 |
9 | 理論: 項(xiàng)目7 “趕快回家網(wǎng)”首頁(yè)制作 【任務(wù)7-1】Javascript概述 【任務(wù)7-2】Javascript語(yǔ)言基礎(chǔ) 【任務(wù)7-3】流程控制語(yǔ)句 【任務(wù)7-4】函數(shù) 實(shí)驗(yàn)9:練習(xí)課堂實(shí)例 | 2 | 1 | 0 |
10 | 理論: 項(xiàng)目7 “趕快回家網(wǎng)”首頁(yè)制作 【任務(wù)7-5】布局及定義基礎(chǔ)樣式 【任務(wù)7-6】制作“頭部”模塊 【任務(wù)7-7】制作“導(dǎo)航”模塊 【任務(wù)7-8】制作“banner”和“時(shí)間” 【任務(wù)7-9】制作“客運(yùn)信息”模塊 【任務(wù)7-10】制作“底部”模塊 實(shí)驗(yàn)10: 制作“趕快回家網(wǎng)”首頁(yè) | 1 | 2 | 0 |
11 | HTML5中的音視頻、過渡和動(dòng)畫（補(bǔ)充） 實(shí)驗(yàn)11:制作“工作日天氣預(yù)報(bào)” | 2 | 1 | 0 |
12 | 課程設(shè)計(jì) | 0 | 3 | 0 |
13 | ||||
14 | ||||
15 | ||||
16 | ||||
17 | ||||
18 | ||||
19 | ||||
20 | ||||
總學(xué)時(shí) | 18 | 18 | ||
