HTML表格、框架使用大全.ppt
,静态网站设计,网络技术系：李毓丽,使用表格,制作表格添加或删除行和列格式化表格为表格添加题注嵌套表格,表格在网页中除了作为一个显示对象以外，还有一个重要的作用就是用于排版页面内容,制作表格,表格标记,基本语法, ,与标记不同的地方是之间的内容会加粗且默认居中显示，而之间的内容则不加粗且默认居左显示,表格示例,表格中每一行使用一个表示；行中的每一列使用一个或表示添加或删除行和列可以分别通过添加或删除行和列标记来实现,添加或删除行和列,添加或删除行和列实现方法,添加新行 可以通过插入额外的 和 标记来添加新的一行在表内创建新列 可以通过对每一行添加 或 标记在表格中创建新的列删除表中的行和列 可以通过删除包围指定行和列的 标记和 标记来删除表格中的列和行,表格的格式化包括以下一些内容：为表格添加边框及设置边框粗细及边框颜色为表格添加背景图像或背景颜色指定表格的对齐方式设置表格的宽度、高度设置表格单元格内容与边框的间距及单元格之间的间距指定行、列的背景图像或背景颜色指定行、列内容的对齐方式设置行、列的边框颜色设置行、列的宽度和高度单元格的跨行和跨列设置,格式化表格,表格属性,表格标记属性设置语法,表格标记属性示例,示例代码,行标记属性,行标记属性设置语法,行标记属性示例,、标记属性,单元格宽度属性解释,如果没有设置单元格宽度，则浏览器将会根据单元格中的内容来自动调整单元格的宽度如果设置了单元格宽度，但没有设置nowarp属性，则单元格中的内容在超出了单元格宽度设置允许的情况下自动对文本进行换行显示如果设置了单元格宽度，但同时又设置了nowarp属性，则此时，单元格宽度设置不起作用，所有文本将在一行内显示,单元格标记属性设置语法,单元格标记属性示例,表格各标记属性设置的注意事项,表格标记中的bordercolorlight、bordercolordark颜色显示的位置正好跟行标记及单元格标记中的这两个属性相反 内层的边框颜色设置会和外层的边框颜色混合成另一种颜色同时设置背景颜色和背景图像时，背景颜色将被背景图像覆盖掉只有较新版的浏览器才支持背景颜色和背景图像的设置，不支持背景图像的设置的浏览器会显示浏览器的默认背景颜色来代替图像,背景图像属性设置的规则,选择基本上不传达信息的小巧而精致的图像选择带有较少形状、模式或颜色的简单图像 选择能够突出文档意图的图像在尽可能多的浏览器中查看带有表格背景图像的HTML文档，确保跨浏览器的兼容性,背景颜色属性设置的规则,如果文本颜色是深色的，应该选择浅色作为背景颜色如果文本颜色是浅色的，应该选择深色作为背景颜色选择在美学角度来看令人愉快的颜色如果表述的主题是快节奏或激动人心的，应该选择明快的颜色如果表述的是慢节奏和基调忧郁的内容，应该选择暗淡的颜色始终选择216 种无抖动颜色之一,表格题注作用：概括表格的内容提供关于表格内容的一些信息基本语法 语法解释 标记之间的就是表格的标题，这个标记必须在标记对之内使用,为表格添加题注,标记对齐属性,表格题注设置示例,在网页中，排版通常需要通过表格的嵌套来完成表格的嵌套是指在一个表格的单元格中插入另一个表格,嵌套表格,表格嵌套设置示例,在网页排版中使用嵌套表格的原因有二：一是利于简化表格制作：网页的排版有时会很复杂，在外部需要有一个表格控制总体布局，如果这时一些内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格制作带来困难二是提高浏览器响应速度：浏览器在解析网页的时候，是将整个表格的结构下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，表格下载耗时相对长，浏览者要等很长时间才能看到网页的内容,小 结,制作表格时需要同时使用或标记对表格的内容必须放置在或之间每一行必须使用一个标记对行中的所有列都必须放置在标记对之间通过表格、行及单元格标记的属性，可以对表格进行格式化，如设置显示边框、边框宽度、边框颜色等,在排版网页时通常需要嵌套表格，所谓表格的嵌套，是指在一个表格的单元格中插入另一个表格,小 结,思考题,1. 在显示表格边框，应如何设置？2. 如何设置表格的宽度、高度、对齐方式、边框颜色、单元格间距及单元格边距？ 3. 如何设置单元格的对齐方式、背景颜色、背景图像?4. 在网页排版时，应如何嵌套表格?,使用框架结构,框架概述框架结构组成标记框架集标记框架标记不支持框架标记浮动框架框架与链接,框架概述,HTML 框架允许在浏览器中同时显示多个HTML文档多个页面能够同时在同一浏览器可独立滚动的窗口中显示用来把浏览器窗口分成几个独立的部分每一部分可以分别包含一个单独的HTML 文档借助于框架分割浏览器窗口可以显著改进外观和可用性,框架的特征,可以水平或垂直分割垂直框架具有垂直边框水平框架具有水平边框也可以在框架中嵌套框架在定义框架间的交互之前必须先设定布局,使用框架的优点,使网页内容看起来更美观减少了网站的下载时间提高了网站的可用性导航部分仍然可见，因为内容在单独的框架中改变框架允许开发者将内容与导航和结构元素分离有助于轻松、快速地更新内容,使用框架的缺点,老版本的浏览器不支持框架开发者需要创建并组织多个文件来充实页面，使站点创建更复杂框架结构的Web 站点不允许访问者在一个框架结构的文档中为页面加入书签框架结构的Web 站点会增加服务器负载，导致过多的文档请求框架结构的Web 站点会使搜索引擎产生问题在框架结构的Web 站点中很难跟踪一个页面,创建框架,确定要创建的框架大小创建框架集文档，确定各框架的位置和特性指定框架和其中的内容格式化框架预先为在非框架结构的浏览器中显示框架做好准备, 注意：使用框架结构时，HTML文档中不能出现标记对，此时需要由代替,框架结构组成标记,框架集标记：主要是定义浏览器窗口的分割方式，以及各分割窗口（框架）的大小框架标记：定义各分割窗口中显示的内容，并能对各分割窗口进行格式化,框架集标记,框架分割窗口方式：左右（水平）分割上下（垂直）分割嵌套分割：浏览器窗口既存在左右分割，又存在上下分割,左右分割,基本语法 .,语法解释 cols属性决定了窗口的分割方式为左右分割；“value”定义各个框架的大小，单位可以是像素，也可以是百分比；value的个数决定了标记的个数，即窗口的个数，而value的值则决定了相应窗口的大小,左右分割示例, ,上下分割,基本语法: . ,语法解释 rows属性决定了窗口的分割方式为上下分割；“value”定义各个框架的大小，单位可以是像素，也可以是百分比；value的个数决定了标记的个数，即窗口的个数，而value的值则决定了相应窗口的大小,上下分割示例, ,嵌套分割,基本语法 .,嵌套分割示例, ,嵌套分割示例结果,对框架边框的格式化,框架标记,基本语法 .,语法解释 src属性用于设置在框架窗口中显示的内容来自的文件；name属性用于标记框架名称，以便于其他对象对它的引用，如作为链接的一个目标窗口,框架标记,标记属性设置示例, ,标记属性,框架属性说明使用框架的属性，可设置框架显示的内容以及对框架进行格式化对框架的格式化包括更改边框、调整页边距和指定颜色以及由访问者对它的使用实行控制,标记属性,框架综合示例 框架综合示例代码,浮动框架,浮动框架是一种特殊的框架页面，其作为HTML文档的一部分，就象图像一样出现在HTML文档中。浮动框架允许将一个HTML文档插入到另一个HTML文档内部的某个区域。使用浮动框架时必须设置该框架的大小，即框架的高度和宽度,基本语法 ,浮动框架,语法解释参见下表,浮动框示例,框架与链接,框架的一个重要目的是在不同的框架中显示不同的页面，通过链接目标窗口的设置可实现这一目的具体实现方法：将框架的框架名属性值作为超链接的target的属性值,普通框架与链接示例,示例,浮动框架与链接示例效果,浮动框架与链接示例,小 结,框架的作用是将浏览器窗口分割成若干个区域，每个区域可分别显示不同的页面框架对浏览器窗口的分割方式有：左右分割、上下分割和嵌套分割框架的组成标记有和使用框架结构时，HTML文档中不能出现。需要由代替,窗口分割方式以及和框架窗口的大小需要由标记的rows或cols属性来确定，左右分割时使用cols属性，上下分割时使用rows属性框架的显示内容以及框架的格式化由标记来完成通过命名框架，使用框架可作为超链接的目标窗口浮动框架是一种特殊的框架，它是某个HTML文档的一部分，设置浮动框架需要设置它的大小浮动框架的许多属性与普通框架的相同,小 结,思考题,1. 框架的具有什么作用？2. 框架有哪几种分割方式？ 3.如何设置左右分割和上下分割?4. 如何设置框架显示内容?5. 如果设置框架作为超链接的目标窗口？6. 什么是浮动框架，它与普通框架有什么异同点?,
