项目名称: 国通快递网页制作
项目 | 国通快递网页制作 | 课型 | 新授 | 授课日期 | ||||||||||||||||
项目目标 | 知识目标 | 1、熟练掌握Dreamweave表单的添加方法 2、认识表单域 3、掌握表单的单选和复选框 4、掌握表单文本域和按钮的使用 | ||||||||||||||||||
能力目标 | 1、能熟练掌握表单各种按钮作用 2、能独立制作国通快递网页界面 3、能自己设计制作用户信息表和意见反馈表 | |||||||||||||||||||
德育目标 | 1、培养学生分析解决问题的能力 2、培养学生自主学习，创新思考的意识 3、培养学生团队协作的精神 | |||||||||||||||||||
项目分析 | 项目重点 | 网页表单中的各种按钮添加应用方法 | ||||||||||||||||||
项目难点 | 网页表单中属性的设置 | |||||||||||||||||||
项目要求 | 要求同学们能够熟练使用各种表单按钮，并且能够制作完成常用的注册页面 | |||||||||||||||||||
任务内容 | 1.制作用户信息表 2.制作意见反馈表 3.制作国通快递网页 | |||||||||||||||||||
教学方法 | 演示法、任务驱动法、启发式教学 | |||||||||||||||||||
课前准备 | 1、 按8s标准，课前清扫、清洁、整理、整顿 2、 教师清点人数、查鞋套、收手机 | |||||||||||||||||||
教学 环节 | 教学内容 | 教师 活动 | 学生 活动 | 设计 意图 | ||||||||||||||||
情景设置 项目导入 | 一、导入 屏幕上展示国通快递网页的效果图，让学生评价指出国通快递网页的布局设计，哪些利用所学知识可以做，哪些做不了，引起学生的兴趣，确定本节课要制作的重点和难点。 教师： 国通快递右侧的“给我留言”是本节课的重点和难点，以“用户信息”为例 | 比较网页的特点，分队进行讨论，每队说出一条这个网页的特点 1 学生总结完后，由教师总结 教师布置任务 | 学生讨论网页的风格，并进行总结。 | 以效果图导入提高学生兴趣 | ||||||||||||||||
自主探究 协作学习 任务实施 自主探究 协作学习 任务实施 自主探究 协作学习 任务实施 自主探究 协作学习 任务实施 | 二、具体任务 任务一：用户信息制作 任务具体步骤 1. 启动Dreamweaver程序，选择菜单“文件”—>“新建”命令，打开“新建文档”对话框.在对话框“常规”标签下选择“类型”列表中的“基本页”选项，创建HTML网页. 2. 创建页面后，按Ctrl+s键，保存网页到本地站点内，文件命名为form.htm.如图12-1所示. 注意： 将页面保存到站点是为了在更新网站内容时,同时更新form网页,也便于站点的管理和维护. 3. 保存页面后,选择插入面板上的"表单"选项,在表单面板中单击播音主持艺考考什么"表单"按钮000,在页面中插入表单域.如图12-2所示. 图12-1 保存文件名为 from 保存图12-2 在页面中插入表单域 注意： 表单域就是表单的范围,在网页中以红虚线表示,也是插入表单元素的前提条件.代码中以<form></form>格式表示.其作用就是把页面中输入的数据以形式发送到邮箱中或直接传送到数据库中. 4. 将光标停放到表单域中,选择常用面板上的"表格"按钮,在表单域中插入8行2列的表格. 5. 用鼠标选中表格,打开属性面板. 6. 在表格属性中千里共婵娟表达了什么,设置其宽度为500像素,"填充"值为1,"间距值为0,在"对齐"下拉列表中选择"绝对居中"选项,"边框"值为1,最后在"边框颜"文本框中输入标值#FFFFFF(白). 注意： 在表单域中插入表格,是为了方便表单元素的排列布局.表格属性中的设置是为了表格有比较好显示效果,其中:"填充"值表示表格内的数字与表格的距离,"间距"表示表格与表格之间的距离,"边框"值表示表格外框的宽度."对齐"方式是显示表格在页面的位置,"边框颜"则是一个十六进制值,表示颜的标值. 7. 拖动鼠标,选中表格第一行的两个单元格,在属性面板的"背景颜"文本框中输入标值#6699CC,网络广告或单击旁边的"背景颜"按钮,选取蓝. 8. 拖动鼠标,选中其他单元格,设置背景颜为"灰"(标值为#CCCCCC). 描写清明的诗句9. 完成表格的属性设置后,按下键盘Ctrl+s键或选择"文件"—>"保存"命令,保存页面. 10. 在第1行单元格内输入文字"用户信息",然后选中文字打开属性面板,单击面板的"绝对居中"按钮,使文字移动到表格的中间位置.设置文本颜为"白"(标值#FFFFFF).如图12-3所示. 图12-3 在页面中插入表格和文本 11. 在第2行第1 个单元格中输入文字"用户名:",然后单击表单面板中"文本字段"按钮,插入文本框. 12. 选中插入的文本框,打开属性面板,在"文本域"下面的文本框中输入"name",这是文本框的名称;在"字符宽度"文本框中输入"25";"类型"选择"单行"单选按钮;"最多字符数"和"初始值"为默认.参数设置如图12-4所示. 图 12-4 文本字段属性设置 注意： 文本字段是用户在网页中输入信息和数据的窗口霍山黄芽,是用户和网站之间进行交互信息和数据的重要条件.但它不适合长篇文字和图片的输入.在文本字段的属性面板上有"最多字符数"设置,如果对文本字段没有字符限制,可以不输入任何数值;如果要限制字符,则可以输入限制的数值,注意,一个中文字符是占两个字节. 13. 在第2行第2个表格中输入文字"密码:",按同样的方法插入文本框.然后选中文本框打开属性面板,在"文本域"中输入名称为Passowrd,"字符宽度"为25,"类型"选择"密码"单选按钮,"最多字符数"和"初始值"不用填.如图12-5所示. 图12-5 密码文本字段的的属性设置 14. 在第3行第1个表格中分别输入“性别：”“男”“女”，然后单击表单面板中的“单选按钮”按钮*，在“男”“女”的前面分别插入单选按钮。 15. 选中第一个单选取按钮，打开属性面板，在“单选按钮”文本框中输入单选按钮名称man，“选定值”文本框中输入“男”，“初始状态”选择“未选中”单选按钮，如图12-6所示。接着选中第2个单选按钮，其设置名称和选定值分别是woman.女，其他设置一样。 图12-6 单选按钮属性设置 注意： 初始状态有两个选择，“已勾选”和“未选取中”。单选按钮是在众多选项中选择其中一项，不能多项。如果要在网页中一次插入多个单选按钮，则可以单击表单面板上“单选按钮组”按钮*，然后在打开的“单选取按钮组”对话框中，输入Label（标签）下的项目，在“名称”文本框中输入项目名称，单击加号按钮啬项目，完成后单击“确定”按钮，如图12-7所示。 16. 在第3 行第2个表格中输入“省份：”，然后单击表单面板中的“列表/菜单”按钮，在“省份：”旁边插入“列表/菜单”框。 17. 选中“列表/菜单”框，单击属性能面板上的按钮，打开“列表值”对话框，在“项目标签”下面输入各个省份的名称，如北京.黑龙江等，单击按钮可增加项目，单击按钮可删除项目，右边的两个按钮，可用来调整项目的上下位置。如图12-8所示。 图12-7 “单选按钮组”对话框 图12-8 “列表/菜单”列表值设置 18. 单击“确定”按钮，返回属性面板，在“初始化时选取定”文本框中出现了刚才设置的项目标签。然后在“列表/菜单”下面的文本框中输入“select”，在“类型”选项区选 择“菜单”单选按钮。如图12-9所示。 图12-9 “列表/菜单”属性设置 19. 在第4行的两个表格中分别插入“电话“和“地址”的“文本字段”。其属性的名称分别是Phone和Address，“字符宽度”都是25，“类型”都选择“单行”。 20. 在第5行的第1个表格中输入“E-mail：”文字，插入“文本字段”，属性面板中的“文本域”名称为Email，“字符宽度”为25，“类型”选择“单行”，其他设置为默认就可以。 21. 在第5行的第2个表格中输入“上传：”文字，然后单击表单面板中的“文件域”按钮，在“上传：”文字旁边插入文字域字段，接着在属性面板中的“文件域名称”中输入file，“字符宽度”文本框中输入16，“最多字符”的文本框保留为空。参数设置如图12-10所示。 图12-10 文件域属性设置 注意： 文件域是用来选择本地硬盘上文件夹目录地址，其后面跟着按钮，作用于就是单击它选择文件目录，允许用户上传。 22. 拖动鼠标选中第6行两个表格，单 属性面板上的“合并” 按钮，合并两个表格，然后在表格中输入文字“爱好：”，空两格后分别输入读书.上网.旅游.游戏等文字，接着单击表单面板上的“复选框”按钮，分别在各选取项前面插入复选取框。 23. 打开属性面板，分别选取中页面中的复选取框，在“复选取框名称”文本框中分别输入Study.web.Travel.Game。在“选取定值”文本框中也依次输入“读书”“上网”“旅游”“游戏”。“初始状态”都选择“未选中”。 注意： 在复选取框中可以提供多种选项，并且用户可以同时选取多项的按钮。 24. 拖动鼠标选中第2行到第5行的单元格，然后打开属性面板，单击“左对齐”按钮，使表格中的内容都靠左对齐。如图12-11所示。 25. 合并第7行两个单元格，输入“个人介绍”文字，按住键盘Shift键回车，另起一行，然后单击表单面板上的“文本区域”按钮，插入文本域。 图12-11 选中表格单击“左对齐”按钮 26. 选中文本域，打开属性面板，在“文本域 ”下输入名称content，在“字符宽度”文本框中输入40，在“行数”中输入5，在“类型”选项中选择“多行”单选取按钮。参数设置如图12-12所示。 图12-12 “文本域”属性设置 注意： 文本域实际上是可以输入大量文字内容的文本框。如果输入的文本超出文本框的范围，在浏览时文本框就仁自动出现下拉滚动条，以便用户浏览。“文本域”.“文本字段”和“密码字段”的区别就是在选择的“类型”不同，其中“密码”文本域在用户输入时以“*”号显示。 27. 在最后一行中，连续两次单击插入面板上的“表单”—>“按钮”按钮。在表格中插入两个按钮，其中一个是“发送”按钮，一个是“重填”按钮。 28. 选中第一个按钮，打开属性面板，在“标签”文本框中输入“发送”，在“动作”选项中选择“提交表单”单选按钮，参数设置如图12-13所示。接着选择第二个按钮，在属性面板中的“标签”文本框中输入“重填写”，“动作”选择“重设表单”选项。 29. 插入表单中各个需要的元素之后，整个表单页面的结构就制作完成了，按下F12键即可浏览网页。如图12-14所示。 图12-13 发送按钮属性设置 任务二：意见反馈表制作 有了任务一的基础，任务二是对任务一扩展和延伸，以对队为单位 制作意见反馈表，完成后上交给教师机，全队对作品进行打分，对做的好多队要表扬，差的队要表演个小节目或奖励“大礼包” 任务三：国通快递网页制作 教师： 有了任务一和任务二的基础，再制作国通快递的整个网页，任务三是前两个任务的继续和延伸。 基本步骤如下： 1、 网页布局设计 2、 网页导航制作 3、 “给我留言”表单制作 4、保存预览 三、小队总结、评比 打分标准： 1、3个任务，每个任务2分，共6分。 2、做的最快的那个队另加2分 3、纪律差或队中有做和学习无关着没人次扣1分 4、效果图有创新另加2分
| 巡回观察，及时发现问题进行引导、指点。 教师演示，并以引导性语言让学生思考下一步该如何操作 老师给出提示，观察学生制作情况，必要时给出共同演示。 巡回指导 教师演示，引导学生据效果得出参数各项的功能，老师做补充 教师演示，学生总结老师补充 教师巡回指导发现问题及时解决，当问题有共性时，要全班细致讲解 教师根据任务一的基础，引导学生做制作任务二实例，教师巡视指导 教师根据任务一的基础，引导学生做制作任务二实例，教师巡视指导 教师根据每队的表现给每队进行打分 | 。 根据老师的提醒积极思考 小组合作讨论后实际动手制作 动手制作 学生认真听讲，据结果得出结论，并做记录 学生之间交流并操作完成室内光的设置 学生分队完成，随时可提出问题 学生分队操作，可随时向队长和教师提出问题寻求帮助 学生分队操作，可随时向队长和教师提出问题寻求帮助 得分最低的小队要进行“奖励”或表演节目 | 培养学生善于分析与思考的能力 新知识，语言表达难以理解，让学生用最快的速度得到间接知识 培养同学们的团队合作意识 边做边总结，便于掌握知识点，达到举一反三的目的。 新的知识通过演示，学生总结的方式比单纯直接告诉学生其作用记忆要深刻。 培养学生的总结归纳能力及运用知识的能力 据要求自主处理，发挥学生的创造力 培养学生与现实结合的用倒推法来驱动任务的完成。 培养学生与现实结合的用倒推法来驱动任务的完成。 肯定自己的成绩，正视自己的不足 | ||||||||||||||||
归 纳总 结 | 表单是本章的重点内容，在实际设计过程中经常使用，文本域、单选按钮、多选按钮、复选框等应用较多 | |||||||||||||||||||
作业布置 | 1、什么是表单？ 2、文本域设置应注意什么？ 3、写出个人信息表制作方法。 | |||||||||||||||||||
课后反思 | 本节课在实施过程中主要以学生实际操作为主，老师起到一个引导作用，尽可能的通过本节课的学习来锻炼学生自主学习与探究的能力。 | |||||||||||||||||||
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论