欢迎您!启步学HTML代码。(重建)
图片点击可在新窗口打开查看 图片点击可在新窗口打开查看
欢迎您!启步学代码。
(游子编辑 供初学HTML代码的朋友参考)
 目 录

01:HTML代码是什么?

02:先来学文字设置的代码
03:文字显示位置控制的代码
04:文字移动属性的设置
05:文字编辑常用代码语句
06:文字输出范围的设置-文本框
07:学用代码贴特效美术字
08:学习文字设置的几点体会
09:HTML代码编辑参考资料
10:学习表格(图框)设置
11 学习用表格属性做漂亮的代码边框。
12:各种图片素材做边框套装
13:如何在图框套装内贴图片和文字。
14:特殊效果的贴图方法。
15:如何在图框套装内贴图片和文字。
16:在图框内贴图或文字的位置设置方法。
17:在多层图框(套装)内贴图的方法
18:坐标控制绝对定位贴图的方法。


(待续)
(为了让更多网友学用html代码贴图制作网页,本贴
欢迎转载,但是,转载时请不要把原创编辑游子的名字改掉。谢谢!)
编辑:游子

(为了让更多网友学用html代码贴图制作网页,本贴
欢迎转载,但是,转载时请不要把原创编辑游子的名字改掉。谢谢!)
编辑:游子
01.txt 欢迎您!启步学HTML代码。1 HTML代码是什么?




欢迎您!启步学代码。
(1)

(游子编辑 供初学HTML代码的朋友参考)


   在网上经常见到很多精彩漂亮的网页和贴图。这些佳作都是用各种代码和软件编辑出来的。很想学一点,可是看教材头就晕,入门难呵!后来采用从简入手,边学边测试,才学到一点点东东。 没有专业知识,如何启步呢?只要你会电脑系统操作和26个英文字母就可以了。先看一遍HTML语言教材,看不懂也无关系,以后回来再学习。学本领,读书还是要的。



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

  可以用实际例子来理解标签的含义。我们要在页面上显示“网络世界”四个红色隶书大字,就必须用下面文字设置代码。

<font style=font:60pt face=隶书 color=ff0000>
网络世界
</font>

显示结果:
网络世界

  这组文字设置代码在网络世界前面的是“始标签”,在网络世界后面的是“尾标签”。始标签有一个标签名字和三个属性内容。尾标签在标签名字前加一斜杆即可,不用标记属性内容。对照说明:

<font style=font:60pt face=隶书 color=ff0000>
网络世界
</font>

代码的第一行标签名  字号大小  什么字体 字的颜色
代码的第二行     文字内容
代码的第三行  尾标签

  在“网络世界”4个字前面加一个移动始标签<marquee>,后面加一个尾标签</marquee>,这4个字就能移动了。
移动标签代码:
<marquee>网络世界</marquee>。
只有名称,没有其他属性内容时,系统默认从右向左走。显示结果:


网络世界

  增加移动标签的属性内容和属值,就能实现其他移动的方向和速度。例如为上面“网络世界”四个大字从左向右走编一组代码:

<marquee direction=right scrollamount=2>
<font style=font:60pt face=隶书 color=ff0000>网络世界</font>
</marquee>
网络世界
  代码的第一行是移动的始标签,内有标签名marquee和两个属性内容,即direction=right移动方向和scrollamount=2移动速度。
  代码的第二行和第三行是一组有三个属性内容的文字设置标签。“始标签 ”和文字内容以及“尾标签”都套在移动标签内。
  代码的第四行是移动标签的结尾标签。

  记住:HTML标签是成对的,前面有一个始标签,后面必须有一个尾标签,不可多也不可少。 只有少数几个标签可以单独使用,如过行<br>代码就不用尾标签。

启步学习代码先从三个内容入手:
(一)文字设置或叫布局。  
(二)表格(图框)设置。  
(三)常用代码语句的应用。


编辑:游子
(待续)


02.txt 先来学文字设置的代码




欢迎您!启步学代码。
(2)

(游子编辑 供初学HTML代码的朋友参考)


先来学文字设置


文字设置三要素(三属值):

style=font:30pt    字的大小
color=navy    字的颜色
face=幼圆    那一种字体

文字设置的一组代码:

<font style=font:30pt face=隶书 color=ff0000>锦绣中华</font>

显示效果如下:
锦绣中华

相同的文字设置代码,三要素改变了,
显示效果就不同。


<font style=font:40pt face=华文新魏 color=red>锦绣中华</font>

显示效果如下:

锦绣中华



<font style=font:80pt face=华文彩云 color=ff0000>锦绣中华</font>

显示效果如下:

锦绣中华

  

你可以把(文字设置的一组代码)复制到记事本去,改为你喜欢的文字内容,让后用回复的方式试贴,粘贴时注意先选择[HTML]标签,同时把自动修正的钩去掉。







设置字体大小还有一种叫标题字体。

<h#> ... </h#> #=1, 2, 3, 4, 5, 6,

<h1>网络世界论坛</h1>


人间正道是沧桑


<h2>人间正道是沧桑</h2>


人间正道是沧桑


<h3>人间正道是沧桑</h3>


人间正道是沧桑


<h4>人间正道是沧桑</h4>


人间正道是沧桑


<h5>人间正道是沧桑</h5>


人间正道是沧桑

<h6>影画世界论坛</h6>


人间正道是沧桑

标题字体默认黑色宋体,
故只有字体大小的变化。





常用字体代码

宋体 黑体   楷体_GB2312   仿宋_GB2312   新宋体   幼圆 隶书

  方正舒体  华文新魏 华文行楷   华文细黑  华文彩云  方正姚体







常用颜色代码
           
#FF0000 #FFFFf0 #0000F #008000 #FF00FF #000080
           
#008000 #00FFFF #FFf000 #993333 #FFFF00 #000099
           
#000066 #009933 #F00000 #FFCC00 #0099FF #33CCCC
           
#FFCCFF #33CC33 #CC0000 #3333CC #9900CC #993333
           
#993333 #006600 #FF9900 #00CCFF #66FF33 #003300



编辑:游子
(待续)


03.txt 文字显示位置控制的代码

欢迎您!启步学代码。
(3)

(游子编辑 供初学HTML代码的朋友参考)


文字显示位置的控制

文字显示位置分别为:

水平方向(align),垂直方向(valign)
水平方向即左中右:
left(左对齐)
center(居中)
RIGHT(右对齐)

垂直方向即靠顶和靠底.

top(靠顶)、bottom(靠底)等。





水平方向即左中右的代码:

<p align=left><font style=font:15pt face=黑体 color=fff000>向左对齐</font></P>

<p align=CENTER><font style=font:15pt face=黑体 color=fff000>表示居中</font></P>

<p align=RIGHT><font style=font:15pt face=黑体 color=fff000>向右对齐</font></P>


显示效果如下:



向左对齐


表示居中


向右对齐





实例:


送给春兰妹妹


祝你生日快乐!





大姐冬梅
20060228


实例代码:

<CENTER>
<TABLE width=480 height=350 bordercolor=olive background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg border=18>
<TBODY>
<TR>
<td align=center valign=top><br>
<FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#fff000><B>
<p align=left>送给春兰妹妹</P><br>
<p align=CENTER>祝你生日快乐!</P><br><br><br><br>
<p align=RIGHT>大姐冬梅<br>20060228</P>
</B> </FONT>
</TD></TR></TOBDY></TBODY></TABLE></CENTER>





垂直方向valign)靠顶的代码:

<TD align=LEFT valign=top>居左靠顶</TD>
<TD align=center valign=top>居中靠顶</TD>
<TDalign=RIGHT valign=top>居右靠顶</TD>


垂直方向valign)靠底的代码:

<TD align=LEFT valign=bottom>居左靠底</TD>
<TD align=center valign=bottom>居中靠底</TD>
<TD align=RIGHT valign=bottom>居右靠底</TD>


   文字输出位置垂直方向的代码是设置在单元格里(TD),方便易用。但我只能在一个单元格中设一组代码。实例如下:


居左靠顶的代码

align=LEFT valign=top



代码:

