设计网页的作品讲解 第1篇
网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。 网站设计方面：计划实现简洁大气的网页设计效果。 网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。
设计网页的作品讲解 第2篇
一、教学目标：
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）、教师点评，并鼓励完成作品比较好的学生。
设计意图：拓展学生的视野，使学生了解框架的应用方法。展示优秀作品鼓励学生，激发学生的创作欲望。
四、教学反思：
设计网页的作品讲解 第3篇
教学目标：
1、知识与技能：
（1）理解框架的概念及用途。
（3）初步掌握将框架结构与表格布局结合使用来制作网页。
2、过程与方法：
（1）通过对表格网页的分析，体验新知识（框架结构网页）的优点，从而促进其学习新知识。
（2）理解框架的概念与组成，学会分析网站的结构。
3、情感态度与价值观：
（1）通过以_人与动物_为主题的框架结构网页制作活动，了解更多有关人与动物和谐相处的知识，通过故事趣闻，增强学生关注动物的兴趣和意识。
（2）能够将表格与框架结构网页结合使用，在创作中体验乐趣。
教学重、难点：
设计网页的作品讲解 第4篇
（1）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。
（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。
（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。
设计网页的作品讲解 第5篇
一、教学题目：
网页的制作
二、教学目标：
1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；
2、认识frontpage的界面；
3、掌握在主页中插入文字、图片、水平线；
4、掌握页面文件与图片的保存。
三、教学重点：
1、能在指定位置建立只有一个网页的站点（难点）
2、能在页面中插入文字、图片、水平线
3、掌握页面文件与图片的保存（难点）
四、教学难点：
在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。
五、教学过程：
教师活动：
1、引入课题：（激发兴趣，活跃气氛）
同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站）
浏览新浪网站，浏览的第一个页面称为什么？（主页）
设计网页的作品讲解 第6篇
通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。
设计网页的作品讲解 第7篇
一、教学目标
知识与技能：
掌握网页制作的基本流程和常用工具。
学会使用HTML、CSS、JavaScript等网页开发语言进行简单的网页设计和编程。
理解网页布局、色彩搭配、图片处理等设计要素。
能够制作包含文本、图片、链接、表单等基本元素的静态网页。
过程与方法：
通过案例分析，了解优秀网页设计的标准和特点。
通过实践操作，掌握网页制作的具体步骤和方法。
培养学生的创新思维和自主学习能力，鼓励学生在设计中展现个性和创意。
情感态度与价值观：
激发学生对网页设计的兴趣和热情，培养他们对美的追求和审美能力。
培养学生的'团队协作精神和沟通能力，学会在团队中发挥自己的优势。
培养学生的责任感和职业道德，让他们明白作为网页设计师的责任和使命。
二、教学内容
网页制作基础
网页制作的基本概念和发展历程。
网页开发语言和工具介绍。
网页设计的原则和技巧。
网页布局与设计
网页布局的基本类型和设计原则。
色彩搭配和图片处理的技巧。
字体选择和排版规范。
网页元素制作
文本、图片、链接、表单等网页元素的制作方法。
交互式按钮、滚动条、动画效果等高级元素的实现。
响应式设计和移动端适配技巧。
网页优化与测试
网页加载速度和性能优化方法。
网页兼容性和可访问性测试。
网页安全性和SEO优化技巧。
三、教学方法与手段
讲授法：通过课堂讲授，介绍网页制作的基本概念、开发语言和设计原则等基础知识。
案例分析法：通过分析优秀网页设计的案例，让学生了解优秀网页设计的标准和特点，并引导他们进行思考和总结。
实践操作法：通过布置实践任务，让学生在实践中掌握网页制作的具体步骤和方法，培养他们的动手能力和创新能力。
小组讨论法：通过小组讨论，让学生互相交流学习心得和体会，培养他们的团队协作精神和沟通能力。
四、教学评价
过程性评价：通过对学生课堂表现、实践操作、小组讨论等方面的观察和分析，评价学生的学习态度和学习效果。
结果性评价：通过对学生提交的网页作品进行评分和点评，评价学生的网页设计能力和创新水平。
综合性评价：结合过程性评价和结果性评价的结果，对学生的学习成果进行综合评价，并给予相应的反馈和建议。
设计网页的作品讲解 第8篇
该网站使用了CSS3的媒体查询功能来适应不同屏幕尺寸。通过为不同屏幕宽度设置断点，并调整布局、字体大小和间距等样式，确保在不同设备上都能提供良好的视觉体验。例如：
@media (max-width: 768px) {
.container {
width: 100%;
padding: 20px;
nav {
flex-direction: column;
设计网页的作品讲解 第9篇
一、课程基本信息
课程编号：
中文名称：网页设计与制作
英文名称：Web Design and Production课程类别：选修课适用专业：所有专业
开课学期：20xx—20xx
第2学期总学时：24学时
总学分：1课程
简介：
本课程突出网页设计与制作的现代特点，从Internet的基础知识入手，重点介绍HTML超文本标记语言，以及所见即所得的网页设计制作工具Dreamweaver的基本操作流程。从静态页面到动态页面由浅入深的介绍网页设计与制作全过程。采用案例分析和亲自实践的方式突出、突破课程的重点和难点。并指导每一名选课的同学为自己建一个博客网站，以此提高同学对网页设计与制作的`兴趣和爱好。参考书：
1、网页设计与制作教程，熊前兴闵联营，科学出版社；
2、网站与网页设计，张贵明，清华大学出版社；
3、网页美术设计原理及实战策略，王晓峰焦燕，清华大学出版社；
4、网站建设典型案例，张枭，清华大学出版社；
二、课程教学目标：
网页和网站是Internet的重要组成部分，企业、公司和机构通过网站来宣传推介自己的技术和产品，个人发布主页展示自己的风采，人们从不同类型的网站来获取需要的信息。因此，设计与制作网页已经成为计算机应用技术的一个重要方面。本课程的主要教学目的是使学生掌握网页设计与制作的基础知识，能运用网页工具设计和制作常用网页。
三、理论教学内容与要求
第一章、网页的基础知识（1学时）
（1）Internet基础知识
（2）www简介
（3）网页制作的技术和工具介绍
设计网页的作品讲解 第10篇
一、教材或教学内容分析
本章内容在本教材中的位置处于第五章，是在文字处理（Word2000）和网络基础及因特网应用两章之后。学生所学的文字处理软件Word和将要学习的网页制作软件Frontpage同是Microsoft公司的产品，在软件的使用上有很多的共通之处，所以在学习frontpage的时候，很多内容可以让学生自学，而不必面面俱到地在课上讲授。而第四章网络基础及因特网的应用又为学生对网页的理解奠定了基础，学生对网页中的基本元素——文字、图片、动画、声音等都有所了解，而网页的制作就是将这些元素重新组合到网页上，学生要学的就是这种组合的方法。所以说，虽然大多数学生以前都未接触过网页的制作，但有了以上这些基础，学起来就轻松多了。
本章内容按照学生已有的基础，我对教学内容分了一下类，也为教学的组织工作打下一点基础。本章内容主要由网页基础知识、网站的建立和管理、网页的制作、创建超链接、图片的处理、网页框架。
重点是网页的制作和创建超链接，学会了这些就可以开始简单的网页制作了。
难点是网页框架，这部分相互之间关系比较复杂，必要时，老师在对各组个别辅导时，可以给予分别讲解。 这个分类可以为组长安排各个组员的任务提供参考，使分工更加合理。
二、教学对象的分析
信息技术课虽然已经成为初中的必修科目，但是城乡学生之间掌握情况的差异却相当大，条件好一点的初中学生不仅已经熟练掌握了课本上的内容，还对一些常用软件有所了解；而差一点的可以说是从高中开始才正式接触到信息技术知识的学习，他们需要多锻炼、多指导，所以协作学习对学生的学习帮助很大。
三、教学策略的选择及媒体的使用
在教学策略的选择上，我使用的是任务驱动和协作学习相结合的方法。
任务驱动就是要求本章内容学习完之后，每个小组都要完成自己班级网站的制作，并在全班进行评比，选择最好的作为班级主页挂到学校主页上去，这有助于激发学生参与学习的积极性。
协作学习则是让学生在学习过程中互帮互助，用较短的时间、教少的精力学到更多的东西，完成一个集体项目，让他们在学习之后获得成就感。因此在媒体的选择上，我们使用的是TOP2000系统。TOP2000系统有利于教师进行分组教学和学生作品的点评及成果的展示。教学过程开始之前，教师把学生按座位分成四组，每个组都按学生对计算机的掌握程度平均分配，保证每个组都有计算机操作方面比较突出的，也有相对比较差的，使其形成能够互帮互助的学习小组。并由他们自己选出组长各一名，然后由组长根据组员的情况，确定在班级主页制作过程中主要完成什么任务，也就是说起到一个组织者的作用。做过网页的人都知道，做网页是一项比较费时的工作，而要学生在较短的时间内制作出像样的网页是比较困难的，而在这个过程中，网页的设计占去了相当多的一部分时间，组长把任务分到各组员头上以后，组员就可根据自己要完成的任务相对集中的做某方面的工作，做完以后，组员之间进行经验交流，告诉组员自己的网页是如何制作出来的，在完成自己的`网页后，再重复一遍制作过程花费的时间的不多的。这样，其他组员就可在较短的时间之内掌握比较先进的网页制作方法，而不必再花那么多时间去探索。因为每位组员都必须自己完成一个任务，所以在这个过程中，也同样有自己探索学习的机会和介绍自己经验的机会，使组内的每个学生都在学习中获得成就感。
四、教学过程
教学进程
教师活动
学生活动
1、课前准备
课前将本章内容的基本结构、内容的归类、网页基础知识、网页素材做成一个网站，供学生参考，网站上的内容可根据学生以后在学习中的要求添加。根据学生对已有的网页制作的情况进行分组。
学生根据自己的分组情况选出组织能力较强、计算机水平较高的人做组长，协作小组形成。
2、教师布置任务，作必要讲解
第一节课，教师简单介绍网页基础知识，并给各小组布置任务——用下面的时间完成班级网页的制作，并对组长进行本章基本内容及本章内容的分类的介绍，让他们对本章内容有总体上的把握。
在教师对网页基础知识讲解的基础上，浏览教师制作的网站，继续学习；
课后各组设计自己的班级主页，组长根据网站上教师对本章内容的分类给学生布置任务。
3、教师指导分工情况，学生开始自主学习
第二节课教师对组长对全组的分工情况给予检查，提出意见和建议。
学生根据分工制作网页，学习可以跟着课本上自学，也可根据以前学习Word的经验自己摸索制作过程，不懂之处可向会的同学请教，还可以相互之间讨论，在网页的设计方面也可以相互之间多商量，发扬互帮互助的精神。
4、学生自主学习，教师指导、监督
下面三节课，老师在每组各用10分钟时间检查他们上节课的网页制作情况，并对他们碰到的问题给予提示或解决，起指导和监督作用。
学生继续学习、制作网页。
五、阶段总结
四节课的制作以后，各组员所制作的网页都初见雏形，所以教师组织一堂课，由各组展示自己的作品。教师在学生评讲完后，给予总结。
各组分别展示自己的作品，其他组对他们可以提出意见或建议，也可从其他组的学到好的创意。由组长在课后写一份阶段总结，从而指导以后的工作。
六、学生自主学习，教师指导、监督
下面四节课，老师仍然对每组各花10分钟时间轮流检查他们上节课的网页制作情况，并对他们碰到的问题给予提示或解决，起指导和监督作用。
学生继续学习、制作网页。
七、各组将内容汇总，形成班级主页
教师对各组出现的问题提出建议或意见。
组长或组长安排人将各组的主页进行汇总，形成一个完整的班级主页，对欠缺的地方进行修补。
八、班级网站制作完成，展示与总结
老师请其他信息技术教师来做评委，对各组做的网站提出意见或建议，评出最佳网站、最佳创意等奖，让大家的付出都有所收获。
各组分别展示自己组所制作的班级主页。
课后：
大家集中各组的优势，将班级主页完成，挂到学校主页上。
设计网页的作品讲解 第11篇
页面布局大量采用了Flexbox和Grid系统，使得元素之间的排列更加灵活且易于维护。Flexbox用于处理一维布局（如导航栏、卡片列表等），而Grid则用于构建复杂的二维布局（如产品展示区域）。
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
交互动画分析
设计网页的作品讲解 第12篇
本学期计算机科学与技术系软件工程专业的《网页制作》课程由我负责，学生共74人，及格率100%。其中90分以上的没有，80分以上的只有几个，大多是在70～80之间，也有一小部分在60～70之间。成绩不是很理想，总体来说大多数学生平时上机实践比较积极、踏实，能够自觉的按照老师的要求去做，但也有少数学生自觉性差，需要老师和学委催促。现将一个学期的教学情况总结如下：
一、老师给与学生合理的引导，更要加强自身的素质修养，提高自己的知识水准。
在整个教学过程中，在教学过程中自己还缺少更高的艺术修养和艺术创造能力，所以还要不断的学习；另外就是技术上还需要完善，也需要和有经验的'老师多交流，多沟通。相信只有站在一定的高度去看整个项目的实现，会更通俗易懂也更有说服力，所以也不能说都是学生的原因，归结起来还是要提高自己的知识水平和业务素质！
二、了解学生，加强考核。
针对全体学生来说，聪明程度相当，但学习兴趣层次不同，大部分学生只愿意听后选择性的接受，而没有知识的创新利用，或者是没有下去自学，巩固知识，单一的只是听和做。有的同学，上完课后根本就直接把书丢在一边置之不理。综合学生的学习态度问题，个人认为还需要加强考核制度，从严制学，宽进严出，严肃考风！
三、教学内容心得
1、网页制作要简洁大方。网站在设计过程中以简洁大方为主，配合合理的颜色搭配和主题内容的诠释，给访问者赏心悦目的感觉；而避免过多的动画和帧的过多运用，以及不明确的导航，杂乱的颜色，没有主题的胡编乱造。
2、网站风格要统一。所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，也会对你的网站留下一个“很专业”的印象。知识运用中要大量配合合理的模板、CSS样式的运用而避免在网页中反复的字体样式重定义颜色的胡乱运用，参差不齐给人杂乱的感觉。
3、网站布局合理。避免一些“拿来主义”，一些学生为了设计方便，拿网上流行的模版做网页，做出的网页几乎是千篇一律，没有特色，虽然完成了网页的制作，毕竟不是出自个人之手，知识缺乏进一步巩固，且让浏览者产生厌倦。另外导航清晰化，能引领浏览者阅读网页，思路一定要清晰，避免交叉链接。
4、网站容量要小。虽然网页更加美观可以吸引浏览者，但是图片，动画容量大会影响浏览速度，所以一定要注意网络容量问题。图片尽量压缩，多采用单一色，或者简单的颜色；动画要尽量简洁实用，用最少的帧做出最漂亮实用的动画，给网页增色。
但是总体来说，通过整个学期网页制作的学习，学生已经了解了网页制作所需要的基本技术，也掌握了网页制作的基本技能。但由于时间紧迫，知识点多，一些重点难点问题还需要勤加练习，比如：静态网页中的布局和CSS的定义；动态网页中对象的综合运用等等。
当然也存在着遗憾，不少学生反映，学习爱好更多的是动画的制作即Flash的学习，而我们只是笼统的讲解，不能完全满足学生的求知欲！当然针对网页制作来说，还需要加强学生的配色观念以及审美观的培养，以及动态网页的实现技术的把握，在很多方面还需要老师和学生们进一步配合，共同学习和实战，以达到知识运用的一定高度！
设计网页的作品讲解 第13篇
教学目标：
1、让学生掌握在网页中插入表格的方法以及表格的修改
2、学会利用表格来规划网页
3、培养学生创新的能力以及动手操作的能力
教学重、难点：
利用表格来规划网页，从中培养学生的创新能力
教学过程：
一、情境导入
同学们你们善于观察吗？老师先考考你们，我们一起来看一组图片，你们看看在那里看过呢？学校缓台的窗台上。你们的观察能力真的很强啊，对，这些都是我们学校美术的`特色作口，盘画。其实，我们做过很多作品：有手工作品，语文课中的作文、书法等都是作品，这节课我们以绘画作口品为例，做一个学习园地网页，把我们的作品展示到自己的班级网站中，以便我们更好的努力学习。现在我们就一起来制作吧！
二、新知探究
首先我们来打开上节课的班级网站，在这个网站中新建一个网页，并保存成“学习园地”。
教师讲解：如何制作学习园地网页。
1、制作网页的标题：输入文字，并设置文字的格式。
2、插入表格：单击“表格”中的“插入表格”并对表格属性进行设置。如：行、列的操作，对齐方式等。同时讲解什么是行，什么是列，以及单元格的概念。
3、修改表格：调整表格行高和列宽。
4、在学生学会插入表格的基础上，来设计网页，展示作品。并讲解在单元格中可以插入图片、文字。那我们就一起快快去做吧！插入图片，并在图片的上面或下面进行图片的注释。
5、进一步设置单元格的背景，来美化网页。
设计网页的作品讲解 第14篇
教学目标：
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、总结与评价
开展同学间的互助，检验其链接完成情况，推荐优秀同学做展示。引导学生分类总结本节课的知识点。
设计网页的作品讲解 第15篇
一、学习内容分析
《H5快速制作网页》是苏教版《初中信息技术》8年级第3章《主题网站设计与制作》第2节《制作网页》中第1课时的内容。H5是指第5代HTML标记语言，其搭建的站点可方便地应用于PC、Android、iOS等多种平台，它为互联网内容的呈现提供了一种全新的框架和平台，包括免插件的音视频、图像、动画、本地存储以及更多酷炫的功能。通俗地说，H5是一种创建网页的方式，用H5创建的网页以文字、图片、动画、声音等相结合的富媒体出现，页面图文并茂、生动活泼、传达方便、易于推广。
二、学习者分析
本节课的学习对象是八年级的学生，处于这一年龄段的学生，思维活跃，具备一定的理解能力和较强的自学能力。通过前面的学习，学生已熟练使用WPS、Photoshop等软件，也掌握了规划设计主题网站的方法。本节课以iH5软件工具为平台，学习用H5快速制作网页。然而学生从未接触过iH5，对于陌生软件的学习，有些畏难情绪，觉得无从下手。但是在日常生活中，他们经常能接触到各种各样的手机H5网页，如企业宣传、个人简历、邀请函、纪念册等，这些H5网页给大家带来了全新的体验，技术本身带来的新奇感让学生心生向往。
三、学习目标
过程与方法：通过制作校园文化艺术节邀请函，经历制作H5网页的基本过程。
情感态度及价值观：感悟网页制作并非难事，软件使用有共通之处。
四、教学过程
（一）创设情境，初认H5
以艺载德、以艺促智，一年一度的校园文化艺术节又开始了，同学们踊跃报名，比拼才艺。八年级将举行以“多彩校园，闪亮你我”为主题的汇报演出，充分展示八年级同学的青春活力和精神面貌。
思考：本次演出将要邀请家长参加，你会选择什么样的方式来做出邀请呢？（口头传达、短信、纸质邀请函等）
活动1：体验“校园文化艺术节邀请函H5”，初认H5。
二人一组，一位同学在手机浏览器中打开；另一位同学在电脑浏览器中打开（网址：https：//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软件。