五常信息网(五常论坛)

 找回密码
 立即注册
搜索
查看: 2747|回复: 23
打印 上一主题 下一主题

一步一步学代码---结 束 语[连载24]

[复制链接]

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

跳转到指定楼层
楼主
发表于 2008-7-4 20:42:13 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
一步一步学代码---结 束 语[连载24]
[ 录入者:没起名 | 时间:2007-09-28 06:04:12 | 作者:没起名 个人文集 | 来源: | 浏览:54次 ]

 

结 束 语

    首先,如果你不是一开始就打开这个结束语,那么,我非常想知道你到底学的怎么样——当你看完一个教程,如果什么都没学到,我会非常失望的。这说明我及我写的教程对朋友们并没多大帮助,白白地费了论坛的有限空间!

    在论坛做HTML帖子是一项颇具挑战性的创作活动。比起建立一个HTML页面而言,做帖的受限性更大,我们可以认为,做帖子与戴着脚镣跳舞没什么两样。在局限太多的环境下以完美的形式艺术地将你的思想和意志展现出来,没有一定的功底是难以完成的。为此,本教程更大程度上着重于对HTML语法的介绍和技术的剖析,读者在阅读每一节的时候应该能够感受到这一点,同时也极可能觉得教程的趣味性程度不够,有点枯燥——这是没办法的,语法和技术,开始接触时就这样,只有当你掌握了,你才领略到其中的味道。或许你需要再次阅读其中的某些内容,你会发现还有意外的收获。

    我的这个教程并非完美,但对于抱着做好论坛帖子这一目的的读者来说,它应该是很有用的。各位如果觉得教程有需要修正或补充、增加的地方,请给留言,我将视情况作些必要的修改。

    本教程在编写过程中参考过诸多资料,因过于零散,不便一一罗列出来,在此,谨向这些资料的作者表示感谢!同时感谢关心与支持本教程的各位朋友!

    下面也把我做帖的一些体会发出来,仅供朋友们参考:

    一、选择一款好用的HTML编辑器。

    尽管你可能对代码非常熟练,仍然建议使用HTML编辑器,一方面,可以事半功倍、减少代码的出错机率,另一方面,可以边编写帖子边查看效果以便随时更改不如意的地方。编辑程序的版本不要太低,比如,FrontPage2000尽管很优秀,但它未集成代码编辑环境下的自动显示和补齐代码功能,对一些标签的代码自动调整也常常令帖子面目全非,而FrontPage2003则是相当不错的,功能齐全,并有代码标错功能(以非常显眼的颜色将有错误的代码区域标识出来),非常贴切用户。DreamWaver的新版本则整合了图片处理功能,比如,用一张图片做表格的背景,可以通过动动鼠标、输入数字,轻而易举地将此图片割开(当然你需要上传被割开的图片才能在帖子中使用),它还集成有图片的简单处理,且,如果安装了与之配套的兄弟软件,它就更加十全十美了。总之,编辑器不必安装太多,有一款用得上手的就行了。

    二、如果习惯了在线编写帖子,请编写完一组完整的代码后再切换到Design编辑环境预览,否则论坛系统的自动填充功能会将你的代码弄得乱七八糟,极可能难以挽救。对于需要移位的帖子,在编写时先不要使用移位代码,待帖子编写完毕并检查无误了,再加入移位代码。有音频的影视、音乐代码也尽量在最后再放上去,因为,一旦放了音乐之类的代码上去,如果多次切换到Design环境,音乐会同时播放,重唱一样的音乐会弄得你难以适应。

    三、表格的居中,尽量不要使用其他的代码来令其对齐,而是使用表格的对齐属性代码来完成,在table代码里使用align=对齐数值。这是一个好习惯,也会减少废码的出现——当使用p、div或center之类的标签对齐表格时,系统通常会在代码里生成大量的其他代码,有时根本无法人为地控制。单一列的表格,也没有必要给td赋宽度值,因为那是没有必要的,它总要占满表格的宽度(前提是表格已经定义的宽度)。

    四、做帖时,对帖子所使用到的图片尺寸尽量做到心中有数。比如,你要用表格背景图片方式发图,那么,表格的高与宽必须与图片的尺寸一致。而Flash影片、WMP和RP的播放界面尺寸,也应该在设置的时候考虑到表格的总体宽度。

    五、没有影像的音频文件,其播放界面不要设置太大的高度,在embed标签里,WMP的高度45个象素最合适,RP在80上下就可以了。当需要隐藏播放界面时,请最好不用将width和height设置为0,因为那不是真正的隐藏,好的方法是设置hidden值为true。

    六、当使用img形式发图时,你得根据论坛的情况设置装载有图片的表格的宽度。多数论坛会设置了一组JS代码来处理图片的宽度,即当图片的宽度大于300个象素时,图片就以300个象素显示。有时,一个论坛当时可能是这样的设置,往后又是那样的设置,也需要我们充分考虑到。

    七、永远是在有了主题和准备好素材后再做帖子,千万别强迫自己做帖。

    八、不要老依赖别人的帖子代码,因为,这样的话,你的创作能力永远得不到发挥,你只是沿着别人走过的路再走一回而已。

    九、在自己的硬盘里建立一个文件夹,此文件夹下又建立若干子文件夹,当发现有好的素材,就分门别类地保存好,有条件的,能用得着的就上传,并用一个文件记录好它们的URL,甚至,为了更方便,不妨在本地硬盘建立一个HTML页面,用绝对路径显示这些资源的真实面目。

    十、对于那些优秀的已经发布了的帖子要有个备份,建议修改一下代码,以相对路径将所有资源保存在本地磁盘,这样,当帖子借用的资源链接失效后,你仍然有补救的余地。

    十一、做帖子,特别是音画贴,是个很辛苦的事情。要有耐心、细心和恒心。尽量不要“半途而废”,坚持下去,会有收获的!

    祝朋友们快乐、幸福!

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

沙发
 楼主| 发表于 2008-7-4 20:42:25 | 只看该作者
