第26课 制作酒店网站首页（1）（教案）-《网页制作三合一案例教程》同步教学（航空工业出版社）

课题 第26课 制作酒店网站首页（1） 课时 2课时（90 min） 教学目标 知识目标： （1）掌握在Photoshop中，分区域制作网站首页效果图和切割输出首页图像的方法 （2）掌握在Flash中，传统补间动画的制作方法 技能目标： （1）使用Photoshop设计页面效果图 （2）实际网页制作当中灵活运用Photoshop处理图像和制作Flash动画 素质目标： 做事情要有条不紊，学习要认真仔细 教学重难点 教学重点：使用Photoshop设计页面效果图作，使用Flash制作传统补间动画 教学难点：根据任务要求，设计出制作方案 教学方法 问答法、讨论法、讲授法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→  问题导入（3 min）→传授新知（35 min）→课堂实训（5 min） 第2节课：问题导入（3 min）→ 传授新知（17 min）→ 课堂实训（20 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 【教师】让学生上网浏览各大门户网站的首页，选出自己认为制作最为精美的网页 【学生】按照要求完成课前任务 通过课前任务，培养学生网页制作的美感 考勤 （2 min） 【教师】使用文旌课堂APP进行签到 【学生】班干部报请假人员及原因 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （3min） 【教师】提出以下问题，并随机邀请学生进行回答 回顾项目八的任务实施——制作“天音”网站主页效果图，思考主页是如何分区域进行制作的？ 【学生】聆听、思考、回答 【教师】总结学生的回答，导入本节课内容：在Photoshop中制作网站首页效果图 通过回顾之前项目，温习相关知识，引出本次课类似内容:在Photoshop中制作网站首页效果图 传授新知 （35 min） 【教师】讲解新知，介绍在Photoshop中制作网站首页效果图 任务一 在Photoshop中制作网站首页效果图 一、任务说明 本任务将使用Photoshop制作网站首页效果图，并使用“切片工具”将其切割。 二、任务实施 （一）制作网站首页效果图 下面使用Photoshop制作网站首页效果图。为便于理解，将该节分为4部分来讲，具体操作步骤如下。 1．制作网页上部 【多媒体】演示制作网页上部的具体步骤 步骤1启动Photoshop CS5后，选择“文件”>“新建”菜单，在打开的“新建”对话框中设置“宽度”和“高度”分别为“1100像素”和“950像素”，“颜色模式”为“RGB颜色”。 步骤2单击“确定”按钮新建文档，保存文档为“main.psd”；打开“图层”调板，单击其下方的“创建图层组”按钮，新建图层组并重命名为“top”。 步骤3打开本书配套素材“素材与实例\素材\项目十一”目录下的“bg.jpg”图像文件，使用“选择工具”将其中的图像拖拽至新文档“main.psd”中，放在最上方，并与背景左右对齐。 步骤4选中拖入的图像，选择“图像”>“图像旋转”>“水平翻转画布”菜单，使图像水平翻转。 步骤5创建新图层，设置前景色为白色，然后使用“矩形工具”在图像上方绘制一个贯穿画布左右的长矩形，并在“图层”调板上设置图层“不透明度”为“50%”。 步骤6创建新图层，使用“矩形选框工具”在步骤5中绘制的白色矩形上创建一个贯穿画布左右的长方形选区。 步骤7选择“渐变工具”，并打开“渐变编辑器”，首先选择“黄，紫，橙，蓝，渐变”，然后分别设置各个渐变色标的颜色。 步骤8使用“渐变工具”在选区中左侧单击，之后按下鼠标左键并向右拖动，为选区填充渐变色。 步骤9按【Ctrl＋D】组合键取消选区选择，选择“文本工具”，设置字体为“Adobe黑体Std”，大小为“15点”，文字颜色为黑色，然后在渐变条上输入文本，设置消除锯齿的方式为“平滑”。 步骤10在“图层”调板上选中图层组“top”，然后在其上方新建图层组“logo”。 步骤11选择“文本工具”，设置字体为“文鼎特粗黑简”，大小为“24点”，文字颜色为蓝色“#53ace5”，然后在文档左上方输入文本“南沙大酒店”。 步骤12结束输入后再次选择“文本工具”，设置字体为“Albertus Medium”，大小为“15点”，文字颜色为深灰色“#3f413a”，然后在文本“南沙大酒店”下方输入“nansha grand hotel”。 步骤13选择“自定形状工具”，在“工具属性栏”中选择“填充像素” ，然后打开“形状”下拉面板，单击其右上角的 图标，在打开的下拉菜单中选择“形状”。 步骤14在打开的提示框中单击“确定”按钮，