2022年《网页中的表格》教学设计.docx

《2022年《网页中的表格》教学设计.docx》由会员分享，可在线阅读，更多相关《2022年《网页中的表格》教学设计.docx（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -学习必备 欢迎下载网页中的表格教学设计一、教学设计部分教学内容分析本课的主要内容与位置网页中, 常用表格来对网页中其它元素定位,将复杂的元素有条理的分布到网页各个位置 网页布局； 另外, 当我们把表格的宽度定为固定像素值后,仍能保证网页布局不会随浏览器窗口的大小变化而变化,当我们在网页中输入文字的时候,就可以让文字顶满格后自动换行,便利我们对文字的编辑；由此可见,网页中只有利用表格进行布局,才能称得上真正意义上的网页设计；本课与前后内容的关系利用表格布局网页,将上一节设计的网站首页中的各种素材进行合理的分布,

2、是对同学进行网页设计技能上的提升；利用表格布局网页也是整个网站设计中一个特别重要技术手段,应用特别广泛；教学目标分析学问目标 / 技能目标学问目标懂得表格在网页设计中的重要作用；技能目标把握使用表格布局网页；敏捷把握表格调整的方法；过程与方法目标能够合理利用表格对网页进行布局和规划；情感态度与价值观目标明白学校概貌,发觉校内之美,懂得法规与方圆的关系,养成良好的生活和学习习惯；细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 1 页,共 7 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - -

3、- - - -学习必备 欢迎下载本课的重难点重点和难点：把握利用表格对网页进行布局的方法本课的课时安排建议一课时教学策略设计建议教法建议由于关于表格的基本操作（插入表格、 调整表格： 调整行高或列宽、 合并或拆分单元格、插入或删除行或列、平均分布行或列）在 Word中已经有较具体的操作方法；在本课教学过程中,老师教学的重点应放在由同学探究以上基本操作的基础上的表格的使用 如何利用表格布局网页,让网页中的素材合理的在网页上分布；另外,网页模板是提高建站效率的有效手段,老师要留意引导同学对网页模板的使用；学法建议留意观看和借鉴样板网站中表格的运用情形,刚开头使用表格设计网页时可将其边框粗细的值设为

4、 1,以观看调整表格的过程,从而把握表格调整的技巧；教学资源与环境建议本课教学资源索引1其次课的半成品网页：Index htm、Parents htm教学评判建议自评、互评、师评要留意的问题同学制作的网页是否通过表格的布局达到美化、整齐和排列有序的目的；教学过程参考案例第一阶段：导入新课,明确学习目标细心整理归纳 精选学习资料 教学老师活动同学活动设计理念 第 2 页,共 7 页 环节 - - - - - - - - - - - - - - - - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -学习必备欢迎下载从同学身边最

5、熟指导同学“ 读一读” ,争论两幅图之间的导相像之处；阅读,争论、摸索、悉的环境入手, 导入他们生疏的知师：校内内的建筑通过道路和绿化带进行回答；识点,帮忙同学通入区域上的划分, 网页中的素材是通过表格过对二者的比较新进行合理的支配,但如何支配呢？懂得新学问；课这就是本节课的学习内容 网页中的 表格；其次阶段：范例精讲,同学自主探究,完成范例教学老师活动同学活动设计理念环节老师讲解表格在网页时的重要作用；任务一：插入表格 插 入 默 认 值 的 表 格,分组插入修改学师：假如我们想要在网页中使用表格必需不 同 参 数 值 的 表对于同学熟识的先插入表格,操作方法与Word 差不多,格,争论并填

6、写表学问点,完全放手自己尝试着在一个新网页中插入不同设格；给同学探究完成；置的表格,并填写表1-3-1 ；实践表格的调整方尝试通过不同途老师指导同学参照图1-3-4在主页文件Index htm 中插入表格：法,体验表格对网习页 布 局 的 重 要 作与任务二：表格的调整用；探究师：此部分内容与Word 中的操作也是非依据教材提示,将径解决同一问题,常相像, 依据教材内容分组完成表格的调提高办事效率；整；调整终止后将其次课中已经输入的内容移动到表格中；首页储存为模板；任务三：设计网页模板师：设计网站时为提高工作效率,我们一般使用模板, 现在我们就来定制属于我们 自己的网页模板；第三阶段：学问、情

7、感拓展细心整理归纳 精选学习资料 教学老师活动同学活动设计理念 第 3 页,共 7 页 环节 - - - - - - - - - - - - - - - - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -学习必备欢迎下载由表格对网页布师：请同学们再次预览使用表格布局的网学 生 分 组 预 览 网知页,然后转变浏览器窗口的大小,网页版页；局的爱护延长到面发生变化吗？这说明什么问题呢？生：表格可以爱护父母对子女的爱；识让同学从护蛋活与师：在生活中,你能体会到父母对自己的动中体会这种爱情关怀和爱惜吗？请大家课下完成“ 一日护护要

