分享

代码入门教程(6)

 春天没来 2012-10-15
 
第一章 代码基础知识
第十节 表格标签
 
       本节讲解表格标签。
        表格标签也是常用标签之一,而且是个比较麻烦的标签,难理解的标签。例如:表格的边距、间距,背景图片的设置,多重表格的设置等内容,都是比较难理解的内容。这些内容我将在表格的制作中讲解,本节只讲解表格的一套标签以及常用的属性与属值。
        说到表格,不得不说说边框。在制作网页的时候,我们常常使用边框。你撰写了一篇很优秀的文章,发表以后,总感觉到页面干巴巴光秃秃的,外表不美观,如果把它放置到一个美丽的边框中,将给你的文章增添不少色彩,会吸引更多的读者来浏览它收藏它。本节要讲解的内容,正是这个边框。
        也许有人会问,你既然要讲解边框,为什么又说是要讲解表格呢?边框和表格究竟是什么关系呢?
        在网络中流传的诸多代码中,只有表格标签,没有边框标签,这是为什么呢?我想其中的道理也许是如此吧:边框是表格,是表格的一种特殊形式,是添加了装饰的表格。在边框中,可以设置多种漂亮的边框线,可以设置表格的间距,设置背景图片,还可以在表格中再套入表格,制作出三五层、七八层以至更多层次的叠加边框。这样的表格,非常漂亮,真可谓五彩缤纷,美不可言。而一般的表格,是用不着添加这些装饰的,或者换句话来说,如果添加了这些装饰,倒显得有点儿画蛇添足了。
         书归正传,下面讲解表格标签。
        表格标签,是一套标签。它包括表格标签、表格的主体标签、表格的行标签、表格的列标签,在使用的时候,相互配合,缺一不可。
        表格标签:<TABLE> 表格的主体标签:<TBODY> 表格的行标签:<TR> 表格的列标签:<TD>表格的列尾标签:</TD>表格的行尾标签:</TR>表格的主体尾标签:</TBODY>表格尾标签:</TABLE>
 
        在表格标签中,我们常常添加一些属性和属值。
        表格常用属性:
        cellspacing (单元格间距,是指单元格之间的距离。)  cellpadding (单元格衬距,也叫边距。是指单元格中的内容与单元格的边线之间的距离。 )background(表格的背景图片) border(边框线宽度) bordercolor(表格的边框颜色) border-style(边框线样式) width(表格的宽度) height(表格的高度)
        表格常用属性的表示方法:
        cellspacing =数值 cellpadding=数值 background=图片地址 border=数值(单位为px) bordercolor=颜色值 width=数值(单位为px) height=数值(单位为px)
边框线样式:

none

默认值。不绘制边框,无论是否指定了任何 border-width。

dashed

边框为虚线。由点组成的虚线。

dotted

边框为点虚线。

double

边框是在对象的背景之上绘制的双线。两条单线的宽度加上它们之间的间距所得到的和值等于 border-width值。边框宽度必须至少为 3 个像素宽才能绘制双线边框。

groove

根据此值绘制彩色的三维凹槽。必须指定对象的 border-width属性,才能正确呈现样式。

inset

根据此值绘制彩色的三维凹边。

outset

根据此值绘制彩色的三维凸边。

ridge

根据此值绘制彩色的三维菱形边框。

solid

边框为实线。

window-inset

边框样式与嵌入相同,但外面多加了一个直线边框,该边框样式是根据此值绘制的彩色边框。

 
        注意:如果系统不支持这些 边框的属性值,那么“dotted”、“dashed”、“double”、“groove”、“ridge”、“inset”和“outset”都会被 “solid”代替。
        边框线样式举例:border-style:none
        表格标签举例:
         1、<table border="5" cellSpacing="1" cellPadding="3" width="650"
height="210">
<TBODY>
<TR>
<TD>
</TD></TR></table>
        2、<table border="0" cellPadding="0" width="800" background="
height="600">
        3、<table style="border-color: rgb(87, 193, 0); width: 600px; height: 100px;
text-align: left; border-collapse: collapse; background-color: rgb(204, 249, 249);
" border="0" cellSpacing="0" cellPadding="2" width="500">
 
        说明:
        例1是表格的一套标签,例2与例3都只提供了表格标签,省略了表格的其它标签以及所有的尾标签。例3中使用了css样式,有关css样式在以后的章节中讲解。
 
        作业:
        1、认识表格的一套标签以及它们的尾标签。
        2、认识表格的常用属性、属值以及它们的表示方法。
        3、应用上面所讲的内容,试制一个表格(边框)看看效果。
 
2012年10月15 日于北京
 
第 一 章 代 码 基 础 知 识
 
第十一节 多媒体标签
精美分隔线(6) - 玫瑰夫人
 
       本节讲解多媒体标签。
        多媒体标签,也叫插入标签。这是一个人人都喜爱的标签。应用这个标签,可以插入动画图片,可以插入音乐播放器,可以插入视频。它的有声有色的动态画面,博得了大家的青睐。在这里我要说明的是,这个标签的名称,是我杜撰的,因为在网络中,我查找不到这个标签的名称。而作为一个标签,总得有个名称称呼,使用起来才方便。其实,叫什么名称并不重要,重要的是应该懂得它的意义,懂得它的用法。在祖国的汉语言中,等义词现象是处处可见的。例如:爸爸、父亲、老子;土豆、马铃薯、山药蛋。等义词表达的都是同一个意思。如果多媒体标签有什么标准名称的话,我们就把 “多媒体标签”这个名称当作是标准名称的别名或者等义词吧。
        多媒体标签语法举例(动画): (网络中常见的动画图片是swf格式的动画图片)
        <embed height="400" type="application/octet-stream" width="600"
