苏科版初中信息技术《博客布局与美化——div+css》教学课件.ppt

布局与美化博客页面 DIV+CSS,授课教师：孙梅娜南京市虹苑中学,你有博客、QQ空间吗？,内容,不变,变,文字的样式,网页的背景,各模块所在位置,Div+CSS优势何在？,表现和内容相分离，易于维护和改版,提高搜索引擎对网页的索引效率,代码简洁，提高页面浏览速度,什么是Div+CSS?,Div 标签,盒子模型,盒子里内容样式,内容与表现形式的分离,盒子的大小,盒子的位置,盒模型,CSS样式属性设置,有哪些盒子，盒子的大小，放在什么位置？,top,nav,content,left,right,任务一：分析结构图、整体布局,left,right,top,nav,content,任务一：分析结构图、整体布局,zd1,zd3,zd4,zd2,任务二：填充内容、局部美化,1、复制内容代码2、链接外部css样式表3、局部修改美化,操作提示：,拓展思考：,1、如何左右调整布局？需要改哪些css属性？,2、左右调整布局后，文本位置合适吗，你可以设置padding值调整文本的位置吗？,你能总结下div+css布局美化的主要步骤吗？,设计分析样图,1,2,3,整体调整,4,排版构架,局部模块处理美化,