8、付出多大的感蛋 ”的 实 践 活 动 , 设 计 新 网 页网页的布局；精力；“ Feeling htm” ；第四阶段：综合实践,巩固与提高,自由创作,迁移运用教学老师活动同学活动设计理念环节实师：通过本节课的学习,你是否感觉上一使用表格重新布局学以致用,巩固提节课设计的二级网页“Parents htm” 需网页；要使用表格重新布局一下呢？设计新网页,体验高；践老师巡察指导模板的重要作用；与：刚才我们学习了网页模板的储存,下重点实现示例网页创面请同学们使用模板设计xx 页表中所列Neighbor htm 中新的三个网页；的表格设计成效；师：请大家摸索：能否为实践活动网页设计统一的模板？第五阶段

9、：教学总结,设疑激趣,为下一节课作好铺垫教学老师活动同学活动设计理念环节课堂小结本节课的学习内容；课师：通过本节课的学习,同学们是否觉得重新注视自己的网通过对比查找不堂页,并与样例对比,足,做到有的放小自己做出的网页在形式上仍有些单调？查找出自己网站需矢,激发同学自主结我们能否把网页做得更美丽呢？请同学要改进的地方；探究的热忱；们课后预习下一课的内容 网页美化；教学反思（教学设计理念）本节课的主要内容与 Word 中的表格操作有许多相像之处,但又有很大的不同；所以,老师应让同学通过实践懂得表格在Word和网页设计中的不同作用；网页模板是一个新学问点,只有通过实际操作才能体会它的作用,所以支配同

10、学使用模板设计新网页的环节；细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 4 页,共 7 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -学习必备 欢迎下载二、补充资料部分1课件与学件同学用学件名称 文件名在网页中插入表格 插入表格 swf表格的调整 表格调整 swf设计网页模板 网页模板 swf2资料库网站版面的布局设计版面设计也可以懂得为布局设计,就是我们在浏览器上看到的一个完整的页面；如何将全部要表达的内容有机地整合和分布,达到某种视觉成效,这就叫做版面布局设计；我

11、们将如何做好网站的版面设计呢？第一我认为是“ 过程注定了结果” ,尽量做到最好,信任结果也不会偏离轨道；下面先让我们来明白一些版面设计的步骤；一、构思 （结构的搭建）重视你所做的每一步并把它在构思之前我们总需要进行网站的需求分析、定位和受众群等许多方面的事情；假如我们连这些问题都仍不清晰的话,请先不要去想着设计,由于在不明白需求的情形下,盲目地去把页面设计达到某种视觉成效是很难的；当我们真正确定需求后,便可以尽可能地发挥自己的想象力,将自己想到的“ 构思” 画上去（用笔和纸或者软件都可以,依据自己的习惯而定）；这是属于一个构思的过程,不讲究细心整理归纳 精选学习资料 - - - - - - -

12、 - - - - - - - - 第 5 页,共 7 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -学习必备 欢迎下载细腻工整,也不必考虑到一些细节的部分,只要用几条粗陋的线条勾画出创意的轮廓即可；尽可能多构思一些,以便挑选一个最适合的进行搭建；二、粗略布局这个阶段是个试用期,我们只要把重要的元素和网页结构相结合,看看框架是否合理,假如不适合就进行相应的修改；三、完善布局当我们已经有一个很好的框架时,我们需要依据网站设计时的构思将其所需的内容有条 理地融入于整个的框架中；我们需要通过对图片的处理、空间的合理利用进行

13、编排；下面是广告大师樊志育在 帮忙；广告制作 中所提到的, 期望对大家在布局的理论上面有所1正常平稳 亦称“ 均匀” ；多指左右、上下对比形式,主要强调秩序,能达到安定诚实、信任的成效；2反常平稳 即非对比形式,但也要平稳和韵律,当然都是不均整的,此种布局能达到强调性、担心性、高注目性的成效；3对比 所谓对比,不仅利用颜色、 色调等技巧来做表现,新与旧、贫与富等对比；在内容上也可涉及古与今、细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 6 页,共 7 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - -

14、 - - - - - - -学习必备 欢迎下载4凝视 所谓凝视是利用页面中人物视线,使浏览者仿照跟随的心理,以达到凝视页 面的成效,一般多用明星凝视状；5空白 空白有两种作用,一方面对其他网站表示突出杰出,另一方面也表示网页品 位的优越感,这种表现方法对体显网页的格调特别有效；6尽量用图片解说 此法对不能用语言说服、或用语言无法表达的情感,特殊有效；图片解说的内容, 可以传达给浏览者的更多的心理因素；这个阶段主要是针对些细节的更换和优化了,比如说一些颜色饱和度、一些字体、间距的调整等；细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 7 页,共 7 页 - - - - - - - - -