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

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