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

1、网页效果图的制作 制作网页标志横幅课程：电子商务网页制作 教学目标：知识目标：1、能描述创建网站主页的目的 2、能列举网页应包含的内容3、了解网页标志横幅的作用技能目标：1、能绘制网站主页的网页标志横幅 2、掌握fireworks工具属性的设置方法 情感目标：对操作过程中遇到的问题能主动思考具有较强的网页设计创意思维、艺术设计素质。教学重点：1、Firewoks中矩形工具、文字工具、直线工具、库命令的使用2、Firewoks中元件转换为按钮的操作难 点：元件转换为按钮及库命令的使用教学方法：任务驱动教学法一、导入提问：同学们平时的休闲方式有哪些呢？影视文化通常是我们茶余饭后的谈资，平时也会去电

2、影院看电影是吧？特别是大片，往往去了电影院要排长队，而且还不一定买的到票，在电子商务迅速发展的推动下，网上订票为我们消除了排队买票的烦恼。那网上订票是基于什么样的平台呢？下面我们来看下我们德清的大地数字影院的网络平台“哈票网”。二、 新授任务一：网页横幅的制作1、“哈票网”网站的展示，分析引出一个网页应包含哪些内容。提问：看了这个页面，请你说出一个网页包含哪些元素呢？（学生回答，教师补充）引出网页横幅的重要性2、为什么要制作网页横幅？在一个简单的网页中，上方的横幅是最重要的视觉元素。在很多博客网页中，它甚至是唯一的视觉元素。所以它的作用可以说是相当大的。它必须能够与网站的风格配合，并能传达视觉

3、上的信息。它必须让人看上一眼就让人知道这个网站是属于什么类型，风格是什么。（展示不同网站的不同网页横幅效果图，说明网页横幅是可以多种形式展现的。）3、提出任务，教师演示：效果图展示，操作示范 （1）新建一个文档：宽1200像素，高为600像素。（2）矩形工具、圆角矩形工具、椭圆工具、文字工具、直线工具的使用及属性设置4、学生活动：按所给效果图及素材制作网页横幅（根据男女生兴趣偏好不同，男女分组操练：男生做NBA网页横幅、女生做淘宝门户网的网页横幅）操作步骤: （1）新建一个文档：新建一个文档：宽1200像素，高为600像素。 （2）用矩形工具绘制两个矩形：可与画布同长，宽度根据需要自定，大矩形

4、的颜色设为“#333333”,小矩形的颜色设为“#666666”（3）在小矩形右侧添加文字，选择“文字工具”，添加文字，其属性设置为：字体宋体，颜色“#66FF00”，字号“15”（4）用椭圆矩形工具在画布的左侧绘制两个圆形，一大一小，填充颜色渐变，颜色为“#FFFF00”至“#00CC00”,如图所示（5）用文字工具，在大圆上添加文字“哈”，文字属性设置为：“白色”“隶书”“90”；小圆上添加文字“票”，属性设置为“白色”“幼圆”“30”；再用文字工具在“哈票”右侧添加文字“快速订票 轻松观影”，属性设置为“白色”“幼圆”“24”，紧接着下方添加网址，属性设置为“#66FF00”“Centu

5、ry Gothic”“22”5、教师巡回指导，发现问题，个别辅导任务二、美化横幅添加阴影、元件转换为按钮 6、提出任务，教师演示：效果网页横幅展示，操作示范（1）添加阴影（2）元件转换为按钮的操作（3）“库”命令的操作学生活动：按所给效果网页制作操作步骤：（1）选中要添加阴影的对象“哈”，选择“命令” “创意”“添加阴影”，调整到所需要的位置 （2）选择“圆角矩形工具”绘制一个圆角矩形，颜色填充为“#333333”描边选择“铅笔”，笔尖大小和边缘都为“3”，颜色为“#66FF00”按<F8>，弹出元件属性对话框，名称改为“选择”，类型为“按钮”，单击确定。（3）打开“库”面板,将元件拖动到网页中，排列对其，选中对象，选择文字工具，添加文字“选影院订票”“选影片订票”（4）按<F12>可以预览网页，操作完成后，保存为“png”格式的文档，同时以网页形式导出，保存在桌面以自己姓名命名的文件夹。（在桌面上新建文件夹，以自己的名字命名） 教师巡回指导三、点评：对学生上传的作品进行点评，学生互评。四、课堂小结：本节课我们学习了网页标志横幅的制作