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

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