个人网页设计学习领域.docx
- 文档编号:12192667
- 上传时间:2023-04-17
- 格式:DOCX
- 页数:26
- 大小:25.89KB
个人网页设计学习领域.docx
《个人网页设计学习领域.docx》由会员分享,可在线阅读,更多相关《个人网页设计学习领域.docx(26页珍藏版)》请在冰豆网上搜索。
个人网页设计学习领域
表三:
《个人网页设计》学习领域
学习项目与学习任务分解表
项目
任务
项目一(24课时)
项目二(30课时)
项目三(36课时)
项目四(24课时)
使用flash制作互动入场动画
使用Flash
设计
使用Dreamweaver
制作Html
多软件综合
运用完善
个人
任务1
静态画面构思绘制
(6课时)
整体架构
构思绘制(6课时)
Html整体架构认识与构思
(6课时)
运用视觉传达与色彩运用原理修葺
(6课时)
任务2
动画、按钮元件
构思制作
(6课时)
首页场景绘制
(6课时)
表格框架绘制主要页面
(12课时)
Firework切割优化图片(6课时)
任务3
在元件
添加声音
(6课时)
其他页面
绘制制作
(12课时)
flash及其他控件的插入与控制
(6课时)
制作作品展示小动画
(6课时)
任务4
添加
以及脚本
(6课时)
按钮动画及各页面转场动作添加
(6课时)
插入及css应用规网页
(6课时)
制作gif动画
广告(6课时)
任务5
网页中层与行为应用(6课时)
任务6
任务7
任务8
考核项目
使用flash设计制作完成具有互动效果的入场动画
使用flash设计制作动画网页
使用Dreamweaver制作html
个人主页
综合运用flash、Dreamweaver、firkwork等设计网页
项目一
表四:
《使用flash制作互动入场动画》学习项目的设计
学习领域
名称
个人网页设计
项目编号
GRWYSJ-1
学习项目
名称
使用flash制作互动入场动画
学习方式
讲授法、分析法、实践
参考课时
24
学习容
使用flash制作互动入场动画
项目学习
目标
能力(技能)目标
知识目标
1、运用flash绘制图形。
2、使用元件制作动画。
3、为按钮元件添加脚本,声音,制作互动动画。
1、了解flash动画的基本原理
2、理解flash中元件的运用
3、了解脚本的原理,以及常用的基本语句。
学习任务
任务一、静态画面构思绘制
任务二、动画元件构思制作;
任务三、在元件添加补间动画;
任务四、添加按钮以及脚本;
考核要求
使用flash制作互动入场动画。
整体考核标准:
任务一占30%,任务二20%,任务三占30%、任务四占20%
1、技术要求:
能按任务实施步骤制作出作品,在作品中充分体现出本节课所学的知识;
2、艺术要求:
版面设计美观,绘图精致,颜色配搭合理。
主要设备
一体化教室、
(项目一):
任务1
表五
(1):
静态画面构思绘制
项目名称
使用flash制作互动入场动画
任务名称
静态画面构思绘制
任务编号
GRWYSJ-1-1
学习环境
一体化教室
学习方法
讲授法、实践法
学习目标
1、认识拓扑图的功能作用已经写法。
2、了解进场动画的分镜头脚本编写。
3、能运用绘图工具绘制绘制图形版面。
4、结合平面设计知识设计网页版式。
任务实
施步骤
首先,接收教师发送的作业题目。
一、拓扑图作业:
1、拿出纸、笔
2、对之前网上收集的作品进行一些了解和分析:
(1)认真领会和掌握原作架构
(2)仔细的观察,细心点击各个,了解作品的各个连接部位,点击连接,并且把其名称记录下来,
3、开始绘制,
把记录下来的各个位置名称,整理归类,按照级别填写,最后把其完稿,要求结构完整清晰,细条细直。
二、分镜头脚本作业。
1.仔细分析观察进场动画,
2.然后把其主要过程写出。
3.使用舞台工具设置好舞台大小
三、参考观察分析的例子,把其主要构图用纸绘制出来,
四、运用flash绘图工具,把大概版式绘制出来
五、提交作业(下周交)
任务实
施要求
1、正确绘制出拓扑图
2、能大致写出入场动画的分镜头脚本
3、认识工作版面;工具箱,舞台,图层。
4、设置好舞台的大小,了解舞台大小对网页的
5、使用平面工具;矩形工具,圆形工具绘制版面,按钮
6、老师巡回指导,遇到共性问题及时解答
知识要点
1、拓扑图的架构格式以及写法。
2、分镜头脚本的写法;
3、构成的基本形式;
考核要求
1、技术要求:
正确绘制拓扑图,动画的分镜头脚本,合理设置舞台大小;
2、艺术要求:
构图富有创意,排列有序,构图美观。
(项目一):
任务2
表五
(2):
动画、按钮元件构思制作
项目名称
使用flash制作互动入场动画
任务名称
动画、按钮元件构思制作
任务编号
GRWYSJ-1-2
学习环境
一体化教室
学习方法
讲授、分析、实践
学习目标
1、了解补间动画生成;形状和动画区别,
2、明白关键帧与普通帧的区别;
3、明白时间轴的工作原理
4、掌握元件的使用,能制作简单按钮元件,
任务实
施步骤
首先,接收教师发送的作业题目。
一、按钮设计作业:
1、拿出纸、笔
2、根据之前的公司,标准色的定制,设计按钮
3、开始绘制。
二、电脑制作按钮作业。
1、设计按钮风格,使用绘图工具绘制按钮,
2、根据时间轴工作原理,制作补间动画
3、开始绘制制作动画
五、提交作业(下周交)
任务实
施要求
1、了解补间动画类型,形状和动画区别,元件不能使用形状动画;
2、了解元件种类,区分电影元件和按钮元件,真确放置动画于电影元件部,明白二者的工作原理。
3、电影元件要放置于按钮元件的关键帧上
4、老师巡回指导,遇到共性问题及时解答
知识要点
1、元件不能使用形状动画;
2、按钮元件只有四帧。
3、明白动画元件中的既可以存放静态图形,也可以存放一段动画
考核要求
1、技术要求:
正确使用使用补间动画绘制动画,合理运用电影元件装载动画,正确使用按钮元件;
2、艺术要求:
按钮的形状有创意,排列有序,构图美观。
(项目一):
任务3
表五(3):
在元件添加声音
项目名称
使用flash制作互动入场动画
任务名称
在元件添加声音
任务编号
GRWYSJ-1-3
学习环境
一体化教室
学习方法
解说法、层分法、实践
学习目标
1、了解flash如何添加声音,
2、明白如何减少声音大小;
3、了解如何如何控制声音
任务实
施步骤
首先,接收教师发送的作业题目。
一、素材收集
1、收集不同的声效
2、对比,设计出适合自己的声音
二、添加声音作业
步骤一、导入声音;
运用声音编辑工具,把把声音编辑好,导入flash,
步骤二、导入到按钮元件
进入按钮元件部,选择关键帧插入
步骤三、调整声音
测试声音,调整声音在最适合处播放。
五、提交作业(下周交)
任务实
施要求
1、明白声音在flash的作用,flash不能编辑声音,需要借助外部软件进行编辑,减肥。
2、分别尝试,区分了解声音类型,“事件”与“数据流”区别,
3、仔细测试影片检测声音的最后效果需要
知识要点
1、声音可以象图片一样导入flash使用
2、“事件”与“数据流”有区别,“数据流”可以根据帧的长度播放。
3、声音可以通过帧或者按钮进行播放的控制。
考核要求
1、技术要求:
正确使用导入声音,合理调整大小,并且配置正确的播放选项;
2、艺术要求:
声音播放合理,与动画配合一致
(项目一):
任务4
表五(4):
添加以及脚本
项目名称
使用flash制作互动入场动画
任务名称
添加以及脚本
任务编号
GRWYSJ-1-4
学习环境
一体化教室
学习方法
讲授法、层分法、实践
学习目标
1、认识flash脚本运行原理及语句构成格式;
2、学会使用基本的跳转语句使用
3、能运用语句添加。
任务实
施步骤
步骤一、面板认识;
介绍动作面板的构成与使用。
步骤二、帧按钮使用
了解flash语句的成方式,为帧添加停止语句;
步骤三、按钮语句使用;
了解flash语句的在元件的使用方式,为按钮添加跳转语句;
任务实
施要求
1、认识flash脚本运行原理及语句构成格式;
2、正确为帧添加语句;
3、明白为元件添加语句的区别,按钮需要加上on(press)格式;
4、学会使用脚本助手帮助自己正确添加脚本
知识要点
1、flash脚本是由点语句格式组成;
2、点语句的概念及其特点;
3、脚本可以加在帧、电影元件和按钮元件上,但是格式不相同,各有一定的格式要求;
考核要求
1、技术要求:
flash点语句的分类相对准确,在各个帧或者元件上合理添加脚本,测试时候各准确。
语句添加与设计要求相符。
项目二
表四:
《使用Flash设计》学习项目的设计
学习领域
名称
个人网页设计
项目编号
GRWYSJ-2
学习项目
名称
使用Flash设计
学习方式
讲授法、实践法
项目分析法、
参考课时
30
学习容
使用flash设计全动画
项目学习
目标
能力(技能)目标
知识目标
1、运用flash制作多静态动画页面网页。
2、运用flash脚本实现页面跳转。
3、运用电影元件为页面跳转添加动画。
1、了解flash网页的基本原理
2、掌握flash脚本实现页面原理
3、明白电影元件的动画与主时间轴区别
学习任务
任务一、整体架构构思绘制;
任务二、首页场景绘制及按钮元件制作
任务三、其他页面绘制制作;
任务四、各个页面转场动作添加;
考核要求
使用Flash设计。
整体考核标准:
任务一占20%,任务二30%,任务三占40%、任务四占10%
1、技术要求:
能按任务实施步骤制作出作品,运用本节课所学的知识;使网页顺畅,动画流畅
2、艺术要求:
绘图精致,符合网页浏览原理,颜色配搭美观。
与任务一风格一致
主要设备
一体化教室、
(项目二):
任务1
表五
(1):
整体架构构思绘制
项目名称
使用Flash设计
任务名称
整体架构构思绘制
任务编号
GRWYSJ-2-1
学习环境
一体化教室
学习方法
讲授法、分析法、实践
学习目标
1、认识网页的基本架构与原理;
2、了解用flash绘制网页使用的工具
3、明白flash网页在整个网页中的使用。
任务实
施步骤
步骤一、绘制架构图;
介绍网页的基本架构与原理,让学生根据绘制架构图。
步骤二、绘制设计手图;
介绍flash绘制网页使用的工具,让学生动手绘制设计手图;
步骤三、动画设置。
让学生动手根据版面绘制动画效果示意图
任务实
施要求
1、在规定时间写下的架构图,清晰明了,符合结构;
2、对点版面进行设计分析,并归纳出设计框架特征;
3、运对网页设计与按钮进行动画效果分析,绘制去示意图。
知识要点
1、网页的基本架构与原理;
2、flash绘制网页使用的工具;
3、flash网页在整个网页中的导航使用;
4、动画设计示意图在flash动画中起主导动画作用。
考核要求
1、技术要求:
架构图绘制准确,画面整洁、示意图线条流畅、动画示意清晰明了;
2、艺术要求:
flash网页在整个网页中的使用,按钮排列有序,构图美观。
(项目二):
任务2
表五
(2):
首页场景绘制
项目名称
使用Flash设计
任务名称
首页场景绘制
任务编号
GRWYSJ-2-2
学习环境
一体化教室
学习方法
讲授法、分析法、实践
学习目标
1、掌握使用flash绘制网页场景;
2、学会运用调色工具填充颜色
3.明白运用在flash中键入文字并且排版
任务实
施步骤
步骤一、页面场景绘制;
使用矩形工具绘制页面场景;按钮
步骤二、文字排版
使用文字工具键入文字;并且排好版面。
步骤三、色彩配搭
使用填充工具,如墨水瓶、颜料桶填充颜色。
步骤四、导入图片
使用导入命令导入图片,并按照要求放置,并把图片打散。
防止。
任务实
施要求
1、运用flash把场景页面按要求绘制出来;
2、网页页面版面绘制精美,配色和谐;
3、文字及按钮放置合理,浏览清晰,大小适中;
4、图片打散后要重新群组,不然只能放于底层。
知识要点
1、矩形工具绘制导角要先设置再绘制,不能中途修改;
2、填充颜色时候注意调色面板是外轮廓线条还是容状态;
3、填充颜色渐变颜色时候注意每个分颜色均可以调整颜透明度;
4、导入图片,时候注意导入库和舞台区别。
考核要求
1、技术要求:
线条绘制准确,版面有韵律、图片清晰,文字摆放合理;
2、艺术要求:
配色和谐,构图美观。
*(项目二):
任务3
表五(3):
其他页面绘制制作
项目名称
使用Flash设计
任务名称
其他页面绘制制作
任务编号
GRWYSJ-2-3
学习环境
一体化教室
学习方法
讲授法、分析法、实践
学习目标
1、熟练使用flash绘制网页场景;
2、熟练运用调色工具填充颜色
3.明白网页排版的联贯性
任务实
施步骤
步骤一、网页绘制;
让学生寻根据上堂课绘制首页图形,用延伸的手法,绘制的其他网页。
(有能力制作项目三任务3页flash)
步骤二、导入图片;
根据网页需要导入图片,然后转换成元件;
步骤三、排放文字;
根据网页要求放置文字。
任务实
施要求
1、场景页面绘制出来要有延续性;
2、网页页面版面绘制精美,配色和谐;
3、图片打散后要重新群组,不然只能放于底层。
4、文字及按钮放置合理,浏览清晰,大小适中;
知识要点
1、绘制网页的时候要拉辅助线来;对齐网页边界
2、填充颜色时候注意调色面板是填充状态还是外轮廓线条;
3、填充颜色渐变颜色时候注意每个分颜色均可以调整颜透明度;
4、导入图片,导入库的可以重复利用。
考核要求
1、技术要求:
线条对齐绘制,版面有延续性、图片清晰,文字设置合理;
2、艺术要求:
配色和谐,构图美观,具有延续性。
(项目二):
任务4
表五(4):
按钮动画及各页面转场动作添加
项目名称
使用Flash设计
任务名称
按钮动画及各页面转场动作添加
任务编号
GRWYSJ-2-4
学习环境
一体化教室
学习方法
讲授法、分析法、实践
学习目标
1、熟练使用flash给网页转场;
2、熟练使用脚本,给按钮添加与声音
3.给图片添加
任务实
施步骤
步骤一、转场设置;
让学生寻根据网页排放顺序给按钮添加部。
步骤二、声音添加;
根据网页需要导入声音,然后给按钮添加声音;
步骤三、图片;
根据网页要求给图片和文字添加外部。
任务实
施要求
1、按钮部要正确,注意goto命令中停止与播放设置;
2、声音添加合理,大小适中;
3、图片打散后不能直接添加,需要添加隐形按钮;
4、文字及按钮合理,浏览清晰,大小适中;网页页面版面正确。
知识要点
1、goto命令有停止与播放区别。
2、脚本可以写在帧上也可以写在按钮上,二者要区分;
3、外部注意“/”与“\”的区别;
4、隐形按钮不需要弹起状态。
考核要求
1、技术要求:
正确,声音设置合理,文件打开正常,文件不会太大影响浏览效果。
项目三
表四:
《使用Dreamweaver制作Html》学习项目的设计
学习领域
名称
个人网页设计
项目编号
GRWYSJ-3
学习项目
名称
使用Dreamweaver
制作Html
学习方式
讲授法、分析法、实践
参考课时
36
学习容
使用Dreamweaver制作Html
项目学习
目标
能力(技能)目标
知识目标
1、运用Dreamweaver建立站点。
2、运用Dreamweaver设计网页。
3、利用html语言设计制作网页以及其他效果。
1、的构建与设计基本知识。
2、了解Dreamweaver网页的基本原理
2、掌握html在网页设计中的运用
学习任务
任务一、Html整体架构认识与构思
任务二、表格框架绘制主要页面;
任务三、flash及其他控件的插入与控制;
任务四、插入及css应用规网页;
任务五、网页中层与行为应用
考核要求
使用Dreamweaver制作Html。
整体考核标准:
任务一占10%,任务二30%,任务三占20%、任务四占20%任务五占20%
1、技术要求:
能按任务实施步骤制运用dreamweaver作出作品,在作品中充分体现出本项目所学的知识;
2、艺术要求:
网页设置精致,符合配色原理,图片动画配搭美观。
主要设备
一体化教室、
(项目三):
任务1
表五
(1):
Html整体架构认识与构思
项目名称
使用Dreamweaver制作Html
任务名称
Html整体架构认识与构思
任务编号
GRWYSJ-3-1
学习环境
一体化教室
学习方法
讲授法、分析法、实践
学习目标
1、认识的基本架构与原理;
2、了解用dreamweaver绘制网页使用的工具
3、明白dreamweaver网页在整个网页中的使用。
4、学会dreamweaver网页必须先建立一个站点
任务实
施步骤
步骤一、绘制托普图;
介绍网页的基本架构与原理,让学生根据绘制托普图。
步骤二、绘制设计手图;
介绍dreamweaver绘制网页使用的工具,让学生动手绘制设计手图;
步骤三、色彩设置。
让学生动手根据版面绘制色彩配搭效果示意图
步骤四、建立站点
使用站点命令建立站点
任务实
施要求
1、在规定时间写下的架构托普图,清晰明了,思路清晰,符合结构;2、对点版面进行设计分析,并归纳出设计框架特征;版面分析排布归类
3、运用平面设计知识对网页版面与色彩配置进行效果分析,绘制设计草图。
4、站点建立最好用英文。
知识要点
1、html网页的基本架构与原理;
2、dreamweaver绘制网页使用的工具;
3、dreamweaver网页在与flash网页的区别与联系;
4、色彩配搭设计效果图在网页设计中起主导版面重要作用。
考核要求
1、技术要求:
架构托普图绘制准确,画面整洁、示意图线条流畅、示意清晰明了,站点建立准确;
2、艺术要求:
图片按钮排列有序,构图美观,色彩配搭和谐整体。
(项目三):
任务2
表五
(2):
表格框架绘制主要页面
项目名称
使用Dreamweaver制作Html
任务名称
表格框架绘制主要页面
任务编号
GRWYSJ-3-2
学习环境
一体化教室
学习方法
讲授法、实践分析法
学习目标
1、学会在网页排版中使用表格规排版
2、使用dreamweaver绘制网页html主要页面
3、使用对齐命令是使表格对齐。
任务实
施步骤
步骤一、面板认识;
介绍dreamWeaver软件使用的面板,练习各工具使用;
步骤二、插入表格;
使用dreamweaver插入表格;
步骤三、输入文字;
让学生动手在表格输入文字;
步骤四、插入图片;
让学生动手根据版面配搭效果示意图在表格中插入图片。
任务实
施要求
1、根据版面需要插入表格,增加或者删除表格的行和列,;
2、输入文字,并且对齐
3、在表格插入图片,对齐。
知识要点
1、dreamweaver中的表格出入与修改;
2、表格的对齐与表格外的对齐;
3、表格可以填充单元格颜色,
4、色彩配搭设计效果图在网页设计中起主导版面重要作用。
考核要求
1、技术要求:
表格绘制准确,画面整洁、示意清晰明了;
2、艺术要求:
文字、构图美观,图片按钮排列有序,色彩配搭和谐整体。
(项目三):
任务3
表五(3):
flash及其他控件的插入与控制
项目名称
使用Dreamweaver制作Html
任务名称
flash及其他控件的插入与控制
任务编号
GRWYSJ-3-3
学习环境
一体化教室
学习方法
讲授法、举例法、实践
学习目标
1、运用dreamweaver在网页中插入flash;
2、在dreamweaver里的编辑与控制flash
3、运用dreamweaver在网页中制作导航条
任务实
施步骤
步骤一、版面定位;
将制作好的flash放入设定好的表格。
步骤二、设置参数;
运用属性栏工具设置法参数;
步骤三、设置参数;
插入鼠标经过图像制作导航条;
任务实
施要求
1、flash要在flash软件里制作好尺寸才能放置;
2、如果未能做好的可以先放置替代图片;(项目四任务3继续完成)
3、透明、菜单参数设置要正确。
知识要点
1、导入的flash要按播放按钮才能观看;
2、透明、菜单参数等flash的控制参数要在dreamweaver里添加;
3、鼠标经过图象最多有四。
考核要求
1、技术要求:
flash设置尺寸准确,銲接顺利、动作准确;
2、艺术要求:
flash制作合理,动画播放有序,构图美观。
(项目三):
任务4
表五(4):
插入及css应用规网页
项目名称
使用Dreamweaver制作Html
任务名称
插入及css应用规网页
任务编号
GRWYSJ-3-4
学习环境
一体化教室
学习方法
讲授法、实践、分析法
学习目标
1、使用dreamweaver为文字图片添加;
2、使用css规网页排版。
任务实
施步骤
步骤一、为文字添加;
选择要添加的文字,添加。
步骤一、为图片添加;
选择要添加的图片,添加。
步骤三、css使用
使用css面板,设置置css属性(,超等)
步骤四、自定义css
运用css面板自定义css(背景,正文文字,标题等)。
任务实
施要求
1、文字要设置好,
2、对图片注意热点使用;
3、注意区分的使用分置css与自定义css的使用,
知识要点
1、文字位置与属性要设置好,才添加
2、对图片可以直接添加或者使用热点;
3、css的使用分置与自定义,注意分清
考核要求
1、技术要求:
正确设置css;正确添加。
2、艺术要求:
字体版面列有序,构图美观,大小适中。
(项目三):
任务5
表五(5):
网页中层与行为应用
项目名称
使用Dreamweaver制作Html
任务名称
网页中层与行为应用
任务编号
GRWYSJ-3-5
学习环境
一体化教室
学习方法
讲授法、分析法、实践
学习目标
1、为网页添加留言栏;
2、为网页添加层
3、运用行为设置层的隐藏与显示。
任务实
施步骤
步骤一、添加留言栏;
使用Dreamweaver行为设置留言栏。
步骤二、添加层;
使用层面板添加层。
步骤三、添加行为;
运用行为设置层的隐藏与显示;
步骤四、网页设置标题以及属性栏;
使用Dreamweaver添加标题以及属性栏。
任务实
施要求
1、利用行为对层进行隐藏与显示
2、留言栏要设置好,
3、要正确设置email;
4、在Dreamweaver运用行为设置层的隐藏与显示
5、;注意区分的标题栏与属性栏,
知识要点
1、留言是调用了外部程序;
2、email是添加一个email地址的;
3、行为面板可以轻松制作多种网页效果
4、层可以
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 个人 网页 设计 学习 领域