返回列表 回复 发帖

[另类奇思] →[教程]新手制作html 实例讲解![让你一分钟成为搞图高手在23楼]

很多新朋友很想学音画,可是一看那些代码就头疼,鱼鱼初接触音画也是一样的感觉,不知道从何下手,现在我以实例来简单讲解一下!

ads 10
Design(设计)、UBB(一般不需要)和HTML(代码)三种模式:可能很多人都没能了解他们之间的区别,现作细解

★所有的使用动网程序论坛都支持三种编辑模式:Design、UBB和HTML,这三种编辑模式各有其功能和特点,鉴于有些网友常常混淆编辑模式,此贴加以说明,希望大家看了能够对论坛的三种编辑模式做到心中有数。

1、Design编辑模式:

Design的英文含义是“设计”,这里指半可视化的与Word相类似的编辑模式。用户可以在这个编辑模式下直接输入文字并进行修饰,其效果是“所见即所得”的(What you see is what you want),你还可以在这里充分利用编辑框上方的工具栏进入诸如插入图片、插入媒体音频/视频文件、插入超级链接乃至取消等等操作,不同的是,当你插入上述内容时,它的可视化并不太理想——你不一定能够看到实际内容,而可能只是一些UBB语法格式的文字(我们下面会谈及UBB语法的)。不过Design编辑模式也有“预览”功能哦——当你在HTML下编写完一段完整的代码后,你试试切换到Design编辑模式,你会发现,你所编辑的HTML代码在这里可以看出效果来的(虽然这个效果不完全是真正发布后的效果),这对你编写帖子和查看帖子效果无疑是有一定的帮助意义的。

论坛默认的编辑模式就是Design模式。当你发布新帖或回复别人的帖子时,你首先进入的编辑模式都是Design模式。如果你需要进入别的编辑模式,那么,在如下三种情形下你可以单击编辑框下方的相应按钮进行切换:

1)发表新帖时;
2)打开一个帖子然后点击该帖子稍右上方的“回复”按钮时;
3)引用别人的话时。

Design编辑模式支持UBB语法,就是说,在Design编辑模式下,如果你直接使用UBB语法编辑帖子,论坛系统也是接受的。不过,由于“自动格式”等原因,有时在Design模式下使用UBB的一些语句会出现问题(如系统会加入<a href=...>...</a>、<font=...>...</font>之类的HTML代码),造成所编辑的帖子发布后效果不如人意。

2、 UBB编辑模式:

UBB是早期一些论坛为了支持部分HTML特效而设计的语法标签,这些特定的语法语句通过论坛的特殊程序将其转换成HTML效果显示出来,至今大多数论坛程序仍然使用。UBB语法就是中括号语法,每条语句的语法标识符放在中括号里,和HTML语法一样,也定义了起始符,成双成对出现。比如,令文字颜色为红色,我们用如下语法格式(*号用时去掉,下同):

[*color=red]我喜欢天涯情感社区[*/color]

效果:我喜欢天涯情感社区

下面列举一些常用的UBB语法:

[*B]文字[*/B]:在文字的位置可以任意加入您需要的字符,显示为粗体效果。

[*I]文字[*/I]:在文字的位置可以任意加入您需要的字符,显示为斜体效果。

[*U]文字[*/U]:在文字的位置可以任意加入您需要的字符,显示为下划线效果。

[*align=center]文字[*/align]:在文字的位置可以任意加入您需要的字符,center位置center表示居中,left表示居左,right表示居右。

