如何实施《网页设计》教学课堂

第一篇：如何实施《网页设计》教学课堂

如何实施《网页设计》教学课堂

袁志军

新疆乌鲁木齐 新疆职业大学

830011

摘要：新的时代，新的教育理念，教育也提出新的改革，尤其是高职教育, 以培养技术应用能力为主线,设计学生的知识、能力、素质结构和培养方案, 对我们教师的工作提出了更高的要求，那么我们应该怎样来合理安排我们计算机类的教学设计任务呢？笔者根据自己授课的实际经验写出自己在教学任务安排当中的实际感受，以供大家相互探讨。

关键词：网页设计

教学项目

教学课堂

How to Implement the“ Webpage Design” Teaching Class

Vocational University

Yuan Zhijun(Xinjiang Vocational University, Urumqi, Xinjiang 830011, China)Abstract: With the advance of new era and new education idea, the new education reform is proposed, especially the higher vocational education, which is based on the cultivation of application ability, designing for students' knowledge, ability, quality structure and training programs, raises higher requirements for our teachers.How should we arrange our computer teaching designing tasks? According to the author's own teaching experience, here I want to share my own teaching arrangements in the real sense with you.Key words: Webpage design, teaching project, teaching

在教学任务设计设计中由于每个教师的思想、气质、知识结构、教学能力和审美情趣不同，针对不同的教材和学生的实际，在从事教学活动时，在方法上每位老师都有自己的选择和侧重的角度，都要采取自己得心应手的方式方法，创造出自己的授课路子和风格。不同的教学特色和授课风格可以并行，不应嵌在一个框子里，其实只要是效果好，质量高，学生爱学的就是好方法。

这学期我上的《网页设计》课程102课时，网页设计主要涉及到的软件有:Dreamweaver、Flash、Firework、Photoshop加ASP动态网站基础开发及后台管理等，也是学生比较热衷的一门课程，互联网已经成为人们获取知识、网上购物、传递信息、相互交流、和共享资源的重要途径，而网站作为人们与客户通过网络相互交互沟通已成为了最主要的桥梁，更成为网络应用的一大热点。随着网站相关技术的不断发展，越来越多的人开始接触网页设计和网站开发工作，网页设计师正成为互联网应用领域不可或缺的职位之一，这也大大激发了学生对这门课的学习兴趣。但是学生作为一个新手，对网页设计知之甚少，而现代社会工作节奏快、时间紧，怎样才能在有限的时间内快速掌握网页设计的基本技能且印象深刻、既实用并能快速上手呢？我们如何通过大量实例项目演练,扎实理论与软件基础,注重学员实践能力培养 ,提高就业保障呢？下面简要结合本课程的教学方法来与大家一起探讨。

一、课前准备 我们备课中不仅要备学生而且备教材备教法，根据教材内容及学生的实际，设计课的类型，拟定采用哪一种教学方法，并对教学过程的程序及时间安排都作详细的记录，认真写好电子教案。每一课都做到“有备而来”，每堂课都在课前做好充分的准备，针对《网页设计》这门课我采用的是项目分组与实例应用结合的方法来上课，上第一堂课之前先调研学生在其它课程中的学习状态、学习能力、学习态度以及用功程度等考察学生的综合能力。然后根据能力大小将学生搭配分组，以好的带差的，以强的带弱的。通过学生之间的相互辅助增加同学之间的友情，同时也可以增强小组之间的竞争能力，另外也让同学们在学习的同时也认识到团队合作精神的重要性。

二、第一堂课 老师确定自己的教学思路并与学生一起调研网页设计项目和确定有网页设计开发要求的部门单位，调研项目的大纲由老师来负责准备，然后即可安排学生中速打较快和文笔较好的同学一起来写一封关于网页设计应用需求的调研通知，通过学生自己的理解来表达他们与用户沟通的技巧，并且也锻炼了同学们的协调能力。同时要求小组通过报名或推选的方式确定小组项目负责人（小组长），小组一起探讨选择比较适合自己特点、能力、也是自己强项的工作任务，小组长负责带领小组根据项目特点制定过程表格的具体要求。例如：需要提出的问题、采用哪种表格方式来记录需求、需要具有怎样相应的实施条件、项目实施的进度规划等。教师将事先分配好的小组名单和调研通知公布在校园网上，并且发出书面通知希望能够得到相关部门单位的协助与配合，老师在中间起协调沟通作用。

三、课堂教学 我们的教学任务是让学生在‘教与学“当中学习掌握更多的实际操作技能，这就要求我们结合实例来教受学习任务，教会学生在已有的案例基础上开发利用，以提高开发速度和拓展更多的学习思路。要对多年来的教学技巧和经验进行总结，教会学生通过使用一些简单的图形处理软件、抓图软件、和FLASH制作软件工具来制作网页，可大大提高学生网页的制作速度，简化制作步骤。以不致于把更多的精力都放在学习Flash、Firework、Photoshop中，造成本末倒置，因为制作网站繁杂而失去对学习《网页设计》学习的兴趣。教会学生们准备网业设计的素材、网页构架、布局、颜色搭配、ASP、数据库、网站总体规划等最终达到动态网站设计能力。

四、课后调研 让学生在课后到相应的部门调研需求，调研需求的方法是先找部门的基层工作人员落实需求，因为基层工作者更了解工作的性质、方法、步骤和需求，对具体的操作要求也更有发言权。这样既锻炼了学生的沟通能力，同时也增加了师生之间的感情交流。通过取得的调研需求小组讨论进行详细的需求分析，通过边学边做边分析使学生懂得分析与取舍，将难度非常大的且无法实现的功能去除或改用其它模式来处理。在学习过程中不断通过查阅图书、网络来查询解决问题，再由老师和学生小组一起讨论，将问题做到最好最满意的解决方式，锻炼同学们分析问题和解决问题的能力，通过不断的摸索和讨论形成整体框架。

五、项目实施与评估

学生确定各自在小组中的分工以及小组成员合作的形式，然后按照已确立的步骤和程序工作。结合项目任务开始边学习课程内容边实践项目开发、学习新知识、解决新问题。在制作的同时要强调学生要养成良好的记录信息并保存信息的习惯，以便为自己也为后期修改人员可以读懂你的程序而做好准备。先由学生对自己的项目结果进行自我评估，再由教师进行检查评分。师生共同讨论，评判项目工作中出现的问题，学生解决问题的方法以及学习行动的特征。通过对比师生评价结果，找出造成结果差异的原因。当学生掌握网页设计规划的整体制作步骤时再将做好的网站模块展示给相关部门领导审核，再度提出需求进行修改创新，当部门单位试用效果基本满意时，再通过各个部门的网站框架将数据整合，分析、调试，制作出适合于本校的动态网站应用系统，将整个系统安装在学校的服务器上进行应用。

六、归档和项目应用 项目工作结果应该归档保存，即进行项目文档的收集、整理和保存工作。以供下一届学生能够在此项目的基础上做更完善的二次开发，同时也是该学生团队此门课程重要的考核依据。开发的项目应用也可投入到学校的实际应用当中去，减少部门单位人员繁杂的手工业务流程和纸张资源，在应用的基础上可根据应用效果的好坏可适度提出给予小组成员申请资助奖励，激发学生积极向上的学习精神，提高学生的成就感。通过这种模式的教学不但可以提高学生的学习兴趣，还可以锻炼学生的综合素质。同时也为单位不必购买昂贵的应用软件而投入大量的资金解决了问题。

七、教学模式的延伸 随着社会的发展，目前教学手段不断出新花样，各高校都广泛采取视频教学的方式来教学，一是可以吸引学生的兴趣，二是可以活跃教学气氛，三、便于学生课后学习和复习，四、可以通过网络的方式让更多的学生参与到课堂教学当中，同时在社会实践学习过程中视频教学更能清晰的表达出教学内容和目的，对于参照物尤其是操作过程更能够清晰的表达给学生。所以通过一种简单实用的方法来建设一套能够网络实时直播的或存储后及时上传的网络教学录像设备，对于我们项目案例教学法来说是非常必要的。该设备要具备方便搭建可灵活性和可靠性，能够适应各种复杂环境场所下录制的可能。当然我们搭建的主要核心设备应该是一台高清网络摄像机，其次是我们的监视画面和语音录音存储设备及相应的网络上传和发布软件，具体的搭建要看投入的资金、设备、环境来决定。

