『如何用HTML代码编写日志』

潇湘飞鱼 2015-11-30

展开全文

如何用HTML代码写日志

（腾讯升级后新版代码编辑模式）

近一段时间来，一些好友通过对话框和留言，问我代码日志是如何编辑的，能否编写一篇用HTML代码编辑日志的教材。为满足朋友们的要求，我利用春节前后的几个晚上，编写了这篇《如何用HTML代码编写日志》的教材，供初学代码编辑日志的好友们学习。说是教材，其实就是华子在代码日志编辑中的一些心得、体会而已，您若是代码编辑高手就不用看了，但欢迎您提出宝贵意，呵呵。

一、代码编辑日志：

用草稿、或写私密日志编辑均可，但，用私密日志编辑比较方便，即编辑完成后可点击：右上角的“HTML按钮”、下边的“预览”、“发表私密日志”按钮以三种形式进行预览，且不受草稿的篇数限制，腾讯2011年9月，空间编辑模式升级后仍然保留了旧版编辑模式，点击右上角“旧版编辑器”可以转换，但旧版编辑模式的编辑栏内的编辑按钮比新版的少。

二、代码日志的编辑程序：

点击写日志（用草稿编辑）或点击写私密日志 → 点击右上角的“高级功能按钮”→ 再点击“HTML按钮” → 见到空白页左上角显示“请输入日志标题”，写入日志名称 → 下边是白色的带边框的空白页，此时进入HTML代码编辑模式。复制、粘贴代码进行编辑，编辑后的预览，见上一条，代码编辑模式也称为“高级模式”，普通日志编辑模式也称为“普通模式”。

三、常用编辑代码：

1、图片羽化代码，此代码是最为常用的代码之一，代码如下：

代码中的数字解释：100 是图片的亮度（0~100），3 是羽化的形式，即：3 是方形图片，2 是椭圆形，1 是右边羽化，没有4 。670 是图片的宽度，450 是图片的高度尺寸，尺寸可任意调整，但要成比例，引号中的图片代码四个字，是你要羽化的图片的代码。再有，代码中字母的间距、引号、括号等不能调整、删除，只有数字、文字可以变换（另外，图片代码的获取，在相册里选中图片，点击放大，再右键点击，再点击属性，就会看到图片的代码和尺寸，复制图片的代码地址后进行粘贴）。如果图片需居中，点击“HTML按钮”，选中图片，用编辑栏里的居左、居右、居中调整，也可用链接代码见（三、3 ），四周羽化后的图片没有明显的边界并具有透明功能，但亮度略微降低。下图为两张图片的方形羽化图片示意，是由少女图片和飘落的红叶两张图片叠加而成。

2、动画图片羽化代码：

代码中数字解释：红色的数字550是横坐标，1440是纵坐标（如同Flash的编辑）；508是

