月亮下的故事

用音乐与自己对话……

日志

关于我

广寒仙子

玉骨哪愁瘴雾,冰姿自有仙风

文章分类

【学习】不用代码编辑的音乐帖(初学者入门篇)

2007-08-11 20:18:26| 分类：网上学堂 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

教大家一个最简单的，不用代码编辑的音乐帖子

　　相信很多朋友都会说，一看到代码就头痛，密密匝匝代码不知从何入手。呵呵，仙子在这里为大家介绍一个不用代码编辑的，用傻瓜方法就可以做的音乐帖子（前提你必须会复制和粘贴图片地址和音乐地址）。【学习】不用代码编辑的音乐帖(初学者入门篇) - 广寒仙子 - 月亮下的故事

　　一个简单的音乐帖子是由图片和音乐组合已成的，只有图片没有音乐就只能叫图画，只有音乐没有图片也不能成为音画。大家可以先看看这个实例，点击这里进入查看：http://lucy28.blog.163.com/blog/static/405142200623 1123250/　

　　在这首【单曲欣赏】简爱，就是一张图片和一首音乐再加上歌词组合已成的，这样简单，相信大家都会的啦。下面介绍一个用背景，边框，图片，文字，播放器构成的音乐帖子。最主要的是边框，它是一个帖子的大纲。设计边框，其实就是设计一个表格，根据帖子要求，或者个人的爱好，边框可以是显性的，也可以是隐性的。

　　首先点击编辑器上的全部功能，上面就会出现很多功能键，如下图所示：红色圈圈的就是添加表格功能键。

　　点击添加表格这个图标，根据要求，把行和列都填写1，点击后出现下面的原始表格：

原始表格（这个是有边框没有背景）

在这里可以直接贴上图片和写文字

音乐也可以在这里直接点击<插入多媒体播放器 >

　　说明：表格行数和列数按照自己的需要填写，对齐方式选居中，边框粗细也按自己需要填写，一般3~5就可以，如果不要边框就是隐性表格，就把默认的1消掉，什么都不填，单元间距和单元边距保持原来的默认数值就可以，表格宽度自己选择，一般75%左右就可以。学到这里基本上就可以做一个简单的音画帖子了。

　　网易博客这里的表格编辑是最简单的一种，只有白色一种边框，不能添加边框颜色，如要增加颜色的话，介绍大家用一个网络在线高级编辑器：http://master8.net/e/　在这个编辑器里，找到一个如上图所示的图标<插入表格>后打开对话框，按需要填写边框颜色，背景颜色后点确定。

　　一切设置好后就会出现你需要的边框效果，例如我做的这个以红色为边框，蓝色为背景的表格，这就是做音乐帖子的基本模型。

（加上颜色的边框）

在这里可以直接贴上图片和写文字

音乐也可以在这里直接点击<插入多媒体播放器 >

　　有了这个边框，接下来就要在这个模型里写上内容，如果是图片，那么图片格式的后缀名必须为 jpg、 gif。图片可直接复制粘贴到上面的边框里，文字就直接在边框里面输入，文字字体颜色、字体背景颜色、字体大小、字体加粗、斜体、下划线等内容都可以在全部功能选项里自行设置；可以选择左对齐，居中，右对齐，为了帖子整体美观，建议一般选用居中。

　　图片和文字搞定后，接下来就该是播放器了，音乐地址一般最常用的是mp3、WMA 等的格式，直接点击插入多媒体播放器粘贴音乐地址就可以了，（别忘把地址栏里的http://清空再粘贴），点<高级选项>可自行设置自动播放或者手动播放，播放器大小会自动调节。最后别忘记保存你的劳动成果哦（如果不想立即发表，可先保存草稿）。

　　网易博客编辑的播放器效果如下：（手动播放）

　　若要更多精彩的播放器请点击这里查看：1. ［素材］新款播放器·前景加图片的播放器

　 2. [素材]半透明播放器和隐形播放器代码

　　实例效果欣赏：点击进入欣赏：【音画】《丁香花》的绝唱

**************** 呵呵，网络上面有好多高手，我做教学帖子，实在有点班门弄斧了！！【学习】不用代码编辑的音乐帖(初学者入门篇) - 广寒仙子 - 月亮下的故事

　　　　　　有什么问题，有不懂的请在这里跟帖子留言，我会尽量帮大家解决！

评论这张

转发至微博

阅读(1747)| 评论(41)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_095068086082089069083085074071084083080071086',
              blogTitle:'【学习】不用代码编辑的音乐帖(初学者入门篇)',
              blogAbstract:'……',
              blogTag:'网易博客,学习',
              blogUrl:'blog/static/405142200771181826811',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1317450788478,
              publishTime:1186834706811,
              permalink:'blog/static/405142200771181826811',
              commentCount:41,
              mainCommentCount:39,
              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: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/405142200771181826811">${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 - 订阅此博客

月亮下的故事

导航

日志

【学习】不用代码编辑的音乐帖(初学者入门篇)

历史上的今天

最近读者

热度

评论

页脚