<CENTER>
<TABLE width=480 height=350 bordercolor=olive background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg border=18>
<TBODY>
<TR>
<TD align=LEFT valign=top><FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#fff000><B>
居左靠顶的代码<BR><h3>align=LEFT valign=top</h3></B> </FONT>
</TD></TR></TOBDY></TBODY></TABLE></CENTER>
<BR><BR>



文字输出位置垂直方向的实例二:
居右靠底的代码

align=RIGHT valign=bottom



居右靠底的代码:

<BR>
<CENTER>
<TABLE width=480 height=350 bordercolor=olive background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg border=18>
<TBODY>
<TR>
<TD align=LEFT valign=top><FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#fff000><B>
居左靠顶的代码<BR><h3>align=LEFT valign=top</h3></B> </FONT>
</TD></TR></TOBDY></TBODY></TABLE></CENTER>
<BR><BR>






文字(或图片)放置的地位,
还可以用空格(&nbsp;)和空行(BR)调整;
用代码编辑绝对位置挂贴(外部定位)等办法。



编辑:游子
(待续)

04.txt 文字移动属性的设置


欢迎您!启步学代码。
(4)

(游子编辑 供初学HTML代码的朋友参考)



文字移动属性的设置

<marquee>内容文字或图片</marquee>

上面是最简单的移动标签。把它复制粘贴发表结果如下:



内容文字或图片



移动属性值主要的有几个内容:  

移动方向 <direction=#>
速度 <scrollamount=#> 
方式 <bihavior=#>     
循环 <loop=#>         
延时 <scrolldelay=#>  




启步先学方向和速度。

移动方向
direction=left   从右向左移
 direction=right   从左向右移
direction=down   从上向下移
direction=up     从下向上移



移动代码:-文字从右向左移


<marquee direction=left scrollAmount=2>
<font style=font:15pt face=黑体 color=fff000>
文字从右向左移!</font></marquee>



显示效果:


文字从右向左移!



移动方向-文字从左向右移的代杩。

<marquee direction=right scrollAmount=2>
<font style=font:15pt face=黑体 color=fff000>
文字从左向右移!!</font></marquee>



显示效果:

文字从左向右移!

移动方向-文字从上向下移的代码:。

<marquee direction=direction=down scrollAmount=2>
<font style=font:15pt face=黑体 color=fff000><CENTER>
文字从上向下移!!</font></CENTER></marquee>



显示效果:

文字从上向下移!!




移动方向-文字从下向上移!的代码:。

<marquee direction=up scrollAmount=2>
<font style=font:15pt face=黑体 color=fff000><CENTER>
文字从下向上移!!!</CENTER></font></marquee>

BR>
显示效果:

文字从下向上移!!




文字来回走代码:

<marquee behavior=alternate scrollAmount=8>
<font style=font:15pt face=黑体 color=fff000>
文字来回走耶!!!</font></marquee>



显示效果:



文字来回走耶!!





移动速度 <scrollamount=#>

移动速度设置数值小就走得慢的代码:

<marquee direction=left scrollAmount=2>
<font style=font:15pt face=黑体 color=fff000>
scrollAmount=2移动速度设置数值小就走得慢!!</font></marquee>


显示效果:


scrollAmount=2移动速度设置数值小就走得慢!!

移动速度设置数值大就走得快!的代码:

<marquee direction=left scrollAmount=8> <font style=font:15pt face=黑体 color=fff000>scrollAmount=8移动速度设置数值大就走得快!!</font></marquee>


显示效果:


scrollAmount=8移动速度设置数值大就走得快!!




文字上下移动代码:


<font size=5 face=隶书 color=lime>
<MARQUEE scrollAmount=5 direction=up behavior=alternate height=60>
<center>
文字上下移动</center></marquee>


文字上下移动





文字图片走四方的代码:

<TABLE borderColor=fff000 height=350 cellSpacing=1 cellPadding=10 width=450 border=3><TBODY><TR><TD bgColor=#000000>
<MARQUEE scrollAmount=3 direction=down behavior=alternate height=350>
<MARQUEE scrollAmount=3 behavior=alternate width=450>
<IMG src="http://www.dabaoku.com/gif/164/gif001.gif">&nbsp;<FONT color=fff000 size=3><B>欣赏文字图片走四方</B></FONT> <IMG src="http://homediy.myrice.com/gif/cat/cat004.gif">
</MARQUEE></MARQUEE>
</TD></TR></TBODY></TABLE>


文字图片走四方

 欣赏文字图片走四方


编辑:游子
(待续)


05.txt 文字编辑常用代码语句


欢迎您!启步学代码。
(5)

(游子编辑 供初学HTML代码的朋友参考)


文字编辑几种常用代码语句的浅识


掌握HTML语法中的分隔标签非常有必要,娴熟地
应用分隔标签,能令帖子可读性强、外观整洁漂亮。

文字编辑常用代码语句:

<BR> 换行标记一个<BR>令文字显示于下一行,二个<BR>留一空白行。
<p>文字编辑  段落标记 令文字之间留一空白行。
(&nbsp;) 括号内的语句,令文字之间留一空隔。(可单独使用)
<b>  令字体加粗</b>(双标签)
<u> 令文字加上底线</u>(双标签)
<CENTER> 居中 令字、画、表格等显示于中间</CENTER>(双标签)



    对<BR> 换行标记,即强行换行指令的认识。
    下面这首李白的诗,在输入编辑时虽然有分行,但无用强行换行<BR>标签,由于系统有顺延功能作用,所以仍然是从左侧顺延联成一片显示出来。


先看文字设置无换行标记的一组代码:


<P align=center><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 14pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_GB2312 color=fff000>


《 望庐山瀑布》 李 白

日照香炉生紫烟,遥看瀑布挂前川。
飞流直下三千尺,疑是银河落九天。
</P></FONT>

显示效果是联成一片。


《 望庐山瀑布》 李 白日照香炉生紫烟,遥看瀑布挂前川。飞流直下三千尺,疑是银河落九天。



再看文字编辑时,在要断行的地方加入<BR>分隔标签的一组代码:


<P align=center><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 14pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_GB2312 color=lime>
《 望庐山瀑布》 李 白<BR><BR>

日照香炉生紫烟,遥看瀑布挂前川。<BR>
飞流直下三千尺,疑是银河落九天。<BR>
</P></FONT>

显示效果:

《 望庐山瀑布》 李 白

日照香炉生紫烟,遥看瀑布挂前川。
飞流直下三千尺,疑是银河落九天。




在页面上文字显示位置的实例。


  《 望庐山瀑布》 李 白

日照香炉生紫烟,遥看瀑布挂前川。
飞流直下三千尺,疑是银河落九天。



《 望庐山瀑布》 李 白

      
日照香炉生紫烟,遥看瀑布挂前川。
飞流直下三千尺,疑是银河落九天。



《 望庐山瀑布》 李 白      

日照香炉生紫烟,遥看瀑布挂前川。
飞流直下三千尺,疑是银河落九天。






在页面上文字显示位置的实例的一组代码:

<P align=center><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 15pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_GB2312 color=lime>
<P align=LEFT>
&nbsp;&nbsp;《 望庐山瀑布》 李 白<BR><BR>
日照香炉生紫烟,遥看瀑布挂前川。<BR>
飞流直下三千尺,疑是银河落九天。<BR></P>
<BR><BR>


<P align=center>
《 望庐山瀑布》 李 白<BR><BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>

日照香炉生紫烟,遥看瀑布挂前川。<BR>
飞流直下三千尺,疑是银河落九天。<BR></P>
<BR><BR>


<P align=RIGHT>
《 望庐山瀑布》 李 白&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR><BR>
日照香炉生紫烟,遥看瀑布挂前川。<BR>
飞流直下三千尺,疑是银河落九天。</P><BR>
</FONT>
<BR>
 

说明:文字显示位置的关键代码语句。

<P align=LEFT>左对齐</P>
<P align=center>居中</P>
<P align=RIGHT>右对齐</P>

注意这三个代码都是双标签,要成对使用。



编辑:游子
(待续)


106.txt 文字输出范围的设置-文本框


欢迎您!启步学代码。
(6)

