一体化全书教案完整版教学设计

一体化全书教案完整版教学设计课程HTML5授课教师林晓仪课题工程1制作一个网页广告单页的内容分课题任务1.3在网页中添加段落、文字和列表授课班级16五年制电子商务2班授课日期课时8课时学习目标业论识专理知学生能够表述常见HTML格式化文本标签的含义实际操作技能学生能够在网页中按要求正确应用HTML文本标签重点能够在网页中按要求应用HTML文本标签难点能够在网页中按要求应用HTML文本标签教学对象分析授课班级为15五年制电子商务2班，因之前已学过网页相关知识，对网页制作有一定了解，在教学时应联系现实生活中的例子进行讲解。教学场地与教具教学场地：机房教具：计算机课后分析平安注意事项及其它说明1、提醒学生注意用电平安。2、提醒学生不要将食品饮料带入机房。审阅签名:年月日教学环节教师活动学生活动时间分配备注说明3、根据学生任务完成的情况进行总结。任务评价评价【评价】9分钟建立评价机制：自评（不修兴理，没学会）1兴趣»学会（认知）业置作布通过查看源代码的方式，查看局部网页的内容文本所使用的标签是否与我们所用的相同，不管是与不是，请将你查看的网页代码截图发教师邮箱：理解作业要求1分钟加强课堂知识的巩固与迁移洁理清整1、设备恢复和整理。2、教学场地的清洁。3、人走五关（关门、关窗、关灯、关风扇，关电源）。清洁整理值日生清扫卫生课后5分钟清洁整理工程1制作一个简单文章网页任务1.2在网页中添加段落和文字教学过程

教学过程教学过程教学环节教师活动学生活动时间分配备注说明也可使用指定方向的4种关键词。该值为选填，不填写时渐变方向默认为从上到下。数值参数：如Odeg渐变方向从下到上，45deg方向从左下到右上，90deg从左到右。toleft：设置渐变为从右到左，相当于270degtoright：设置渐变从左到右，相当于90degtotop：设置渐变从下到上，相当于Odegtobottom：设置渐变从上到下。相当于180deg。（默认值，等同于留空不写）颜色位置值：颜色值决定颜色的渐变顺序，可以填写多个颜色值，使用逗号分隔。位置值使用百分比为数值，决定当前颜色在渐变方向上的位置。如“#f000%,#0f050%,#00f100%”的意义是起始位置红色，中间绿色，结束位置蓝色。如果位置值不填写，颜色将从0%-100%平均分配位置,如“#f00,#0f0用00f”作用等同于“#foo0%,#0f050%,#00f100%”。>ackground：Linear-gradient#333,#fff)-12-

教学过程教学环节教师活动学生活动八一备注说明分配background：1inear-gradient(

toright,#99920%,#fff50%,#99980%教学过程教学环节教师活动学生活动八一备注说明分配background：1inear-gradient(

toright,#99920%,#fff50%,#99980%XJZ•SJZooOasdao,a，daseaaa5dgbgbgb4rrrbackground:1inear-gradient(-45deg；#9990%,#99975%,#fff90%,#999100%说明：linear-gradient。是作为图片添加到背景中，而不是背景颜色,所以linear-gradient()不能和url()一起使用，但可以和背景颜色#FFO一起使用，如：-13-

教学过程教学环节教师活动学生活动时间分配备注说明错误写法：background:linear-gradient(#fff,#333z#fff)url(img/test.png);正确写法：background:linear-gradient(#fffz#333,#fff)#FFO;【课堂练习2.4-3制作新闻标题的渐变色背景】为练习2.4-2的新闻标题设置渐变色背景，渐变方向从左向右，颜色白色，透明度从100%渐变到0%,如下列图：「台风〃尼伯特”登陆台湾为1949年以来最强初台V中国天气网讯今年第1号台风“尼伯特”于今天(8日)5时5吩以超强台下要控制透明度的渐变需要使用rgba()色，控制最后一个透明度参数的变化。渐变的参数可不填写，默认从标签的开头位置渐变到尾部。CSS.mainh2{background:linear-gradient(toright,rgba(255,255,255,1),rgba(255,255,255,0));padding:5px;}2)径向渐变色：radial-gradient()产生圆形或椭圆形的渐变效果，渐变颜色从圆心向外发散式渐变。语法：radial-gradient(渐变形状渐变半径at圆心坐标，颜色1位置，颜色2位置，……)-14-

教学过程教学环节教师活动学生活动时间分配备注说明取值范围：渐变形状：决定径向渐变的形状，有两个关键词参数，circle（圆形）、ellipse（椭圆形）。渐变半径：决定径向渐变的半径长度，设置circle（圆形）时使用一个参数，设置ellipse（椭圆形）时使用两个个参数，如“circlelOOpx”、“ellipselOOpx200px”。也使用关键词决定半径取值，如下：closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角圆心坐标：决定圆的圆心坐标，前面固定添加at,可以使用px、%单位的数值，也可使用left、center、right、top、bottom方位关键词，圆心坐标有两个参数（横向和纵向坐标），如果只写一个，第二个默认为center0颜色位置值：用法与linear-gradient一样，决定渐变颜色的顺序和位置，具体使用不再介绍。说明：“渐变形状渐变半径at圆心坐标”3个参数可选填，不填写有以下效果：不设置“渐变半径”将默认取值为farthest-corner；不设置“渐变形状”，“渐变半径”只填写一个半径值，“潮变形状”取值为circle,其余情况都取值ellipse；-15-教学过程教学环节教师活动学生活动时间

分配备注说明■不设置“at圆心坐标”，那么默认取值为center。-16-教学过程教学环节教师活动学生活动时间

分配备注说明渐变效果还有下面两种，可以重复渐变的效果:渐变颜色值作用-17-教学过程教学环节教师活动学生活动时间分配备注说明repeating-1inear-gradient()重复的线性渐变repeating-radial-gradient()重复的径向渐变任务实施要求学生参考如下步骤完成任务：（教师巡视并辅导学生的任务完成）为系部宣传网页的home、services,team模块设置对应的背景样式。home模块使用图片aheader_bg.jpg"为背景，图片自动缩放填充满整个模块。services、team模块使用图片“bg.jpg”为背景,背景相对于浏览器窗口固定，不随滚动条移动，图片自动缩放填充满整个窗口。修改水平线＜hr＞的效果，使用渐变色为背景，制作出中间深两侧浅的水平线效果。1）修改上一任务中home模块临时设置的背景样式，使用图片为背景，设置cover的大小缩放方式以适应模块的区域，图片顶部居中放置。原本的背景色可同时添加，如果因网络问题读取不到图片时，可作为临时的背景。CSS.home{/*原本的设置background:#24B0DA;*/background:url（../img/header_bg.jpg）topcenter/coverS24B0DA;}效果学生在总结前面课堂练习知识的基础上，参考教师提供的操作步骤（左边）独立完成任务的实施。7、提供学生的知识迁移能力8、提高学生的自学能力和问题解决能力-18-

教学过程教学环节教师活动学生活动时间分配备注说明2)同样修改servi置背景相对位置为fixecss.services,/*原;backgiS24B0DA;)效果ces、team模块的背景样式，使td其余设置与上一步操作相同c.team{本的设置background:#24B0DA;-ound:url(../img/bg.jpg)top目图片为背景，设*/center/coverfixed-19-

教学过程教学环节教师活动学生活动时间分配备注说明本科专业介绍优秀本科毕'也生口前我校的信息工程系主要开设有计算机科学。技术、网络工程、软件工程三个专业.其中计算机科学与技术又分为嵌入式方向和物联网方向.计算机科学与技术本专业分为嵌入式和物联M两个方向・主要的培养口标是致力「培养具有扎实的嵌入式、物W网AS础理论,熟练运用开发技术和工具，在通信、信圮家电、工业控制、移动计算设备、网络设法等领域从事产品开发、产品测试、维护等方面的高索质专C人才.演赵文我校计算机科学与技术专业毕业生•2005年毕业后任职睛讯公司，现为阿里.巴巴某部门经用.3)将水平线＜hr＞标签修改为如下列图效果。由于＜hr＞标签原本的线条效果由边框线(border)构成，现在需要清除掉该边框，再通过背景的方式加入渐变效果。¥下面通过CSS为＜hr＞追加新的样式：hr(/*省略已有的其它设置*/border:0;/*清除边框*/height:3px;/*添加hr的高度，即水平线的高度*/background:linear-gradient(-20-教学过程教学环节教师活动学生活动时间

分配备注说明6toright,7rgba(0,0,0,0)0%,8rgba(0,0,0,0.1)30%,9rgba(0,0,0,0.1)70%,10rgba(0,0,0,0)100%11）；/*颜色黑色，通过透明度控制渐变*/12)4）水平线在蓝色背景的模块下还有一种效果，如下列图。由于这些模块的标签都有添加class="white”,所以可以设置在“white〃内的所有<hr>将采用另一种渐变样式。1123456789.whitehr{background:linear-gradient(toright,rgba(255,255,255,0)0%,rgba(255,255,255,0.3)30%,rgba(255,255,255,0.3)70%,rgba(255,255,255,0)100%);/*颜色白色，通过透明度控制渐变*/}-21-工程1制作一个简单文章网页教学过程审阅签名：年月日

