《网页设计与制作案例教程（第2版） 》教案 第14课 网页表格与表单（二）_第1页
《网页设计与制作案例教程（第2版） 》教案 第14课 网页表格与表单（二）_第2页
《网页设计与制作案例教程（第2版） 》教案 第14课 网页表格与表单（二）_第3页
《网页设计与制作案例教程（第2版） 》教案 第14课 网页表格与表单（二）_第4页
《网页设计与制作案例教程（第2版） 》教案 第14课 网页表格与表单（二）_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

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

文档简介

14第14第课网页表格与表单（二）14（二14（二）网页表格与表格第课PAGE8PAGE8PAGE7PAGE714第14第课网页表格与表单（二） 课题网页表格与表单(二）课时2课时（90min）教学目标知识技能目标：（1）熟悉表单的基本结构（2）能够在网页中添加表单（3）熟悉表单控件的种类（4）能够在网页中添加表单控件（5）能够设置表单样式思政育人目标：（1）勤动脑、多思考，持续提升工作能力。（2）了解我国高铁的辉煌成就，提升民族自豪感。教学重难点教学重点：表单控件的种类教学难点：在网页中添加表单控件教学方法情景模拟法、问答法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：传授新知（23min）课堂抢答（15min）第2节课：任务实施（25min）→实践探索（15min）

课堂小结（3min）

作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解在DreamweaverCC中如何添加表单【学生】按照教师要求完成课前任务通过课前的预热，让学生了解所学软件，激发学生的学习欲望考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入

（10min）【教师】提出以下问题：在网页中表单的作用是什么？【学生】思考、举手发言表单是实现用户与网站沟通的重要元素，主要用于数据的收集与处理。通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容传授新知

（23min）【教师】通过学生的发言，引入新的知识点，介绍使用DreamweaverCC添加表单，表单控件并设置样式一、添加表单【教师】展示DreamweaverCC中表单的添加界面，帮助学习理解使用DreamweaverCC可以直接在网页文档中添加表单，将插入点置于想要添加表单的位置；然后打开“插入”面板，在最上方的下拉列表中选择“表单”选项，面板中显示“表单”列表；接着单击“表单”按钮、“标签”按钮和具有某种功能的表单控件按钮（如“文本”按钮），可添加一个简单的表单结构。（详见教材）【教师】展示DreamweaverCC中表单的基本结构，帮助学习理解表单结构通常包括表单域与表单控件。其中，表单控件至少包含一个提交按钮。此外，为使表单更具实际意义，可在表单域中添加提示信息。一般将表单控件和提示信息统称下面进行几点说明。（1）表单域：放置表单控件与提示信息的容器，用于收集用户输入或选择的数据，并以一定的方式传送到服务器。（2）表单控件：体现表单功能的控件，如文本框、单选钮、复选框、提交按钮、搜索框等。在HTML5中，<input>标签及若干其他标签可用于标记表单控件。(详见教材)【课堂互动】教师提出以下问题：“表单”按钮及“标签”按钮有何区别？【学生】聆听、思考、举手回答【教师】对学生的回答进行总结二、表单控件1．常用表单控件【教师】展示HTML5中常用的表单控件按钮界面，帮助学习理解表单控件用于收集用户在表单中输入的信息。在HTML5中，常用输入标签<input/>标记表单控件。通过为该标签设置不同的type属性值可以创建不同类型的输入型文本框，如密码框、单选钮与复选框等。（1）“文本”按钮表示文本框，用于输入简短的文本，如用户名、账号等。其代码为<inputtype="text"/>。（2）“电子邮件”按钮表示邮箱地址文本框，用于输入邮箱地址文本，它可以验证文本框中的内容是否符合邮箱地址的格式。其代码为<inputtype="email"/>。（3）“密码”按钮表示密码框，用于输入密码文本，其中输入的内容将显示为黑色的圆点。其代码为<inputtype="password"/>。按钮地址文本框，用于输入URL文本。按钮电话号码文本框，用于输入电话号码文本。按钮表示搜索框，它能够记录输入的字符。按钮表示数值文本框，用于输入数字。按钮表示数值范围滑块，就是将数值文本框显示为一个可拖动的滑块，使用鼠标指针拖动滑块即可调节数值。按钮表示颜色输入框，单击后将打开“颜色”对话框，可在其中选择颜色。按钮按钮，表示普通按钮，需要配合JavaScript使用。按钮，表示提交按钮。（13）按钮，表示重置按钮。按钮，表示文件域。按钮，表示图像形式的提交按钮。（16）“单选按钮”按钮，表示一个（17）“复选框”按钮，表示一个复选框。（详见教材）【教师】提出以下学习任务：我们刚刚已经学习了常用的表单控件，请同学们根据教材及教师讲解，总结常用表单控件的按钮样式，含义，用途及代码，最后形成表格提交至文旌课堂APP【学生】思考、分析、完成表格2．其他表单控件【教师】展示HTML5中其他表单控件，帮助学习理解（1）“文本区域”按钮表示文本区域，用于输入大量信息，其代码为<textareacols="每行字符数"rows="显示行数">…</textarea>。（2）“选择”按钮表示选择框，其代码格式为：<select> <option>选项</option> ……</select>（详见教材）3．表单控件的属性【教师】展示表单控件属性说明表格，帮助学习理解（1）name属性用于设置表单控件的名称，value属性用于设置表单控件的默认值，为同一个表单控件设置这两个属性之后，服务器即可通过name属性值找到对应的value属性值。（2）readonly属性用于设置表单控件中的内容不可修改，而disabled属性用于禁用表单控件。两者都会使输入型文本框变为不可编辑状态，但readonly属性无法作用于单选钮及复选框等控件。（3）checked属性用于设置默认选中某个单选钮或复选框。（4）autocomplete属性用于设置自动完成功能。（5）autofocus属性用于设置表单控件自动获取焦点。（6）form属性用于设置表单控件所属的表单。（7）placeholder属性用于设置表单控件内的提示信息。（8）required属性用于设置表单控件不可为空。（9）pattern属性用于设置限制表单控件输入内容的正则表达式。（详见教材）【课堂互动】教师提出以下问题：【学生】聆听、思考、举手回答【教师】对学生的回答进行总结4．表单对象分组【教师】展示HTML5中表单对象分组的界面，帮助学习理解对于表单控件较多的表单，可将它们分组放置以便用户理解。在HTML5中，使用<fieldset>标签为表单对象分组；使用<legend>标签设置表单分组的标题。具体格式为：<fieldset> <legend>分组标题</legend> 表单对象</fieldset>（详见教材）三、设置表单样式【教师】展示CSS3中“focus”选择器的界面，帮助学习理解因表单控件特有的交互属性，通常会通过伪类选择器匹配表单控件的各种状态，从而设置表单的样式。（1）“:focus”选择器可用于设置表单控件获得焦点时的样式。当鼠标指针单击输入型文本框时，光标出现在文本框中，即称其获得了焦点。部分表单控件具有获得焦点时的样式效果，不同浏览器的效果有所不同。在实际的网页制作中，通常需要重新设置该样式，以符合网页的整体风格。（2）“:checked”选择器可用于设置选中的单选钮或复选框的样式。（3）“:disabled”选择器可用于设置禁用的表单控件的样式。（4）“:enable”选择器可用于设置可用的表单控件的样式。（5）“:required”选择器可用于设置必填的表单控件的样式。（6）“:optional”选择器可用于设置非必填的表单控件的样式。（7）“:invalid”选择器可用于设置输入非法值的表单控件的样式。（8）“:valid”选择器可用于设置输入合法值的表单控件的样式。（详见教材）【课堂互动】教师提出以下问题：在CSS3中，如何设置轮廓线【学生】聆听、思考、举手回答【教师】对学生的回答进行总结【课堂互动】教师提出以下问题：如果想将【学生】聆听、思考、举手回答【教师】对学生的回答进行总结【教师】演示使用DreamweaverCC为表单添加单选钮组，并为其添加样式的方法（1）在DreamweaverCC中创建一个名为“ex4.html”的网页文档，将其网页标题修改为“设置表单样式”。（2）将插入点置于<body>标签中，打开“插入”面板，在最上方的下拉列表中选择“表单”选项，面板中显示“表单”列表，单击其中的“表单”按钮，添加一个<form>标签。（3）将文件保存，按“F12”键在浏览器中打开。此时的单选钮组为默认的页面效果，单击单选钮或其对应的提示信息都可以选中单选钮。（4）在页面中定义样式。在<style>标签中添加input[type="radio"]选择器，设置单选钮的显示方式为“none”。（5）添加input[type="radio"]+label选择器，设置每个单选钮紧接着的提示信息的样式。（6）此时单击提示信息无法为用户显示选中的状态，所以还需要设置选中单选钮时提示信息的样式。（详见教材）【学生】观察、记录、理解【学生】聆听、思考、记忆、实际操作通过讲解，让学生了解如何使用DreamweaverCC添加表单和表单控件并设置样式课堂抢答（10min）【教师】提出网页中表单控件的属性，让学生抢答各属性的作用【学生】聆听、抢答通过课堂抢答加深学生对所学知识的认识，活跃课堂气氛第二节课任务实施

（25min）【教师】演示使用DreamweaverCC在网页中添加表单，设置表单控件，并对其进行分析（1）在本书配套素材“项目六”→“任务二”文件夹中新建一个名为“survey.html”的网页文档，将网页标题命名为“调查问卷”。（2）将插入点置于<body>标签中，单击“插入”面板“表单”列表中的“表单”按钮，添加一个<form>标签，设置其action属性值为#，method属性值为post；然后在<form>标签中添加一个<h1>标签，输入文本“大学生职业规划调查问卷”；接着在<h1>标签之后添加一个<h2>标签，输入文本“个人信息”；最后在<h2>标签之后添加两个<h3>标签，分别输入文本“一、单选题”与“二、多选题”。（3）在<h2>标签下面添加一个class属性值为self的<div>标签；在“一、单选题”文本下面添加4个class属性值为question的<div>标签；在第2个<h3>标签下面添加3个class属性值为question的<div>标签，然后再添加一个class属性值为btns的<div>标签。（4）制作个人信息。将鼠标指针置于<divclass="self">标签中，单击“插入”面板“表单”列表中的“标签”按钮，添加一个<lable>标签，设置其for属性值为ge_name，输入文本“姓名：”。（5）将步骤4中添加的代码复制并粘贴在其下方，将<label>标签中的文本内容修改为“班级：”，将<label>、<input>标签的for、id及name属性值修改为ge_class。（6）制作单选题。先制作题干，在第一个<divclass="question">标签中添加一个<label>标签，设置其class属性值为til，并输入文本“1.你是否收到学校发的《规划手册》？”；接着添加一个<br/>标签。（7）参考图6-33或本书配套素材“项目六”→“surveyF.html”文件，使用同样方法继续添加其余3道单选题。（8）制作多选题。先制作题干，在第5个<divclass="question">标签中，添加一个<label>标签，设置其class属性值为til，并输入文本“1.你的职业规划指导来源于？”；接着添加一个<br/>标签。（9）参考图6-33或本书配套素材“项目六”→“surveyF.html”文件，使用同样方法继续添加其余2道多选题。（10）制作“提交”和“重置”按钮。将鼠标指针置于<divclass="btns">标签中，单击“插入”面板“表单”列表中的“‘提交’按钮”和“‘重置’按钮”按钮，添加一个提交按钮和一个重置按钮，并分别设置它们的id属性值为sub与res。（11）在页面中定义CSS，参考以下代码在<style>标签中添加样式。（详见教材）【学生】观察、记录、理解，上机操作【教师】巡堂指导，及时解决学生的问题利用实践探索法，让学生们主动参与学习，熟悉使用DreamweaverCC在网页中添加表单，设置其控件和样式的步骤实践探索

（15min）【教师】组织学生制作“图书交易网”反馈意见页面【学生】参照任务实施的步骤上机操作【教师】巡堂指导，及时解决学生的问题学生通过项目实训进一步巩固所学知识，了解更多关于网页添加表单的知识课堂小结

（3min）【教师】简要总结本节课的要点本节课学习了表单的基本知识，熟悉了利用DreamweaverCC在网页中添加表单，

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论