精选表格表单css样式设计教案

1、 一体化课程教案编号：QD-0707-05版本号：D/0流水号：编制：教研室批准: 成振洋2023/2023 学年度 第 二 学期 计算机系部 任课教师 颜虹 一体化课程网络编程根底学习任务CSS表格表单样式设计授课时数6授课日期2023.5.17周次13审批年 月 日教学班级10计网1学习目标学习重点及其化解方法根据教材上要求，通过本次课程学习学生要能运用CSS样式实现表格、表单的样式设计。本次课程的学习内容应该是学生比拟感兴趣的知识，我们可以从简单例子入手，到复杂的网页效果实现，再结合书本要求完成的综合实例，还可以让学生自由创作。这样学生既理解了书上的表格表单CSS样式设计的用法，真正具备

2、进行网页设计的能力。学习重点：分析并制作出网页表格、表单的样式表。学习难点及其化解方法 学习难点：指导学生的自主学习和正确评价自己和他人的设计多看优秀的表单表格设计例子，例如google的日历视图等网页上实例。教学准备教学设备：电脑、投影、PowerPoint软件、Dreamweaver软件教学准备： 例如网页、素材图片、任务书教学组织流程方案任务:1通过学习和实践，会使用CSS设置表格各种边框样式。2通过学习和实践，会利用CSS设置仿Google日历表格样式。3通过学习和实践，会利用CSS设置多彩的表单样式。4通过学习和实践，完成书本206页综合实例。教学情景创设与流程设计： 播放酷站网页、

3、激发兴趣、引出主题分析表格的CSS样式设置方法学生自主完成表格边框练习分析仿Google日历表格样式设置方法学生自主完成日历表格练习分析表单css样式设置方法学生自主完成彩色表单练习学生完成书本综合实例学生互评教师总结学习情况设计：通过播放比拟精彩的酷站网站，提高学生的学习兴趣和审美意识。学生在欣赏作品的同时受到启发。本节课的主要任务是介绍对表格、表单的CSS样式进行分析，利用CSS进行美化。让学生翻开效劳器上的素材进行浏览，分析，总结。在此过程中，学生还可以互相交流，取长补短，在交流中不断总结问题，加深对知识点理解。问题设计：1、欣赏优秀的网页作品有书本素材，也有校园网站，还有网上的酷站，提

4、出疑问：我们上一节课学习了CSS样式，它能美化网页，但是CSS样式还可以干什么呢？以前，我们学会了表格HTML标记，利用的属性也能实现表格的边框变化，但是通过使用CSS样式更能够做出不同的表格效果。演示一：点击按钮更换表格边框样式，提问：为什么表格边框线转瞬间就变了呢?(说明：这就是CSS控制表格边框的技术强大，而用HTML标记完成这样的工作是不可能的。)演示二：鼠标移到表单的某个元素时例如文本框，该文本框的背景颜色发生变化。提问：这种设计是使你在填写表单时更加吸引你注意，特别是检验表单数据时，通过改变背景色来提示你那个文本框的内容填写有错误。你们想不想试试？激发学生兴趣和求知欲2、教师启发：

5、其实也不需要大量代码实现，别人能做的我相信同学们也一定能。通过我们以前的经验，借助Dreamweaver这样的应用软件，利用CSS样式知识和HTML知识，只要我们认真去探究，就一定会有新的发现，一定也会做出优秀的作品。启发、鼓励学生，增强自信实施 按任务工程一个个完成评价 由学生自我评价与老师评价结合教学反思教学内容课时 6 ：教学环节教师活动学生活动引出主题导入新课创设情景教师首先展示例如网站，演示表格边框变化网页。提问用标记能不能实现实时更换表格边框？ 引导启发 如果我们现能把握表格、表单在网页中适当应用，并用CSS进行美化，就能设计出漂亮、高效的网站。此时，可展示以前一些学生的优秀作品，

6、鼓励学生，增强自信导入新课本单元的主要任务是掌握表格、表单的CSS样式设计，本课的任务是表格或表单类网页的制作。欣赏观察，答复下列问题。认真倾听，提起兴趣。认真倾听思考。欣赏网页欣赏酷站。提问思考这些网站表格的CSS样式有哪些？观察。认真观察，答复下列问题。分析任务要点1、任务一：绘制交换颜色变化的表格。任务分析：第一步设置细边框线，编辑tbody td类的样式表，边框的style设置为solid，width为1px，color为#f60。第二步设置自定义类，设置td的background-color。2、任务二：仿照google日历制作相应的样式表格。任务分析：第一步先参照样表，画好表格。第

7、二步将表格边框线按上例设置成细边框线。第三步添加层，并置于最顶层，放在相关位置显示日历事项。任务三：制作彩色表单。任务分析：第一步参照样表，制作好表单。第二步将表格边框线按上例设置成细边框线。第三步制作样式表，设置thtd的颜色。第四步设置样式表，当鼠标经过过改变单元格颜色。任务四：按书本206页要求完成综合实例。以及209页的操作题。任务分析：第一步利用onmouseoveronmouseout事件改变表格背景色。第二步设置表格样式。认真看书，动手实践。思考，确定主题及表达主题所需要的素材。自主学习，到达教师要求。设计评价小组互评，推荐优秀作业。教师展示优秀作业，对学生从主题、内容、效果、技

