HTML初级教程（一）所有的代码和操作方法

晨雾枫露 2010-11-21

展开全文

[转] HTML初级教程（一）所有的代码和操作方法 [图片]

精美的花边边框制作 教程原创：墨梅冷阁 指导老师: 心心知我心 制作:青青草

因为有很多朋友想学花边边框制作，

但是又没有足够的时间来群里面学

习，为了让更多的朋友学会花边边

框制作，我今天把所有的程序和原

图代码写在 HTML初级教程（一）

（二）（三）里面，这样就方便所

有爱好空间的朋友学习制作！

HTML的制作程序是；

1）点写日志；

2）点右边高级：

   3）点HTML：

4）去掉HTML里面以前的代码；

5）粘贴原代码：

6）（这里放入图素材地址）：

       意思就是放一张花边边框的图地址在那里。

初级教程课一·大图背景：

原始代码： <TABLE style="BACKGROUND-IMAGE: url (这里放入图素材地址)" borderColor=#cccccc cellSpacing=60 cellP adding=60 width="100%" align=center bgColor =#ffffff border=0>
<TBODY><TR>
<TD>
<P align=center><FONT face=楷体_GB2312><FONT size=5><STRONG></STRONG></FONT></FONT> </P></TD></TR></TBODY> </TABLE></TD></TR> </TABLE>

下面是大图背景预览图

选你自己喜欢的图地址

一般是写日志正文的。

这里写日志

初级教程课二·大图背景成框：

原始代码：（三层）

<TABLE style="BACKGROUND-IMAGE:

url(这里放图地址一)" borderColor=#cccccc

cellSpacing=34 cellPadding=34 width="100%"

align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE:

url(这里放图地址二)" borderColor=#cccccc

cellSpacing=3 cellPadding=3 width="100%" align=

center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(这里放图

地址三)" borderColor=#cccccc

cellSpacing=40 cellPadding=40 width="100%"

align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<P align=center> </P></TD></TR></TB

ODY></TABLE></TD></TR>

</TBODY></TABLE>

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

初级教程课三·音乐贴图动画：

这个请参照：HTML初级教程（三）

（音乐贴）的操作方法：

原始代码：

<TABLE cellSpacing=2 cellPadding=2 width=480

align=center bgColor=#000000border=0>
<TBODY>
<TR>
<TD>
<P> </P>
<MARQUEE><IMG style="BACKGROUND: none

transparent scroll repeat 0% 0%;

WIDTH: 500px;

HEIGHT:

313px" height=48 src="这里放图地址" width=48

fakesize="1"> 　<IMG style=

"BACKGROUND: none transparent scroll repeat 0% 0%;

WIDTH: 500px; HEIGHT: 313px"

height=48 src=

"这里放图地址" width=48 fakesize="1"> <IMG style=

"BACKGROUND: none tran

sparent scroll

repeat 0% 0%; WIDTH: 500px; HEIGHT: 313px"

height=48 src="这里放图地址"

width=48 fakesize="1"> 　

<IMG style="BACKGROUND: none transparent scroll

repeat 0% 0%; WIDTH: 500px; HEIGHT:

313px" height=48

src="这里放图地址" width=48 fakesize="1"> 　

<IMG style="BACKGROUND: none

transparent scroll repeat 0% 0%; WIDTH:

500px; HEIGHT: 313px" height=48 src="这里放图地址"

width=48 fakesize="1" bloaded="true"

loadingtimer="-1"> 　<IMG style="BACKGROUND:

none transparent scroll repeat 0% 0%;

WIDTH: 500px; HEIGHT:

313px" height=48 src="这里放图地址"

width=48 fakesize="1"

bloaded="true" loadingtimer="-1">

　<IMG style="BACKGROUND: none

transparent scroll repeat 0% 0%; WIDTH:

500px; HEIGHT: 313px"

height=48 src=

"这里放图地址" width=48 fakesize="1" bloaded=

