网页标记使用技巧汇总.doc

目 录1用好基本图像标记img11.1给图片加边框21.2给图片加动态说明和替代文字31.3图像与文字混排31.4动态替换图像41.5在网页加入影像片断52用好HTML的表格标记62.1作系列横单线62.2作系列竖单线72.3系列双横线83表单设计基础103.1表单标记103.2表单输入标记113.3下拉菜单标记123.4选项标记123.5多行文本输入标记134表单的文本框144.1一个单行文本框的例子144.2检验用户输入的信息155用好表单的按钮165.1制作常规按钮165.2改变按钮的外观165.3动态变换文本按钮175.4动态变换图像按钮186用好帧窗口标记206.1左大右下两窗口216.2一顶一左一右页面227帧窗口之间的交互技巧247.1在导航窗口点击链接，在另一窗口打开网页247.2在B窗口中按下一个按钮，在C窗口中写一行字247.3各窗口的尺寸设置268播放视频288.1链接一个视频文件288.2自动载入视频289播放音乐309.1点播音乐309.2自动载入音乐309.3IE中的背景音乐3210表单概述3311表单外观的美化39451 用好基本图像标记img网址：/导航：DIY部落 网页设计 html Html系列教程 正文网页中最引人入胜的莫过于那丰富多彩的图像了。成功的站点中不能没有绚丽的图像，否则便使测览者觉得索然无味。下面介绍HTML语言中的基本图像标记：。其基本语法结构如下： 可以看出，关于基本图像标记的应用参数多达21项。当然，我们实际应用的只是其中几项，只有在需要实现特殊效果的情况下，才需要使用较多的参数。下面先介绍一下各参数的具体含义：align：是指定图像的位置是靠左、靠右、居中、靠上或者是靠底。默认情况下是靠上，即aligntop。在图文混排时，这个参数很有用。class和id：分别指定图像所属的类型和图像的id号。name：用于设定图像的名称。src：规定插入的图像的url地址，也就是含路径的图像文件名。title：设定图像的标题。alt：表示图像的替代字，主要用于在浏览器还没有装入图像（或关闭图像显示）的时候，先显示有关此图像的信息。这是初学者最易忽略的参数，因不设定它在正常显示时没问题。border：设定图片的边框。height和width：分别用于指定图像的高度和宽度，可以与图片原来的宽度和高度不同。hspace和vspace：分别用于设定图像的左右边框大小和上下边框大小，在图文混排时会用到。ismp和usemap：在应用图像地图时使用。ismap表示图像地图的数据存放在服务器中，当鼠标在图像上的某个区域上时，可以将此区域的坐标传送给服务器处理。usemap则用于设定图像地图的名称。onload、onabort、onerror对应于设定的子程序，分别在图像被载入、取消载入、载入出错的情况下各自对应的子程序，不常用。dynsrc：指定要下载的影像片断的url地址。controls：设定影像播放的控制接钮。loop：指定影像片断的播放次数，当loop=-1时，影像片断将循环播放直至页面更新。start：设定何时开始播放影像片断，有三种选择：start=fileopen表示页面载入后即开始播放，默认的就是这种状态；start=mouseover表示当鼠标移到影像上即开始播放；start=fileopen,mouseover表示当有上面两种情况之一发生时就开始播放。应用技巧1.1 给图片加边框上边这张图片的边框是border=4所产生的效果，注意：边框的颜色默认的是黑色，不美观，而标记也没有设置边框颜色的参数，我们可以通过设置Class参数调用CSS达到改变边框颜色的目的，如本例的完整代码是：，这里的CSS的“style1”放在网页源代码的与之间，其代码为： 1.2 给图片加动态说明和替代文字若想制作当鼠标移到图片上出现一行简短说明文字的效果，不必去使用图层技术（特殊效果的说明除外），设定title参数就行了。例：在上例的图片的代码改成这样：。这样，当鼠标移到图片上，就会显示出说明文字“网页教学网专业的网页教学站点”。给图片加上替代文字是一种好习惯，象上例那样设置alt参数，当用户关闭图像显示或页面刚刚下载时，图片还没来不得及显示时，图像的替代文字就会显示出来，这样用户就能知道对应的图像内容。1.3 图像与文字混排图文混排主要是设置align参数。在这里要注意：1） top、middle、center、bottom所产生的效果只是一行文字，在多行文本与图象对齐时要用left和right参数值。2)中的对齐参数align所产生的效果是指图片与周围文字的位置关系，而图片在页面中的位置对齐是在图片所在的页面元素中设置的。如下面这段代码：图文混排示例在上面这段代码中，标记中的align=left表示图片的位置在窗口的左端；而中的align=top则表示图片旁边的文字与图片的顶端对齐。3）为了避免图片与旁边文字挨得太近不便阅读，可以通过设置hspace参数来控制图片与文字间的距离，一般设置hspace=10（表示图片的左右有10个像素的空白）就能达到较好的效果。1.4 动态替换图像鼠标不在图片上鼠标移到图片上 当用户的鼠标放在图片上时，图片会自动更换，鼠标离开之后，图片又会恢复原来的样了。象上边所示的这种效果，当把鼠标移到上面时，看到的效果似乎是那个白色窗口向上下展开了，实际上是换了一张图片。鼠标移开，又恢复了原样。制作这样的效果，先要给欲替换的图片设定名字，本例中是name=webjx；然后设定onmuseover和onmouseout 参数。本例标记的完整代码如下：采用本例来制作动态按钮将会达到很吸引人的效果。1.5 在网页加入影像片断例：在video目录下有一介绍“网页制作”的影像片断文件“web.avi”，现要在网页中播放。那么源代码是这样的：上面这段代码的效果是，当鼠标移开影像片断上时即开始训动媒体播放器播放影像一次，并且还设定了显示播放器控制面板，以便对播放过程进行控制。从上面的代码可以看出，在网页中加入影像片断与加普通图像基本相同，如它们都要指定来源、设定大小和替代文字等。但在这里请注意：加入影像片断时要使用“dynsrc”参数，且不能再在同个标记中使用“src”参数，否则将不能播放影像片断，只能显示替代文字了。2 用好HTML的表格标记对于表格，是网页制作中的重头戏，一些图形化网页制作工具（如：Dreamweaver、Fontpage等）对它也支持的非常好，但HTML为表格设置了几十个参数，图形化网页制作工具要对它全面支持就有点免为其难了。由于参数太多，且大部分参数大家也比较熟悉，就不在这里一一介绍了，下面的例子中仅对一些关键性参数作详细介绍。 2.1 作系列横单线这是系列横单线试验，效果还好吧？ 在这个例子中，用到了表格主标题标记，它的语法如下：align和valign分别用于设定标题的水平位置和垂直位置。align的默认值是center；valign的默认值是top。利用标记可以方便地在紧靠边表格的顶部或底部写上文字，且居中，若用其它办法要麻烦得多。另外在本例中能使表格产生单线效果是设置了标记的rules和frame参数，rules参数是对表格的内部边框作显示控制。rules=none：表示不加内部边框；rules=rows：表示只显示水平方向的边框； rules=cols：表示只显示垂直方向上的边框；rules=all：则是显示所有方向上的边框，这也是默认值；frame=void：表示不加外边框；frame=above：表示显示上边的外边框；frame=below：表示显示下边的外边框；frame=lhs ：表示显示左边的外边框；frame=rls ：表示显示右边的外边框；frame=hsides：表示显示上下外边框；frame=vsides：表示显示左右外边框；frame=box 则表示显示所有外边框。明白了参数值的含义，制作本例的效果就简单了，本例完成后的源代码如下：这是系列横单线试验 这是系列横单线试验，效果还好吧？ 用这种方法画系列单线，即快又整齐，且所用代码也很少。2.2 作系列竖单线本例这种效果看起来是不是有点特色，其实在制作方法上与上例没有多少区别，只是改变了rules和frame的参数值，使表格只显示垂直方向的内外边框，其它与上例相同，本例完成后的源代码是：更上一 层 楼 欲穷千 里 目 黄河 入 海 流 白日依 山 尽 登 黄 鹤 楼 2.3 系列双横线这是在例一的基础上再增加设定了cellspacing参数所产生的效果。本例采用与例一相同的方法，通过设定rules和frame参数，使表格只显示水平方向的内外边框线，并增加了设定cellspacing参数使其产生双线效果，但是标记默认的双线颜色不一样（因它的本意是用两种颜色来产生立体效果的），所以又通过设定bordercolorlight和bordercolordark 参数来改变双线的颜色，以达到双线颜色一致的目的。另外为了使表格内的文字内容上下留空，又设定了cellpadding参数，当然也可以通过设定单元格高度来达到这个目的，但那样要增加许多代码。下面介绍这几个参数的含义：cellspacing=n：单元格间距，也就是内外边框线的间距；cellpadding=n：单元格边距，即单元格内内容与内边框的距离；bordercolorlight=#n：设定立体边框线中较浅部分的颜色，用颜色名称或十六进制数表示。bordercolordark=#n：设定立体边框线中较深部分的颜色，用颜色名称或十六进制数表示。 用本例的方法制作双横线，比用其它方法方便、快捷，所用代码也较少，当横线的数量越多，效果越明显。本例完成后的代码为： 这是在例一的基础上再增加设定了cellspacing参数所产生的效果。 同样，在例二的基础上再加上例三的方法就可以方便地制作出双竖线效果，你可以试试。当然表格在网页制作中的作用远远不止这些，通过这三个例子可以看出，灵活应用表格的参数设定，可以产生一些特殊效果。3 表单设计基础表单在HTML页面中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下“提交资料”按钮，这样所填资料就会通专门的CGI接口传到Web服务器上。网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到作者之间的反馈和交流。对于免费个人网站，往往服务器不提供CGI功能，也可以电子邮件来接收用户的反馈信息。 表单中主要包括下列元素：button普通按钮radio 单选按钮checkbox复选框select 下拉式菜单text 单行文本框textarea多行文本框submit提交按钮reset 重填按钮用HTML设计表单常用的标记是：、和等标记。3.1 表单标记该标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的url地址。其基本语法结构如下：其中action：用于设定处理表单数据程序url的地址。这样的程序通常是CGI应用程序，采用电子邮件方式时，用action=mailto:你的邮件地址。method：指定数据传送到服务器的方式。有两种主要的方式，当method=get时，将输入数据加在action指定的地址后面传送到服务器；当method=post时则将输入数据按照HTTP传输协议中的post传输方式传送到服务器，用电子邮件接收用户信息采用这种方式。name：用于设定表单的名称。onrest和onsubmit是主要针对“reset”按钮和“submit”按钮来说的，分别设定了在按下相应的按钮之后要执行的子程序。target：指定输入数据结果显示在那个窗口，这需要与标记配合使用。3.2 表单输入标记此标记在表单中使用频繁，大部分表单内容需要用到此标记。其语法如下：align：是用于设定表单的位置是靠左（left）、靠右（right）、居中（middle）、靠上 top）还是靠底（bottom）。name：设定当前变量名称。 type：决定了输入数据的类型。其选项较多，各项的意义是： type=text：表示输入单行文本； typet=textarea：表示输入多行文本；type=password:表示输入数据为密码，用星号表示；typecheckbox：表示复选框；typeradio：表示单选框；type一submit：表示提交按钮，数据将被送到服务器； tyPereset：表示清除表单数据，以便重新输入；typefile：表示插入一个文件；typehidden：表示隐藏按钮；typeimage：表示插入一个图像；type一button：表示普通按钮；value：用于设定输入默认值，即如果用户不输入的话，就采用此默认值；src：是针对type=image的情况来说的，设定图像文件的地址；checked：表示选择框中，此项被默认选中；maxlength：表示在输入单行文本的时候，最大输入字符个数；size：用于设定在输入多行文本时的最大输入字符数，采用width，height方式；onclick：表示在按下输入时调用指定的子程序；onselect：表示当前项被选择时调用指定的子程序。 3.3 下拉菜单标记用标记可以在表间中插入一个下拉菜单，它需与标记联用，因为下拉菜单中的每个选项要用标记来定义。标记的语法如下： 其中name：设定下拉式菜单的名称；size：设定菜单框的高度，也就是一次显示几个菜单项，一般取默认值（size=1）；multiple：设定为可以进行多选。3.4 选项标记该标记为下拉菜单中一个选项，语法很简单：其中selected：表示当前项被默认选中；value：表示该项对应的值，在该项被中之后，该项的值就会被送到服务器进行处理。3.5 多行文本输入标记这是一个建立多行文本输入框的专用标记，其语法如下：各参数含义：name：文本框名称；clos：宽度；rows：高度（行数）；wrap：换行控制，off：不自动换行；hard：自动硬回车换行，换行标记一同被传送到服务器中去；soft：自动软回车换行，换行标记不会传送到服务器中去。 表单所涉及的标记较多，参数也较复杂，而实际制作表单时就是这些标记的组合应用，但一般的表单不可能涉及所有参数，我们还是那个原则，能用默认值的尽量用默认值，绝不设定一个不用的参数。我在后面的文章中将通过实例介绍一些常用参数的应用技巧。4 表单的文本框表单的文本框分为单行文本框和多行文本框，故名思义，单行文本框用于输入一些简短的信息，如：姓名、E_mail地址、口令等等；多行文本框用于输入内容较长的信息，如：用户意见、评论、留言等。只要你理解了表单的文本框参数的含义，制作接收信息的文本框是不难的，请看下面的例子。 4.1 一个单行文本框的例子本例的源代码如下：您的姓名： 您的E_mail： 输入口令： 本例中用了三个单行文本框来分别接收用户的“姓名”、“E_mail地址”和“口令”信息，在三个文本框中都设定文本框的宽度（size）和最大输入文本长度（maxlength），在第二个文本框中还设定了初始值（value），你可能注意到了，我把每个文本框的名称（name）都取成了英文名，这样对用于程序外理比较方便，因下例中要用这个例子。若是用电子邮件接收表单信息并不用程序处理，那么用中文名比较直观。为了使其成为一个具有实际交互功能的表单，加上了一个提交按钮，并在标记中设定了action参数为：action=mailto: ，同时把method参数设置为：method=post，这样，一旦按下“提交”按钮将会把信息通过电子邮件发到“”信箱。看来制作并不难！是吗？不过要注意：size的值小于maxlength的值时，当内容超过输入窗口的长度时会自动滚动；反之，size的值大于maxlength的值，超过maxlength长度的内容无法输入。4.2 检验用户输入的信息在上例中，若是用户什么信息也不写就按提交按钮，那不是白收一份邮件吗？要避免这种情况出现，就要对用户的输入信息进行检验，这就要用到标记的onclick参数，我们在“提交”按钮的标记中把onclick 设置为：onclick=test(form1)，而“test(form)”则是一个Javascript子程序，用来检验文本框的输入内容的，它的源代码如下：5 用好表单的按钮对于一个交互式表单，按钮是必不可少的。按钮一般分为两类，一类本身就具有特定的功能，叫做特殊按钮，如Submit（提交按钮）用于传输用户所填写的信息至服务器、Reset（复原按钮）清除所填写的信息以利重新填写；另一类本身不具特殊功能的，叫作普通按钮。特殊按钮只能用于表单才能发挥特殊的功能。而普通按钮除可在表单中应用外，在网页的其它地方使用也很方便。 5.1 制作常规按钮制作按钮非常简单，在标记中把type参数设置为：type=submit就获得一个提交按钮，如本例的“提交”按钮；在 标记中把type参数设置为：type=reset就获得一个复原按钮，如本例的“重写”按钮；在标记中把type参数设置为：type=button就获得一个普通按钮。本例的按钮源代码如下：按钮的制虽简单，但在制作按钮时要注意两点：1、对于特殊按钮，一般不需另加动作，当按下按钮时就有动作发生；而对于普通按钮，必须加上指定的动作并用相就的事件来触发，才会在事件发生时激发动作，否则按下普通按钮，什么也不发生。在本例的普通按钮上加了一个弹出提示窗口的动作：alert(谢谢您点击！)，并用onclick事件来触发，所以当你在那个按钮上点击时会弹出一个窗口，并显示“谢谢您点击！”这句话。2、按钮上的文字是通过设置value参数来实现的，其默认值是英文名。5.2 改变按钮的外观HTML对文本提供了丰富的颜色设置，唯独对表单按钮默认的则是Windows系统的颜色，显得有点死板，而且也没有提供按钮的颜色设置参数，因此，要改变表单按钮的外观，只能借助于CSS了。请看下面的示例：你看！这个按钮是不是变了样，新鲜多了吧？我们来看看它的源代码作了那些改变。按钮源代码：从源代码中可以看出，按钮的基本参数设置没变，只是加了一段CSS代码，正是这段CSS代码改变了按钮的外观风格。在这段CSS代码中，不仅重新设置了表单按钮的背景色和字号大小，而且还对按钮的边框线进行了设置，把上边框线、左边框线设置浅一点的颜色，而把下边框线、右边框线设置深一点的颜色，其目的是使表单按钮产生立体效果。当然，你可以任意改变CSS代码中颜色，以使按钮的颜色与所在网页的颜色协调。若想使表单按钮一改那死板板的老面孔，能象网页中其它导航菜单那样具有动态变换样式的效果且仍具其特殊地表单按钮功能，使它更具吸引人的魅力，采用本文介绍的制作方法是个不错的主意。请看下面的示例子。5.3 动态变换文本按钮鼠标不在按钮上鼠标在按钮上你看！这个按钮的效果不错吧？！制作这种效果的思路是这样的，利用CSS属性可以动态改变的特点，先给按钮定义两种外观样式，再在标记中加上两个事件，即onmuseover（鼠标在按钮上）和onmuseout （鼠标离开按钮），我们用这两个事件分别调用不同的CSS定义的按钮外观样式，从而达到动态变换的效果。为了提高CSS的利用率（若有多个按钮，则可重复使用），把CSS放到与之间，在按钮中用class 调用CSS格式。本例在与之间的CSS代码是这样的： 本例按钮的代码如下： 从上面的代码中可看到，当鼠标移到按钮上，也就是onmuseover事件发生，那么按钮将采用style2甩定义的外观样式；当鼠标移开按钮时，也就是onmuseout事件发生，那么按钮就采用style1所定义的外观样式，从而实现了动态变化的目的。后面那个class=style1的作用是当onmouseover、onmouseout这两个事件都没发生时，采用style1所定义的外观样式，从而保持了按钮外观的一致性。5.4 动态变换图像按钮鼠标不在按钮上鼠标在按钮上本例与上例在制作思路和制作方法上均没有多大区别，只是采用了两张图片来作按钮背景，但产生的效果却非同一般。在制作这种效果的按钮时要注意两点：1、作按钮背景的图片最好用具透明背景的gif图片，这样可以做出各种各样形状的按钮，将具有很强的个性；2、背景图片的大小要与按钮的大小一致，否则，由于背景的平铺填充，将使按钮面目全非。下面是本例在与之间的CSS代码： 本例的按钮代码如下： 从按钮代码可看出它与例一的按钮代码完全相同，但本例的CSS代码与例一有较大的区别，这里要注意：url后面的括号中是按钮背景图片的地址，也就是含路径的图片文件名，你在实际制作时要把它改成图片的实际地址。另外再多讲一句，你若是用图形化网页制作工具（如Dreamweaver)，那么凡是用CSS产生的效果，一般在编辑窗中是看不到的， 如本文的按钮效果，只有在预览时才能看到，在编辑窗口中看到的仍是表单默认的那种样子。6 用好帧窗口标记帧窗口是一种复杂的页面技术，应用帧窗口使得用户可以在同一个浏览器窗口中浏览不同网站的内容，可以在一个小窗口中发出查询命令而在另一个小窗口中接收查询结果。实现帧窗口的思路是将浏览器窗口按照功能分割成多个小窗口。每个窗口都对应有自己的HTML页面，按照一定的组合方式组合在一起，以实现特殊的效果。 在HTML中用（分割窗口标记）来分割窗口，在多窗口页面中的地位就相当于在普通单窗口页面中的地位，在页面中用标志页面主体部分的起止位置。而且，标记决定了怎样划分窗口，以及每个窗口的位置和大小。其基本语法结构如下：cols和rows：是决定页面如何分割的两个参数。分割左右窗口用cols，各帧的左右宽度用占窗口宽度的百分比来表示。比如：cols=30%,40%,*就表示水平方向分割成三个窗口，各自所占总宽度的百分比依次是30%，40%和30%。其中*表示剩余部分，也就是说*对应的小窗口宽度为剩余的宽度。分割上下窗口用rows，同样采用百分比的设定方法。frameborder：是指定各分窗口是（ye）否（no）要加边框；如果加过框的话，则用 border参数指定边框的宽度，bordercolor指定边框的颜色。framespacing：用于设定各分窗口之间的间隔大小，默认值是0。用标记把窗口分割好后，各窗口的属性是用HTML的标记来定义的，所以标记中必须包含标记，用以定义各分窗口的属性。其语法如下：align：设定分窗口的位置是靠左（left）、靠右（right）、居中（center）、靠上（top）还是靠底（bottom）。name：用于指定分窗口的名称，src则用于指定分窗口所对应的HTML页面地址。noresize：是对用户来说的，当标记中包含此参数的时候，用户就不能用鼠标调整修改各分窗口的大小。scrolling：设定分窗口是否要滚动条。scrolling=no时不要滚动条，scrollingyes时表示要滚动条，scrollingauoto时表示根据实际情况自动设置滚动条。frameborder和bordercolor：是设定分窗口有无边框和边框颜色的。但对象只限于用标记的分窗口。marginheight和marginwidth：分别用于设定分窗口的上下边缘和左右边缘的宽度。用上面的两个标记，就能够实现多窗口页面，下面将举例说明。6.1 左大右下两窗口这种页面一般在左边的窗口放一个网站导航页，右面放网站页面内容。制作方法：先用标记并通过设置其cols参数，沿水平方向分割成两个窗口，左边的窗口占20%，右边的窗口取剩余部分，再用标记分别定义两个窗口的属性。完成后的分帧页面源代码如下：分帧窗口示例 很抱歉！这是一个分帧页面，但由于你的浏览器不支持，所以不能浏览！ Sorry!This page uses frames,but your browser doesnt support them . 从上面的代码看，设计帧窗口页面并没有想象得那么复杂，但以下几点在具体操作时要注意：1）用标记定义分窗口属性时，要注意其在标记中的顺序，切不要搞乱了；2）分窗口的名称虽可随意定，但最好是以其所在位置命名比较好；3）分窗口的scrolling（滚动条）一般取其默认值auto比较好；4）虽然在最终往往不要分窗口的边框，但在设计阶段，还是设置为有边框比较好，这样在编辑时一目了然；5）上面页面代码中后面那句话一般加上为好，因为有的浏览器版本不支持分帧页面，若没加那名话，用户的浏览器若不支持分帧时，看到的是一片空白，不知是怎么一回事了，有那句话提示一下就明白了。6.2 一顶一左一右页面先看这种分帧页面的源代码： 从上面的代码中可看出，建立复杂分帧页面的方法是由简到繁，如本例中，先用定义其“rows”参数，把窗口分成上下两个窗口，再用标记定义上部窗口，因下部窗口还需再分，所以不用定义其属性，而是用标记设置其cols参数，把它再分成左右两个窗口，因已达目的，所以开始用标记定义左右两个窗口的属性。 只要记住：先粗分，后细分，cols横向分， rows纵向分，无需再分的窗口用定义属性，这些基本原则，制作分帧窗口页面就会轻松自如。7 帧窗口之间的交互技巧在多窗口的分帧页面中，各分窗口之间的信息交互是经常的事。在导航窗口中点了超级链接，那么如何在另一窗口中打开链接的网页呢？我在这个窗口中按下按钮，能在另一个窗口中写信息吗？窗口那么多，又如何识别窗口呢？请看下面的例子。 7.1 在导航窗口点击链接，在另一窗口打开网页现有一分帧页面如上图所示的，A窗口是网站logo及广告，B窗口是导航栏