HTML

我学习HTML的个人历程

HTML链接默认新窗口打开的JS代码

<script language="Javascript"> function onloa() { for(i=0;i<document.links.length;i++) document.links[i].target="_blank"; } window.onload=onloa; </script>
发布于 由 IT新兵0 篇评论

如何在网页中添加背景声音

  如果能在五彩缤纷的网页中再加上美妙的声音,则有锦上添花的效果。可惜的是,目前业界领先的两种浏览器对声音的支持方式并不相同:Netscape利用其LiveAudio插件将声音文件当作嵌入(EMBED)对象处理,Microsoft则在网页中使用了其特有的BGSOUND标记,但Navigator不能识别BGSOUND;当在网页中含有嵌入的MIDI(网上最常用的音乐文档格式)文件时,Internet Explorer也多半会发出插件错误的信息。

  本文将对两种浏览器实现声音播放的技术作一番初步分析。顺便说一句,文中提到的Netscape浏览器以Communicator 4.0为准,Internet Explorer则以3.0版为准。

  一、Microsoft IE中的BGSOUND
  BGSOUND的基本格式如下:<BGSOUND SRC=[URL] LOOP=[循环遍数|-1|INFINITE]>
  其中,SRC后面跟的是WAV、AIFF、AU或MIDI格式的音频文件地址;LOOP后面跟的是循环播放此背景音的遍数:当LOOP取值为-1或INFINITE时,表示声音将反复循环播放至用户离开此网页时为止。
  与下面将要详细介绍的Netscape插件不同,BGSOUND标记格式简单,简便实用,但不能实现复杂的控制。

  二、Netscape的LiveAudio
  LiveAudio也能播放WAV、AIFF、AU和MIDI这些常见格式的文件,并可由控件(controls)对声音的播放过程作较为复杂的控制。其声音控件的大小由EMBED标记中的WIDTH和HEIGHT参数决定。控件有以下六种不同的类型:(1)Console :含有Play、Pause、Stop按钮和音量控制杆;(2)SmallConsole:含有Play、Stop按钮和音量控制杆,此类控件中的按钮比标准Console的要小;(3)PlayButton:播放声音的按钮;(4)PauseButton:在放音时暂停声音播放(但不卸载声音文件)的按钮;(5)StopButton:停止声音播放并卸载声音文件的按钮;(6)VolumeLever:调整回放音量(系统音量)的控制杆。
  这些控件可在一个网页上重复使用多次,可以控制一个或多个声音文件,具体情况则取决于在HTML或JavaScript中是如何使用声音文件的。
  应当记住的是,其它小程序(applet)也可以使用这些控制,以实现诸如改变整个系统音量之类的操作。

  三、LiveAudio的HTML语法格式
  <EMBED SRC=[URL] AUTOSTART=[TRUE|FALSE] LOOP=[TRUE|FALSE|整数]
  STARTTIME=[分:秒] ENDTIME=[分:秒] VOLUME=[0-100] WIDTH=[像素数]
  HEIGHT=[像素数] ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
  |TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM] CONTROLS=[CONSOLE|SMALLCONSOLE
  |PLAYBUTTON|PAUSEBUTTON|STOPBUTTON|VOLUMELEVER] HIDDEN=[TRUE]
  MASTERSOUND NAME=[用于组合各个控制来控制同一声音文件的唯一识别名
  ]......>
  下面对LiveAudio的HTML语法格式作一简要说明:

  1.SRC=[URL]:声音源文件地址(URL)。

  2.AUTOSTART=[TRUE|FALSE]:设为TRUE将使声音文件在网页载入时自动启动。缺省值为FALSE。

  3.LOOP=[TRUE|FALSE|整数]:设为TRUE将使声音一直循环播放,直至用户按下停止按钮或离开此网页时为止;如果设为一整数,则声音将循环播放此整数遍数。

 4.STARTTIME=[分:秒]:用STARTTIME来表示声音文件中开始播放的位置。如果想在30秒的位置处开始播放,则可将此数值设为00:30(注意:此功能只能在Windows 95、NT、Macintosh中才能够实现)。

  5.ENDTIME=[分:秒]:用ENDTIME来表示声音文件中播放停止的位置。如果想在一分半钟之后停止声音,则可将此数值设为01:30(注意:此功能只能在Windows 95、NT、Macintosh中才能够实现)。

  6.VOLUME=[0-100]:这一数值必须介于0到100之间,代表百分比。除非使用了MASTERVOLUME(可参见下面的NAME属性,此时该数值将代表系统音量),否则该属性用于设置所播放的声音音量,缺省值为当前系统音量。

  7.WIDTH=[像素数]:这一属性用于确定控件的宽度。对于CONSOLE和SMALLCONSOLE,缺省宽度为144;对于VOLUMELEVER,该宽度是74;对于按钮,其缺省值是37。

  8.HEIGHT=[像素数]:这一属性用于确定控件的高度。CONSOLE的缺省高度是60,SMALLCONSOLE的高度是15,VOLUMELEVER的高度是20,按钮的高度则是22。

  9.ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]:这一属性告诉Netscape Navigator如何在控制板的周围对齐文本,这和IMG标记中的ALIGN差不多。

  10.CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]:这一标记确认作者想使用什么样的控件,其缺省值是CONSOLE。

  11.HIDDEN=[TRUE]:如果这一属性出现在EMBED标记中,则应为TRUE,此时控件将不出现,声音作为背景音播放。

  12.MASTERSOUND:这一属性用于将各个控制组合到同一NAME组中。这一属性没有定义值(只需出现在EMBED标记中即可),可以告诉LiveAudio哪个文件是真正的声音文件,并让其忽略其它的形式文件(stub file)。形式文件具有最短的长度,只需能激活LiveAudio即可(具有适当的文件扩展名,因而能产生适当的文件类型)。

  13.NAME=[用于组合各个控制来控制同一声音文件的唯一识别名]:这一属性设定一组控件的唯一识别名。例如,如果一个网页作者想使用两个嵌入的对象(一个为PLAYBUTTON,另一个为STOPBUTTON)来控制一个声音文件,则两个对象必须使用这一属性来将它们组合在一起。在这种情况下,需要使用MASTERSOUND标记来告诉LiveAudio哪个EMBED标记中真正含有要控制的声音文件,LiveAudio会忽略不含MASTERSOUND标记的EMBED对象。
  如果你想用一个VOLUMELEVER来控制多个NAME(即系统音量),则可用VOLUMELEVER作为控件(CONTROLS)来创建一个嵌入对象(EMBED),然后将NAME设为MASTERVOLUME (注意:此功能在Netscape的开发者网页 http://developer.netscape.com/ 上有说明,但本人没有试验成功。)。

  四、LiveAudio的滞后载入
  LiveAudio提供了在按下播放按钮时才载入声音的功能。这就使得网页设计者可以方便地在一页中嵌入多个声音文件,而不用担心页面载入时会花多少时间。
  要实现这一特性,网页设计者必须按如下方式来创建一个文件(以AIFF文件为例,其它声音文件格式也完全类似):

  <SCRIPT LANGUAGE=SoundScript>
  OnPlay(http://YourURL/YourSound.aif);
  </SCRIPT>

  这个文件应作为一个声音文件(例如script1.aif)予以保存。如果按下了播放键,则用户在OnPlay函数中定义的声音文件就会被调进来播放。

  五、使用LiveAudio的例子

  1.在网页中播放背景声音:
  <EMBED SRC="mysound.aif" HIDDEN=TRUE>

  2.用多个控件(CONTROLS)控制同一声音文件:
  <EMBED SRC="mysound.aif" HEIGHT=22 WIDTH=37 CONTROLS=PLAYBUTTON
  NAME="MyConsole" MASTERSOUND>
  <EMBED SRC="stub1.aif" HEIGHT=22 WIDTH=37 CONTROLS=PAUSEBUTTON
  NAME="MyConsole">
  <EMBED SRC="stub2.aif" HEIGHT=22 WIDTH=37 CONTROLS=STOPBUTTON
  NAME="MyConsole">
  <EMBED SRC="stub3.aif" HEIGHT=20 WIDTH=74 CONTROLS=VOLUMELEVER
  NAME="MyConsole">
  注意:stubx.aif是用类似于echo.>stubx.aif方式创建的形式文件。

  3.使用SMALLCONSOLE:
  <EMBED SRC="mysound.aif" HEIGHT=15 WIDTH=144 MASTERSOUND
  CONTROLS=SMALLCONSOLE>
  
  六、LiveConnect
  LiveAudio中应用了LiveConnect技术,可以直接使用JavaScript中的下列函数来控制载入的LiveAudio插件:

  1.控制函数(返回值全部为布尔型):
  · play('TRUE/FALSE/整数','声音的URL');
  ·stop();
  ·pause();
  ·start_time(int seconds);
  ·end_time(int seconds);
  ·setvol(int percent);
  ·fade_to(int to_percent);
  ·fade_from_to(int from_percent,int to_percent);
  ·start_at_beginning() = 忽略 start_time();
  ·stop_at_end() = 忽略 end_time()。

  2.状态指示函数(返回值除*为整型外,其余全部为布尔型):
  ·IsReady():如果插件实例已载入结束,则返回TRUE;
  ·IsPlaying():如果声音正在播放,则返回TRUE;
  ·IsPaused():如果声音被暂停,则返回TRUE;
  ·GetVolume():把音量值作为一个百分比返回。

  七、设计兼容Netscape Navigator和Internet Explorer的网页
  对于非MIDI类型声音文件,问题比较简单,Internet Explorer 3.0以上的版本基本上可以正确处理Netscape的EMBED标记,因此可以简单地在网页中加入如下所示的代码:
  <EMBED SRC="sample.wav" HIDDEN=TRUE AUTOSTART=TRUE>
  (注意:这是播放背景声音而无控件的情况。如果无AUTOSTART=TRUE的话,则IE将不能自动播放声音。)
  或
  <EMBED SRC="sample.wav" WIDTH=144 HEIGHT=60>
  (注意:这是有控件的情况。IE会忽略WIDTH和HEIGHT设置而使用其较为简单的控制界面。)
  值得注意的是,此时IE使用其ActiveX控件来处理嵌入对象,因而与Netscape的LiveAudio插件是有不少区别的。除上面提到的两点外,比较重要的区别还包括:IE中LOOP只接受TRUE或FALSE,并把接受到的其它类型的数值也转化成布尔值处理。
  对于MIDI文件,情况则要复杂些。实际上,在安装有Netscape Navigator 3.0而没有安装Communicator的机器上,上述方法在IE中也是适用的,IE会自动使用Navigator中的LiveAudio插件。遗憾的是,在其它情况下似乎都不行,IE或者不能找到合适的插件,或者报告插件未正确初始化。这时,就得使用其它办法了。
  先说一下属于刚才“其它情况”的IE用户该如何正确浏览嵌入有MIDI文件的页面(因特网上这样的页面还是相当多的)。较为简单的方法是从网上下载合适的ActiveX控件,如LiveUpdate Crescendo (Windows 95用户可在 ftp://ftp.liveupdate.com/plugins/ 处下载并运行c30xie.exe来进行安装)等。另外,可在 http://www.activex.com/ 处找到大量各式各样的ActiveX控件。
  当然,本文主要想讨论的还是制作问题。可以使用JavaScript并通过判断用户使用的是何种浏览器而给出不同的代码来解决上述问题。
  下面的例子解决了在网页中循环播放背景音乐的问题,在HTML的<HEAD>段中加入如下代码:

  <SCRIPT LANGUAGE="JavaScript">
  <!--
  function BackgroundSound( URL )
  {
   if( navigator.appName == "Netscape" )
   document.write( "" );
   else
   document.write( "" );
  }
  // -->
  </SCRIPT>
  然后,在<BODY>中加入启动代码,如:
  <SCRIPT LANGUAGE="JavaScript"><!-
  BackgroundSound( "YourSound.mid" );
  // --></SCRIPT>

  好了,这一段代码在Netscape Navigator和Internet Explorer中都能正常播放音乐了。泡一杯咖啡,坐下来慢慢聆听欣赏美妙动听的音乐吧!如果愿意的话,则还可以将这个小程序做得更复杂一些(例如,使它能够处理重复遍数,而不只是反复不停地播放。)。

发布于 由 IT新兵0 篇评论

FrontPage页面背景属性设置

  在今天的课程中你将学习如何设定页面、文字、表格及表格单元的背景色、背景图象甚至背景声音等等,设定网页的边距、留白、单元格内文字和图象的显示位置、字体、字号,如何增加、拆分和合并单元格(其实它的设置方法和Word十分相似)等等,学习完本篇之后你已经可以设计出专业水准的网页。

  我们首先学习如何设定页面、文字、表格及变革单元的背景色或 背景图象。打开FrontPage98 Editor的界面, 建立一个空白新文件。在页面中插入一个2X2的表格,在表格中随意键入一些文字(以便使下一步中弹出的菜单中也显示表格属性(table property)表格单元属性(cell property)及文字属性(font property)编辑子菜单。在页面中点击鼠标右键,然后在弹出的菜单(如下图所示)中选择page Property...(页面属性),则弹出页面属性编辑对话框:



  在该对话框中有5个标签:General( 基本属性)、Background(背景属性)、Margin (边距)、custom(定制)Language (语言)。点击Background标签,则显示右图所示的背景属性对话框:



  如果你想将一幅图象设置为背景图案,则点击选中BackgroundImage复选框,则该项下面的长条方框变为白色,表示你可以在中键入背景图象所在的路径和文件名。你也可以点击长条框右的Browse按钮,在弹出的对话框中选择文件路径和文件名。设之后点击确定按钮你旧会发现页面的背景已经变成了你所喜欢的图象。如果你利用Photoshop或其他图象编辑软件将图片做一些特殊处理之后再用页面背景,则更能增加网页的艺术效果。如果你不想用图片作为背景(因为图片体积一般都比较大,容易造成下载时间过长的问题),你也可以选择某种颜色作为网页背景。首先点击Background右边的下拉选单,在弹出的颜色选单中选择适合的颜色。你还可以点击颜色选单中的Custom项,在弹出的调色板中配置自己中意的颜色。你还可以在背景属性对话框中设置文字的颜色,方法是点击Text项右边的颜色下拉选单,然后从中选择喜欢的颜色。另外,在该对话框中你还可以设置链接的颜色。链接颜色的缺省设置是蓝色,你也可以选择其他的颜色作为链接(Hyperlink)的颜色。Vsisted Hyperlink指的是你点击过的链接所显示的颜色,以便使你能很容易地分辨出那些链接的项目你已经能够访问过了。Active Hyperlink是指当你点击某个链接的同时该链接所显示的颜色。

  设置背景声音

  除了设置背景图象或背景颜色,你还可以设置一种背景音乐或声音。但这个设置是在页面属性对话框的General标签下。所以,点击general标签,则显示以下对话框:



  在该对话框的中下部你可以看到有一项是Background Sound,在该项目下面的location框中你可以键入你所要加入的声音文件所在的路径和文件名。你也可以点击右边的Browse键在弹出的对话框中选择文件所在的路径和文件名。在loop选单中你可以设定背景声音文件循环播放的次数,如果你选中loop右边的Forever选框,则你所设定的背景声音将一直循环播放,直到你转到别的网页或网站浏览时为止。
发布于 由 IT新兵0 篇评论

HTML 声音层叠样式表单

随着网络技术的不断发展,声音也逐渐成为了网页制作过程中考虑的一个主要因素。

  使用CSS样式表单的方法为网页中加入声音,将有很好的灵活性,提供文档的真正意义上的多重显示模式。

  由于声音是在空间上进行传播的,又具有延续性,所以新单位中自然也就有deg角度、grad梯度、rad弧度、ms和s等,剩下的还有就是声音本身单位Hz和kHz。首先我们来谈谈声音的属性。

  Volume属性,这是一个设定声音大小的属性,它可以选择的属性值有:silent/x-soft/soft/medium/loud/x-loud,或者直接使用百分比值来表示。这个属性没有限定,可以使用于所有的元素,初始时的默认值medium,这里百分比的范围是从0%到100%,但并不是说0% 就是没有声音,在这里只是表示一种相对的大小,说明是用户可以听到的最小音量对应于x-soft,如果要表示完全没有声音是silent。

  pause-before属性值表示为:<时间值>/<百分比值>,这个属性是表示元素前的停顿。它可以适用于所有的元素,但它没有继承属性,它的停顿长短要参照“speech-rate”属性值。

  pause-after属性值表示为<时间值>/<百分比值>,通过上一个属性很容易联想到它是定义元素后停顿的,这里我们就不重复讨论了。

  pause属性值表示为:[<时间值>/<百分比值>]{1,2},其实它就是pause-before和pause-after结合的一种简单形式,比如H1{pause:20ms},H2{pause:20ms40ms}就是表示第一句话前后都停顿30毫秒,第二句话前停顿20毫秒后停顿40毫秒。

  cue、cue-before、cue-after属性值:/none,用于在元素的前后插入声音,将元素区分出来。使用cue则元素前后使用相同的声音,使用cue-before 、cue-after则可以在元素前后使用不同的声音。同时这个属性没有继承。

  play-during属性值表示为:mix?repeat?/auto/none,这个属性是指定当元素正在播放时应该有什么背景声音。如果保留“mix”那么子元素的背景声音将同上级元素的背景声音混合播放,如果选择的是“repeat”那么将只播放当前的元素的背景声音,同时如果背景声音比元素长,那么一旦元素播放完毕,背景声音也立即停止。

  下面我们接着介绍空间属性。

  azimuth属性值:<角度值>/[[left-side/far-left/left/center-left/center/center/center-right/right/far-right/right-side]//behind]/leftwards/rightwards,从字面上来说“azimuth”是方位角的意思,它的值可以在-360度到+360度的范围之间取值。其中0度表示直接在音场的正中央,90度代表右,180度代表后,270度表示左,同时我们也可以使用相对的关键字,这个属性对于提供声音的空间三维效果非常有用。

  elevation属性值:/below/level/above/highter/lower,属性用来设置音源的仰角位置的。取值范围从-90到+90度。默认定义0度为前方的水平方向,+90度为头顶垂直方向,-90度代表从下垂 直向上。

    最后我们谈谈语音属性。

  speech-rate属性值:/x-slow/slow/medium/fast/x-fast/faster/slower,其实这个属性我们在前面已经见过,它是一个指定阅读速度的属性值。我们可以使用相对的或者是绝对的关键字来指定属 性值,如果给出的是一个数字值,那么就是每一分钟阅读的字数。它是具有继承属性的。

  voice-family属性值:[[/],]*[/],与"font-family"属 性很相像,可以定义声音类型,同时可以运用于所有的元素,具有继承属性。例如:H1{voice-family:announcer,male}。

  pitch属性值表示为:/x-low/low/medium/high/x-high,这个属性使用赫兹单位来指定阅读声音的平均音高标准。

  pitch-range属性值:<百分比值>,这个属性是用百分比值来指定音高,0%的音量范围代表平缓、单调的声音,50%代表普通的声音,如果大于50%则表示高音了。

  stress属性值:<百分比值>,这个属性代表语音强调的级别,这对于英语非常有用。

  richness属性值:<百分比值>,这个属性决定了阅读声音的饱和程度,如果降低这个值就会使得声音 变得柔和。

  speak-punctuation属性值:code/none,使用了这个属性在阅读时遇到括号或者破折号时有所停顿。

  speak-date属性值:myd/dmy/ymd,在这个属性中指定阅读日期的方式,我们可以根据人们不同的习惯 使用不同的阅读方式。

  speak-numeral属性值:digits/continous/none,这个属性是用来控制阅读数字的方法,其中“digits”代表按照位数一个一个阅读,“continous”代表连续地阅读。

  speak-time属性值:24/12/none,这是属性控制时间的阅读方式。

  到这里我们将所有的CSS控制声音的属性都介绍完了,希望对大家有所帮助。

发布于 由 IT新兵0 篇评论

HTML 学习笔记之2 基本HTML代码页

<html> <head> <meta name="description" content="the page of IT"> <! 描述 > <meta name="keywords" content="it"> <! 关键字 > <meta http-equiv="content-type" content="text/html;charset="iso 8859-1"> <! 网页编码 > <meta name="author" content="ITrecruit"> <! 作者 > <meta http-equiv="refresh" content="3"; URL=http://chinait.com.cn"> <! 刷新 > <title>ITrecruittitle> <! 网页标题 > head> <body> <p align="right"> <! P标记符,他的内容在浏览器输出的时候按输入的位置输出 > <font face="宋体" size="40" color="red">中国IT网之IT新兵</font> </p> <p align="left"> <font face="隶书" size="5" color="black">我在学习HTML</font> </p> <img src=“it.jpg" width=480 height=180 border="2"> <! 插入图片 > <!--超级链接的写法--> <a href="it.html">itrecruit</a> <! 插入超链接 > <a href="http://chinait.com.cn"><img src="itrecruit.gif"></a> <! 图片链接 > <a href="http://chinait.com.cn">ITrecruit</a> <! 文字链接 > <!--锚标记的使用--> <p> <! 段落定义 > <a href="#1">ASP锚标记示例</a> <br><br><br><br> <! 换行 > </p> <p> <a href="#2">标记2</a> <br> </p> <p> <a href="#3">标记3</a> </p> <br><br><br> <p><a nemt="1">ASP锚标记示例的内容</a></p> <p><a name="2">标记2内容</a></p> <p><a nemt="3">标记3内容</a></p> <p>标记3的内容详细叙述<br><br><br><br><br></p> <!--创建列表的写法--> <ol> <! 定义有序列表 > <li>内容1</li> <li>内容2</li> <li>内容3</li> </ol> <ul> <! 定义无序列表 > <li>内容1</li> <li>内容2</li> <li>内容3</li> </ul> <!--创建基本表格的写法--> <table border="1" width="382" height="161"> <! table表格基本标记,bord定义表格边框 > <caption>表格标题</caption> <! 表格标题标记 > <tr> <! 定义表格一行的开始 > <td width="75" height="26">一行一列</td> <! td定义表格内容,列> <td width="291" height="26">一行二列</td> </tr> <tr> <td width="75" height="26">二行一列</td> <td width="75" height="26">二行二列</td> </tr> </table> <!--创建含有块的表格,以及rowspan,colspan的用法--> <div align="center"> <table border="1" bordercolor="orange" width="479" height="156"> <! bordercolor是表格边框颜色 > <tr bgcolor="orange" align="middle"> <td width="120" height="100" rowspan="2">IT工资(元)</td> <! rowspan=N 用来设置该单元格占用N行 > <td width="180" height="120" colspan="2" align=center>IT年终奖金(元)</td> <! colspan=M 用来设置该单元格占用M列 > </tr> <tr> <td width="120" height="35">工作日&lt;300</td> <! "&lt"是小于符号 > <td width="130" height="35">工作日&gt;300</td> <! "&gt"是大于符号 > </tr> <tr> <td width="120" height="35">30000</td> <td width="120" height="35">50000</td> </tr> <tr> <td width="120" height="35">40000</td> <td width="120" height="35">9000</td> </tr> </table></div> <!--表格的基本使用格式--> <table border=? width=? height=? cellpadding=? cellspacing=? bgcolor=? align=? bordercolor=? bordercolorlight=? brodercolordark=?> <capton align=?>表格标题</caption> <tr> <! 定义标题行 > <th>name</th> <th>score</th> </tr> <tr> <! 定义第一行的开始 > <td align=center valigh=top width=20%>第一行第1个单元格内容</td> <td width=80%>第1行第2个单元格的内容</td> </tr> <tr> <! 定义第2行的开始 > <td>第2行第1个单元格的内容</td> <td>第2行第2个单元格的内容</td> </tr> </table> <!--表格的基本使用格式,完毕--> </body> </html>
发布于 由 IT新兵0 篇评论

HTML学习笔记1 关键词

关键词:www = world wide web 全球广域网

            URI = Universal Resource Identifier  通用资源标识号 例如 http协议

            HTML = Hypertext Markup Language     HTML URI = 通用资源标识符

 

 

发布于 由 IT新兵0 篇评论