html和表格.ppt

《html和表格.ppt》由会员分享，可在线阅读，更多相关《html和表格.ppt（21页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、html使用表格规划网页布局使用表格规划网页布局WTWT技术技术只有想不到的、没有做不到的1.1 1.1 1.1 1.1 什么是什么是什么是什么是HTMLHTMLHTMLHTML？HTMLHTMLHTMLHTML（HyperText Mark-up LanguageHyperText Mark-up LanguageHyperText Mark-up LanguageHyperText Mark-up Language）即）即）即）即超文本标超文本标超文本标超文本标记语言记语言记语言记语言，是，是，是，是构成网页文档构成网页文档构成网页文档构成网页文档的主要语言。的主要语言。的主要语言。的主要

2、语言。HTMLHTMLHTMLHTML文本是由文本是由文本是由文本是由HTMLHTMLHTMLHTML标签标签标签标签组成的组成的组成的组成的描述性描述性描述性描述性文本，文本，文本，文本，HTMLHTMLHTMLHTML标签可以描述标签可以描述标签可以描述标签可以描述文字文字文字文字、图像图像图像图像、动画动画动画动画、声音声音声音声音、表格表格表格表格、链接链接链接链接等。目前比较常用的等。目前比较常用的等。目前比较常用的等。目前比较常用的HTMLHTMLHTMLHTML版本是版本是版本是版本是4.014.014.014.01。随着随着WebWeb技术的标准化，技术的标准化，XHTMLXH

3、TML（可扩展可扩展的超文本标的超文本标记语言）诞生了，它比记语言）诞生了，它比HTMLHTML有更严格的要求。如果说有更严格的要求。如果说HTMLHTML是汉语，那么是汉语，那么XHTMLXHTML就是标准普通话。目前最常用的就是标准普通话。目前最常用的XHTMLXHTML版本是版本是1.1 1.1。因此，制作网页时主要使用因此，制作网页时主要使用HTML4.01HTML4.01和和XHTML1.1XHTML1.1两个两个版本。版本。1 HTML1 HTML概述概述 提示：提示：HTML 文档文档=网页网页：浏览器读取：浏览器读取 HTML 文文档时，不会显示档时，不会显示 HTML 标签，

4、而是使用标签来解释标签，而是使用标签来解释页面的内容，并以网页的形式显示出它们。页面的内容，并以网页的形式显示出它们。1.2 1.2 1.2 1.2 为什么有为什么有为什么有为什么有DreamweaverDreamweaverDreamweaverDreamweaver还要学习还要学习还要学习还要学习HTMLHTMLHTMLHTML 受受图形化工具（图形化工具（DreamweaverDreamweaver）自身的约束，将会自身的约束，将会产生产生大量的垃圾代码大量的垃圾代码。一个明智的。一个明智的网页编写者网页编写者应该在掌握应该在掌握图形编辑工具的基础上进一步学会图形编辑工具的基础上进一步学

5、会HTMLHTML语言，从而知道那语言，从而知道那些是垃圾代码。这样，我们就可以利用图形化开发工具快些是垃圾代码。这样，我们就可以利用图形化开发工具快速地做出网页，又会消除无用的代码，从而达到速地做出网页，又会消除无用的代码，从而达到快速快速制作制作高质量网页高质量网页的目的。的目的。1 HTML1 HTML概述概述 1.3 HTML1.3 HTML1.3 HTML1.3 HTML标签标签标签标签 （1 1）HTML HTML HTML HTML 不是不是不是不是一种一种一种一种编程语言编程语言编程语言编程语言，而是一种，而是一种，而是一种，而是一种标记语言标记语言标记语言标记语言 ，由一，由

6、一，由一，由一套套套套标签标签标签标签 (tag)(tag)(tag)(tag)构成，使用构成，使用构成，使用构成，使用标签标签标签标签来描述网页来描述网页来描述网页来描述网页 ，这些标签也称作，这些标签也称作HTMLHTML标签标签 （2 2）HTML HTML 标签由标签由尖括号包围尖括号包围的关键词构成，比如的关键词构成，比如 （3 3）HTML HTML 标签标签通常通常是是成对成对出现的，比如出现的，比如 和和 ，但某些但某些 HTML HTML 标签标签不不是是成对成对出现，比如出现，比如 （4 4）HTMLHTML标签对标签对中的中的第一个第一个标签是标签是开始标签开始标签，第二

7、个第二个标标签是签是结束标签结束标签 （5 5）尽量使用）尽量使用小写小写标签标签 1 HTML1 HTML概述概述 1.4 HTML1.4 HTML1.4 HTML1.4 HTML元素元素元素元素 HTML HTML 元素元素指的是从指的是从开始标签开始标签到到结束标结束标签签的的所有代码所有代码。（1 1）元素内容元素内容是开始标签与结束标签是开始标签与结束标签之间的内容之间的内容 （2 2）某些）某些 HTML HTML 元素具有元素具有没有内容没有内容，如，如(换行换行)1 HTML1 HTML概述概述 开始标签开始标签 元素内容元素内容 结束标签结束标签 这是一个段落这是一个段落 H

