清净莲海六合敬修学网祈愿：世界和平正法久住

标题: HTML第一课　边框的简单制作 [打印本页]

作者: 画儿 时间: 2009-4-19 08:23 标题: HTML第一课　边框的简单制作

HTML第一课　边框的简单制作

画儿编写

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

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

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

　　请看下面一组代码：

　　展示效果：

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

　　分析：

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

　　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>之间。

作者: 画儿 时间: 2009-4-19 08:27

全屏边框的制作

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

<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 这一行是起定位作用的代码。

作者: 画儿 时间: 2009-4-19 08:28

画儿做的金苹果全屏边框

作者: 画儿 时间: 2009-4-19 08:38

那措卓玛法师

做的莲花全屏边框

作者: 画儿 时间: 2009-4-19 08:41

　　标签的分析

<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了。

作者: 画儿 时间: 2009-4-19 08:43

　　关键点：

　　在起始代码的部分，相信大家注意到了这样的一组代码：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 这一行是起定位作用的代码。

作者: 画儿 时间: 2009-4-19 08:47

　　最近在讲音画课，我把自己编写的教材发上来，希望对大家有所帮助。

　　此教材于清净莲海独家发布，仅限浏览，谢绝转载。

　　因初次编写代码教材，肯定会有很多不当之处，敬请朋友们指正。

欢迎光临清净莲海六合敬修学网祈愿：世界和平正法久住 (http://jixiangyun.com/bbs/)