HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第10章 设置表格、列表和滚动条样式

网页设计与制作授课教案学年第学期学院（部）专业（学部）课程名称电子商务网页设计与制作任课教师课内形式理论教学□课内实践□理实一体习题复习□考核评价□其他活动□学习量安排课内：课外形式调查分析小组研讨□实践任务理论探究□考核评价□汇报展示□其他活动课外：序号14授课日期月日月日月日月日授课班级课内教学内容：第10章设置表格、列表和滚动条样式课外学习任务：（1）课前：以小组为单位，讨论设置表格、列表和滚动条样式的相关知识，并以PPT的形式记录下来。（2）课后：=1\*GB3①使用CSS中的与表格相关的属性为表格添加样式。=2\*GB3②使用CSS中的列表属性来设置列表样式（列表符号样式和列表符号的位置样式）。=3\*GB3③使用CSS中的与滚动条相关的属性来设置滚动条的颜色样式。教学目标：知识目标掌握表格样式的设置。掌握列表样式的设置。掌握滚动条样式的设置。能力目标能够掌握表格、列表和滚动条的相关属性；能够通过CSS实现对表格、列表和滚动条样式的添加。素质目标较强的专业知识和自学能力；丰富知识结构，提升专业知识；掌握表格、列表和滚动条样式的使用，理解并应用专业知识。重点难点及解决方法：（1）重点：表格和列表样式的设置解决方法：通过知识点讲解+课堂在线展示相结合的方法，教师讲解表格和列表的相关样式属性，引导学生积极思考，掌握相应知识；同时通过课堂在线展示，使学生可以更直观的学习使用CSS属性实现对表格和列表样式的设置；培养学生的思维能力和分析问题解决问题的能力。（2）难点：滚动条样式的设置解决方法：通过示例展示+启发式教学讲解的方式，细致讲解使用滚动条的各种样式属性。帮助学生掌握使用CSS属性设置滚动条样式的方法。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。课内教学内容及过程时间分配方法及手段1.表格【合并表格边框】表格同时存在两种边框：一种是表格的边框，即表格最外面的4个边框；另一种是单元格的边框，每一个单元格都有自己的边框。在默认情况下，这两种边框是分开显示的，但在CSS中border-collapse属性的作用下，可以将这两种边框合并起来。border-collapse属性的语法格式如下。border-collapse:collapse|separate|inherit各属性值的含义如下。collapse：合并两种边框。separate：两种边框独立，该值为默认值。inherit：继承父级样式。【设置表格边框间距】在CSS中可以使用border-spacing属性来为表格设置边框间距，这一点与HTML中的table元素的cellspacing属性十分类似。border-spacing属性的语法格式如下。border-spacing:宽度|inherit各属性的含义如下。宽度：边框间距的大小，可以为绝对单位值或相对单位值，但不能为负数。inherit：继承父级样式。【设置表格标题位置】在HTML中可以使用caption元素来设置表格的标题，而CSS中的caption-side属性用来设置标题放在表格的什么位置上。caption-side属性的语法格式如下。caption-side:top|bottom|inherit各属性值的含义如下。top：标题位于表格顶部。bottom：标题位于表格底部。inherit：继承父级样式。【设置表格布局】当单元格中对象的宽度超过单元格定义的宽度且能换行（如文字）时，浏览器会自动在宽度的最大处换行；在不能换行（如图片或一个超长单词时）时，浏览器就会自动调整表格列的宽度，以容纳单元格中的对象。在CSS中的table-layout属性可以设置单元格宽度是否不被改变。table-layout属性的语法格式如下。table-layout:auto|fixed|inherit各属性值的含义如下。auto：当内容超过宽度时，如能自动换行则自动换行，如不能自动换行则增加宽度。该值为默认值。fixed：无论内容是否超过表格宽度，都保持表格width属性规定的宽度不变。inherit：继承父级样式。2.列表【设置列表符号样式】HTML中的列表符号只能是一个黑点或数字，十分单调。使用CSS中的list-style-type属性可以指定符号的样式，其语法格式如下。list-style-type:circle|disc|decimal|square|upper-roman|lower-roman|upper-alpha|lower-alpha|none|armenian|cjk-ideographic|georgian|hebrew|lower-greek|hiragana|hiragana-iroha|katakana|katakana-iroha|lower-latin|upper-latin各属性值的含义如下。circle：显示空心圆符号。disc：默认值，显示实心圆符号。decimal：显示阿拉伯数字。square：显示实心方块符号。upper-roman：显示大写罗马数字。lower-roman：显示小写罗马数字。upper-alpha：显示大写英文字母。lower-alpha：显示小写英文字母。none：不使用项目符号。armenian：显示传统的亚美尼亚数字。cjk-ideographic：显示表意数字。georgian：显示乔治数字。hebrew：显示希伯来数字。lower-greek：显示希腊小写字母。hiragana：显示日文平假名字符。hiragana-iroha：显示日文平假名序号。katakana：显示日文片假名字符。katakana-iroha：显示日文片假名序号。lower-latin：显示小写拉丁字母。upper-latin：显示大写拉丁字母。list-style-type属性可以作用在<ol>、<ul>与<li>标签上，并且该属性将获得优先显示权。例如，在有序列表ol上使用list-style-typ:circle属性，将会显示实心圆符号，而不是有序数字。【使用图片设置列表符号样式】除了采用系统提供的列表符号外，在CSS中还可以利用list-style-image属性将图片设置为列表符号。其语法格式如下。list-style-image:url(源文件地址)【列表符号显示位置】在列表中使用了文本样式（如背景颜色等）时，可以使用list-style-position属性指定符号的显示位置，即指定符号是放在文本块之外还是放在文本块之内。list-style-position的语法格式如下。list-style-position:outside|inside各属性值的含义如下。outside：将列表符号放在文本块之外，该值为默认值。inside：将列表符号放在文本块之内。list-style-position属性可以作用在<ol>、<ul>与<li>标签上。【综合设置列表样式】在CSS中可以使用list-style属性来综合设置列表的样式，不用输入list-style-image、list-style-type或list-style-position这个属性名，只需输入属性值，从而简化输入。list-style属性的语法格式如下。list-style:list-style-image|list-style-type|list-style-position使用list-style设置列表样式时要注意以下两点。同时指定list-style-image和list-style-type时，list-style-image将优先显示。除非list-style-image为none或图片地址错误，才会无法显示。当列表与列表项同时使用样式时，列表项的样式将优先显示。与list-style-image、list-style-type和list-style-position样式相同，list-style-position样式可以作用在<ol>、<ul>与<li>标签上。3.滚动条【设置滚动条颜色】使用scrollbar-color属性可以设置滚动条轨道和滑块的颜色，其语法格式如下。scrollbar-color:colorcolorscrollbar-color有两个颜色属性值，其值可以为十六进制的RGB颜色、颜色的英文名和百分制颜色表示法。第一个颜色值用于控制滚动条滑块的颜色，第二个颜色值用于控制滚动条轨道的颜色。【交互设置滚动条宽度】使用scrollbarwidth属性可以设置滚动条的宽度，其语法格式如下。scrollbar-width:auto|thin|none各属性值的含义如下。auto：系统默认的滚动条宽度。thin：系统提供的瘦滚动条宽度，或者比默认滚动条宽度更窄的宽度。none：不显示滚动条，但是该元素依然可以滚动。4.教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。展示本次课《职业素养评价表》，组织学生自评、互评。5．上机指导1．使用CSS中的与表格相关的属性为表格添加样式。2．使用CSS中的列表属性来设置列表样式（列表符号样式和列表符号的位置样式）。3．使用CSS中的与滚动条相关的属性来设置滚动条的颜色样式。8.板书设计表格列表滚动条教学评价上机指导课外学习任务及学习指导课前：【教师布置调研任务】调研主题：《分析如何实现设置表格、列表和滚动条样式》要求：以小组为单位，分析如何设置表格、列表和滚动条样式，同时制作汇报PPT，提交到“微信群”。【学生调研，教师线上指导】学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。【教师对各组调研成果进行评价】教师查阅学生调研结果PPT，对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。课后：【使用CSS中的与表格相关的属性为表格添加样式】小组成员团结协作，首先使用border-spacing属性设置表格边框间距为12px，然后使用caption-side属性设置表格标题位于表格的顶部。教师使用“微信群”对学生进行指导。【使用CSS中的列表属性来设置列表样式（列表符号样式和列表符号的位置样式）】学生通过之前所学的知识，首先使用list-style-type属性设置列表符号样式为大