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

网页效果图的制作 ——制作网页标志横幅 课程：电子商务网页制作 班 级：09电商3+2 时间：12月16日第三节 授课教师：李晓琳 教学目标：知识目标：1、能描述创建网站主页的目的 2、能列举网页应包含的内容 3、了解网页标志横幅的作用 技能目标：1、能绘制网站主页的网页标志横幅 2、掌握fireworks工具属性的设置方法 情感目标：对操作过程中遇到的问题能主动思考具有较强的网页设计创意思维、艺术设计素质 （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” 按F8，弹出元件属性对话框，名称改为“选择”，类型为“按钮”，单击确定。 （3）打开“库”面板,将元件拖动到网页中，排列对其，选中对象，选择文字工具，添加文字“选影院订票”“选影片订票” （4）按F12可以预览网页，操作完成后，保存为“png”格式的文档，同时以网页形式导出，保存在桌面以自己姓名命名的文件夹。（在桌面上新建文件夹，以自己的名字命名） 教师巡回指导 三、点评：对学生上传的作品进行点评，学生互评。 四、课堂小结： 本节课我们学习了网页标志横幅的制作，学习FIREWORKS中矩形工具、圆角 矩形工具、文字工具、直线工具及库命令的操作，重点掌握元件转换为按钮的操作及库命令的使用。 五、作业：完成实验指导练习的操作练习和实验报告 4