网页设计与制作教案Word下载.docx

资源描述

网页设计与制作教案Word下载.docx

《网页设计与制作教案Word下载.docx》由会员分享，可在线阅读，更多相关《网页设计与制作教案Word下载.docx（82页珍藏版）》请在冰豆网上搜索。

网页设计与制作教案Word下载.docx

7.任务小结及作业布置（5分钟）

配套实验

∕作业

实训报告：

为学院网站撰写一个网站策划书，要求字数1000字以上。

课后

小结

--------------------------------------装------------------------------------------------订-------------------------------------------------线--------------------------------------------

工作任务3：

网站图像设计

（1）

1.Fireworks的工作界面

2.文档的基本操作

3.网站图像基本知识

4.网站是色彩基本知识

5.文字的设置技巧

6.图像的基本设置

7.图文排版规律

2.矢量图和位图的区别

案例赏析、情景模拟

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.浏览优秀网站，分析其色彩搭配。

网站图像设计

（2）

1.使用Fireworks设置背景

2.简单颜色搭配

3.色块的绘制与设置

4.文字的设置技巧

5.属性栏的应用

1.矢量图和位图的区别

2.绘制、设置形状

3.文字设置

教师示范、学生模仿、创造

1.制作过程（70分钟）

（1）设置文档属性

（2）制作背景

（3）制作主体星星并变形

（4）制作并复制背景星星

（5）输入文字并设置属性

（6）保存文档

2.拓展训练（20分钟）

（1）删除原背景

（2）制作新背景

（3）制作白色曲线色带

3.任务小结（5分钟）

1.制作同版的一个白色背景封面图像

工作任务4：

网站广告设计

（1）

1.广告的设计知识

2.网页广告的分类

3.网页广告的尺寸

4.颜色的运用

5.路径的操作

1.网页广告的尺寸及相应的应用范围

2.优秀网站广告的五个标准

3.对象的操作：

复制、移动、排列

4.矢量图的绘制技巧

5.广告设计的创意、美化

课堂讨论、角色扮演、案例分析

1.任务引入（5分钟）

2.设计任务分析（25分钟）

3.设计知识介绍（40分钟）

（1）网站广告简介

（2）网站广告的特点

（3）网站广告的分类

（4）网站广告的表现形式

（5）广告条的尺寸

（6）优秀网站广告的五个标准

4.案例赏析（15分钟）

5.任务分析、讨论、准备（15分钟）

1.思考网站广告的分类都有哪些？

2.思考网页广告条的尺寸都有哪些?

各适用于什么场合？

网站广告设计

（2）

1.像素的概念

2.路径绘制

3.路径对象的编辑

4.为路径对象设置描边、填充、不透明度及效果

5.文本的创建与编辑

6.编辑位图对象

2.绘制自动形状：

自动形状是矢量对象组

3.钢笔工具：

绘制直线或者曲线

4.通过编辑节点变形路径

5.按路径改变文本的排列方式：

文本-附加到路径

6.选区制作与调整

多媒体

填写实训报告册

工作任务5：

网站标志设计

（1）

1.CIS知识

2.LOGO的设计知识

3.LOGO设计要领

1.VI在CIS中地位

2.LOGO的位置及原则

3.LOGO设计与表象形式的关系

1.开篇励志（5分钟）

2.设计任务（25分钟）

3.设计知识（40分钟）

（1）CIS企业形象识别系统

（2）网站标志Logo

（3）Logo的设计工具

（4）Logo设计原则

（5）Logo标志位置

（6）Logo表现形式

（7）Logo标志颜色

5.任务准备（15分钟）

查阅多个网站，尤其是系列网站（如中国移动、联通、电信），思考:

logo设计与网站设计的关系。

网站标志设计

（2）

1.选区的制作和调整

2.裁剪位图和符合画布

3.对象的堆叠、成组与对齐

4.使用图层

5.创建、编辑和使用蒙版

6.为对象添加滤镜

1.对象层叠顺序的操作

2.对象的接合/拆分、联合、交集、打孔、裁剪

3.使用菜单进行对象的变形操作

4.位图的导入设置

