《Dreamweaver+Photoshop+Flash网页制作三合一案例教程（CS5）》教案 第27课 制作酒店网站首页（2）.docxVIP

PAGE 8 PAGE 8 PAGE 3 PAGE 3 PAGE 1 PAGE 1 课题 第27课 制作酒店网站首页（2） 课时 2课时（90 min） 教学目标 知识目标： （1）掌握页面分析、页面布局、搭建页面整体框架的方法 （2）掌握在Dreamweaver中，分区域构建网页的方法 技能目标： （1）能够创建本地站点 （2）能够设计网页的整体框架 素质目标： 学习上要有坚持不懈的毅力，不怕困难，勇往直前 教学重难点 教学重点：根据网页布局，分区域构建网页 教学难点：网页整体框架的搭建 教学方法 问答法、讨论法、讲授法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→?考勤（2 min）→??问题导入（3 min）→传授新知（37 min）→课堂讨论（3 min） 第2节课：问题导入（3 min）→?传授新知（20 min）→?课堂实训（17 min）→?课堂小结（3 min）→?作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 【教师】让学生上网查询各大门户网站的首页，观察页面分为几部分，是如何进行布局的 【学生】按照要求完成课前任务 通过课前任务，让学生认识到页面布局在网页设计中的重要性 考勤 （2 min） 【教师】使用APP进行签到 【学生】班干部报请假人员及原因 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （3min） 【教师】提出以下问题，并随机邀请学生进行回答 上节课我们用Photoshop和Flash制作好了网页素材，那么如何运用到具体的网页当中？ 【学生】聆听、思考、回答 【教师】总结学生的回答，导入本节课内容：在Dreamweaver中进行网页排版制作 通过上节课的基础，让学生思考素材的用法，引出使用Dreamweaver添加素材，制作网页 传授新知 （37 min） 【教师】讲解新知，介绍在Dreamweaver中进行网页排版制作 任务三 在Dreamweaver中进行网页排版制作 一、任务说明 制作好网页效果图，以及需要的网页素材后，接下来便可以在Dreamweaver中利用这些素材制作网页了。本任务主要完成酒店网站首页的制作。 二、任务实施 （一）创建本地站点 站点是管理网页文档的场所，在站点中可以方便有效地管理网页文档，本节讲述“hotel”站点的创建。 【多媒体】演示创建本地站点的具体步骤 步骤1 启动Dreamweaver CS5，选择“站点”“新建站点”菜单，打开“站点设置对象……”对话框，在“站点名称”文本框中输入“hotel”，单击“本地站点文件夹”文本框右侧的“浏览文件夹”图标，在打开的“选择根文件夹”对话框中选择网站文件所在根目录“hotel”。 步骤2 单击“高级设置”左侧的三角形图标，在展开的列表中选择“本地信息”。 步骤3 单击“默认图像文件夹”右侧的按钮，在打开的“选择图像文件夹”对话框中选择网站中图像所在文件夹“images”，然后单击“选择”按钮。 步骤4 回到“站点设置对象……”对话框后，单击“保存”按钮，完成本地站点的创建，此时“文件”面板中将显示创建的站点。 （二）搭建页面整体框架 1．整体布局分析 进行页面布局之前，要先对页面进行分析，看将页面分为几大块，如何布局更加合理。从效果图上看，该页面布局是最常见的三行样式，整个页面居中显示。其中第1行放置网站Logo、导航及Banner；第2行放置会员登录、客房预订、酒店新闻及特别推荐等栏目；第3行放置网站相关信息，由此得出网站的框架结构，如图11-57所示（详见教材）。 2．搭建结构 【多媒体】演示搭建结构的具体步骤 步骤1 在“文件”面板中的根文件夹上单击鼠标右键，在弹出的快捷菜单中选择“新建文件”。 步骤2 将新文件重命名为“index.html”。 步骤3 双击“文件”面板中的新文件“index.html”，在文档窗口中打开。 步骤4 将插入点置于文档窗口，然后单击“插入”面板“常用”类别中的“插入Div标签”按钮，打开“插入Div标签”对话框，在“ID”编辑框中输入“head”，然后单击“确定”按钮。 步骤5 在ID为“head”的Div下方单击，然后“插入”ID为“nav”的Div；按照同样的方法依次插入ID为“banner”的Div，ID为“main”的Div和ID为“foot”的Div。 步骤6 将插入点置于ID为“main”的Div中，然后依次在其中嵌套ID为“left”的Div，ID为“center”的Div和ID为“right”的Div；之后再在ID为“left”的Div中嵌套两个class分别为“login”和“order”的Div，如图11-62所示（详见教材）。 【课堂问答】 【教师】随机邀请学生回