网页效果图的制作公开课教案.pdfVIP

网页效果图的制作 ——制作网页标志横幅 课程：电子商务网页制作 班 级： 09 电商 3+2 时间： 12 月 16 日第三节 授课教师：李晓琳 教学目标： 知识目标： 1、能描述创建网站主页的目的 2 、能列举网页应包含的内容 3、了解网页标志横幅的作用 技能目标： 1、能绘制网站主页的网页标志横幅 2 、掌握 fireworks 工具属性的设置方法 情感目标：对操作过程中遇到的问题能主动思考具有较强的网页设计 创意思维、艺术设计素质。 教学重点： 1、Firewoks 中矩形工具、文字工具、直线工具、库命令的使用 2、Firewoks 中元件转换为按钮的操作 难 点： 元件转换为按钮及库命令的使用 教学方法： 任务驱动教学法 一、 导入 提问：同学们平时的休闲方式有哪些呢？——影视文化通常是我们茶余饭后 的谈资，平时也会去电影院看电影是吧？特别是大片， 往往去了电影院要排长队， 而且还不一定买的到票， 在电子商务迅速发展的推动下， 网上订票为我们消除了 排队买票的烦恼。 那网上订票是基于什么样的平台呢？下面我们来看下我们德清 的大地数字影院的网络平台——“哈票网” 。 二、 新授 任务一：网页横幅的制作—— 1、“哈票网”网站的展示，分析引出一个网页应包含哪些内容。 提问：看了这个页面，请你说出一个网页包含哪些元素呢？ （学生回答，教师补充）——引出网页横幅的重要性 2、为什么要制作网页横幅？ 在一个简单的网页中， 上方的横幅是最重要的视觉元素。 在很多博客网页中， 1 它甚至是唯一的视觉元素。 所以它的作用可以说是相当大的。 它必须能够与网站 的风格配合， 并能传达视觉上的信息。 它必须让人看上一眼就让人知道这个网站 是属于什么类型，风格是什么。 （展示不同网站的不同网页横幅效果图，说明网 页横幅是可以多种形式展现的。 ） 3、提出任务，教师演示：效果图展示，操作示范 （1）新建一个文档：宽 1200 像素，高为 600 像素。 （2）矩形工具、圆角矩形工具、椭圆工具、文字工具、直线工具的使用及属性 设置 4 、学生活动：按所给效果图及素材制作网页横幅（根据男女生兴趣偏好不同， 男女分组操练：男生做 NBA网页横幅、女生做淘宝门户网的网页横幅） 操作步骤 : （1）新建一个文档：新建一个文档：宽 1200 像素，高为 600 像素。 （2 ）用矩形工具绘制两个矩形： 可与画布同长， 宽度根据需要自定， 大矩形的颜色设为“ #333333”, 小矩形的颜色设为“ #666666” （3 ）在小矩形右侧添加文字，选择“文字工具” ，添加文字，其属性 设置为：字体——宋体，颜色——“ #66FF00”，字号——“ 15” （4 ）用椭圆矩形工具在画布的左侧绘制两个圆形，一大一小，填充 颜色渐变，颜色为“ #FFFF00”至“#00CC00”, 如图所示 （5 ）用文字工具，在大圆上添加文字“哈” ，文字属性设置为： “白 色”“隶书”“90”；小圆上添加文字“票”，属性设置为