HTML5如何制作Banner

本文將為大家詳細(xì)介紹“HTML5如何制作Banner”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識(shí)點(diǎn)，希望這篇“HTML5如何制作Banner”能夠給你意想不到的收獲，請(qǐng)大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識(shí)吧。

創(chuàng)新互聯(lián)長(zhǎng)期為成百上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為安福企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作，安福網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

橫幅廣告(Banner)：

1.橫幅廣告是網(wǎng)絡(luò)廣告的常見形式，一般位于網(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ò)程：

（一）編寫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">開放知識(shí)講座, 視頻Cast!<br /> 分享設(shè)計(jì)心得的樂(lè)園!<br />
        <strong>- Yamoo9</strong></p>
    </a>

（二）編寫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)畫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');
};

如果你能讀到這里，小編希望你對(duì)“HTML5如何制作Banner”這一關(guān)鍵問(wèn)題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：HTML5如何制作Banner
瀏覽路徑：http://muchs.cn/article10/jopsdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)站制作、網(wǎng)站策劃、用戶體驗(yàn)、App設(shè)計(jì)、軟件開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容