《HTMLCSS網(wǎng)站設(shè)計》課程教學(xué)設(shè)計方案

1、HTML+CSS站設(shè)計課程教學(xué)方案第一部分：課程概況HTML+CSS站設(shè)計是 Web應(yīng)用開發(fā)的基礎(chǔ)課程，是計算機類專業(yè)的一門實踐性很強的技術(shù)基礎(chǔ)課。本課程介紹 Web 程序設(shè)計的基本原理和技術(shù)、HTMLW頁程序設(shè)計基礎(chǔ)和CSS使用等有關(guān)內(nèi)容。通過本課程的學(xué)習(xí)，使學(xué)生掌握開發(fā)Web頁面的基礎(chǔ)知識和方法，對Web頁面程序設(shè)計有一個全面的認(rèn)識和了解， 熟悉網(wǎng)頁設(shè)計流程、掌握網(wǎng)絡(luò)中常見的網(wǎng)頁布局效果、 學(xué)會制作各種企業(yè)，門戶，電商類網(wǎng)站。第二部分：課程內(nèi)容整個課程內(nèi)容可分為三大部分：第一部分為html 基礎(chǔ)，主要介紹的是課程入門相關(guān)的知識，比如與本課程有關(guān)的一些基本概念、html標(biāo)記的用法等。會以語法

2、和實例相結(jié)合的形式詳細講解HTML®言中各個元素及其屬性的作用、語法和顯示效果。這部分內(nèi)容是學(xué)好本門課程的前提，篇幅大概占用本門課程的30%。第二部分為CSS相關(guān)內(nèi)容，會從 CSS基本概念開始，分別講解 css選擇器、盒子模型和定位與浮動等控 制各種元素顯示的方法，以及 CS時局頁面的技巧等知識，這一部分是本門課程的重難點所在，內(nèi)容占比也 比較大，會占用本課程的 50%第三部分為實戰(zhàn)演練環(huán)節(jié)，主要內(nèi)容包括站點的建立、頁面整體及各組塊的布局分析、框架搭建、頁面 實例每個部分的制作過程等。會用十講左右的時間完成一個布局合理、美觀大方的頁面。這張頁面涉及到了 網(wǎng)頁設(shè)計的大部分知識點，學(xué)習(xí)過

3、程中，通過實戰(zhàn)演練環(huán)節(jié)的學(xué)習(xí)，期望大家可以完整地掌握頁面制作的方 法。第三部分：教學(xué)設(shè)計模塊名稱涉及知識點任務(wù)設(shè)計各任務(wù)所用資源名稱模塊一（課程導(dǎo)學(xué)）任務(wù)1:瀏覽課程教學(xué)文件 任務(wù)2:觀看課程導(dǎo)學(xué)視頻任務(wù)1 任務(wù)1 任務(wù)1 任務(wù)2HTML+CSSJ站設(shè)計課程教學(xué)大綱HTML+CSSJ站設(shè)計課程教學(xué)設(shè)計方案HTML+CS軻站設(shè)計課程考核方案« HTML+CS軻站設(shè)計-第1講-課程概述模塊二（HTMLHTML®礎(chǔ)、網(wǎng)頁文本插入及格式化、列表、圖像、超鏈任務(wù)3: HTMLS礎(chǔ)知識任務(wù)31234學(xué)習(xí)5篇文本輔導(dǎo)HTML+CS軻站設(shè)計-義本輔導(dǎo)-認(rèn)識網(wǎng)頁、網(wǎng)頁相關(guān)的名詞、Web標(biāo)準(zhǔn)H

4、TML+CS軻站設(shè)計-義本輔導(dǎo)-HTML簡介、CSS簡介、常見瀏覽器介紹HTML+CS軻站設(shè)計-義本輔導(dǎo)-HTML文檔基本格式、 HTML標(biāo)記及其屬性HTML+CS軻站設(shè)計-文本輔導(dǎo)-Dreamweaver簡介接、表單、表格、首視頻任務(wù)4:網(wǎng)頁文本的插入及其格式化任務(wù)5:為你的網(wǎng)頁添加圖像5HTML+CSSJ站設(shè)計-文本輔導(dǎo)-創(chuàng)建第一個網(wǎng)頁任務(wù)3:觀看HTML+CS軻站設(shè)計6講視頻第2講：網(wǎng)頁及其構(gòu)成元素第3講：什么是HTML第4講：web標(biāo)準(zhǔn)及 CSSH識第5講：網(wǎng)頁開發(fā)環(huán)境之 Dreamweaver第6講：HTML文檔的基本結(jié)構(gòu)第7講：第一個 HTML文件任務(wù)3:瀏覽2篇參考資料1HTML