src="动画地址" wmode="transparent" invokeurls="false" quality="high"
allowScriptAccess="never" allowNetworking="internal">
        代码注释:
        embed(标签名称:多媒体标签或者插入标签) height="400"(高度=400px) 
type="application/octet-stream"(类型=任意的二进制数据) width="600"(宽度=600px)
src="动画地址"(地址=具体的动画地址) wmode="transparent"(窗口模式=透明模式) 
invokeurls="false" (指定或检索一个值用来显示是否将url事件载入web浏览器=url事件将不能被载入浏览器) 
quality="high"(品质=高) allowScriptAccess="never"(设置防止页面跳转=外出脚本访问将始终失败。)
allowNetworking="internal"(设置防止页面跳转=可以控制 SWF 文件对网络功能的访问
        wmode是window mode的缩写,意思为窗口模式。窗口模式总共有三种:window 模式、Opaque 模式与Transparent 模式。
        window 模式:
        默认情况下的显示模式,在这种模式下flash player有自己的窗口句柄,这就意味着flash影片是存在于Windows中的一个显示实例,并且是在浏览器核心显示窗口之上的,所以flash只是貌似显示在浏览器中,但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面,这就导致默认显示方式下flash总是会遮住位置与他重合的所有DHTML层。
        Opaque 模式:
        这是一种无窗口模式,在这种情况下flash player没有自己的窗口句柄,这就需要浏览器告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。
        Transparent 模式:
        透明模式,在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象,同样你也可以使用z-index来控制flash影片的深度值,但是与Opaque模式不同的是这样做会降低flash影片的回放效果,而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。
了解了各种模式的实现方式和意义在以后的开发中就可以按照具体情况选择设置wmode属性的值了。
        ★allowNetworking的属值有:all、internal和none。
        属值设置为"all"(全部的意思。此属值为默认值。)时:― SWF 文件中允许使用所有网络 API(应用程序编程接口)。
        属值设置为时internal时,― SWF 文件可能不调用浏览器导航或浏览器交互 API,但是它会调用任何其它网络 API。
        属值设置为none时,― SWF 文件可能不调用浏览器导航或浏览器交互 API,并且它无法使用任何 SWF 到 SWF 通信 API。
        ★AllowScriptAccess 参数可以防止从一个域中承载的 SWF 文件访问来自另一个域的 HTML 页面中的脚本。对从另一个域承载的所有 SWF 文件使用可以确保位于 HTML 页面中的脚本的安全性。
        AllowScriptAccess 的属值有sameDomain、never和always。
        属值设置为sameDomain时:仅当SWF 文件和网页位于同一域中时才允许执行外出脚本访问。这是 AVM2 内容的默认值;
        属值设置为never时:外出脚本访问将始终失败。
        属值设置为always时:外出脚本访问将始终成功。
        多媒体标签语法(播放器):
        <embed height="33" name="musicFlag" type="application/x-shockwave-flash"
autostart="true" wmode="transparent">
       代码释义:
        embed(标签名称:多媒体标签或者插入标签) height="33"(高=33px) name="musicFlag" (名字=动画)     
type="application/x-shockwave-flash" (样式=动画类型) width="257"(宽度=257)
src="http://www.xiami.com/widget/0_1769107678/singlePlayer.swf"(地址=动画地址) autostart="true"(播放形式=自动播放)  wmode="transparent"(窗口模式=背景透明 )
       播放器常用属性介绍:
        autostart:播放形式。autostart="true"或autostart="1"表示自动播放;autostart="false"或autostart="0"表示手动播放 。
        loop="true" 或者loop="1"表示重复播放,loop=false或者false="0"表示只播放一次 。
        如果要隐藏播放器,把width和height的数值修改为0或者1。
        hidden:面板显示。hidden=true 显示面板 hidden=flase 不显示面板。
starttime:开始时间。starttime="00:10"(分:秒)该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放。
height:控制面板的高度; width:控制面板的宽度。
controls:外观设置。表示方法举例:controls=console
       属值有下面几种:
        console:一般正常面板;
        smallconsole:较小的面板;
        playbutton:只显示播放按钮;
        pausebutton:只显示暂停按钮;
        stopbutton:只显示停止按钮;
        volumelever:只显示音量调节按钮。
        name=# : "#"为对象的名称。该属性给对象取名,以便其他对象利用。例如:name="sound1"
        title=# : "#"为说明的文字。该属性规定音频或视频文件的说明文字。 例如:title="第一首歌"
        palette=color|color: 前景色和背景色.。该属性表示嵌入的音频或视频文件的前景色和背景色,第一个值为前景色,第二个值为背景色,中间用 | 隔开。color可以是RGB色(RRGGBB)也可以是颜色名,还可以是transparent (透明)。 示例:<embed src="your.mid" palette="red|black">
        对齐方式:align=top、bottom、center、baseline、 left、right、texttop、middle、 absmiddle、absbottom 。(该属性规定控制面板和当前行中的对象的对齐方式。 )
        center:控制面板居中; left:控制面板居左; right:控制面板居右; top:控制面板的顶部与当前行中的最高对象的顶部对齐; bottom:控制面板的底部与当前行中的对象的基线对齐; baseline:控制面板的底部与文本的基线对齐; texttop:控制面板的顶部与当前行中的最高的文字顶部对齐; middle:控制面板的中间与当前行的基线对齐; absmiddle:控制面板的中间与当前文本或对象的中间对齐; absbottom:控制面板的底部与文字的底部对齐。
 
       作业:
        1、认识多媒体标签的语法。
        2、认识多媒体标签常用的属性与属值以及它们的表示方法。
        3、自己找几个动画图片认识一下它们的代码。

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多