8、TMLHTML元素元素与与HTMLHTML标签标签的关系：的关系：HTMLHTML元素元素HTMLHTML标签标签+元素内容元素内容1.5 HTML1.5 HTML1.5 HTML1.5 HTML属性属性属性属性 属性为属性为 HTML HTML 元素元素提供附加信息提供附加信息。（1 1）HTML HTML 标签可以拥有属性。提供了有关标签可以拥有属性。提供了有关 HTML HTML 元素的更多的信息元素的更多的信息 （2 2）属性总是以）属性总是以名称名称/值对值对的形式出现，比如：的形式出现，比如：name=name=“valuevalue”（3 3）属性总是在）属性总是在 HTML H

9、TML 元素的开始标签中规定元素的开始标签中规定 （4 4）属性值要加引号：双引号是最常用的，单引号也没什么问题。属性值要加引号：双引号是最常用的，单引号也没什么问题。1 HTML1 HTML概述概述 属性属性实例：实例：HTML HTML 链接由链接由 标签标签定义。链接的地址在定义。链接的地址在 href href 属性属性中指定：中指定：中原工学院中原工学院 演示演示1.6 HTML1.6 HTML1.6 HTML1.6 HTML页面结构页面结构页面结构页面结构 HTML HTML HTML HTML的结构包括的结构包括的结构包括的结构包括头部头部头部头部（HeadHeadHeadHea

10、d）、）、）、）、主体主体主体主体（BodyBodyBodyBody）两大）两大）两大）两大部分：头部描述部分：头部描述部分：头部描述部分：头部描述浏览器所需的信息浏览器所需的信息浏览器所需的信息浏览器所需的信息；主体包含所要说明的；主体包含所要说明的；主体包含所要说明的；主体包含所要说明的具体内容具体内容具体内容具体内容。一个一个HTMLHTML页面的基本结构如下：页面的基本结构如下：1 HTML1 HTML概述概述 头部信息在这里设置头部信息在这里设置 HTML HTML 文件的正文写在这里文件的正文写在这里.1.7 HTML1.7 HTML1.7 HTML1.7 HTML页面页面页面页面

11、 示例示例示例示例 1 HTML1 HTML概述概述（演示）（演示）中原工学院信息商务学院中原工学院信息商务学院 学院简介学院简介中原工学院信息商务学院成中原工学院信息商务学院成立于立于2003年年4月，是首批经国家月，是首批经国家教育部批准的具有全日制普通本教育部批准的具有全日制普通本科学历教育办学资格的独立学院。科学历教育办学资格的独立学院。与与 之间的文本之间的文本描述网页描述网页 与与：描述网页头信息描述网页头信息：网页的标题网页的标题 与与 ：可见的页面内容可见的页面内容 与与 ：正文一级标题正文一级标题 与与 ：之间的内容表示一个：之间的内容表示一个段落段落 2 2 表格相关的表格

12、相关的HTMLHTML标记标记 表格主要由以下标签构成，表格标记表格主要由以下标签构成，表格标记、行标记、行标记、单元格标记、单元格标记。表头标记。表头标记 。标记表格的开始，标记表格的开始，标记行的开始，标记行的开始，与与之之间是单元格的内容，一个表格可以有多个间是单元格的内容，一个表格可以有多个和和标记。标记。的的border属性用来定义表格的属性用来定义表格的边框粗细边框粗细。班级班级学生人数学生人数空乘空乘80环艺环艺90效果效果规划网页布局，规划网页布局，表格表格是最常用的工具，表格在是最常用的工具，表格在网页中不仅可以排列数据，还可以对页面中的图网页中不仅可以排列数据，还可以对页面

13、中的图像、文本、动画等元素进行准确的定位，是页面像、文本、动画等元素进行准确的定位，是页面显得整齐有序、分类明确，便于访问者浏览。使显得整齐有序、分类明确，便于访问者浏览。使用表格布局网页，在不同平台和不同分辨率的浏用表格布局网页，在不同平台和不同分辨率的浏览器中都能保持原有的布局。览器中都能保持原有的布局。使用使用框架框架规划网页，可以把网页分成几个部分，规划网页，可以把网页分成几个部分，每个部分都是一个独立的每个部分都是一个独立的HTML页。本章主要介页。本章主要介绍使用表格和框架规划网页布局。绍使用表格和框架规划网页布局。3.1.1 表格的概念 Dreamweaver CSDreamwe