5、+CS制站設(shè)計-參考資料-Sublime Text 3 詳細圖文使用教程2HTML+CS制站設(shè)計-參考資料-HTML基礎(chǔ)知識總結(jié)任務(wù)4:學(xué)習(xí)2篇文本輔導(dǎo)6 HTML+CS軻站設(shè)計-文本輔導(dǎo)-標(biāo)題段落標(biāo)記、文本樣式標(biāo)記7 HTML+CS軻站設(shè)計-文本輔導(dǎo)-文本格式化標(biāo)記、特殊字符標(biāo)記任務(wù)4:觀看HTML+CS軻站設(shè)計2講視頻第8講：網(wǎng)頁文本的插入與排版第9講：格式化你的文本任務(wù)4:完成一例上機練習(xí)上機1:（考察知識點為 HTML文本標(biāo)記、標(biāo)記的屬性）任務(wù)5:學(xué)習(xí)1篇文本輔導(dǎo)9 HTML+CS軻站設(shè)計-義本輔導(dǎo)-常用圖像格式、圖像標(biāo)記任務(wù)5:觀看HTML+CS軻站設(shè)計1講視頻第11講：為你的網(wǎng)頁添

6、加圖像任務(wù)5:完成兩例上機練習(xí)上機2：（考察知識點為圖像標(biāo)記img）上機3:（考察知識點為 HTML標(biāo)記、圖彳標(biāo)記img）任務(wù)6:模塊二作業(yè)1任務(wù)7:義字列表任務(wù)8:超鏈接任務(wù)9:表單任務(wù)6:完成本部分作業(yè)任務(wù)7:學(xué)習(xí)1篇文本輔導(dǎo)8 HTML+CSSJ站設(shè)計-義本輔導(dǎo)-認(rèn)識列表、無序列表、有序列表、定義列表任務(wù)7:觀看HTML+CS軻站設(shè)計1講視頻第10講：文字列表任務(wù)7:完成一例上機練習(xí)上機4:（考察知識點為：定義列表dl、定義列表實現(xiàn)圖文混排）任務(wù)7:瀏覽1篇參考資料3HTML+CS軻站設(shè)計-參考資料-定義列表在圖文混排中的應(yīng)用、列表嵌套任務(wù)8:學(xué)習(xí)2篇文本輔導(dǎo)10 HTML+CS軻站設(shè)計

7、-義本輔導(dǎo)-超鏈接、錨點鏈接11 HTML+CS軻站設(shè)計-義本輔導(dǎo)-相對路徑和絕對路徑任務(wù)8:觀看HTML+CS軻站設(shè)計3講視頻第12講：超鏈接第13講：絕對路徑和相對路徑第14講：創(chuàng)建圖像熱點鏈接任務(wù)9:學(xué)習(xí)2篇文本輔導(dǎo)12HTML+CS軻站設(shè)計-義本輔導(dǎo)-表單的構(gòu)成與創(chuàng)建13HTML+CS軻站設(shè)計-義本輔導(dǎo)-表單控件任務(wù)9:觀看HTML+CS軻站設(shè)計3講視頻第15講：實現(xiàn)交互的窗口 -表單第16講：表單控件第17講：HTML5高級表單元素任務(wù)9:完成兩例上機練習(xí)上機5：（考察知識點為：表單的構(gòu)成、<form>標(biāo)記及相應(yīng)屬性、input控件及常用屬性）任務(wù)io：在網(wǎng)頁中插入表格任

