朝鲜神曲青菜啊:怎样用FrontPage软件编辑HTML帖子 | 音画代码学堂 - 中国音画家园 - Po...****

怎样用FrontPage软件编辑HTML帖子
新手按顺序看完此篇已经音画入门
本篇素材源于网络:部分修改
首先必须有一些必要的辅助工具。
1、最简单的首推每台电脑附件里肯定有的“记事本”。
记事本是一个非常有用的工具，我们编辑好的代码可以贴在记事本里，保存的时候默认格式为文本文件（txt格式），我们可以随时修改并保存在其他地方，以免重装系统造成丢失。
如果我们想看看编辑好的HTML代码是什么模样，可以点“记事本”的“另存为”，并在文件名的后面加上后缀“.html”，保存后再点击打开，你可以看到文件不是被“记事本”打开而是被“浏览器”以网页的方式打开了。
记事本还可以用来编辑音乐连播文件。
记事本还有个更重要的作用就是：把HTML代码张贴在记事本里，保存为格式（.html格式），然后上传到本论坛作为附件，而当你点击附件的链接时，你看到的居然不是文字而是网页！这个功能常常被HTML编辑高手用来做无空间个人网页，我们在接下来的课程将重点介绍这个非常好玩的做法。
2、还有就是台电脑附件里肯定有的“画图”。
画图虽然功能不强大，但可以对图片做基本的修改，比如屏幕截图我们打算在上面加上一些文字或做一些裁减，画图就是最好最简单的工具了。
过眼云烟 2009-02-10 22:10
本部分内容设定了隐藏,需要回复后才能看到
过眼云烟 2009-02-10 22:12
本部分内容设定了隐藏,需要回复后才能看到
过眼云烟 2009-02-10 22:22
编写一个最简单的单格表格：

需要编写在表格内的内容编写在这里

这段代码的含义是：这是一个边框粗细为1像素、宽300像素、高50像素的单格表格，表格里有文字“需要编写在表格内的内容编写在这里”。
如果是家园直发应该这么写:

需要编写在表格内的内容编写在这里

为了便于显示我在边框上加了颜色#FF0000和性质实线solid
效果：
需要编写在表格内的内容编写在这里
过眼云烟 2009-02-10 23:23
所谓万丈高楼平地起，这段代码虽然简单，却是一切代码贴的基础。再复杂、再绚丽的代码贴，都是从这样开始出发的。
我们可以再进一步实验：
1、点“代码”按纽；
2、把代码“

需要编写在表格内的内容编写在这里

”粘贴进去；
3、点“设计”按纽。
这时，我们可以看到，FrontPage已经把代码转化成了“所见既所得”的模样：
需要编写在表格内的内容编写在这里
然后把鼠标放在格子的边沿，我们可以看到鼠标变成了箭头摸样,这时再次按下左键拉动，可以看到格子出现变化。可以改变表格大小
我们还可以把格子里面的文字重新编辑，比如修改成“向朋友们问好！”，并修改字体、大小、颜色、置中等（这些修改都在编辑栏上方有相应的工具按钮），比如修改成这样：
向朋友们问好！
然后再点“代码”，我们将看到，FrontPage已经把我们刚才的操作自动修改好了相应的代码：

向朋友们问好！

第一行是表格的样式，“高120，宽400，框1像素”；
二、三、四行表示表体、一行、一列；
五、六、七、八、九行分别规定了字体居中、字体、颜色、加粗和字号。
十一至十九行分别是第一至第九行的结束语句，注意看，从里到外，标签是成对出现的。
[attachment=3913]
过眼云烟 2009-02-10 23:44
1、准备好素材，也就是准备填充在边框空格内的背景图片。
往边框里填充背景图片有个特点，不管图片大小，HTML会自动将空格填满，因此你不需要担心图片的大小问题，反而因为要考虑网络传输问题，图片小点还好。你可以自己找其他图片代替。
图片地址：http://image9.360doc.com/DownloadImg/2010/05/0811/3132759_9.jpg
图片模样：
2、打开FrontPage，点“设计”，在顶部工具栏里点“表格”-“插入表格”
[attachment=3955]
点“表格”，出现如下对话框：
[attachment=3957]
修改“行数”、“列数”为“1”；修改“单元格衬距”、“单元格间距”为“0”；在“指定高度”方框打勾，选“像素”，修改“400”（修改这项的意义是在边框里面没有内容时能保存一定的高度）；选择“背景颜色”（目的是当背景图片地址失效后边框里面依然有颜色而不会显得难看）；在“使用背景图片”方框里打勾，把我们准备好的背景图片地址填进去，确定。
[attachment=3956]
你将看到，FrontPage的“设计”栏里出现了你刚才设计的边框了。
[attachment=3958]
过眼云烟 2009-02-11 21:23
3、接着点FrontPage的“代码”凸舌，你将看到你刚才的操作已经变成代码了：













