《网页设计》教学设计.doc

“Div + CSS页面布局”教学设计江苏联合联业技术学院宿迁经贸分院宿迁经贸高等职业技术学校教学设计课程名称：网页设计设 计 者：胡 春 亚二 一 一 年 九 月【课题】使用Div + CSS结构布局“诗歌”页面【基本情况说明】1）模块：专业基础课2）年级：三年级 3）学时数：课时90分钟（机房授课）4）软件平台:Adobe Dreamweaver CS3【教学内容分析】Div + CSS是一种最新、最科学的网页布局方式，符合Web2.0的技术标准，目前也比较流行的网页布局方式。使用Div + CSS布局可将结构与表现分离，减少了HTML文档内大量代码，只留下了页面结构的代码，方便对其进行阅读，还可以提高网页的下载速度。所以这部分内容是我们学习网页设计非常重要的一部分，学生要重点掌握。【学生学习情况分析】学生在前面已经学习了Div标签的插入方法以及CSS样式表创建方法，了解了其功能，对其有了一定的感性认识，我们重要的是加强学生的实践操作能力的训练。【教学目标设计】1知识与技能目标：1）学会分析页面的结构的方法。2）能使用div标签定义合理的页面结构。3）巩固用代码与视图两种方法插入div标签以及向标签内部添加内容。4）学会利用CSS规则布局美化页面。2情感目标：1）培养学生的审美能力。2）培养学生的合作精神与协作能力。3.教学重、难点：重点：分析页面结构、用div标签定义页面结构难点：利用CSS规则布局美化页面【教学方法设计】任务驱动、视频指导教学法【教学设计思路】本次课主要偏重实践，又有一定的理论知识。如果教师讲解得太多就会显得枯燥，因此本次课的设计思路是从具体的目标任务入手，引导学生进行观察、思考、分析、讨论，最后得出解决问题的方法，形成解决问题的方案，达到从理论到实践应用的目的。整个教学过程围绕赏-析-演-练-评展开。我们注重的是学生实际操作技能的培养，90分钟课堂，学生参与实践的时间比例为80%左右。这样就让我们的学生在实践中学到真知，同时也培养他们小组协作能力与合作精神。教师的主要任务是在于积极地引导与调动学生，鼓励学生积极、主动地实践，从而完成任务。【教学过程设计】教学环节及时间安排教师活动学生活动对学生学习过程的观察和考查及设计意图欣赏效果图，引入实训任务（2分钟）第一课时 定义页面结构1.组织教学利用电子教室分发讲义与视频录像资料；并请同学们将机器退回到各自的桌面，准备上课。2.展示实训任务效果图观看网页效果图利用电子教室播放效果图，激发学生学习兴趣分析实训效果图（8分钟）1.分析页面组成此页面的内容部分采用左右布局，且制作头部菜单时使用图片做出漂亮的超链接效果。使布局更具有灵活性，更美观。（提问并引导学生分析得出结论）页面主要分成以下几个部分。头部部分：包括标题、头部菜单。主体部分：包括页面内容和右部区域。底部部分：包括版权内容。经过分析，设计出以下布局，Div结构如下。body #Container /*页面层容器*/#Header /*页面头部*/#menu /*头部菜单*/#content /*页面内容*/#rightbox /*右部区域*/#footer /*页面底部*/由此我们可以画出如下的页面结构图在教师的引导下仔细观看效果图，并试着分析页面的结构，小组成员之间可以互相讨论学生在教师的引导下分析页面的结构，从而培养与提高学生分析问题与解决的能力师生互动实训，完成页面结构定义（15分钟）2.使用div标签定义页面结构代码如下：诗歌菜单内容梦游天姥吟留别诗歌内容介绍内容版权信息根据分析得出的结论，按小组在代码视图中输入页面结构的代码在此过程中要有些学生由于不够细心与仔细，输入代码出错，要么是字符输入错误，要么是格式不对。通过他们自己编写并输入代码，让他们明白做事要细心并也要有耐心菜单内容、诗歌内容、介绍内容、版权信息等内容添加（15分钟）3.填写页面内容菜单内容：首页 新闻博客 论坛 联系我们支持我们诗歌内容：梦游天姥吟留别海客谈瀛洲，烟涛微茫信难求。介绍内容：介绍这是一首记梦诗，也是一首游仙诗。版权信息：宿迁经贸高等职业技术学校 按小组完成在代码视图中将内容添加到页面学生自己做，让其在做中发现问题并解决问题布局头部标题（5分钟）第二课时 利用CSS美化页面Step1选中文本“诗歌”，并在属性面板的“格式”项选择为“标题1”选项。Step2单击CSS面板中的按钮，打开并设置如下对话框。Step3在打开的“规则定义”对话框的“类型”类中设置行高为80像素和颜色为#3B4041。Step4在打开的“规则定义”对话框的“背景”类中设置背景颜色为#EEEEEE。Step5在打开的“规则定义”对话框的“方框”类中设置元素高度为65像素、左填充为35像素和边界全部相同为0。Step6单击按钮后，“诗歌”标题设置完成了。1.参考教师教学指导视频演示，学生小组协作完成任务2.小组讨论进行创新性地美化页面方案，然后制作完成。让学生在实践中学到真知，同时也培养他们小组协作能力与合作精神布局头部菜单（10分钟）Step1选择#menu标签，单击“CSS样式”面板中的按钮，保持默认的设置，单击按钮。Step2在打开的“规则定义”对话框的“背景”类中，设置背景颜色为#EEEEEE。Step3在打开的“规则定义”对话框的“方框”类中设置宽度为100%。Step4单击按钮后，菜单的初始效果就设置完成了。Step5选择整个无序列表，单击CSS样式面板中的按钮，保持默认的设置，单击按钮。Step6在打开的“规则定义”对话框的“列表”类中选择样式类型为“无”项目符号图像为“无”。Step7在打开的“规则定义”对话框的“方框”类中，设置边距（填充）为10、10、0、50，间距（边界）全部相同为0。Step8单击按钮后，菜单的列表样式效果就设置完成了。Step9单击“CSS样式”面板中的按钮，设置“选择器名称”为#menu a ，单击按钮。Step10在打开的“规则定义”对话框的“背景”类中，设置背景图像为tableft3.gif，背景重复为不重复，水平位置为左对齐，垂直位置为顶部。Step11在打开的“规则定义”对话框的“方框”类中，设置浮动为左对齐，左连距为4像素。Step12单击按钮后，菜单的链接样式效果就设置完成了。Step13单击“CSS样式”面板中的按钮，“选择器名称”设为#menu li，单击按钮。Step14在打开的“规则定义”对话框的“区块”类中，选择“显示”为“内嵌”选项。Step15单击“CSS样式”面板中的按钮，“选择器名称”设为#menu span，单击按钮。Step16在打开的“规则定义”对话框的“类型”类中设置“颜色”为“白色”。Step17在打开的“规则定义”对话框的“背景”类中设置“背景图像”为tabright3.gif，背景重复为不重复，水平位置为右对齐，垂直位置为顶部。Step18在打开的“规则定义”对话框的“方框”类中，设置填充为5、15、4、6。Step19在打开的“规则定义”对话框的“区块”类中选择“显示”为“块”选项。Step20单击“确定”按钮后，菜单的块级样式效果就设置完成了。1.参考教师教学指导视频演示，学生小组协作完成任务2.小组讨论进行创新性地美化页面方案，然后制作完成。让学生在实践中学到真知，同时也培养他们小组协作能力与合作精神布局整体样式（5分钟）Step1下面要设置页面的几个整体样式效果，主要包括body、a、p、h24个样式。分别通过单击“CSS样式”面板中新建规则按钮，选择器类型设为标签来进行。在body中设置“类型”类中的字体和字号和“方框”类中的间距。Step2在h2样式中分别设置“类型”类中的字号和颜色和方框类的边距为10、0、0、10。Step3在p样式中设置“方框”类中的间距（边界）为0、10、10、10。Step4在a样式中分别设置“类型”类中的文字修饰为无和颜色为#000000，“边框”类中的属性样式下为“点划线”，宽度为“1像素”，颜色为#000000以及“方框”类中的间距（边界）全部相同为0。Step5单击“CSS样式”面板中“新建规则”按钮，把“选择器名称”设为“#container”，单击“确定”按钮。Step6在打开的“规则定义”对话框中设置“方框”类中的宽度为700像素。1.参考教师教学指导视频演示，学生小组协作完成任务2.小组讨论进行创新性地美化页面方案，然后制作完成。让学生在实践中学到真知，同时也培养他们小组协作能力与合作精神布局内容区域（5分钟）Step1 “梦游天姥吟留别”文字使用h2标题Step2单击“CSS样式”面板中新建规则按钮，选择器名称设为#content，单击确定按钮。Step3设置方框类中宽度为520，上边距为30，浮动为左对齐。Step4单击“确定”按钮后，内容的样式效果就设置完成了。Step5单击“CSS样式”面板中新建规则按钮，“选择器名称”设为“#content p”，单击“确定”按钮。Step6在打开的“规则定义”对话框“类型”中设置字号大小为14像素和行高为1.4倍行高。Step7单击“确定”按钮后，内容的段落样式效果就设置完成了。1.参考教师教学指导视频演示，学生小组协作完成任务2.小组讨论进行创新性地美化页面方案，然后制作完成。让学生在实践中学到真知，同时也培养他们小组协作能力与合作精神布局右部区域（5分钟）Step1单击“CSS样式”面板中“新建规则”按钮，“选择器名称”设为#rightbox，单击“确定”按钮。Step2在打开的“规则定义”对话框“背景”类中设置背景颜色为#EEEEEE，“方框类”中漂浮为右对齐，间距为10、0、10、0；“边框”类设置样式为实线，宽度为2像素，颜色为黑色。Step3单击“确定”按钮后，右部区域的样式效果就设置完成了。1.参考教师教学指导视频演示，学生小组协作完成任务2.小组讨论进行创新性地美化页面方案，然后制作完成。让学生在实践中学到真知，同时也培养他们小组协作能力与合作精神布局版权区域（5分钟）Step1单击“CSS样式”面板中“新建规则”按钮，“选择器”名称设为“#footer”，单击“确定”按钮。Step2在打开的“规则定义”对话框背景类中设置背景颜色为#3B4041。Step3在打开的“规则定义”对话框“方框”类中设置宽度为100%。Step4在打开的“规则定义“对话框“区块”类中选择“文字排列”为“右对齐”。Step5单击“确定”按钮后，版权区域的样式效果就设置完成了。Step6单击“CSS样式”面板中“新建规则”按钮，“选择器名称”设为“#footer p”，单击“确定”按钮。Step7在打开的“规则定义”对话框“方框”类中设置边距（填充）为5、10、5、10，间距（边界）的上为0。Step8按照同样的方法设置footer a样式，包括颜色和底部边框的样式、颜色、宽度效果如下。Step9这样，版权段落和链接的样式效果也设置完成了。预览页面可以看到最终效果。1.参考教师教学指导视频演示，学生小组协作完成任务2.小组讨论进行创新性地美化页面方案，然后制作完成。让学生在实践中学到真知，同时也培养他们小组协作能力与合作精神学生作品展示与评价（10分钟）1. 请每个小组组长利用电子教室学生演示功能展示他们完成的作品。2. 由小组组长对小组作品进行自评。3. 其他小组同学观看并对他组作品进行打分。4. 评出协作小组名次。学生自评与互评1. 学生在自评过程中发现自己的问题，自我寻找解决的方法。2. 学生在互评过程中发现自己与他人的差距，激励他们学习的斗志。总结（5分钟）本次课堂完成了使用Div + CSS布局页面的实训。整个实训任务我们是分两大步来完成的，首先是定义页面的结构，然后再对页面进行美化。这是我们设计网页时的一个基本的思路，我们同学要牢记。积极思考自己的问题与不足，进行一个总结巩固课堂内容，形成一种设计网页的思路课后作业1.继续修改小组作品。2.填写实训报告。【教学反思】1.课堂教学效果显著，学生主体地位得到了充分体现。1）教师在课前让同学们自由组合分好协作小组，由于他们是自由组合的，所以成员之间合作非常愉快，大部分小组成员都能积极参与小组讨论与合作中来，都能从中学到真本领，真正意义上体现了学生学习的主体地位。2）教师在课前将本实训页面中的诗歌内容利用电子教室分发到位，省去了学生录入文字的过程，节省了实训时间。3）教师在课前将本实训任务制作过程录制成视频教材，利用电子教室分发给学生，部分听课跟不上教师步伐的学生可以边看视频教学边实训，在一定程度上弥补了听课不足。也缓解了教师巡视过程中提问太多，教师一人无法解决的问题。4）在实训过程中教师不断巡视，及时指导学生，起到了应有的作用，学生的主体地位也得到了很好的发挥。2教师的主导作用得到充分发挥。我们职业学校的学生有其独有的特点，都是比较好动调皮的小孩，课堂纪律难以控制。但是此次实训，在教师的引导下，学生实训秩序井然。都能够积极地参与到小组实训中来，没有出现嘈杂混乱现象。这个要得益于本人采取不断地巡视课堂走到学生中间去的做法，同时也得益于本人在课前录制的视频教学录像，学生可以自学，自己解决问题从而少提问的做法。这样做我们既能维持课堂纪律，又能及时地对学生进行问题指导。3.本次课的不足部分。本次课个别小组没有预期设计的那么完美，还有待进一步完成。当然我们还有诸多细节方面还需要不断的完善，以后我会更加努力，为上好每次课而加油。附：教学资源1实训效果图附：教学资源2页面内容菜单内容： 首页 新闻 博客 论坛 联系我们 支持我们 诗歌内容：梦游天姥吟留别 海