【DW基础】Dreamweaver使用Div标签 / 木子杰软件教程

核心提示：
（Division）元素在文档内定义了一个区域，元素包括文本、表格、表单、图像、插件等各种页面内容，甚至在元素内还可以包含元素。

一、Div标签概述

01

<div>（Division）元素在文档内定义了一个区域，<div>元素包括文本、表格、表单、图像、插件等各种页面内容，甚至在<div>元素内还可以包含<div>元素。如果要使<div>标签显示特定的效果，或者在某个位置上显示HTML内容，就要为<div>标签定义CSS样式。使用<div>标签的方法为： <div> HTML内容 </div> 如果单独使用<div>标签，而不加任何CSS样式，那么它的效果和使用<p>标签是一样的。

二、插入标签

01

将鼠标放在要插入<div>标签的位置上，然后点击“插入”菜单，选择“布局对象”命令，在弹出的子菜单中选择“Div 标签”项。或者在“插入”面板中选择“布局”项，点击“插入 Div 标签”图标，如下图所示：
02

点击图标后，打开“插入 Div 标签”对话框，如下图所示：
03

在“插入 Div 标签”对话框中，可以进行以下操作：插入：在插入点——在光标放置的位置上插入<div>标签；在开始标签之后——在<body>标签的后面插入<div>标签；在结束标签之前——在</body>结束标签的前面插入<div>标签。类：选择一个类。请阅读CSS样式表教程：类选择器。 ID：选择一个ID。请阅读CSS样式表教程：id选择器。 “新建 CSS 规则”按钮：点击此按钮，会打开“新建 CSS 规则”对话框。请阅读在Adobe Dreamweaver CS4中使用CSS样式表的方法。提示：使用“新建 CSS 规则”，可以添加<div>标签的类和ID。
04

在对话框中设置好各项以后，或者不进行设置，单击“确定”按钮，即可将<div>标签插入到文档中。如下图所示：
05

在文档的“设计”视图中点击<div>标签框线，选中<div>标签，如下图所示：
06

可以打开<div>标签“属性”面板，如下图所示：
07

Div ID：选择一个ID。请阅读CSS样式表教程：id选择器。类：选择一个类。请阅读CSS样式表教程：类选择器。 “CSS面板”按钮：在弹出的窗口中可以创建新的CSS规则或者添加附加样式表。