页面布局视图的使用

7.2 布局表格和布局单元格的基本操作
在布局页面中可以设置布局表格的宽度有两种类型：固定宽 度和自动延伸。固定宽度就是一个已定的数值，如775像素，此 数值是指在浏览器中所显示的宽度，不随浏览器的宽度的变化而 改变；自动延伸的宽度随浏览器的宽度改变而改变。
7.2.4 课堂实训7——设置布局宽度
7.2 布局表格和布局单元格的基本操作
（05）分别选中所绘制的布局单元格，并打开“属性”面 板，将布局单元格的宽度和高度分别设置为：（156、40）、 （338、40）、（199、40）。
7.3 案例实训——制作完整页面
（06）在所绘制布局单元格1和2内分别输入文本“生活空 间”和“音乐天地”，并在布局单元格3内插入存放在 ch07\IMAGES文件夹下的01.GIF图像，如图7-16所示。
7.3 案例实训——制作完整页面
（01）选中在布局表格中所绘制的布局单元格，在“属性” 面板中将该布局单元格的宽度也设置为775像素，高度为68像素， 如图7-12所示。
7.3 案例实训——制作完整页面
（02）将光标停留在布局单元格内，选择菜单栏中的“插 入”|“图像”选项，在弹出的“选择图像源文件”对话框中，选 择存放在ch07\IMAGES文件夹下的BANER.JPG图像，如图713所示。
7.2.4 课堂实训7——设置布局宽度
7.2 布局表格和布局单元格的基本操作
（2）设置布局宽度为自动延伸 具体操作步骤如下： （01）选择要设置自动延伸宽度的布局表格。 （02）在菜单栏中选择“窗口”|“属性”选项，打开“属
性”面板。
7.2.4 课堂实训7——设置布局宽度
7.2 布局表格和布局单元格的基本操作
7.2 布局表格和布局单元格的基本操作
（1）调整布局表格的大小 具体操作步骤如下： （01）选中要调整的布局表格。 （02）选择布局表格边线上的调整手柄，拖动鼠标便可调
整布局表格的大小，如图7-5所示。
7.2.2 课堂实训5——调整布局表 格和布局单元格的大小
7.2 布局表格和布局单元格的基本操作
7.1.2 课堂实训2——布局表格
7.1 布局表格和布局单元格的基本知识
布局单元格在布局视图中主要用来放置和定位网页元素。布 局单元格的使用也是很简单的，具体的操作方法是： （01）将当前文档的窗口切换到布局视图窗口。 （02）单击“绘制布局单元格”按钮 。在页面中拖动十字 指针，便可绘制出一个布局单元格。如图7-2所示。
（1）选择布局表格 须要执行下列操作之一：

双击所绘制的布局表格中的
标志。
单击文档窗口左下角的<table>标签，如图7-3所示。
7.2.1 课堂实训4——选择布局表 格和布局单元格
7.2 布局表格和布局单元格的基本操作
7.2.1 课堂实训4——选择布局表 格和布局单元格
7.2 布局表格和布局单元格的基本操作
（2）选择布局单元格 须要执行下列操作之一：