图片的高度，350是图片的宽度；红色的代码是动画图片“女孩倒影”的地址代码。( 见

右侧示意图片）

3、图片连接代码：

此代码是用来调整上下两张图片（两个代码）的间距、上下图片重叠的尺寸、文字覆盖图

片的上下尺寸、滚动图片的上下位置尺寸等时用的。

（1）、相当于空格的链接代码：

这是两个代码，功能一样，粘贴在两张图片代码的中间，粘贴一次，相当于鼠标插入符向

下调整一个空格，依此类推。

（2）、上下图片、文字重叠高度或分开距离链接代码：

这个代码，放在需调整的图片和文字的上边，是调节下边图片、文字与上边图片的重叠尺

寸和调整本图片、文字向上或向下的距离，-600表示向上调整600尺寸，去掉- 号表示向下调整600尺寸，数字可根据设计意图变换，相当于Flash的纵坐标的尺寸调整，这个代码和羽化代码 <IMG title=华子编辑 style="FILTER: Alpha(Opacity=100,Style=3); WIDTH: 670 px; HEIGHT: 450px" alt=华子编辑 src="图片代码"> 配合使用时，将羽化代码前红色的部分取消，还可以调整被羽化图片的横坐标位置，具体调整的方法很简单，只需调整上边的连接代码数字250部分即可（数字250是暂定的，写上0时，图片靠最左边）。

4、编写文字代码：

插入文字

代码解释：center 表示字体居中，可选择居右 right ，居左 left ，复制粘贴即可，但要删掉原居中代码。#0066ff 是字体颜色代码，根据你需要的字体颜色而定，如：#ff0000(红色)、 00ff00(绿色)、 0000ff(蓝色)、 000000(黑色) 、ffffff(白色) 等等。代码中的 face=隶书是字体的代码，你需要什么字体，就输入什么字体的那几个字，如：你选择“黑体”字，则 face=黑体。size=5 表示字体大小，如：size=10 size=2 等。在“插入文字”处写上文字即可，字体效果如下：

停车坐爱枫林晚霜叶红于二月花

5、滚动图片、文字代码：

（1）、多图水平滚动代码：

这个代码是图片羽化后滚动代码，其中的数字、图片代码地址的获取见（三、常用编辑代码：1、）。需要几张图片滚动，就复制几次，如<MARQUEE><IMG title=华子编辑 style="FILTER: Alpha(Opacity=100,Style=3); WIDTH: 755px; HEIGHT: 500px" alt=华子编辑 src="图片地址"> <IMG title=华子编辑 style="FILTER: Alpha(Opacity=100,Style=3); WIDTH: 755px; HEIGHT: 500px" alt=华子编辑 src="图片地址"> </MARQUEE> 这是两张滚动图片的，依此类推。

下图“古堡丽人”为示意图，先将古堡图片用代码编辑完毕，紧接着古堡图片的代码下边，粘接链接代码 在连接代码下用水平滚动图片代码编辑丽人图片，-680表示滚动图片向上覆盖“古堡丽人”图片的高度，其效果图就是这样的：

古堡丽人

（2）、多图水平重叠滚动代码（百叶窗）：

这是重叠滚动图片代码，不羽化，红色的数字70%表示重叠滚动的几张图片的总宽度是空间宽度的70%，100%将充满空间的宽度，下边黄色的代码是复制上边代码的一部分，表示两张图片重叠滚动，如三张则复制三次，依此类推。要注意的是：重叠滚动图片与上边的图片用代码连接时， 中的数字250 一般为为横坐标的作用，数字越小，越偏向左边，-600的数字当然要根据你的设计意图调整，数字可大可小。也可以加上 代码，放在上一代码的上、下边进行微调。（下图为四张图片重叠滚动效果）

（3）、文字滚动代码：

水平滚动文字代码：<MARQUEE>写文字</MARQUEE>

这个代码是水平滚动文字代码，写上文字即可，调整文字大小、颜色时，点击“HTML按钮”，按普通编辑日志时的操作即可。滚动图片、文字的上下位置的调整见（三、常用编辑代码：3、），其他代码（图片、文字）上下位置的调整依此类推。另外，上边介绍的是单行、向左滚动的文字代码，对这个代码稍加改动，就可以变为多行向左滚动的代码，具体操作见下列代码：

这个代码是向左滚动四行文字的代码，和单行滚动代码的区别，一看便知，代码中 的作用是一个行间距，两个行间距则复制两次，依此类推；那么，多行滚动也是复制代码中的写文字 部分，粘贴在代码中第一个“写文字”的前边即可。多行滚动文字示意如下图。

向上滚动文字代码：<DIV style="WIDTH: 580px; WRITING-MODE: tb-rl; HEIGHT: 200px" align=center><MARQUEE><DIV style="WRITING-MODE: lr-tb" align=center>写文字</MARQUEE>

这个代码是向上滚动的文字代码，写上你要编写的文字，点击“HTML按钮”返回到普通编辑模式，点击文字处，就会出现一个边框，在边框内用鼠标插入符按编排文字的方式，调整文字的左右上下的位置以及用上部的功能按钮调整字体、大小、颜色，也可在边框内编写文字，代码中的 580是边框的宽，200是文字上升的高度，文字的上下位置的调整以及覆盖在图片上的操作见（三、常用编辑代码：3、）链接代码。

自古逢秋悲寂寥

我言秋日胜春潮

晴空一鹤排云上

便引诗情到碧霄

四、动感影集、Flash编辑代码：

1、不带横、纵坐标的代码：

红色的代码（动感影集代码）是粘贴Flash、动感影集等代码的区域，数字900是宽度，870是高度，你可以复制粘贴试试，就会一目了然。

2、带横坐标、纵坐标的代码：

红色的数字150是横坐标，500是纵坐标，625是视频宽度，525是视频高度尺寸，红色的代码是视频代码。用这个代码编辑Flash，坐标位置很方便调整。

五、用边框形式编辑日志：

1、纯边框的形式：

此种形式比较简单，在代码编辑日志的状态下，将复制好的边框代码拷贝（粘贴），点击“HTML按钮”，就会看到边框，将鼠标插入符点击到边框内，此时的边框，如同信纸的作用。这样，在普通编辑日志的状态进行编辑，输入文字、粘贴图片等。这时看到的边框实际尺寸很小，当你输入文字和粘贴图片后，边框就会随之变大，有的也可以在边框代码中，事先调整好边框的宽、高、颜色等。在边框中编辑日志，日志上方编辑栏内的各项编辑功能均可使用，如字体大小、颜色、添加Flash等。

2、上下拉文边框形式：

与纯边框的编辑形式基本相同，编辑后的上下拉文边框形式新颖、占用日志空间较少，大部分的内容隐藏于边框内，通过拉动边框拉钮来阅读日志。上下拉文边框的尺寸，可以在普通模式的日志编辑状态，点击边框四周并将鼠标移到拉框的四角，可拉伸边框，使其尺寸适合你的日志后，在拉文边框内编辑日志即可。

用以上两种边框形式编辑日志时，如仍用代码编辑，则也要在代码编辑日志模式状态进行，其编辑步骤同上述几节中的编辑方法。在纯边框的形式编辑代码图片时，可以将图片代码紧贴在纯边框代码的下边粘贴，如需调整图片在边框内的上下、左右位置，可在两个代码中间用链接代码调整。也可以在边框外，先将图片用代码编辑完，点击“HTML按钮”返回普通模式，看到图片后，剪切并粘贴在边框内，此方法更适于上下拉文边框。

边框内的代码就是这个上下拉文边框的代码，复制即可使用。

<div align=center>
<div style="BORDER-RIGHT: #e78d08 1px solid; BORDER-TOP: #e78d08 1px solid; SCROLLBAR-FACE-COLOR: #f8a52a; OVERFLOW: scroll; BORDER-LEFT: #e78d08 1px solid; WIDTH: 480px; SCROLLBAR-SHADOW-COLOR: #ff0000; COLOR: blue; SCROLLBAR-3DLIGHT-COLOR: #ff0000; SCROLLBAR-ARROW-COLOR: #ff0000; SCROLLBAR-TRACK-COLOR: #ff0000; BORDER-BOTTOM: #e78d08 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #a56506; HEIGHT: 124px; SCROLLBAR-: #a56506">
这里输入文字</div></div>

单图音画代码源：

六、用代码制作单图音画：

1、单图音画顾名思义就是在一张较大的背景图上，用代码制作的方式将几张不同的图片，分别放于背景图片上的不同位置，共同组成一张多图的音画效果的图片。背景图片如同存放相片的镜框，在镜框里不同位置放上你心爱的照片。下图是用五张图片组成的“单图音画”，是不是有点像用 ps 制作的音画效果呢？

2、单图音画（上图）的制作代码及流程：

注：为节省日志篇幅，以上代码中将图片的地址代码省略去了，如果大家想模拟操作的话，可以点击上图中的各个图片，看到显示的图片以后，再右键点击这个图片，就会看到一个对话框，再点击对话框最下边的“属性”，看到图片地址代码后，复制粘贴即可，但是别忘了对号入座，这样的练习，可以帮助你掌握制作的技巧。另外单图音画作品的制作代码源（包括图片的地址代码）隐藏于上边黄色的拉文边框中播放器的下边，你可以复制后，在代码编辑状态粘贴，再点“HTML按钮”或预览，就可看到，自己调整其中的相关数字，看看有什么变化，这也是一种练习的方式。掌握了单图音画的制作技巧，其实，你就基本学会了代码编辑日志。

以上的四个代码与上边几节讲的图片羽化代码有所不同，第一个代码是做背景图片的代码，为使背景图片清晰，此代码没有羽化功能；中间的三个代码是羽化图片代码，不同的是，代码中含有横、纵坐标的定位代码，如：LEFT:120px 表示图片自左侧边缘向右移动120个尺寸，数字越大，图片越靠右， TOP:350px 表示图片自日志的上边缘向下移动350个尺寸，数字越大，越靠下边。

再提醒一下：代码中设置图片的尺寸大小用：width= 870（宽度）、 height= 700（高度）。代码中表示羽化功能的代码：FILTER: alpha (opacity=100,finishopacity=0,style=2); 前边已经讲过它的数字功能，这里讲一下0 的作用，从0~100可以调整，但数字越大，图片越失去羽化的功能，直至不羽化。红色的字体可以更改变动，其余的代码、符号、引号及间距等绝不能删除、或改变，请大家制做的时候看清楚，不要遗漏代码、符号等。

七、颜色代码在线查询器及使用方法：

1、用鼠标在左侧大框里选位点点，右侧就出现所选的颜色及颜色代码。

2、双击代码下的长方框，选定的颜色即保存在下面的10个小正方框里。

3、最下端左侧的第一个按钮为鼠标点击选色，第二个按钮为滑动选色。

八、代码编辑中的几点说明：

1、代码编辑后，或由于文字颜色的调整、图片的对中等原因，原来的代码中会多了一些代码符号，这是代码编辑程序针对你的调整自动生成的，不影响编辑的效果，不用去管它，多编辑几次就会分辨出来。

2、 这个代码就是上边说的连接代码，还有两个用途，放在最上边时，可以调整边框日志的边框距最上边的距离，放在边框代码的上边，调整尺寸即可。还可以隐藏qq播放器，具体操作是这样的，点击“HTML按钮”后的普通模式状态下，插入播放器，再回到代码编辑状态，找到播放器的代码（这时播放器自动显示成代码），将此链接代码置于播放器代码的下边，调整-600的尺寸（这里-600 是我任意写的），比如打入-100或-50 等，再返回或预览，看看播放器是否隐藏了，多调整几次，就可达到隐藏的目的。有些网友喜欢将播放器放在日志的上边，这时需将链接代码放在播放器代码的上边进行调整。

3、日志中的Flash编辑，可以用上边提到的专用代码，也可以在普通编辑模式的状态下，按普通日志插入Flash的操作进行编辑。

4、日志的正文在普通编辑状态下编写，如果在两张图片之间插入文字，就要将两张图片间的连接代码前的 - 号去掉，再点“HTML按钮”，这时，上下两张图片就会分开，再进行打字即可。

5、图片羽化后会呈透明状态，如需重叠，要考虑哪张图片放在上边，重叠后放在上边的图片更清楚，文字更要放在图片的上边，否则文字就会不清楚，在用代码编辑两张图片时，清楚的图片代码或文字放在另一张图片代码的下边，之间用代码连接，一般要写入- 号，数字根据重叠的多少而定。

6、图片羽化代码、动画图片羽化代码可以互换使用，但这两个代码最大的区别是一个不带横、纵坐标，一个带有横、纵坐标。

7、编辑日志用的图片应上传到自己的相册，再获取代码，有的网站的图片代码可以直接使用，但也有腾讯不支持的网站，其图片编辑完成后，往往不显示。

编后： 还有不羽化滚动图片代码，向上滚动图片代码，各种文字编辑代码、文字和边框颜色代码（也可使用上图颜色查询器选择）、各种派生代码等，编辑起来都是大同小异。以上的代码足以满足编辑代码日志的要求，在编辑中不断摸索，触类旁通，很快就会得心应手。不知我所写的是否清楚，腾讯2011年9月升级后，我按新版代码编辑模式进行了相应的修改，文中难免存在问题，华子愿与朋友们共同交流、探讨。