(精品)chapter4表格框架层.ppt

《(精品)chapter4表格框架层.ppt》由会员分享，可在线阅读，更多相关《(精品)chapter4表格框架层.ppt（51页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计与制作网页设计与制作网页元素的定位网页元素的定位 表格、框架、层表格、框架、层学习目标学习目标l理解页面版式设计的基本原则。理解页面版式设计的基本原则。l理理解解和和掌掌握握如如何何在在网网页页中中利利用用表表格格、布布局局、层和框架来规划和设计页面。层和框架来规划和设计页面。l掌掌握握构构造造表表格格和和设设置置表表格格属属性性的的方方法法。熟熟练练掌握应用表格设计网页布局的方法。掌握应用表格设计网页布局的方法。l了解和掌握使用框架设计网页布局的方法。了解和掌握使用框架设计网页布局的方法。l了解和掌握使用层设计网页布局的方法。了解和掌握使用层设计网页布局的方法。什么是页面版式什么是页

2、面版式l设计页面版式就是指采用一种合适的技设计页面版式就是指采用一种合适的技术将网页的内容显示在浏览器中。术将网页的内容显示在浏览器中。l在网页中可以使用多种方式进行版式设在网页中可以使用多种方式进行版式设计，以形成一个统一的站点风格并获得计，以形成一个统一的站点风格并获得需要的效果。需要的效果。版式在网页界面中的作用版式在网页界面中的作用l网页界面的版式设计，是指将文字、图网页界面的版式设计，是指将文字、图形图像、色彩、动画、视频多媒体等网形图像、色彩、动画、视频多媒体等网页对象的传达要素，根据特定内容和主页对象的传达要素，根据特定内容和主题，在网页限定范围内将设计意图以视题，在网页限定范围

3、内将设计意图以视觉形式表现出来。觉形式表现出来。版式在网页界面中的作用版式在网页界面中的作用从网页技术角度讲，设计者通常是围绕着页从网页技术角度讲，设计者通常是围绕着页面中的导航栏、图像、动画、正文等内容展面中的导航栏、图像、动画、正文等内容展开页面布局的。开页面布局的。在页面制作过程中要确定一个页面的布局，在页面制作过程中要确定一个页面的布局，应该综合考虑如何安置页面中的各种内容，应该综合考虑如何安置页面中的各种内容，比如标题文字、导航栏、图片、动画、超链比如标题文字、导航栏、图片、动画、超链接等。接等。版式的实用功能版式的实用功能l主次分明、重点突出主次分明、重点突出应能让浏览者迅速找到网

4、页的主题，并对整个页面有全应能让浏览者迅速找到网页的主题，并对整个页面有全面的掌握。面的掌握。l导航清晰、便于浏览导航清晰、便于浏览 网页应该具有一致风格的导航系统，为用户浏览提供方网页应该具有一致风格的导航系统，为用户浏览提供方便便l布局合理、逻辑性强布局合理、逻辑性强应能使网页中的各种视觉信息在页面中合理、有序地排应能使网页中的各种视觉信息在页面中合理、有序地排列，既要体现出设计思想，又要符合一般的视觉原理和列，既要体现出设计思想，又要符合一般的视觉原理和思维习惯思维习惯。版式的审美功能版式的审美功能l统一，是指设计作品的整体性、一致性。统一，是指设计作品的整体性、一致性。l分分割割，是是

5、指指将将页页面面划划分分为为不不同同区区域域，以以便妥善安排各种页面组成元素。便妥善安排各种页面组成元素。l对对比比，是是指指通通过过合合理理运运用用矛矛盾盾和和冲冲突突，使设计更加富有生机和活力。使设计更加富有生机和活力。版式布局的样式版式布局的样式l“同同”字型结构布局字型结构布局l“T”T”字型结构布局字型结构布局l 标题正文型标题正文型l 左右框架型左右框架型l 上下框架型上下框架型l 综合框架型综合框架型l 封面型封面型l FlashFlash型型l 变化型变化型布局的过程布局的过程1.设定页面尺寸设定页面尺寸分辨率分辨率800 x600像素，页面显示尺寸为像素，页面显示尺寸为780

6、 x428像素；像素；分辨率分辨率1024x768像素，页面显示尺寸为像素，页面显示尺寸为1007x600像素。像素。2.放置功能模块放置功能模块3.布局细化与调整布局细化与调整表格的组成表格的组成l表格标记符表格标记符 tablel 表格标题表格标题 captionl 表格行表格行 tr（table row）l 表格数据表格数据 td（table data）l 表格表头表格表头 th（table heading）注：注：td和和th的结束标记符都可以省略，并且可以不包含任何的结束标记符都可以省略，并且可以不包含任何内容。内容。表格的构造表格的构造l在在 TH 或或 TD 标记符中使用标记符中