按下Ctrl键，同时在所绘制的布局单元格内单击。 将光标停留在布局单元格内，单击文档窗口左下角的<td>
标签，如图7-4所示。
7.2.1 课堂实训4——选择布局表 格和布局单元格
7.2 布局表格和布局单元格的基本操作
7.2.1 课堂实训4——选择布局表 格和布局单元格
7.2 布局表格和布局单元格的基本操作
7.2.2 课堂实训5——调整布局表 格和布局单元格的大小
7.2 布局表格和布局单元格的基本操作
移动布局表格和布局单元格的操作很重要，此操作可以便捷 地定位布局表格和布局单元格。需要注意被移动的条件是：布局 表格或布局单元格的周围必须有一定的可移动空间，也就是有灰 色的空白包围着，这样才可以被移动。通常，嵌套的布局表格才 可以被移动。具体操作步骤如下：
7.3 案例实训——制作完整页面
（07）在其下绘制2个布局单元格，分别选中并同时打开 “属性”面板，将单元格的宽度和高度分别设置为：（148、 326）、（516、326），如图7-17所示。
7.3 案例实训——制作完整页面
（08）在图7-17所示布局单元格（1）中绘制4个宽度为 136像素，高度为34像素的布局单元格，并在其单元格内分别输 入文本，如图7-18所示。
7.1.1 课堂实训1——布局视图的切换
7.1 布局表格和布局单元格的基本知识
（2）切换出标准视图 具体操作步骤如下： （01）按照上述方法显示“设计”视图。 （02）选择“查看”|“表格模式”|“标准模式”选项或单
击“插入”工具栏“布局”标签中的“标准模式”按钮
。
7.1.1 课堂实训1——布局视图的切换
Chapter 7 页面布局视图的使用
7.1 布局表格和布局单元格的基本知识
（1）切换到布局视图 具体步骤如下： （01）如果“设计”视图不可见，选择“查看”|“设计” 选项或“查看”|“代码和设计”选项。 （02）选择“查看”|“表格模式”|“布局模式”选项或单 击“插入”工具栏“布局”标签中的“布局模式”按钮 。
（1）设置布局宽度为固定宽度 具体操作步骤如下： （01）选择要设置固定宽度的布局表格，如图7-7所示。 （02）在菜单栏中选择“窗口”|“属性”选项，打开“属
性”面板。
7.2.4 课堂实训7——设置布局宽度
7.2 布局表格和布局单元格的基本操作
（03）在“属性”面板中选择“固定”单项按钮，并在后 面的文本框中输入一个数值，在此输入640，其单位在默认的条 件下是像素，如图7-8所示。
（03）在“属性”面板中选中“自动伸展”单选按钮，弹 出“选择占位图像”对话框，询问是否设置间隔图像，在这里选 中“创建占位图像文件”单选按钮，如图7-9所示。
7.2.4 课堂实训7——设置布局宽度
7.2 布局表格和布局单元格的基本操作
（04）单击“确定”按钮，弹出“保存间隔图像文件为” 对话框，如图7-10所示。
7.1 布局表格和布局单元格的基本知识
布局表格与布局单元格虽然在本质上都是表格，但是在实际 的网页布局中，使用布局表格与布局单元格远比使用表格要简单 快捷得多。布局表格的使用方法也很简单，只要将文档的窗口切 换到布局视图窗口，单击“布局表格”按钮 。在页面中拖动十 字指针，便可简单地绘制出一个布局表格。如图7-1所示。
7.2.2 课堂实训5——调整布局表 格和布局单元格的大小
7.2 布局表格和布局单元格的基本操作
（2）调整布局单元格的大小 具体操作步骤如下： （01）选中要调整的布局单元格。 （02）选择布局单元格边线上的调整手柄，拖动鼠标便可
调整布局单元格的大小，如图7-6所示。
7.2.2 课堂实训5——调整布局表 格和布局单元格的大小
7.2.3 课堂实训6——移动布局表 格和布局单元格
7.2 布局表格和布局单元格的基本操作
（01）选中要移动的布局表格或布局单元格。 （02）使用方向键便可移动布局表格或布局单元格了，但 这样每次只能移动1像素的距离；如果是在按下Shift键的同时再 利用方向键移动，每次可移动10像素的距离。
7.2.3 课堂实训6——移动布局表 格和布局单元格
7.1.3 课堂实训3——布局单元格
7.1 布局表格和布局单元格的基本知识
7.1.3 课堂实训3——布局单元格
ຫໍສະໝຸດ Baidu
7.1 布局表格和布局单元格的基本知识
布局单元格可以在下列两种条件下绘制：

在布局表格内绘制布局单元格。 在空白的文档内绘制布局单元格。
7.1.3 课堂实训3——布局单元格
7.2 布局表格和布局单元格的基本操作
7.2.4 课堂实训7——设置布局宽度
7.2 布局表格和布局单元格的基本操作
（05）选择好保存间隔图像的文件夹，单击“保存”按钮， 这时原来的固定宽度值将被“波浪线”所表示的“自动伸展”宽 度所代替，如图7-11所示。
7.2.4 课堂实训7——设置布局宽度
7.3 案例实训——制作完整页面
本案例将在布局视图中制作一个较为完整的页面。打开光盘 中的ch07\07.ASP文件，按下Ctrl+F6快捷键将当前文档窗口 状态切换到“布局模式”状态。具体操作步骤如下：
7.1.2 课堂实训2——布局表格
7.1 布局表格和布局单元格的基本知识
7.1.2 课堂实训2——布局表格
7.1 布局表格和布局单元格的基本知识
如果在一个页面中只是简单地绘制出一个布局表格，而没有 绘制布局单元格，那么布局表格的表面呈灰色，此时将不能向布 局表格内输入任何文本和插入图像。但是在布局单元格内却是可 以的。
7.3 案例实训——制作完整页面
（03）选择图像文件后，单击“确定”按钮，便可在布局 单元格内插入该图像文件，如图7-14所示。
7.3 案例实训——制作完整页面
（04）单击“绘制布局单元格”按钮 ，在已经插入图像的 布局表格下面绘制3个布局单元格，如图7-15所示。
7.3 案例实训——制作完整页面
7.3 案例实训——制作完整页面
（09）填充布局单元格内容。完成所对应的布局单元格文 本的输入，结果如图7-19所示。
7.3 案例实训——制作完整页面
（10）最后将“布局模式”转化为“标准模式”。在“标 准模式”中根据自己的审美观进行调整，可为布局单元格的边框 进行修饰，结果如图7-20所示。