Web前端开发项目教程（HTML5 CSS3 JavaScript）（微课版）-教案 刘锡冬 任务04--10 向网页中插入图像和文本---网页中插入视频和音频 .docx

《网页设计与开发》课程教案

3-

2-

网页设计与开发

教案

授课专业：XXXX专业

课程性质：专业基础课

学时数：64学时

目录

TOC\o1-3\h\z\u课程基本信息 2

任务01网站设计与开发起步 4

子任务01-1网站设计与开发起步 4

子任务01-2制作第一个网页 8

任务02网页的蓝图——简单布局 12

子任务02-1使用CSS装饰网页 12

子任务02-2巧用选择器调兵遣将 16

子任务02-3使用盒模型划分页面 20

子任务02-4使用BFC隔离空间 26

任务03网页的蓝图——复杂布局 30

子任务03-1浮动布局两栏式页面 30

子任务03-2DIV+CSS布局网上商城首页 34

子任务03-3网格布局网站商城首页 38

任务04向网页中插入图像和文本 44

子任务04-1网站首页中图像的应用 44

子任务04-2网站首页中文本的应用 49

任务05向网站首页添加导航 54

子任务05-1页面中超链接的使用 54

子任务05-2一级导航菜单的设计开发 58

子任务05-3二级弹出式菜单的定位 61

任务06网页中列表的应用 65

子任务06-1认识列表 65

子任务06-2使用列表制作多级导航 70

任务07使用弹性盒布局二级导航菜单 74

任务08网页中表格元素的应用 78

任务09网页中表单元素的应用 83

任务10网页中插入视频和音频 88

任务04向网页中插入图像和文本

子任务04-1网站首页中图像的应用

教案名称

子任务04-1网站首页中图像的应用

计划学时

2学时

教学内容

本子任务学习如何在网页中插入图像信息，同时按照效果图的要求对图像进行精确的样式设置。

知识目标

1.掌握img标记及其属性的用法

2.掌握常见图像样式的使用

能力目标

1.能够向网页中添加图像

2.能够按需调整图像的样式

素质目标

1.坚持总体国家安全观

2.坚持精益求精的专业精神

3.坚持实事求是的精神

教学重点

img标签及其属性

教学难点

熟练调整图像的样式

信息化

教学资源

职教云教学平台“网页设计与开发”课程设计栏目

教学环境

教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台

教学方法

任务驱动法、讨论法、教练式教学法

思政融入方法

体验探究法、情景引入法

教学活动及主要环节

思政元素融入

【课前】

观看微课视频——子任务04-1网站首页中图像的应用

并完成教学平台的课前自测题

【课中】

课程导入（10分钟）

浏览网易新闻页面，图片新闻和文字新闻给我们的感受有何不同？

浏览有中国、沙特、伊朗三国领导人合影的图文信息页面。

讨论：通过中国促使沙特和伊朗恢复外交关系来分析中国民美国在国际中起的作用有什么不同？

讨论：能用于装饰美化图像的特征有哪些？新闻图片允许ps吗？

引出本门课程的任务：在网页中如何显示出图像，如何调整能显示出来中意的图像外观

任务提出（5分钟）

在商城首页中布局显示轮播图中的图片、在商品展示中显示商品图片。

知识点讲解（20分钟）

1.插入图像

img标签用于在HTML页面中嵌入一个图像，严格地讲，是使用img标签在页面里创建了一块区域，用以容纳被引用的图像。

基本格式：

imgsrc=图像URLalt=替代文本[其它可选属性]/

img/标记是单标记，是行内元素，用于在当前行中插入一幅图像，图像前后的文本默认与图像底部对齐。

src属性指定图像路径及文件名，常见的web端显示图像格式有jpg、gif或png格式。

（1）绝对路径

绝对路径一般是指带有盘符的路径或完整的网络地址。

例如“D:\myweb\img\logo.gif”或者“/images/logo.gif”

（2）相对路径

相对路径不带有盘符，通常是以当前HTML网页文件为起点，通过层级关系描述目标图像的位置。

分析讨论（10分钟）

对文本设置的对齐属性对图片起作用吗？

图片默认是什么类型的元素？可以调整改变吗？

学生实践验证讨论结果

知识点讲解（20分钟）

2.CSS图像样式

已知容器盒子大小为100px*100px，图片大小200px*200px

讨论：如何使图片大小和盒子匹配？

讨论：如何实现圆形图片？

思考

多个inline-block或者inclin