banner制作初级教程

banner制作初级教程

放置banner的方法简单说就是制作一张和自己主页原顶图尺寸大小一样的图片，建立一个新的空白面板，写一小段代码将图片以“绝对位置”的方式覆盖原图即可。

但是这里存在个问题（谢谢寒山发现的问题并及时告知），以绝对位置方式覆盖时，不同的显示器分辨率会影响其位置，导致自己制作的banner严重横向错位，我尝试写一段JS代码用条件语句来确定不同显示分辨率下的图片位置，这时发现新浪不允许在空白面板和公告栏中使用JS（比较郁闷！），搜索了一下，知道可以使用“框架”引用已经上传的含有JS的html文件。问题也就迎刃而解。下面是具体代码和步骤。

1、 测量并确定自己主页面上的banner的尺寸，不同的主页风格有不同大小的banner（我的页面是“朴素”类型，我用Photoshop测量banner的尺寸，大小是764X102）；

2、 按上述尺寸制作自己的个性banner图片；

3、 上传此图片，得到链接地址；

4、 打开“记事本”写入下面的代码：

注意：代码中的'图片链接地址'，为单引号引入的第三步中的图片链接地址。

“coords=490,64,735,88”中的数值定义图片中热点文字的位置，做图时可以测绘得到；

5、 保存此记事本文件为html格式，例如“myjs.html”，上传此网页文件，得到并记住链接地址；

6、 在博客的控制面板里建立一个新的空白面板，写入下面的代码：

注意：代码中的'上传网页链接地址'，为第五步中的上传网页文件链接地址。

没有专门学习过javascript，但是编程思想大多类似，不同的仅仅是表达（script）的形式，哪位朋友有更好的办法，留言赐教。

在此，我要再次感谢杨栋和寒山。并且感谢小绵羊提供的一些上传空间信息。

附录：关于上传文件的方法和空间，参考此文：http://blog.sina.com.cn/u/45cc0d6a010002nj

最新消息，谢谢小绵羊提供的简便办法：

新建一个空白面板，写入如下代码：

需要注意的是，图片的横向尺寸必须为770。根据模板风格不同，纵向尺寸略有不同，我这里是102。

另，这样的方法置换了模板中原来的banner图片。banner图片前的博客名称等文字仍然存在，对图片略有遮盖，设计个性banner图片时应该考虑此处。