(游子编辑 供初学HTML代码的朋友参考)

文字输出范围的设置-文本框


   在页面或图片上要输出很多文字,就要考虑其输出范围。 我们输入文字时,如果没有设置过行过段标签 系统默认居中左对齐,向右顺延至边框,自动过下一行,因此必需设置文本框来空制 文字输入的范围。如果输入英文特别是代码时,虽然有设置普通文本框,但仍被挤得很宽,所以要设有滚动条的文本框。


文本框有二种:普通文本框和有滚动条的文本框。

文字直接显示在页面上的代码:

<font style=font:12pt face=幼圆 color=00ff00>
什么是虚拟内存
  不知大家发现没有,在Windows 2000(XP)目录下有一个名为pagefile.sys的系统文件(Windows 98下为Win386.swp),它的大小经常自己发生变动,小的时候可能只有几十兆,大的时候则有数百兆,这种毫无规律的变化实在让很多人摸不着头脑。其实,pagefile.sys是Windows下的一个虚拟内存,它的作用与物理内存基本相似,但它是作为物理内存的“后备力量”而存在的,也就是说,只有在物理内存已经不够使用的时候,它才会发挥作用。
</FONT>


显示效果:
什么是虚拟内存  不知大家发现没有,在Windows 2000(XP)目录下有一个名为pagefile.sys的系统文件(Windows 98下为Win386.swp),它的大小经常自己发生变动,小的时候可能只有几十兆,大的时候则有数百兆,这种毫无规律的变化实在让很多人摸不着头脑。其实,pagefile.sys是Windows下的一个虚拟内存,它的作用与物理内存基本相似,但它是作为物理内存的“后备力量”而存在的,也就是说,只有在物理内存已经不够使用的时候,它才会发挥作用。

在普通文本框中输入文字的一组代码:

<TBODY>
<TR>
<TD bgColor=>
<p align="LEFT">
什么是虚拟内存
  不知大家发现没有,在Windows 2000(XP)目录下有一个名为pagefile.sys的系统文件(Windows 98下为Win386.swp),它的大小经常自己发生变动,小的时候可能只有几十兆,大的时候则有数百兆,这种毫无规律的变化实在让很多人摸不着头脑。其实,pagefile.sys是Windows下的一个虚拟内存,它的作用与物理内存基本相似,但它是作为物理内存的“后备力量”而存在的,也就是说,只有在物理内存已经不够使用的时候,它才会发挥作用。 </p>
</TD></TR></TBODY></TABLE>


显示效果:


什么是虚拟内存
  不知大家发现没有,在Windows 2000(XP)目录下有一个名为pagefile.sys的系统文件(Windows 98下为Win386.swp),它的大小经常自己发生变动,小的时候可能只有几十兆,大的时候则有数百兆,这种毫无规律的变化实在让很多人摸不着头脑。其实,pagefile.sys是Windows下的一个虚拟内存,它的作用与物理内存基本相似,但它是作为物理内存的“后备力量”而存在的,也就是说,只有在物理内存已经不够使用的时候,它才会发挥作用。



文字装在有滚动条的文本框的代码:

<CENTER>
<TABLE style="WIDTH: 250px; HEIGHT: 102px" borderColor=olive height=162 cellSpacing=2 cellPadding=0 width=260 align=center border=5>
<TBODY>
<TR>
<TD>
<TABLE style="SCROLLBAR-FACE-COLOR:olive; SCROLLBAR-HIGHLIGHT-COLOR: #ff0000; SCROLLBAR-SHADOW-COLOR: #ff0000; SCROLLBAR-3DLIGHT-COLOR:olive; SCROLLBAR-ARROW-COLOR: #fff000; SCROLLBAR-TRACK-COLOR:00ff00; SCROLLBAR-DARKSHADOW-COLOR: #fff000" cellSpacing=0 cellPadding=0 width=400 border=0>
<TBODY>
<TR>
<TD>
<DIV style="OVERFLOW: auto; WIDTH: 400px; HEIGHT: 100px">
<P align=center><FONT face=仿宋_GB2312 color=lime size=4><B>
什么是虚拟内存
  不知大家发现没有,在Windows 2000(XP)目录下有一个名为pagefile.sys的系统文件(Windows 98下为Win386.swp),它的大小经常自己发生变动,小的时候可能只有几十兆,大的时候则有数百兆,这种毫无规律的变化实在让很多人摸不着头脑。其实,pagefile.sys是Windows下的一个虚拟内存,它的作用与物理内存基本相似,但它是作为物理内存的“后备力量”而存在的,也就是说,只有在物理内存已经不够使用的时候,它才会发挥作用。
</B></FONT></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></DIV><br>


显示效果:

什么是虚拟内存  不知大家发现没有,在Windows 2000(XP)目录下有一个名为pagefile.sys的系统文件(Windows 98下为Win386.swp),它的大小经常自己发生变动,小的时候可能只有几十兆,大的时候则有数百兆,这种毫无规律的变化实在让很多人摸不着头脑。其实,pagefile.sys是Windows下的一个虚拟内存,它的作用与物理内存基本相似,但它是作为物理内存的“后备力量”而存在的,也就是说,只有在物理内存已经不够使用的时候,它才会发挥作用。




文字装在条幅中走马灯式移动的代码:

<marquee direction=left scrollamount=2 style=width=500 height=20><CENTER>
<font style=font:15pt face=华文新魏 color=00ff00><b>
什么是虚拟内存
不知大家发现没有,在Windows 2000(XP)目录下有一个名为pagefile.sys的系统文件(Windows 98下为Win386.swp),
它的大小经常自己发生变动,小的时候可能只有几十兆,大的时候则有数百兆,
这种毫无规律的变化实在让很多人摸不着头脑。其实,pagefile.sys是Windows下的一个虚拟内存,
它的作用与物理内存基本相似,但它是作为物理内存的“后备力量”而存在的,也就是说,只有在物理内存已经不够使用的时候,它才会发挥作用。
</b></FONT></marquee><br><br>
<BR>


显示效果:

什么是虚拟内存不知大家发现没有,在Windows 2000(XP)目录下有一个名为pagefile.sys的系统文件(Windows 98下为Win386.swp),它的大小经常自己发生变动,小的时候可能只有几十兆,大的时候则有数百兆,这种毫无规律的变化实在让很多人摸不着头脑。其实,pagefile.sys是Windows下的一个虚拟内存,它的作用与物理内存基本相似,但它是作为物理内存的“后备力量”而存在的,也就是说,只有在物理内存已经不够使用的时候,它才会发挥作用。



文字装在文本框内从下向上移动的代码:


<marquee direction=up scrollamount=1 style=width=350 height=120><CENTER>
<font style=font:15pt face=华文新魏 color=fff000><b>
什么是虚拟内存
不知大家发现没有,在Windows 2000(XP)目录下有一个名为pagefile.sys的系统文件(Windows 98下为Win386.swp),
它的大小经常自己发生变动,小的时候可能只有几十兆,大的时候则有数百兆,
这种毫无规律的变化实在让很多人摸不着头脑。其实,pagefile.sys是Windows下的一个虚拟内存,
它的作用与物理内存基本相似,但它是作为物理内存的“后备力量”而存在的,也就是说,只有在物理内存已经不够使用的时候,它才会发挥作用。
</marquee><br><br>


显示效果:

什么是虚拟内存不知大家发现没有,在Windows 2000(XP)目录下有一个名为pagefile.sys的系统文件(Windows 98下为Win386.swp),它的大小经常自己发生变动,小的时候可能只有几十兆,大的时候则有数百兆,这种毫无规律的变化实在让很多人摸不着头脑。其实,pagefile.sys是Windows下的一个虚拟内存,它的作用与物理内存基本相似,但它是作为物理内存的“后备力量”而存在的,也就是说,只有在物理内存已经不够使用的时候,它才会发挥作用。




编辑:游子
(待续)



107.txt 学用代码贴特效美术字


欢迎您!启步学代码。
(7)

(游子编辑 供初学HTML代码的朋友参考)


学用代码贴特效美术字。

   网页上有不少漂亮的美术字,这些特效文字是用软件或代码做成的。要用代码编辑美术字,必须弄懂较多的有关代码知识。先借人家编成的来套用吧!