一步一步学代码---前言[连载1]
[ 录入者:没起名 | 时间:2007-09-13 00:09:30 | 作者:没起名 个人文集 | 来源: | 浏览:69次 ]

一步一步学代码

教材制作:没起名

前 言

    在网上经常见到很多精彩漂亮的网页和贴图。这些佳作都是用各种代码和软件编辑出来的。很想学一点,可是看教材头就晕,入门难呵!后来采用从简入手,边学边测试,才学到一点点东东。现在整理发出来,仅供初学HTML代码的朋友参考。

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

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

<FONT face=隶书 color=#ff0000 size=7>

油纸伞论坛

</FONT>

显示结果:

油纸伞论坛

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

<FONT face=隶书 color=#ff0000 size=7>

油纸伞论坛

</FONT>

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

    实际操作时上述三行可连在一起为一行:

 <FONT face=隶书 color=#ff0000 size=7>油纸伞论坛</FONT>

    其中,我们可以改动的只有字体隶书 字的颜色#ff0000字号大小7和文字内容油纸伞论坛)。其它是固定的!
     

    关于字体,论坛不同,所支持的字体也个不一样,点发贴框上面的“字体”就可看出该论坛能显示的字体;
     

    关于字的颜色,可以查“颜色代码表”,以后将给出;

    关于字号大小,本论坛为1--7。

    当然,若只涉及这些,也可以用发话框上面的工具来完成。上面只是为说明代码而举的一个例子!

    如何发代码贴?若要输入论坛默认之外的文字怎么办?下面依例说明:

欢迎您!一步一步学HTML代码。

代码;

<font style=font:26pt face=华文行楷 color=#0000ff> 欢迎您!一步一步学HTML代码。</font>

你先复制上面的代码(红色部分)

一、“发表帖子”或“回复主题”;

二、点发话框下面的“代码”选项;
     

三、把代码复制进去,点框下面的“编辑”标签。在发话框里可以看到你发帖的效果,可以在这里修改;

四、若再点“代码”也可以在代码下修改代码;

五、满意后点“编辑”,而后点“发表”或“回复”。OK!

试试吧。

试试吧。

  代码说明:26 为字的大小;华文行楷 为字体#0000ff
         
为字的颜色。以上可改成你要的,其它的不动,

  你依次把他们改成56、华文琥珀、  #ee3d11再试一下!


回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

板凳
 楼主| 发表于 2008-7-4 20:42:42 | 只看该作者
一步一步学代码---文字处理(文字设置)[连载2]
[ 录入者:没起名 | 时间:2007-09-13 00:11:14 | 作者:没起名 个人文集 | 来源: | 浏览:69次 ]

 

一  文字处理

    1 文字设置


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

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

文字设置的一组代码:

<font style=font:30pt face=隶书 color=#ff0000>油纸伞论坛</font>

显示效果如下:
油纸伞论坛

三要素改变了,显示效果就不同。

<font style=font:40pt face=华文新魏 color=#00ff00 >油纸伞论坛</font>

显示效果如下:

油纸伞论坛


<font style=font:80pt face=华文彩云 color=#FF00FF>油纸伞论坛</font>

显示效果如下:

油纸伞论坛

   

常用字体

宋体 黑体 楷体_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

更多颜色代码参见:

http://www.ezsell.com.tw/aseip_folder/color2.htm

http://www.gwwwqns.com/index.asp?xAction=xReadNews&NewsID=161

 练习

    按个人爱好设置文字三要素,显示出你用代码做的文字。并给出你所用的全部代码。

 注意

    1 若显示代码而不是代码显示出的结果,代码必须在发贴编辑框内输入。不能在点了HTML标签后输入!

    2 若没装所设置的字体,论坛默认为宋体;

    3 你可以把(文字设置的一组代码)复制到记事本去,并保存成一个文件。以后的类似代码也逐渐增添在本文件里,以便套用。最好不要把文本保存到C盘,因为万一重装系统时,不小心就丢了!

教材编写:没起名

熟能生巧,要多加练习哦!

 

回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

地板
 楼主| 发表于 2008-7-4 20:43:43 | 只看该作者

一步一步学代码---文字处理(文字显示位置的控制)[连载3]
[ 录入者:没起名 | 时间:2007-09-13 23:14:00 | 作者:没起名 个人文集 | 来源: | 浏览:56次 ]

 

一  文字处理

    2 文字显示位置的控制

文字显示位置分别为:

水平方向(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>

显示效果如下: 

向右对齐

应用举例
 

祝你进步


祝你幸福!





没起名

 
代码如下:
<CENTER>
<TABLE borderColor=olive height=425 width=555 background=http://cache19.51.com/photo/6c/ed/huang8168/200511251226574.jpg border=8>
<TBODY>
<TR>
<TD vAlign=top align=middle><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>没起名</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),方便易用。

应用举例:
居左靠顶的代码
 
代码如下:
 
<CENTER>
<TABLE borderColor=olive height=350 width=480 background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg border=18>
<TBODY>
<TR>
<TD vAlign=top align=left><FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#fff000><B>居左靠顶的代码<BR></FONT></B></TD></TR></TOBDY></TBODY></TABLE></CENTER><BR><BR>
 
文字(或图片)放置的地位,
还可以用空格和空行(BR)等办法调整。
 
 练习:
    1 按个人爱好按水平方向即左中右的代码、垂直方向靠顶和靠底的代码,显示出你用代码做的文字。并给出你所用的全部代码。
    1 按个人爱好按水平方向即左中右的代码、垂直方向靠顶和靠底的代码,显示出你用代码做的文字。并给出你所用的全部代码。
          

    2 在一个图片上添加你要的文字及显示位置。

 注意

    在所选的图片上点右键--属性,出来的画面上有图片的地址和图片的宽和高的尺寸,这些要记下!用你的图片尺寸代替上面第一个“应用举例”中的宽度(555)和高度(425);用你的图片地址代替其中的ttp://cache19.51.com/photo/6c/ed/huang8168/200511251226574.jpg
           

