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