网页效果图的制作
——制作网页标志横幅
课程：电子商务网页制作
班
级：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”；小圆上添加文字“票”，属性设置为“白色”“幼圆”“30”；再用文字工具在“哈票”右侧添加文字“快速订票 轻松观影”，属性设置为“白色”“幼圆”“24”，紧接着下方添加网址，属性设置为“#66FF00”“Century Gothic”“22”
5、教师巡回指导，发现问题，个别辅导
任务
二、美化横幅——添加阴影、元件转换为按钮
6、提出任务，教师演示：效果网页横幅展示，操作示范
（1）添加阴影
（2）元件转换为按钮的操作 （3）“库”命令的操作 学生活动：按所给效果网页制作
操作步骤：（1）选中要添加阴影的对象“哈”，选择“命令” ——“创意”——“添加阴影”，调整到所需要的位置
（2）选择“圆角矩形工具”绘制一个圆角矩形，颜色填充为“#333333”描边选择“铅笔”，笔尖大小和边缘都为“3”，颜色为“#66FF00” 按，弹出元件属性对话框，名称改为“选择”，类型为“按钮”，单击确定。
（3）打开“库”面板,将元件拖动到网页中，排列对其，选中对象，选择文字工具，添加文字“选影院订票”“选影片订票” （4）按可以预览网页，操作完成后，保存为“png”格式的文档，同时以网页形式导出，保存在桌面以自己姓名命名的文件夹。（在桌面上新建文件夹，以自己的名字命名）
教师巡回指导
三、点评：对学生上传的作品进行点评，学生互评。
四、课堂小结：
本节课我们学习了网页标志横幅的制作，学习FIREWORKS中矩形工具、圆角 矩形工具、文字工具、直线工具及库命令的操作，重点掌握元件转换为按钮的操作及库命令的使用。
五、作业：完成实验指导练习的操作练习和实验报告
3
