《HTMLCSS网站设计》课程教学设计方案

1、HTML+CSS站设计课程教学方案第一部分：课程概况HTML+CSS站设计是 Web应用开发的基础课程，是计算机类专业的一门实践性很强的技术基础课。本课程介绍 Web 程序设计的基本原理和技术、HTMLW页程序设计基础和CSS使用等有关内容。通过本课程的学习，使学生掌握开发Web页面的基础知识和方法，对Web页面程序设计有一个全面的认识和了解， 熟悉网页设计流程、掌握网络中常见的网页布局效果、 学会制作各种企业，门户，电商类网站。第二部分：课程内容整个课程内容可分为三大部分：第一部分为html 基础，主要介绍的是课程入门相关的知识，比如与本课程有关的一些基本概念、html标记的用法等。会以语法

2、和实例相结合的形式详细讲解HTML®言中各个元素及其属性的作用、语法和显示效果。这部分内容是学好本门课程的前提，篇幅大概占用本门课程的30%。第二部分为CSS相关内容，会从 CSS基本概念开始，分别讲解 css选择器、盒子模型和定位与浮动等控 制各种元素显示的方法，以及 CS时局页面的技巧等知识，这一部分是本门课程的重难点所在，内容占比也 比较大，会占用本课程的 50%第三部分为实战演练环节，主要内容包括站点的建立、页面整体及各组块的布局分析、框架搭建、页面 实例每个部分的制作过程等。会用十讲左右的时间完成一个布局合理、美观大方的页面。这张页面涉及到了 网页设计的大部分知识点，学习过

3、程中，通过实战演练环节的学习，期望大家可以完整地掌握页面制作的方 法。第三部分：教学设计模块名称涉及知识点任务设计各任务所用资源名称模块一（课程导学）任务1:浏览课程教学文件 任务2:观看课程导学视频任务1 任务1 任务1 任务2HTML+CSSJ站设计课程教学大纲HTML+CSSJ站设计课程教学设计方案HTML+CS轲站设计课程考核方案« HTML+CS轲站设计-第1讲-课程概述模块二（HTMLHTML®础、网页文本插入及格式化、列表、图像、超链任务3: HTMLS础知识任务31234学习5篇文本辅导HTML+CS轲站设计-义本辅导-认识网页、网页相关的名词、Web标准H

4、TML+CS轲站设计-义本辅导-HTML简介、CSS简介、常见浏览器介绍HTML+CS轲站设计-义本辅导-HTML文档基本格式、 HTML标记及其属性HTML+CS轲站设计-文本辅导-Dreamweaver简介接、表单、表格、首视频任务4:网页文本的插入及其格式化任务5:为你的网页添加图像5HTML+CSSJ站设计-文本辅导-创建第一个网页任务3:观看HTML+CS轲站设计6讲视频第2讲：网页及其构成元素第3讲：什么是HTML第4讲：web标准及 CSSH识第5讲：网页开发环境之 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讲：网页文本的插入与排版第9讲：格式化你的文本任务4:完成一例上机练习上机1:（考察知识点为 HTML文本标记、标记的属性）任务5:学习1篇文本辅导9 HTML+CS轲站设计-义本辅导-常用图像格式、图像标记任务5:观看HTML+CS轲站设计1讲视频第11讲：为你的网页添

6、加图像任务5:完成两例上机练习上机2：（考察知识点为图像标记img）上机3:（考察知识点为 HTML标记、图彳标记img）任务6:模块二作业1任务7:义字列表任务8:超链接任务9:表单任务6:完成本部分作业任务7:学习1篇文本辅导8 HTML+CSSJ站设计-义本辅导-认识列表、无序列表、有序列表、定义列表任务7:观看HTML+CS轲站设计1讲视频第10讲：文字列表任务7:完成一例上机练习上机4:（考察知识点为：定义列表dl、定义列表实现图文混排）任务7:浏览1篇参考资料3HTML+CS轲站设计-参考资料-定义列表在图文混排中的应用、列表嵌套任务8:学习2篇文本辅导10 HTML+CS轲站设计

7、-义本辅导-超链接、锚点链接11 HTML+CS轲站设计-义本辅导-相对路径和绝对路径任务8:观看HTML+CS轲站设计3讲视频第12讲：超链接第13讲：绝对路径和相对路径第14讲：创建图像热点链接任务9:学习2篇文本辅导12HTML+CS轲站设计-义本辅导-表单的构成与创建13HTML+CS轲站设计-义本辅导-表单控件任务9:观看HTML+CS轲站设计3讲视频第15讲：实现交互的窗口 -表单第16讲：表单控件第17讲：HTML5高级表单元素任务9:完成两例上机练习上机5：（考察知识点为：表单的构成、<form>标记及相应属性、input控件及常用属性）任务io：在网页中插入表格任

