圣诞节的英语单词-前尘如梦

《HTML+CSS网站设计》课程教学方案

第一部分：课程概况
《HTML+CSS网站设计》是Web应用开发的基础课程，是计算机类专业的一门实践性很强的技术基础课 。本课程介绍Web
程序设计的基本原理和技术、HTML网页程序设计基础和 CSS使用等有关内容。通过本课程的学习，使学生掌握开发 Web页
面的基础知识和方法，对Web 页面程序设计有一个全面的认识和了解，熟悉网页设计流程、掌握网络中常见的网页布局效果、
学会制作 各种企业，门户，电商类网站。
第二部分：课程内容
整个课程内容可分为三大部分： 第一部分为html基础，主要介绍的是课程入门相关的知识，比如与本课程有关的一些基本概念、html
标记的用法等。会以语法和实例相结合的形式详细讲解HTML语言中各个元素及其属性的作用、语法和 显示效
果。这部分内容是学好本门课程的前提，篇幅大概占用本门课程的30%。
第二部分为 CSS相关内容，会从CSS基本概念开始，分别讲解css选择器、盒子模型和定位与浮动等控

制各种元素显示的方法，以及CSS布局页面的技巧等知识，这一部分是本门课程的重难点所在，内容占 比也
比较大，会占用本课程的50%。
第三部分为实战演练环节，主要内容包括站点的建立、 页面整体及各组块的布局分析、框架搭建、页面
实例每个部分的制作过程等。会用十讲左右的时间完成一 个布局合理、美观大方的页面。这张页面涉及到了
网页设计的大部分知识点，学习过程中，通过实战演练 环节的学习，期望大家可以完整地掌握页面制作的方
法。
第三部分：教学设计

模块名称
模块一

涉及知识点 任务设计
任务1：浏览课程教学文件
任务2：观看课程导学视频
任务3：HTML基础知识




各任务所用资源名称
任务1：《HTML+CSS网站设计》课程教学大纲
任务1：《HTML+CSS网站设计》课程教学设计方案
任务1：《HTML+CSS网站设计》课程考核方案
任务2：《HTML+CSS网站设计》-第1讲-课程概述
任务3：学习5篇文本辅导
1《HTML+CSS网站设计》-文本辅导- 认识网页、网页相关的名词、Web标准
2《HTML+CSS网站设计》-文本辅导- HTML简介、CSS简介、常见浏览器介绍
3《HTML+CSS网站设计》-文本辅导-HTML文档基本格式、HTML标记及其属性
4《HTML+CSS网站设计》-文本辅导- Dreamweaver简介
（课程导学）
HTML基础、网页文
模块二
本插入及格式化、
（HTML）
列表、图像、超链

接、表单、表格、
音视频











任务4：网页文本的插入及其格式化







任务5：为你的网页添加图像






5《HTML+CSS网站设计》-文本辅导- 创建第一个网页
任务3：观看《HTML+CSS网站设计》6讲视频
第2讲：网页及其构成元素
第3讲：什么是HTML
第4讲：web标准及CSS初识
第5讲：网页开发环境之Dreamweaver
第6讲：HTML文档的基本结构
第7讲：第一个HTML文件
任务3：浏览2篇参考资料
1《HTML+CSS网站设计》-参考资料-Sublime Text 3 详细图文使用教程
2《HTML+CSS网站设计》-参考资料-HTML基础知识总结
任务4：学习2篇文本辅导
6《HTML+CSS网站设计》-文本辅导- 标题段落标记 、文本样式标记
7《HTML+CSS网站设计》-文本辅导-文本格式化标记、特殊字符标记
任务4：观看《HTML+CSS网站设计》2讲视频
第8讲：网页文本的插入与排版
第9讲：格式化你的文本
任务4：完成一例上机练习
上机1：（考察知识点为HTML文本标记、标记的属性）
任务5：学习1篇文本辅导
9《HTML+CSS网站设计》-文本辅导- 常用图像格式、图像标记
任务5：观看《HTML+CSS网站设计》1讲视频
第11讲：为你的网页添加图像
任务5：完成两例上机练习
上机2：（考察知识点为图像标记img）
上机3：（考察知识点为HTML标记、图像标记img）

