《 设计与制作网站首页界面》项目教学设计
电脑怎么定时关机-好评模板
Photoshop CS6基础与案例教程《任务一 设计与制作网站首页》项目教学设计
《设计与制作网站首页界面》项目教学设计
一、任务描述
网站是众多企业、团体和
个人宣传产品、主张和树立良好形象的主要途径和
重要手段。据不完全统计,当前100%的大型企业、
60%的中小企业都已经或将要
在互联网上建立的自己的网站,要使我们的网站在众多网站中脱颖而出,
其界面
的设计就显得十分重要。
网页界面设计其实是一个系统工程,它包括网站页面布局、设
计,颜色的搭
配、尺寸的大小和风格的定位等。网站首页界面是整个网站的“面子”工程,首
先
突出的是功能,使用户只要看一眼网站,就能够知道该网站的类型。其次就是
能够给访问者带来一种视觉
享受,特别是展示、宣传型的网站需要更加注重艺术
设计。
在本任务就是要求学生使用Photoshop
CS6软件设计、制作设计制作网站首
页界面。
二、任务目标
学生通过完成本项目,达成以下目标:
知识与技能:能够使用切片工具处理图像;了解优化图
像命令选项优化Web
图像的使用方法;了解界面设计与制作;尝试使用动作处理图像。
1
Photoshop CS6基础与案例教程《任务一
设计与制作网站首页》项目教学设计
方法与过程:能够根据任务的要求,确定完成任务的所需要的技术
,并较
熟练的完成任务;能对自己和他人的活动过程与结果进行评价与交流,能归纳利
用信息技
术解决问题的基本思想与方法。
情感、态度、价值观:通过完成本任务,能够感受到信息技术对社会发展、
工作效率的影响。
三、任务分析
房地产宣传展示型的网站内容不多,架构不复杂,更注重的是形象和标的
(楼盘)的展示。因此,我们将“怡海新城”的实景图处理成宽幅画面作为主题
放置在首页中间的位置
,占据一半以上的版面。网站分类栏目按钮放置在主题图
下面,当用户需要进一步了解详细内容时,单击
按钮即可进入二级页面。同时将
公司的名称、楼盘名、经营理念和联系方式分别放置在页面的上下端,给
用户更
多的信息。
根据网站的特点,本首页采用800像素×520像素大小,使用图像自动
合并、
色调调整等技术进行整体设计,然后采取切片的方法分别保存文件,有利于网页
的编辑和
浏览。
四、活动策略
在本任务活动的过程中,教师首先要引导学生认识网站首页,知道网站
首
面构思、设计的一般方法。然后引导学生尝试自动命令拼合图像,使用切片工具
切分图像的操
作。当学生具备了设计与制作网站首页界面的知识与技术后,即可
引导其完成本项目——网站首页界面的
设计与制作活动。
在本任务活动过程中,学生技术方面的获得,大部分内容从阅读教材、观
看
操作录屏、教师演示示范即可达到目标,教师还需要引导学生了解网页中图像
相关规则、颜色搭配、文件
格式、设计创意等方面的知识。因此,教师可以结合
本项目,引导学生收集、阅读网页设计方面的书籍或
资料,观看比较成功的网页
设计作品,从而启发迪设计创作思维,提高其综合设计的素养。
完
成本任务的过程中,需要较长的时间。学生通过多次操作,更进一步熟
练使用已经会使用的工具与技术,
使学生达到自动化的目的。因此,我们采取“创
设情境→任务分析→找出问题(知识储备)→解决问题→
任务实施→活动评价→
拓展提高”的流程,达到完成任务的目标。
2
Photoshop CS6基础与案例教程《任务一
设计与制作网站首页》项目教学设计
五、活动过程
任务名称
预设环节
设计与制作网站首页界面
学生活动
融入情境,产生完成本项
目的欲望。
创设情境
激发兴趣
(5′)
建议课时 4课时
教师活动
创设一个真实的任务情境,激
发学生完成本项
目的兴趣。情境既
可使用本教材中“任务描述”,也
可在本“任务描述”的基础上,使
用图像、音视频,精选一些该软件
制作的作品,引导学生欣赏,以激
发其兴趣。
学生小组讨论,可能会提
出以下问题:
分析任务
找出问题
(10′)
◇ 如何合成全景照片?
在学生讨论的基础,教师有针
对性地
引导学生,将需要解决的问
题收集、整理出来(针对性——也
◇
如何根据网页布局,切分图就是围绕本任务目标进行梳理,取
片?
◇
网页用图有什么特殊要
求?
◇ ……
其精要。)
典型引导
解决问题
(20′)
阅读文本,尝试操作,掌
握新知。
引导学
生参照教材的“任务准
备”,了解切片工具和图片拼合命
令。当学生操作有难度时,教师需要适时示范、指导。
尝试操作
任务实施
(60′)
展示作品 <
br>参照教材中“任务实施”,学生在操作的过程中,教师要
尝试操作,完成任务。当遇到适时巡查,
发现问题,引导学生解
困难时,可以观看课程教学资决。同时,鼓励小组同学之间相互
源网“录
屏”文件。
参照教材中“活动评价”
帮助,积极交流,解决问题。
教师鼓励学生在
小组内积极
展示、交流作品,并交流创作的体
会。同时,教师适时参与到部分小
活动评
价 表中的项目进行。
(15′)
3
Photoshop CS6基础与案例教程《任务一
设计与制作网站首页》项目教学设计
组,有针对的进行点评,提出进一
步完善意见和建议。
再次修正
完善作品
(20′)
◇
参照教材中“拓展提高”,“拓展提高”在技术上有一定
根据学习情况,寻找不足。
有针对性的辅优补差。
引导学生更进一步认识切拔高,教师根据实际情况,有针对
片工具、裁
剪工具、透视裁性示范操作。
剪工具、切片选择工具和合评价作品,将评价结果反馈学
并照片命令、像素尺寸、画生。
综合练习
拓展提高
(45′)
布大小、Web安全颜色、颜
色
匹配命令、曲线命令、优
化图像、动作面板处理图
像。
◇
完成教材中的“思考练习”,
将本次项目成果通过网络
或其他途径提交给教师。
◇
根据教师评价结果,反思学
习行为,提高能力。
六、设计反思
根据教材安排来看,
本项目作品需要处理过程比较繁琐,需要综合已有知识
(比如文字工具、参考线、图层样式等)等都是前
些项目中经常用到知识与技术),
结合新知识与技术完成项目元素的处理。在操作的过程中,一些相同项
目需要重
复处理,将花费较长的时间,教师适时引导学生,使其他通过反复练习,掌握技
术,形
成能力。
在学生活动的过程中,教师要适时鼓励学生之间相互交流,共同探讨解决操
作过程中
的技术难题,教师也需要适时指导。
在完成本任务的过程中,学生在实际操作的过程,虽然有网络资源
(范例录
屏)作为支撑,但是,仍然需要教师适时的操作与示范和个别辅导。
4
Photoshop CS6基础与案例教程《任务一
设计与制作网站首页》项目教学设计
5