博学谷让 IT 教学更简单, 让 IT 学习更有效传智播客网页设计与制作 (HTML+CSS) 教学设计课程名称 : 网页设计与制作 (HTML+CSS) 授课年级 : 2014 年级授课学期 : 2014 学年第一学期教师姓名 : 某某老师 2014 年 03 月 28 日 1

Size: px

Start display at page:

Download "博学谷让 IT 教学更简单, 让 IT 学习更有效传智播客网页设计与制作 (HTML+CSS) 教学设计课程名称 : 网页设计与制作 (HTML+CSS) 授课年级 : 2014 年级授课学期 : 2014 学年第一学期教师姓名 : 某某老师 2014 年 03 月 28 日 1"

火国
5 years ago
Views:

1 传智播客网页设计与制作 (HTML+CSS) 教学设计课程名称 : 网页设计与制作 (HTML+CSS) 授课年级 : 2014 年级授课学期 : 2014 学年第一学期教师姓名 : 某某老师 2014 年 03 月 28 日 1

课题名称第 4 章盒子模型计划学时 6 课时内容分析教学目标及基本要求重点及措施盒子模型是 CSS 网页布局的基础, 只有掌握了盒子模型的各种规律和特征, 才可以更好地控制网页中各个元素所呈现的效果本课程将对盒子模型的组成进行详细讲解, 并结合案例进一步巩固本章节所学知识要求学生理解盒子模型的概念, 掌握盒子模型的内边距 (padding) 边框(border) 和外边距

2 课题名称第 4 章盒子模型计划学时 6 课时内容分析教学目标及基本要求重点及措施盒子模型是 CSS 网页布局的基础, 只有掌握了盒子模型的各种规律和特征, 才可以更好地控制网页中各个元素所呈现的效果本课程将对盒子模型的组成进行详细讲解, 并结合案例进一步巩固本章节所学知识要求学生理解盒子模型的概念, 掌握盒子模型的内边距 (padding) 边框(border) 和外边距 (margin), 熟悉元素模式的相互转换, 同时注意盒子外边距合并的问题, 熟练使用边距属性值的几个写法教学重点 : 盒子模型的组成元素类型的转换盒子外边距合并问题及其解决方法难点及措施教学难点 : 利用盒子模型进行布局时, 外边距和内边距的使用使用内边距注意盒子实际的大小教学方式教学采用教师课堂讲授为主, 使用教学 PPT 讲解第一课时 ( 认识盒子模型盒子模型的组成属性边框 (border) 属性 ) 认识盒子模型盒子模型的重要性盒子模型是 CSS 网页布局的基础, 只有掌握了盒子模型的各种规律和特征, 才可以更好地控制网页中各个元素所呈现的效果首先我们分析一下盒子的构成教学过程上图就是盒子模型的组成部分, 网页中所有的元素和对象都是由上图所示的基本结构组成, 理解了盒子模型的结构后, 要想随心所欲地控制页面中每个盒子的样式, 还需要掌握盒子模型的相关属性, 接下来我们就对盒子模型的相关属性进行详细讲解盒子模型的组成属性边框属性为了分割页面中不同的盒子, 常常需要给元素设置边框效果, 在 CSS 中边框属性包括边框样式属性 (border-style) 边框宽度属性(border-width) 边框颜色属性 (border-color) 1 设置边框样式(border-style): 边框样式用于定义页面中边框的风格, 常用属性值如下 : none: 没有边框即忽略所有边框的宽度 ( 默认值 ) 2

solid: 边框为单实线 dashed: 边框为虚线 dotted: 边框为点线 double: 边框为双实线使用 border-style 属性综合设置四边样式时, 必须按上右下左的顺时针顺序, 省略时采用值复制的原则, 即一个值为四边, 两个值为上下 / 左右, 三个值为上 / 左右 / 下接下来运用相应的属性值定义边框样式, 具体 CSS 代码如下 : <style

