大家好，今天Win10系统之家小编给大家分享「dreamweaver 如何布局」的知识，如果能碰巧解决你现在面临的问题，记得收藏本站或分享给你的好友们哟~，现在开始吧！

1.dreamweaver怎么布局

　　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.单击“确定”。

2.关于dreamweaver的布局

　　第九章 层的使用 
一、概述
 在网页制作中，对文字和对象的位置控制是比较困难的，以前我们通过表格来定位，但往往达不到精度要求。“层”是Dreamweaver 中另处一种可以进行排版的工具。它可以被定位在页面的任意位置，并且其中可以包含文本、图像等所有可直接插入至网页的对象。
 层拥有很多表格所不具备的特点，比如可以重叠、便于移动、可设为隐藏等。
二、层的创建和删除
 显示面板：窗口—>其它—>层(F2)
 插入栏—>常用—>层（直接绘制，按Ctrl可连绘）
 插入栏—>布局—>层（直接绘制，按Ctrl可连绘）
 插入菜单—>层
 拖动插入栏上图标到页面。
三、使用“属性面板”设置层的属性
选择一个或多个层后即可对它们进行操作或更改它们的属性。
 1、“单个层”的“属性面板”
 首先要选择层：在层面板中单击该层的名称、单击一个层的边框、在一个层中按住Ctrl+Shift键并单击。（如果已选定多个层，此操作会取消选定其他所有层而只选择您所单击的层。）、在设计视图中单击层代码标记，它表示层在HTML代码中的位置。
 层编号
 用于指定一个名称，以便在层面板和JavaScript代码中标识该层。每个层必须有它自己的唯一名称。
 左和上（左侧和顶部）
 指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。
 宽和高
 指定层的宽度和高度。
 注：位置和大小的默认单位为像素（px）。您也可以指定以下单位：pc(pica,十二点活字，约为我国新四号铅字）、pt（点）、in（英寸）、mm（毫米）、cm(厘米)或%（父层相应值的百分比）。这些缩写必须紧跟值，中间不留空格。
 z轴
 当层重叠时，用以设置层之间的前后排列顺序。值越大，显示越靠前。（使用层面板要比输入特定的z轴更为简便。）
 可见性
 指定该层最初是否是可见的。
 default(默认)：不指定可见性属性，大多数浏览器都会默认为“继承”。
 inherit(继承)：表示使用该层父级的可见性属性。
 visible(可见)：表示显示该层的内容，而不管父级的值是什么。
 hidden(隐藏)：表示隐藏层的内容，而不管父级的值是什么。
使用脚本语言（如JavaScript）可控制可见性属性并动态地显示层的内容。
 背景图像
 可以为层指定一个背景图像。
 背景颜色
 可以为层指定一个背景颜色。如果将此选项留为空白，则可以指定透明的背景。
 类
 可以应用定义好的 CSS 样式。
 溢出
 当层的内容超过层的指定大小时，设定如何在浏览器中显示层，它的效果必须在浏览器中预览时才会出现。
 visible(可见)：指定在层中显示额外的内容，实际上，该层会通过延伸来容纳额外的内容。
 hidden(隐藏)：指定不在浏览器中显示额外的内容。
 scroll(滚动)：指定浏览器在层上添加滚动条，而不管是否需要滚动条。
 auto(自动)：使浏览器仅在需要时才显示层的滚动条。
 剪辑
 可以定义层的可见区域，有上“左”、“右”、“上”、“下”4项。
 从层的左上角开始计算，指定左侧、顶部、右侧和底边坐标可在层的坐标空间中定义一个矩形。层经过“剪辑”后，只有指定的矩形区域才是可见的。 
 2、“多个层”的“属性面板”
 首先选择层：按住Shift键并单击层面板上的两个或更多个名称、在两个或更多个层的边框内（或边框上）按住Shift键并单击。
 标签
 可以指定用来定义这些层的 HTML 标签。在下拉列表中有DIV和SPAN两个选项。
四、层的基本操作
 1、调整层的大小
 调整单个层的大小（拖动手柄、Ctrl+箭头）
 调整多个层的大小
 2、移动层的位置（鼠标、箭头键或Shift+箭头键）
 3、层的对齐
 修改—>对齐—>选择项目
 4、在层中插入对象
 5、层的叠加顺序
 修改—>排列顺序—>选择项目或修改层的z值
 6、将层靠齐到网络
 Shift+Ctrl+箭头与网格线重合
 7、层的复制、剪切和粘贴 
 8、层的嵌套
 直接插入层、拖入另一层标记、面板上拖动或Ctrl辅助拖动层、ALT辅助绘制层
五、层的绝对定位与相对定位
六、使用“层”浮动面板管理层（F2）
 显示/隐藏层：更改层的可见性。
 防止重叠：若勾选这个选项，则层之间将不能重叠，而只能并行排列。
 名称：层的名称。
 Z轴
七 、设置层的默认属性
 编辑菜单—>参数选择—>层
 1、标签
 设置在创建层时Dreamweaver要使用的HTML标签。其选项为div(默认)和span。
 2、显示
 确定层在默认情况下是否可见。其选项为“默认”“继承”“可见”和“隐藏”。
 3、宽和高
 指定使用“插入层”创建的层的默认宽度和高度（以像素为单位）。
 4、背景颜色
 可以指定默认的层显示一种背景颜色。
 5、背景图像
 可以指定默认的层显示一种背景图像。
 6、嵌套
 如果在层中则使用嵌套：指定从现有层边界内的某点开始绘制的层是否应该是嵌套层。在绘制层时，按住键盘上的Alt 键可暂时更改此设置。
 7、Netscape 4 兼容性
 插入层时固定大小：在文档的 head 内容中插入 JavaScript 代码以修正Netscape 4 浏览器中的一个已知问题，该问题使层在访问者调整浏览器窗口大小时失去它们的定位。每当调整浏览器窗口大小时，JavaScript 会强制页面重新加载，从而将层重分配到正确的位置。您也可以手动添加或删除 JavaScript 代码，方法是选择“命令—>添加/删除 Netscape 调整大小修复”。
八、在层和表格之间转换
 1、将表格转换为层
 修改菜单—>转换—>表格到层
 对话框中相关的参数如下:
 显示网格和靠齐到网格:能够使用网格来协助将层定位.
 防止层重叠：可以在转换后的页面中激活防止层重叠的功能。
 显示层面板：可以在转换后的页面中显示层面板。
 显示网格：可以在转换后的页面中显示网格。
 靠起到网格：可以在转换后的页面中将层与网络线对齐。
 注：当表格转换为层时，空的单元格不会被转换（除非它们具有背景颜色）。另处在转换时，表格外的页面元素也会被放入层中。
2、将层转换为表格
 修改菜单—>转换—>层到表格
 对话框中相关参数如下：
 最精确：为每个层创建一个单元格，并附加保留层之间的空间所必需的任何单元格。
 最小：合并空单元。指定如果层定位在指定数目的像素内，则层的边缘应对齐。如果选择此选项，转换后表格将包含较少的空行和空列，但可能与之前的层的排版不能精确地匹配。
 使用透明GIF：用透明的GIF图像填充表格的最后一行。这将确保该表格在所有浏览器中以相同的列宽显示。当勾选此选项后，用户将不能通过拖动表格的列框来编辑转换后的表格。当取消勾选此选项后，转换后的表格将不会包含透明GIF图像，但在不同的浏览器中可能会具有不同的列宽。
 置于页面中央：将转换后的表格在页面中居中对齐。如果取消勾选该选项，表格将在页面中左对齐。
 注：在转换之前，层不能有重叠。
八、层和行为相结合制作动态效果
http://qygqyg.51.net/layer.htm#

以上就是关于「dreamweaver 如何布局」的全部内容，本文讲解到这里啦，希望对大家有所帮助。如果你还想了解更多这方面的信息，记得收藏关注本站~

本①文*来源Win10系统之家www.ghost580.net，转载请注明出处！