《网页设计实用教程》第05章.ppt

21世纪计算机系列教程 第5章 表格应用 学习目的： 　网页设计的概念 　标准视图与布局视图 　标准视图下表格的应用技巧 　布局视图下表格的应用技巧 本章概述： 本章将以一个网校主页的设计为例，来说明表格在网页设计排版时所起的重要作用。 通过本章学习，读者可利用表格在排版时按自己意愿来对网页素材进行有机组织，从而设计出具有专业水准的网页。 在此基础上，可进一步了解标准视图模式与布局视图模式的基本概念及 表格在两种模式下的基本应用知识。 5.1 用表格实现一个系部主页的设计 表格，以其边框的值是否为0，可分为有形表格和无形表格。 有形表格：如果表格边框值为非0，则绘制的表格在预览时能被看见， 可以在有形的表格中填写数据，可以对数据进行升序或降序的排列，可以对表格进行各种格式的套用，使其变得更加美观，这些功能通常是表格最基本的功能。 无形表格：如果表格边框值为0，则表格在预览时不可见， 在网页设计时，常利用表格的这一重要属性来对网页进行排版。本章将以一个网校主页的设计为例，来说明表格在网页设计排版时所起的重要作用。 网校主页如图5-1所示。 间距(单元格)：单元格与单元格的距离，单元格背景色不包括覆盖间距 边距(单元格)：单元格内容与单元格边界（四周）的距离。 5.1.1 网页结构分析 在本例中设计的系部主页是一种在互联网上较为常见的网页设计方式，其框架应用如图5-2所示，整个版面可以分为装饰区、标题区、导航栏区、信息区、版权区共5个区域。 5.1.2 设计页眉区 在设计之前，先来看看页眉区完成后的效果图，如图5-3所示。 5.1.2 设计页眉区 5.1.3 设计导航栏区 导航栏区完成后效果图如图5-8所示。其制作方法比较简单。 5.1.3 设计导航栏区 。 5.1.4 设计信息区 信息区，一分为三，是网页设计常见方式。一般在两边可放置一些常见信息如天气预报、用户登录信息、友好链接、有哪些信誉好的足球投注网站引擎、动态新闻等。中间是网站主要栏目区。在各信息区，为排版需要，用到了表格的嵌套。 1. 设计左信息区 5.1.4 设计信息区 2. 设计主信息区 两次插入如上表格 5.1.4 设计信息区 3. 设计右信息区 5.1.5 设计版权区  版权区的设置效果如图5-21所示。 预览效果 5.2　知识要点 在上一节里，学习了一个系部主页设计的详细过程， 应用到了表格的基本功能。 表格应用基本有两种，一种边框线为0，一种边框线不为0， 前者主要起排版作用，后者获得的是一个实实在在的表格，如上一例中“关注高考”栏目中的例子。 其实，在Dreamweaver MX中文版中，使用表格实现排版的功能远不限于上述知识， 在利用表格实现排版方面，Dreamweaver MX中文版独家引入了“布局视图”的概念， 使用“布局视图”，使排版变得更加方便自由。 接下来将对表格在网页设计中应用的这些知识要点作一简要介绍。 5.2.1 标准视图中的表格与布局视图中的表格 在Dreamweaver MX中文版的“插入”面板中，可以在“常规”、“布局”和“表格”三个选项卡中都有表格工具。 1. 常规选项卡 2. 表格选项卡 3. 布局选项卡 5.2.2 标准视图模式下表格的应用技巧 操作方法： 方法一：菜单：修改?表格? 方法二：右击?表格? 1. 选定表格的操作 选定整个表格 选定表格的行与列 选定一个单元格 选定不相邻的行、列或单元格 2. 表格的缩放操作 用鼠标拖放实现 用表格属性面板实现 3. 编辑表格 增加行列 删除行列 合并单元格 拆分单元格 5.2.2 标准视图模式下表格的应用技巧 4. 格式化表格 菜单：命令?格式化表格 第五章格式化表格-课程表（制作） 5.2.3 布局视图模式下表格的应用技巧 5.2.3 布局视图模式下表格的应用技巧 5.2.3 布局视图模式下表格的应用技巧 5.2.3 布局视图模式下表格的应用技巧 5.2.3 布局视图模式下表格的应用技巧 练习：在布局视图中做出如图所示的表格 5.3本章小结 本章围绕设计一个专业性质的系部主页实例，详细介绍了表格在网页排版中的作用， 并在此基础上，对表格在“标准视图”与“布局视图”两种模式下的应用技巧，作了重点介绍， 通过这些知识的学习，可以借助表格的这些功能，设计出具有专业水准的网页了。 补充-立体表格 插入4行1列表格，宽度可为百分比“10”，边框为“3”，边距为“0”，间距为“0” 在代码窗口中设置单元格颜色 Bordercolorlight—左上边界颜色 “#FFFFFF“ 白 bordercolordark —右下边界颜