可爱老人网

 找回密码
 注册会员
搜索
查看: 5923|回复: 34

代码学习提要知识

  [复制链接]
发表于 2013-2-25 12:22 | 显示全部楼层 |阅读模式
本帖最后由 老可人 于 2013-2-25 12:26 编辑

开篇首语:

当我们畅游Internet时,透过浏览器所看到的一切网页,都是由HTML (HyperText Markup Language) 语言所编写的。HTML ( 超文件标记语言 ) 是一种建立网页文件的语言,透过标记式的指令 (Tag),将影像、声音、图片、文字等连结显示出来,呈现一种赏心悦目的效果。

而论坛,正是让我们自由编写帖子后发布的空间。通过论坛后台的支持,我们使用HTML编写的帖子,也可以象网页一样发布,从而让帖子更加生动活泼,给人以更美的享受和更深的启迪。

二、谈点体会:

第一、不完全是HTML。

HTML简而言之是一个用来编辑网页的语言,有严格的语法和明确的定义,其实就在本板块开张的首萜管理员已经张贴了详尽的教程,有兴趣的朋友不妨去看看。而用“HTML”编辑在论坛发布的帖子,仅仅只需用到HTM中的一小部分标签(当然,这已经足够了),因此,并不需要完整对HTML完全学习,边用边学,用到才学,这样才简单易懂。

第二:写“回”字。

用HTML制帖,如果是简单的打一个比方,就像我们写一个“回”字,是一种单一的边框结构。用HTML制帖,其实就是用编写边框的代码编一个边框(也就是写一个“口”),再把需要表达的内容(文字,图片等)放在“口”里;如果是编两个边框并套在一起,这就变成“回”了,但道理是一样的,最后就是把需要表达的内容放在最小的口里而已。等大家熟悉掌握运用这些代码后,更加复杂的布局,比如像制作一张工作人员花名册表格,虽然涉及到行<TR>列<TD>,好像更难一点的了,但明白道理后,自然不难了。

第三:有始有终。

用HTML制作,最重要的一点就是做到有始有终,也就是有开始必须有结束。“回”字是封闭的,而“同”字的外框则是开放的,对于HTML来说,运行的结果可能会出错。比如<P>这个标签,它是意思是表示段落的标签代码(类似文章的换行),当一段编辑后,必需用</P>表示结束。

第四:拿来主义。

掌握并熟悉地运用HTML后,接触的帖子也多了,你会发现,每一个人有每一个人的制作方法及特点。那么,我们在欣赏别人精典制作的同时,不妨拿回家看看,该收藏的收藏,该掌握的掌握,比如素材好我们就收藏,自己做帖时可以运用,比如制作特点,方法,我们可以拿为己用,说白了,抄就是了,没有什么不好意思的。

学习的朋友们,如果遇到疑点需要相互交流,我会尽我所能为大家解答,也请大家提出更好的方法,谢谢。

怎样理解用HTML编写帖子:

对于论坛里用HTML编写的特效帖子,主要元素一般也就是5个:边框、文字、图片、声音、图像。在这5个元素中,边框一般通过使用HTML代码编写后实现(你可以加上一些效果,诸如样式、颜色等),文字可以直接编辑(也可以加上效果)在帖子里,也可以做在图片上。而其他的元素,除非必要,一般都是通过引用的方式把存放在其他空间的元素表现在本帖而不是以附件的方式传递在本论坛上,以减少论坛的压力。不过,如果有些元素你感觉很重要需要保存,也可以上传到论坛,以排除网络的不确定性。

因此,一个HTML贴,我们可以理解为:

我们(图片、FLASH、声音、图像等)来自五湖四海,为了一个共同的目标(被编辑者引用)走到一起来了(通过HTML语法组成了一个画面)。



 

 

 楼主| 发表于 2013-2-25 12:24 | 显示全部楼层

准备一些必要的辅助工具。

1、最简单的首推每台电脑附件里肯定有的“记事本”。

记事本是一个非常有用的工具,我们编辑好的代码可以贴在记事本里,保存的时候默认格式为文本文件(txt格式),我们可以随时修改并保存在其他地方,以免重装系统造成丢失。

如果我们想看看编辑好的HTML代码是什么模样,可以点“记事本”的“另存为”,并在文件名的后面加上后缀“.html”,保存后再点击打开,你可以看到文件不是被“记事本”打开而是被“浏览器”以网页的方式打开了。

记事本还可以用来编辑音乐连播文件。