通过此课程的分析归纳如下：计算机专业教学中，教师可从实际出发，精选出一些典型项目，说明其要求和要达到的效果后，为每个项目聘项目经理（小组长）一名，由学生自由报名，或通过应聘竞选方式选拔出，再由项目经理去为其他同学分工，一起进行筹备，直到完成项目后交教师审核，教师在其中起指导作用，学生起主导作用，这样学生由被动变为主动，可增强学生学习的主动性和团队精神。高职教育的课程要求我们应把课程应用到项目中去，所以结合实际的开发工作需求，首先要让学生明白他们的工作任务，让学生懂得课程体系在项目中的地位和作用，使学生了解从项目需求到最终的验收结束、资料归档整理等所需要经历哪些过程，做好哪些工作准备，需要怎样的沟通技巧、通过哪些工具来完成最后老师交给的项目。而不是把学生培养成只会解释问题的“理论高手”，而是要培养学生具有解决实际问题的“智慧高手”，解决“怎么干”，“干什么”的问题。在教学中，教师与学生承担着更多的教与学的责任，要求有更多的投入和参与。

参考文献

王文惠．高校网络课程开发中的教学设计研究[J]．昌吉学院学报，2006，4：66～69 周国烛 韩志伟．高等职业教育课程教学设计与案例．中国轻工业出版社．2009,7月

袁志军

1972年

男

副教授

工学学士

主要研究方向：计算机

第二篇：浅谈网页设计课程教学

浅谈网页设计课程教学

摘要：网页设计课程是计算机和艺术的交叉学科课程，应注重将技术和艺术相结合起来进行教学。本文针对“网页设计 ”课程的特点，结合实践应用，阐述在教学方面的一些体会。

关键词：网页设计，教学方法

Abstract: website design course is a cross computer science and artistry course, it is need to combine teaching methods of these subjects.this paper is to base on the feature of “website design” course and practice , to give some opinion about teaching.Key words : website design, a teaching method

一、引言

《网页设计》课程是职业院校计算机类专业及电子商务专业的一门专业课程，也是一门实践性很强的职业技术课程。由于《网页设计》课程实践性和更新性很强，该课程如果采用传统的教学方式，那结果是不理想的。在这里结合自身的实际经验，谈谈网页设计课程的教学。

二、教学策略

1．课程特点

网页设计课程是计算机和艺术的交叉学科课程。在教学过程中，除了要求学生掌握基本的技术外，也必须对艺术设计有一定的了解。网页设计应注重技术和艺术的统一性。在进行网页设计时，应考虑网站的总体结构，风格定位，色彩的应用，版式的设计等方面的因素，力求形式与内容的统一，让网页的显示达到快捷，美观的视觉效果。

2．教学方案

要设计一个好的网页作品，首要的因素不是创新，而是“用户体验”，第一步应该站在用户的角度去考虑设计方案，所有的形象风格都必须服从主题，服务用户。这就对网页的整体形象有了较高的要求，整体形象包括版式设计，色彩的应用，logo设计，素材设计，广告设计，web图像设计及优化，交互方式等等。在教学时，我们可以结合实际，要求学生从版式布局设计和网页元素的处理及色彩搭配三方面着手，归纳如下：

（1）版式设计

网页的美感来源于网页的版式设计，它突出了网页设计的艺术性和个性，属于网页的艺术设计，好的版式设计会使得网页显得更具有美感和创意。网页的版式设计是基于内容的，应该从实用性和艺术性考虑。网页内容一定要主次分明，中心突出；导航要清晰；可以图文并茂，是网页显得生动和活跃。除此以外，网页的版式设计要符合统一、分割的原则。统一即指整个网站版式风格的统一性、整体性；分割即指要科学的划分整个页面。

网页的版式设计主要是表格、层等技术的应用。表格是一种最简单的布局手法，它可以将图像和文字做最恰当的编排，达到清晰易懂的效果。层（div）的布局，是现在正当流行的排版手法，它主要应用相对位置等的关系进行准确定位，再加上层叠样式表的辅助，突出了它对网页的设计具有可扩展的优势。

文字是网页内容的主要载体，所以文字的视觉效果在版式设计中也起着关键的作用。文字的设置可以分为字体、大小、颜色、行距等，通过这些属性设置，使文字排列得整体和美观。但要注意的是中文字体和英文等其他字体的设置，是有一定区别的。英文的字体有很多的选择，但中文的正文字，总的来说，就两种：宋体和黑体。在传统的版式设计中，大家都还是倾向于英文的排版，从视觉上来看，英文字体更有韵律性，因为每个字母本身高矮不一致；但是中文字体相对来说，就显得单调和独立些，所以在设计时，这两种文字要作不同的处理。另外，也不要选择一些非常特殊的字体，除非用户的浏览器认识这些特殊字体，否则将会出现乱码。如果遇到非要使用特殊字体的情况，可将文字转换成图片再将其应用。对于字号而言，单位应采用em，而不是px，这点在使用层叠样式表（css）时尤为重要，还要注意的是em和px是有差别的，所以在使用的时候也要对上号，否则也达不到预先的视觉效果。文字一行的字数最好不超过50字，首页的标题在10-20字为佳；行距一般使用的是20-22像素的行距，这样使得整个的文字内容部分不会显得太紧凑或者太松散。文字的整体排列一般有四种基本形式：两端对齐、居中对齐、左对齐或右对齐、图文环绕排列。在整个网页版式设计中，标题文字的设计原则应该是“醒目而不夸张”。

导航栏的设计在网页设计中也很重要，它对整个网站内容有提纲和导航的作用，在设计的时候，要注意首先导航栏的风格也要和整个网页风格保持统一，另外最好采用文字，因为网络的速度可能会影响图片的正常下载；不过现在flash按钮的导航栏已经成为时尚，它可以实现丰富的动感效果。

（2）网页元素的处理

网页元素包括logo、按钮、图片、动画、声音、banner等。在网页中包含这些对象时要注意的有：首先是logo的设计，logo代表了整个网站或者企业的文化，一个有特色、具有视觉冲击力的logo，可以直接影响浏览者对网站的判断，给浏览者留下记忆深刻的印象。其次，要确保网页上的每一个元素都有存在的必要性，不要使用冗余的技术和内容；再次，要保持形式和内容的统一；最后，要尽量的使网页具有快捷性。对于网页的特效技术，最好采用javascript或css技术来实现。

（3）色彩的处理

并非所有的颜色都能应用于网页，网页中的颜色会受到硬件、浏览器等的影响，即使网页中使用了非常合理、非常漂亮的配色方案，每一位用户所看到的效果也不一定相同。所以，最好使用使用网页安全色来避免和解决这种问题。网页安全色是指在不同的硬件环境和软件环境下都能在浏览器上正常显示的颜色，并且现显示的效果都一样，不会出现失真的现象。在页面设计中，整个网页的色彩种类最好不要超过3种，一种或者两种主体色，其他为辅助色。颜色种类太多，会让人觉得很杂乱。另外，文字内容和网页的背景颜色的对比要做到突出，比如：背景为深色，则文字的颜色可以选取浅色调；背景为浅色时，文字颜色就应该深些；这种深浅的变化在色彩学中称为“明度变化“。比如有些主页，背景色和文字颜色都采用的是深色，由于色彩的明度较近，所以浏览者来浏览阅读的时候，会感觉吃力，从而影响阅读；但是色彩的明度变化也不能太大，明度变化大会导致亮度的反差强，让人觉得很刺眼，同样会影响整个网页的视觉效果。在进行颜色搭配时，还要注意的是：第一，采用的颜色应具有联想性，不同的色彩会产生不同的联想，所以色彩的选取也要和网页的内涵有关。第二，色彩的合理性。根据网页的主题的不同，选取相应的色彩，比如红色，可以体现出网站的热情和喜庆；蓝色可体现出科技的气息等。第三，色彩要有鲜明性，这个才能给浏览者深刻的印象，并有耳目一新的感觉。

