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

《《网页设计实用教程》第05章.ppt》由会员分享，可在线阅读，更多相关《《网页设计实用教程》第05章.ppt（43页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、21世纪计算机系列教程世纪计算机系列教程退出退出退出退出第第5章章表格应用表格应用v网页设计的概念网页设计的概念v标准视图与布局视图标准视图与布局视图v标准视图下表格的应用技巧标准视图下表格的应用技巧v布局视图下表格的应用技巧布局视图下表格的应用技巧 学习目的学习目的：本章概述：本章概述：v本本章章将将以以一一个个网网校校主主页页的的设设计计为为例例，来来说说明表格在网页设计排版时所起的重要作用。明表格在网页设计排版时所起的重要作用。v通通过过本本章章学学习习，读读者者可可利利用用表表格格在在排排版版时时按按自自己己意意愿愿来来对对网网页页素素材材进进行行有有机机组组织织，从从而设计出具有专业

2、水准的网页。而设计出具有专业水准的网页。v在在此此基基础础上上，可可进进一一步步了了解解标标准准视视图图模模式式与布局视图模式的基本概念及与布局视图模式的基本概念及v表格在两种模式下的基本应用知识。表格在两种模式下的基本应用知识。n表格，以其边框的值是否为表格，以其边框的值是否为0，可分为有形表格，可分为有形表格和无形表格。和无形表格。n有形表格：有形表格：如果表格边框值为非如果表格边框值为非0，则绘制的表，则绘制的表格在预览时能被看见，格在预览时能被看见，n可以在有形的表格中填写数据，可以对数据进行升序可以在有形的表格中填写数据，可以对数据进行升序或降序的排列，可以对表格进行各种格式的套用，

3、使或降序的排列，可以对表格进行各种格式的套用，使其变得更加美观，这些功能通常是表格最基本的功能。其变得更加美观，这些功能通常是表格最基本的功能。n无形表格：无形表格：如果表格边框值为如果表格边框值为0，则表格在预览，则表格在预览时不可见，时不可见，n在网页设计时，常利用表格的这一重要属性来对网页在网页设计时，常利用表格的这一重要属性来对网页进行排版。本章将以一个网校主页的设计为例，来说进行排版。本章将以一个网校主页的设计为例，来说明表格在网页设计排版时所起的重要作用。明表格在网页设计排版时所起的重要作用。n网校主页如图网校主页如图5-1所示。所示。5.1用表格实现一个系部主页的设计用表格实现一

4、个系部主页的设计n间距间距(单元格单元格)：单元格与单元格的距离，单：单元格与单元格的距离，单元格背景色不包括覆盖间距元格背景色不包括覆盖间距n边距边距(单元格单元格)：单元格内容与单元格边界：单元格内容与单元格边界（四周）的距离。（四周）的距离。n在在本本例例中中设设计计的的系系部部主主页页是是一一种种在在互互联联网网上上较较为为常常见见的的网网页页设设计计方方式式，其其框框架架应应用用如如图图5-2所所示示，整整个个版版面面可可以以分分为为装装饰饰区区、标标题题区区、导航栏区、信息区、版权区共导航栏区、信息区、版权区共5个区域。个区域。5.1.1网页结构分析网页结构分析5.1.2设计页眉区

5、设计页眉区n在在设设计计之之前前，先先来来看看看看页页眉眉区区完完成成后后的的效效果果图图，如如图图5-3所所示。示。5.1.2设计页眉区设计页眉区5.1.3设计导航栏区设计导航栏区n导航栏区完成后效果图如图导航栏区完成后效果图如图5-8所示。其制作方法比较简单。所示。其制作方法比较简单。图图5-8 导航栏区完成后效果图导航栏区完成后效果图 5.1.3设计导航栏区设计导航栏区n。主页主页校友联络校友联络班级留影班级留影蒙公学堂蒙公学堂系系部联系部联系免费资源免费资源友情链接友情链接n信信息息区区，一一分分为为三三，是是网网页页设设计计常常见见方方式式。一一般般在在两两边边可可放放置置一一些些常

6、常见见信信息息如如天天气气预预报报、用用户户登登录录信信息息、友友好好链链接接、搜搜索索引引擎擎、动动态态新新闻闻等等。中中间间是是网网站站主主要要栏栏目目区区。在在各各信信息息区区，为为排排版版需需要要，用到了表格的嵌套。用到了表格的嵌套。n1.设计左设计左信息信息区区5.1.4设计信息区设计信息区n2.设计主设计主信息信息区区n两次插入如上表格两次插入如上表格5.1.4设计信息区设计信息区n3.设计右信息区设计右信息区5.1.4设计信息区设计信息区n版权区的设置效果如图版权区的设置效果如图5-21所示。所示。n图图5-21 设置完成版权栏后的效果设置完成版权栏后的效果 5.1.5设计版权区