5.蒙版的设置

6.为对象添加滤镜效果

7.辅助线的使用

1.制作过程（90分钟）

（1）设置辅助线

（2）绘制同心圆

（3）修饰成空心圆环

（4）分割空心圆环

（5）设置对象颜色

（6）制作底板对象

（7）制作logo中心蒙版图像效果

（8）添加文字效果

2.任务小结（5分钟）

网站标志设计（3）

1.拓展训练1（40分钟）

制作同版的一个白色背景封面图像

2.拓展训练2（40分钟）

为学院示范建设设计一版封面网页图像，绘制出效果图

工作任务6：

网页效果图设计

（1）

1.效果图的概念

2.切片的功能与作用

3.效果图设计要领

4.效果图的制作工具

1.Firework和Photoshop的区别

2.切片的技巧

3.效果图的类型与网站类型的关系

（1）效果图的概念

（2）切片的功能与作用

（3）效果图设计要领

（4）效果图的制作工具

浏览各种类型的网站，思考其页面设计的技巧。

网页效果图设计

（2）

1.色彩的搭配技巧

2.文字的效果的高级应用

3.滤镜的使用

4.钢笔工具绘制图形

5.对象的组合和复制、变化

1.网页版式和布局设计

2.网页文字效果设计

3.网页图像设计

（2）输入文字，设置文字属性

（3）设置文字效果

（4）使用变形、填充等方式，添加特殊效果文字

（5）绘制弧形光晕

（6）设置光晕效果

（7）复制、移动构成背景焰火

（8）制作多样的焰火效果

（9）使用“层”面板管理诸多光晕

构思一个自己的个人网站效果图

网页效果图设计（3）

1.图层的混合效果

2.辅助线的使用

3.切片原则和技巧

4.使用Fireworks生成简单网页

1.网页视觉效果综合设计

2.网页功能设计

3.网页优化设计

1.制作过程50分钟）

（1）导入图案

（2）修改图案的方向和图层的混合效果

（3）添加其他文字，并设置效果

（4）添加超链接

（5）优化图像尺寸和质量

（6）设置切片辅助线

（7）使用切片将图片切片

（8）导出为网页格式

2.拓展训练1（40分钟）

工作任务7：

网站动画形象设计

（1）

1.Flash特点、用途

2.Flash界面特点

3.Flash基本操作

4.动画的常见术语

1.Flash界面与Firework的区别

3.动画的基本术语

2.设计任务（10分钟）

3.认识Flash：

（30分钟）

（1）Flash简介

（2）Flash的特点

（3）Flash的用途

（4）Flash的操作界面

（5）工具（栏/箱）的介绍

4.设计知识（30分钟）

（1）舞台和工作区

（2）帧

（3）时间轴

5.案例赏析（10分钟）

6.任务准备（10分钟）

浏览网站，找出网页上各种类型的动画，说说他们的作用。

网站动画形象设计

（2）

1.矢量对象的绘制

2.修改工具的使用

3.使用选择工具修改矢量图形的外观

4.图层的使用和管理技巧

1.动画形象设计的技巧

2.填充工具的使用

3.图层的使用

（1）设置Flash文档属性

（2）绘制动画形象的基本脸型

（3）修饰脸型

（4）绘制动画形象的耳朵

（5）复制耳朵并翻转，移动到合适位置

（6）绘制眼睛

（7）绘制嘴

（8）制作红晕

（9）绘制袈裟

（10）绘制背景一条鱼

（11）通过复制变形，形成丰富背景

（12）保存文档，导出动画

填写实验报告册

工作任务8：

网页简单动画设计

（1）

1.帧和动画的含义和表示

2.帧的种类及相关操作

3.标签、注释和锚记的使用

4.图层的分类、图层操作

5.时间轴特效的添加及设置

1.图层的分类、图层操作

2.运动引导层和被引导层的作用

3.遮罩层与被遮罩层的作用

3.设计知识：

（1）Flash动画原理（15分钟）

a）动画原理

b）Flash动画与传统动画的异同

（2）Flash动画的分类（20分钟）

a）逐帧动画