课程HTML5课师授教林晓仪课题工程1制作一个网页广告单页的内容分课题任务1.2创立空白网页授课班级16五年制电子商务2班授课日期课时4课时学习目标业论识专理知1＞学生能够了解HTML的概念2、学生能够掌握HTML的基本结构实际操作技能1、能够输入基本的网页结构标签2、能够使用VisualStudioCode新建和保存页面重点HTML基本的标签语法难点HTML5新增结构标签教学对象分析授课班级为15五年制电子商务2班，因之前已学过网页相关知识，对网页制作有一定了解，在教学时应联系现实生活中的例子进行讲解。教学场地与教具教学场地：机房教具：计算机课后分析平安注意事项及其它说明1、提醒学生注意用电平安。2、提醒学生不要将食品饮料带入机房。教学过程教学环节教师活动学生活动时间分配备注说明务结任总.CSS的background相关属性为标签设置背景颜色。.属性background-repeat等设置背景图片的样式效果。.颜色值radial-gradient等为背景添加渐变色效果。听讲根据教师的总结找出自己在任务完成时存在的缺乏。5分钟总结任务并回顾教学目标的知识和技能目标评价V（不感兴趣，没学会）k兴趣【评价】9分钟建立评价机制：自评V》学会（认知）作业布置通过查看源代码的方式，查看局部网页所使用的标签和样式是否与我们所用的相同。理解作业要求1分钟清洁整理洁理清整1、设备恢复和整理。2、教学场地的清洁。3、人走五关（关门、关窗、关灯、关风扇，关电源）。清洁整理值日生清扫卫生课后5分钟-22-教学过程课程HTML5+CSS3网页布局授课教师林晓仪课题工程2使用CSS设置网页格式分课题任务5使用CSS设置列表格式、超链接效果授课班级16中级电子商务（2）班授课日期2022.5.16-2022.5.25课时16课时学习目标业论识专理知1、学生能够陈述列表的默认样式2、学生能够陈述伪类选择符的特点实际操作技能1>能使用list-style-type>list-style-image>list-style-position属性设置列表标签的样式，熟悉列表元素标签的特点。2、掌握4种CSS伪类选择符的使用：：link、：visited、：hover、：active。能制作出标签在不同状态下改变样式的效果。3、能使用伪类选择符制作导航栏当鼠标接触时下拉显示的效果。重点1、使用属性设置列表标签的样式2、4种CSS伪类选择符的使用：:link>:visited>:hover、:activeo难点使用伪类选择符制作导航栏当鼠标接触时下拉显示的效教学对象分析授课班级为16电子商务2班，属于初中起点班级，因之前未学过网页相关知识，对网页制作没有什么了解，在教学时应联系现实生活中的例子进行讲解。教学场地与教具教学场地：机房教具：计算机课后分析平安注意事项及其它说明1、提醒学生注意用电平安。2、提醒学生不要将食品饮料带入机房。审阅签名：年月日教学环节教师活动学生活动备注说明织学组教.严格遵守上下课时间，上课铃响前走入班级。.课堂教学所需的用具齐全。.上课前要求学生准备好学习用品，上课时保证学生全身心投入。.强调关键知识和方法，让学生及时做好笔记。.禁止在课堂上做一些与教学无关的事。1、提前5分钟按照固定座位就坐；2、‘不带食品饮料进入教室（机房）；3、注意电脑接电用电平安。营造上课环境，保证用电平安任务引入1、回顾工程要求及上次课内容（1）工程要求：完成一个简单网页（2）上次课已完成任务：制作网页内容（复习并讲解网页的结构）2、明确本次任务在工程完成中的地位：（加▲为本次课任务）工程2制作一个网页广告单页的内容任务1将CSS样式表引入文件任务2使用CSS设置段落文字格式任务3使用CSS实现网页布局任务4将使用CSS背景美化网页标签▲任务5使用CSS设置列表格式、超链接效果任务6使用CSS边框设置表格格式任务7使用CSS美化表单3、任务要求设置系部宣传网页头部的导航栏局部，导航栏的列表内容默认隐敏不可见，当鼠标接触导航栏的图标时，列表内容将自动显示，相反鼠标离开时自动隐藏。并对导航栏中的列表标签进行样式设置和排版。与教师共同分析任务的实施步骤。1、回顾工程及上一次课程内容2、明确本次课程要完成的任务在工程中的位置3、明确本次课程任务要求工程1制作一个简单文章网页任务1.8在网页中添加表单-1-教学过程教学过程教学过程