用你的文字代替其中的“祝你进步”等。其余可不动(套用!)

教材编写:没起名

熟能生巧,要多加练习哦!

 

回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

5#
 楼主| 发表于 2008-7-4 20:43:54 | 只看该作者

一步一步学代码---文字处理(文字移动属性的设置)[连载4]
[ 录入者:没起名 | 时间:2007-09-13 23:16:34 | 作者:没起名 个人文集 | 来源: | 浏览:65次 ]

 

一  文字处理

    3 文字移动属性的设置

<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>
文字从下向上移!!!</font></marquee>

显示效果:

文字从下向上移!!




文字来回走代码:

<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>
移动速度设置数值小就走得慢!!</font></marquee>


显示效果:


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

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

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


显示效果:


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






文字上下移动代码:


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


 

文字上下移动

应用举例:文字图片走四方



                  欣赏文字图片走四方

代码如下:

<DIV align=left>
<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 style="WIDTH: 414px; HEIGHT: 132px" scrollAmount=3 behavior=alternate width=414><IMG src="http://www.dabaoku.com/gif/164/gif001.gif"> <FONT color=#fff000 size=3><B>欣赏文字图片走四方</B></FONT></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE></DIV>

 

 练习:1 选择你要的文字按从右向左移、从左向右移、从上向下移、从下向上移、文字来回走等显示出你用代码做的文字。并给出你所用的全部代码。

        2  用你在论坛里的头像图片(或其它小图片)并在图片后面加上你的做个“文字图片走四方”的图。

 注意:要更改“应用举例”中的图片地址,若有需要还要更改相应的尺寸!试验一下吧。

熟能生巧,要多加练习哦!

回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

6#
 楼主| 发表于 2008-7-4 20:44:03 | 只看该作者

一步一步学代码---文字处理(几种特殊字)[连载6]
[ 录入者:没起名 | 时间:2007-09-15 17:42:58 | 作者:没起名 个人文集 | 来源: | 浏览:60次 ]

 

一  文字处理

    5 几种特殊字

     (1)颜色“渐变”的文字

    我们虽然可以用字的颜色代码社顶字的颜色,达到渐变的效果。但当文字较多时,这样就很麻烦。先举个例子:

对于这15个字(符号),我们很难直接用颜色代码规定每个字的颜色。但网上给我们提供了操作十分简便小软件(彩色字)现在上传于此,可下载(30K)

使用方法:

    1 将“欢迎朋友们参与一步一步学代码!”用鼠标选定(点着鼠标从头向后拉),而后用键盘,按“Ctrl+C”双键(作用是复制,软件操作不支持正常的复制、粘贴!);

    2  打开系统里的“彩色字”软件,在框里按“Ctrl+V”双键(粘贴),这样“欢迎朋友们参与一步一步学代码!”就被输入到画面了。

    当然也可以直接打开该软件,在里面直接输入所要的文字!

    3 点画面下面的“起始颜色”选定后点下面的“确定”;再点“结束颜色”并确定;

    4 点画面右下角的“转换”,这样框里就已将字的颜色一一设定了,并全部被选上;

    5 按“Ctrl+C”,回到论坛发话框,按“Ctrl|+V”;

    6  若要改变字的大小及字体,这时可更改。改好后发即可!

    (2)彩字生成

       很多类型的彩色字,网上 http://www.igogo8.com/ 处直接给出了“在线生成”。

    举例如下:

图片点击可在新窗口打开查看

 

使用方法:

    1 打开  http://www.igogo8.com/

    2 若当前页没有合适的字样,就点左下角的“更多字样”,在上面的白框内输入文字,而后点上你要选的字样,再点白框后面的“生成”;

    3 稍等一会,画面上将出来效果字及它的网上地址(就在效果字的下面!);

    4 可以直接复制效果字,也可以用它的地址发表。

   (3)特效字

   如何给下面的这几个字加上一些特殊效果,使其更加漂亮呢?

很漂亮的特效字

   先看下面的例子:

很漂亮的特效字

     代码如下:

<TABLE cellSpacing=0 cellPadding=0 align=center background=http://www.dabaoku.com/gif/168/gif074.gif border=0>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699">
<TABLE align=center bgColor=#fcf3f4>
<TBODY>
<TR>
<TD align=middle>
<P align=center><FONT style="FONT-SIZE: 40pt" face=华文新魏 color=#336699>很漂亮的特效字</FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

     这里只是给文字加了个背景,即代码里的:http://www.dabaoku.com/gif/168/gif074.gif

把这个背景图片显示为:

 

注意:代码中的bgColor=#fcf3f4要和自己帖子的背景颜色或背景图一样(有图案的不行)就可。

更换背景图(其它不变),效果也会随之发生变化!如:


很漂亮的特效字

这里只将背景换成了:
http://tech.china.com/zh_cn/home4u/sucai/gifanimation/line/0154.gif


跟着蝴蝶学写字


换成了:
http://www.dabaoku.com/gif/168/gif062.gif

    给出几个 背景图片

    (4)艺术字

    在WORD里有“艺术字”:打开WORD,点上面菜单的“工具”

下的“自定义”,在出来的画面里 点上“命令”后的左边的“绘图”。这是WORD画面的最下面将出来一写选项,其中就有“艺术字”按扭。其它操作我不再罗嗦了!

    应该指出的是:如何将用WORD生成的艺术字运用到论坛里呢?

    方法可以这样:生成艺术字后,在QQ上用“捕捉屏幕”将字抓住,发到QQ的对话框的下面框内,而后右键---另存,将其保存到自己机子里,最后到论坛将该图片上传。这样,论坛里就有了该艺术字的图片和地址了。下面复制该图片或用其地址即可。

    另外还可以用软件“eWebEditor”制作艺术字。这里不再叙述!

 

练习:1 制作颜色“渐变”的文字

      2 到这里 http://www.igogo8.com/ 做艺术字

      3 选用背景做特效字

      4 用WORD生成艺术字(不作要求!)

