新疆伊犁刘洪生的博客

绿丫暖春春意浓.......

日志

关于我

刘洪生

生长在兵团工矿厂铁厂沟。83年,应征入伍。87年--89年又读中专和大专,曾在工矿厂铁厂沟煤矿、宣传科、玻璃厂、生产技术科、党委办公室、电视台、两办室等单位任职。擅长写作、摄影和摄像。

文章分类

博客页面制作

2009-03-16 23:44:33| 分类：如何制作博客 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

彼岸桃花、亮剑

             博客页面制作

刚开始作博客时和大家一样，对博客页面设计等等，好多方面技巧不懂也不会，看到别人的博客我非常羡慕，页面做的如此美观、大方，每次浏览人家的博客叫我流连忘返。通过自己的努力对博客页面制作身由体会，现在我作的页面非常棒的了。

我把制作的方法及步骤讲述给博友。

第一步、首先开通你的博客，初步了解你博客页面。

第二步、制作页面必须是在登陆情况（编辑状态）下。

第三步、要认真看一下整个页面是什么样。然后把鼠标放到页面左上角的箭头下

，会出现一个工具条《写日志、传相片、听音乐、拍照片、博客搬家、粉装博客》。

1、点击粉装博客，会出现下列字样

正在装扮我的博客，开始     换衣服    设置首页内容    设置首页版式



2、点击《换衣服》进入换衣服界面，你可以任意更换你喜欢的颜色服装。（你只要点击图标就可以了。）

3、点击《设置首页内容》，会出现二个《基本模块，自定义模块》模块。

4、点击《设置首页版式》，会出现八个版式内容。你任选其中的一个，就可以改变你博客的版面风格了。

第四步、《设置首页内容》对我们粉装博客是关键的一步。基本模块我们添加不了，是网站设定好的，但对自定义模块设置是没有限制的。两种模块都能设置我们喜欢的内容，那就要看你自己怎么用了。

第五步、《自定义模块》的添加。首先按第三步中点击《设置首页内容》。

点击下面《添加自定义模块》，出现模块名称方框里，写上你给模块名的名字。在模块下面出现：《插入媒体、插入FLASH、插入特效字》。最后边有个“预览”的字样，最下边是“确定，取消”。你在模块名称里输入想要的名称后，你就可以点击确定的，先把模块建好。看一看在页面有没有你建的模块，如果没有，你点击《设置首页内容》，看《自定义模块》下面有没有你建的模块？看到模块，说明模块建成了。在看模块前面的小方框里有没有一个《眼点》，如果没有你在模块前的小方框里点一下就会出现一个小眼点了，这样你建的模块就会出现在页面里了。注意：取消任何模块只要把小方框里的小《眼点》点击一直没了，任何模块就不在页面里显示了。自定义模块是可删除、也可添加的。

第六步、在页面里看到你的模块，点击模块右上角编辑。把你想要的内容或代码粘贴在里面。点击一下“预览”后进行调整，点确定。你设定的内容就会出现在你博客的页面了。博客页面的模块可任意用鼠标拖动排版达到你满意为止。

第七步、说到代码我们首先要学点代码的基本知识了。

1）          贴图：<img src="图片地址">

2)加入连接：<a href="所要连接的相关地址">写上你想写的字</a>

3)在新窗口打开连接：<a href="相关地址" target="_blank">写上要写的字</a>

4)移动字体(走马灯)：<marquee>写上你想写的字</marquee>

5)字体加粗：<b>写上你想写的字</b>

6)字体斜体：<i>写上你想写的字</i>

7)字体下划线: <u>写上你想写的字</u>

8）字体删除线: <s>写上你想写的字</s>

9)字体加大: <big>写上你想写的字</big>

10)字体控制大小：<h1>写上你想写的字</h1> (其中字体大小可从h1-h5,h1最大，h5最小)

11)更改字体颜色：<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间

12)消除连接的下划线：<a href="相关地址" style="text-decoration:none">写上你想写的字</a>

13)贴音乐：<embed src="音乐地址" width="宽度" height="高度" autostart=false>

14)贴flash: <embed src="flash地址" width="宽度" height="高度">

15)贴影视文件：<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>

16)换行：<br>

17)段落：<p>段落</p>

18）原始文字样式：<pre>正文</pre>

19)换帖子背景：<body background="背景图片地址">

