分享HTML5制作Banner的實(shí)例

橫幅廣告(Banner)：

1.橫幅廣告是網(wǎng)絡(luò)廣告的常見(jiàn)形式，一般位于網(wǎng)頁(yè)的醒目位置上；當(dāng)用戶單擊這些橫幅廣告時(shí)，通常可以鏈接到相應(yīng)的廣告頁(yè)面；

2.設(shè)計(jì)橫幅廣告時(shí)，要力求簡(jiǎn)單明了，能夠體現(xiàn)出主要的中心主旨，鮮明、形象地表達(dá)出最主要的廣告意圖；

3.橫幅廣告可以使靜態(tài)圖像，也可以是動(dòng)態(tài)圖像。一般而言，與靜態(tài)橫幅廣告相比，動(dòng)態(tài)橫幅廣告更醒目，更能吸引觀眾的注意力；

4.當(dāng)然這還是在恰當(dāng)適合的前提下（討厭那種彈窗式和懸浮式的廣告）使用不當(dāng)會(huì)造成意想不到的后果，甚至因此觀看者的反感造成惡性循環(huán)，從而對(duì)廣告原本的作用大打折扣；

5.設(shè)計(jì)橫幅廣告時(shí)，究竟是采取靜態(tài)形式還是動(dòng)態(tài)形式，取決于哪種形式能夠把要表達(dá)的信息準(zhǔn)確、快速地傳遞給觀看者。

設(shè)計(jì)過(guò)程：

（一）編寫(xiě)HTML5代碼

1.輸入單擊Banner時(shí)要鏈接的網(wǎng)站

<a class="banner" href="www.php.cn">

2.向Banner中添加圖片和文字并使用class屬性標(biāo)識(shí)元素

    <a class="banner" href="http://yamoo9.com">          <img class="banner-logo" src="images/banner-logo.png" alt="yamoo9.com" width="167" height="134" />          <p class="banner-desc">開(kāi)放知識(shí)講座, 視頻Cast!<br /> 分享設(shè)計(jì)心得的樂(lè)園!<br />          <strong>- Yamoo9</strong></p>      </a>

（二）編寫(xiě)CSS3樣式表

1.控制body樣式

body {      padding: 20px;      background: #333;  }

2.控制Banner樣式

a.banner {      display: block;      width: 728px;      height: 176px;      border: 1px solid #555;  }

3.設(shè)置橫幅廣告的Logo標(biāo)志

.modern .banner-logo {      position: absolute;      top: 20px;      left: 270px;  }

4.向Banner上的文字應(yīng)用字體

.modern .banner-desc {      font: 32px/1.1 "NanumPenWeb", "方正靜蕾簡(jiǎn)體", "Nanum Pen Script";  }

同時(shí)還需要在HTML5代碼中添加Web字體服務(wù)

<title>CSS3 Banner Design - 動(dòng)畫(huà)Banner設(shè)計(jì)</title>  <link href='api.mobilis.co.kr/webfonts/css/?fontface=NanumPenWeb' rel='stylesheet' />

5.設(shè)置Banner字體的位置與顏色

.modern .banner-desc {      opacity: 0;      position: absolute;      top: 39px;      left: 170px;      font: 39px/1.1 "NanumPenWeb", "方正靜蕾簡(jiǎn)體", "Nanum Pen Script";      color: #4ec1cd;  }

.modern .banner-desc strong {      font-size: 23px;  }

6.設(shè)置鼠標(biāo)指針未移動(dòng)到Banner上的Banner

a.banner {      position: relative;      background:           url(../images/banner-arrow.png) no-repeat -100px 140px,           url(../images/banner-photo.png) no-repeat -40px 220px,           url(../images/banner-09.png) no-repeat -20px -380px,          url(../images/banner-bg.png) no-repeat 0 0;    }  .modern a.banner:hover, a.banner:focus {      background-position:           20px 140px,           -40px 20px,           -20px -90px,          0 0;      }

使用transition函數(shù)完成一系列的圖片移動(dòng)操作

a.banner {      position: relative;      background:           url(../images/banner-arrow.png) no-repeat -100px 140px,           url(../images/banner-photo.png) no-repeat -40px 220px,           url(../images/banner-09.png) no-repeat -20px -380px,          url(../images/banner-bg.png) no-repeat 0 0;        -webkit-transition: all .2s ease-in .2s;      -moz-transition: all .2s ease-in .2s;      -o-transition: all .2s ease-in .2s;      -ms-transition: all .2s ease-in .2s;      transition: all .2s ease-in .2s;  }  .modern a.banner:hover, a.banner:focus {      background-position:           20px 140px,           -40px 20px,           -20px -90px,          0 0;      }  .modern .banner-logo {      position: absolute;      top: 20px;      left: 270px;      -webkit-transition: all .4s ease-out .3s;      -moz-transition: all .4s ease-out .3s;      -o-transition: all .4s ease-out .3s;      -ms-transition: all .4s ease-out .3s;      transition: all .4s ease-out .3s;  }  .modern a.banner:hover .banner-logo,   .modern a.banner:focus .banner-logo {          left: 540px;          }  .modern .banner-desc {      opacity: 0;      position: absolute;      top: 39px;      left: 170px;      font: 39px/1.1 "NanumPenWeb", "方正靜蕾簡(jiǎn)體", "Nanum Pen Script";      color: #4ec1cd;      -webkit-transition: all .4s ease-out .3s;      -moz-transition: all .4s ease-out .3s;      -o-transition: all .4s ease-out .3s;      -ms-transition: all .4s ease-out .3s;      transition: all .4s ease-out .3s;  }

最后使用JQuery播放聲音文件

/* banner.js - Banner設(shè)計(jì)腳本, 2012 ? yamoo9.com      ---------------------------------------------------------------- */  ;(function($){      $(function() { // $(document).ready(); 文檔準(zhǔn)備好后運(yùn)行                    var banner_audio= new Audio(),        // 創(chuàng)建Audio.               webm = isSupportWebM();    // 檢查是否支持webm格式          banner_audio.src = 'media/banner_sound.mp3';          /*if(webm) {   //支持webm格式              banner_audio.src = 'media/banner_sound.webm';          } else {    // 不支持webm格式              banner_audio.src = 'media/banner_sound.mp3';          };*/          $('.banner')              .bind('mouseover focusin', function() { // 當(dāng)發(fā)生MouseOver，F(xiàn)ocusIn事件時(shí)調(diào)用處理函數(shù)                  banner_audio.load(); // 加載audio                  banner_audio.play(); // 播放audio              })              .bind('mouseout focusout', function() { // 當(dāng)發(fā)生MouseOut，F(xiàn)ocusOut事件時(shí)調(diào)用處理函數(shù)                  banner_audio.pause();             // 暫停audio                  banner_audio.currentTime = 0;    // 初始化audio播放位置              });                });  })(window.jQuery);    // 檢測(cè)是否webm格式的函數(shù)  function isSupportWebM() {      var tester = document.createElement('audio');      return !!tester.canPlayType('audio/webm');  };

【相關(guān)推薦】

1. 免費(fèi)h5在線視頻教程

2. HTML5 完整版手冊(cè)

3. php.cn原創(chuàng)html5視頻教程

4. H5 video標(biāo)簽只能放聲音不能放視頻的解決辦法

5. IIS的MIME未注冊(cè)MP4類型，導(dǎo)致無(wú)法識(shí)別vidoe標(biāo)簽的解決辦法