记事本还有个更重要的作用就是:把HTML代码张贴在记事本里,保存为默认格式(txt格式),然后上传到本论坛作为附件,而当你点击附件的链接时,你看到的居然不是文字而是网页!这个功能常常被HTML编辑高手用来做无空间个人网页,我们在接下来的课程将重点介绍这个非常好玩的做法。

2、还有就是台电脑附件里肯定有的“画图”。

画图虽然功能不强大,但可以对图片做基本的修改,比如屏幕截图我们打算在上面加上一些文字或做一些裁减,画图就是最好最简单的工具了。

3、OFFICE里的套件FRONTPAGE。

一般来说,OFFICE有8个组件(当然在安装的时候不一定会全部安装上来),我们常用的WORD就是其中的一个,如果您在您电脑里安装的OFFICE里没有看到FRONGTPAGE的话就安装一个吧。

他一共有四个凸舌,在使用的时候首先点“代码”凸舌(与本论坛的“代码”如出一辙),可以看到一些默认代码,如果我们要用他来编辑帖子的话就把这些默认代码全部删掉吧。

编辑好代码后点“设计”凸舌(与本论坛的“设计”如出一辙),可以看到编辑代码后的初步效果,如果您不满意,可以直接在上面编辑,就好象编辑WORD文档一样,在您编辑的同时,后台已经自动把您的编辑转换成代码了。

“拆分”凸舌的作用是同时显示“设计”和“代码”,您对设计部分做修改时可以直接看到代码的变化,而对代码做修改时也可以直接看到设计的修改。

“预览”凸舌(与本论坛的“预览”如出一辙)顾名思义就是看看代码编辑后的发布效果。

 有了这几件工具,一般来说没有编不出来的帖子,除非您能想象不出来。

最后,提个最重要的提示:我们一定要养成编辑好帖子在点“发表”前,一定要把全部内容复制一下!为什么需要这样?因为网络的不确定性,有时帖子点“发表”会失败,你辛辛苦苦编好的帖子一瞬间就化为乌有,是不是很心痛?因此,一定要记得,发表前备份!


 


 
 

 楼主| 发表于 2013-2-25 12:26 | 显示全部楼层
我们先从最基本的开始。

学习认识常用的HTML代码(标签),最好从怎样用HTML编辑一个边框(其实就是一个格子的表格)开始。

1、<table>:表格的起始符。任意一个表格的开始都必须以它开头,且必须有终止符</table>。

2、 <tbody>:表体的起始符。紧跟在<table>之后,表示表体开始。必须有结尾符,放在</table>之前。在纯网页中可以不要tbody元素,但在论坛一定要使用,否则,当帖子用到较多的表格时,论坛的自动填充功能将可能会导致代码出错。

3、<tr>:tr的作用是规定表格的行,其中,t是table,r是row(行)。有多少组tr,这张表格就有多少行。<tr>紧跟在<tbody>之后。必须有终止符</tr>。

4、<td>:td的作用是规定表格的列,t是table,d可理解为down(向下)。有多少组td,这张表格就有多少列。第一个<td>紧跟在<tr>之后。终止符为</td>。td与tr配合构成单元格。

</td>、</tr>、</tbody>、</table>:这些都是相应元素的终止符,表示相应元素所规范的内容结束。必须注意它们的排列顺序,不能有错。

从表格的代码框架分析得出:表格标签里,所有元素都成对出现,而这些元素是按照从大到小的顺序从外往里层层包裹的。table最大,它占在起始和终结的位置,tbody是老二,tr是老三,td最小,它在最里层。

5、border:此属性定义表格的边框。比如,border=1,表示表格边框的粗细为1个像素(默认值),为0表示没有边框。

6、 cellspacing:单元格间距。当一个表格有多个单元格时,各单元格的距离就是cellspacing了,如若表格只有一个单元格,那么,这个单元格与表格上、下、左、右边边框的距离也是cellspacing。

7、cellpadding:单元格衬距。指该单元格里的内容与cellspacing区域的距离,如果cellspacing为0,则表示单元格里的内容与表格周边边框没有距离。

8、 width:表格的宽度。取值从0开始,默认以像素为单位,与显示器的分辨率的像素是一致的。800×600的显示分辨率下,如果表格设置成1000个像素的宽度,那么,得出的效果将导致IE的横向滚动条出现,只有通过滑动它才能看到表格最右边的内容,所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比,如widht="100%",这种赋值法有个好处:表格的宽度将根据可显示的宽度来自我调整宽度。

