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

江苏联合联业技术学院宿迁经贸分院 宿迁经贸高等职业技术学校 教 学 设 计 课程名称：网页设计 设 计 者：胡 春 亚 二 ○ 一 一 年 九 月 【】Div + CSS结构布局“诗歌”页面 【基本说明】 1）模块：专业基础课 2）年级：三年级 3）学时数：２课时（机房授课） 4）软件平台:Adobe Dreamweaver CS3 【】 Div + CSS是一种最新、最科学的网页布局方式，符合Web2.0的技术标准，目前也比较流行的网页布局方式。使用Div + CSS布局可将结构与表现分离，减少了HTML文档内大量代码，只留下了页面结构的代码，方便对其进行阅读，还可以提高网页的下载速度。所以这部分内容是我们学习网页设计非常重要的一部分 【学情分析】学生在前面已经学习了Div标签的插入方法，了解了其功能，对其有了一定的感性认识【教学设计】1．知识与技能目标： 学会分析页面的结构能div标签定义页面结构。 巩固用代码与视图两种方法插入div标签以及向标签内部添加内容。 CSS规则。 2情感目标： 培养学生的审美能力。 培养学生的合作精神与协作能力。用div标签定义页面结构CSS规则【】 【设计思路】本次课主要偏重实践，又有一定的理论知识。如果教师讲解得太多就会显得枯燥，因此本次课的设计思路是从具体的目标任务入手，引导学生进行观察、思考、分析、讨论，最后得出解决问题的方法，形成解决问题的方案，达到从理论到实践应用的目的。教师的主要任务是在于积极地引导调动学生，鼓励学生积极主动完成任务。 【教学过程】欣赏效果图，引入任务 定义页面结构观看网页效果图 利用电子教室播放效果图，激发学生学习兴趣 分析实训效果图 1.分析页面组成 此页面的内容部分采用左右布局，且制作头部菜单时使用图片做出漂亮的超链接效果。使布局更具有灵活性，更美观。 页面主要分成以下几个部分。 头部部分：包括标题、头部菜单。 主体部分：包括页面内容和右部区域。 底部部分：包括版权内容。 经过分析，设计出以下布局，Div结构如下。 │body {} └#Container {}　/*页面层容器*/ ├#Header {}　/*页面头部*/ ├#menu {}　/*头部菜单*/ ├#content {}　/*页面内容*/ ├#rightbox {}　/*右部区域*/ └#footer {}　/*页面底部*/由此我们可以画出如下的页面结构图 在教师的引导下仔细观看效果图，并试着分析页面的结构学生在教师的引导下分析页面的结构，从而培养与提高学生分析问题与解决的能力 师生互动实训，完成页面结构定义使用div标签定义页面结构 代码如下： div id=container div id=header诗歌/div div id=menu菜单内容/div div id=content《梦游天姥吟留别》诗歌内容/div div id=rightbox介绍内容/div div id=footer版权信息/div /div 菜单内容、诗歌内容、介绍内容、版权信息等内容添加 3.填写页面内容 菜单内容：div id=menu ul lia href=# span首页 /span/a/li lia href=# span新闻/span/a/li lia href=# span博客 /span/a/li lia href=# span论坛 /span/a/li lia href=#span联系我们/span/a/li lia href=#span支持我们/span/a/li /ul /div 诗歌内容：div id=content《梦游天姥吟留别》 p……/p /div 介绍内容：div id=rightbox介绍 p这是一首记梦诗，也是一首游仙诗。……/p /div 版权信息：div id=footera href=#宿迁经贸/a /div 按小组完成在代码视图中将内容添加到页面 学生自己做，让其在做中发现问题并解决问题 布局头部标题 第二课时 利用CSS美化页面 Step1选中文本“诗歌”，并在属性面板的“格式”项选择为“标题1”选项。 Step2单击CSS面板中的新建CSS规则按钮，打开并设置如下对话框。 Step3在打开的“规则定义”对话框的“类型”类中设置行高为80像素和颜色为#3B4041。 Step4在打开的“规则定义”对话框的“背景”类中设置背景颜色为#EEEEEE。 Step5在打开的“规则定义”对话框的“方框”类中设置元素高度为65像素、左填充为35像素和边界全部相同为0。 Step6单击确定按钮后，“诗歌”标题设置完成了。 布局头部菜单Step1选择#menu标签，单击“CSS样式”面板中的新建规则按钮，保持默认的设置，单击确定按钮。 Step2