《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第12课 使用CSS3美化表格_第1页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第12课 使用CSS3美化表格_第2页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第12课 使用CSS3美化表格_第3页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第12课 使用CSS3美化表格_第4页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第12课 使用CSS3美化表格_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

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

文档简介

121第121第课使用CSS3美化表格的基基本本PAGE14121121使用CSS3美化表格第课PAGE131212使用CSS3美化表格第1212使用CSS3美化表格第课PAGE1

课题使用CSS3美化表格课时2课时（90min）教学目标知识技能目标：（1）掌握使用CSS3设置表格标题样式的方法（2）学习CSS3制作细线表格、圆角表格、隔行换色表格和自适应表格的方法思政育人目标：通过对CSS3美化表格的学习，提高学生的动手能力和审美能力，拓展学生的视野，开阔学生的眼界教学重难点教学重点：使用CSS3设置表格样式教学难点：使用CSS3制作自适应表格教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：考勤（2min）→导入新知（4min）→知识讲解（29min）→课堂练习（10min）第2节课：课堂讨论（4min）→知识讲解（20min）→课堂练习（15min）→课堂小结（4min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课考勤

（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况新知导入

（4min）【教师】复习上一节课内容，引出新知识点前面两节课，主要介绍了HTML5中表格的创造以及对创建好的表格的属性进行设置，这一节课重点讲述如何对表格进行美化，包括表格标题、自适应表格的制作等【学生】聆听、思考通过复习上一节课内容，让学生主动思考如何使用CSS3美化表格，激发学生的求知欲知识讲解

（29min）【教师】讲述设置表格标题样式设置表格标题样式在CSS3中，使用caption-side属性设置表格标题的显示位置，属性值有top（表格上方）和bottom（表格下方）。【学生】聆听、记录、思考【教师】多媒体演示参考代码制作第四季度工资单，页面效果如图6-13所示图6-13第四季度工资单的页面效果（火狐浏览器）（1）创建HTML5文档，在<body>标签中输入以下代码，构建第四季度工资单表格的结构。<table> <caption>第四季度工资单</caption> <thead> <tr><th>月份</th><th>金额</th></tr> </thead> <tfoot> <tr><th>总计</th><td>10450.0元</td></tr> </tfoot> <tbody> <tr><td>10月</td><td>5200.0元</td></tr> <tr><td>11月</td><td>5250.0元</td></tr> <tr><td>12月</td><td></td></tr> </tbody></table>（2）在<head>标签中添加<style>标签，在其中输入以下代码，设置表格中单元格的样式，并设置表格标题显示在表格左侧。th,td{width:100px;border:solid1pxblack;text-align:center;}/*设置单元格的宽度与边框，并设置文本居中对齐*/table{caption-side:left;}/*设置表格标题显示在表格左侧*/【学生】观看参考代码【教师】讲解参考代码【学生】聆听、思考、理解【教师】讲解制作细线表格制作细线表格在实际的网页制作中，一般不使用HTML5设置表格边框，而是使用CSS3中的border属性统一设置。制作细线表格除需要设置border属性外，还需要合并单元格边框。在CSS3中，使用border-collapse属性合并单元格边框，并去除单元格之间默认存在的外边距，具体格式为：border-collapse:separate|collapse;其中，separate为默认的显示效果，collapse表示尽可能将单元格边框合并显示。【教师】演示【例6-9】操作流程，实现图6-14效果制作普通、粗线与细线表格，页面效果如图6-14所示。图6-14普通表格、粗线表格与细线表格的对比（1）创建HTML5文档，在<body>标签中输入以下代码，构建3个表格的结构，并为粗线表格设置边框效果。<tableclass="re"> <caption>电影佳作推荐表（普通表格）</caption> <tr><th>电影名称</th><th>上映时间</th><th>评分</th></tr> <tr><td>《辛德勒的名单》</td><td>1993年</td><td>9.4分</td></tr>……（省略部分代码，具体内容如图6-14所示）</table><tableclass="rec"border="1"cellpadding="0"

