第3章 网页布局.pptVIP

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