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

小資情調lxl

欢迎进入,留下你的足迹。

 
 
 

日志

 
 

【转载】(原创)博客目录制作/移动题图与内容的链接方法  

2013-09-26 06:56:11|  分类: 〈装扮博客〉 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

(原创)博客目录制作/移动题图与内容的链接方法

三月飞春雪

 

        博客目录,起着类似图书索引的作用 ,目的是给访问者提供博客内容检阅方便,同时,也使博客门面趋于简洁美观,富有层次感。随着时间的推移,博客容量愈发庞杂,对博客内容进行分类,以醒目的关键词为题制作博客目录,已被普遍采用。本文,是笔者“摸着石头过河”作博实践之小结,旨在与博友分享点滴心得体会。如有误人之处,敬请指正。

本文分两部分:一,基本用途 二,实例效果 三,组装制作

一,基本用途 

        读者点击移动题图即打开你所链接的主题内容页面:可用于博友的友情链接;博客导航栏;博客总目或专题目录。

二,实例效果

 

(原创)博客目录制作/眉图与内容的链接方法 -  三月飞春雪 - 三月飞春雪
2009年8月13日 -  三月飞春雪 - 三月飞春雪 2009年8月13日 -  三月飞春雪 - 三月飞春雪 2009年8月13日 -  三月飞春雪 - 三月飞春雪 2009年8月13日 -  三月飞春雪 - 三月飞春雪 2009年8月13日 -  三月飞春雪 - 三月飞春雪
我的音乐集 莎拉布莱曼 童声合唱集 约施特劳斯 柴科夫斯基
(原创)博客目录制作/眉图与内容的链接方法 -  三月飞春雪 - 三月飞春雪

 

 

三,组装制作

 

(一)复制下列源代码(即本文“二,实例效果”的源码),登录你的博客,点导航栏中的“日志”,点“写日志”,点“< >”打开日志源码编辑页面,鼠标对编辑区点右键,点“粘贴”,将代码贴进日志栏。

须复制的源代码如下:

<TABLE border=0 cellSpacing=0 width=600 background=http://img.bimg.126.net/photo/P-QuwYxvWk_5Dlv3MbafTg==/4017492342591607172.jpg align=center>
<TBODY>
<TR>
<TD><IMG style="WIDTH: 600px; HEIGHT: 10px" height=10 src="http://img.bimg.126.net/photo/AlDa58LZFYncGQ_B8JBBLw==/5114118851856219257.jpg"

<MARQUEE style="WIDTH: 98%; HEIGHT: 150px" direction=cont  width="98%" scrollAmount=3 scrollDelay=30>
<TABLE border=1 cellSpacing=3 cellPadding=1 width="100%" background=http://img.bimg.126.net/photo/J0cerUjfYOUwD1NtedX0DQ==/1982991210927055486.jpg>
<TBODY>
<TR>

<TD><A href="http://wyp-790116.blog.163.com/music/entry/fks_084070092083086069072087087066082094087064083/"><STRONG><IMG src="http://img.bimg.126.net/photo/WpZE2PVWATM5lw7vFQ7j4A==/2821223691571655266.jpg" border=0></STRONG></A></TD>
<TD><A href="
http://wyp-790116.blog.163.com/music/entry/fks_082069085095088067085087074066085087087075082085081/"><STRONG><IMG src="http://img.bimg.126.net/photo/hAuify1E84Dl7KvBFdCnyw==/2821223691571655279.jpg" border=0></STRONG></A></TD>
<TD><A href="
http://wyp-790116.blog.163.com/music/entry/fks_082070082080089067082095074066085087087075082085081/"><STRONG><IMG src="http://img.bimg.126.net/photo/x7fzYLcfe3mQDMx8TAxRSQ==/2821223691571655256.jpg" border=0></STRONG></A></TD>
<TD><A href="
http://wyp-790116.blog.163.com/music/entry/fks_082071085081087066085085074066085087087075082085081/"><STRONG><IMG src="http://img.bimg.126.net/photo/kSVEZMQFRXqdoOiCgseNOw==/2821223691571655261.jpg" border=0></STRONG></A></TD>
<TD><A href="
http://wyp-790116.blog.163.com/music/entry/fks_082071085081087066085087074066085087087075082085081/"><STRONG><IMG src="http://img.bimg.126.net/photo/QSnFslWwBsmzD-cAwS_jNA==/2821223691571655287.jpg" border=0></STRONG></A></TD></TR>
<TR>
<TD align=middle><FONT face=楷体_GB2312 color=#ffffff size=4><STRONG>我的音乐集</STRONG></FONT></TD>
<TD align=middle><FONT face=楷体_GB2312 color=#ffffff size=4><STRONG>莎拉布莱曼</STRONG></FONT></TD>
<TD align=middle><FONT face=楷体_GB2312 color=#ffffff size=4><STRONG>童声合唱集</STRONG></FONT></TD>
<TD align=middle><FONT face=楷体_GB2312 color=#ffffff size=4><STRONG>约施特劳斯</STRONG></FONT></TD>
<TD align=middle><FONT face=楷体_GB2312 color=#ffffff size=4><STRONG>柴科夫斯基
</STRONG></FONT></TD></TR></TBODY></TABLE></MARQUEE>

