dreamwevar实验四网页页面布局.ppt

实验四 网页页面布局 孙晓燕 2012.7 内容 表格的创建和编辑方法 通过表格来进行网页页面布局的方法 建立框架网页及框架属性设置的方法 如何将文字、图象及各种网页元素有规律的、整齐有序的排列在网页上，使页面易读和美观，是网页布局要解决的问题。表格和框架是常用的布局工具。 表格 在网页中表格不只是数据统计和展示数据，更重要的用途是利用表格来进行页面布局，使网页看起来更加直观和有条理。 行、列、单元格。 间距：单元格和单元格之间的距离。cellSpacing在属性面板里设置 边距：单元格中的内容和边框之间的距离。cellpadding=10的意思就是在原有小格的基础上沿四边各加上10 个点子宽度，也就是把原来的小格变大，但原来写的内容占的大小范围不变。 边框：表格的边线。 插入表格 单击菜单栏“插入”|“表格”命令。 在“插入”栏的“常用”类别中，单击“表格”按钮。 插入嵌套表格 嵌套表格是在一个表格的单元格内插入表格。 添加内容 将插入点定位在单元格内，即可输入文本，图象，动画等网页元素。 tag table width=“500” height=“200” trtd单元格内容/td /tr /table 四行两列的表格 table width=200 border=1 tr td08:30-09:15/td td第一节课/td /tr tr td09:20-10:05/td td第二节课/td /tr tr td10:20-11:05/td td第三节课/td /tr tr td11:10-11:55/td td第四节课/td /tr /table 选择表格 单击表格的左上角、右边或底部边缘的任意位置。 单击表格的单元格，在菜单栏选择“修改”|“表格”|“选择表格”。 单击表格的单元格，在“状态栏”选择“table”标签。 选择行或列 鼠标指向行的左边缘或列的上边缘，单击鼠标则选择鼠标指向的行或列。 拖动鼠标，则选择连续的多行或多列。 按Ctrl同时单击鼠标则选择不连续的的行或列。 选择单元格 标签检查器 Ctrl+a 双击 选择连续的不连续的 设置表格属性 id 行，列 宽，高 对齐 背景颜色 边框，边框颜色 背景图像 清除列宽，清除行高 设置单元格属性 水平，垂直 宽，高 背景颜色 边框，边框颜色 背景图像 拆分 合并 表格的基本操作 表格的大小:拖动控制点,”属性检查器” 调整行高和列宽: 鼠标移动到要调整的行或列的边框上,拖动鼠标. 合并或拆分单元格 插入和删除行或列,多行或多列 表格布局 Dreamweaver 8中提供了3中布局视图:标准、扩展和布局。绘制布局表格通常在布局视图下进行。 切换布局视图 “插入”菜单栏选择“布局”类别，单击“布局”视图命令。 绘制布局表格 切换到布局视图模式 单击“布局表格”按钮，鼠标指针变成“+” 在文档窗口中，按住鼠标左键并拖动，可以绘制出布局表格 表格的框线显示为绿色 每个布局表格都在顶端有标签，并在底部或顶端显示表格的大小。 布局表格可以嵌套。 绘制布局单元格 切换到布局视图模式 单击“绘制布局单元格”按钮，鼠标指针变成“+” 在布局表格中合适的位置，按住鼠标左键并拖动，可以绘制出布局表格 单元格的框线显示为蓝色 要绘制多个单元格，按住ctrl的同时单击“绘制布局单元格”按钮。 布局表格可以嵌套。 移动布局表格和单元格 选择 鼠标拖动即可 调整大小 选择 拖动控制点 删除布局表格和单元格 选择 “Delete”键 “编辑”|“清除” 设置布局表格属性 在“属性检查器”中设置 宽 高 填充 间距 背景颜色 利用表格制作垂直线或水平线 水平线可以使用hr标签 插入一个无边框、无边距的表格，设单元格的高度为“1”，为单元格添加背景颜色。 切换到“拆分”视图，删除单元格内的“nbsp;”代码 实例 * *