最新网页制作教学设计(大全10篇)

良好的总结能够让我们更加明确自己的学习和工作方向。写总结时要准确把握要点和重点，突出核心内容，避免以次要的事项影响文章的重要性。在下面将呈现出一些具有代表性的总结示例，以供大家参考。

网页制作教学设计篇一

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

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

3.对进行展示的同学要进行简单培训（或者对各组长进行培训，由组长传达到展示者），防止展示时只宣讲他们网页中的内容，而忽略技术，浪费宝贵的时间。4.课堂即时评价很重要。学生初次接触一个软件，要经常收获一点成就感才有进一步探索的欲望，这就需要我们教师注意发现、及时鼓励。学科班长记录好大家的课堂参与情况，下课前公布，这项工作若坚持下来，对我们的教学会有很大促进。

网页制作教学设计篇二

【学情分析】。

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

3.对进行展示的同学要进行简单培训（或者对各组长进行培训，由组长传达到展示者），防止展示时只宣讲他们网页中的内容，而忽略技术，浪费宝贵的时间。4.课堂即时评价很重要。学生初次接触一个软件，要经常收获一点成就感才有进一步探索的欲望，这就需要我们教师注意发现、及时鼓励。学科班长记录好大家的课堂参与情况，下课前公布，这项工作若坚持下来，对我们的教学会有很大促进。

网页制作教学设计篇三

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

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

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

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

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

（一）情境导入。

生回答：通过网络发布，需要制作网页（如回答不在话题上，引导）。

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

（二）新课讲授。

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

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

教师演示启动frontpage20xx的步骤，启发学生：界面和学过的哪个软件比较相似？教师点击相关菜单，引导。由于都是office套件的一种，所以和word界面很相似，演示界面和功能。演示打开站点bpzx，站点打开后，观察网站文件夹的结构，介绍images文件夹与_private文件夹的作用。，代表的是网页文件。其中，表示网站的主页名称。点击视图下的网页，切换到网页窗口，点击文件夹，切换到站点文件夹窗口，点击bpzx站点文件夹，便于我们打开网页文件。

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

实践一：2个小实验。

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

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

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

师：是什么在起作用？

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

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

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

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

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

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

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

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

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

实践三：

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

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

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

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

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

文档为doc格式。

网页制作教学设计篇四

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、知识与技能：灵活运用添加超链接和在网页中插入表格方法，根据网页内容进行页面布局，完善网页,掌握网页布局的技能和技巧。

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

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

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

3、

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

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

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

4、

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

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

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

创设情境。

激发兴趣。

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

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

利用“表格”。

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

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

出示课题，介绍总任务。

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

学生进行分组。

为细化任务做准备。

出示任务。

明确分工。

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

学生明确任务。

明确总任务。

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

分工参考：

内容版式规划。

整理七个旅游景点网页。

超链接的建立与维护。

作品演示解说。

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

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

出示任务。

明确分工。

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

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

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

教师出示作品评价标准：

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

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

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

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

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

学生明确要求。

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

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

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

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

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

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

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

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

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

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

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

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

学生间相互交流探讨。

培养学生合作交流能力。

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

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

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

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

学生代表演示。

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

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

学生回答。

巩固知识，培养情感。

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

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

学生感悟。

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

全课总结知识延伸。

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

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

学生思考。

学生课后实践。

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

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

培养学生自发探究能力。

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

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

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

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

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

（

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

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

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

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

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

第________组组长________作品题目______________。

网页制作教学设计篇七

一、教学目标：

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、建设企业网站所遵循的一般原则。

（1）完整性原则。企业网站是企业在互联网上的经营场所，应该为用户提供完整的信息和服务：网站的基本要素合理、完整；网站的内容全面、有效；网站的服务和功能适用、方便；网站建设与网站运营维护衔接并提供支持。

（2）系统性原则。同时提供设计方案。设计实施单位应充分了解企业文化和企业机构及管理信息等基本情况，对营销目标、行业竞争状况、产品特征、用户需求行为以及网站推广运营等基本问题等要素融入到网站建设方案中。

