3.2-布局表格-《网页设计制作》.pptVIP

布局表格 学习要点 认识布局模式 用布局视图布局页面 页面布局是网页制作的一个重要组成部分，在布局模式下用户可方便地进行页面布局。 本部分将介绍进入和退出页面布局模式的方法，创建布局表格和布局单元格，设置布局表格和单元格属性等。 1.1 认识布局模式 在Dreamweaver中可利用表格、层、框架和布局表格等布局技术对页面进行布局。本部分将讲解在布局模式下布局页面，布局模式是一种操作十分简便的页面布局方式 1.1 认识布局模式 1.1.1 切换到布局模式 1.1.2 认识布局视图 1.1.3 退出布局模式 1.1.1 切换到布局模式 从标准模式切换到布局模式的方法很简单，将插入栏切换到“布局”插入栏，单击 按钮即可。 1.1.2 认识布局视图 布局模式的编辑窗口顶部有显示“布局模式”的蓝色长条。如果在切换到布局模式前网页上存在表格，则会自动转换为布局表格，表格中的单元格不会转换为布局单元格。 在布局模式中，布局表格边框为绿色，布局单元格边框为蓝色，当光标移到布局单元格边框上时会高亮显示。 1.1.3 退出布局模式 在布局模式中创建好布局表格完成页面布局后，最好切换回标准模式再向表格中添加内容或对表格进行编辑。退出布局模式有如下几种方法： 在“布局”插入栏中单击 按钮切换到标准模式。 在编辑窗口的顶部单击 超级链接。 选择“查看/表格模式/标准模式”命令。 1.2 用布局视图布局页面 在布局模式下，可以在一个布局表格中使用多个布局单元格对页面进行布局。 1.2 用布局视图布局页面 1.2.1 创建布局表格和布局单元格 1.2.2 设置布局表格和单元格属性 1.2.3 在布局表格中添加网页元素 1.2.4 调整布局表格和布局单元格 1.2.1 创建布局表格和布局单元格 分别介绍绘制布局表格、布局单元格和嵌套布局表格。 1.2.2 设置布局表格和单元格属性 在Dreamweaver中，设置布局表格的属性可以改变其显示颜色等。 1.2.3 在布局表格中添加网页元素 在布局模式中添加网页元素与在标准模式中一样，可以添加文本、图像等内容。将光标插入点定位到需添加网页元素的布局单元格，然后输入文本或插入其他内容即可。 1.2.4 调整布局表格和布局单元格 在Dreamweaver中绘制布局单元格时，系统会自动指定布局单元格的高度，使布局单元格以用户绘制的高度显示，即使布局单元格是空的也是如此。 将内容插入到布局单元格之后，可以不再指定高度，此时可以删除多余的高度。另外，还可根据需要对布局表格或布局单元格的大小和位置等进行调整。 1.2.4 调整布局表格和布局单元格 1．清除布局单元格高度 2．布局单元格的大小调整及布局表格的移动 3．布局表格的移动 1．清除布局单元格高度 清除布局单元格高度有如下两种方法： 单击表格顶部的 按钮，在弹出的快捷菜单中选择“清除所有高度”命令。 通过单击表格顶部的选项卡选择一个布局表格，然后单击“属性”面板中的清除行高按钮 。 2．布局单元格的大小调整及布局表格的移动 在Dreamweaver中可以对布局单元格进行大小的调整，也可将其移动，但不能使它们重叠。 利用布局表格创建下面页面 福建农林大学软件工程学院 姚剑芳 * 网页设计制作——Dreamweaver 预备知识：HTML基础 * *