（4）网页赏析

在教学过程中对学生的引导是非常重要的，设计网页得多看多学，网页设计的技术和风格在日新月异地变化，所以在提高学生设计技术的同时，还要多培养学生的审美能力，知道怎么设计才是一个好的网页。创建网页是一个不断学习的过程，在看一个网站的时候，找到这个网站的优点缺点，注意哪些是可以借鉴的，哪些是需要避免的，在看的同时，可以看些成熟的网站，也可以看些成长中的作品，在同期的比较中，也有助于自身的提高。另外，鼓励学生看源文件，了解某些效果是如果实现的，在效仿的同时进行改进和创新。

（5）考核方式

网页设计课程的考核应该打破传统的考试方式，建议采用机考的方式，学生通过一学期的学习，应能自行设计各种网页，熟练掌握其基本制作方法和技巧，在规定的时间内设计网 页。这也是一种对提高学生动能能力的一种鞭策方法。

三、结束语

在网页设计课程教学中，应当充分认识到网页设计课程的特点，结合实际，采取相应的教学措施和方法完成教学任务，以达到良好的教学效果。对于信息科技迅猛的发展今天，必须摒弃陈旧的教学理念，及时提高自身的专业水平，完善自身的教学理念，寻找更好的教学方法，激发学生的学习兴趣，培养学生追求新知的能力和动手实践的能力，从而达到学以致用的效果。

参考资料： 田博文，《Dreamweaver8基础培训教程》，人民邮电出版社，2007年2月

孙素华，<< Dreamweaverms2004完美网页设计>>，中国青年出版社，2005年10月

第三篇：网页设计教学总结

网页设计教学总结

这个学期我担任了10网络(1)(2)班和10商务班的的网页设计这门课程。在前面半个学期的教学中，我做到了认真制定计划，注重教学理论，认真备课和教学，努力上好每一节课，并和其它优秀老师交流，从中吸取教学经验，取长补短，提高自己的教学水平。按照课程要求进行施教，让学生掌握好网页设计知识。还注意以德为本，结合网站实例进行层层善诱，多方面、多角度去培养学生的实践能力、提升其操作技能。

下面从以下几个方面来谈谈我这个半个学期的教学总结： 教学进度

按照教学进度，我们已经完成了课程的全部内容的学习。教学进度基本上按照原计划已经完成了。教学方法

教学中我从以下几方面进行努力：

一、课前准备。熟悉教材。解教材的结构，重点与难点，掌握知识的逻辑，能运用自如，知道应补充哪些资料，采用哪个实例作为网页教学实例；解学生的知识结构，解他兴趣、需要和习惯，知道他学习新知识可能会有哪些困难，采取相应的预防措施；结合学生情况采取何种教学方法，解决如何把教材上的知识系统地传授给学生，包括如何组织教材、如何安排每节课、如何讲解实例。设计一些实际中的商业网站案例。

二、课堂情况。网页设计课上。课堂上引起学生的兴趣，激发学生的创作兴趣。网页设计课里包含有一些图片设计和动画设计，这些需要有丰富的想象力才能制作出优秀的作品，课堂上，也尽力培养学生的想象力，引导学生想象。课堂上，始终以学生为学习主体，把学习的主动权交给学生，挖掘学生潜在能力，让学生自主学习，提高学生学习的独立性。记得在有节课，把一个网站拿来讲解，让学生先看，看了后让学生在草稿纸上画出自己的设计草图。最后我再来以不同的方式讲解该网站制作的方式，给学生从多角度进行分析。有时也让学生在教师机上当场操作，让学生的智慧、能力得到体验，使学生成了学习的主人，使学习成了需求，让他觉得学习中有发现、有乐趣、有收获。课堂上关注全体学生，注意信息反馈，调动学生的注意，使其保持相对安静，同时，激发学生的情感，使他产生愉悦的心境，创造良好的课堂气氛，课堂语言简洁明了努力克服重复的毛病，课堂提问面向全体学生，努力引发学生学网页课的兴趣。还要做好课后辅导工作。认真批改学生的作业。

三、课后工作。要提高教学质量。总结学生本次作业中的不足，解哪些知识学生还没有理解并在下一节课时进行补充说明。鼓励优秀学生，激发其它学生。课后多和学生交流，解其学习情况，以便改善教学。存在问题:

一、教学中的相互合作有待提高。

二、网络教学资源还不是特别丰富，不能很好满足教学需求。今后将进一步加强网络资源建设，并提高资源利用率。

总结整个2007年上半年的教学工作，收获是丰富的，不管从知识，还是教学管理，还是教学经验上都是丰富的。给了我成长的道路上宝贵的一笔。虽然有很多时候都是在一种紧张，忙碌的状态下走过，但我知道，走过了这一段，人生就会是另一个起点，有另一个更大的目标等着我去前进。

屈明 2011-12-28

第四篇：网页制作教学设计

网页制作教学设计

网页制作教学设计1

教学目标：

1、知识与技能

（1）了解超级链接的含义及链接源和链接目标的含义，掌握同一站点内以及不同站点间网页超级链接的创建方法。

（2）掌握网页内书签的作用及创建书签链接方法，掌握交互式按钮、框架网页内超级链接的设置方法。

（3）理解热区链接的含义及创建方法。

2、过程与方法

（1）通过创建网页超级链接的操作，使学生了解网页中创建超级链接的基本方法，破除对网页链接的神秘感。

（2）通过对不同对象设置超级链接的操作，使学生总结出操作的规律，培养学生自主学习与操作的能力。

（3）通过网页不同的超级链接方法，拓展学生思维，创建多种形式的网页链接。

3、情感态度与价值观

（1）通过链接我国主要自然保护区网页，激发学生热爱祖国、热爱自然、热爱生命的激情。

（2）完成超级链接，使学生感受成功的喜悦和快乐。

教学重、难点：

1、教学重点：

（1）超级链接的含义及链接源和链接目标的含义。

（2）超链接的制作方法——给文字、图片制作超链接，制作书签链接，给交互式按钮制作超链接，框架页面内的超链接，图片区域制作超链接等。

2、教学难点

（1）书签链接中名称及对应链接位置的设定。

（2）在框架页面中制作超链接时，目标对象所选择的显示窗口形式。

教学方法与教学手段：

任务驱动法、讨论探究法、讲解与演示法、类比知识迁移法。

教学准备：

“动物——人类的朋友”站点，包括未链接的网页，如欢迎页、表格页、框架页，表单页等。

教学过程：

1、引入

展示两个主页，一个已经创建了链接，一个没有创建链接，让学生进行比较并找出区别，引出本课课题——超级链接。

提出：我们在先前的学习中，哪个软件中的相关操作与它类似？什么是超级链接？找一个例子，分析链接源和链接目标分别是什么？

学生展开交流，通过对比找出不同点，并积极思考，回答老师的问题。

设计意图：通过对比操作、交流，再辅以知识迁移，明确本节课教学内容。

2、新授

（1）站内超级链接

引导学生回顾PowerPoint中超链接的制作方法（教师提示：右击链接源，利用快捷菜单制作超链接），辅以教材中的内容，让学生自行探究并完成以下操作：

任务1同一站点内不同页面之间的链接

○1制作首页（欢迎页）到表格页的超链接。

○2给表格页内交互式按钮设置超级链接，链接到相关页面。

○3给框架页内交互式按钮设置超级链接，链接到相关页面。

教师巡视，及时指导，安排学生示范操作并讲解如何制作超链接。

