发新话题
打印

[教程技巧] 教你用软件做HTML代码以及漂亮帖子

教你用软件做HTML代码以及漂亮帖子

引用:
FrontPage 2003简体中文版打包下载
下载解压后点击图标

安装;
序列号:WFDWY-XQXJF-RHRYG-BG7RQ-BBDHM
2、安装成功后,打开文件夹里面有一个这样的图标

就是FrontPage 2003软件图标
第一课 怎样制作图文帖的边框
1、 首先打开Microsoft Office FrontPage 2003(以下简称FP2003),点到设计页,见图1,先插入表格,在软件里做帖一定要熟练掌握表格,要养成用表格定位的好习惯。


图一

2、打开菜单拦里的表格----插入----表格,点击。见图2



图二


3、点击后出来表格属性的设置框,如图设置整个帖的外边框,见图3



图三


下面来介绍一下表格属性的具体设置内容:如图4


图四

(1)设置表格的行数,本例设置的是一行;
(2)设置表格的列数,本例设置的是一列;
(3)设置表格的对齐方式,本例设置了居中,大家可以根据自己的需要设置;
(4)这里设置表格的宽度,有2种选择,当你需要一个固定大小的表格时,选像素单位,否则就选用%单位。本例设置了70%宽度,宽度下面设置的是高度,和宽度同样设置,一般软件做帖不设置高度;
(5)单元格的衬距和间距,衬距是指表格里的内容和表格边的距离,间距是指弹元格与单元格间的距离,这个只要大家多试几次就会明白,本例选了4;
(6)设置边框先条的粗细和颜色,大家也可以自己试着换个种数字和颜色看看效果。这样能加深理解,本例选边框粗细为1,颜色为黑色;
(7)设置亮边框和暗边框的颜色,亮边框一般指表格中朝阳的部分,暗边框一般指表格的阴影部分,这个大家可以随便设置下看看效果,本例没有选颜色;
(8)设置背景,有2种选择,一个是颜色,一个是背景图片,本例是设置的背景图片,可以点开浏览选你硬盘里的图片,也可以直接填入图片链接,本例填了图片的链接;
(9)别忘了点上折叠表格边框。
好了,表格属性一般就设置这些,其他的一般用默认,希望大家多画几个表格,试试各种不同的设置,对以后做帖会有好处的。


按照图4的设置,确定后就插入了一个金黄色背景的表格,见图5,这就是整个贴的外边框,也就是我们看到的最外面的一个金边;




图五


4、 例帖中最外面的金边是很窄的,和我们插入的表格看上去不一样,这就需要在前一个表格里再插入一个以红色为背景的表格,其实帖子的边框不管多复杂,都是一个一个表格套出来的,所以说熟练掌握表格是很重要的。现在我们在金色的表格里再插入一个表格,把光标点在表格内,然后重复第2第3步,表格设置见图6,这里就不多说了,大家按照图片设置,确定后可以看见在金色的框里又插入了一个以红色为背景的表格,见图7。


图六

图七

以此类推,例帖里还需要再插入2个表格才能有2条金边的效果,大家最好自己试着做,2个表格的属性设置见图8、图9,插入图8后的效果见图10,插入图9后的效果见图11,到此为止,我们整个帖的边框就完成了。



图八



图九


图十


图十一

[ 本帖最后由 臭弟 于 2006-10-20 09:52 编辑 ]
如果灿烂只是一时,我宁愿平淡一生。如果相见不能永远,我宁愿选择分离...

TOP

第二课 插入图片及插入透明FLASH

在FP里插入图片是很容易的,你只要点菜单上的插入----图片,就可以选择图片的来源了,见图12。



图十二为了定位整齐,我建议在插入图片前先插入一个表格,然后在表格里插入图片。如果想在图片上添加透明的GIF、FLASH,就一定要先画表格了。本例就是在图片上加上了透明的GIF图片,也可以换成透明的FLASH,现在开始讲解。 本例插入了2张图片,一张漂亮MM的是作为了背景图,因为本例透明GIF、透明FLASH都是在背景图上显示的,另一张是透明的GIF图,现在看看漂亮MM图是怎么变成背景的,先要了解这张图的标准尺寸,本例图片尺寸为300*400,所以要先画一个300*400的一行一列表格,表格用图片做背景,设置如图13



图十三注意看图上的箭头,宽和高全选择了像速,这样才能准确设置表格的大小,下面一个箭头就是做为背景的漂亮MM图的链接,点确定后看看效果,见图14,这样一个以漂亮MM为背景的表格就画好了。



图十四


再看看怎么插入透明FLASH,同样把光标放在表格内,点菜单上的插入----图片----FLASH影片,插入FLASH后,一定要设置FLASH的属性,因为你插入的FLASH是不透明的,一定要设置成透明才行,在FLASH上点鼠标右键,选择FLASH影片属性,见图16,点开,如图17设置,注意箭头的指向,(1)一定不能忘记,透明前要打勾;(2)(3)设置FLASH的大小,设置的时候可以把(4)前面的勾去掉,这样你才可以任意设置FLASH的大小数值。现在再回预览看看~是不是透明FLASH效果出来了?见图18,到此图片上加透明GIF、透明FLASH就全完成了。



