在平时的工作学习中，我们总少不了进行实用文档写作的机会，想写好实用文档类型的文章，不妨来参考一下本文。好范文为大家带来了《网页制作教学设计12篇》，希望对你的范文写作有所帮助。
本文是网友“xr9”收集的网页制作教学设计12篇，供大家阅读。
网页制作教学设计 篇1
网页的制作
一、教学题目：网页的制作
二、教学目标：
1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；
2、认识frontpage的界面；
3、掌握在主页中插入文字、图片、水平线；
4、掌握页面文件与图片的保存。
三、教学重点：
1、能在指定位置建立只有一个网页的站点（难点）
2、能在页面中插入文字、图片、水平线
3、掌握页面文件与图片的保存（难点）
四、教学难点：
在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。
五、教学过程：
教师活动：
1、引入课题：（激发兴趣，活跃气氛）
同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站）
浏览新浪网站，浏览的第一个页面称为什么？（主页）
我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。
问题1：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页，通过超链接把不同的页面链接起来）
问题2：网页是不是就是主页？(第一个页面称为主页，网站设计者可以确定哪一个是主页，主页的文件名一般为：,主页也是网页)设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet上，让所有的人访问浏览。
今天我们学习用frontpage建立站点，制作一个主页。先来研究一下没有发布的网站，打开教师做的网站 问：同学们看到了什么？（文件夹）总结：
可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。
打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。请学生浏览教师课件，了解学习任务。
2、新建站点
frontpage的启动 问：与word比较，有什么不同？（增加了视图区，编辑区有三个窗口）总结：
视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面。
普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式。
预览窗口：浏览器中出现的效果，与powerpoint中的“放映幻灯片”类似。html窗口：编写html（超文本标记语言，它是描述网页内容和外观的标准。）打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。
任务1：学生根据导学课件，在d:建立自己站点 请一位学生示范如何建立站点，教师总结。问：在文件夹列表中看到了什么？
分析多出的文件夹列表栏，多了一个文件夹，里面有两个子文件夹和主页，图片存放在images文件夹中。
3、编辑主页与保存主页
看效果图，请学生分析主页中的元素
总结：鲜明的主题，如：我的世界、我的宠物等，有分割页面的水平线，与主题相关的图片，对网站的简单介绍
根据导学软件，学生完成任务2：设计主页、保存主页与图片
4、总结反馈
请学生示范，讲解如何插入图片（来自剪贴画与来自文件）、插入水平线，如何保存
总结：必须切换到“普通”窗口下编辑 主页的保存中存在问题：
单击“文件”---“保存”或工具栏的“保存”按扭，弹出一个对话框，保存嵌入式文件，改变文件夹，图片必须保存在本站点images文件夹中，便于站点的管理。
5、请学生继续完成自己的主页，有能力的同学完成提高篇
六、小结：
展示学生作品，教师与学生共同评价 请学生总结今天的学习内容：建立包含一个页面的站点，主页的设计与保存。
网页制作教学设计 篇2
教学目标：
1、让学生掌握在网页中插入表格的方法以及表格的修改
2、学会利用表格来规划网页
3、培养学生创新的能力以及动手操作的能力
教学重、难点：
利用表格来规划网页，从中培养学生的创新能力
教学过程：
一、情境导入
同学们你们善于观察吗？老师先考考你们，我们一起来看一组图片，你们看看在那里看过呢？学校缓台的窗台上。你们的观察能力真的很强啊，对，这些都是我们学校美术的特色作口，盘画。其实，我们做过很多作品：有手工作品，语文课中的作文、书法等都是作品，这节课我们以绘画作口品为例，做一个学习园地网页，把我们的作品展示到自己的班级网站中，以便我们更好的努力学习。现在我们就一起来制作吧！
二、新知探究
首先我们来打开上节课的班级网站，在这个网站中新建一个网页，并保存成“学习园地”。
教师讲解：如何制作学习园地网页。
1、制作网页的标题：输入文字，并设置文字的格式。
2、插入表格：单击“表格”中的“插入表格”并对表格属性进行设置。如：行、列的操作，对齐方式等。同时讲解什么是行，什么是列，以及单元格的概念。
3、修改表格：调整表格行高和列宽。
4、在学生学会插入表格的基础上，来设计网页，展示作品。并讲解在单元格中可以插入图片、文字。那我们就一起快快去做吧！插入图片，并在图片的上面或下面进行图片的注释。
5、进一步设置单元格的背景，来美化网页。
6、设置超链接：通过导航栏目，设置文字超链接。选中文字，点击右键选择超链接在列表中选择你要链接的网页，单击“确定”按钮。
7、学生在教师的讲解后，学生自己动手操作制作网页。教师进行指导。（伴随音乐）
三、作品评价
1、生评：从网页设计上，美观程度上，知识落实上重点评价。
2、师评：对学生作品进行评价，并对其它学生的评价加以更完整的解释。
四、总结
我们这节课主要是利用了表格来设计网页，以使来美化我们的网页，通过绘画作品的展示，学习更多的知识。
网页制作教学设计 篇3
1、教学目标知识与技能：灵活运用添加超链接和在网页中插入表格方法，根据网页内容进行页面布局，完善网页,掌握网页布局的技能和技巧。
过程与方法：培养学生加工信息和应用信息的能力及培养学生思维能力，规划能力、创新能力、及合作能力。
情感与态度：使学生感受中国源远流长的历史文明，并通过网页传递给世界；帮助学生树立良好的信息道德意识；让学生享受成就感，树立自信心。
2、学生分析初中二年级学生感知能力较强,理解能力和抽象思维较弱;学生基本学会使用在网页中插入表格的方法，但分析信息、处理信息和应用信息能力较弱;对教学内容的了解程度较强。
3、内容分析
教学重点：利用表格对网页页面进行布局。
教学难点：怎样合理、美观地设计网页页面布局。
此部分教学内容在整个网页设计知识体系中处于综合处理信息的重要部分。
4、教学策略设计
（1）．教学方法设计
我根据教学主题及其教学目标确定的教学指导思想是以学生为主体，以学生自己的亲身体验展开探究式小组合作学习。本节课采用研究体验式教学法,建构主义模式下的任务驱动式教学法组织教学。首先设计“总任务”，再细分成若干“小任务”，实现教学目标。
（2）．教-学流程和教-学活动的设计思路
整个教学活动，尤其是学习活动，我采用探究式学习法，又称研究性学习，我强调的是学生在教师指导下，根据各自的兴趣、爱好和条件，再结合与自己有相同或相近的兴趣、爱好的同学组成合作伙伴，共同选择西安不同的旅游景点，确定研究课题，借助“表格布局”功能规划七天的旅游行程，独立自主结合小组合作开展研究，进行合理的网页布局设计，达到从中培养创新精神和创造能力及审美能力的一种学习方式，实现“双赢”。建构主义学习理论认为，学习过程不是学习者被动地接受知识，而是积极地建构知识的过程，把学过的网页设计知识综合应用起来，由于建构主义学习活动是以学习者为中心，而且是真实的，并且以完成特定的任务为动力，因而学习者就更具有兴趣和动机，能够鼓励学习者进行批判型思维，能够更易于提供个体的学习风格，展现自己的独特思维，不受现有网页模式的拘束。基于构建主义的探究性学习模式，我的设想是整个教学过程是动态的，学生是学习的主体，教师是学生学习环境的创设者、学习动力的激发者、学习过程的指引者和学生学习的协作者。
（3）．应用信息技术的依据或考虑
信息技术在本次教-学活动有不可替代的功能。利用信息技术中计算机技术进行网页设计，实现教学目标，完成让世界各地的人实现“网上游古都”。在教学中计划通过探究式教学方式，小组合作学习方式和“任务驱动式”教学策略，自主设计网页，发布网页，运用网络使信息技术的这些潜在优势发挥作用并真正促进学生能够结合实际应用，通过自主实践，完成“网上游古都”任务，并同时完成了学习任务，进一步建构了自己的知识体系，并实时地享受到巨大的成就感。
（三）、教与学的过程
1．教与学的过程
活动内容
教师活动
学生活动
设计意图
创设情境
激发兴趣
［创设情境］
“要想了解中国上下五千年文明历史，请到西安来！”近几年，越来越多的外地游客涌向西安。“十一黄金周”即将来临，大家想不想用网页形式向外地游客介绍宣传西安，让更多的人来西安，领略其古老的魅力！我们上节课把利用搜索引擎找到的有关西安的历史文物古迹的文字信息和图片信息整理制作成有关不同景点的网页，但信息是否显得很零散？怎样把景点信息整合规划，让人们先在网上一饱眼福，轻松网上游古都？
设计一个含有指向各旅游景点网页的超链接的主页。
提供信息活条件，激发起学生的兴趣。
［导语］
我们可在主页中制作一个西安旅游景点导航栏，但怎样合理规划各旅游景点，并且使页面布局美观，整洁，分类清晰？
利用“表格”。
为细化任务埋下伏笔;并且激发学生的认知冲突。
［出示课题］
今天我们就围绕“西安七日游”，在主页中利用表格规划设计旅游行程，本节课的课题是《“黄金周”—规划网上西安七日游》
学生明确本节课课题，初步了解任务。
出示课题，介绍总任务。
［分组方法］
根据对各旅游景点的兴趣及当初搜索信息的分工情况及本节课任务分工，四人一小组。
学生进行分组
为细化任务做准备
出示任务
明确分工
［出示总任务］
每个组围绕主题，利用表格规划设计旅游行程，并建立好超链接，利用主页展示出来。
学生明确任务
明确总任务
［作品形式及分工参考］
形式：创建并完善主页，并展示整个网站。
分工参考：
内容版式规划
整理七个旅游景点网页
超链接的建立与维护
作品演示解说
学生明确汇报形式，分工参考。
使学生明确各自任务后，通过研究，探讨，操作，通过电脑媒体来完成任务。
活动内容
教师活动
学生活动
设计意图
出示任务
明确分工
[角色分工]
学生自由分组后,共同研究选组长，组长进行给组员分配任务。
学生共同研究选组长,并协调分配好任务.
锻炼学生自主协调分工能力。
［出示作品评价标准］
教师出示作品评价标准：
作品内容：设计含有七个链接网页的主页，资料丰富，内容准确。
技术表现：页面布局设计合理，颜色搭配和谐，主题突出，作品演示运行正常，操作熟练。
创新特色：作品布局规划有独特之处，有新意。
提示学生有三条帮助热线：
1、组长2、邻座学习伙伴3、教师4、自学课件
学生明确要求。
培养学生的创新能力，规划能力，思维能力和合作能力。
学生研究探索合作交流创作作品
［创作作品］
播放舒缓音乐，为学生营造自由和谐气氛。
（提示学生利用网上邻居把各组员的作品组合在一起，共同完成此任务。）
学生根据角色分工，按小组形式开始完善网站。
学生体会了超链接的作用，练习了超链接的使用，理解了表格强大的页面布局功能；培养学生处理信息和应用信息的能力；通过学生间交流合作，老师及时点拨与指导，培养学生发现问题和解决问题的能力。
［展示作品］
下面请各组派代表，到教师机前展示以下你们的旅游行程。其他同学观察后，可提意见或建议。
由小组代表展示组内作品，并详细说明旅游景点规划的呈现形式，内容选择及整体构思。
锻炼学生口语表达能力和分析说明问题能力。
合作成功展示作品成果汇报交流探讨
［交流探讨］
教师引导学生探讨页面布局的方法和技巧；谈看完作品后，对其改进意见；进行组间互评和组内自评。
评出“最受欢迎奖”（即如果此网站上传到网上，点击率最高），“最具创意奖”“最佳布局奖”作品。
学生间相互交流探讨。
培养学生合作交流能力。
［教师点评及检测］
教师从页面布局，整体规划合理性，创意等几方面进行点评。
学生思考，怎样完善作品。
教师鼓励学生发展创新思维，页面布局规划能力，逻辑思维能力及合作能力。
教师或其他同学提问页面布局的方法。
学生代表演示
及时检测学生对表格的掌握情况。
你受到的最大启示和收到的最大收获？成功经验和失败教训？
学生回答
巩固知识，培养情感
[完成旅游规划，培养情感]
同学们已熟练掌握表格的使用方法，并且加工和应用信息的能力增强。
悠久的历史积淀和丰富的人文资源，使西安居中国六大古都之首，是世界四大文明古都之一，著名的旅游中心城市。希望你们热爱中国博大精深的历史，感受西安古老的魅力！
学生感悟。
全课总结，培养道德情感。
全课总结知识延伸
［达到目标，知识延伸］
网站制作好了，怎样让世界各地的人都看到你们的网站呢？
想当我们的故乡—大庆的小导游吗？赶快制作一个“铁人故乡—大庆”的网站吧！
学生思考。
学生课后实践。
为激发下一节课内容（上传主页）的兴趣奠定基础。
让学生可把本课内容应用到实际生活中去。
培养学生自发探究能力。
2．关键环节提炼
利用信息技术创设情境，播放一段自拍的录像，内容大体是：一位外国友人，想要来中国四大古都之一“西安”旅游，但想要自助游，想借助因特网，先在网上了解一下西安，并参考一下旅游行程。通过此录像激发学生兴趣并利用信息技术呈现问题，使学生产生认知冲突，培养学生发现问题、分析问题、解决问题的能力。我通过学生利用信息技术完成此项任务，促进学生对基础知识、基本技能的学习。我利用信息技术，尤其是网络提供的有关“西安”丰富的旅游景点介绍资源，帮助和拓展学生的学习。让学生借助信息技术手段开展探索、总结并进行创作。我利用信息技术展示学生自评，学生互评，教师评价的评价表，为学生的学习提供评价、反馈和矫正。我利用网页自学课件和网络教室教学广播系统支持师生间、生生间的交流对话。
3.教学反思
本节课主题明确、集中，让学生分成小组，合作探究学习，给出特定的总任务，有利于学习效果评判的可比较性，也便于学生之间的广泛交流和良性竞争。通过利用信息技术规划规划网上西安七日游，对西安七个主要景点的介绍，让世界了解西安，每个学生在共同完成“网上游古都”网站作品后，让每个学生都有完成任务和宣传中国源远流长的文明历史的成就感，并感到自豪。
本节课，在小组合作学习过程中，学生之间互学互教，彼此交流探讨，经历了提出问题、分析问题和解决问题过程，每个学生都承担一定学习任务，防止滥竽充数，促进了学生的参与程度、认知深度，高质量地实现了课程的目标，增强学生的责任感。但个别学生没有认识到合作学习的重要意义，自主探究能力较弱，容易丧失信心。
教学实际实施过程，有学生提出：我对中国的少数民族文化感兴趣，能否制作一个宣传中国五十六个少数民族文化的特色网站？于是我了解到学生对中国的不同文化感兴趣，可在课外活动小组完成此任务或作为课外自主探究性学习课题来探究。
本节课让学生掌握了“表格”的妙用，还提高了加工信息和应用信息的能力，而且使学生感悟到了中国上下五千年的博大精深，对祖国更加热爱。
（四）、教学评析：
在新课程标准的理念中，明确提出要关注全体学生，建设有特色的信息技术课程。在教材因篇幅的限制，提供给学生感知的背景材料极其有限，“信息”且都处于“静止、储存”状态，不利于学生的感知和抽象概括。因此，允许教师在不改变教材内容、体系、结构的前提下，经教学法的加工，营造引入新课的“情境问题”的氛围。学生在积极的参与、体验、研究并在已有知识经验的支持下，自主能动地探索，实现知识的再创造。
教学活动在面向全体的同时更注重学生情感的交流协作意识与因材施教。更注重学生个性培养和创新智能的开发。
学生自主性学习，需要有一个适应的过程，开始阶段，布置任务要明确具体。
学生之间的交流和帮助比较少，自主学习的能力还要不断提高等。
附：学生学习过程及典型成果
另附：小组成员分工表
第组组长作品题目
小组成员
主要负责工作
网页制作教学设计 篇4
教学目标：
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、总结与评价
开展同学间的互助，检验其链接完成情况，推荐优秀同学做展示。引导学生分类总结本节课的知识点。
网页制作教学设计 篇5
教学目标：
1、让学生掌握在网页中插入表格的方法以及表格的修改
2、学会利用表格来规划网页
3、培养学生创新的能力以及动手操作的能力
教学重、难点：
利用表格来规划网页，从中培养学生的创新能力
教学过程：
一、情境导入
同学们你们善于观察吗？老师先考考你们，我们一起来看一组图片，你们看看在那里看过呢？学校缓台的窗台上。你们的观察能力真的很强啊，对，这些都是我们学校美术的特色作口，盘画。其实，我们做过很多作品：有手工作品，语文课中的作文、书法等都是作品，这节课我们以绘画作口品为例，做一个学习园地网页，把我们的作品展示到自己的班级网站中，以便我们更好的努力学习。现在我们就一起来制作吧！
二、新知探究
首先我们来打开上节课的班级网站，在这个网站中新建一个网页，并保存成“学习园地”。
教师讲解：如何制作学习园地网页。
1、制作网页的标题：输入文字，并设置文字的格式。
2、插入表格：单击“表格”中的“插入表格”并对表格属性进行设置。如：行、列的操作，对齐方式等。同时讲解什么是行，什么是列，以及单元格的概念。
3、修改表格：调整表格行高和列宽。
4、在学生学会插入表格的基础上，来设计网页，展示作品。并讲解在单元格中可以插入图片、文字。那我们就一起快快去做吧！插入图片，并在图片的上面或下面进行图片的注释。
5、进一步设置单元格的背景，来美化网页。
6、设置超链接：通过导航栏目，设置文字超链接。选中文字，点击右键选择超链接在列表中选择你要链接的网页，单击“确定”按钮。
7、学生在教师的讲解后，学生自己动手操作制作网页。教师进行指导。（伴随音乐）
三、作品评价
1、生评：从网页设计上，美观程度上，知识落实上重点评价。
2、师评：对学生作品进行评价，并对其它学生的评价加以更完整的解释。
四、总结
我们这节课主要是利用了表格来设计网页，以使来美化我们的网页，通过绘画作品的展示，学习更多的知识。
网页制作教学设计 篇6
《网页制作》教学设计
一、教材分析
《网页制作》教学是信息基础必修教材中第六章第1节信息集成中网站制作简介的有关内容。编辑网页所使用的是软件是Frontpage2000，该软件的使用与以前所学的word有类似的地方，软件操作具有一定的迁移性。二、学情分析
学生在之前已经学习了word的有关操作，具备网上获取信息和一定的信息处理能力。Frontpage2000的使用与word有很多类似的地方，学生较容易上手。三、教学目标
知识与技能：了解网页的基本元素；掌握网页制作中网页元素的应用；懂得利用表格布局网页的基本思想；
过程与方法：通过实践体验对比，得出结论。亲历网页制作的过程。情感态度与价值观：在与同伴合作完成简单网页的制作过程中，培养与他人合作交流的意识和习惯，通过设计学校网页，培养学生热爱学校的情感。四、教学重点、难点
教学重点：网页制作中网页元素的应用 教学难点：利用表格布局网页 五、教学方法：合作探究法、任务驱动 六、教学过程
（一）情境导入
师：用PPT展示一组美丽的学校风景图片，师生共同欣赏。同学们一看就知道这是我们白蒲中学的风景图片。我校曾被评为江苏省十佳花园学校，请大家思考一下如何让更多的人了解我们学校的美呢？大家有什么好的方法吗？
生回答：通过网络发布，需要制作网页（如回答不在话题上，引导）
师：本节课我们就一起来学习制作《美丽的蒲中校园》网页，宣传学校的美。学校将组织评选同学们设计的优秀网页作品，放在学校网站上。（二）新课讲授
师：这里，老师挑选了去年学生设计的优秀网页作品，我们一起来欣赏。展示校园页面，提问：这个页面中由哪些元素构成的？
生：文字、图片、动画、声音、超链接等。
师：网页里的这些元素是通过什么工具集成起来的呢？在这里，老师向大家介绍office2000中的frontpage2000来制作网页，它具有功能强大、简单易用的特点。
教师演示启动frontpage2000的步骤，启发学生：界面和学过的哪个软件比较相似？教师点击相关菜单，引导。由于都是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动画的插入 教师展示一部分学生的作品，点评，小结。学生再次练习完善。
师：刚才，同学们的表现都非常出色，要想使自己的网页更漂亮、更受欢迎吗？ 实践三：
任务一：美化页面 操作小贴士：
操作右击网页空白处，“网页属性”，“常规”，输入标题。切换到“背景”，设置背景色。设置背景图片：可勾选“背景图片”，“浏览”。
任务二：打开页面，对“美丽校园”创建超链接到。操作小贴士：
创建超链接：选定文字，“插入”、“超链接”，选定超链接的网页。学生合作学习，教师巡回辅导。教师展示学生作品，点评，小结。
教师提醒学生，做好后的网页，在浏览器里预览，发现有边框线，如何解决？ 学生自主探究。三、课堂总结
网页制作教学设计 篇7
《网页设计》教学总结
本学期计算机科学与技术系软件工程专业的《网页制作》课程由我负责，学生共74人，及格率100%。其中90分以上的没有，80分以上的只有几个，大多是在70～80之间，也有一小部分在60～70之间。成绩不是很理想，总体来说大多数学生平时上机实践比较积极、踏实，能够自觉的按照老师的要求去做，但也有少数学生自觉性差，需要老师和学委催促。现将一个学期的教学情况总结如下：
一、老师给与学生合理的引导，更要加强自身的素质修养，提高自己的知识水准。
在整个教学过程中，在教学过程中自己还缺少更高的艺术修养和艺术创造能力，所以还要不断的学习；另外就是技术上还需要完善，也需要和有经验的老师多交流，多沟通。相信只有站在一定的高度去看整个项目的实现，会更通俗易懂也更有说服力，所以也不能说都是学生的原因，归结起来还是要提高自己的知识水平和业务素质！
二、了解学生，加强考核。
针对全体学生来说，聪明程度相当，但学习兴趣层次不同，大部分学生只愿意听后选择性的接受，而没有知识的创新利用，或者是没有下去自学，巩固知识，单一的只是听和做。有的同学，上完课后根本就直接把书丢在一边置之不理。综合学生的学习态度问题，个人认为还需要加强考核制度，从严制学，宽进严出，严肃考风！
三、教学内容心得
1.网页制作要简洁大方。网站在设计过程中以简洁大方为主，配合合理的颜色搭配和主题内容的诠释，给访问者赏心悦目的感觉；而避免过多的动画和帧的过多运用，以及不明确的导航，杂乱的颜色，没有主题的胡编乱造。2.网站风格要统一。所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，也会对你的网站留下一个 “很专业”的印象。
知识运用中要大量配合合理的模板、CSS样式的运用而避免在网页中反复的字体样式重定义颜色的胡乱运用，参差不齐给人杂乱的感觉。
3.网站布局合理。避免一些“拿来主义”，一些学生为了设计方便，拿网上流行的模版做网页，做出的网页几乎是千篇1律，没有特色，虽然完成了网页的制作，毕竟不是出自个人之手，知识缺乏进一步巩固，且让浏览者产生厌倦。另外导航清晰化，能引领浏览者阅读网页，思路一定要清晰，避免交叉链接。
4.网站容量要小。虽然网页更加美观可以吸引浏览者，但是图片，动画容量大会影响浏览速度，所以一定要注意网络容量问题。图片尽量压缩，多采用单一色，或者简单的颜色；动画要尽量简洁实用，用最少的帧做出最漂亮实用的动画，给网页增色。
但是总体来说，通过整个学期网页制作的学习，学生已经了解了网页制作所需要的基本技术，也掌握了网页制作的基本技能。但由于时间紧迫，知识点多，一些重点难点问题还需要勤加练习，比如：静态网页中的布局和CSS 的定义；动态网页中对象的综合运用等等。当然也存在着遗憾，不少学生反映，学习爱好更多的是动画的制作即 Flash的学习，而我们只是笼统的讲解，不能完全满足学生的求知欲！当然针对网页制作来说，还需要加强学生的配色观念以及审美观的培养，以及动态网页的实现技术的把握，在很多方面还需要老师和学生们进一步配合，共同学习和实战，以达到知识运用的一定高度！
网页制作教学设计 篇8
《网页制作》教学设计
一.教材分析
《网页制作》是浙教版《信息技术基础》第六章第二节的内容，它以“北京故宫”网站为例，介绍了网页制作的一般步骤。本文设计了两个实践体验“设计制作网站主页”和“设置超链接”，而这恰好是制作网站最重要的两个环节。《网页制作》这一部分的内容不仅在会考还是高考都是一个专题模块，因此这部分知识在整本书中占有举足轻重的地位 二.学情分析
高中的学生只要在初中上过信息课，他们都曾接触过制作网页制作的简单操作，而且大部分都上过网，对网页的布局、设计和制作带来了方便。教材中采用的网页制作软件是FrontPage2000，由于FrontPage2000采用了与Word等其他Office软件相类似的图形操作界面。在第三章，学生已经学过了Word字处理软件。因此，学生对FrontPage2000的启动、关闭、文件操作、文字编辑和图片处理都会有一种似曾相识的感觉，这种知识的迁移对后续的学习非常有利。三.教学目标
（一）知识与技能
1、FrontPage2000的启动
2、新建与保存网页
3、主页命名与设置网页标题
4、文字与图片的插入及属性的设置（如文字大小、字体、颜色等，图片大小、格式转换、环绕样式等）
5、表格的插入及边框粗细的设置
6、单元格的合并于拆分
7、超链接的制作
（二）过程与方法
1、通过简单网站的制作，认识网站的结构
2、通过网页的制作，掌握设计网页的一般步骤
3、欣赏别人的网站，学会规划与设计网页的能力
（三）情感态度与价值观
1、通过自行制作的网站，体验创造的乐趣和成功的喜悦
2、通过欣赏和评价优秀的网站，激发学生创作欲望和学习兴趣 四.教学重点和难点
重点：
1、文字与图片的插入
2、表格的应用
3、超链接的设置
难点：
1、如何安排文字与图片的位置关系，使页面更和谐
2、如何拆分与合并单元格，使表格的布局更为合理 五.教法与学法指导
教法：任务驱动法 演示法
学法：小组合作法 探究法 六.教学准备
本节课的学习是在机房中进行的，除了需要连成局域网的机子外，还需带广播功能的软件，如极域软件等。教师准备一个优秀的网站及一些制作网站的素材 七.教学策略与总思路(或总环节框架)
学生是学习的主体，应掌握学习的主动权。本节课的设计，以提升学生的自主探究能力以及分析问题、解决问题等能力为目标。本节课刚开始通过名人并且是制作优秀的个人网站展示，让学生分析网站中的元素，然后通过任务驱动的方式，让学生自主探究如何制作这些元素，接着通过小组合作的方式来制作他们喜爱的站，最后来交流和评价他们的作品。八.教学过程
（一）情景创设（2’）
展示“姚明”的个人网站，学生不仅看到了他们的偶像，更重要的是被精美的网页所吸引。接着要求学生通过阅读课本，提问1：网页中所包含的元素有哪些？提问2：这些元素是如何制作的？
【设计意图：通过欣赏“姚明”的个人网站，吸引学生们的注意力，激发他们的学习兴趣。同时为引出下面的知识做好铺垫】
（二）新课讲授（2’）
1、文字的插入：复制－粘贴
2、文字属性的设置：选中文字，再按要求在文字工具栏上选中相应的值
3、图片的插入：插入－图片－来自文件
4、图片格式的转换：右击图片－图片属性－常规－类型
5、图片的环绕样式：右击图片－图片属性－常规－样式－格式－定位
6、表格边框粗细的设置：右击表格－表格属性－边框粗细
7、单元格的合并与拆分：选中要合并的单元格或要拆分的单元格，再右击
8、超链接的对象：既可以是文字也可以是图片
9、常见超链接的类型：①链接到网址②链接到本地网页文件③链接到电子邮件
【设计意图：这个环节老师只花2分钟的时间，点到即止，告诉学生碰到问题可以在操作提示中去寻找帮助（由于之前学生学过word，所以有些操作能力比较强的学生可以不借助于提示），并不做详细的操作演示。因为它包含在下面操作任务的提示中，目的在于培养学生自主探究能力】
（三）实践体验
任务一：将“”另存为“”,并设置网页的标题为“2010年上海世博会”（2’）
【设计意图：让学生掌握网页的主页一般命名为“”，同时掌握网页标题的设置】
任务二：在单元格5中插入素材文件夹中“”文字，并设置字体为4号、宋体、黄色；在单元格8中插入素材文件夹中“”图片,要求图片与文字为左环绕样式，同时将bmp格式转换为jpg格式（3’）
【设计意图：让学生掌握文字与图片的插入，文字属性的设置和图片格式的转换以及图文混排（环绕样式）】
任务三：让学生制作和下面一样表格的网页首页，不需要插入真正的图片和文字，模仿即可，但在预览时表格的边框是看不到的。（5’）
图片
超链接1 超链接2 超链接3 超链接4 超链接5
图片+文字 图片+文字 图片+文字 图片+文字 图片+文字
版权
【设计意图：让学生掌握表格的插入，边框粗细的设置及单元格的合并或拆分，这里仅仅是模仿，为以后的创新打基础】
任务四：给其中的一个超链接（超链接1－5中的任何一个）设置为有效的超链接，链接到素材文件夹中的“”（4）
【设计意图：让学生掌握超链接的设置】
【设计意图：实践体验这个环节所有的操作均有操作提示，学生可直接上FTP去下载，当然有能力的学生可省去这个步骤。这个环节纯粹是为了练兵，掌握本节课的知识点，并没有按照学生的意愿去设计他们的作品】
（四）作品制作（20）
4个学生一组去设计他们感兴趣的网站，这个网站至少要有一张主页，一张分页，有能力的同学当然可以多设计几张分页。所有素材都有教师提供。具体分工为：1人收集素材，2人制作网页，1人负责解说他们设计的网站
【设计意图：如果说“实践体验”那个环节束缚了学生思维的话，那么这个环节学生可以充分发挥他们的想象，可以综合运用所学的知识去设计自己想要的作品。这个环节不仅可以起到巩固知识的作用，同时学生们也可以体验通过小组合作成功设计出他们自己作品所带来的喜悦。】
（五）交流评价（5’）
评价的依据：
Ⅰ、网站中是否至少有一张主页，一张分页，主页是否命名为 Ⅱ、网页中是否有文字与图片要素
Ⅲ、超链接是否有效
Ⅳ、文字与图片混排是否和谐
Ⅴ、网页布局是否合理（表格是否用得恰当）
Ⅵ、作品内容是否有意义，积极向上
Ⅶ、网站的整体感觉是否给人“美”的享受
【设计意图：这个环节不仅能够培养学生们的解说与欣赏能力，同时通过作品的比较与交流，可以起到查漏补缺的作用，让学生们更好地认识自己的作品，从而更好的掌握某些知识技能的应用】
（六）课堂小结（2）
本节课主要介绍了制作网页的一般步骤，如何设计主页与分页以及他们之间的超链接，如何在网页中插入各种元素以及如何设置元素的属性让网页看起来更和谐，更美观。
设计意图：巩固本节课所学的知识，并引导学生学以致用】 评委会点评
优点：各教学设计环节清晰，描述恰当，分析合理。教学过程的设计符合新课程理念，突出学生的主体地位。
缺点：知识与技术目标缺少程度描述，教学过程设计较理想化。
网页制作教学设计 篇9
《网页制作》教学设计
阜新市第十八中学
彭勇
一、教材依据
辽宁师范大学出版社 初中信息技术八年级上册，第二单元《网站设计与制作》，活动1“创建个人网站”以及活动2中的关于部分FrontPage2000的内容。
二、设计思想
【教学指导思想】
信息技术课是一门实践性很强、极富创造性、具有明显时代发展性特点的课程。而现代教育理论提倡以学生为中心，强调学生“学”的主动性，学生是信息加工的主体，教师的作用体现在组织、指导、帮助和促进学生的学习、充分发挥学生的主动性、积极性和创造性，从而使学生最有效地进行学习，达到最优的教学效果。因此本课题遵循“教师主导，学生主体”的设计理念，让学生在教师的引导下，对所学的内容进行探索、分析、研究，在实践操作中培养学生科学的态度和价值观，同时培养学生的学习兴趣。
【教学对象分析】
.学生的知识能力
教学对象是八年级的学生，这一阶段的学生正处在抽象逻辑思维逐步形成的过程中，但形象思维仍是获取知识的重要思维方式。而本节课中涉及到的HTML语言有其枯燥难懂的一面，学生在理解上存在着一定的难度，所以教师在教学设计中希望能通过学生自己的双眼、双手以及思考来发现新知识，从而减轻他们对新知识的畏惧、降低理解的难度。
.学生心理特点分析
初中学生活泼好动、好奇心强、求知欲旺、视野广泛，对信息技术充满兴趣，大部分学生都能熟练使用浏览器浏览网页，他们对上网和网页有着极大的兴趣。所以在本课题中教师利用学生的这种心理设计了一个趣味导入，从趣味引入学生感兴趣的网页，使学生在课堂中保持着较高的学习积极性。
【教学内容分析】
本节课是新授课且是第二单元《网站设计与制作》的第一节课，教师将这节课的重心放在了“启下”上，目的是激发学生的学习兴趣和他们的求知欲，为顺利开展以后的教学活动打好基础、做好铺垫。本节课的教学内容有两个方面，一是初识HTML语言，二是初识FrontPage2000的窗口组成。教师设计的重点并不是让学生充分理解HTML语言的结构，而是通过HTML语言能够有效地引出制作网页的软件FrontPage2000，继而使学生能顺其自然产生使用FrontPage2000制作网页的兴趣。
教学内容的整合：课本上将初识HTML语言和FrontPage2000的窗口组成分在了两个活动中，考虑到信息技术课一星期一个班只有一节课，如果第一节课只讲HTML语言，不涉及制作网页的软件FrontPage2000，会令学生感到枯燥，同时这种枯燥感很可能会维持一个星期直到下节课，这样学生对制作网页的兴趣就远不如将两个教学内容结合起来的高，也不利于今后的教学活动开展。所以教师将本节课的重心放在让学生理解HTML语言与FrontPage2000之间的联系上。
三、教学目标
【知识与技能】
（１）了解网页与网站的有关知识；
（２）了解HTML标识性语言的功能及结构；
（３）认识构成网页的基本元素；
（４）了解常用的制作网页的软件；（５）了解网站策划与定位的重要性，掌握网站的规划流程；
（６）了解网站设计软件FrontPage2000的窗口组成；
（７）学会设计有意义的网站主题，收集网站相关资料，画出网站的结构图。【过程与方法】
（１）趣味导入新课的内容，极大地发挥学生主体、教师主导的作用；
（２）适时引导学生产生新的问题，再通过教师的讲解与演示、对比和学生的自主学习来解决问题。
【情感态度与价值观】
（１）强烈的求知欲激发学生的学习兴趣和学习积极性；
（２）了解信息技术的前沿知识后，学生会对信息技术课保持新鲜感和兴趣感；
（３）学生在不断实现自己主体地位的同时，也获得了新知识，更从中体会到了学习的快乐。
四、教学重点和难点
重点：
1、认识构成网页内容的基本元素，理解网页布局的特点；
2、了解HTML标识性语言的功能及结构；
3、学会启动FrontPage2000，了解网站设计软件FrontPage2000的窗口组成，理解各组成部分的功能；
4、网站主题的确立，规划网站结构图，学会创建新站点的基本方法。
难点：
1、理解HTML标识性语言的结构及应用HTML语言编写简单网页；
2、网站如何定位；
3、如何收集网站的相关信息；
4、在导航视图模式下建立网站结构。
五、教学准备
①搜集常用的网页制作软件的相关信息；
②打开多媒体电脑教室的教师机和学生机，保证电脑教室的广播系统工作正常；
③共享班级文件夹；
④示例的班级网站及网页。
六、教学模式选择
“学生主体，教师主导”的教学模式。
七、教学过程
1.情境引入： 向学生展示一组优秀网站、网页，激发学生创作自己个人网站的兴趣和欲望。学生在观看，欣赏网站时，受到激励产生想制作一个网页的冲动。在师生欣赏网页作品时复习回顾已学并已淡忘的基础知识。问题：网页的构成元素及布局？教师分析案例，与学生共同回顾文字的插入、图片的插入和设置、动画的插入和设置、表格的相关操作等相关知识。让学生在案例中回顾基础，激发灵感。并引入本节主题，自己动手制作网页。
2.展示模板：
教师向学生展示本节课要完成的网页。要求学生会模仿制作出该网页模板，并能够自己创作出新的网页模板。
3.本节任务：
1）网页与网站有什么区别？
2）一个网页由哪些元素组成？对照给出的网页分析网页的组成元素—标题图片，标题栏，水平线，滚动字幕，图片，文字及背景等等。
3)用Photoshop 处理素材，达到给出网页中图片标题，并设计出突出自己主题的网站标题。拓展：用photoshop软件，画图软件，或flash软件设计自己需要的网页图片。4）要求学生会模仿制作出该网页模板，并能够根据自己确立的主题制作一个网页模板。学生自主完成模板仿制，并自主探究设计一个复合自己设计主题的网页模板。小组内成员可相互交流，教师巡视，随时解决学生在学习过程中遇到的问题，并注意收集有共性的问题，并适时给以学生以点拨。尤其关注一下学困生。
5）小组选出最佳模板，探究完善此模板，然后以此模板设计网页。4.评价展示：
作品完成，提交给教师机，自我评价，小组互评，选出小组最佳作品提交展示，师生共同赏析评价，挖掘作品优点，并指出改进之处。培养大家的审美能力，并挖掘大家的创新能力。
5.课堂小结
师生共同回顾这节课的基础知识与基本技能，并加强网络道德意识，注意版权。
八、教学反思
在信息技术教学中，必须以新的教学理念和教学理论为指导，根据新的课程标准，探索适合信息技术课堂教学的教与学的新策略和新模式来挖掘学生潜能，提高学生素质。
以前我总认为信息技术课就是教会学生如何操作，课堂中总是采用“教师讲，学生听”的传统模式，是“学”跟着“教”走，只要“我说你做”就可以了。现在我尝试着做一些改进，在本课题中围绕“学生主体、教师主导”的设计理念去设计每个教学环节，积极体现学生的主体作用，努力提高学生的学习效果。
实践证明我的想法是好的，但是在实践中难免有疏忽和做的不够细的地方。比如：由于我的观察不全面，忽略了个别学生学习中的心理障碍，有些学生的畏难情绪影响到他的整个学习效果；课堂学习气氛热烈但不够和谐。这些都说明了一个问题：我仅仅注重了学生整体主体的体现，而忽略了个体。经过思考，我认为在这节课的教学设计中可以多增加个体展示的机会，特别是那些学习有困难的学生，我应该多关注他们的动态，多帮助他们。
本课的教学目标是掌握使用FrontPage制作网页的基本方法；重点是掌握在网页中插入文字和图片的方法；难点在于插入表格规划网页的结构。
备课时，发现教材以一个标题，一张图片以及一篇文章的简单结构示例，如果完全依照教材进行授课，势必无法突破难点。于是设计了一个将学生前期制作的环保报刊，利用FrontPage软件制成网页的环节来帮助学生突破难点。并取学生环保报刊中具典型结构的五份。制作出引导学生分析结构，规划框架的演示片备用。
课堂以自主探究的模式展开，同学们在以往的学习中已掌握了在Word中插入表格、图片等方法，在FrontPage中他们很顺利地完成了教材呈现的目标。基本掌握了单张网页的制作方法。
接下来就是突破难点的训练。面对演示片呈现出的任务及教材相关提示。此时，问题集中到如何插入一个布局表格来实现规划好的结构。而教材上完全没有提示学生探究FrontPage “表格”与Word “表格” 功能的异同。少数同学开始试着插入适合自己网页结构的框架表格，而大部分的同学则完全没有考虑结构问题，做起直接的搬移，将FrontPage当成Word来用。直到出现无法将图片，文字放置到设想位置时，才意识到教材中“FrontPage通常用表格来安排网页中各种内容（文章、图形等）的版面位置。”这问话的含义是否明确。急着寻求解决的办法。我便让哪些意识到要先插入适当结构框架表的学生来说说他们的想法。并及时出示与学生思维一致的演示片，将探究FrontPage “表格”功能的提示呈现给他们。同时利用极域教室的功能，向全体同学展示同伴的探究结果，让学生不同的思绪方式及智慧产生碰撞，相互启示，顺利突破教学难点。
网页制作教学设计 篇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、知识与技能：
（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邮箱页面等，引导学生总结本课内容，梳理课堂知识，并让学生分组，推荐一些优秀作品进行全班展示。
设计意图：开拓学生的视野，使学生了解框架的应用，教会学生要善于总结，要学会学习的方法。
网页制作教学设计 篇12
一、教学目标：
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、本节课是在学习完简单网页、表格布局网页、交互式网页的基础上，进一步页的设计方法。由于学生已经具备了一定的网页设计基础知识与技能，所以教师可以根据学生的实际情况，采用更灵活
的教学方法。教师可以简单介绍框架结构网页的功能及框架的建立与编辑方法，以及框架属性设置与网页属性设置的方法与区别。然后由学生根据教师提供的学案及演示动画，完成框架网页设计任务。