HTML框架表单多媒体.ppt

HTML、CSS、JavaScript网页制作,学无止境乐在其中,第4章HTML框架、表单、多媒体,4.1框架集、框架标记4.2表单标记4.3IE浏览器滚动字幕、背景音乐与多媒体4.4XHTML播放多媒体标记,4.1框架集、框架标记,框架可以将浏览器窗口划分为若干个区域，在每个区域内显示一个独立的页面，使用框架可以在一个浏览器同时显示多个不同的独立页面，可以方便地进行网页导航。但如果框架太多包含很多不同内容的页面可能会让用户感到困惑而顾此失彼。XHTML1.0的Frameset框架型DTD保留了框架，而标准的XHTML1.1则不再支持框架。因此使用框架集的XHTML文档必须指定为FramesetDTD框架型XHTML1.0文档。,4.1.1框架集文档的基本结构,框架集文档实际上并不包含任何页面内容，它只是告诉浏览器将浏览器窗口如何排列、每个框架加载哪个HTML页面。框架集框架1框架2子框架集子框架浮动框架也可用于不支持框架时显示的页面内容|,注意：框架集不允许与标记同时使用，只有在为不支持框架的浏览器而设置的标记内可包含,4.1.2框架集标记,框架浮动框架不支持框架时显示的页面内容标记定义框架集，用于包含多个框架(窗口)，指定框架数量、尺寸、间距、颜色及排列方式可内嵌框架集。rows按行纵向划分各框架上下排列cols按列横向划分各框架左右排列注意：rows、cols属性不要同时使用，否则容易引起混乱。rows|cols属性值的个数是包含框架或子框架集的个数，属性值的个数为框架数量，属性值的大小为框架的尺寸，可使用数字(像素)、%浏览器或父框架百分比、*表示剩余空间多个*则平均分配。例如：cols=80,*,30%表示3列3个框架，第1个80像素，第3个占窗口30%，第2个为剩余空间。,框架集标记其他属性,framespacing设置框架集中框架之间的间隔宽度，也就是框架轮廓之外的外边距宽度，默认2(像素)frameborder设置框架集中框架外边距是否可见，取值1外边距颜色可见、取值0外边距颜色不可见透明白色的空白区域bordercolor设置框架集中框架外边距的颜色，默认与边框一体凸起灰白色。如果framespacing外边距或frameborder可见性设置为0，则颜色设置无效。注意：框架集用frameborder设置框架外边距的可见性，而框架用frameborder设置边框的可见性，在IE7浏览器中这两个属性的设置会相互影响。一般情况下框架集frameborder默认为1外边距可见，但如果框架集中所有框架都用frameborder=0设置轮廓线不可见，则框架集frameborder将默认为0外边距不可见，此时如果显示外边距颜色则必须设置frameborder=1。内嵌框架集默认采用外层父框架集的设置，也可独立设置覆盖父框架集的设置。,4.1.3框架标记,按顺序定义框架集中的一个框架，必须在内使用。src指定显示在该框架中的页面文件URL。id|name为框架定义唯一名称针对不同浏览器可同时使用scrolling设置滚动条：auto(默认)需要时yes总是有no没有noresize设置框架是否可调整：默认可调整、noresize固定marginheight定义框架的上下内边距内容与边框的距离marginwidth定义框架的左右内边距frameborder设置边框是否可见：1可见(默认)0不显示如果未设置框架frameborder则继承框架集的该属性如果框架集frameborder默认或设置为1外边距可见，则所包含框架的边框默认为1可见，如果框架集设置为0则所包含框架的边框默认为0不可见如果显示框架边框则必须设置为1。若所有框架frameborder设置为0则框架集frameborder会默认为0外边距不可见。在框架内的页面中使用链接时，可使用target属性将页面链接到id|name指定的任意框架或_self当前框架(默认)、_blank新窗口、_parent父框架、_top顶层浏览器窗口。链接文本,4.1.4不支持框架标记,不支持框架时显示的页面内容标签必须用于标记内，仅为不支持框架的浏览器提供备用显示页面，对支持框架浏览器无效忽略标记内可以使用定义完整独立的页面或者直接超链接到某个页面。例如：对不起，您的浏览器不支持框架网页的显示。可在此定义相关的页面，或者使用：点击这里查看其它相关页面。,【例h4-1.html】框架示例,用rows设计上下3行的框架集，框架外边距蓝色5像素。第1个框架高度100，无滚动条不可调整大小。第2个框架高度为剩余浏览器高度总有滚动条、没有边框轮廓线。第3个框架高度为浏览器25%，自动使用滚动条(默认)、水平与垂直内边距50像素。按行使用框架对不起，您的浏览器不支持框架网页的显示。点击这里查看相关页面。,【例h4-2.html】用默认属性按列使用框架,按列使用框架浏览器不支持框架点击这里显示页面,【例h4-3.html】使用框架嵌套,框架嵌套浏览器不支持框架点击这里显示页面,【例】利用框架实现导航,1、创建框架集页面h4-4.html，注意设置框架的id|name属性导航框架浏览器不支持框架点击这里显示页面,【例】利用框架实现导航导航页面h4-5.html,注意用超链接target属性指定框架的id|name。另外本文档使用CSS设置取消了默认超链接的底划线和颜色变化。导航页面afont-size:16pt;color:#000;text-decoration:none;页面布局top书目介绍bottom美国总统_self,【例】导航页面h4-5.html,表格背景(_self)使用图像_top图像映射_parent163网站_blank注意：target属性值内前后不能有空格，否则等同于_blank打开新窗口。本例中_top顶层浏览器窗口与_parent父框架等价，都在当前浏览器页面中打开链接页面，可使用浏览器“返回”或“后退”按钮返回原页面。,【例h4-6.html】用框架集链接外部网页,第1行显示“./cha3/h3-27.html”页面并设置轮廓不可见、无滚动条、不可调整大小。第2行内嵌框架集外边距设置蓝色6像素，分别用框架链接显示新浪、网易163主页。框架集页面,4.1.5浮动框架标记,是一个行内双标记，可用于在页面中创建一个内联“浮动”框架内部窗口，以打开另外一个独立页面或一幅图像。width设置浮动框架宽度height设置浮动框架高度align设置浮动框架在页面中的对齐方式left、right、center其他id|name指定唯一名称、scrolling滚动条(默认auto需要时、yes总是有、no没有)、marginheight上下、marginwidth左右内边距等属性与框架标记用法相同。同样，在标记target属性中指定的id|name属性可以将链接页面加载到指定的浮动框架中。注意：在不支持的浏览器中，则不可见。,【例h4-7.html】普通页面中使用浮动框架,使用浮动框架使用浮动框架在框架集frameset或页面body中可创建内联“浮动”框架内部窗口，以打开另外一个独立页面或一幅图像。点击这里可在第一个浮动框架中浏览表格布局页面。点击这里可在第二个浮动框架中浏览图像映射页面。,4.2表单标记,到目前为止所能设计的网页都属于静态网页，用户只能单向从网站获取浏览信息，即使使用JavaScript也只能实现视觉上的动态效果，而不是真正意义上的动态网页。实际上HTML是一条双行通道，用户也可以通过网页向网站服务器提交发送信息，由服务器的处理程序收集保存，具有向服务器提交信息功能的网页就是所谓的动态网页。动态网页由两部分构成：用表单收集并发送用户信息的HTML页面接收处理用户信息并对用户作出响应的后台服务器程序在HTML页面中能接受用户输入信息并提交发送给服务器的标记统称为表单，表单是用户通过页面与网站服务器进行交互的工具，可实现网络注册、登录验证、问卷调查、信息发布、订单购物等功能。本书只介绍HTML页面中使用的表单标记，有关接收处理用户信息的后台服务器程序可参阅ASP、JSP、PHP等相关书籍。,4.2.1创建表单标记,位置任意只在中才能发送服务器正常显示不发送给服务器标记负责收集用户输入信息、并在用户点击提交按钮时将这些信息发送给action指定的服务器程序。在html页面内任意位置插入标记即可创建表单，一个页面可创建多个表单发送给不同服务器程序。action指定接受表单数据的服务器URL|mailto:Email地址URL可以是绝对或相对路径，#表示当前页面自己id|name定义表单惟一名称多表单时区分，建议使用idmethod指定传送数据的HTTP方法get方法(默认)：将信息用direction滚动方向：left(默认),right,up,downbehavior滚动方式：scroll循环(默认),slide一次,alternate往复loop循环次数(默认无限)behavior=slide时loop为准scrollamount滚动速度每次移动文字的距离，越大越快scrolldelay滚动延时(毫秒)每次移动时间间隔,越小越快注意：字幕的移动效果应使用滚动速度scrollamount与滚动延时scrolldelay协调配合。,4.3.1IE浏览器滚动文字标记,【例h4-16.html】滚动文字,添加滚动字幕添加滚动字幕设置字体的默认滚动设置了背景的默认滚动效果设置了范围、外边距和背景的默认滚动效果春晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。,【例h4-17.html】滚动方向、方式、速度,字幕的滚动方向方式和速度字幕的滚动方向方式和速度我向左无穷循环，速度慢我向右循环5次，速度快我只向上移动一次我向下移动，上下往返5次目前的滚动字幕各自占据自己的空间，互相不重叠，可以通过CSS设置滚动字幕浮动在页面内容之上滚动。,4.3.2IE浏览器播放背景音乐标记,标记可以将midi、avi、mp3格式的音乐或音频文件作为网页背景音乐播放。src指定音频文件的绝对或相对路径及文件名loop用数字指定播放次数，默认播放1次，取值-1或infinite为无限循环,【例h4-18.html】添加背景音乐,添加背景音乐bodyfont:18pt楷体_gb2312;color:navy;/*图片右上角对齐*/background:url(img/p4-2.jpg)no-repeat100%0%;h1font-family:黑体;text-align:center;color:black;水调歌头-明月几时有明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒，起舞弄清影，何似在人间。转朱阁，抵绮户，照无眠。不应有恨，何事偏向别时圆。人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。,4.3.3IE浏览器播放多媒体标记,标记是一个行内标记，可以播放音频音乐MP3、MID、WAV，视频电影WMV、AVI、ASF、MPEG和SWF、Flash动画等多媒体文件。src指定音频或视频文件的绝对或相对路径及文件名hidden是否隐藏播放面板false|no(默认)不隐藏true隐藏autostart自动播放false|no(默认)不自动播放true自动播放loop循环播放false|no(默认)只播放一次true循环播放type指定播放文件的MIME类型wmode指定播放模式，默认不透明，transparent透明注意：对Flash动画文件若不设置width、height则采用原图尺寸，视频文件若不指定会采用默认播放器插件尺寸，音频文件若不指定则播放器不可见但会占据页面固定的空间。如果指定了播放插件大小，但使用hidden=true隐藏播放插件，则播放插件大小无效仍占据页面固定空间。,标记type属性值,audio/x-wavWAV音频audio/basicAU音频audio/mpegMP3、RM音频audio/midiMID音频audio/x-ms-wmaWMA音频audio/x-pn-realaudio-pluginRealAudiovideo/x-msvideoAVIvideo/x-ms-wmvWMVvideo/mpegMPEG视频video/quicktimeQuickTime,【例h4-19.html】播放音频文件、flash文件,第一个播放音频，由于设置隐藏所以设置插件大小无效仍占据默认固定空间。播放音频、flash文件隐藏、自动循环播放音频文件播放flash文件去掉hidden=true或改为flase则会按指定大小显示播放器，此时若只去掉width、height则相当于隐藏播放器。,【例h4-20.html】播放视频文件,播放视频文件自动循环播放视频文件以下链接国内外新闻,4.4XHTML播放多媒体标记,将图像或多媒体音频、视频文件包含到网页中最简单、最可靠的方法是使用超链接标记链接到这些文件，就像链接另一个html文件。当用户单击链接文本时可以“打开”播放或“保存”这些文件。为了将多媒体放到网页，浏览器开发商最初提供了多种相互冲突的解决方案，例如对的扩展以及标记也曾十分流行，最终都已被XHTML标准的取代。注意：XHTML不支持标记。,4.4.1嵌入对象标记、,标记可定义一个嵌入页面的多媒体或Apple对象，由于并不是所有浏览器都支持标记(如Opera浏览器不显示任何内容)，因此同时提供了一个所有浏览器都能支持解决方案：如果不能显示则执行标记内的代码，就是说可以在标记内嵌套针对不同浏览器的或作为候补替换文本，实现最大程度地与浏览器兼容。,1、嵌入播放器对象标记,可位于head或body内classid指定浏览器引用对象的URL通常是Java类的IDwidth/height指定嵌入对象的宽度高度name指定对象的唯一名称以便在脚本中使用codetype指定classid所引用代码的MIME类型codebase指定对象URL的基准URLstandby指定对象在加载过程中所显示的文本archive指向与对象相关的资源文件URL列表空格分隔data指定对象需要处理的数据文件的URLtype指定data指定文件的数据MIME类型declare指定对象仅可被声明不能创建直到得到应用usemap指定与对象一同使用的客户端图像映射的URLXHTML不赞成align、border、hspace、vspace属性,2、为嵌入对象提供参数标记,标签必须在或标签内使用，每个为包含它的或对象提供一个参数。name可指定的参数名称及对应value参数值：src|url|movie针对不同播放器不可同时使用src指定RealPlayer播放器播放的音频或视频文件URLurl指定MediaPlayer播放器播放的音频或视频文件URLmovie指定flash播放器播放的flash文件URL，一般使用srccontrols|uiMode针对不同播放器不可同时使用controls指定RealPlayer播放器按钮，默认All全部可用uiMode指定MediaPlayer播放器按钮，默认full全部可用loop是否循环播放，取值为：false(默认)、trueautostart是否自动播放，取值为：false(默认)、truetype指定播放文件的MIME类型：WAV音频：audio/x-wavAU音频：audio/basicMP3音频：audio/mpegMID音频：audio/midiWMA音频：audio/x-ms-wmaRealAudio：audio/x-pn-realaudio-pluginAVI：video/x-msvideoWMV：video/x-ms-wmvMPEG视频：video/mpegQuickTime：video/quicktimewmode指定播放模式，默认不透明，transparent透明,4.4.2播放flash文件,flash文件播放器的classid属性值为：D27CDB6E-AE6D-11cf-96B8-444553540000【例h4-21.html】播放flash文件，可以去掉标记单独使用标记、也可以单独使用标记查看结果。播放flash文件正常播放不透明flash文件在背景图片上播放透明flash文件，产生动画效果,4.4.3使用RealPlayer播放器,RealPlayer播放器的classid属性值：22D6F312-B0F6-11D0-94AB-0080C74C7E95使用RealPlayer播放器时必须用：指定播放文件的URL指定播放器按钮注意：播放音频classid最好使用CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA,【例h4-22.html】使用RealPlayer播放音频文件,使用RealPlayer播放音频本页面使用RealPlayer媒体播放器，如果不能显示可能您还没有安装点击这里可以免费下载。仅仅播放音频最好使用以下classid属性值：CFCDAA03-8B