网站设计 个人版第3章 网页布局

1、第3章 网页布局使用表格、布局表格、 AP元素和Sqry框架布局页面本章纲要3.1 表格布局3.2 编辑表格3.3 AP元素3.4 Spry框架布局3.1 表格布局 利用表格可以分隔网页页面为几个区域，每个区域用来显示不同类型的信息一、创立各种表格二、表格中的网页元素三、表格属性四、表格标签一、创立各种表格1.创立表格2.插入嵌套表格3.绘制布局表格与布局单元格1.创立表格翻开“表格对话框：单击“插入|“布局选项卡中的“表格按钮在对话框中设置各参数：行数：表格中的行列数：表格中的列表格宽度：以像素或百分比为单位以像素为单位，表格的大小是固定的，以百分比为单位，表格的宽度随着IE窗口的改变而变化

2、单元格边距填充:单元格中内容与边框间的空白单元格间距：单元格与单元格间的空白无、左侧、顶部、两者、标题、对齐标题、摘要7表格的参数边框表格外标题间距边距行标题2.嵌套表格 嵌套表格即套在外层表格的一个单元格中的表格，可以布局不规那么页面。光标定位在指定的单元格中插入表格方法同前注意：实际设计网页时通常将页面的大致版面分隔用一个总表格单位用固定，页面中每一个版块的布局用嵌套表格单位用百分比。应用实例网站首页13.绘制布局表格与布局单元格布局表格即在布局模式下的表格，该种模式下创立表格的灵活性较大1切换到“布局模式：“查看|“表格模式|“布局模式2绘制：在“布局选项卡中单击“绘制布局表格按钮，在文

3、档中拖动鼠标，表格的边框为绿色布局模式中3在表格中，绘制单元格：单击“绘制布局单元格按钮，在表格内拖动鼠标。注意：按住Ctrl，可以连续绘制布局单元格；在布局表格内容也可以嵌套表格；布局模式可以随时切换为标准模式。二、表格中的网页元素1.表格中的元素文本普通图像背景图像2.插入方法定位光标到单元格中插入注意：表格的背景图像需要选中整个表格，再插入三、表格和单元格属性1.选择表格元素1选择单元格:单击选择器中的2选择行和列通常的方法略选择器中的标签：行、单元格、表格单击或在对应的行上拖动鼠标选择行在对应的列上的单元格中拖动鼠标选择列选择多行或多列3选择表格鼠标指向任意边框上时，单击鼠标修改表格选

4、择表格单击2.设置表格属性表格ID行、列、宽、高对齐边框、边框颜色背景颜色、背景图像填充：内容与单元格边界间的距离间距：单元格间的距离3.设置行列单元格属性水平、垂直、宽、高、背景、背景图像、边框不换行：单元格中输入数据时不自动换行标题：将某一单元格设置为表头合并单元格：单击属性面板中的合并单元格按钮拆分单元格：单击属性面板中的拆分单元格按钮3.设置布局表格和单元格的属性1.设置布局表格属性宽、高、背景颜色、填充、间距、去除行高使单元格宽度一致:一个列的宽度有两个数字，说明 HTML 代码中设置的列宽度与这些列在屏幕上的外观宽度不匹配,使用该项可以调整为一致(当设置单元格边距或间距时会出现该情

5、况)删除所有间隔图像:去除布局表格中所有间隔图像删除嵌套:删除嵌套布局表格,但其中的内容不删除2.设置布局单元格属性宽、高、背景颜色、水平、垂直不换行：单元格中的文本在一行中，不自动换行自动伸展：单击“自动伸展单行钮，当前单元格增加自动伸展后，其左右的单元格会被挤的很小。间隔图像:也叫做间隔GIF,是透明的图像,用来控制自动伸展表格中的间距,即自动伸展时不让后面的单元格的列缩小表格布局页面的技巧设计草样在新建页面中插入表格插入嵌套表格插入图像占位符设置表格及单元格属性图片的宽与要高一致； 4.灵活运用合并或拆分单元格设计不规那么的页面布局；5.嵌套表格的单位要用百分比。6.整个页面外层表格的大小可以用固定尺寸居中方式也可以用百分比浏览器根据窗口大小自动调整页面的大小本卷须知：1.整个页面不要只用一个表格，从上向下尽量使用多个表格;2.表格嵌套层次尽量要少；3.图片最好放在表格的单元格中，单元格的宽与高与主页页