b）渐变动画

（3）Flash补间动画（25分钟）

（4）Flash帧的分类与使用（30分钟）

a）帧的分类

b）帧的使用

（1）课堂小结（5分钟）

网页简单动画设计

（2）

1.逐帧动画的制作

2.文字滤镜效果

1.逐帧动画的原理

2.滤镜的使用

3.帧的操作——新建、删除、复制、粘贴等

1.设计知识：

（35分钟）

（1）Flash元件与实例的妙用

a）元件与实例的概述

b）元件的分类及特点

2.任务准备（40分钟）

（3）素材分析

3.制作过程（45分钟）

（1）新建画布

（2）制作数字倒数的逐帧动画

（3）制作霓虹边框的逐帧动画

（4）制作闪烁文字的逐帧动画

4.课堂小结（5分钟）

网页简单动画设计（3）

1.各种运动动画的制作

2.形状动画的制作

3.元件的建立与使用

1.影片剪辑的使用

2.各种运动动画的制作

1.制作过程（80分钟）

（2）导入素材

（3）制作图片“”的淡入淡出效果

（4）制作图片“”的缩放效果

（5）制作图片“”的进入效果

（6）制作图片“”的旋转效果

2.课堂小结（5分钟）

查阅flash动画源文件

网页简单动画设计（4）

1.动画效果的表达方式

2.简单Action语句的使用

1.动画的创意

（1）制作图片“”的切入切出效果

（2）制作图片“”的上浮下沉效果

（3）制作图片“”的斜入斜出效果

（4）制作图片“”的弹性效果

（5）给时间轴添加Action控制代码

（6）保存源文件，导出播放器格式文件

网页按钮与导航设计1

1.按钮与导航的设计知识

2.Flash的按钮与导航的表现形式

3.Flash与Fireworks的协作技巧

1.Flash的按钮与导航的表现形式

2.元件的使用

3.设计知识（30分钟）

（1）按钮

a）按钮的功能

b）按钮的分类

（2）导航栏

（3）Flash中的按钮元件

（4）Flash导航的常见样式

（5）设计要领

5.任务准备（10分钟）

欣赏网站上常见的按钮和导航

网页按钮与导航设计2

1.元件的基本概念和优点

2.实例的基本概念和特点

3.库的使用

4.元件的分类和创建方法

5.实例创建和编辑、修改

1.按钮的制作

2.Flash与Fireworks的协作

3.导航栏的功能设计

（1）建立大小为文档

（2）2.导入背景图像

（3）制作文字进入动画

（4）制作文字消失动画

（5）制作“首页”按钮元件

（6）制作其他按钮

制作实训报告册

网页按钮与导航设计3

1.Flash元件在场景中的转换与运用

2.FlashActionScript编程

1.动画对象的滤镜功能

2.Action的使用

1.制作过程（45分钟）

（2）制作“按钮组”影片剪辑

（3）为动画添加Action

（4）测试并将动画发布成网页

（5）在浏览器中浏览效果

2.拓展训练（40分钟）

（1）改进动画版1

（2）改进动画版2

制作一个网页按钮的特效

网页按钮与导航设计4

1.掌握Flash元件的基本概念和优点

2.掌握Flash实例的基本概念和特点

3.掌握Flash创建和编辑元件的方法

1.在电影之间复制库文件

2.元件和实例之间的修改关系

1.挑战自我（90分钟）

（1）制作简单的个人求职网站

网站动画片头设计1

6.动画片头的设计知识

7.FlashActionScript的高级应用

8.Flash遮罩动画的制作

9.Flash引导动画的制作

5.运动引导层和被引导层的作用

6.遮罩层与被遮罩层的作用

3.设计知识（50分钟）

（1）Flash动画片头

a）Flash动画片头简介

b）Flash动画片头设计要点

c）Flash动画片头的设计流程

（2）动画片头所需的Flash技术

a）场景

b）ActionScript

c）声音

d）遮罩动画

e）引导动画

（2）素材搜集

网站片头动画欣赏

网站动画片头设计2

1.了解动画的原理

2.了解动画的分

展开阅读全文