精品教学教案设计 | Excellent teaching plan
作完
成。
Step1选择#menu标签，单击“CSS样式”面板中
的< 新建规则>按钮，保持默认的设置，单击<
1.参考
确定>按钮。
Step2在打开的“规则定义”对话框的“背景”类
中，设置背景颜色为#EEEEEE。
Step3在打开的“规则定义”对话框的“方框”类中
设置宽度为100%。
Step4单击<确定>按钮后，菜单的初始效果就设
布局头置完成了。
部菜单Step5选择整个无序列表，单击CSS样式面板中
（10分的<新建CSS规则>按钮，保持默 认的设置，单
钟） 击<确定>按钮。
Step6在打开的“规则定义”对话框的“列表”类 中
选择样式类型为“无”项目符号图像为“无”。
Step7在打开的“规则定义”对话框的 “方框”类
中，设置边距（填充）为10、10、0、50，间距
（边界）全部相同为0。
Step8单击<确定>按钮后，菜单的列表样式效果
就设置完成了。
Step9单击“CSS样式”面板中的<新建规则>按
成。
方案，
然后制
作完
性地美
化页面
协作完
成任务 < br>2.小组
讨论进
行创新
养他们小
组协作能
力与合作
精 神
示，学
生小组
让学生在
实践中学
到真知，
同时也培学指导
视频演
教师教
育人犹如春风化雨，授业不惜蜡炬成灰

精品教学教案设计 | Excellent teaching plan
钮，设置“选择器名称”为#menu a ，单击<确定>
按钮。
Step10在 打开的“规则定义”对话框的“背景”类
中，设置背景图像为，背景重复为不
重复，水平位置为 左对齐，垂直位置为顶部。
Step11在打开的“规则定义”对话框的“方框”类
中，设置 浮动为左对齐，左连距为4像素。
Step12单击<确定>按钮后，菜单的链接样式效
果就设置完成了。
Step13单击“CSS样式”面板中的<新建规则>按
钮，“选择器名称”设为#menu li，单击<确定>按
钮。
Step14在打开的“规则定义”对话框的“区块”类
中，选择“显示”为“内嵌”选项。
Step15单击“CSS样式”面板中的<新建规则>按
钮，“选择器名称”设为#menu span，单击<确定>
按钮。
Step16在打开的“规则定义”对话框的“类型”类
中设置“颜色”为“白色”。
Step17在打开的“规则定义”对话框的“背景”类
中设置“背景图像”为，背景重复为
不重复，水平位置为右对齐，垂直位置为顶部。
育人犹如春风化雨，授业不惜蜡炬成灰

精品教学教案设计 | Excellent teaching plan
Step18在打开的“规则定义”对话框的“方框”类
中，设置填充为5、15、4、6。
Step19在打开的“规则定义”对话框的“区块”类
中选择“显示”为“块”选项。
Step20单击“确定”按钮后，菜单的块级样式效
果就设置完成了。
Step1 下面要设置页面的几个整体样式效果，主1.参考
要包括body{}、a{}、p{}、h2{}4个 样式。分别教师教
通过单击“CSS样式”面板中新建规则按钮，选学指导
择器类型设为标签来 进行。在body中设置“类视频演
型”类中的字体和字号和“方框”类中的间距。 示，学让学生在< br>Step2在h2样式中分别设置“类型”类中的字号
生小组实践中学
布局整和颜色和方 框类的边距为10、0、0、10。
体样式
协作完到真知，
Step3在p样式中设置“方框”类中的间距（边界）
成任务 同时也培
2.小组
养他们小（5分为0、10、10、10。
钟）
Ste p4在a样式中分别设置“类型”类中的文字修
讨论进组协作能
饰为无和颜色为#000000 ，“边框”类中的属性样行创新力与合作
式下为“点划线”，宽度为“1像素”，颜色为性地美精神
#000000以及“方框”类中的间距（边界）全部相
化页面
同为0。 方案，Step5单击“CSS样式”面板中“新建规则”按钮，
然后制
把“选择器名称”设为“ #container”，单击“确定”作完
育人犹如春风化雨，授业不惜蜡炬成灰

精品教学教案设计 | Excellent teaching plan
按钮。
Step6在打开的“规则定义”对话框中设置“方框”
类中的宽度为700像素。
Step1 “《梦游天姥吟留别》”文字使用h2标题
成。
1.参考
S tep2单击“CSS样式”面板中新建规则按钮，选
教师教
择器名称设为#content， 单击确定按钮。 学指导
Step3设置方框类中宽度为520，上边距为30，
视频演
浮动为左对齐。 示，学
Step4单击“确定”按钮后，内容的样式效果就设
生小组
置完成了。 协作 完
让学生在
实践中学
到真知，
同时也培
养他们小
组协作能< br>力与合作
精神
布局内
容区域
（5分
钟）
Step5单击“CSS样式”面板中新建规则按钮，“选
成任务
择器名称”设为“#content p”，单击“确定”按钮。
2.小组
Step 6在打开的“规则定义”对话框“类型”中设置
讨论进
字号大小为14像素和行高为1.4倍行 高。 行创新
Step7单击“确定”按钮后，内容的段落样式效果
性地美
就设置完成了。 化页面
方案，
然后制
作完
成。
布局右
Step1单击“C SS样式”面板中“新建规则”按钮，1.参考
让学生在
部区域
“选择器名称”设为# rightbox，单击“确定”按钮。
教师教实践中学
育人犹如春风化雨，授业不惜蜡炬成灰

