《排版布局在网页中的艺术表现形式分析》教案.docVIP

《排版布局在网页中的艺术表现形式分析》教案 课题名称 制作厨师网站页面 建议课时 2课时（建议两节连堂） 教学目标 知识目标 1. 了解网页排版布局的基本常识； 2. 掌握网页排版布局的形式； 3. 掌握网页排版布局遵循的原则； 4. 学会网页排版布局的实际应用技巧。 能力目标 培养学生的动脑能力、动手实践能力和创新性思维能力。 德育目标 培养学生的审美意识，增强学生学习的自信心，形成主动学习的良好氛围。 教学重点 掌握厨师网站页面的设计制作方法。 教学难点 网页排版布局的基本形式及绘图工具的运用。 任务介绍 本任务是制作厨师网站页面，如下图所示。 本任务是制作厨师培训机构的网站页面，该任务在制作前已提供相关的素材，结合素材的特点和网站本身的特征，运用给人以香酥感觉的黄色作为页面的主色调，运用水平线，规范、理性的将页面分成横向三栏，整个版面主要以图片和简单文字为主，既规范简洁，又轻松随意，给人以美的体验和强烈的视觉冲击力。这种简单的排版布局方法，被越来越多的运用在实际设计中。 教学过程 学生活动 教师活动 创设情境 融入情境，产生完成本任务的欲望。 创设一个真实的项目情境，激发学生完成本任务的兴趣。在本“任务情境”的基础上，使用投影，展现本任务完成效果图，激发学生兴趣与完成的欲望。 任务分析 学生小组讨论，如何完成任务。 向学生展示任务效果图，要求学生结合自身知识与技术储备，完成本任务还需要哪些知识与技术支持，找出自己不能完成的内容。 在学生讨论的基础，教师有针对性引导学生，将需要解决的问题收集、整理出来。 任务实施 参照教材中“任务实施”，尝试操作，实施任务。当遇到困难时，向老师或同学们进行请教。 学生在操作的过程中，教师要适时巡查，发现问题，引导学生解决。同时，鼓励小组同学之间相互帮助，积极交流，解决问题。 典型引导 解决问题 阅读教材，尝试操作，掌握新知。 引导学生参照教材的“知识准备”，了解网页排版布局的基本常识、掌握网页排版布局的基本形式等相关知识。 展示评价 首先自评，然后小组评价。 教师点评，引导学生相互交流学习。 拓展探索 为“天晴外贸服饰店”设计制作满版型网页界面。 教师根据实际情况，有针对性示范操作。评价作品，将评价结果反馈给学生。 附件： 任务实施步骤： 1. 启动Photoshop CS5，选择 “文件”→“新建”菜单命令，新建一个大小为1000×775像素，分辨率为72，颜色模式为RGB颜色，背景内容为白色的文件，并将其命名为“厨师”，如图4-16所示。 图4-16新建“厨师”文件设置 2. 填充背景颜色为“d9bd02”，如图4-17所示。 图4-17 填充背景颜色 3．绘制导航条。 （1）新建图层，选择“矩形选框工具”，绘制矩形并填充颜色为“8c201d”.如图4-18所示。 图4-18 绘制矩形并填充颜色 （2）新建图层，选择“钢笔工具”，绘制“3像素”直线，并为直线添加“图层样式” →“阴影”和“外发光”如图4-19，4-20所示。完成效果如图4-21所示。 图4-19 绘制直线并添加投影 图4-20添加外发光 图4-21 完成效果 （3）绘制导航栏第一个按钮色块。新建图层，选择“圆角矩形工具”，绘制圆角长方形，并填充颜色为“dabd00”，放置在相应位置，如图4-22所示。 重复以上步骤，做出其他3个按钮，并调整颜色值为“a29400”，完成效果如图4-23所示。 图4-22 绘制按钮 图4-23 完成效果 （4）添加导航栏第一个按钮文字，新建文字图层，将其命名为“首页”。选择“横排文字工具”，在选项栏上选择文字字体“宋体”，选择字号“30”，选择“锐利”效果，颜色为“8a2024”效果如图4-24所示。重复以上步骤，添加其他3个按钮文字，并调整颜色值为“白色”，完成效果如图4-25所示。 图4-24 添加按钮文字 图4-25 完成效果 4. 绘制页面底部图案。 （1）绘制格子图案。新建图层，选择“矩形选框工具”，样式为“固定大小”，宽度“20”，高度“20”，如图4-26所示。绘制固定大小的正方形，并填充颜色为“86acb9”如图4-27所示。重复以上步骤，绘制其他3个正方形，并分别调整颜色，排列组合，效果如图4-28所示。将四个小方块所在图层合并，选择“编辑” →“定义画笔预设”，新建图层，选择“矩形框选工具”，运用“图案图章工具”绘制格子效果，如图4-29所示。 图4-26 绘制矩形并固定大小 图4-27 为正方形填充颜色 图4-28 四个正方形颜色设置 图4-29 格子图案效果 （2）绘制白色花边图案。 新建图层，选择“椭圆选框工具”，绘制正圆，并填充颜色为“白色”，复制图层，绘制多个相同的正圆，依次排列，置放于格子的上部分，效果如图4-30所