《搭建首页布局》教案.docVIP

《搭建首页布局》教案 课题名称 搭建首页布局 建议课时 2课时（建议两节连堂） 教学目标 知识目标 1.熟练掌握创建DIV的方法。 2.搭建首页布局。 能力目标 培养学生分析解决问题的能力。 德育目标 只会在水泥地上走路的人,永远不会留下深深的脚印。 教学重点 熟练掌握创建DIV的方法 教学难点 CSS+DIV 任务介绍 本任务将按照效果图对板式布局进行规划，利用CSS+DIV搭建首页布局。 教学过程 学生活动 教师活动 创设情境 融入情境，产生完成本任务的欲望。 创设一个真实的项目情境，激发学生完成本任务的兴趣。在本“任务情境”的基础上，使用投影，展现本任务完成效果图，激发学生兴趣与完成的欲望。 任务分析 学生小组讨论，如何完成任务。 向学生展示任务效果图，要求学生结合自身知识与技术储备，完成本任务还需要哪些知识与技术支持，找出自己不能完成的内容。 在学生讨论的基础，教师有针对性引导学生，将需要解决的问题收集、整理出来。 任务实施 参照教材中“任务实施”，尝试操作，实施任务。当遇到困难时，向老师或同学们进行请教。 学生在操作的过程中，教师要适时巡查，发现问题，引导学生解决。同时，鼓励小组同学之间相互帮助，积极交流，解决问题。 典型引导 解决问题 阅读教材，尝试操作，掌握新知。 引导学生参照教材的步骤尝试制作 展示评价 首先自评，然后小组评价。 教师点评，引导学生相互交流学习。 拓展探索 设计制作个人网站导航条。 教师根据实际情况，有针对性示范操作。评价作品，将评价结果反馈给学生。 附件： 任务实施步骤： 1. 建立站点文件夹。在d盘中新建文件夹，起名为“bzb”，并在该文件夹的内部建立文件夹“css”，同时拷贝光盘中的images（路径为：光盘：\素材\项目12\任务2\images）文件夹至该文件夹。如图1所示。 图1 站点目录结构 2. 启动Dreamweaver CS5，建立站点，站点名称为“煲中宝”。站点文件夹的路径为“D:\bzb” 3. 新建CSS文件。选择“文件”→“新建”→“CSS”。建立名称为layout.css的CSS文件，保存在css文件夹中。 4. 新建HTML页。选择“文件”→“新建”→“HTML”。建立名称为index.html的HTML文件，保存在bzb文件夹中。 5. 链接style.css文件。在index.html的编辑界面。打开CSS面板，选择面板下方的“附加样式表”图标，在弹出的“链接外部样式表”对话框中单击浏览添加“css”文件夹中的layout.css文件，路径为“css/layout.css”，添加方式为“链接”，单击确定保存设置。 6. 建立布局DIV。新建DIV，名称为“layout”，在定义css规则#layout的参数如图2所示： 图2 #layout参数设置 7. 建立主体DIV。在DIV“layout” 开始标签之后新建DIV，名称为“main”，在定义css规则#main的参数如图3所示： 图3#main参数设置 8. 建立logoDIV。在DIV“main”开始标签之后新建DIV，名称为“logo”，在定义css规则#logo的参数如图4所示： 图4 #logo参数设置 9. 建立在线咨询DIV。在DIV“logo”标签之后新建DIV，名称为“faq”，在定义css规则#faq的参数如图5所示： 图5#faq参数设置 10. 建立导航DIV。在DIV“faq”标签之后新建DIV，名称为“nav”，在定义css规则#nav的参数如图6所示： 图6 #nav参数设置 11. 建立导航背景DIV。在DIV“nav”开始标签之后新建DIV，名称为“navbg”，在定义css规则#navbg的参数如图7所示： 图7# navbg参数设置 12. 建立banner广告DIV。在DIV“nav”标签之后新建DIV，名称为“banner”，在定义css规则#banner的参数如图8所示： 图8#banner参数设置 13. 建立内容区DIV。在DIV“banner”标签之后新建DIV，名称为“content”，在定义css规则#content的参数如图9所示： 图9 #content参数设置 14. 建立左侧内容DIV。在DIV“content”开始标签之后新建DIV，名称为“left”，在定义css规则#left的参数如图10所示： 图10 #left参数设置 15. 建立推荐产品标题DIV。在DIV“left”开始标签之后新建DIV，名称为“l-title”，在定义css规则#l-title的参数如图11所示： 图11 #l-title参数设置 16. 建立推荐产品内容DIV。在DIV“l-title”标签之后新建DIV，名称为