精品教学教案设计 | Excellent teaching plan
（5分
Step2在打开的“规则定义”对话框“背景”类中设
学指导到真知，
钟） 置背景颜色为#EEEEEE，“方框类”中漂浮为右视频演同时也培
对齐，间距为10、0、10、0 ；“边框”类设置样示，学养他们小
式为实线，宽度为2像素，颜色为黑色。 生小组组协作能
Step3单击“确定”按钮后，右部区域的样式效果
协作完力与合作
就设置完成了。 成任务 精神
2.小组
讨论进
行创新
性地美
化页面
方案，
然后制
作完
成。
Step1单击“CSS样式”面板中“新建规则”按钮，1.参考
让学生在
“选择器”名称设为“#footer”，单击“确定”按钮。
教师教实践 中学
Step2在打开的“规则定义”对话框背景类中设置
学指导到真知，
背景颜色为 #3B4041。 视频演同时也培
布局版
权区域
（5分
钟）
St ep3在打开的“规则定义”对话框“方框”类中设
示，学养他们小
置宽度为100%。 生小 组组协作能
Step4在打开的“规则定义“对话框“区块”类中选
协作完力与合作
育 人犹如春风化雨，授业不惜蜡炬成灰

精品教学教案设计 | Excellent teaching plan
择“文字排列”为“右对齐”。 成任务 精神
Step5单击“确定”按钮后，版权区域的样式效果2.小组
就设置完成了。 讨论进
Step6单击“CSS样式”面板中“新建规则”按钮，
行创新
“选择器名称”设为“#f ooter p”，单击“确定”按钮。
性地美
Step7在打开的“规则定义”对话框“方 框”类中设
化页面
置边距（填充）为5、10、5、10，间距（边界）方案，
的上为 0。 然后制
完
Step8按照同样的方法设置footer a样式，包括
作
颜色和底部边框的样式、颜色、宽度效果如下。 成。
Step9这样，版权段落和链接的样式效果也设置
完成了。预览页面可以看到最终效果。
1. 学生
在自
评过
程中
发现
自己
的问
题 ，自
我寻
找解
学生作
1. 请每个小组组长利用电子教室学生演示功
品展示能展示他们完成的作品。 学生自
评与互与评价
2. 由小组组长对小组作品进行自评。
（10分
3. 其他小组同学观看并对他组作品进行打分。
评
钟）
4. 评出协作小组名次。
育人犹如春风化雨，授业不惜蜡炬成灰

精品教学教案设计 | Excellent teaching plan
决的
方法。
2. 学生
在互
评过
程中
发现
自己
与他
人的
差距，
激励
他们
学习
的斗
志。
积极思
考自己
的问题
与不
本次课堂完成了使用Div + CSS布局页面的实
总结 训。整个实训任务我们是分两大步来完成的，
巩固课堂
内容 ，形
成一种设
计网页的
思路
（5分首先是定义页面的结构，然后再对页面进行美
钟） 化。这是我们设计网页时的一个基本的思路，
我们同学要牢记。
足，进
行一个
育人犹如春风化雨，授业不惜蜡炬成灰

精品教学教案设计 | Excellent teaching plan
总结
课后作
1.继续修改小组作品。2.填写实训报告。
业

【教学反思】
1.课堂教学效果显著，学生主体地位得到了充分体现。
1）教师在 课前让同学们自由组合分好协作小组，由于他们是自由组合的，
所以成员之间合作非常愉快，大部分小组 成员都能积极参与小组讨论与合作中
来，都能从中学到真本领，真正意义上体现了学生学习的主体地位。
2）教师在课前将本实训页面中的诗歌内容利用电子教室分发到位，省去了
学生录入文字的过程 ，节省了实训时间。
3）教师在课前将本实训任务制作过程录制成视频教材，利用电子教室分发
给学生，部分听课跟不上教师步伐的学生可以边看视频教学边实训，在一定程
度上弥补了听课不足。也 缓解了教师巡视过程中提问太多，教师一人无法解决
的问题。
4）在实训过程中教师不断巡视 ，及时指导学生，起到了应有的作用，学生
的主体地位也得到了很好的发挥。
2教师的主导作用得到充分发挥。
我们职业学校的学生有其独有的特点，都是比较好动调皮的 小孩，课堂纪
律难以控制。但是此次实训，在教师的引导下，学生实训秩序井然。都能够积
极地 参与到小组实训中来，没有出现嘈杂混乱现象。这个要得益于本人采取不
断地巡视课堂走到学生中间去的 做法，同时也得益于本人在课前录制的视频教
学录像，学生可以自学，自己解决问题从而少提问的做法。 这样做我们既能维
育人犹如春风化雨，授业不惜蜡炬成灰

精品教学教案设计 | Excellent teaching plan
持课堂纪律，又能及时地对学生进行问题指导。
3.本次课的不足部分。
本次课个 别小组没有预期设计的那么完美，还有待进一步完成。当然我们
还有诸多细节方面还需要不断的完善，以 后我会更加努力，为上好每次课而加
油。
附：教学资源1
实训效果图

附：教学资源2
页面内容

育人犹如春风化雨，授业不惜蜡炬成灰

精品教学教案设计 | Excellent teaching plan
菜单内容：