9、height:表格的高度,取值方法同width。提示:如果不是特别需要,建议不用设置表格的高度,系统会根据表格的内容自动设置高度。所谓特别的需要,是指一些特殊的情形下,需要表格的高度精确,比如,当我们通过表格的背景来发一张图片时,如果表格的高度不精确定义,图片就不可能完整或完美地显示。

10、bgcolor:表格的背景色。取值方法举例:bgcolor=#ff0000或bgcolor=red。单元格<td>也可有此属性,如果设置了表格的背景色,又设置表格单元格的背景色,得出的效果将是值得试试的,这种情况主要用于多单元格的表格。

11、background:表格的背景图。其值为一个有效的图片地址。<td>也有此属性。同时设置背景色和背景图不冲突,也建议这么做,这样,当图片不能显示时,表格的外观依然是好看的。

12、bordercolor:表格的边框颜色,当border值不为0时设置此值有效。取值同bgcolor。

13、bordercolorlight:亮边框颜色,当border值不为0时设置此值有效。亮边框指表格的右边和下上的边框。

14、bordercolordark:暗边框颜色,当border值不为0时设置有效。暗边框指表格的左边和边边的边框。

这些标签,并不一定要全部使用,必须要用的只有前面几个,后面的可根据实际情况使用,我们在后面举例说明就清楚了。


 


 楼主| 发表于 2013-2-25 12:28 | 显示全部楼层
编写一个最简单的单格表格:

<table border="1" width="300" height="50">
<tr>
<td>需要编写在表格内的内容编写在这里
</td>
</tr>
</table>

这段代码的含义是:这是一个边框粗细为1像素、宽300像素、高50像素的单格表格,表格里有文字“需要编写在表格内的内容编写在这里”。

效果:

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

所谓万丈高楼平地起,这段代码虽然简单,却是一切代码贴的基础。再复杂、再绚丽的代码贴,都是从这样开始出发的。

我们可以再进一步实验:

1、点“代码”按纽;

2、把代码“<table border="1" width="300" height="50"><tr><td>需要编写在表格内的内容编写在这里</td></tr></table>”粘贴进去;

3、点“设计”按纽。

这时,我们可以看到,论坛后台已经把代码转化成了“所见既所得”的模样:

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


然后把鼠标放在格子的边沿,我们可以看到鼠标变成了十字箭头摸样,点一下鼠标左键,格子边沿将出现8个小方块,表示这是可以进行设计了。继续把鼠标放在某个小方快上,鼠标将根据所放的位置不同,分别变成左右箭头、上下箭头和斜向箭头摸样,这时再次按下左键拉动,可以看到格子出现变化。

我们还可以把格子里面的文字重新编辑,比如修改成“向朋友们问好!”,并修改字体、大小、颜色、置中等(这些修改都在编辑栏上方有相应的工具按钮),比如修改成这样:

向朋友们问好!
 


然后再点“代码”,我们将看到,论坛后台已经把我们刚才的操作自动修改好了相应的代码:

<TABLE style="WIDTH: 400px; HEIGHT: 120px" height=120 width=400 border=1>
<TBODY>
<TR>
<TD>
<P align=center>
<FONT face=黑体>
<FONT color=#3300ff>
<STRONG>
<FONT size=7>
向朋友们问好!
</FONT>
</STRONG>
</FONT>
</FONT>
</P>
</TD>
</TR>
</TBODY>
</TABLE>

第一行是表格的样式,“高120,宽400,框1像素”;

二、三、四行表示表体、一行、一列;

五、六、七、八、九行分别规定了字体居中、字体、颜色、加粗和字号。

十一至十九行分别是第一至第九行的结束语句,注意看,从里到外,标签是成对出现的。


 

 

 楼主| 发表于 2013-2-25 12:29 | 显示全部楼层