工程1制作一个简单文章网页教学过程教学环节教师活动学生活动备注说明预备知识【教师讲解理论知识，操作并演示课程练习，在学生操作课堂练习时巡视并辅导学生完成】1、列表标签的样式设置列表标签的特点是＜li＞标签会自带标记符号，＜li＞标签能通过CSS控制其标记的样式效果。1）标记样式：list-style-type语法：list-style-type:标记关键词；取值范围：disc|circle|square|decimal|lower-roman|upper-roman|disc：实心圆（默认）circle：空心圆square：实心方块decimal：阿拉伯数字lower-roman：小写罗马数字upper-roman：大写罗马数字lower-alpha：小写英文字母upper-alpha：大写英文字母none：不使用工程符号其它关键词：armenian、cjk-ideographic、georgian、ower-greek＞hebrew、hiragana、hiragana-iroha＞katakana＞katakana-irohalower-latin^upper-latin说明：设置为disc、circle＞square可使用固定的符号作为标签的标记；none可去除掉标记，这时＜li＞标签相当于＜div＞标签的效果；设置其它的关键词将显示对应的序列符号，如a、b^c、o2、听讲，理解CSS样式修改网页文字格式及段落格式的方法边讲边练，完成理论知识的学习任务1.8在网页中添加表单-2-教学过程

工程1制作一个简单文章网页教学过程教学环节教师活动学生活动备注说明list-style-tvpe:square;列表项列表项列表项列表项list-style-type:upper-alpha;A.列表项B.列表项C.列表项D.列表项list-style-type:decimal;.列表项.列表项.列表项.列表项list-style-tvpe:none;列表项列表项列表项列表项2)图片标记：list-style-image语法：list-style-image:url(图片路径);取值范围：url()：与设置背景图片类似，在()中填入图片路径，使用图片代替标记符号，也可填写none代表不设置图片。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。任务1.8在网页中添加表单-3-教学过程

工程1制作一个简单文章网页教学过程教学环节教师活动学生活动备注说明说明：设置了该属性后，list-style-type属性将会无效。选取的图片无法缩放大小，所以请选择与文字行高近似的图片。list-style-image:url（img/ico_list.png）;列表项列表项列表项列表项3）标记位置：list-style-position语法：list-style-position:位置关键词；取值范围：outside|insideoutside：标记放置在＜li＞标签以外，不占用网页空间（默认）inside：标记放置在＜li＞标签以内，且与文本环绕排列下面的例子中，浅色背景为＜3＞标签的范围，深色背景为＜li＞标签的范围，注意两个参数的区别：list-style-position:outside;列表项列表项列表项列友项list-stvle-position:inside;«列表项列表项列表项列式项【课堂练习2.5-1结合图片素材制作如下列图效果的列表样式】16xl6px根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。任务1.8在网页中添加表单-4-教学过程

工程1制作一个简单文章网页教学过程教学环节教师活动学生活动备注说明茴欧美电影商日本电影商国产电影■商电影短片4)标记的综合设置：list-style语法：list-style:标记样式标记位置标记图片；说明：将上述的3种属性综合的写法，每个参数都可选填，不填写的参数自动使用默认值，即“discoutsidenone"。参数的顺序不能改变，否那么设置无效。list-style:decimalinsideurl(imgico_list.png);►列表项►列表项►列表项►列表项list-style:decimalinside;.列表项.列表项.列表项.列表项list-style:url(imgico_list.png);列表项列表项列表项列表项根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。任务1.8在网页中添加表单-5-教学过程

工程1制作一个简单文章网页教学过程教学环节教师活动学生活动备注说明2、列表标签的标签类型列表标签由组合而成，<li>标签的排列特性近似于<div>等块元素标签，但它自带标记内容，属于“列表元素(list-item)"。<3>标签不属于“列表元素”，而是块元素标签，特点是自带左填充的间距，用于放置<1i>标签的标记。所以<li>标签脱离了<ul>标签也能正常使用，或者将<3>标签的填充清除，将<li>标签的标记设置为不使用，这时<ulxli>标签和<div>标签没有区别。例：使用列表标签制作水平排列的标签样式html<ul><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li></ul>cssul{padding:0;}/*清除左侧多余的填充间距*/ulli{list-style:none;/*不使用标记*/float:left;width:80px;margin:5px;background:#eee;)效果任务1.8在网页中添加表单-6-教学过程

工程1制作一个简单文章网页教学过程教学环节教师活动学生活动备注说明列表项列表项列表项列表项相反的，使用其它标签并修改为“列表元素(list-item)”，一样可制作出列表效果。例：使用<span>标签制作列表样式效果html<span>span标签〈/span)<span>span标签</span><span>span标签</span><span>span标签〈/span〉cssspan{display:list-item;/*改变标签类型*/list-style:circleinside;}效果ospan标签ospan标签ospan标签ospan标签【课堂练习2.5-2制作如下列图效果的二级列表样式】任务1.8在网页中添加表单教学过程教学过程教学过程

工程1制作一个简单文章网页教学过程教学环节教师活动学生活动备注说明.文字样式font-sizefont-weightcolor・・・•••.文本样式text-aligntext-indent••••••.布局样式widthheightmargin・・•・・・4.3、使用伪类选择符设置标签不同状态下的效果<a>超链接标签一共有4种状态：未访问、已访问、鼠标悬停、被点住。可通过CSS为这4种状态设置不同的样式效果，使标签根据鼠标不同的操作呈现不同的效果。未访问已访问鼠标悬停被点住要实现上面的效果，需要使用css的伪类选择符。伪类选择符以“冒号：”的形式附加在通常选择符的后面，为选择符附加特定的选择条件。上面4种状态的伪类选择符如下：也伪类选择符语法作用选择符：link当前选择符中未被访问过的标签选择符：visited当前选择符中已被访问过的标签选择符：hover当前选择符中被鼠标悬停的标签任务1.8在网页中添加表单-8-教学过程

工程1制作一个简单文章网页教学过程教学环节教师活动学生活动时间分配备注说明织学组教1、严格遵守上下课时间，上课铃响前5分钟进入教室；2、检查学生的仪容仪表，严禁带食品和饮料进入教室；3、检查教室线路布置，提醒学生注意用电平安；4、按照固定座位清点人数；5、提醒学生检查是否将电脑接入英特网；6、利用红蜘蛛软件将教学资料“素材”文件夹发送到学生电脑的文件接收柜中，同时将文件放置在教师机共享文件夹供学生访问查阅。1、提前5分钟按照固定座位就坐；2、不带食品饮料进入教室（机房）；3、开机，配置好IP地址，确保红蜘蛛软件运行并链接教师机，同时能够访问英特网；4、注意电脑接电用电平安。课前5分钟营造上课环境，保证用电平安任务引入1、讲解现实生活中网页制作的用处，明白本门课程的作用2、明确本次任务在工程完成中的地位：（加▲为本次课任务）步骤一：制作一个网页广告单页的内容（本工程（即工程一））任务1工作环境准备♦任务2创立一个空白网页任务3在网页中添加段落和文字任务4在网页中添加列表任务5在网页中添加表格任务6在网页中添加图片任务7在网页中添加超链接任务8在网页中添加表单3、任务要求使用VisualStudioCode新建并保存一个简单的基本页面与教师回忆上次课的内容。理解本次课程任务要求10分钟1、明确本次课程要完成的任务在项目中的位置2、明确本次课程任务要求预备知识【教师讲解理论知识，操作并演示课程练习，在学生操作课堂练习时巡视并辅导学生完成】1、HTML概念HTML（HyperTextMark-upLanguage,超文本标记语言或超文本链接标示语言），是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说听讲90分钟边讲边练，完成理论知识的学习任务1.2在网页中添加段落和文字-1-教学过程