"true" loadingtimer="-1"> 　

<IMG style="BACKGROUND: none transp

arent scroll repeat 0% 0%; WIDTH: 500px;

HEIGHT: 313px"

height=48

src="这里放图地址" width=48 fakesize="1"

bloaded="true" loadin

gtimer="-1"></MARQUEE>

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

</DIV>

初级教程课四·精美边框：

原代码（7层）

<P></P>
<CENTER>
<TABLE style="BACKGROUND-IMAGE: url(图地址)" borderColor=

#cccccc cellSpacing=34 cellPadding=34 width="100%"

align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(图地址)"

borderColor=#cccccc cellSpacing=3

cellPadding=3 width="100%" align=center bgColo

r=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(图地址)"

borderColor=#cccccc cellSpacing=40 cellPadding=40 width=

"100%" align=center bgColor=#ffffff

border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(图地址)"

borderColor=#cccccc cellSpacing=3

cellPadding=3 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(图地址);

WIDTH: 710px; HEIGHT: 429px" borderColor=#cccccc

cellSpacing=34 cellPadding=34 width=858 align=center

bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(图地址)"

borderColor=#cccccc cellSpacing=3 cellPadding=3 width="100%"

align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(图地址)"

borderColor=#cccccc cellSpacing=40

cellPadding=40

width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<CENTER>
<P align=center><FONT color=#000000><FONT size=5>这里写内容！

</FONT></P></CENTER></FONT></TD></TR></TBODY>

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

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

</TABLE></TD></TR></TBODY></TABLE>
<CENTER></CENTER>
<P></P>
<CENTER> </CENTER></TD></TR>

</TBODY></TABLE>

</CENTER>

这个只要HTML操作程序会了

就直接可以在HTML编辑框内编辑

我现在告诉大家，

怎样提取图片的网址：这

大家都知道现在学花边边框都需要图

片的地址，有这些地址才可以做出漂亮

的花边边框。

1)，在发表评论栏里面提取地址:

首先你要找到你需要的图片，你们点

一下图片，会跳出你需要的图片在电

脑的正面，图片的上面有地址栏，地

址栏里面就是这一张图片的地址了，

你们复制以后，粘贴到你们需要的地

方就好了。这个和提取动画地址是

一样的。

2），在相册里面提取网址：

其实在相册里面提取网址是最好的方

法，因为这些有可能经常使用，但是

必须上传到相册，首先找到你需要上

传的图片，把鼠标放在图片的上面，

点击鼠标的右键，上面有（图片另存

为S）你们点一下，文件名（N )你最

好自己填，1.2.3啊！或者是什么内型

的你就写什么，这样就便于自己找到。

然后再上传相册，在相册里面你找到

你需要的图片，用左键点击这张图片，

你们看见这个图片出来以后，图片的

右上角有复制地址，你们点一下，记

住一定要复制原图地址哦，这样就可

以把地址粘贴到你需要的地方了。

另外图片上传相册，就可以制作动

画影集了。

五层花边边框源代码

</SPAN></FONT></STRONG>
<P></P>
<P class=MsoNormal style="MARGIN: 0cm 0cm 0pt; TEXT-INDENT: 21.75pt" align=center> </P>
<P align=center>
<TABLE style="BACKGROUND-IMAGE: url(图地址)" borderColor=#cccccc cellSpacing=80 cellPadding=80 width="100%" align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(图地址)" borderColor=#cccccc cellSpacing=12 cellPadding=12 width="100%" align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(图地址)" borderColor=#cccccc cellSpacing=8 cellPadding=8 width="100%" align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(图地址)" borderColor=#cccccc cellSpacing=6 cellPadding=6 width="100%" align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(图地址)" borderColor=#cccccc cellSpacing=5 cellPadding=5 width="100%" align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<P> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE></P>
<P align=center><FONT color=#66ff00 size=6><STRONG></STRONG></FONT>