《搭建头部DIV》教案.docVIP

《搭建头部DIV》教案 课题名称 搭建头部DIV 建议课时 2课时（建议两节连堂） 教学目标 知识目标 1 掌握新建站点和新建文件的方法。 2 掌握新建DIV的方法。 3 掌握利用CSS样式来定义DIV样式的方法。 4. 了解DIV的嵌套原理。 5. 掌握DIV的各项属性。 能力目标 培养学生的自学能力、动手实践能力和创新能力。 德育目标 即使道路坎坷不平，车轮也要前进；即使江河波涛汹涌，船只也航行。 教学重点 掌握新建站点的方法；掌握创建DIV的方法 教学难点 当DIV嵌套时创建DIV的位置确定 任务介绍 此任务是项目10使用Dreamweaver设计网页的两个任务之一。任务目标为搭建首页DIV中的头部DIV。 根据效果图，可以把首页分成上中下三个部分，上部是页头，包括企业的logo、栏目导航条以及banner广告；中部是主体区，包括本页的具体内容；下部为页脚，包括快捷连接和版权声明。 教学过程 学生活动 教师活动 创设情境 融入情境，产生完成本任务的欲望。 创设一个真实的项目情境，激发学生完成本任务的兴趣。在本“任务情境”的基础上，使用投影，展现本任务完成效果图，激发学生兴趣与完成的欲望。 任务分析 学生小组讨论，如何完成任务。 向学生展示任务效果图，要求学生结合自身知识与技术储备，完成本任务还需要哪些知识与技术支持，找出自己不能完成的内容。 在学生讨论的基础，教师有针对性引导学生，将需要解决的问题收集、整理出来。 任务实施 参照教材中“任务实施”，尝试操作，实施任务。当遇到困难时，向老师或同学们进行请教。 学生在操作的过程中，教师要适时巡查，发现问题，引导学生解决。同时，鼓励小组同学之间相互帮助，积极交流，解决问题。 典型引导 解决问题 阅读教材，尝试操作，掌握新知。 引导学生参照教材的“知识准备”，了解网页理论知识。 展示评价 首先自评，然后小组评价。 教师点评，引导学生相互交流学习。 拓展探索 重新温习DIV的创建，CSS样式的创建。 教师根据实际情况，有针对性示范操作。评价作品，将评价结果反馈给学生。 附件： 任务实施步骤： 1. 搭建头部DIV （1）新建站点。启动Dreamweaver CS5，执行菜单栏上的 “站点”→“新建站点”命令，打开“站点设置对象”，如题1所示。在“站点名称”栏目填写“乐游旅游网”，“本地站点文件夹”填写路径“E:\leyouwebsite”。单击“保存”完成创建。 图1 站点设置对象对话框 （2）新建HTML文件。执行菜单栏上的 “文件” →“新建”命令，快捷键为Ctrl+N。在弹出的“新建文档”对话框中，选择新建“空白页”，在“页面类型”中选择HTML，“布局”中选择“无”，单击“创建”，建立文件。如图2所示。 图2 新建HTML文件 ·小窍门：在起始页内直接单击“新建”下的“HTML”也可以创建一个HTML文件。 （3）保存HTML文件。执行菜单栏上的 “文件” →“保存”命令，快捷键为Ctrl+S。在弹出的“另存为”对话框中，填写文件名为“index.html”，单击确定，将该页面保存在“leyouwebsite”文件夹根目录中，如图3所示。 图3 保存HTML文件 （4）新建CSS文件。执行菜单栏上的“文件” →“新建”。在弹出的“新建文档”对话框中，选择新建“空白页”，在“页面类型”中选择CSS，单击“创建”，建立文件。 （5）保存CSS文件。执行菜单栏上的 “文件” →“保存”命令，快捷键为Ctrl+S。在弹出的“另存为”对话框中，填写文件名为“layout.css”，单击确定，将该页面保存在“leyouwebsite”文件夹中的“css”文件夹中，如图4所示。 图4保存css文件 （6）链接CSS文件。单击选项卡切换回index.html的编辑界面，如图5所示。 图5 切换选项卡 打开CSS面板，快捷键是“Shift+F10”，选择面板下方的“附加样式表”图标，在弹出的“链接外部样式表”对话框中单击浏览添加“css”文件夹中的layout.css文件，路径为“css/layout.css”，添加方式为“链接”，单击确定保存设置。如图6所示。 图6 链接CSS样式表 （7）新建DIV“layout”。打开插入面板，快捷键是“Ctrl+F2”。选择布局选项卡。如图7所示。单击“插入Div标签” ，弹出的“插入Div标签”对话框中设定“插入”为 “在插入点”，“ ID”为“layout”。 图7插入DIV （8）设定DIV“layout”的CSS规则。打开CSS面板，选择面板下方的“新建CSS规则” 图标，在弹出的“新建CSS规则”对话框中设定“选择器类型”为“ID（仅应用于一个HTML元素）”，