20)固定帖子背景不随滚动条滚动：<body background="背景图片地址" body bgproperties=fixed>

21)定制帖子背景颜色：<body bgcolor="#value">(value值见10)

22)帖子背景音乐：<bgsound="背景音乐地址" loop=infinite》

学代码

文字显示位置的控制

文字显示位置分别left（左对齐）

center（居中）为：

水平方向（align），垂直方向（valign）

水平方向即左中右：

RIGHT（右对齐）

垂直方向即靠顶和靠底.

top（靠顶）、bottom（靠底）等。

水平方向即左中右的代码：

<p align=left><font style=font:15pt face=黑体 color=fff000>向左对齐</font></P>

<p align=CENTER><font style=font:15pt face=黑体 color=fff000>表示居中</font></P>

<p align=RIGHT><font style=font:15pt face=黑体 color=fff000>向右对齐</font></P>

显示效果如下：

向左对齐

                 表示居中

                                向右对齐

实例：

送给春兰妹妹

祝你生日快乐！

实例代码：

<CENTER>

<TABLE width=480 height=350 bordercolor=olive background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg border=18>

<TBODY>

<TR>

<td align=center valign=top><br>

<FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#fff000><B>

<p align=left>送给春兰妹妹</P><br>

<p align=CENTER>祝你生日快乐！</P><br><br><br><br>

<p align=RIGHT>大姐冬梅<br>20060228</P>

</B> </FONT>

</TD></TR></TOBDY></TBODY></TABLE></CENTER>

垂直方向valign）靠顶的代码：

<TD align=LEFT valign=top>居左靠顶</TD>

<TD align=center valign=top>居中靠顶</TD>

<TDalign=RIGHT valign=top>居右靠顶</TD>

垂直方向valign）靠底的代码：

<TD align=LEFT valign=bottom>居左靠底</TD>

<TD align=center valign=bottom>居中靠底</TD>

<TD align=RIGHT valign=bottom>居右靠底</TD>

文字输出位置垂直方向的代码是设置在单元格里（TD），方便易用。但我只能在一个单元格中设一组代码。实例如下：

居左靠顶的代码

align=LEFT valign=top

代码：

<CENTER>

<TABLE width=480 height=350 bordercolor=olive background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg border=18>

<TBODY>

<TR>

<TD align=LEFT valign=top><FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#fff000><B>

居左靠顶的代码<BR><h3>align=LEFT valign=top</h3></B> </FONT>

</TD></TR></TOBDY></TBODY></TABLE></CENTER>

<BR><BR>

文字输出位置垂直方向的实例二：

居右靠底的代码

align=RIGHT valign=bottom

居右靠底的代码：

<BR>

<CENTER>

<TABLE width=480 height=350 bordercolor=olive background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg border=18>

<TBODY>

<TR>

<TD align=LEFT valign=top><FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#fff000><B>

居左靠顶的代码<BR><h3>align=LEFT valign=top</h3></B> </FONT>

</TD></TR></TOBDY></TBODY></TABLE></CENTER>

<BR><BR>

文字（或图片）放置的地位，

还可以用空格（）和空行（BR）调整；

用代码编辑绝对位置挂贴（外部定位）等办法

举例：一、在自定义模块制作

               1、滚动字

亮剑博客欢迎你
亮剑博客欢迎你你
亮剑欢迎你你你你你
亮剑欢迎你你你你你你

代码：<MARQUEE style="FONT-SIZE: 12px; WIDTH: 132px; COLOR: rgb(34,34,221); LINE-HEIGHT: 17px; HEIGHT: 125px" scrollAmount=1 scrollDelay=1 direction=up height=125>这里是文字<BR></MARQUEE>

这种方法是把代码粘粘到<插入媒体>下面就OK了。点一下“预览”看一看效果，最后点击“确定”。

2、美丽时钟

代码：http://wrxpt.go1.icpcn.com/flashclock/flaclo_35.swf

这种方法是把代码粘贴到《插入FLASH》，点一下“预览”看一看效果，最后点击“确定”。

这种方法是把代码粘粘到<插入媒体>下面就OK了。点一下“预览”看一看效果，最后点击“确定”。

４、女人在等待

代码：<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=" http://yeolkklo.com.ne.kr/Movie12-7.swf " width="100%" type=application/x-shockwave-flash allowScriptAccess="never" allowNetworking="internal" wmode="transparent" quality="high" autostart="0">