（3）简单性原则。在保证网站基本要素完整的前提下，尽可能减少不相关的内容、图片和多媒体文件等，使得用户以尽可能少的点击次数和尽可能短的时间获得需要的信息和服务。

（4）友好性原则。网站的友好性包括三个方面：对用户友好——满足用户需求、获得用户信任；对网络环境友好——适合搜索引擎检索、便于积累网络营销资源；对经营者友好——网站便于管理维护、提高工作效率。

（5）适应性原则。企业网站的功能、内容、服务和表现形式等需要适应不断变化的网络营销环境，网站应具有连续性和可扩展性。

2、网站优化。

网站优化包括三个方面：对用户获取信息优化、搜索引擎优化、网站维护优化。

（1）网站栏目结构合理，栏目设置不要过于复杂；

（2）网站导航清晰且全站统一，通过任何一个网页可以逐级返回上一级栏目直到首页；

（3）网页布局设计合理，网站设计符合用户浏览习惯；

（4）重要文字信息尽可能出现在网页靠前位置；

（5）字体清晰，css风格协调一致；

（6）最多3次点击可到达产品详细内容页面；

（7）通过网站任何一个网页不超过3次点击可达到站内其他任何一个网页；

（9）网站首页、栏目首页及产品内容页面均有一定的文字信息量；

（12）每个网页有独立的url；

（13）产品内容页面url尽可能简短且体现出产品属性；

（14）产品/企业新闻详细内容页面是独立网页不是弹出窗口；

（15）对于产品品种多的企业网站，要有合理的产品分页方式；

一网站名称。

绿色的灵动。

二主题思想：

让原创精神穿越人群，在绿色的灵动中寻找创意。

三个人分工。

1、主页制作：（谢龙、李金洪、王海灏---环艺四班）。

2、设计模板制作：谢龙广告模板制作：李金洪摄影模板制作：王海灏。

3、网页设计策划书：（谢龙、李金洪、王海灏---环艺四班）。

四设计网页前的市场分析。

1、原创作品的意思就是内容不是抄录别人的，而完全是自己创作的，包括原创文学、原创音乐等等。

原创作品是对既定参照物的怀疑与否定，是在刷新固有的经典界面之后呈现出破土而出的生命气息，是在展现某种被忽视的体验，并预设着新的可能性；原创是可经过、可停留、可发展的新的存在，是新的经典的原型，具有集体共识的社会价值。

原创作品不是对既定状态的完善与提升，也不是对已有的存在的另类注解；注解可以发展原创，但不产生原创。原创作品也不是形式的突围表演，不是先锋理念的夸张与变异；反叛的行为具有对既定秩序与价值的否定，但不指向原创以及原创作品。

通过我的创作活动产生的具有文学、艺术或科学性质而以一定物质形式表现出来的一切智力成果（即作品），并且内容不是抄录别人的，而完全是自己创作的称为原创作品。

2、人群分析：原创一直作为一种青年人群的喜爱，中年人和青年人也是原创产品的主要创作群体。绿色能给青少年儿童一种生机和活力，能为失落者带来新的希望，让原创精神穿越人群。

五、创新点——绿色与原创。

分析：绿色为植物的色彩，绿色的明视度不高，刺激性不大，对生理作用和心理作用都极为温和，因此人对绿色的嗜好范围很大，给人以宁静、休息、使之精神不易疲劳。刚好也是大自然草木的色，所以绿色意味着自然、生命、生长，同时绿色也象征着和平。在交通信号中又象征着前进与安全。

原创作品是对在刷新固有的经典界面之后呈现出破土而出的生命气息，是在展现某种被忽视的体验，并预设着新的可能性；原创是可经过、可停留、可发展的新的存在，是新的经典的原型，具有集体共识的社会价值。

六、建设网页的目的及功能定位。

1、建立网页是为了和大众共享自己的原创作品并开展业务，是个人市场开拓的延伸。

2、根据网页功能，确定网页能够达到宣传和让客户更好的了解原创的目的。