交互式按钮的超链接制作要求在框架网页中演示操作。老师可以提问学生：演示者操作的对吗？有没有问题？

引导学生发现问题：超链接制作完成后需要检验（保存后预览）。

教师讲解，突破难点，再交由学生操作。

以上是同一站点内不同网页之间的链接，有时一个页面中内容过多，需要不断拖动滚动条实现阅读，能否实现快速跳转呢？

任务2同一站点内同一页面内的跳转（链接）：在“动物趣闻”页面内制作书签链接。

教师讲解：由生活中的书签引入，介绍“书签链接”的概念，然后再演示如何操作。

提示：书签链接的双向性问题（返回）。

学生认真听讲后模仿制作，教师巡视进行指导并反馈学生的完成情况。

（2）站间超级链接

仅凭我们课堂上制作的这些页面还不足以详细介绍我们的主题，此时我们还可以借助超链接，链接到因特网上的其他网站，以丰富我们的内容。

任务3借助热区链接，为“友情链接”页面制作超链接，链接我国一些自然保护区网站。

有了以上基础，可安排学生自学教材中有关热区链接的相关内容，学生探究操作后教师再安排学生进行演示，辅助以提问的形式检验学生的自学情况。

3、总结与评价

开展同学间的互助，检验其链接完成情况，推荐优秀同学做展示。引导学生分类总结本节课的知识点。

网页制作教学设计2

教学目标：

1、让学生掌握在网页中插入表格的方法以及表格的修改

2、学会利用表格来规划网页

3、培养学生创新的能力以及动手操作的能力

教学重、难点：

利用表格来规划网页，从中培养学生的创新能力

教学过程：

一、情境导入

同学们你们善于观察吗？老师先考考你们，我们一起来看一组图片，你们看看在那里看过呢？学校缓台的窗台上。你们的观察能力真的很强啊，对，这些都是我们学校美术的特色作口，盘画。其实，我们做过很多作品：有手工作品，语文课中的作文、书法等都是作品，这节课我们以绘画作口品为例，做一个学习园地网页，把我们的作品展示到自己的班级网站中，以便我们更好的努力学习。现在我们就一起来制作吧！

二、新知探究

首先我们来打开上节课的班级网站，在这个网站中新建一个网页，并保存成“学习园地”。

教师讲解：如何制作学习园地网页。

1、制作网页的标题：输入文字，并设置文字的格式。

2、插入表格：单击“表格”中的“插入表格”并对表格属性进行设置。如：行、列的操作，对齐方式等。同时讲解什么是行，什么是列，以及单元格的概念。

3、修改表格：调整表格行高和列宽。

4、在学生学会插入表格的基础上，来设计网页，展示作品。并讲解在单元格中可以插入图片、文字。那我们就一起快快去做吧！插入图片，并在图片的上面或下面进行图片的注释。

5、进一步设置单元格的背景，来美化网页。

6、设置超链接：通过导航栏目，设置文字超链接。选中文字，点击右键选择超链接在列表中选择你要链接的网页，单击“确定”按钮。

7、学生在教师的讲解后，学生自己动手操作制作网页。教师进行指导。（伴随音乐）

三、作品评价

1、生评：从网页设计上，美观程度上，知识落实上重点评价。

2、师评：对学生作品进行评价，并对其它学生的评价加以更完整的解释。

四、总结

我们这节课主要是利用了表格来设计网页，以使来美化我们的网页，通过绘画作品的展示，学习更多的知识。

网页制作教学设计3

一、课程基本信息

课程编号：

中文名称：网页设计与制作

英文名称：Web Design and Production课程类别：选修课适用专业：所有专业

开课学期：20xx—20xx第2学期总学时：24学时总学分：1课程简介：

本课程突出网页设计与制作的现代特点，从Internet的基础知识入手，重点介绍HTML超文本标记语言，以及所见即所得的网页设计制作工具Dreamweaver的基本操作流程。从静态页面到动态页面由浅入深的介绍网页设计与制作全过程。采用案例分析和亲自实践的方式突出、突破课程的重点和难点。并指导每一名选课的同学为自己建一个博客网站，以此提高同学对网页设计与制作的兴趣和爱好。参考书：

1、网页设计与制作教程，熊前兴闵联营，科学出版社；

2、网站与网页设计，张贵明，清华大学出版社；

3、网页美术设计原理及实战策略，王晓峰焦燕，清华大学出版社；

4、网站建设典型案例，张枭，清华大学出版社；

二、课程教学目标：

网页和网站是Internet的重要组成部分，企业、公司和机构通过网站来宣传推介自己的技术和产品，个人发布主页展示自己的风采，人们从不同类型的网站来获取需要的信息。因此，设计与制作网页已经成为计算机应用技术的一个重要方面。本课程的主要教学目的是使学生掌握网页设计与制作的基础知识，能运用网页工具设计和制作常用网页。

三、理论教学内容与要求

第一章、网页的基础知识（1学时）

（1）Internet基础知识

（2）www简介

（3）网页制作的技术和工具介绍

第二章、超文本编辑语言HTML（8学时）

（1）HTML文件的基本结构

（2）文字和段落标记

（3）列表标记

（4）图片标记

（5）表格标记

（6）超链接标记

（7）表单标记

（8）框架标记

第三章、JavaScript语言（4学时）

（1）JavaScript语言简介

（2）JavaScript编程基础

（3）基于对象的JavaScript语言

（4）JavaScript程序实例

第四章、层叠样式表CSS（1学时）

（1）CSS概述

（2）CSS属性

第五章、可视化网页设计工具

（1）网页的基本操作

（2）图像、表格与超链接

（3）表单与框架

（4）添加网页元素

（5）发布站点

第六章、动态网页设计语言ASP（4学时）

（1）ASP简介

（2）VBScript脚本基础

（3）ASP的内置对象

（4）实用文件

第七章、利用AD0访问数据库（1学时）

（1）数据库的连接

（2）数据库的检索

（3）数据库的操作

总结复习（1学时）

四、实验教学内容与要求

五、作业

六、考核方式

期末考核每个同学为自己设计制作一个博客网站。

七、成绩评定

1、自制网站（80%）

2、平时考勤、作业（20%）平时成绩分配：

平时考勤5次，每次2分，共占10%作业5次，每次2分，共占10%

八、执行大纲时应注意的问题

根据学生对课程内容的掌握和理解程度会对进度做适当的调整。

网页制作教学设计4

一、学习内容分析

《H5快速制作网页》是苏教版《初中信息技术》8年级第3章《主题网站设计与制作》第2节《制作网页》中第1课时的内容。H5是指第5代HTML标记语言，其搭建的站点可方便地应用于PC、Android、iOS等多种平台，它为互联网内容的呈现提供了一种全新的框架和平台，包括免插件的音视频、图像、动画、本地存储以及更多酷炫的功能。通俗地说，H5是一种创建网页的方式，用H5创建的网页以文字、图片、动画、声音等相结合的富媒体出现，页面图文并茂、生动活泼、传达方便、易于推广。

二、学习者分析

本节课的学习对象是八年级的学生，处于这一年龄段的学生，思维活跃，具备一定的理解能力和较强的自学能力。通过前面的学习，学生已熟练使用WPS、Photoshop等软件，也掌握了规划设计主题网站的方法。本节课以iH5软件工具为平台，学习用H5快速制作网页。然而学生从未接触过iH5，对于陌生软件的学习，有些畏难情绪，觉得无从下手。但是在日常生活中，他们经常能接触到各种各样的手机H5网页，如企业宣传、个人简历、邀请函、纪念册等，这些H5网页给大家带来了全新的体验，技术本身带来的新奇感让学生心生向往。

三、学习目标

知识与技能：能列举H5网页的特点；掌握在iH5软件中添加和编辑文字、图片、动画等元素的方法以及设置对象属性的方法，理解舞台、页面、对象之间的层级关系。