这种方法是把代码粘粘到<插入媒体>下面就OK了。点一下“预览”看一看效果，最后点击“确定”。

５、清明上河图

代码：<DIV><INPUT type=hidden value=清明上河图>

<MARQUEE style=" HEIGHT: 194px" scrollAmount=2 direction=right width=600 height=194><IMG style="WIDTH: 9967px; HEIGHT: 190px" height=252 alt=null src="http://blog.163.com/photo/um+ewoDEbHmTBy5Hm0ityg==/36873221949650604.jpg" width=9952></MARQUEE></DIV>

这种方法是把代码粘粘到<插入媒体>下面就OK了。点一下“预览”看一看效果，最后点击“确定”。

说明：你粘贴后“预览”时，可能图片很小。你可以调整宽度和高度。

二、日志添加代码制作

        1、你如果能在自定义模块里粘贴代码，那你就能在日志里粘贴代码的，操作基本上是一样的。原因你是不知道怎么使用技巧，很简单的。

首先，在编辑状态下，点击写日志进入编辑页面，右上角＜全部功能＞＜预览＞．点击＜全部功能＞会出现二行工具条，把鼠标箭头放在第个标志的下面（会显示工具名称的）其中：＜＞标志是显示ＨＴＭＬ代码．点击它出现编辑页面，你就可以粘贴代码了．点击＂预览，确定＂就能在编辑日志页面上显示图片等等．点击＜插入多媒体＞也可以粘贴代码．

１、走马灯的女娃

代码：
<A href="http://hplc2.blog.163.com/blog"><marquee><img src="http://img217.photo.163.com/heide989/7650502/703775809.gif"> <img src="http://img217.photo.163.com/heide989/7650502/703775727.gif"> <img src=" http://img217.photo.163.com/heide989/7650502/705911815.gif"> <img src="http://img217.photo.163.com/heide989/7650502/668989636.gif "> <img src="http://img217.photo.163.com/heide989/7650502/703776336.gif"> <img src=" http://img217.photo.163.com/heide989/7650502/703776102.gif"> <img src="http://img217.photo.163.com/heide989/7650502/703773309.gif"> <img src=" http://img217.photo.163.com/heide989/7650502/663500774.gif"> </marquee> </A>

2、ＦＬＡＳＨ

<P align=center>
<TABLE border=0>
<TBODY>
<TR>
<TD style="FILTER: Alpha(opacity=100,style=2)" width=420 background=http://img.blog.163.com/photo/nSApR9tUpRrcwrLQ6XfaSg==/1157706579211033683.jpg height=29>
<P><B><EMBED align=right src=http://imgfree.21cn.com/free/flash/16.swf width=420 height=296 type=application/octet-stream wmode="transparent" quality="high"></EMBED></B></P></TD></TR></TOBDY></TBODY></TABLE></P>

讲到这里你可能明白了，几个例子看懂了，大同小异两种模块的用法是要样的，只是发挥作用不同而已．要是不懂或不会你就多看看．一定能成功的。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　原创《亮剑》
续一

  <EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=" http://www.0755yiqi.com/webkkk/fengjing2007/fj-353.swf" width=800 height=560 type=application/x-shockwave-flash autostart="0" quality="high" wmode="transparent" allowNetworking="internal" allowScriptAccess="never">

<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=" http://www.0755yiqi.com/webkkk/fengjing2007/fj-344.swf" width=800 height=600 type=application/x-shockwave-flash autostart="0" quality="high" wmode="transparent" allowNetworking="internal" allowScriptAccess="never">

<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=" http://www.0755yiqi.com/webkkk/fengjing2007/fj-240.swf" width=800 height=600 type=application/x-shockwave-flash autostart="0" quality="high" wmode="transparent" allowNetworking="internal" allowScriptAccess="never">

<P align=center><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.0755yiqi.com/webkkk/fengjing2007/fj-012.swf width=800 height=600 type=application/x-shockwave-flash wmode="transparent" quality="high"></EMBED></P>

<P align=center></P><P align=center><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.0755yiqi.com/webkkk/fengjing2007/fj-279.swf width=800 height=600 type=application/x-shockwave-flash wmode="transparent" quality="high"></EMBED></P>

