网页的制作教学设计网页制作教学设计(模板8篇)

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

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

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

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

3、

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

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

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

4、

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

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

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

创设情境

激发兴趣

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

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

利用“表格”。

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

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

出示课题,介绍总任务。

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

学生进行分组

为细化任务做准备

出示任务

明确分工

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

学生明确任务

明确总任务

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

分工参考:

内容版式规划

整理七个旅游景点网页

超链接的建立与维护

作品演示解说

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

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

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

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

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

教师出示作品评价标准:

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

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

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

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

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

学生明确要求。

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

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

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

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

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

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

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

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

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

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

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

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

学生间相互交流探讨。

培养学生合作交流能力。

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

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

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

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

学生代表演示

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

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

学生回答

巩固知识,培养情感

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

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

学生感悟。

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

全课总结知识延伸

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

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

学生思考。

学生课后实践。

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

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

培养学生自发探究能力。

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

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

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

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

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

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

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

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

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

第________组组长________作品题目______________

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

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

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

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

一、情境导入

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

二、新知探究

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

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

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

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

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

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

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

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

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

三、作品评价

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

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

四、总结

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

一、教学题目:网页的制作

二、教学目标:

1、知道站点、主页的概念,能在指定位置建立只有一个网页的站点;

2、认识frontpage的界面;

3、掌握在主页中插入文字、图片、水平线;

4、掌握页面文件与图片的保存。

三、教学重点:

1、能在指定位置建立只有一个网页的站点(难点)

2、能在页面中插入文字、图片、水平线

3、掌握页面文件与图片的保存(难点)

四、教学难点:

在教学中,一方面采用比较教学的方法,促进学生知识的迁移;另一方面,提供学生一个导学课件,让学生根据这个网络环境下的课件自己探索学习,以满足不同层次学生的需求。

五、教学过程:

教师活动:

1、引入课题:(激发兴趣,活跃气氛)

同学们喜不喜欢上网?经常上新浪、西祠胡同等,有没有同学知道新浪、西祠胡同称做什么?(网站)

浏览新浪网站,浏览的第一个页面称为什么?(主页)

我们还可以浏览其它的页面,点击超链接浏览,当鼠标变成手指的形状时有超链接。

问题1:网站是不是就是网页?用自己的语言描述一下网站的概念(网站包含多个网页,通过超链接把不同的页面链接起来)

问题2:网页是不是就是主页?(第一个页面称为主页,网站设计者可以确定哪一个是主页,主页的文件名一般为:,主页也是网页)设计网站一般必须经过两个步骤,首先是在计算机里做好,然后发布在internet上,让所有的人访问浏览。

今天我们学习用frontpage建立站点,制作一个主页。先来研究一下没有发布的网站,打开教师做的网站问:同学们看到了什么?(文件夹)总结:

打开主页,浏览页面,这是老师做的一个导学课件,将帮助大家完成学习任务。请学生浏览教师课件,了解学习任务。

2、新建站点

frontpage的启动问:与word比较,有什么不同?(增加了视图区,编辑区有三个窗口)总结:

视图区:多种视图模式是为了方便网站的管理。制作网页时,必须在网页视图中编辑页面。

普通窗口:鼠标在闪动,可编辑、修改页面,所见即所得的方式。

预览窗口:浏览器中出现的效果,与powerpoint中的“放映幻灯片”类似。html窗口:编写html(超文本标记语言,它是描述网页内容和外观的标准。)打开导学软件,根据步骤,示范建立只有一个网页的站点,强调新站点的位置、路径的正确输入,站点的名称。

分析多出的文件夹列表栏,多了一个文件夹,里面有两个子文件夹和主页,图片存放在images文件夹中。

3、编辑主页与保存主页

看效果图,请学生分析主页中的元素

根据导学软件,学生完成任务2:设计主页、保存主页与图片

4、总结反馈

请学生示范,讲解如何插入图片(来自剪贴画与来自文件)、插入水平线,如何保存

总结:必须切换到“普通”窗口下编辑主页的保存中存在问题:

单击“文件”---“保存”或工具栏的“保存”按扭,弹出一个对话框,保存嵌入式文件,改变文件夹,图片必须保存在本站点images文件夹中,便于站点的管理。

