Web前端技术项目式教程(HTML5 CSS3 Flex Bootstrap)教案-使用Bootstrap实现网页响应式布局
网页设计与制作项目教程(HTML+CSS+Bootstrap)项目二
上一页 下一页 返回
任务一 初识 HTML
• ＨＴＭＬ 文档用来描述网页. ＨＴＭＬ 文档包含ＨＴＭＬ 标签和纯 文本. ＨＴＭＬ 文档也被称为网页. 完整的ＨＴＭＬ 文档至少包括< ｈｔｍｌ > 标签、< ｈｅａｄ > 标签、< ｔｉｔｌｅ > 标签和< ｂｏ ｄｙ >标签.
• ＨＴＭＬ４. ０ 同样也加入了很多特定浏览器的元素和属性. 但是同 时也开始“清理” 这个标准. 把一些元素和属性标记为过时. 建议不 再使用它们.
上一页 下一页 返回
任务一 初识 HTML
• ＨＴＭＬ５ 草案的前身名为Ｗｅｂ Ａｐｐｌｉｃａｔｉｏｎｓ １. ０. 于２００４ 年由ＷＨＡＴＷＧ 提出. 于２００７ 年被Ｗ３Ｃ 接 纳. 并成立了新的ＨＴＭＬ 工作团队. 在２００８ 年１ 月２２ 日. 第 一份正式草案发布.２０１２ 年１２ 月１７ 日. 万维网联盟(Ｗ３Ｃ) 正式宣布凝结了大量网络工作者心血的ＨＴＭＬ５ 规范已经正式定 稿. Ｗ３Ｃ 的发言稿称:“ＨＴＭＬ５ 是开放的Ｗｅｂ 网络平台的奠 基石.” ２０１３ 年５月６ 日. ＨＴＭＬ５.１ 正式草案公布. 该规范 定义了第五次重大版本. 第一次要修订万维网的核心语言: 超文本标 记语言(ＨＴＭＬ). 在这个版本中. 新功能不断推出. 以帮助Ｗｅｂ 应 用程序的作者. 努力提高新元素互操作性. ２０１４ 年１０ 月２９ 日. 万维网联盟宣布. 经过几乎８年的艰辛努力. ＨＴＭＬ５ 标准规范最 终制定完成了. 并已公开发布.
上一页 下一页 返回
任务一 初识 HTML
• ５. ＨＴＭＬ 发展历史 • 超文本标记语言(第一版): １９９３ 年６ 月作为互联网工程工作小组
Web应用技术指南(HTML5+CSS3+jQuery+ BootStrap (2)[9页]
![Web应用技术指南(HTML5+CSS3+jQuery+ BootStrap (2)[9页]](https://img.taocdn.com/s3/m/5e03739c3b3567ec112d8a0f.png)
<html>
<head>
<title>我的第一个HTML文档</title>
</head>
<body>
油哦！
欢迎你，我的第一个HTML文档!我现在开始学习HTML，加
</body>
</html>
• 第三步：保存后，关闭用记事本软件打开 的first_page.html文件窗口；
• 第四步：在保存该文件的路径下，直接双 击该文件，默认情况下会自动用浏览器打 开（若无法直接打开该文件，可选择打开 文件方式为浏览器）。浏览器显示效果如 图2-1所示：
第二章 HTML基础 本章内容： HTML文档结构 HTML各种常用标签 HTML页面控制 HTML媒体
1
2.1 HTML文档结构
• 2.1.1 第一个HTML文档 • HTML文档到底是如何演绎网页内容，它的文档结构又是怎
样的，不妨带着这些疑问试着写一个最简单的HTML文档来 开启学习HTML之门。 • 第一步：新建一个文本文档，单击菜单中的"另存为"选项， 在熟悉路径下（这样保证不会忘记该路径，便于以后经常 使用），将文本文档保存成".html"后缀的文件（本案例保 存文件名为first_page.html）； • 第二步：用记事本软件打开first_page.html文件，输入以 下内容：
HTML文档头部信息
head元素（包含<head>和</head>标签）是所有头部信息的容器。其内 可包含<title>、<base>、<link>、<meta>、<script>以及<style> 标签，如表2-1所示
《Bootstrap响应式Web开发》—教学设计
丰富的组件库：Bootstrap框架提供了功能强大的组件与插件，如小图标、按钮组、菜单导航、标签页等。丰富的组件和插件可以使开发人员快速搭建前端页面。开发人员还可以根据实际需要进行组件和插件的定制。
按照浏览器的内核来划分，主要包括Blink、WebKit和Trident等
PC端浏览器主要包括Google（谷歌）公司的Chrome浏览器、Mozilla公司的Firefox浏览器、苹果公司的Safari浏览器、微软公司的Internet Explorer（简称IE）和Edge浏览器等
移动端浏览器主要包括Android系统内置的Android Browser、iOS系统内置的Mobile Safari，以及一师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。
第二课时（浏览器、Visual Studio Code编辑器）
一、复习巩固
教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。
二、通过需求引入的方式导入新课
如果要想开发Web项目需要安装浏览器和Visual Studio Code编辑器开发工具。
教学目标
使学生掌握Bootstrap的概念、特点及组成
使学生了解PC端浏览器和移动端浏览器的区别
使学生熟悉Visual Studio Code编辑器的使用
使学生熟悉移动Web开发的主流方案
教学重点
什么是Bootstrap
Bootstrap的特点及组成
浏览器与Visual Studio Code编辑器
教师讲解Chrome浏览器的优势。
Web前端开发之网页设计 教案 单元6 Bootstrap综合项目实战
⑸归纳总结Bootstrap网格系统。
教师讲解
多媒体
课件演示
学生：整理笔记老师：引导创新
课后
作业
制作“流浪动物领养”网站首页anima1展示区域。
作业练习
在线练习平台
老师：布置作业提出要求学生：完成作业
任务6-3：掌握BOotStraP基础组件：导航栏、表单及按钮。(4学时)
主要
步骤
教学内容
教师启发讨论归纳分数激励
实训项目单
学生：演示交流老师：点评激励
课堂总结
(1)归纳总结bootstrap轮播事件。
教师讲解
多媒体课件演示
学生：整理笔记老师：引导创新
课后作业
制作“流浪动物领养”网站首页carouse1区域。
作业练习
在线练习平台
老师：布置作业提出要求学生：完成作业
教学过程设计
任务6-5：整合网站首页所有区域。(2学时)
教学过程设计
任务6-2：掌握Bootstrap网格系统。(4学时)
主要
步源
教学内容
教学方法
教学手段
师生活动
任务引入
网格系统工作原理
教师讲授启发引入
多媒体
教师：问题提问学生：问题讨论
知识
讲解
(1)Bootstrap网格系统。
(2)offset列偏移
⑶列排序
⑷媒体查询
启发讲解
讨论归纳
多媒体
课件演示
教师：知识讲解学生：记录笔记师生互动交流
教学方法
教学手段
师生活动
任务引入
轮播事件
教师讲授启发引入
多媒体
教师：问题提问学生：问题讨论
知识
使用Bootstrap快速构建响应式网页设计的技巧
使用Bootstrap快速构建响应式网页设计的技巧标题：使用Bootstrap快速构建响应式网页设计的技巧导言：Bootstrap是一种流行的开源前端框架，用于快速构建响应式网页设计。
它提供了各种预定义的CSS和JavaScript组件，使开发者能够轻松地创建现代化的网站。
本文将介绍使用Bootstrap的一些技巧，帮助读者更好地利用这个框架。
一、导入Bootstrap：1. 下载和导入：访问Bootstrap官网，下载最新版本的Bootstrap压缩包。
2. 解压文件：将压缩包解压到项目文件夹中。
3. 导入CSS和JavaScript：在HTML文件中引入Bootstrap提供的CSS和JavaScript文件，确保文件路径正确。
二、网格系统的使用：1. 网格布局：Bootstrap提供了强大的网格系统，通过行和列的组合，可以灵活地布局网页内容。
2. 响应式布局：利用Bootstrap的响应式类，可以自动适应不同屏幕尺寸，确保网页在各种设备上都能展现良好的效果。
三、使用Bootstrap的组件：1. 导航栏：Bootstrap提供了简便的导航栏组件，可以使网页导航更加直观和易用。
2. 表格：通过Bootstrap的表格组件，可以轻松地创建美观且功能丰富的数据表格。
3. 表单：Bootstrap的表单组件可以使网页表单更加美观，同时提供了丰富的表单元素和验证功能。
4. 按钮和图标：利用Bootstrap提供的按钮和图标组件，可以轻松地创建漂亮的按钮和图标。
5. 模态框：通过Bootstrap的模态框组件，可以实现弹出的窗口效果，用于展示额外的内容或收集用户输入。
四、定制Bootstrap主题：1. 自定义变量：Bootstrap提供了一些自定义变量，可以根据项目需求修改这些变量，实现定制化的主题。
2. 样式覆盖：通过覆盖Bootstrap的默认样式，可以将其调整为符合项目需求的样式。
3. 使用第三方主题：除了自定义主题，Bootstrap还支持使用第三方主题，可以通过引入外部CSS文件来修改整个网页的样式。
Web应用技术指南(HTML5+CSS3+jQuery+ BootStrap (12)[7页]
![Web应用技术指南(HTML5+CSS3+jQuery+ BootStrap (12)[7页]](https://img.taocdn.com/s3/m/0110fe2ae009581b6ad9eb1d.png)
2、JavaScript事件
• 2. JavaScript拖动事件 • JavaScript拖动事件发生在鼠标拖拽时，JavaScript常
见的拖动事件如下表所示：
2、JavaScript事件
• 3. JavaScript常见的键盘事件 • JavaScript常见的键盘事件如下表所示：
第五章 JavaScript基础 1、掌握HTML DOM 2、掌握JavaScript事件
1
1、DOM
•Model，简称 DOM），是W3C组织推荐的处理可扩展标志语言的标准编 程接口。在网页上，组织页面（或文档）的对象被组织在 一个树形结构中，用来表示文档中对象的标准模型就称为 DOM。
2
1. 定位HTML元素
• 通过id定位HTML元素，使用的函数是 getElementById()，参数为元素的id。
2. 更改HTML
• 使用函数document.write()，改变 HTML 输出流。
2、JavaScript事件
• 1.鼠标事件 • JavaScript常见的鼠标事件如下表所示：
使用HTML5和CSS3构建响应式网页设计的技巧
使用HTML5和CSS3构建响应式网页设计的技巧第一章：HTML5的基本概念和使用技巧HTML5是一种用于网页开发的标准，它提供了一些新的元素和属性，使得开发者能够更加灵活和高效地创建网页。
在构建响应式网页设计时，我们可以利用HTML5的一些特性来实现网页的自适应布局和响应式功能。
1.1 新的语义标签HTML5引入了一些新的语义标签，如<nav>、<header>、<footer>等，这些标签可以更好地描述网页的结构和内容，使网页更易于理解和维护。
在构建响应式网页设计时，我们可以使用这些标签来规范网页结构，提高页面的可读性。
1.2 表单增强功能HTML5还提供了一些表单增强功能，如<input type="email">、<input type="tel">等，这些新的输入类型可以帮助我们实现更强大的表单验证和用户体验。
在构建响应式网页设计时，我们可以利用这些新的表单元素来规范用户输入，并提供更好的反馈。
1.3 多媒体支持HTML5对多媒体的支持也得到了大幅增强，我们可以使用新的<video>和<audio>标签来方便地在网页中嵌入视频和音频。
在构建响应式网页设计时，我们可以根据不同设备的屏幕尺寸和网络带宽，选择不同的视频和音频格式，以提供更好的用户体验。
第二章：CSS3的新特性和应用技巧CSS3是一种用于网页设计的样式表语言，它引入了一些新的特性和属性，可以帮助我们实现更丰富的页面效果和动画。
在构建响应式网页设计时，我们可以利用CSS3的一些新特性来实现页面的自适应布局和响应式效果。
2.1 媒体查询媒体查询是CSS3的一个重要特性，它可以根据不同设备的屏幕尺寸和特性，在不同情况下加载不同的样式表。
在构建响应式网页设计时，我们可以使用媒体查询来适配不同的屏幕尺寸，实现页面的自适应布局和响应式效果。
Web前端开发HTML5 CSS3教案网页设计基础教案
课程名称WEB 前端开发（1） 课次 1 任务、项目、课题名称 网页设计基础课时2学时教学内容网页的相关知识 网站设计流程 Dreamweaver 操作界面教学目标 掌握网页的相关知识 了解网站设计流程 熟悉Dreamweaver 操作界面 教学重点 网页相关概念 教学难点网站设计流程教学活动及主要环节学生活动 导入新课：（2分钟） 1．有无制作过网页？2．以前学过的网页课程？ 课程介绍：(10分钟)本学期主要学习如下内容： 1）HTML52）Dreamweaver CC2018网页制作编辑软件的使用 3） CSS 的使用4) DIV+CSS 网页布局考试方法：平时成绩（50）+期末考试（50）平时50分：到课率10分+提交实验作业10分+上课表现10分+作品20分 新授：一、网页展示与认识（展示百度、淘宝官网，历届学生的优秀作品）（10分钟）在学习创建网站、制作网页之前，我们先浏览几个网站，对这些网站的主页进行分析，了解优秀网页的布局结构、色彩搭配、导航栏的设计、动画效果等。
二、相关概念（15分钟）1、IP 地址和域名2、URL ：统一资源定位符3、HTTP ：超文本传输协议，提供一种发布和接收HTML 页面的方法。
4、网站、网页与主页：主页通常用index.htm 或index.html 表示。
5、HTML:超文本标记语言，在网页空白位置单击鼠标右键，选择“查看源文件”命令即可查看网页源代码。
（学生操作）6.WEB 标准：包括结构标准（HTML ）、表现标准(CSS)和行为标准(JAVASCRIPT).学生回答，参与互动动手操作，任意打开一个网页，查看网页源代码三、 HTML5概述（13分钟） HTML5主要优势：（1）良好的移植性 （2）更直观的结构。
（3）内容和样式分离。
（4）新的表单元素。
（5）更方便地嵌入音频和视频。
（6）矢量图绘制。
（演示canvas 画布） 四、常用的浏览器（5分钟）三大浏览器：IE 、火狐FireFox 、谷歌Chrome （推荐使用）。
Bootstrap响应式Web开发-教学大纲
《Bootstrap响应式Web开发》课程教学大纲（课程英文名称）课程编号：学分：学分学时：48学时（其中：讲课学时36 上机学时12）先修课程：计算机基础、计算机网络、HTML、CSS、JavaScript适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《Bootstrap响应式Web开发》是专注于HTML5中移动端常用的开发技术和Bootstrap 相关内容开发的Web前端教材，涉及HTML5、CSS3、JavaScript和Bootstrap框架等。
本课程提供了丰富的案例，如视频播放器、轮播图等，提高学生的学习兴趣。
对于案例的实现思路进行了细致地分析和总结，让学生理解复杂案例的实现过程。
通过本课程的学习，学生能够掌握移动Web技术和Bootstrap框架来快速实现响应式Web页面的开发。
二、课程设计理念与思路课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的升华与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与实际操作相结合”。
三、教学条件要求操作系统：Windows 7开发工具：Chrome、Visual Studio Code编辑器等工具四、课程的主要内容及基本要求第一章初识Bootstrap第二章移动Web开发基础（上）第三章移动Web开发基础（下）第四章移动端页面布局第五章Bootstrap栅格系统第六章Bootstrap框架常用组件第七章Bootstrap常用布局样式第八章综合案例——潮流穿搭网站五、学时分配六、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第9章使用Bootstrap实现网页响应式布局
课程名称Web前端开发项目名称
使用Bootstrap实现
网页响应式布局任务名称使用Bootstrap实现网页响应式布局课时 6
项目性质□演示性□验证性□设计性√综合性
授课班级授课日期授课地点
教学目标能力目标：
1. 具备应用Bootstrap实现响应式布局的能力
2. 具备灵活运用Bootstrap的能力
知识目标：
1. 掌握Bootstrap框架的基本语法
2. 掌握运用Bootstrap实现各种响应式布局的方法素质目标：
1. 培养学生信息搜集能力
2. 培养学生团结合作、互帮互助的能力
教学内容1. 任务描述
2. 任务展示与实现
（1）实现云景旅游公司首页Bootstrap布局（2）学生动手操作
3. 教师讲解本任务涉及的知识点
4. 任务小结
教学重点
1. Bootstrap框架的基本语法
2. Bootstrap框架实现响应式网页
教学难点 1. Bootstrap框架实现响应式网页
教学准备1. 装有Sublime或者Hbuilder的电脑
2. 教学课件PPT
3. 教材：《Web前端技术项目式教程》
作业设计1．使用Bootstrap实现公司二级页面“公司概况”的响应式效果。
教学过程
教学环节
教学内容与过程
（教学内容、教学方法、组织形式、教学手段）
课前组织
做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。
课程说明【课前说明】
分别从Bootstrap语法基础，Bootstrap框架的使用方法，讲解响应式网页的实现方法。
【目的】
使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。
掌握Bootstrap框架的基础，掌握使用Bootstrap框架实现响应式网页的方法。
课程内容描述一、Bootstrap环境搭建
还需要从jQuery官网上下载jQuery.min.js文件，Bootstrap源文件中的.js文件是依赖于jQuery的。
源文件下载好后，将文件夹中编译好的bootstrap.min.css文件和bootstrap.min.js文件存放到网站根目录styles和js文件夹下，并将其引入到网页中。
二、Bootstrap基本概念
1、容器
Bootstrap 4需要一个容器元素来包裹网页的内容，可以使用以下两个容器类。
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于100% 宽度，占据全部视口（viewport）的容器。
2、栅格系统
栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局，每行中所有容器所占的列数之和必须等于12。
3、样式
Bootstrap提供了丰富的样式类，方便快速实现网页布局及设置样式。
4、组件
Bootstrap作为完整的前端工具集，内置了大量强大、优雅的可重用组件，包含导航、导航栏、按钮、卡片、折叠、轮播、下拉菜单、表单、输入框组、列表组、模态框、分页、弹出框、进度条、滚动条、提示框等。
三、任务实现：使用Bootstrap布局重构旅游公司首页
课堂实训同步训练：
1、任务实现：使用Bootstrap框架重构旅游公司首页
2、任务拓展：使用Bootstrap框架重构二级页面“华阳湖景区”
总结评价
通过学习，学生能够掌握响应式布局的基本原理方法，掌握使用实现响应式布局的基本方法。
本节课主要运用案例教学法，通过使用Bootstrap框架实现云景旅游公司首页响应式效果。
深入理解响应式网页的实现方法，通过实例的方法加强对实现响应式网页的理解，达到能够独立熟练运用Bootstrap框架解决实际问题的能力。
教学评价方式以小组为单位，以完成案例的质量为评价标准，形成任务驱动，小组协作，质量与速度并存的课堂评价方式，促进学生的自主、创新学习的方
式。