7、设计版权区预览效果预览效果5.2知识要点知识要点n在上一节里，学习了一个系部主页设计的详细过程，在上一节里，学习了一个系部主页设计的详细过程，n应用到了表格的基本功能。应用到了表格的基本功能。n表表格格应应用用基基本本有有两两种种，一一种种边边框框线线为为0，一一种种边边框框线线不不为为0，n前前者者主主要要起起排排版版作作用用，后后者者获获得得的的是是一一个个实实实实在在在在的的表表格格，如上一例中如上一例中“关注高考关注高考”栏目中的例子。栏目中的例子。n其其实实，在在DreamweaverMX中中文文版版中中，使使用用表表格格实实现现排排版版的功能远不限于上述知识，的功能远不限于上述知识

8、，n在在利利用用表表格格实实现现排排版版方方面面，DreamweaverMX中中文文版版独独家家引入了引入了“布局视图布局视图”的概念，的概念，n使用使用“布局视图布局视图”，使排版变得更加方便自由。，使排版变得更加方便自由。n接接下下来来将将对对表表格格在在网网页页设设计计中中应应用用的的这这些些知知识识要要点点作作一一简简要要介绍。介绍。n在在DreamweaverMX中中文文版版的的“插插入入”面面板板中中，可可以以在在“常常规规”、“布布局局”和和“表格表格”三个选项卡中都有表格工具。三个选项卡中都有表格工具。n1.常规选项卡常规选项卡n2.表格选项卡表格选项卡n3.布局选项卡布局选项

9、卡n图图5-25 布局视图布局视图 图图5-23“表格表格”工具工具图图5-22“常规常规”工具工具 5.2.1标准视图中的表格与布局视图中的标准视图中的表格与布局视图中的表格表格5.2.2 标准视图模式下表格的应用技巧标准视图模式下表格的应用技巧v操作方法：操作方法：方法一：方法一：菜单：修改菜单：修改表格表格方法二：右击方法二：右击表格表格1.选定表格的操作选定表格的操作选定整个表格选定整个表格选定表格的行与列选定表格的行与列选定一个单元格选定一个单元格选定不相邻的行、列或单元格选定不相邻的行、列或单元格2.表格的缩放操作表格的缩放操作用鼠标拖放实现用鼠标拖放实现用表格属性面板实现用表格属

10、性面板实现3.编辑表格编辑表格增加行列增加行列删除行列删除行列合并单元格合并单元格拆分单元格拆分单元格5.2.2 标准视图模式下表格的应用技巧标准视图模式下表格的应用技巧4.格式化表格格式化表格v菜单：命令菜单：命令格式化表格格式化表格第五章格式化表格第五章格式化表格-课程表（制作）课程表（制作）v表格在布局视图中的应用技巧，主要包括表格在布局视图中的应用技巧，主要包括v布布局局单单元元格格与与布布局局表表格格的的绘绘制制、移移动动、缩缩放放大大小小、属属性性定义等几个方面。定义等几个方面。v1.绘制布局单元格绘制布局单元格v布局视图布局视图布局布局单元格单元格按钮按钮5.2.3 布局视图模式

11、下表格的应用技巧布局视图模式下表格的应用技巧n如如果果要要绘绘制制多多个个单单元元格格，不不必必每每次次都都点点击击布布局局单单元元格格按按钮钮，只只需需要要在在绘绘制制过过程中按住程中按住Ctrl键键即可即可.图图5-38v2.绘制布局表格绘制布局表格v布局视图布局视图布局布局表格表格按钮按钮5.2.3 布局视图模式下表格的应用技巧布局视图模式下表格的应用技巧n如如果果要要绘绘制制多多个个表表格格，不不必必每每次次都都点点击击布布局局表表格格按按钮钮，只只需需要要在在绘制过程中按住绘制过程中按住Ctrl键键即可即可.n如如果果页页面面中中没没有有包包含含内内容容，在在布布局局视视图图下下绘绘

12、制制第第一一个个表表格格时时，会会被被自自动动放放置置在在页页面面的的（左左上上方方），否否则则，绘绘制制的的表表格格只只能能出出现现在内容的下方。在内容的下方。图图5-39v3.移动布局单元格移动布局单元格v布布局局单单元元格格可可以以在在布布局局表表格格自自由由移移动动，是是“布布局局视视图图”灵活性的最大体现灵活性的最大体现v可可以以与与标标准准视视图图对对比比，后后者者只只能能靠靠调调整整行行高高和和列列宽宽来来实现实现v方法一：鼠标拖动法，详见教材方法一：鼠标拖动法，详见教材P73n方方法法二二：也也可可使使用用键键盘盘上上的的箭箭头头来来操操作作，每每次次移移动动1个个象象素素，如