任务6：模块二作业1
任务7：文字列表







任务8：超链接






任务9：表单









任务6：完成本部分作业
任务7：学习1篇文本辅导
8《HTML+CSS网站设计》-文本辅导- 认识列表、无序列表、有序列表、定义列表
任务7：观看《HTML+CSS网站设计》1讲视频
第10讲：文字列表
任务7：完成一例上机练习
上机4：（考察知识点为：定义列表dl、定义列表实现图文混排）
任务7：浏览1篇参考资料
3《HTML+CSS网站设计》-参考资料-定义列表在图文混排中的应用、列表嵌套
任务8：学习2篇文本辅导
10《HTML+CSS网站设计》-文本辅导- 超链接、锚点链接
11《HTML+CSS网站设计》-文本辅导-相对路径和绝对路径
任务8：观看《HTML+CSS网站设计》3讲视频
第12讲：超链接
第13讲：绝对路径和相对路径
第14讲：创建图像热点链接
任务9：学习2篇文本辅导
12《HTML+CSS网站设计》-文本辅导-表单的构成与创建
13《HTML+CSS网站设计》-文本辅导-表单控件
任务9：观看《HTML+CSS网站设计》3讲视频
第15讲：实现交互的窗口--表单
第16讲：表单控件
第17讲：HTML5高级表单元素
任务9：完成两例上机练习
上机5：（考察知识点为：表单的构成、标记及相应 属性、input控件及常
用属性）

任务10：在网页中插入表格





任务11：在网页中插入视频和音频




任务12：模块二作业2
任务13：CSS基础



CSS基础、选择器、

上机6：（考察知识点为：input控件及常用属性、textarea控件）
任务10：学习1篇文本辅导
14《HTML+CSS网站设计》-文本辅导- 创建表格、表格相关标记、表格的结构
任务10：观看《HTML+CSS网站设计》1讲视频
第18讲：在网页中插入表格
任务10：完成一例上机练习
上机7：（考察知识点为：创建表格、tr标记属性、td标记属性）
任务11：学习1篇文本辅导
15《HTML+CSS网站设计》-文本辅导- 使用HTML5在网页中嵌入音频和视频的基本
方法
任务11：观看《HTML+CSS网站设计》1讲视频
第19讲：在网页中插入视频和音频
任务12：完成本部分作业
任务13：学习3篇文本辅导
16《HTML+CSS网站设计》-文本辅导-掌握CSS样式规则、CSS样式表的引入方式
17《HTML+CSS网站设计》-文本辅导-引用CSS文件到html网页里的方法
18《HTML+CSS网站设计》-文本辅导-层叠和继承、优先级
任务13：观看《HTML+CSS网站设计》4讲视频
第20讲：CSS简介
第22讲：HTML全局属性及内联样式
第29讲：CSS和HTML的结合方式
第34讲：CSS样式的优先级
任务13：浏览1篇参考资料
4《HTML+CSS网站设计》-参考资料-HTML5全局属性汇总
任务14：学习3篇文本辅导
19《HTML+CSS网站设计》-文本辅导- CSS基础选择器
模块三
CSS文本样式、盒


开发者工具、

（CSS基础）
模型、
元素类型与转换



任务14：CSS选择器

任务15：CSS文本和段落样式










20《HTML+CSS网站设计》-文本辅导-CSS选择器是什么？选择器有哪些类型？
21《HTML+CSS网站设计》-文本辅导-伪类、链接伪类控制超链接
任务14：观看《HTML+CSS网站设计》4讲视频
第21讲：元素选择器和后代选择器
第23讲：类选择器
第24讲：ID选择器器和属性选择器
第25讲：链接的选择器和样式
任务14：浏览1篇参考资料
5《HTML+CSS网站设计》-参考资料-CSS的选择器
6《HTML+CSS网站设计》-参考资料-30个你不可不知的css选择器
任务14：完成3例上机练习
上机8：（考察知识点为类选择器、CSS内嵌式）
上机9：（考察知识点为：无序列表、背景图像定义列表项目符号、超链接标记、
链接伪类）
上机10：（考察知识点为：超链接标记、链接伪类控制超链接样式）
任务15：学习2篇文本辅导
22《HTML+CSS网站设计》-文本辅导- CSS文本相关样式
23《HTML+CSS网站设计》-文本辅导-CSS文本和段落样式
任务15：观看《HTML+CSS网站设计》3讲视频
第26讲：利用CSS丰富网页文字样式
第27讲：CSS3新增文本属性
第28讲：利用CSS丰富网页中的段落样式
任务15：浏览3篇参考资料
7《HTML+CSS网站设计》-参考资料-利用text-shadow属性实现各种字体效果
8《HTML+CSS网站设计》-参考资料-CSS控制列表样式
9《HTML+CSS网站设计》-参考资料-CSS控制表格样式

