页面布局视图的使用

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,北京科海电子出版社,http:/,北京科海电子出版社,http:/,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,北京科海电子出版社,http:/,Chapter,7,页面布局视图的使用,7.1,布局表格和布局单元格的基本知识,（,1,）切换到布局视图,具体步骤如下：,（,01,）如果“设计”视图不可见，选择“查看”,|“,设计”选项或“查看”,|“,代码和设计”选项。,（,02,）选择“查看”,|“,表格模式”,|“,布局模式”选项或单击“插入”工具栏“布局”标签中的“布局模式”按钮 。,7.1.1 课堂实训1,布局视图的切换,7.1,布局表格和布局单元格的基本知识,（,2,）切换出标准视图,具体操作步骤如下：,（,01,）按照上述方法显示“设计”视图。,（,02,）选择“查看”,|“,表格模式”,|“,标准模式”选项或单击“插入”工具栏“布局”标签中的“标准模式”按钮 。,7.1.1 课堂实训1,布局视图的切换,7.1,布局表格和布局单元格的基本知识,布局表格与布局单元格虽然在本质上都是表格，但是在实际的网页布局中，使用布局表格与布局单元格远比使用表格要简单快捷得多。布局表格的使用方法也很简单，只要将文档的窗口切换到布局视图窗口，单击“布局表格”按钮 。在页面中拖动十字指针，便可简单地绘制出一个布局表格。如图,7-1,所示。,7.1.2 课堂实训2,布局表格,7.1,布局表格和布局单元格的基本知识,7.1.2 课堂实训2,布局表格,7.1,布局表格和布局单元格的基本知识,如果在一个页面中只是简单地绘制出一个布局表格，而没有绘制布局单元格，那么布局表格的表面呈灰色，此时将不能向布局表格内输入任何文本和插入图像。但是在布局单元格内却是可以的。,7.1.2 课堂实训2,布局表格,7.1,布局表格和布局单元格的基本知识,布局单元格在布局视图中主要用来放置和定位网页元素。布局单元格的使用也是很简单的，具体的操作方法是：,（,01,）将当前文档的窗口切换到布局视图窗口。,（,02,）单击“绘制布局单元格”按钮 。在页面中拖动十字指针，便可绘制出一个布局单元格。如图,7-2,所示。,7.1.3 课堂实训3,布局单元格,7.1,布局表格和布局单元格的基本知识,7.1.3 课堂实训3,布局单元格,7.1,布局表格和布局单元格的基本知识,布局单元格可以在下列两种条件下绘制：,在布局表格内绘制布局单元格。,在空白的文档内绘制布局单元格。,7.1.3 课堂实训3,布局单元格,7.2,布局表格和布局单元格的基本操作,（,1,）选择布局表格,须要执行下列操作之一：,双击所绘制的布局表格中的 标志。,单击文档窗口左下角的,标签，如图,7-3,所示。,7.2.1 课堂实训4,选择布局表格和布局单元格,7.2,布局表格和布局单元格的基本操作,7.2.1 课堂实训4,选择布局表格和布局单元格,7.2,布局表格和布局单元格的基本操作,（,2,）选择布局单元格,须要执行下列操作之一：,按下,Ctrl,键，同时在所绘制的布局单元格内单击。,将光标停留在布局单元格内，单击文档窗口左下角的,标签，如图,7-4,所示。,7.2.1 课堂实训4,选择布局表格和布局单元格,7.2,布局表格和布局单元格的基本操作,7.2.1 课堂实训4,选择布局表格和布局单元格,7.2,布局表格和布局单元格的基本操作,（,1,）调整布局表格的大小,具体操作步骤如下：,（,01,）选中要调整的布局表格。,（,02,）选择布局表格边线上的调整手柄，拖动鼠标便可调整布局表格的大小，如图,7-5,所示。,7.2.2 课堂实训5,调整布局表格和布局单元格的大小,7.2,布局表格和布局单元格的基本操作,7.2.2 课堂实训5,调整布局表格和布局单元格的大小,7.2,布局表格和布局单元格的基本操作,（,2,）调整布局单元格的大小,具体操作步骤如下：,（,01,）选中要调整的布局单元格。,（,02,）选择布局单元格边线上的调整手柄，拖动鼠标便可调整布局单元格的大小，如图,7-6,所示。,7.2.2 课堂实训5,调整布局表格和布局单元格的大小,7.2,布局表格和布局单元格的基本操作,7.2.2 课堂实训5,调整布局表格和布局单元格的大小,7.2,布局表格和布局单元格的基本操作,移动布局表格和布局单元格的操作很重要，此操作可以便捷地定位布局表格和布局单元格。需要注意被移动的条件是：布局表格或布局单元格的周围必须有一定的可移动空间，也就是有灰色的空白包围着，这样才可以被移动。通常，嵌套的布局表格才可以被移动。具体操作步骤如下：,7.2.3 课堂实训6,移动布局表格和布局单元格,7.2,布局表格和布局单元格的基本操作,（,01,）选中要移动的布局表格或布局单元格。,（,02,）使用方向键便可移动布局表格或布局单元格了，但这样每次只能移动,1,像素的距离；如果是在按下,Shift,键的同时再利用方向键移动，每次可移动,10,像素的距离。,7.2.3 课堂实训6,移动布局表格和布局单元格,7.2,布局表格和布局单元格的基本操作,在布局页面中可以设置布局表格的宽度有两种类型：固定宽度和自动延伸。固定宽度就是一个已定的数值，如,775,像素，此数值是指在浏览器中所显示的宽度，不随浏览器的宽度的变化而改变；自动延伸的宽度随浏览器的宽度改变而改变。,7.2.4 课堂实训7,设置布局宽度,7.2,布局表格和布局单元格的基本操作,（,1,）设置布局宽度为固定宽度,具体操作步骤如下：,（,01,）选择要设置固定宽度的布局表格，如图,7-7,所示。,（,02,）在菜单栏中选择“窗口”,|“,属性”选项，打开“属性”面板。,7.2.4 课堂实训7,设置布局宽度,7.2,布局表格和布局单元格的基本操作,（,03,）在“属性”面板中选择“固定”单项按钮，并在后面的文本框中输入一个数值，在此输入,640,，其单位在默认的条件下是像素，如图,7-8,所示。,7.2.4 课堂实训7,设置布局宽度,7.2,布局表格和布局单元格的基本操作,（,2,）设置布局宽度为自动延伸,具体操作步骤如下：,（,01,）选择要设置自动延伸宽度的布局表格。,（,02,）在菜单栏中选择“窗口”,|“,属性”选项，打开“属性”面板。,7.2.4 课堂实训7,设置布局宽度,7.2,布局表格和布局单元格的基本操作,（,03,）在“属性”面板中选中“自动伸展”单选按钮，弹出“选择占位图像”对话框，询问是否设置间隔图像，在这里选中“创建占位图像文件”单选按钮，如图,7-9,所示。,7.2.4 课堂实训7,设置布局宽度,7.2,布局表格和布局单元格的基本操作,（,04,）单击“确定”按钮，弹出“保存间隔图像文件为”对话框，如图,7-10,所示。,7.2.4 课堂实训7,设置布局宽度,7.2,布局表格和布局单元格的基本操作,（,05,）选择好保存间隔图像的文件夹，单击“保存”按钮，这时原来的固定宽度值将被“波浪线”所表示的“自动伸展”宽度所代替，如图,7-11,所示。,7.2.4 课堂实训7,设置布局宽度,7.3,案例实训,制作完整页面,本案例将在布局视图中制作一个较为完整的页面。打开光盘中的,ch0707.ASP,文件，按下,Ctrl+F6,快捷键将当前文档窗口状态切换到“布局模式”状态。具体操作步骤如下：,7.3,案例实训,制作完整页面,（,01,）选中在布局表格中所绘制的布局单元格，在“属性”面板中将该布局单元格的宽度也设置为,775,像素，高度为,68,像素，如图,7-12,所示。,7.3,案例实训,制作完整页面,（,02,）将光标停留在布局单元格内，选择菜单栏中的“插入”,|“,图像”选项，在弹出的“选择图像源文件”对话框中，选择存放在,ch07IMAGES,文件夹下的,BANER.JPG,图像，如图,7-13,所示。,7.3,案例实训,制作完整页面,（,03,）选择图像文件后，单击“确定”按钮，便可在布局单元格内插入该图像文件，如图,7-14,所示。,7.3,案例实训,制作完整页面,（,04,）单击“绘制布局单元格”按钮 ，在已经插入图像的布局表格下面绘制,3,个布局单元格，如图,7-15,所示。,7.3,案例实训,制作完整页面,（,05,）分别选中所绘制的布局单元格，并打开“属性”面板，将布局单元格的宽度和高度分别设置为：（,156,、,40,）、（,338,、,40,）、（,199,、,40,）。,7.3,案例实训,制作完整页面,（,06,）在所绘制布局单元格,1,和,2,内分别输入文本“生活空间”和“音乐天地”，并在布局单元格,3,内插入存放在,ch07IMAGES,文件夹下的,01.GIF,图像，如图,7-16,所示。,7.3,案例实训,制作完整页面,（,07,）在其下绘制,2,个布局单元格，分别选中并同时打开“属性”面板，将单元格的宽度和高度分别设置为：（,148,、,326,）、（,516,、,326,），如图,7-17,所示。,7.3,案例实训,制作完整页面,（,08,）在图,7-17,所示布局单元格（,1,）中绘制,4,个宽度为,136,像素，高度为,34,像素的布局单元格，并在其单元格内分别输入文本，如图,7-18,所示。,7.3,案例实训,制作完整页面,（,09,）填充布局单元格内容。完成所对应的布局单元格文本的输入，结果如图,7-19,所示。,7.3,案例实训,制作完整页面,（,10,）最后将“布局模式”转化为“标准模式”。在“标准模式”中根据自己的审美观进行调整，可为布局单元格的边框进行修饰，结果如图,7-20,所示。,