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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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