5、请学生继续完成自己的主页,有能力的同学完成提高篇

六、小结:

展示学生作品,教师与学生共同评价请学生总结今天的学习内容:建立包含一个页面的站点,主页的设计与保存。

《网页制作》教学是信息基础必修教材中第六章第1节信息集成中网站制作简介的有关内容。编辑网页所使用的是软件是frontpage20xx,该软件的使用与以前所学的word有类似的地方,软件操作具有一定的迁移性。

学生在之前已经学习了word的有关操作,具备网上获取信息和一定的信息处理能力。frontpage20xx的使用与word有很多类似的地方,学生较容易上手。

过程与方法:通过实践体验对比,得出结论。亲历网页制作的过程。情感态度与价值观:在与同伴合作完成简单网页的制作过程中,培养与他人合作交流的意识和习惯,通过设计学校网页,培养学生热爱学校的情感。

教学重点:网页制作中网页元素的应用

教学难点:利用表格布局网页

(一)情境导入

生回答:通过网络发布,需要制作网页(如回答不在话题上,引导)

师:本节课我们就一起来学习制作《美丽的蒲中校园》网页,宣传学校的美。学校将组织评选同学们设计的优秀网页作品,放在学校网站上。

(二)新课讲授

生:文字、图片、动画、声音、超链接等。

师:网页里的这些元素是通过什么工具集成起来的呢?在这里,老师向大家介绍office20xx中的frontpage20xx来制作网页,它具有功能强大、简单易用的特点。

师:刚才同学们的都非常好,在制作网页前,我们先来放松一下,来玩拼图。请同学们打开d盘的《网页制作》学案,完成实践一。

实践一:2个小实验

实验1:启动frontpage后,点击“文件”“打开站点”,找到d盘下的bpzx文件夹。双击文件夹列表里的文件,学生尝试拼凑图形。

学生操作,发现实验1中的图形总有1个无法拖动,拼凑不成功,实验2在表格中拼凑图形成功。

教师启发学生思考,引导学生观察一开始出示的网页,发现图片、文字、动画等网页元素排列整齐。

师:是什么在起作用?

师生共同得出:利用表格布局网页。得出:表格的定位。

师:利用表格的布局功能。表格的'布局功能可以对页面元素进行定位,使网页清晰美观、富有条理。表格中可以包含多种类型的内容,如图像、文本、多媒体文件。

师:在网站文件夹里有一张利用表格布局的“美丽的蒲中校园”网页,今天,老师要请你们当网页设计师,完成“美丽的蒲中”网页制作。制作学校风景,需要什么样的素材?学生回答:图片。老师已经预先把素材准备好了,大家可以打开acde浏览素材,选择合适的素材。

实践二:双击文件夹视图里的。

任务一:请大家从d盘的sucai文件夹中,从7张校园风景图片中挑选其中一张,插入网页表格的适当位置。文字材料直接从sucai文件夹中的word文档中复制。注意页面的保存,保存时要注意:网站中用到的图像、声音、视频文件应有条理地存放到指定文件夹中。当保存图片时,要把图片保存到images文件夹中。

学生自主操作,4人一组合作学习。教师巡回辅导。操作中的操作步骤要点参考《网页制作》学案。

任务二:在单元格中各插入gif图像动画、欢迎字幕和flash动画,,以实现页面的动态效果。注意保存和预览。

可能的问题:1、图片属性设置2、flash动画的插入教师展示一部分学生的作品,点评,小结。学生再次练习完善。

师:刚才,同学们的表现都非常出色,要想使自己的网页更漂亮、更受欢迎吗?

实践三:

任务一:美化页面操作小贴士:

操作右击网页空白处,“网页属性”,“常规”,输入标题。切换到“背景”,设置背景色。设置背景图片:可勾选“背景图片”,“浏览”。

任务二:打开页面,对“美丽校园”创建超链接到。操作小贴士:

创建超链接:选定文字,“插入”、“超链接”,选定超链接的网页。学生合作学习,教师巡回辅导。教师展示学生作品,点评,小结。

教师提醒学生,做好后的网页,在浏览器里预览,发现有边框线,如何解决?学生自主探究。

文档为doc格式