但你可以把网页编辑所需要的代码去掉（因为我们毕竟不是编辑网页），只要保留表格部分的代码即可：





把上面表格重新编写下,就可以在家园直接发了





(注意:发帖的时候图片地址里**去掉)
效果是
过眼云烟 2009-02-13 15:32
4、看一组代码:




但是我们所举例子的边框是带有凸线，并且是越过发帖区的宽屏帖的，这样我们就需要对边框做样式上的调整。
在FrontPage“设计”栏里编好的边框上右击，在出现的对话框里点“表格属性”，出现“插入表格”（上面有图）对话框。点对话框下面的“样式”按钮，出现“修改格式”对话框。
[attachment=4044]
注意看，“ID”栏里有“table1”字样，表示我们将要修改的表格样式是对table1表格修改的。（我说这段话的意思是，大家一定要养成给表格起名字的习惯，这样在修改时有时很方便。）
在“修改格式”对话框里点“格式”按钮，将出现下拉对话框，一共有5个可选（字体、段落、边框、编号方式、定位）。我们先点“边框”，出现“边框和底纹”调整对话框。
[attachment=4045]
在对话框里的“设置”栏点“方框”，在“样式”栏里点“凸线”，选择颜色，修改宽度为10，衬距全部为20，确定。
这时，你将看到FrontPage已经给刚才的边框加上凸线了。点“代码”，把代码复制下来：





(注意:发帖的时候图片地址里**去掉,我这里是为了便于教材显示)
过眼云烟 2009-02-13 15:35





效果是:
过眼云烟 2009-02-13 22:51
5、宽屏的实现。
这是一个经验值。一般来说，论坛发帖区左边的头像信息栏一般宽220像素，因此我们需要把帖子向左偏移220像素，然后把帖子的宽度修改为980像素。同时为了露出发帖人的头像，又要把帖子向下偏移140像素。还有就是，为了防止底部的发帖人的签名档被遮，还需要在帖子的最后加上至少8个
换行。
重复前面的样式调整过程，点“修改格式”对话框里的“定位”，出现“定位”对话框。
在“定位”对话框里的“定位样式”里点“相对”，在“位置与大小”里的“左边”框里填上“-220”，在“宽度”框里填上“980”，在“顶部”框里填上“140”，确定。
[attachment=4098]
这是，你在 FrontPage的“设计”栏里看不到变化，但你点“预览”，你将看到边框偏移向左向下了，没关系，我们正是要的这个效果。
还有就是记住在代码后面加上8个换行代码“
”。
完成后的代码如下：













效果是:
过眼云烟 2009-02-14 21:57
6.第二层边框的制作:
第一层边框做好了，等于这个帖子有了基础。我们可以接着在这个基础上继续加上其他的边框。
接下来我们学习加第二层边框。与做第一层边框相比，我们不需再做“宽屏”设置，因为自此以后的边框都搭载在第一层边框之上了。
假设我们从头开始，所有的编辑都在FrontPage上实现。
打开FrontPage，把“代码”里的所有默认代码删掉，把前面我们编好的第一层边框的代码填进去：













提示：如果你在编辑过程需要随时“预览”编辑效果，可把上面代码第一行的“left:-220px;”临时改为“left:0px;”，“top:140px;”临时改为“top:0px;”，最后面的“
”删掉，编辑完后再改回来。
点“设计”，可以看到代码已被解析为图象了，而我们的目的，就是将要在既有表格里面插入新的表格。
请注意，这时我们既有的表格（边框）的单元间距为0，如果我们直接插入新的表格，那么新表格将紧挨老表格，因此，在插入新表格前要设置老表格的间距，假设设置为25。
在既有表格上右击，在出现的对话框里点“表格属性”（前面有图），出现“表格属性”调整对话框，在对话框里的“单元格间距”里填上“25”，“单元格寸距”里填上“0”，确定。如图:
[attachment=4116]
代码:




这是，你将在FrontPage的“设计”栏里看到既有的边框里面出现一道白色的虚线框，这个虚线框告诉编辑者可填充内容在虚线框以内。
过眼云烟 2009-02-14 22:29
准备第二层边框的背景图片。
图片地址：http://www.**168cctv.net/jiaocai/2.jpg
图片模样：
在虚线框里单击，点顶部菜单的“表格”-“插入表格”-“表格”，出现“插入表格”对话框。这个过程与前面编辑第一层边框的过程是基本一样的，所不同的是，我们对这层边框做了“亮边框”和“暗边框”设置。
什么叫“亮边框”和“暗边框”？
一个边框有四个边，所谓“亮边框”指边框的右边和下边的边框，而“暗边框”则是指边框的左边和上边的边框。如果我们给“亮边框”加上较为明亮的边框颜色，“按边框”加上较为灰暗的边框颜色，这样就回营造一种仿佛这层边框与下层边框相比较为“凸出”或较为“凹陷”的立体感觉，增强帖子的观赏效果。
[attachment=4117]
按图做好设置后，确定。
这时，点“代码”，我们将看到新的代码：





其中兰色代码部分就是插入的第二层表格,把第一层表格left:0px; top:0px改为left:-220px; top:140px,家园里发帖把 border="0"写为 style="border:0px",代码最后面加上8个换行代码“
”。(注意:发帖的时候图片地址里**去掉,我这里是为了便于教材显示)
显示的效果是:
过眼云烟 2009-02-14 23:01
依次类推,设计第三层表格的代码是:





其中兰色代码部分就是插入的第三层表格,把第一层表格left:0px; top:0px改为left:-220px; top:140px,家园里发帖把 border="0"写为 style="border:0px",代码最后面加上8个换行代码“
”。(注意:发帖的时候图片地址里**去掉,我这里是为了便于教材显示)
显示的效果是: {中间插入文字代码

内容:中国音画家园欢迎你} 内容:中国音画家园欢迎你
表格就说到这里,在家园里最好的代码写作方式参照http://www.168cctv.net/read.php?tid-5021.html
过眼云烟 2009-02-16 15:07
接下来的工作，就是在边框的最里层加入我们打算呈现给读者的内容，也就是代码帖的其他4个元素：文字、图片、声音、影象。
我们继续把这个例子做完他。
准备图片，地址：http://www.**168cctv.net/jiaocai/hongqi1.gif
图片的模样：
这是一张背景透明图片，目的是让图片粘贴到边框里面时能和背景融合在一起。
把前面我们最终得到的边框代码

内容:中国音画家园欢迎你

填在FrontPage的“代码”栏（记得在填入前把默认的代码全部删掉或者填在之间），点“设计”，将看到这个边框的设计状态。
[attachment=4143]
在打算插入的图片上右击，点“复制”，然后在FrontPage的边框里面右击，点“粘贴”，可看到图片已粘贴到了边框里面：
我们看到图片位置不对，居左中，可这样调整：在边框里面右击，点“单元格属性”，出现“单元格属性”调整对话框：
[attachment=4144]
在对话框的“水平对齐方式”里选“居中”，“垂直对齐方式”里点“顶端对齐”，确定，这时，粘贴的图片将移动到边框的上中部。为了不让图片过于靠近顶部，可在图片左边点一下，回车一次，让图片走下一点。
再在图片右边单击，回车几次，在你打算写字的地方编辑文字，选择编好的文字，在顶部菜单栏选择文字的字体、字号、颜色：
[attachment=4145]
做到这里时的显示的代码是

内容:中国音画家园欢迎你

效果是内容:中国音画家园欢迎你
过眼云烟 2009-02-16 15:45
到这里，可以加入音乐了。我打算加入的音乐是《爱琴海》。
音乐地址：http://www.168cctv.net/jiaocai/aiqinhaii.mp3
加入音乐有两种方式：一种是以背景音乐的方式加入，另一种是以播放器播放的方式加入。
背景音乐方式加入：
在FrontPage“设计”栏框架里右击，点“网页属性”，出现“网页属性”对话框。在对话框里的“背景音乐”的“位置”里填上音乐地址，确定。
[attachment=4146]
这样加入的音乐，看不到播放器，只能听，不便于控制，有时不太方便。
播放器播放的方式加入：
在打算加入播放器的位置点击出现鼠标后，点顶部菜单栏的“插入”-“Web组件”，出现“插入Web组件”对话框。
[attachment=4147]
在对话框里的“组件类型”里点“高级控件”，在“选择一个控件”里点“ActiveX控件”，然后点“下一步”。
在接着出现的对话框里点“自定义”，在“Windows Media Player”选择框里打勾（其他的可不能打勾），点“完成”，这时，你可以看到播放器已经出现在了我们刚才指定的位置。
在出现的播放器上右击，在出现的对话框里点“ActiveX控件属性”，出现“Windows Media Player属性”对话框。
[attachment=4148]
对话框一共4个凸舌，在第一个凸舌“常规”的“源文件名或URL”栏里把音乐地址填进去，“播放选项”的“自动启动”框里打钩（不打勾则手动播放），选择“播放次数”（你希望播放几次就改为几次），把“音量”拉到最大“，再点第三个凸舌“Object标志”，在“宽度”里填上“400”，“高度”里填上“45”，确定。
[attachment=4149]
这是，播放器的模样就是默认的浅蓝色播放器。
但为了让显示效果更酷，可以给播放器加上一个X光滤镜使之变成黑白色。
加滤镜的做法是在播放器代码的第一行里加入滤镜参数style="FILTER: xray()"