图十六



图十七



图十八最后还要说下透明GIF和透明FLASH是怎么定位的,一般表格里的内容定位需要设置单元格属性,所以透明GIF和透明FLASH的定位也需要设置单元格的属性,在表格里点鼠标右键,点开单元格属性,见图19,设置见图20,和表格属性的设置差不多,大家可以多数值几次看看效果,本例只设置了居中。







图十九




备注:说明一下的是以上插入透明FLASH需要上传空间才可使用! 如要直接在论坛上使用代码请直接套用以下代码:

图片插入透明FLASH

CODE:
[Copy to clipboard]
引用:
</FONT></P><table cellpadding="0" cellspacing="0" width="500" height="426" align="center" background="图片地址" border="0"><tr><td><embed src="FLASH地址" width="500" height="426" type="application/x-shockwave-flash" wmode="transparent" quality="high"></td></tr></table>
效果图:
[size=+0]
Flash: http://bbs.xxjy.net/UploadFile/2005-7/2005723105345934.swf

[ 本帖最后由 云淡风轻 于 2006-9-7 00:21 编辑 ]
如果灿烂只是一时,我宁愿平淡一生。如果相见不能永远,我宁愿选择分离...

TOP

第三课 怎么插入字和滚动字幕

在FP里插入字是很容易的,一般在光标的位置输入字就可以了,不过为了准确定位,我建议要养成把字插入在表格里的习惯。看看图片的上方的几行字是怎么上去的,先在图片上方插入一个一行一列的表格,表格属性见图21。







图二十一确定后效果见图22





图二十二在图22里,我们可以看见一个虚线的表格边框线,你可以点到预览看看,在预览里是不显示的。如果你不希望表格里的字居中,那么你就可以输入字了;如果想把字居中,那就还要设置这个表格的单元格属性,见图23



图二十三确定后光标就居中了,然后,在这个表格里输入的每一行字全部都是相对表格居中的。字输入完毕,就可以设置字的属性了,选中需要设置的字,点右键找到字体点开,见图24。



图二十四本例字体设置见图25,确定后效果见图26。到此字的插入就完成了。



图二十五



图二十六

QUOTE:

现在看看怎么让字滚动,我们在图片下面做一行滚动字幕“影画世界教学帖一”,首先和插入一般字体一样,先插入一个一行一列的表格,如果选择菜单栏里插入----插入WEB组件,见图27



图二十七点开,见图28



图二十八左面选动态效果,右面选字幕,然后点击完成,会出来一个设置字幕属性框,见图29,



图二十九点开样式后,我们还需要点开格式设置字的属性,见图30,全部确定后效果见图31,在设计页里是看不到字动的,你可以切换到预览页看效果。到此左右移动的字幕就完成了。



图三十



图三十一效果图:

当他不爱你的时候

请不要与他诉说你的悲伤

也许这对你不过是一种习惯


Flash: http://gb.qjinfo.com/userfilepath/yaoyao/fpjx/2T.swf

影画世界FP教学帖


再看看怎样让字幕上下移动,因为软件里没有上下移动的选择,所以就需要自己手动到代码里去找,如果你一点不懂代码,也很简单,软件默认从右往左移动,当你选择左的选项时,你在代码里是找不到方向代码的,所以在开始选择字幕属性时要选右,见图32



图三十二确定后,用鼠标选中放字幕的表格,然后切换到代码页,见图33



图三十三在代码页可以看到被蓝色选中的代码,见图34



图三十四这些就是滚动字幕的代码,我们需要找到控制放想的代码,把方向改成up(上)或者down(下)图35



图三十五效果图:

当他不爱你的时候

请不要与他诉说你的悲伤

也许这对你不过是一种习惯


Flash: http://gb.qjinfo.com/userfilepath/yaoyao/fpjx/2T.swf

影画世界FP教学帖

备注:字体的滚动也可以直接用代码套用:(请看置顶帖子新手发帖帮助的最后一项:常用特效字设置)
如果灿烂只是一时,我宁愿平淡一生。如果相见不能永远,我宁愿选择分离...

TOP

第四课 怎么插入帖子的背景和音乐

我们现在看到的帖子四周背景是空的,例帖中有很漂亮的花背景,现在就看看怎么做的,其实是很简单的,我们学到现在还没设置过网页属性,这些背景和音乐都是在网页背景里实现的,现在开始设置。在帖子上点右键,找到网页属性,见图36



图三十六点开后,一共有5页可以设置,在常规页里可以添加帖子的音乐,见图37



图三十七在格式页里添加背景,见图38,在高级页里设置帖子4面的距离,见图39,本例上下各设置了50,其他的一般用默认。



图三十八



图三十九备注:直接套用音乐代码请看新手帮助音乐使用方法
如果灿烂只是一时,我宁愿平淡一生。如果相见不能永远,我宁愿选择分离...

TOP

发新话题