第十七课编辑网页代码VIP免费

第十七课编辑网页代码一、上课时间：二、教学目标知识目标：1.通过查看网页代码，了解HTML的概念、结构及其在网页制作中的作用。2.让学生对于网页本质有初步的了解。能力目标：1.通过鼠标特效的添加，初步掌握网页特效的添加方法，体验用超文本标记语言修改网页的方法。2.增加学生对HTML代码的更深的认识，进一步修饰网站，使作品具有灵动感。情感与价值观：1.通过网页特效的设置，提升学生追求美感的信心和兴趣。2.打破学生对程度代码的神秘感，让学生从未知到知之，了解程序的本质，接触网页代码。让有兴趣的学生更好地了解HTML代码。三、重点难点教学重点：了解HTML语言，如何添加网页特效代码。教学难点：网页特效代码的合理运用与修改。四、环境与素材1.网络教室2.示例网站：素材库（有代表性的特效代码素材）3.上课素材：礼花绽放特效代码。（文本文档提供）五、教材学生分析教材分析：本课是在学完网站制作基本操作的基础上，起到美化的效果。鼠标的效果无法实现效果，而且网络上的代码调试不出来，所以改为老师提供代码，让学生去练习。学生情况分析：对代码学生比较陌生，可以让学生掌握代码的关键字，记住成对出现。不需要对每一行代码都认识和解释。六、教学过程1.认识HTML代码①注意：开始和结束的标识，后者多了“/”，而且它们是成对出现的。②HTML文件结构如下：标记网页的开始标记头部的开始标记头部的结束标记页面的正文开始标记页面正文结束标记网页的结束③HTM标签是由尖括号包围的关键词，通常成对出现。如上图示。2.添加特效代码操作方法：1)打开“网络世界”网站，选择主页为当前编辑窗口。2)打开教师提供的“礼花绽放特效代码”的文本文件，复制代码。3)切换到SharePointDesigner界面，选择“代码”视图，将光标定位到之间，粘贴已复制的代码。亲身体验：尝试添加一种鼠标特效。知识链接：网页特效。七、随堂练习P68八、课堂小结1.认识HTML代码2.添加特效代码九、课后反思1.进入代码界面学生易产生高大上畏难情节，但经过解释之后，大部分学生都能知道一些。2.选礼花绽放的特效代码，增加学生的兴趣感，在美感中增加学生的学习兴趣。3.特效代码添加之后，容易出现页面的文字白色，显示不出来，提示重新设置网页属性。十、附一：网络世界的效果网站，素材在网站的素材文件夹中。附二：礼花绽放特效代码html,body{background:#000;height:100%;margin:0px;padding:0px;color:#FFF;}.ball{color:#FF0000;position:absolute;font-size:16px;}.star{color:#FF0000;position:absolute;font-size:4px;}functionFireworks(sky,loop){this.sky=sky;this.skyWidth=document.body.clientWidth||document.documentElement.clientWidth;this.skyHeight=document.body.clientHeight||document.documentElement.clientHeight;this.x=this.y=0;this.step=20;this.delay=30;this.stars=[];this.r=10;this.step2=7;this.radius=90;this.angle=45;this.num=16;this.loop=loop;this.degree=2;this.t=0;this.delt=0;this.max=30;this.cur=1;this.points=null;}Fireworks.prototype={init:function(){this.x=parseInt(this.skyWidth/1.3*Math.random())+this.skyWidth/8;this.y=this.skyHeight;this._y=parseInt((this.skyHeight/4)*Math.random())+this.skyHeight/5;},setOpacity:function(obj,p){if(p>85){varopacity=100-(p-85)*4;if(document.all){obj.style.filter="alpha(opacity="+opacity+")";}else{obj.style.MozOpacity=opacity/100;}}},getNextPoint:function(degree,coeff,t){vartt=1.0-t;for(varrr=1;rr<=degree;rr++){for(vari=0;i<=degree-rr;i++){coeff[i]=tt*coeff[i]+t*coeff[i+1];}}returncoeff[0];},showBall:function(){this.ball=document.createElement("div");this.b...