网海相遇缘相聚情系延陵缘我家

延缘小家

日志

关于我

延缘之梦

文章分类

编制单幅图片音画网页的方法及代码

2009-10-29 21:36:07| 分类：美化博客素材代码 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

编制单幅图片音画网页

的方法及代码

（HTML语言基础）

编制:延缘缘

很多朋友都觉得图片制作的网页让人赏心悦目,但不知道怎

么去制作.其实这很简单,哪怕你不会代码也可以去制作.只要

你懂复制和粘贴就可以做出你喜欢的图片网页。现我用"照

猫画虎"的方法，与大家学习交流。在你准备好你所喜欢

的图片和音乐就可以开始制作了。

首先,我们可以到网站找到你喜欢的制作模式.然后把它复

制粘贴好就可以了.登陆到你的后台做好编辑的准备.

准备的资料如下

图片地址：要选用网易博客支持上传显示的图片网站，否则

日记中就不能显示；也可选用你自己相册中图片

（QQ相册图片也不能显示）。

音乐地址：选用你喜欢歌曲（MP3）与动画，一般在百度网

去找一下，其他网站能否可用，我没试过。

FLASH地址: 与你选歌曲一样，但有点在图片上加贴的

FLASH是透明的动态图片，它没有背乐与歌

曲组合。

编制日记文字：就是你要发表的大作，在这先说明几点：

1、文章横竖排列是有区别的，字数长 短多少没关系；

2、动态与静态文本也是有区别，一般选用

动态（其方向为左右、向上游动），静态的

会影响图片效果，这由你自己定吧；

3、字体大小颜色都会编，这就不说了。

编制方法与说明

一、将找到的编辑模式复制到你的后台。在 查看HTML源

代码里打上钩，就可以看到在代码编辑模式里了。把下面的这

组代码全部复制粘贴到你的后台里。

请选用复制实例制作代码

（复制代码一定要全部选中,别漏掉一点）

试用以下代码运行检测器，观视实例效果

http://www.e077.com/html/

　请点击观赏实例效果

http://ylxyy8987.blog.163.com/blog/static/453860200992881219740/

<body bgcolor="#000000">

<TABLE height=0 width=700>
<TBODY>
<TR>
<TD width="100%" height=0>
<DIV align=center>
<TABLE height=0 cellSpacing=30 cellPadding=0 width=718 background=http://lgqxxy.16789.net/domName/lgqxxy/200711821223280533.jpg border=0>
<TBODY>
<TR>
<TD width=100 height=0 background="http://img617.ph.126.net/NRsCm1x-F9j6ncLENRBdJg==/1911778041820535656.gif">
<DIV style="WIDTH: 655px; HEIGHT: 19px" align=center>
<P></P>
<P align=right><EMBED style="Z-INDEX: 3; LEFT: 270px; WIDTH: 427px; TOP: 48px; HEIGHT: 179px" src=http://www.flash34.com/load.swf?s=s3&id=/swfs/2008/10/20081026024004_67461.swf type=application/x-shockwave- tybe="application/x-shockwave-flash" quality="high" menu="false" wmode="transparent" flash allowNetworking="internal" allowScriptAccess="never"> </P>
<P></P>
<P></P>
<P></P>
<P></P>
<P></P>
<P></P>
<P></P>
<P><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer align=right src=http://yahkrazy.com/krazydollflash21/07.swf width=400 height=500 type=application/x-shockwave-flash quality="high" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"></P>
<P>　</P>
<P>　</P>
<P>　</P>
<P>　</P>
<P>　</P>
<P>　</P>
<P align=left><EMBED style="Z-INDEX: 3; LEFT: 37px; WIDTH: 618px; TOP: 197px; HEIGHT: 344px" align=center src=http://imgfree.21cn.com/free/flash/59.swf type=application/x-shockwave- tybe="application/x-shockwave-flash" quality="high" menu="false" wmode="transparent" flash allowNetworking="internal" allowScriptAccess="never"> </P>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 325px; top: 700px" id="layer1">
　</div>
<FONT face=华文中宋 color=#ff0000 size=5>梦江南<BR><BR>素材/网络版面音画制编/延缘缘
</FONT></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>

二、现在我们要做的就是开始替换图片和文字了。

在这里只有一张图片的地址，我们找到自己需要

替换的图片地址把它复制好，然后在原来的图片

地址上进行替换。换好以后在 的地方去掉钩，

回到展示区后就可以看见你的新图片已经换好了。

三、换好图片以后根据图片的颜色再来把边框

的颜色进行修改。找到你需要更换的颜色代码，

然后把它复制粘贴到原来的颜色地址上，这样边