注意:关于文字处理,暂告一段落,以后还会涉及!

        熟能生巧,要多加练习哦!

 

回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

7#
 楼主| 发表于 2008-7-4 20:44:11 | 只看该作者

一步一步学代码---文字处理(文字处理小结)[连载7]
[ 录入者:没起名 | 时间:2007-09-15 17:44:51 | 作者:没起名 个人文集 | 来源: | 浏览:47次 ]
[文字处理]小结
 
   
      现将[文字处理]部分小结如下,看看你掌握了哪些?若还有生疏的,可要加班补上呦!红色部分是可改动的。
 
      一  文字设置三要素:
 
      格式如下:
      <font style=font:30pt face=隶书 color= #ff0000>再学习</font>
    字体大小:style=font:30pt  字体:face=隶书  字的颜色:color=#ff0000
 
    二  文字显示位置的控制
 
    水平方向(align):left(左对齐) CENTER(居中) RIGHT(右对齐)
    垂直方向:top(靠顶) bottom(靠底)
    格式如下:
    <p align=left><font style=font:15pt face=黑体 color=#fff000>向左对齐</font></P>
 
    三 文字移动属性的设置
 
    基本格式:<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 behavior=alternate scrollAmount=8><font style=font:15pt face=黑体 color=#fff000>文字来回走耶!</font></marquee>
   
    四 文字编辑几种常用代码语句
 
<BR> 换行标记:一个<BR>令文字显示于下一行,二个<BR>留一空白行。
<p>文字编辑 段落标记:令文字之间留一空白行。
用键盘的空格可令文字之间留一空隔。
<b>令字体加粗</b>(双标签)
<u>令文字加上底线</u>(双标签)
<CENTER> 居中:令字、画、表格等显示于中间</CENTER>(双标签)

    五 特殊字
   
    颜色渐变的文字  彩字生成文字  特效字
 
 
没起名祝愿你获得好成绩!
 






回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

8#
 楼主| 发表于 2008-7-4 20:44:19 | 只看该作者

一步一步学代码---图片加工(图片标签)[连载8]
[ 录入者:没起名 | 时间:2007-09-17 06:24:06 | 作者:没起名 个人文集 | 来源: | 浏览:55次 ]

 

二  图片加工

    1 图片标签

    把网上现成的图片拿来发到论坛,是论坛里最容易的事情。原因就是发图太简单了。复制→粘贴就可以发一张图片,这是我们论坛的便利。用HTML方式贴图,它的语法也是很简单。

    基本语法:<IMG src=“图片地址”>

    我们看到,img标签没有终止符。其常用参数也不太多,非常容易记住。
          

    src:图片地址在论坛里,建议使用图片的完整地址也就是绝对地址,若是上传到论坛的图片,可以使用相对地址,一般从upload一节开始。

 这时发出的图片默认位于左上角。是最基本、最简单的贴图代码。如:

    代码为:<IMG src=“http://www.gxblk.com/images/qg.jpg”>

    若要使图片居中,只须加居中的命令(前面已讲过)。如:

    代码为:

    <P align=center><IMG src="http://www.gxblk.com/images/qg.jpg"></P>

    如要给图片加个边框,只须加将基本语法改为:

    <img src=“图片地址” border=数值>

其中:

    border:图片的边框。取值范围为正整数,边框颜色不可改变(黑色)。多数论坛里的图片都会链接到自身,当用户点击过它,它的边框颜色通常就是默认的蓝色,故为美观起见,建议设置为0。

如:给加个边框  代码分别如下:

<IMG src="http://bbs.edu-net.cn/bbs/UploadFace/1710_200632515543693004.gif" >

<IMG src="http://bbs.edu-net.cn/bbs/UploadFace/1710_200632515543693004.gif" border=5>

    IMG标签还有其他的参数:

    alt:当鼠标移到图片时弹出的文字。下面是使用效果,请将鼠标指针分别移到图片上看看发生什么:

没起名的签名

代码如下:

<IMG alt=没起名的签名 src="http://bbs.edu-net.cn/bbs/UploadFace/1710_200632515543693004.gif">
            

    hspace、vspace:图文混排时图片与左右、上下物件的距离。取值为正整数。

    width、height:图片的宽度、高度。如果图片的高与宽未做设置,系统会按照图片的原本高宽显示出来,但不少论坛并非这样,论坛系统嵌入了一组js代码对图片的尺寸进行处理:如果图片的宽度超过300个像素则以300个像素显示,为止设置图片的高度宽度在这些论坛没有意义;也有的论坛支持用户设置,这类论坛就需要我们对一些尺寸不合要求的图片做一下设置了。是的,图片不一定按原来的尺寸显示,可以通过设置width、height值做必要的调整。