过程与方法：通过制作校园文化艺术节邀请函，经历制作H5网页的基本过程。

情感态度及价值观：感悟网页制作并非难事，软件使用有共通之处。

四、教学过程

（一）创设情境，初认H5

以艺载德、以艺促智，一年一度的校园文化艺术节又开始了，同学们踊跃报名，比拼才艺。八年级将举行以“多彩校园，闪亮你我”为主题的汇报演出，充分展示八年级同学的青春活力和精神面貌。

思考：本次演出将要邀请家长参加，你会选择什么样的方式来做出邀请呢？（口头传达、短信、纸质邀请函等）

活动1：体验“校园文化艺术节邀请函H5”，初认H5。

（1）二人一组，一位同学在手机浏览器中打开；另一位同学在电脑浏览器中打开（网址：xxxxxx）。浏览后回答以下问题：

不同平台的浏览效果是否一致？为什么？

这支H5中具有哪些媒体元素？

用户能参与其中吗？

你会用什么方式推广这支H5？

小结：

（1）H5具有跨平台、支持多媒体、可交互、易推广等优势。以上特点使得H5可能成为我们发出邀请的首选。

（2）“校园文化艺术节邀请函H5”为何如此吸引人？观看视频，思考到底什么是H5？

小结：H5是指第5代HTML标记语言，也指用H5语言制作的一切数字产品。通俗地说，H5是一种创建网页的方式。用H5创建的网页图文并茂、生动活泼、传达方便、易于推广。

设计意图：与H5相关的概念性知识抽象、枯燥难懂，如果采用讲授法，学生并不容易理解。因此本节课创设了学生现实生活中的情境，以制作校园文化艺术节邀请函H5为主题，设计了4个问题，每个问题目标指向明确，容易引起学生的共鸣，激发学生的思考并得出结论。通过微视频用通俗易懂的语言帮助学生进一步认识H5，内化知识。

（二）根据需求，规划H5

凡事预则立，不预则废，要制作汇报演出邀请函，首先对每个页面的内容、素材等进行一个简单规划。

活动2：根据需求，选择素材，规划邀请函。

设计意图：学生已经学习过网站的规划，所以容易理解规划的重要性。教师通过搭建“规划表”这个支架，引导学生根据制作校园文化艺术节邀请函的需求，对所要制作的邀请函进行初步的规划，帮助学生理清楚每个页面的内容和所需添加的元素。

（三）知识迁移，制作H5

能够用于开发H5网页的工具很多，今天以iH5软件工具为平台，学习使用H5快速制作网页。

活动3：找“共性”，探“个性”，认识iH5软件。

（1）使用课前申请的账号，登录网址：，进入在线编辑平台。

（2）对比Photoshop界面，认识iH5界面，找出相同之处和不同之处。

小结：相同之处：_______________________（菜单栏、工具面板、编辑区）

不同之处：_______________________（对象树面板）

（3）比较PS中的图层面板和iH5中的对象树面板，思考对象树面板的作用。

小结：对象树面板可以用来管理舞台中的对象，对象树中的层级关系为：舞台→页面→文本、图片等素材，每个页面中的对象上层覆盖下层。

活动4：利用iH5软件，制作邀请函H5。

（1）观看操作指导微视频，自主探究页面的制作，完成以下问题：

设置背景：选中页面1，在属性面板中找到_____________选项，添加背景图片。

添加文字：选中页面1，在工具面板中选择_____________选项。

添加图片：选中页面1，在工具面板中选择_____________选项。

小结：添加文字、图片的一般步骤：选择位置—添加对象。

（2）展示学生作品，师生共同分析存在的问题，寻求解决方式。

问题1：首页、内容页都播放同一素材。

原因分析：素材全部都添加在了舞台之中，其层级关系在内容页和首页的上一级。

问题2：内容页没有显示内容。

原因分析：素材全部都添加在了首页之中，而不是对应的内容页中。

设计意图：迁移是人类认知的一个普遍特征，因为新的学习总是建立在原有学习基础之上。学生原有的知识是Photoshop软件使用，将Photoshop和iH5进行对比，引导学生发现界面组成的“共性”与“个性“，让学生初步认识对象树面板，学会利用对象树面板来管理素材。在制作H5时采用局部“翻转课堂”的形式，通过高效、简短的微视频和几个思考题，引导学生思考探究；在学生遇到问题和困难时，师生共同分析问题，解决问题。给学生“瑞士奶酪式”知识建构时间，使学生从规律的获得到知识的应用有一个过渡和渐进的过程。

（四）自主探究，美化H5

活动5：美化完善邀请函H5。

（1）邀请函中的标题、内容文字等选用什么样的字体、字号合适？如何设置？

（2）如何改变图片大小，修改图片的亮度、对比度等？

（3）如何设置元素的动态效果，使得网页更生动？

小结：

（1）选中文字或图片——属性面板——修改设置。“邀请函”等标题文字字号一般选用大些，宜用饱满的字体，以达到醒目的作用；内容用于提供具体信息，文字字号可以小些。

（2）图片选用要符合主题，色彩和谐。字体颜色与背景要有一定的对比度。（3）选择要添加动态效果的对象——选择动效命令。注意：设置合理、适度的动态效果，可以给观赏者带来较好的视觉体验。

设计意图：对邀请函的美化可分成两个部分：一是对邀请函中的文字、图片进行美化，二是合理设置动态效果。单从技术角度来讲，这些操作是比较简单的，只要学会设置属性面板即可。但是邀请函的美化不是天马行空，随心所欲，还需要一定的艺术欣赏能力。因此首先让学生带着问题思考如何设置文字、图片？设置动效时需要注意的问题？得出一定的结论后，让学生带着构思去美化邀请函，以减少学生操作的盲目性。

（五）作品展示，共析H5

活动6：发布和评价作品。

（1）对于制作好的作品，将其发布到网上，这样其他人就可以通过电脑和手机访问你的作品。请保存当前的网页并发布到网上。

（2）同桌之间用发布的网址或二维码相互访问对方的作品。

（3）根据评价表对同桌的作品进行评价。

（4）根据同伴及老师意见进一步修改作品。

设计意图：学生在制作完成邀请函后，进行保存，发布就可以浏览到自己的成品，极大地提高了学生的学习兴趣。将学生的作品进行展示，师生共同赏析作品，根据评价表进行点评，给出建议，然后进一步完善作品。

（六）知识梳理，展望H5

展示思维导图，梳理本节课内容：

总结利用iH5制作网页的基本过程：

观看视频，结束本课：随着信息技术的高速发展，H5可谓是无处不在。H5可以是各种宣传网页、在线游戏，甚至户外大屏中的互动也是H5。在未来5-内，H5或将会成为移动互联网领域的主宰者。

设计意图：借助思维导图，将关键知识点结构化，清晰形象地呈现出各知识点的脉络关系，有助于学生从整体上把握知识，完成知识的建构。最后观看H5应用视频，了解H5的日常应用，对未来展望，进行情感升华。

网页制作教学设计5

1、教学目标知识与技能：灵活运用添加超链接和在网页中插入表格方法，根据网页内容进行页面布局，完善网页,掌握网页布局的技能和技巧。

过程与方法：培养学生加工信息和应用信息的能力及培养学生思维能力，规划能力、创新能力、及合作能力。

情感与态度：使学生感受中国源远流长的历史文明，并通过网页传递给世界；帮助学生树立良好的信息道德意识；让学生享受成就感，树立自信心。

2、学生分析初中二年级学生感知能力较强,理解能力和抽象思维较弱;学生基本学会使用在网页中插入表格的方法，但分析信息、处理信息和应用信息能力较弱;对教学内容的了解程度较强。

3、内容分析

教学重点：利用表格对网页页面进行布局。

教学难点：怎样合理、美观地设计网页页面布局。

此部分教学内容在整个网页设计知识体系中处于综合处理信息的重要部分。

4、教学策略设计

（1）．教学方法设计