cellspacing="0"><!--添加整体边框，去除单元格的内外边距--> <caption>电影佳作推荐表（粗线表格）</caption> <tr><th>电影名称</th><th>上映时间</th><th>评分</th></tr> <tr><td>《辛德勒的名单》</td><td>1993年</td><td>9.4分</td></tr>……（省略部分代码，具体内容如图6-14所示）</table><tableclass="coll"> <caption>电影佳作推荐表（细线表格）</caption> <tr><th>电影名称</th><th>上映时间</th><th>评分</th></tr> <tr><td>《辛德勒的名单》</td><td>1993年</td><td>9.4分</td></tr>……（省略部分代码，具体内容如图6-14所示）</table>（2）在<head>标签中添加<style>标签，在其中输入以下代码，设置表格的样式。th,td{border:solidblack1px;}/*设置单元格边框*/.re,.rec{margin-right:10px;float:left;}/*设置表格的右外边距，向左浮动*/.coll{float:left;border-collapse:collapse;}/*设置表格向左浮动，并合并单元格边框，使表格边框呈细线效果*/【学生】聆听、思考通过讲解知识点，让学生了解CSS3美化表格的基本操作功能课堂练习

（10min）【教师】开展课堂练习【学生】理解练习内容【教师】设置小组对战【学生】完成课堂练习通过课堂练习，巩固所学知识，并将所学知识与实际相结合第二节课课堂讨论

（4min）【教师】组织学生展开讨论在制作表格的过程中，需要对制作好的表格进行调整，比如制作出圆角表格、隔行换色表格以及自适应表格等，让学生讨论以下话题（１）制作圆角表格和隔行换色表格的方法（２）如何快速制作自适应表格【学生】聆听、思考、讨论通过教师本身的编程经验，引出新的知识点，激发学生对CSS3美化表格的探索欲知识讲解

