第二章：利用表格进行版面设计讲述.doc

第二章 利用表格布局网页 教学：掌握表格的创建、结构调整与美化方法 熟悉表格与单元格的主要属性及其设置方法掌握通过表格来进行网页页面的布局方法重点在D中表格的创建、调整、单元格的编辑与属性设置等操作的方法。点：比如设置宽度为窗口宽度的60％，那么当浏览器窗口大小变化的时候表格的宽度也随之变化；而如果设置宽度为400像素，那么无论浏览器窗口大小为多少，表格的宽度都不会变化 如果要选择整列，将光标置于该列的上边缘，拖动鼠标向上或者下。 ④ 选择的全部单元格的方法有以下几种： ★将光标置于第1个单元格中，并拖动鼠标至最后一个单元格。 将光标置于第1个单元格中，按住Shift键，再单击最后一个单元格。 3.添加／删除行列 在现有的表格中插入单元行或者列，可以选择以下的操作之一： 将光标移到要插入单元行，单击鼠标右键，在弹出的快捷菜单中选择“表格”|“插入行或者列”出现对话框。在此对话框中进行相关的设置，然后单击“确定”按钮，设置的多列或多行将插入到页面中。 删除整行／整列，可以采用下列办法之一： 先选择欲删除的整行或整列，直接按Del键，即可删除。 4.如何使表格置顶，靠左？ 插入表格，修改/页面属性，左边界设置为0.顶部边界设置为0.确定即可。 5.如何修改表格？ 鼠标点table边界，即选中表格，修改表格属性，在属性面板里修改。 6.设置单元格的列、行。 除了设置整个表格的属性之外，还可以单独设置某行、列或某些单元格的属性。在属性面板里进行。 ★合并单元格：选一个格——光标放入单元格——按左下的td，选中。配合shift键——把光标放入要合并的单元格——全部选中时（可以通过鼠标的拖选来进行合并），点属性面板的合并图标（左边是合并，右边是拆分），设置合并与拆分的行列。 7.如何设置表格或者单元格中内容所在的位置？ 光标定位到表格或者单元格，属性面板里修改水平或者垂直位置即可 8.如何设置表格的背景颜色、背景图片和高度？ DWCS5表格属性面板无法设置其背景颜色与图片，也无法设置表格的高度，只能通过修改代码来实现。步骤如下： 选中表格，切换到拆分视图下，如下图： ， 在这里 table width=500 border=0 cellspacing=0 cellpadding=0 width=500代表表格的宽度，border=0代表边框为虚边框， cellspacing=0 代表间距，cellpadding=0代表填充，这里都是表格的属性，每个语段之间都空一格，我们为表格设置背景颜色时，可以把光标定位在空格位置，然后再按一个空格键，就是出现下拉菜单：如下图： 我们选择需要的语句，bgcolor为背景颜色，background为背景图片，height为高度。 选择bgcolor双击，bgcolor=“”进入代码区域，同时弹出色彩面板提供选择，如图： 效果图： 选择background，background=“”右下边出现浏览，点击浏览找到图像，并保存在站点文件夹下即可。 效果图： 如果想去掉表格的背景颜色或背景图片，还需要选择表格，在代码中删除相应的语句即可。本案例需要删除语句为： bgcolor=#FFCCFF background=images/xuejing.jpg。 选择hight，hight=“”，在双引号里输入相应的数值即可。 单元格可以设置背景颜色、宽度与高度，而背景图像设置也需要在代码下进行。选中单元格，切换到拆分或代码视图下，定位光标位置，选择background来进行操作。 表格应用　在表格，我们就可以对它进行调整使用。比如我们需要制作所示的表格　小提示：通常选取整个表格比较困难，在此提供几种常用的方法： 1.把鼠标移动到表格右边界外侧，按下鼠标之后往左拖拽，这样可以快速选取表格。2.用鼠标点击任一个单元格，接着按两下“Ctrl＋A”组合按钮选取整个表格。 3.光标放到任意一个单元格后，点击左下table，就可以选中单元格所在的表格 　四、表格定位 其实表格的网页定位主要通过将网页内容分成若干个区，然后将相应的内容分别填入不同的表格，从而做成非常规范与专业的网页。下面就来所示的网站是如何通过表格实现的。 　　 1． 标题图片。区为行列。2． 导航区行index_04.GIF。分别输入各个栏目的名称区 　　 正文区一个行列其中每一列再通过插入单独的表格方法来形成多个区域并输入相应的信息。比如最左边一列插入一个行列的表格，分别用来显示图标以及相应的文字内容；中间一列，右边一列index_06.GIF，F12预览。 5、设置页面背景图像。 ①在页面属性里修改页面背景图像，素材为BJ.gif； ②选择内容区1行3列的表格修改背景颜色为白色。步骤，把光标定位在内容区内任意一个单元