《响应式Web开发项目教程(HTML5+CSS3+Bootstrap)(第3版)》
课程教学大纲
(课程英文名称)
课程编号:
学分:x学分
课时:66(其中:讲课48时上机18课时)
先修课程:计算机基础
适用专业:信息技术及其计算机相关专业
一、课程的性质与目标
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)是一门面向Web前端开发人员的课程,内容包括HTML和CSS的基础知识、表格、表单、JavaScript、视频、音频、Canvas绘图、CSS动画、移动Web屏幕适配、Bootstrap基础入门、Bootstrap组件应用,以及阶段项目——在线学习平台、综合项目——在线鲜花商城。本课程秉承立德树人理念,在案例中融入了思政元素。通过本课程的学习,不仅可以让学生掌握响应式Web开发的核心知识,还可以培养学生的家国情怀、责任担当和敬业精神。
二、课程设计思路和教学要求
课程设计理念:通过学习本课程,使学生掌握如何将HTML5、CSS3、Bootstrap技术应用于项目开发。按照学习的难易程度及先后顺序安排具体的内容,可以有效地将学生所学的内容串联起来,从而培养学生分析问题和解决问题的能力。
课程设计思路:本课程根据知识点难易的先后顺序进行讲解,并结合示例代码帮助学生进行理解。通过案例的演示,帮助学生学以致用,将基础知识转化为解决实际问题的能力。学完响应式Web开发的基础知识后,通过阶段项目和综合项目将所学内容串联起来,培养学生分析和解决问题的能力。
操作系统:Windows10或更高版本
开发工具:VisualStudioCode编辑器、Chrome浏览器
三、课程的主要内容及基本要求
第1章HTML页面结构构建
学习单元
HTML页面结构构建
课时
4课时
学习目标
熟悉HTML的概念,能够说明HTML的作用和HTML5的优势
熟悉浏览器的概念,能够说明浏览器的作用和Chrome浏览器的主要优势
掌握VisualStudioCode编辑器的使用方法,能够使用VisualStudioCode编辑器进行代码开发
了解标签的概念,能够说出标签的分类、标签的属性和标签之间的关系
掌握页面格式化标签的使用方法,能够灵活运用页面格式化标签将文本呈现在网页中
掌握文本格式化标签的使用方法,能够灵活运用文本格式化标签将文本以加粗、斜体、添加下划线、添加删除线等方式显示
掌握图像标签的使用方法,能够灵活运用img标签定义图像
熟悉HTML实体的概念,能够归纳常用的HTML实体
掌握列表的使用方法,能够定义无序列表、有序列表和定义列表
了解列表嵌套,能够说出列表嵌套的方法
掌握超链接的使用方法,能够灵活运用a标签定义超链接
掌握容器标签的使用方法,能够使用div标签划分网页的区域,使用span标签定义网页中某些需要显示为特殊样式的文本
了解元素的概念,能够说出HTML中常见的元素分类
掌握个人简介页面的制作方法,能够完成个人简介页面的开发
掌握新闻页面的制作方法,能够完成新闻页面的开发
学习内容
知识点
掌握程度
重点
难点
HTML概述
熟悉
浏览器
熟悉
VisualStudioCode编辑器
掌握
标签概述
了解
页面格式化标签
掌握
√
文本格式化标签
掌握
√
图像标签
掌握
√
√
HTML实体
熟悉
项目1-1个人简介页面
掌握
列表
掌握
√
√
列表嵌套
了解
超链接
掌握
√
容器标签
掌握
√
元素
了解
项目1-2新闻页面
掌握
第2章CSS页面样式美化
学习单元
CSS页面样式美化
课时
10课时
学习目标
熟悉CSS的概念,能够归纳CSS的概念和优势
了解CSS样式规则,能够说出其组成部分
掌握CSS的引入方式,能够将CSS应用于HTML文档
掌握基础选择器的使用方法,能够通过基础选择器选择要改变样式的元素
掌握字体属性的使用方法,能够灵活运用字体属性设置网页中字体的样式
掌握字体图标的使用方法,能够在网页中使用各种字体图标
掌握文本外观属性的使用方法,能够灵活运用文本外观属性设置网页中文本的样式
掌握CSS注释的使用方法,能够在CSS代码中添加注释
掌握复合选择器的使用方法,能够根据需要选择具有特定关系的元素
掌握伪类选择器的使用方法,能够根据元素的特定状态或位置选择元素
掌握伪元素选择器的使用方法,能够在特定元素中插入新的内容或样式
熟悉CSS的三大特性,能够归纳CSS的三大特性
掌握列表样式属性的使用方法,能够通过列表样式属性设置列表的项目符号
熟悉CSS标准盒模型,能够归纳CSS标准盒模型的组成部分
掌握边框属性的使用方法,能够为图像、文本