上面我们已经对代码有了初步的认识,接下来我们将结合一个具体的例子,逐步分解说明是怎样编写的。
这个例子的所有代码是这样的:
<TABLE id=table1 style="BORDER-RIGHT: darkred 20px ridge; BORDER-TOP: darkred 20px ridge; LEFT: -220px; BORDER-LEFT: darkred 20px ridge; WIDTH: 980px; BORDER-BOTTOM: darkred 20px ridge; POSITION: relative; TOP: 140px" cellSpacing=25 cellPadding=0 width=980 align=center background=http://xz1.2000y.net/348114/uploadpic/20041225173840374.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE id=table2 cellSpacing=10 borderColorDark=#344228 cellPadding=0 width="100%" align=center borderColorLight=#7ea063 background=http://xz1.2000y.net/348114/uploadpic/2004113022160707.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE id=table3 borderColorDark=#7ea063 cellPadding=5 width="100%" align=center background=http://xz1.2000y.net/348114/uploadpic/20041114959024242.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE id=table4 cellSpacing=5 borderColorDark=#344228 cellPadding=0 width="100%" borderColorLight=#7ea063 background=http://xz1.2000y.net/348114/uploadpic/2004113022160707.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE id=table5 cellPadding=0 width="100%" background=http://xz1.2000y.net/348114/uploadpic/2004113022332836.jpg border=0>
<TBODY>
<TR>
<TD>
<p align="center">
<BR>
<BR>
<BR>
<BR>
<IMG src="
http://xz1.2000y.net/348114/uploadpic/200411141065432083.gif">
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
</p>
<P align=center>
<FONT face="华文新魏" color=red size=7>
<B>
亲爱的朋友,夕阳论坛欢迎您!
</B>
</P>
</FONT>
<P align=center>
<EMBED style="LEFT: 54; WIDTH: 819px; POSITION: absolute; TOP: 49; HEIGHT: 481px" align=left src=http://www.forshine.net/flash/12.swf type=application/octet-stream wmode="transparent" quality="high" ;;>
<EMBED style="LEFT: 57; WIDTH: 818px; POSITION: absolute; TOP: 53; HEIGHT: 478px" align=left src=http://www.forshine.net/flash/12.swf type=application/octet-stream wmode="transparent" quality="high" ;;>
<EMBED style="LEFT: 56; POSITION: absolute; TOP: 54; HEIGHT: 480px; width:817px" align=left src=http://www.forshine.net/flash/64.swf type=application/octet-stream wmode="transparent" quality="high" ;;>
<EMBED style="LEFT: 61; WIDTH: 818px; POSITION: absolute; TOP: 51; HEIGHT: 480px" align=left src=http://www.forshine.net/flash/13.swf type=application/octet-stream wmode="transparent" quality="high" ;;>
<EMBED style="LEFT: 61; WIDTH: 816px; POSITION: absolute; TOP: 48; HEIGHT: 481px" align=left src=http://www.forshine.net/flash/27.swf type=application/octet-stream wmode="transparent" quality="high" ;;>
<EMBED style="LEFT: 57; POSITION: absolute; TOP: 56; HEIGHT: 482px; width:817px" align=left src=http://www.forshine.net/flash/27.swf type=application/octet-stream wmode="transparent" quality="high" ;;>
<EMBED style="FILTER: xray()" src=http://www.managerway.cn/UploadTrain/2006724105052326.mp3 width=500 height=45 type=audio/x-mplayer2 c showstatusbar="0" EnableC volume="0" autostart="true" loop="-1">
<BR>
<BR>
<BR>
</P>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>


如果你觉得背景音乐嘈杂,可以按键盘左上角的“Esc”键关闭音乐。
这个欢迎帖子的代码含义是:
一共有五个方框套在一起,每个方框都分别加上了背景图片,自下而上逐步缩小,这样每个方框都露出一点。
在最上层方框里,放了一张图片(小提琴),写了一行字(亲爱的朋友,夕阳论坛欢迎您!),一个音乐播放器(背景广东音乐),最后是一些透明的FLASH。
另外,这是一个宽屏帖(帖子向左越出正常的发帖区到达屏幕边缘),目的是要让帖子尽可能布满整个屏幕而更有感染力。
制作宽屏帖的注意事项是要向下移动一点,以免遮住头像,但要记得在最后加上一些换行,以免遮住签名档。




 楼主| 发表于 2013-2-25 12:30 | 显示全部楼层
