三分天注定，七分靠打拼，爱拼才会赢！

推广网易博客、广交天下朋友.品荟酸甜苦辣、道尽家长里短！

日志

关于我

爱拼才会赢

文章分类

简单音画帖子制作

2008-06-22 15:27:37| 分类：博客技巧 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

音画帖子制作,常用的有三种方法:

1. 使用全代码制作.

2. 使用一些软件制作.(比如:FrontPage2003等)

3. 使用论坛的一些基本功能(主要是表格功能)制作.

这里是用在线编辑器来制作帖子.在线编辑器的地址：

http://www.gdcic.net/nds/deditor.html

这网址可以加入网页浏览器的收藏夹里保存好备用。

第一步: 熟悉设置

要使用编辑器，就一定要先熟悉一些常用的设置:首先打开上述网址，出现一个编辑器页面。看看下面有一组设

置, "普通"是设计状态, "预览"是预览状态, "HTML"是代码状态.我们一般是
在"普通"设计状态下编帖.

第二步: 编辑制　作

好了，准备工作做好了，我们开始实际操作了:先点击"普通"按钮，进入编辑区，注意，你现在就进入

了"普通"设计状态了。

(一) 加边框

1. 点击插入表格按钮，弹出一个对话框，点确定，就出现这样的一层边框:

2. 因为是多层边框，所以，我们再复制几层这样的边框:

鼠标放在这个边框的边缘处，(出现一个十字标记)，右击--复制,然后
在边框外空的地方点一下，再把鼠标放进表

格内最*左边的位置，(鼠标进去后，可以用退格键试试，把多余的空格退掉，免得边框内有空格，边框会变高。)

右击---粘贴，就出现双层边框。重复这样的操作，做成一个七层边框如下:

(二) 加背景图片

刚才的边框设计是在"普通"状态下进行的，现在的背景图片是要在“HTML”代

码状态下进行.

1. 点击下面的"HTML"按钮，进入代码状态，出现的是这样的一段代码:

<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>

2. 在这里,我们可以知道一些简单的代码知识:

边框的颜色----borderColor=#cccccc

单元间距----cellSpacing=2

单元边距----cellPadding=3

表格宽度----width="100%"

背景颜色----bgColor=#ffffff

边框粗细----border=1

3. 我们先要设置的是背景图片,所以,我们把原来代码里第一组中的"bgColor=#ffffff "删去,改为"background=图片地址".记得这地址后面要留有一个空格,否则图片将无法显示.

这里的"background"就是背景图片地址的意思,后面的图片地址,就是我要加的最外层的背景图片地址.

(背景图片1)

4. 接下来,把代码里第二组中的""bgColor=#ffffff "删去,改为"background=图片地址".

这是加上第二层边框的背景图片:

(背景图片2)

5. 以同样的方法加上其他几层边框的背景图片:
（3) (4) (5) (6) (7)

6. 好了,背景图片设置好了,接下来就是设置边框的大小了.如果你刚才介绍的几个代码熟悉的话,可以在代码状

态里把这些数字按照你自己的意思稍作修改就行.如果觉得不是很清楚的话,我们就回到"Design"设计状态里去修

改.

7. 点击Design,选中最外层的边框,(鼠标放在这一层边框的边缘部分,点击左键),边框外就出现九个小方块,然后

点击按钮,弹出一个表格设置的对话框,我们把它设置为:"边框粗细=0","单元间距=30","单元边距=30","对齐方式

=默认",然后点确定.同样的方法选中第二层边框,设置这一层的边框为:"边框粗细=0","单元间距=8","单元边距

=8","对齐方式=右对齐",然后点确定.

第三层边框的设置为:"边框粗细=0","单元间距=10","单元边距=10","对齐方式=右对齐","背景颜色=黑色",然后

点确定.

第四层边框的设置为:"边框粗细=0","单元间距=2","单元边距=2","对齐方式=右对齐",然后点确定.

第五层边框的设置为:"边框粗细=0","单元间距=8","单元边距=8","对齐方式=右对齐",然后点确定.