举例:把上述的图片加大一倍(原尺寸为width=122 height=96

 
          

代码为

 <IMG height=192 src="http://bbs.edu-net.cn/bbs/UploadFace/1710_200632515543693004.gif" width=244>
          

 也可以只规定图片的宽度(这时其高度由论坛自动调整成原来的宽、高比例)如将上面的代码周的height=192 去掉,其它不变,则和上面的显示效果是一样的。

     将图片的尺寸缩小,与上面类同!

    在论坛里贴单张图片,若不加任何显示范围,图片只显示在论坛帖子所规定的宽度内,若图片的宽度超出范围,则图片右边将显示不全。处理方法将在以后的“全屏显示”中给出! 

 练习:按上面的次序,个人选择个图片做联系吧

熟能生巧,要多加练习哦!

回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

9#
 楼主| 发表于 2008-7-4 20:44:27 | 只看该作者

一步一步学代码---图片加工(在图片内加文字)[连载9]
[ 录入者:没起名 | 时间:2007-09-17 06:26:16 | 作者:没起名 个人文集 | 来源: | 浏览:54次 ]

 

二  图片加工

    2 在图片内加文字

    (1)基本格式

    有的内容在前面已涉及过,现在详细讲解如下。

     前面我们已经知道:

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

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

垂直方向的位置可以用换行<BR>符号处理。

那么,如何在一张图片上加入所要的文字呢?

基本格式为:

<TABLE height=468 cellSpacing=10 cellPadding=10 width=416 background=http://bbs.680.cn/UploadFile/2005-12/200512118361740.gif border=0>
<TBODY>
<TR>
<TD>

 说明:1 输入代码后切换至编辑状态,在编辑状态下打字;

            2 这样输入的文字垂直位置是居中的,左右位置是靠左的(可以用空格调整左右位置!)

    例如居中加上“祝你生日快乐!”为:

祝你你生日快乐!

代码为:

<DIV align=center>
<TABLE height=294 cellSpacing=10 cellPadding=10 width=437 align=center background=http://photo4.hexun.com/p/2007/0106/68038/b_BDD28F4C6DF4BC04839829AE670630CC.jpg border=0>
<TBODY>
<TR>
<TD>
<P align=center><FONT face=隶书 color=#fafa6b size=6>祝你你生日快乐!</FONT></P></TD></TR></TBODY></TABLE></DIV>

     将文字分别放在图片的左上、居中、右下为:


祝你生日快乐!





祝你生日快乐!





没起名

代码为:

<TABLE borderColor=olive height=294 width=437 background=http://photo4.hexun.com/p/2007/0106/68038/b_BDD28F4C6DF4BC04839829AE670630CC.jpg border=0>
<TBODY>
<TR>
<TD vAlign=top align=middle><BR><FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#fff000><B>
<P align=left>祝你生日快乐!</P><BR><BR><BR><BR>
<P align=center>祝你生日快乐!</P><BR><BR><BR><BR>
<P align=right>没起名</P></B></FONT></TD></TR></TOBDY></TBODY></TABLE>

    (2)在图片内加入移动的文字

    (2)在图片内加入移动的文字
          

    这里依靠图片左边、由下向上移动的一段文字为例加以说明。

不理你
 
 
不理你,
 
 
就是不理你!

代码如下:

<TABLE height=533 width=400 background=http://gb.chinabroadcast.cn/mmsource/images/2005/09/06/pa050906046.jpg border=0>
<TBODY>
<TR>
<TD align=middle>
<MARQUEE scrollAmount=2 direction=up height=533>
<DIV align=left><FONT style="FONT-SIZE: 32pt" face=华文新魏 color=red><B>不理你</B> ,</FONT></DIV>
<DIV align=left><FONT face=华文新魏 color=#ff0000 size=7><STRONG>不理你,</STRONG></FONT></DIV>
<DIV align=left><STRONG><FONT face=华文新魏 color=#ff0000 size=7>就是不理你!</FONT></STRONG></DIV></MARQUEE></TD></TR></TOBDY></TBODY></TABLE>
<CENTER></CENTER>

    若使文字居中,在编辑状态下把文字选定,再点框上面的“居中”

即可。

若限定文职上下移动的范围,可改写上面代码中的<MARQUEE scrollAmount=2 direction=up height=533>内的尺寸533。改成333,则为:

不理你
 
 
不理你,
 
就是不理你!

    使文字在图片内左右移动,可参照上面的方法!

    (3)给图片加文字的其它方法

    1)启动Word, 新建一个文档, 点击菜单项“插入/图片/来自文件”, 选定欲转换的图片文件后单击〔插入〕。然后再用文本框或艺术字插入文字,将原图片与插入的文本框或艺术字组合(一定要组合).
直接点击“文件/另存为”, 选择保存类型为“Web页”, 输入文件名及保存路径后单击〔保存〕, 此Word文档便被转换为HTML文件, 同时, 该HTML文件中包含的图片文件也会被转换为JPG或GIF格式。假设转换成的“Web页”的保存文件名为doc1.html, 那么, 在文件doc1.html所在文件夹中有一个名为doc1.files的子文件夹, 转换后的图片文件即保存在此文件夹中, 其文件名为imagexxx.gif或imagexxx.jpg, 至于其格式究竟是GIF格式还是JPG格式, 则由图片的颜色决定, 如果图片是256色以上的, 则转换后的格式为JPG格式, 否则为GIF格式。

    2)用windows自带的画图工具在图片上加文字,方法如下:

开始→程序→附件→画图→文件(菜单栏)→打开→选择需添加图片的名称→打开后回到画图工具→图像(菜单栏)→不透明处理(选中状态和未选状态效果不一样,可以自已试选哪种效果)→点击左工具窗A(菜单栏“查看”下选中“文字工具栏”)→选好加入文字的位置输入汉字→选择菜单栏“文件”下“另存为” →OK

    关于用其它“图片加工软件”给图片加文字的方法,已超出本课程范围,这里不去涉及。

 练习:1 自己选择个图片,按使文字居图片左上、居中、右下加上你的文字;

       3 书写一段文字,使其在图片中动起来。

熟能生巧,要多加练习哦!

回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

10#
 楼主| 发表于 2008-7-4 20:44:37 | 只看该作者

一步一步学代码---图片加工(运动的图片)[连载10]
[ 录入者:没起名 | 时间:2007-09-17 06:27:46 | 作者:没起名 个人文集 | 来源: | 浏览:43次 ]


二  图片加工

    3 运动的图片

    (1)单一图片

     以由下向上运动的图片为例加以说明。

 

代码如下:

<CENTER>
<MARQUEE scrollAmount=2 direction=up height=550 align="center" scrolldely="10">
<CENTER><IMG src="http://img1.qq.com/news/20040606/315742.jpg"></CENTER></MARQUEE></CENTER>

    其实很简单!你只需在选择HTML的情况下,加入以下代码就可以轻松实现。

    注1:图片地址是指图片在网上的真实地址(例如下列图片的地址是:http://www.8q8.cn/UploadFile/2005-12/2005122214231212319.gif) 。

    注2:代码中的参数可以自行设置,最主要的几个参数是:
                

    a.高度(height)-你可以根据图片大小来设置合适的数值;
                

    b.方向(direction)-向上(up);向下(down);向左(left);向右(right).
                

    c.移动速度(srcollamount)写入的数字越大速度越快。
                

    d.滚动延时scrolldely(ms)一般取10
                

    注1:图片地址是指图片在网上的真实地址(例如下列图片的地址是:http://www.8q8.cn/UploadFile/2005-12/2005122214231212319.gif) 。

    注2:代码中的参数可以自行设置,最主要的几个参数是:
                

    a.高度(height)-你可以根据图片大小来设置合适的数值;
                

    b.方向(direction)-向上(up);向下(down);向左(left);向右(right).
                

    c.移动速度(srcollamount)写入的数字越大速度越快。
                

    d.滚动延时scrolldely(ms)一般取10
                

    注1:图片地址是指图片在网上的真实地址(例如下列图片的地址是:http://www.8q8.cn/UploadFile/2005-12/2005122214231212319.gif) 。

    注2:代码中的参数可以自行设置,最主要的几个参数是:
                

    a.高度(height)-你可以根据图片大小来设置合适的数值;
                

    b.方向(direction)-向上(up);向下(down);向左(left);向右(right).
                

    c.移动速度(srcollamount)写入的数字越大速度越快。
                

    d.滚动延时scrolldely(ms)一般取10
                

    注1:图片地址是指图片在网上的真实地址(例如下列图片的地址是:http://www.8q8.cn/UploadFile/2005-12/2005122214231212319.gif) 。

    注2:代码中的参数可以自行设置,最主要的几个参数是:
              

    a.高度(height)-你可以根据图片大小来设置合适的数值;
              

    b.方向(direction)-向上(up);向下(down);向左(left);向右(right).
              

    c.移动速度(srcollamount)写入的数字越大速度越快。
              

    d.滚动延时scrolldely(ms)一般取10
              

    (2)多个图片

    也就是使几个图片连在一起的运动。以图片由右向左运动为例加以说明:

 

 

 代码如下:

<CENTER>
<MARQUEE scrollAmount=2 height=375 align="center" scrolldely="10">
<CENTER><IMG src="http://img1.qq.com/news/20040606/315742.jpg"><IMG src="http://img1.qq.com/news/20040606/315746.jpg"><IMG src="http://img1.qq.com/news/20040606/315710.jpg"><IMG src="http://img1.qq.com/news/20040606/315712.jpg"><IMG src="http://img1.qq.com/news/20040606/315713.jpg"><IMG src="http://img1.qq.com/news/20040606/315736.jpg"><IMG src="http://img1.qq.com/news/20040606/315742.jpg"></CENTER></MARQUEE></CENTER>

     由上面可看出:只是在<CENTER></CENTER>之间添加了几个格式相同而只有地址不同的图片而已!这些图片前后是连着的,若要使其有间隔,这只须在没两个之间加空格就行;若几个图片的高度不一样,这要在每个图片上加上它的高度!

    小技巧:使图片左右相反

原图片:

用了下面的代码后:

<TABLE style="FILTER: fliph" height=460 width=640 align=center background=http://www.imagesite.cn/pic/wsmb0618/40b.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>


    练习:自己选择一个图片,使图片动起来;

          熟能生巧,要多加练习哦!

回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

11#
 楼主| 发表于 2008-7-4 20:44:46 | 只看该作者

如何在图片上加上字

图中如何加入SWF特效:

如何在图片中加入文字?
如何在图片中加入SWF特效?

代码如下:

<TABLE height=300 cellPadding=10 width=500 align=center background=http://bbs.guolan.com/upload/2004813181838.gif border=3 table="0">
<TBODY>
<TR>
<TD>
<DIV align=center><FONT face=楷体_GB2312 color=#c709f7 size=4>如何在图片中加入文字?</FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#c709f7 size=4></FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#1ae66b size=4>如何在图片中加入SWF特效?</FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#1ae66b size=4></FONT
></DIV>
<DIV align=center><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://imgfree.21cn.com/free/flash/51.swf width=470 height=200 type=application/x-shockwave-flash wmode="transparent" quality="high"></EMBED></DIV></TD></TR></TBODY></TABLE>

绿色:是放入特效的位置和格式


双层表框加字 (特效)

天上云欢迎你来到制贴天地学习

代码如下:

<TABLE height=300 cellPadding=10 width=500 align=center background=http://bbs.guolan.com/upload/2004813181838.gif border=3 table>
<TBODY>
<TR>
<TD>
<P align=center><FONT face=隶书 color=#f7f709 size=5>双层表框加字<FONT color=#000000> </FONT><FONT color=#c709f7>(特效)</FONT></FONT></P></TD></TR>
<TR>
<TD height=300>
<DIV align=center><FONT face=楷体_GB2312 color=#33ff00 size=4><FONT color=#309d46>落叶无痕</FONT><FONT color=#e6bd1a>欢迎你来到制贴天地学习</
FONT></FONT></DIV>
<DIV align=center><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://imgfree.21cn.com/free/flash/51.swf width=470 height=200 type=application/x-shockwave-flash quality="high" wmode="transparent"></EMBED></DIV></TD></TR></TBODY></TABLE>

 


 

如何在图片中加入文字?

如何在图片中加入文字?

如何在图片中加入文字?

如何在图片中加入文字?

代码:

<TABLE height=300 cellPadding=10 width=500 align=center background=http://bbs.guolan.com/upload/2004813181838.gif border=3 table="0">
<TBODY>
<TR>
<TD>
<DIV align=center><FONT face=楷体_GB2312 color=#c709f7 size=4>如何在图片中加入文字?</FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#c709f7 size=4></FONT><BR></DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#1ae66b size=4>如何在图片中加入文字?</FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#1ae66b size=4></FONT><BR></DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#ffff00 size=4>如何在图片中加入文字?</FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#ffff00 size=4></FONT><BR></DIV>
<DIV align=center><FONT face=楷体_GB2312><FONT size=4><FONT color=#ffffff>如何在图片中加入文字?
</EMBED></FONT></FONT></FONT></DIV></TD></TR></TBODY></TABLE>

如何在图片中加入文字?

如何在图片中加入文字?

如何在图片中加入文字?

如何在图片中加入文字?

代码如下:

<TABLE height=300 cellPadding=10 width=500 align=center background=http://bbs.guolan.com/upload/2004813181838.gif border=3 table="0">
<TBODY>
<TR>
<TD>
<DIV align=center><FONT face=楷体_GB2312><FONT size=4><FONT color=#ffffff></FONT></FONT></FONT>
<MARQUEE style="WIDTH: 380px; HEIGHT: 84px" scrollAmount=2 direction=up height=84><FONT color=#ff00ff>
<DIV align=center><FONT face=楷体_GB2312 color=#c709f7 size=4>如何在图片中加入文字?</FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#c709f7 size=4></FONT><BR></DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#1ae66b size=4>如何在图片中加入文字?</FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#1ae66b size=4></FONT><BR></DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#ffff00 size=4>如何在图片中加入文字?</FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#ffff00 size=4></FONT><BR></DIV>
<DIV align=center><FONT face=楷体_GB2312><FONT size=4><FONT color=#ffffff>如何在图片中加入文字?</FONT></FONT></FONT></DIV></FONT></MARQUEE></DIV></TD></TR></TBODY></TABLE>



左右移动的字!

左右移去的字!

左右移去的字!

<TABLE height=300 cellPadding=10 width=500 align=center background=http://bbs.guolan.com/upload/2004813181838.gif border=3 table="0">
<TBODY>
<TR>
<TD></EMBED><BR><BR>
<DIV align=center>
<MARQUEE style="WIDTH: 302px; HEIGHT: 100px" scrollAmount=2 direction=right height=100><FONT color=#ff00ff>
<P align=center><FONT face=隶书 color=#0000ff size=5>左右移动的字!</FONT></P>
<P align=center><FONT face=隶书 color=#ff0000 size=5><B>左右移去的字!</B></FONT></P>
<P align=center><FONT face=隶书 color=#00ffff size=5>左右移去的字!</FONT></P>
</FONT></P></FONT></MARQUEE></DIV></TD></TR></TBODY></TABLE>

 

 

 

 

 

 

 夏

玉女绽笑倚红桥

夏雨纷飞怀玉娇

千里蛙鸣震耳畔

满目花苞顷刻香

 夏

玉女绽笑倚红桥

夏雨纷飞怀玉娇

千里蛙鸣震耳畔

满目花苞顷刻香

 


 

 

     春               

春风似指佛面清

飘燕疾飞啄新泥

愚人梦里偷庸耳

欲听绿叶叫枝头

 

 

     春               

春风似指佛面清

飘燕疾飞啄新泥

愚人梦里偷庸耳

欲听绿叶叫枝头

 

 

 


 

 

 秋

群燕南飞遮天日

湖水凌波悄无声

秋露滴滴从天降

刹时遍野现金黄

 秋

群燕南飞遮天日

湖水凌波悄无声

秋露滴滴从天降

刹时遍野现金黄

 


 

 

 冬

冬雪嘤嘤降风尘

我自孤立觉冰清

万物映日银光闪

独有灵狐烙梅花

 冬

冬雪嘤嘤降风尘

我自孤立觉冰清

万物映日银光闪

独有灵狐烙梅花

 

 

 

  用应用代码给把图片换成自己喜欢的网址,把文字换成自己的就可以了.

 

<P align=center>&nbsp;</P>
<P align=center>
<TABLE style="WIDTH: 300px; HEIGHT: 359px" height=509 width=773 align=center background=http://qxh.36588.cn/uploadfile/200563185620544.jpg border=0>
<TBODY>
<TR>
<TD align=middle>
<MARQUEE style="WIDTH: 494px; HEIGHT: 273px" scrollAmount=2 direction=up height=273>
<CENTER><FONT style="FONT-SIZE: 36pt" face=隶书 color=red><FONT face=宋体>&nbsp;</FONT>
<P align=center>
<P align=center><FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=FF0033); WIDTH: 413px; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书; HEIGHT: 139px">
<DIV align=left>
<P><FONT face=宋体></FONT></P>
<DIV align=center>
<P align=center>&nbsp;冬</P>
<P align=center>冬雪嘤嘤降风尘</P>
<P align=center>我自孤立觉冰清</P>
<P align=center>万物映日银光闪</P>
<P align=center>独有灵狐烙梅花<BR></P></DIV></FONT></DIV>&nbsp;</FONT></CENTER></MARQUEE></TD></TR></TOBDY></TBODY></TABLE></P>
<P align=center><BR></P>

回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

12#
 楼主| 发表于 2008-7-4 20:45:52 | 只看该作者
e
回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

13#
 楼主| 发表于 2008-7-4 20:46:02 | 只看该作者
r4
回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

14#
 楼主| 发表于 2008-7-4 20:46:11 | 只看该作者
e
回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

15#
 楼主| 发表于 2008-7-4 20:47:18 | 只看该作者
e
回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

16#
 楼主| 发表于 2008-7-4 20:47:41 | 只看该作者
xc
回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

17#
 楼主| 发表于 2008-7-4 20:48:02 | 只看该作者
d
回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

18#
 楼主| 发表于 2008-7-4 20:48:22 | 只看该作者
d
回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

19#
 楼主| 发表于 2008-7-4 20:48:34 | 只看该作者
d
回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

20#
 楼主| 发表于 2008-7-4 20:48:45 | 只看该作者
d
回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

21#
 楼主| 发表于 2008-7-4 20:49:10 | 只看该作者
d
回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

22#
 楼主| 发表于 2008-7-4 20:49:18 | 只看该作者
d
回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

23#
 楼主| 发表于 2008-7-4 20:49:28 | 只看该作者
d
回复 支持 反对

使用道具 举报

37

主题

336

帖子

20万

积分

五常终身荣誉居民

Rank: 12Rank: 12Rank: 12

积分
204256
金钱
62877
威望
71362
经验值
69339
魅力
0
精华
3

论坛元老

24#
 楼主| 发表于 2008-7-4 20:49:36 | 只看该作者
d
一步一步学代码---结 束 语[连载24]
[ 录入者:没起名 | 时间:2007-09-28 06:04:12 | 作者:没起名 个人文集 | 来源: | 浏览:54次 ]

 

结 束 语

    首先,如果你不是一开始就打开这个结束语,那么,我非常想知道你到底学的怎么样——当你看完一个教程,如果什么都没学到,我会非常失望的。这说明我及我写的教程对朋友们并没多大帮助,白白地费了论坛的有限空间!

    在论坛做HTML帖子是一项颇具挑战性的创作活动。比起建立一个HTML页面而言,做帖的受限性更大,我们可以认为,做帖子与戴着脚镣跳舞没什么两样。在局限太多的环境下以完美的形式艺术地将你的思想和意志展现出来,没有一定的功底是难以完成的。为此,本教程更大程度上着重于对HTML语法的介绍和技术的剖析,读者在阅读每一节的时候应该能够感受到这一点,同时也极可能觉得教程的趣味性程度不够,有点枯燥——这是没办法的,语法和技术,开始接触时就这样,只有当你掌握了,你才领略到其中的味道。或许你需要再次阅读其中的某些内容,你会发现还有意外的收获。

    我的这个教程并非完美,但对于抱着做好论坛帖子这一目的的读者来说,它应该是很有用的。各位如果觉得教程有需要修正或补充、增加的地方,请给留言,我将视情况作些必要的修改。

    本教程在编写过程中参考过诸多资料,因过于零散,不便一一罗列出来,在此,谨向这些资料的作者表示感谢!同时感谢关心与支持本教程的各位朋友!

    下面也把我做帖的一些体会发出来,仅供朋友们参考:

    一、选择一款好用的HTML编辑器。

    尽管你可能对代码非常熟练,仍然建议使用HTML编辑器,一方面,可以事半功倍、减少代码的出错机率,另一方面,可以边编写帖子边查看效果以便随时更改不如意的地方。编辑程序的版本不要太低,比如,FrontPage2000尽管很优秀,但它未集成代码编辑环境下的自动显示和补齐代码功能,对一些标签的代码自动调整也常常令帖子面目全非,而FrontPage2003则是相当不错的,功能齐全,并有代码标错功能(以非常显眼的颜色将有错误的代码区域标识出来),非常贴切用户。DreamWaver的新版本则整合了图片处理功能,比如,用一张图片做表格的背景,可以通过动动鼠标、输入数字,轻而易举地将此图片割开(当然你需要上传被割开的图片才能在帖子中使用),它还集成有图片的简单处理,且,如果安装了与之配套的兄弟软件,它就更加十全十美了。总之,编辑器不必安装太多,有一款用得上手的就行了。

    二、如果习惯了在线编写帖子,请编写完一组完整的代码后再切换到Design编辑环境预览,否则论坛系统的自动填充功能会将你的代码弄得乱七八糟,极可能难以挽救。对于需要移位的帖子,在编写时先不要使用移位代码,待帖子编写完毕并检查无误了,再加入移位代码。有音频的影视、音乐代码也尽量在最后再放上去,因为,一旦放了音乐之类的代码上去,如果多次切换到Design环境,音乐会同时播放,重唱一样的音乐会弄得你难以适应。

    三、表格的居中,尽量不要使用其他的代码来令其对齐,而是使用表格的对齐属性代码来完成,在table代码里使用align=对齐数值。这是一个好习惯,也会减少废码的出现——当使用p、div或center之类的标签对齐表格时,系统通常会在代码里生成大量的其他代码,有时根本无法人为地控制。单一列的表格,也没有必要给td赋宽度值,因为那是没有必要的,它总要占满表格的宽度(前提是表格已经定义的宽度)。

    四、做帖时,对帖子所使用到的图片尺寸尽量做到心中有数。比如,你要用表格背景图片方式发图,那么,表格的高与宽必须与图片的尺寸一致。而Flash影片、WMP和RP的播放界面尺寸,也应该在设置的时候考虑到表格的总体宽度。

    五、没有影像的音频文件,其播放界面不要设置太大的高度,在embed标签里,WMP的高度45个象素最合适,RP在80上下就可以了。当需要隐藏播放界面时,请最好不用将width和height设置为0,因为那不是真正的隐藏,好的方法是设置hidden值为true。

    六、当使用img形式发图时,你得根据论坛的情况设置装载有图片的表格的宽度。多数论坛会设置了一组JS代码来处理图片的宽度,即当图片的宽度大于300个象素时,图片就以300个象素显示。有时,一个论坛当时可能是这样的设置,往后又是那样的设置,也需要我们充分考虑到。

    七、永远是在有了主题和准备好素材后再做帖子,千万别强迫自己做帖。

    八、不要老依赖别人的帖子代码,因为,这样的话,你的创作能力永远得不到发挥,你只是沿着别人走过的路再走一回而已。

    九、在自己的硬盘里建立一个文件夹,此文件夹下又建立若干子文件夹,当发现有好的素材,就分门别类地保存好,有条件的,能用得着的就上传,并用一个文件记录好它们的URL,甚至,为了更方便,不妨在本地硬盘建立一个HTML页面,用绝对路径显示这些资源的真实面目。

    十、对于那些优秀的已经发布了的帖子要有个备份,建议修改一下代码,以相对路径将所有资源保存在本地磁盘,这样,当帖子借用的资源链接失效后,你仍然有补救的余地。

    十一、做帖子,特别是音画贴,是个很辛苦的事情。要有耐心、细心和恒心。尽量不要“半途而废”,坚持下去,会有收获的!

    祝朋友们快乐、幸福!

回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

QQ|手机版|小黑屋|Archiver|五常信息网(五常论坛) ( 黑ICP备06006344号

GMT+8, 2024-5-8 08:29 , Processed in 0.181472 second(s), 31 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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