关于HTML帖子,我个人的经验是,并不是每张帖子的代码都要一行一行的编写。1、有编辑工具可以使用,推荐使用Microsoft Office FrontPage 2003来编辑帖子。
Microsoft Office FrontPage 2003的来源一般有两个:一是网上下载。但我觉得很麻烦,除非恰好碰到好的下载点。二是上电脑城买张D版的。一般5元吧?买的时候可以问问卖家碟里有没有FrontPage即可。
安装的时候也要注意。在你把碟子放到光驱里安装会自动进行,但FrontPage却可能不会自动安装,你可能需要手动找到FrontPage所在的目录安装。
关于怎样在FrontPage帮助下编辑帖子,接下来我们将重点学习。
2、“抄”别人的。
前面我们说到,一般代码帖的主要元素有5个:边框、文字、图片、声音、影象。而所谓“抄”,只是抄边框,在既有边框的基础上修改里面的其他4个元素就转化为自己的作品了。而边框,我认为是没有版权的。
当然,边框也可以再加工,但一般不需要直接编辑代码(如果你功力深厚又另当别论)。复制别人的边框代码后粘贴在FrontPage的“代码”吐舌栏里,然后点“设计”,你就可以象编辑Word一样编辑边框了,而你所做的一切操作,FrontPage都会在后台帮你“翻译”。你觉得满意了,再点“代码”,把里面所有的代码复制下来就可以帖到论坛了。
我们将在后面学习怎样到其他论坛抄别人的代码。
回答逸趣老师的疑问:
由于网络的差异性,确实许多的代码帖打开不尽如人意,一般来说,由于影象、声音文件较大,所以受网络的影响大,这就需要编制者本身需要寻找网络传输速度快的元素。
不过还有一种情况就是,浏览者的宽带安装没调好也有可能。
您如果觉得凡是代码帖打开都很困难,建议您检查以下电脑宽带安装的设置。




 楼主| 发表于 2013-2-25 12:32 | 显示全部楼层


接下来我们学习怎样在FrontPage的帮助下编辑前面所举例子的第一层边框。

1、准备好素材,也就是准备填充在边框空格内的背景图片。
往边框里填充背景图片有个特点,不管图片大小,HTML会自动将空格填满,因此你不需要担心图片的大小问题,反而因为要考虑网络传输问题,图片小点还好。你可以自己找其他图片代替。
图片地址:
图片模样:
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>






 楼主| 发表于 2013-2-25 12:34 | 显示全部楼层
第一层边框做好了,等于这个帖子有了基础。我们可以接着在这个基础上继续加上其他的边框。
接下来我们学习加第二层边框。与做第一层边框相比,我们不需再做“宽屏”设置,因为自此以后的边框都搭载在第一层边框之上了。
假设我们从头开始,所有的编辑都在FrontPage上实现。
打开FrontPage,把“代码”里的所有默认代码删掉,把前面我们编好的第一层边框的代码填进去:
<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>

提示:如果你在编辑过程需要随时“预览”编辑效果,可把上面代码第一行的“left:-220”临时改为“left:0”,“top:140”临时改为“top:0”,最后面的“<br>”删掉,编辑完后再改回来。
点“设计”,可以看到代码已被解析为图象了,而我们的目的,就是将要在既有表格里面插入新的表格。
请注意,这时我们既有的表格(边框)的单元间距为0,如果我们直接插入新的表格,那么新表格将紧挨老表格,因此,在插入新表格前要设置老表格的间距,假设设置为25。
在既有表格上右击,在出现的对话框里点“表格属性”(前面有图),出现“表格属性”调整对话框,在对话框里的“单元格间距”里填上“25”,确定。
这是,你将在FrontPage的“设计”栏里看到既有的边框里面出现一道白色的虚线框,这个虚线框告诉编辑者可填充内容在虚线框以内。
准备第二层边框的背景图片。
图片地址:
图片摸样:
在虚线框里单击,点顶部菜单的“表格”-“插入表格”-“表格”,出现“插入表格”对话框。这个过程与前面编辑第一层边框的过程是基本一样的,所不同的是,我们对这层边框做了“亮边框”和“暗边框”设置。
什么叫“亮边框”和“暗边框”?
一个边框有四个边,所谓“亮边框”指边框的右边和下边的边框,而“暗边框”则是指边框的左边和上边的边框。如果我们给“亮边框”加上较为明亮的边框颜色,“按边框”加上较为灰暗的边框颜色,这样就回营造一种仿佛这层边框与下层边框相比较为“凸出”或较为“凹陷”的立体感觉,增强帖子的观赏效果。


按图做好设置后,确定。
这时,点“代码”,我们将看到新的代码:
<table border="0" width="100%" cellspacing="25" 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; width:980">
<tr>
  <td>
  <table border="1" width="100%" cellspacing="10" bgcolor="#008080" background="http://xz1.2000y.net/348114/uploadpic/2004113022160707.jpg" height="400" id="table2" bordercolorlight="#C0C0C0" bordercolordark="#808080" cellpadding="0">
   <tr>
    <td> </td>
   </tr>
  </table>
  </td>