工程1制作一个简单文章网页教学过程教学环节教师活动学生活动备注说明选择符：active当前选择符中被鼠标点住的标签上面的效果可使用CSS写为：a:link（color:#333;}/*未访问的链接样式*/a:visited{color:#999;}/*已访问的链接样式*/a:hover{/*被鼠标悬停的链接样式*/font-weight:bold;font-size:20px;color:#FF7F00;}a:active{color:#fOO;}/*被鼠标点住的链接样式*/超链接标签不一定要设置所有的伪类样式，可选择需要的状态效果进行设置,但设置的顺序必须按link、visited^hover、active的顺序排列，否那么局部效果会不生效。不设置的伪类状态可使用一般的选择符a{}代替，代表超链接的默认使用效果，如下面的例子：atcolor:#333;}/*未访问和鼠标悬停默认采用该设置*/a:visited{color:#9991）/*己访问的链接样式*/a:active{color:#f00;}/*被鼠标点住的链接样式*/除了＜a＞标签外，其余的标签也能设置伪类效果，但上述4种伪类中只有鼠标悬停（hover）有效。在设置时先通过普通的选择符设置出标签的默认状态，再通过hover选择符设置出鼠标接触时标签发生改变的样式属性例：【课堂练习2.5-1】为例，添加鼠标接触＜li＞标签时，改变样式的效果：CSS1.listli{任务1.8在网页中添加表单-9-教学过程教学过程工程1制作一个简单文章网页教学过程任务1.8在网页中添加表单教学环节教师活动学生活动备注说明/*保持原本的设置*/}.list1i:hover{/*鼠标接触时改变的样式*/padding-left:20px;background:#305363;color:#fff;line-height:2em;list-style:squareinsidenone;/*最后一个none为了取消图片标记*/)效果欧美电影【课堂练习2.5-3使用＜a＞标签制作如下列图效果的菜单栏】HOMESERVICESPORTFOLIO先设置默认的超链接样式，添加左浮动使其水平排列，通过宽高、间距等属性控制超链接的大小。任务

实施要求学生参考如下步骤完成任务：（教师巡视并辅导学生的任务完成）在第3任务

实施要求学生参考如下步骤完成任务：（教师巡视并辅导学生的任务完成）在第3个任务的操作中，系部宣传网页头部的导航栏局部（＜nav＞学生在总结前面课堂练习知识的基础上，参考教师提供的操作步骤（左边）独立完成任务的实9、提供学生的知识迁移能力-io-工程1制作一个简单文章网页教学过程任务1.8在网页中添加表单教学工程1制作一个简单文章网页教学过程任务1.8在网页中添加表单教学环节教师活动学生活动备注说明10、提高学生

的自学能力和

问题解决能力10、提高学生

的自学能力和

问题解决能力标签）被设置为隐藏，现在修改该局部的设置，实现如下列图10、提高学生

的自学能力和

问题解决能力置导航栏＜nav＞为一小块区域放置在头部的右侧，当鼠标接触时将显示它内部的列表内容，该内容将在网页头部的下方显示，当鼠标离开时该内容也自动隐藏。信息工程系鼠标接触显示导航栏-11-教学过程工程1制作一个简单文章网页教学过程教学环节教师活动学生活动备注说明任务回顾列表有默认样式，但有些样式是我们不需要的，即ul和ol的左边内留白在这个工程中都不需要，所以我们可以简化CSS样式，提取中相同的局部单独罗列。听讲根据教师的总结找出自己在任务完成时存在的缺乏。总结任务ul{padding：Opx;}总结评价1、总结•列表的默认样式■根据要求设置列表的本2、评价i（不感兴趣.没学会）各式1兴趣听讲【评价】①回顾教学目标的知识和技能目标②建立评价机制：自评V“学会（认知）V作业布置通过查看源代码的方式，查看局部网页的图片和超链接所使用的标签是否与我们所用的相同，不管是与不是，请将你查看的网页代码截图发教师邮箱：理解作业要求加强课堂知识的巩固与迁移清洁整理1、设备恢复和整理。2、教学场地的清洁。3、人走五关（关门、关窗、关灯、关风扇，关电源）。清洁整理值日生清扫卫生清洁整理任务1.8在网页中添加表单-12-

工程1工程1制作一个简单文章网页教学过程课程HTML5+CSS3网页布局授课教师林晓仪课题工程2使用CSS设置网页格式分课题任务6使用CSS边框设置表格格式授课班级16五年制电子商务2班授课日期2022-05-302022-06-01课时16学习目标专业理论知识.能表达各种标签边框样式的属性和特点。.能表达2种table布局方式的特点。实际操作技能1、能使用border等相关属性设置标签的边框样式。2、能使用属性border-radius、box-shadow、outline制作各种标签轮廓效果。3、能使用属性border-spacing、border-collapse、table-layout设置表格样式。4、能使用伪类选择符“child”选择指定位置的标签。重点L使用border属性设置标签边框2.使用伪类选择符“child”选择指定位置的标签难点1.table-layout属性两个参数的区别教学对象分析授课班级为16五年制电子商务2班，因之前未学过网页基础知识，对网页没有一定的了解，在教学时应根据教学实际适当调整教学进度和教学内容难度。教学场地与教具教学场地：机房教具：计算机课后分析平安注意事项及其它说明1、提醒学生注意用电平安。2、提醒学生不要将食品饮料带入机房。审阅签名:年月日

教学过程教学环节教师活动学生活动备注说明组织教学1、严格遵守上下课时间，上课铃响前5分钟进入教室；2、检查学生的仪容仪表，严禁带食品和饮料进入教室；3、检查教室线路布置，提醒学生注意用电平安；4、按照固定座位清点人数；5、提醒学生检查是否将电脑接入英特网；6、利用红蜘蛛软件将教学资料“素材”文件夹发送到学生电脑的文件接收柜中，同时将文件放置在教师机共享文件夹供学生访问查阅。1、提前5分钟按照固定座位就坐；2、‘不带食品饮料进入教室（机房）；3、开机，配置好IP地址，确保红蜘蛛软件运行并链接教师机，同时能够访问英特网；4、注意电脑接电用电平安。营造上课环境，保证用电平安任务引入为系部宣传网页局部图片、标签设置边框线，设置标签的圆角效果。为“本科生招生计划〃的表格设置间隔行背景色，完善其它表格样式的设置。与教师共同回顾之前学过的内容。理解本次课程任务要求1、明确本次课程要完成的任务在工程中的位置2、明确本次课程任务要求预备知识【教师讲解理论知识，操作并演示课程练习，在学生操作课堂练习时巡视并辅导学生完成】1、标签的边框样式设置在任务3中学习过标签占用网页空间由宽度、高度、边界、填充、边框5种属性决定，现在学习最后一种“边框（border）”，边框介于边界和填充之间，分上右下左4个方向，可设置多种样式效果。1）边框样式：border语法：border:边框样式宽度颜色；取值范围：听讲听讲边讲边练，完成理论知识的学习-1-