(一)
欢迎您来到网络世界的代码:
<FONT style="FONT-SIZE: 30pt; FILTER: glow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>欢迎您来到网络世界。。</B></FONT>

显示效果:

欢迎您来到网络世界。




(二)
插入一段诗的代码:

<FONT style="FONT-SIZE: 20pt; FILTER: shadow(color=apar); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 100%" face=华文行楷 size=6>
轻轻的我走了,<br>
正如我轻轻的来;<br>
我轻轻的招手,<br>
作别西天的云彩。<br>
</FONT>


显示效果:

轻轻的我走了,
正如我轻轻的来;
我轻轻的招手,
作别西天的云彩。


(三)
漂亮的美贴!的代码:

<FONT style="FONT-SIZE: 40pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=黑体 size=6>漂亮的美贴!</FONT>
显示效果:

漂亮的美贴!



(四)
欢迎光临的代码:
<FONT style="FONT-SIZE: 60pt; FILTER: shadow(color=yellow); WIDTH: 100%; COLOR: navy; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">欢迎光临</FONT>
显示效果:

欢迎光临



(五)
江山如此多娇代码:

<FONT style="FONT-SIZE: 60pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书>江山如此多娇</FONT>


江山如此多娇





(六)
假如爱有天意代码:
<FONT style="FONT-SIZE: 50pt; FILTER: shadow(color=#ffd700, strength=50); WIDTH: 500px">假如爱有天意</FONT></FONT>
假如爱有天意




(七)

谢谢!!欣赏!!代码:
<FONT size=6><FONT style="COLOR: red; FILTER: shadow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 40pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B><I>谢谢!!欣赏!!</I></B></FONT></FONT>
谢谢!!欣赏!!


(八)

走进新时代!代码:

<FONT style="FONT-SIZE: 72pt; FILTER: shadow(color=#DA70D6); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体"><B>走进新时代!</B></FONT>
走进新时代!



(九)

祝您生日快乐!代码:
<DIV style="FILTER: glow(color=#E4DC9B, strength=5); WIDTH: 700px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 68pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#e31c1b>祝您生日快乐!</FONT></DIV>

祝您生日快乐!



(十)

我爱美丽的大自然 代码:
<FONT color=#c4b77d>
<FONT style="FILTER: shadow(color=#FF0000); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 130%; FONT-FAMILY: 华文行楷; font-size:45pt">我爱美丽的大自然</FONT><DIV align=center>


 我爱美丽的大自然



(十一)

保护生态环境代码:
<FONT style="COLOR: #f90b46; FILTER: shadow(color=#AF0530); FONT-FAMILY: 隶书; FONT-SIZE: 45pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>保护生态环境</B></FONT>

保护生态环境



(十二)

努力学习,争取进步。代码:
<FONT style="FONT-SIZE: 40pt; FILTER: glow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>努力学习,争取进步。</B></FONT>
努力学习,争取进步。



(十三)

欢迎来到这里代码:
<FONT style="FONT-SIZE: 50pt; FILTER: shadow(color=#af2dco); WIDTH: 100%; COLOR: #730404; LINE-HEIGHT: 100%; FONT-FAMILY: 华文行楷" size=6>欢迎来到这里!</FONT>
欢迎来到这里!



(十四)

做的太好了,谢谢!代码:
<FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=green); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>做的太好了,谢谢!</B></FONT>
做的太好了,谢谢!


(十五)

漂亮美术“顶”字的代码:

<DIV align=center>
<DIV style="FILTER: shadow(color=#c299ff, strength=60); WIDTH: 500px">
<FONT style="FONT-WEIGHT: normal; FONT-SIZE: 150pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#fff000>
顶</FONT></DIV></DIV>
<BR>
 


显示效果:




(十六)这里风景独好请您欣赏

<FONT style="FONT-SIZE: 30pt; FILTER: glow(color=gray,strength=6); WIDTH: 100%; COLOR:00ff00; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷">
<B> 这里风景独好请您欣赏!</B></FONT>
 


显示效果:
这里风景独好请您欣赏!



(十七)特效文字的代码

<FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=#af2dco); WIDTH: 100%; COLOR: #730404; LINE-HEIGHT: 100%; FONT-FAMILY: 华文行楷" size=6>
特效文字的代码
</FONT>
 

显示效果:

特效文字的代码




(十八)幸福快乐的代码

<DIV style="FONT-SIZE: 60pt; FILTER: shadow(color=green, strength=100); WIDTH: 480px"><FONT face=华文彩云 color=#fff000>
<CENTER>幸<BR>福<BR>快<BR>乐<BR><BR></CENTER></FONT></DIV>
 


显示效果:












编辑:游子
(待续)

108.txt 学习文字设置的几点体会。

欢迎您!启步学代码。
(8)

(游子编辑 供初学HTML代码的朋友参考)

文字设置学习的几点体会。

  (一)文字设置标签属性三个主要内容的使用。

(1)字号大小

  字号大小语句通常是<FONT size=1-7>字号</FONT>其大小是由参数所定,最小是1,最大是7。为了方便使用更大的字体,字号大小可用以下的语句:
<FONT style=font:40pt>字号</FONT>字号隋数值增大,不受限制。


    文字设置用普通字号的代码:

<CENTER><font size=5 face=隶书 color=00FF00>
学习代码贴图</font>

</CENTER>

(关键语句:size=5)

       显示:
学习代码贴图




    文字设置用大字号的代码:

<CENTER><font style=font:50pt face=隶书 color=00ff00>
学习代码贴图</font>
</CENTER>

(关键语句:style=font:50pt)


     显示:

学习代码贴图



(2)使用什么样字体

  用代码贴字,字体一定要用网络上经常能显示的十余种。如:
宋体 黑体 楷体_GB2312  仿宋_GB2312 新宋体  幼圆 隶书
方正舒体 华文新魏 华文行楷 华文细黑 华文彩云 方正姚体

  如果采用文鼎花瓣体等其他字体,会显示为宋体。


(3)文字颜色的代码

 文字的颜色可用0和F 6个字符组成易记住的颜色代码,例如:

黑色=000000 白色=ffffff 红色=ff0000 绿色=00ff00 
蓝色=0000ff 黄色=fff000 青色=00ffff 紫色=ff00ff


  (二)特效文字代码可以做出很多漂亮的字体,灵活的运用文字设置标签属性的三个主要内容,即字号,字体和颜色,也可编辑出精彩的字体。

七色彩字体的代码:


<CENTER>
<FONT face=隶书 color=ff0000 style=font:40pt>网
<FONT color=fff000>络</FONT>
<FONT color=0000ff>世</FONT>
<FONT color=green>界</FONT>
<FONT color=fffff0>欢</FONT>
<FONT color=ff00ff>迎</FONT>
<FONT color=00ffff>您</FONT>
</FONT></CENTER>
 


显示结果:


多种字号和字体的代码:

<CENTER><FONT face=新宋体 color=00ff00 style=font:15pt>
<FONT face=隶书 ><h1>《闺 怨》</h1></FONT>
<h3>王昌龄</h3>
闺中少妇不知愁,春日凝妆上翠楼。<BR>
忽见陌头杨柳色,悔教夫婿觅封侯。<BR>
</FONT>
 

显示结果:

《闺 怨》

王昌龄

闺中少妇不知愁,春日凝妆上翠楼。
忽见陌头杨柳色,悔教夫婿觅封侯。



编辑:游子
(待续)



109.txt HTML代码编辑参考资料

欢迎您!启步学代码。
(9)

(游子编辑 供初学HTML代码的朋友参考)

HTML代码编辑参考资料

  要学习代码贴图,你参预的论坛必须是允许使用[HTML]代码的。有的论坛虽然不允许使用代码,但在诸如音画时尚,贴图专栏或新手学堂等栏目开通。有的论坛注明允许使用代码,但必须有条件去申请才批淮启用。还需注意粘贴代码前应先选择[HTML],同时把旁边的自动修正的钩去掉。现在已有不少论坛,可以直接发代码贴了。



  为了更好的学习编辑代码,应在自已电脑的硬盘中建一个学代码的文件夹,内放若干记事本,作编辑和保存代码用。初学者要在键盘上直接输入代码语句有些困难,可以把下面这些常用代码复制在记事本上,方便需要时取用。