<IMG style="WIDTH: 600px; HEIGHT: 10px" height=16 src="http://img.bimg.126.net/photo/AlDa58LZFYncGQ_B8JBBLw==/5114118851856219257.jpg" width=450 border=0></TD></TR></TBODY></TABLE>

 

        * 如果,你想沿用上面实例代码的框架进行简单操作,请仅操作以下第“4,链接图片代码区源码”和“5,文题代码区源码”和“1,2,6”项中的宽度即可。如果,你要全面了解和全程操作,请依照本文顺序继续往下全程参阅:

(二)源码分层注释及更新操作(按源码自上而下分颜色层次为序)

1,背景图代码区源码:

<TABLE border=0 cellSpacing=0 width=600 background=http://img.bimg.126.net/photo/P-QuwYxvWk_5Dlv3MbafTg==/4017492342591607172.jpg align=center>
<TBODY>
<TR>

 

注释

其中:

“width=600” 是可调背景图宽度(因高度受限于移动背景图的设定,所以,这里不作设置)。

“http://img.bimg.126.net/photo/P-QuwYxvWk_5Dlv3MbafTg==/4017492342591607172.jpg” 是可调背景图地址。

 更新操作

       如果你要更换背景图,可将背景图地址用新背景图地址替换。背景图可以是你已上传博客相册的图片或网站上的图片。获取图片地址的方法:属标选定图片,点右键,在出现的菜单中点属性,然后复制其上的地址。

        背景图片的宽度要与下面谈到的边框线图宽度相同,整体宽度还要与你放置位的宽度相适应。在不改变移动题图的大小和数量时,如果调大背景图宽度,会使题图间隔增大;在不改变移动题图的大小和数量时,如果调小背景图宽度,会使题图变小。换言,如果,在不改变移动题图的大小前提下,你要增加题图数量,就必须相应调大背景图宽度。如果你不调宽背景图,则题图会相应按比例缩小。

 

2,上边框代码区源码:

“<TD><IMG style="WIDTH: 600px; HEIGHT: 10px" height=10 src="http://img.bimg.126.net/photo/AlDa58LZFYncGQ_B8JBBLw==/5114118851856219257.jpg

注释 

其中:

“WIDTH: 600px; HEIGHT: 10px  ”是上边框可调宽度和高度。

“http://img.bimg.126.net/photo/AlDa58LZFYncGQ_B8JBBLw==/5114118851856219257.jpg ”是上边框图片地址。

 更新操作

       上边框指效果图例中的顶端的蓝色线段。如果你要更换上边框图,就用新图地址替换原地址。上边框图的宽度设置要与上面谈到的背景图的宽度一致。

3,移动(载题图)背景图代码区源码:

“<MARQUEE style="WIDTH: 98%; HEIGHT: 170px" direction=right height=170 width="98%" scrollAmount=3 scrollDelay=30>
<TABLE border=1 cellSpacing=3 cellPadding=1 width="100%" background=http://img.bimg.126.net/photo/J0cerUjfYOUwD1NtedX0DQ==/1982991210927055486.jpg

注释 

其中:

“WIDTH: 98%; HEIGHT: 170px”和“height=170 width="98%" 中的百分比是移动载题图的底图宽度的设定(不是所载题图的大小设定):这里采用百分比来约束所载图片的大小,即扩大载图区规格可输入超过100%的数值(在题图大小固定后,将使题图间隔增大),缩小载图区规格可输入小于100%的数值(在题图大小固定后,将使题图按比例收缩)。“HEIGHT: 170px“是移动载题图的底图的可调高度。 STRONG>“direction=cont ”是图片移动方向,“cont ”为向左移动,要向右移动换成“right”

“http://img.bimg.126.net/photo/J0cerUjfYOUwD1NtedX0DQ==/1982991210927055486.jpg”是移动(载题图)背景图地址。

“scrollAmount=3 scrollDelay=30”  “ border=1 cellSpacing=3 cellPadding=1”是移动(载题图)背景图边缘立体隆起厚度。

 更新操作

       如果你要更新移动(载题图)背景图,就用新背景图地址替换旧背景图地址,本篇实例中的移动(载题图)背景图的规格可根据实况调整。

       移动背景图上所载的题图的向小调整可通过本区域的百分比设置进行调整。注意:百分比值设置对题图向小规格的调整是对所有题图的统一比例调小,但无法反向调大。调个别题图的实体大小的调整,请参见下面的“4,链接图片代码区源码"中的"(2)题图链接”

4,链接图片代码区源码:

<TD><A href="http://wyp-790116.blog.163.com/music/entry/edit/fks_084070092083086069072087087066082094087064083/"><STRONG><IMG src="http://img.bimg.126.net/photo/WpZE2PVWATM5lw7vFQ7j4A==/2821223691571655266.jpg" border=0></STRONG></A></TD>
<TD><A href=""
http://wyp-790116.blog.163.com/music/entry/edit/fks_082069085095088067085087074066085087087075082085081/"><STRONG><IMG src="http://img.bimg.126.net/photo/hAuify1E84Dl7KvBFdCnyw==/2821223691571655279.jpg" border=0></STRONG></A></TD>
<TD><A href="
http://wyp-790116.blog.163.com/music/entry/edit/fks_082070082080089067082095074066085087087075082085081/"><STRONG><IMG src="http://img.bimg.126.net/photo/x7fzYLcfe3mQDMx8TAxRSQ==/2821223691571655256.jpg" border=0></STRONG></A></TD>
<TD><A href="
http://wyp-790116.blog.163.com/music/entry/edit/fks_082071085081087066085085074066085087087075082085081/"><STRONG><IMG src="http://img.bimg.126.net/photo/kSVEZMQFRXqdoOiCgseNOw==/2821223691571655261.jpg" border=0></STRONG></A></TD>
<TD><A href="
http://wyp-790116.blog.163.com/music/entry/edit/fks_082071085081087066085087074066085087087075082085081/"><STRONG><IMG src="http://img.bimg.126.net/photo/QSnFslWwBsmzD-cAwS_jNA==/2821223691571655287.jpg" border=0></STRONG></A></TD></TR>

 

注释:

       共五组代码:每组代码的上层为打开的内容地址,下层为文题图地址。

 更新操作

