Web应用程序客户端界面设计第2章.ppt

,第二章 XHTML基础,回顾,HTML标签区分大小写吗？ HTML的基本结构并说明各部分的含义。 网络经过那几个阶段。 http协议包含几个部分，分别是什么。,预习检查,分隔线标签是那个。 图片标签是什么。有什么属性。 创建一个表格必须需要哪些标签？,目标,XHTML语法基础,扩展名.htm或.html 元素 开始标记 结束标记 元素内容 空标记 属性 元素和属性的名字必须小写,本文本是一个示例段落,定义HTML文档总体结构, 标题部分 .文档正文部分. ,所有的XHTML文档都有三个文档级的元素：html、head和body,XHTML元素,注释 文档正文标题 段落 引用文本 列表 预编排文本 分区块 跨字符 实体 超级链接 图形 多媒体信息 表格 插入其他网页,注释,注释不会出现在浏览器中 标识了注释的结束。 注释内容中间不能出现-。,定义正文标题,六个级别的正文标题，标题重要性随标签的数字递减 标题以较大的粗体显示,Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6,定义一个段落,段落元素p用于将文本界定为整个段落,段落示例1 段落示例2 段落示例3,定义引用文本,blockquote元素用于界定一个引用文本块 blockquote将段落缩进，使其与周围的文字偏离,独立宣言的一段： HTML文档是由HTML元素构成的文本文件。HTML元素是通过使用HTML标签进行定义的。HTML标签 HTML标签是用来标记HTML元素的。 HTML标签被和符号包围。 这些包围的符号叫作。 HTML标签是成对出现的。例如b和/b。 位于起始标签和终止标签之 ,定义列表,三种不同类型的列表 有序列表：用元素ol定义 无序列表：用元素ul定义 定义列表：用元素dl定义 用于表示多行单列或者单行多列的数据：,无序列表示例 编写XHTML文件 编写XML文件 编写JSP文件 有序列表示例 编写XHTML文件 编写XML文件 编写JSP文件 定义列表示例 猫 一个奴役自己的动物 手电筒 使用电池的设备 白痴 不知道如何做事，却假装很重要的人 ,有序列表序号类型,Type=“1” 数字序列 Type=“a” 字母序列 Type=“i” 罗马数字序列,定义预编排文本,预编排元素pre可以使文本完全按照源文件中的编排格式，一模一样地在浏览器中显示。, 2.9 + 1.2 - 4.1 ,定义分区块文本,div通常和CSS一起用于页面布局, .bordered border-style:solid; 这是一个常规段落 这是一个用div样式界定的段落 ,跨越多个字符,跨字符元素span用于将内嵌样式跨越多个字符或词 span是内嵌元素, .emphasis color:red; text-decoration: underline; font-weight: bold; 这段文本被重要强调，而这段文本没有。 ,特殊字符（实体）,这是一个XHTML标记 1983-2003 Microsoft Corporation. 保留所有权力,创建超链接,描述文本,Microsoft公司网站,绝对链接和相对链接,创建锚点,第一章,转到第一章,链接标题、快捷键与Tab次序,更多的信息可以在 这里 找到 Table of Contents 这是第一个链接 这是第二个链接,在网页中显示图形,使用object插入flash,使用object插入多媒体信息,为什么使用表格,表格应用场合 论坛 门户网站 购物网站,论坛中应用表格,门户网站应用表格,购物网站应用表格,表格的基本结构,行,列,单元格,在 HTML 文档中，广泛使用表格来存放网页上的文本和图像,表格的基本语法, 单元格内容 ,border用来设置表格边框尺寸大小,如何创建表格, 移动 联通 铁通 IBM 惠普 华硕 ,什么是跨行跨列的表格,跨3列,跨3行,下图中的表格哪里用了跨行？哪里用了跨列？ 跨了几行几列?,跨多列的表格, 学生成绩表 英语 数学 语文 95 98 89 ,COLSPAN=“n” 属性表示跨多少列？,跨多行的表格, 早上菜谱 食物 鸡蛋 饮料 牛奶 甜点 开心粉 ,rowspan =“n” 属性表示跨多少行？, 手机充值、IP卡 办公设备、文具 各种卡的总汇 铅笔 彩笔 打印 刻录 ,如何创建跨行跨列的表格,小结1,编写如下图所示效果对应的html代码,第一行第一个格子跨了2行,此格子跨了3列,什么是表格的美化修饰,根据理解,下面表格应该从哪些方面进行美化修饰？,如何设置表格的尺寸和边框, 品牌商城 笔记本电脑 办公设备、文具、耗材 惠普 华硕 打印机 刻录盘 ,width用来设置表格的宽度 height用来设置表格的高度,border用来设置表格边框尺寸大小,bordercolor用来设置表格边框颜色,如何设置背景, 笔记本电脑 办公设备、文具、耗材 ,background属性用来设置表格的背景图片,bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝 ，下图就是RGB颜色对照表 。,如何设置对其方式, 笔记本电脑 办公设备、文具、耗材 惠普 华硕 打印机 刻录盘 ,align属性用来设置表格、行、列的对齐方式,为什么要使用填充属性,单元格里的内容太靠近边线，怎么办？,未填充的效果，字与单元格边框之间的距离靠得太近,什么是填充属性和间距属性,border(边框的厚度),cellpadding (单元格填充),cellspacing (单元格间距),如何使用填充、间距属性,border(边框的厚度),cellpadding (单元格填充),cellspacing (单元格间距), ,如何设置表格的填充属性, 笔记本电脑 办公设备、文具、耗材 . ,cellspacing属性用来设置表格内框宽度 cellpadding属性用来设置表格内填充距离,填充之后的效果,小结2,表格的高度、宽度、背景图像、边框和填充属性,行的背景色,单元格居中对齐,编写如下图所示效果对应的HTML代码,如何实现图文内容的布局，达到如左图所示页面的效果？ 分析上图所示页面，应该用什么进行布局？,什么是表格布局,使用表格进行布局,用表格对网页的内容进行整体控制,如何使用表格进行布局,使用表格布局下图，需要几行几列？,需要7行2列,如何使用表格进行布局, 超值变形金钢2.5折! 人们为啥对电视吼叫 ,编写如下图所示效果对应的html代码,小结3,跨2行，并放了一副图片,此单元格放了一副图片,此单元格跨了3列,用iframe实现框架结构,用超链接在iframe中打开网页,块级元素与内嵌元素,XHTML元素分为块级元素和内嵌元素两种类型，二者的不同之处在于块级元素定义的文本是换行的，而内嵌元素定义的文本是不换行的。 常见的块级元素包括：div、blockquote、列表元素（dl、ol、ul）、fieldset、form、h1-h6、hr、p、pre、table等。 内嵌元素包括：span、a、img、label、所有的表单输入元素、iframe、object等。 在没有后面我们要学到的CSS指定元素的位置、高度、宽度情况下，浏览器按照默认的文本流的输出规则，在浏览器窗口中输入HTML元素，即： 如果是内嵌元素，下一个元素就显示在该元素同一行上的后续位置。 如果是块级元素，下一个元素就在浏览器下一行显示。 元素中的文本按照元素的级别，浏览器使用不同大小的默认字体表示。例如，H1一直到H6采用不同大小的字体在浏览器中显示。,总结,XHTML文档由元素组成，元素定义了文本和图形在浏览器中显示的方式，告诉Web浏览器如何显示页面。 XHTML元素使用XHTML标记定义，每个标记都出现在一对尖括号（）中。标记通常成对出现，第一个标记定义了标记的起点，称为“开始标记”；第二个标记定义了标记的结尾，称为“结束标记”。在开始标记和结束标记之间的文本称为元素内容。 标记具有属性，属性提供了关于页面上XHTML元素的附加信息。 XHTML文档的总体结构由、这三个文档级的标记构成。 XHTML包含了几个块级的标记来限定和格式化段落文本。这些标记包括：、到、。 创建超链接的XHTML标记为。 创建图形信息的XHTML标记为。 创建多媒体信息的XHTML标记为。 在网页中创建表格信息的XHTML标记为。 XHTML