第5章表单框架和多媒体(网页设计与制作).ppt

网页设计与制作,第5章 表单、框架和多媒体,5.1 表单5.1.1 表单的标记5.1.2 文字和密码的输入5.1.3 重置和提交 5.1.4 复选框和单选钮 5.1.5 选择栏 5.1.6 多行文字的输入,5.2 框架5.2.1 建立框架 5.2.3 框架间的链接5.3 加入动态效果和多媒体5.3.1 设置字幕5.3.2 加入音频和视频5.4 自动刷新页面习题5,5.1 表单,主页上具有可输入表项及项目选择等控制所组成的栏目称为表单。 收集质量调查、电子购物、商品交易、人才招聘等用户的反馈信息，是实现网上的信息交流重要手段。 5.1.1 表单的标记 表单的基本语法及格式为： ,5.1 表单,5.1.2 文字和密码的输入 5.1.3 重置和提交 格式为： 当缺省value的设置值时，重置和提交的按钮分别显示为“重置”和“提交查询内容”。,例5.1 文本框和密码框,密码属性姓名：密码：,例5.2 reset和submit按钮,RESET属性姓名：密码：,5.1.4 单选按钮和复选框,1.单选按钮 用于在同一类型项目中选择一个的场合。格式为：按钮文本 name相同的单选按钮组成一组。2.复选框 用于在同一类型项目中选择一个或多个的场合。格式为：按钮文本,例5.3 单选按钮,RADIO选项婚姻：已婚未婚请选择最高学历：小学初中高中专科大学研究所,例5.4 复选框,CHECKBOX选项姓名：常用软件：WordExcelPowerPointAccess,5.1.5 选择栏,1.选择栏 格式为： 标记的格式为： 选项文本,5.1.5 选择栏,2.弹出式选择栏 格式为： 选项1 选项2 选项n ,例5.5 列表框,含SIZE的应用请选择最常用的软件：WordExcelPowerPointPaint Shop ProNetscape Navigator,例5.6 下拉列表框,不含SIZE的应用请选择最常用的软件：WordExcelPowerPointPaint Shop ProNetscape Navigator,5.1.7 多行文字的输入,格式为： 多行文本 其中的行数和列数是指不用滚动条就可看到的部分。,例5.7 多行文本框,输入多行多列文字的应用以下是一个标签，可以提供多行输入元件各属性值为NAME=Text，ROWS=10，COLS=20。预设文字请输入您的意见,5.1.8 隐藏域,隐藏域上的内容不在网页上显示,只供应用程序使用。 格式: ,例5.8 隐藏域,隐藏资讯的输入姓名：,例5.9 一个复杂的实例,人民邮电出版社人民邮电出版社员工旅游调查表 基本资料 请输入姓名 请输入员工代码 , 建议日期 10月10日 10月25日 12月25日 , 旅游时间长短 三天两夜 五天四夜 ,输入完资料后请按传送资料按钮欲重新输入资料，请按清除资料按钮,5.2 框架,框架是浏览窗口中的矩形区域，可以显示页面。框架结构可以使Web浏览器同时显示多个页面，从而实现了在同一浏览器窗口访问不同网页的功能。 5.2.1 建立框架 建立框架的基本结构为： 框架是按标记的顺序依先行和后列进行排列。 注意：在框架结构的.Html文件中用标记取代标记，若同时使用了这两个标记，将显示警告提示,5.2.1 建立框架,1. 标记 它用来定义一个框架组的属性，格式为： 框架有横向和纵向之分。 rows和cols属性：设定横向分割和纵向分割的框架数目。取值为： 象素数：指定框架的绝对大小数：指定框架相对于浏览器窗口大小的百分数符号： 指定框架的大小浏览器窗口的剩余部分。 当仅用号时，表示整个窗口，“，”时表示窗口分成两个均等的框架。这些值间不能有空格并用“，”号分开，根据输入的值的个数决定框架数和位置。,例5.10在垂直方向上分割,FRAME的SRC属性设定,例5.11在水平方向上分割,FRAMESET框架含超链结,5.2.1 建立框架,2. 标记 标记用于给各个框架指定页面的内容，它将各个框架和包含其内容的那个文件联系在一起。 是一个单标记，格式为： ,5.2.2 设置框架属性,框架的属性包括边框、颜色、滚动条等，这些属性使框架的外观发生变化，产生不同的艺术效果。1. 设定框架的有无和颜色 利用和标记可以设置边框的外观，如大小、颜色。两个标记所不同的是，标记设置的是整个框架各个边框的属性，而只能设置它所控制的框架。,5.2.2 设置框架属性,(1) 设定有无边框 利用和标记的Frameborder属性可以设定有无边框。格式为： 或 其中取值yes或1（缺省）表示生成立体的边框，no或0表示无边框。(2) 设定边框的色彩利用和标记的bordercolor属性给边框着色。格式为： 或 ,例5.12 设定有无边框,FRAMEBORDER属性的设定 ,例5.13 设定边框的色彩,FRAMEBORDER属性的设定 ,5.2.2 设置框架属性,2. 固定边框 在缺省情况下，浏览者可以用鼠标拖动边框改变页面的大小。使用的noresize属性可以固定边框的位置。格式为： noresize没有值，加入noresize则固定边框。3. 滚动条 4. 边框的宽度 border属性确定边框的宽度。格式为: 值为象素数。缺省时为8象素宽。,例5.14 固定边框,NORESIZE属性的设定,例5.15 滚动条,SCROLLING属性的设定,3. 页面空白区域的设置,(1) 设置框架内容与左右边框的空白 使用标记的marginwidth属性设置。格式为： 其中x为象素数，取1以上的值。(2) 设置框架内容与上下边框的空白 使用标记的marginheight属性设置。格式为： (3) 设置各窗口间的空白 使用中的Framespacing属性设置。格式为： 其中x取象素数。,例5.16设置框架内容与边框的空白,MARGINHEIGHT和MARGINWIDTH属性的应用,例5.17 设置框架间的空白,framespacing属性的应用,框架嵌套,框架的相互嵌套可以作成一个复杂的框架布局。 ,例5.18 框架嵌套,框架嵌套的例 ,例5.19 无边框框架嵌套,初始化框架 ,5.2.3 框架间的链接,使用的target属性就可以控制目标文件在那个框架内显示。当单击热点文本时，目标文件就会出现在有target指定的框架内。target属性的值可以为框架名，使用格式为： 热点文本 target有四个特殊的值，分别实现4类特殊的操作：1. _blank 打开新的没有名字的浏览器窗口。格式为： 热点文本 链接的目标文件被载入一个新的没有名字的浏览器窗口。,5.2.3 框架间的链接,2. _self 当前的框架。格式为： 热点文本 链接的目标文件被载入当前框架窗口中，代替正在显示的热点文本。3. _top 整个浏览器窗口。格式为： 热点文本 4. _parent 父窗口。格式为： 热点文本 当框架有嵌套时，链接的目标文件被载入父框架中。否则，被载入整个浏览器窗口,例5.20 框架间链接,初始化框架 file2.html:file2 夜思 怨情,内联框架,使用标记可以将框架设置在页面中央，称为内联框架。 它与标记不同，可以插入到标记中。 格式为： ,例5.21 页内框架,页内框架示例李白静思怨情真可惜，您的浏览器不支持框架！,5.3 加入动态效果和多媒体,5.3.1 播放声音 两种方式。一、打开主页时自动播放的背景声音；二、在某个网页中单击某个链接时播放声音。 1.背景声音 使用标记可以加入背景声音，用法： 其中，属性src=”表示播放的声音文件，loop=n表示播放的次数。2. 利用超级链接播放的声音文件 配音,3利用标记播放声音,标记用于播放声音和影像。声音文件可以是wav或mid文件；影像可以是.Mpg或 avi文件。使用格式： 主要属性说明如下 ： src：插入文件的路径或URL地址。 Autostart：为true时，在打开页面时自动播放声音。 Loop：为true时自动循环播放。 Volume：取值为0100。 Controls：可以选择playbutton、pausebutton、stopbutton 或volumelever。,例5.22 播放立体声,5.3.2 主页中加入影像,主页中加入影像通常用两种方法。一是直接用超级链接，二是使用标记。1直接用超级链接 学校介绍2.在网页中嵌入影像 使用标记可以在主页中嵌入影像。影像可以是.Mpg、avi文件或flash文件。 ,例5.23 播放flash动画, ,5.3.3 主页中加入字幕,标记的格式为： 流动文字 属性： direction：表示向哪个方向移动 align= “top或middle或bottom”：设定字幕的垂直对齐 bgcolor=“颜色” ：设定字幕的背景色 width、height=x或x%：设定字幕的高和宽。 loop=x、-1或Infinite：设定循环次数。-1或infinite时无限循环 behavior=“scroll”、 side、alternate ：文字单向流动、文字到达边界停止、文字到达边界后反向流动,例5.24 字幕,滚动字幕示例哈哈哈，我在滚动！图像也可以滚动哦！我滚动的很快！,5.4 自动刷新页面,自动刷新页面就是页面停留几秒钟后自动指向新网页。其格式为： 标识必须放置在.中。 http-equiv属性值设置为“Refresh”时，要求显示URL制定的文件。 content属性包含两个值：秒数和URL，它们之间用“;”分隔。该链接将在指定的时间后被打开。,习题51.制作输入密码的表单，如图。题中用到了表格