网页设计与制作教案.docx
- 文档编号:3150681
- 上传时间:2023-05-05
- 格式:DOCX
- 页数:52
- 大小:29.23KB
网页设计与制作教案.docx
《网页设计与制作教案.docx》由会员分享,可在线阅读,更多相关《网页设计与制作教案.docx(52页珍藏版)》请在冰点文库上搜索。
网页设计与制作教案
课次
1
教学课题
工作任务1:
网页设计师岗位解读
工作任务2:
网站设计流程知识
教学课时
2学时
教学重点
与难点
重点:
1.网站设计的基本术语
2.网页设计常用软件
3.网站设计流程
难点:
1.网页的分类、网站与网页的区别
2.各种动态网页、静态网页的区别
3.书写网站策划书
授课形式
课堂讨论、教师引导、情景模拟
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.背景引入——行业现状(10分钟)
2.招聘案例分析——岗位的基本要求(10分钟)
3.归纳总结——岗位的基本能力(10分钟)
4.了解网站设计的基本术语(20分钟)
(1)域名
(2)浏览器
(3)网页与网站
(4)HTML|DHTML|XML|XHTM
(5)静态网页与动态网页
(6)网站运营方式
5.了解网页设计常用软件(20分钟)
(1)图形图像工具
(2)动画制作软件
(3)网页制作软件
(4)其他辅助软件
6.情景模拟——网络公司的网页设计小组业务流程(25分钟)
(1)了解业务工作
(2)了解网站设计流程
(3)了解网站制作流程
(4)了解网站后期工作
7.任务小结及作业布置(5分钟)
配套实验
∕作业
实训报告:
为学院网站撰写一个网站策划书,要求字数1000字以上。
课后
小结
--------------------------------------装------------------------------------------------订-------------------------------------------------线--------------------------------------------
课次
2
教学课题
工作任务3:
网站图像设计
(1)
教学课时
2学时
教学重点
与难点
重点:
1.Fireworks的工作界面
2.文档的基本操作
3.网站图像基本知识
4.网站是色彩基本知识
5.文字的设置技巧
6.图像的基本设置
7.图文排版规律
难点:
1.Fireworks的工作界面
2.矢量图和位图的区别
授课形式
案例赏析、情景模拟
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.课堂讨论:
“photoshop党”及“Fireworks”党(5分钟)
2.设计任务引入(20分钟)
(1)认识Fireworks
(2)了解Fireworks的基本文档操作
(3)认识Fireworks的操作界面
3.介绍设计知识(40分钟)
(1)网站图像分类
(2)网页图片格式的选用
(3)网站的色彩含义
(4)网页颜色的搭配
4.案例赏析(10分钟)
5.讨论、任务准备(20分钟)
(1)设计分析
(2)技术分析
(3)素材搜集
配套实验
∕作业
1.思考矢量图与位图的区别?
2.浏览优秀网站,分析其色彩搭配。
课后
小结
课次
3
教学课题
工作任务3:
网站图像设计
(2)
教学课时
2学时
教学重点
与难点
重点:
1.使用Fireworks设置背景
2.简单颜色搭配
3.色块的绘制与设置
4.文字的设置技巧
5.属性栏的应用
难点:
1.矢量图和位图的区别
2.绘制、设置形状
3.文字设置
授课形式
教师示范、学生模仿、创造
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.制作过程(70分钟)
(1)设置文档属性
(2)制作背景
(3)制作主体星星并变形
(4)制作并复制背景星星
(5)输入文字并设置属性
(6)保存文档
2.拓展训练(20分钟)
(1)删除原背景
(2)制作新背景
(3)制作白色曲线色带
3.任务小结(5分钟)
配套实验
∕作业
1.制作同版的一个白色背景封面图像
课后
小结
课次
4
教学课题
工作任务4:
网站广告设计
(1)
教学课时
2学时
教学重点
与难点
重点:
1.广告的设计知识
2.网页广告的分类
3.网页广告的尺寸
4.颜色的运用
5.路径的操作
难点:
1.网页广告的尺寸及相应的应用范围
2.优秀网站广告的五个标准
3.对象的操作:
复制、移动、排列
4.矢量图的绘制技巧
5.广告设计的创意、美化
授课形式
课堂讨论、角色扮演、案例分析
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.任务引入(5分钟)
2.设计任务分析(25分钟)
3.设计知识介绍(40分钟)
(1)网站广告简介
(2)网站广告的特点
(3)网站广告的分类
(4)网站广告的表现形式
(5)广告条的尺寸
(6)优秀网站广告的五个标准
4.案例赏析(15分钟)
5.任务分析、讨论、准备(15分钟)
(1)设计分析
(2)技术分析
(3)素材搜集
配套实验
∕作业
1.思考网站广告的分类都有哪些?
2.思考网页广告条的尺寸都有哪些?
各适用于什么场合?
课后
小结
课次
6
教学课题
工作任务4:
网站广告设计
(2)
教学课时
2学时
教学重点
与难点
重点:
1.像素的概念
2.路径绘制
3.路径对象的编辑
4.为路径对象设置描边、填充、不透明度及效果
5.文本的创建与编辑
6.编辑位图对象
难点:
1.矢量图和位图的区别
2.绘制自动形状:
自动形状是矢量对象组
3.钢笔工具:
绘制直线或者曲线
4.通过编辑节点变形路径
5.按路径改变文本的排列方式:
文本-附加到路径
6.选区制作与调整
授课形式
多媒体
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.制作过程(70分钟)
(1)设置文档属性
(2)制作背景
(3)制作主体星星并变形
(4)制作并复制背景星星
(5)输入文字并设置属性
(6)保存文档
2.拓展训练(20分钟)
(1)删除原背景
(2)制作新背景
(3)制作白色曲线色带
3.任务小结(5分钟)
配套实验
∕作业
填写实训报告册
课后
小结
课次
7
教学课题
工作任务5:
网站标志设计
(1)
教学课时
2学时
教学重点
与难点
重点:
1.CIS知识
2.LOGO的设计知识
3.LOGO设计要领
难点:
1.VI在CIS中地位
2.LOGO的位置及原则
3.LOGO设计与表象形式的关系
授课形式
多媒体
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.开篇励志(5分钟)
2.设计任务(25分钟)
3.设计知识(40分钟)
(1)CIS企业形象识别系统
(2)网站标志Logo
(3)Logo的设计工具
(4)Logo设计原则
(5)Logo标志位置
(6)Logo表现形式
(7)Logo标志颜色
4.案例赏析(15分钟)
5.任务准备(15分钟)
(1)设计分析
(2)技术分析
(3)素材搜集
配套实验
∕作业
查阅多个网站,尤其是系列网站(如中国移动、联通、电信),思考:
logo设计与网站设计的关系。
课后
小结
课次
8
教学课题
工作任务5:
网站标志设计
(2)
教学课时
2学时
教学重点
与难点
重点:
1.选区的制作和调整
2.裁剪位图和符合画布
3.对象的堆叠、成组与对齐
4.使用图层
5.创建、编辑和使用蒙版
6.为对象添加滤镜
难点:
1.对象层叠顺序的操作
2.对象的接合/拆分、联合、交集、打孔、裁剪
3.使用菜单进行对象的变形操作
4.位图的导入设置
5.蒙版的设置
6.为对象添加滤镜效果
7.辅助线的使用
授课形式
多媒体
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.制作过程(90分钟)
(1)设置辅助线
(2)绘制同心圆
(3)修饰成空心圆环
(4)分割空心圆环
(5)设置对象颜色
(6)制作底板对象
(7)制作logo中心蒙版图像效果
(8)添加文字效果
2.任务小结(5分钟)
配套实验
∕作业
填写实训报告册
课后
小结
课次
9
教学课题
工作任务5:
网站标志设计(3)
教学课时
2学时
教学重点
与难点
重点:
1.选区的制作和调整
2.裁剪位图和符合画布
3.对象的堆叠、成组与对齐
4.使用图层
5.创建、编辑和使用蒙版
6.为对象添加滤镜
难点:
1.对象层叠顺序的操作
2.对象的接合/拆分、联合、交集、打孔、裁剪
3.使用菜单进行对象的变形操作
4.位图的导入设置
5.蒙版的设置
6.为对象添加滤镜效果
7.辅助线的使用
授课形式
多媒体
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.拓展训练1(40分钟)
制作同版的一个白色背景封面图像
2.拓展训练2(40分钟)
为学院示范建设设计一版封面网页图像,绘制出效果图
3.任务小结(5分钟)
配套实验
∕作业
填写实训报告册
课后
小结
课次
10
教学课题
工作任务6:
网页效果图设计
(1)
教学课时
2学时
教学重点
与难点
重点:
1.效果图的概念
2.切片的功能与作用
3.效果图设计要领
4.效果图的制作工具
难点:
1.Firework和Photoshop的区别
2.切片的技巧
3.效果图的类型与网站类型的关系
授课形式
多媒体
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.开篇励志(5分钟)
2.设计任务(25分钟)
3.设计知识(40分钟)
(1)效果图的概念
(2)切片的功能与作用
(3)效果图设计要领
(4)效果图的制作工具
4.案例赏析(15分钟)
5.任务准备(15分钟)
(1)设计分析
(2)技术分析
(3)素材搜集
配套实验
∕作业
浏览各种类型的网站,思考其页面设计的技巧。
课后
小结
课次
11
教学课题
工作任务6:
网页效果图设计
(2)
教学课时
2学时
教学重点
与难点
重点:
1.色彩的搭配技巧
2.文字的效果的高级应用
3.滤镜的使用
4.钢笔工具绘制图形
5.对象的组合和复制、变化
难点:
1.网页版式和布局设计
2.网页文字效果设计
3.网页图像设计
授课形式
多媒体
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.制作过程(90分钟)
(1)设置文档属性
(2)输入文字,设置文字属性
(3)设置文字效果
(4)使用变形、填充等方式,添加特殊效果文字
(5)绘制弧形光晕
(6)设置光晕效果
(7)复制、移动构成背景焰火
(8)制作多样的焰火效果
(9)使用“层”面板管理诸多光晕
2.任务小结(5分钟)
配套实验
∕作业
构思一个自己的个人网站效果图
课后
小结
课次
12
教学课题
工作任务6:
网页效果图设计(3)
教学课时
2学时
教学重点
与难点
重点:
1.图层的混合效果
2.辅助线的使用
3.切片原则和技巧
4.使用Fireworks生成简单网页
难点:
1.网页视觉效果综合设计
2.网页功能设计
3.网页优化设计
授课形式
多媒体
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.制作过程50分钟)
(1)导入图案
(2)修改图案的方向和图层的混合效果
(3)添加其他文字,并设置效果
(4)添加超链接
(5)优化图像尺寸和质量
(6)设置切片辅助线
(7)使用切片将图片切片
(8)导出为网页格式
2.拓展训练1(40分钟)
3.任务小结(5分钟)
配套实验
∕作业
课后
小结
课次
13
教学课题
工作任务7:
网站动画形象设计
(1)
教学课时
2学时
教学重点
与难点
重点:
1.Flash特点、用途
2.Flash界面特点
3.Flash基本操作
4.动画的常见术语
难点:
1.Flash界面与Firework的区别
2.切片的技巧
3.动画的基本术语
授课形式
多媒体
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.开篇励志(5分钟)
2.设计任务(10分钟)
3.认识Flash:
(30分钟)
(1)Flash简介
(2)Flash的特点
(3)Flash的用途
(4)Flash的操作界面
(5)工具(栏/箱)的介绍
4.设计知识(30分钟)
(1)舞台和工作区
(2)帧
(3)时间轴
5.案例赏析(10分钟)
6.任务准备(10分钟)
(1)设计分析
(2)技术分析
(3)素材搜集
配套实验
∕作业
浏览网站,找出网页上各种类型的动画,说说他们的作用。
课后
小结
课次
14
教学课题
工作任务7:
网站动画形象设计
(2)
教学课时
2学时
教学重点
与难点
重点:
1.矢量对象的绘制
2.修改工具的使用
3.使用选择工具修改矢量图形的外观
4.图层的使用和管理技巧
难点:
1.动画形象设计的技巧
2.填充工具的使用
3.图层的使用
授课形式
多媒体
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.制作过程(70分钟)
(1)设置Flash文档属性
(2)绘制动画形象的基本脸型
(3)修饰脸型
(4)绘制动画形象的耳朵
(5)复制耳朵并翻转,移动到合适位置
(6)绘制眼睛
(7)绘制嘴
(8)制作红晕
(9)绘制袈裟
(10)绘制背景一条鱼
(11)通过复制变形,形成丰富背景
(12)保存文档,导出动画
2.拓展训练(20分钟)
3.任务小结(5分钟)
配套实验
∕作业
填写实验报告册
课后
小结
课次
15
教学课题
工作任务8:
网页简单动画设计
(1)
教学课时
2学时
教学重点
与难点
重点:
1.帧和动画的含义和表示
2.帧的种类及相关操作
3.标签、注释和锚记的使用
4.图层的分类、图层操作
5.时间轴特效的添加及设置
难点:
1.图层的分类、图层操作
2.运动引导层和被引导层的作用
3.遮罩层与被遮罩层的作用
授课形式
多媒体
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.开篇励志(5分钟)
2.设计任务(10分钟)
3.设计知识:
(1)Flash动画原理(15分钟)
a)动画原理
b)Flash动画与传统动画的异同
(2)Flash动画的分类(20分钟)
a)逐帧动画
b)渐变动画
(3)Flash补间动画(25分钟)
(4)Flash帧的分类与使用(30分钟)
a)帧的分类
b)帧的使用
(1)课堂小结(5分钟)
配套实验
∕作业
课后
小结
课次
16
教学课题
工作任务8:
网页简单动画设计
(2)
教学课时
2学时
教学重点
与难点
重点:
1.逐帧动画的制作
2.文字滤镜效果
难点:
1.逐帧动画的原理
2.滤镜的使用
3.帧的操作——新建、删除、复制、粘贴等
授课形式
多媒体
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.设计知识:
(35分钟)
(1)Flash元件与实例的妙用
a)元件与实例的概述
b)元件的分类及特点
2.任务准备(40分钟)
(1)设计分析
(2)技术分析
(3)素材分析
3.制作过程(45分钟)
(1)新建画布
(2)制作数字倒数的逐帧动画
(3)制作霓虹边框的逐帧动画
(4)制作闪烁文字的逐帧动画
4.课堂小结(5分钟)
配套实验
∕作业
填写实验报告册
课后
小结
课次
17
教学课题
工作任务8:
网页简单动画设计(3)
教学课时
2学时
教学重点
与难点
重点:
1.各种运动动画的制作
2.形状动画的制作
3.元件的建立与使用
难点:
1.影片剪辑的使用
2.各种运动动画的制作
授课形式
多媒体
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.制作过程(80分钟)
(1)设置Flash文档属性
(2)导入素材
(3)制作图片“01.jpg”的淡入淡出效果
(4)制作图片“02.jpg”的缩放效果
(5)制作图片“03.jpg”的进入效果
(6)制作图片“04.jpg”的旋转效果
2.课堂小结(5分钟)
配套实验
∕作业
查阅flash动画源文件
课后
小结
课次
18
教学课题
工作任务8:
网页简单动画设计(4)
教学课时
2学时
教学重点
与难点
重点:
1.动画效果的表达方式
2.简单Action语句的使用
难点:
1.动画的创意
授课形式
多媒体
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.制作过程(70分钟)
(1)制作图片“05.jpg”的切入切出效果
(2)制作图片“06.jpg”的上浮下沉效果
(3)制作图片“07.jpg”的斜入斜出效果
(4)制作图片“08.jpg”的弹性效果
(5)给时间轴添加Action控制代码
(6)保存源文件,导出播放器格式文件
2.拓展训练(20分钟)
3.任务小结(5分钟)
配套实验
∕作业
填写实验报告册
课后
小结
课次
19
教学课题
网页按钮与导航设计1
教学课时
2学时
教学重点
与难点
重点:
1.按钮与导航的设计知识
2.Flash的按钮与导航的表现形式
3.Flash与Fireworks的协作技巧
难点:
1.Flash的按钮与导航的表现形式
2.元件的使用
授课形式
多媒体
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.开篇励志(5分钟)
2.设计任务(10分钟)
3.设计知识(30分钟)
(1)按钮
a)按钮的功能
b)按钮的分类
(2)导航栏
(3)Flash中的按钮元件
(4)Flash导航的常见样式
(5)设计要领
4.案例赏析(10分钟)
5.任务准备(10分钟)
(1)设计分析
(2)技术分析
(3)素材搜集
配套实验
∕作业
欣赏网站上常见的按钮和导航
课后
小结
课次
20
教学课题
网页按钮与导航设计2
教学课时
2学时
教学重点
与难点
重点:
1.元件的基本概念和优点
2.实例的基本概念和特点
3.库的使用
4.元件的分类和创建方法
5.实例创建和编辑、修改
难点:
1.按钮的制作
2.Flash与Fireworks的协作
3.导航栏的功能设计
授课形式
多媒体
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.制作过程(90分钟)
(1)建立大小为文档
(2)2.导入背景图像
(3)制作文字进入动画
(4)制作文字消失动画
(5)制作“首页”按钮元件
(6)制作其他按钮
2.课堂小结(5分钟)
配套实验
∕作业
制作实训报告册
课后
小结
课次
21
教学课题
网页按钮与导航设计3
教学课时
2学时
教学重点
与难点
重点:
1.Flash元件在场景中的转换与运用
2.FlashActionScript编程
难点:
1.动画对象的滤镜功能
2.Action的使用
授课形式
多媒体
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.制作过程(45分钟)
(2)制作“按钮组”影片剪辑
(3)为动画添加Action
(4)测试并将动画发布成网页
(5)在浏览器中浏览效果
2.拓展训练(40分钟)
(1)改进动画版1
(2)改进动画版2
3.任务小结(5分钟)
配套实验
∕作业
制作一个网页按钮的特效
课后
小结
课次
22
教学课题
网页按钮与导航设计4
教学课时
2学时
教学重点
与难点
重点:
1.掌握Flash元件的基本概念和优点
2.掌握Flash实例的基本概念和特点
3.掌握Flash创建和编辑元件的方法
难点:
1.在电影之间复制库文件
2.元件和实例之间的修改关系
授课形式
多媒体
教学内容组织与时间分配
一、课堂素质教育(5分钟)
二、教学过程设计(含时间分配)
1.挑战自我(90分钟)
(1)制作简单的个人求职网站
2.任务小结(5分钟)
配套实验
∕作业
填写实训报告册
课后
小结
课次
23
教学课题
网站动画片头设计1
教学课时
2学时
教学重点
与难点
重点:
6.动画片头的设计知识
7.FlashActionScript的高级应用
8.Flash遮罩动画的制作
9.Flas
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 教案