|
教你做图书馆顶图 【准备阶段】先要确定你的图书馆首页版面顶部空出的高度，也就是你将设置的顶图的高度。 确定顶部空当高度的方法：击首页“装扮”/自定义皮肤。在“顶部高度”右侧 设定你的顶图高度即可。我的顶图高度是 165. 【第一阶段】用已给资料作固定图片图书馆顶图 一、资料 1、图片代码：<img width="800" height="175" src="图片地址">； 注：width值和 height 值可任意改变。 2、图片：  注：右击图片后，选击“属性”，复制其地址 可用。 3、绝对定位置顶标签： <table border="0" cellspacing="0" cellpadding="0"><tbody><tr><td> <div style="position: absolute; top: 0px; left: 0px;"> 注：TOP值和 LEFT值可任意改变。 二、用上述资料作固定图片图书馆顶图。 做法提示： 1、把上述1中的图片代码复制、粘贴到撰写页面的代码编辑态； 2、右击资料2图片吹笛女，选击“属性”，复制其地址，然后把图片代码的“图片地址”几个字删除，并在此处右击，选击“粘贴”; 3、击撰写页左下“代码编辑”按钮。出图了，是按代码要求的宽和高出的图，但它不能置顶。 检查满意后往下进行。 4、把资料3绝对定位置顶标签（共5个标签）复制、粘贴到撰写页面的代码编辑态图片代码的前面，也就是占用整个代码的前两行。 5、击撰写页左下“代码编辑”按钮，出了图片，因为前边加了绝对定位置顶标签，所以此图片就能置一页之顶了。我们把它全选/复制。 6、转到图书馆首页，装扮……出了顶图。 但不理想： ①、图靠右了，须调整LEFT值。 ②、图片横向不足，须加大width值； ③图片纵向多了，须减小height值。 克服缺点：回到撰写页代码态，修改如下： 把LEFT值修改为0；把width值修改为1000；把height值修改为165。 然后重复5、6之操作。 复习巩固知识与操作：用图片背景的表格标签作顶图 1、 把【第一阶段】咱们用的是贴图标签改用下面图片背景的表格标签来做，共4个标签。标签如下： <div style="POSITION: relative"> <table style="TEXT-ALIGN: left; WIDTH: 1000px; HEIGHT: 165px" border="0" cellspacing="0" cellpadding="0" background="图片地址" align="center"> <tbody><tr> 2、换个背景图片来做：前面咱们用的图片是吹笛女图片，现在改用夜景天安门图片来做。图片如下：  http://userimage8.360doc.com/17/0530/20/3459959_201705302032000658657845.gif 具体做法与以前一样，就是贴图标签改用图片背景的表格标签而已，修改或确认图片的宽高（width、height）数和图片的位置（top、left）数值。 用这个标签的目的一是复习巩固所学，二是承前启后，以后咱们就是在表格标签的 基础上加东西，形成动画顶图或移动文字顶图等。 本阶段的重点就是对图片代码中四个数字的调整应用：width 是定图片横宽的 ，height 是定图片纵向高度的，这两个数确定了图片的大小。 top 是管上边线的，left 是管左边线的，这两个数确定了图片的位置。换句话说 咱们解决了两件事：图片大小、图片位置。明白了吗？ 【第二阶段】作定位粘贴动画顶图 1、图片代码： <div style="POSITION: relative"><table style="TEXT-ALIGN: left; WIDTH: 1000px; HEIGHT: 165px" border="0" cellspacing="0" cellpadding="0" background="背景图片地址" align="center"><tbody><tr> <td> <img style="POSITION: absolute; WIDTH: 120px; HEIGHT: 100px; TOP: 0px; LEFT: 60px" class="divBorderStyle" border="0" src="透明动画地址"> <img style="POSITION: absolute; WIDTH: 100px; HEIGHT: 100px; TOP: 0px; LEFT: 200px" class="divBorderStyle" border="0" src="透明动画地址"> 2、参考图片地址 参考背景图片地址： http://userimage8.360doc.com/17/0530/20/3459959_201705302032000658657845.gif http://userimage8.360doc.com/17/0530/20/3459959_201705302032010017401984.jpg http://image51.360doc.com/DownloadImg/2012/05/2113/24246588_1.jpg http://userimage8.360doc.com/17/0530/20/3459959_201705302030490064425114.jpg http://userimage8.360doc.com/17/0530/20/3459959_201705302030490142795640.gif 参考透明动画地址： http://image86.360doc.com/DownloadImg/2013/09/2413/55242674_1.gif http://image58.360doc.com/DownloadImg/2013/01/2123/29756826_41.jpg http://image51.360doc.com/DownloadImg/2012/04/2400/23445801_73 http://userimage3.360doc.com/12/1222/20/3459959_201212222003340478.gif 3、做图 具体做法与第一阶段一样，不再重述。 在参考图片地址中选用你满意的图片地址代入上述图片代码地址处，调整好四个数，满意为止。 4、绝对定位置顶标签： 完成作图后，再把绝对定位置顶标签（<table border="0" cellspacing="0" cellpadding="0"><tbody><tr><td> <div style="position: absolute; top: 0px; left: 0px;">）复制、粘贴到撰写页代码编辑态图片代码的最前面，也就是占用整个代码的前两行。 5、击代码编辑按钮出图/全选/复制，转到首页，装扮……出了顶图。 |
|
|