</tr>
</table>
<br><br><br><br><br><br><br><br>


接着做第三层边框的添加。
准备第三层边框的背景图片。
图片地址:
图片模样:
与前面添加表格的过程如出一辙,按下图所示做好设置,确定。



得到如下代码:
<table border="0" width="100%" cellspacing="25" 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; width:980">
<tr>
  <td>
  <table border="1" width="100%" cellspacing="10" bgcolor="#008080" background="http://xz1.2000y.net/348114/uploadpic/2004113022160707.jpg" height="400" id="table2" bordercolorlight="#C0C0C0" bordercolordark="#808080" cellpadding="0">
   <tr>
    <td>
    <table border="0" width="100%" cellspacing="5" cellpadding="0" background="http://xz1.2000y.net/348114/uploadpic/20041114959024242.jpg" height="400" id="table3">
     <tr>
      <td> </td>
     </tr>
    </table>
    </td>
   </tr>
  </table>
  </td>
</tr>
</table>
<br><br><br><br><br><br><br><br>

显示的效果:

第四层边框我们使用与第二层边框一样的背景图片(当然也可以不一样),过程与第二层一样,按图做好设置后,确定

得到如下代码:
<table border="0" width="100%" cellspacing="25" 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; width:980">
<tr>
  <td>
  <table border="1" width="100%" cellspacing="10" bgcolor="#008080" background="http://xz1.2000y.net/348114/uploadpic/2004113022160707.jpg" height="400" id="table2" bordercolorlight="#C0C0C0" bordercolordark="#808080" cellpadding="0">
   <tr>
    <td>
    <table border="0" width="100%" cellspacing="5" cellpadding="0" background="http://xz1.2000y.net/348114/uploadpic/20041114959024242.jpg" height="400" id="table3">
     <tr>
      <td>
      <table border="1" width="100%" bordercolorlight="#C0C0C0" bordercolordark="#808080" background="http://xz1.2000y.net/348114/uploadpic/2004113022160707.jpg" id="table4" height="400" cellspacing="5" cellpadding="0">
       <tr>
        <td> </td>
       </tr>
      </table>
      </td>
     </tr>
    </table>
    </td>
   </tr>
  </table>
  </td>
</tr>
</table>
<br><br><br><br><br><br><br><br>

显示的效果:

最后一层边框的添加。当然,你还可以无穷地添加。不过还是到此为止吧。
准备第五层边框的背景图片。
图片地址:
图片模样:
按图所示做好设置,确定。


得到如下代码:
<table border="0" width="100%" cellspacing="25" 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; width:980">
<tr>
  <td>
  <table border="1" width="100%" cellspacing="10" bgcolor="#008080" background="http://xz1.2000y.net/348114/uploadpic/2004113022160707.jpg" height="400" id="table2" bordercolorlight="#C0C0C0" bordercolordark="#808080" cellpadding="0">
   <tr>
    <td>
    <table border="0" width="100%" cellspacing="5" cellpadding="0" background="http://xz1.2000y.net/348114/uploadpic/20041114959024242.jpg" height="400" id="table3">
     <tr>
      <td>
      <table border="1" width="100%" bordercolorlight="#C0C0C0" bordercolordark="#808080" background="http://xz1.2000y.net/348114/uploadpic/2004113022160707.jpg" id="table4" height="400" cellspacing="5" cellpadding="0">
       <tr>
        <td>
        <table border="0" width="100%" cellspacing="0" cellpadding="0" background="http://xz1.2000y.net/348114/uploadpic/2004113022332836.jpg" height="400" id="table5">
         <tr>
          <td> </td>
         </tr>
        </table>
        </td>
       </tr>
      </table>
      </td>
     </tr>
    </table>
    </td>
   </tr>
  </table>
  </td>
</tr>
</table>
<br><br><br><br><br><br><br><br>



这样,我们就得到了一张五彩缤纷、凸凹有致的宽屏边框了。您能看得明白吗?



 楼主| 发表于 2013-2-25 12:34 | 显示全部楼层
