注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

艾特的博客

 
 
 

日志

 
 

《网站的规划与设计》教学设计  

2018-02-18 20:51:37|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

《网站的规划与设计》教学设计

尤溪七中 陈明忠

 

一、教材分析

    本堂课的内容是粤教版选修3《网络技术应用》第四章网站的开发的第一节 网站的规划和第二节网站的设计的内容。因为课堂课时有限,只能引导学生完成较简单的网站设计与制作,且需要较多课时留给学生课堂学习、模仿、制作网页,故将网站的设计与规划放在第一个课时,让学生对即将要做的网站有一个整体计划。

二、学生分析

    高一年级的学生有较多的网络使用经验,对网页和网站有一定的了解,但几乎没有思考或涉及网站如何制作开发,所以需要教师层层深入,拨开网站神秘面纱。学生有较强的实践与理论基础,能够在教师指导下做出相应规划。但学生的想法思维很发散,需要教师较为明确的引导与约束。

三、教学目标

    1.知识与技能  a.了解网站开发的基本过程 b.一般网站的主要结构 c.掌握网站的版面布局

2.过程与方法  a.学会绘制网站结构图,表达对网站架构的理解。 b.通过小组协作,发展合作意识

3.情感态度价值观 a.培养对网站的鉴赏能力。  b.学会从美学角度、从平面设计角度去欣赏网站的设计。

四、教学重难点

  1.明确网站开发的目标,建立网站主题。

  2.掌握网站设计中栏目结构、版式设计、交互设计方法。

五、教学策略

    1.教学方法:分组讨论法,任务驱动发。

    2.教学环境:保证学生查看学习资料以及上网查阅相关材料的需求。

六、教学过程

(一)网站的规划

1.网站开发基本过程(2分钟)

因特网上的信息资源非常丰富,我们在大量浏览他人信息的同时,也渴望在因特网上进行自我展示,从因特网的使用者转变成为开发者。而网站是在因特网上展示信息最常用的媒介。在这一章的学习中,我们将以小组为单位开发一个小型网站,并发布在因特网上,将你们喜欢的内容分享给他人。

首先我们来了解网站开发的一般过程: 网站的规划à网站的设计à网页的制作à网站的发布与管理à网站的评价,在这一课时我们将完成前面两个步骤:每个小组的小型网站的规划与设计。 

2.网站欣赏与剖析(5分钟)

鉴于大多数同学都没有网站开发的经验,所以我们在开始做之前,先来看看 别人的网站的怎样的,来取其精华去其糟粕。请同学们在PC端打开学生材料文件夹,继续打开活动1网页欣赏文件夹,快速浏览里面的网站与网页,并思考优秀的网站应该具有的特点,可以从色彩、功能、内容、结构等方面进行思考。时间3分钟。  (在学生浏览网页时)老师为大家准备三种类型的案例,一种是文件夹,sanguosha和Schoolsale,两个文件夹就是两个小网站的全部本地文件,打开里面的index.html就可以进行浏览;一种是网站快捷方式,通过网址访问网站,包括锤子科技和果壳网;还有一种是网站的页面截图。快速浏览后思考,优秀网站应该具有什么特点,组内可以相互交流讨论。等下以小组为单位来分享你们的看法。

好的,时间到。刚刚同学们浏览了各种网页网站,并相互交流了看法,现在我们全班交流一下,你们觉得优秀网站应该有的特点有哪些? (若没有自愿,好,那我们以小组为单位来交流,我点到的小组,快速的说出一个特点)  老师结合同学们的看法总结出了一部分,我们一起开看一下。

好的网站应该有的样子我们已经了解到了,那么希望同学们在自己制作时能够吸取经验,避开雷区。

分析角度

特点

色彩

(1)色彩与网站主题一致;(2)颜色搭配让人舒适;

内容

(1)与主题相关;(2)用不同栏目来立体展示主题内容;

结构

(1)有多个页面;(2)有一个主页;(3)主页和个二级页面可自由跳转。

3.网站规划 12分钟

接下来我们就来打造每个小组自己的炫酷网站。第一步,进行网站规划,包括这几部分内容:团队规划、主题规划、运行环境规划、制作工具规划、开发进度规划。

a.团队组建  我们以小组为单位组建网站开发团队。有两个小组是四个人,则由组长统筹安排。 有些同学可能注意到了,分工里面怎么没有网站制作呢。网站制作是本章学习和练习的重点,每位成员都要参与,所以没有单独列出来。  产品经理:调查用户需求,确定网站的主题;负责开发团队的组织与任务分配与协调(一般由组长担任)。  架构师:负责网站的内容与结构设计。  美工:网页的色彩搭配设计、网页布局设计,为网站颜值全权负责。

b.确定主题  每个网站都有自己的主题,主题的确定根据现实情况而有所限定。比如这次网站开发活动对于大多数同学来说都是第一次制作,所以我们主题的确定有这样两个原则:①主题小而精;②主题是你们感兴趣或者擅长的内容;

c.其他规划内容:运行环境、制作工具、时间安排

运行环境:校园网服务器   通过ftp方式上传网站文件

制作工具:□ Dreamweaver  □FrontPage   □Photoshop   □Fireworks

开发进度:第一课时  网站的规划与设计,第二课时  收集素材与制作主页,第三课时  制作主页 ,第四课时  制作其它页面并加入超链接,第五课时  美化与特效制作,第六课时  发布与评价

d.学生完成网站规划表并选择性展示  表1 网站规划表  小组编号________

(二)网站设计

网站的设计主要是网站的结构设计、版面设计、和风格设计。我们先来学习网站的结构设计。

师:网站的结构设计主要是栏目设计,这些栏目则围绕主题展现其内容。请同学们来看一看我们学校校园网站的栏目设计。

网站的一级、二级栏目部分内容如图所示。

活动二:请每一组同学们设计一个的网站主题与网站的栏目,要求:

①一级栏目23个,二级栏目23个。

②到学习网站中下载表格并将设计好的栏目填写其中,然后通过上传自己的作业。

在学生实践的过程中,教师要到每一小组中进行指导和交流,提供帮助。

教师抽12组,将他们的作品在全班展示,并口头点评。

(三)版面布局设计

通过对前面两个不同网页的欣赏,我们得到不同的感受,独具匠心的网页版面布局设计会让浏览者流连忘返,留下深刻的印象。

我们来看几个网站首页的版面布局设计,如图所示。

 

这种设计象“厂”字,通常称为“厂”字型结构布局,这是大众化的设计,众多网站采用这一结构布局。

我们再来看另一个网页版面布局设计,这种设计比较自由,个性化强,视觉效果较好,通常称为“自由式”结构布局。

除此以外,还有“口”字型结构布局,“T”型结构布局等多种结构布局,不同样式的布局适合不同的网页,合理选择或设计网页版面布局是设计优秀网站的关键。

  4.网站设计12分钟  确定了网站的主题后,我们需要对网站进行设计后再开始开发。网站设计主要包括三个方面的内容:结构设计、版面设计和交互设计。  结构设计是指你们的网站计划有哪些栏目,每个栏目又包括哪些字内容。(架构师)  版面设计包括色彩风格和版面布局。(美工)  交互设计是指同一网站中网页间如何跳转的。(产品经理) 

5.展示与评价8分钟  邀请两个小组展示网站设计,每个小组显示两分钟。 

七、教学反思

  评论这张
 
阅读(8)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018