网页文档的编辑.pptVIP

/ 165 ④ 单击“布局”面板中的“绘制布局单元格”按钮 ，然后在已绘制好的布局表格内按住鼠标左键拖动，绘制出布局单元格，其边框呈天蓝色。 ⑤ 重复步骤④，可以继续绘制布局单元格。如果按住Ctrl键，就可以连续在布局表格内绘制多个布局单元格。 注意：布局单元格彼此之间不能重叠。 ⑥ 在布局表格内还可以再绘制布局表格。 ⑦ 在布局单元格中插入文本和图像。 当不在布局表格中绘制布局单元格时，Dreamweaver会自动创建一个布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。当Dreamweaver自动创建布局表格时，该表格最初显示为填满整个设计视图，即使更改网页文档窗口的大小也是如此。这种全窗口默认布局表格使用户可以在设计视图中的任意位置绘制布局单元格。用户可以将该表格设置为特定的大小，方法是用鼠标拖动布局表格边框的控制点来调整表格的大小。 （3）编辑和设置布局表格 在绘制完布局表格和布局单元格后，还经常需要对它们进行调整，以适应文本和图像等内容的输入。 ① 选中布局表格或单元格 要对布局表格或布局单元格进行操作，首先必须选中它。具体操作方法是：将鼠标移至布局表格或布局单元格的边框上单击，即为选中，其特征在边框上出现控制点（布局单元格或嵌套布局表格，四周会出现8个控制点；最外围的布局表格只会在右边框和下边框上出现3个控制点)。 ② 调整布局表格或单元格的大小 选中布局表格或单元格后，将鼠标指针移到边框的控制点上，此时鼠标指针会变成 或 或 形状，按住鼠标左键拖动控制点，就可以改变布局表格或布局单元格的大小。 ③ 移动布局表格或布局单元格 选中布局表格后，将鼠标指针移至表格左上角的图标 上，按住鼠标左键拖动即可。需要说明的是，最外围的布局表格不能被移动，只有嵌套的子布局表格才能被移动。 如果要移动布局单元格，只需将鼠标指针移至布局单元格的边框上，按住鼠标左键并拖动即可，还可以利用键盘上的光标移动键来移动选中的布局单元格。 ④ 删除布局表格或布局单元格 选中布局表格或布局单元格后，直接按Delete键即可。 ⑤ 设置布局表格或布局单元格的属性 选中布局表格或布局单元格后，就可以在“属性”面板上设置其属性各参数值，如输入宽和高的值来精确地调整其大小。如图2-68和图2-69所示。 图2-69 图2-69 由图2-68和图2-69可以看出，布局表格和布局单元格属性面板上的主要项目与普通表格和单元格的类似，只是多了一个“自动伸展”单选按钮，如果选中该按钮，则当前表格或单元格的列宽将自动伸展至占满整个剩余的空间。 ⑥ 使用弹出式菜单 在最外围的布局表格的顶端有许多数字，分别用于 表示布局表格、布局单元格或空白列的宽度。每个数字 的后面都有一个倒立的三角形按钮 ，单击它可以弹出 一个菜单，如右图所示。 其中各条命令的作用如下: 列设置为自动伸展：表格的列可以按比例自动扩展至占满整个剩余的空间。 添加间隔图像：在该列中使用大小适合的空白图像来占据表格的宽度。 清除单元格高度：清除对应单元格的高度，代之以系统自动确定的高度。 使单元格宽度一致：使单元格的宽度保持一致。 移除所有分隔符图像：删除所有的空白图像。 删除嵌套：删除嵌套的布局表格。 四、课堂实践 （1）打开“课堂实践”网站，新建网页文档“st2.html”。 （2）利用布局表格布局网页“st2.html”的页面元素。 ① 绘制一个较大的布局表格A，然后在布局表格A中再绘制两个布局表格B、C，B和C布局表格上下排列。 ② 在布局表格B中绘制 一个布局单元格，在布局表 格C中绘制六个布局单元格。 效果如图2-71所示。 ③ 给A布局表格设置背景，在B布局表格中的布局单元格内输入文字，在C布局表格中的布局单元格分别插入图像标题和图像。在浏览器中浏览效果如图2-72所示。 任务6 在网页中使用层 一、任务分析 层是制作网页时经常用到的对象，在控制页面布局方面，层要比表格更加的灵活，例如，需要在文字上插入一幅图像时，可以用层来实现。层体现了网页技术从二维空间向三维空间的一种延伸，也是一种新的发展方向。层和表格可以互相转换。 本任务主要学习如何描绘层和插入层、如何选择层和激活层、层的属性设置方法、如何调整层的大小和位置、在层中输入文本和插入图像的方法，并了解层与表格之间的相互转换方法。 二、相关知识 1. 层的概念 Dreamweaver 中的层(Layer)是一种页