静态网页设计制作-教案 第8章 Div+CSS布局.doc

AutoCAD 2022 中文版项目实训教程 STYLEREF bt1a 项目八 STYLEREF bt1b Div+CSS布局 PAGE PAGE 26 PAGE PAGE 25 项目八 Div+CSS布局 思政目标 具体问题具体分析，根据实际需要制定精准的方案。 培养积极探索、迎难而上，培养坚持不懈的科学精神 技能目标 ?了解CSS盒模型的属性 ?了解CSS的四种样式的区别 ?学会创建和编辑div标签以及设置CSS布局块的可视化 ?学会创建常用的CSS布局版式? 项目导读 div+css，简单地说，就是使用块级元素放置页面内容，然后使用CSS规则指定布局块的位置、大小和呈现方式。一个使用div+css布局且结构良好的HTML页面，可以在任何网络设备上以任何外观呈现，而且用div+css布局构建的网页可以简化代码，加快显示速度。 任务1 Div+CSS概述 任务引入 小明已经掌握了用表格布局网页的方法，但是表格布局有一个缺点，就是页面打开速度会比较慢，经过深入学习，小明了解到可以利用div+css布局，不仅可以简化代码，还可以加快显示速度，那么什么是div+css布局呢？ 知识准备 在使用Dreamweaver学习网页制作时，初学者总是习惯先考虑网页外观的呈现样式，比如图片、字体、颜色等所有表现在页面上的内容，然后用Photoshop