新萤火虫论坛

 找回密码
 注册
查看: 13297|回复: 21

[07/04][教程]HTML特效帖子编辑方法(高级教材)(持续更新中~08.11更新)

[复制链接]
发表于 2006-7-4 23:38:07 | 显示全部楼层 |阅读模式

  第一讲:html的简介

html文件是一种可用任何文本编辑器创建的ASCII码文档。这些编辑器包括常见的写字板,记事本,word等。推荐大家用记事本方便一些!

 一:文件的基本结构:

HTML文件由标记和被标记的内容组成,标记用来规定被标记的内容是什么信息

1.1
标记及其属性

1:标记的格式用“<"表示一个标记的开始,”>“表示一个标记的结束这两个字符必须同时出现,表示这是HTML代码

2:标记的属性
标记的属性是用来控制受标记影响的内容的显示和输出格式。设置属性的格式如下:

<标记 属性1=属性值 属性2=属性值。。。。>

1.2
HTML文件的基本结构

1:基本标记
标记是构成HTML的基本单位,很体面拉的标记很多,与文件结构有关的基本标记包括

[ htm]。[ head]。[ body]。在论坛里面发帖子,主要就是编辑[body]这一部分的内容



  第二讲:HTML的文档处理

一:文字标记

文字标记是”[font]“可以用”[font]“标记的不同属性来分别设置文本中文字的大小,字体,字型,字色等,[Font]标记的格式是:

[font 属性=属性值]被设置的字

1.1
文字的大小

设置文字大小的属性是”size“ 他的取值范围是1到7。其中1为最小,7为最大,默认为3

1.2
文字的字体,颜色 字体属性是:face 颜色的属性是color
用法与上同

二:段落标记与文字布局

2.1文字换行

换行标记是
放在文字结尾处使得其后的文字在下一行显示

2.2段控制
标记是[p]放在文字后,使得其后文字空一行后换行显示
[p]的属性align用来设置文字的对齐方式。属性值是center(居中对齐),left(向左对齐),right(向右对齐)

2.3文字的分区显示

属性是{div]属性值也有三个,与上同,他主要用在许多段落的布局

2.4预格式化文本
在有多个空格时,HTML只默认一个空格。要使用多个空格,需要加入 。所以,这种方法对处理较为复杂的文档格式就很麻烦,用预格式化标记就很方便其格式是:
[pre]预先排好的内容<[/pre]

2.5超级链接
其标记为[a]格式为:[a herf="链接地址" 属性=属性值]热点内容(文字图片)[a]

注意:因为“〈〉”会直接生成效果,所以我用“[]”来代替,实际使用中记得把"[]"改成"<>"



第三讲:表格的使用(重点)

表格是用来定义其开始用定义其结束的,必须与[table]标记配合使用的还有和标记,构成表格的简单格式如下:

[table]





一:表格的主要属性

1.1[table]标记的主要属性
align定义表格的对齐方式,有三个属性值center,left,right

background定义表格的背景图案,属性值为图片的地址

bgcolor定义表格的背景颜色,属性值是各种颜色代码

border定义表格的边框宽度,属性值是数字

bordercolor定义表格边框的颜色,属性值是各种颜色代码

cellpadding定义单元格内容与单元格边框之间的距离,属性值是数字

cellspacing定义表格中单元格之间的距离

height定义表格的高度,属性值是数字

width定义表格的宽度,属性值是数字

1.2[tr]标记,表格是由多行与多列组成的,[tr]标记用来定义表格的一行,他的属性极其属性值定义的是表格中的该行,其主要属性与属性值如下:

align定义对齐方式,属性值与上同

background定义背景图案 bgcolor定义背景色

1.3[td]标记。用[td]标记概况起来的内容表示表格的单元。其主要属性与属性值和[table]标记的一样,补充两个合并列和行的代码:

colspan定义合并表格的列数,属性值是数字

rowspan定义合并表格的行数,属性值是数字

下面给出一个简单的例子:



效果如下
萤火虫 萤火虫 萤火虫
优质美图 优质美图 优质美图
音画学堂 音画学堂 音画学堂


常用的代码格式(大家可以套用)



效果如下(这个是最基本背景加标题的代码)

新萤火虫社区 



图片向上飞行的效果及代码 代码如下:



效果如下




文字向上移动的效果及代码 代码如下:



效果如下
风铃----绯舞

你把一串风铃悬挂在窗前,

你说你喜欢聆听她叮叮的铃声。

牵动风铃的是风,

那么牵动你心的又是什么?

是对某人的想念,

并想象着,

或许他也正在想念着你。

如果没有风,

风铃只是静止的存在。

如果没有爱,

心也是静止的存在。

让你的风铃晃动的,是风。

让你的生命灵动的,是爱。

在这个有风的午后,

让自己和风铃化为一体;

让爱与风一起流动。





图片向左飞行的效果及代码 代码如下:



效果如下




向右移动文字加图片效果及代码 代码如下:



效果如下 您迎欢虫火萤新





分段行走标题效果及代码 代码如下:



效果如下




飞舞标题效果及代码 代码如下:



效果如下




倒影效果及代码 代码如下:



效果如下







左右相反方向移动 的图片及代码 代码如下:



效果如下




未完待续。。。。
















[ 本帖最后由 绯舞 于 2006-8-23 17:48 编辑 ]

评分

2

查看全部评分

 楼主| 发表于 2006-7-4 23:41:01 | 显示全部楼层
今天有点累 先 编辑到这里 明天来继续更新 [ 本帖最后由 绯舞 于 2006-7-5 10:10 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2006-7-5 01:47:16 | 显示全部楼层
辛苦舞舞了, 好好休息吧~
回复 支持 反对

使用道具 举报

发表于 2006-7-5 09:10:48 | 显示全部楼层
嗯 这个很好,符合我们的愿景^^

在讲到不同的类别时,建议分主题,便于分类索引^^
[ 本帖最后由 happy-yan 于 2006-7-5 12:35 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2006-7-7 20:51:28 | 显示全部楼层



听段朗郎的音乐,为楼主来加油吧^^.

不知道楼主可不可以把表格仔细的讲一下.

说真的很想好好的学学. [ 本帖最后由 墓志铭 于 2006-7-7 21:01 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2006-7-15 20:15:56 | 显示全部楼层
萤火虫 萤火虫 萤火虫 萤火虫
音画学堂 音画学堂 音画学堂 音画学堂
音画学堂 音画学堂 音画学堂 音画学堂
[ 本帖最后由 不弃 于 2006-11-11 22:26 编辑 ]
回复 支持 反对

使用道具 举报

WeDone 该用户已被删除
发表于 2006-8-4 20:16:35 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

发表于 2006-8-5 09:31:58 | 显示全部楼层
很好的帖子,舞舞辛苦了
回复 支持 反对

使用道具 举报

发表于 2006-8-23 17:18:46 | 显示全部楼层
期待更多的东东。版版辛苦了
回复 支持 反对

使用道具 举报

雪上飞 该用户已被删除
发表于 2006-8-29 14:49:27 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|萤火虫

GMT++8, 2024-12-23 19:11 , Processed in 0.331599 second(s), 7 queries , File On.

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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