苏科版初中信息技术博客布局与美化——divcss教学.pptxVIP

苏科版初中信息技术博客布局与美化——divcss教学 第1页/共13页 你有博客、QQ空间吗？ 第2页/共13页 内容 不变 文字的样式 网页的背景 各模块所在位置 第3页/共13页 Div+CSS优势何在？ 表现和内容相分离，易于维护和改版 提高搜索引擎对网页的索引效率 代码简洁，提高页面浏览速度 第4页/共13页 div /div 什么是Div+CSS? Div 标签 盒子模型 盒子里内容样式 盒子的大小 盒子的位置 第5页/共13页 盒模型 第6页/共13页 有哪些盒子，盒子的大小，放在什么位置？ top nav left right 第7页/共13页 任务一：分析结构图、整体布局 left right top nav div id=top …… /div div id=nav ……/div div id=content /div div id=left /div div id=right /div 第8页/共13页 任务一：分析结构图、整体布局 第9页/共13页 任务二：填充内容、局部美化 1、复制内容代码 2、链接外部css样式表 3、局部修改美化 操作提示： 第10页/共13页 拓展思考： 1、如何左右调整布局？需要改哪些css属性？ 2、左右调整布局后，文本位置合适吗，你可以设置padding值调整文本的位置吗？ 第11页/共13页 你能总结下div+css布局美化的主要步骤吗？ 设计分析样图 1 2 3 整体调整 4 排版构架 局部模块处理美化 第12页/共13页 感谢观看! 第13页/共13页