Xhtml中加入媒体元素.ppt

Xhtml中加入媒体元素,2,音频,音频标记 内嵌音频播放插件 IE中背景音乐,3,音频标记 可以播放的音频格式：midi音乐、wav音乐、au格式、aiff格式、mp3等 格式：热点 实例,4,内嵌音频播放插件 在浏览器中弹出控制面板进行音乐的播放 格式： 其他的属性： autostart=“true”|“false” 自动播放，默认值是false loop=“true“|”false“|整数值 重复播放与否或次数，无限次重复设定值为“true“,5,starttime=“分:秒” 开始播放的时间 endtime=“分:秒” 结束播放的时间 volume=“0-100” 音乐音量的大小 width|height=“整数” 面板的宽度/高度 align=“top|center|bottom|baseline|left|right|texttop|middle|absmiddle|absbottom“ 面板和旁边文字的对齐方式,6,controls=“console|smallconsole|playbutton|pausebutton|stopbutton|volumelever” 定制面板，默认值是console hidden=“true“|”false” 默认值是false EnableContextMenu=“true“|”false” 是否响应右键菜单,7,视频,IE中的背景音乐 Loop=“-1|infinite|整数值”,8,XHTML简介 创建基本网页文档 文档的基本结构 常见标记的使用 标签规范,9,关于XHTML,XHTML是 EXtensible HyperText Markup Language(可扩展超文本标记语言) 的英文缩写 2000年1月26日被国际标准组织机构W3C(World Wide web Consortium)定为一个标准，是一种增强了的HTML /验证你的网站是否符合标准：XHTML1.0认证和CSS验证 （/）,10,手动创建网页文档,打开记事本，输入如下内容，并保存。 我是这个网页的标题 这是我的第一个网页。 ,11,Dw中创建网页文档,12,总结,Xhtml文档是一个文本文件 Xhtml文档由一些”包含的控制标记（tag）来构成的。 标记的格式：受标记影响的内容 标记具有一系列的属性来控制信息的效果 格式：受影响的内容 ,13,注意以下几点： 每个标记都要用“”（大于号）括起来且 “”与标记名之间不能留有空格或其他字符。 在标记名前加上符号“/”便是其结束标记，表示该标记内容的结束，如。标记也有不用结尾的，称之为单标记。 属性可以有多个，而且没有先后顺序。,14,文档结构, 页面标题 这里是页面的内容部分，注意内容与浏览器边缘的距离 ,声明文档类型,文档根标记,文档头标记,文档体标记,15,声明文档类型 或者DOCTYPE声明，用来说明你用的XHTML或者HTML是什么版本，放在xhtml文档的最顶部。 其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。,16,XHTML 1.0 提供了三种DTD声明可供选择： 过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下： 严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如。完整代码如下： 框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下： ,17, “xmlns“是XHTML namespace的缩写，叫做“名字空间“声明。 由于xml允许你自己定义自己的标识，不同的人定义的标识可能相同，但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生，XML采用名字空间声明，允许你通过一个网址指向来识别你的标识。 小王和小李都定义了一个标识，如果小王的名字空间是““，小李的名字空间是““，那么当两个文档交换数据时，也不会混淆标识，因为它属于不同的名字空间。 XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字空间都相同，就是“/1999/xhtml”。 lang=“gb2312“,指定你的文档用简体中文。,18,Meta标签 meta name=“参数” content=“具体的参数值” name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类。重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词）。 meta http-equiv=“参数” content=“参数变量值” 定时让网页在指定的时间n内，跳转到页面http:/yourlink；,19,关于文档结构的一些问题 如果文档体进入到文档头，是否能正常显示？ 如果文档头进入到文档体，是否能正常显示？,20,标记规范,1.所有的标记都必须要有一个相应的结束标记 单独不成对的标签，在标签最后加一个“/“来关闭它。 ,21,2.所有标签的元素和属性的名字都必须使用小写 XHTML对大小写是敏感的，大小写夹杂也是不被认可的。 和是不同的标签。通常dreamweaver自动生成的属性名字“onMouseOver”也必须修改成“onmouseover”。 用id属性代替name属性,22,3.所有的XML标记都必须合理嵌套 所有的嵌套都必须按顺序，一层一层的嵌套必须是严格对称。 必须修改为： ,23,4.所有的属性必须用引号“括起来 必须修改为： ,24,5.把所有），为 空格，为 ；也可以输入中文全角空格 双引号（“），为"； 版权符号（），为©； 注册符号（），为®；,25,6.给所有属性赋一个值 XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如： 必须修改为： ,26,7.不要在注释内容中使用“-” “-”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。 用等号或者空格替换内部的虚线。 ,27,常见标记的使用,段落标记 文本标记 超链接标记 图像标记 表格标记 表单标记,28,强制换行标记 格式： 文字 由于xhtml中Enterprise键产生的换行符会被忽略掉，要换行就必须使用这个标记。 不换行标记 格式：文字 对于输入公式、数字等信息时，会用到。,段落标记 1 换行标记 /,29,段落标记放在一个段落的头尾，用于定义一个段落。.标记不但能使后面的文字换到下一行，还可以使两段之间多一空行，相当于两个标记。 段落标记的格式为： 文字 其中属性align用来设置段落文字在网页上的对齐方式：left（左对齐）、center（居中）和right（右对齐）。缺省时默认为left。,2 段落标记.,30,在页面中插入一条水平标尺线，单独一行的形式，并加入一条水平线段。 水平线标记的格式为： size设定线条粗细，以像素为单位，默认为2。 width设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。 color设定线条色彩，默认为黑色。可以采用色彩的名称。,4 水平线标记,31,在浏览器中的显示效果如图所示。,5 段落标记综合实例,图 段落标记综合实例,32,在页面中，标题是一段文字内容的核心，需用加强的效果来表示。标题文字标记的格式为： 标题文字 #用来指定标题文字的大小，#取16的整数值，取1时文字最大，6时文字最小。 该标记缺省显示宋体，在一个标题行中无法使用不同大小的字体。 与用定义的网页标题不同，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。,文字标记 1 标题文字标记,33,设置文字的标题。本例文件在浏览器中的显示效果如图所示。,2文字标记实例,图 文字标记综合实例,34,超链接（Hyperlink）是网页互相联系的桥梁，超链接可以看作是一个“热点”，它可以从当前网页定义的位置跳转到其他位置。 浏览网页是超链接最普遍的一种应用，通过超链接还可以获得不同形态的服务，如文件传输、资料查询、电子邮件、远程访问等。 当网页包含超链接时，网页中的外观形式为彩色（一般为蓝色）且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显示文本或图片时，将变成手形。超文本链接使用锚点标记来定义。,超链接,35,锚点（anchor）标记由定义，它在网页上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资源（目标资源），这个目标资源有惟一的地址（URL）。 锚点标记： 热点 href属性为超文本引用，它的值为一个URL，是目标资源的有效地址。 空链接，用“#”代替URL： 热点 target属性设定链接被单击后结果所要开始窗口的方式。可选值为：_blank，_parent，_self，_top，mainframe（框架名称）。,1 锚点标记.,36,(1) 链接到同一目录内的网页文件 格式为： 热点文本 (2) 链接到下一级目录中的网页文件 格式为： 热点文本 (3) 链接到上一级目录中的网页文件 格式为： 热点文本 (4) 链接到同级目录中的网页文件 格式为： 热点文本 ,2 指向其他页面的链接,37,要在当前页面内实现超链接，需要定义两个标记： 超链接格式为： 热点文本 书签格式为： 目标文本附近的字符串 引申：指向其他页面某处的文本，格式为： 热点文本 指向其他文件的某一部分，格式为： 热点文本 ,3 指向本页中的链接,38,如果链接到的文件不是HTML文件，则该文件将作为下载文件，其格式为： 热点文本 5 指向电子邮件的链接 单击指向电子邮件的链接，将打开缺省的电子邮件程序，如FoxMail、Outlook Express，并自动填写邮件地址。 格式为： 热点文本 ,4 指向下载文件的链接,39,超链接综合实例。在浏览器中的显示效果如图所示。,6 超链接综合实例,图超链接综合实例,【例4-4】,40,（1） 设置背景色 格式为： （2） 用图片作为背景 格式为： 图片文件可为GIF格式或JPEG格式的文件。 在浏览器中，作为背景的图片将按原来的大小复制，重复铺满整个网页。,图像 1 网页的背景,41,使用图片标记，可以把一幅图片加入到网页中。用图片标记还可以设置图片的替代文本、尺寸、布局等属性。 格式为： 如果不设定图片的尺寸，图片将按照其本身的大小显示。 align属性的取值！,2 图像标记,42,align属性：关于图像的环绕方式： 如果不设置文本对图片的环绕，图片在页面会占一片空白。 设置文本环绕方式后，将一直有效，直到遇到下一个设置标记。如果想取消文本环绕图片，可使用标记，其后的文本将不再环绕图片。格式为： 其中clear的取值可为：left（解除在图片左侧放置的文本）、right（解除在图片右侧放置的文本）或all（解除在图片左、右侧放置的文本）。,43,图像也可作为热点，单击图片则跳转到被链接的文本或其他文件。格式为： ,3 用图像作为热点,44,图像应用综合实例。本例文件在浏览器中的显示效果如图所示。,4图像应用综合实例,图像应用综合实例,45,最简单的表格仅包括行和列。表格的标记为，行的标记为，表项的标记为。格式为： 标题 表头1 表头2 表头n 表项1 表项2 表项n 表项1 表项2 表项n ,表格 1 简单表格,46,在缺省下，表项居于单元格的左端。可用列、行的属性设置表项数据在单元格中的位置。 (1) 水平对齐 表项数据的水平对齐用标记、和的align属性。align的属性值分别为：center（表项数据的居中）、left（左对齐）、right（右对齐）或justify（左右调整）。 (2) 垂直对齐 表项数据的垂直对齐用标记、和的valign属性。valign的属性值分别为：top（靠单元格顶）、bottom（靠单元格底）、middle（靠单元格中）或baseline（同行单元数据项位置一致）。,2 表格内文字的对齐方式,47,表格在浏览器窗口中的位置也有三种：居左、居中和居右。格式为： 当表格位于页面的左侧或右侧时，文本填充在另一侧。当表格居中时，表格两边没有文本。当align属性缺省时，文本在表格的下面。,3 表格在页面中的对齐方式,48,在、标记中，使用下面属性可以改变表格的背景和边框的色彩、添加背景图片，也可以为行和单元格改变色彩、添加背景图片。 bgcolor=“色彩或色彩值“ 设置背景色彩 background=“图片文件名“ 设置背景图片 bordercolor=“色彩“ 设置表格边框的色彩 bordercolorlight=“色彩“ 设置表格边框亮部的色彩 rules=“row,cols或none“ 设置表内线的显示方法，none为无内线 如果把属性放到中，其作用范围为整个表格，如果把属性放到中，则作用范围为整个行，如果把属性放到、中，则作用范围为该单元格。,4 表格的色彩和图片背景,49,表格应用综合实例。本例文件在浏览器中的显示效果如图所示。,5表格应用综合实例,图表格应用综合实例,50,框架（Frames）也称多窗口页面或帧，是在同一浏览器窗口中显示多个相互隔离的XHTML页的结构，每个区域显示一个XHTML文件。 1 建立框架 框架的建立使用、两个标记。 基本结构为： . ,框架（多窗口页面）,51,(1) 标记 标记用来定义一个框架组的属性，格式为： 其中属性： rows 设定横向分割的框架数目 cols 设定纵向分割的框架数目 border 设定边框的宽度 bordercolor 设定边框的色彩 frameborder 设定有无边框 framespacing 设置各窗格间的空白,52,的rows和cols属性用于设定横向分割和纵向分割的框架数目。例如，要建立有三个横向框架的页面，可写为： 分别的含义： x： y： z：,53,(2) 标记 标记用于给各个框架指定页面的内容，是一个单标记，格式为： 标记的个数应等于在标记中所定义的框架数，并按在文件中出现的次序按先行后列对框架进行初始化。如果标记数目少于中定义的框架数量，则多余的框架为空。,54,纵向排列多个窗格。本例中用到的其他HTM文件是在前面例题中建立的文件。本例文件在浏览器中显示的效果如图所示。,图 纵向排列多个窗格,55,在很多网页中，常在一个框架中显示一个所有网页内容的目录，而通过单击其中的某项，在另一个框架中显示相应内容。这些目录是热点文本，需要在框架之间建立超链接，并指明显示的目标文件的框架。 target=“_blank“：链接的目标文件被显示在一个新的没有名字的浏览器窗口中。 target=“_self“：链接的目标文件被显示在当前框架窗口中，代替正在显示的热点文本所在的那个文件，是省略target属性的默认值。 target=“_top“：链接的目标文件被显示在整个浏览器窗口（取消了框架）。 target=“_parent”：当框架嵌套时，链接的目标文件被显示在父框架中；否则，被显示在整个浏览器窗口中。,2 框架间的链接,56,3框架应用综合实例,制作一个框架集，包含上、下框架，下框架又分为左、右两部分，并实现框架间的链接。本例文件在浏览器中显示的效果如图所示。,框架应用综合实例,57,网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。在网页中，通过表单交流和反馈信息。格式为： ,表单 1 表单的标记.,58,使用标记的type属性，可以在表单中加入表项，并控制表项的风格。type属性值为text，则输入的文本以标准的字符显示；type属性值为password，则输入的文本显示为“*”。 在表项前应加入表项的名称，如“您的姓名”等，以告诉浏览者在随后的表项中输入的内容。,2 文字和密码的输入,59,如果浏览者想清除输入到表单中的全部内容，可以使用标记中的type属性所设的重置（r