----------
接下来我们学习怎样在FrontPage的帮助下编辑前面所举例子的第一层边框。
1、准备好素材，也就是准备填充在边框空格内的背景图片。
往边框里填充背景图片有个特点，不管图片大小，HTML会自动将空格填满，因此你不需要担心图片的大小问题，反而因为要考虑网络传输问题，图片小点还好。你可以自己找其他图片代替。
图片地址：http://xz1.2000y.net/348114/uploadpic/20041225173840374.jpg
图片模样：
2、打开FrontPage，点“设计”，在顶部工具栏里点“表格”-“插入表格”
点“表格”，出现如下对话框：
修改“行数”、“列数”为“1”；修改“单元格衬距”、“单元格间距”为“0”；在“指定高度”方框打勾，选“像素”，修改“400”（修改这项的意义是在边框里面没有内容时能保存一定的高度）；选择“背景颜色”（目的是当背景图片地址失效后边框里面依然有颜色而不会显得难看）；在“使用背景图片”方框里打勾，把我们准备好的背景图片地址填进去，确定。
你将看到，FrontPage的“设计”栏里出现了你刚才设计的边框了.
3、接着点FrontPage的“代码”凸舌，你将看到你刚才的操作已经变成代码了：
<html>
<head>
<meta http-equiv="Content-Type" c>
<title>新建网页 1</title>
</head>
<body>
<table border="1" width="100%" cellspacing="0" cellpadding="0" bgcolor="#800000" background="http://xz1.2000y.net/348114/uploadpic/20041225173840374.jpg" height="400" id="table1">
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
但你可以把网页编辑所需要的代码去掉（因为我们毕竟不是编辑网页），只要保留表格部分的代码即可：
<table border="1" width="100%" cellspacing="0" cellpadding="0" bgcolor="#800000" background=http://xz1.2000y.net/348114/uploadpic/20041225173840374.jpg height="400" id="table1">
<tr>
<td> </td>
</tr>
</table>
然后你把上面这些代码在论坛的编辑栏里点“代码”，填进去后点“设计”，发表即可。
4、但是我们所举例子的边框是带有凸线，并且是越过发帖区的宽屏帖的，这样我们就需要对边框做样式上的调整。
在FrontPage“设计”栏里编好的边框上右击，在出现的对话框里点“表格属性”，出现“插入表格”（上面有图）对话框。点对话框下面的“样式”按钮，出现“修改格式”对话框。
注意看，“ID”栏里有“table1”字样，表示我们将要修改的表格样式是对table1表格修改的。（我说这段话的意思是，大家一定要养成给表格起名字的习惯，这样在修改时有时很方便。）
在“修改格式”对话框里点“格式”按钮，将出现下拉对话框，一共有5个可选（字体、段落、边框、编号方式、定位）。我们先点“边框”，出现“边框和底纹”调整对话框。
在对话框里的“设置”栏点“方框”，在“样式”栏里点“凸线”，选择颜色，修改宽度为20，衬距全部为0，确定。
这时，你将看到FrontPage已经给刚才的边框加上凸线了。点“代码”，把代码复制下来：
<table border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#800000" background=http://xz1.2000y.net/348114/uploadpic/20041225173840374.jpg height="400" id="table1" style="border: 20px ridge #800000; padding: 0">
<tr>
<td> </td>
</tr>
</table>
5、宽屏的实现。
这是一个经验值。一般来说，论坛发帖区左边的头像信息栏一般宽220像素，因此我们需要把帖子向左偏移220像素，然后把帖子的宽度修改为980像素。同时为了露出发帖人的头像，又要把帖子向下偏移140像素。还有就是，为了防止底部的发帖人的签名档被遮，还需要在帖子的最后加上至少8个回车换行。
重复前面的样式调整过程，点“修改格式”对话框里的“定位”，出现“定位”对话框。
在“定位”对话框里的“定位样式”里点“相对”，在“位置与大小”里的“左边”框里填上“-220”，在“宽度”框里填上“980”，在“顶部”框里填上“140”，确定。
这是，你在 FrontPage的“设计”栏里看不到变化，但你点“预览”，你将看到边框偏移向左向下了，没关系，我们正是要的这个效果。
还有就是记住在代码后面加上8个换行代码“<br>”。
完成后的代码如下：
<table border="0" width="980" cellspacing="0" cellpadding="0" bgcolor="#800000" background="http://xz1.2000y.net/348114/uploadpic/20041225173840374.jpg" height="400" id="table1" style="border: 20px ridge #800000; padding: 0; position:relative; left:-220; top:140">
<tr>
<td> </td>
</tr>
</table>
<br><br><br><br><br><br><br><br>
加好友 
发短信
Post By：2009/3/3 9:53:00 [只看该作者]