我根据教学主题及其教学目标确定的教学指导思想是以学生为主体，以学生自己的亲身体验展开探究式小组合作学习。本节课采用研究体验式教学法,建构主义模式下的任务驱动式教学法组织教学。首先设计“总任务”，再细分成若干“小任务”，实现教学目标。

（2）．教-学流程和教-学活动的设计思路

整个教学活动，尤其是学习活动，我采用探究式学习法，又称研究性学习，我强调的是学生在教师指导下，根据各自的兴趣、爱好和条件，再结合与自己有相同或相近的兴趣、爱好的同学组成合作伙伴，共同选择西安不同的旅游景点，确定研究课题，借助“表格布局”功能规划七天的旅游行程，独立自主结合小组合作开展研究，进行合理的网页布局设计，达到从中培养创新精神和创造能力及审美能力的一种学习方式，实现“双赢”。建构主义学习理论认为，学习过程不是学习者被动地接受知识，而是积极地建构知识的过程，把学过的网页设计知识综合应用起来，由于建构主义学习活动是以学习者为中心，而且是真实的，并且以完成特定的任务为动力，因而学习者就更具有兴趣和动机，能够鼓励学习者进行批判型思维，能够更易于提供个体的学习风格，展现自己的独特思维，不受现有网页模式的拘束。基于构建主义的探究性学习模式，我的设想是整个教学过程是动态的，学生是学习的主体，教师是学生学习环境的创设者、学习动力的激发者、学习过程的指引者和学生学习的协作者。

（3）．应用信息技术的依据或考虑

信息技术在本次教-学活动有不可替代的功能。利用信息技术中计算机技术进行网页设计，实现教学目标，完成让世界各地的人实现“网上游古都”。在教学中计划通过探究式教学方式，小组合作学习方式和“任务驱动式”教学策略，自主设计网页，发布网页，运用网络使信息技术的这些潜在优势发挥作用并真正促进学生能够结合实际应用，通过自主实践，完成“网上游古都”任务，并同时完成了学习任务，进一步建构了自己的知识体系，并实时地享受到巨大的成就感。

（三）、教与学的过程

1．教与学的过程

活动内容

教师活动

学生活动

设计意图

创设情境

激发兴趣

［创设情境］

“要想了解中国上下五千年文明历史，请到西安来！”近几年，越来越多的外地游客涌向西安。“十一黄金周”即将来临，大家想不想用网页形式向外地游客介绍宣传西安，让更多的人来西安，领略其古老的魅力！我们上节课把利用搜索引擎找到的有关西安的历史文物古迹的文字信息和图片信息整理制作成有关不同景点的网页，但信息是否显得很零散？怎样把景点信息整合规划，让人们先在网上一饱眼福，轻松网上游古都？

设计一个含有指向各旅游景点网页的超链接的主页。

提供信息活条件，激发起学生的兴趣。

［导语］

我们可在主页中制作一个西安旅游景点导航栏，但怎样合理规划各旅游景点，并且使页面布局美观，整洁，分类清晰？

利用“表格”。

为细化任务埋下伏笔;并且激发学生的认知冲突。

［出示课题］

今天我们就围绕“西安七日游”，在主页中利用表格规划设计旅游行程，本节课的课题是《“黄金周”—规划网上西安七日游》

学生明确本节课课题，初步了解任务。

出示课题，介绍总任务。

［分组方法］

根据对各旅游景点的兴趣及当初搜索信息的分工情况及本节课任务分工，四人一小组。

学生进行分组

为细化任务做准备

出示任务

明确分工

［出示总任务］

每个组围绕主题，利用表格规划设计旅游行程，并建立好超链接，利用主页展示出来。

学生明确任务

明确总任务

［作品形式及分工参考］

形式：创建并完善主页，并展示整个网站。

分工参考：

内容版式规划

整理七个旅游景点网页

超链接的建立与维护

作品演示解说

学生明确汇报形式，分工参考。

使学生明确各自任务后，通过研究，探讨，操作，通过电脑媒体来完成任务。

活动内容

教师活动

学生活动

设计意图

出示任务

明确分工

[角色分工]

学生自由分组后,共同研究选组长，组长进行给组员分配任务。

学生共同研究选组长,并协调分配好任务.

锻炼学生自主协调分工能力。

［出示作品评价标准］

教师出示作品评价标准：

作品内容：设计含有七个链接网页的主页，资料丰富，内容准确。

技术表现：页面布局设计合理，颜色搭配和谐，主题突出，作品演示运行正常，操作熟练。

创新特色：作品布局规划有独特之处，有新意。

提示学生有三条帮助热线：

1、组长2、邻座学习伙伴3、教师4、自学课件

学生明确要求。

培养学生的创新能力，规划能力，思维能力和合作能力。

学生研究探索合作交流创作作品

［创作作品］

播放舒缓音乐，为学生营造自由和谐气氛。

（提示学生利用网上邻居把各组员的作品组合在一起，共同完成此任务。）

学生根据角色分工，按小组形式开始完善网站。

学生体会了超链接的作用，练习了超链接的使用，理解了表格强大的页面布局功能；培养学生处理信息和应用信息的能力；通过学生间交流合作，老师及时点拨与指导，培养学生发现问题和解决问题的能力。

［展示作品］

下面请各组派代表，到教师机前展示以下你们的旅游行程。其他同学观察后，可提意见或建议。

由小组代表展示组内作品，并详细说明旅游景点规划的呈现形式，内容选择及整体构思。

锻炼学生口语表达能力和分析说明问题能力。

合作成功展示作品成果汇报交流探讨

［交流探讨］

教师引导学生探讨页面布局的方法和技巧；谈看完作品后，对其改进意见；进行组间互评和组内自评。

评出“最受欢迎奖”（即如果此网站上传到网上，点击率最高），“最具创意奖”“最佳布局奖”作品。

学生间相互交流探讨。

培养学生合作交流能力。

［教师点评及检测］

教师从页面布局，整体规划合理性，创意等几方面进行点评。

学生思考，怎样完善作品。

教师鼓励学生发展创新思维，页面布局规划能力，逻辑思维能力及合作能力。

教师或其他同学提问页面布局的方法。

学生代表演示

及时检测学生对表格的掌握情况。

你受到的最大启示和收到的最大收获？成功经验和失败教训？

学生回答

巩固知识，培养情感

[完成旅游规划，培养情感]

同学们已熟练掌握表格的使用方法，并且加工和应用信息的能力增强。

悠久的历史积淀和丰富的人文资源，使西安居中国六大古都之首，是世界四大文明古都之一，著名的旅游中心城市。希望你们热爱中国博大精深的历史，感受西安古老的魅力！

学生感悟。

全课总结，培养道德情感。

全课总结知识延伸

［达到目标，知识延伸］

网站制作好了，怎样让世界各地的人都看到你们的网站呢？

想当我们的故乡—大庆的小导游吗？赶快制作一个“铁人故乡—大庆”的网站吧！

学生思考。

学生课后实践。

为激发下一节课内容（上传主页）的兴趣奠定基础。

让学生可把本课内容应用到实际生活中去。

培养学生自发探究能力。

2．关键环节提炼

利用信息技术创设情境，播放一段自拍的录像，内容大体是：一位外国友人，想要来中国四大古都之一“西安”旅游，但想要自助游，想借助因特网，先在网上了解一下西安，并参考一下旅游行程。通过此录像激发学生兴趣并利用信息技术呈现问题，使学生产生认知冲突，培养学生发现问题、分析问题、解决问题的能力。我通过学生利用信息技术完成此项任务，促进学生对基础知识、基本技能的学习。我利用信息技术，尤其是网络提供的有关“西安”丰富的旅游景点介绍资源，帮助和拓展学生的学习。让学生借助信息技术手段开展探索、总结并进行创作。我利用信息技术展示学生自评，学生互评，教师评价的评价表，为学生的学习提供评价、反馈和矫正。我利用网页自学课件和网络教室教学广播系统支持师生间、生生间的交流对话。