8、務(wù)ii:在網(wǎng)頁中插入視頻和首頻任務(wù)12:模塊二作業(yè)2上機6：（考察知識點為：input控件及常用屬性、textarea 控件）任務(wù)10:學(xué)習(xí)1篇義本輔導(dǎo)14HTML+CS軻站設(shè)計-義本輔導(dǎo)-創(chuàng)建表格、表格相關(guān)標(biāo)記、表格的結(jié)構(gòu)任務(wù)10:觀看HTML+CS軻站設(shè)計1講視頻第18講：在網(wǎng)頁中插入表格任務(wù)10:完成一例上機練習(xí)上機7:（考察知識點為：創(chuàng)建表格、tr標(biāo)記屬性、td標(biāo)記屬性）任務(wù)11:學(xué)習(xí)1篇義本輔導(dǎo)15 HTML+CS制站設(shè)計-文本輔導(dǎo)-使用HTML5在網(wǎng)頁中嵌入音頻和視頻的基本 方法任務(wù)11:觀看HTML+CS軻站設(shè)計1講視頻第19講：在網(wǎng)頁中插入視頻和首頻任務(wù)12:完成本部分作業(yè)模塊

9、三（CSS基礎(chǔ)）CSS基礎(chǔ)、選擇器、CSS文本樣式、盒模型、開發(fā)者工具、元素類型與轉(zhuǎn)換任務(wù)13: CSS基礎(chǔ)任務(wù)14: CSS選擇器任務(wù)13:學(xué)習(xí)3篇文本輔導(dǎo)16HTML+CS軻站設(shè)計-義本輔導(dǎo)-掌握CSS樣式規(guī)則、CSS樣式表的引入方式17HTML+CS軻站設(shè)計-義本輔導(dǎo)-引用CSS文件到html網(wǎng)頁里的方法18HTML+CS軻站設(shè)計-義本輔導(dǎo)-層疊和繼承、優(yōu)先級任務(wù)13:觀看HTML+CS軻站設(shè)計4講視頻第20講：CSS簡介第22講：HTM建局屬性及內(nèi)聯(lián)樣式第29講：CSS和HTML的結(jié)合方式第34講：CSS樣式的優(yōu)先級任務(wù)13:瀏覽1篇參考資料4HTML+CS軻站設(shè)計-參考資料-HTML

10、5全局屬性匯總?cè)蝿?wù)14:學(xué)習(xí)3篇義本輔導(dǎo)19HTML+CS軻站設(shè)計-義本輔導(dǎo)-CSS基礎(chǔ)選擇器任務(wù)15: CSS文本和段落樣式20HTML+CS軻站設(shè)計-文本輔導(dǎo)-CSS選擇器是什么？選擇器有哪些類型？21HTML+CS軻站設(shè)計-義本輔導(dǎo)-偽類、鏈接偽類控制超鏈接任務(wù)14:觀看HTML+CS軻站設(shè)計4講視頻第21講：元素選擇器和后代選擇器第23講：類選擇器第24講：ID選擇器？和屬性選擇器第25講：鏈接的選擇器和樣式任務(wù)14:瀏覽1篇參考資料5HTML+CS軻站設(shè)計-參考資料-CSS的選擇器6HTML+CS軻站設(shè)計-參考資料-30個你不可不知的 css選擇器任務(wù)14:完成3例上機練習(xí)上機8:（

11、考察知識點為類選擇器、CSS內(nèi)嵌式）上機9:（考察知識點為：無序列表、背景圖像定義列表項目符號、超鏈接標(biāo)記、鏈接偽類）上機10:（考察知識點為：超鏈接標(biāo)記、鏈接偽類控制超鏈接樣式）任務(wù)15:學(xué)習(xí)2篇義本輔導(dǎo)22HTML+CS軻站設(shè)計-XW導(dǎo)-CSS 辦相關(guān)樣式23HTML+CS軻站設(shè)計-文本輔導(dǎo)-CSS文本和段落樣式任務(wù)15:觀看HTML+CS軻站設(shè)計3講視頻第26講：利用CSS豐富網(wǎng)頁文字樣式第27講：CSS3新增義本屬性第28講：利用CSS豐富網(wǎng)頁中的段落樣式任務(wù)15:瀏覽3篇參考資料7HTML+CS軻站設(shè)計-參考資料-利用text-shadow 屬性實現(xiàn)各種字體效果8 « HT

12、ML+CS軻站設(shè)計-參考資料-CSS控制歹U表樣式9 « HTML+CS軻站設(shè)計-X資料-CSS控制表格樣式任務(wù)16:盒子模型任務(wù)17:元素類型與轉(zhuǎn)換任務(wù)15:完成2例上機練習(xí)上機11:（考察知識點為 CSS文本外觀屬性）上機12:（考察知識點為 CSS文本外觀屬性的綜合應(yīng)用）任務(wù)16:學(xué)習(xí)4篇義本輔導(dǎo)24HTML+CS軻站設(shè)計-文本輔導(dǎo)-認(rèn)識盒子模型、盒子模型的組成屬性25HTML+CS軻站設(shè)計-文本輔導(dǎo)-內(nèi)邊距padding、外邊距 margin26HTML+CS軻站設(shè)計-義本輔導(dǎo)-背景屬性27HTML+CS軻站設(shè)計-義本輔導(dǎo)-盒子寬度和高度、元素類型轉(zhuǎn)換任務(wù)16:觀看HTML+

