网页设计三剑客基础练习典型案例第3章.ppt

1 第3章创建与应用表格 表格是Dreamweaver中最常用的表格布局工具 不但可以精确定位网页在浏览器中的显示位置 还可以控制网页元素在网页中的精确布局 为了简化用表格进行布局的过程 Dreamweaver提供了 布局 模式 在这种模式下 可以很轻松地使用表格作为基本结构进行页面布局 同时可以避免传统方式下使用表格进行布局的缺陷 2 本章学习目标 创建表格的方法在布局视图中创建表格设置表格属性在表格中插入网页元素在表格中嵌套表格 3 3 1创建表格 在日常生活中 我们接触到的表格 多数是用来组织数据 方便查询和浏览的 比如成绩数据 生产数量数据等等 而在制作网页时 表格除了具有显示数据的功能外 还有更为重要的作用 就是布局页面 4 3 1 1插入表格 在Dreamweaver中插入表格的方法常用的有两种 一种方法是选择 插入 表格 菜单命令 另一种方法是单击 常用 选项卡中 表格 按钮 无论采用哪种方法 都会打开 表格 对话框 在对话框中可以设置插入表格的具体行数 列数和表格宽度等属性 5 3 1 2表格源代码分析 表格的显示方法有两种 一种是设计视图显示 很直观 另一种是源代码视图显示 也是HTML语言 HTML语言是在文本文件中加入一系列标记 tag 和指令 directive 形成的 这些标记和指令指明了Web页面的各种元素的显示方式 使用HTML编写的网页文件也是标准的纯文本文件 文件扩展名为 htm或者 html 两者结合 事半功倍 6 3 1 3在布局视图创建表格和单元格 在前面 我们介绍了使用表格布局页面和定位元素的方法 对于初学者来说 还没有表格的设计经验 要想使用表格设计出布局合理的页面 往往会适得其反 为了简化利用表格布局页面 Dreamweaver提供了一种新的 布局 模式 3 2设定表格属性 在Dreamweaver中 可以非常灵活地设置表格的属性 如设置表格的背景颜色 为表格添加背景图像 设置表格边框的颜色与粗细 甚至可以为表格中的某一行 某一列或者某一单元格设置不同的属性 7 8 3 2 1选择表格元素 将光标置于表格内任意位置 在菜单中选择 修改 表格 选择表格 命令 将光标置于表格内任意位置 右击鼠标 在弹出的菜单中选择 表格 选择表格 命令 将光放置在表格边框上方 当边框变为红线时 按下鼠标 即可选择整个表格 这种方法较为方便 但小心无意之中改变了表格的高度和宽度的设置 将光标置于任意单元格 然后单击标签选择器上的标签即可 3 2 2表格整体属性设置 编辑表格时 首先要选中该表格 然后选择 窗口 属性 命令 打开 属性检查器 面板 如果要想看到该表格的所有属性 可以单击其右下角的扩展按钮 你才能更改表格属性 3 2 3设定行列和单元格属性 虽然行或者列包括了单元格 但是它们在 属性检查器 中的设置项目完全一样 差别只是应用属性的范围不同而已 所以我们将行 列和单元格的属性放在一起介绍 选择行 列或者单元格后 属性检查器 10 3 3插入表格元素 网页是由图像 动画和文本等元素组成的 而这些元素都是插入在表格当中的 这样网页才有整体效果 不会是一盘散沙 文本元素在插入表格后还附带自身的属性 而图像可以以不同方式 不同格式插入表格 11 3 3 1在表格中输入文本 在第2章中已经详细讲过了文本属性 这里介绍一下文本在表格中的输入和设置 想要更精确文本的各个属性和毫无遗漏的查找与替换 就要提到HTML语言了 12 3 3 2在表格中插入图像 一个页面中插入合适图像比单纯使用文字更具有说服力和吸引力 如果在页面的适当位置上放置一些图像 这些图像作为文本的说明及解释 会让页面更加清晰易读 而且使得文档更加具有吸引力 而这个适当位置就必须依靠表格来实现 13 3 4嵌套表格 在制作网页时 你可能会遇到表格错位问题 你会发现纵使已经有足够的单元格来输入文本或者插入图像 Flash动画 制作导航条等等 还是不理想 这时就会运用到嵌套表格 因为嵌套表格即不影响所在单元格宽度和高度 还可以独立编辑和添加内容 14 3 4 1表格中表格的嵌套 网页的排版有时会很复杂 在外部需要有一个表格控制总体布局 如果这是一些内部排版的细节也通过总表格来实现 容易引起行高列宽等的冲突 给表格制作带来困难 浏览器在解析网页的时候 是将整个表格的结构下载完毕之后才显示表格 如果不使用嵌套 表格非常复杂 浏览者要等待很长时间才能看到网页的内容 15