网页设计教学（共16篇）由网友“重生麻娜姬”投稿提供，以下是小编为大家汇总后的网页设计教学，希望对大家有所帮助。
篇1：网页设计教学毕业论文
【摘要】
本文以就业信息管理平台为例，研究网页设计中表格与层的应用，提出表格与层可以让网页的布局整齐美观，将网页中的文字、图片、动画等众多元素有条理地统一组织起来。虽然表格的使用整体上是好的，但在一些细节的美化上表格的设计就难以做到，这就要采用层来搭配表格的设计解决相应的排版美化问题。
【关键词】网页设计；表格；层；就业信息管理平台
随着信息技术的日新月异，网页设计的重要性也逐渐凸显，如何快速、方便地设计出相关的网页、网站就显得非常重要。在网页设计与制作的教学过程中，如何让学生快速地掌握网页设计的一些排版技巧是非常有必要的。因此，笔者结合网页设计与制作教学中的一些体会，并通过就业信息管理平台的设计案例，探索网页设计中表格与ApDiv（层）的排版设计技巧。
一、Dreamweavercs简介
Dreamweavercs是由Adobe公司推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。目前，最新的版本为DreamweaverCC，网页设计软件的功能强大。对网页的浏览已经是我们生活中的不可分割的一部分，网页作为网络信息传播的主要载体，其设计也为大家所关注。网页设计软件的种类有很多，但最出名、最专业的网页设计工具，非Dreamweaver莫属。它是著名的“所见即所得”的可视化网站开发工具，目前的网页设计几乎都采用Dreamweaver来设计。Dreamweaver不仅提供了强大的网页编辑功能，而且还提供了网页的上传工具。利用FTP进行大文件的传输，节省了文件的传输时间，它是一个集网页创作和文件传输管理等多功能的设计工具。
二、表格与层在网页设计中的使用
在就业信息管理平台的设计中，采用程序设计，可以很好地提高网页的下载与浏览速度，但对于初学者来说，程序设计是一件头痛的事。因此，如何利用表格与层来进行设计，就非常重要。网页设计中的排版有很多种方法，其中表格结合层的使用排版是最基本也是最有效的方法。表格与层，对职业院校的学生来说，非常容易学，而且使用也非常方便，做出来的网页也非常的漂亮，因此，在网页设计中表格与层是非常重要的。
（一）网页设计中表格的使用。在网页设计中，利用表格的排版，它的整体效果好是毋庸置疑的，表格在网页中的位置可以通过表格属性来进行设置。在Dreamweaver中，页面内容的设计、排版主要是通过表格来完成。通过表格的相互嵌套、合并与拆分，可以将自己构思好的页面完整地表现出来。表格在网页中的重要作用，主要是它在不同的显示上，可以根据网页的大小、显示器的大小进行相应的变化。并始终都处于浏览的相对位置，完整地把内容显示出来，具有很好的兼容性。因此，使用表格排版比较规范，整体性强，可以让网页的设计显得非常的整齐，达到想要的效果。但由于表格的整体性，在一些细微的地方以及操作上还不够细化，在内容的设计表现上还不够丰富。
（二）网页设计中层的使用。层的使用在网页设计中也是非常的普遍，由于它的定位比较精确，又是一种可视化操作元素，它的使用让网页增加了丰富的表现。层与表格的使用基本差不多，但在位置的定位上要比表格方便很多，这也是层的主要优点。在网页设计中，文本、图像、表格等元素只能固定其位置，不能相互叠加。如果要想使多个元素进行叠加或者定位要精确，在这种情况下，就需要使用层来进行设置。层具有很多表格所不具备的特点，如层的重叠、移动、隐藏等一些功能，层还可以添加一些动作行为，让层的内容表现更加丰富，也正是基于这一点，层成了网页设计中一个重要的元素。层的这些特点有助于设计思维不受局限，从而在设计上有很大的空间。由于它是一种流元素，层在具有上述优点的同时，也存在着一些不可避免的缺陷，例如层在网页中的定位不会随着浏览器大小的变化而变化，层的位置是固定不动的，在这样的情况下就失去了层在网页设计布局中的意义。
（三）就业信息管理平台中表格与层的结合使用。表格与层的结合使用才能更好地体现出它们的优势，层也才能更好地体现出它在网页设计中的强大功能。在网页设计中，如何做到表格跟层的统一、层与表格融为一个整体，这就要用到层在表格中的插入操作，以及层的嵌套使用，下面以就业信息管理平台中制作下拉菜单为例来设计。首先，在网页中插入一个三行一列的表格，在表格的第一行插入一张图片，作为网页设计的Logo，而在第二行中插入一个嵌套的一行五列的表格作为网页的导航条，表格的第三行作为主要内容的设计与排版。
三、表格与层的正确应用表格与层
在网页设计中虽然有强大的功能，但在使用的过程中也不能太随意，如果随意地使用就会增加浏览器的负担，浏览下载的速度就会变慢，影响网页的浏览。
（一）表格布局出现的问题。在网页设计中，利用表格排版的时候，不能使用一个大大的表格铺满整个页面，这样不利于浏览器的打开。浏览器打开一个表格，是要等一个表格全部下载完成，这样就需要很长的时间来打开这个网页。在表格的嵌套中，也不能无限制地嵌套下去，一般表格的嵌套，应该控制在最多三层表格，如果嵌套的表格太多，打开时也会消耗大量的资源，不利于网页的打开。有数据统计，一般浏览者打开网页的等待时间为7秒以内。如何解决这个问题，主要采用拆分表格的方法，将一个大的表格拆分成几个小的表格，并要尽可能地避免表格的层层嵌套。
（二）层布局出现的偏差。在网页的设计中，层的单独使用没有多大的意义，因为层是流元素，不会随着网页浏览器的变化而变化，它的位置是固定的，不会产生移动。虽然有时候，我们在利用表格与层排版的时候，看起来很整齐，但一预览就完全错位了，根本不是想要的效果。如何才能使层与页面中的表格一样，能够随浏览器的变化而产生相对位置上的变化，这就需要先使用表格对整个网页的整体进行规划，然后添加一个层到表格中的一个单元格中，作为一个父层。操作的方法为：菜单栏中的插入―布局对象―ApDiv，插入后，这个层的位置左、上必须为空，没有任何内容。然后，其他的子层就通过这个父层进行嵌套，在这里必须强调的是，父层必须通过菜单栏的插入，不能通过用鼠标画出来的方式操作。采用这种方法设置层后，无论浏览器的窗口大小如何变化，它都会跟着变化，体现了与表格成为一个整体，在浏览时就不会产生位置上的移动，因此，层只有结合表格的使用才能更好地丰富网页内容。
总之，在网页设计中，表格与层是非常重要的元素，但在布局设计中，只有把表格与层结合使用，才能让网页的布局精美与丰富。网页中的内容虽然很重要，但网页中的设计与布局才是最重要的。因此，通过合理的布局设置，特别是主页设计要整齐美观，才可能更好地吸引读者。因此，在平时的网页设计中，要多看一些优秀网站的排版设计，只有这样，才能更好地提高自己的网页设计能力。
【参考文献】
［1］俞燕丹．项目教学法在《网页设计与制作》课程中的实践研究［J］．新课程研究（中旬刊），（10）
［2］韩媛媛．浅谈Dreamweaver在网页设计中的应用［J］．信息与电脑，（7）
［3］周金容．网页制作过程与技巧［J］．软件导刊，2016（15）
[网页设计教学毕业论文]
篇2：网页设计教学反思
本课的教学目标是掌握使用FrontPage制作网页的基本方法；重点是掌握在网页中插入文字和图片的方法；难点在于插入表格规划网页的结构。
课堂以自主探究的模式展开，同学们在以往的学习中已掌握了在Word中插入表格、图片等方法，在FrontPage中他们很顺利地完成了教材呈现的目标。基本掌握了单张网页的制作方法。
接下来就是突破难点的训练。问题集中到如何插入一个布局表格来实现规划好的结构。而教材上完全没有提示学生探究FrontPage “表格”与Word “表格” 功能的异同。少数同学开始试着插入适合自己网页结构的框架表格，而大部分的同学则完全没有考虑结构问题，做起直接的搬移，将FrontPage当成Word来用。直到出现无法将图片，文字放置到设想位置时，才意识到教材P20中“FrontPage通常用表格来安排网页中各种内容（文章、图形等）的版面位置。”这问话的含义是否明确。急着寻求解决的办法。我便让哪些意识到要先插入适当结构框架表的学生来说说他们的想法。并及时出示与学生思维一致的演示片，将探究FrontPage “表格”功能的提示呈现给他们。同时利用极域教室的功能，向全体同学展示同伴的探究结果，让学生不同的思绪方式及智慧产生碰撞，相互启示，顺利突破教学难点。
看到同学们找到解决问题的方法后，抑制不住的兴奋与喜悦，也让我产生了如下的思考：这节课，反映出大多数学生的自主学习能力较弱，而这与学生的学习体验是分不开的。自我从事教育工作，观摩学习的课，几乎整节课直到最后练习才会有要求学生打开课本的时候。有的甚至根本一节课不需要学生打开课本。所有知识都在老师的板书或演示文稿中。这或许是大班教学为确保进度和质量的无奈吧。多年来，我一直在思考课本对于学生的作用何在。书籍是人类智慧的结晶，如果学生没能学会自己从书籍中获取知识的方法，训练出举一反三的能力，对于他们的终身学习应该不能不说是缺失吧。
教师的指导是灌输或诱导，也应该成为教师备课设计时需仔细考量的要点。稍有欠缺，就会陷入灌输的泥沼。一定要对学生情况进行充分的分析，预计到课堂将会出现的情景，找准切入点，呈现适当的提示和点拨，让他们体验到只有积极自主探究和吸纳同伴智慧才能成就自己智力开发和知识积累。成为一名会学习的学生。
篇3：网页设计教学反思
今天上午，我在高二（1）班上了一节公开课，上课的内容是《体验网站规划与设计》。整个教学过程以师生访问分析网站为主线，采取分组讨论、小组活动进行。教学中以任务驱动、自主学习，交流学习以及引领展示的模式，将规划过程分解为几个任务，根据所学知识，完成对网站规划选题、域名、栏目及艺术风格的规划与设计进行学习，并将各小组任务完成的情况以学案—《网站规划与设计方案》的形式呈现出来。通过展示学生设计方案，对学生成果给予评价与肯定，激发学生进一步学习的兴趣，培养学生主动思考、积极参加团结协作。
成功之处，本节课教学环节完整，对三维目标把握较好，同时认真的对学情进行了分析。本节课，对学高二火箭班的学生，我注重了学生发散性思维、语言表达能力、逻辑推理思维的培养，同时引导学生学会鉴赏、学生聆听、学会尊重，学生在较短的时间内能够很好的完成教学各环节的实践，最终形成了完成的方案，且能很好的陈述。
不足之处，本节课，整个教学过程都是需要网络支撑，由于网络突然出现问题，而心中又想达到理想的课堂，希望给学生一个完整的教学过程，导致课堂的暂时中断，而此后压缩了学生讨论和展示成果的一些时间，后面的教学时间和节奏略显苍促，课堂小节也不是很到位。
经验总结：在教学过程中，我也考虑到网络和电的问题，但是心向往对课堂存理想化状态，实际上不然，不想发现的事终究发生了，以此，不管是哪种级别的公开课，都要着两种备案才可，以免出现课堂教学事故而让自己陷入囧境。
篇4：网页设计教学反思
本课主要是让学生在Frontpage中使用页面框架来制作一个网页。利用Frontpage制作网页，这部分内容关于操作技能方面对于七年级的学生来说难度并不算大，在学习过word的基础上，大部分学生能够利用知识迁移比较快的掌握制作网页的一般方法。
课一开始，我就让学生了解使用页面框架制作网页的优点，从而激发学生学习的兴趣。在前面经过Frontpage几节课的学习后，大部分学生已经掌握了用表格制作网站的一般步骤，但是对于框架网页学生了解的不多，如果单纯的讲解框架网页概念的话，学生难以理解，因此通过对学生经常浏览的网站的介绍，让学生对框架网页产生一个比较感性的认识，有通过我的操作，让学生感受到框架网页较普通网页的优势。于是我引导学生根据内容选择合适的框架页面，由于所选的内容是“中国四大名著”和“欧洲四大名著”，选择“垂直拆分”的框架网页来得更合适。
由于时间关系，我在课前已经帮学生准备好了关于“中国四大名著”和“欧洲四大名著”的相关图片和资料。学生在选择好合适的框架页面后就可以开始制作了。制作一个完整的网页，内容是比较多的，因此学生在进行网页制作时，可以按老师提供的WORD提示来进行制作。当然学生也可以自行选择制作的方法，让学生可以发挥自己的想象，制作出个性化的网页。因为本节课内容的知识点比较多，制作网页的过程中要用到插入滚动字幕，制作超链接等内容，所以根据这一实际情况，我提供了一些小提示来供学生参考，这种形式的帮助达到了很好的教学效果。同时采取小组合作的方式来完成任务，能显著提高课堂的效率。
保存网页是最重要的一个步骤，一部分学生保存后发现，有的内容都是无法显示。因为框架网页的保存和其他普通网页的保存是不同的，所以我在一开始就让学生感受这一不同点，起到了很好的预防作用，只有很少的学生保存时发生错误。在这个任务中，除了让学生充分了解框架网页保存的特殊性，也要让学生知道，在新建框架网页时的一般方法。
通过本课的学习，班上的学生基本上掌握了使用页面框架制作网页的一般方法。
篇5：网页设计教学反思
“怎样才能调动学生的积极性与兴趣？”，“如何才能在轻松和有趣的教学环境中到达所设定的教学目标？”……，在每次上课前，我都在问自己。在信息技术教学中，我觉得最重要的一点，就是培养学生怎样学“信息技术”的“习惯”！
“操作”是信息技术教学的核心，“创新”是信息技术教学的目标，“协作”是信息技术教学的要求，“探究”是信息技术教学的方法。我紧紧围绕这四个方面去组织教学内容，培养学生各种良好的学习习惯，达到教学目的。
通过认真学习上课的内容，找出重点，难点以及学生难记，易忘，易错的步骤和操作，然后，以上面所提到的`“四点”来设计一系列的教学任务，把本节课所要传授的知识点，能力，思想，素质融入到这一个个小任务中去，争取让学生在完成这些有趣的任务的同时，学到了该学的东西。教学内容可以设计成下面五个小任务：
1：欣赏一些优秀的班级主页。（师生一起评析，讲解其中的一些技巧）
2：查找自己喜欢的网页素材。（教师已在学生机准备好各种素材，让学生自己寻找自己喜欢的素材，培养其“定位感”。）
3：班级主页设计。（允许学生之间交流）
4：小组评价。（每小组推荐一名最好的作品，然后，全班一起评价。强调协作，团结，包容，肯定他人成绩的精神）每个任务都强调培养学生学习信息技术的良好习惯，同时层层深入，直至达到目的。
首先，让学生欣赏一些优秀的班级主页，当那些精美，富有创意，图、文、声并茂的网页呈现在学生面前时，他们都“哇”的一声，学习兴趣马上激发出来，课堂氛围也活跃起来了。这时，老师再顺势引导学生如何欣赏，他们各自有什么特点，如果是你自己来设计，该怎样做等等。接下来，就安排学生自己去查找喜欢的网页素材，为下一任务做准备，同时培养学生的“探究”精神和“定位素材”的能力。而在“网页设计”任务时，允许学生交流，相互帮助，老师对有困难的学生进行个别技术上的辅导，尽量让学生发挥自己的想象力去创造出富有个人特色，与众不同的网页来。最后一个任务也非常重要，老师事先给每位学生发一张“网页评价表”，让他们对小组推荐出来的作品进行评价。引导他们形成正确的审美观，以及肯定他人劳动成果的精神，提高他们的综合素质。
篇6：网页设计教学心得体会
网页设计教学心得体会
通过一个学期的学习和课堂讲授，要我体会到要做好一个网页不容易，当然要把这门课程讲好更不容易。首先，需要足够的耐心去了解学生的学习情况；其次，老师要有深厚的功力，即在网页制作领域要能深入市场需求把握市场动向以此来决定教学方向；最后，切合实际的讲学，深入浅出的教学模式能让学生更能把握知识，并能熟练运用。总而言之，要掌握网页设计的基础知识并且成为一名网页设计师也是一个重大挑战！
分析现在的网页制作流程，基本上可以分为两大模块：前台美工和编写网站后台。针对前台美工来说，更注重的是学生的设计理念，颜色的搭配，整体的规划，以及增色的动画效果，因此要求学生有一定的艺术欣赏能力和艺术创作意识，但是针对计算机操作来说，工具的运用相对简单。因此我们在教学过程中，学生愿意钻研，也愿意学习，但是在短短的一个多月的时间内学习软件的运用况且不易，更如何谈及艺术情操的陶冶！在学生的学习过程中也出现意犹未尽的现象，像是没有学够，学的不够尽兴，特备是对于动画爱好者来说，仅仅入门对于他们来说还远远不够。而针对另外一个模块，更适合计算机专业的学生，也就是编
写网站后台，但是相对来说知识稍微枯燥，且要求学生动脑思考，有一定的逻辑思维能力和进取精神。当然也有很多学生对这个很感兴趣，热爱编程，热爱程序的学习，所以学习起来也得心应手，屡试不爽！
因此我个人认为，对于我们学生来说关键是要精于一门，精于一项，现实社会中也很缺乏所谓的专业精英。网站的制作通常都是细化分工，团队合作，共同努力实现网站的创建，所以我也鼓励学生能通于某项，深入学习，正所谓“深挖井，少挖坑”。
老师给与学生合理的引导，更要加强自身的素质修养，提高自己的知识水准。
在整个教学过程中，我自己也要检讨自己，针对网页设计来说，我仅仅是带领学生入门，没有能够让学生的学习兴趣和自身的潜力完全释放出来。我从来都是相信我的学生是最聪明的学生，我也再三强调他们是我碰到的很聪明的一批学生，只要努力，劳动总是会有收获的！但是在教学过程中，个人还缺少更高的艺术修养和艺术创造能力，但是我一直在追求艺术的完美，所以还要不断的学习，不但实现个人的理想和爱好还要完成教学的需求；另外就是技术上还需要完善，也需要和有经验的老师多交流，多沟通。我相信只有站在一定的高度去看整个项目的实现，会更通俗易懂也更有说服力，所以也不能说都是学生的原因，归结起来还是要提高自己的知识水平和业务素质！
正所谓“巧妇难为无米之炊”，所以，提高个人知识水平和业务素质也迫在眉睫。教学过程中不满足，不浮躁，努力进取，积极上进，多向有经验的老师请教。
总而言之，在我们这门课中一共涉及的知识面也宽泛，就软件来说大概就有四个，所以也加大了学生学习的难度。但这个学期结束后，访问学生的体会，基本上一致说：知识太多，难以学习精通，虽然提起很大兴趣，但是知识还有待深入。其实不仅仅是学生，对于老师来说何尝又不是呢，所有要接触的知识中，每一个软件基本上都够学习一个学期的，而我们要在短短的一个学期中接触到这么多知识也难怪学生反应知识多。整个学期像是在不断学习新的软件，一个软件刚刚入门就又要再开始另外一个软件的学习。学习强度大，虽然知识不是很难把握，但是知识零碎，需要反复学习，反复巩固，一个学期下来，基础知识基本上完，但根本没有复习时间，也没有时间要学生通过以前的知识来开发自己的网站。所以，我个人认为：这门课的学习还需要进一步加强并巩固，能有一个综合的运用，或者是通过一个网站的建设让学生能够体会到核心的东西。
针对全体学生来说，聪明程度相当，但学习兴趣层次不同，大部分学生只愿意听后选择性的接受，而没有知识的创新利用，或者是没有下去自学，巩固知识，单一的只是听和做。部分学习根据自己的作品提出一两点问题，但是程度差的同学，上完课后根本就直接把书丢在一边置之不理。综合学生的学习态度问题，个人认为还需要加强考核制度，从严制学，宽进严出，严肃考风！
另外，针对这个学期的网页制作课程，在学生的学习制作过程中我也有自己的一点意见和看法：
1.网页制作要简洁大方。网站在设计过程中以简洁大方为主，配合合理的颜色搭配和主题内容的诠释，给访问者赏心悦目的感觉；而避免过多的动画和帧的过多运用，以及不明确的导航，杂乱的颜色，没有主题的胡编乱造。
2.网站风格要统一。所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，也会对你的网站留下一个“很专业”的印象。知识运用中要大量配合合理的模板、CSS样式的运用而避免在网页中反复的字体样式重定义、颜色的胡乱运用，参差不齐给人杂乱的感觉。
3.网站布局合理。避免一些“拿来主义”，一些学生为了设计方便，拿网上流行的模版做网页，做出的网页几乎是千篇 一律，没有特色，虽然完成了网页的制作，但是毕竟不是出自个人之手，知识缺乏进一步巩固，且让浏览者产生厌倦。另外导航清晰化，能引领浏览者阅读网页，思路一定要清晰，避免交叉链接。
4.网站容量要小。虽然网页更加美观可以吸引浏览者，但是图片，动画容量大会影响浏览速度，所以一定要注意网络容量问题。图片尽量压缩，多采用单一色，或者简单的颜色；动画要尽量简洁实用，用最少的帧做出最漂亮实用的'动画，给网页增色。
5.网站实现严谨。动态网页的制作在这里主要是通过ASP来完成，首先数据库的设计要合理，避免反复修改，影响调用。代码的写入要严谨，比如考虑密码的安全性，以及注册用户写入一些非法字符，或者是洪水般的多用户的点击是否对服务器造成威胁等问题，尽量多方位全面的考虑问题，写出更实用的网站。
以上是在教学过程中遇到的一些知识点或是具体运用中遇到的一些问题，当然也是学生的上机过程中经常存在的问题。
但是总体来说，通过整个学期网页制作的学习，学生已经了解了网页制作所需要的基本技术，也掌握了网页制作的基本技能。但由于时间紧迫，知识点多，一些重点难点问题还需要勤加练习，比如：静态网页中的布局和CSS的定义；动态网页中对象的综合运用等等。当然也存在着遗憾，不少学生反映，他们的学习爱好更多的是动画的制作即Flash的学习，而我们只是笼统的讲解，不能完全满足学生的求知欲！当然针对网页制作来说，还需要加强学生的配色观念以及审美观的培养，以及动态网页的实现技术的把握，在很多方面还需要老师和学生们进一步配合，共同学习和实战，以达到知识运用的一定高度！
篇7：网页动态效果教学设计
【教材分析】
本节课内容为北京版初中第五册教材第七章第六节《在网页中使用动态效果》。在此之前，学生已经学习了网页中静态内容的制作，如添加文字和图片、建立超链接、使用主体和表格等等。本节课的主要内容是在学生初步认识并掌握了网页简单制作的基础上，指导学生给网页添加动态图片、滚动字幕、悬停按钮、横幅广告等动态效果，使网页变得丰富多彩。从而完成对网页的修饰和美化，培养学生审美意识和学习兴趣。在以后的课程中还要学习制作交互网页、管理与发布站点等内容。
【学情分析】
1、本课程的主要教学对象是初二年级学生。
2、在学习本课内容前，学生已经学会上网、Word和PowerPoint等软件，还会制作简单的网页，动手能较强，但审美意识较弱。
3、初二学生具有一定的逻辑思维能力，处于这个年龄段的学生思维活跃，对许多事物充满了好奇心，富有探索精神。
【教学重点】
通过学习添加滚动字幕等动态效果，使学生掌握Web组件的使用方法。
【教学难点】
使学生能够合理的使用动态效果，提高其审美意识。
【教学目标】
知识技能目标：
1、了解FrontPage中常用的几种动态效果的作用；
2、学会在网页中插入Flash动画、滚动字幕和悬停按钮，掌握在网页中使用动态效果的方法。
过程与方法目标：
1、体验在网页中使用Web组件的操作过程；
2、能够熟练灵活的美化自己制作的网页，学生初步形成探究学习和小组学习。 情感、态度与价值观目标：
1、形成对网页制作的学习兴趣；
2、提高自身的艺术修养和审美意识。
【教学方法】
教师综合演示（首先教师展示网页和PPT课件，介绍滚动字幕的插入方法） 自主探究（在学习插入悬停按钮和Flash动画的时候，学生自主探究，教师做简
单提示）
合作交流学习（在学生尝试插入Flash动画的时候，可能会遇到困难，可以通过
合作交流解决问题）
【教学资源】
1、有多媒体的计算机教室，电脑装有FrontPage、Flash等相关软件。
2、老师制作好的PPT课件，以及网页成品和教学过程中会用到的相关素材。
3、学生添加动态效果需要使用的网页框架。
【教学活动设计】
一、组织教学（3分钟）
教师通过常规方式组织教学，学生参与。
二、兴趣导入（5分钟）
教师首先做简单的自我介绍，带领学生回忆之前所学的知识。
展示教师做好的网页成品，让学生发现其特别之处，学生会发现网页中的文字图片等都是会移动的，从而引出本节课的学习内容。
设计意图：让学生自己发现问题，激发其求知欲和学习兴趣。
三、教师演示（10分钟）
教师讲解滚动字幕的插入方式，然后学生做练习，并展示学生的练习成果，老师点评。
设计意图：让学生初步接触Web组件，对其有一定了解
四、自主探究（14分钟）
插入悬停按钮和Flash动画，教师不再讲解，只进行简单提示，学生之间进行讨论，并在自己的网页中尝试加入动态效果。由做出来的同学介绍自己的做法，教师进行总结。
设计意图：让学生合作交流，培养学生的语言沟通能力和协作能力，通过自主探
究，把学习的主动权教给学生，让学生学会自己把握学习进度，并培
养其创新精神。
五、总结巩固（5分钟）
在学生基本掌握动态效果的添加方法后，教师总结本节课所讲的内容，帮学生巩固重点、难点。
设计意图：再次加深学生对Web组件的印象，巩固所学知识。
六、作业布置（2分钟）
课下尝试添加动态图片和横幅广告，并给出简单提示。
设计意图：让学生在课下独立完成，可检验其对新知识的掌握程度。
1.《院子》教学设计
2.《狼》教学设计
3.《山行》教学设计
4.教学设计答疑
5.《猫》教学设计
6.《老王》教学设计
7.《Christmas》教学设计
8.《海水》教学设计
9.黄帝教学设计
10.太阳教学设计
篇8： 《网页制作》教学设计
一、教材或教学内容分析
本章内容在本教材中的位置处于第五章,是在文字处理(Word)和网络基础及因特网应用两章之后。学生所学的文字处理软件Word和将要学习的网页制作软件Frontpage同是Microsoft公司的产品,在软件的使用上有很多的共通之处,所以在学习frontpage的时候,很多内容可以让学生自学,而不必面面俱到地在课上讲授。而第四章网络基础及因特网的应用又为学生对网页的理解奠定了基础,学生对网页中的基本元素――文字、图片、动画、声音等都有所了解,而网页的制作就是将这些元素重新组合到网页上,学生要学的就是这种组合的方法。所以说,虽然大多数学生以前都未接触过网页的制作,但有了以上这些基础,学起来就轻松多了。
本章内容按照学生已有的基础,我对教学内容分了一下类,也为教学的组织工作打下一点基础。本章内容主要由网页基础知识、网站的建立和管理、网页的制作、创建超链接、图片的处理、网页框架。
重点是网页的制作和创建超链接,学会了这些就可以开始简单的网页制作了。
难点是网页框架,这部分相互之间关系比较复杂,必要时,老师在对各组个别辅导时,可以给予分别讲解。 这个分类可以为组长安排各个组员的任务提供参考,使分工更加合理。
二、教学对象的分析
信息技术课虽然已经成为初中的必修科目,但是城乡学生之间掌握情况的差异却相当大,条件好一点的初中学生不仅已经熟练掌握了课本上的内容,还对一些常用软件有所了解;而差一点的可以说是从高中开始才正式接触到信息技术知识的学习,他们需要多锻炼、多指导,所以协作学习对学生的学习帮助很大。
三、教学策略的选择及媒体的使用
在教学策略的选择上,我使用的是任务驱动和协作学习相结合的方法。
任务驱动就是要求本章内容学习完之后,每个小组都要完成自己班级网站的制作,并在全班进行评比,选择最好的作为班级主页挂到学校主页上去,这有助于激发学生参与学习的积极性。
协作学习则是让学生在学习过程中互帮互助,用较短的时间、教少的精力学到更多的东西,完成一个集体项目,让他们在学习之后获得成就感。因此在媒体的选择上,我们使用的是TOP2000系统。TOP2000系统有利于教师进行分组教学和学生作品的点评及成果的展示。教学过程开始之前,教师把学生按座位分成四组,每个组都按学生对计算机的掌握程度平均分配,保证每个组都有计算机操作方面比较突出的,也有相对比较差的,使其形成能够互帮互助的学习小组。并由他们自己选出组长各一名,然后由组长根据组员的情况,确定在班级主页制作过程中主要完成什么任务,也就是说起到一个组织者的作用。做过网页的人都知道,做网页是一项比较费时的工作,而要学生在较短的时间内制作出像样的网页是比较困难的,而在这个过程中,网页的设计占去了相当多的一部分时间,组长把任务分到各组员头上以后,组员就可根据自己要完成的任务相对集中的做某方面的工作,做完以后,组员之间进行经验交流,告诉组员自己的网页是如何制作出来的,在完成自己的网页后,再重复一遍制作过程花费的时间的不多的。这样,其他组员就可在较短的时间之内掌握比较先进的网页制作方法,而不必再花那么多时间去探索。因为每位组员都必须自己完成一个任务,所以在这个过程中,也同样有自己探索学习的机会和介绍自己经验的机会,使组内的每个学生都在学习中获得成就感。
四、教学过程
教学进程
教师活动
学生活动
1、课前准备
课前将本章内容的基本结构、内容的归类、网页基础知识、网页素材做成一个网站,供学生参考,网站上的内容可根据学生以后在学习中的要求添加。根据学生对已有的网页制作的情况进行分组。
学生根据自己的分组情况选出组织能力较强、计算机水平较高的人做组长,协作小组形成。
2、教师布置任务,作必要讲解
第一节课,教师简单介绍网页基础知识,并给各小组布置任务――用下面的时间完成班级网页的制作,并对组长进行本章基本内容及本章内容的分类的介绍,让他们对本章内容有总体上的'把握。
在教师对网页基础知识讲解的基础上,浏览教师制作的网站,继续学习;
课后各组设计自己的班级主页,组长根据网站上教师对本章内容的分类给学生布置任务。
3、教师指导分工情况,学生开始自主学习
第二节课教师对组长对全组的分工情况给予检查,提出意见和建议。
学生根据分工制作网页,学习可以跟着课本上自学,也可根据以前学习Word的经验自己摸索制作过程,不懂之处可向会的同学请教,还可以相互之间讨论,在网页的设计方面也可以相互之间多商量,发扬互帮互助的精神。
4、学生自主学习,教师指导、监督
下面三节课,老师在每组各用10分钟时间检查他们上节课的网页制作情况,并对他们碰到的问题给予提示或解决,起指导和监督作用。
学生继续学习、制作网页。
五、阶段总结
四节课的制作以后,各组员所制作的网页都初见雏形,所以教师组织一堂课,由各组展示自己的作品。教师在学生评讲完后,给予总结。
各组分别展示自己的作品,其他组对他们可以提出意见或建议,也可从其他组的学到好的创意。由组长在课后写一份阶段总结,从而指导以后的工作。
六、学生自主学习,教师指导、监督
下面四节课,老师仍然对每组各花10分钟时间轮流检查他们上节课的网页制作情况,并对他们碰到的问题给予提示或解决,起指导和监督作用。
学生继续学习、制作网页。
七、各组将内容汇总,形成班级主页
教师对各组出现的问题提出建议或意见。
组长或组长安排人将各组的主页进行汇总,形成一个完整的班级主页,对欠缺的地方进行修补。
八、班级网站制作完成,展示与总结
老师请其他信息技术教师来做评委,对各组做的网站提出意见或建议,评出最佳网站、最佳创意等奖,让大家的付出都有所收获。
各组分别展示自己组所制作的班级主页。
课后:
大家集中各组的优势,将班级主页完成,挂到学校主页上。
篇9： 《网页制作》教学设计
一、教学目标：
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、本节课是在学习完简单网页、表格布局网页、交互式网页的基础上，进一步页的设计方法。由于学生已经具备了一定的网页设计基础知识与技能，所以教师可以根据学生的实际情况，采用更灵活
的教学方法。教师可以简单介绍框架结构网页的功能及框架的建立与编辑方法，以及框架属性设置与网页属性设置的方法与区别。然后由学生根据教师提供的学案及演示动画，完成框架网页设计任务。
篇10： 《网页制作》教学设计
教学目标：
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邮箱页面等，引导学生总结本课内容，梳理课堂知识，并让学生分组，推荐一些优秀作品进行全班展示。
设计意图：开拓学生的视野，使学生了解框架的应用，教会学生要善于总结，要学会学习的方法。
篇11： 《网页制作》教学设计
教学目标：
1、让学生掌握在网页中插入表格的方法以及表格的修改
2、学会利用表格来规划网页
3、培养学生创新的能力以及动手操作的能力
教学重、难点：
利用表格来规划网页，从中培养学生的创新能力
教学过程：
一、情境导入
同学们你们善于观察吗？老师先考考你们，我们一起来看一组图片，你们看看在那里看过呢？学校缓台的窗台上。你们的观察能力真的很强啊，对，这些都是我们学校美术的特色作口，盘画。其实，我们做过很多作品：有手工作品，语文课中的作文、书法等都是作品，这节课我们以绘画作口品为例，做一个学习园地网页，把我们的作品展示到自己的班级网站中，以便我们更好的努力学习。现在我们就一起来制作吧！
二、新知探究
首先我们来打开上节课的班级网站，在这个网站中新建一个网页，并保存成“学习园地”。
教师讲解：如何制作学习园地网页。
1、制作网页的标题：输入文字，并设置文字的格式。
2、插入表格：单击“表格”中的“插入表格”并对表格属性进行设置。如：行、列的操作，对齐方式等。同时讲解什么是行，什么是列，以及单元格的概念。
3、修改表格：调整表格行高和列宽。
4、在学生学会插入表格的基础上，来设计网页，展示作品。并讲解在单元格中可以插入图片、文字。那我们就一起快快去做吧！插入图片，并在图片的上面或下面进行图片的注释。
5、进一步设置单元格的背景，来美化网页。
6、设置超链接：通过导航栏目，设置文字超链接。选中文字，点击右键选择超链接在列表中选择你要链接的网页，单击“确定”按钮。
7、学生在教师的讲解后，学生自己动手操作制作网页。教师进行指导。（伴随音乐）
三、作品评价
1、生评：从网页设计上，美观程度上，知识落实上重点评价。
2、师评：对学生作品进行评价，并对其它学生的评价加以更完整的解释。
四、总结
我们这节课主要是利用了表格来设计网页，以使来美化我们的网页，通过绘画作品的展示，学习更多的知识。
篇12： 《网页制作》教学设计
教学目标：
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、总结与评价
开展同学间的互助，检验其链接完成情况，推荐优秀同学做展示。引导学生分类总结本节课的知识点。
篇13：网页制作教学设计
一、课程基本信息
课程编号：
中文名称：网页设计与制作
英文名称：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%
八、执行大纲时应注意的问题
根据学生对课程内容的掌握和理解程度会对进度做适当的调整。
篇14：网页制作教学设计
一、学习内容分析
《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界面，找出相同之处和不同之处。
小结：相同之处：xxxx_______（菜单栏、工具面板、编辑区）
不同之处：xxxx_______（对象树面板）
（3）比较PS中的图层面板和iH5中的对象树面板，思考对象树面板的作用。
小结：对象树面板可以用来管理舞台中的对象，对象树中的层级关系为：舞台→页面→文本、图片等素材，每个页面中的对象上层覆盖下层。
活动4：利用iH5软件，制作邀请函H5。
（1）观看操作指导微视频，自主探究页面的制作，完成以下问题：
设置背景：选中页面1，在属性面板中找到xx_____选项，添加背景图片。
添加文字：选中页面1，在工具面板中选择xx_____选项。
添加图片：选中页面1，在工具面板中选择xx_____选项。
小结：添加文字、图片的一般步骤：选择位置—添加对象。
（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的日常应用，对未来展望，进行情感升华。
篇15：制作网页教学设计
一、教材分析
《网页制作》教学是信息基础必修教材中第六章第1节信息集成中网站制作简介的有关内容。编辑网页所使用的是软件是Frontpage20xx，该软件的使用与以前所学的word有类似的地方，软件操作具有一定的迁移性。
二、学情分析
学生在之前已经学习了word的有关操作，具备网上获取信息和一定的信息处理能力。Frontpage20xx的使用与word有很多类似的地方，学生较容易上手。
三、教学目标
知识与技能：了解网页的基本元素；掌握网页制作中网页元素的应用；懂得利用表格布局网页的基本思想；
过程与方法：通过实践体验对比，得出结论。亲历网页制作的过程。情感态度与价值观：在与同伴合作完成简单网页的制作过程中，培养与他人合作交流的意识和习惯，通过设计学校网页，培养学生热爱学校的情感。
四、教学重点、难点
教学重点：网页制作中网页元素的应用
教学难点：利用表格布局网页
五、教学方法：合作探究法、任务驱动
六、教学过程
（一）情境导入
师：用PPT展示一组美丽的学校风景图片，师生共同欣赏。同学们一看就知道这是我们白蒲中学的风景图片。我校曾被评为江苏省十佳花园学校，请大家思考一下如何让更多的人了解我们学校的美呢？大家有什么好的方法吗？
生回答：通过网络发布，需要制作网页（如回答不在话题上，引导）
师：本节课我们就一起来学习制作《美丽的蒲中校园》网页，宣传学校的美。学校将组织评选同学们设计的优秀网页作品，放在学校网站上。
（二）新课讲授
师：这里，老师挑选了去年学生设计的优秀网页作品，我们一起来欣赏。展示校园页面，提问：这个页面中由哪些元素构成的？
生：文字、图片、动画、声音、超链接等。
师：网页里的这些元素是通过什么工具集成起来的呢？在这里，老师向大家介绍office20xx中的frontpage20xx来制作网页，它具有功能强大、简单易用的特点。
教师演示启动frontpage20xx的步骤，启发学生：界面和学过的哪个软件比较相似？教师点击相关菜单，引导。由于都是office套件的一种，所以和word界面很相似，演示界面和功能。演示打开站点bpzx，站点打开后，观察网站文件夹的结构，介绍images文件夹与_private文件夹的作用。后缀名为.htm，代表的是网页文件。其中，表示网站的主页名称。点击视图下的网页，切换到网页窗口，点击文件夹，切换到站点文件夹窗口，点击bpzx站点文件夹，便于我们打开网页文件。
师：刚才同学们的都非常好，在制作网页前，我们先来放松一下，来玩拼图。请同学们打开D盘的《网页制作》学案，完成实践一。
实践一：2个小实验
实验1：启动Frontpage后，点击“文件”“打开站点”，找到D盘下的bpzx文件夹。双击文件夹列表里的文件，学生尝试拼凑图形。
实验2：双击文件夹列表里的文件，学生尝试拼凑图形，将图形按顺序拖到表格的单元格里，并适当拖到表格的边框，能拼凑成功吗？
学生操作，发现实验1中的图形总有1个无法拖动，拼凑不成功，实验2在表格中拼凑图形成功。
教师启发学生思考，引导学生观察一开始出示的网页，发现图片、文字、动画等网页元素排列整齐。
师：是什么在起作用？
师生共同得出：利用表格布局网页。得出：表格的定位。
师：利用表格的布局功能。表格的'布局功能可以对页面元素进行定位，使网页清晰美观、富有条理。表格中可以包含多种类型的内容，如图像、文本、多媒体文件。
师：在网站文件夹里有一张利用表格布局的“美丽的蒲中校园”网页，今天，老师要请你们当网页设计师，完成“美丽的蒲中”网页制作。制作学校风景，需要什么样的素材？学生回答：图片。老师已经预先把素材准备好了，大家可以打开acde浏览素材，选择合适的素材。
实践二：双击文件夹视图里的。
任务一：请大家从D盘的sucai文件夹中，从7张校园风景图片中挑选其中一张，插入网页表格的适当位置。文字材料直接从sucai文件夹中的word文档中复制。注意页面的保存，保存时要注意：网站中用到的图像、声音、视频文件应有条理地存放到指定文件夹中。当保存图片时，要把图片保存到images文件夹中。
学生自主操作，4人一组合作学习。教师巡回辅导。操作中的操作步骤要点参考《网页制作》学案。
任务二：在单元格中各插入gif图像动画、欢迎字幕和flash动画,，以实现页面的动态效果。注意保存和预览。
可能的问题：1、图片属性设置2、flash动画的插入教师展示一部分学生的作品，点评，小结。学生再次练习完善。
师：刚才，同学们的表现都非常出色，要想使自己的网页更漂亮、更受欢迎吗？
实践三：
任务一：美化页面操作小贴士：
操作右击网页空白处，“网页属性”，“常规”，输入标题。切换到“背景”，设置背景色。设置背景图片：可勾选“背景图片”，“浏览”。
任务二：打开页面，对“美丽校园”创建超链接到。操作小贴士：
创建超链接：选定文字，“插入”、“超链接”，选定超链接的网页。学生合作学习，教师巡回辅导。教师展示学生作品，点评，小结。
教师提醒学生，做好后的网页，在浏览器里预览，发现有边框线，如何解决？学生自主探究。
三、课堂总结
篇16：制作网页教学设计
一、教材分析
本课是FRONTPAGE中一节基础内容课，也是FRONTPAGE以后知识学习的铺垫。本节课以制作一个简单网页为教学任务，学习目的明确，步骤清楚，希望完成任务而初步掌握简单制作步骤的指导思想。同时对学生网页的创作能力、网页布局和色彩搭配能力进行激发与培养。并为其以后进一步学习网页制作而打下良好的基础。本节课的重点是网页常用编辑器以及网页设计布局，难点是网页的设计及布局。教师重点在导，学生重点在实践与创新。为了合理利用上课时间，将用已有部分拓展知识和演示范例利用网络下传至学生机，以利于学生上课的实践与创新。
二、学情分析
我校的大部分学生在小学就接受过系统的信息技术课程学习，具备了一定的计算机操作能力，加上初
一、初二也学完了word execl powerpoint的知识，应该说学生都具备了一定的基础。但也有部分学生基础没有打好，但基本的操作应该没有多大问题。因此，在教学过程中关于frontpage的打开与保存，这里我让学生自己去学习，教师只给予必要的提示。而关于HTML和讲授网页布局的过程时，有必要要教师先演示一下，这也是本节课的重难点。
三、教学目标分析：
1、知识目标：
通过本节的教学，学生将了解常用的网页制作软件，掌握frontpage的操作界面，并能亲自尝试做出简单的网页作品。
2、过程与方法
学生将通过教师的引导，学会通过自主的研究探索，主动获取知识，并运用知识解决问题，逐步地培养自己的创新精神和实践能力。这对于学生以后的进一步学习很有帮助。具体过程：课题引入-----教师提示------学生上机自主学习------问题反馈-----教师演示-----学生完成作品-----优秀作品点评-----教师小结-----巩固练习-----课后探究、实践。
3、情感、态度与价值观①活动教学激发学生学习frontpage的兴趣。
②培养他们自主学习、互相协作的良好学习习惯以及自主创新精神。
4、重点、难点
重点：了解常用的网页制作软件，掌握frontpage的操作界面。
难点：网页的合理布局和色彩搭配。
四、教法阐述
为了实现以上教学目标，结合教材特点，本课采用的主要教学方法有“任务驱动法”、“创设情境法”等。通过学生已经受过的美术教育和信息技术教育（课程整合），创设一个Inter网页在线的情境（创设情境法），设置一个个任务，让学生运用已学知识，自己动手，有机完成课堂设计的各种操作（任务驱动法）（包括：了解常用软件的概况，利用word对frontpage的操作界面熟练掌握，完成自己的第一个网页设计。）以任务驱动的方式查漏补缺，使教学内容合理流动，水到渠成。教学中，启发、诱导贯穿始终，充分调动学生的学习积极性，注意调节课堂教学气氛，使学生变被动学习为主动愉快的学习，使课堂能在生动、有趣、高效中进行。
五、学法指导
本课教给学生的学法是“接受任务——思考讨论——合作操练”。建构主义学习理论强调以学生为中心，要求学生由知识的灌输对象转变为信息加工的主体。故此本课教学过程中，巧妙设计，让学生带着一个个任务通过课堂讨论、相互合作、实际操作等方式，自我探索，自主学习，使学生在完成任务的过程中不知不觉实现知识的传递、迁移和融合。
六、教学设计
1、收集资料，激发兴趣。
在这一环节中，教师利用课前准备好的前期省市获奖网页作品，并将之融合到课件中。教师结合初中学生特点和乡土教育，故利用屏幕广播播放《我的家乡》和《思品斋》，让学生共同欣赏，从而引导学生的创作欲望，激发其兴趣。
设计意图：通过网页实例的导入，将课堂气氛调节得比较活跃，让学生更容易进入学习状态，为以下的学习做好铺垫。
2、初识网页制作软件。在激发了学生学习兴趣后，教师趁势提出：你们也想制作这样的作品来表达自己的想法吗？顺势引出“三剑客”的概念，引导学生了解常见的html编辑器。
设计意图：通过学生感兴趣的问题设问，吸引学生的注意力，激发学生的学习兴趣。
3、层层攻关（任务驱动逐步提高分层教学）
欣赏过网页，教师就提出与学生共同制作简单的网页的想法。在授课中我安排了多次的动手制作活动，制作难度由浅入深，旨在通过学生自己动手动脑，形成自主探究进而创作的能力。
（1）第一关：基本任务：边学边做，牛刀小试
由于是初次制作，所以不易过难过复杂，所以选择了让学生自主进入frontpage的界面，因为有office前面知识做铺垫，学生进入操作界面并可以在较短的时间内熟悉基本的操作界面，又有助于形成学生内心的.成就感，提高学生继续学习的积极性。后巡回辅导并观察哪些学生用的方法最快、最简便。
学生：自主学习、互相协作，也可以参考教师已下传上操作方法或正确样例。设计意图：这是第一关任务，对于已有计算机操作基础的学生来说相对较简单。所以我这里给出提示与操作方法后让学生自己去过这第一关。让学生学会操作，并尝试不同的操作方法来解决问题。（2）第二关：进阶任务：由学到创，拓展提升
在学习完成第一个环节后，教师趁势提出html的概念，实例中字体、大小、颜色变化，引导学生观察普通、html、预览的不同，以及相关的操作方法。在此基础上，教师进一步设置了拓展问题，让学生设计自己的网页，并通过简单网页的制作体会html的具体含义。最后教师选择相关学生进行总结，教师注意点评。
学生：根据刚才学习的知识和教师提供的素材。先完成自己的作品并与同学进行交流和沟通。学生通过不断的实践，简单修改html的方法，并进行演示。
设计意图：这是第二关任务，其中html也是本节课的重难点，所以教师先用一种常用方法演示html的内容，而修改让学生自主学习完成。同时让学生相互进行交流，有助于提高他们的学习积极性与成就感，又可以培养他们之间互相帮助学习的良好习惯。方法多样让学生学会用不同的操作方法来解决实际问题，但得让他们自己去实践，这有助于培养他们自主学习的良好习惯。（3）第三关：挑战任务：展翅高飞，自由创作
在学习制作完第二个环节后，引导学生进入“网页达人”的环节，本环节主要讲解网页的布局等知识，由教师演示常见的网页布局格式，并简单的给学生进行点评和原理分析。在此基础上，引导学生结合自己的上网经历仔细对比异同，同时归纳适合个人网页的布局和颜色搭配方式。
设计意图：在第二关的基础上，对出现的问题，进行分析、演示。让学生在掌握操作技术的基础上对网页布局和颜色搭配有进一步的认识，在此基础上形成对学生审美观的培养。完成第三关操作任务即完成自己的作品。让学生能设计出有创意的作品，培养他们的创新精神。考虑到学生之间的差异，在这里只对背景和图片的接触和了解，让计算机基础好的一些学生能探索出新的知识操作。
4、评价作品教师总结 评价作品
（1）学生互评：通过教师设置的共享文件夹了解其他学生作品，学生互相发表意见。
（2）学生自己推荐：认为自己作品好的学生可以举手向老师推荐。（3）教师总结评价：教师对学生们评价出的优秀作品以及自己推荐的作品作评价并结合作品完成的时间前后评选出前5位优秀作品并进行表扬。
设计意图：培养学生评价他人作品的能力。互相欣赏作品可以让学生来检测自己的学习成果，知道彼此之间的差距。让学生有成就感，从而激发学生的学习积极性，进一步活跃了课堂气氛。
教师总结
教师结合学生作品和上课的具体情况总结本节课的主要内容，注意强调知识目标和情感态度价值观的总结。
5、知识竞答大比拼
教师演示准备好的一个知识竞答游戏，学生观看大屏幕，抢答题目。设计意图：用游戏形式的巩固练习即让学生对本节课的知识学习得到反馈，进一步巩固所学知识，又可以活跃课堂气氛。
6、课后探究实践
教师给出提示，引导学生自主学习，充分挖掘他们的学习潜力
设计意图：让学生在课后有思考问题的空间，进一步激发他们学习frontpage的兴趣。培养他们自主学习计算机其他操作知识。
★ 教学设计是论文吗
★ 室内设计教学设计
★ 室内设计教学
★ 什么是教学设计?
【网页设计教学（共16篇）】相关文章：
室内设计教学论文2022-04-29
教学设计、教案和课件的区别2022-04-30
教学设计论文如何写2023-11-07
教学设计论文范文2023-07-06
教学设计论文2022-06-20
艺术学院环境设计专业人才培养初探论文2023-12-21
课程设计论文2023-11-09
高校服装设计教学模式改革论文2023-08-24
案例式教学在ASP.NET动态网页设计中的应用2023-03-01
高校环境设计专业发展策略探究论文2024-04-16