3.教学反思

本节课主题明确、集中，让学生分成小组，合作探究学习，给出特定的总任务，有利于学习效果评判的可比较性，也便于学生之间的广泛交流和良性竞争。通过利用信息技术规划规划网上西安七日游，对西安七个主要景点的介绍，让世界了解西安，每个学生在共同完成“网上游古都”网站作品后，让每个学生都有完成任务和宣传中国源远流长的文明历史的成就感，并感到自豪。

本节课，在小组合作学习过程中，学生之间互学互教，彼此交流探讨，经历了提出问题、分析问题和解决问题过程，每个学生都承担一定学习任务，防止滥竽充数，促进了学生的参与程度、认知深度，高质量地实现了课程的目标，增强学生的责任感。但个别学生没有认识到合作学习的重要意义，自主探究能力较弱，容易丧失信心。

教学实际实施过程，有学生提出：我对中国的少数民族文化感兴趣，能否制作一个宣传中国五十六个少数民族文化的特色网站？于是我了解到学生对中国的不同文化感兴趣，可在课外活动小组完成此任务或作为课外自主探究性学习课题来探究。

本节课让学生掌握了“表格”的妙用，还提高了加工信息和应用信息的能力，而且使学生感悟到了中国上下五千年的博大精深，对祖国更加热爱。

（四）、教学评析：

在新课程标准的理念中，明确提出要关注全体学生，建设有特色的信息技术课程。在教材因篇幅的限制，提供给学生感知的背景材料极其有限，“信息”且都处于“静止、储存”状态，不利于学生的感知和抽象概括。因此，允许教师在不改变教材内容、体系、结构的前提下，经教学法的加工，营造引入新课的“情境问题”的氛围。学生在积极的参与、体验、研究并在已有知识经验的支持下，自主能动地探索，实现知识的再创造。

