表格与布局——网页设计第五讲概要.ppt

网站开发基础 ——表格与布局 学习目标 理解页面版式设计的基本原则。 掌握构造表格和设置表格属性的方法。 熟练掌握应用表格设计网页布局的方法。 掌握使用CSS设计网页布局的方法。 了解使用框架设计网页布局的方法。 Part 1 页面版式基础 什么是页面版式 设计页面版式就是指采用一种合适的技术将网页的内容显示在浏览器中。 在网页中可以使用多种方式进行版式设计，以形成一个统一的站点风格并获得需要的效果。 版式在网页界面中的作用 网页界面的版式设计，是指将文字、图形图像、色彩、动画、视频多媒体等网页对象的传达要素，根据特定内容和主题，在网页限定范围内将设计意图以视觉形式表现出来。 版式在网页界面中的作用 从网页技术角度讲，设计者通常是围绕着页面中的导航栏、图像、动画、正文等内容展开页面布局的。 在页面制作过程中要确定一个页面的布局，应该综合考虑如何安置页面中的各种内容，比如标题文字、导航栏、图片、动画、超链接等。 版式在网页界面中的作用 从审美角度出发，要求设计师运用统一、对比、对称、均衡等形式原理进行设计，利用网页中的元素构造出和谐、流畅、自然的网页界面。 版式的实用功能 主次分明、重点突出 应能让浏览者迅速找到网页的主题，并对整个页面有全面的掌握 导航清晰、便于浏览 网页应该具有一致风格的导航系统，为用户浏览提供方便 布局合理、逻辑性强 应能使网页中的各种视觉信息在页面中合理、有序地排列，既要体现出设计思想，又要符合一般的视觉原理和思维习惯 版式的审美功能 统一，是指设计作品的整体性、一致性。 分割，是指将页面划分为不同区域，以便妥善安排各种页面组成元素。 对比，是指通过合理运用矛盾和冲突，使设计更加富有生机和活力。 演示——页面版式示例 Page77,78,93 Part 2 制作表格 表格的组成 表格标记符table 表格标题 caption 表格行 tr （table row） 表格数据 td （table data） 表格表头 th （table heading） 演示——表格示例 表格的构造 在 TH 或 TD 标记符中使用 rowspan 属性进行行合并 在 TH 或 TD 标记符中使用 colspan 属性进行列合并 演示——表格的行列合并 边框与分隔线 Frame属性 Rules属性 Border属性 演示——边框与分隔线 表格对齐 表格的页面对齐table align 表格内容的对齐 水平对齐(align) 垂直对齐(valign) 演示——表格的对齐 表格对齐 内容的水平对齐 内容的垂直对齐 控制单元格空白 Cellspacing属性 Cellpadding属性 演示——控制单元格空白 Part 3 使用表格和CSS设计布局 使用表格排版 页面布局 划分页面区域 背景色的设置 嵌套表格 演示——划分页面区域 强调：如果要将某网页元素（例如一幅图像）放到特定位置，首先应想到使用表格！ 演示——表格背景的设置 Bgcolor设置背景色 Background设置背景图像 演示——使用嵌套表格 复杂的网页布局可能需要借助嵌套表格。 但是，嵌套表格一般不推荐使用，因为它会导致页面的混乱，尤其会导致可用性问题。 使用表格布局的要点 只使用最基本的表格标记符（table, tr, td）。 保持简单和轻量级（尽量不使用嵌套表格）。 使用样式表进行格式设置。 保持布局表格简单明了的要点是只使用表格建立基本的框架，而用样式表进行所有的格式设置。 例如… 使用CSS布局 div class=“masthead” Masthead and headline /div div class=“main” Main article /div div class=“sidebar” List of links /div div class=“footer” copyright information /div 使用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} Part 5 使用框架设计版式 什么是框架 在同一个浏览器窗口中同时显示多个网页的交互式结构。 通过为超链接指定目标框架，可以为框架之间建立起内容的联系，从而实现页面导航的功能。 演示——框架示例 框架结构