网页的制作教学设计篇五1、知识与技能:

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

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

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

2、过程与方法:

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

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

3、情感态度与价值观:

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

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

1、教学重点:

(1)、框架网页的作用和功能,框架的建立与属性设置。

(2)、框架中各个页面之间的关联,每个框中页面的设置方法。

(3)、框架网页的保存方法。

2、教学难点:

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

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

1、创设情境、导入新课

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

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

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

2、任务驱动、自主学习

(1)、教师展示一个框架网页,引导学生理解框架网页的概念。

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

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

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

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

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

3、展示作品、课堂小结

(2)、教师点评,并鼓励完成作品比较好的学生。

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

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

一、教学目标、知道站点、主页的概念,能在指定位置建立只有一个网页的站点;、认识frontpage的界面;、掌握在主页中插入文字、图片、水平线;、掌握页面文件与图片的保存。

二、教学重点、能在指定位置建立只有一个网页的站点(难点)、能在页面中插入文字、图片、水平线、掌握页面文件与图片的保存(难点)

三、学情分析

学生已经学习了word、powerpoint与上网浏览信息,对计算机的基本操作(word中文档的编辑,网页的浏览等)比较熟练。这使得学生主动探索、自主学习成为可能。每位学生必须完成基本任务,有能力的学生还可以完成提高篇的学习,以充分发挥学生的积极性与自主性。

四、教学方法

五、教学过程设计

教师活动:1、引入课题:(激发兴趣,活跃气氛)

问题2:网页是不是就是主页?(第一个页面称为主页,网站设计者可以确定哪一个是主页,主页的文件名一般为:,主页也是网页)

设计网站一般必须经过两个步骤,首先是在计算机里做好,然后发布在internet上,让所有的人访问浏览。

今天我们学习用frontpage建立站点,制作一个主页。

先来研究一下没有发布的网站,打开教师做的网站

问:同学们看到了什么?(文件夹)

总结:

打开主页,浏览页面,这是老师做的一个导学课件,将帮助大家完成学习任务。

请学生浏览教师课件,了解学习任务、新建站点

fp的启动

问:与word比较,有什么不同?

(增加了视图区,编辑区有三个窗口)

视图区:多种视图模式是为了方便网站的管理。制作网页时,必须在网页视图中编辑页面

普通窗口:鼠标在闪动,可编辑、修改页面,所见即所得的方式

预览窗口:浏览器中出现的效果,与powerpoint中的“放映幻灯片”类似。

html窗口:编写html(超文本标记语言,它是描述网页内容和外观的标准。)

打开导学软件,根据步骤,示范建立只有一个网页的站点,强调新站点的位置、路径的正确输入,站点的名称。

(教会学生利用导学课件,根据导学软件完成任务)

任务1:学生根据导学课件,在d:建立自己站点

教师巡视指导

请一位学生示范如何建立站点,教师总结

问:在文件夹列表中看到了什么?

教师巡视指导、总结反馈

总结:必须切换到“普通”窗口下编辑

主页的保存中存在问题:

教师巡视指导、教师与学生共同评价总结

展示学生作品,教师与学生共同评价

请学生总结今天的学习内容:建立包含一个页面的站点,主页的设计与保存。

注:课件中包含每一个操作过程的操作步骤及拓展的知识、基本任务与提高任务的效果图。

点评:

教学课题“网页制作”作为初中阶段的最后一部分内容,难度较大,教学的深度较难掌握。这就要教师在备教材的基础上,同时还要备学生,做到对学生的情况有较为深刻地了解,以便很好地完成教学任务,达到预期的教学效果。根据教材和《中小学信息技术课程指导纲要(试行)》中的精神,本课应以“任务驱动”的方式完成,一方面教会学生了解和熟悉具体软件的基本功能,另一方面又能主动地掌握并深入学习思考。寻着这个思路授课教师在课前作了大量的课前准备制作出了相应的教学课件“网页制作”。

一、调动学生的学习热情,变被动学习为主动学习

整个教学过程张云老师采取了“引导加任务驱动”的模式进行。首先教师进行导入,导入概念,强调概念;再引导学生学习课件的使用,引导他们读懂课件中的第一个任务:建立一个只有一页的网站,(此处若能引导学生,由学生来完成,减少老师的操作,效果会更好),然后让学生模仿第一步的操作进行下面内容的学习,完成导学材料中给出的一个个任务。