7、使用 rowspan 属属性进行行合并性进行行合并l 在在 TH 或或 TD 标记符中使用标记符中使用 colspan 属属性进行列合并性进行列合并构造表格的步骤构造表格的步骤1.使使用用table标标记记符符包包括括所所有有表表格格内内容容，如如果果需需要要标标题题，则则在在后使用后使用caption标记符。标记符。2.从从第第一一行行开开始始，使使用用tr标标记记符符分分隔隔每每一一行行。表表格格有有多多少少行行，就就应该有多少个应该有多少个tr标记符。标记符。3.在在每每一一行行内内，一一次次用用th或或td标标记记符符标标记记每每个个单单元元格格的的内内容容。如如果果碰碰到到跨跨行行的

8、的单单元元格格，则则用用rowspan属属性性进进行行标标记记；如如果果碰到跨列的单元格，则用碰到跨列的单元格，则用colspan属性进行标记。属性进行标记。4.按按照照步步骤骤3顺顺序序一一行行一一行行处处理理，直直到到表表格格结结束束。如如遇遇空空单单元元格格，只需使用空的只需使用空的th或或td标记符即可。标记符即可。表格与布局表格的基本操作表格与布局表格的基本操作l插入表格插入表格1.表格大小表格大小 边框粗细、单元格边距、单元格间距的设置边框粗细、单元格边距、单元格间距的设置2.页眉与辅助功能页眉与辅助功能表格与布局表格的基本操作表格与布局表格的基本操作l选择表格对象选择表格对象1.

9、选择表格选择表格2.选择单个单元格选择单个单元格3.选择整行或整列选择整行或整列4.选择相邻的多个单元格选择相邻的多个单元格5.选择不相邻的单元格选择不相邻的单元格表格与布局表格的基本操作表格与布局表格的基本操作l表格的属性表格的属性1.表格名称（表格表格名称（表格Id）2.行和列行和列 3.宽和高宽和高 4.边框边框 5.填充和间距填充和间距 6.对齐：左对齐、右对齐、对齐：左对齐、右对齐、居中对齐居中对齐7.背景颜色和图像背景颜色和图像表格与布局表格的基本操作表格与布局表格的基本操作l调整表格结构调整表格结构 1.1.插入单行或单列插入单行或单列 2.2.插入多行或多列插入多行或多列 3.

10、3.删除行或列删除行或列 4.4.单元格的拆分与合并单元格的拆分与合并表格与布局表格的基本操作表格与布局表格的基本操作l设置单元格属性设置单元格属性 1.设置单元格宽度与高度设置单元格宽度与高度 2.对齐设置对齐设置 3.将单元格转换为表头将单元格转换为表头 表表头头是是特特殊殊的的单单元元格格，它它和和单单元元格格的的区区别别在在于于其其中中的的文文字字自自动变成粗体，而且位于单元格中央。动变成粗体，而且位于单元格中央。表格与布局表格的基本操作表格与布局表格的基本操作l嵌套表格嵌套表格 利用多个嵌套的表格，外部的大表格负利用多个嵌套的表格，外部的大表格负责整体的布局，内部的小表格负责各个责整

11、体的布局，内部的小表格负责各个板块的排版。板块的排版。表格与布局表格的基本操作表格与布局表格的基本操作l导入表格化数据导入表格化数据 文件文件导入导入表格式数据表格式数据 从从Excel文件中导入数据，可先把文件中导入数据，可先把Excel工作工作表文件保存为表文件保存为.txt文件。文件。l套用现成格式套用现成格式 命令命令格式化表格格式化表格 表格与布局表格的基本操作表格与布局表格的基本操作l水平细线水平细线 有时我们需要在网页上加入一条细线，可以使用更加通用的有时我们需要在网页上加入一条细线，可以使用更加通用的表格来实现它。表格来实现它。1.插入表格插入表格 2.创建间隔图像创建间隔图像

