1、HTML+CSS网站设计课程教学方案第一部分：课程概况HTML+CSS网站设计是Web应用开发的基础课程，是计算机类专业的一门实践性很强的技术基础课。本课程介绍Web程序设计的基本原理和技术、HTML网页程序设计基础和 CSS使用等有关内容。通过本课程的学习，使学生掌握开发 Web页面的基础知识和方法，对Web页面程序设计有一个全面的认识和了解，熟悉网页设计流程、掌握网络中常见的网页布局效果、学会制作各种企业，门户，电商类网站。第二部分：课程内容整个课程内容可分为三大部分：第一部分为html基础，主要介绍的是课程入门相关的知识，比如与本课程有关的一些基本概念、html标记的用法等。会以语法和实
2、例相结合的形式详细讲解HTML语言中各个元素及其属性的作用、语法和显示效果。这部分内容是学好本门课程的前提，篇幅大概占用本门课程的30%。第二部分为CSS相关内容，会从CSS基本概念开始，分别讲解css选择器、盒子模型和定位与浮动等控制各种元素显示的方法，以及CSS布局页面的技巧等知识，这一部分是本门课程的重难点所在，内容占比也比较大，会占用本课程的50%。第三部分为实战演练环节，主要内容包括站点的建立、页面整体及各组块的布局分析、框架搭建、页面实例每个部分的制作过程等。会用十讲左右的时间完成一个布局合理、美观大方的页面。这张页面涉及到了网页设计的大部分知识点，学习过程中，通过实战演练环节的学
3、习，期望大家可以完整地掌握页面制作的方法。第三部分：教学设计模块名称涉及知识点任务设计各任务所用资源名称模块一（课程导学）任务1：浏览课程教学文件任务2：观看课程导学视频任务1：HTML+CSS网站设计课程教学大纲任务1：HTML+CSS网站设计课程教学设计方案任务1：HTML+CSS网站设计课程考核方案任务2：HTML+CSS网站设计-第1讲-课程概述模块二（HTML）HTML基础、网页文本插入及格式化、列表、图像、超链接、表单、表格、音视频任务3：HTML基础知识任务4：网页文本的插入及其格式化任务5：为你的网页添加图像任务6：模块二作业1任务7：文字列表任务8：超链接任务9：表单任务10
4、：在网页中插入表格任务11：在网页中插入视频和音频任务12：模块二作业2任务3：学习5篇文本辅导1HTML+CSS网站设计-文本辅导- 认识网页、网页相关的名词、Web标准 2HTML+CSS网站设计-文本辅导- HTML简介、CSS简介、常见浏览器介绍 3HTML+CSS网站设计-文本辅导-HTML文档基本格式、HTML标记及其属性4HTML+CSS网站设计-文本辅导- Dreamweaver简介5HTML+CSS网站设计-文本辅导- 创建第一个网页任务3：观看HTML+CSS网站设计6讲视频第2讲：网页及其构成元素第3讲：什么是HTML第4讲：web标准及CSS初识第5讲：网页开发环境之D
5、reamweaver第6讲：HTML文档的基本结构第7讲：第一个HTML文件任务3：浏览2篇参考资料 1HTML+CSS网站设计-参考资料-Sublime Text 3 详细图文使用教程 2HTML+CSS网站设计-参考资料-HTML基础知识总结任务4：学习2篇文本辅导 6HTML+CSS网站设计-文本辅导- 标题段落标记 、文本样式标记 7HTML+CSS网站设计-文本辅导-文本格式化标记、特殊字符标记任务4：观看HTML+CSS网站设计2讲视频 第8讲：网页文本的插入与排版 第9讲：格式化你的文本任务4：完成一例上机练习上机1：（考察知识点为HTML文本标记、标记的属性）任务5：学习1篇文
6、本辅导 9HTML+CSS网站设计-文本辅导-常用图像格式、图像标记任务5：观看HTML+CSS网站设计1讲视频 第11讲：为你的网页添加图像任务5：完成两例上机练习 上机2：（考察知识点为图像标记img）上机3：（考察知识点为HTML标记、图像标记img）任务6：完成本部分作业任务7：学习1篇文本辅导 8HTML+CSS网站设计-文本辅导-认识列表、无序列表、有序列表、定义列表任务7：观看HTML+CSS网站设计1讲视频 第10讲：文字列表任务7：完成一例上机练习 上机4：（考察知识点为：定义列表dl、定义列表实现图文混排）任务7：浏览1篇参考资料 3HTML+CSS网站设计-参考资料-定义
7、列表在图文混排中的应用、列表嵌套任务8：学习2篇文本辅导 10HTML+CSS网站设计-文本辅导-超链接、锚点链接 11HTML+CSS网站设计-文本辅导-相对路径和绝对路径任务8：观看HTML+CSS网站设计3讲视频 第12讲：超链接 第13讲：绝对路径和相对路径第14讲：创建图像热点链接任务9：学习2篇文本辅导12HTML+CSS网站设计-文本辅导-表单的构成与创建13HTML+CSS网站设计-文本辅导-表单控件任务9：观看HTML+CSS网站设计3讲视频第15讲：实现交互的窗口-表单第16讲：表单控件第17讲：HTML5高级表单元素任务9：完成两例上机练习上机5：（考察知识点为：表单的构
8、成、标记及相应属性、input控件及常用属性）上机6：（考察知识点为：input控件及常用属性、textarea控件）任务10：学习1篇文本辅导14HTML+CSS网站设计-文本辅导-创建表格、表格相关标记、表格的结构任务10：观看HTML+CSS网站设计1讲视频第18讲：在网页中插入表格任务10：完成一例上机练习上机7：（考察知识点为：创建表格、tr标记属性、td标记属性）任务11：学习1篇文本辅导 15HTML+CSS网站设计-文本辅导-使用HTML5在网页中嵌入音频和视频的基本方法任务11：观看HTML+CSS网站设计1讲视频第19讲：在网页中插入视频和音频任务12：完成本部分作业模块三
9、（CSS基础）CSS基础、选择器、CSS文本样式、盒模型、开发者工具、元素类型与转换任务13：CSS基础任务14：CSS选择器任务15：CSS文本和段落样式任务16：盒子模型任务17：元素类型与转换任务18：模块三作业任务13：学习3篇文本辅导 16HTML+CSS网站设计-文本辅导-掌握CSS样式规则、CSS样式表的引入方式17HTML+CSS网站设计-文本辅导-引用CSS文件到html网页里的方法18HTML+CSS网站设计-文本辅导-层叠和继承、优先级任务13：观看HTML+CSS网站设计4讲视频第20讲：CSS简介第22讲：HTML全局属性及内联样式第29讲：CSS和HTML的结合方式
10、第34讲：CSS样式的优先级任务13：浏览1篇参考资料4HTML+CSS网站设计-参考资料-HTML5全局属性汇总任务14：学习3篇文本辅导19HTML+CSS网站设计-文本辅导-CSS基础选择器20HTML+CSS网站设计-文本辅导-CSS选择器是什么？选择器有哪些类型？21HTML+CSS网站设计-文本辅导-伪类、链接伪类控制超链接任务14：观看HTML+CSS网站设计4讲视频第21讲：元素选择器和后代选择器第23讲：类选择器第24讲：ID选择器和属性选择器第25讲：链接的选择器和样式任务14：浏览1篇参考资料5HTML+CSS网站设计-参考资料-CSS的选择器6HTML+CSS网站设计-
11、参考资料-30个你不可不知的css选择器任务14：完成3例上机练习上机8：（考察知识点为类选择器、CSS内嵌式）上机9：（考察知识点为：无序列表、背景图像定义列表项目符号、超链接标记、链接伪类）上机10：（考察知识点为：超链接标记、链接伪类控制超链接样式）任务15：学习2篇文本辅导22HTML+CSS网站设计-文本辅导-CSS文本相关样式23HTML+CSS网站设计-文本辅导-CSS文本和段落样式任务15：观看HTML+CSS网站设计3讲视频第26讲：利用CSS丰富网页文字样式第27讲：CSS3新增文本属性第28讲：利用CSS丰富网页中的段落样式任务15：浏览3篇参考资料7HTML+CSS网站
12、设计-参考资料-利用text-shadow属性实现各种字体效果8HTML+CSS网站设计-参考资料-CSS控制列表样式9HTML+CSS网站设计-参考资料-CSS控制表格样式任务15：完成2例上机练习上机11：（考察知识点为CSS文本外观属性）上机12：（考察知识点为CSS文本外观属性的综合应用）任务16：学习4篇文本辅导24HTML+CSS网站设计-文本辅导-认识盒子模型、盒子模型的组成属性25HTML+CSS网站设计-文本辅导-内边距padding、外边距margin26HTML+CSS网站设计-文本辅导-背景属性27HTML+CSS网站设计-文本辅导-盒子宽度和高度、元素类型转换任务16
13、：观看HTML+CSS网站设计7讲视频第30讲：认识盒子模型第31讲：CSS中尺寸的样式设定第32讲开发者工具（一）第33讲开发者工具（二）第35讲CSS背景样式的设置第36讲盒子模型的设置（一）第37讲盒子模型的设置（二）任务16：完成3例上机练习上机13：（考察知识点为边框的复合属性、背景颜色）上机14：（考察知识点为盒子背景的复合属性）上机15：（考察知识点为盒子模型综合属性）任务17：观看HTML+CSS网站设计2讲视频第38讲：元素的类型与转换第39讲：DIV与SPAN任务17：浏览2篇参考资料10HTML+CSS网站设计-参考资料-块级元素与行内元素（内联元素）的区别和联系11HT
14、ML+CSS网站设计-参考资料-CSS块级元素与内联元素的深入理解任务18：完成本模块作业模块四（网页布局）定位、浮动及清除浮动、溢出与堆叠、页面布局任务19：定位任务20：浮动及溢出任务21：网页布局任务22：模块四作业任务19：学习2篇文本辅导28HTML+CSS网站设计-文本辅导-浅谈CSS的几种定位29HTML+CSS网站设计-文本辅导-元素的定位属性、常见的几种定位模式任务19：观看HTML+CSS网站设计3讲视频第40讲：静态定位与相对定位第41讲：绝对定位第43讲：固定定位任务20：学习3篇文本辅导30HTML+CSS网站设计-文本辅导-认识浮动、元素的浮动属性float31HT
15、ML+CSS网站设计-文本辅导-清除浮动属性clear、常用的几种清除浮动的方法32HTML+CSS网站设计-文本辅导-溢出（overflow属性）任务18：观看HTML+CSS网站设计5讲视频 第42讲：溢出和堆叠顺序第44讲：浮动第45讲：浮动的清除（一）第46讲：浮动的清除（二）第47讲：浮动元素的外边距问题任务18：完成3例上机练习上机16：（考察知识点为元素的浮动属性）上机17：（考察知识点为浮动与定位）上机18：（考察知识点为浮动定位属性的综合应用）任务21：学习2篇文本辅导33HTML+CSS网站设计-文本辅导-网页布局34HTML+CSS网站设计-文本辅导-html中div间距
16、CSS样式布局设置任务19：观看HTML+CSS网站设计2讲视频第48讲：网页布局简介第49讲：CSS浮动布局实例任务19：浏览2篇参考资料12HTML+CSS网站设计-参考资料-DIV+CSS中让布局居中、背景、文字内容居中13HTML+CSS网站设计-参考资料-浅谈css网页的几种布局任务22：完成本模块作业模块五（实战演练）任务23：实战演练任务24：模块五作业任务23：观看HTML+CSS网站设计11讲视频第50讲：实战演练-前期准备第51讲：实战演练-页面头部的实现第52讲：实战演练-页面导航栏的实现第53讲：实战演练页面主体的实现(一)第54讲：实战演练页面主体的实现(二)第55讲：实战演练页面主体的实现(三)第56讲：实战演练页面主体的实现(四)第57讲：实战演练页面主体的实现(五)第58讲：实战演练页面主体的实现(六)第59讲：实战演练页面主体的实现(七)第60讲：实战演练页脚的实现任务24：完成本模块作业
