banner制作初級教程_第1頁
banner制作初級教程_第2頁
banner制作初級教程_第3頁
免費預覽已結束，剩余1頁可下載查看

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、banner 制作初級教程放置 banner 的方法簡單說就是制作一張和自己主頁原頂圖尺寸 大小一樣的圖片，建立一個新的空白面板，寫一小段代碼將圖片以 “絕對位置”的方式覆蓋原圖即可。但是這里存在個問題（謝謝 寒山發現的問題并及時告知） ，以絕 對位置方式覆蓋時， 不同的顯示器分辨率會影響其位置， 導致自己制 作的banner嚴重橫向錯位，我嘗試寫一段JS代碼用條件語句來確定 不同顯示分辨率下的圖片位置， 這時發現新浪不允許在空白面板和公 告欄中使用JS （比較郁悶！），搜索了一下，知道可以使用“框架” 引用已經上傳的含有JS的html文件。問題也就迎刃而解。下面是具 體代碼和步驟。1、測量并

2、確定自己主頁面上的 banner 的尺寸，不同的主頁風格有不同大小的banner （我的頁面是“樸素”類型，我用 Photoshop測 量 banner 的尺寸，大小是 764X102）；2、按上述尺寸制作自己的個性 banner 圖片；3、上傳此圖片，得到鏈接地址；4、打開“記事本”寫入下面的代碼：<SCRIPT>if(screen.width=800) document.write("<body bgcolor=transparent><IMG style='LEFT: 10px; POSITION: absolute; TOP: 55px&

3、#39; height=102 src='圖片鏈接 地 址 ' width=764 align=right useMap=#Mapborder=0> <MAP name=Map><AREsAhape=RECTtarget=_blank coords=490,64,735,88 href=' 圖片中熱點文字鏈接的網頁 '></MAP>>");if(screen.width=960) document.write("<body bgcolor=transparent><IMG st

4、yle='LEFT: 90px; POSITION: absolute; TOP: 55px' height=102 src='圖片鏈接 地 址 ' width=764 align=right useMap=#Mapborder=0> <MAP name=Map><AREsAhape=RECTtarget=_blank coords=490,64,735,88 href=' 圖片中熱點文字鏈接的網頁 '></MAP>>");if(screen.width=1024) document.wr

5、ite("<body bgcolor=transparent><IMG style='LEFT: 122px; POSITION: absolute; TOP: 55px' height=102 src=' 圖片 鏈接地址 ' width=764 align=right useMap=#Map border=0> <MAP name=Map><AREsAhape=RECTtarget=_blank coords=490,64,735,88href=' 圖片中熱點文字鏈接的網頁 '><

6、/MAP>>");if(screen.width=1152) document.write("<body bgcolor=transparent><IMG style='LEFT: 186px; POSITION: absolute; TOP: 55px' height=102 src=' 圖片 鏈接地址 ' width=764 align=right useMap=#Map border=0> <MAP name=Map><AREsAhape=RECTtarget=_blank coor

7、ds=490,64,735,88 href=' 圖片中熱點文字鏈接的網頁 '></MAP>>");if(screen.width=1600) document.write("<body bgcolor=transparent><IMG style='LEFT: 410px; POSITION: absolute; TOP: 55px' height=102 src=' 圖片 鏈接地址 ' width=764 align=right useMap=#Map border=0> &l

8、t;MAP name=Map><AREsAhape=RECTtarget=_blank coords=490,64,735,88 href=' 圖片中熱點文字鏈接的網頁 '></MAP>>");</SCRIPT>注意：代碼中的' 圖片鏈接地址 ' ，為單引號引入的第三步中的圖片鏈 接地址。“coords=490,64,735,88 ”中的數值定義圖片中熱點文字的位置， 做圖時可以測繪得到；5、保存此記事本文件為 html 格式，例如“ myjs.html ”，上傳此網 頁文件，得到并記住鏈接地址；6、在博

9、客的控制面板里建立一個新的空白面板，寫入下面的代碼： <DIV></DIV><IFRAME style="LEFT: 0px; POSITION: absolute; TOP: 0px" marginWidth=0 marginHeight=0 src=" 上 傳 網 頁 鏈 接 地 址 " frameBorder=0 width=1600 scrolling=no height=200 allowTransparency></IFRAME><DIV></DIV>注意：代碼中的 &#

10、39; 上傳網頁鏈接地址 ' ，為第五步中的上傳網頁文件鏈 接地址。沒有專門學習過 javascript ，但是編程思想大多類似，不同的 僅僅是表達（ script ）的形式，哪位朋友有更好的辦法，留言賜教。在此， 我要再次感謝楊棟和寒山。 并且感謝小綿羊提供的一些上 傳空間信息。附錄：關于上傳文件的方法和空間，參考此文：http:/blog.si .c n/u/45cc0d6a010002nj最新消息，謝謝小綿羊提供的簡便辦法:新建一個空白面板，寫入如下代碼:vDIV alig n=left >&n bsp；v/DIV>vSTYLE type二text/css>.bannerbackground:url（ 新 banner 圖片鏈 接地址） no repeat noscroll!importa nt

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論