电子信息工程学院

春季学期延迟开学期间

教

学

方

案

教研室：   软件技术        

教师姓名：    朱丽文         

任教课程：《HTML5应用开发技术》 

任教班级： 2018级软件技术1班  

二〇二〇 年 02月

一、 课堂组织形式

网络直播 在线答疑，网络直播采用钉钉群直播，在线答疑通过QQ群、钉钉群、学校网络在线教学平台。

二、 具体时间安排

1、视频直播课

每周三下午14：10-15:10直播上课,14:00开始入场；

直播方式：钉钉班级群

2、集中辅导在线答疑

每周五上午9:10-9：40

答疑方式：钉钉班级群

三、 答疑和日常辅导

因钉钉班级群为公用群，为不影响其他教师上课，在非上述时段内，其他答疑辅导一律通过班级QQ群或单独私聊以及校内网络在线教学平台进行，网址：https://course.rzpt.cn/front/index.php。

四、 教学内容

第1周 Bootstrap 是什么

    1.1 Bootstrap 简述

1.2 为什么使用 Bootstrap

1.3 如何使用 Bootstrap

1.4  下载Bootstrap

1.5 简单模板

1.6 案例：第一个Bootstrap实例

1.7 Bootstrap4.0 beta版

本章小结

练习与实训

第2周HTML与CSS知识回顾（练习篇）

2.1 HTML基础回顾

2.2 HTML文档的构成

2.3 HTML回顾综合练习——一个简单的网页

2.4 CSS基础回顾

2.5 CSS回顾综合练习——改造简单的HTML网页

2.6 在网页中引入Bootstrap

2.7 练习案例——神奇的Bootstrap——化腐朽为神奇的“魔镜”

第3周Bootstrap布局：网格系统

3.1 Bootstrap网格系统的实现原理

3.2 Bootstrap网格系统的工作原理

3.3使用方法

3.3.1基本用法

3.3.2列偏移

3.3.3列排序

3.3.4列嵌套

3.3.5响应式栅格

3.3.6清除浮动

第4周实操演练：案例——招商银行首页

用栅格系统设计并实现招商银行系统首页。

操作提示：

（1）创建HTML5页面，在页面中引入meta。

（2）引入bootstrap.min.css文件。

（3）在body中添加容器div。

（4）在container div中，先完成Logo部分，此处可以作为一行。

（5）在Logo行下面加导航条，这里用到了后面要讲的导航条的内容。

（6）添加内容行，包含2列，左边列含3个栅格，右边含9个栅格。

（7）添加页脚行。

（8）在head部分添加内容的样式。

第5周CSS布局（一）

5.1 排版

5.1.1标题

5.1.2段落

5.1.3mark标签

5.1.4小号文本

5.1.5del和s标签

5.1.6ins和u标签

5.1.7strong和em标签

5.1.8b和i标签

5.1.9文本对齐方式

5.1.10字母大小写

5.1.11缩略语

5.1.12地址

5.1.13引用

5.2 列表

5.2.1无序列表和有序列表

5.2.2无样式列表

5.2.3 内联列表

5.2.4 描述列表

5.3代码

第6周CSS布局（二）

6.4 表格

6.4.1基本表格

6.4.2斑马线表格

6.4.3带边框的表格

6.4.4鼠标悬停高亮行

6.4.5紧凑型表格

6.4.6状态类

6.4.7响应式表格

6.5 按钮

6.5.1预定义按钮

6.5.2按钮尺寸

6.5.3块级按钮

6.5.4按钮激活状态

6.5.5按钮禁用状态

6.5.6按钮标签

6.6 图像

6.6.1响应式图像

6.6.2图像形状

6.7 辅助类

6.7.1情景文本颜色

6.7.2情景文本背景色

6.7.3关闭按钮

6.7.4三角符号

6.7.5快速浮动

6.7.6块级居中显示

6.7.7清除浮动

6.7.8显示或隐藏

6.7.9屏幕阅读器和键盘焦点

6.7.10图像替换

五、 关于作业

每次作业将通过在线教学平台课堂中的作业模块进行发布、收取和批阅。同时，课程的电子教案、工具包也已经上传到在线教学平台的资源模块，学生可通过在线教学平台进行自学。