Dw中div+css标准布局实战教程:快速建站与结构优化

需积分: 10 31 下载量 182 浏览量 更新于2024-08-22 收藏 1.47MB PPT 举报
本资源是一份详细的div+css网页标准布局实例教程,主要针对网页开发初学者,讲解如何在Dreamweaver中建立站点并应用CSS进行布局设计。教程内容分为以下几个步骤: 1. **建立站点**: 在Dreamweaver中,用户需要先创建一个新的站点,以便于组织和管理项目文件。这部分可能涉及到环境的配置,但具体步骤并未详述,建议参考课件中的相关章节。 2. **结构分析**: 该阶段强调对页面结构的分析,根据设计的切图或原型,将页面划分为头部区域、导航区、主体部分和底部。例如,主体部分被进一步细分为左右两列,并确保整个页面在浏览器中居中显示。 3. **HTML基础**: 提供了一个简单的HTML模板,包括`<!DOCTYPE html>`声明,`<html>`标签,以及`<head>`和`<body>`结构。这里定义了页面的基本结构,设置了字符集和页面标题。 4. **搭建框架**: 使用`<div>`元素创建页面结构,分别为头部`<div id="header">`、导航`<div id="nav">`、主体内容区域`<div id="maincontent">`(包含左右两部分`<div id="main">`和`<div id="side">`),以及底部`<div id="footer">`。通过增加`<div id="container">`作为父容器,可以方便地控制所有子元素的居中和宽度设置。 5. **CSS应用**: 为了使各个部分居中,需要在CSS中为这些`<div>`元素设置宽度和定位属性。这通常涉及内外层`div`的样式调整,包括设置`container`的宽度和`margin: 0 auto`实现水平居中,从而简化布局过程。 6. **细节调整**: 课程还可能讨论如何处理相对路径和相对于根目录路径的问题,这对于网站的可维护性和部署至关重要。 这份教程不仅提供了实际的代码示例,还深入解释了如何利用div和css进行有效的网页布局,适合学习者在实践中理解和掌握网页设计的基础原则。通过跟随教程,读者可以学会创建出清晰、结构化的网页布局,并能够灵活运用CSS进行样式定制。