(1)页面链接

        假如你制作的是博客首页的博客分类总目录,例如“文学作品”,点击“文学作品”上面的题图,要打开“文学作品”的分目录,那么,你须在保持你的在编页面不退出前提下,另外,再次登陆你的博客,打开你要链接的“文学作品”分目录的页面,鼠标右键点击页面顶栏的地址,在出现的菜单上点复制,然后,返回到你此前操作的源码编辑页面,鼠标左键对第一组上层的地址(例如http://wyp-790116.blog.163.com/music/entry/edit/fks_084070092083086069072087087066082094087064083/拖色罩选,在用鼠标对着罩色区域点右键,再出现的菜单中点粘贴,用你的新链接地址将旧地址替换。

注意:粘贴的新地址假如是本篇日志的地址http://wyp-790116.blog.163.com/blog/static/11168637200971010442976/edit/”,请你在替换编辑时,一定要删除尾缀edit/”,否则,别人打不开要浏览的页面!(edit/”,限定为博主登录页面,读者无法进入!)

(2)题图链接

      题图链接与页面链接类似。与每组上层页面链接相对应的近邻其下的地址链接就是题图链接。

你首先要选好题图(可从你的博客中选,也可从其他网络上选。题图的大小:应根据移动载题图的背景图的规格来确定,高度不要超过前者,每帧选图的宽度之和等于前者的总宽度。这需要你下载后,使用处理图片的软件来对所选题图进行前期裁剪和像素规格化后,再上传博客,或使用在线处理图片后使用),然后鼠标右键对图片点击,在出现的菜单上点属性,右键拖色选菜单上的图片地址,点右键,再点左键复制地址。返回操作页面,左键拖色选第一组下层的题图链接地址,点右键,点粘贴,完成用你选择的新题图地址替换旧题图地址的操作。

(3)增加链接

      如果,你要增加目录题图,就将一组或若干组代码复制后,粘贴在第五组代码之后,然后替换题图地址即可。

 

5,文题代码区源码:

“<TR>
<TD align=middle><FONT color=#ffffff size=4 face=楷体_GB2312><STRONG>我的音乐集</STRONG></FONT></TD>
<TD align=middle><FONT color=#ffffff size=4 face=楷体_GB2312><STRONG>莎拉布莱曼</STRONG></FONT></TD>
<TD align=mi

ddle><FONT color=#ffffff size=4 face=楷体_GB2312><STRONG>童声合唱集</STRONG></FONT></TD>
<TD align=middle><FONT color=#ffffff size=4 face=楷体_GB2312><STRONG>约施特劳斯</STRONG></FONT></TD>
<TD align=middle><FONT color=#ffffff size=4 face=楷体_GB2312><STRONG>柴科夫斯基</STRONG></FONT></TD></TR></TBODY></TABLE></MARQUEE>

注释

其中:

“color=#fffff” 和 “我的音乐集”,前码为可调文字颜色,后码为输入的文题文字。余类推。文题的排列顺序:文题自上而下同图片自左右顺序相吻。

“size=4”是可调整的文字的规格。

 更新操作

        本操作与上面的操作相对应关联。页面链接和题图链接形成后,相对应的链接题图要有一个文题,例如前例的“文学作品”等等。在这里键入你编辑的文字即可。关于文字颜色的选择:

选择颜色编码请点击这里

选好文字颜色就把色块右侧的颜色编号用复制粘贴的方法替换旧编号即可。文字的大小,根据题图宽度进行调整。

增加目录的链接

      如果,你已整加了题图数量,就要等量增加对应的目录文题:可将一组或若干组

文题代码复制后,粘贴在第五组代码之后,然后替换文题文字即可。

6,下边框代码区源码:

“<IMG style="WIDTH: 600px; HEIGHT: 10px" height=16 src="http://img.bimg.126.net/photo/AlDa58LZFYncGQ_B8JBBLw==/5114118851856219257.jpg" width=450 border=0></TD></TR></TBODY></TABLE>

 

注释: 

其中:

“style="WIDTH: 600px; HEIGHT: 10px”  依次是下边框可调宽度及高度,可调宽,高度应与背景图和移动霓虹背景图的宽,高度值一致。

“src="http://img.bimg.126.net/photo/AlDa58LZFYncGQ_B8JBBLw==/5114118851856219257.jpg" 是下边框图片地址。

更新操作

        下边框指效果图例中的底端的蓝色线段。本操作同上面的上边框更新操作相同,如果你要更换下边框图,就用新图地址替换原地址。下边框图的宽度设置要与上面谈到的背景图的宽度及上边框宽度一致。

7,上述操作过程中,你可随时点“< >”返回文字编辑页面看效果(若演示移动效果,须点日志下面的“发表”或点“保存为草稿”。)编辑完成后,最终,点“发表”或点“保存为草稿”。

8,装入博客首页模块中

      浏览检查最终效果,如果你感觉满意,再点日志“编辑”,点“< >”,对代码页面点右键,点“全选”后再次右键点“复制”,然后,登录你的博客首页,鼠标指向左上角动态箭标,点出现的“装扮博客”,点“设置首页内容”,点“添加自定义模块”,鼠标对框内点右键,点粘贴,点预览,看看效果,(如果,模块宽度不合适,点“返回编辑",根据你摆放位的宽度,等值调整上述第“1,2,6”项中的宽度值,点“预览”察看模块大小合适时,点“返回编辑",在模块名称栏输入你给定的模块名称,点“确定”。OK。

 

(原创)七律 望春 -  三月飞春雪 - 三月飞春雪

点击进入三月飞春雪博客

  评论这张
 
阅读(1)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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