这样,我们就得到了一张五彩缤纷、凸凹有致的宽屏边框了。您能看得明白吗?
接下来的工作,就是在边框的最上层加入我们打算呈现给读者的内容,也就是代码帖的其他4个元素:文字、图片、声音、影象。
我们继续把这个例子做完他。
准备图片,地址:
图片的模样:
这是一张背景透明图片,目的是让图片粘贴到边框里面时能和背景融合在一起。
把前面我们最终得到的边框代码
<table border="0" width="100%" cellspacing="25" 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; width:980">
<tr>
  <td>
  <table border="1" width="100%" cellspacing="10" bgcolor="#008080" background="http://xz1.2000y.net/348114/uploadpic/2004113022160707.jpg" height="400" id="table2" bordercolorlight="#C0C0C0" bordercolordark="#808080" cellpadding="0">
   <tr>
    <td>
    <table border="0" width="100%" cellspacing="5" cellpadding="0" background="http://xz1.2000y.net/348114/uploadpic/20041114959024242.jpg" height="400" id="table3">
     <tr>
      <td>
      <table border="1" width="100%" bordercolorlight="#C0C0C0" bordercolordark="#808080" background="http://xz1.2000y.net/348114/uploadpic/2004113022160707.jpg" id="table4" height="400" cellspacing="5" cellpadding="0">
       <tr>
        <td>
        <table border="0" width="100%" cellspacing="0" cellpadding="0" background="http://xz1.2000y.net/348114/uploadpic/2004113022332836.jpg" height="400" id="table5">
         <tr>
          <td> </td>
         </tr>
        </table>
        </td>
       </tr>
      </table>
      </td>
     </tr>
    </table>
    </td>
   </tr>
  </table>
  </td>
</tr>
</table>
<br><br><br><br><br><br><br><br>

填在FrontPage的“代码”栏(记得在填入前把默认的代码全部删掉),点“设计”,将看到这个边框的设计状态。


在打算插入的图片上右击,点“复制”,然后在FrontPage的边框里面右击,点“粘贴”,可看到图片已粘贴到了边框里面:




我们看到图片位置不对,居左中,可这样调整:在边框里面右击,点“单元格属性”,出现“单元格属性”调整对话框:


在对话框的“水平对齐方式”里选“居中”,“垂直对齐方式”里点“顶端对齐”,确定,这时,粘贴的图片将移动到边框的上中部。为了不让图片过于靠近顶部,可在图片左边点一下,回车一次,让图片走下一点。
再在图片右边单击,回车几次,在你打算写字的地方编辑文字,选择编好的文字,在顶部菜单栏选择文字的字体、字号、颜色:

到这里,可以加入音乐了。我打算加入的音乐是广东音乐《喜洋洋》。
音乐地址:http://www.managerway.cn/UploadTrain/2006724105052326.mp3
加入音乐有两种方式:一种是以背景音乐的方式加入,另一种是以播放器播放的方式加入。
背景音乐方式加入:
在FrontPage“设计”栏框架里右击,点“网页属性”,出现“网页属性”对话框。在对话框里的“背景音乐”的“位置”里填上音乐地址,确定。

这样加入的音乐,看不到播放器,只能听,不便于控制,有时不太方便。
播放器播放的方式加入:
在打算加入播放器的位置点击出现鼠标后,点顶部菜单栏的“插入”-“Web组件”,出现“插入Web组件”对话框。

在对话框里的“组件类型”里点“高级控件”,在“选择一个控件”里点“ActiveX控件”,然后点“下一步”。
在接着出现的对话框里点“自定义”,在“Windows Media Player”选择框里打勾(其他的可不能打勾),点“完成”,这时,你可以看到播放器已经出现在了我们刚才指定的位置。
在出现的播放器上右击,在出现的对话框里点“ActiveX控件属性”,出现“Windows Media Player属性”对话框。

对话框一共4个凸舌,在第一个凸舌“常规”的“源文件名或URL”栏里把音乐地址填进去,“播放选项”的“自动启动”框里打钩(不打勾则手动播放),选择“播放次数”(你希望播放几次就改为几次),把“音量”拉到最大“,再点第三个凸舌“Object标志”,在“宽度”里填上“400”,“高度”里填上“45”,确定。

但为了让显示效果更酷,可以给播放器加上一个X光滤镜使之变成黑白色。
加滤镜的做法是在播放器代码的第一行里加入滤镜参数style="FILTER: xray()" :
    <object style="FILTER: xray()" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="WindowsMediaPlayer1" width="400" height="45">
    <param name="URL" ref value="http://www.managerway.cn/UploadTrain/2006724105052326.mp3">
    <param name="rate" value="1">
    <param name="balance" value="0">
    <param name="currentPosition" value="0">
    <param name="defaultFrame" value>
    <param name="playCount" value="1">
    <param name="autoStart" value="-1">
    <param name="currentMarker" value="0">
    <param name="invokeURLs" value="-1">
    <param name="baseURL" value>
    <param name="volume" value="100">
    <param name="mute" value="0">
    <param name="uiMode" value="full">
    <param name="stretchToFit" value="0">
    <param name="windowlessVideo" value="0">
    <param name="enabled" value="-1">
    <param name="enableContextMenu" value="-1">
    <param name="fullScreen" value="0">
    <param name="SAMIStyle" value>
    <param name="SAMILang" value>
    <param name="SAMIFilename" value>
    <param name="captioningID" value>
    <param name="enableErrorDialogs" value="0">
   </object>


