网站开发第3章表格和网页布局ppt课件.ppt

2学时 使用表格可以清晰地显示列成表的数据 实际上表格的作用不只是显示数据 它还在网页定位上起着重要的作用 概述 3 0使用HTML建立表格 表格的建立将利用3个最基本的HTML标签来完成 它们分别是 标签 标签和 标签 建立一个最基本的表格 必须包含一组 和 标签 一组 和 标签以及一组 和 标签 这也是最简单的单元格表格 3 1表格 在Dreamweaver中 存在3种表格视图模式 标准模式 扩展模式和布局模式 标准模式 基本按浏览器预览结果来显示网页 在该模式下可按 所见即所得 的方式编辑网页 扩展模式 表格被强制以双线形式显示 方便对表格的操作 布局模式 使用布局表格和布局单元格来对页面进行布局 标准模式 可进行 插入表格 合并单元格 拆分单元格 等操作 无边框的表格以虚线形式来显示 不容易选择虚线表格中的单元格及其中的内容 扩展模式 可进行 插入表格 合并单元格 拆分单元格 等操作 表格以双线形式显示 方便对表格的操作 布局模式 无法进行 插入表格 合并单元格 拆分单元格 等操作 只能将内容插入到布局单元格中 3 1 1表格操作 一 创建表格 表格 对话框 一 创建表格 4 完成对话框后 单击 确定 按钮 例 插入一个5行5列的表格 宽度为780像素 边框为 二 选择表格 选取整个表格 选取整个表格 二 选择表格 选取整个表格 二 选择表格 选取行 选取列 二 选择表格 选取一个或多个单元格 二 选择表格 4 要选取不相邻单元格 执行下列操作之一 按住Control键点击表格内部来增加单元格 行或列到选集中 选取表格内多个单元格 然后按住Contrl键并点击单元格 行或列取消对某些单元格的选取 三 修改表格 1 调整表格的大小 可采用以下方法之一 选择表格 表格周围出现选择柄 拖动选择柄 选择表格 在属性面板的宽或高框中输入修改值 三 修改表格 2 调整列宽 可采用以下方法之一 拖动想更改的列的右边框 要更改某个列的宽度并保持其他列的大小不变 按住Shift键 然后拖动列的边框 选择列 在属性面板的宽文本框中输入列宽 三 修改表格 3 调整行高 可采用以下方法之一 拖动想更改的行的下边框 选择行 在属性面板的高文本框中输入行高 三 修改表格 4 添加行或列 单击一个单元格 选择 修改 表格 插入行 或 插入列 添加行或列 三 修改表格 5 删除行或列 选择一行或列 选择 编辑 清除 或按Delete键 三 修改表格 6 拆分单元格表格中每一行中的单元格列数可能不等 这时就可根据需要使用拆分命令把一个单元格变为几个单元格 单击单元格 在属性面板上 单击 拆分单元格 按钮 显示对话框 指定将单元格拆分成行还是列 设置拆分的行数或列数 单击 确定 三 修改表格 7 合并单元格合并单元格操作只能针对连续的单元格使用 选择连续的单元格形成一行或一个矩形 在属性面板上 单击 合并单元格 按钮 四 嵌套表格 嵌套表格是表格布局中一个十分重要的环节 它是指在一个表格的单元格中再插入一个表格 嵌套表格的宽度受所在单元格的宽度限制 其编辑方法与表格相同 若要在表格单元格中再插入表格 执行以下操作 1 单击现有表格中的一个单元格 2 选择 插入 菜单中的 表格 出现 表格 对话框 3 设置表格对话框的各参数后 单击 确定 五 设置表格属性 当选取了整个表格后属性面板会显示表格的属性 表格 属性面板中显示了插入表格的所有特性 通过修改面板中的参数可快速地编辑表格外观 在表格名框中输入表格名字 在行和列框中指定表格行数和列数 在宽和高框中 指定表格宽度和高度 可以以像素数表示 也可以用占浏览器窗口的百分比表示 通常情况下不必设定表格高度 表格属性面板 六 设置列 行和单元格属性 在编辑网页时除可以设置整个表格的属性外 还可以单独设置表格中某行 列或单元格的属性 1 在表格中选取单元格 2 打开属性面板 点击面板右下角的箭头扩展按钮来查看全部的属性 五 设置表格属性 3 从下列选项中选择 使用水平下拉列表来对单元格 列或行的内容设置水平对齐方式 使用垂直下拉列表来对单元格 列或行的内容设置垂直对齐方式 在宽和高框中以像素为单位指定选取单元格的宽度和高度 如果要使用百分比表示 设定值后边要跟上百分比符号 五 设置表格属性 要设置单元格 列 行的背景图像 使用背景框或背景颜色框 使用边框框设置单元格的边框颜色 4 从下列布局选项中选择 选取 不换行 可以防止文字换行 六 表格中插入对象 选择相应的单位格和在网页上插入操作一致 1 插入文字2 插入图像3 超链接 3 2层的应用 层是一种网页元素定位技术 使用层可以精确定位页面元素 层对于制作网页的部分重叠具有特殊作用 层可以放置在页面的任意位置 可以在层中放置文本 图象或其它层 3 2层的应用 一 创建层1 创建普通层创建普通层可采用行以下操作中的一种 画一个层 打开 插入 栏的 布局 类别 点击画层按钮 在文档窗口中画出层 插入一个层 将插入点定位在想在插入层的地方然后选择插入 层 推荐使用 画一个层 插入一个层 一 创建层 2 创建嵌套层 子层 嵌套层是其代码包含在另一个层中的层 嵌套通常用于将层组织在一起 子层相对于父层定位 并随其父层一起移动 创建嵌套层可采用行以下操作中的一种 画嵌套层 点击插入工具栏布局类别中的描绘层按钮 在现有层中拖动绘制嵌套层 插入嵌套层 将光标移动到层内时 选择菜单 插入 层 二 设置层的属性 二 设置层的属性 层编号 给层指定一个名称以便在层面板和代码中识别它 只能用标准数字文字符号定义名称 不要用特殊字符 比如 空格 连字号 斜线 或者句号 每个层必须拥有一个区别于其他层的名称 二 设置层的属性 左和上 指定层相对于页面或者其父层 假如是被嵌入的 顶部和左上角的位置 为了确保在1024 768与800 600分辨率下均能位置适当 对父层应采用相对定位 即将左和上里的参数删除 宽和高 指定层的宽度和高度 Z 轴 叠加顺序 数值高的层将显示在数值低的上面 数值可以是正的也可以是负的 二 设置层的属性 可见性 指定层显示的初始情况 即显示与否 Default 缺省 不指定可视性属性 但大多数浏览器解释为继承 从以下选项中选择 Inherit 继承 就是继承该层父层的可视性属性 Visible 可视 显示层的内容 不管其父层的值 Hidden 隐藏 不显示层的内容 不管其父层的值 二 设置层的属性 背景图象 为层指定背景图像 背景颜色 为层指定背景颜色 将这个选项空着即为指定透明背景 类 指定所用的HTML标签或CSS样式 二 设置层的属性 溢出 指定当层内的内容超出了层的设置大小 层将如何反应 从以下选项中选择 Visible 可视 当层内的内容超出了层的大小则增大层的尺寸 层的扩展方向为下方和右方Hidden 隐藏 保持层的大小并裁掉容纳不下的东西 并且不会出现滚动Scroll 卷轴 无论层内的内容是否超出了层的大小都为层添加滚动条 Auto 自动 只有当层内的内容超出了它的边界才出现滚动条 3 2 3使用表格规划页面布局 打开版面设计视图规划页面布局 打开版面设计视图 查看 表格模式 布局模式 命令 单击插入面板布局下的布局模式按钮 进入版面设计视图 规划页面布局 1 通过单元格规划页面布局 调整单元格大小 规划页面布局 2 通过表格规划页面布局 规划页面布局 规划页面布局 3 4建立框架网页 一 框架和框架集1 框架框架是常见的页面设计方式 使用框架可以将一个网页分割成几个既有联系又各自独立的部分 从而实现在一个浏览器中显示多个HTML文档 框架是将一个页面划分成不同的文档区 每个文档区显示独立的内容 其效果是在浏览网页时 网页中一部分区域 如公司Logo 导航条 内容不改变 而其他区域内容在不断发生改变 一 框架和框架集 2 框架集框架集是HTML文件 它定义一组框架的布局和属性 包括框架的数目 大小 位置以及在框架中初始显示页面的地址 框架集文件本身不包含要在浏览器中显示的网页内容 对不能显示框架的浏览器进行的处理除外 即部分 框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些网页的有关信息 一 框架和框架集 3 使用框架的优点 1 可以使网页的界面变得更加漂亮 2 使网页的结构更加清晰 一 框架和框架集 4 使用框架的缺点 1 不是所有的浏览器都支持框架 IE5 0 浏览时 不支持框架的浏览器把所有的网页中的内容在浏览器窗口中重叠显示 使页面变得一塌糊涂 2 框架实际上是把几个HTML文件在同一个页面内显示 因此 在下载网页时 框架结构的网页会比普通网页要多下载几个文件 速度当然要慢很多 另外 一个网页分成几个部分 每个部分可用的空间变得十分小了 二 创建框架 1 创建新的空框架集1 选择 文件 新建 2 在 新建文档 对话框中 选择 框架集 类别 3 从 框架集 列表选择框架集 4 单击 创建 二 创建框架 二 创建框架 2 要将一个框架拆分成几个更小的框架1 将插入点置于要拆分的框架 2 从 修改 框架集 子菜单选择拆分项 二 创建框架 3 删除框架将框架边框拖离页面或将其拖至父框架的边框即可 二 创建框架 4 保存所有框架1 选择 文件 保存所有框架 该命令将保存在框架集中打开的所有文档 包括框架集文件和所有带框架的文档 2 如果该框架集文件未保存过 则框架集的周围将出现粗边框 并且出现一个对话框 在对话框中输入文件名后 点击 保存 二 创建框架 3 对于尚未保存的每个框架 在框架的周围都将显示粗边框 在对话框中输入文件名后 点击 保存 注 如不显示框架边框 可选择查看 可视化助理 框架边框 三 选取框架和框架集 框架和框架集是一些独立的HTML文档 要对框架或框架集进行修改 应该选取进行更改的框架和框架集 1 在框架面板进行选取1 显示框架面板 选择窗口 框架 2 在框架面板上选取框架 点击框架面板上的框架 选取框架集 点击框架面板上围住框架的边框 三 选取框架和框架集 框架面板 三 选取框架和框架集 2 在文档窗口中选取 选择框架 按住Alt键点击框架内部 选择框架集 在文档窗口中点击框架边框 四 设置框架与框架集属性 1 设置框架属性1 选取框架2 打开属性面板 框架名 为当前框架命名 为了便于确定超链接应给框架命名 源文件 确定框架的源文档 可以直接输入名字 也可以点击文件夹图标查找并选取文件 四 设置框架与框架集属性 框架属性 滚动条 确定当框架内的内容显示不下的时候是否出现滚动条 不能调整大小 限定框架尺寸 防止用户拖动框架边框 边框 用来控制当前框架边框 选项有是 否 和默认 四 设置框架与框架集属性 边框颜色 设置与当前框架相邻的所有框架的边框颜色 边界宽度 设置以像素为单位的框架边框和内容之间左右边距 边界高度 设置以像素为单位的框架边框和内容之间上下边距 四 设置框架与框架集属性 注 框架名确定用于超链接和脚本索引的当前框架的名字 框架名字必须是一个单独的词 允许下划线 但是不允许连字符 句点 和空格 框架的名字开头必须是字母 不可以是数字 不要使用JavaScript的保留词汇 如top或navigator 来给框架命名 四 设置框架与框架集属性 2 设置框架集属性1 选取框架集 2 在边框下拉列表中选择当在浏览器中查看时是否显示框架边框 3 在边框宽度中 输入一个数字来指定当前框架集的边框宽度 4 在边框颜色中 输入一个颜色的十六进制值或者使用颜色选择器来为边框选择颜色 5 要选取框架大小选项 点击行列选定范围选取行或列 然后在值域中 输入一个数字来设置所选行或列的尺寸 框架集属性 五 框架集中的超链接 要在框架内使用链接 必须为链接设置一个目标 这个目标是指在哪个框架内链接要打开的内容 例如 当导航栏位于左边的框架内 而想要链接的内容显示在右边框架中时 必须为所有的菜单链接指定目标 这个目标应该是右框架的名称 这样当用户点击一个导航链接时 该链接的内容就会显示在该框架中 五 框架集中的超链接 为框架指定目标 1 选取文本或对象 2 在属性面板的链接框中执行下列操作之一 输入链接文件的名字 点击文件夹图标查找选取链接文件 点击并拖拽 指向文件 图标来选取链接文件 要在链接文件中指定锚点 在锚点名字前加上一个数字符号 例如 artical htm 1 链接至网页artical htm中的锚点 1 属性面板 五 框架集中