Download presentation
Presentation is loading. Please wait.
1
Web 开发基础 第二章 表格与页面布局
2
回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记，图片标记，超级链接标记 相对路径，绝对路径，物理路径
3
本章目标 网页设计注意事项 什么是表格？ 为什么需要表格？ 如何创建表格？ 表格如何使用？
4
网页设计注意事项 多浏览器支持 样式与风格统一 网站结构、文件命名 页面尺寸与屏幕分辨率 图片文件命名、大小尺寸限制 相对路径的应用 页面内容（ title 、 meta 、 alt 、 tbody 等属性的应用）
5
什么是表格？ 表格是 html 高级构件之一，它表示数据之间的关系，使对 比分析更容易理解。表格由特定数目的行和列组成 球员得分篮板 姚明 278 麦克格雷迪 312 海耶斯 815 巴蒂尔 75 阿尔斯通 23
6
表格应用示例
7
什么是表格？ 表格的作用： 用于显示数据，便于理解、分析 组织网页版面信息
8
什么是表格？ 行 列 列标题 在 HTML 文档中，广泛使用表格来存放网页上的文本和图像 单元格 表格标题
9
如何创建表格 ? 表格用 表示 一个表格可以有很多行，用 表示 每行可以分为多个单元格，用 表示 演示： 一行一列 一行三列 两行三列
10
标签及其属性 border 属性 表格边框 演示：不显示边框的表格 演示：显示边框的表格 align 表格对齐 演示：居左，居中，居右对齐 排版：新浪 表格背景 bgcolor background 颜色表示的 3 种方法 注： align 、 bgcolor 属性不赞成使用，应使用 css 控制
11
标签及其属性 表格宽度 width 高度 height 单位设置 像素 (px) 百分比 ( %) 演示 设置宽度，高度 避免出现水平滚动条 一般不设置高度 ( 自适应 ) cellspacing ， cellpadding 属性 cellspacing 设置单元格间距 cellpadding 设置单元格边沿和其内容之间的距离
12
table 的常用属性
13
标签及其属性 align 属性 属性值： “left” 、 “center” 、 “right” 注意区别 的 align 属性 valign 属性 属性值： “top” 、 “middle” 、 “bottom” bgcolor 属性 背景颜色设置 考虑设置优先级的问题
14
标签及其属性 align 属性 属性值： ”left” “center” “right” 注意区别 的 align 属性 valign 属性 属性值： ”top” “middle” “bottom” bgcolor 属性 background 属性 bgcolor 背景颜色设置 background 背景图片设置 考虑设置优先级的问题
15
标签及其属性 width 属性 height 属性 注意：同行或者同列单元格将受影响 rowspan 属性 colspan 属性 rowspan 属性 将一个表格单元格扩展为几行。 colspan 属性 将一个表格单元格扩展为几列 演示 项目实战 利用 rowspan 和 colspan 属性合并单元格
16
其它表格标签 标签 作用：用来说明表格内容的标题 属性： align ， valign 标签 作用：同 标签 不同点 : 用粗体样式标记的文本表头，对齐方式也不一样 标签
17
用表格进行页面排版 表格进行页面排版 简单，便捷 结构清晰 表格嵌套使用 演示
18
表格排版注意事项： 表格嵌套层次不要太多 整个页面的排版不要用一个 table ，影响浏览器对页面的显 示效率 表格的行列排版要整齐 td 中没有内容时，以空白（ ）填充 Div+CSS 布局（了解）
19
总结 表格可以格式化数据、管理文件布局 表格的基本结构 标签 及其基本属性 合并单元格 其它表格标签
20
课后练习作业 2-1 创建一个如下样式的表格 要求： 1. 表格宽度 760px ，边框宽度为 1px ，表格水平居中 2. 单元格之间没有间距，内容与单元格边框之间距离为 2 3. 在单元格 1 和 2 分别插入图片 a1.gif 和 a2.jpg, 并且图片内容垂直居中 4. 其他文字依照下表输入 5. 要求按照完整的网页规范编码 单元格 1 单元格 2 设为首页 联系站长 加入收藏 首页 | 基础知识 | 高级编程
21
课后练习作业 2-2 根据提供的图片实现以下界面效果（界面宽度 760px ）
Similar presentations
