打印

HTML第一课 边框的简单制作

HTML第一课 边框的简单制作

HTML第一课 边框的简单制作

 

 

画儿编写

 

 

  此教材于清净莲海独家发布,仅限浏览,谢绝转载。因初次编写音画代码教材,肯定会有很多不当之处,敬请朋友们指正。


 

  首先,我们简略认识一下HTML代码。HTML是一种用来制作超文本文档的简单标记语言,与普通文档不同,它可以加入文字、图片、声音、动画、影视等内容,可以从一个文件跳转到另一个文件,与世界各地主机的文件连接,通过WWW浏览器显示出效果。它的特点是用一对小尖括弧(“<  和  >")作为标签。所谓标签,就是它采用了一系列的指令符号来控制输出的效果,这些指令符号用“<标签名字 属性>”来表示。而且大部份是成对的双标签,即首标签和尾标签。


 

  下面说一下边框的简单制作


 

  请看下面一组代码:


 

<TABLE cellSpacing=38 width="100%" background=http://bbs.heshang.net/attachments/forumid_168/20090307_b3256d396c1ab21af11clDz17OHZG9jJ.gif>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#0d1737 cellPadding=12 width="100%" borderColorLight=#24387a background=http://tw.netsh.com/eden/img/forumupload/711609/11389736641137020.gif border=1>
<TBODY>
<TR>
<TD>
<TABLE cellPadding=5 width="100%" background=http://tw.netsh.com/eden/img/forumupload/711609/11389736521137020.jpg>
<TBODY>
<TR>
<TD>
<TABLE width="100%" background=http://www.ne.jp/asahi/syaraku/kichinyado/hana2/suiren/suiren22/suiren222.jpg border=0>
<TBODY>
<TR>
<TD>

  展示效果:

 

 

 

  

 

     这个边框是怎样组成的,看一下上面的代码,就会发现它们的共性。

 

  分析:

<TABLE cellSpacing=38 width="100%" background=图片的网址>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#0d1737 cellPadding=12 width="100%" borderColorLight=#24387a background=图片的网址 border=1>
<TBODY>
<TR>
<TD>
<TABLE cellPadding=5 width="100%" background=图片的网址>
<TBODY>
<TR>
<TD>
<TABLE width="100%" background=图片的网址(背景图片) border=0>
<TBODY>
<TR>
<TD>

  它们都有一个“图片的网址”这就是它们的共性,也就是说:我们用“超文本语言”把这个图片展示出来了。并设置了它展示的“宽度”。

  cellSpacing=38 这个代码就是管“宽度”的(用像素值38来定义)。同样:(cellSpacing=12,cellSpacing=5)它们分别设置了第二层到第三层边框图片展示的宽度)

  width="100%"是网页展示的宽度。

  第四层边框没有设置宽度的代码?它只有网页的宽度:width="100%"和border=0)在“超文本语言”中如果你不设置展示的数据,会以系统默认的方式生成它要展示的。在border=0等于零的时候,就会展示为平铺,也就是说网页多宽它就会展示多宽。

  1:隐藏播放界面音乐语法:

<embed src=音乐地址 autostart=true loop=true hidden=true type=audio/mpeg></EMBED>

  把这一组代码放在你的作品代码的最后。

  2:展示播放器代码

<P align=center><EMBED src=音乐地址 width=760 height=45 type=audio/mpeg AUTOSTART="TRUE" LOOP="TRUE"></EMBED>

注意:展示播放器代码加入的位置一定要加在你的网页代码<TD>和</TD>之间。

  伟大祖国是炎黄子孙最美丽的家园,五星红旗是我们家园最亮丽的一道风景,让我们共同祈愿:祖国明天更好!

TOP

全屏边框的制作


  方法都是一样的,只是增加了定位语言。先看三楼《金苹果》这个边框的代码:

<TABLE style="LEFT: -200px; WIDTH: 1000px; POSITION: relative; TOP: 0px; HEIGHT: 0px" cellSpacing=90 cellPadding=1 align=left background=http://club.fjnet.com/attachments/2009/03/636003_200903291352341zBjS.jpg border=2>
<TBODY>
<TR>
<TD>
<DIV align=center><FONT size=4></EMBED><FONT color=#cccc00></FONT></FONT></DIV>
<CENTER>
<TABLE cellSpacing=3 cellPadding=0 width=680 bgColor=#b85b20 background=http://www.amorperdonypaz.com/165doradomodif.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=1 borderColorDark=#4d220f cellPadding=0 width=680 bgColor=#b85b20 borderColorLight=#9d461f background=http://www.amorperdonypaz.com/165fdoluz2.jpg border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=10 borderColorDark=#4d220f cellPadding=0 width=680 bgColor=#b85b20 borderColorLight=#9d461f background=http://www.amorperdonypaz.com/165fdoluz3.jpg border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=0 cellPadding=0 width=680 bgColor=#b85b20 background=http://www.amorperdonypaz.com/165doradomodif.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=0 borderColorDark=#6d3014 cellPadding=0 width="99%" bgColor=#b85b20 borderColorLight=#401c0c background=http://www.amorperdonypaz.com/165fdoluz1.jpg border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=0 borderColorDark=#6d3014 cellPadding=0 width="91%" bgColor=#b85b20 borderColorLight=#401c0c background=http://www.amorperdonypaz.com/165doradomodif.jpg border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=10 cellPadding=0 width="99%" bgColor=#b85b20 background=165fdoluz3.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=0 borderColorDark=#6d3014 cellPadding=0 width="100%" bgColor=#b85b20 borderColorLight=#401c0c background=http://www.amorperdonypaz.com/165fdoluz2.jpg border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE style="WIDTH: 692px; HEIGHT: 0px" cellSpacing=3 borderColorDark=#4d220f cellPadding=0 width=692 bgColor=#b85b20 borderColorLight=#9d461f background=http://www.amorperdonypaz.com/165doradomodif.jpg border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=0 cellPadding=0 width="100%" bgColor=#b85b20 background=http://www.amorperdonypaz.com/165fdopral.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<DIV align=left><FONT color=#cccc00 size=4> </FONT></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV><BR></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></CENTER></TD></TR></TBODY></TABLE></DIV>

 
 

     在起始代码的部分,相信大家注意到了这样的一组代码:style="LEFT: -200px; WIDTH: 948px; POSITION: relative; TOP: 0px",这点是个关键,其属性如下:
LEFT: -200px;定位网页整体的左右位置,数值越小越向左偏移,反之向右移动
WIDTH: 1000px 整体网页的展示宽度,用像素值来定义
POSITION: relative设定网页以相对本文档面显示
TOP: 0px 边框距顶部的距离

 
  TABLE id=table1 style="LEFT: -200px; WIDTH: 1000px; POSITION: relative; TOP: 0px   这一行是起定位作用的代码。


 

  伟大祖国是炎黄子孙最美丽的家园,五星红旗是我们家园最亮丽的一道风景,让我们共同祈愿:祖国明天更好!

TOP

  画儿做的金苹果全屏边框
 

  伟大祖国是炎黄子孙最美丽的家园,五星红旗是我们家园最亮丽的一道风景,让我们共同祈愿:祖国明天更好!

TOP

那措卓玛法师

 

做的莲花全屏边框

 

  伟大祖国是炎黄子孙最美丽的家园,五星红旗是我们家园最亮丽的一道风景,让我们共同祈愿:祖国明天更好!

TOP

  标签的分析

 

  

<TABLE cellSpacing=边框宽度 width="网页宽度" background=第一层边框图片网址>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=1 borderColorDark=#0d1737 cellPadding=边框宽度 width="网页宽度" borderColorLight=#24387a background=第二层边框图片网址 border=1>
<TBODY>
<TR>
<TD>
<TABLE cellPadding=边框宽度 width="网页宽度"background=第三层边框图片网址>
<TBODY>
<TR>
<TD>
<TABLE width="网页宽度" background=背景图片网址 border=0>
<TBODY>
<TR>
<TD>此处加入文章内容</TD> </TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

  标签的分析:

 

    <table>表格的起始符。任意一个表格的开始都必须以它开头,且必须有终止符</table>

    cellspacing:单元格间距。当一个表格有多个单元格时,各单元格的距离就是cellspacing了,如若表格只有一个单元格,那么,这个单元格与表格上、下、左、右边边框的距离也是cellspacing

    width:表格的宽度。取值从0开始,默认以像素为单位,与显示器的分辨率的像素是一致的。800×600的显示分辨率下,如果表格设置成1000个像素的宽度,那么,得出的效果将导致IE的横向滚动条出现,只有通过滑动它才能看到表格最右边的内容,所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比,如widht="100%",这种赋值法有个好处:表格的宽度将根据可显示的宽度来自我调整宽度。

    background:表格的背景图。其值为一个有效的图片地址。<td>也有此属性。同时设置背景色和背景图不冲突,也建议这么做,这样,当图片不能显示时,表格的外观依然是好看的。

    <tbody>硖宓钠鹗挤=舾?lt;FONT color=#dc143c><table>之后,表示表体开始。必须有终止符</tbody>,放在</table>之前。在纯网页中可以不要tbody元素,但在论坛一定要使用,因为,当帖子用到较多的表格时,论坛的自动填充功能将可能会导致代码出错。

    <tr>表示表格的行,其中,t是table,r是row(行)。有多少组tr,这张表格就有多少行。<tr>紧跟在<tbody>之后。必须有终止符</tr>

    <td>表示表格的列,t是table,d可理解为down(向下)。有多少组td,这张表格就有多少列。<td>紧跟在<tr>之后。终止符为</td>。td与tr配合构成单元格。

 

 

  以上就第一层边框的基本要素,现在我们在看看第二层边框:

 

