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

21世纪计算机系列教程,网页设计实用教程 电子教案,退出,第5章 表格应用,网页设计的概念 标准视图与布局视图 标准视图下表格的应用技巧 布局视图下表格的应用技巧,学习目的：,本章概述：,本章将以一个网校主页的设计为例，来说明表格在网页设计排版时所起的重要作用。 通过本章学习，读者可利用表格在排版时按自己意愿来对网页素材进行有机组织，从而设计出具有专业水准的网页。 在此基础上，可进一步了解标准视图模式与布局视图模式的基本概念及 表格在两种模式下的基本应用知识。,表格，以其边框的值是否为0，可分为有形表格和无形表格。 有形表格：如果表格边框值为非0，则绘制的表格在预览时能被看见， 可以在有形的表格中填写数据，可以对数据进行升序或降序的排列，可以对表格进行各种格式的套用，使其变得更加美观，这些功能通常是表格最基本的功能。 无形表格：如果表格边框值为0，则表格在预览时不可见， 在网页设计时，常利用表格的这一重要属性来对网页进行排版。本章将以一个网校主页的设计为例，来说明表格在网页设计排版时所起的重要作用。 网校主页如图5-1所示。,5.1 用表格实现一个系部主页的设计,间距(单元格)：单元格与单元格的距离，单元格背景色不包括覆盖间距 边距(单元格)：单元格内容与单元格边界（四周）的距离。,在本例中设计的系部主页是一种在互联网上较为常见的网页设计方式，其框架应用如图5-2所示，整个版面可以分为装饰区、标题区、导航栏区、信息区、版权区共5个区域。,5.1.1 网页结构分析,5.1.2 设计页眉区,在设计之前，先来看看页眉区完成后的效果图，如图5-3所示。,5.1.2 设计页眉区,5.1.3 设计导航栏区,导航栏区完成后效果图如图5-8所示。其制作方法比较简单。,图5-8 导航栏区完成后效果图,5.1.3 设计导航栏区,。,主页 校友联络 班级留影 蒙公学堂 系部联系 免费资源 友情链接,信息区，一分为三，是网页设计常见方式。一般在两边可放置一些常见信息如天气预报、用户登录信息、友好链接、搜索引擎、动态新闻等。中间是网站主要栏目区。在各信息区，为排版需要，用到了表格的嵌套。 1. 设计左信息区,5.1.4 设计信息区,2. 设计主信息区 两次插入如上表格,5.1.4 设计信息区,3. 设计右信息区,5.1.4 设计信息区,版权区的设置效果如图5-21所示。,图5-21 设置完成版权栏后的效果,5.1.5 设计版权区,预览效果,5.2 知识要点,在上一节里，学习了一个系部主页设计的详细过程， 应用到了表格的基本功能。 表格应用基本有两种，一种边框线为0，一种边框线不为0， 前者主要起排版作用，后者获得的是一个实实在在的表格，如上一例中“关注高考”栏目中的例子。 其实，在Dreamweaver MX中文版中，使用表格实现排版的功能远不限于上述知识， 在利用表格实现排版方面，Dreamweaver MX中文版独家引入了“布局视图”的概念， 使用“布局视图”，使排版变得更加方便自由。 接下来将对表格在网页设计中应用的这些知识要点作一简要介绍。,在Dreamweaver MX中文版的“插入”面板中，可以在“常规”、“布局”和“表格”三个选项卡中都有表格工具。 1. 常规选项卡 2. 表格选项卡 3. 布局选项卡,图5-25 布局视图,图5-23 “表格”工具,图5-22 “常规”工具,5.2.1 标准视图中的表格与布局视图中的表格,5.2.2 标准视图模式下表格的应用技巧,操作方法： 方法一：菜单：修改表格 方法二：右击表格 1. 选定表格的操作 选定整个表格 选定表格的行与列 选定一个单元格 选定不相邻的行、列或单元格 2. 表格的缩放操作 用鼠标拖放实现 用表格属性面板实现 3. 编辑表格 增加行列 删除行列 合并单元格 拆分单元格,5.2.2 标准视图模式下表格的应用技巧,4. 格式化表格 菜单：命令格式化表格,第五章格式化表格-课程表（制作）,表格在布局视图中的应用技巧，主要包括 布局单元格与布局表格的绘制、移动、缩放大小、属性定义等几个方面。 1. 绘制布局单元格 布局视图布局单元格按钮,5.2.3 布局视图模式下表格的应用技巧,如果要绘制多个单元格，不必每次都点击布局单元格按钮，只需要在绘制过程中按住Ctrl键即可.,图5-38,2. 绘制布局表格 布局视图布局表格按钮,5.2.3 布局视图模式下表格的应用技巧,如果要绘制多个表格，不必每次都点击布局表格按钮，只需要在绘制过程中按住Ctrl键即可.,如果页面中没有包含内容，在布局视图下绘制第一个表格时，会被自动放置在页面的（左上方），否则，绘制的表格只能出现在内容的下方。,图5-39,3. 移动布局单元格 布局单元格可以在布局表格自由移动，是“布局视图”灵活性的最大体现 可以与标准视图对比，后者只能靠调整行高和列宽来实现 方法一：鼠标拖动法，详见教材P73 方法二：也可使用键盘上的箭头来操作，每次移动1个象素，如果同时按住Shift 键，每次可移动10个象素最外层的表格不可移动。 移动布局表格（不可移动）,5.2.3 布局视图模式下表格的应用技巧,图5-40,4. 调整布局单元格和布局表格大小 方法：鼠标拖动法，详见教材P74 注意：如果两个边框的间距小于8个象素时，表格会自动地附着到已经存在的表格或单元格旁边。,5.2.3 布局视图模式下表格的应用技巧,图5-41,图5-42,5. 布局单元格属性面板 很少用，可略 6. 布局表格属性面板 很少用，可略,5.2.3 布局视图模式下表格的应用技巧,图5-44,图5-45,练习：在布局视图中做出如图所示的表格,5.3本章小结,本章围绕设计一个专业性质的系部主页实例，详细介绍了表格在网页排版中的作用， 并在此基础上，对表格在“标准视图”与“布局视图”两种模式下的应用技巧，作了重点介绍， 通过这些知识的学习，可以借助表格的这些功能，设计出具有专业水准的网页了。,补充-立体表格,插入4行1列表格，宽度可为百分比“10”，边框为“3”，边距为“0”，间距为“0” 在代码窗口中设置单元格颜色 Bordercolorlight左上边界颜色 “#FFFFFF“ 白 bordercolordark 右下边界颜色 “#000000” 黑 如下： ,立体表格-代码,习题与操作题 习题 【选择题】 （1）如果两个边框的间距小于（ ）个象素时，表格会自动地附着到已经存在的表格或单元格旁边。 A、1 B、8 C、4 D、16 （2）拖动布局单元格和布局表格也可使用键盘上的箭头来操作，每次移动1个象素，如果同时按住Shift 键，每次可移动（ ）个象素；最外层的表格不可移动。 A、1 B、8 C、4 D、16 （3）如果要绘制多个表格，不必每次都点击布局表格按钮，只需要在绘制过程中按住（ ）键即可. A、【Shift】 B、【Ctrl】 C、【Alt】 D、【Ctrl+Alt】 （4） 如果页面中没有包含内容，在布局视图下绘制第一个表格时，会被自动放置在页面的（ ），否则，绘制的表格只能出现在内容的下方。 A、左上方 B、右上方 C、正中间 D、底部,【填空题】,（1）在表格属性面板中，当表格的边框线设置为（ ）时，表格线不可见。 （2）对象面板上的“绘制布局单元格” 按钮与“绘制布局表格”按钮，只有从（ ）视图切换到（ ）视图下，才可被激活使用。 （3）Dreamweaver 编辑窗口左下角的状态栏下的表示（ ），表示（ ），表示（ ）。 （4）如果要绘制多个单元格，不必每次都单击布局单元格按钮，只需要在绘制过程中按住（ ）