[工学]5表格与布局.ppt

网站开发基础 表格与布局 1 学习目标 理解页面版式设计的基本原则。 掌握构造表格和设置表格属性的方 法。 熟练掌握应用表格设计网页布局的 方法。 掌握使用CSS设计网页布局的方法。 了解使用框架设计网页布局的方法 。 2 Part 1 页面版式基础 3 什么是页面版式 设计页面版式就是指采用一种合 适的技术将网页的内容显示在浏 览器中。 在网页中可以使用多种方式进行 版式设计，以形成一个统一的站 点风格并获得需要的效果。 4 版式在网页界面中的作用 网页界面的版式设计，是指将文 字、图形图像、色彩、动画、视 频多媒体等网页对象的传达要素 ，根据特定内容和主题，在网页 限定范围内将设计意图以视觉形 式表现出来。 5 版式在网页界面中的作用 从网页技术角度讲，设计者通常是 围绕着页面中的导航栏、图像、动 画、正文等内容展开页面布局的。 在页面制作过程中要确定一个页面 的布局，应该综合考虑如何安置页 面中的各种内容，比如标题文字、 导航栏、图片、动画、超链接等。 6 版式在网页界面中的作用 从审美角度出发，要求设计师运 用统一、对比、对称、均衡等形 式原理进行设计，利用网页中的 元素构造出和谐、流畅、自然的 网页界面。 7 版式的实用功能 主次分明、重点突出 应能让浏览者迅速找到网页的主题， 并对整个页面有全面的掌握 导航清晰、便于浏览 网页应该具有一致风格的导航系统， 为用户浏览提供方便 布局合理、逻辑性强 应能使网页中的各种视觉信息在页面 中合理、有序地排列，既要体现出设 计思想，又要符合一般的视觉原理和 思维习惯 8 版式的审美功能 统一，是指设计作品的整体性、一 致性。 分割，是指将页面划分为不同区域 ，以便妥善安排各种页面组成元素 。 对比，是指通过合理运用矛盾和冲 突，使设计更加富有生机和活力。 9 演示页面版式示例 Page77,78,93 10 Part 2 制作表格 11 表格的组成 表格标记符table 表格标题 caption 表格行 tr （table row） 表格数据 td （table data） 表格表头 th （table heading） 12 演示表格示例 13 表格的构造 在 TH 或 TD 标记符中使用 rowspan 属性进行行合并 在 TH 或 TD 标记符中使用 colspan 属性进行列合并 14 演示表格的行列合并 15 边框与分隔线 Frame属性 Rules属性 Border属性 16 演示边框与分隔线 17 表格对齐 表格的页面对齐 表格内容的对齐 水平对齐(align) 垂直对齐(valign) 18 演示表格的对齐 表格对齐 内容的水平对齐 内容的垂直对齐 19 控制单元格空白 Cellspacing属性 Cellpadding属性 20 演示控制单元格空白 21 Part 3 使用表格和CSS设计布局 22 使用表格排版 页面布局 划分页面区域 背景色的设置 嵌套表格 23 演示划分页面区域 强调：如果要将某网页元素（例 如一幅图像）放到特定位置，首 先应想到使用表格！ 24 演示表格背景的设置 Bgcolor设置背景色 Background设置背景图像 25 演示使用嵌套表格 复杂的网页布局可能需要借助嵌 套表格。 但是，嵌套表格一般不推荐使用 ，因为它会导致页面的混乱，尤 其会导致可用性问题。 26 使用表格布局的要点 只使用最基本的表格标记符（table, tr, td）。 保持简单和轻量级（尽量不使用嵌 套表格）。 使用样式表进行格式设置。 保持布局表格简单明了的要点是只使 用表格建立基本的框架，而用样式表 进行所有的格式设置。 例如 27 使用CSS布局 Masthead and headline Main article List of links copyright information 28 使用CSS布局 .masthead background: #CCC; padding: 15px; .main float: left; width: 70%; margin-right:3%; margin-left:3%; .footer clear: left; /*starts the footer below the floated content */ padding: 15px; background:#666 29 Part 5 使用框架设计版式 30 什么是框架 在同一个浏览器窗口中同时显 示多个网页的交互式结构。 通过为超链接指定目标框架，可 以为框架之间建立起内容的联系 ，从而实现页面导航的功能。 31 演示框架示例 32 框架结构 框架集 定义框架的结构 框架 具体定义每个页面 33 框架结构 框架集的定义 Rows 定义行结构框架 Cols 定义列结构框架 Rows 和 cols 的取值： 像素数 % N* 34 演示定义框架结构 行结构 列结构1 列结构2 嵌套框架 35 框架的初始化 在 frame 标记符中使用 src 属性 可以指定框架中最初显示的页面 。 36 演示指定框架页面 37 超链接的目标框架 所谓目标框架，是指单击框架 网页中的超链接时，对应的目标 文件显示在哪个框架中。 38 设置目标框架 使用指定框架 名称 特殊的框架名称 _blank 表示打开新的窗口 _top 表示返回顶层窗口 在超链接标记符 A 中指定 target 属 性，取值为具体的框架名称。 39 演示指定目标框架 40 控制框架的显示效果 设 置框架边框。 设置框 架滚动条。 设置框架内容 与框架边框之间的空白。 41 演示控制框架显示效果 42 使用页内框架 用 iframe 标记符可以设置页内 框架 不支持框架时显 示的内容 也可以指定页内框架为目标框 架 43 演示页内框架演示 44 Part 6