二、突出重点,及时点评

张云老师在引导学生进行学习、操作后,就主动地去观察和发现学生中出现的问题,甚至于课前对可能出现的问题,也进行有预见性地准备;发现问题及时点评。(点评分为个别点评和全班点评,点评不等于教师将操作过程演示一遍。张云老师在点评建成的网站时,重点若再突出些,介绍再清楚些,效果会更好。比如:站点中内容说明不够清楚等。)

三、发挥学生的协作学习精神

张云老师在教学过程中,对有困难的学生进行个别辅导,同时还需发挥学生的协作学习的精神,充分调动学生学习的积极性,让学有余力的学生充当“小老师”,从而体会到学习的乐趣。(整个教学过程中,这点做地不够,没有充分地让师生互动起来)

四、重点突出、目标明确

最后,张老师在整个教学过程中,应再突出教学重点,明确本节课的任务。(课前的导入,最好给出教学目标,课后的小结应让学生总结他本堂课学习到哪些知识,所以感觉这节课重点不突出,内容分散。)

五、教学效果较好

由于张云老师在课前对本课作了大量的准备工作,课件制作效果较好,所以学生完成情况很好,教学任务完成情况较好。

山东省昌乐二中滕学梅

【学情分析】

1.在学习网页制作之前,学生进行了网站的规划与设计,还没有就网页制作真正着手练习,对frontpage的使用比较陌生,但是已经有word等软件的操作基础,很多基本的操作可以迁移过来。并且,通过高一的学习与养成,学习小组的整体意识已经建立,组内合作、组间竞争的氛围已经形成,所以可以采用先进行自主练习,然后合作探究,通过各组推荐的作品展示进行评价,在展示的同时也提高了学生的技术水平。

课前准备:提前做好小组座次安排,由学科班长组织大家按组入座。

一、展示导入,明确学习目标(3分钟)

1.展示精彩网页(如北京大学、清华大学网站首页),引导学生简单分析网页风格。2.明确本节课学习目标与主要任务。

二、指导与点拨(3分钟)

三、基本功练习(10分钟)

1.任务:快速“克隆”示例网页。(素材发到桌面“基本功练习”文件夹中)

(2)每组的“技术顾问”完成任务后可下座指导;(3)完成后相互检查超链接的效果。

四、制作主题网页(15分钟)

2.具体要求参看导学案“实践探究”部分;可两人合作,有能力者最好独立完成;

五、作品推选、上传:每组推选一个作品参加组间评选,并将作品文件夹传至ftp。

六、精彩展示(10分钟)各组派一代表向全班展示自己的作品,并简介操作要点。展示前,引导全体学生积极思考以下问题:

1.你从展示作品中学到了什么?有哪些可借鉴之处?

注:1.学生展示过程中,教师要引导大家规范操作,对于重点加以强调。2.提醒学科班长记录参与展示和积极质疑、解答的同学,汇入评价。

七、完善提升:(5分钟)

1.借鉴所展示作品的优秀之处,进一步完善自己的作品;2.根据展示同学的演示,将新学到的操作尝试一遍。

八、总结:

1.网页制作要领:(1)灵活运用基本操作;(2)版面设计清晰、条理,或者有独特之处;(3)配色和谐,给人美感;(4)超链接顺畅、自由,方便使用。2.由学科班长公布本节课评价统计情况。

【教学反思】

1.在学生自主练习过程中,适时指导很重要,但教师一人肯定不能照顾全体学生,所以充分发挥学习小组的“技术顾问”的作用很关键。

2.在“制作主题网页”环节,给学生准备四个不同的主题素材是很有必要的,我们在进行教学设计时要考虑到学生个性、兴趣不同,并加以利用,促进教学。

