dreamweaver网页制作div（怎样在DreamWeaver中插入DIV标签进行布局）

本文目录

• 怎样在DreamWeaver中插入DIV标签进行布局
• 网页Dreamweaver制作DIV
• 在Dreamweaver中 怎样用DIV+CSS来制作网页
• dreamweaver制作网页中AP div和div如何分配使用
• 什么是DIV如何在dreamweaver中使用这种技术
• dw中怎么插入div标签

怎样在DreamWeaver中插入DIV标签进行布局

你对使用DIV标签进行布局的方法是否了解，这里向大家简单介绍一下，DreamWeaver使您能够快速插入DIV标签并对其应用现有样式。您可以将Dreamweaver设计文件用作CSS布局的起始点。DreamWeaver插入DIV标签进行布局可以使用DIV标签创建CSS布局块并在文档中对它们进行定位。如果有一个带有附加到文档的定位样式的现有CSS样式表，使用该标签将非常有用。DreamWeaver使您能够快速插入DIV标签并对其应用现有样式。您可以将Dreamweaver设计文件用作CSS布局的起始点。从“新建文档”对话框的“页面设计(CSS)”类别中选择一个文件.◆若要插入DIV标签，请执行以下操作：1.在“文档”窗口中，将插入点放置在要显示DIV标签的位置。2.执行下列操作之一：选择“插入”》“布局对象”》“DIV标签”。
在“插入”栏的“布局”类别中单击“DIV标签”按钮,出现“插入DIV标签”对话框。3.完成对话框。4.单击“确定”。DIV标签以一个框的形式出现文档中，并带有占位符文本。将指针移到该框的边缘上时，Dreamweaver会高亮显示该框。如果已经给DIV标签分配了绝对位置，它就可充当一个Dreamweaver层。有DreamWeaver使用DIV标签进行布局插入DIV标签后，您可以对其进行操作或者在其中添加内容。绝对定位的DIV标签为Dreamweaver层。在为DIV标签分配了边框后，或者在选定了“CSS布局外框”后，DIV标签便具有可视边框。（默认情况下，“查看”》“可视化助理”菜单中已经选定了“CSS布局外框”。）将指针移到DIV标签上时，Dreamweaver将高亮显示此标签。在选择DIV标签时，可以在“CSS样式”面板中查看和它的规则。您也可以向DIV标签添加内容，方法是：将插入点放在DIV标签中，然后就像在页面中添加内容那样添加内容。◆若要查看和应用于DIV标签的规则，请执行以下操作：1.执行以下操作之一以选择DIV标签：单击DIV标签的边框。提示:查找标记色彩以查看边框。
在DIV标签内单击，然后按两次Ctrl+A(Windows)或Command+A(Macintosh)。
在DIV标签内单击，然后从“文档”窗口底部的标签选择器中选择DIV标签。2.如果“CSS样式”面板尚未打开，请选择“窗口”》“CSS样式”以打开“CSS样式”面板.应用于DIV标签的规则显示在面板中。3.根据需要进行。若要在DIV标签中放置插入点以添加内容，请执行以下操作：在该标签边框内的任意位置单击。若要更改DIV标签中的占位符文本，请执行以下操作：选择该文本，然后在它上面键入内容或按Delete键。就像在页面中添加内容那样，可以将内容添加到DIV标签中。DreaWeaver更改DIV标签的高亮颜色在“设计”视图中将指针移到DIV标签的边缘上时，Dreamweaver将高亮显示标签的边框。如果需要，可以启用或禁用高亮显示功能，或者在“首选参数”对话框中更改高亮颜色。◆若要更改DIV标签的高亮显示首选参数，请执行以下操作：1.选择“”》“首选参数”(Windows)或Dreamweaver》“首选参数”(Macintosh),即显示“首选参数”对话框。2.从左侧的类别列表中选择“标记色彩”。3.进行下面其中一项更改：若要更改DIV标签的高亮颜色，请单击“鼠标滑过”颜色框并使用颜色选择器来选择一种高亮颜色（或在文本框中输入高亮颜色的十六进制值）。
若要对DIV标签启用或禁用高亮显示功能，请选择或取消选择“鼠标滑过”的“显示”复选框。这些选项会影响当指针滑过时Dreamweaver会高亮显示的所有对象，例如表格。4.单击“确定”。

