广东省×××职业技术学校
学科教案本
Teaching Plan
20  年———20　年学年度  　学期
The (1st/2na)Semester of the Academic Year from 20  to 20
学校（School） 
学科（Subject）
年级（Grade） 
_______________________________
教师（Teacher）

《网页制作项目实训教程》目录
注意：
①按住Ctrl键后单击每个任务即可跳转到对应的教案
②单击按钮可返回目录
③页面设置参数为：
　纸张：B5
  页边距左：1.5
　页边距右：1.5
项目7　使用Div+CSS制作网页
任务1
活动1  使用Div+CSS对网页进行布局
活动2  制作导航栏
任务2
活动1  新闻列表部分布局操作
活动2  制作新闻列表
任务3
活动1  制作夏季新品区
活动2  制作分类导航区

教学
课题
任务1  活动1  使用Div+CSS对网页进行布局
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.灵活运用Div+CSS知识对网页进行布局操作
教学
重点
1
教学
难点
1
辅助
资源
课件、多媒体、网络
复习引入
1.背景CSS样式。
2.background属性。
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
一、教师布置活动要求
根据所提供的网站首页效果图，使用Div+CSS完成页面的布局操作，完成后以“index.html”为文件名保存到“task7”文件夹，完成布局的页面效果示意图如下图所示。
二、师生讨论案例实现思路
1、教师展示案例效果
2、分析讨论案例实现思路
3、教师小结
三、教师演示活动实施过程并让学生完成活动任务
1、打开Dreamweaver CS6软件并新建一个HTML文档，将新建的HTML文档切换至“设计”视图模式，并以“index.html”为文件名保存到“task7”文件夹根目录。在“文档工具栏”中的“标题”文本框中，将“无标题文档”更改为“Ann儿童服装”。
2、打开“CSS样式”面板，在“CSS样式”面板中单击“新建CSS规则”按钮，打开“新建CSS规则”对话框，在“选择器类型”下拉列表框中选择“标签”，在“选择器名称”框中将“body”改为“*”，在“规则定义”下拉列表框中选择“新建样式表文件”，然后单击“确定”按钮，在弹出的另存为对话框中将样式表文件以“style.css”为文件名保存到“task7/css”目录下。
3、在弹出的“* 的CSS规则定义”对话框中，按要求设置字体、字体大小及字体颜；并将margin与padding的值设置为0。
4、依次单击“插入”->“布局对象”-> “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”下拉列表框中选择“在插入点”，在“ID”框中输入“top”，然后单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框“规则定义”下拉列表框中选择“style.css”，然后单击“确定”按钮，打开“#top 的CSS规则定义”对话框。
5、在对话框中，设置“背景”选项卡中设置背景颜为蓝（#00CCFF），在“方框”选择卡中，按要求设置相关属性值，然后单击“确定”按钮，并将“此处显示 id "top" 的内容”文字删除，完成页头的布局操作。
6、依次单击“插入”-> “布局对象”-> “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在标签之后”，在第2个下拉列表框中选择“<div id=”top”>”，在“ID”名框中输入“banner”，其余参照html怎么做下拉式多级导航栏4-5步操作，完成banner与其他部分的布局。
布置任务：让学生明确本次课的内容
讨论：如何实现该案例效果
演示：教师演示活动实施过程
实训活动：学生练习及点评
作业
布置
填写提交实训报告和实训表格
预习作业：预习下一节内容
教学
后记

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。