任务16：盒子模型
















任务17：元素类型与转换





任务15：完成2例上机练习
上机11：（考察知识点为CSS文本外观属性）
上机12：（考察知识点为CSS文本外观属性的综合应用）
任务16：学习4篇文本辅导
24《HTML+CSS网站设计》-文本辅导-认识盒子模型、盒子模型的组成属性
25《HTML+CSS网站设计》-文本辅导-内边距padding、外边距margin
26《HTML+CSS网站设计》-文本辅导-背景属性
27《HTML+CSS网站设计》-文本辅导-盒子宽度和高度、元素类型转换
任务16：观看《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篇参考资料
10《HTML+CSS网站设计》-参考资料- 块级元素与行内元素（内联元素）的区别和
联系

任务18：模块三作业
任务19：定位






任务20：浮动及溢出


定位、浮动及清除


浮动、溢出与堆叠、

页面布局









任务21：网页布局

11《HTML+CSS网站设计》-参考资料- CSS块级元素与内联元素的深入理解
任务18：完成本模块作业
任务19：学习2篇文本辅导
28《HTML+CSS网站设计》-文本辅导- 浅谈CSS的几种定位
29《HTML+CSS网站设计》-文本辅导- 元素的定位属性、常见的几种定位模式
任务19：观看《HTML+CSS网站设计》3讲视频
第40讲：静态定位与相对定位
第41讲：绝对定位
第43讲：固定定位
任务20：学习3篇文本辅导
30《HTML+CSS网站设计》-文本辅导- 认识浮动、元素的浮动属性float
31《HTML+CSS网站设计》-文本辅导- 清除浮动属性clear、常用的几种清除浮动
的方法
32《HTML+CSS网站设计》-文本辅导-溢出（overflow属性）
任务18：观看《HTML+CSS网站设计》5讲视频
第42讲：溢出和堆叠顺序
第44讲：浮动
第45讲：浮动的清除（一）
第46讲：浮动的清除（二）
第47讲：浮动元素的外边距问题
任务18：完成3例上机练习
上机16：（考察知识点为元素的浮动属性）
上机17：（考察知识点为浮动与定位）
上机18：（考察知识点为浮动定位属性的综合应用）
任务21：学习2篇文本辅导
33《HTML+CSS网站设计》-文本辅导-网页布局
模块四
（网页布局）

任务22：模块四作业
任务23：实战演练
中
34《HTML+CSS网站设计》-文本辅导- html中div间距CSS样式布局设置
任务19：观看《HTML+CSS网站设计》2讲视频
第48讲：网页布局简介
第49讲：CSS浮动布局实例
任务19：浏览2篇参考资料
12《HTML+CSS网站设计》-参考资料- DIV+CSS中让布局居中、背景、文字内容居
13《HTML+CSS网站设计》-参考资料- 浅谈css网页的几种布局
任务22：完成本模块作业
任务23：观看《HTML+CSS网站设计》11讲视频
第50讲：实战演练--前期准备
第51讲：实战演练--页面头部的实现
第52讲：实战演练--页面导航栏的实现
第53讲：实战演练—页面主体的实现(一)
第54讲：实战演练—页面主体的实现(二)
第55讲：实战演练—页面主体的实现(三)
第56讲：实战演练—页面主体的实现(四)
第57讲：实战演练—页面主体的实现(五)
第58讲：实战演练—页面主体的实现(六)
第59讲：实战演练—页面主体的实现(七)
第60讲：实战演练—页脚的实现
任务24：完成本模块作业


模块五






任务24：模块五作业
（实战演练）