显示的效果是内容:中国音画家园欢迎你
',5)">
过眼云烟 2009-02-16 22:48
最后,“层”的运用
在网页制作里,我们经常运用到“层”。在“层”里我们几乎可以加任何音画元素.
假加入FLASH了。假如FLASH与前面所加的元素不同，有三个特点：覆盖性、叠加性和透明性。
为了实现覆盖性和叠加性，必须使用“层”。
我们先准备好打算覆盖在帖子上面的FLASH文件。
FLASH文件地址：
http://www.168cctv.net/jiaocai/FrontPage11.swf
在FrontPage“设计”栏框架的顶部菜单点“插入”-“层”，你将看到在帖子的随机位置出现了一个蓝绿色的小边框，小边框的左上角标注了“layer1”，这就是刚才插入的ID为“layer1”的“层”。如图。
[attachment=4155]
把鼠标放在“层”的边缘，你可以看到鼠标变成了十字箭头，表示这时可以拖动“层”。把“层”拖到帖子的左上角，再把鼠标放在“层”的由下角调整点，鼠标变成斜向双箭头，表示这时你可以拉动“层”放大到你希望的大小。你可以拉大到“层”覆盖掉帖子。如图。
[attachment=4156]
在调整好大小的“层”里单击出现鼠标后，点顶部菜单的“插入”-“Web组件”，出现“插入Web组件”对话框。在对话框的“组件类型”栏里点“高级控件”，在“选择一个控件”栏里点“ActiveX控件”，点“下一步”，点“自定义”，在出现的“自定义ActiveX控件列表”对话框里找到“Shockwave Flash Object”，在方框里打勾（其他的控件可不能打勾），点“完成”，出现“选择文件”对话框。
把前面准备的FLASH文件的某一个地址填进“文件名”栏，点“插入”。
[attachment=4157]
这时，你可以看到，刚才我们选择的FLASH文件已经插入到“层”里面了。
[attachment=4158]
FLASH插入“层”后，在FLASH文件上右击，在出现的对话框里点“FLASH影片属性”，出现“FLASH影片属性”对话框，在对话框的“外观”凸舌的“透明”方框打勾，在“宽度”和“高度”的“百分比”选项点击，把数字框里的数字全部改为“100”，“确定”。
[attachment=4159]
这时，  你可以看到插入的FLASH文件已经自动根据“层”的大小添满了。
[attachment=4160]
此时的FLASH文件由于已经在前面的“透明”做了选择，因此你虽然在“设计”模式下看到的FLASH依然不透明，但你只要点“预览”，你可以看到，FLASH已经透明了。
显示效果：(由于上面有歌了,我把歌曲地址去掉了)
',1)">
内容:中国音画家园欢迎你
',6)">
过眼云烟 2009-02-16 23:04
15楼的显示效果的代码是(发帖时,要把**去掉)

内容:中国音画家园欢迎你

兰色是"层"的部分,同样方法可以插入几个FLASH
过眼云烟 2009-02-16 23:05
最后要告诉朋友的是:每组代码之间在发帖的时候最好不要留空,否则可能变形
家园朋友,当你们按照顺序看好每个过程,原来音画入门并不复杂.
所谓修行在个人,希望每个朋友不要学我,学而不精,哈哈
斜阳 2009-02-25 15:15
来学习。谢谢云烟提供教材
冲浪 2009-03-01 15:55
谢谢老大改天一定学,
一音 2009-03-10 23:22
不一般的教程.
赵姐 2009-03-20 07:27
谢谢！！好想学习呀！
冲浪 2009-03-20 13:15
中国音画家园冲浪交作业
',2)">
',7)">
FrontPage2003改修论坛直发代码
赵姐 2009-03-21 13:05
我正在研读，前面的感觉真好，原来学过的都没有这篇写得好，看来我马上就要入门了！谢谢！！
赵姐 2009-03-22 01:44
过眼云烟管管：我已经仔细研读了这篇文章，照着，背着做了几遍，非常有收获，就按着这个式样发在博客上《..欢迎你》，发现放光的flash没有固定在层上，而是跑到了页面的的上边了。
请问老师：这个现象是层的定位问题，还是flash定位问题？这刚刚一个flash就跑了，如果再多用几个，定位问题就更要有问题了。能专题讲解一下么？谢谢啦！！！
赵姐 2009-03-22 01:50
',3)">

