奔波儿灞霸波尔奔分类信息网

九零白度

 找回密码
 立即注册
查看: 945|回复: 1

htm制作

[复制链接]
  • TA的每日心情

    2021-11-16 01:32
  • 签到天数: 1 天

    [LV.1]初来乍到

    50

    主题

    72

    帖子

    568

    积分

    管理员

    金牌会员

    Rank: 9Rank: 9Rank: 9

    积分
    568
    发表于 2014-9-2 23:24:34 | 显示全部楼层 |阅读模式
    第一部分,基础学习
    一,颜色代码:
    (绿色)
    <font color="#008000">填入文字</font>
    (褐色)
    <font color="#800000">填入文字</font>
    (蓝色)
    <font color="#000080">填入文字</font>
    (紫色)
    <font color="#800080">填入文字</font>
    (红色)
    <font color="#FF0000">填入文字</font>
    二,文字加粗 倾斜的代码
    文字加粗的代码是: <b>你好</b>
    文字倾斜的代码是: <i>你好!</i>

    三,文字链接代码:
    如果您想点击某处文字会连接到另外一个网页的效果,这是超链接,代码是这样:
    <a href="网站地址";>填入文字</a>
    如果要点了这个文字以后重新打开一个窗口的话,代码是:
    <a href="网站地址";; target="_blank">填入文字</a>

    四,在网站上放图片的代码:
    如果你看到一个好看的图片想放到网站上,代码是这样的:
    <img src="http://www.2000.com/wwwimages/n/163logo.gif"; width="150" height="100">
    后面的数字调节图片的尺寸大小。

    五,图片链接代码:
    如果要点一下图片就能打开一个网站的链接代码是这样的:
    <a href="http://www.2000.com";><img src="http://www.2000.com/wwwimages/n/2000logo.gif"; width="150" height="100"></a>
    如果要点一下图片就能打开一个网站的链接,并且重新打开一个窗口。代码是这样的:
    <a href="http://www.163.com";; target="_blank"><img src="http://www.163.com/wwwimages/n/163logo.gif"; width="150" height="100"></a>
    上面的数字都能调节图片尺寸大小。

    六,换行代码:
    如果你想换行,直接用Enter键是不行的,需要在您想换行的位置输入
    ,这样就会分成两行显示 ,整个网站看起来也不会是一大片了,而是段落分明。

    七,文字移动的代码是:

    <marquee>这里写文字</marquee>

    八,移动图片的代码:
    <marquee><img src="http://games.tom.com/images/2002/gamemm/0604/s/36.jpg";><img src="http://games.tom.com/images/2002/gamemm/0604/s/13.jpg";><img src="http://games.tom.com/images/2002/gamemm/0604/s/30.jpg";><marquee>
    把里面的图片地址换成你的就行 想多放一个图片就按照格式在中间插入:
    <img src="http://games.tom.com/images/2002/gamemm/0604/s/13.jpg";>
    里面的图片地址自己定。

    九,背景音乐的代码:
    如果想在你的网站上放上一段好听的背景音乐,代码是: <bgsound src="http://xxxxx.com/xxx.mid";loop=10>
    <bgsound src="http://www.midifan.com/midi/music.asp?id=3073";loop=30>
    里面的背景音乐地址你能自己替换。
    前面的是音乐地址,一般都以mid或者mp3的形式结尾 后面的数字是播放次数。
    http://www.midifan.com/midi/
    这个网站都有好的背景音乐

    十,在网站中插入一个flash动画的代码是:
    <embed width=200 height=200
    src="http://flash.shangdu.com/view/2/fff.swf";>
    里面的动画地址换成你的.动画地址都要以swf的形式结尾。这点需要注意。

    十一,打开网站时候出现的欢迎词代码:
    <body onLoad= alert("你好,欢迎访问本网站!")>

    十一,关闭网站的时候出现的话
    <body>

    十二,打开网站的时候自己做一个弹出窗口的广告:
    <script language="javascript">
    var TimerID=1;
    window.open('http://2000.com','','width=600,height=300,left=100,top=50');
    </script>
    [tr][td=1,1,14][/td][td]第二部分举例说明:

    一个好的帖子是可以给人以美的享受的,学会用Html代码做出自己的作品,能够让你真正体会发贴的乐趣.
      其实Html代码并不象我们想像的那么难的*^o^*,只要你耐心地看下面的文章,记住一些简单常用的公式,而且能够举一反三,触类旁通,你很容易就可以做出漂亮的帖子.
      学习之前,先了解一些基本常识,呵呵:
      首先,要发Html代码的帖子,你所要发贴的地方必须是开放Html标签的如图)
      [UploadFileDisp=06022516181996_1140855374.jpg]
      
         我们再来看看发贴这里如图)
         [UploadFileDisp=06022516181996_1140856293.jpg]
      
      其中Design是设计,UBB模式是大家平时发贴常用的代码,VIEW是预览,HTML就是我们要用的Html代码发贴的模式.
      打开发贴页面,点击 HTML 按钮。取消自动修正的勾,然后在HTML格式栏内粘贴你要发的内容代码,编辑你的贴子,完成后点击返回Design。Design模式的状态下,点击预览,预览效果正常,就可以发表了。预览效果不正常,再点击返回HTML模式,修改代码。
      编写代码的时候,代码之间只能空一格,如 昧嘶爻祷蚴欠中芯突嵛薹ㄕ O允玖恕H绻 ⒈硖 雍螅 鱿郑阂韵履谌莺 疟?或可能导致页面不正常的代码的提示,可以试运行代码,如果显示正常,那只要在修改编辑的时候,看看代码之间有没有多了或少了什么东西 ,把这些都删除修改,就可以正常显示了!
      DVBBS7、0的版本不支持网页外挂,所以有些复杂的特效不能使用,象鼠标特效这些等!
      DVBBS7、0的版本不支持HTML与UBB合用,所以大家在想换行的时候,要使用换行符
      ,而不能简单的通过回车来实现。其他也一样,不能把UBB与HTML标签合用!
      HTML代码注重对称性,这点要切记,比如前面有TABLE,后面就一定有一个/TABLE对应.
    一个完整的HTML帖子一般包括:
    外面的表格框架+文章和图片(包括一些flash和一些特效)+背景音乐
    下面我一样样来教大家说明:以下所有举例的代码大家可以边学边试,建议用记事本来编辑修改,要注意的是,用记事本做好代码内容后一定要取消记事本格式里的自动换行,才能复制粘贴到论坛里!!切记!)

    一.表格框架的设计:
    只有一层的表格代码:
    举例:
    <TABLE align=center background="背景图片链接" border=10 cellSpacing=2 cellpadding="2" valign="TOP" bgcolor="#0000FF" borderColor=#841A00 bordercolorlight="#00FF00" bordercolordark="#00FFFF"> width=500><TBODY><TR><TD>帖子的文章加图片</TD></TR></TBODY></TABLE>
    多层表格的代码:
    举个8层的例子大家可以灵活运用)
    <TABLE cellSpacing=0 cellPadding=4 width="95%" align=center background=http://www.enchantingdesignz.com/linkware/parker/p2strip.jpg border=0>
    <TBODY>
    <TR>
    <TD>
    <TABLE height=315 cellSpacing=0 cellPadding=15 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2background.jpg border=0>
    <TBODY>
    <TR>
    <TD>
    <TABLE height=355 cellSpacing=0 cellPadding=2 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2strip.jpg border=0>
    <TBODY>
    <TR>
    <TD>
    <TABLE height=387 cellSpacing=0 cellPadding=2 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2background.jpg border=0>
    <TBODY>
    <TR>
    <TD>
    <TABLE height=365 cellSpacing=0 cellPadding=2 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2strip.jpg border=0>
    <TBODY>
    <TR>
    <TD>
    <TABLE cellSpacing=0 cellPadding=15 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2background.jpg border=0>
    <TBODY>
    <TR>
    <TD>
    <TABLE height=362 cellSpacing=0 cellPadding=2 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2strip.jpg border=0>
    <TBODY>
    <TR>
    <TD>
    <TABLE height=361 cellSpacing=0 cellPadding=4 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2background.jpg border=0>
    <TBODY>
    <TR>
    <TD>
    <TABLE height=204 cellSpacing=0 cellPadding=4 width="100%" border=0>
    <TBODY>
    <TR>
    <TD>
    你的帖子内容
    </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>
    请注意:HTML代码注重对称性,这点要切记,比如前面有TABLE,后面就一定有一个/TABLE对应!多或少都会出错!
    上面例子中的图片链接可以换成你喜欢的图片,我只是举例而已,下同.
    代码说明:
    表格的基本结构:
    <table>...</table> --- 定义表格
    <tr> --- 定义表行
    <td> --- 定义表元(表格的具体数据)
    常用的参数设定及注解:
    width="400"
    表格宽度,接受绝对值(如 500)及相对值(如 80%)。
    border="10"
    表格边框的厚度。
    cellspacing="2"
    表格格线的厚度
    cellPadding=5 表格格线内厚度

    align="CENTER"
    表格的摆放位置(水平),可选值为:左: left, 右: right, 居中: center
    valign="TOP".
    表格内内容的对齐方式(垂直),可选值为: top, middle, bottom。   
    background="背景图片网址"
    表格的背景图片,与 bgcolor 不要同用。
    bgcolor="#0000FF"
    表格的底色,与 background 不要同用
    bordercolor="#CF0000"
    表格边框颜色
    bordercolorlight="#00FF00"
    表格边框向光部分的颜色
    bordercolordark="#00FFFF"
    表格边框背光部分的颜色,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。
    大家可以自己修改层数,颜色,背景,表格数据,也可以照搬我的代码 ,呵呵
    二.如何贴图:
    首先说明:
    几个常用代码:
    <BR>代码为换行符,一般在html中不使用回车断行。
    段落标签:

    文件段落的开始由<>来标记,段落的结束由</P>来标记,</P>是可以省略的,因为下一个<>的开始就意味着上一个<>的结束。<>标签还有一个属性ALING,它用来指名字符显示时的对齐方式,一般值有CENTER、LEFT、RIGHT三种。
    位置控制:
    通过ALIGN属性可以选择文字或图片的对齐方式,LEFT表示向左对齐,RIGHT表示向右对齐,CENTER表示居中。基本语法如下:<DIV ALIGN=#>   #=left/right/center
    居中:<center>....</center>

    贴图基本代码:
    单幅图片:

    <img src=http://www.pic019_jpg.jpg>
    IMG还有两个属性是HEIGHT和WIDTH,分别表示图形的高和宽。通过这两个属性,可以改变图形的大小,如果没有设置,图形按原大显示:
    <IMG SRC="flowers0.jpg" width="200" heigth="100">
    一些常用特效:


    哎...今天够累的,签到来了5...
  • TA的每日心情

    2021-11-16 01:32
  • 签到天数: 1 天

    [LV.1]初来乍到

    50

    主题

    72

    帖子

    568

    积分

    管理员

    金牌会员

    Rank: 9Rank: 9Rank: 9

    积分
    568
     楼主| 发表于 2014-9-2 23:25:05 | 显示全部楼层
    单幅向右移动图片:   


    <marquee direction=right><img src=http://www.8000e.cn/8000e/picture/2004-07-6/1089120972.gif></marquee>


    单幅向左移动图片:   


    <marquee direction=left><img src=http://www.8000e.cn/8000e/picture/2004-07-14/1089801245.gif></marquee>


    单幅向上移动图片:   


    <marquee direction=up><img src=http://www.8000e.cn/8000e/picture/2004-07-14/1089801245.gif></marquee>


    单幅向下移动图片:   


    <marquee direction=down><img src=http://www.8000e.cn/8000e/picture/2004-07-14/1089801245.gif></marquee>


    左右移动的图片:


    <marquee scrollamount=2 behavior=alternate><img src=http://www.mjjq.com/photos/sichuan/sichuan_photos_ao.jpg></marquee>

    居中移动的图片:


    <center><marquee scrollamount=2 behavior=alternate><img src=http://www.mjjq.com/photos/sichuan/sichuan_photos_ao.jpg></marquee></center>

    其中scrollamount=2    后面的2代表移动速度
         behavior=alternate 来回走
                  slide       只走一次
                  scroll      一圈一圈绕着走
       

    给图片加边框:

    <table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00><td><img src=http://web.cn898.net/haoran/tp/lu/lu10.jpg width=500 height=375></td></table>

    说明:

    border="6" 表格边框的厚度,不同浏览器有不同的内定值。

    cellspacing="2" 表格格线的厚度

    cellPadding=1 表格格线内厚度

    borderColor=#841A00 边框色彩



    三.怎样加入文字:

    基本代码:

    <font style=font:50pt face=华文行楷 color=red>文字内容</font>

              也可以用:<font size=4 face=华文行楷 color=red>文字内容</font>

    其中:50pt和size是字体大小,可以调整数值;华文行楷是字体,也可以调整;red是颜色


    一些文字常用特效:

    带阴影的文字:

    < align=center><FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=#b1606c); WIDTH: 100%; COLOR: #ff8000; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书"><B>祝KKTB的朋友们</B></FONT></P>

    移动的文字:

    <marquee direction=left>文字内容基本代码</marquee>    说明: left 向左移动

    <marquee direction=right>文字内容基本代码</marquee> 说明: right 向右移动

    <marquee behavior=scroll>文字内容基本代码</marquee> 说明: scroll 一圈一圈绕着走

    <marquee behavior=slide>文字内容基本代码</marquee>    说明: slide 只走一次

    <marquee behavior=alternate>文字内容基本代码</marquee>    说明:alternate 来回走

    文字上行代码:

    <MARQUEE scrollAmount=1 scrollDelay=1 direction=up height=400>
    <CENTER><FONT color=#ff0066 size=5>如果有一天 你再也找不到我的身影 <BR><BR> 是否 <BR><BR>你会怪我将思念如此轻易的放逐<BR><BR>在你背转身的时候<BR><BR>悄悄的 悄悄的从你身后逃离 <BR><BR> 就此消失在苍茫的尘世间 <BR><BR>再也没有任何的消息与提示<BR><BR></FONT></CENTER></MARQUEE>


    文字上行可以加入背景图片:

    <TABLE borderColor=#cccccc cellSpacing=0 cellPadding=80 width="70%" align=center background=http://61.132.72.53/discuz/attachments/showfile_tYqBlogEkvAH.jpg height=850>
    <TBODY>
    <TR>
    <TD>
    <MARQUEE scrollAmount=1 direction=up><B><FONT face=楷体_GB2312 color=#00ffdc size=4>
    <CENTER>
    < align=center>
    <P>如果有一天 你再也找不到我的身影</P>
    <P>是否</P>
    <P>你会怪我将思念如此轻易的放逐</P>
    <P>在你背转身的时候</P>
    <P>悄悄的 悄悄的从你身后逃离</P>
    <P>就此消失在苍茫的尘世间</P>
    <P>再也没有任何的消息与提示</P>
    </P></CENTER></FONT></B></MARQUEE></TD></TR></TBODY></TABLE>

    文字特效:

    由中间向两边移动的文字和图片代码如下

    <CENTER><FONT face=隶书 color=#44e7a0 size=6>
    <MARQUEE width=222 height=50><IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif">向两边移动的文字和图片<IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif"></MARQUEE></FONT>
    <FONT face=隶书 color=#16ac6b size=6>
    <MARQUEE direction=right width=222 height=50><IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif">片图和字文的动移边两向<IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif"></MARQUEE></FONT></CENTER>

    由两边向中间移动的文字和图片代码如下

    <CENTER><FONT face=隶书 color=#44e7a0 size=6>
    <MARQUEE direction=right width=222 height=50><IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif">片图和字文的动移间中向<IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif"></MARQUEE></FONT>
    <FONT face=隶书 color=#16ac6b size=6>
    <MARQUEE width=222 height=50><IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif">向中间移动的文字和图片<IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif"></MARQUEE></FONT></CENTER>


    百叶窗效果:

    <CENTER>
    <MARQUEE scrollAmount=2 width=80 height=87 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=汉鼎繁中变 color=#ffff00>美 <IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif"></FONT></B></MARQUEE>
    <MARQUEE scrollAmount=2 width=80 height=87 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=汉鼎繁中变 color=#ffff00>图<IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif"></FONT></B></MARQUEE>
    <MARQUEE scrollAmount=2 width=80 height=87 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=汉鼎繁中变 color=#ffff00>传 <IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif"></FONT></B></MARQUEE>
    <MARQUEE scrollAmount=2 width=80 height=87 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=汉鼎繁中变 color=#ffff00>情 <IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif"></FONT></B></MARQUEE></CENTER>

    漂动的图片或文字:

    <div style="position:absolute;top:300;left:180"><marquee behavior=alternate scrollamount=5 direction=up height="6600"><marquee direction=left scrollamount=2 behavior=alternate width=588><img src=http://hisen.myrice.com/anibase/mark/welcome/welcome56.gif></marquee></marquee></div>

    height="6600":漂动图片的运行高度 其值可自由设定

    width=588 :图片在网页中的运行宽度

    其实你仔细看看,文字无非就是字体,大小和颜色而已.大家可以试着用上面的代码玩玩.


    四.加入Flash特效:

    基本代码:

    <embed src=http://hlm.nease.net/swf/red/cloud.swf></embed>


              或者:<EMBED SRC=地址     width=275 height=200>     (这是加入了大小限制)

    常用特效:

    在图片上采用透明FLAH:

    <center><TABLE cellSpacing=2 cellPadding=2 border=10 bordercolor=#84B98D background=图片地址><TBODY><TD><EMBED src=透明Flash网址 width=500 height=375 type=application/x-shockwave-flash quality="high" menu="false" wmode="transparent"></embed></table></center>

    注意:长和宽的设定要根据图片的实际大小来设定.


    五.插入背景音乐:

    背景音乐(适合 mid wma等格式)
    <bgsound src="音乐网址" Loop=-1></bgsound>

    音频(适合MP3 WMA RM等很多格式)
    代码如下:
    <embed src="音乐网址" type=audio/x-pn-realaudio-plugin controls=ControlPanel,StatusBar AutoStart=true Loop=true width=0 height=0></embed>

    视频
    <embed src="视频网址" type=audio/x-pn-realaudio-plugin controls=imagewindow,ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=400></embed>


    说明:

    AutoStart=true 表示是否要音乐文件传送完就自动播放,TRUE是要,FALSE是不要,默认为true,
    Loop=true 表示设定播放重复次数,LOOP=3表示重复3次,true表示无限次播放,FALSE播放一次即停止。
    width=宽度 height=高度 可以设定控制播放器面板的大小,如果都设置为0就可以把播放器隐藏了





    六.经常用的两个特效:

    有时候我们发的帖子显示不完全,有的是因为屏幕分辨率的原因,比如800*600或1024*768    但是更多的是没有采用下面的宽屏帖子编辑:


    宽屏帖子编辑:

    注意:发表前,一定要取消<自动修正>,否则,就没有宽屏了.

    其实只要改第一层表格就可以了

    <TABLE id=table1 style="LEFT: -220px; WIDTH: 980px; POSITION: relative; TOP: 90px" cellSpacing=30 align=center background=http://bbs.xxjy.net/UploadFile/2004-10/20041015163118872.jpg>
    <TBODY>
    <TR>
    <TD>


    WIDTH: 980px;     这是外框尺寸的大小,可以根据需要自由调整数字.

    "LEFT: -220px;      增减这个数字,可以调节帖子是否居中.

    其中的图片地址是控制边框的颜色,可以根据需要进行更换.


    另一个特效是透明flash多层叠加:

    <CENTER>
    <TABLE cellSpacing=8 cellPadding=1 width=420 align=center background=http://www.cn898.net/bg/x/1/back_78.gif border=1 table>
    <TBODY>
    <TR>
    <TD><EMBED align=right src=http://mailimg-fs.hanmail.net/fl/effect/19/e-fall2.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high"><EMBED align=right src=http://www.cn898.net/bg/fh/3/1.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high"><EMBED align=right src=http://image2.sina.com.cn/dongman/f/2002-05-20/1_55-4-248-235_20020520133331.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high"></TD></TR></TBODY></TABLE></CENTER>


    上面就是一个HTML帖子的基本内容,以上所写的所有代码中的图片,flash,音乐的链接,大家可以自由替换成自己喜欢的,然后一段代码一段代码自己试试,看着好像很复杂的代码,其实你根本不用专门去学HTML语言,只要简单套用就可以了,不过只是修改其中的链接和文字而已.~~~~~呵呵.~~~~

      提供大家一个可以在线编辑的地方:

      在线WEB页制作器:
    在线WEB页制作器:

      http://www.baron.com.cn/javascript/dai/dai7.htm
    [/td][/tr][/table]
    哎...今天够累的,签到来了5...
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|九零白度

    GMT+8, 2025-3-15 03:11 , Processed in 0.531250 second(s), 38 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表