教学过程教学环节教师活动学生活动备注说明边框样式使用下面的关键词，产生不同的边框效果：■none|hidden：无边框■dotted：点状边框■dashed：虚线边框■solid：实线边框宽度:px、％等长度单位的参数值颜色：十六进制色、rgba色等颜色值说明：border为标签的4个方向产生相同样式的边框，3个参数的顺序可以随意调整，'边框样式”是必填参数，不填写无边框效果；“宽听讲度”、“颜色”不填写时，默认为3Px和黑色。2）边框样式的单独设置border属性是对边框的统一设置，如果需要针对边框样式或宽度或颜色进行单独设置，再或者针对上右下左4个方向设置不同的边框，可使用下面的边框相关属性：听讲边框属性作用border-width边框宽度，可针对4个方向分别设置border-style边框样式，可针对4个方向分别设置border-color边框颜色，可针对4个方向分别设置border-top上边框样式，参数写法与border一样border-right右边框样式，参数写法与border一样border-bottom下边框样式，参数写法与border一样border-left左边框样式，参数写法与border一样属性border-widthsborder-style^border-color可填写1至4个参-2-

教学过程教学环节教师活动学生活动备注说明数，依次对上右下左4个方向进行设置。根据填写参数的数量的不同，效果有所区别，具体参考margin参数的写法，效果如下：■border-style:solid;Iborder-width:5pxlOpx;卜;属性border-top、border-right>border-bottom^border-left单独针对某一方向的边框进行设置，上图的效果也可写为：Iborder-top:solid5px#f00;Iborder-right:solidlOpx#ffO;Iborder-bottom:solid5px#0cc;[borderTeft:solidlOpx#909;2、标签轮廓的样式设置除了边框属性，影响标签轮廓效果的还有border-radius（圆角边框）、box-shadow（标签阴影）、outline（轮廓），这3个属性的特点是不会对标签的空间排版产生任何影响，即使属性产生的效果超出了标签的范围，也不会占用任何网页空间。1）圆角边框：border-radius语法：border-radius:圆角的半径（1-4个参数）；border-radius:水平方1可四个角的半径/垂直方向-3-教学过程教学环节教师活动学生活动备注说明教学环节教师活动学生活动备注说明四个角的半径；取值范围：PX、％等长度单位的圆角半径值，以％为单位时,圆角分别以标签的宽度和长度为参考，换算出圆角的水平半径和垂直半径，圆角可能会呈现出椭圆效果。四个角的半径；四个角的半径；取值范围：PX、％等长度单位的圆角半径值，以％为单位时,圆角分别以标签的宽度和长度为参考，换算出圆角的水平半径和垂直半径，圆角可能会呈现出椭圆效果。2）标签阴影：2）标签阴影：box-shadow语法：box-shadow:阴影的水平位置垂直位置模糊范围阴影尺寸阴影颜色inset;取值范围：px、％等长度单位的参数值，十六进制色、rgba色等颜色值2）标签阴影：2）标签阴影：box-shadow语法：box-shadow:阴影的水平位置垂直位置模糊范围阴影尺寸阴影颜色inset;取值范围：px、％等长度单位的参数值，十六进制色、rgba色等颜色值教学过程教学环节教师活动学生活动备注说明3)轮廓：outline语法：outline:边框样式宽度颜色；取值范围：取值与border属性完全相同，不再表达。说明：outline效果与border相同,区别在于outline不占用网页空间，如在【练习2.6-1］中使用可不必考虑边框对排版的影响。outline可与border同时使用，outline的效果在border的外层，但添加圆角效果时outline始终保持矩形。外兄是卜静rder:dashed4px#00f;J4border-radius:20px;V内；；；匕谕tline:solid4px#333;1]border:solid4px#00f:r'1Ioutline:dotted4px#333;E3、表格标签的样式设置由＜table＞＜tr＞＜td＞三层结构组成的表格标签，布局规那么上与任务3中学习的盒模型有所不同。＜table＞标签无填充(padding)效果，＜tr＞标签除了高度(height)其余影响空间布局的属性都无效，＜td＞标签无边界(margin)效果。卜面将介绍其它影响表格相关的属性：1)单元格间距：border-spacing语法：border-spacing:横向间距纵向间距；取值范围：px、％等长度单位的圆角半径值。说明：该属性只能为＜table＞标签设置，用于控制＜table＞和＜td＞之间的间距，代替了边界和填充属性。两个参数分别控制横向和纵向的间距，-5-

教学环节教师活动学生活动时间分配备注说明明文字、图形、动画、声音、表格、链接等。2、HTML文本基本结构个网页对应于一个HTML文件,HTML文件以・htm或.html为扩展名。HTML的结构包括头部(head)、主体(body)两大局部，其中头部描述浏览器所需的信息，主体局部包含网页所要说明的具体内容。其完整结构如下所示：<!doctypehtmi><html><head>4<metacharset="gb2312">〈title>无标题文档</head><body></body></html>其中<!DOCTYPE>声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。<htmlx/html>标签标识了文件的开头与结尾，表示这对标记间的内容是HTML文档。<head></head>标记包含了文件的头部，标记内的内容不在浏览器中显示，主要用来说明文件的有关信息，如文件标题、作者、编写时间等。<meta>标签没有结束标签，位于head元素内部，<meta>标签的属性定义了与文档相关联的名称和值。例如<metacharset="gb2312”>表示使用的字符编码为简体中文编码，比拟常见的还有国际化编码UTF-8。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。工程1制作一个简单文章网页任务1.2在网页中添加段落和文字-2-教学过程教学过程教学过程教学过程教学过程教学环节教师活动学生活动教学环节教师活动学生活动备注说明不像边界属性分为上右下左四个方向。也可只填一个参数，对各个方向2）相邻边框合并：border-collapse语法：border-collapse:关键词；取值范围：separate|collapseseparate：边框独立（默认）collapse：相邻边被合并说明：表格中＜table＞和＜td＞可添加边框效果，border-collapse属性可将相邻的边框合并，此时border-spacing的效果将会无效。相邻边框合并时，优先采用边框宽度较大的样式。设置了边框合并的表格，＜tr＞标签也能设置边框样式，对边框合并后的效果有影响。border-collapse属性只能为＜table＞标签设置。教学过程教学环节教师活动学生活动备注说明table!border^co11apse:collspse;table{table{table{border:solidIpx#999;}table{tabletd,tableth{border:solidIpx#999;}border-collapse:collspse;border:solid2px#666：}tabletd,tableth{border:solidIpx4999;3）表格布局方式：table-layout语法：table-layout:关键词；取值范围：auto（默认）|fixed说明：表格的整体宽高度由以下几个属性决定：＜table＞和＜td＞的边框、单元格间距、＜td＞的填充、＜td＞的宽高。默认情况下（table-layout:auto）如果为＜table＞设置了宽度属性，表格的整体宽度将始终保持该宽度值，即便调整单元格＜td＞的宽度也不会有任何影响。可能你给某个单元格定义宽度为lOOpx,但结果可能并不是lOOpx,因为单元格会自动调整适应整个表格的宽度。

