情境三 制作图文混排网页（教案）-《网页设计与制作》同步教学（电子工业版）

情境三 制作图文混排网页 课程名称 网页设计与制作 学时 授课时间 授课章节 情境三 制作图文混排网页 授课班级 授课教师 网页设计与制作课程组 教学目的 专业理论知识 1、 掌握图像标签 2、 掌握图像标签的属性及路径的设置 3、 能使用文本图像元素制作符合要求的图文混排页面 实际操作技能 1、 掌握HTML基本结构、单双标签、标签属性、标签嵌套规则、注释 2、 掌握并能运用文本图像元素：标题和段落、图像及其属性 思政元素目标 1、 引导学生对历史文化的尊重，塑造学生勇敢拼博的心灵，加强自我价值观、道德观的提升。 2、 培养学生的职业素养 知识、技能重点 1、 掌握图像标签 2、 掌握图像标签的属性及路径的设置 3、 能使用文本图像元素制作符合要求的图文混排页面 知识、技能难点 1、图像属性的设置。 2、图文混排的实现。 教学方法 课前、课中、课后“三课一体”螺旋渗透教学法 教具 学习通APP、腾讯会议、学习强国APP 教学过程设计 3.2 制作图文混排网页 设置网页背景图像 导入Word文本 编辑并格式化网页中的文本 插入图像并设置图像属性，实现图文混排 插入鼠标经过图像以及图像占位符 3.3 开放型任务制作 教学过程 【组织教学】 1、准备教学设备、软件等； 2、点名检查学生出勤情况，填写教学情况记录表； 3、发布教学资料 【复习旧课、导入新课】 1、提问：网页中最主要的元素是什么？只有文本的网页效果怎么样？ 2、展示两个网页，一个网页中只有文本，另外一个除了文本还有图像； 3、教学目的：掌握使用Dreamweaver CS6的“高级”选项卡创建并设置建立站点目、插入图像、设置图像的各项属性的方法，能够熟练地制作图文混排的网页。 【讲授新课】 知识储备 1.1学习路线，如图3.1 图3.1 图文混排学习路线 1.2 知识小天地 如何实现网页中的列表？ 在浏览网页的时候，经常看到网页中具有相关连的信息会以列表的形式排在一起，有的是以阿拉伯数字排列，有的是以某种小图标排列，以此来增加内容的条理性和逻辑性。HTML中，提供了如下3种列表元素： 1.2.1 无序列表 无序列表，即列表的项目是没有顺序的。无序列表是块级元素，它定义了列表的每一项前缀均显示为图标符号，在HTML中使用<ul>标签来定义无序列表，并结合使用<li>标签定义每一个列表项。语法格式如下： <ul> <li></li> … </ul> 【练一练】你知道二十四节气歌的内容吗？ 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无序列表</title> </head> <body> <h3>二十四节气歌</h3> <ul> <li>春雨惊春清谷天，夏满芒夏暑相连。</li> <li>秋处露秋寒霜降，冬雪雪冬小大寒。</li> <li>每月两节不变更，最多相差一两天。</li> <li>上半年来六廿一，下半年是八廿三。</li> </ul> </body> </html> 运行效果如下图所示。 图3.2 运行效果 1.2.2 有序列表 有序列表，即列表的项目是有顺序的。有序列表是块级元素，它定义了列表的每一项前缀是某一种序号（默认阿拉伯数字），和无序列表的使用方法是一样的。在HTML中使用<ol>标签来定义有序列表，并结合使用<li>标签定义列表项。语法格式如下： <ol> <li></li> … </ol> 【练一练】如何保护自己远离新型冠状病毒的肺炎传染？ 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>有序列表</title> </head> <body> <h3>如何保护自己远离新型冠状病毒的肺炎传染？</h3> <ol> <li>勤洗手。使用肥皂或洗手液并用流动水洗手，用一次性纸巾或干净毛巾擦手。</li> <li>保持良好的呼吸道卫生习惯</li> <li>增强体质和免疫力。均衡饮食、适量运动、作息规律，避免产生过度疲劳。</li> <li>保持环境清洁和通风。每天开窗通风数次不少于3次，每次20-30分钟。</li> <li>尽量减少到人群密集场所活动，避免接触呼吸道感染患者。</li> <li> 如出现呼吸道感染症状如咳嗽、流涕、发热等，应居家隔离休息， 持续发热不退或症状加重时及早就医。 </li> </ol> </body> </html> 运行效果如下图所示。 图3.3 运行效果 1.2.3 自定义列表 自定义列表，在网页的一些导航中通常会使用自定义列表实现，自定义列表可以理解是标题及其内容的组合，类似于有问有答的贴吧形式。在HTML中，自定义列表以 <dl> 标签开始，每个自定义列表标题以 <dt> 开始，每个自定义列表标题的描述以 <dd> 开始。其中父元素为 dl元素，可以包含一个或多个dt元素，以及一个或多个dd元素。语法格式如下： <dl> <dt></dt> <dd></dd> … … </dl> 【练一练】冬奥会小知识你知道吗？ 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自定义列表</title> </head> <body> <h3>冬奥小知识</h3> <dl> <dt>第24届</dt> <dd>（北京）</dd> <dd>时间：2022年2月4日至2022年2月20日 </dd> <dd>地点：中国北京、张家口 </dd> <dd>赛区:北京赛区、延庆赛区、张家口赛区</dd> <dd>比赛项目：15 </dd> <dd>主体育场：国家体育场（亦称“鸟巢”）</dd> <dt>吉祥物</dt> <dd>冰墩墩：寓意创造非凡、探索未来，体现了追求卓越、引领时代，以及面向未来的无限可能。</dd> <dd>雪容融：寓意点亮梦想、温暖世界，代表着友爱、勇气和坚强</dd> </dl> </body> </html> 运行效果如下图所示。 图3.4 运行效果 如何在网页中插入图片？ 在HTML中，图像是由<img>标签定义的，是一个单标签，在实际开发中，通常写成<img />，其基本语法格式如下： <img 属性=”属性值”> 该标签的常用属性及描述见表3-2 属 性 值 描 述 alt（必须） text 规定图片的替代文本 src（必须） URL 规定显示图片的URL height pixels / % 定义图片的高度 width pixels / % 定义图片的宽度 表3-2 <img>标签的属性及描述 【练一练】抗疫宣传海报 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片的插入</title> </head> <body> <h2>抗疫宣传海报</h2> <img src="img/img01.jpg" width="350px" /> <img src="img/img02.jpg" width="350px"/> </body> </html> 运行效果如下图所示。 图3.5 运行效果 【小提示】 上述插入图片的代码中，如何正确设置图片的src属性，即图片的路径？需要掌握路径的两种表示方式。 路径的表示方法有两种：绝对路径和相对路径。 （1）绝对路径： 指文件在硬盘上真正存在的路径。 例如“bg.jpg”这个图片是存放在硬盘的“D:\demo\img”目录下，那么 “bg.jpg”这个图片的绝对路径就是“D:\demo\img\bg.jpg"。那么如果要使用绝对路径指定图片的位置，使用如下语句： <img src=” D:\demo\img\bg.jpg” /> 在实际网页编程时，不建议使用绝对路径，如果使用“D:\demo\img\bg.jpg”来指定背景图片的位置，在开发者的计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了。因为上传到Web服务器上时，可能整个网站并没有放在Web服务器的D盘，有可能是E盘或H盘，因此在浏览网页时图片就会显示不出来。 （2）相对路径：即相对于本文本的目标文件位置。 例如上面的练一练，“page3-4.html” 文件里引用了“bigndundun.png”和“xuerongrong.png”两张图片，由于这两张图片所在的文件夹“img”相对于“page3-4.html”来说，是在同一个目录里（都在文件夹“demo”里面），那么要在“page3-4.html”文件只需要在当前的目录里找到“img”文件夹，然后就可以通过“img”文件，找到里面的图片。 使用相对路径的好处在于，只要“page3-4.html”和文件夹“img”的位置没有变（也就是说还是在同一个目录“demo”内），那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。 <img src="img/bingdundun.png" alt="冰墩墩" width="350px" /> 显示效果如上图3.11。 需要注意的是：相对路径使用两个标记“.”和“..” 分表代表当前目录和上一层目录。 当前目录“.”可以省略，例如img所在的当前位置为./img可以写成img；上级目录则是：../img，即“demo”所在的位置。 二、模仿型任务讲解 2.1 制作图文混排网页 2.1.1 网页中的图像格式 Web页中通常使用的图像文件有JPEG、GIF、PNG 三种格式，这也是网页支持的图像格式，注意，不能往网页中插入psd等图片格式，因此在搜集素材的时候，要选择合适的图片格式。 分析案例效果，根据案例需求，通过相应的工具及渠道收集符合要求的素材，并完成资讯表。 表3-1 资讯单 图文混排网页设计与制作资讯单 学习情景 制作中国古代科技文化成就介绍网 学习任务 学时 6学时 案例描述 搜集渠道 素材要求 小组成员 参考资料 完成时间 案例分析 2.2中国古代科技文化成就介绍网案例分析 案例学习目标 · 能够熟练建立站点 · 能够熟练使用文本控制标签、列表标签 · 能够正确使用图片标签在网页中插入图片 案例知识要点 · 文本控制标签：段落标签、格式化标签、列表标签 · 图片标签及属性设置 · 路径的正确表示方法 在对当代青年大学生的教育中，适当增加中国古代科技文化的教育，这将对提升他们的创新能力有着非常重要的作用。我们的知识、智慧、创造力并不是一生下来就有的本能，而是在学习过去人们的科技智慧的基础上形成的。中国古代科技文明是一个系列的整体，通过教育让学生了解这一文明，继承这一文明。这对学生的创新能力将有及大的帮助。 实现探究 2.3 案例设计思路 在具体实现过程中，可以选择部分代表性的科技文化成就，引起学生的学习兴趣，使学生更加有动力去完成网页的设计与制作；同时，网页整体设计主题要突出，内容要丰富，能给人留下深刻印象；另外，也可以通过下发课后任务的方式，让学生自己搜集其他古代科技文化成就的素材，制作相关网页，培养学生搜集信息的能力和创新能力。 具体页面设计思路如下： 图3.6 页面设计 【思考】 （1）如何使用图片标签在网页中正确的插入图片？ （2）如何通过设置图片的属性，调整图片的大小？ （3）如何设置鼠标悬浮在图片上，能显示提示文字？ 三、实操示范 操作步骤 Step01 打开开发工具“HBuilder X”，选择“文件”------> “新建”------>“项目”，打开如下图3.7所示对话框： 图 3.7 项目创建 写好相应的项目名称后，选择基本的HTML项目，点击创建，即可完成项目的创建。 Step02 将课前搜集好的图片素材，复制粘贴到新建项目的“img”文件夹中，如下图3.8所示 图 3.8 Step03 插入二级标题<h2>，标题文字为“中国古代科技文化成就介绍”，并设置标题对齐属性值为居中；接着使用图片标签将图片“top.png”插入到网页中，注意图片标签的属性设置，并使用水平线标签进行美化，代码如图3.9所示，效果如图3.10所示： 图3.9 代码示意图 图3.10 第三步效果图 Step04 在第三步的水平线标签后面，添加两个段落标签和一个水平线标签，代码如下图3.11所示，效果图如图3.12所示： 图3.11 代码示意图 图3.12 效果图 Step06 Step05 接下来需要插入四张图片，可以把这四张图片放在<p>标签里面，通过设置p标签对齐属性，使得插入的四张图片居中，也可以把四张图片放在<marquee>标签里面，实现图片的滚动效果，代码如下图3.13所示，效果如图3.14所示。 图3.13 代码示意图 图3.14 效果图 Step07 接下来插入一个三级标题标签，并输入文字，然后使用组合标签<details>和<summary>，实现信息的折叠和展开（该组合标签介绍参考本案例步骤的结束位置），依次写四个<li>标签，将四大发明内容补全，代码如图3.15所示，效果如图3.16所示： 图3.15 代码示意图 图3.16 第五步效果图 Step08 接下来，按照步骤七的方法，依次编写其他科技文化成就。代码如图3.17： 图3.17代码图 Step07 写好后保存，选择“运行”，最终效果图如下图3.18所示： 图3.18 最终效果图 四、学生完成开放型任务，教师巡回指导 3.3制作中国古代科技文化成就介绍网 开放型任务的任务卡如表3-2所示 表3-2 开放型任务卡 任务编号 03-2 任务名称 制作介绍中国古代科技文化成就的图文混排网页 网页主题 中国古代科技文化成就 开放型任务描述 1. 创建一个命名为“中国古代科技文化成就”的站点 2. 在“文件”面板的站点根目录下创建一个子文件夹“中国古代科技文化成就站”。 3. 使用“文件”面板在“task03-2”文件夹下创建一个介绍中国古代科技文化成就的网页“index.html”。 4. 设置网页的背景颜色、左边距、右边距以及上边距 5. 将网页标题设置为“中国古代科技文化成就”。 6. 设置网页的外观——文本的字体、大小以及颜色 7. 插入图像、鼠标经过图像并设置属性，必须实现图文混排。 8. 通过<details>与 <summary >标签的组合，可以实现内容的折叠和展开。 【课堂小结】 本次任务我们主要练习在网页中插入图像并对其进行属性设置。在练习过程中，将用到课堂讲解中所学的插入图像的方法、图像属性设置的方法、热点链接的设置及鼠标经过图像的创建方法等知识，以及图像处理软件Photoshop的一些基础知识。 【布置作业】 1.为什么要设置默认图像文件夹？ 2.网页中常用的图像格式有哪些？ 3.简述图文混排的实现过程。 【创新型任务】 分小组选择制作科技强国、红色之旅、绿水青山为主题的图文混排网页。通过推送学习强国学习视频的看自然栏目、看科技的栏目、看党史的红色故事栏目，搜集相关文本素材，分小组设计科技强国、红色之旅、绿水青山图文混排网页，渗透革命文化和社会主义先进文化教育、生态文明教育多个“思政元素线”。培养学生爱国情、强国志。 教学评价 考核要点 考核内容 标准分 计分 知识考核 (1)课前观看学习通微视频及完成微课下方进阶练习题 20   (2)能应用文件面板新建网页文档 (3)能正确设置页面的背景图像 (4)掌握设置页面背景图像的方法 能力考核 (5)掌握图文混排网页的技巧 30   (6)实现图文混排网页 思政考核 (7)考查学生的态度端正、时间观念强，图像处理技术等方面综合评价 20   (8)搜索科技强国、红色之旅、绿水青山的图文混排素材，制作对应主题网页，体现革命文化、社会主义先进文化、生态文明等方面进行评价分析 30   总计 100   评价方式 自我评价 小组评价 教师评价 考核得分       学科网（北京）股份有限公司 $$