第一页 上一页 1 2 3 4 5 6 7 下一页 最后页

[第二讲]HTML帖子的制作教程---晨光辉[学…

发表:2008-03-20 02:41 楼主
晨光辉 查看诚信通档案
职位: 版主版主
级别:进士
注册:2005-12-06
订制
给我留言
查看财富值
作者帖子  作者博客  
楼主推荐
·十大网商的商业价值--晨光辉(原...
·晨光辉参选2008年十大网商投票站...
·订阅商机的作用--晨光辉(原创)
版主奖励: 20点

 

第二讲

 HTML帖子的制作教程

 

       追求完美的你,不可能只留恋于像编辑Word

文档一样编辑你的帖子,也不会满足于使用有限

UBB语法来制作你的帖子,“盗用”别人的代

码也不是长久之计。看到别人那些精美无比的

HTML帖子,你早已跃跃欲试了!

   如果是这样,那么,本教程就是为你准备的!

   本教程主要适合于HTML论坛新手和初中级水平

的水手参考使用,对于拥有Web管理网站的朋友,

本教程也很有指导意义。而对于想学习HTML的朋

友,这也是一个不错的教程。总之,冷月尽量使用

最通俗易懂的方式介绍HTML帖子的相关语法和制

作方法、技巧。

   或许你已经是HTML帖子的制作高手了,那么,如

果你有耐心一章一节地看下去,说不准也对你有所

帮助——里面的内容,极可能有些是你未接触过或

者不太熟悉的;如果你是教授级别的,那么,浏览

一下也无妨,你可以给我们提提意见,让此教程对

大家的帮助达到最佳效果。 

    同时提醒你:一次不要学太多哦——知识是靠慢

慢积累的,不要企图一蹴而就。

   最后,祝你进步!

 

        

网友贴图----晨光辉----网友贴图

 
[最后修改于 2008-03-20 03:12:27]
签名档:
小胜凭智,大胜靠德,湖北荆门市沙洋县盛泰塑料制品厂,http://www.jmsyst.cn.alibaba.com E-mail:systsl@126.com,主要生产PS发泡餐具,专业生产各种规格的发泡快餐盒,进口台湾坡力公司的全套设备,可承接出口产品的加工,电话:0724-8511878 手机:13908691640 传真:0724-8511878,网站:http://www.hb-shayangshengtai.cn
奖励财富值 | 收藏到网摘 |  
晨光辉 查看诚信通档案
给我留言
订制
职位: 版主版主
级别:进士
注册:2005-12-06
查看财富值
作者帖子  作者博客
帮帮采纳数:41
沙发
发表:2008-03-20 03:14
回复:[第二讲]HTML帖子的制作教程---晨光…
让我们首先从字体设置开始。

    在HTML代码里,字体的定义并不是很难,我们只需用<font>标签即可定义字体、字号、字体颜色等。<font> 标签原则上要求成对出现,即在被修饰的字体前使用<font>引导,在被修饰的文字后用</font>结尾。下面给出例子和效果及相关说明:

    语法:<font face=黑体 size=4 color=red>阿里在线</font>

   效果阿里在线

   说明:<font>标签里,face为字体名称,“=黑体”即表示被修饰的文字即“黑马在线动力”的字体为黑体,至于定义为什么字体,看你的喜好了,如果你所设置的字体不存在,系统自动使用默认字体显示(如中文Windows平台下宋体就是默认字体);size表示字号,论坛里可用字号是1号到7号,通常数字越大字号也就越大(也有的论坛相反),如果用户定义的字号超过7号则以7号显示(但还有其他方法突破7号字体,稍后我们会讨论到的);color用来定义文字的显示颜色,其值放在和前面的各元素一样放在等号的后面,颜色的表示方式可用少量的颜色英文明文,也可用Web色码方式,如#ff0000,色码表请参阅色码表

色 码 表

eeeeeeff00ccff66ffff00ff
ddddddffccccff66ccff00cc
ccccccffcc99ff6699ff0099
bbbbbbffcc66ff6666ff0066
aaaaaaffcc33ff6633ff0033
999999ffcc00ff6600ff0000
888888ccccffcc66ffcc00ff
777777cccccccc66cccc00cc
666666cccc99cc6699cc0099
555555cccc66cc6666cc0066
444444cccc33cc6633cc0033
333333cccc00cc6600cc0000
22222299ccff9966ff9900ff
11111199cccc9966cc9900cc
00000099cc99996699990099
ff000099cc66996666990066
ee000099cc33996633990033
dd000099cc00996600990000
cc000066ccff6666ff6600ff
bb000066cccc6666cc6600cc
aa000066cc99666699660099
99000066cc66666666660066
88000066cc33666633660033
77000066cc00666600660000
66000033ccff3366ff3300ff
55000033cccc3366cc3300cc
44000033cc99336699330099
33000033cc66336666330066
22000033cc33336633330033
11000033cc00336600330000
ffffff00ccff0066ff0000ff
ffffcc00cccc0066cc0000cc
ffff9900cc99006699000099
ffff6600cc66006666000066
ffff3300cc33006633000033
ffff0000cc00006600000000
ccffffff99ffff33ff00ff00
ccffccff99ccff33cc00ee00
ccff99ff9999ff339900dd00
ccff66ff9966ff336600cc00
ccff33ff9933ff333300bb00
ccff00ff9900ff330000aa00
99ffffcc99ffcc33ff990099
99ffcccc99cccc33cc008800
99ff99cc9999cc3399007700
99ff66cc9966cc3366006600
99ff33cc9933cc3333005500
99ff00cc9900cc3300004400
66ffff9999ff9933ff003300
66ffcc9999cc9933cc002200
66ff99999999993399001100
66ff669999669933660000ff
66ff339999339933330000ee
66ff009999009933000000dd
33ffff6699ff6633ff0000cc
33ffcc6699cc6633cc0000bb
33ff996699996633990000aa
33ff66669966663366000099
33ff33669933663333000088
33ff00669900663300000077
00ffff3399ff3333ff000066
00ffcc3399cc3333cc000055
00ff99339999333399000044
00ff66339966333366000033
00ff33339933333333000022
00ff00339900333300000011
0099ff0033ff0099cc0033cc
009999003399009966003366
009933003333009900003300

   size还有一种赋值方法,形式如下:

   <font size=+1>阿里在线</font>

    这类表达式适用于未使用CSS设定的页面,它表示被修饰的文字在默认字号基础上加大一号。

    字体修饰还用到其他的标签,分别介绍如下:

    粗体:<b>文字</b>  (例:文字

    加重:<strong>文字</strong> (例:文字

    上标:<sup>文字</sup>  (例:文字

    下标:<sub>文字</sub>  (例:文字

    斜体:<i>文字</i>  (例:文字

    下划线:<u>文字</u>  (例:文字

    提示:连同<font>标签一块,以上这些修饰方法,只要不相互冲突就可以结合起来使用。

   标题修饰:<hx>文字</hx>。其中,x为1到6的数字。以下是h1到h6的标题式样效果,我们可以看到,字号是逐渐变小的:

 

标题一

 

 

标题二

 

 

标题三

 

 

标题四

 

 

标题五

 

 

标题六

 

     

签名档:
小胜凭智,大胜靠德,湖北荆门市沙洋县盛泰塑料制品厂,http://www.jmsyst.cn.alibaba.com E-mail:systsl@126.com,主要生产PS发泡餐具,专业生产各种规格的发泡快餐盒,进口台湾坡力公司的全套设备,可承接出口产品的加工,电话:0724-8511878 手机:13908691640 传真:0724-8511878,网站:http://www.hb-shayangshengtai.cn
奖励财富值 | 收藏到网摘 |     复制本链接 |
晨光辉 查看诚信通档案
给我留言
订制
职位: 版主版主
级别:进士
注册:2005-12-06
查看财富值
作者帖子  作者博客
帮帮采纳数:41
板凳
发表:2008-03-20 03:15
回复:[第二讲]HTML帖子的制作教程---晨光…

分隔标签详解

    从代码结构来看,HTML帖子实际上就是一个去头去尾的Web页面,原帖和回复置于<body>和</body>之间,我们可以把原帖和回复帖分开来看,这样,每一个帖子实际上就相当于Web页面的正文了。正文的行与行之间、段与段之间甚至上一个显示元素和下一个显示元素之间,如若我们不刻意去把它们分隔开来,情形会怎么样呢?显然会是一团糟,你的帖子将是一个大团块,阅读起来将十分不便。

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

    强行换行:<br>

    在需要处打上<br>标签,<br>后面的内容将强行换到下一行。Web页会根据自己的可显示宽度自动换行(除非定义为不换行,不换行标签是<nobr>),但有些情况下,我们需要强行换行(比如诗歌、歌词等的编排),此时<br>标签就能派上用场。<br>可以连续使用,如果<br>后面没有内容,它将表示一个空行。<br>是独立使用的标签,没有终止符,</br>是错误的!

    强行分段:<p>内容</p>

    与换行不同,p用来强行分段,它是成对出现的标签,即以起始符<p>引导被修饰的段落,以</p>结束该段。在HTML页面里,段与段之间的距离相当于一个空行,并不像Word里用回车分段得出的效果那样。默认情况下用两个<br>也得到分段的效果,但这样可能会存在一些问题:一是,假设预定义了行高,那么,两个<br>造成的两个段落的上下间距可能与用p的不同;二是,像动网论坛那样,用<br>来给一系列超级链接分行,不管连续用多少个<br>,<br>都极可能被吞掉,结果是,那些超级链接外观上将是连在一起的,分辩起来哪是哪比较困难,所以建议用p标签来给它们分段(当然还有其他的手段)。

    类似p标签的还有div,记作:<div>内容</div>。严格来说div不是一个分段标签,它和span等元素一样,属于网页布局元素,用于网页制作的布局、定位、色块等设计,但在论坛里,div的作用非常类似于p,不过,它分出的段落间距不一定与标签p一致。

    分隔线:<hr>

    分隔线标签<hr>也是独立使用的,它将令Web页出现一条线条。如果不需要特别的装饰,直接用<hr>即可,也可以修饰分隔条,让它和你的帖子更协调地配合起来。<hr>标签可定义元素主要有:

   size — 厚度,即分隔线的粗细,默认为1;
   color— 颜色,记作:color=颜色值;
    width— 宽度,可用实数值表示,也可用百分比;
    align— 对齐方式。居中:center,左对齐:left,右对齐:right。默认为居中;

    <hr>标签还有一些诸如title(标题)、noshade(无阴影)等元素,这里就不一一介绍了。

签名档:
小胜凭智,大胜靠德,湖北荆门市沙洋县盛泰塑料制品厂,http://www.jmsyst.cn.alibaba.com E-mail:systsl@126.com,主要生产PS发泡餐具,专业生产各种规格的发泡快餐盒,进口台湾坡力公司的全套设备,可承接出口产品的加工,电话:0724-8511878 手机:13908691640 传真:0724-8511878,网站:http://www.hb-shayangshengtai.cn
奖励财富值 | 收藏到网摘 |     复制本链接 |
晨光辉 查看诚信通档案
给我留言
订制
职位: 版主版主
级别:进士
注册:2005-12-06
查看财富值
作者帖子  作者博客
帮帮采纳数:41
第3楼
发表:2008-03-20 03:16
回复:[第二讲]HTML帖子的制作教程---晨光…

排版标签详解

    HTML的排版不同于Word的直观排版概念,它不是所见即可得的。但是,最终追求的结果是一样的:令终端页面的外观像我们预设的一样显示出来。

    在支持HTML论坛里,排版可分为常规排版和非常规排版两种,后者属于较为高深的内容,出于学习的循序渐进要求,我们在本节只介绍常规排版。

    一、格式预设:<pre>内容</pre>

    这是非常有用的一个标签,它可以使得最终显示效果以原始格式实现。请看以下代码和效果:

代码:

<pre>
1236
-1207
--------
29
</pre>

效果:
1236
-1207
--------
29

    论坛里,有时我们需要精确地对齐某些元素,pre标签能够帮上大忙,它能令效果比在“设计”模式下用空格符移动显示符号更准确。

    二、对齐:align

    align作为一个元素放置在相应标签里令被该标签修饰的显示单元按指定方式对齐或在图文混排时定义图片与文字的对齐方式。

    先介绍前者,即被修饰单元的对齐方式。这种情形,align通常有三个值可以选择:left(左对齐)、center(居中)、right(右对齐),记作align=值。align不能独立使用,它要放在相应的标签里,如放在<table ...>里,则令表格按取值情况对齐,<table ... align=center>一句,将令表格居中;再如放在<p>标签里,则令<p>...</p>里面的内容按指定值对齐,<p laign=right>文字</p>将使“文字”右对齐。align的这种用法还可以用于<div>、<hr>等标签里。

    而当align用于<img>(图像标签)里时,它所指的是图片与文字的对齐方式,其值比较多,现解释如下:

    left:图片位于文字的左边。例:

阿里在线 

    right:图片位于文字的右边。例:

阿里在线

    top:后面的文字与图片的顶站对齐。例:

阿里在线 

    bottom:后面的文字与图片的底部对齐。例:

阿里在线 

    middle:后面的文字与图片的中间对齐。例:

阿里在线

    absmiddle:后面的文字与图片的绝对中间对齐。例:

阿里在线

    三、缩进:<blockquote>

    blockquote将例被修饰的对象往右边缩退,记作<blockquote>内容</blockquote>,以下效果是这样的语法实现的(用了两个缩进单位):<blockquote><blockquote>阿里在线……</blockquote></blockquote>

    当然,你也可以用空格符号实现缩进(代码记作:&nbsp;),但它只管左边的,对右边没有影响,而blokcquote标签是有的。

    四、居中对齐:<center>内容</center>

    这个很简单,成组使用即可,不多说什么了。

    五、其他排版方式:表格

    用表格来实现网页布局一直被大量使用。在论坛里发帖,有些需要居中的地方,我们不妨用用表格,它得出的效果会比用center标签好得多。试看以下例子:

为了那一夏的热烈
爱需要蛰居多久

在漫长的暗无天日的日子里
一切早已精心策划
单等风和日丽之时破土而出
而后羽化成歌

烈日下本就炽热的爱必须张扬
让正午的阳光更为燥热
让黄昏的空气鼓动起来
让爱肆无忌惮

当爱成为阳光下的风景
曾经的等待又何需忆起

    如果我们将表格的边框设置为0,那么,看表将看不到,文字的居中效果就非常理想了。

签名档:
小胜凭智,大胜靠德,湖北荆门市沙洋县盛泰塑料制品厂,http://www.jmsyst.cn.alibaba.com E-mail:systsl@126.com,主要生产PS发泡餐具,专业生产各种规格的发泡快餐盒,进口台湾坡力公司的全套设备,可承接出口产品的加工,电话:0724-8511878 手机:13908691640 传真:0724-8511878,网站:http://www.hb-shayangshengtai.cn
奖励财富值 | 收藏到网摘 |     复制本链接 |
晨光辉 查看诚信通档案
给我留言
订制
职位: 版主版主
级别:进士
注册:2005-12-06
查看财富值
作者帖子  作者博客
帮帮采纳数:41
第4楼
发表:2008-03-20 03:16
回复:[第二讲]HTML帖子的制作教程---晨光…

图像标签

    或许贴图是论坛里最容易的事情。黑马当初玩论坛就爱上论坛的原因就是发图太简单了。复制→粘贴就可以发一张图片,这是动网论坛的便利。用HTML方式贴图,它的语法也是很简单。

    基本语法:<img src=图片地址 border=数值 align=对齐方式>

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

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

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

    align:图片与文字的位置关系。这个内容,我们在上一节已经讲过 。

    img标签还有其他的参数:

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

alt=黑马在线动力      

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

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

签名档:
小胜凭智,大胜靠德,湖北荆门市沙洋县盛泰塑料制品厂,http://www.jmsyst.cn.alibaba.com E-mail:systsl@126.com,主要生产PS发泡餐具,专业生产各种规格的发泡快餐盒,进口台湾坡力公司的全套设备,可承接出口产品的加工,电话:0724-8511878 手机:13908691640 传真:0724-8511878,网站:http://www.hb-shayangshengtai.cn
奖励财富值 | 收藏到网摘 |     复制本链接 |
晨光辉 查看诚信通档案
给我留言
订制
职位: 版主版主
级别:进士
注册:2005-12-06
查看财富值
作者帖子  作者博客
帮帮采纳数:41