chapter表格框架层.pptVIP

网页设计与制作 ——网页元素的定位 表格、框架、层 学习目标 理解页面版式设计的基本原则。 理解和掌握如何在网页中利用表格、布局、层和框架来规划和设计页面。 掌握构造表格和设置表格属性的方法。熟练掌握应用表格设计网页布局的方法。 了解和掌握使用框架设计网页布局的方法。 了解和掌握使用层设计网页布局的方法。 什么是页面版式 设计页面版式就是指采用一种合适的技术将网页的内容显示在浏览器中。 在网页中可以使用多种方式进行版式设计，以形成一个统一的站点风格并获得需要的效果。 版式在网页界面中的作用 网页界面的版式设计，是指将文字、图形图像、色彩、动画、视频多媒体等网页对象的传达要素，根据特定内容和主题，在网页限定范围内将设计意图以视觉形式表现出来。 版式在网页界面中的作用 从网页技术角度讲，设计者通常是围绕着页面中的导航栏、图像、动画、正文等内容展开页面布局的。 在页面制作过程中要确定一个页面的布局，应该综合考虑如何安置页面中的各种内容，比如标题文字、导航栏、图片、动画、超链接等。 版式的实用功能 主次分明、重点突出 应能让浏览者迅速找到网页的主题，并对整个页面有全面的掌握。 导航清晰、便于浏览 网页应该具有一致风格的导航系统，为用户浏览提供方便 布局合理、逻辑性强 应能使网页中的各种视觉信息在页面中合理、有序地排列，既要体现出设计思想，又要符合一般的视觉原理和思维习惯 。 版式的审美功能 统一，是指设计作品的整体性、一致性。 分割，是指将页面划分为不同区域，以便妥善安排各种页面组成元素。 对比，是指通过合理运用矛盾和冲突，使设计更加富有生机和活力。 版式布局的样式 “同”字型结构布局 “T”字型结构布局 标题正文型 左右框架型 上下框架型 综合框架型 封面型 Flash型 变化型 布局的过程 1.设定页面尺寸 分辨率800x600像素，页面显示尺寸为780x428像素； 分辨率1024x768像素，页面显示尺寸为1007x600像素。 2.放置功能模块 3.布局细化与调整 表格的组成 表格标记符 table 表格标题 caption 表格行 tr （table row） 表格数据 td （table data） 表格表头 th （table heading） 注：td和th的结束标记符都可以省略，并且可以不包含任何内容。 表格的构造 在 TH 或 TD 标记符中使用 rowspan 属性进行行合并 在 TH 或 TD 标记符中使用 colspan 属性进行列合并 构造表格的步骤 1.使用table标记符包括所有表格内容，如果需要标题，则在table后使用caption标记符。 2.从第一行开始，使用tr标记符分隔每一行。表格有多少行，就应该有多少个tr标记符。 3.在每一行内，一次用th或td标记符标记每个单元格的内容。如果碰到跨行的单元格，则用rowspan属性进行标记；如果碰到跨列的单元格，则用colspan属性进行标记。 4.按照步骤3顺序一行一行处理，直到表格结束。如遇空单元格，只需使用空的th或td标记符即可。 表格与布局表格的基本操作 插入表格 1.表格大小 边框粗细、单元格边距、单元格间距的设置 2.页眉与辅助功能 表格与布局表格的基本操作 选择表格对象 1.选择表格 2.选择单个单元格 3.选择整行或整列 4.选择相邻的多个单元格 5.选择不相邻的单元格 表格与布局表格的基本操作 表格的属性 1.表格名称（表格Id） 2.行和列 3.宽和高 4.边框 5.填充和间距 6.对齐：左对齐、右对齐、居中对齐 7.背景颜色和图像 表格与布局表格的基本操作 调整表格结构 1.插入单行或单列 2.插入多行或多列 3.删除行或列 4.单元格的拆分与合并 表格与布局表格的基本操作 设置单元格属性 1.设置单元格宽度与高度 2.对齐设置 3.将单元格转换为表头 表头是特殊的单元格，它和单元格的区别在于其中的文字自动变成粗体，而且位于单元格中央。 表格与布局表格的基本操作 嵌套表格 利用多个嵌套的表格，外部的大表格负责整体的布局，内部的小表格负责各个板块的排版。 表格与布局表格的基本操作 导入表格化数据 文件?导入?表格式数据 从Excel文件中导入数据，可先把Excel工作表文件保存为.txt文件。 套用现成格式 命令?格式化表格 表格与布局表格的基本操作 水平细线 有时我们需要在网页上加入一条细线，可以使用更加通用的表格来实现它。 1.插入表格 2.创建间隔图像 间隔图像实际就是一张透明的GIF格式的图片。 编辑?首选参数?布局模式?站点的间隔图像?创建 该图像的文件