[*URL=http://2008wlkw.2000y.net]天涯在线管理[*/URL]:加入超级连接。

[*EMAIL=MAILThandanfang@163.net]写信给天涯管理[*/EMAIL]:有加入邮件连接。

[*img]图片地址[*/img]:在标签的中间插入图片地址可以实现插图效果。

[*flash]Flash连接地址[*/Flash]:在标签的中间插入Flash图片地址可以实现插入Flash。

[*code]文字[*/code]:在标签中写入文字可实现html中编号效果。

[*quote]引用[*/quote]:在标签的中间插入文字可以实现HTMl中引用文字效果。

[*list]文字[*/list] [*list=a]文字[*/list] [*list=1]文字[*/list]:更改list属性标签,实现HTML目录效果。

[*fly]文字[*/fly]:在标签的中间插入文字可以实现文字飞翔效果,类似跑马灯。

[*move]文字[*/move]:在标签的中间插入文字可以实现文字移动效果,为来回飘动。

[*glow=255,red,2]文字[*/glow]:在标签的中间插入文字可以实现文字发光特效,glow内属性依次为宽度、颜色和边界大小。

[*shadow=255,red,2]文字[*/shadow]:在标签的中间插入文字可以实现文字阴影特效,shadow内属性依次为宽度、颜色和边界大小。

[*color=颜色代码]文字[*/color]:输入您的颜色代码,在标签的中间插入文字可以实现文字颜色改变。

[*size=数字]文字[*/size]:输入您的字体大小,在标签的中间插入文字可以实现文字大小改变。

[*face=字体]文字[*/face]:输入您需要的字体,在标签的中间插入文字可以实现文字字体转换。

[*DIR=500,350]……[*/DIR]:为插入shockwave格式文件,中间的数字为宽度和长度。

[*RM=500,350,1]……[*/RM]:为插入realplayer格式的rm文件,中间的数字为宽度和长度,第三个数字取值为0和1,0表示手动播放,1表示自动播放。

[*MP=500,350,1]……[*/MP]:为插入为midia player格式的文件,中间的数字为宽度和长度,第三个数字取值为0和1,0表示手动播放,1表示自动播放。

[*QT=500,350]……[*/QT]:为插入为Quick time格式的文件,中间的数字为宽度和长度,第三个数字取值为0和1,0表示手动播放,1表示自动播放。

【说明】

1)有少数语法本论坛不一定支持。
2)查看本论坛的UBB语法模式会发现,它的语句模样其实是HTML格式的。

3、 HTML编辑模式:

这是论坛最高级的编辑模式,要求用户有一定的HTML语法知识,能够编写HTML代码。

HTML文件是标准的ASCII文件,它看起来象是加入了许多被称为链接签(tag)的特殊字符串的普遍文本文件。从结构上讲,HTML文件由元素(element)组成,组成HTML文件的元素有许多种,用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”,有起始标记和结尾标记。元素的起始标记叫做起始链接签(start tag),元素结束标记叫做结尾链接签(end tag),比如我们经常使用的表格就是由<table>和</table>分别作起始标识符,<table>里面还有各种参数和属性设置,<table>和</table>之间还有一些成对出现的诸如<tbody>、<th>、<tr>、<td>等元素。

更多的HTML语法知识请参阅黑马的初学教程或其他网页提供的相关资料。

其实,如果你对HTML语法知识还不太了解的话,你还可以借助一些网页制作软件(如FrontPage、DreamWaver等)在可视化编辑状态下编写帖子,结束后再切换到HTML模式将相应代码复制到论坛上来。你也可以修改别人的代码,作为过渡阶段的学习手段,这是准许的。

最后切记:<table>...</table>之类的用<>包含起来的代码就是HTML代码,它们只有在HTML编辑模式下编辑,你想要的效果才会在发布后得以正确显示。
如何认识HTML语法?

第一讲:Hello Table

     用HTML代码能够更灵活地控制贴子的效果,但用HTML编辑表格确实有一定的困难,为此,将由浅入深,循序渐进地向大家介绍如何用HTML制作表格。

如果你是初学者,本贴将是适合你的;如果你掌握一定的HTML语言,阅读本贴也会对你有一些帮助;如果你已经是高手了,那么,请多多指导。

表格以<table>和</table>分别作起始标识符。其中,<table>里有一些必要的参数,为容易理解起见,在这里只介绍本节用到的参数,其他的参数今后将陆续提到。border参数定义表格边框的粗细,记为border=数值,数值取0,1,2,3等整数。width是我们要定义的参数,它规定表格的宽度,数值通常用100%,记作width=100%,值得注意的是,如果不设置width值,表格将根据单元格里的内容自动定义宽度。height参数规范表格的高度,通常可以不设置,而是让内容的多少让系统自行设定。

<table>和</table>之下,还需要由两个成对的标识符号定义表格的行、列,它们分别是<tr>……</tr>,<td>……</td>,tr标识符定义表中的行,td标识符定义数据表元,即每行中的每一列。<td>……</td>要包含在<tr>……</tr>里面。一张完整的表格全部语法如下:

<table border=2 width=80%>
    <tr>
      <td>Hello Table</td>
   </tr>
</table>

效果如下:

Hello Table(天涯管理在线)
第二讲:表格的修饰(一)