教学过程教学环节教师活动学生活动备注说明设置“table-layout:fixed”后，如果影响表格宽度的所有属性值（上述的4个属性）相加后超过＜table＞设置的宽度，将采用相加后的宽度作为表格总宽度。如果相加总和小于＜table＞设置宽度，将采用＜table＞设置宽度为表格总宽度，相当于“table-layout:aut。”的处理方式。4、使用伪类选择符“child”选择指定位置的标签在任务5中学习了4种关于标签状态的选择符，现在进一步学习其它伪类选择符，可用于选择指定位置的标签。1）伪类选择符E:first-child在当前选择对象（E）中，选择处于标签层第1个的标签。2）伪类选择符E:last-child在当前选择对象（E）中，选择处于标签层最后1个的标签。3）伪类选择符E:nth-child（x）在当前选择对象（E）中，选择处于标签层第x个的标签。（x为填写的数值）4）伪类选择符E:nth-last-child（x）在当前选择对象（E）中，选择处于标签层倒数第x个的标签。5）伪类选择符E:only-child在当前选择对象（E）中，在标签层中是唯一一个的标签。任务实施要求学生参考如下步骤完成任务：（教师巡视并辅导学生的任务完成）在第3个任务的操作中，系部宣传网页头部的导航栏局部（＜nav＞标签）被设置为隐臧，现在修改该局部的设置，实现如下列图的效果。设学生在总结前面课堂练习知识的基础上，参考教师提供的操作步骤（左边）独立完成任务的实施。11、提供学生的知识迁移能力12、提高学生-8-

教学过程教学环节教师活动学生活动备注说明置导航栏＜nav＞为一小块区域放置在头部的右侧，当鼠标接触时将显示它内部的列表内容，该内容将在网页头部的下方显示，当鼠标离开时该内容也自动隐臧。°也1）设置头部（header＞内的＜nav＞标签样式，使其作为一小块区域放置在头部右侧。当前头部左侧文字的高度为39Px（26px文字大小X1.5倍行高），所以＜nav＞标签的整体高度应在40Px左右。暂时设置简单的背景色为样式效果，具体设置在任务7中完成。2）由于＜nav＞标签的空间变小，内部的＜ul＞＜li＞溢出标签范围，导致排版混乱。这里需要将＜ul＞标签设置为“绝对定位（position:absolute;）"（任务3拓展练习的知识），使其脱离网页的空间布局，独立于网页的上层。将＜ul＞标签设置为相对于页面左上角排布的“绝对定位”，位置应放置到＜nav〉标签的下方，并要与＜nav＞标签保持接触，否那么后面鼠标接触的操作可能会不正常。3）完善标签的排版样式设置。4）通过CSS制作鼠标触发导航栏显示的效果。参考下面html代码的结构，先将＜ul＞标签设置为隐藏（display:none）,由于＜ul＞属于＜nav＞标签的子标签，可以通过选择符“headernav:hoverul”设置当＜nav＞被鼠标接触时，＜ul＞标签变更为显示状态（display:block）,实现了显示的效果。而且＜ul＞属于＜nav＞的一局部，当＜ul＞被鼠标接触时，也可保持显示状态。的自学能力和问题解决能力务结任总1、设置标签的边框样式。2、使用属性制作各种标签轮廓效果。听讲根据教师的总结找出自己在任总结任务并回顾教学目标的-9-

教学过程教学环节教师活动学生活动备注说明3、使用属性设置表格样式。4、使用伪类选择符“child”选择指定位置的标签。务完成时存在的缺乏。知识和技能目标评价V（不感兴趣，没学会）k兴趣【评价】建立评价机制：自评V“学会（认知）作业布置通过查看源代码的方式，查看局部网页所使用的标签和样式是否与我们所用的相同。理解作业要求清洁整理清洁整理1、设备恢复和整理。2、教学场地的清洁。3、人走五关（关门、关窗、关灯、关风扇，关电源）。清洁整理值日生清扫卫生-10-

教学过程课程网页布局授课教师钟爱青课题工程2使用CSS设置网页格式分课题任务7使用CSS美化表单授课班级16预备技师计算机网络1班授课日期2022-04-28、05-02、03课时12学习目标专业理论知识.能表达内联元素标签中文字的水平排列规那么。.能表达字体图标与普通图片图标的区别实际操作技能1、能综合使用CSS样式设置美化表单标签的效果，使用属性vertical-align调整表单标签的水平排列方式。2、能使用语法@font-face为网页加载额外字体，掌握字体图标的使用方法，在网页中使用字体图标代替传统的图片。重点.表单标签的美化方法.为网页添加外部字体难点1.使用:before添加字体图标教学对象分析本次教学对象经过上学期网页UI设计的学习，掌握了网页设计的基本布局结构，对网页制作有一定的了解。本学期将进一步学习网页制作的知识，将网页UI转化为网页实体。教学以任务驱动法、练习法、小组竞赛法，充分开掘他们学习的主动性，为能更好的进入现实中的工作环境做好准备。教学场地与教具教学场地：机房教具：计算机课后分析平安注意事项及其它说明1、提醒学生注意用电平安。2、提醒学生不要将食品饮料带入机房。审阅签名：年月日教学过程教学环节教师活动学生活动时间分配备注说明织学组教1、严格遵守上下课时间，上课铃响前5分钟进入教室；2、检查学生的仪容仪表，严禁带食品和饮料进入教室；3、检查教室线路布置，提醒学生注意用电平安；4、按照固定座位清点人数；5、提醒学生检查是否将电脑接入英特网；6、利用红蜘蛛软件将教学资料“素材”文件夹发送到学生电脑的文件接收柜中，同时将文件放置在教师机共享文件夹供学生访问查阅。1、提前5分钟按照固定座位就坐；2、‘不带食品饮料进入教室（机房）；3、开机，配置好IP地址，确保红蜘蛛软件运行并链接教师机，同时能够访问英特网；4、注意电脑接电用电平安。课前5分钟营造上课环境，保证用电平安任务引入完成系部宣传网页剩余的设置，使用字体图标技术，为网页头部等其它模块添加字体图标，并调整大小、颜色等样式。使用前面学习的知识，设置“联系我们”中表单的样式，使其简洁美观。与教师共同回顾之前学过的内容。理解本次课程任务要求10分钟1、明确本次课程要完成的任务在工程中的位置2、明确本次课程任务要求预备知识课堂绫1、大（inline边界等由浏览表图效果【教师讲解理论知识，技'习时巡视并辅导学生完使用CSS美化表单多数表单标签（如＜ipnut＞、t-block）,可与文字一同水邛各种属性。但也有局部表印器直接控制，无法使用CSS单标签一般自带边框样式，••abedk作并演示课程练习，在学生操作成】＜textarea＞等）都属于内联块元素:排列，也可通过CSS设置宽高、边框、.标签（如单项选择、多项选择标签等）的效果修改。我们可根据需求对其美化设置，如下abed听讲听讲180分钟边讲边练，完成理论知识的学习-1-

