用FrontPage 2003软件做HTML代码帖基础教程 - 火柴天堂门户网-众人拾柴火焰高,共创温馨和谐社区

登录信息

本版精华

	各种式样的播放器及代码
	N久前的收集：FLASH代码
	漂亮的分割线大全

本版热门

	用FrontPage 2003软件做HT...
	漂亮的DIF动态图片（不断添...
	[l转贴]学用HTML制帖
	【静态滤镜】为图片加些特...
	收集整理几个自己比较喜欢...
	两款播放器
	音乐连续播放的制作
	[扫盲]发帖傻瓜代码
	送大家一本CSS书籍
	75首古诗flash，很精美的

网页游戏

文章内容 Article Content

首页 >> ≡≡ 休闲娱乐 ≡≡ >> 『音乐天堂』 >> 『音画教学』

用FrontPage 2003软件做HTML代码帖基础教程

作者选择坚强查看 2895 发表时间 2007/4/29 02:19 【论坛浏览】

第一课怎样制作图文帖的边框

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，到此为止，我们整个帖的边框就完成了。

图八

图九

图十

图十一

序号	评论者	共有评论 14 【论坛浏览】【发表评论】	评论时间

1	选择坚强	第二课插入图片及插入透明FLASH 在FP里插入图片是很容易的，你只要点菜单上的插入----图片，就可以选择图片的来源了，见图12。图十二为了定位整齐，我建议在插入图片前先插入一个表格，然后在表格里插入图片。如果想在图片上添加透明的GIF、FLASH，就一定要先画表格了。本例就是在图片上加上了透明的GIF图片，也可以换成透明的FLASH，现在开始讲解。本例插入了2张图片，一张漂亮MM的是作为了背景图，因为本例透明GIF、透明FLASH都是在背景图上显示的，另一张是透明的GIF图，现在看看漂亮MM图是怎么变成背景的，先要了解这张图的标准尺寸，本例图片尺寸为300400，所以要先画一个300400的一行一列表格，表格用图片做背景，设置如图13 。图十三注意看图上的箭头，宽和高全选择了像速，这样才能准确设置表格的大小，下面一个箭头就是做为背景的漂亮MM图的链接，点确定后看看效果，见图14，这样一个以漂亮MM为背景的表格就画好了。图十四 QUOTE: 再看看怎么插入透明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	2007/4/29 02:21

2	阳光不绣	选择坚强你真好！这下一目了然了！	2007/4/29 02:32

3	选择坚强	第三课怎么插入字和滚动字幕在FP里插入字是很容易的，一般在光标的位置输入字就可以了，不过为了准确定位，我建议要养成把字插入在表格里的习惯。看看图片的上方的几行字是怎么上去的，先在图片上方插入一个一行一列的表格，表格属性见图21。图二十一确定后效果见图22 图二十二在图22里，我们可以看见一个虚线的表格边框线，你可以点到预览看看，在预览里是不显示的。如果你不希望表格里的字居中，那么你就可以输入字了；如果想把字居中，那就还要设置这个表格的单元格属性，见图23 图二十三确定后光标就居中了，然后，在这个表格里输入的每一行字全部都是相对表格居中的。字输入完毕，就可以设置字的属性了，选中需要设置的字，点右键找到字体点开，见图24。图二十四本例字体设置见图25，确定后效果见图26。到此字的插入就完成了。图二十五图二十六 QUOTE: 现在看看怎么让字滚动，我们在图片下面做一行滚动字幕“影画世界教学帖一”，首先和插入一般字体一样，先插入一个一行一列的表格，如果选择菜单栏里插入----插入WEB组件，见图27 图二十七点开，见图28 图二十八左面选动态效果，右面选字幕，然后点击完成，会出来一个设置字幕属性框，见图29，图二十九点开样式后，我们还需要点开格式设置字的属性，见图30，全部确定后效果见图31，在设计页里是看不到字动的，你可以切换到预览页看效果。到此左右移动的字幕就完成了。图三十再看看怎样让字幕上下移动，因为软件里没有上下移动的选择，所以就需要自己手动到代码里去找，如果你一点不懂代码，也很简单，软件默认从右往左移动，当你选择左的选项时，你在代码里是找不到方向代码的，所以在开始选择字幕属性时要选右，见图32 图三十二确定后，用鼠标选中放字幕的表格，然后切换到代码页，见图33 图三十三在代码页可以看到被蓝色选中的代码，见图34 图三十四这些就是滚动字幕的代码，我们需要找到控制放想的代码，把方向改成up(上)或者down（下）图35 图三十五效果图：	2007/4/29 02:33

4	选择坚强	第四课怎么插入帖子的背景和音乐我们现在看到的帖子四周背景是空的，例帖中有很漂亮的花背景，现在就看看怎么做的，其实是很简单的，我们学到现在还没设置过网页属性，这些背景和音乐都是在网页背景里实现的，现在开始设置。在帖子上点右键，找到网页属性，见图36 图三十六点开后，一共有5页可以设置，在常规页里可以添加帖子的音乐，见图37 图三十七在格式页里添加背景，见图38，在高级页里设置帖子4面的距离，见图39，本例上下各设置了50，其他的一般用默认。图三十八图三十九到此为止，一个用FP2003做的简单的音画帖就完成了。	2007/4/29 02:36

5	阳光不绣	你是自学的！还是就做这个工作？	2007/4/29 02:38

6	lzwldn	我喜欢用dream了~ [s:80]	2007/4/29 05:42

7	popmap	偶也比较喜欢用Dreamweaver8	2007/4/29 10:37

8	刺兔	FrontPage 2003 都不知道这个以前是干嘛用的呵呵这下好玩了这个工具作会比自己搜集材料制作要快得多吧 Dreamweaver8 也只是听说过，不是学网页制作这方面的，所以这些东西很少接触吧很有可能来的各位也都是自学的，都是高手，努力吧。。	2007/4/29 23:46

9	潇洒一枫	FrontPage 2003这个也是office工具里的一种，做网页，当然包刮音画了，可以对代码不熟悉的人比较实用的．．	2007/4/30 14:50

10	anixix	我也使用DW8 绿色版本的	2007/5/3 12:24
共有评论数 14 每页显示 10 页码 1/2 \|< << 1 2 >> >\|