No.1  表格边框的修饰

     上一讲我们讲到border属性,border即为边框,除了有粗细的数值定义以外,还有其他的属性哦。我们先来看看亮边框的颜色和暗边框的颜色设置。亮边框记作bordercolorlight,暗边框记作bordercolordark。它们的数值可以用red、green、blue等表达,也可以用#11ee00这样的方式来表达,比如:bordercolorlight=red,bordercolorlight=#808000。请看下面的表格:




天涯在线


以上表格的全部代码清单如下:

<table border=6 width=100% bordercolorlight=#008000 bordercolordark=#808000>
  <tr>
   <td width=100%>天涯在线</td>
  </tr>
</table>

上表中,左、上边框是亮边框,右、下边框为暗边框。怎么样?这么一修饰就好看多了吧?

边框颜色方面还有一个属性:bordercolor。当同时设置了暗、亮边框的颜色,bordercolor的颜色设置是多余的,这一点应该注意。现在我们用bordercolor来设置一下表格边框,看看有什么效果:




Hello Table


代码清单:

<table border=10 width=100% bordercolor=#FF0000>
  <tr>
   <td width=100%>Hello Table</td>
  </tr>
</table>

上面我们学习的有关表格边框颜色的设置,下面继续跟落叶学习表格边框其他方面的知识。

内容不多了,还讲两个表格边框的属性:一是边框线(cellpadding)粗细和边框空白处的大小,取值范围从0开始,用正整数。下面是代码和表格效果:

<table border=2 cellpadding=2 cellspacing=8 width=100%>
  <tr>
   <td width=100%>Hello Table 边框线:2 ,边框空白处:8</td>
  </tr>
</table>




Hello Table 边框线:2 ,边框空白处:8
……包含在里面。今后在论坛里制作表格应该养成加的习惯。]

除了使用背景色,我们还可以使用图片来修饰表格背景,应该说,用图片来修饰表格的外观会更漂亮得多。不过应该注意,用来作表格背景图的文件不要太大,太大了打开网页速度较慢,图片的尺寸方面,要么是有规则图案的小图片,要么就是和表格大小相一致的,否则做出的表格也不会有理想的外观效果。下面我们在上面表格的基础上,用这幅图来作表格的背景图片:



代码及效果如下:

代码(红色那句就是加背景图的语法,放在当中合适的位置即可):

之间用

来定义左对齐,这种方式的定义无需终止标识符,而定义字体的那句则需要在结束字体定义处有终止标识符号。]

