《制作简单网页》教案.doc

《制作简单网页》教案 课题名称 制作简单网页 建议课时 2课时（建议两节连堂） 教学目标 知识目标 1. 了解网页及其界面； 2. 掌握网页界面设计与平面构成的表现形式； 3. 掌握平面构成的设计原则； 4．学会平面构成在网页界面设计中的应用方法。 能力目标 培养学生分析解决问题的能力、动手能力和发散性思维能力。 德育目标 培养学生勇于探索、勤于思考的学习精神。养成严谨、认真的工作态度。 教学重点 掌握简单网页界面的设计制作方法 教学难点 把点、线、面的相关知识与网页Banner设计制作相结合。 任务介绍 本任务是制作简单网页界面 ，如下图所示。 本任务将是运用点、线、面的基本知识，和形式美法则的基本原理，制作简单网页。该实例已提供相关素材，结合学习过的相关知识，运用有提醒和强调作用的点和线作为导航，有美化和分割作用的线和各要素及留白构成的面，绘制简单的网页。 教学过程 学生活动 教师活动 创设情境 融入情境，产生完成本任务的欲望。 创设一个真实的项目情境，激发学生完成本任务的兴趣。在本“任务情境”的基础上，使用投影，展现本任务完成效果图，激发学生兴趣与完成的欲望。 任务分析 学生小组讨论，如何完成任务。 向学生展示任务效果图，要求学生结合自身知识与技术储备，完成本任务还需要哪些知识与技术支持，找出自己不能完成的内容。 在学生讨论的基础，教师有针对性引导学生，将需要解决的问题收集、整理出来。 任务实施 参照教材中“任务实施”，尝试操作，实施任务。当遇到困难时，向老师或同学们进行请教。 学生在操作的过程中，教师要适时巡查，发现问题，引导学生解决。同时，鼓励小组同学之间相互帮助，积极交流，解决问题。 典型引导 解决问题 阅读教材，尝试操作，掌握新知。 引导学生参照教材的“相关操作知识”，进一步掌握点、线、面在实际中的运用等相关知识。 展示评价 首先自评，然后小组评价。 教师点评，引导学生相互交流学习。 拓展探索 模仿任务2的实例，为“金帝健身俱乐部”设计网站页面。 教师根据实际情况，有针对性示范操作。评价作品，将评价结果反馈给学生。 附件： 任务实施步骤： 1. 启动Photoshop CS5，选择 “文件”→“新建”菜单命令，新建一个大小为“1000×750”像素，分辨率为“72”，颜色模式为RGB颜色，背景内容为“白色”的文件，并将其命名为“幼儿大讲堂”，如题1-47所示。 图1-47“幼儿大讲堂”文件设置 2. 绘制背景。 （1）添加背景渐变颜色。具体参数设置如图1-48,1-49所示，完成效果如1-50所示。 图1-48 添加渐变 图1-49 渐变编辑器 图1-50 渐变效果 （2）插入背景图片。打开“素材╱项目1╱任务2╱背景素材”，把素材置放在背景图层的中间，调整其位置，完成效果如图1-51所示。 图1-51 插入素材 3、绘制圆形导航。 （1）新建图层，选择“选框工具”→“圆形选框”，按住“Ctrl”绘制正圆形，填充颜色为“fddf65”，如图1-52所示；新建图层，选择“选框工具”→“圆形选框”，按住“Ctrl”绘制正圆形，填充颜色为“白色”如图1-53所示；完成效果如图1-54所示；打开“素材╱项目1╱任务2╱背景素材2”，把素材置放在圆形的中间，调整其位置并“创建剪切蒙版”如图1-55所示，完成效果如图1-56所示。 图1-52 绘制正圆 图1-53 绘制正圆 图1-54 完成效果 图1-55 创建剪切蒙版 图1-56 完成效果 （2）新建图层，选择“选框工具”→“圆形选框”，按住“Ctrl”绘制正圆形，填充颜色为“a46fe7”如图1-57所示；选择“铅笔工具”取适当大小，绘制圆形，填充颜色为“白色”，完成效果如图1-58所示；重复以上步骤，绘制其他四个圆形按钮，填充颜色分别为“fe7c0e”、“ b1d430”、“ fb4fa5”、“5672e9”如图1-59——1-62所示。 图1-57 绘制正圆 图1-58 完成效果 图1-59 完成效果 图1-60 完成效果 图1-61 完成效果 图1-62 完成效果 （3）为导航条按钮添加文字。 添加第一个按钮文字，新建文字图层，将其命名为“拼音”。选择“横排文字工具”，在选项栏上选择文字字体“方正卡通简体，选择字号“24”，颜色为“55c4f0”，效果如图1-63所示；重复以上动作，绘制其它四个按钮文字，效果如图1-64所示。 图1