Web前端开发（初级篇）教学标准讲义
第二篇 HTML5和CSS3开发基础与应用
第三章 响应式（移动端）网站开发
第一节 简介
【演示内容】 综合项目二
【知识点】
1.响应式：针对大小不同的设备终端，网页能自动响应，显示相匹配的样式，从而提升用户的体验。
【演示内容】用手机登录新浪官网，登录学院的官网
【知识点】
1.视口基础
可见视口：设备大小，设备的宽度
视窗视口：浏览器窗口，即网页宽度
注意：视口的概念只存在于移动端，PC端不存在；视口宽度的大小与视窗视口大小没有直接关系
【技能点】
1.在head标记内部添加Meta标记，并将页面的元信息定义：
content=”width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=x,minimum-scale=x”/>
Width=device-width:视窗视口宽度=可见视口宽度；初始、最小和最大的缩放比例：0-10；
user-scalable:设置用户是否可以缩放
2.在谷歌浏览器中模拟不同移动终端显示效果
Web前端开发（初级篇）教学标准讲义
我们也可以调整浏览器窗口的宽度来模拟不同设备显示的效果。
【提示】：为了提升用户的体验和网站友好性，浏览器宽度上不要出现水平滚动条，我们进行网页排版整体设置时，只需考虑设备宽度；在高度上，移动端的显示高度根据内容撑开，我们可以用手触动屏幕上下滑动即可。
Web前端开发（初级篇）教学标准讲义
第二节 响应式布局基础
Web开发与前端技术
一、Web开发基础
1.1 网页与网站的概念
• 网页（Web Page）：指在网络上可以通过浏览器访问的页面。
• 网站（Website）：由多个相关网页组成的互联网上的信息集合。
1.2 互联网协议
• 超文本传输协议（HTTP）：用于浏览器和服务器之间的通信。
• 简单邮件传输协议（SMTP）：用于电子邮件的发送。
• 文件传输协议（FTP）：用于互联网上的文件传输。
1.3 域名系统（DNS）
• 域名：互联网上用于标识某一计算机的名称。
• DNS：将域名解析为对应的IP地址。
二、前端技术概述
2.1 前端技术的三剑客
• HTML（HyperText Markup Language）：超文本标记语言，用于构建网页结构。
• CSS（Cascading Style Sheets）：层叠样式表，用于网页样式设计。
• JavaScript：一种脚本语言，用于实现网页的交互功能。
2.2 网页编辑工具
• 文本编辑器：如Notepad、Sublime Text、Visual Studio Code等。
• WYSIWYG编辑器：所见即所得编辑器，如WordPress、Dreamweaver等。
2.3 浏览器渲染流程
• 解析HTML：浏览器将HTML文本解析为DOM树。
• 解析CSS：浏览器将CSS样式应用到DOM树上，生成渲染树。
• 执行JavaScript：浏览器执行JavaScript代码，影响渲染树。 • 布局与绘制：浏览器对渲染树进行布局计算，并将结果绘制到屏幕上。
三、HTML与CSS
3.1 HTML基本元素
• 标题标签：
• 段落标签：
• 链接标签：
• 图片标签：
• 列表标签：
、
、
、
、
、
• 表单标签：
、、、、
、
3.2 CSS基本概念
• 选择器：用于选择和定位页面元素。
• 属性：用于设置页面元素的样式，如颜色、字体、布局等。
优秀教案样本1
课程：《Web前端开发》
课题：项目二——任务2制作首页
课时：4课时
一体化课程教案(首页)
共7页
科
目 Web前端开发 第2部分 项目实施
项目2：企业网站
任务2： 制作首页 授课
日 期 2015.11.
11/18/19 课时 4
班 级 14互联网G5-1、2、3班
授
课
方
式 理论讲授→技能演示→实训练习→教学总结 作 业题 数 拟用时间
教
学
目
的 应知：首页布局内容规划
应会：能使用DIV+CSS布局网页 使用教学媒体 投影（幻灯片）
白板
教学辅助系统
局域网
重
点 1、通过实例企业网站导入页面规划内容
2、分析网页结构、布局及区域划分
3、创建网页CSS文件及网页结构文件
4、完成首页页面内容设计 难
点 1、 创建CSS文件及网页结构文件
2、 首页页面内容设计
教
学
回
顾 (教师课后完成)
通过项目实施阶段项目2任务2的实施，让各小组学生根据实例网站首页设计及小组分工完成本组项目2企业网站首页布局及内容设计；
说
明 由于在之前的《网页美工》课程中就本项目企业网站进行了网站页面原型的设计，因此发给学生4组网站原型设计作为各组企业网站设计的参考，同时各小组也可以自行设计。
审阅签名： 任务2：制作首页
子任务1 创建网站首页布局结构文件（HTML/CSS文件）(2课时)
教学环节 教学内容 教学组织
教学回顾5’ 1、上次课内容回顾：
（1）检查各组任务实施准备页完成情况
（2）介绍本次课内容安排 教师使用PPT提问讲解
学生使用电子教室演示
（见附件1）
教学内容引入及技能演示35’ 2、内容引入及技能演示
（1）根据网站实例引入本次课内容
实例企业网站页面浏览
静态两级页面
≪Web前端开发之网页设计》课程教学单元设计
教学单元6 Bootstrap综合项目实战
授课教师： 授课班级： 学时：16
教学条件 预装Web前端开发工具HBUikier等的计算机；局域网环境；教学广播软件
教学索材 教材、教学文档、教学课件、案例项目库、教学平台等
教学目标设计
知识目标：
⑴BoOtStr叩下载与安装
(2) BoOtStr叩的布局容器
(3) Bootstrap的网格系统
(4) BootStr叩的导航栏
(5) Bootstrap的表单
(6) BootStr叩的按钮
(7) BootStr叩的轮播插件 能力目标：
(1)掌握BOOtStraP的安装。
(2)掌握BootStraP的布局容器。
⑶熟悉Bootstrap中的网格系统。
(4)掌握使用BoOtStr叩制作导航栏。
(5)掌握使用Bootstrap制作表单。
(6)掌握使用Bootstrap制作轮播事件。
教学内容 (1) BOotStraP下载与安装。
(2) Bootstrap的布局容器。
(3) Bootstrap的网格系统。
(4)使用BOotStraP制作导航栏。
(5)使用Bootstrap制作表单。
(6)使用Bootstrap制作轮播事件。
重点：
(1)使用bootstrap组件。
(2)将各区域组合成完整的网页。 难点t
(1)网格系统的应用。
⑵轮播插件的应用。
教学过程设计
任务6T：项目描述与BOOtStraP概述。(2学时)
主要
步骤 教学内容 教学方法 教学手段 师生活动
任务引入 Bootstrap综合项目描述 教师讲授启发引入 多媒体 教师：问题提问
学生：问题讨论
知识
讲解 (1)BootstrapfS介。
⑵Bootstrap的优势。
(3)Bootstrap布局容器。 启发讲解讨论归纳 多媒体课件演示 教师：知识讲解学生：记录笔记师生互动交流
示范
操作 操作1：BOotStraP下载和环境安装。