教学过程教学环节教师活动学生活动时间分配备注说明上图＜ipnut＞表单添加了圆角效果、改变了边框颜色、并添加了内部填充使文字与边框不会过分紧密。代码如下：html＜inputtype="lexl"class=css.foil(padding:5px;border:solidIpx#FFAC00;border-radius:3px;}2、内联元素、内联块元素的水平对齐方式内联元素、内联块元素在水平方向上并不是以标签的顶端进行对齐，而是以标签内的文字底端为对齐的基准线，如下列图：听讲听讲基迪-「确一定一.乂定aaaaaaaaaaaaaaaaaaaaa当文字样式发生变化时，如调整N影响到标签的排版。。字大小、行高、字体等，可能会・文生文字行图为3em[确定为了解决这个问题,最好的方法是将水平排列的标签都设置为浮动，这样可使标签固定以顶端对齐。但如果情况不允许，还可以通过属性“vertical-align”调整对齐的基准方式。语法：vertical-align:值；-2-教学过程教学环节教师活动学生活动时间

分配备注说明教学环节教师活动学生活动时间

分配备注说明取值范围：关键词I数值baseline：以文字的底端为基准进行对齐（默认）sub：垂直对齐文本的下标super：垂直对齐文本的上标top：以标签顶端进行对齐middle：以标签中间进行对齐bottom：以标签底端进行对齐数值：以px或％为单位，之间调整标签在水平方向上的偏移，可设置负数。说明：通过关键词top、middle等进行对齐的效果并不一定稳定，有时会因为字体、浏览器等因素的影响产生意外的效果。无法得到满意的结果时，可尝试使用数值参数，直接调整标签的垂直偏移。取值范围：关键词取值范围：关键词I数值baseline：以文字的底端为基准进行对齐（默认）sub：垂直对齐文本的下标super：垂直对齐文本的上标top：以标签顶端进行对齐middle：以标签中间进行对齐bottom：以标签底端进行对齐数值：以px或％为单位，之间调整标签在水平方向上的偏移，可设置负数。说明：通过关键词top、middle等进行对齐的效果并不一定稳定，有时会因为字体、浏览器等因素的影响产生意外的效果。无法得到满意的结果时，可尝试使用数值参数，直接调整标签的垂直偏移。3、表单标签的焦点状态当一个表单标签被鼠标点击后进行输入等操作，这时可以称该标签处于“焦点”状态，通过伪类":focus”可以给该状态下的标签设置特殊样式效果,类似于任务5中学习的”:hover”。例：设置文本表单处于焦点状态时，显示外发光效果，改变边框颜

教学过程教学环节教师活动学生活动时间分配备注说明色。CSSinput:focus(box-shadow:004pxttOODDFF;border:lpxsolid#51EAFF;outline:none;)效果■♦焦点状态|局部浏览器（如chrome）会自带焦点状态效果，代码中的"outline:none;”是为了消除自带的轮廓效果。4、字体图标的使用一般情况之下，都是通过＜img＞标签或是标签的背景属性来添加图标，但这些使用的图片都属于位图图片，放大会产生锯齿，且无法随意修改颜色。寸卜放大后图不像失真字体图标的原理是将大量图标保存为字体文件，保存的图标属于矢量数据，可以随意缩放不失真。使用CSS将字体文件加载到网页中使用，-4-

教学环节教师活动学生活动时间分配备注说明在head标记内最常用的标记是该标记是网页主题标记，提示网页内容和功能的文字，它将出现在浏览器的标题栏中。<body〉</body>标记是HTML文档的主体局部，网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记对之间。【课题练习1.2-1：录入一个完整的网页结构标签】翻开记事本，输入如下标签：<!doctypehtmi><html><head>4<metacharset="gb2312">这是一个完整的网页结构标签</head><body><p>欢迎光临我的网页!</p></body></html>3、移动设备的HTML基本结构电脑经过多年的开展，现在显示器的屏幕分辨率已经能够到达1024x768及更高的1280x1024等。因此我们的移动设备无法将普通网页全屏显示在移动设备上，虽然通过屏幕放大缩小也可访问传统的网页，也由于用户体验不佳，很难得到实际的应用。为了增加对移动设备的友好，应该将针对移动设备的样式融合进框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。工程1制作一个简单文章网页任务1.2在网页中添加段落和文字-3-教学过程教学过程教学过程

教学过程教学过程教学环节教师活动学生活动时间分配备注说明在网页中需要使用图标的位置通过特殊编码调用出来，再通过css的字体大小、颜色等属性设置图标的样式。1)字体文件的加载在使用字体图标的功能前，需要有记录了图标数据的字体文件，这类型的文件互联网中有免费提供，这里使用课件中准备好的字体文件icomoon为例，该文件记录了将近500个图标，如下列图将字体文件放入到网页的相关目录中。>网站>fontsAbflJ.icomoon.eicomoon.sicomoon.ticomoon.otvgtfwoff同同同同同同同］❷S000SSHHH0ESHHSS叵］回国回回区1回回字体文件有多种文件格式，如TureTpe(.ttf)、WebOpenFontFormat(.woff)sEmbeddedOpenType(.eot)^SVG(.svg)等。由于不同浏览器对字体文件格式的兼容性不同，为了使各种浏览器都能正常使用字体图标，以上儿种格式的字体文件都是必须的。要使用这些字体文件，需要使用CSS的语法“@font-face”将字体文-5-

教学过程教学环节教师活动学生活动时间分配备注说明件加载到网页中。语法：@font-face{font-family:"定义字体名称”;src:url（"字体路径"）format（"格式名，}说明：“@font-face{}”属于固定的语法结构，表示在网页中定义一种新的字体。“font-family:"字体名称"”用于设置该字体的名称，字体名称自行定义，以后一般标签可通过字体属性"font-family”使用该名称的字体。“src:url（"字体路径”）”通过设置的路径加载字体文件，后面的“format（"格式名用于声明该字体的格式，便于浏览器识别，该局部也可不添加。如果要加载多种字体格式的文件，可使用逗号分隔依次填写，如“src:url（“路径1"）,url（“路径2"）,url（“路径3"）”。通过上面的兼容性表格可发现woff格式的字体在新版本浏览器中都支持，字体文件icomoon的加载设置可简单写成：CSS©font-face{font-family:〃myicons”;src:url（/zfonts/icomoon.woff〃）；）如果要考虑旧版本浏览器的兼容，代码可写为：（注释局部是兼容的浏览器及版本）CSS-6-

教学过程教学环节教师活动学生活动时间分配备注说明@font-face{font-family:〃my_icons”;src:url(^fonts/icomoon.eot，z);/*IE9+*/src:url(*fonts/icomoon.eot?#iefix")format("embedded-opentype"),/*IE6TE8*/url(^fonts/icomoon.woff77)format(〃woff〃)，/*chrome、firefox*/url(*fonts/icomoon.ttf/，)format("truetype"),/*chrome>firefox、opera>Safari,Android,iOS4.2+*/url(^fonts/icomoon.svg#my_icons，/)format(〃svg");/*iOS4.1-*/9}2)字体图标的使用和伪对象选择器:before、：after网页中加载了字体文件后，便可让标签使用该字体，但由于字体图标不属于文字数据，无法直接写为文字显示，需要使用特定的编码代表图标。图标的编码在字体文件制作时已被设定好，具体可翻开字体文件附带的说明文件查看，如下如中的“e90a”、“e909”等就是图标对应的编码。/icon-eyedropper企icon-blog0icon-pen网s□«909□o9O8,icon-quill&icon-penci124icon-pen♦9070«906□q905国icon-newspaperBricon-office-icon-home904□©903□«902-7-

教学过程教学环节教师活动学生活动时间分配备注说明图标的编码不能直接写在标签内，标签无法正确识别，需要使用伪对象选择器:before或:after,该选择器的作用是通过CSS的方式在标签内插入一个标签和数据。语法：E:before{content:"内容其它属性}说明：”:before”在标签内开头局部插入一个新的标签，该标签属于内联标签，文字内容是属性"content:“内容"”所设置的文字，如果要设置该标签的其它属性，可在选择器:before内直接添加。”:after”是将新标签插入到当前标签的末尾局部。字体图标的编码以“content:〃'编码〃；”的格式添加到伪对象选择器中，并设置当前使用的字体为图标字体，便可被正确识别并显示。html<spanclass=z，icon_twitter，，X/span><spanclass="zicon_facebook//></span><spanclass=/zicon_tree，，></span>css.icon_twitter:before{font-family:my_icons;/*使用图标字体*/content:，，\ea96，/;/*图标编码*/).icon_facebook:before{font-family:my_icons;-8-

教学过程教学环节教师活动学生活动时间分配备注说明content:〃\ea9()〃；).icon_tree:before{font-family:my_icons;content:"\c9bc”;color:#f00;font-size:40px;)效果»f市任务实施要求学生参考如下步骤完成任务：（教师巡视并辅导学生的任务完成）完成系部宣传网页剩余的设置，在CSS中加载字体图标文件，为网页头部等其它模块添加字体图标，并调整大小、颜色等样式。美化“contact”模块中的表单样式。△信息工程系S学生在总结前面课堂练习知识的基础上，参考教师提供的操作步骤（左边）独立完成任务的实施。335分钟13、提供学生的知识迁移能力14、提高学生的自学能力和问题解决能力

教学过程教学过程教学过程教学环节教师活动学生活动时间

分配备注说明发送邮件教学过程教学环节教师活动学生活动时间

分配备注说明1）将字体文件放到网页相关的文件夹中，在CSS中加载字体图标文件并设置所使用的图标。这里将该局部CSS代码保存到一个新的CSS文件（命名fonts.css）中，再加载到网页里，这样以后在制作其它网站的页面时也能直接使用这些图标字体设置。2）在头部log。标签内加入一个＜span＞标签用于放置字体图标，之后所有字体图标将统一使用＜span＞标签放置。为＜span＞标签设置对应图标的类选择符，再设置该标签的文字大小、颜色等样式。如果图标与log。文字无法对齐，尝试使用“vertical-align”属性进行调整。3）重新设置头部右侧的导航栏按钮标签的样式，同样使用＜span＞标签为其添加图标。为了使图标居中对齐，将＜span＞标签设置为块元素,文本水平居中，设置行高与外层标签一致，这样字体图标可以放置在正中间。4）在“services”模块的标题前加入图标标签，由于该模块已设置文字居中，只需要统一设置图标的大小和颜色。5）在“contact”模块也是用类似的方法设置。6）网页脚部的图标-10-

教学过程教学环节教师活动学生活动时间分配备注说明6）美化“contact”模块的表单设置，文本表单和多行文本表单的样式相近，相同的效果可统一设置，并设置标签处于“焦点”状态时，产生发光效果。另外要注意虽然两个文本表单并排排列，但整体宽度之和不能为100%,因为内联块标签之间会产生空格，空格也会占用空间，应该预留因位置容纳空格。7）最后设置表单按钮的样式，完成整个页面的设置操作。务结任总1、使用CSS样式设置美化表单标签的效果2、使用属性vertical-align调整表单标签的水平排列方式。3、使用语法@fom-face为网页加载额外字体4、在网页中使用字体图标代替传统的图片。听讲根据教师的总结找出自己在任务完成时存在的缺乏。5分钟总结任务并回顾教学目标的知识和技能目标评价V（不感兴趣，没学会）k兴趣VJ【评价】9分钟建立评价机制：自评V»学会（认知）作业布置通过查看源代码的方式，查看局部网页所使用的标签和样式是否与我们所用的相同。理解作业要求1分钟清洁整理清洁整理1＞设备恢复和整理。2、教学场地的清洁。3、人走五关（关门、关窗、关灯、关风扇，关电源）。清洁整理值日生清扫卫生课后5分钟-11-

教学过程技师学院审阅签名：2022年05月15日课程网页布局授课教师钟爱青课题工程3让网页兼容不同的平台分课题任务3.1变更网页导航菜单授课班级16预备技师计算机网络1班授课日期、17、19课时12课时学习目标业论识专理知.能表达什么叫做响应式网页设计。.能表达CSS媒体查询在响应式网页设计中的重要性。.能够表达CSS媒体查询的相关参数配置。际作能实操技1.能使用CSS媒体查询代码实现响应式网页设计。重点能使用CSS媒体查询代码实现响应式网页设计。难点样式代码符合W3C推荐的媒体查询CSS样式规那么。教学对象分析授课班级为16级五年制电商班，网页基础知识薄弱，进度尽量放慢，加深对知识的理解和内化，在教学时应根据教学实际适当调整教学进度和教学内容难度。教学场地与教具教学场地：机房教具：计算机、VisualStudioCode软件课后分析女全注总事项及其它说明1、提醒学生注意用电平安。2、提醒学生不要将食品饮料带入机房。

工程3让网页兼容不同的平台时间分配教学环节学生活动教师活动教学资源设计意图课前5分钟教学组织准备上课：1、提前5分钟入座，禁带食品饮料进入，参与老师的考勤；2、检查上课资源就位情况，保证课堂教学中能正常使用，如有问题及时与老师沟通；3、确保红蜘蛛软件运行并链接教师机；4、注意电脑接电用电平安。教学准备：1、催促学生按照机房管理规定进入机房并就坐，清点人数；2、保证教学设备和资源能够正常使用；3、提醒学生注意设备使用及用电平安；4、利用红蜘蛛软件将教学资料“素材及资料”文件夹发送到学生电脑的文件接收柜中，同时将文件放置在教师机共享文件夹供学生访问查阅。所有教学资源就位营造上课环境，保证用电平安10分钟复习导入复习和前测：1、通过回答下列问题和完成任务复习巩固上次课知识。2、回顾传统网页和自适应网页的区别，并引入响应式网页的概念及特征。复习导入：1、引入课堂知识一一响应式网页设计；2、通过展示一个网页（传统、自适应、响应式），以提问的方式复习如何使用CSS实现网页的自适应布局；3、通过小任务巩固网页元素隐藏与显示的实现。工程中本任务网页导航菜单素材文件；任务：变更网页导航菜单