《HTML网页设计技术》教案

1《HTML网页设计技术》教案首页本次课标题：说课授课日期第6周周1授课班级课时1上课地点教学目标能力目标知识目标1.本课程的任务、性质、目的2.本课程的教学内容介绍与要求3.本课程的能力培养及教学要求4.本课程的考核要求1.熟悉本课程的地位与前后课程的衔接关系2.了解本课程所涉及的网页设计技能教学任务能描述本课程在课程体系中的地位及作用重点难点重点：1.熟悉简介本课程的教学内容难点：1.本课程的性质、目的、任务2.本课程的能力培养要求作业或考核能概述本课程的课程要求及教学内容2参考资料网页设计[M].电子工业出版社,2010《CSS+DIV网页设计开发技术与实例应用》，电子工业出版社，2011注：表格内容统一用5号宋体填写。教学设计步骤教学内容教师活动（方法与手段）学生活动时间分配告知（教学内容、目的）1、了解课程主要内容、考核方法2、熟悉网站开发步骤讲授设问听讲5分钟引入（任务项目）说课浏览经典网页演示启发提问讨论个别回答5分钟操练(掌握初步或基本能力)1、Dreamweaver开发平台，2、指导学生配置熟悉平台环境3、创建网页并浏览教师讲解学生操作个别回答集体提示15分钟深化（加深对基本能力的体会）通过案例点评、小组讨论及教材理论知识的讲解，使学生了解站点创建、网页设计的含义、特点、依据、内容教师演示要点提示重点讲解个别回答集体讨论15分钟归纳（知识和能力）第一个网页的创建和浏览步骤讲授集体思考个别回答10分钟训练巩固拓展检验组内自评选出一个全班展示，组间互评，认识了解Dreamweaver开发平台，简单网页并浏览。启发诱导难点提示个别指导个人操作小组讨论5分钟3总结归纳本次课所讲的内容，总结要实现的能力目标和知识目标，重点是站点的创建教师讲授听讲5分钟作业根据教学内容制定预习计划后记学生能大致了解本门课程的目的、性质及任务，以及教学内容，能明确课程考核方式4教学内容一、概述（一）课程性质（课程性质和价值）本课程是高职计算机软件技术专业的一门主干专业课程。通过本课程的学习，要求学生掌握网页设计的基本概念，学会使用常用的网页设计工具和常用脚本语言，能够设计制作常见的静态和动态网页，具备网站的建立和维护能力。同时通过本课程的学习，培养学生的综合职业能力、创新精神和良好的职业道德。（二）课程基本理念本课程的设计“以能力为本位、以职业实践为主线、以项目课程为主体”，教学时各模块既有独立性，又有关联性。独立性是指各模块设计案例、组织教学、突出重点时应该相互独立，学生应该一个模块一个模块地掌握其知识点；关联性是指各模块间存在相互关系，在重难点设计上应该加以配合，如HTML语言模块着重基本代码的熟记和编写，对于较难编写代码的“框架”、“层”、“数据链接”等内容则放到DreamWeaver的使用模块中重点介绍。《HTML网页设计技术》课程与计算机基础、Flash动画、PhotoShop图像处理、计算机网络技术、数据库等课程互相联系、互相补充。本课程作为软件技术专业的一门主干专业课程，此时学生已经具备一定的计算机基础知识和动手能力，能较快地掌握网页设计的各种知识，并运用所学知识做出具有特色的网站，使学生能够得到全面的培养，成为社会所需专用人才。（三）课程框架结构、学分和学时分配、对学生选课的建议本课程的设计“以能力为本位、以职业实践为主线、以项目课程为主体”，打破了传统的学科体系的模式，将网页设计职业岗位能力中用到的知识如：网页基础知识、DreamWeaver的使用、HTML语言、JavaScript脚本语言、Flash、Fireworks进行整合并模块化。教学时各模块既有独立性，又有关联性。独立性是指各模块设计案例、组织教学、突出重点时应该相互独立，学生应该一个模块一个模块地掌握其知识点；关联性是指各模块间存在相互补充关系，按理论实践一体化要求设计，强调动手做，强调解决问题。它体现了职业教育“以就业为导向，以能力为本位”的职业教育理念。课程框架结构、学分和学时分配、对学生选课的建议二、课程目标总目标：使学生掌握常用的网页设计工具，熟练运用多种网页设计技术，具备Web网页设计、制作及站点管理的基本知识和基本技能，学生能够独立制作中小型的网站。（一）教学目标：1.了解、HTTP、HTML、CSS的定义、概念和作用；2.理解服务器、客户端、浏览器的概念和作用；3.理解HTML语言中的各种文本格式、字符格式、段落设置、列表、标记的作用；4.熟练操作DreamWeaver；5.理解CSS样式表的作用和意义；6.深入理解HTML语言的各种功能和应用；7.深入理解表格、框架、表单的作用；8.深入理解层的作用；5（二）技能教学目标：1.会使用Dreamweaver网页设计工具制作网页；2.理解HTML语言中的标记设置颜色、文本格式和列表；3.熟练掌握颜色值的配置和背景图案的设置方法，熟练掌握字符、链接颜色的设置方法；4.熟练掌握网页设计中字符格式的设置方法，段落分段与换行的方法；5.掌握HTML的语法结构，掌握HTML语言中标记的使用方法；6.掌握在网页中添加CSS的方法。掌握三种添加样式信息的方法，会使用CSS设置网页格式和列表的格式；7.掌握在网页中嵌入图像的方法，掌握与嵌入图像相关标记的用法；8.掌握与图像布局和位置相关的标记的概念和用法；9.熟练掌握使用绝对和相对URL，创建超链接、图像链接；学会图像映射的建立方法；10.熟练掌握表格的使用方法，会用表格布局并设计网页；11.掌握框架制作网页的方法，会使用框架设计网页；12.掌握制作表单的方法，会利用表单建立交互式页面；（三）素质教学目标：1.具有勤奋学习的态度，严谨求实、创新的工作作风；2.具有良好的心理素质和职业道德素质；3.具有高度责任心和良好的团队合作精神；4.具有一定的科学思维方式和判断分析问题的能力；5.具有较强的网页设计创意思维、艺术设计素质。三、实施建议（一）教学建议：从《HTML网页设计技术》的实际问题出发，精心准备各种典型案例，构建课程的宏观教学设计。例如，公司网站、网上鲜花直销、个人网站精选、书籍专卖等。以若干个案例为载体，形成循序渐进、种类多样的项目群，构建完整的教学设计布局。1、教学采用“四阶段教学法”，将“教、学、练、做”融为一体。教学体现“教师为主导，学生为主体，训练为主线”的原则，课堂上可以采用“四阶段教学法”：第1个阶段，案例引入，提出问题。通过案例演示，提出问题，给出知识点，讲解案例应用背景，给学生一个切入点，建立感性认识。目的是激发学生的学习兴趣、让学生感到学有所用，从而明确本次课的教学目标。第2个阶段，学生自主学习，尝试解决问题。充分利用我校以及互联网网络教学资源，引导学生自主学习，找到解决问题的方法和操作技能，培养学生的自主学习意识和学习方法。学生在学习和尝试解决问题过程中，发现问题，提出问题，在问题的引导下学习相关的知识和操作技能。6第3个阶段，归纳总结，引申提高。在每次课结束前，引导学生进行归纳总结。对本次课的实际意义、重点、难点、容易出错处等及时进行总结。并针对案例的不足之处，进行引申和提高。注意在这个阶段，强调的是“引导”学生，而不是老师讲解。第4个阶段，举一反三、学以致用。案例源于生活，最终要应用于生活。为了使学生能学以致用、举一反三、触类旁通，每次教学结束时及时布置相关的课后练习，使学生在课后进一步复习巩固，并且将课后作业纳入形成性考核的内容之一。同时给出下一次课的学习内容，提示学生预习。2、充分利用现代化教学手段，提高教学效果教学中采用电子演示文稿、大屏幕多媒体联机演示、网络教学等各种先进的教学手段，使课堂教学生动活泼、引人入胜，提高了教学效果，同时提高了教学效率。包括：（1）利用多媒体教学系统广播教学。把学生的共同问题（需要提示的重点）通过“广播教学”，边讲边演示，使学生即时看到操作效果。（2）利用网络将课堂教学延伸到课外，学生根据需要通过网络学习有关的内容。教师的课件和教学用资料都已都上传到教学资源下载中心，方便学生课外学习和复习。（二）评价建议：对学生学业评价提出建议，体现评价的发展功能。1．突出过程评价，以职业岗位工作过程为考评基础，以全学期的教学情境进度为考核时间线，以一个完整的网站页面设计制作项目的驱动，在每个教学情境完成教学之后，要求学生运用该教学情境所学技能设计制作项目中的相关进度作业（作品），并对其作业（作品）进行考核。从而形成阶段性过程考核成绩，该成绩作为总评成绩的重要组成部份（占60％）。2．强调目标评价和理论与实践一体化评价，注重引导学生进行学习方式的改变。3．强调课程结束后的综合评价，结合全教学过程的过程考核项目，对学生的最终过程考核作品，从策划能力、美工设计能力、制作技术应用能力三个方面进行综合评价。从而充分发挥学生主动性和创造力，还要注重考核学生动手能力和在实践中分析问题、解决问题的能力。4．建议在教学中注重团队协作能力的评分，课程结束时进行综合模块考核。建议以学生自己制作的网站的实际水平作为学生的学习本课程的成绩。7教案首页本次课标题：情境一、初步认知静态网页2、熟悉开发工具的使用3、了解网站开发的前沿技术1.静态页面的主要组成部分2.开发工具的使用教学任务开发工具的使用案例：电子银行静态页面的登陆与注册。重点难点重点：开发工具的使用难点：站点的建立作业或考核站点的建立参考资料网页设计[M].电子工业出版社,2010《CSS+DIV网页设计开发技术与实例应用》，电子工业出版社，2011注：表格内容统一用5号宋体填写。8教学设计步骤教学内容教师活动（方法与手段）学生活动时间分配告知（教学内容、目的）要达到的目的：1、了解网站和网页的基本概念；2、掌握网页的版面设计；3、掌握网站的策划与网站原则；4、了解网站的开发过程。讲授设问听讲5分钟引入（任务项目）实例1：浏览优秀的网站，对这些网站的主页进行分析，了解优秀网页的布局结构、色彩搭配、导航栏的设计、动画效果等。演示启发提问讨论个别回答5分钟操练(掌握初步或基本能力)对各个网站的信息内容、网页布局结构、色彩搭配进行分析、说明教师讲解学生操作个别回答集体提示15分钟深化（加深对基本能力的体会）网页布局色彩搭配原则教师演示要点提示重点讲解个别回答集体讨论15分钟归纳（知识和能力）提示和技巧讲授集体思考个别回答10分钟训练巩固拓展检验组织学生讨论，对所展示的网站发表自己见解启发诱导难点提示个别指导个人操作小组讨论5分钟总结问题1：如何上网浏览网站？问题2：如果不知道某个网站的网址，怎样获得该网站的网址或浏览该网站？教师讲授听讲5分钟作业根据教学内容制定预习计划后记学生能大致了解本门课程的目的、性质及任务，以及教学内容，能明确课程考核方式9教学内容一、网页与网站的概念网页：我们在浏览器中看到的页面，它是一个单个的文件。网页里可以有文字、表格、图像、声音、视频等等。网站中的第一个页面成为首页或主页。网站：存放在网络服务器上的完整信息的集合体，它包含一个或多个网页。这些网页按照一定的组织结构，以链接等方式连接在一起，形成一个整体，描述一组完整的信息。二、网页的设计1、网页主题网页的主题指网页所要表现的最主要的思想内涵，可以说师网页的灵魂。主题的概念是很模糊的，它是一种约束，是同一站点中各个页面于五彩摈纷中体现出统一风格的约束；它也是一种力量，是将各个设计者的作品有机结合起来的力量。主题必须与Web页面主要推销或展示的产品或服务紧密相关，同时它又必须有相当的吸引力。这方面如果处理不好，就会使站点来访问者在其中的各页面间移动时，可能会怀疑是否还在同'站点，因为那些页面看起来并不像属于同一站点。页面主题可以帮助设计者解决这一难题。统一的主题可以轻易地将不同设计者的不同风格统一起来，而又不会妨碍他们的设计思路和灵感。确定主题时应遵循的原则2、网页的文字文字是网页最主要的表达形式，尽管图形和解构的表格五彩摈纷，但大多数浏览者大部分时间仍将注意力集中在页面中的文字上面，他们