常用汉字代码:

宋体 黑体 楷体_GB2312 仿宋_GB2312 新宋体 幼圆 隶书
方正舒体 华文新魏 华文行楷 华文细黑 华文彩云 方正姚体

颜色的代码:

黑色=000000 白色=ffffff 红色=ff0000 绿色=00ff00 
蓝色=0000ff 黄色=fff000 青色=00ffff 紫色=ff00ff

居中代码:

<CENTER> 内容</CENTER>
<P align=LEFT>左对齐</P>
<P align=center>居中</P>
<P align=RIGHT>右对齐</P>

文字设置代码:

<CENTER> <font style=font:20pt face=隶书 color=fff000>
输入内容</font></CENTER>

贴图代码:

<img src="图片地址">
<P align=center><img src="图片地址"></P>
<P align=center><img src="图片地址"width=宽度 height=高度></P>

用颜色作背景的空白图框代码:

<CENTER>
<TABLE borderColor=#0000ff cellSpacing=10 cellpadding=20 bgcolor=fff000 width=400 height=300 border=10>
<TBODY>
<TR>
<TD>
<br>
<br>
</CENTER></TD></TR></TBODY></TABLE>


用图片作背景的空白图框代码:

<CENTER>
<TABLE borderColor=#0000ff cellSpacing=10 cellpadding=20 cellpadding=20 background=图片地址 width=400 height=300 border=10>
<TBODY>
<TR>
<TD>
<br>
<br>
</CENTER></TD></TR></TBODY></TABLE>
 


立体图框代码:

<CENTER>
<TABLE style="BORDER-LEFT-COLOR: #fbd44c; BORDER-BOTTOM-COLOR: #fbd44c; BORDER-TOP-STYLE: ridge; BORDER-TOP-COLOR: #fbd44c; BORDER-RIGHT-STYLE: ridge; BORDER-LEFT-STYLE: ridge; BORDER-RIGHT-COLOR: #fbd44c; BORDER-BOTTOM-STYLE: ridge" height=380 cellSpacing=5 cellPadding=5 width=470 border=14>
<TBODY>
<TR>
<TD>
<br><br>
</TR></TBODY></TABLE>

 

图片可调大小的一组代码.

<P align=center><INPUT src="图片地址"type=image width=宽度></P>


羽化图片代码:

<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image height=500 width=450 src="图片地址">




贴Flash 图片代码:

<EMBED src=http://yy.2000y.net/swfpath/200462722381564615.swf width=128 height=0 hidden=true type=application/x-shockwave-flash>



在一张图片上加叠Flash 代码:

<TABLE cellSpacing=3 cellPadding=3 width=460 bordercolor=660000 background=http://img.gw.com.cn/UploadFile/2005/6/7/5141107.jpg border=18>
<TBODY>
<TR>
<TD><EMBED align=right src=http://imgfree.21cn.com/free/flash/59.swf width=460 height=370 type=application/octet-stream wmode="transparent" quality="high" ;;></TD></TR></TBODY></TABLE>
 



全屏代码:

<br><br><br><br>
<DIV id=table1 style="LEFT: -220px; WIDTH: 800px; POSITION: relative; TOP: 40px">
贴子
</DIV><br><br><br><br>
 


播放器代码:

<CENTER>
<embed src="http://bbs.jmrb.com/bbs/upfile/music/601.mp3" type="audio/x-pn-realaudio-plugin" controls="controlpanel,statusbar" height=50 width=400 autostart="true" loop="true">
</CENTER>

(高度height=和宽度width=设为0时,隐藏播放器。)


移动设置代码:

我从右向左走代码:
<br>
<marquee direction=left scrollAmount=3 ><font style=font:25pt face=隶书 color=0000ff>我从右向左走!</marquee>


我从左向右移代码:
<marquee direction=right scrollAmount=3 ><font style=font:25pt face=隶书 color=0000ff>我从左向右移!</marquee>


我来回走耶代码:
<br>
<marquee behavior=alternate scrollAmount=3 ><font style=font:25pt face=隶书 color=0000ff>我来回走耶!</marquee>


我从下向上滚代码:
<br>
<marquee direction=up scrollAmount=3 ><font style=font:25pt face=隶书 color=0000ff>我从下向上滚!</marquee>


我从上向下滚代码:
<br>
<marquee direction=down scrollAmount=3 ><font style=font:25pt face=隶书 color=0000ff>我从上向下滚!</marquee>



编辑:游子
(待续)



10.txt 学习表格(图框)设置




欢迎您!启步学代码。
(10)

(游子编辑 供初学HTML代码的朋友参考)

    表格设置是代码贴图和制作个人主页的主要基础,表格设置标签属性内容有十多个,可以先从7个常用的学起,逐步提高。先看用表格做成的 一张图片,这张图片宽300,高200,蓝色边框,黄色背景,插入一段文字,内容与边框有一定的距离。




表格设置是代码贴图和制作个人主页的主要基础,表格设置标签属性内容有十多个,可以先从7个常用的学起,逐步提高。

代码:

<CENTER><BR>
<TABLE border=10 borderColor=#0000ff cellSpacing=10 cellpadding=20 bgcolor=fff000 width=400 height=300>
<TBODY><TR><TD>
<font style=font:15pt face=黑体 color=0000ff>
表格设置是代码贴图和制作个人主页的主要基础,
表格设置标签属性内容有十多个,可以先从7个常用的学起,逐步提高。
</CENTER></font></TD></TR></TBODY></TABLE>  


注解:

第一行是居中代码。
第二和第三行是表格的始标签,包括表格标签名和7个属性内容。
第四行是表格输入内容的行和列的始标签。(行和列构成一个单元格)
第五行是文字设直标签。
第六和第七行输入文字内容。
第八行是以上各个始标签的对应尾标签 。

表格设置标签属性内容说明:
TABLE=标签名。 
border=10 表格边框的厚度及参数。
borderColor=#0000ff 边框颜色及颜色码。
cellSpacing=10 单元格间距及参数。
cellpadding=20 内容与格线的距离及参数。
bgcolor=fff000 表格的背景颜色及及颜色码。
width=400 表格宽度及参数。
height=300 表格高度及参数。

    表格宽度及表格高度的参数,可用绝对值,如300:也可用相对值,如“100%”。高度如果不是特殊需要时, 也可以不加入参数,系统会根据输入的内容自动延伸。


一张用颜色作背景的空白图框代码:

<CENTER>
<TABLE border=10 borderColor=#0000ff cellSpacing=10 cellpadding=20 bgcolor=fff000 width=400 height=300>
<TBODY>
<TR>
<TD>
<br>
<br>
</CENTER></TD></TR></TBODY></TABLE>


关键语句:bgcolor=fff000 即豢景着色是黄色。  


显示结果:





一张用图片作背景的空白图框代码:

<CENTER>
<TABLE border=10 borderColor=#0000ff cellSpacing=10 cellpadding=20 cellpadding=20 background=http://www.s1.inets.jp/~rouge/free/005h.jpg width=400 height=300>
<TBODY>
<TR>
<TD>
<br>
<br>
</CENTER></TD></TR></TBODY></TABLE>


关键语句:background=http://www.s1.inets.jp/~rouge/free/005h.jpg 背景图片是一张紫色图片的地址。 


显示结果:





用颜色作背景和用图片作背景不同之处,只改变一个属性内容,即:
表格的背景颜色及颜色码。bgcolor=fff000
改为用图片作背景即:


background=http://www.s1.inets.jp/~rouge/free/005h.jpg


编辑:游子
(待续)


11.txt 学习用表格属性做漂亮的代码边框。




欢迎您!启步学代码。
(11)

(游子编辑 供初学HTML代码的朋友参考)


学习用表格属性做漂亮的代码边框。

   有很多漂亮的帖子边框是怎么做成?一些是现成的像框或三合一的花边图框做成,大部份是应用表格的相关属性做成的。做图框的素材可用颜色也可用图片。或颜色与图片组成。用颜色做成的图框,不受条件所限,隐定性较好,显示也快。用网络上的图片地址做成的多层图框叫套装,非常精彩漂亮 ,但有时会因网络失去链接,无法显示。