（20min）【教师】讲述制作圆角表格圆角表格是表格常用的表现形式，CSS3中常使用border-radius属性设置表格的圆角。【教师】演示【例6-10】操作流程，实现图6-15效果图6-15圆角表格的页面效果在<style>标签中输入以下代码，设置表格的圆角、阴影等样式，制作圆角表格。.gdp_1{border-radius:10px;box-shadow:01px1px#7f7f7f,1px01px#7f7f7f,0-1px1px#7f7f7f,-1px01px#7f7f7f;border-collapse:collapse;}/*设置表格的圆角与阴影，并合并单元格边框*//*此处的阴影用于制作边框效果*/.gdp_1caption{font-size:1.2em;font-weight:bold;}/*设置标题的字号与字体加粗*/.gdp_1tbodytrtd:first-child{text-align:left;text-indent:1em;}/*设置表体第一列单元格文本左对齐，并添加缩进*/.gdp_1tfoottd{background-color:#deeded;text-align:left;}/*设置表尾单元格的背景颜色与靠左对齐*/#de{height:30px;background-color:#deeded;font-weight:bold;text-align:center;}/*设置“细节”单元格的高度、背景颜色、字体加粗与居中对齐*/.gdp_1trtd{text-align:center;}/*设置普通单元格中的文本居中对齐*/.gdp_1td,th{width:280px;border-top:solid1px#a0aaaa;border-left:solid1px#a0aaaa;}/*设置所有单元格的宽度、上边框与左边框*/.gdp_1th{height:40px;background-color:#deeded;border-top:none;}/*设置表头单元格的高度与背景颜色，去除上边框*//*去除第一列单元格的左边框*/.gdp_1th:first-child{border-radius:10px000;}.gdp_1th:last-child{border-radius:010px00;}.gdp_1tfoottd{border-radius:0010px10px;}/*设置表格的四个圆角*/【教师】讲述制作隔行换色表格制作隔行换色表格隔行换色是表格的一种经典样式，它可以提升用户浏览数据的速度与准确度。隔行换色表格的实现原理是分别设置表格奇数行与偶数行的背景颜色与文本颜色。当表格数据过多时，逐个添加class属性会增加HTML5文档的代码量，不利于网页的运行与维护。此时，可以使用结构选择器直接匹配表格中的奇数行与偶数行，以便于简化网页代码。常用于设置隔行换色的结构选择器为“:nth-child()”，参数odd表示奇数，even表示偶数。此外，还可以使用公式表示参数，例如，“2n+1”与“2n”分别表示奇数与偶数，“n”表示计数器，从0开始计数。使用公式还能制作出更多具有规律的样式。例如，设置每3行一循环的表格样式，参数分别为“3n”“3n+1”“3n+2”。【教师】演示【例6-11】操作流程，实现图6-17效果制作隔行换色表格，页面效果如图6-17所示。图6-17隔行换色表格的页面效果（1）创建HTML5文档，在<body>标签中输入以下代码，构建表格的结构。<tableframe="border"rules="rows"> <trclass="odd"><td>《辛德勒的名单》</td><td>1993年</td><td>9.4分</td></tr> <trclass="even"><td>《肖申克的救赎》</td><td>1994年</td><td>9.6分</td></tr> <trclass="odd"><td>《阿甘正传》</td><td>1994年</td><td>9.4分</td></tr> <trclass="even"><td>《罗马假日》</td><td>1953年</td><td>8.9分</td></tr> <trclass="odd"><td>《阳光灿烂的日子》</td><td>1994年</td><td>8.7分</td></tr></table>（2）在<head>标签中添加<style>标签，在其中输入以下代码，分别设置表格奇数行与偶数行的样式。.odd{background-color:#505562;color:#e7f2ff;}/*设置奇数行的背景颜色与文本颜色*/.even{background-color:#d7d5ff;color:#3b5959;}/*设置偶数行的背景颜色与文本颜色*/【教师】演示【例6-12】操作流程，实现图6-18效果制作火车时刻表，页面效果如图6-18所示。图6-18火车时刻表的页面效果（1）打开本书配套素材“项目6”→“ticket.html”文档，该文档中已经创建好表格，但未设置样式，此时页面效果如图6-19所示。图6-19“ticket.html”页面效果（2）在<head>标签中添加<style>标签，在其中输入以下代码，设置表格整体样式，页面效果如图6-20所示。tablecaption{font-size:1.5em;color:#125581;font-weight:bold;}/*设置表格标题的字号、文本颜色与字体加粗*/table{width:1100px;border-collapse:collapse;background:url(images/bg_td.png)repeat-x;}/*设置表格的宽度，合并单元格边框，添加底层背景图像*/td{height:40px;border:solid1px#a4cdff;text-align:center;}/*设置普通单元格的高度、边框与居中对齐*/theadth{height:50px;color:#ffffff;text-align:center;background:url(images/bg_th.png)rightcenterno-repeat;border:solid1pxtransparent;}theadtrth:last-child{background:0;}/*去除最后一个表头单元格的顶层背景图像*/tfootth{height:50px;text-align:left;}/*设置表尾中单元格的高度与靠左对齐*/顶层背景图像底层背景图像顶层背景图像底层背景图像图6-20设置表格整体样式后的页面效果（3）继续在<style>标签中添加以下代码，设置单元格样式，页面效果如图6-21所示。trtd:nth-child(1){padding-right:5px;background:url(images/tb_edsfz.jpg)no-repeat95%50%;}/*设置第一列单元格的右内边距与背景图像，表示该列车可凭身份证上车*/trtd:nth-child(2){padding-right:5px;background:url(images/tb_sfz.jpg)no-repeat10%50%;}/*设置第二列单元格的右内边距与背景图像，表示该站为始发站*/trtd:nth-child(3){padding-right:5px;background:url(images/tb_zdz.jpg)no-repeat8%50%;}/*设置第三列单元格的右内边距与背景图像，表示该站为终点站*/tr.g41td:nth-child(3){padding-right:5px;background:url(images/tb_jt.jpg)no-repeat8%50%;}/*设置G41列车行第三列的右内边距与背景图像，表示该站为经停站*/tbodytr:nth-child(odd){background-color:#eef1f8;}/*设置表体奇数行的背景颜色*/图6-21设置单元格样式后的页面效果（4）继续在<style>标签中添加以下代码，设置超链接样式tda{display:block;height:28px;width:100px;margin:3pxauto;background:linear-gradient(#1c7fc35%,#3093d250%,#1c7fc3);color:#ffffff;border-radius:5px;text-decoration:none;}/*将普通单元格中的超链接转换为块级元素，并设置其高度、宽度、外边距、渐变色背景、文本颜色与圆角，去除下划线效果*/tda:hover{color:#d55f54;}/*设置鼠标指针移动至单元格中超链接时的文本颜色*/tfoota{color:#1c7fc3;text-decoration:none;}/*设置表尾中超链接的文本颜色，去除下划线效果*/tfoota:hover{color:#ff795e;text-decoration:underline;}/*设置鼠标指针移动至表尾中超链接上时的文本颜色，添加下划线效果*/【学生】聆听、思考、理解【教师】询问学生是否又不理解的地方【学生】举手提问【教师】回答学生提问【教师】讲解自适应表格的制作自适应表格是指当浏览器窗口宽度变化时能够自动调节显示方式的表格，制作这类表格需要用到响应式布局的媒体查询功能“@media”，它可以查询设备的屏幕宽度、高度等，在其基础上设置表格样式就实现了自适应表格。在<style>标签中添加以下代码，使用媒体查询功能使表格根据屏幕宽度自动隐藏列。@mediaonlyscreenand(max-width:640px){ #avg,td:nth-child(7){display:none;visibility:hidden;}}/*设置当屏幕宽度小于等于640px时，隐藏“平均分”列*/@mediaonlyscreenand(max-width:420px){ #yw,trtd:nth-child(2){display:none;visibility:hidden;} #sx,trtd:nth-child(3){display:none;visibility:hidden;} #yy,trtd:nth-child(4){display:none;visibility:hidden;} #kx,trtd:nth-child(5){display:none;visibility:hidden;}}/*设置当屏幕宽度小于等于420px时，在隐藏“平均分”列的基础上，隐藏“语文”“数学”“英语”“科学”列*/【教师】演示【例6-13】操作流程，实现图6-22效果制作可自动隐藏列的自适应表格，页面效果如图6-22所示。图6-22自适应表格的页面效果【学生】聆听、思考、理解通过讲解知识点，让学生进一步了解CSS3美化表格的操作，加强对CSS3美化表格的使用课堂练习

（15min）【教师】布置课堂练习内容本任务实施通过美化“网上书店”页面“热销排行榜”区域的表格，练习使用CSS3设置表格样式的方法【教师】分析课堂练习打开本书配套素材“项目6”→“grade.html”文档，该文档中已经创建好表格，并设置好基本的样式，此时页面效果如图6-23所示。图6-23“grade.html”页面效果在<style>标签中添加以下代码，使用媒体查询功能使表格根据屏幕宽度自动隐藏列。@mediaonlyscreenand(max-width:640px){ #avg,td:nth-child(7){display:none;visibility:hidden;}}/*设置当屏幕宽度小于等于640px时，隐藏“平均分”列*/@mediaonlyscreenand(max-width:420px){ #yw,trtd:nth-child(2){display:none;visibility:hidden;} #sx,trtd:nth-child(3){display:none;visibility:hidden;}

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

温馨提示

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

最新文档

评论

0/150

提交评论