14、aver CS有有三种视图三种视图：代码，设计，拆分：代码，设计，拆分有有3 3种表格视图模式种表格视图模式：l 标准模式标准模式：最常用的编辑模式。：最常用的编辑模式。l 扩展表格模式扩展表格模式：该模式中，表格的边框会变得非常：该模式中，表格的边框会变得非常粗，间距会较大，便于选择较小的单元格及内容。粗，间距会较大，便于选择较小的单元格及内容。l 布局模式布局模式：可以通过拖动来绘制布局表格和单元格：可以通过拖动来绘制布局表格和单元格（查看（查看-表格模式）表格模式）3.1.2：插入表格：插入表格（演示）（演示）行、列行、列表格宽度表格宽度边框粗细边框粗细单元格边距单元格边距单元格间距单元

15、格间距页眉（页眉（粗体居中显示粗体居中显示）标题（标题（就是表格的标题就是表格的标题）摘要（摘要（不在浏览器中显示不在浏览器中显示）3.2.1 选择表格选择表格（演示）（演示）对于表格、行、列、单元格属性的设置对于表格、行、列、单元格属性的设置是以选中这些对象为前提的。是以选中这些对象为前提的。1：选择表格：选择表格（单击任何一个单元格，选择（单击任何一个单元格，选择）2：选择行：选择行 3：选择列：选择列 （鼠标拖动（鼠标拖动）4：选择单元格：选择单元格（单击任何一个单元格，选择（单击任何一个单元格，选择）5：选择不相邻的单元格：选择不相邻的单元格（按（按ctrl,再单击单元格）再单击单元格

16、）3.2.2 编辑表格和单元格编辑表格和单元格（演示）（演示）1.调整大小调整大小（鼠标拖动控制点（鼠标拖动控制点）2.更改行高和列宽更改行高和列宽（鼠标拖动（鼠标拖动 或或 属性工具栏）属性工具栏）3.删除和添加行列删除和添加行列（修改（修改-表格）表格）4.拆分与合并单元格拆分与合并单元格（修改（修改-表格）表格）设置表格设置表格（重点、演示）（重点、演示）5：设置表格属性：设置表格属性（选中表格，打开（选中表格，打开“属性属性”面板，设置各个选项面板，设置各个选项）6：设置单元格属性：设置单元格属性（选中一个或多个单元格，打开（选中一个或多个单元格，打开“属性属性”面板面板）7：剪切、复

17、制和粘贴单元格：剪切、复制和粘贴单元格l剪切和复制单元格剪切和复制单元格 l粘贴单元格粘贴单元格8：导入导出数据导入导出数据l导入导入文件文件-导入导入-表格式数据表格式数据l导出导出文件文件-导出导出-表格表格3.3 使用表格规划网页布局使用表格规划网页布局为了区别传统表格的功能，简化使用表格进行页为了区别传统表格的功能，简化使用表格进行页面布局的过程，面布局的过程，DW在表格中提供了在表格中提供了“布局模式布局模式”注意：注意：在这种模式下，表格和单元格在这种模式下，表格和单元格边框边框是没有宽度的。是没有宽度的。布局表格布局表格可以将页面布局分隔成可以将页面布局分隔成区域区域，当在一个区

18、，当在一个区域中编辑时不会影响到其他区域。域中编辑时不会影响到其他区域。布局单元格布局单元格不能重叠。不能重叠。绘制布局表格和布局单元格绘制布局表格和布局单元格切换到布局模式切换到布局模式常用工具栏上按钮常用工具栏上按钮“绘制布局表格绘制布局表格”常用工具栏上按钮常用工具栏上按钮“绘制布局单元格绘制布局单元格”注意：注意：l默认表格默认表格边框边框为绿色，为绿色，背景背景为灰色。为灰色。l可以自动捕捉已有表格或单元格的边界。可以自动捕捉已有表格或单元格的边界。3.3.2 设置属性设置属性1.设置布局单元格的格式设置布局单元格的格式 (方法方法)固定和自动伸展固定和自动伸展高高背景颜色背景颜色水

19、平水平：设置单元格内容的水平对齐方式；：设置单元格内容的水平对齐方式；垂直垂直：不换行不换行：选中表示在输入内容时自动改变布局单元格的：选中表示在输入内容时自动改变布局单元格的宽度，不会换行。宽度，不会换行。3.3.2 设置属性设置属性2.设置布局表格的格式设置布局表格的格式 (方法方法)填充填充：内容与单元格边框之间的距离。：内容与单元格边框之间的距离。间距间距：布局单元格之间的距离。：布局单元格之间的距离。用表格用表格 制作日历制作日历新建一个站点。如新建一个站点。如“表格练习表格练习”插入表格，插入表格，1行行1列，居中，用于放置图片。列，居中，用于放置图片。插入表格，插入表格，6行行7列，边框数值为列，边框数值为1，单元格，单元格边距和间距各为边距和间距各为1，边框颜色为，边框颜色为“#FFFFCC”居中。用于输入日期。居中。用于输入日期。保存浏览。保存浏览。