Dreamweaver8和Flash8框架、表格、层与网页布局程序.ppt

自动伸展是根据窗口的大小调整宽度。如果使用自动伸展的话，不论浏览器的窗口设置为多大，设计的版面都会充满整个浏览器的窗口。在一个版面中只，有一列可以自动伸展。 设置自动伸展宽度：单击需要设置自动伸展的表顶部的下三角按钮，再单击布局表格菜单中的“列设置为自动伸展”。另外，也可以选择要操作的列，再选中“属性”面板中的“自动伸展”单选项。 当某一列被设置为自动伸展后，Dreamweaver会插入间隔图到指定宽度的列以控制版面。在浏览器里是看不到间隔图的，但它可以用来控制间距。 设置指定宽度：并不是所有的列都适合于自动伸展宽度，有时需要精确指定列的宽度，可单击“属性”面板的“固定”文本框中，然后输入数值。如果输入的数值小于内容的宽度，Dreamweaver会自动设置宽度到正确的大小。 1．“布局”栏中按钮的作用 在网页设计中，网页的布局是非常重要的，也就是网页中的文字、图像与动画等对象如何安排。通常在插入对象以前，先进行区域分割。 3.4.3 相关知识 区域的分割可以使用框架、层或表格，使用最多的是表格。常规的方法是插入表格，但是这样会需要进行表格的合并和拆分等调整。Dreamweaver 8提供了“布局”栏的两个按钮；“布局表格”按钮 和“绘制布局单元格”按钮 ，利用它们可以方便地制作出网页布局的表格。这两个按钮的作用如下。 （1）“布局表格”按钮的作用 单击按下“布局视图”按钮 ，即可进入网页的“布局视图”状态（开始时是“标准模式”状态）。同时，“布局”栏中的按钮变为有效。 单击“布局”栏中的“布局表格”按钮 ，再用鼠标在设计窗口内拖曳，即可绘制出一个绿色线条的表格，如图3-4-2所示。 图3-4-2 单击 按钮后绘制的布局表格 （2）“绘制布局单元格”按钮的作用 在绘制表格后，单击“布局”栏中的“绘制布局单元格”按钮 ，再用鼠标在设计窗口内拖曳，即可绘制出一个单元格。重复上述过程，最终效果如图3-4-3所示。 图3-4-3 单击 按钮后绘制的布局单元格 如果没有绘制布局表格就绘制布局单元格，则会自动产生一个布局表格。注意：不可以在布局单元格内绘制布局表格和布局单元格。 （1）网页布局的调整 选中布局表格：单击布局表格内部或它的标签 ，即可选中布局表格。选中的布局表格的四周会出现3个控制柄和布局表格宽度标注，如图3-4-2所示。 2．网页布局的调整与设置 调整布局表格的大小与位置：用鼠标拖曳布局表格的标签，即可改变布局表格的位置；用鼠标拖曳布局表格的绿色控制柄，即可改变布局表格的大小。注意：不能将布局表格调整到比其中的单元格还小，也不能将布局表格移到其他布局表格之上。 选中布局单元格：将鼠标指针移到布局单元格的蓝色线条处，布局单元格的线条会变为红色，此时单击布局单元格的线条，即可选中布局单元格。选中的布局单元格四周会有8个控制柄，如图3-4-3所示。 调整单元格的大小与位置：选中单元格后，用鼠标拖曳单元格线条，即可改变单元格的位置；用鼠标拖曳单元格的控制柄，即可改变单元格的大小。注意：不能将单元格移出所在的布局表格，也不能将单元格移到其他单元格之上。 （2）布局表格的“属性”栏 选中布局表格后，即可弹出布局表格的“属性”栏，它与表格的“属性”栏不一样，如图3-4-4所示。布局表格“属性”栏内各选项的作用如下。 图3-4-4 网页布局表格的“属性”栏 “宽”栏：它有两个单选项，即“固定”和“自动伸展”。选中“固定”单选项后，还需要在其文本框内输入布局表格的宽度数值（单位为像素）。 ? “高”文本框：在其内输入布局表格的高度数值（单位为像素）。 ? “背景颜色”按钮与文本框：用来确定布局表格的背景颜色。 “填充”文本框：用来确定布局表格内布局单元格中插入的对象距边线的距离（单位为像素）。该值为0时，如图3-4-5所示；该值为15时，如图3-4-6所示。 图3-4-5 “填充”值为0 图3-4-6 “填充”值为15 “间距”文本框：用来确定布局表格内各布局单元格与空图像之间的间距（单位为像素）。该值为0时，如图3-4-5所示；该值为15时，如图3-4-7所示。 图3-4-7 “间距”值为15 “清除行高”按钮 ：单击该按钮可清除行高。 ? “宽度一致”按钮 ：使单元格宽度一致，创建宽度相同的单元格。 ? “删除间隔图像”按钮 ：删除所有的间隔图像。它在添加间隔图像后才会有效。 ? “删除嵌套”按钮 ：删除嵌套在布局表格