您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>网页素材>>>网页制作实例教程>>>HTML教程——步步为营之一
HTML教程——步步为营之一
发表日期:2009/11/6 21:03:00 出处:网络 作者:未知 发布人:zhang9607lin 已被访问 2482



本教材是参照黑马老师的“HTML帖子制作教程 ”编写而成。是为了给来本网站发帖,而不会做网页的朋友提供无偿服务,面向初学者编写的。如果朋友们用心去学习,这个教材一定能让你作出一个漂亮的图文并茂的帖子。所谓步步为营,就是不要急于求成,耐心的一步一步学,一步一步的练,你一定会成功的!

 

一、表格的基本构架

     

    表格是在论坛做帖的重要武器。因为论坛提供给用户操作的区域是非常有限的,用户只能在论坛程序框架好的body区域里的某个区域施展身手,不能修改body的背景色,更不能介入head的定义,因此,诸如让自己的帖子有底色、底图之类的修饰,用户只能通过表格来实现。表格是一个可自定义的容器,因而它就是我们用以实现帖子构设的利器。

    把表格称作容器源于表格的装载特性。表格是用于装载数据的,与我们现实中所看到和理解的表格非常一致。我们在Word和Excel里都接触过表格,知道表格有表头、表体、单元格、行、列等等概念,它们并不难理解。而在HTML里,对表格的理解和运用可能会增加一些概念,但也不复杂,只要用心学习一定会很快掌握的。

    表格不仅仅只能装载数据,它还被广泛地应用于网页的布局,这与其本身的作用有关。它能将其所在区域划分为行和列诸多单元格。表格用于网页布局过去非常流行,现在仍然深受欢迎,它在网站、论坛做帖有着不可估量的作用。因使用了表格,帖子的页面布局将会随心所欲地排版。

 

 

     表格是一个可自定义的容器。一张完整的表格有表头、表体、单元格、行、列等等元素组成。下面是一个完整的表格标签代码框架:为了一目了然,清晰明白,先不对它的属性进行描述。

 

<table>
  <tbody>
    <tr>
       <td>内容</td>
    </tr>
  </tbody>
</table>

 

 

标签代码说明:

 

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

    <tbody>:表体的起始符。紧跟在<table>之后,表示表体开始。必须有结尾符,放在</table>之前。在纯网页中可以不要tbody元素,但在论坛一定要使用,否则,当帖子用到较多的表格时,论坛的自动填充功能将可能会导致代码出错。

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

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

    </td>、</tr>、</tbody>、</table>:这些都是相应元素的终止符,表示相应元素所规范的内容结束。必须注意它们的排列顺序,不能有错。

    从表格的代码框架分析得出:表格标签里,所有元素都成对出现,而这些元素是按照从大到小的顺序从外往里层层包裹的。table最大,它占在起始和终结的位置,tbody是老二,tr是老三,td最小,它在最里层。

下面便是它们的隶属关系

 

 <table>
  <tbody>
    <tr>
       <td>
内容</td>
    </tr>
  </tbody>
</table>

 

二、表格的属性

 

1<table>标签中各个元素的属性设置

  

   <table>标签中所需要设置的元素:

border:表格的边框; cellspacing:单元格间距; cellpadding:单元格衬距; width表格的宽度; height:表格的高度; bgcolor:表格的背景色; background:表格的背景图; bordercolor:表格的边框颜色; bordercolorlight:亮边框颜色; bordercolordark:暗边框颜色; align:表格的对齐方式。

 

    如何设置这些属性

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

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

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

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

    height表格的高度,取值方法同width。提示:如果不是特别需要,可不设置表格的高度,由系统根据表格的内容自动设置高度。如果需要表格的高度精确则要设置,比如,要用表格的背景来发一张图片时,如果表格的高度不精确定义,图片便不可能完整或完美地显示。

    bgcolor表格的背景色。取值方法为:bgcolor=#ff0000bgcolor=red。单元格<td>也可有此属性,如果设置了表格的背景色,又设置表格单元格的背景色,得出的效果将是值得试试的,这种情况主要用于多单元格的表格。

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

    bordercolor表格的边框颜色,当border值不为0时设置此值有效。bordercolor=#ff0000bordercolor=redbordercolor。当同时设置了暗、亮边框的颜色,bordercolor的颜色设置是多余的,这一点应该注意。

    bordercolorlight亮边框颜色,当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。取值方法:bordercolorlight=#ff0000bordercolorlight=red

    bordercolordark暗边框颜色,当border值不为0时设置有效。暗边框指表格的右边和下边的边框。bordercolordark=#ff0000bordercolordark=red

    align表格的对齐方式,值有left(左对齐,默认)、center(居中)以及right(右对齐)。align定义的是表格自身的位置,这是一个很有用的属性,建议使用它规定表格的对齐方式,尽量不要使用<p align=?>表格</p>、<div align=?>表格</div>和<center>表格</center>之类的标签来规定表格的位置,因为这么做将导致论坛添加许多废码!

    此外,当表格的宽度设置为100%,或者,表格的宽度设置成了占满它所在的容器的宽度,没有必要定义align属性。

    表格标签的属性较多,使得本节有一定的难度,需要悉心领会并一一记住。

    下面给出一个表格式样和代码,表格中有一些简单的说明。

 

本表格的属性设置:
边框大小:border=1
边框颜色:bordercolor=#ff0000
背景色:bgcolor=#cc9968
表格宽度:width=400
单元格间距:cellspcing=16
单元格衬距:cellpadding=8
表格的对齐方式(居中):align=center

注:其他属性未设置。

 

 

这个表格的代码:

 

<TABLE borderColor=#ff0000 cellSpacing=10 cellPadding=8 width=400 align=center bgColor=#cc9968 border=1>
<TBODY>
<TR>
<TD>
<P>本表格的属性设置:<BR>边框大小:border=1<BR>边框颜色:bordercolor=#ff0000<BR>背景色:bgcolor=#cc9968<BR>表格宽度:width=400<BR>单元格间距:cellspcing=16<BR>单元格衬距:cellpadding=8<BR>表格的对齐方式(居中):align=center<BR><BR>注:其他属性未设置。</P></TD></TR></TBODY></TABLE>

 

练习及实例

 

实例之一

未设置表格边框的代码,将其放到发文章对话框内看看效果是什么样子?

 

<table>
  <tbody>
    <tr>
       <td>
内容</td>
    </tr>
  </tbody>
</table>

 

 

实例之二

 

 

  尚未修饰的“完整的表格”

大家好(在这里添加文字)(可将内容复制粘贴在表格内)以下表格均可用复制粘贴的方法。

 

   可以把文字添加在代码中(也可以复制在做好的表格内)

   

100%比定义表格的宽度:

 

   代码:

<table border=2 width=80%>

   <TBODY>

      <tr>
        
<td>大家好!</td>
     </tr>

   </TBODY>

</table>

   

用像素定义表格的宽度

<table border=1 cellpadding=8 cellspacing=16 bgcolor=#cc9968 bordercolor=#ff0000 width=400 align=center>
  <tbody>
    <tr>
      <td>
表格里的内容写在这里</td>
    </tr>
  </tbody>
</table>

 

 

   实例之三

简单的边框修饰

 