网页Dreamweaver制作DIV

position:relative 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
position:absolute 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
用这两个属性可以把DIV 定位到你想要的表格里面,还可以让DIV 在定位的位置飞到表格上面(做伸缩菜单用得比较多)
另外简单点,就在DIV的父对象里 给他加个 浮动属性,给DIV也加上相同的浮动属性也有同样的效果,不知道你的什么情况,详细参见CSS2.0中文手册

在Dreamweaver中 怎样用DIV+CSS来制作网页

div是：
HTML 《div》 标签
定义和用法
《div》 可定义文档中的分区或节（division/section）。
《div》 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 《div》，那么该标签的作用会变得更加有效。
用法
《div》 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 《div》 固有的唯一格式表现。可以通过 《div》 的 class 或 id 应用额外的样式。
不必为每一个 《div》 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 《div》 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
实例
文档中的一个部分会显示为绿色：
《div style="color:#00FF00"》
《h3》This is a header《/h3》
《p》This is a paragraph.《/p》
《/div》
CSS是：把文件的样式和排版都放在一个文件中，需要用的直接引用那个问题就好了

dreamweaver制作网页中AP div和div如何分配使用

AP div实际上是附加了定位的css样式的div。两个在本质上是一样的，为了方便初学者更好地调整DIV的大小和位置，dreamweaver里面可以用AP div的方式来进行布局。但是实际上这种布局用div也是可以非常容易地实现的。在css里面定义一下with和height就可以控制DIV的大小了，使用position可以控制这个div是绝对定位还是相对定位，使用float可以控制div的左右位置，使用margin可以控制它的外边距，等等。。。相对而言，AP div就不那么灵活了。
建议你先学一学css相关的知识，对于学习制作网页还是很有帮助的。

什么是DIV如何在dreamweaver中使用这种技术

