2022年网页效果图的制作公开课教案 .pdf

《2022年网页效果图的制作公开课教案 .pdf》由会员分享，可在线阅读，更多相关《2022年网页效果图的制作公开课教案 .pdf（4页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、名师精编精品教案网页效果图的制作制作网页标志横幅课程：电子商务网页制作班级： 09电商 3+2 时间： 12 月 16日第三节授课教师：李晓琳教学目标： 知识目标： 1、能描述创建网站主页的目的 2、能列举网页应包含的内容3、了解网页标志横幅的作用技能目标： 1、能绘制网站主页的网页标志横幅 2、掌握 fireworks工具属性的设置方法情感目标：对操作过程中遇到的问题能主动思考具有较强的网页设计创意思维、艺术设计素质。教学重点： 1、Firewoks 中矩形工具、文字工具、直线工具、库命令的使用2、Firewoks 中元件转换为按钮的操作难点： 元件转换为按钮及库命令的使用教学方法： 任务驱

2、动教学法一、导入提问： 同学们平时的休闲方式有哪些呢？影视文化通常是我们茶余饭后的谈资， 平时也会去电影院看电影是吧？特别是大片，往往去了电影院要排长队，而且还不一定买的到票， 在电子商务迅速发展的推动下，网上订票为我们消除了排队买票的烦恼。那网上订票是基于什么样的平台呢？下面我们来看下我们德清的大地数字影院的网络平台“哈票网”。二、新授任务一：网页横幅的制作1、 “哈票网”网站的展示，分析引出一个网页应包含哪些内容。提问：看了这个页面，请你说出一个网页包含哪些元素呢？（学生回答，教师补充）引出网页横幅的重要性2、为什么要制作网页横幅？在一个简单的网页中，上方的横幅是最重要的视觉元素。 在很多

3、博客网页中，精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 1 页，共 4 页名师精编精品教案它甚至是唯一的视觉元素。 所以它的作用可以说是相当大的。它必须能够与网站的风格配合， 并能传达视觉上的信息。 它必须让人看上一眼就让人知道这个网站是属于什么类型，风格是什么。 （展示不同网站的不同网页横幅效果图，说明网页横幅是可以多种形式展现的。 ）3、提出任务，教师演示：效果图展示，操作示范（1）新建一个文档：宽1200 像素，高为 600 像素。（2）矩形工具、圆角矩形工具、椭圆工具、文字工具、直线工具的使用及属性设置4、学生活动：按所给效果图及素材制

4、作网页横幅（根据男女生兴趣偏好不同，男女分组操练：男生做 NBA 网页横幅、女生做淘宝门户网的网页横幅）操作步骤 : （1）新建一个文档：新建一个文档：宽1200 像素，高为 600 像素。（2）用矩形工具绘制两个矩形： 可与画布同长， 宽度根据需要自定，大矩形的颜色设为“ #333333”, 小矩形的颜色设为“ #666666”（3）在小矩形右侧添加文字，选择“文字工具” ，添加文字，其属性设置为：字体宋体，颜色“#66FF00 ” ，字号“ 15”（4）用椭圆矩形工具在画布的左侧绘制两个圆形，一大一小，填充颜色渐变，颜色为“ #FFFF00 ”至“ #00CC00 ”, 如图所示（5）用文

5、字工具，在大圆上添加文字“哈”，文字属性设置为：“白色” “隶书” “90” ；小圆上添加文字“票”，属性设置为“白色”“幼圆”“30” ；再用文字工具在“哈票”右侧添加文字“快速订票 轻松观影”，属性设置为“白色”“幼圆” “24” ，紧接着下方添加网址， 属性设置为 “#66FF00 ” “Century Gothic ”“22”5、教师巡回指导，发现问题，个别辅导任务二、美化横幅添加阴影、元件转换为按钮精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 2 页，共 4 页名师精编精品教案6、提出任务，教师演示：效果网页横幅展示，操作示范（1）添加

6、阴影（2）元件转换为按钮的操作（3） “库”命令的操作学生活动：按所给效果网页制作操作步骤： （1）选中要添加阴影的对象“哈” ，选择“命令”“创意”“添加阴影”，调整到所需要的位置（2） 选择“圆角矩形工具” 绘制一个圆角矩形， 颜色填充为“#333333”描边选择“铅笔” ，笔尖大小和边缘都为 “3” ，颜色为“#66FF00 ”按 ，弹出元件属性对话框，名称改为“选择”，类型为“按钮” ，单击确定。（3）打开“库”面板 , 将元件拖动到网页中，排列对其，选中对象，选择文字工具，添加文字“选影院订票” “选影片订票”（4）按 可以预览网页， 操作完成后， 保存为“png”格式的文档，同时以

7、网页形式导出， 保存在桌面以自己姓名命名的文件夹。 （在桌面上新建文件夹，以自己的名字命名）教师巡回指导三、点评：对学生上传的作品进行点评，学生互评。四、课堂小结：本节课我们学习了网页标志横幅的制作，学习 FIREWORKS中矩形工具、 圆角矩形工具、文字工具、直线工具及库命令的操作，重点掌握元件转换为按钮的操作及库命令的使用。五、作业：完成实验指导练习的操作练习和实验报告精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 3 页，共 4 页名师精编精品教案精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 4 页，共 4 页