1、1,HTML语言与网页设计,页面排版,2/46,学习目标,理解页面版式设计的基本原则。 掌握构造表格和设置表格属性的方法。 熟练掌握应用表格设计网页布局的方法。 掌握使用框架设计网页布局的方法。,3,Part 1,页面版式基础,4/46,什么是页面版式,设计页面版式就是指采用一种合适的技术将网页的内容显示在浏览器中。在网页中可以使用多种方式进行版式设计，以形成一个统一的站点风格并获得需要的效果。一般可以用表格和框架这两种方式进行页面版式设计。,5/46,版式在网页界面中的作用,网页界面的版式设计，是指将文字、图形图像、色彩、动画、视频多媒体等网页对象的传达要素，根据特定内容和主题，在网页限定范
2、围内将设计意图以视觉形式表现出来。,6/46,版式在网页界面中的作用,从网页技术角度讲，设计者通常是围绕着页面中的导航栏、图像、动画、正文等内容展开页面布局的。在页面制作过程中要确定一个页面的布局，应该综合考虑如何安置页面中的各种内容，比如标题文字、导航栏、图片、动画、超链接等。,7/46,版式在网页界面中的作用,从审美角度出发，要求设计师运用统一、对比、对称、均衡等形式原理进行设计，利用网页中的元素构造出和谐、流畅、自然的网页界面。,8/46,版式的实用功能,主次分明、重点突出 应能让浏览者迅速找到网页的主题，并对整个页面有全面的掌握 导航清晰、便于浏览 网页应该具有一致风格的导航系统，为用
3、户浏览提供方便 布局合理、逻辑性强 应能使网页中的各种视觉信息在页面中合理、有序地排列，既要体现出设计思想，又要符合一般的视觉原理和思维习惯,9/46,版式的审美功能,统一，是指设计作品的整体性、一致性。 分割，是指将页面划分为不同区域，以便妥善安排各种页面组成元素。 对比，是指通过合理运用矛盾和冲突，使设计更加富有生机和活力。,10/46,演示页面版式示例,Page74,75,90,11,Part 2,使用表格设计页面版式,12/46,表格的组成,表格标记符table表格标题 caption表格行 tr （table row）表格数据 td （table data）表格表头 th （tabl
4、e heading）,13/46,演示表格示例,14/46,表格的构造,在 TH 或 TD 标记符中使用 rowspan 属性进行行合并在 TH 或 TD 标记符中使用 colspan 属性进行列合并,15/46,演示表格的行列合并,16/46,边框与分隔线,Frame属性 Rules属性 Border属性,17/46,演示边框与分隔线,18/46,表格对齐,表格的页面对齐 表格内容的对齐 水平对齐(align) 垂直对齐(valign),19/46,演示表格的对齐,表格对齐 内容的水平对齐 内容的垂直对齐,20/46,控制单元格空白,Cellspacing属性 Cellpadding属性,2
5、1/46,演示控制单元格空白,22/46,使用表格排版,页面布局 划分页面区域 背景色的设置 嵌套表格特殊排版效果表格细线的实现,23/46,演示划分页面区域,强调：如果要将某网页元素（例如一幅图像）放到特定位置，首先应想到使用表格！,24/46,演示表格背景的设置,Bgcolor设置背景色 Background设置背景图像,25/46,演示使用嵌套表格,复杂的网页布局需要借助嵌套表格！,26/46,表格的应用,综合应用表格的各种属性，可以创建一些常用的网页效果，例如：网页细线。,27/46,演示表格细线1,28/46,演示表格细线2,29/46,演示表格布局实例,30,Part 3,使用框架
6、设计页面版式,31/46,什么是框架,在同一个浏览器窗口中同时显示多个网页的交互式结构。 通过为超链接指定目标框架，可以为框架之间建立起内容的联系，从而实现页面导航的功能。,32/46,演示框架示例,33/46,框架结构,框架集 定义框架的结构框架 具体定义每个页面 ,34/46,框架结构,框架集的定义 Rows 定义行结构框架 Cols 定义列结构框架 Rows 和 cols 的取值： 像素数 % N*,35/46,演示定义框架结构,行结构 列结构1 列结构2 嵌套框架,36/46,框架的初始化,在 frame 标记符中使用 src 属性可以指定框架中最初显示的页面。,37/46,演示指定框
7、架页面,38/46,超链接的目标框架,所谓目标框架，是指单击框架网页中的超链接时，对应的目标文件显示在哪个框架中。,39/46,设置目标框架,使用指定框架名称 特殊的框架名称 _blank 表示打开新的窗口 _top 表示返回顶层窗口在超链接标记符 A 中指定 target 属性，取值为具体的框架名称。,40/46,演示指定目标框架,41/46,控制框架的显示效果,设置框架边框。 设置框架滚动条。 设置框架内容与框架边框之间的空白。,42/46,演示控制框架显示效果,43/46,使用页内框架,用 iframe 标记符可以设置页内框架 不支持框架时显示的内容也可以指定页内框架为目标框架,44/46,演示页内框架演示,45/46,演示框架布局演示,46/46,Thats all for this chapter!,