3 solid: 边框为单实线 dashed: 边框为虚线 dotted: 边框为点线 double: 边框为双实线使用 border-style 属性综合设置四边样式时, 必须按上右下左的顺时针顺序, 省略时采用值复制的原则, 即一个值为四边, 两个值为上下 / 左右, 三个值为上 / 左右 / 下接下来运用相应的属性值定义边框样式, 具体 CSS 代码如下 : <style type="text/css"> h2{ border-style:double /*4 条边框相同双实线 */.one{ border-top-style:dotted; /* 上边框点线 */ border-bottom-style:dotted; /* 下边框点线 */ border-left-style:solid; /* 左边框单实线 */ border-right-style:solid; /* 右边框单实线 */ /* 上面 4 行代码等价于 :border-style:dotted solid;*/.two{ border-style:solid dotted dashed; /* 上实线左右点线下虚线 */ </style> 运行例程代码, 得到效果图如下所示 : 上图就是给盒子分别指定双实线单实线虚线点线后的边框效果 2 设置边框宽度(border-width): 设置边框宽度的方法如下 : borer-top-width: 上边框宽度 ; borer-right-width: 右边框宽度 ; borer-bottom-width: 下边框宽度 ; borer-left-width: 左边框宽度 ; borer- width: 上边框宽度 [ 右边框宽度下边框宽度左边框宽度 ]; 综合设置四边宽度必须按上右下左的顺时针顺序采用值复制, 即一个值为四边, 两个值为上下 / 左右, 三个值为上 / 左右 / 下接下来运用相应的属性值定义边框宽度, 具体 CSS 代码如下 : <style type="text/css"> 3

p{ border-width:1px; /* 综合设置 4 边宽度 */ border-top-width:3px; /* 设置上边宽度覆盖 */ /* 上面 2 行代码等价于 :border-width:3px 1px 1px; */ </style> 运行例程代码, 得到效果图如下所示 : 上图就是给段落文本同时设置边框宽度和样式的效果图 3 设置边框颜色(border-color):

4 p{ border-width:1px; /* 综合设置 4 边宽度 */ border-top-width:3px; /* 设置上边宽度覆盖 */ /* 上面 2 行代码等价于 :border-width:3px 1px 1px; */ </style> 运行例程代码, 得到效果图如下所示 : 上图就是给段落文本同时设置边框宽度和样式的效果图 3 设置边框颜色(border-color): 设置边框颜色的方法如下 : border-top-color: 上边框颜色 ; border-right-color: 右边框颜色 ; border-bottom-color: 下边框颜色 ; border-left-color: 左边框颜色 ; border- color: 上边框颜色 [ 右边框颜色下边框颜色左边框颜色 ]; 其取值可为预定义的颜色值 # 十六进制 rgb(r,g,b) 或 rgb(r%,g%,b%), 实际工作中最常用的是 # 十六进制边框的默认颜色为元素本身的文本颜色, 对于没有文本的元素, 例如只包含图像的表格, 其默认边框颜色为父元素的文本颜色综合设置四边颜色必须按顺时针顺序采用值复制, 即一个值为四边, 两个值为上下 / 左右, 三个值为上 / 左右 / 下接下来运用相应的属性值定义边框样式, 具体 CSS 代码如下 : p{ border-style:solid; /* 综合设置边框样式 */ border-color:#ccc #FF0000; /* 设置边框颜色 : 两个值为上下左右 */ 总结 : 能够用一个属性定义元素的多种样式, 这种属性在 CSS 中称之为复合属性常用的复合属性有 font border margin padding 和 background 等实际工作中常使用复合属性, 它可以简化代码, 提高页面的运行速度, 但是如果只有一项值, 最好不要应用复合属性, 以免样式不被兼容第二课时 ( 内边距外边距 ) 内边距属性为了调整内容在盒子中的显示位置, 常常需要给元素设置内边距, 所谓内边距指的是元素内容与边框之间的距离, 也常常称为内填充在 CSS 中 padding 属性用于设置内边距, 同边框属性 border 一样,padding 也是复合属性, 其相关设置如下 : padding-top: 上边距 ; 4

5 padding-right: 右边距 ; padding-bottom: 下边距 ; padding-left: 左边距 ; padding: 上边距 [ 右边距下边距左边距 ]; 在上面的设置中,padding 相关属性的取值可为 :auto 自动 ( 默认值 ) 不同单位的数值相对于父元素 ( 或浏览器 ) 宽度的百分比 %, 实际工作中最常用的是像素值 px, 不允许使用负值同边框相关属性一样, 使用复合属性 padding 定义内边距时, 必须按顺时针顺序采用值复制 : 一个值为四边两个值为上下 / 左右, 三个值为上 / 左右 / 下接下来通过案例演示元素内边距的设置方式, 具体 CSS 代码如下 : img{ padding:80px; /* 图像 4 个方向内边距相同 */ padding-bottom:0; /* 单独设置下边距 */ /* 上面两行代码等价于 padding:80px 80px 0;*/ p{ padding:5%; 使用 padding 相关属性设置图像和段落的内边距, 其中段落内边距使用 % 数值由于段落的内边距设置为了 % 数值, 当拖动浏览器窗口改变其宽度时, 段落的内边距会随之发生变化 ( 这时 <p> 标记的父元素为 <body>) 外边距属性值网页是由多个盒子排列而成的, 要想拉开盒子与盒子之间的距离, 合理地布局网页, 就需要为盒子设置外边距, 所谓外边距指的是元素边框与相邻元素之间的距离在 CSS 中 margin 属性用于设置外边距, 它是一个复合属性, 与内边距 padding 的用法类似, 设置外边距的方法如下 : margin-top: 上边距 ; margin-right: 右边距 ; margin-bottom: 下边距 ; margin-left: 上边距 ; margin: 上边距 [ 右边距下边距左边距 ]; margin 相关属性的值, 以及复合属性 margin 取 1~4 个值的情况与 padding 相同但是外边距可以使用负值, 使相邻元素重叠, 在后面的课程中将详细介绍外边距取负值的情况接下来通过案例演示元素外边距的设置方法, 具体 CSS 代码如下 : img{ border:5px solid red; float:left; /* 设置图像左浮动 */ margin-right:50px; /* 设置图像的右外边距 */ margin-bottom:30px; /* 设置图像的左外边距 */ /* 上面两行代码等价于 margin:0 50px 30px 0;*/ 在上面的案例中使用浮动属性 float 使图像居左, 同时设置图像的右外边距和下外边距, 使图像和文本之间拉开一定的距离, 实现常见的排版效果 5

6 第三课时 ( 背景属性 ) 背景属性背景属性的重要性网页能通过背景图像给人留下第一印象, 如节日题材的网站一般采用喜庆祥和的图片来突出效果, 所以在网页设计中, 控制背景颜色和背景图像是一个很重要的步骤背景颜色网页元素的背景颜色使用 background-color 属性来设置, 其属性值与文本颜色的取值一样, 可使用预定义的颜色十六进制 #RRGGBB RGB 代码 rgb(r,g,b), 默认为 transparent 透明, 即子元素会显示其父元素的背景接下来通过案例演示元素背景颜色的设置方法, 具体 CSS 代码如下 : h2{ font-family:" 微软雅黑 "; color:#fff; background-color:#f00; /* 设置标题的背景颜色 */ 背景图像背景背景不仅可以设置为某种颜色, 在 CSS 中, 还可以将图像作为网页元素的背景, 通过 background-image 属性实现接下来通过案例演示元素背景图像的设置方法, 具体 CSS 代码如下 : body{ background-color:#ccc; /* 设置网页的背景颜色 */ background-image:url(img/jianbian.jpg); /* 设置网页的背景图像 */ 背景图像平铺默认情况下, 背景图像会自动向水平和竖直两个方向平铺, 如果不希望图像平铺, 或者只沿着一个方向平铺, 可以通过 background-repeat 属性来控制, 具体使用方法如下 : repeat: 沿水平和竖直两个方向平铺 ( 默认值 ) no-repeat: 不平铺 ( 图像位于元素的左上角, 只显示一次 ) repeat-x: 只沿水平方向平铺 repeat-y: 只沿竖直方向平铺接下来通过案例演示元素背景颜色的设置方法, 具体 CSS 代码如下 : body{ background-color:#eef8ff; /* 更改网页的背景颜色 */ background-image:url(img/jianbian.jpg); /* 设置网页的背景图像 */ h2{ background-repeat:repeat-x; /* 设置背景图像的平铺 */ font-family:" 微软雅黑 "; color:#fff; 背景图像位置 6

7 如果希望背景图像出现在指定位置, 就需要另一个 CSS 属性 background-position, 设置背景图像的位置在 CSS 中,background-position 属性的值通常设置为两个, 中间用空格隔开, 用于定义背景图像在元素的水平和垂直方向的坐标, 例如上面的 right bottom, 默认为 0 0 或 top left 即背景图像位于元素的左上角 background-position 属性的取值有多种, 具体如下 : 1 使用不同单位( 最常用的是像素 px) 的数值 : 直接设置图像左上角在元素中的坐标, 例如 background-position:20px 20px 2 使用预定义的关键字: 指定背景图像在元素中的对齐方式水平方向值 :left center right 垂直方向值 :top center bottom 3 使用百分比: 按背景图像和元素的指定点对齐 0% 0% 表示图像左上角与元素的左上角对齐 50% 50% 表示图像 50% 50% 中心点与元素 50% 50% 的中心点对齐 20% 30% 表示图像 20% 30% 的点与元素 20% 30% 的点对齐 100% 100% 表示图像右下角与元素的右下角对齐, 而不是图像充满元素接下来通过案例演示元素背景图像位置的设置方法, 具体 CSS 代码如下 : body{ background-image:url(img/wdjl.jpg); /* 设置网页的背景图像 */ background-repeat:no-repeat; /* 设置背景图像不平铺 */ background-position:50px 80px; /* 用像素值控制背景图像的位置 */ 背景图像固定在网页上设置背景图像时, 随着页面滚动条的移动, 背景图像也会跟着一起移动如果希望背景图像固定在屏幕上, 不随着页面元素滚动, 可以使用 background-attachment 属性来设置, 其属性值如下 : scroll: 图像随页面元素一起滚动 ( 默认值 ) fixed: 图像固定在屏幕上, 不随页面元素滚动接下来通过案例演示设置元素背景图像的固定, 具体 CSS 代码如下 : body{ background-image:url(img/wdjl.jpg); /* 设置网页的背景图像 */ background-repeat:no-repeat; /* 设置背景图像不平铺 */ background-position:50px 80px; /* 用像素值控制背景图像的位置 */ background-attachment:fixed; /* 设置背景图像的位置固定 */ 第四课时 ( 盒子宽度和高度元素类型转换 ) 盒子宽度网页是由多个盒子排列而成的, 每个盒子都有固定的大小, 在 CSS 中使用宽 7

度属性 width 和高度属性 height 可以对盒子的大小进行控制 CSS 规范的盒子模型的总宽度和总高度的计算原则是 : 盒子的总宽度 width+ 左右内边距之和 + 左右边框宽度之和 + 左右外边距之和盒子的总高度 height+ 上下内边距之和 + 上下边框宽度之和 + 上下外边距之和元素类型 HTML 标记语言提供了丰富的标记, 用于组织页面结构为了使页面结构的组织更加轻松

8 度属性 width 和高度属性 height 可以对盒子的大小进行控制 CSS 规范的盒子模型的总宽度和总高度的计算原则是 : 盒子的总宽度 width+ 左右内边距之和 + 左右边框宽度之和 + 左右外边距之和盒子的总高度 height+ 上下内边距之和 + 上下边框宽度之和 + 上下外边距之和元素类型 HTML 标记语言提供了丰富的标记, 用于组织页面结构为了使页面结构的组织更加轻松合理,HTML 标记被定义成了不同的类型, 一般分为块标记和行内标记, 也称块元素和行内元素块元素块元素在页面中以区域块的形式出现, 其特点是, 每个块元素通常都会独自占据一整行或多整行, 可以对其设置宽度高度对齐等属性, 常用于网页布局和网页结构的搭建行内元素行内元素也称内联元素或内嵌元素, 其特点是, 不必在新的一行开始, 同时, 也不强迫其他的元素在新的一行显示一个行内元素通常会和它前后的其他行内元素显示在同一行中, 它们不占有独立的区域, 仅仅靠自身的字体大小和图像尺寸来支撑结构, 一般不可以设置宽度高度对齐等属性, 常用于控制页面中文本的样式元素类型转换定义网页是由多个块元素和行内元素构成的盒子排列而成的, 如果希望行内元素具有块元素的某些特性, 例如可以设置宽高, 或者需要块元素具有行内元素的某些特性, 例如不独占一行排列, 就可以使用 display 属性对元素的类型进行转换行内元素转换为块级元素 display:block 块级元素转换为行内元素 display:inline 行内块元素 display:inline-block; 此元素将显示为行内块元素, 可以对其设置宽高和对齐等属性, 但是该元素不会独占一行第五课时 ( 盒子外边距合并问题 ) 8

外边距合并问题在普通文档流中 ( 没有对元素应用浮动和定位 ), 当两个相邻或嵌套的块元素相遇时, 其垂直方向的外边距会自动合并, 发生重叠相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇时, 如果上面的元素有下外边距 margin-bottom, 下面的元素有上外边距 margin-top, 则它们之间的垂直间距不是 margin-bottom 与 margin-top 之和,

9 外边距合并问题在普通文档流中 ( 没有对元素应用浮动和定位 ), 当两个相邻或嵌套的块元素相遇时, 其垂直方向的外边距会自动合并, 发生重叠相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇时, 如果上面的元素有下外边距 margin-bottom, 下面的元素有上外边距 margin-top, 则它们之间的垂直间距不是 margin-bottom 与 margin-top 之和, 而是两者中的较大者, 这种现象被称为相邻块元素垂直外边距的合并嵌套块元素垂直外边距的合并当两个嵌套关系的块元素, 如果父元素没有上内边距及边框, 则父元素的上外边距会与子元素的上外边距发生合并, 合并后的外边距为两者中的较大者, 即使父元素的上外边距为 0, 也会发生合并可以通过以下两种方法解决这个问题 : (1) 给父盒子加边框 (border) 具体 css 代码书写如下所示 : border:1px solid #F00; /* 定义父 div 的上边框 */ (2) 给父盒子样式加 overflow:hidden 具体 css 代码书写如下所示 : overflow:hidden; /* 定义父 div 的 overflow 属性 */ 第六课时上机练习 ( 总结, 测试题 ) 1 总结本章内容 2 通过题库发放相关测试题, 检查学生对知识的掌握情况上机练习主要针对本章中需要重点掌握的知识点, 以及在程序中容易出错的内容进行练习, 通过上机练习可以考察同学对知识点的掌握情况, 对代码的熟练程度上机一 :( 考察知识点为边框的复合属性背景颜色 ) 请做出以下效果, 并在火狐浏览器测试, 效果如下图所示 : 9

要求如下 : 1 指定不同的粗细颜色样式来实现盒子的上下边框其中上边框为 3 像素的 #FF8500 色实线边框, 下边框为 1 像素的 #EDEEF0 色实线边框 2 给盒子添加#FCFCFC 背景示例代码如下 : 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.

10 要求如下 : 1 指定不同的粗细颜色样式来实现盒子的上下边框其中上边框为 3 像素的 #FF8500 色实线边框, 下边框为 1 像素的 #EDEEF0 色实线边框 2 给盒子添加#FCFCFC 背景示例代码如下 : 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <title> 顶部导航栏 1</title> 7 <style type="text/css"> 8.topNav{ 9 height:40px; width:500px; 10 border-top:3px solid #FF8500; 11 border-bottom:1px solid #EDEEF0; 12 background-color:#fcfcfc; 13.topNav a{color:#4c4c4c; text-decoration:none; font-size:14px; 14 </style> 15 </head> 16 <body> 17 <div class="topnav"> 18 <a href="#"> 网站首页 </a> 19 <a href="#"> 学校介绍 </a> 20 <a href="#"> 学员作品 </a> 21 <a href="#"> 留言薄 </a> 22 </div> 23 </body> 24 </html> 上机二 :( 考察知识点为盒子背景的复合属性 ) 10

请做出以下效果, 并在火狐浏览器测试, 效果如下图所示要求如下 : 1 该盒子使用链接元素, 大小为 67*32 像素 2 背景图片已经给出, 正常图片为购物车图片, 当鼠标经过换成登陆背景图片示例代码如下 : 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.

11 请做出以下效果, 并在火狐浏览器测试, 效果如下图所示要求如下 : 1 该盒子使用链接元素, 大小为 67*32 像素 2 背景图片已经给出, 正常图片为购物车图片, 当鼠标经过换成登陆背景图片示例代码如下 : 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <title> 鼠标经过图标切换效果 </title> 7 <style type="text/css"> 8 a{display:block; width:67px; height:32px; background:url(images/ico.png) no-repeat; 9 a:hover{background-position:bottom; 10 </style> 11 </head> 12 <body> 13 <a href="#"></a> 14 </body> 15 </html> 上机三 :( 考察知识点为盒子模型综合属性 ) 请做出以下效果, 如下图所示 : 11

要求如下 : 1 文字颜色正常是黑色, 鼠标经过时变为 #FF8400 2 标题和标题之间的距离为 30 像素示例代码如下 : 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.

12 要求如下 : 1 文字颜色正常是黑色, 鼠标经过时变为 #FF 标题和标题之间的距离为 30 像素示例代码如下 : 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <title> 教程模块 </title> 7 <style type="text/css"> 8 body,div,h2,ul,li{margin:0; padding:0; 9 ul{list-style:none; 10.box{width:300px; height:250px; border:1px solid #D9E0EE; border-top:3px solid #FF8400; margin:50px; 11.box h2{height:40px; font-size:14px; line-height:40px; border-bottom:1px solid #D9E0EE; padding-left:20px; 12.box ul{margin-left:20px; 13.box ul li{margin:15px 0; 14.box ul a{font-size:12px; color:#000; text-decoration:none; 15.box ul a:hover{color:#ff8400; text-decoration:underline; 16 </style> 17 </head> 18 <body> 19 <div class="box"> 20 <h2> 教程 </h2> 21 <ul> 22 <li><a href="#"> 张鹏老师带你一周 hold 住 html+css 视频教程 </a></li> 23 <li><a href="#"> 轻松学习网页设计系列视频教程 </a></li> 12

13 24 <li><a href="#"> 张鹏 _ 带你轻松学习 Flash 动画制作 </a></li> 25 <li><a href="#"> 韩奇峰带你 jq 快速入门到掌握核心技术 </a></li> 26 <li><a href="#"> 韩奇峰 _JavaScrip 网页特效精华制作 </a></li> 27 </ul> 28 </div> 29 </body> 30 </html> 思考题和习题见教材第四章后的习题教学后记 13

第三章补充案例

第三章补充案例第四章补充案例案例 4-1 顶部导航栏 1 1 考核知识点边框的复合属性背景颜色灵活运用边框的复合属性掌握背景颜色的定义方法 3 需求分析制作网页时, 经常需要给盒子设置边框, 以修饰和美化元素的显示样式, 常用方法如下 : 对盒子的四条边定义不同宽度颜色样式的边框盒子背景颜色和边框的合理搭配 1) 指定盒子的宽度和高度 2) 给盒子的上边指定 3px 的橙色边框 3) 给盒子的下边指定

博学谷 让 IT 教学更简单, 让 IT 学习更有效 传智播客 网页设计与制作 (HTML+CSS) 教学设计 课程名称 : 网页设计与制作 (HTML+CSS) 授课年级 : 2014 年级 授课学期 : 2014 学年第一学期 教师姓名 : 某某老师 2014 年 03 月 28 日 1

博学谷让 IT 教学更简单, 让 IT 学习更有效传智播客网页设计与制作 (HTML+CSS) 教学设计课程名称 : 网页设计与制作 (HTML+CSS) 授课年级 : 2014 年级授课学期 : 2014 学年第一学期教师姓名 : 某某老师 2014 年 03 月 28 日 1