12、 间隔图像间隔图像实际就是一张透明的实际就是一张透明的GIF格式的图片。格式的图片。编辑编辑首选参数首选参数布局模式布局模式站点的间隔图像站点的间隔图像创建创建 该图像的文件名默认为该图像的文件名默认为spacer.gif 3.插入间隔图像插入间隔图像布局视图排版布局视图排版l布局视图布局视图 要要使使用用布布局局视视图图，必必须须首首先先切切换换到到布布局局视图中视图中！绘制布局表格和布局单元格绘制布局表格和布局单元格1.1.绘制布局表格绘制布局表格2.绘制布局单元格绘制布局单元格注意：注意：布布局局单单元元格格不不能能在在布布局局表表格格之之外外，同同一一个个布布局局表表格格中中可可以以放

13、放置置多多个个布布局局单单元元格格，在在布布局局表格中还可以嵌套多个布局表格。表格中还可以嵌套多个布局表格。调整布局表格和布局单元格调整布局表格和布局单元格1.选择布局表格和布局单元格选择布局表格和布局单元格2.调整布局表格和布局单元格大小调整布局表格和布局单元格大小3.移动布局表格和布局单元格移动布局表格和布局单元格4.修改布局表格和布局单元格属性修改布局表格和布局单元格属性表格的应用技巧表格的应用技巧 强调：如果要将某网页元素（例如一幅强调：如果要将某网页元素（例如一幅图像）放到特定位置，首先应想到使用图像）放到特定位置，首先应想到使用表格！表格！1.使用表格还是单元格使用表格还是单元格

14、2.使用百分比还是像素使用百分比还是像素 3.使用一个大表格还是多个横向表格使用一个大表格还是多个横向表格表格布局的综合应用表格布局的综合应用l设置各种细线效果设置各种细线效果 1.表格框线表格框线 制作要点：制作要点：将将table标记符的标记符的bgcolor属性设置为要显示的颜色，属性设置为要显示的颜色，将将table标记符的标记符的cellspacing属性设置为细线的粗细属性设置为细线的粗细（通常为（通常为“1”），将单元格或表格行的），将单元格或表格行的bgcolor属属性设置为不同于表格性设置为不同于表格bgcolor的值。的值。表格布局的综合应用表格布局的综合应用l设置各种细线

15、效果设置各种细线效果 2.横竖分隔线横竖分隔线 制作要点：制作要点：将将table标记符的标记符的cellspacing属性和属性和cellpadding属属性都设置为性都设置为“0”，将要作为细线的单元格的，将要作为细线的单元格的bgcolor属性设置为细线的颜色，将该单元格的属性设置为细线的颜色，将该单元格的width属性属性（竖线）或竖线）或height属性属性（横线）设置为横线）设置为细线的粗细（通常为细线的粗细（通常为“1”），注意该单元格中不能），注意该单元格中不能有任何内容（包括空格）。有任何内容（包括空格）。表格布局的综合应用表格布局的综合应用l表格布局的综合实例表格布局的综合

16、实例什么是框架什么是框架l在在同同一一个个浏浏览览器器窗窗口口中中同同时时显显示示多多个个网网页页的交互式结构。的交互式结构。l通过为超链接指定目标框架，可以为框架通过为超链接指定目标框架，可以为框架之间建立起内容的联系，从而实现页面导之间建立起内容的联系，从而实现页面导航的功能。航的功能。l通通常常，一一个个框框架架WebWeb页页由由框框架架集集、组组内内各各框架、各框架内的网页组成。框架、各框架内的网页组成。框架的基本操作框架的基本操作l创建框架集（指定框架结构）创建框架集（指定框架结构）在框架集网页中不包含任何可显示的内容，在框架集网页中不包含任何可显示的内容，而只是包含如何组织各个框

17、架的信息和框而只是包含如何组织各个框架的信息和框架中的初始页面信息。架中的初始页面信息。插入插入框架框架框架的基本操作框架的基本操作l在在框框架架集集网网页页中中，除除了了基基本本的的htmlhtml，headhead等等标标记记符符以以外外，主主要要包包括括框框架架集集标标记记符符framesetframeset（必必须须有有结结束束标标记记符符）和和框框架架标标记符记符frameframe（没有结束标记符）没有结束标记符）框架结构框架结构l框架集框架集定义框架的结构定义框架的结构l 框架框架具体定义每个页面具体定义每个页面框架的基本操作框架的基本操作l一个典型的框架集网页如下：一个典型的框

18、架集网页如下：框架集网页框架集网页 注意：在注意：在html文档中，如果包含了文档中，如果包含了frameset标记符，标记符，则不能再包含则不能再包含body标记符，反之亦然。标记符，反之亦然。框架的基本操作框架的基本操作l框架集的定义框架集的定义Rows 定义行结构框架定义行结构框架Cols 定义列结构框架定义列结构框架Rows 和和 cols 的取值：的取值：l像素数像素数l%百分数百分数lN*（其中其中N是是1的整数）的整数）框架的基本操作框架的基本操作lRows 和和 cols 的取值：的取值：N*当属性值为当属性值为N*时，表示框架的大小为由前两种方法指定框时，表示框架的大小为由前