13、CS軻站設(shè)計7講視頻第30講：認(rèn)識盒子模型第31講：CSS中尺寸的樣式設(shè)定第32講開發(fā)者工具（一）第33講開發(fā)者工具（二）第35講CSS背景樣式的設(shè)置第36講盒子模型的設(shè)置（一）第37講盒子模型的設(shè)置（二）任務(wù)16:完成3例上機練習(xí)上機13:（考察知識點為邊框的復(fù)合屬性、背景顏色）上機14：（考察知識點為盒子背景的復(fù)合屬性）上機15:（考察知識點為盒子模型綜合屬性）任務(wù)17:觀看HTML+CS軻站設(shè)計2講視頻第38講：元素的類型與轉(zhuǎn)換第 39 講：DIV 與 SPAN任務(wù)17:瀏覽2篇參考資料10HTML+CS軻站設(shè)計-參考資料-塊級元素與行內(nèi)元素（內(nèi)聯(lián)元素）的區(qū)別和 聯(lián)系任務(wù)18:模塊三作業(yè)

14、11HTML+CS軻站設(shè)計-參考資料-CSS塊級元素與內(nèi)聯(lián)元素的深入理解 任務(wù)18:完成本模塊作業(yè)模塊四（網(wǎng)頁布局）定位、浮動及清除浮動、溢出與堆疊、貝向布局任務(wù)19 :定位任務(wù)20 :浮動及溢出任務(wù)21 :網(wǎng)頁布局任務(wù)19:學(xué)習(xí)2篇文本輔導(dǎo)28HTML+CS軻站設(shè)計-義本輔導(dǎo)-淺談CSS的幾種定位29HTML+CS軻站設(shè)計-文本輔導(dǎo)-元素的定位屬性、常見的幾種定位模式任務(wù)19:觀看HTML+CS軻站設(shè)計3講視頻第40講：靜態(tài)定位與相對定位第41講：絕對定位第43講：固定定位任務(wù)20:學(xué)習(xí)3篇文本輔導(dǎo)30HTML+CS軻站設(shè)計-義本輔導(dǎo)-認(rèn)識浮動、元素的浮動屬性float31HTML+CS軻站

15、設(shè)計-文本輔導(dǎo)-清除浮動屬性clear、常用的幾種清除浮動 的方法32HTML+CS軻站設(shè)計-義本輔導(dǎo)-溢出（overflow 屬性）任務(wù)18:觀看HTML+CS軻站設(shè)計5講視頻第42講：溢出和堆疊順序第44講：浮動第45講：浮動的清除（一）第46講：浮動的清除（二）第47講：浮動元素的外邊距問題任務(wù)18:完成3例上機練習(xí)上機16:（考察知識點為元素的浮動屬性）上機17:（考察知識點為浮動與定位）上機18:（考察知識點為浮動定位屬性的綜合應(yīng)用）任務(wù)21:學(xué)習(xí)2篇文本輔導(dǎo)33HTML+CS軻站設(shè)計-文本輔導(dǎo)-網(wǎng)頁明任務(wù)22 :模塊四作業(yè)34HTML+CS軻站設(shè)計-文本輔導(dǎo)-html中div間距CSS樣式布局設(shè)置任務(wù)19:觀看HTML+CS軻站設(shè)計2講視頻第48講：網(wǎng)頁布局簡介第49講：CSS浮動布局實例任務(wù)19:瀏覽2篇參考資料12HTML+CS軻站設(shè)計-參考資料-DIV+CSS中讓布局居中、背景、文字內(nèi)容居 中13HTML+CS軻站設(shè)計-參考資料-淺談css網(wǎng)頁的幾種布局任務(wù)22:完成本模塊作業(yè)模塊五（實戰(zhàn)演練）任務(wù)23 :實戰(zhàn)演練任務(wù)24 :模塊五作業(yè)任務(wù)23:觀