框就会就改变了以前的颜色。在根据你的喜欢调

整边框的宽和窄，直到你满意就可以了。

四、将准备好的flash地址替换掉原来的flash动画地址。

五、现在进行文章内容的替换。把你自己的文

章内容依次替换到“我加入的文字”的中。如果插

入好文字还有多的，可选择把多余的删掉，或在

你刚复制粘贴的文字代码后面再添加。

六、把已经准备好的音乐地址复制好粘贴在原

来的音乐地址上。这样你的图片网页作品就基本

上做好了。

七、查看HTML源代码的地方去掉钩，在展示

区你可以看到整个作品的制作情况和风格了。如

果还有觉得不满意的地方,你可以重新回到代码

编辑模式里进行修改。当你觉得满意了就可以添

加发表了。

主要原始修改参数

（这由你自己在编中而定）

BORDER-RIGHT: #a52a2a 6px 右边框颜色及宽度

BORDER-TOP: #a52a2a 6px 上边框颜色及宽度

BORDER-LEFT: #a52a2a 6px 左边框颜色及宽度

BORDER-BOTTOM:#a52a2a 6px 下边框颜色及宽度

WIDTH: 700px 边框及图片展示宽度

height=600 边框及图片展示高度

FONT-SIZE:50pt 字体的大小

direction=up 字体移动的速度

（up=向上、向左右来回=alternate、向右=alternate）

MARQUEE scrollAmount=1 字体移动的速度

FONT face=楷体_GB2312 字体

LEFT: -100px 边框左右调整

FONT color=#ffebcd 字体颜色

相关友情提示

1、图片的宽和高一定要和边框展示的宽和高相吻合。

2、选用复制代码后，将我的内容替换成你自己喜欢

的，但一定要先保存粘贴在你电脑记事本中，

便于修改参考。

3、在文字输入或粘贴时，一句或一段落后面要入<BR>

<BR代码，这很重要别忘记。

4、图片要选择和文章内容比较适合的。这样你做出

的图片网页就可以让人赏心悦目了。朋友们多动手、

多试贴、相信你一定是最棒的。

4、以上是本人学习中的一点体会，权作抛砖引玉，

预祝大家一定可以成功。缘缘感谢朋友们长期

来关爱，再次谢谢了！

评论这张

转发至微博

阅读(925)| 评论(28)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_083066084094088069082085081095080083082075082086',
              blogTitle:'编制单幅图片音画网页的方法及代码',
              blogAbstract:'<DIV align=\"center\" \>  <TABLE style=\"LEFT: 20px; WIDTH: 700px; TOP: 10px;\"  height=\"2\"  cellSpacing=\"40\"  align=\"center\"  background=\"http://img.blog.163.com/photo/Ow5t6IdKf1E5vkiY1rumgw==/5372231405500222910.jpg\"  border=\"0\" \>  <TBODY\>  <TR\>  <TD height=\"1\" \>  <DIV align=\"center\" \>  <DIV align=\"center\" \>  <TABLE style=\"BORDER-TOP-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-BOTTOM-STYLE: dotted;\"  borderColor=\"#00ff00\"  cellSpacing=\"0\"  cellPadding=\"10\"  width=\"620\"  align=\"center\"  border=\"10\" \>  <TBODY\>  <TR\>  <TD bgColor=\"#000080\" \>  <P align=\"center\" \></P\>  <P align=\"center\" \><FONT face=\"黑体\"  color=\"#8b0000\"  size=\"6\" \><STRONG\>编制单幅图片音画网页</STRONG\></FONT\></P\>  <P align=\"center\" \><FONT face=\"黑体\"  color=\"#8b0000\"  size=\"6\" \><STRONG\>的方法及代码</STRONG\></FONT\></P\>  <P align=\"center\" \>　</P\>  <P align=\"center\" \></P\></TD\></TR\></TABLE\></DIV\></DIV\></TD\></TR\></TABLE\></DIV\>',
              blogTag:'',
              blogUrl:'blog/static/45386020099299367904',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1317122459287,
              publishTime:1256823367904,
              permalink:'blog/static/45386020099299367904',
              commentCount:28,
              mainCommentCount:28,
              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/45386020099299367904">${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 - 订阅此博客

网海相遇缘相聚情系延陵缘我家

导航

日志

编制单幅图片音画网页的方法及代码

历史上的今天

最近读者

热度

评论

页脚

网海相遇缘相聚 情系延陵缘我家

导航

日志

编制单幅图片音画网页的方法及代码

历史上的今天

最近读者

热度

评论

页脚

网海相遇缘相聚情系延陵缘我家