5表格与布局.ppt

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