8、巧等方面进行评价。学生互相：从主题、技能、美学、效果等多方面进行评价。课堂小结提问通过这节课的学习，你们都学到了哪些知识，掌握了哪些技能？我们已经掌握了利用CSS制作不同表格样式效果的方法，下节课我们将继续针对CSS布局进行讲解。总结本课的收获学习任务书教学任务一 绘制交换颜色变化的表格【任务内容】讲解表格CSS样式表设置的方式方法【任务目的】使学生掌握表格样式，学会熟练设置表格边框、背景色、单元格间距等属性。【学习重点】 CSS样式表的灵活运用【学习难点】 理解表格的各个属性、间距设置的意义【教学方式】案例分析式、任务教学【教学内容】制作4X5的表格，并输入相应的文字内容提示：没有特殊合并格

9、式的表格，可以使用、标签完成。或直接用dw生成。设置表格CSS样式设置table的样式为border-collapse:collapse;思考：可以用自己方法实现细表格线。到达效果一致即可。设置tbody、td的样式为font:normal 12px/15px georgia;color:#333;padding:8px;border-right-width: 1px;border-bottom-width: 1px;border-right-style: solid;border-bottom-style: solid;border-right-color: #F60;border-bott

10、om-color: #F60;border-top-width: 1px;border-top-style: solid;border-left-style: solid;border-top-color: #F60;border-left-color: #F60;border-left-width: 1px;设置两种颜色的表格单元格样式类分别为inon，颜色可自行设计。并写出相应的样式代码：效果图如下所示学生自我评价局部：请在下面分别列出完成局部可以独立完成帮助下完成完成得比拟困难学习任务书教学任务二 仿照google日历制作相应的样式表格【任务内容】讲解表格边框与文字样式的设置【任务目的】

11、使学生掌握表格样式，学会熟练设置表格边框与文字样式，以及添加层的使用。【学习重点】 CSS样式表的灵活运用，以及层定位的设置【学习难点】 能够实现表格所有单元格等宽等高，以及表格多行多列细边框线的实现【教学方式】案例分析式、任务教学【教学内容】设置8X5表格，并设置表格头，输入相应文字。设置表格边框线参考样式如下：table border-collapse:collapse;border: 1px solid #33C;font-family: 宋体;font-size: 12px;设置层的绝对定位添加div，直接在对话框里选择新建新样式点击这里直接编写div的样式表这个定位类型设置为绝对定位

12、，宽约200px，高约100px。设置层的定位。层的样式表细节，请大家自己动手调整，并到达如效果图一致。 并写出相应的样式表代码：最后实现效果图如下：学生自我评价局部：请在下面打勾可以独立完成帮助下完成完成得比拟困难学习任务书教学任务三 制作彩色表单【任务内容】讲解表单制作，以及表单样式表的设置，复合样式表的使用方法【任务目的】使学生掌握表单样式表设置，学会熟练制作表单。【学习重点】 CSS样式表的灵活运用，以及表单控件的制作、复合样式表的使用【学习难点】 能够实现表单样式效果、hover样式的使用使鼠标经过时表单单元格变色。【教学方式】案例分析式、任务教学【教学内容】制作在线调查表单利用DW

13、添加表单，然后再添加一个12X1的表格，在各行内分别插入不同的表单元素。利用这些快捷菜单创立样图的表单在网页里添加一个form，所有表单元素都要包含在这个form里利用任务二得到的表格样式，设置本次任务的表格样式。参考如下：tableborder-collapse:collapse;text-align: left;tbody td font:normal 14px/15px georgia;color:#CCC;padding:8px;border: 1px solid #03F;思考：我们在前面学习了超链接样式表时，能够实现鼠标经过时将超拉链颜色改变，那这种样式表是否也可以适用在其他地方呢

14、？下面让我们在这个表单上试一下吧。提示：tr:hover请写出相应的样式代码完成效果图如下所示学生自我评价局部：请在下面打勾可以独立完成帮助下完成完成得比拟困难学习任务书教学任务四 综合实例1、2【任务内容】表格最根本的作用就是让复杂的数据变得更有条理，让人容易看懂，在设计页面时，往往要利用表格来排列网页元素。通过几个实例掌握表格的使用技巧。【任务目的】使学生掌握表单样式表设置，学会熟练制作用表格布局的网页。【学习重点】 CSS样式表的灵活运用，以及复合样式表的使用【学习难点】 能够实现表格样式效果、hover样式、复合样式使用。【教学方式】案例分析式、任务教学【教学内容】综合实例1：制作变换背景色的表格。步骤提示如下：翻开素材文件，设计如下列图所示网页。任务要求：根据素材自己实现网页效果。 (2)变换背景色的设置提示在标记中输入以下代码。onMouseOver=this.style.backgroun