<TABLE cellSpacing=0 borderColorDark=#0d1737 cellPadding=边框宽度 width="网页宽度" borderColorLight=#24387a background=第二层边框图片网址 border=1>
<TBODY>
<TR>
<TD>

 

  其它的全和第一层一样,但多了这几组:

 

  1:borderColorDark=#0d1737 暗边框,颜色为0d1737 当border值不为0时设置有效。暗边框指表格的右边和下边的边框。

  2:borderColorLight=#24387a 亮边框,颜色为24387a 当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。

  3:cellpadding:单元格衬距。指该单元格里的内容与cellspacing区域的距离,如果cellspacing为0,则表示单元格里的内容与表格周边边框的距离。

第三层同第一层一样,不再说明了,现在我们来看最后一层边框也就是背景。

<TABLE width="网页宽度" background=背景图片网址 border=0>
<TBODY>
<TR>
<TD>

  它只有背景的宽度width="网页宽度"背景展示的网址:background=背景图片网址,还多了一个border=0它是什么意思呢?当border=0时系统默认里面的内容为平铺。

border:此属性定义表格的边框。比如,border=1,表示表格边框的粗细为1个像素(默认值),为0表示没有边框。

    以上就是边框的基本结构,表格标签里,所有元素都成对出现,而这些元素是按照从大到小的顺序从外往里层层包裹的。table最大,它占在起始和终结的位置,tbody是老二,tr是老三,td最小,它在最里层。现在我们来看一个实例

 

例:

<TABLE cellSpacing=38 width="100%" background=http://www.mxyfz.cn/07/bg1.jpg>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#0d1737 cellPadding=12 width="100%" borderColorLight=#24387a background=http://lhs201.vip114.dns8cn.cn/07/htm04bg-2.gif border=1>
<TBODY>
<TR>
<TD>
<TABLE cellPadding=5 width="100%" background=http://lhs201.vip114.dns8cn.cn/07/htm05bg-3.jpg>
<TBODY>
<TR>
<TD>
<TABLE width="100%" background=http://www.mxyfz.cn/07/htm05bg-4.jpg border=0>
<TBODY>
<TR>
<TD>加入文章内容处</TD> </TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

做边框不是很难,大家会了吧!

 

加音乐

 

在此给出一组隐藏播放器的语法,代码如下:

 

<embed src=音乐的绝对网址 autostart=true loop=true hidden=true type=audio/mpeg></EMBED>

 

只要将这组代码放在您贴子代码的最后面就OK了。

  伟大祖国是炎黄子孙最美丽的家园,五星红旗是我们家园最亮丽的一道风景,让我们共同祈愿:祖国明天更好!

TOP

  关键点:

  在起始代码的部分,相信大家注意到了这样的一组代码:style="LEFT: -200px; WIDTH: 948px; POSITION: relative; TOP: 0px",这点是个关键,其属性如下:
LEFT: -200px;定位网页整体的左右位置,数值越小越向左偏移,反之向右移动
WIDTH: 1000px 整体网页的展示宽度,用像素值来定义
POSITION: relative设定网页以相对本文档面显示
TOP: 0px 边框距顶部的距离

  TABLE id=table1 style="LEFT: -200px; WIDTH: 1000px; POSITION: relative; TOP: 0px   这一行是起定位作用的代码。

  伟大祖国是炎黄子孙最美丽的家园,五星红旗是我们家园最亮丽的一道风景,让我们共同祈愿:祖国明天更好!

TOP