第六层边框的设置为:"边框粗细=0","单元间距=2","单元边距=2","对齐方式=右对齐",然后点确定.

第七层边框的设置为:"边框粗细=0","单元间距=2","单元边距=2","对齐方式=右对齐",然后点确定.

好了,边框的设置到此结束.我们现在见到的,就是下面这样一个多层边

框(如果不满意它的宽度的话,可以按照自己的意思再选中边框

修改):

(三) 加图文内容

漂亮的外框做好了（如果你想速成的话，可以直接借用别人的整套边框素材，这样可以省却上面几步操作；但如

果你想自己创作，自己来制作边框的话，就必须得这样一步步去完成）。下面就简单了，我们只要把自己准备原

始资料复制进去就可以了。如果文字和里面的图片大小不合适的话，你都可以选中之后，再进行文字和图片的编

辑。

（另：如果引用图片时留下蓝色线条的话，可以选中图片，点击去掉

超级链接，就能把这蓝色线条去掉）

制作加背景及边框

的音乐图文帖

正文

正文

鱼儿

对了，可别忘了给帖子配上一段合适的曲子哦~~~

方法：在帖子代码最后加上一段：

<EMBED src=音乐属性地址 width=0 height=0 type="audio/x-pn-realaudio-plugin" loop="true" autostart="true" controls="ControlPanel,StatusBar">

最后一步：如果你不是很放心的话，可以先点"预览"先看看效果。满意了再将代码全部复制后，进到你的博客帖子编辑器里，点一下下面的“代码”字样，进入代码区，粘贴好后，再点一下下面的“代码”字样，就回到了“设计”状态。如果是“网易博客”的编辑器，就再点左上方“切换到预览状态”就可以观看你的帖子效果了。

如果行了，点“切换到编辑状”返回编辑，填上“文章标题”、“标签”、“类别”。点开左下方的“摘要”字样，填上帖子摘要。好了，一切就绪。点击左下方“发表日志”就OK了。如果，系统弹出对话说过滤了有害代码，请修改后再发，这时你再点击一次“发表日志”就行了。

评论这张

转发至微博

阅读(1094)| 评论(1)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_084068082087085067081094094095083095087074092094083066',
              blogTitle:'简单音画帖子制作',
              blogAbstract:'<P\><BR\> </P\>  <BLOCKQUOTE\>  <P \>音画帖子制作,常用的有三种方法:</P\>  <P \>1. 使用全代码制作.<BR\></P\>  <P\><SPAN \>2. 使用一些软件制作.(比如:FrontPage2003等)<BR\><BR\>3. 使用论坛的一些基本功能(主要是表格功能)制作.<BR\><BR\>这里是用在线编辑器来制作帖子.在</SPAN\><SPAN \>线编辑器的地址：</SPAN\></P\>  <P\><SPAN \></SPAN\> </P\>  <P\><SPAN \><A rel=\"nofollow\" href=\"http://www.gdcic.net/nds/deditor.html\"  \>http://www.gdcic.net/nds/deditor.html</A\></SPAN\></P\>  <P\><SPAN \>这网址可以加入网页浏览器的收藏夹里保存好备用。</SPAN\></P\>  <P\><BR\></P\>  <DIV\>  <P align=\"center\" \>第一步: 熟 悉 设 置</P\><SPAN P \>  <P\><SPAN P\>  <P \><SPAN\><SPAN\></SPAN\></SPAN\></P\></SPAN\></P\></SPAN\></DIV\></BLOCKQUOTE\>',
              blogTag:'博客',
              blogUrl:'blog/static/79698851200852232737219',
              isPublished:1,
              istop:false,
              type:1,
              modifyTime:1317069917155,
              publishTime:1214119657219,
              permalink:'blog/static/79698851200852232737219',
              commentCount:1,
              mainCommentCount:1,
              recommendCount:1,
              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:false,
              hostIntro:'',
              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/79698851200852232737219">${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 - 订阅此博客

三分天注定，七分靠打拼，爱拼才会赢！

导航

日志

简单音画帖子制作

历史上的今天

最近读者

热度

评论

页脚