教学活动在面向全体的同时更注重学生情感的`交流协作意识与因材施教。更注重学生个性培养和创新智能的开发。

学生自主性学习，需要有一个适应的过程，开始阶段，布置任务要明确具体。

学生之间的交流和帮助比较少，自主学习的能力还要不断提高等。

附：学生学习过程及典型成果

另附：小组成员分工表

第________组组长________作品题目______________

小组成员

主要负责工作

网页制作教学设计6

一、教学目标：

1、知识与技能：

（1）、了解框架结构网页的概念及在网页中的作用，了解它与表格网页的区别。

（2）、掌握框架结构网页的建立、框架结构的拆分、框架的删除等。

（3）、掌握框架中页面设置及保存的方法，如设置初始网页按钮、新建网页按钮等。

2、过程与方法：

（1）、能够区分框架结构属性设置与网页属性设置的不同点。

（2）、通过框架结构网页设计，使学生对网页的整体结构有更进一步的认识。

3、情感态度与价值观：

（1）、能够将表格与框架结构网页结合使用，在创作中体验乐趣。

（2）、培养学生网页设计的审美意识、创新意识。

二、教学重点难点：

1、教学重点：

（1）、框架网页的作用和功能，框架的建立与属性设置。

（2）、框架中各个页面之间的关联，每个框中页面的设置方法。

（3）、框架网页的保存方法。

2、教学难点：

（1）、框架结构网页中框架属性与页面属性的设置方法。

（2）、理解框架结构的多页面存储方法及各页面之间的关联。

三、教学过程：

1、创设情境、导入新课

（1）、教师展示一组表格制作的网页，引导学生找出它们的共同特点。并提问如何快捷地制作这种网页（学生回答：使用复制、粘贴快捷地制作）。

（2）、教师又提问：有没有更好的方法呢？相同的区域我们能否只做一遍呢？从而导入新课——框架网页的制作。

设计意图：通过对比、比较，引导学生思考，激发学生学习的乐趣。

2、任务驱动、自主学习

（1）、教师展示一个框架网页，引导学生理解框架网页的概念。

（2）、出示任务一：框架网页的新建与保存。教师要求学生先阅读教材中的操作步骤，再尝试完成书本第227页的实践学习。

（3）、教师讲解框架结构中的每个框都是一个独立的选项文件，即网页文件，因此当框架确定之后，需要为每个框分别指定其网页文件的来源，可以通过每个框中的“新建网页”按钮和“设置初始网页”按钮进行选择。

（4）、学生理解框架网页的概念，通过阅读教材中的内容，自学新建框架网页的操作，初步了解“新建网页”和“设置初始网页”两个按钮的不同，并认真聆听教师的讲解，注意观察，按要求模仿操作。

（5）、出示任务二：相关页面的制作与设置。教师要求学生先阅读教材中的操作步骤，再尝试完成书本第228、229页的实践学习。

（6）、学生制作相关页面，同时也是对前面所学内容的复习和回顾。教师反馈学生的操作情况，开展评比活动，对表现好的学生给与表扬。

（7）、出示任务三：框架网页属性的设置。学生自主探究学习，有问题可向教师寻求帮助。教师基础扎实的同学完成任务后可进行拓展学习。

（8）、教师请学生示范操作，并说明自己设置的方法和原因。同时鼓励做的比较好的学生。

设计意图：培养学生的自主学习能力，对于课堂教学难点，学生在教师的讲解后模仿操作，有效突破难点。

3、展示作品、课堂小结

（1）、教师给出一些常见的框架结构应用界面，如Web邮箱页面等，引导学生总结本课内容，并让学生分组，推进一些优秀作品在全班展示。

（2）、教师点评，并鼓励完成作品比较好的学生。

设计意图：拓展学生的视野，使学生了解框架的应用方法。展示优秀作品鼓励学生，激发学生的创作欲望。

四、教学反思：

1、本节课是在学习完简单网页、表格布局网页、交互式网页的基础上，进一步页的设计方法。由于学生已经具备了一定的网页设计基础知识与技能，所以教师可以根据学生的实际情况，采用更灵活

的教学方法。教师可以简单介绍框架结构网页的功能及框架的建立与编辑方法，以及框架属性设置与网页属性设置的方法与区别。然后由学生根据教师提供的学案及演示动画，完成框架网页设计任务。

网页制作教学设计7

教学目标：

1、知识与技能：

（1）理解框架的概念及用途。

（2）掌握框架网页的新建、制作、编辑与保存，了解框架的拆分方法。

（3）初步掌握将框架结构与表格布局结合使用来制作网页。

2、过程与方法：

（1）通过对表格网页的分析，体验新知识（框架结构网页）的优点，从而促进其学习新知识。

（2）理解框架的概念与组成，学会分析网站的结构。

3、情感态度与价值观：

（1）通过以“人与动物”为主题的框架结构网页制作活动，了解更多有关人与动物和谐相处的知识，通过故事趣闻，增强学生关注动物的兴趣和意识。

（2）能够将表格与框架结构网页结合使用，在创作中体验乐趣。

教学重、难点：

1、重点：框架的概念、用途， 创建、编辑与保存框架网页的方法。

2、难点：框架的拆分。

教学方法：

对比教学法、探究学习法、模仿学习法。

教学准备：

整理、归类相关素材，并按要求摆放。

教学过程：

1、引入

老师展示一组利用表格制作的网页，要求学生仔细观察，找出它们的一个共同特点（学生答：网页上方和左侧内容都是相同的，仅右下部分内容不一样），并提问如何快捷地制作这种网页？（学生答：使用复制粘贴快捷地制作）

尽管复制、粘贴能为我们节省时间，但有没有更好的方法呢？相同的区域我们能否只做一遍呢？今天我们要学习的内容——框架网页制作，就能给我们带来更多便捷。（让学生明确框架网页使用的场合）

2、新授

（1）框架网页概念

由以上例子入手，再展示一个框架网页，教师引导学生理解框架网页的概念

（2）框架网页的新建与保存

教师要求学生先阅读教材中的操作步骤，再尝试进行探究操作。

任务1 创建“横幅和目录”结构的框架网页，新建top和left页面，并学会保存。

框架结构中的每个框都是一个独立的选项文件，即网页文件，因此当框架确定之后，需要为每个框分别指定其网页文件的来源，可以通过每个框中的“新建网页”按钮和“设置初始网页”按钮进行选择。在top和left页面中，单击“保存”按钮，随即开始保存。

此处为教学难点，可先由框架的概念入手，再针对保存页面中的蓝色部分，教师进行讲解，教会学生注意观察。

学生要理解框架网页的概念，通过阅读教材中的内容，自学新建框架网页的操作，初步了解“新建网页”和“设置初始网页”两个按钮的不同，并认真聆听教师的讲解，注意观察，按要求模仿操作。

设计意图：培养学生自主

学习能力，课堂教学难点在教师的讲解后模仿操作，有效突破难点。

（3）相关页面的制作与设置

框架网页中相关页面的制作，需要结合表格来布局，插入文字、图片和交互式按钮。

任务2 top和left页面的制作。

要求：

○1top页面内插入1行2列的表格，左边单元格插入logo图片，右边单元格插入banner图片。

○2 left页面内插入5行1列的表格，在每个单元格内依次插入交互式按钮（共4个），交互式按钮文字为展示介绍的相关内容概括，在第5个单元格内插入一个邮箱指示的图片。

○3调整表格边框的粗细。

○4为main区域设置初始页面。（该网页由教师提供现成的）

学生制作相关页面，同时也是对前面所学内容的复习和回顾。老师反馈学生的操作情况，开展比一比、评一评活动，对表现好的学生给予表扬。

（4）框架网页属性的设置

创建好框架网页后，可以根据实际需要改变框架的属性。

任务3 调整框架的大小、设置框架的边框、设置框架窗口中的滚动条等。

提高任务：框架的拆分。

学生自主探究学习，可向老师寻求帮助。完成设置后请同学示范操作，并说明自己设置的方法和原因。操作基础扎实的同学完成任务后可进行扩展学习。

3、总结与评价

老师可以给出一些常见的框架结构应用界面，如Web邮箱页面等，引导学生总结本课内容，梳理课堂知识，并让学生分组，推荐一些优秀作品进行全班展示。

设计意图：开拓学生的视野，使学生了解框架的应用，教会学生要善于总结，要学会学习的方法。

第五篇：第8课 美化网页教学设计(课堂语言)

《第8课

美化网页》教学设计

营前中心小学

吴丽琴

【教学内容分析】

这节课是闽教版《信息技术》小学五年级下册第8课的内容，是在前一节课学生学会创建站点和制作简单的文字网页基础上，学习在网页中添加图片、编辑加工图片、设置网页背景，从而完成对网页的修饰、美化任务，使网站有与众不同的风格，提高自身艺术修养。【教学对象分析】

从五年级学生的认知特点来看，他们爱问好动、求知欲强、想象力丰富，对实际操作活动有着浓厚的兴趣，对直观事物感知较强，正处在形象思维向抽象思维逐步过渡的阶段。因此，在学习过程中，应鼓励学生自己观察，亲自动手操作，进行学生讨论和交流，师生共同归纳总结，体验学习。

在讲此课之前，学生已经学过如何制作一个简单的网页，并且添加图片的技能学生已经在Word文字处理软件中学习过。这为学生美化网页作好了充分准备。【教学目标】

1、知识与能力

（1）了解网站的整体风格。

（2）掌握在网页中添加图片、编辑加工图片的方法。（3）会设置网页背景。

2、过程与方法 通过学生自主学习过程中，掌握美化网页的方法。

3、情感目标

（1）通过师生协作和学生相互配合，培养学生合作团结的精神。（2）培养学生热爱美的情感，激发学生表现美的欲望，使学生的审美能力得到提高。【教学重、难点】 1.教学重点

插入图片、设置图片属性、编辑图片、设置网页背景。2.教学难点

网站的整体风格、设置图片属性、编辑图片 【教学准备】 多媒体设备、课件、【教学过程】

一、导课

1、师：今天老师接到学校的一个重要通知，帮助学校招聘小小编辑员（课件出示通知内容），参与校园网站的建设，同学们想不想去试一试呢？同学们真是热情高涨，但是要成为小小编辑员可不是一件简单的事，必须通过重重的挑战，你们准备好了吗？那就让我们马上进入基础小测验，看看大家是否具有火眼金睛，能够“慧眼识美”。

2、师：请同学们认真观看以下几张网页，以同桌为小组进行讨论，优秀的网页具备哪些条件呢？

课件出示三坊七巷、土楼等网站实例，教师参与讨论并提示学生可以从网页的色彩、主题、布局等入手。（30秒）

3、指答，教师引导。

师：通过同学们的回答，我们可以总结出一个优秀的网页需要有，色彩合理，主题鲜明，版面协调，图文并茂… …

4、师：通过上节课的学习，同学们还记得编辑网页需要用到什么软件吗？请同学们跟着老师一起来回顾一下如何打开Frontpage。

教师操作，学生口述。

5、师：老师这里有一张网页，根据优秀网页具有的条件，你有什么想法呢？

展示 “洞江小学学校简介”的网页，指答。

6、师引入课题：是的，今天就让我们一起来《美化网页》。马上迎接我们成为小小编辑员的第一个挑战——为网页插入图片，让网页图文并茂。

二、新课

挑战一：“梳妆打扮” ——给网页添加图片，让网页图文并茂。

1、师：还记得我们曾经学过哪些软件也有插入图片吗？软件的操作总是想通的，在Frontpage中插入图片的方式与word非常相似。

指答，同时通过课件截图引导学生复习Word插入图片的方法。

2、师：请同学们打开学习包里的这张网页，为网页梳妆打扮，插入学习包挑战一里的图片，可以参考课本P44—45页或者挑战一里的锦囊1。看看哪个小组的同学们完成得最快。（3分钟）

师巡视指导。

3、师：请已经完成的同学举手示意老师，看来第*小组的同学完成得最快呀！现在老师想邀请同学们指导老师完成这个挑战。

教师做快速演示，并且总结操作注意点——光标的位置。挑战二：“修剪边幅”——对添加的图片进行编辑，协调版面结构。

4、师：现在图片插入好了，但是这画面协调美观吗？我们需要修剪边幅——对图片进行调整，总是有更大的挑战等待着我们，请同学们参考课本P45—47或者挑战二里的锦囊2，设置图片的属性，对图片进行编辑。（5分钟）

同学之间可相互讨论，师巡视指导。邀请学生上台演示设置图片属性，师转述。

5、师：已经有小伙们为我们演示过了，相信同学们对这个操作有更加清晰的认识，请还未完成的同学继续完成，已经完成的同学可以尝试继续美化网页。（5分钟）

师巡视指导，展示学生作品。

6、师：看看这位同学的作品，大家有发现图片新的变化吗？那么这位同学是如何达到这样的效果呢？老师邀请这位同学上台为我们演示。

学生演示，师转述。

挑战三：“穿花衣”——给网页添加背景图片。

7、师：再来看看这位同学的作品，又有什么新的变化呢？这位同学真棒，这是老师还没有布置的终极目标，看来终极目标也没有难住他。那有没有难住你呢？请同学们给网页穿上花衣裳，添加背景图片，可以参看挑战三里的锦囊3，完成挑战三。（5分钟）

学生演示，师转述。

三、小结

1、师：同学们不断突破重重的挑战，老师发现好多合格的小小编辑员，但是你觉得谁是今天最优秀的小小编辑员呢？老师想邀请这几位同学加入编辑员的队伍，你们愿意吗？

2、师：通过这节课的学习，你有什么收获？（指答）

3、师小结：老师希望同学们能够善于打开思维，丰富想法，养成自主学习的习惯，勇于动手实践操作。

板书：

8、美化网页

1、插入图片（先定位光标）

2、设置图片属性、编辑图片

3、设置网页背景