19、两种方法指定框架大小后浏览器剩余的部分。架大小后浏览器剩余的部分。指定属性值时，值之间用指定属性值时，值之间用“，”号隔开并且不能有空格，号隔开并且不能有空格，根据值的个数和设置来确定框架数目和位置。根据值的个数和设置来确定框架数目和位置。如：如：cols=“30%,*”表示左边框架占浏览器窗口宽度的表示左边框架占浏览器窗口宽度的30%，右边框架占剩余部分（也就是，右边框架占剩余部分（也就是70%）如果取值包括多个如果取值包括多个N*，那么那么N*表示框架之间的比例关系。表示框架之间的比例关系。如：如：“1*，2*，3*”表示最左表示最左(上上)边的框架占窗口宽度边的框架占窗口宽度(高度高度)

20、的的1/6，中间的框架占窗口宽度，中间的框架占窗口宽度(高度高度)的的1/3，最右，最右(下下)边的框架占窗口宽度边的框架占窗口宽度(高度高度)的的1/2。框架的基本操作框架的基本操作l框架的初始化框架的初始化 在在 frame 标记符中使用标记符中使用 src 属性可以属性可以指定框架中最初显示的页面。指定框架中最初显示的页面。框架的基本操作框架的基本操作l超链接的目标框架超链接的目标框架 所谓目标框架，是指单击框架网页中的超所谓目标框架，是指单击框架网页中的超链接时，对应的目标文件显示在哪个框架链接时，对应的目标文件显示在哪个框架中。中。框架的基本操作框架的基本操作l设置目标框架设置目标框

21、架使用使用指定框架名称指定框架名称特殊的框架名称特殊的框架名称_blank 表示打开新的窗口表示打开新的窗口_top 表示返回顶层窗口表示返回顶层窗口 在超链接标记符在超链接标记符 A 中指定中指定 target 属性，取值属性，取值 为具体的框架名称。为具体的框架名称。什么是层什么是层l层是层是一种一种HTML页面元素，它可以自由移页面元素，它可以自由移动，显示或隐藏，同时还可以相互嵌套，动，显示或隐藏，同时还可以相互嵌套，叠加，在很大程度上弥补了表格排版的不叠加，在很大程度上弥补了表格排版的不足。足。l层可以包含文本、图像或其他任何可在层可以包含文本、图像或其他任何可在HTML文档正文中放

22、入的内容。文档正文中放入的内容。什么是层什么是层lDW中的层是指具有绝对或相对位置的中的层是指具有绝对或相对位置的div标签，这里说的层属于标签，这里说的层属于DW的的布局概念，布局概念，而不是而不是layer标签。标签。l层可以包含文本、图像或其他任何可在层可以包含文本、图像或其他任何可在HTML文档正文中放入的内容。文档正文中放入的内容。lDW中默认使用中默认使用div标签来创建层。标签来创建层。什么是层什么是层llayer和和ilayer两种标签也可以创建层，但是两种标签也可以创建层，但是只有只有Netscape Navigator 4支持，支持，IE不支持，不支持，Netscape在在

23、较新的浏览器中也不再支持；较新的浏览器中也不再支持；在在DW中可以识别，但不使用。中可以识别，但不使用。ldiv和和span标签之间的区别在于：标签之间的区别在于：不支持层不支持层的浏览器在的浏览器在div标签的前后放置额外的换行标签的前后放置额外的换行符。符。也就是说，也就是说，div标签是块级别的元素，标签是块级别的元素，而而span标签则是内联元素。标签则是内联元素。层的基本操作层的基本操作l层的层的创建创建为了便于选择层，最好在页面中显示层锚记。为了便于选择层，最好在页面中显示层锚记。F2显示层面板，是文档中层的可视图。显示层面板，是文档中层的可视图。l层的调整与移动层的调整与移动调整

24、层大小、移动层调整层大小、移动层单击层的边框选中单击层的边框选中层的基本操作层的基本操作l在层中添加内容在层中添加内容可在层中插入文字、图像、表格等对象可在层中插入文字、图像、表格等对象l创建嵌套层创建嵌套层使用菜单命令：插入使用菜单命令：插入|布局对象布局对象|层层嵌套层的明显标志是子层图标出现在母层中。嵌套层的明显标志是子层图标出现在母层中。使用工具：直接绘制嵌套层，需要进行设置。使用工具：直接绘制嵌套层，需要进行设置。首选参数首选参数|层层|“如果在层中则使用嵌套如果在层中则使用嵌套”层的基本操作层的基本操作l层面板层面板 可对层进行全面管理可对层进行全面管理显示显示/隐藏层：单击左侧的

