div+css布局实战：切图与框架搭建详解

本篇教程详细介绍了如何使用Div+CSS进行网页标准布局，包括以下几个关键步骤： 1. **切割效果图分析**： 在页面设计完成初步框架后，切图是至关重要的一步。切图工具的选择非常灵活，如Photoshop（PS）的切片工具、Fireworks或者简单地使用截图功能和复制粘贴。在PS中，使用切片工具根据需要划分图片区域，并为每个切片命名以便后期引用。 2. **结构分析与HTML基础**： - 建立站点：通过Dreamweaver创建HTML文件，课程材料中未详述具体步骤。 - 结构分析：通过对页面效果的分析，确定页面元素如头部、导航、主体和底部的布局，将页面划分为逻辑上的区块。 3. **HTML框架搭建**： 使用`<div>`标签来构建页面结构，设置了id属性便于样式定位，如`<div id="header">...</div>`。同时创建了包含主体内容的嵌套`<div>`，如`<div id="maincontent"><div id="main">...</div><div id="side">...</div></div>`。 4. **居中与容器化**： 为了方便管理宽度和居中，引入了`<div id="container">`作为父级容器，将所有其他`<div>`标签置于其内。通过设置`#container`的宽度和水平居中样式，使得子元素自动跟随容器的布局，简化了整体布局的工作。 5. **CSS应用**： CSS在这里起到了关键作用，通过定义容器和子元素的样式，如宽度、高度、对齐方式等，实现了页面布局。具体可能涉及`width: auto;`, `margin: 0 auto;`等CSS属性来实现居中效果。 6. **路径设置**： 提到了相对路径和相对于根目录路径的概念，这对于处理网站中的图片和其他资源引用至关重要，确保资源可以在不同的URL层级下正确加载。 总结而言，这篇教程是针对初学者的一份实践指导，通过一步步的实际操作，教会读者如何运用Div+CSS创建一个响应式的网页布局，强调了结构分析和CSS样式设置在网页开发中的核心地位。理解并熟练掌握这些步骤，有助于提升网页设计和开发能力。