一体化课教案 课 程HTML5+CSS3网页设计与制作授课教师第二阶段 使用 CSS3 设置网页任务18 设置表单元素 课 题分课题格式交互效果授课对象××专业××班授课时间 ×年×月×日课时41、 能够叙述通过 CSS样式美化表单的方法。 教学目标2、 能够根据需要对 vertical‐align属性的不同取值进行设置。3、能够综合运用 CSS样式对 D清单页面的表单元素进行美化。1、表单美化的方法 教学重点2、综合运用 CSS样式对 D清单页面的表单元素进行美化1、对vertical‐align属性的不同取值进行设置 教学难点2、规范化编写代码本次任务要求根据 D清单页面效果图，使用 CSS样式，在任务 17基础 任务描述上设置表单交互效果。使用表单的目的除了收集用户信息外，更多的是为了提供更好的服务体验。在网页设计中，不仅需要设置所需表单的相关功能，还需要让表单控件更加美观，让用户在使用表单时有一个愉快的体验。要设置 D清单页 任务分析 面表单元素交互效果，需要：。1、学习表单焦点获取效果等内容；2、分析 D清单页面中的表单交互效果，使用 CSS样式美化 D清单网页表单元素。

   教学场地教学场地：机房教具：计算机 与教具 安全注意1、提醒学生注意用电安全。 事项及相 关备注2、提醒学生不要将食品饮料带入机房。 审阅签名：年月 日任 务 实 施 过 程 教学时间学生活动教师活动备注说明环节分配一、提前5分钟按照固定座位就坐。一、严格遵守上下课时课前营造上课环二、不带食品饮料进入教室（机房）。间，上课铃响前5分钟5分境，保证用三、开机，配置好IP地址，确保红蜘蛛软件运行并链接教师机，同进入教室。钟电安全时能够访问英特网。二、检查学生的仪容仪四、注意电脑接电用电安全。表，严禁带食品和饮料 组织进入教室。教学三、检查教室线路布置，提醒学生检查是否将电脑接入英特网。四、提醒学生注意用电安全表单元素css，清点人数。一、了解任务情境一、引入任务情境10分1、明确本本次任务要求根据 D清单页面效果图，使用 CSS样式表单元素css，在任务 17基钟次课程要完成的任务在础上设置表单交互效果。项目中的位完成后的效果图如图所示。置2、明确本次课程任务 任务要求引入‐1‐任 务 实 施 过 程 教学时间学生活动教师活动备注说明环节分配一、学习知识点110边讲边练，1、美化文本框分钟完成理论知表单中默认的文本框是长方形的，比较死板；录入的文字和文本框边缘的识的学习距离较近，显得比较拥挤。

  如图所示。一、讲授知识点美化文本框一般可以采用设置边框内边距、添加圆角边框效果、设置焦点改变边框颜色等方式来进行美化。边框的内边距 padding 设置主要是为了让录入的文字和文本框边框的距离留有一定空间，让浏览的效果更好，具体的设置可以参考任务12的内容。圆角边框效果主要是让边框的四个角有个弧度，提高美感，具体的设置可以参考任务15的内容。焦点的触发状态可以通过伪类“ :focus”对标签进行设置，类似于伪类。预备2、美化按钮知识表单中默认的按钮也是长方形的，比较死板；录入的文字和文本框边缘的距离较近，显得比较拥挤。如图所示。美化按钮一般可以采用设置边框内边距、添加圆角边框效果、背景颜色、鼠标经过时效果等方式来进行美化。3、表单控件的对齐方式默认状态下，表单文本框录入的文字和按钮的文字是以文字底端对齐的方式，但这种对齐方式对表单的浏览效果不好。如图1-18-7所示。这个时候，我们可以使用vertical-align 属性来设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。‐2‐任 务 实 施 过 程 教学时间学生活动教师活动备注说明环节分配语法：vertical-align:取值;二、演示任务关键操作二、根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。

  步骤，引导学生完成课【课堂练习1‐18‐1美化文本框效果】堂练习‐3‐任 务 实 施 过 程 教学时间学生活动教师活动备注说明环节分配HTML标签代码：1CSS标签代码：1 .a1{padding:10px;2border:solid 1px #000;3border-radius: 3px;;}4input:focus{border:solid 1px #00ff00; /触发表单焦点状态/5outline: none;6 }显示效果如图 1‐18‐3和 1.18‐4所示。文本框美化效果文本框触发焦点状态效果【课堂练习1‐18‐2美化文本框效果】HTML标签代码：‐4‐任 务 实 施 过 程 教学时间学生活动教师活动备注说明环节分配1CSS标签代码：1 input{color:#fff;2font-family:"楷体";}3 .a2{width:80px;4padding:10px;5border:none;6border-radius: 18px;7background: linear-gradient(45deg,#f00,#ff0);}8 .a2:hover{background:linear-gradient(45deg,#ff0,#00FF00);}显示效果如图所示。

  【课堂练习1‐18‐3制作查询功能表单】HTML标签代码：1CSS标签代码：‐5‐任 务 实 施 过 程 教学时间学生活动教师活动备注说明环节分配1 .a1{2width: 250px;3height: 40px;4padding: 0px 10px;5vertical-align:bottom;/垂直对齐方式/6border: solid 5px #55aaff;7border-radius: 10px 0 0 10px;/左侧圆角-左上和左下/8 } / 实际高度40+5+5=50px/9 .a2{10width: 80px;11height: 50px;12vertical-align:bottom;13border: none;14border-radius: 0 10px 10px 0;/右侧圆角-右上和右下/15background: #55aaff;16font: 20px 黑体;17 color: #fff;18 }显示效果如图 1‐18‐8所示。‐6‐任 务 实 施 过 程 教学时间学生活动教师活动备注说明环节分配一、学生在总结前面课堂练习知识的基础上，参考教师提供的操作步骤独一、教师巡视并辅导学45分1、提供学立完成任务的实施。

  生完成任务钟生的知识迁为“给我留言”模块添加表单效果。当鼠标点击表单控件时，触发表移能力2、提高学单焦点状态，此时控件的边框颜色会出现变化。代码如下：生的自学能1 .contact input,.contact textarea{力和问题解2width:100%;决能力3padding: 5px;4margin: 5px;5resize:none;6border-radius: 2px;7 }任务8 .contact input[type="email"]:focus,.contact textarea:focus{实施9 border:3px solid #00AAFF;}10 .contact input[type="submit"]{width:60px;}效果图如图 1‐18‐9所示。图 1‐18‐9给我留言效果图在表单的交互效果设置中，为让表单显示的效果更好，可以采用圆角边框对表单控件进行设置，同时设置表单焦点状态以及排版布局。‐7‐任 务 实 施 过 程 教学时间学生活动教师活动备注说明环节分配1.完成自主评价引导完成评价9分建立评价机 任务2.完成组内互评钟制：自评评价3.完成组间互评一、听讲一、知识点总结5分总结任务并 任务二、根据教师的总结找出自己在任务完成时存在的不足。二、根据学生任务完成钟回顾教学目 总结的情况进行总结标的知识和技能目标一、课后改进或完善本节课任务内容一、布置作业，讲明要1分加强课堂知 作业二、自主学习任务拓展内容