最后,就是假加入FLASH了。假如FLASH与前面所加的元素不同,有三个特点:覆盖性、叠加性和透明性。
为了实现覆盖性和叠加性,必须使用“层”。
我们先准备好打算覆盖在帖子上面的FLASH文件,一共4张,当然可以重复,也可以更多,但考虑到网络传输的不确定性,几张就差不多了。
FLASH文件地址:
http://www.forshine.net/flash/12.swf
http://www.forshine.net/flash/13.swf
http://www.forshine.net/flash/27.swf
http://www.forshine.net/flash/64.swf
这些都是在网络上随机找的。
在FrontPage“设计”栏框架的顶部菜单点“插入”-“层”,你将看到在帖子的随机位置出现了一个蓝绿色的小边框,小边框的左上角标注了“layer1”,这就是刚才插入的ID为“layer1”的“层”。如图。


把鼠标放在“层”的边缘,你可以看到鼠标变成了十字箭头,表示这时可以拖动“层”。把“层”拖到帖子的左上角,再把鼠标放在“层”的由下角调整点,鼠标变成斜向双箭头,表示这时你可以拉动“层”放大到你希望的大小。你可以拉大到“层”覆盖掉帖子。如图。


在调整好大小的“层”里单击出现鼠标后,点顶部菜单的“插入”-“Web组件”,出现“插入Web组件”对话框。在对话框的“组件类型”栏里点“高级控件”,在“选择一个控件”栏里点“ActiveX控件”,点“下一步”,点“自定义”,在出现的“自定义ActiveX控件列表”对话框里找到“Shockwave Flash Object”,在方框里打勾(其他的控件可不能打勾),点“完成”,出现“选择文件”对话框。
把前面准备的FLASH文件的某一个地址填进“文件名”栏,点“插入”。

这时,你可以看到,刚才我们选择的FLASH文件已经插入到“层”里面了。


FLASH插入“层”后,在FLASH文件上右击,在出现的对话框里点“FLASH影片属性”,出现“FLASH影片属性”对话框,在对话框的“外观”凸舌的“透明”方框打勾,在“宽度”和“高度”的“百分比”选项点击,把数字框里的数字全部改为“100”,“确定”。


这时,  你可以看到插入的FLASH文件已经自动根据“层”的大小添满了。


此时的FLASH文件由于已经在前面的“透明”做了选择,因此你虽然在“设计”模式下看到的FLASH依然不透明,但你只要点“预览”,你可以看到,FLASH已经透明了。
继续重复前面插入“层”,拖拉“层”到合适大小,插入FLASH文件,调整FLASH文件属性为透明和100%,把其他的FLASH文件继续覆盖上去。



 楼主| 发表于 2013-2-25 12:35 | 显示全部楼层
本帖最后由 老可人 于 2013-3-3 21:13 编辑


结束语:
这样,我们就把一张具体的帖子通过分解,详细说明了使用工具的制作过程。希望这个教程能对你的学习有所帮助。
帖子编辑完后,除了发布,还有个劳动成果保存的问题。一般来说使用“记事本”保存最合适。
点FrontPage“代码”栏,选择所有的代码,复制,打开“程序”-“附件”-“记事本”,把所有的代码粘贴进去,起个你喜欢的文件名,保存。
此时,文件是以默认的文本文件格式(TXT格式)保存的,你直接点击打开那么还是在记事本打开的。
如果你在文件的后面加上后缀“.html”(注意:是英文状态下的句号后面加上四个字母),保存,你再点击打开将看到,此时文件将由浏览器打开了,你所编辑的效果将由浏览器解析视觉效果了。

方便快捷的在线取色器

点击欣赏全屏查看代码






代码编辑器










教你认识基本代码(HTML)代码速查表










        
下一页 发布主题 快速回复

手机版|公众号|小黑屋|可爱老人网

GMT+8, 2024-11-18 00:11

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表