13、如果果同同时时按按住住Shift键键，每每次次可可移移动动10个个象象素最外层的表格不可移动。素最外层的表格不可移动。n移动布局表格（不可移动）移动布局表格（不可移动）5.2.3 布局视图模式下表格的应用技巧布局视图模式下表格的应用技巧图图5-40v4.调整布局单元格和布局表格大小调整布局单元格和布局表格大小v方法：鼠标拖动法，详见教材方法：鼠标拖动法，详见教材P74n注注意意：如如果果两两个个边边框框的的间间距距小小于于8个个象象素素时时，表表格格会会自动地附着到已经存在的表格或单元格旁边。自动地附着到已经存在的表格或单元格旁边。5.2.3 布局视图模式下表格的应用技巧布局视图模式下表格的应

14、用技巧图图5-41图图5-42v5.布局单元格属性面板布局单元格属性面板v很少用，可略很少用，可略v6.布局表格属性面板布局表格属性面板 v很少用，可略很少用，可略5.2.3 布局视图模式下表格的应用技巧布局视图模式下表格的应用技巧图图5-44图图5-45练习：在布局视图中做出如图所示的表格练习：在布局视图中做出如图所示的表格5.3本章小结本章小结n本本章章围围绕绕设设计计一一个个专专业业性性质质的的系系部部主主页页实实例例，详详细介绍了表格在网页排版中的作用，细介绍了表格在网页排版中的作用，n并并在在此此基基础础上上，对对表表格格在在“标标准准视视图图”与与“布布局局视视图图”两种模式下的应

15、用技巧，作了重点介绍，两种模式下的应用技巧，作了重点介绍，n通通过过这这些些知知识识的的学学习习，可可以以借借助助表表格格的的这这些些功功能能，设计出具有专业水准的网页了。设计出具有专业水准的网页了。补充补充-立体表格立体表格1插入插入4行行1列表格，宽度可为百分比列表格，宽度可为百分比“10”，边框为，边框为“3”，边距为，边距为“0”，间距为，间距为“0”2在代码窗口中设置单元格颜色在代码窗口中设置单元格颜色Bordercolorlight左上边界颜色左上边界颜色“#FFFFFF“白白bordercolordark右下边界颜色右下边界颜色“#000000”黑黑如下：如下： 立体表

16、格立体表格-代码代码    n习题与操作题习题与操作题n习题习题n【选择题选择题】n（1）如如果果两两个个边边框框的的间间距距小小于于（）个个象象素素时时，表表格格会会自自动动地地附着到已经存在的表格或单元格旁边。附着到已经存在的表格或单元格旁边。nA、1B、8C、4D、16n（2）拖拖动动布布局局单单元元格格和和布布局局表表格格也也可可使使用用键键盘盘上上的的箭箭头头来来操操作作，每每次次移移动动1个个象象素素，如如果果同同时时按按住住Shift键键，每每次次可可移移动动（）个个象素；最外层的表格不可移动。象素；最外层的表格不可移动。nA、1B、8C、

17、4D、16n（3）如如果果要要绘绘制制多多个个表表格格，不不必必每每次次都都点点击击布布局局表表格格按按钮钮，只只需需要要在绘制过程中按住（）键即可在绘制过程中按住（）键即可.nA、【Shift】B、【Ctrl】C、【Alt】D、【Ctrl+Alt】n（4）如如果果页页面面中中没没有有包包含含内内容容，在在布布局局视视图图下下绘绘制制第第一一个个表表格格时时，会会被被自自动动放放置置在在页页面面的的（），否否则则，绘绘制制的的表表格格只只能能出出现现在在内容的下方。内容的下方。nA、左上方、左上方B、右上方、右上方C、正中间、正中间 D、底部、底部【填空题】【填空题】n（1）在在表表格格属属性

18、性面面板板中中，当当表表格格的的边边框框线线设设置置为为（）时，表格线不可见。时，表格线不可见。n（2）对对象象面面板板上上的的“绘绘制制布布局局单单元元格格”按按钮钮与与“绘绘制制布布局局表表格格”按按钮钮，只只有有从从（）视视图图切切换换到到（）视视图图下下，才可被激活使用。才可被激活使用。n（3）Dreamweaver编编辑辑窗窗口口左左下下角角的的状状态态栏栏下下的的表表示示（），表表示示（），表表示示（）。n（4）如如果果要要绘绘制制多多个个单单元元格格，不不必必每每次次都都单单击击布布局局单单元元格格按钮，只需要在绘制过程中按住（）键即可。按钮，只需要在绘制过程中按住（）键即可。n（5）单元格的控制点是指（）。）单元格的控制点是指（）。【简答题】【简答题】（1）选定表格的操作有几种方法？）选定表格的操作有几种方法？（2）表格的缩放操作有几种方法？）表格的缩放操作有几种方法？（3）如何移动布局单元格？）如何移动布局单元格？操作题操作题（1）在在标标准准视视图图下下，利利用用表表格格的的排排版版功功能能，设设计计一个形同网校主页的网页。一个形同网校主页的网页。（2）在在布布局局视视图图下下，通通过过绘绘制制表表格格与与单单元元格格，来来设计一个网页。设计一个网页。（3）绘制一个表格，并进行格式化操作。）绘制一个表格，并进行格式化操作。