THE END
1.网页界面设计网页界面图片网页界面模板觅知网为您找到129个原创网页界面设计素材,包括网页界面样式,网页界面图片,网页界面样本,网页界面格式下载服务,更多关于网页界面模板就来觅知网。https://www.51miz.com/so-sucai/2748364.html
2.11个简单的HTML网页制作模板分享给你!1、电商类 HTML 网页制作模板 模板首页使用清晰美观的产品图片和视频,在清楚的展示产品的各个角度和重要细节的同时也可以吸引用户的注意力,模板包括注册、产品展示、页尾设计,页头设计,登录页设计等网页 UI 界面,供大家免费使用。 点击图片,免费使用同款 HTML 网页制作模板 https://js.design/special/article/simple-web-authoring-templates.html
3.网站建设制作免费网站模板Canva可画免费网站制作工具,拖拽式操作简单易上手,免费模板导出图片无水印,还有丰富的网站模板和网站素材可供选择,助你轻松在线制作出精美的网站!https://www.canva.cn/website-builder/
4.16个精美的公司网站设计欣赏,耳目一新!下午5点领导突然说,小P你来做一下咱们公司网站,明天上午先给我看几版(没具体数字就是5+),小P不慌不忙的打开了Pixso资源社区,保守估计明天可以给领导看6版公司网站设计稿。今天给大家分享Pixso资源社区的16套公司网站设计模版,提升设计师的工作效率,输出的设计文件更https://pixso.cn/designskills/gongsiwangzhansj/
5.网页设计素材网页设计图片网页设计素材图片下载熊猫办公为您找到400个网页设计素材图片,包括网页设计图片,网页设计素材,网页设计背景,网页设计模板源文件下载服务,包含PSD、PNG、JPG、AI、CDR等多种格式的素材,更多关于网页设计素材、图片、背景、矢量、UI、PS、免抠,艺术字、插画、配图等设计素材模板https://www.tukuppt.com/speciall/wangyesheji9303.html
6.网页设计模板,网页设计制作网站01、企业网站建设流程详细 02、公司网站制作多少钱 一、网站制作流程步骤: 第一步:注册自助建站平台账号 百度搜索【码云数智】,在【码云数智】自助建站平台注册账号,产品类型选择-企业网站 网页设计模板,网页设计制作网站 第二步:网站页面自定义装修设计 展开剩余76% 评论https://m.sohu.com/a/819075981_121199056/
7.网站制作网页模板图片免费下载网站制作网页模板素材千图网为您找到744张网站制作网页模板相关素材,千图网还提供网站制作网页模板图片,网站制作网页模板素材, 网站制作网页模板模板等免费下载服务,千图网是国内专业创意营销服务交易平台,一站式解决企业营销数字化、协同化,实现营销转化效果增长!https://www.58pic.com/tupian/wangzhanzhizuowangyemoban.html
8.80套经典精美网页设计模板html模板打包分享/国内外优秀网页模板/html5我收集的80套经典网页设计模板html模板,Bootstrap扁平化网站模版,并且无密打包分享。里面还有国内外优秀网页模板,可以直接简单的修改就可以作为自己的主页。内容是大气漂亮的html+css网站模板。 不同种类,不同行业、不同风格的网页模板归好类别了,需要网页设计的朋友可以下载借鉴。 里面有博客个人、餐饮美食、单页、地产https://blog.csdn.net/hmz856/article/details/135452867
9.网页设计制作网站模板参考,优质图文展示网页设计这是一款网页设计制作网站模板参考,优质图文展示网页设计,图文并排展示,独特的导航栏设计,充分响应式页面,喜欢的小伙伴不要错过哟。https://www.17sucai.com/pins/56172.html
10.网页模板,网站模板免费下载,做网站首选模板无忧模板无忧是国内最具人气的网站模板、网页模板下载站,提供网站模板、网页模板、程序模板下载及建站相关素材、教程资源。众多专业模板设计师,新模板每日更新http://www.mb5u.com/
11.网站模板设计图片网站模板设计素材网站模板设计高清图片站长素材(sc.chinaz.com)提供网站模板设计图片免费下载,用户可以在这个素材网站找到:网站模板设计图片,网站模板设计素材,网站模板设计高清图片,网站模板设计图片下载,网站模板设计图片大全等,54(个数)张高清图片素材免费下载和在线预览服务。http://sc.chinaz.com/tu/wangzhanmobansheji.html
12.网页设计制作图片网页设计制作素材图片大全智能精选为您提供丰富的网页设计制作图片素材,网页设计制作配图,网页设计制作插图,网页设计制作图片素材下载。助力您对于网页设计制作配图插图的创意设计灵感,充实饱满作品,查找更多配图插图作品选择摄图网下载https://699pic.com/image/wangyeshejizhizuo.html
13.个人网页制作个人网页设计模板个人网站模板下载学生简单个人学生个人网页制作设计模板采用DIV CSS布局制作,共4个页面:个人介绍页面、相册列表页面、作品展示页面、留言表单页面。整体页面宽度1100PX,使用CSS制作了网页背景图,导航部分简单制作了鼠标经过变色效果。 个人网主页模板作品下载后可自行修改,所看到的文字都可以编辑修改,图片可直接在文件夹中替换覆盖。可使用Dreamweaver、https://www.stu-works.com/html/geren/323.html
14.网站网页设计模板素材网站网页设计模板图片魔力设图片素材库提供网站网页设计模板图片下载和在线设计,包括网站网页设计模板图片、网站网页设计模板素材、网站网页设计模板。即可下载PS源文件素材,也可以直接在线编辑制作,无需PS,1分钟快速出图。http://www.51mo.com/search/250446.html
15.模板王模板王精选上万个网页模板免费下载,提供html模板、个人网站模板、企业网站模板、DIV+CSS模板、响应式网站模板、手机网站模板等免费网页模板下载大全。https://www.mobanwang.com/
16.易企秀免费H5模板AI在线设计海报视频数字人MOGU设计 51 H5 会员免费用 高端商务红色蛇年年会盛典活动招商加盟会议邀请函 啾啾设计 129 H5 会员免费用 长辈老人寿宴生日宴会活动邀请函h5模板 梦想家工作室 31 H5 会员免费用 中国风元旦祝福贺卡新年祝福元旦产品宣传 守望设计 37 H5 会员免费用 红色医疗美容品牌招商加盟峰会展会邀请函 https://www.eqxiu.com/
17.创客贴平面设计作图神器免费设计模板创客贴,极简好用的平面设计作图软件,在线图片编辑器,免费使用.提供免费设计模板,有海报、名片、公众号图片、PPT、邀请函等65个场景模板,一键搞定设计印刷https://www.chuangkit.com/
18.网站模板ps素材图片素材懒人建站提供网页素材下载,提供网站模板素材、图片素材、ps素材、素材库等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。https://www.51xuediannao.com/
19.网站文章南京网站制作网站建设小程序开发设计在现代社会,网页已经成为企业、个人展示和宣传的重要窗口,因此掌握网页制作技能是非常有必要的。今天,我们将为大家介绍8款优秀的网页设计模板网站,哪怕是小白也能帮助你快速搭建出令人惊艳的网页。 一、即时设计 即时设计是一款支持在线协作的专业级 UI 设计工具,用户数已突破230万,支持 Sketch、Figma、XD 格式导入,http://www.anyouy.cn/anyouwz/37865.html
20.网页设计定制/divcss切图/H5页面UI设计定价50元的目的是方便每一个客户拍付款,具体费用依据您的具体要求来定,铭捷科技,6年设计经验,高端定制,原创设计,前端制作,满意为止。具体请联系客服人员咨询! 售后服务 售后服务范围1、服务器配置及主机购买推荐 2、模板使用范围内问题免费咨询 3、模板免费一次安装,需提供FTP/MYSQL/域名(不提供服务器、远程、本地http://www.jzmb.com/Zengzhi/555.html
21.网页设计简历模板列表(含个人简历范文)简历本是一个免费的简历网站,提供海量教育/传媒/广告行业网页设计个人简历模板,包括教育/传媒/广告行业网页设计求职找工作简历模板、教育/传媒/广告行业网页设计个人简历模板、教育/传媒/广告行业网页设计Word简历模板、教育/传媒/广告行业网页设计英文简历模板、教育/传https://www.jianliben.com/muban/tpl_263/
22.企业网站建站模板网页制作模板自助模板建站建网站公司网站功能 可视化设计器及管理后台 页面 限7个 图片 限100个 新闻 限20个 产品 限20个 SEO设置(搜索引擎排名优化) 万能表单 限1个 智能翻译 会员管理 电商及支付 云资源配置(标配,无需单独购买) 云服务器及数据库 文件上传空间1G下载流量400G 网页空间100G/访问流量不限 https://ac.aliyun.com/application/webdesign/sumei2022
23.学生网页设计制作作业网页制作作业成品网页设计作业帮我作业网为有作业需求的大学生和代做作业的个人或商家提供信息交流平台,主要针对计算机方面:网页设计作业,网页制作作业,网页制作成品,计算机毕业设计代做,asp php asp.net c# java jsp动态网页作业,毕业设计论文等专业的课程作业, 期末作业和毕业设计。qq:182681http://www.85work.com/
24.PPT模板PPT模版免费下载免费PPT模板下载第一PPT - WWW.1PPT.COM - PPT背景图片,PPT模板免费下载! 下载帮助|文章投稿 欢迎进入第一PPT模板网,海量PPT素材,幻灯片背景图片,PPT模板免费下载,专注PowerPoint素材下载! 通用PPT模板 简洁模板 淡雅模板 商务模板 艺术设计 卡通动漫 浪漫爱情 自然风景 https://www.1ppt.com/
25.bootstrap模板网页设计模板免费下载简洁响应式Bootstrap后台管理系统模板 黄色精品大气电影预告片网站模板_黄色 精品 大气 电影 影视 预告片 全屏 漂亮 自适应 黑色 图片 相册 展示bootstrap手机 响应式 html5 整站 png,jpg708k 作品集:董先生网页模板1000款 董先生_8 7个月前 UX Design设计公司官网响应式模板_黑色 整站 大气 漂亮 设计 UX Desighttp://pay.5open.com/ui/web/bootstrap_template/
26.大学生网页设计制作作业实例代码(全网最全,建议收藏)HTML+CSS+基于HTML+CSS+JavaScript仿淘宝购物商城设计毕业论文源码 点击查看? web期末作业设计网页——开平碉楼(20页)HTML+CSS+JavaScript 点击查看? HTML5期末考核大作业 基于HTML+CSS+JavaScript仿王者荣耀首页 游戏网站开发 游戏官网设计与实现 点击查看? HTML网页制作代码——简约的旅游图文相册博客HTML模板(12页)HTML+CSS+Javhttp://zhangshiyu.com/post/51164.html
27.网站建设网页设计—免费网页设计制作网站网站建设随着技术的不断发展,网站建设的门槛逐渐降低,许多自助建站平台如雨后春笋般涌现,为广大用户提供了更加便捷的网站建设服务。其中,aipage建站作为一款备受推崇的免费网页设计制作网站工具,备受关注。aipage建站是一款简单易用的自助建站平台,用户无需具备专业的技术背景,即可轻松创建自己的网站。平台提供了丰富的模板、组件和https://aipage.baidu.com/article-ai/BAwwQkeW
28.网页模板设计素材HTMLCSSCMS模板免费下载宽屏背景大气旅游公司模板是一款bootstrap模板,带有视差效果,不错。 svg2m 作品集:董先生网页模板1000款 董先生_8 1年前 宽屏背景大气旅游公司模板是一款bootstrap模板,带有视差效果,不错。 HTML5网页设计服务公司网站模板 svg4m 作品集:html网页模板大全130款 https://www.aigei.com/ui/web/
29.个人主页博客web网页设计制作web大学生个人网站作业模板HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 二、作品效果 视频演示 https://live.csdn.net/v/embed/240025 https://www.jianshu.com/p/f724ba4b235e
30.网站设计软件下载网站美化软件网页设计软件网站设计软件里面有很多专业性的软件,有免费版可以进行下载,工具众多功能强大,可以快速设计出需要的网站,制作出有出色使用体验的界面,内部有众多模板可以进行参考,更加方便用户操作,设计更加简单,快来试试吧!http://www.downyi.com/key/wangzhanshejiruanjian/
31.青柠设计在线海报设计平台青柠设计是一款免费在线设计工具,主打海报在线设计,覆盖常见的设计样式,五分钟在线完成设计;操作简单,一个账号多个平台通用编辑,可登录青柠设计网页版,青柠设计app,青柠设计小程序同步编辑;做海报,banner、logo在线设计认准青柠设计官网。https://www.qingning6.com/