用颜色做成的一层图框代码;

<TABLE borderColor=#ffd700 cellSpacing=10 cellPadding=8 width=470 align=center bgColor=#0000ff border=12>
<TBODY>
<TR>
<TD >
<BR><BR><BR><BR><BR><BR>
</TD></TR></TBODY></TABLE>
 


显示结果:








用颜色做成的二层图框代码;

<TABLE borderColor=#ffd700 cellSpacing=5 cellPadding=8 width=470 align=center bgColor=#f70968 border=12>
<TBODY>
<TR>
<TD >
<TABLE borderColor=#ffd700 cellSpacing=5 cellPadding=8 width=465 align=center bgColor=#bb4444 border=1>
<TBODY>
<TR>
<TD>
<BR><BR><BR>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
 


显示结果:




给图片加用颜色做成的边框代码;

<table border=16 cellSpacing=8 cellPadding=5 borderColor=#841A00 bgcolor=#FFFF6F>
<td>
<TABLE border=1>
<TR>
<TD width=450 background=http://image2.sina.com.cn/dy/c/2004-10-01/U397P1T1D4478993F21DT20041001212159.jpg height=300 border=3>
</TD></TR></TABLE>
</td></table>
 


显示结果:


用颜色做成的二层图框代码;

<TABLE borderColor=#ffff00 cellSpacing=10 cellPadding=8 width=470 background=http://img.gw.com.cn/UploadFile/2004/9/3/3750984.jpg border=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ffff00 cellSpacing=6 cellPadding=4 width="100%" background=http://img.gw.com.cn/UploadFile/2005/5/15/3419934.jpg border=1>
<TBODY>
<TR>
<TD>
<P align=center><INPUT type=image width=420 src="http://photo.southcn.com/upload/F202922004.11.4.22.24.422.jpg" ></P>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>


显示结果:



用颜色做成的立体图框代码;

<table id="myexample" style="border:19px #ccffcc ridge" align="center" border="0" cellpadding="0" cellspacing="0" width="460" background="http://bbs.e-yu.cn/attachments/ext_jpg/029_mS674YcNXDnk.jpg">
<tr><td>
<br><br><br><br><br><br>
</td></tr></table>
 


显示结果:









12.txt 用各种图片素材做边框套装

欢迎您!启步学代码。
(12)

(游子编辑 供初学HTML代码的朋友参考)


用各种图片素材做边框套装

用金黄色图片作边框的代码:


用金黄色图片作边框的代码:
<CENTER>
<TABLE borderColor=660000 cellSpacing=10 cellpadding=20 background=http://img.gw.com.cn/UploadFile/2004/9/3/3436397.jpg width=400 height=300 border=10>
<TBODY>
<TR>
<TD bgcolor=#AAAAFF>
<br>
<br>
</CENTER></TD></TR></TBODY></TABLE>


说明:

<TABLE borderColor=660000<br...>--边框颜色

<TD bgcolor=#AAAAFF>--图框内单元格背景颜色。

显示结果:




用图片作边框的六层图框套装代码;


<TABLE cellSpacing=10 align=center bgColor=green WIDTH: 800px; border=0>
<TBODY><TR><TD>
<TABLE borderColor=#111111 cellSpacing=0 cellPadding=3 width="95%" background="http://img.gw.com.cn/UploadFile/2004/9/3/3436397.jpg" border=5>
<TBODY><TR><TD>
<TABLE borderColor=#111111 cellSpacing=0 cellPadding=8 width="100%" background="http://bbs.xxjy.net/UploadFile/2004-10/20041028356173.jpg" border=5>
<TBODY><TR><TD>
<TABLE borderColor=#111111 cellSpacing=0 cellPadding=3 width="100%" background="http://www.dabaoku.com/sucai/shejilei/bj/pic/0410.jpg" border=5>
<TBODY><TR><TD>
<TABLE borderColor=#111111 cellSpacing=0 cellPadding=15 width="100%" background="http://img.gw.com.cn/UploadFile/2004/9/3/3436397.jpg" border=5>
<TBODY><TR><TD>
<TABLE borderColor=#111111 cellSpacing=0 width="100%" bgColor=green border=1>
<TBODY>
<TR>
<TD>
<P align=center><TABLE border=0><TBODY><TR>
<TD style="FILTER:Alpha(opacity=100,style=2)" width=450 background=http://edu.hangzhou.com.cn/images/20050101/20050427jy-15.jpg height=310>
</TD></TR></TBODY></TABLE></P>
<CENTER>
<DIV style="FILTER: glow(color=#E4DC9B, strength=5); WIDTH: 500px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 35pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=003300>
插入标题文字
<br><br>
<h2>图文:网络<br>编辑:游子</h2></FONT></DIV>
<P align=center> </P>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER>
 




显示结果:

插入标题文字

图文:网络
编辑:游子

 




用图片作边框的10层图框套装代码;


<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg WIDTH: 670px;border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=23 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335244349065.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=23 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335253784815.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=18 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335244349065.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=23 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335254658568.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243084013.jpg border=1>
<TBODY>
<TR>
<TD>
<CENTER><IMG src="http://bbs.gw.com.cn/UploadFile/2006-3/2006335264543271.jpg"> <BR><FONT style="FONT-SIZE: 30pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书>标题文字<BR>
<H2>插入内容</H2><BR><IMG src="http://bbs.gw.com.cn/UploadFile/2006-3/200633522233660.jpg"> <BR>
<H2>图文:网络/编辑:游子</H2></B></FONT></CENTER>
<CENTER></CENTER></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR>
 




用图片作边框的10层图框套装显示结果:


标题文字

插入内容



图文:网络/编辑:游子




(待续)


编辑:游子

13.txt 如何在图框套装内贴图片和文字。

欢迎您!启步学代码。
(13)

(游子编辑 供初学HTML代码的朋友参考)



如何在图框套装内贴图片和文字。

    用HTML代码在图框内贴图,图片必须是网络上的图片绝对地址(URL)。如果是本机硬盘的图片,应先上传到较隐定的空间(免费相册或可上传图片的论坛),取得图片的地址和图片的尺寸大小。新学习者最好选择一些较简单的图框来贴图。由于各论坛系统对贴子宽度有不同的限制,因此图框的宽最好不要超过500,图片则在400左右。


几种常用贴图代码。

第一种:
<img src="图片地址">
第二种:
<img src=“图片地址” width='80'height='280' border='10'>
第三种:

<CENTER>
<TABLE borderColor=0000ff cellSpacing=10 cellpadding=20 background=“图片地址”width=400 height=300 border=10>
<TBODY>
<TR>
<TD>
<br>
<br>
</TD></TR></TBODY></TABLE></CENTER>


第一种最简易使用的贴图代码。

       <img src="图片地址">
用网络上的图片绝对地址(URL)粘贴上去就可以了。但这种方法贴的图片,各论坛对图片宽度显示有不同的限制,有时不是原图片的尺寸,更不是你想要多大就多大。
这里有一张图片地址:http://photo.southcn.com/upload/F202922004.11.4.22.24.422.jpg
把它粘贴在上面代码中的“图片地址”如下:

<CENTER>
<img src="http://photo.southcn.com/upload/F202922004.11.4.22.24.422.jpg">
</CENTER>

显示结果:



第二种简易使用的图片可定大小有黑色边框的贴图代码。
<CENTER>
<img src=http://photo.southcn.com/upload/F202922004.11.4.22.24.422.jpg width=620 height=380 border='10'>
</CENTER>


显示结果:



第三种用表格属性内容的贴图代码。
<CENTER>
<TABLE borderColor=#fbd44c cellSpacing=3 cellpadding=0 background=http://photo.southcn.com/upload/F202922004.11.4.22.24.422.jpg width=660 height=380 border=15>
<TBODY>
<TR>
<TD>
<br>
</TD></TR></TBODY></TABLE></CENTER>
 


显示结果:



(待续)


编辑:游子

