【原】教您制作图书馆首页顶图（原创）

春天没来 2012-05-30

展开全文

教您制作图书馆首页顶图（原创）

您的“图书馆首页”是您的图书馆的“门面”，怎样才能把图书馆首页“装扮”得漂漂亮亮的呢？其中，“顶图”是一个很重要的装扮因素。看到网络中转传的许多“顶图”，真让人爱不释手，可就是放置不到图书馆首页的顶部，其实，那些所谓的“顶图”，只不过是个“顶图素材”罢了。看到别人的图书馆首页有漂亮的自定义顶图，真是让人羡慕，真想拿过来放到自己的图书馆首页顶部，可就是办不到。

没关系，您就要如愿以偿了。下面，我就来教教您，让您制作一个您自己喜爱的顶图。也许有人会说，我一不会英语，二不懂代码，也能够自己制作顶图吗？回答是肯定的。我就是一个年过花甲的老头，我也没有学过英语，我也不懂代码，可就是凭着一股不服气的顽强钻研精神，反复试验，仔细观察，终于攻下了“顶图”这个难关，自己制作成功了一百几十个精美的顶图。下面我就把制作顶图的方法传授给您，让您也能够制作出自己喜欢的“顶图”来。

下面，我从两个方面来进行讲解：一是如何制作“文字顶图”，二是怎样制作“图片顶图”。

一、制作“文字顶图”：

图书馆首页放置一个“文字顶图”，也是个蛮好的事儿，您可以把您“想对朋友说的心里话”输入这个“文字顶图”中去。当朋友们来到您的图书馆浏览的时候，就会产生一种共鸣，就会有一种亲切感，打心里愿意结识您这位朋友。文字顶图的另一个优点是可以配合图片顶图一起放置到图书馆首页的顶部去，二者相互映衬、互得益彰。下面就以我制作的“'春天没来’欢迎您（顶图）”为例，来说说其制作步骤：

1、在“撰写文章处”输入文字：“春天没来”欢迎您；

2、在“'春天没来’欢迎您”这七个字的前后输入“五角星图标”；

3、拖选此内容，选择“字号、字体颜色”（小一、加粗、黄色）；

4、再次拖选此内容，点击“复制”、点击“粘贴”（一共粘贴了“四次”），各组文字之间留3个空格（点击3次空格键）；

5、点击页面下方的“代码编辑”，在显示出的代码“前面”添加下列首标签（一个定位标签，一个滚动标签）：<DIV class=divBorderStyle style="LEFT: 0px; POSITION: absolute; TOP: 24px">
<MARQUEE style="LEFT: 0px; WIDTH: 1340px" scrollAmount=3 behavior=alternate height=270>
6、在显示出的代码“后面”添加下列尾标签：</DIV></MARQUEE>

7、点击“预览”按钮观看效果；

8、输入标题：“春天没来欢迎您（顶图）”，选择阅读权限：“公众公开”，点击“发表”即可。

说明：

1、在“撰写文章处”“输入文字、选择字号、字体颜色、复制，粘贴”等步骤完毕以后，点击页面下方的“代码编辑”按钮，在显示出的代码中“添加标签”时应该注意：标签必须是“成对”的，有一个“首标签”，就要有一个相对应的“尾标签”。尾标签不能多添加，也不能少添加。

2、“尾标签”的顺序与上面的“正文标签和首标签”的顺序正好相反。

3、在您的图书馆首页先放置上其它的顶图以后，再添加上此模块，两个模块可以同时显示，同时使用。

4、此顶图中的“文字内容”可在“文章撰写”页面中或者“代码”状态下进行“修改替换”。修改以后就可成为您自己的“顶图模块”了。

“春天没来”欢迎您（顶图）代码如下：

欢迎您点击查看： “春天没来”欢迎您（顶图）

二、制作“图片顶图”：

1、先找一个您喜欢的图片，例如：http://www.360doc.com/content/12/0529/11/4127803_214461492.shtml这篇文章中的第一个图片(此时，应该“拖选”一下这个图片，如果在图片左右两边的外面显示出一个或者两个颜色比较深的竖向的小长方形，那么用“这个图片”制作的顶图效果不理想，做不到无缝连接，应该重新寻找一个图片。）；
2、“右击”此图片，点击“复制”（这时，图片已经“复制”到了您的“剪贴板”上。）；

3、在您的图书馆首页上方点击“撰写”按钮，把光标放置到进入的页面中的方框内“右击”，点击“粘贴”，这时此图片已经“粘贴”到了这个方框内；

4、“双击”此图片，在弹出的“图片属性”方框内进行下列操作：（1）点击“固定比例”前面的小方框，使小方框内“消去”勾，（2）把高度值修改为“270”，（3）点击“固定比例”前面的小方框，使小方框内“划上”勾，（4）点击“确定”按钮；

5、“双击”该图片，记录下该图片的“宽度和高度”的数值（405×270）以后，点击“确定”（图片的“宽度数值”也可稍微加大一点儿，例如，加大100px。）；

6、再一次在您的图书馆首页上方点击“撰写”按钮，点击“表格”按钮，当光标向下移动到“插入表格”以后就向右移动，移动到“1行×5列”时“点击”一下；
7、“双击”这个表格，“修改”表格中的内容：（1）单元边距：改为0px，（2）指定表格的宽度：改为2025px（上面图片宽度的5倍）；（3）指定表格的高度：改为270px，（6）点击“确定”按钮；

8、在创建的表格中每个单元格内“输入”一个字母（为的是在后面操作“粘贴”图片的步骤时，容易找到“单元格”）；

9、回到您的“前一个撰写文章页面”中，点击“全选”按钮，点击“复制”按钮（这时，图片已经复制到了您的“剪贴板”上。），点击“允许访问”；

10、回到您的“第二个撰写文章页面”中，分别在每个单元格内“右击”，点击“粘贴”，把图片“粘贴”到每个单元格内，然后分别“删除”掉每个单元格内先前输入的“字母”；

11、点击页面下方的“代码编辑”，就会显示出该图片的“代码”。然后，在这些代码的“上面”，添加下列几个首标签：

在这些代码的下面，添加下列尾标签：

</TR></TBODY></TABLE>
</MARQUEE></DIV>
12、可以点击页面下方的“预览”按钮，观看已经制作的“顶图”效果；

13、在此页面上方“标题”处输入标题（自己定标题），在“阅读权限”处，选择“阅读权限”，最后点击“发表”即可。

点击浏览具体效果：林荫大道风光美（顶图）

现将我经过整理以后的“图片顶图代码”公布如下，以供大家使用：