网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版）-教案 模块3、4 创建表格和表单、使用CSS3实现动画效果_第1页
网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版）-教案 模块3、4 创建表格和表单、使用CSS3实现动画效果_第2页
网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版）-教案 模块3、4 创建表格和表单、使用CSS3实现动画效果_第3页
网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版）-教案 模块3、4 创建表格和表单、使用CSS3实现动画效果_第4页
网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版）-教案 模块3、4 创建表格和表单、使用CSS3实现动画效果_第5页
已阅读5页，还剩17页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

模块三创建表格和表单本模块通过3个案例的实现，介绍表格的创建以及表格样式的定义，表单的创建以及表单样式的定义，帮助读者达到能在网页上熟练创建表格和表单的目的。知识目标：掌握创建表格的各种标记；掌握合并单元格的方法；掌握表格的样式定义方法；掌握创建表单的标记；掌握表单中各种常用控件的使用；掌握表单的样式定义方法。能力目标：会使用表格标记创建表格；会使用表单标记和表单控件创建表单；会使用CSS定义表格和表单样式。素质目标：引导学生树立集体主义精神，培养团结协作的能力；在编写代码中培养精益求精的工匠精神；提升学生发现美、创造美的能力；引导学生学会尊重他人，培养良好的沟通和合作能力；可以引导学生培养创新思维和解决问题的能力。教案13案例13手机型号表计划学时2学时知识目标掌握创建表格的HTML标记掌握合并单元格的方法掌握表格的CSS样式控制能力目标会使用表格标记创建表格会使用CSS定义表格素质目标引导学生树立集体主义精神，培养团结协作的能力在编写代码中培养精益求精的工匠精神提升学生发现美、创造美的能力教学重点创建表格的HTML标记教学难点表格的CSS样式控制教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（课程前导、案例实现）=1\*ROMANI.课程前导：（5分钟）表格在网页中的作用？（小组为单位讨论，派小组代表分享知识）（教师总结）表格是HTML网页中的重要元素，利用表格可以有条理地显示网页内容。早期的网页版面布局时采用表格进行布局，但随着网页技术的发展，现在的网页排版一般采用HTML5+CSS3布局。但网页上的一些内容，譬如通信录、学生信息表、课程表采用表格仍然是较好的呈现方式。=2\*ROMANII.新课内容：（40分钟）案例描述创建7行6列的手机型号表，具体效果如图13-1所示。图13-1手机型号表案例实现学生同步操作，做学教一体1．新建项目在HBuilderX中新建项目：project13，项目存放位置为：E:/网页设计/源代码，选择模板类型为“空项目”，单击“创建”按钮。2．在项目中创建网页文件在project13中新建html文件，文件名：example.html。3．输入网页代码根据案例分析，使用相应的HTML标记来构建网页结构，代码如下。定义CSS样式在<head>标记内添加内部样式表，样式表代码如下。5．保存文件在菜单栏中选择“文件”｜“保存”命令，或按“Ctrl+S”组合键，即可保存文件。6．浏览网页在HBuilderX中单击工具栏中的“浏览器运行”按钮，或按“Ctrl+R”组合键，使用谷歌浏览器浏览网页。第2学时（相关知识点）一、表格标记（5分钟）1．<table></table>2．<tr></tr>3．<th></th>4．<td></td>二、合并单元格（20分钟）（教师讲解）通过给单元格标记td或th添加colspan或rowspan属性合并单元格。学生操作：完成案例13-1实现单元格的合并。定义表格CSS样式（15分钟）（老师讲解，学生动手操作，实现教学做一体化）通过CSS样式设置表格的样式创建出各种漂亮美观的表格。四=2\*ROMAN、小结（5分钟）掌握表格标记的使用，能够对单元格进行合并，利用CSS样式对表格进行控制。作业1：课本课后习题与实训作业2：扫码观看案例14中的微课，制作登录表单。分组讨论是以小组为单位进行学习和交流，可以引导学生树立集体主义精神，培养团结协作的能力。在编写代码中培养精益求精的工匠精神网页制作过程中可以引导学生提高审美情趣，学生发现美、创造美的能力。教案14案例14登录表单计划学时2学时知识目标掌握创建表单的HTML标记掌握表单的CSS样式控制能力目标会使用表单标记创建表单会使用CSS定义表单素质目标引导学生学会尊重他人，培养良好的沟通和合作能力在编写代码中培养精益求精的工匠精神教学重点创建表单的HTML标记教学难点表单的CSS样式控制教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（课程前导、案例实现）=1\*ROMANI.课程前导：（5分钟）表单在网页中的作用？（小组为单位讨论，派小组代表分享知识）（教师总结）表单用于搜集不同类型的用户输入，譬如网上注册、网上登录、网上交易等页面都需要创建表单。=2\*ROMANII.新课内容：（40分钟）案例描述创建登录表单，浏览效果如图14-1所示。图14-1登录表单案例实现学生同步操作，做学教一体1．新建项目在HBuilderX中新建项目：project14，项目存放位置为：E:/网页设计/源代码，选择模板类型为“空项目”，单击“创建”按钮。2．在项目中创建网页文件在project14中新建html文件，文件名：example.html。3．输入网页代码根据案例分析，使用相应的HTML标记来构建网页结构，代码如下。定义CSS样式在<head>标记内添加内部样式表，样式表代码如下。5．保存文件在菜单栏中选择“文件”｜“保存”命令，或按“Ctrl+S”组合键，即可保存文件。6．浏览网页在HBuilderX中单击工具栏中的“浏览器运行”按钮，或按“Ctrl+R”组合键，使用谷歌浏览器浏览网页。第2学时（相关知识点）一、表单标记（5分钟）1．讲解<form></form>的作用、基本语法格式2．讲解<form></form>的常用属性二、input控件（10分钟）讲解<input/>控件的语法格式、<input/>控件的type属性常用值。三、创建中华传统文化考试界面（25分钟）（老师讲解，学生动手操作，实现教学做一体化）创建中华传统文化考试界面，浏览效果如下图所示。结构分析：样式分析：1．在项目中创建网页文件在project14中新建html文件，文件名：example01.html。3．输入网页代码根据案例分析，使用相应的HTML标记来构建网页结构，代码如下。定义CSS样式在<head>标记内添加内部样式表，样式表代码如下。5．保存文件在菜单栏中选择“文件”｜“保存”命令，或按“Ctrl+S”组合键，即可保存文件。6．浏览网页在HBuilderX中单击工具栏中的“浏览器运行”按钮，或按“Ctrl+R”组合键，使用谷歌浏览器浏览网页。四=2\*ROMAN、小结（5分钟）掌握表单标记的使用，理解<input>标记使用及type属性常用值，能够利用CSS样式对表单进行控制。作业1：课本课后习题与实训作业2：扫码观看案例15中的微课，制作调查问卷表单。分组讨论需要每个成员发表自己的观点，并倾听和尊重他人的意见。这样可以引导学生学会尊重他人，培养良好的沟通和合作能力。在编写代码中培养精益求精的工匠精神。教案15案例15调查问卷表单计划学时2学时知识目标掌握select控件的用法掌握textarea控件的使用方法能力目标会使用表单标记构建网页内容能够利用CSS设置表单样式素质目标可以引导学生培养创新思维和解决问题的能力在代码编写中养成良好的职业规范教学重点select控件textarea控件教学难点表单标记构建网页内容教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（案例分析与实现）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述创建调查问卷表单，网页浏览效果如图15-1所示。图15-1调查问卷表单二、案例分析与实现1．案例分析结构分析：样式分析：2．案例实现学生同步操作，做学教一体略。第2学时（相关知识点）select控件（20分钟）讲解<select></select>控件的语法格式、使用<select></select>控件时的注意事项及<select></select>控件常用属性。完成例15-1使用<select>控件创建单选和多选下拉列表学生同步操作，做学教一体textarea控件（20分钟）讲解<textarea></textarea>控件的语法格式、使用<textarea></textarea>控件时的注意事项及<textarea></textarea>控件常用属性。学生练习：定义“您的建议”多行文本框。三、小结（5分钟）掌握<select></select>控件、<textarea></textarea>控件的语法格式及使用方法。作业1：课本课后习题与实训。作业2：扫码观看案例16中的微课，学习图片遮罩效果。在网页制作过程中，需要不断尝试新的创意和技术手段，以实现良好的用户体验和效果。可以引导学生培养创新思维和解决问题的能力。在编写代码中养成正确的代码编写规范。模块四使用CSS3实现动画效果本模块通过4个案例的实现，介绍CSS的过渡、遮罩、变形、翻转等动画效果，帮助读者提升更好的网页浏览与交互体验。知识目标：掌握transition属性实现过渡动画的方法；掌握遮罩动画的实现方法；掌握transform属性实现变形动画的方法；掌握3D变形属性实现翻转动画的实现方法；掌握animation属性创建动画的实现方法。能力目标：能实现过渡动画的制作；能实现遮罩动画的制作；能实现变形动画的制作；能实现翻转动画的制作。素质目标：引导学生增强对传统文化的认同感和自信心；在代码编写中养成良好的职业规范；引导学生了解问题，培养发现问题和解决问题的能力；引导学生树立集体主义精神，培养团结协作的能力。教案16案例16图片遮罩效果计划学时2学时知识目标理解遮罩动画的原理掌握过渡属性的使用方法能力目标能够利用transition属性实现图片的遮罩效果素质目标引导学生增强对传统文化的认同感和自信心在代码编写中养成良好的职业规范教学重点transition属性教学难点遮罩动画的实现原理教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（导入新课、案例分析与实现）=1\*ROMANI.导入新课：（5分钟）互动提问——如何在网页中添加动画效果？（教师总结）在传统的网页设计中，当网页中需要显示动画或特效时，需要使用JavaScript脚本或者Flash来实现。在CSS3中，提供了对动画的强大支持，在网页中可以实现旋转、缩放、移动和过渡等效果。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述创建图片遮罩动画效果，当鼠标移动到图片上面时，从图片上方下拉出一个半透明的遮罩，遮罩上面显示放大镜图片和查看相册按钮，网页浏览效果如图16-1、16-2所示。二、案例分析与实现1．案例分析结构分析：样式分析：2．案例实现学生同步操作，做学教一体略。第2学时（相关知识点）transition属性（35分钟）教师讲解transition属性作用及含义。完成例16-1使用transition的子属性设置过渡效果。学生同步操作，做学教一体讲解transition属性进行综合设置的方法。完成例16-2使用transition属性设置块元素的多个属性过渡效果。完成例16-3使用transition属性设置图像的过渡效果。遮罩动画原理（5分钟）学生分组讨论遮罩动画实现的原理，教师进行总结。三、小结（5分钟）掌握transition属性作用及含义、理解遮罩动画实现原理，能够利用transition属性实现图片的遮罩效果。作业1：课本课后习题与实训。作业2：扫码观看案例17中的微课，学习图片变形效果。三孔（孔庙、孔林、孔府）是中国古代文化的重要遗产，代表着中国传统文化和历史的独特魅力。通过制作网页，可以引导学生深入了解三孔的历史和文化内涵，增强对传统文化的认同感和自信心。在编写代码中养成正确的代码编写规范。教案17案例17图片变形效果计划学时2学时知识目标掌握变形属性的使用方法能力目标能够利用transform属性实现图片的变形效果素质目标引导学生了解问题，培养发现问题和解决问题的能力在代码编写中养成良好的职业规范教学重点transform属性教学难点transform属性实现图片的变形效果教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（案例分析与实现）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述创建照片墙页面，实现图片变形效果。当鼠标移动到风景图片上时，每张风景图片实现不同的变形效果，网页浏览效果如图17-1所示。二、案例分析与实现1．案例分析2．案例实现学生同步操作，做学教一体略。第2学时（相关知识点）2D变形（40分钟）教师讲解transform属性作用及含义。平移教师讲解使用translate（x,y）函数可以重新定义元素的坐标，实现平移效果。完成例17-1使用translate（）函数实现元素的平移效果。学生同步操作，做学教一体缩放教师讲解使用scale（x,y）函数可以重新定义元素的坐标，实现缩放效果。完成例17-2使用scale（）函数实现元素的缩放效果。学生同步操作，做学教一体倾斜教师讲解使用skew（x,y）函数可以设置元素的倾斜效果。完成例17-3使用skew（）函数实现元素的倾斜效果。学生同步操作，做学教一体旋转教师讲解使用rotate（deg）函数可以设置元素的旋转效果。完成例17-4使用rotate（deg）函数可以设置元素的旋转效果。学生同步操作，做学教一体二、小结（5分钟）掌握transform属性实现平移、倾斜、缩放、旋转等变形效果的方法、能够在网页中实现图片的变形效果。作业1：课本课后习题与实训。作业2：扫码观看案例18中的微课，学习图片翻转效果。在制作网页时，需要具备敏锐的观察力和分析能力，以便发现问题并解决它们。通过分析问题帮助学生更全面地了解问题，培养发现问题和解决问题的能力。在编写代码中养成正确的代码编写规范。重点讲解教案18案例18图片翻转效果计划学时2学时知识目标理解翻转动画的实现原理掌握3D变形的使用方法能力目标能够利用transform属性实现图片的变形效果素质目标引导学生了解和传承中华优秀传统文化，增强文化自信和文化认同引导学生树立集体主义精神，培养团结协作的能力教学重点图片的翻转效果教学难点perspective属性教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（案例分析与

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论