25、眼睛图标隐藏层：单击左侧的眼睛图标修改层名称：给层添加行为时需要给层命名修改层名称：给层添加行为时需要给层命名修改修改Z轴顺序：轴顺序：Z轴作用是排定各个层之间的叠加顺序。轴作用是排定各个层之间的叠加顺序。Z轴数值大的层就在数值小的层上面，覆盖数值小轴数值大的层就在数值小的层上面，覆盖数值小的层。的层。创建嵌套层：在面板中按住创建嵌套层：在面板中按住ctrl的同时拖动某个层的的同时拖动某个层的名称到其他层的名称之上。名称到其他层的名称之上。层的基本操作层的基本操作l设置层的属性设置层的属性层编号：每个层都必须有自己惟一的层编号层编号：每个层都必须有自己惟一的层编号可见性：可见性：default

26、（默认）默认）inherit（继承）继承）visible（可见）可见）hidden（隐藏）隐藏）使用层排版使用层排版l层在层在排版上的作用主要体现在：排版上的作用主要体现在：先用层创先用层创建网页的轮廓，然后再将层转换为表格。建网页的轮廓，然后再将层转换为表格。l防止重叠：层排版最终要转换为表格，层防止重叠：层排版最终要转换为表格，层就不能有嵌套，不可以相互叠加。窗口就不能有嵌套，不可以相互叠加。窗口|层层|防止重叠防止重叠l层的对齐层的对齐l层转换为表格层转换为表格 修改修改|转换转换|层到表格层到表格层上的行为层上的行为l层有两个很重要的特性：能够拖动，层有两个很重要的特性：能够拖动，能显

27、示或隐藏。利用这两个特性可以能显示或隐藏。利用这两个特性可以实现很多动态特效。实现很多动态特效。l拖动层：利用层可以移动的特点，允拖动层：利用层可以移动的特点，允许浏览者自己拖动网页上的层。许浏览者自己拖动网页上的层。l显示和隐藏层显示和隐藏层总结与提高总结与提高l在在DW的的新网页上输入文字时，不能随便控制文字新网页上输入文字时，不能随便控制文字的输入位置。可先在新页面上插入一张居中对齐的输入位置。可先在新页面上插入一张居中对齐的表格，最好设定为奇数列，并且数值不要太大，的表格，最好设定为奇数列，并且数值不要太大，然后在单元格中输入文字就可以控制了。然后在单元格中输入文字就可以控制了。l要使

28、图片和表格接触的地方不留空隙，仅在表格要使图片和表格接触的地方不留空隙，仅在表格属性面板中把外框线设为属性面板中把外框线设为0是不行的，还需要把单是不行的，还需要把单元格的两个属性设置为元格的两个属性设置为0。（即（即cellspacing=“0”和和cellpadding=“0”）总结与提高总结与提高l解决解决DW中表格里的背景不能预览问题。只中表格里的背景不能预览问题。只要把背景图设置在要把背景图设置在里就里就可以显示了。如可以显示了。如果设置在果设置在里就不能预览。里就不能预览。l按住按住Alt键的同时在文档编辑窗口内单击某键的同时在文档编辑窗口内单击某个框架，即可选中该框架；单击框架边

29、框，个框架，即可选中该框架；单击框架边框，即可选中框架集。即可选中框架集。l在框架页面中显示被选中的框架时，其边框在框架页面中显示被选中的框架时，其边框都由圆点直线包围。都由圆点直线包围。总结与提高总结与提高l若要从另一个层中开始绘制层时自动嵌套层，若要从另一个层中开始绘制层时自动嵌套层，要选择要选择【层层】首选参数中的首选参数中的【嵌套嵌套】选项。选项。l如果已启用如果已启用【防止重叠防止重叠】选项，那么在移动选项，那么在移动层时将无法使层相互重叠。层时将无法使层相互重叠。l在把层转换为表格之前，必须使层不发生重在把层转换为表格之前，必须使层不发生重叠。原因是表格布局具有叠。原因是表格布局具有Z轴的特性。轴的特性。上机实训上机实训 1.制作如图所示的页面。制作如图所示的页面。上机实训上机实训 2.制作如图所示的页面。制作如图所示的页面。