14.txt 特殊效果的贴图方法。

欢迎您!启步学代码。
(14)

(游子编辑 供初学HTML代码的朋友参考)



特殊效果的贴图方法。


    图片雾化或叫羽化效果,就是一张图片只突出显示中心的主要图像,周边朦胧淡化。方法有二种,即圆形雾化效果和矩形雾化效果。


(1)图片圆形雾化效果的代码:

<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image width=450 src="http://img110.photo.163.com/wxgwws/11717817/262405260.jpg" INPUT></P>


显示结果:


(2)图片矩形雾化效果的代码:

<INPUT style="FILTER: alpha(opacity=100,style=3)" type=image width=450 src="http://img110.photo.163.com/wxgwws/11717817/262405260.jpg" INPUT></P>



显示结果:



圆形雾化效果和矩形雾化效果代码是一样的,不同之处在:
圆形雾化效果 style=2
矩形雾化效果 style=3



图片大小可调的贴图代码:
:

<P align=center>
<INPUT src="http://img.gw.com.cn/UploadFile/2005/7/31/1728360.jpg" type=image width=600>
</P>



显示结果:


图片大小可调的贴图代码与常用贴图代码不同之处在标签名:
图片大小可调的贴图代码标签名 <INPUT src=
常用贴图代码标签名 <img src=
同样的一组图片大小可调贴图代码,只要改变宽度width=600 的参值,就可实现图片变大小。


(待续)


编辑:游子


15.txt 如何在图框套装内贴图片和文字。

欢迎您!启步学代码。
(15)

(游子编辑 供初学HTML代码的朋友参考)



如何在图框套装内贴图片和文字。

    用HTML代码在图框内贴图,图片必须是网络上的图片绝对地址(URL)。如果是本机硬盘的图片,应先上传到较隐定的空间(免费相册或可上传图片的论坛),取得图片的地址和图片的尺寸大小。新学习者最好选择一些较简单的图框来贴图。由于各论坛系统对贴子宽度有不同的限制,因此图框的宽最好不要超过500,图片则在400左右。


几种常用贴图代码。

第一种:
<img src="图片地址">
第二种:
<img src=“图片地址” width='80'height='280' border='10'>
第三种:

<CENTER>
<TABLE borderColor=0000ff cellSpacing=10 cellpadding=20 background=“图片地址”width=400 height=300 border=10>
<TBODY>
<TR>
<TD>
<br>
<br>
</TD></TR></TBODY></TABLE></CENTER>


第一种最简易使用的贴图代码。

       <img src="图片地址">
用网络上的图片绝对地址(URL)粘贴上去就可以了。但这种方法贴的图片,各论坛对图片宽度显示有不同的限制,有时不是原图片的尺寸,更不是你想要多大就多大。
这里有一张图片地址:http://photo.southcn.com/upload/F202922004.11.4.22.24.422.jpg
把它粘贴在上面代码中的“图片地址”如下:

<CENTER>
<img src="http://photo.southcn.com/upload/F202922004.11.4.22.24.422.jpg">
</CENTER>

显示结果:



第二种简易使用的图片可定大小有黑色边框的贴图代码。
<CENTER>
<img src=http://photo.southcn.com/upload/F202922004.11.4.22.24.422.jpg width=620 height=380 border='10'>
</CENTER>


显示结果:



第三种用表格属性内容的贴图代码。
<CENTER>
<TABLE borderColor=#fbd44c cellSpacing=3 cellpadding=0 background=http://photo.southcn.com/upload/F202922004.11.4.22.24.422.jpg width=660 height=380 border=15>
<TBODY>
<TR>
<TD>
<br>
</TD></TR></TBODY></TABLE></CENTER>
 


显示结果:



(待续)


编辑:游子
17.txt 在多层图框(套装)内贴图的方法

欢迎您!启步学代码。
(16)

(游子编辑 供初学HTML代码的朋友参考)



在图框内贴图或文字的位置设置方法。


  根据插入的图片宽度和色彩选好图框。目前多数论坛对代码贴图的宽度限制在500之内,所以图框包括边线宽度不能超过500,插入的图片宽度在400以内,否则其超过部份就无法显示。如果图片很大,就要选宽度大于700的图框,同时要设置全屏代码,才能完整显示。网络上有很多漂亮的图框(套装),可以拿来套用。启步学习时,最好采用较简单的图框。


  在一张图框或图片内如何插入文字和图片?
  要在表格的单元格<TD>与</TD>中间插入。 例如:


<TABLE width=480 height=350 bordercolor=olive background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg border=18>
<TBODY>
<TR>
<TD >
<FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#fff000><B>
<p align=CENTER>插入文字或图片</P>
<p align=CENTER>插入文字或图片</P>
<p align=CENTER>插入文字或图片</P>
</B> </FONT>
</TD></TR></TOBDY></TBODY></TABLE></CENTER>



代码实例:

<TABLE width=500 height=350 bordercolor=olive background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg border=18>
<TBODY>
<TR>
<TD >
<FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#fff000><B>
<br> <p align=CENTER>万紫千红总是春</P>
<p align=CENTER><img src="http://www.coolhot.cn/680/duocai/11.gif"width=400 height=352 border=1>
</P>
<p align=CENTER>图文:网络/编辑:网名</P>
</B> </FONT>
</TD></TR></TBODY></TABLE></CENTER>



显示结果:

万紫千红总是春

图文:网络/编辑:网名



  

定位设置一些语句。

align(水平方向)
水平方向有左中右:
left(左对齐)
center(居中)
RIGHT(右对齐)

水平方向位置设置代码:

<P align=LEFT>内容左对齐</P>
<P align=center>内容居中</P>
<P align=RIGHT>内容右对齐</P>
显示结果:

内容左对齐

内容居中

内容右对齐


valign(垂直方向)

垂直方向有靠顶和靠底.
top(靠顶),bottom(靠底)
垂直方向与水平方向相结合可以设置6个不同位置的指令如下:

<P align=LEFT valign=top>居左靠顶</P>
<P align=center valign=top>居中靠顶</P>
<P align=RIGHT valign=top>居右靠顶</P>

<P align=LEFT valign=bottom>居左靠底</P>
<P align=center valign=bottom>居右靠底</P>
<P align=RIGHT valign=bottom>居右靠底</P>


在图框内插入图片和文字位置的代码:

<CENTER>
<TABLE width=480 height=380 bordercolor=olive background=http://www1.yunbbs.com/yaoyao/7/000.01.jpg border=10>
<TBODY>
<TR>
<td>
<FONT style="FONT-SIZE: 18pt" face=华文行楷 color=#fff000><B>
<p align=left>居左靠顶<br>
<INPUT src="http://lolipop.jp/common/img/obj_ojisan_01.gif" type=image width=100>
</P>
<p align=CENTER>图片文字插入位置示例<br>居中</P>
<p align=RIGHT>
<INPUT src="http://wangjiang.home4u.china.com/mls.gif" type=image width=100>
<br>
居右靠底</P>
</B> </FONT>
</TD></TR></TOBDY></TBODY></TABLE></CENTER>


显示结果:

居左靠顶

图片文字插入位置示例
居中


居右靠底


  图片文字插入位置控制还有其他方法,比如利用表格的行(<TR>)和列(<TD >)设置多行多列等,以及坐标绝对定位等等。


(待续)


编辑:游子

欢迎您!启步学代码。
(17)

(游子编辑 供初学HTML代码的朋友参考)


  

在多层图框(套装)内贴图的方法。


  学会文字设置和表格设置之后,就要学做有图片,文字和背景音乐的完整贴图了 。单层图框内插入图片文字内容,应该在表格的单元格(<td></td>)中间,多层图框内贴图也必须是这样。下面是一张六层图框贴图代码及其分段说明。




