Dw中实现DVS+CSS布局实例与步骤详解

需积分: 23 181 浏览量更新于2024-07-11 收藏 1.38MB PPT 举报

本篇文章主要介绍了如何在Dreamweaver中建立并利用CSS进行网站布局的实例，包括从基础的站点创建到高级的页面结构设计。以下将详细讲解每个步骤和相关的知识点： 1. **建立站点**：在Dreamweaver中，首先需要创建一个新的站点项目。这个过程通常包括设置服务器、本地文件路径以及选择合适的编码等，这部分内容在课件的环境搭建部分有所涵盖，但在这里不再赘述。理解并熟悉站点的设置是开发过程中的基础。 2. **结构分析**：创建完站点后，关键在于理解页面的结构。这一步要求根据设计稿（如切图）来分解页面，确定页面由哪些主要部分组成，比如头部（header）、导航栏（nav）、主体内容（maincontent，包括左侧和右侧内容，side）和底部（footer）。通过结构分析，可以为每个部分分配对应的HTML元素，并规划它们在页面中的位置关系。 3. **HTML模板**：一个基本的HTML结构被创建出来，包括`<!DOCTYPE html>`声明，`<html>`、`<head>`、`<meta>`、`<title>`标签用于定义文档类型、XML命名空间和页面标题。`<body>`标签则是页面的实际内容区域。 4. **CSS布局**： - **头部和导航**：通过`<div>`标签创建并分配id，如`<div id="header">`，然后在CSS中设置其样式，如定位、宽度和背景颜色等。 - **侧边栏和主体**：同样的方法应用于`<div id="nav">`、`<div id="main">`和`<div id="side">`，分别表示导航和两个不同的主体部分。 - **容器元素**：为了方便管理和居中所有子元素，引入`<div id="container">`作为父级容器，设置其宽度为100%并使用`margin: 0 auto`实现水平居中。 5. **相对路径与根目录路径**：当涉及到CSS选择器时，理解相对路径和根目录路径的重要性。相对路径是从当前文件或元素的位置开始计算，而根目录路径是从服务器或网站的根目录开始。理解这两种路径有助于管理网站资源和避免跨域问题。 6. **细节调整**：页面布局完成后，可能需要微调各个部分的样式，如字体大小、间距、边距等，以确保设计效果与预期一致。此外，还要考虑到响应式设计，确保在不同设备上的良好显示。本文提供了一个从零开始建立网站并使用CSS布局的实践教程，通过实际操作，读者可以掌握如何在Dreamweaver中创建一个有组织且美观的网站结构。同时，理解和应用CSS选择器、布局技巧和路径管理是提升网页设计能力的关键。

Happy破鞋

粉丝: 13
资源: 2万+

Dw中实现DVS+CSS布局实例与步骤详解

DVS+CSS布局实例

SEED-DVS6467+硬件用户指南

SEED-DVS8168软件用户指南

DVS+CSS布局实例：网站结构分析与优化

DVS+CSS布局实例：主体部分与顶部幻灯实现

SEED-DVS6467+数字视频服务器硬件使用指南

DIV+CSS布局实战：切割与页面构建详解

SEED-DVS6446 DSP调试详解及应用实例

CIFAR10-DVS

SEED-DVS8168Uboot烧写

最新资源