注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

OK之家

原创心得 仅供交流 欢迎交友

 
 
 

日志

 
 
关于我

本人是一个电脑网络爱好者,为了自娱自乐,也为了同有心人交流心得,特制作了这个博客,希望能抛砖引玉.更希望能得到大家的帮助,请常来看看,多多指教.

在网页和博客中添加代码  

2007-03-11 17:05:42|  分类: 博客网页技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

   

      在网页和博客中添加代码 - ok -         OK之家

                            在网页和博客中添加代码

 [原创:OK之家博客]

http://dyzyb.xinwen365.net/

http://dyzyb001.blog.163.com/

一、什么是代码

平时所说的代码就是HTML标记。HTML的英文全称是"Hypertext Markup Language",中文译为“超文本标记语言 ”。“超文本”就是指页面内可以包含图片,链接,甚至音乐,程序等非文字的元素。网页就是由HTML语言编写出来的。也就是平常所说的代码。

  HTML标记是由括号 <  > 所括住的指令所构成,由 < 开始标记 >和< / 结束标记 >构成。如<html>表示这是一个网页的开始,</html>表示此网页到此结束,在< html >和</ html >之间加上的代码就是标题栏的指令了;<body>表示正文,</body>是正文的结束;<center>是居中命令,</center>指居中的文字到此结束;

HTML标记可用任何文本编辑器或网页专用编辑软件来编辑,输入<html> </html> <body> </body>,然后在<html> </html>之间输入标题栏的代码,在<body> </body>之间输入正文内容,只要在完成后以 .htm 或 .html 为文件后缀保存就成为一个网页了。

二、基本代码(各种代码可以任意组合)

(一)表格代码说明:

1、表格代码:

<table border="1" width="100%" >

</table>

2、   行:</tr>  </tr>

3、列:<td> </td>

4、宽:width="238"

   高:height="68"

自行设计2行3列的表格:

<table border="1" width="100%" height="356">

</tr> <td height="127" width="224"> </td><td height="127" width="50"> </td>

<td height="127" width="319"> </td>

</tr>

</tr> <td height="300" width="224"> </td><td height="300" width="50"> </td>

<td height="300" width="319"> </td>

</tr>

</table>

   因为同一行的各列高度是一样的,所以每一行只要写一个高度其余的可以省略,变成:

<table border="1" width="100%" height="356">

</tr> <td height="127" width="224"> </td><td  width="50"> </td>

<td  width="319"> </td>

</tr>

</tr> <td height="300" width="224"> </td><td  width="50"> </td>

<td  width="319"> </td>

</tr>

(二)文字代码说明(红色的文字二字是显现出来的文字内容,可以替换)

1、字体:

<font face="华文行楷" >文字</font>

2、字号:<font size="7">文字</font>

3、字体顏色:<font color="#FF0000">文字</font>

或者直接写入顏色的英文单词,<font color="RED">文字</font>

两者的效果是一样的。

总的代码为:

<font color="#FF0000" face="华文行楷" size="7">文字</font>

三、实战操作

1、用记事本编辑制作:

我设计的标题栏比较复杂,先不去管它,只看正文栏。

打开记事本,输入自行设计2行3列的表格的代码

<table border="1" width="100%" height="356">

</tr> <td height="127" width="224"> </td><td  width="50"> </td>

<td  width="319"> </td>

</tr>

</tr> <td height="300" width="224"> </td><td  width="50"> </td>

<td  width="319"> </td>

</tr>

最后选择“文件”/“另存为”,在弹出的对话框中选择“所有类型”,给文件起一个扩展名为 .htm 的名字存盘。如名叫:index.htm 吧(index代表主页)。然后双击这个文件,浏览器自动打开,就能看到你制作的网页了。正文是一个插入的表格;

如果输入

<font color="#FF0000" face="华文行楷" size="7">文字</font>

浏览器看到的是红色的文字二字。

2、用网页专用编辑软件编辑

最简单的网页编辑软件是FrontPage 2003。

运行FrontPage 2003,在左下角提供设计模式、代码模式和预览,

在网页和博客中添加代码 - ok -         OK之家

设计模式就是所见所得模式,简单直观,专为不懂代码的人使用,点击代码,就进入代码编辑模式,二者效果是一样的。

在FrontPage 2003中的什么位置插入代码呢,很简单,只要在设计模式下将光标插入到准备插入的地方,再转入代码模式,光标的位置就是要插入代码的地方。

把刚才的代码输入到FrontPage 2003的代码编辑模式中,预览状态下的效果与记事本保存的网页是一样的。

3再来看看在博客中添加代码

各个博客有所不同,拿网易博客日志举例说明如下:

1、博客要处于编辑状态,点击写日志;

2、网易博客也有所见所得和代码两种编辑模式。在左下角有如图按纽

在网页和博客中添加代码 - ok -         OK之家

显示HTML代码就是代码编辑模式,而隐藏HTML代码就是所见所得编辑模式,在显示HTML代码编辑模式下,将前面的代码输入进去,在预览状态下的效果也是一样的。

4、下面给你看一个我的网页的代码,效果如下图

在网页和博客中添加代码 - ok -         OK之家

标题栏是一个有跳动文字的动画,正文栏是前面讲的2行3列的表格,在第2行第2列中显示红色的文字二字:

<html>

<TABLE height=226 cellPadding=10 width=1024 align=center background=http://hiphotos.baidu.com/ok%D6%AE%BC%D2/pic/item/730a793d8751a1ec3c6d97de.jpg border=3 table="0">

<TBODY>

<TR>

<TD align="left">

<DIV align=center>

 </B>

   <p><FONT face=华康海报体W12(P) color=red size=50>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<MARQUEE direction=up behavior=alternate width=60 height=120>欢</MARQUEE><FONT color=yellow>

<MARQUEE direction=up behavior=alternate width=60 height=80>迎</MARQUEE><FONT color=brown>

<MARQUEE direction=up behavior=alternate width=60 height=120>光</MARQUEE><FONT color=White>

<MARQUEE direction=up behavior=alternate width=60 height=80>临</MARQUEE><FONT color=blue>

<MARQUEE direction=up behavior=alternate width=60 height=120>OK</MARQUEE><FONT color=yellow>

<MARQUEE direction=up behavior=alternate width=60 height=80>之</MARQUEE><FONT color=orange>

<MARQUEE direction=up behavior=alternate width=60 height=120>家</B></MARQUEE></FONT></FONT></FONT></FONT></FONT></FONT></FONT></p>

   </MARQUEE>

</B></CENTER></MARQUEE></MARQUEE></FONT></CENTER>

</EMBED></FONT></FONT></FONT></DIV></TD></TR></TBODY></TABLE>

</html>

<body>

<table border="1" width="100%" height="356">

</tr> <td height="127" width="408"> </td><td  width="121"> </td>

<td  width="397"> </td>

</tr>

</tr> <td height="300" width="408"> </td><td  width="121"> <font color="#FF0000" face="华文行楷" size="7">文字</font>

</td>

<td  width="397"> </td>

</tr>

 </body>

  评论这张
 
阅读(1315)| 评论(4)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018