<P align=center> <EMBED src=http://www.blog286.com/upfile/flash/071120/04.swf width=800 height=600 type=application/octet-stream quality="high" wmode="transparent" > </P>

<DIV align=center>
<TABLE cellSpacing=5 align=center background="">
<TBODY>
<TR>
<TD><EMBED src=http://cfs12.planet.daum.net/upload_control/pcp_download.php?fhandle=Nmd1MHhAZnMxMi5wbGFuZXQuZGF1bS5uZXQ6LzEzNTg2MTYyLzAvNTUuc3dm&filename=55.swf width=800 height=600 type=application/x-shockwave-flash allowScriptAccess="never" allowNetworking="internal"> </TD></TR></TBODY></TABLE></DIV>

<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src="http://www.0755yiqi.com/webkkk/fengjing2007/fj-242.swf =800 height=600 type=application/x-shockwave-flash autostart="0" quality="high" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"> </P>

<P align=center><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.0755yiqi.com/webkkk/fengjing2007/fj-061.swf width=800 height=580 type=application/x-shockwave-flash wmode="transparent" quality="high"></EMBED></P>

http://www.0755yiqi.com/webkkk/fengjing2007/fj-063.swf

http://www.0755yiqi.com/webkkk/fengjing2007/fj-065.swf

http://www.0755yiqi.com/webkkk/fengjing2007/fj-066.swf

http://www.0755yiqi.com/webkkk/fengjing2007/fj-067.swf

http://www.0755yiqi.com/webkkk/fengjing2007/fj-069.swf

http://www.0755yiqi.com/webkkk/fengjing2007/fj-070.swf

http://www.0755yiqi.com/webkkk/fengjing2007/fj-071.swf

http://www.0755yiqi.com/webkkk/fengjing2007/fj-073.swf

http://www.0755yiqi.com/webkkk/fengjing2007/fj-075.swf

http://www.0755yiqi.com/webkkk/fengjing2007/fj-076.swf

http://www.0755yiqi.com/webkkk/fengjing2007/fj-077.swf

希望朋友们能喜欢！别忘了给我留言哟！你的留言会我更大的动力，我将给朋友们提供更多的精彩！

如喜欢请选择“引用”！喜欢就拿回去可要留言告知哦！

<引用>阅读

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_085074092086084067080085084095080084089075084085081071',
              blogTitle:'博客页面制作',
              blogAbstract:'<P\>                      <A target=\"_blank\" href=\"http://taohua36.blog.163.com/\" \>彼岸桃花</A\>、<A target=\"_blank\" href=\"http://cenqw.blog.163.com/\" \>亮剑</A\> </P\>  <BLOCKQUOTE\>  <BLOCKQUOTE\>  <DIV align=\"center\" \>  </DIV\>  <DIV align=\"center\" \>  <TABLE height=\"70\" width=\"525\" \>  <TBODY\>  <TR\>  <TD style=\"BACKGROUND-REPEAT: no-repeat; BACKGROUND-: ;\"  vAlign=\"center\" align=\"middle\" background=\"http://img.blog.163.com/photo/UMpb-bLXsgiJ8e70v50XJQ==/4251398048238044429.jpg\" \>  <P align=\"left\" \><FONT face=\"楷体_GB2312\" size=\"5\" \><FONT color=\"#0080ff\" \>             博客页面制作</FONT\></FONT\></P\></TD\></TR\></TABLE\></DIV\>  <P\> </P\>  <P\></P\></BLOCKQUOTE\></BLOCKQUOTE\>',
              blogTag:'',
              blogUrl:'blog/static/428803742009216114433482',
              isPublished:1,
              istop:false,
              type:0,
              modifyTime:1316915271832,
              publishTime:1237218273482,
              permalink:'blog/static/428803742009216114433482',
              commentCount:2,
              mainCommentCount:2,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:true,
              hostIntro:'生长在兵团工矿厂铁厂沟。83年,应征入伍。87年--89年又读中专和大专,曾在工矿厂铁厂沟煤矿、宣传科、玻璃厂、生产技术科、党委办公室、电视台、两办室等单位任职。擅长写作、摄影和摄像。',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/428803742009216114433482">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

新疆伊犁刘洪生的博客

导航

日志

博客页面制作

《在网易博客里如何《引用》网站及好友日志内容》

亮剑博客《制作》

历史上的今天

最近读者

热度

评论

页脚