TP08(指导学习：活动页局部布局)(精品).ppt

指导学习：活动页的局部布局指导学习：活动页的局部布局指导学习：活动页的局部布局 第八章第八章第八章第八章1课程内容回顾课程内容回顾HTML的各类标签XHTML 1.0的基本规范 CSS的基本语法 CSS常用属性 CSS背景的偏移技术 盒子模型 DIV+CSS布局 2难点突破难点突破块级标签行级标签常用的CSS属性页面布局盒子模型CSS定位DIV+CSS整体布局DIV+CSS典型局部布局教员备课时完善3作业讲评作业讲评教员备课时完善4知识梳理：知识梳理：块级标签XHTML与HTML块级标签、和、和、和5知识梳理：知识梳理：行级标签行级标签、和6知识梳理：知识梳理：常用的CSS属性CSS选择器标签选择器类选择器ID选择器常用的CSS属性文本字体列表背景超链接7知识梳理：知识梳理：页面布局标签2-1盒子模型marginborderpaddingwidth、heightCSS定位staticrelativeabsolute8知识梳理：知识梳理：页面布局标签2-2DIV+CSS整体布局DIV+CSS布局的实现思路DIV+CSS典型局部布局div-ul-ildiv-dl-dt-ddform-table-trTable-tr-td9综合练习：六人行活动页综合练习：六人行活动页4-1 完成时间：完成时间：20分钟分钟阶段阶段1：练习：练习实现页面的局部布局实现页面的局部布局 需求说明需求说明使用使用DIV+CSS布局活动页面版块布局活动页面版块 页面分为页面分为6个部分内容个部分内容都市生活都市生活户外户外旅行旅行运动健身运动健身理财理财英语英语学习学习文艺演出文艺演出公益公益其他其他 10综合练习：六人行活动页综合练习：六人行活动页4-2 阶段2：指导制作圆角矩形 训练要点CSS选择器需求说明除了标题外，其他内容均显示在一个圆角矩形里面 实现思路写一个宽度相同的圆角矩形样式，高度自适应 使用背景样式制作圆角矩形完成时间：完成时间：20分钟分钟11共性问题集中讲解共性问题集中讲解n常见调试问题及解决办法常见调试问题及解决办法n代码规范问题代码规范问题共性问题集中讲解共性问题集中讲解12综合练习：六人行活动页综合练习：六人行活动页4-3 完成时间：完成时间：25分钟分钟阶段阶段3：练习：练习编写页面内容编写页面内容 需求说明需求说明把页面中的内容添加到圆角矩形中把页面中的内容添加到圆角矩形中编写样式美化页面内容编写样式美化页面内容超链接文本颜色为蓝色，当超链接文本颜色为蓝色，当鼠标悬停到超链接上时，文鼠标悬停到超链接上时，文本颜色为橙色本颜色为橙色日期、报名人数、留言条数、日期、报名人数、留言条数、休闲活动卡、现金支付等文休闲活动卡、现金支付等文本颜色均显示橙色本颜色均显示橙色使用一条使用一条虚线隔开虚线隔开13综合练习：六人行活动页综合练习：六人行活动页4-4 阶段4：指导制作背景透明效果 训练要点滤镜效果 需求说明每一版块图片的下方文字说明的背景使用滤镜制作透明效果 文本颜色为白色，当鼠标悬停到文本上时颜色为橙色 实现思路设置层的绝对定位及上一层的相对定位使层在图片的下方显示 设置背景层的颜色为黑色设置背景的半透明，兼容其他的浏览器 完成时间：完成时间：20分钟分钟14共性问题集中讲解共性问题集中讲解n常见调试问题及解决办法常见调试问题及解决办法n代码规范问题代码规范问题共性问题集中讲解共性问题集中讲解15作业本章内容掌握情况XXX（描述学生对本章内容的掌握情况）课后作业必做教员备课时在此添加内容选做教员备课时在此添加内容提交时间：xxx提交形式(纸质or电子)作业情况：XXX（抽查情况）16