教学设计—网站设计

《教学设计—网站设计》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、4.2网站的设计教学设计案例设计日期：2013年5月1日作者姓名邵其玉电子信箱shaoqiyu@163.com作者单位重庆市字水中学区县江北区手机13627691811教案名称网站的设计——网站栏目结构和网页的版面设计课时1课时教材版本广东版学生年级高一一、教材内容分析本节内容是高中信息技术选修课程《网络技术应用》第四章第二节的内容。在第一节中，学生就已经了解了开发网站所需经历的确定网站主题；网站开发的软件配置；网站建设的任务分工及管理方案。识，通过本课的学习，将使学生在设计自已的主题网站之前，通过观摩一些优秀的网站，从浏览者的

2、角度去分析他们这样设计达到了什么样的效果，从而得到额，启发，从网站的结构分析、网页的风格设计、版面内容方面去思考设计自已的主题网站如何做。本课内容为后续章节知识的学习也起着指导性作用，所以本节课网站的设计在第四章中起着重要的作用。二、学生分析教学对象是高一学生：（1）具备一定的对美的欣赏和鉴赏能力，对版面设计有一定基础（2）对浏览网站和网页十分熟悉，但是对设计一个具体主题网站怎么做很期待，有学习的欲望。三、教学目标知识与技能：（1）学会网站栏目的设置（2）学会网页的版面设计过程与方法：通过本节的学习，使学生掌握网站设计的一般过程

3、，培养学生整体设计，规划网站的思想和方法情感、态度与价值观：（1）学会从美学角度，从平面设计的角度去欣赏网站的设计（2）使学生体验成功的快乐和创意的美感四、教学重点与难点教学重点：学会网站栏目的设置教学难点：学会网页的版面设计五、教学策略教法：“任务驱动教学法”为主，　　　“创设情境法”，“演示法”，　　　“自主　探究法”为辅的教学方法。学法：观察法，　　　小组合作学习法　　　实践操作法。六、教学环境及资源准备网络教室、多媒体课件、教学广播系统等七、教学过程（可以用嵌套表格呈现具体内容）（一）创设情境引入新课学生观摩“墨风”网站

4、？分组讨论：这个网站的主题是什么？这个网站是怎样围绕主题展现内容的？引出今天的课题：网站设计：从什么方面去着手进行设计？网站栏目结构设计和网页版面设计（二）步步引导探究问题 动手操作完成任务一、网站的栏目结构设计：1、再次分析“墨风”网站提出问题：（1）是什么让我们很快就知道网站大致内容？（2）是什么让我们快速的从网站中找到自已感兴趣的内容？2、归纳出墨风网站的栏目结构。3、给出一个主题网站的栏目设计：网站名称栏目名称内容描述非常不一班班级介绍简介班级情况班级故事介绍班级的好人好事校园图书馆介绍学校的图书馆李明的博客介绍李明的个

5、人博客班级人物介绍班级的优秀学生站点内服务方便访问者的浏览，给浏览者留出发表自已意见的空间4、分组讨论：这个班级网站的栏目那些地方安排不合理？还可以为这个班级添加什么栏目？5、网站的结构设计的原则：（1）紧扣主题（2）将最具有吸引力的内容放在栏目中（3）尽可能方便访问者浏览和查询。6、任务一：学生完成一个自已感兴趣主题的栏目设计。网站名称栏目名称内容描述二、网页的版面设计：1、分析“墨风”网站的主页：分析版面设计的特点？2、（1）网页布局特点：最吸引屏幕中央是一个动画——展示重要的信息，左右两边是栏目内容的简介。（2）色彩特点：

6、采用红、黑、白经典配色，均合了书法中墨迹，宣纸，印章的色彩搭配。3、网页的布局设计：1）网页布局设计目的：就是传达信息。2）网页的布局设计：就是指网页中图像和文字之间的位置关系，简单来说也可以称之为网页排版。3）原则：主次分明4）自主观看“常见网页版面布局类型”演示文稿完成：任务二：主页的版面布局设计：原因：4、色调的选择（1）色彩的作用：色彩搭配给人眼前一亮的感觉，不同的颜色给我们带来不同的感觉（2）展示一些网站页面，从色彩搭配上进行分析。（3）网页色彩搭配应注意：ü一个网站的标准色彩不超过3种；ü图片的主色彩、背景色、边框等

7、尽量使用标准色彩同色系的色彩ü网站的标志、标题、主菜单和主色块文字的链接色彩尽量使用标准色彩。ü色彩总的应用原则应该是“总体协调，局部对比”（4）任务三：网站的配色方案：原因：（四）课堂总结部分展示各小组的任务完成情况，并进行评价（五）课后作业部分写出更详细的网站设计方案：如写出网站的二级栏目、自已设计画一个有特色的版面布局图、为网站写一句话广告词，设计一个特别的logo等。（六）教学反思本节课在整个教学过程中充分发挥学生的主体性，主动性和教师的主导性作用，以“任务驱动教学法”为主，“创设情境法”，“演示法”，“自主探究法”为辅

8、的教学方法，通过不同阶段不同任务的提出，使学生在协作完成任务的同时实现教学目标，同时也更有利于培养学生的探索精神和自主学习精神。