CSS单元的位置和层次-div标签
我们都知道，在网页上利用HTML定位文字和图像是一件“令人心痛”的事情。我们必须使用表格标签和隐式GIF图像，即使这样也不能保证定位的精确，因为浏览器和操作平台的不同会使显示的结果发生变化。
而CSS能使你看到希望的曙光。利用今天我们即将学到的CSS属性，你可以精确地设定要素的位置，还能将定位的要素叠放在彼此之上，还有...还有......你自己慢慢看吧！
Cascading Style Sheets（CSS）是 DHTML 的基础。CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一个扩展，它可用来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词：CSS 和 CSS－P。下面四个英文网址提供了详细的关于 CSS 和 CSS-P 的文件和解释。
● 1．使用 DIV 标签 （div）
当我们使用 CSS-P 的时候， 我们主要把它用在 DIV（division）tag 上。当你把文字，图像，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在 DIV 中的 HTML。
使用 DIV 的方法跟使用其他 tag 的方法一样：
《DIV》This is a DIV tag .《/DIV》
如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和使用 《P》《/P》 是一样的。
但当我们把 CSS-P 用到 DIV 中去以后，我么就可以严格设定它的位置。首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck。给名字的目的是我们以后可用 JavaScript 来控制它， 比如说移动它或改变它的一些性质等等。
《DIV ID="truck"》
This is a truck
《/DIV》
给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。有两种把 CSS-P 应用到 DIV 的方法。
Inline CSS：Inline 是最常用的方法。
《DIV ID="truck" STYLE="styles go here"》
This is a truck .
《/DIV》
External STYLE tag：使用 External 方法的结果是一样的。我们会在以后的课程里再详细解释这种方法。现在我们主要讨论Inline 方法。请注意在 External 方法里，在 STYLE 里的 ID 和 DIV 里的关系。
《STYLE TYPE="text/css"》
《!-- #truck {styles go here} --》
《/STYLE》
《DIV ID="truck"》This is a truck .《/DIV》
Cross-Browser CSS 性质：
我们这个课程的主要目的是让你写出的网页在 NS4 和 IE4 上都能工作， 所以我们主要讨论那些对俩者都通用的性质。下面这些性质符合由 W3C 给出的标准。
position 决定 DIV tag 是如何放置的。“relative”意思是DIV的位置是相对于其他 tag 的，而“absolute”是说 DIV tag 的位置是相对于它所在的窗口。
left 相对于窗口左边的位置
top 相对于窗口上边的位置
width DIV tag 的宽度。所有在 DIV 里的文字或html都在里面。
height DIV tag 的高度。这个性质很少用除非你想 Clip 层次。
clip 给出 layer 的 clipping（可看的见的）部分。Clip 可使得 DIV 显示为一个可以定义的很准确的方块。你可以用以下的四个值来给出这个方块的在 DIV 位置和大小。
clip:rect(top,right,bottom,left);
visibility 隐蔽或展现DIV 根据它的值“visible”，“hidden”，“inherit”。
z-index DIV tag 的立体位置。值越大 DIV 的位置越高。
background-color DIV 背景的颜色。
layer-background-color Netscape 的 DIV 背景颜色。
background-image DIV 的背景图像。
layer-background-image Netscape 的 DIV 的背景图像。
● 2．绝对定位和相对定位 （position）
绝对定位：
定位属性将是网虫们打开幸福之门的钥匙：
H4 { position: absolute; left: 100px; top: 43px }
这项CSS规则让浏览器将《H4》的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置。注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。
左边和顶部属性很直观，左边（left）设定要素距浏览器窗口左边的距离，顶部（top）设定距离浏览器窗口顶部的距离。设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。
你可以定位什么呢？任何东西！段落、单词、GIF和JPEG图像、QUICKTIME电影等等。
相对定位：
绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例：
I { position: relative; left: 40px; top: 10px }
相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。相对定位单元出现在普通的静态定位单元的行间，定位时没有把自己和静态定位单元完全分开。如果你停止使用相对定位，则文字的显示位置将恢复正常。使用相对定位时要小心，否则容易将页面弄得非常乱。
除了相对定位和绝对定位，你还可以使用static（静止）参数值。Static 是 position 特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。也就是说，除了边距特性，或通过使用 float 特性来浮动单元可影响单元的定位外，其它均不可以。
● 3．定位单元的控制 （width、height、visiblility）
除了控制定位单元的左上角位置，你还可以控制单元的宽度和高度，及单元在页面的可视性。
宽度：定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制，即设定要素的宽度。
DIV { position: absolute; left: 200px; top: 40px; width: 150px }
浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落的最大水平尺寸限制在150象素。
宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位，或使用比例值设定宽度，比例值指相对于母体要素的比例。IE 4中，这项属性还可用于图像。你可以通过宽度设置人为地拉宽或压缩图像。
高度：理论上讲，高度应该和宽度的设置类似，只不过是在垂直方向上：
DIV { position: absolute; left: 200px; top: 40px; height: 150px }
这里我用了“理论上讲”，因为有些浏览器不支持高度属性。
可视性：利用CSS，你可以隐藏要素，使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。
H4 { visibility: hidden }
选项：
visible 使要素可以被看见
hidden 使要素被隐藏
inherit 指它将继承母体要素的可视性设置。
值 inherit 为缺省值。这使单元继承父单元的可见性。所以，如果某一段是隐藏的，则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。例如，段内的 EM 单元被指定为可见，这时如果该段被隐藏，则段内的所有其它内容都将消失，而唯有 EM 单元中的文本是可见的。
当一个要素被隐藏后，它仍然要占据浏览器窗口中的原有空间。所以，如果你将文字包围在一幅被隐藏的图像周围，那么，其显示效果将是文字包围着一块空白区域。此新闻
这条属性在编写语言和使用动态HTML时很有用，比如你可以使某段落或图像只在鼠标滑过时才显示。
● 4．单元层次 （z-index）
特性 z-index 用于堆叠屏幕上的单元。缺省情况下，单元堆叠的顺序为它们出现在HTML标记的顺序——也就是说，后出现单元堆叠在早出现单元的上面。Z-index 特性实际上定义同属（sibling）单元的堆叠顺序以及单元相对父单元的堆叠。按照规范草案，具有正 z-index 值的单元群都堆叠在父单元之上，它们自己的堆叠顺序则按其取值的大小来决定（值大的单元在上层）。同样，具有负 z-index 值的单元群都堆叠在父单元之下，它们自己的堆叠顺序也按取值的大小来定（值大的单元在上层，例如值为 -1 的单元在值为 -2 的单元的上面）。
该参数值使用纯整数。z-index用于绝对定位或相对定位了的要素。你也可以给图像设定z-index。（对于Communicator，最好将 《IMG》标签包在《SPAN》或 《DIV》标签内，然后将z-index应用到《SPAN》或 《DIV》。）
● 5．剪辑绝对定位单元 （clip）
绝对定位单元可以被剪辑——也即剪辑显示给用户的区域，只显示单元的一部分而把其余部分作透明处理。对于传统的基于文本和图像的网络页面，这并不是一个很有用的特征。但若要求多媒体页面，这是很有用的。如 Netscape Communivator 4 和 Internet Explorer 4 都支持多媒体页面，它们通过文档的脚本接口动态地调整单元周围的剪辑区，从而实线文本“划入”和图像渐显等显示特征。
在CSS中，剪辑通过 clip 特性来控制，这一特性只能用于绝对定位单元，其缺省值为 auto，按单元的外边缘来剪辑单元（实际上等于没有剪辑）。另外，可通过如下表达式设置剪辑框：
clip : rect(top,right.bottom,left) ;
其中 top、right、bottom 和 left 分别是矩形剪辑框的上边、右边、下边和左边相对于被剪辑单元左上角的位置。Top、right、bottom 和 left 的值可以为任意绝对或相对长度值（但不能为百分比值），或者是关键字 auto。取值为 auto 意味着剪辑区域的各边放好以后，被剪辑单元中的任何内容都不会超出这个区域。
● 6．控制单元溢出 （overflow）
固定绝对或相对定位单元的 width 和 height，很可能会因为指定的区域不能满足单元实际内容的需要，而造成单元内容溢出。这时可使用 overflow 来指定浏览器如何处理溢出：值 none（缺省值）允许浏览器显示溢出的内容，因此单元可溢出指定的区域。而值 clip 要求浏览器在单元底部和右边剪辑单元内容，这样，超出指定区域的单元内容将不显示。值 scroll 也同样要求浏览器在单元底部和右边剪辑单元内容（同 clip），不过，浏览器应该（如果可能的话）为单元提供滚动条以使用户能通过滚动来浏览被剪辑的内容。
新译通【翻译公司】(北京翻译公司、上海翻译公司、广州、深圳)专业英语 ...- 专业翻译公司提供翻译服务,为法律、科技、工业、商务、机械等领域提供专业的翻译服务，尤其是擅长工程标书这类对时间要求非常及时的项目。提供各语种多行业的笔译口译 ...

dw中怎么插入div标签

新建一个div在制作网页中是必不可少的一部分，下面我们来学习一下怎么在dw中新建一个div标签。

工具/原料

方法/步骤

1、打开Dreamweaver软件之后，首先新建一个HTML网页。

2、在dw的众多菜单栏中找到插入菜单。

3、在插入的下拉列表中找到布局对象，在布局对象里找到div标签。

4、这样一个新的div就插入好了。

5、还有一种方法就是在代码里输入div标签一定要在body里面输入才有效。

6、div的代码是