,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第3章 网页布局,使用表格、布局表格、 AP元素和Sqry框架布局页面,第3章 网页布局使用表格、布局表格、 AP元素和Sqry框架,1,本章纲要,3.1 表格布局,3.2 编辑表格,3.3 AP元素,3.4 Spry框架布局,本章纲要3.1 表格布局,2,3.1 表格布局,利用表格可以分隔网页页面为几个区域，每个区域用来显示不同类型的信息,一、创建各种表格,二、表格中的网页元素,三、表格属性,四、表格标签,3.1 表格布局 利用表格可以分隔网页页面,3,一、创建各种表格,1.创建表格,2.插入嵌套表格,3.绘制布局表格与布局单元格,一、创建各种表格1.创建表格,4,1.创建表格,打开“表格”对话框：单击“插入”|“布局”选项卡中的“表格”按钮,在对话框中设置各参数：,行数：表格中的行,列数：表格中的列,表格宽度：以像素或百分比为单位,以像素为单位，表格的大小是固定的，以百分比为单位，表格的宽度随着IE窗口的改变而变化,单元格边距（填充）:单元格中内容与边框间的空白,单元格间距：单元格与单元格间的空白,无、左侧、顶部、两者、标题、对齐标题、摘要,7,1.创建表格打开“表格”对话框：单击“插入”|“布局”选项卡,5,表格的参数,边框,表格外标题,间距,边距,行标题,表格的参数边框表格外标题间距边距行标题,6,2.嵌套表格,嵌套表格即套在外层表格的一个单元格中的表格，可以布局不规则页面。,光标定位在指定的单元格中,插入表格（方法同前）,注意：实际设计网页时通常将页面的大致版面分隔用一个总表格（单位用固定），页面中每一个版块的布局用嵌套表格（单位用百分比）。,应用实例,2.嵌套表格 嵌套表格即套在外层表格的一,7,网站首页1,网站首页1,8,3.绘制布局表格与布局单元格,布局表格即在布局模式下的表格，该种模式下创建表格的灵活性较大,1）切换到“布局模式”：“查看”|“表格模式”|“布局模式”,2）绘制：在“布局”选项卡中单击“绘制布局表格按钮，在文档中拖动鼠标，表格的边框为绿色（布局模式中）,3）在表格中，绘制单元格：单击“绘制布局单元格”按钮，在表格内拖动鼠标。,注意：按住Ctrl，可以连续绘制布局单元格；在布局表格内容也可以嵌套表格；布局模式可以随时切换为标准模式。,3.绘制布局表格与布局单元格布局表格即在布局模式下的表格，该,9,二、表格中的网页元素,1.表格中的元素,文本,普通图像,背景图像,2.插入方法,定位光标到单元格中,插入,注意：表格的背景图像需要选中整个表格，再插入,二、表格中的网页元素1.表格中的元素,10,三、表格和单元格属性,1.选择表格元素,1）选择单元格:单击选择器中的,2）选择行和列（通常的方法略）,选择器中的标签：,行、单元格、表格,单击或在对应的行上拖动鼠标选择行,在对应的列上的单元格中拖动鼠标选择列,选择多行或多列,3）选择表格,鼠标指向任意边框上时，单击鼠标,修改表格选择表格,单击,三、表格和单元格属性1.选择表格元素,11,2.设置表格属性,表格ID,行、列、宽、高,对齐,边框、边框颜色,背景颜色、背景图像,填充,：内容与单元格边界间的距离,间距,：单元格间的距离,2.设置表格属性,12,3.设置行列单元格属性,水平、垂直、宽、高、背景、背景图像、边框,不换行：单元格中输入数据时不自动换行,标题：将某一单元格设置为表头,合并单元格：单击属性面板中的合并单元格按钮,拆分单元格：单击属性面板中的拆分单元格按钮,3.设置行列单元格属性水平、垂直、宽、高、背景、背景图像、边,13,3.设置布局表格和单元格的属性,1.设置布局表格属性,宽、高、背景颜色、填充、间距、清除行高,使单元格宽度一致:一个列的宽度有两个数字，说明 HTML 代码中设置的列宽度与这些列在屏幕上的外观宽度不匹配,使用该项可以调整为一致(当设置单元格边距或间距时会出现该情况),删除所有,间隔图像,:清除布局表格中所有间隔图像,删除嵌套:删除嵌套布局表格,但其中的内容不删除,2.设置布局单元格属性,宽、高、背景颜色、水平、垂直,不换行：单元格中的文本在一行中，不自动换行,自动伸展：单击“自动伸展”单行钮，当前单元格增加自动伸展后，其左右的单元格会被挤的很小。,间隔图像:也叫做间隔GIF,是透明的图像,用来控制自动伸展表格中的间距,即自动伸展时不让后面的单元格的列缩小,3.设置布局表格和单元格的属性1.设置布局表格属性间隔图像:,14,表格布局页面的技巧,设计草样,在新建页面中插入表格,插入嵌套表格,插入图像占位符,设置表格及单元格属性,图片的宽与要高一致；,4.灵活运用合并或拆分单元格设计不规则的页面布局；,5.嵌套表格的单位要用百分比。,6.整个页面外层表格的大小可以用固定尺寸居中方式也可以用百分比（浏览器根据窗口大小自动调整页面的大小）,注意事项：,1.整个页面不要只用一个表格，从上向下尽量使用多个表格;,2.表格嵌套层次尽量要少；,3.图片最好放在表格的单元格中，单元格的宽与高与,表格布局页面的技巧设计草样图片的宽与要高一致； 注意事项：,15,主页页面布局简图,主页页面布局简图,16,经典网站首页1,经典网站首页1,17,经典网站,首页2,经典网站,18,经典网站,首页3,经典网站,19,实例,参照实例所示网页的布局，设计布局一个网站的主页,要求给出页面中各版块的实际标题：如“公告”、“精品推荐”、“最新产品”等,实例参照实例所示网页的布局，设计布局一个网站的主页,20,