七、网页内容及实现方式。

根据网页的目的确定网页的结构导航。

1、一般网页应该包括：首页、设计、摄影、广告、联系方式、在线留言等内容。内容包括：作品展示、视频、背景音乐及留言板块。

2、根据网页的目的及内容确定网页整合功能。

1、网页美术设计要求，网页美术设计一般要与企业整体形象一致，要符合企业ci规范。要注意网页色彩、图片的应用及版面策划，保持网页的整体一致性。

2、在新技术的采用上要考虑主要目标访问群体的分布地域、年龄阶层、网络速度、阅读习惯等。

（1）、在网站根目录中开设imagescommontemp三个子目录，根据需要再开设media子目录，images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner条、菜单、按钮等等；common子目录中放css、js,、php、include等公共文件；temp子目录放客户提供的各种文字图片等等原始资料；media子目录中放flash,avi,quicktime等多媒体文件。

（2）、在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images和media的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。

（3）、除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一天后的自己都看不懂。

九、网页测试。

网页发布前要进行细致周密的测试，以保证正常浏览和使用，主要测试内容：

1、服务器稳定性、安全性。

2、程序及数据库测试，网页兼容性测试，如浏览器、显示器。

3、文字、图片、连接是否有错误。

少采用大型图片，用户关心的信息在首页体现，不应多次点击；

•首页下载速度要快；

•首页有效信息量丰富；

•首页有标题；

•提供一种以上外语链接页面。

•主页布局比整洁，重要信息得以重点体现；

•打开网页不宜弹出多个窗口，影响正常浏览；

•不要刻意追求“创意”效果，以至于很难理解网站要表达的意思。

页面信息：

•重要信息完整，如联系方式和产品介绍等；

•页面信息足够，减少多次翻页；

•去除与企业形象、产品、促销等方面无关的信息；

•产品详细介绍内容过少；

•内容页面没有标题，或者全部使用公司名为标题；

•客户能够方便的及时维护补充，保持其时效性；

•不允许有无任何内容的栏目。

•注重美术效果，但不必大量采用图片，影响网页下载速度；

•页面不应过于花哨。

必须克服的问题：

（5）网站有利于促销：通过网站向访问者展示产品、对销售提供支持，有多种具体表现方式，如主要页面的产品图片、介绍、通过页面广告较好体现出企业形象或者新产品信息、列出销售机构联系方式、销售网店信息等，或者具有积累内部网络营销资源和拓展外部网络营销资源的作用。

适应现在越多的网络设备和应用的需要；

是web发展的趋势。可以使web平滑的过渡到xml。

3.使用xhtml严密。

与其它基于xml的标记语言、应用程序及协议进行良好的交互工。

网页制作教学设计篇九

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

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

一、情境导入。

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

二、新知探究。

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

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

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

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

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

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

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

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

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

三、作品评价。

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

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

四、总结。

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

网页制作教学设计篇十

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

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

三、学情分析。

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

四、教学方法。

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

教师活动：1、引入课题：（激发兴趣，活跃气氛）。

同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站）。

浏览新浪网站，浏览的第一个页面称为什么？（主页）。

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

问题1：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页，通过超链接把不同的页面链接起来）。

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

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

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

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

问：同学们看到了什么？（文件夹）。

总结：

可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。

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

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

fp的启动。

问：与word比较，有什么不同？

（增加了视图区，编辑区有三个窗口）。

总结：

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

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

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

html窗口：编写html（超文本标记语言，它是描述网页内容和外观的标准。）。

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

（教会学生利用导学课件，根据导学软件完成任务）。

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

教师巡视指导。

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

问：在文件夹列表中看到了什么？

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

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

教师巡视指导、总结反馈。

请学生示范，讲解如何插入图片（来自剪贴画与来自文件）、插入水平线，如何保存。

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

主页的保存中存在问题：

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

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

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

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

点评：

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

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

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

二、突出重点，及时点评。

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

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

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

四、重点突出、目标明确。

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

五、教学效果较好。

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