课程|网络编程基础学习任务CSS表格表单样式设计授课

综合课程教案号QD-0707-05版号D0序号编制教研室批复程振阳2011-2012学年第二学期计算机系教师颜红综合课程网络编程基础学习任务CSS表格样式设计教学学时6上课日期 2012 517 第 13 周 批准 年月日 教学班 10 计数网 1 学习重点 学习要点及求解方法 双倍积分计算方法 84 消毒剂配比方法 根据教材要求，学生应能使用CSS样式实现表格和表单的样式设计。本课程的学习内容应该是学生比较感兴趣的知识。我们可以从简单的例子开始，到复杂的网页。效果实现。重组账簿和最终账簿。暑假读一本好书。辞职信。个人债务起诉书。如何使用，真正具备设计网页的能力 学习重点 分析和制作网页表格和表格的样式表 学习难点及其解决方法 例如google的日历视图等网页，如示例教学准备教学设备、电脑投影, PowerPoint软件, Dreamweaver软件, 备课实例, 网页素材, 图片, 任务书, 教学组织流程, 仓库管理流程, 财务报销流程, 离职手续, 报销流程, 新员工入职流程, 计划,

学习情境设计 通过玩更精彩的酷网站网站，提高学生的学习兴趣和审美意识。学生在欣赏作品的同时受到启发。本课的主要任务是介绍表格和表单的CSS样式分析。用CSS美化，让学生打开服务器。在这个过程中，同学们也可以互相交流word表格教案模板，取长补短，在交流中不断总结问题，加深对知识点的理解，设计问题 1.欣赏优秀的网页，包括书本资料、校园网站，和在线很酷的网站提问。上一节课，我了解到 CSS 样式可以美化网页，但 CSS 样式还能做什么呢？前，我们了解到表格HTML标签也可以通过表格属性来改变表格的边框，但是通过使用CSS样式，我们可以做出不同的表格效果演示，只要点击按钮就可以改变表格的边框样式。问为什么表格边框线瞬间变了比如当文本框的背景颜色变了，问问题。这样的设计让你在填写表格时，尤其是在查看表格数据时，通过改变背景颜色来提醒你文本框的内容有误，更能吸引你。你想不想去尝试激发学生的兴趣和好奇心。2.老师的灵感其实不需要很多代码就可以做到别人能做到的。相信通过我们之前的经验，同学们也能够使用Dreamweaver等应用程序。使用 CSS 样式知识和 HTML 知识，我们只要仔细研究，一定会有新的发现。你一定会做出出色的作品。灵感鼓励学生增强自信心。根据任务项实施评价。活动引主题入新课1【创建场景】老师先展示示例网站，演示表格边框的变化 根据任务项实施评价。活动引主题入新课1【创建场景】老师先展示示例网站，演示表格边框的变化 根据任务项实施评价。活动引主题入新课1【创建场景】老师先展示示例网站，演示表格边框的变化

1 任务 1 绘制交换颜色变化的表格 任务分析 第一步是设置细边框线来编辑tbodytd类的样式表。边框的样式设置为solidwidth 为1pxcolor 到f60。第二步，设置自定义类，设置td的背景色。为谷歌日历任务分析制作相应的样式表 第一步：参照样表绘制表格。项目 3 任务 3 制作彩色表格 任务分析 步骤 1 参照样张制作好表格 步骤 2 按照上例设置表格边框线为细边框线 鼠标通过后更改单元格颜色 4 . 任务4.按照书的要求完成综合例子和209页的操作题。第一步是使用 onmouseoveronmouseout 事件来改变表格的背景颜色。第二步，设置表格样式。表达主题所需的材料是自学，以满足教师的要求。设计评价 1、小组互评，推荐优秀作业。2. 老师们展示了出色的作业。1【问题】通过这节课，你学到了哪些知识和技能？2 我们已经掌握了使用CSS创建不同表格样式效果的方法。下一课我们会继续讲解CSS布局，总结本课的经验。小组互评，推荐优秀作业。2. 老师们展示了出色的作业。1【问题】通过这节课，你学到了哪些知识和技能？2 我们已经掌握了使用CSS创建不同表格样式效果的方法。下一课我们会继续讲解CSS布局，总结本课的经验。小组互评，推荐优秀作业。2. 老师们展示了出色的作业。1【问题】通过这节课，你学到了哪些知识和技能？2 我们已经掌握了使用CSS创建不同表格样式效果的方法。下一课我们会继续讲解CSS布局，总结本课的经验。