中国音画家园欢迎你
',8)">
赵姐 2009-03-22 01:55
[attachment=4996] 过眼云烟管管请看，冲浪总版主的发光就在自己的画格里，而我的发光已经在网页顶上了，郁闷。    
我把代码粘贴在txt文件里，能帮着诊断一下么？
过眼云烟 2009-03-22 14:38
引用
引用第26楼赵姐于2009-03-22 01:55发表的  :
[attachment=4996] 过眼云烟管管请看，冲浪总版主的发光就在自己的画格里，而我的发光已经在网页顶上了，郁闷。    
我把代码粘贴在txt文件里，能帮着诊断一下么？
你这个定位是用的绝对定位position: absolute;   而不是相对定位代码position: relative; 所以它跑到上面了,不是说绝对定位不可以,如果你一定要使用绝对定位,你就要调试"层"定位里的left: 106px; top: 111px的值
冲浪 2009-03-22 15:40
我去掉作业里的音乐吧从合了
冲浪 2009-03-22 15:46
我对比了一下你没插层FLASH在层里面.不过版本2000里面是没有这个插层的功能我在单位里的电脑也没有.
赵姐 2009-03-22 19:56
太....谢谢过眼云烟管管和冲浪总版主！！！！
我马上修改我的代码，再发来看看。
不过我还不太明白，我是插过层的，还按照教程使flash充满层的大小，还有绝对定位与相对定位在FRONTPAGE 操作中可以选定吗？还是必须要在代码方式下人工修改一下呢？
赵姐 2009-03-22 21:12
',4)">

中国音画家园欢迎你
',9)">
重新交一下作业，这是按照两位老师的指导改动的，由于改为相对定位之后，发光独占了一块画面，怎么也与红旗重合不了了，不知有什么好方法。于是，我就按照管管的提示调整了层的位置，现在倒是能把光与红旗重合起来，但是，一定还有什么玄机，我没有参透，同样的代码，在FP软件里就不是光与红旗重合的。
过眼云烟 2009-03-23 21:47
回 31 楼 大胆的做,成功就在眼前,你比我开始时,好多了
赵姐 2009-03-23 23:31
谢谢过眼云烟管管的鼓励，我会努力学习。
我想 2009-03-30 21:16
谢谢老师的讲解
我想 2009-03-30 21:22

需要编写在表格内的内容编写在这里

苏小二 2009-03-31 11:11
学习
光玉 2009-04-12 21:45
老师好！每台电脑附件里肯定有的“记事本”。这个“记事本”在哪里？我不清楚。可不要笑我，因我是个电脑盲，正在摸索。
过眼云烟 2009-04-12 21:49
引用
引用第37楼光玉于2009-04-12 21:45发表的  :
老师好！每台电脑附件里肯定有的“记事本”。这个“记事本”在哪里？我不清楚。可不要笑我，因我是个电脑盲，正在摸索。
所有程序__附件__记事本
晚来天欲雪 2009-04-13 20:28
详细，耐心，真好！要好好的学一下。
晚来天欲雪 2009-04-13 20:32
FrontPage？　我的电脑上没有，安装一下试试。
江南布衣 2009-04-14 21:29
真的很辛苦
山村老人 2009-04-15 13:46
谢谢老师的精细讲解！我是新手，来学习了。请多关照。
linger 2009-04-15 13:57

tecomdouwei 2009-04-18 15:16
来学习!占个座位!
浅浅妖 2009-05-01 15:27
原来我会的只是个皮毛,学习了.
风轻扬 2009-05-01 15:48
学习一下～
紫陌红尘 2009-05-07 14:01
为了学习只好回贴了。
小蒋 2009-05-09 14:41
我来学习了！
独孤求败 2009-05-14 17:01
认真回复学习教程啦~
查看完整版本: [--怎样用FrontPage软件编辑HTML帖子 --] [--top --]
Powered byPHPWindv7.5 SP3 Code © 2003-09PHPWind
Gzip disabled
You cancontact us