使用Div+CSS实现网页标准布局实战

"本教程主要讲解如何使用div+css进行网页标准布局，通过实例展示了从建立站点到完成布局的全过程，包括结构分析、框架搭建、页面元素布局等步骤。在实际操作中，会涉及到头部、导航、侧边栏、主体和底部的布局设计，以及图标切图和背景透明处理。" 在网页设计中，div+css布局是一种常用的方法，它使得网页结构清晰，样式与内容分离，便于维护和扩展。本教程以一个具体的实例详细介绍了如何运用这一技术。 1. **建立站点**： 使用Dreamweaver (Dw) 创建一个新的站点，配置好文件夹结构和设置，这是每个网站开发的基础步骤。 2. **结构分析**： 对页面进行视觉分割，理解页面组成部分，如头部、导航、主体（左右两列）和底部。这一步至关重要，因为它决定了后续的HTML结构。 3. **搭建框架**： 使用HTML中的`<div>`标签来构建页面的基本结构。`<div>`是division的缩写，用于创建一个内容区域，可以对其进行样式控制。例如，创建了`header`、`nav`、`maincontent`、`main`、`side`和`footer`等不同区域的`div`标签，为后续的CSS布局打下基础。 4. **布局页面**： - **头部和导航**：设置头部和导航的样式，可以包括logo、导航链接等元素，确保它们在页面中的正确位置。 - **侧边栏**：通常包含辅助信息或功能，如广告、文章列表等。 - **主体部分**：分为左右两列，可能包含主要内容和相关辅助内容，如文章正文和侧边推荐。 - **底部**：通常包含版权信息、联系方式等。 5. **切图和图标处理**： 图片和小图标需要被切成透明背景的PNG或其他支持透明格式，以便不影响页面背景。这可以通过图像编辑软件如Photoshop完成。 6. **路径设置**： 在HTML中引用图片、CSS、JavaScript等资源时，需要正确设置相对路径或相对于根目录的路径，确保文件能被正确加载。 7. **CSS样式应用**： 使用CSS对各个`div`进行样式设置，包括宽度、高度、颜色、边距、浮动等属性，实现页面的居中显示和其他布局效果。同时，可以使用CSS来实现背景透明，使图标不遮挡背景。 8. **细节调整**： 最后，对页面进行微调，确保在不同浏览器和设备上的兼容性，优化用户体验。 通过这个实例，读者将学习到如何结合HTML和CSS创建一个标准的网页布局，理解网页设计的基本流程，并掌握div+css布局的关键技巧。对于初学者来说，这是一个很好的实践项目，有助于提升网页设计和前端开发的能力。