您可以将 tbodytd 的样式设置为 fontnormal12px15pxgeorgiacolor333padding8pxborder-right-width1pxborder-bottom-width1pxborder-right-stylesolidborder-bottom-stylesolidborder- right-colorF60border-bottom-colorF60border-top-width1pxborder-top-stylesolidborder-left-stylesolidborder-top-colorF60border- left-colorF60border-left-width1px3 将两种颜色的表格单元格样式类设置为inon颜色，可以自己设计编写对应的样式代码4效果图如下图。学生自评部分如下。完成的部分可以独立完成。借助学习任务书教学任务二是很难完成的。床单 可以自己设计编写对应的样式代码4效果图如下图。学生自评部分如下。完成的部分可以独立完成。借助学习任务书教学任务二是很难完成的。床单 可以自己设计编写对应的样式代码4效果图如下图。学生自评部分如下。完成的部分可以独立完成。借助学习任务书教学任务二是很难完成的。床单

设置边框和文字样式任务的目的是让学生掌握表格样式，学习如何熟练设置表格边框和文字样式，以及添加图层的使用。学习要点 CSS样式表的灵活使用和图层定位的设置 学习难点 能够实现表格中所有单元格等宽等 表格中多行多列细边框线的高度和实现 教学方法 案例分析任务教学 教学内容 1. 建立一个8X5的表格并设置表格标题并输入相应的文字。2.设置表格边框线参考样式如下 tableborder-collapsecollapseborder1pxsolid33Cfont-family"宋体" font- size12px 三设置图层的绝对定位 1 直接在对话框中添加一个div 选择新的新样式 点击这里直接写div的样式表 2 定位类型设置为绝对定位，宽度为大约200pxword表格教案模板，高度大约100px。设置图层的位置。请自行调整细节，达到和效果图一样的效果，并编写相应的样式表代码4。最后效果图如下。请在下面的部分打勾以进行学生自我评估。您可以在帮助下独立完成。很难完成学习任务书的教学任务。3. 制作彩色表格 任务内容 讲解表格的制作和样式表的设置 如何使用复合样式表。本次任务的目的是让学生掌握表单样式表的设置，学会熟练制作表单。CSS样式表和表单控件的学习重点 学习难点的使用可以实现表单样式效果 悬停样式的使用使鼠标经过时表单单元格变色 教学方法 案例分析型任务教学 教学内容-制作在线调查表格 使用 DW 添加表格，然后在每行添加一个 12X1 表格 插入不同的表格元素 使用这些快捷菜单创建示例表格 在网页中添加表格 所有表格元素必须包含在此表格中二、使用在任务二中获得的表格样式来设置此任务的表格样式。参考下表border-collapsecollapsetext -alig CSS样式表和表单控件的学习重点 学习难点的使用可以实现表单样式效果 悬停样式的使用使鼠标经过时表单单元格变色 教学方法 案例分析型任务教学 教学内容-制作在线调查表格 使用 DW 添加表格，然后在每行添加一个 12X1 表格 插入不同的表格元素 使用这些快捷菜单创建示例表格 在网页中添加表格 所有表格元素必须包含在此表格中二、使用在任务二中获得的表格样式来设置该任务的表格样式。参考下表border-collapsecollapsetext -alig CSS样式表和表单控件的学习重点 学习难点的使用可以实现表单样式效果 悬停样式的使用使鼠标经过时表单单元格变色 教学方法 案例分析型任务教学 教学内容-制作在线调查表格 使用 DW 添加表格，然后在每行添加一个 12X1 表格 插入不同的表格元素 使用这些快捷菜单创建示例表格 在网页中添加表格 所有表格元素必须包含在此表格中二、使用在任务二中获得的表格样式来设置此任务的表格样式。参考下表border-collapsecollapsetext -alig

nlefttbodytdfontnormal14px15pxgeorgiacolorCCCpadding8pxborder1pxsolid03F三点思考我们前面了解了超链接样式表，我们可以在鼠标经过时改变超拉链的颜色。这个样式表是否也适用于其他地方？让我们在这个表格上试一试。获取对应的样式代码 4.如下图完成渲染。请在下面的学生自我评估部分打勾。它可以在帮助下独立完成。很难完成。数据变得更有条理且易于理解。在设计页面时，经常需要使用表格来排列网页元素。通过几个例子，掌握使用表格的技巧。该任务的目的是让学生掌握表单样式表的设置，并学会熟练使用表格布局创建网页。学习要点 CSS样式表的灵活使用和复合样式表的使用 学习难点 能够实现表格样式效果 悬停样式 复合样式 教学方法的使用 案例分析任务 教学教学内容 一个综合的例子 素材文件的设计如图下图。网页任务需要根据素材实现网页效果。2.设置背景颜色变化。提示在表格标签中输入以下代码 onMouseOver"thisstylebackgroundFF3366"onMouseOut"thisstylebackground9FE417"请在此处填写表格标签的代码。2 综合示例 2 设计文本框的样式 1 打开素材文件，设计如下图所示的网页。任务要求你根据素材实现网页效果。2 设置表格的边框线。提示代码如下。任务3的表格单元格鼠标悬停时的变色效果