亮边框(bordercolorlight=#008000)与暗边框 (borderColorDark=#808000 ),

 

   代码:

  
<TABLE borderColorDark=#808000 width="100%" borderColorLight=#008000 border=6>

   <TBODY>

     <TR>
      
<TD width="100%">亮边框(bordercolorlight=#008000)与暗边框     (borderColorDark=#808000),

       </TD>

     </TR>

   </TBODY>

</TABLE>

 

    换边框颜色

 

 

亮边框(borderColorLight=#9966cc ),与暗边框(borderColorDark=#0f66f0

 

代码:

 

<TABLE borderColorDark=#0f66f0 width="100%" borderColorLight=#9966cc border=6>

    <TBODY>

      <TR>
       
<TD width="100%">亮边框(bordercolorlight=#ff66ff)与暗边框(borderColorLight=#9966cc )

        </TD>

      </TR>

   </TBODY>

</TABLE>

 

 

实例之四

 

    同一颜色的边框

 

 

 

练习(可将内容复制粘贴在表格内)

 

  代码:如果将内容添加在代码内,一定要添加在“<TD> </TD> 中间,请看实例。

<TABLE borderColor=#66ccff width="100%" border=10>
  
<TBODY>
     <TR>
      
<TD width="100%">练习之三

       </TD>

     </TR>

   <TBODY>

</TABLE>

 

 

 

 

实例之五

 

   表格边框线的粗细和框边的空白

 

 

练习之五(可将内容复制粘贴在表格内)

 

 

代码:

 

 

<table border=2 cellpadding=4 cellspacing=10 bordercolor=#ff0000 width=100%>
   
<TBODY>
      <tr>
        
<td width=100%>练习之五</td>
      </tr>

   </TBODY>

</table>

 

 表格背景的修饰

    HTML网页里表格的背景色是白色的。这显然不总是符合我们的要求,我们通常会设置各种背景颜色,以配合网页或贴子。取值方法:bgcolor=black或bgcolor=#000000。

    除了使用背景色,还可使用图片修饰表格背景,这样会使表格的外观会更漂亮。但应该注意:用来作表格背景图的文件不要太大,太大了打开网页速度较慢,最好是有规则图案的小图片,或与表格大小相一致的图片。否则做出的表格也不会有理想的外观效果。

实例之六

   表格背景颜色的修饰

   这个表格已经有背景修饰了,比上面的好多看了吧,颜色可根据你的需要换的

背景色:bgcolor=#CCCC00
暗边框颜色:#008060
亮边框颜色:#008000

 在老师这个实例中,其中内容已经有简单的编辑了,这里面出现了一些编辑内容的标示语言,在学内容编辑时将会陆续接触到,学习要循序渐进,不要急于求成。

代码: 

<table border=10 cellpadding=2 width=100% bordercolorlight=#008000 bordercolordark=#008060 bgcolor=#CCCC00>
<tbody>  
  <tr>
   
 <td>
      <p align=left><font face=黑体 size=5 color=#800080>背景色:bgcolor=#CCCC00<br>  
      暗边框颜色:#008060<br>
      亮边框颜色:#008000</font>
    
</td>
   </tr>
  </tbody>
</table>

练习之六  《 色码表 》  从这个色码表里找你喜欢的颜色

代码

<TABLE cellSpacing=10 borderColorDark=#ff9999 cellPadding=2 width="100%" bgColor=#33ffff borderColorLight=#ffcccc border=6>
  <TBODY>
    <TR>
     
<TD width="100%">练习之六</TD>

    </TR>

  </TBODY>

</TABLE>

 

可以把这里的背景或边框的颜色代码(#ff9999)换成: #FF6666  #99CC66  #00FF00 等,看看会怎么样?

记住“#”字符号可别忘记了。

 

实例之七

   用图片修饰背景

 

背景色:bgcolor=#CCCC00
暗边框颜色:#008060
亮边框颜色:#008000

 

<table border=10 cellpadding=2 width=100% bordercolorlight=#008000 bordercolordark=#008060 bgcolor=#CCCC00 background=http://www.h4.dion.ne.jp/~herb/kabe-1.gif>
<tbody>
  
  <tr>
    <td>
      <p align=left><font face=黑体 size=5 color=#f0ffff>背景色:bgcolor=#CCCC00<br>  
      暗边框颜色:#008060<br>
      亮边框颜色:#008000</font>
    </td>
   </tr>
  </tbody>
</table>

    换过背景图片的表格

 

背景色:bgcolor=#CCCC00
暗边框颜色:#008000
亮边框颜色:#008060

 

 

background=http://www.h4.dion.ne.jp/~herb/kabe-1.gif>

 

用下面的背景图片将书面的图片换一下看看效果

 

http://www.53520.com/bbs/tp/1/4B264505797.gif

 

http://www.53520.com/bbs/tp/1/4B26169335.9.gif

 

 

   备用素材!

 

   色码表

 

动态背景素材(查图片地址的方法:将鼠标放到图片上点右键,在属性中就可以找到图片的原地址)

 

   静态背景素材

 

 

 

实例之八

   表格内容的编辑

 

 

户外活动




回家睡觉

 


心韵制作于二○○五年四月三十日

 

  代码:

  

  

<TABLE borderColorDark=#ecceb9 cellPadding=2 width="100%" borderColorLight=#eccea0 border=8>
<TBODY>
<TR>
<TD>
<P align=left><FONT face=
黑体 color=#008000 size=5><B>户外活动</B></FONT><BR><BR>
<P align=center><IMG src="http://www.medscape.com.cn/luntan/image/uppic/pic20040429125915.jpg"><BR><BR>
<P align=left><FONT face=
黑体 color=#008000 size=5><B>回家睡觉</B></FONT><BR><BR>
<P align=center><IMG src="http://www.medscape.com.cn/luntan/image/uppic/pic20040429125928.jpg"><BR>
心韵制作于二○○五年四月三十日</P></TD></TR></TBODY></TABLE>

 

 

 

 

<TABLE borderColorDark=#ecceb9 cellPadding=2 width="100%" borderColorLight=#eccea0 border=8>
<TBODY>
<TR>
<TD>
<P align=left><FONT face=
黑体 color=#008000 size=5><strong>户外活动</strong></FONT><BR><BR>
<P align=center><IMG src="http://www.medscape.com.cn/luntan/image/uppic/pic20040429125915.jpg"><BR><BR>
<P align=left><FONT face=
黑体 color=#008000 size=5><strong>回家睡觉</strong></FONT><BR><BR>
<P align=center><IMG src="http://www.medscape.com.cn/luntan/image/uppic/pic20040429125928.jpg"><BR>
心韵制作于二○○五年四月三十日</P></TD></TR></TBODY></TABLE>

 

 

<b>…</b>:字体加粗,与<strong>…</strong>效果,这两个代码中的字体加粗”  虽语法不一样,但效果一样的。 

 

表格嵌套

 

两层边框(两张表格的嵌套

Table No.1(Father Table)


Table No.2(Son Table)

Table No.1(Father Table)

代码:

<table border=8 bordercolor=#0099cc width=100%>
<tbody>
  <tr>
   <td>Table No.1(Father Table)
    <table border=8 bordercolor=#ccffcc width=100%>
     <tbody>
      <tr>
       <td><br>Table No.2(Son Table)<br></td>
      </tr>
     </tbody>
    </table>
    Table No.1(Father Table)
   </td>
  </tr>
</tbody>
</table>


3.三层边框(三张表格的嵌套)

 

代码:

 

<TABLE borderColor=#6633ff width="100%" border=8>
<TBODY>
  <TR>
   <TD>
    
<TABLE borderColor=#cc9966 width="100%" border=8>
     <TBODY>
      <TR>
       <TD>
        
<TABLE borderColor=#003300 height=200 width="100%" border=8>
         <TBODY>
          <TR>
           <TD></TD>
          </TR>
         </TBODY>
        </TABLE>
       </TD>
      </TR>
     </TBODY>
    </table>
   </td>
  </tr>
</tbody>
</Table>

    以上是黑马老师教的表格制作方法及代码

 

     五个边框(五个表格嵌套,加背景)

 

 

 

代码:

<TABLE borderColor=#6633ff cellPadding=10 width="100%" bgColor=#cccc00 background=http://www.alles.or.jp/~queen/webgraph/bg/image/star_kabe_01.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cc9966 width="100%" border=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#663388 height=200 width="100%" border=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#003300 height=200 width="100%" border=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#556633 height=100 width="100%" border=8>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>

</TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

 

上下表格嵌套:

 

    表格的嵌套  这是由三个表格嵌套而成,灰色的为一级格(父格),另外两个为二级格(子格及他们包含在一级格内)一上一下,这两个完整的二级表格代码是一上一下并列放在一级表格内,即放在一级表格的<td>·····</td>之间的。

 

 

    祝大家开心快乐!

 

  欢迎光临心缘之梦!

 

代码:

 

<table border=6 bordercolor=#888888 width="100%">
  <tbody><tr><td>
    <table border=5 bordercolor=#ffcc00 width="100%" height=200>
       <tbody><tr><td>
加入内容</td></tr></tbody>
    </table>

    <table border=5 bordercolor=#ffcc00 width="100%" height=200>
       <tbody><tr><td>
加入内容</td></tr></tbody>
    </table>
  </td></tr></tbody>
</table>

 

请注意它们之间的关系。

加入背景的嵌套表格

       学习要循序渐进!
   只要用心,你一定会学得最好!

 

代码:

 

<TABLE borderColor=#888888 width="100%" border=6>
<TBODY>
<TR>
<TD>
<TABLE height=200 borderColorDark=#663399 cellPadding=2 width="100%" bgColor=#cccc00 borderColorLight=#008000
background=http://www.h4.dion.ne.jp/~herb/kabe-1.gif
border=10>
<TBODY>
<TR>
<TD>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<FONT color=#7fff00 size=5><EM>
学习要循序渐进!</EM></FONT></TD></TR></TBODY></TABLE>
<TABLE height=200 borderColorDark=#ff00cc cellPadding=2 width="100%" bgColor=#cccc00 borderColorLight=#ffcc66
background=http://www.53520.com/bbs/tp/1/4B264505797.gif
border=10>
<TBODY>
<TR>
<TD>&nbsp;&nbsp;&nbsp;<FONT size=5><U><FONT color=#ff8c00>
只要用心,你一定会学得最好!</FONT></U></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

 

  左右表格嵌套

     

   这也是在一级表格(父格)内放有两个表格。但这与上述的两个表格是有区别的,是左右两个表格,首先要用两个“<td>……</td>”将一级表格(父格)分隔成左右部分,在分别在这个两个部分中加入一个完整的表格,便是如下效果。

 

      你学会了吗?

               不会也没关系,慢慢来,

      先搞清楚它们之间的关系

 

 

<TABLE borderColor=#ccffcc width="100%" border=4>
<TBODY>
  <TR>
  
<TD width="50%">
    <TABLE borderColor=#666666 height=300 width="100%" border=4>
     <TBODY><TR><TD></TD></TR></TBODY>
    </TABLE>
   </TD>
   <TD width="50%">
    
<TABLE borderColor=#666666 height=300 width="100%" border=4>
     <TBODY><TR><TD></TD></TR></TBODY>
    </TABLE>
   </TD>
  </TR></TBODY>
</TABLE>

加入背景的嵌套表格

 

 
 

 

 

<TABLE borderColor=#cc66cc width="100%" border=4>
<TBODY>
  <TR>
  
<TD width="50%">
    <TABLE borderColor=#336699 background=http://www.h4.dion.ne.jp/~herb/kabe-1.gif height=300 width="100%" border=4>
     <TBODY><TR><TD></TD></TR></TBODY>
    </TABLE>
   </TD>
   <TD width="50%">
    
<TABLE borderColor=#ffcc66 background=http://www.53520.com/bbs/tp/1/4B26169335.9.gif height=300 width="100%" border=4>
     <TBODY><TR><TD></TD></TR></TBODY>
    </TABLE>
   </TD>
  </TR></TBODY>
</TABLE>

 

 

HTML教程——步步为营之二  

 

 



 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

闪客公寓休闲娱乐网 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:QQ:340623306 联系人:王小华