<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="680" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=20 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335253784815.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=20 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335254658568.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243084013.jpg border=1>
<TBODY>
<TR>
<TD>
<CENTER>
<BR>
<IMG src="http://bbs.gw.com.cn/UploadFile/2006-3/200633522233660.jpg">
<font style=font:20pt face=隶书 color=00ff00>
<FONT style="FONT-SIZE: 17pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #fff000; LINE-HEIGHT: 150%" face=隶书>
<h1>小李庄立体画欣赏</h1>
<P align=LEFT>  小李庄立体画是以草本植物的茎类为原料,利用其自然光泽、纹理和质感,借助现代技术把这一传统工艺推陈出新。</P>
<BR>
松鼠图
<P align=center><INPUT src="http://www.688999.com/picture_of_products_big/b_songshu.jpg" type=image width=470></P>
<BR>
猫扑蝶
<P align=center>
<INPUT src="http://www.688999.com/picture_of_products_big/33.JPG" type=image width=470></P>
<BR>
荷花、鸳鸯、小鸟、牡丹
<BR>
<P align=center><INPUT src="http://www.688999.com/picture_of_products_big/x1.JPG" type=image width=470></P>
<BR>
中华瑰宝
<BR>
<P align=center><INPUT src="http://www.688999.com/picture_of_jufu/rn02.jpg" type=image width=470></P>
<BR>
<IMG src="http://bbs.gw.com.cn/UploadFile/2006-3/200633522233660.jpg">
<BR>
<H2>图文:网络/编辑:游子</H2></B></FONT></CENTER>
<EMBED src=http://www.minzuyinyue.com/xinshang/125.mp3 width=0 height=0 type=audio/x-pn-realaudio-plugin loop="true" autostart="true" controls="controlpanel,statusbar">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>


****************************************************************
代码及其分段说明。

第一段是6组六层边框(表格)代码的始标筌。

<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="680" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
...............
..............
................
. ..............
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243084013.jpg border=1>
<TBODY>
<TR>
<TD>
这里是第六层图框(表格)的单元格,开始插入内容。

*******************


第二段是插入图片文字和背景音乐的区域。

<CENTER>
<BR>
<IMG src="http://bbs.gw.com.cn/UploadFile/2006-3/200633522233660.jpg">
<font style=font:20pt face=隶书 color=00ff00>
<FONT style="FONT-SIZE: 17pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #fff000; LINE-HEIGHT: 150%" face=隶书>
<h1>小李庄立体画欣赏</h1>
............................
...........................
.................................
<BR>
<H2>图文:网络/编辑:游子</H2></B></FONT></CENTER>
<EMBED src=http://www.minzuyinyue.com/xinshang/125.mp3 width=0 height=0 type=audio/x-pn-realaudio-plugin loop="true" autostart="true" controls="controlpanel,statusbar">

*******************


第三段是6组六层边框(表格)代码的尾标筌。

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




六层图框贴图代码显示结果:


小李庄立体画欣赏

  小李庄立体画是以草本植物的茎类为原料,利用其自然光泽、纹理和质感,借助现代技术把这一传统工艺推陈出新。


松鼠图


猫扑蝶


荷花、鸳鸯、小鸟、牡丹


中华瑰宝



图文:网络/编辑:游子




(待续)


编辑:游子



18.txt 坐标控制绝对定位贴图的方法。

欢迎您!启步学代码。
(18)

(游子编辑 供初学HTML代码的朋友参考)


  

坐标控制绝对定位贴图的方法。

  在学用代码贴图中,有几个间题较难处理:(1)绝对定位外部挂贴,要插入的内容往往不是在自已的贴子里。(2)在背景图片加叠Flash后,要再加文字或图片很困难。(3)在背景图同一区域中的多个位置上,要插入图文,虽然有靠左居顶等指令,但仍不是很好的办法。近日在整理学习笔记时,觉得有一种代码指令可以解决这些问题,提供大家参考探讨。

  设置一个规定范围的表格(图框),代码如下:

<TABLE id=table style=" ridge; LEFT: 0px; ridge; WIDTH: 500px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 550px" background=http://bbs.guqu.net/UploadFile/2004-12/20041230144914462.jpg border=0>
<TR>
<TD>
插入图文
</TD></TR></TABLE>


  表格化的绝对定位代码:

<TABLE id=table1 style="ridge; LEFT: 10px; WIDTH: 220px; ridge; POSITION: absolute; TOP: 0px; HEIGHT: 120px">
<TR>
<TD>
文字设置代码:
<FONT style="FONT-SIZE: 25pt; FILTER: shadow color=apar); WIDTH: 150%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书>
文字内容
</FONT>
或插入图片贴图代码:
<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image height=160 width=140 src="图片地址">
</TD></TR></TABLE>

  代码语句说明:

LEFT: 10px; WIDTH: 220px;插入内容与左边的距离和宽度的范围。

TOP: 0px; HEIGHT: 400px插入内容与顶部的距离和高度的范围。


表格化的绝对定位代码实例:

击点表格化的绝对定位代码实例


(待续)


编辑:游子






2071.txt

欢迎您!启步学代码。
(实例)

(游子编辑 供初学HTML代码的朋友参考)

 表格化的绝对定位代码实例:

<BR>
<TABLE id=table style=" ridge; LEFT: 0px; ridge; WIDTH: 500px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 600px" background=http://bbs.guqu.net/UploadFile/2004-12/20041230144914462.jpg border=0>
<TR>
<TD>
<TABLE id=table1 style="ridge; LEFT: 10px; WIDTH: 220px; ridge; POSITION: absolute; TOP: 0px; HEIGHT: 200px">
<TR>
<TD><br>
<FONT style="FONT-SIZE: 20pt; FILTER: shadow color=apar); WIDTH: 200%; COLOR: #ffa6ff; LINE-HEIGHT: 150%" face=隶书>
 《枫桥夜泊》<br>
   张 继<br>
月落乌啼霜满天,<br>
江枫渔火对愁眠。<br>
姑苏城外寒山寺,<br>
夜半钟声到客船。<br>
</FONT>
</TD></TR></TABLE>
<TABLE id=table2 style="LEFT: 260px; ridge; WIDTH: 120px; ridge; POSITION: absolute; TOP: 50px; HEIGHT: 100px">
<TR>
<TD>
<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image height=180 width=180 src="http://bbs.680.cn/uploadfile/2005-6/200561418112527366.jpg">
</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>
 

显示结果:

 《枫桥夜泊》
   张 继
月落乌啼霜满天,
江枫渔火对愁眠。
姑苏城外寒山寺,
夜半钟声到客船。


  在背景图片加叠Flash后再挂贴图文的代码:

<TABLE id=table style=" ridge; LEFT: 0px; ridge; WIDTH: 500px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 500px" background=http://bbs.guqu.net/UploadFile/2004-12/20041230144914462.jpg border=0>
<TR>
<TD>
<TABLE cellSpacing=3 cellPadding=3 width=500 bordercolor=0000ff background= border=10>
<TBODY>
<TR><TD>
<EMBED align=right src=http://imgfree.21cn.com/free/flash//17.swf width=500 height=500 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
<EMBED align=right src=http://my.e-yu.cn/cxq/sc/005shuizhu_1.swf width=480 height=500 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
<EMBED align=right src=http://imgfree.21cn.com/free/flash//17.swf width=450 height=450 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
<EMBED align=right src=http://my.e-yu.cn/cxq/sc/005shuizhu_1.swf width=500 height=500 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
<EMBED align=right src=http://my.e-yu.cn/cxq/sc/005shuizhu_1.swf width=500 height=480 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
<TABLE id=table2 style="LEFT: 260px; ridge; WIDTH: 120px; ridge; POSITION: absolute; TOP: 70px; HEIGHT: 100px">
<TR>
<TD>
<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image height=180 width=180 src="http://bbs.680.cn/uploadfile/2005-6/200561418112527366.jpg">
</TD></TR></TABLE>
<TABLE id=table2 style="LEFT: 10px; ridge; WIDTH: 120px; ridge; POSITION: absolute; TOP: 70px; HEIGHT: 100px">
<TR>
<TD>
<FONT style="FONT-SIZE: 50pt; FILTER: shadow color=apar); WIDTH: 200%; COLOR: #fff000; LINE-HEIGHT: 150%" face=隶书>
金<br>鲤<br>鱼
</FONT>
</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>
 


显示结果:






(待续)

编辑:游子




 
启步学HTML代码。(重建) http://www.5xx.cn/data/25461/data/1158889853.php