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

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