[注二:细心的朋友可能已经发现,表格代码里多了一组

……,这是怎么回事呢?又是什么意思呢?在纯粹的HTML表格里本来可以不要这个的,但论坛有论坛的语法规范,它用来定义表格体,如果没有,系统也会自动在

第三讲:表格的修饰(二)

No.2表格背景的修饰

默认情况下,HTML网页里表格的背景色是白色的。这显然不总是符合我们的要求,我们通常会设置各种背景颜色,以配合网页或贴子主题。

设置表格的背景色很简单,给其bgcolor属性赋值即可,写作bgcolor=数值,其数值取值方式和上一讲讲到的边框颜色是一致的,比如:bgcolor=black或bgcolor=#000000。bgcolor属性应该放置在表格初始符当中。下面举个实例,先是代码,后是效果:








背景色:bgcolor=#CCCC00

暗边框颜色:#008000

亮边框颜色:#008060



背景色:bgcolor=#CCCC00
暗边框颜色:#008000
亮边框颜色:#008060


[注一:代码中用上了设置字体对齐方式,在
之间加上,且它要把
background=http://www.h4.dion.ne.jp/~herb/kabe-1.gif>






背景色:bgcolor=#CCCC00

暗边框颜色:#008000

亮边框颜色:#008060



效果:



背景色:bgcolor=#CCCC00
暗边框颜色:#008000
亮边框颜色:#008060


我们用了两个讲义来讲述表格的修饰方法,相信通过认真学习,朋友们应该有一定的收获。学习不要太急,注意慢慢消化,不然学习是没有效果的。


回复 引用

TOP

第四讲:表格内容的编辑

由于本讲涉及到一些编辑排版、字体修饰等语法,偶先来简单介绍一下这些常用到的语法格式。


:强制换行,效果等价于在Design模式下的组合键 Shift+Enter。

:段落标志。等价于敲一次回车键。

:字体加粗,与效果一致。

:下划线。

:斜体字。

:对齐方式,值取left,right,center。

下面以一个实例代码和效果来演示如何在表格中编排内容。先来看看效果:

图一





图二


制作于XX

代码如下:





图一


http://www.h4.dion.ne.jp/~herb/kabe-1.gif>


图二


http://www.h4.dion.ne.jp/~herb/kabe-1.gif>
制作于XX


之间,并注意用换行符(
)
或段落标志符(

)
将图片与文字隔开。


里面,这一点一定要弄清楚。不然,终止符不正确或缺少时,由于系统的容错性不好、自动修正功能不够智能化等问题,效果将会很糟糕,错误太严重的话还会使浏览器在运算的时候进入死循环而造成机器当机。

下面是三个表格的嵌套代码及效果,由于表格里没有内容,所以,只指定了三级表格的高度。代码中,每一个表格的代码用一种颜色来区分。


第五讲:表格的嵌套(一)

表格的嵌套一方面是为使页面(贴子)的外观更为漂亮,利用表格嵌套来编辑出复杂而精美的效果,另一方面是出于布局需要,用一些嵌套方式的表格来做精确的编排,或者二者兼而有之。熟练地掌握表格的嵌套技巧并不是很困难的,只要你思路清晰,对表格的整体嵌套构架做到心中有数,在实际编辑时就不会出乱,发布出来的作品也就不会只是一堆代码。

现从最简单的表格嵌套开始演示和讲解,不会太难的。

两张表格的嵌套:


Table No.1(Father Table)

Table No.2(Son Table)
Table No.1(Father Table)

代码如下(红色的为第二张表格的代码):







Table No.1(Father Table)







Table No.2(Son Table)

Table No.1(Father Table)


从上面的代码中,我们看得出来,第二张表格代码包含在第一张表格代码中的

代码:

























一般来说,只要结构清晰,再多的表格嵌套也是一样操作的。提示:不管是多少张表格嵌套,一定要注意起始标识符的正确性,稍有点错误,系统会自动帮你更正,但更正的效果或许不是你所需的,而且,一旦错误太多,系统的自动更正也无能为力。

特别注意:

必须放在

……
回复 引用

TOP

第五讲:表格的嵌套(二)

先来看看以下表格:



你应该可以看得出来,上表中有一个一级表格(父表格),里面有两个二级表格(子表格),二级表格一上一下,位置十分清楚。如果你愿意,你还可以在二级表格里再嵌套次级别的表格。

现在我们来看代码,每一种颜色的文字代码一个表格的完整代码,注意观察起始标识符号的前后关系。












这种方式的嵌套可以让你有更多的创意,比如,上面的二级表格里放置一个背景图并用透明Flash动画来修饰它,下面一个表格里放置滚动图文,总之,发挥你的想象力,充分利用这种格式制作出令人赞叹的效果来!

”将父表分隔成左右各一半,即父表是一个有一行两列的表格。其次,我们在父表的左、右单元格里分别放置一个表格,就形成了以上效果。请研究以下代码清单,为了区分层次,把每一个表格的代码用一种颜色表示,请特别注意父表的代码:

第五讲:表格的嵌套(三)



与上一讲的嵌套效果相比,我们可以明显地看到:上面表格中的两个二级表格是并列放在父表里的。如何做到这个效果呢?

首先,在父表格里,我们用两次“
……
















上述代码里,定义了二级表格的高度,在实际使用中,你可以根据情况定义或不定义,但要注意两个子表格的高度要一致,否则就很难看。此外,表格的border值要不要应该根据实际需要而定,之所以定义为4,是为了使效果更加明显。

表格是HTML文档里的元素之一,它还可以是容器,因此,表格里甚至是表格的单元格里又有表格是正常的,我们就是充分利用这一特点来装饰我们的文档(或贴子)。

第五讲的三个讲义专门研究了表格嵌套,嵌套原理到嵌套格式及嵌套方法我们都应该学会了。讲义里的例子是简单的,但它们已经将表格的嵌套结构展示完毕,在这个基础上,我们可以制作出复杂而美观的贴子来。所有多层次嵌套及嵌套中的嵌套都是通过一个又一个简单的嵌套来实现的,这就看你的了。

回复 引用

TOP


好好学习

借用借用借用

好好学习

天天向上


















好好学习

借用借用借用

好好学习

天天向上



返回列表
注册并登陆论坛看贴,可享受更多功能 !
本站仅提供网络交流平台,内容均为网友自愿分享/上传,与本站无关。如有侵权等违法行为请联系我们