8、务ii:在网页中插入视频和首频任务12:模块二作业2上机6：（考察知识点为：input控件及常用属性、textarea 控件）任务10:学习1篇义本辅导14HTML+CS轲站设计-义本辅导-创建表格、表格相关标记、表格的结构任务10:观看HTML+CS轲站设计1讲视频第18讲：在网页中插入表格任务10:完成一例上机练习上机7:（考察知识点为：创建表格、tr标记属性、td标记属性）任务11:学习1篇义本辅导15 HTML+CS制站设计-文本辅导-使用HTML5在网页中嵌入音频和视频的基本 方法任务11:观看HTML+CS轲站设计1讲视频第19讲：在网页中插入视频和首频任务12:完成本部分作业模块

9、三（CSS基础）CSS基础、选择器、CSS文本样式、盒模型、开发者工具、元素类型与转换任务13: CSS基础任务14: CSS选择器任务13:学习3篇文本辅导16HTML+CS轲站设计-义本辅导-掌握CSS样式规则、CSS样式表的引入方式17HTML+CS轲站设计-义本辅导-引用CSS文件到html网页里的方法18HTML+CS轲站设计-义本辅导-层叠和继承、优先级任务13:观看HTML+CS轲站设计4讲视频第20讲：CSS简介第22讲：HTM建局属性及内联样式第29讲：CSS和HTML的结合方式第34讲：CSS样式的优先级任务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内嵌式）上机9:（考察知识点为：无序列表、背景图像定义列表项目符号、超链接标记、链接伪类）上机10:（考察知识点为：超链接标记、链接伪类控制超链接样式）任务15:学习2篇义本辅导22HTML+CS轲站设计-XW导-CSS 办相关样式23HTML+CS轲站设计-文本辅导-CSS文本和段落样式任务15:观看HTML+CS轲站设计3讲视频第26讲：利用CSS丰富网页文字样式第27讲：CSS3新增义本属性第28讲：利用CSS丰富网页中的段落样式任务15:浏览3篇参考资料7HTML+CS轲站设计-参考资料-利用text-shadow 属性实现各种字体效果8 « HT

12、ML+CS轲站设计-参考资料-CSS控制歹U表样式9 « HTML+CS轲站设计-X资料-CSS控制表格样式任务16:盒子模型任务17:元素类型与转换任务15:完成2例上机练习上机11:（考察知识点为 CSS文本外观属性）上机12:（考察知识点为 CSS文本外观属性的综合应用）任务16:学习4篇义本辅导24HTML+CS轲站设计-文本辅导-认识盒子模型、盒子模型的组成属性25HTML+CS轲站设计-文本辅导-内边距padding、外边距 margin26HTML+CS轲站设计-义本辅导-背景属性27HTML+CS轲站设计-义本辅导-盒子宽度和高度、元素类型转换任务16:观看HTML+

13、CS轲站设计7讲视频第30讲：认识盒子模型第31讲：CSS中尺寸的样式设定第32讲开发者工具（一）第33讲开发者工具（二）第35讲CSS背景样式的设置第36讲盒子模型的设置（一）第37讲盒子模型的设置（二）任务16:完成3例上机练习上机13:（考察知识点为边框的复合属性、背景颜色）上机14：（考察知识点为盒子背景的复合属性）上机15:（考察知识点为盒子模型综合属性）任务17:观看HTML+CS轲站设计2讲视频第38讲：元素的类型与转换第 39 讲：DIV 与 SPAN任务17:浏览2篇参考资料10HTML+CS轲站设计-参考资料-块级元素与行内元素（内联元素）的区别和 联系任务18:模块三作业

14、11HTML+CS轲站设计-参考资料-CSS块级元素与内联元素的深入理解 任务18:完成本模块作业模块四（网页布局）定位、浮动及清除浮动、溢出与堆叠、贝向布局任务19 :定位任务20 :浮动及溢出任务21 :网页布局任务19:学习2篇文本辅导28HTML+CS轲站设计-义本辅导-浅谈CSS的几种定位29HTML+CS轲站设计-文本辅导-元素的定位属性、常见的几种定位模式任务19:观看HTML+CS轲站设计3讲视频第40讲：静态定位与相对定位第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轲站设计-文本辅导-网页明任务22 :模块四作业34HTML+CS轲站设计-文本辅导-html中div间距CSS样式布局设置任务19:观看HTML+CS轲站设计2讲视频第48讲：网页布局简介第49讲：CSS浮动布局实例任务19:浏览2篇参考资料12HTML+CS轲站设计-参考资料-DIV+CSS中让布局居中、背景、文字内容居 中13HTML+CS轲站设计-参考资料-浅谈css网页的几种布局任务22:完成本模块作业模块五（实战演练）任务23 :实战演练任务24 :模块五作业任务23:观