本文將為大家詳細(xì)介紹“HTML5如何制作Banner”,內(nèi)容步驟清晰詳細(xì),細(xì)節(jié)處理妥當(dāng),而小編每天都會更新不同的知識點,希望這篇“HTML5如何制作Banner”能夠給你意想不到的收獲,請大家跟著小編的思路慢慢深入,具體內(nèi)容如下,一起去收獲新知識吧。
創(chuàng)新互聯(lián)長期為成百上千客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊從業(yè)經(jīng)驗10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為安福企業(yè)提供專業(yè)的網(wǎng)站設(shè)計制作、網(wǎng)站制作,安福網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
橫幅廣告(Banner):
1.橫幅廣告是網(wǎng)絡(luò)廣告的常見形式,一般位于網(wǎng)頁的醒目位置上;當(dāng)用戶單擊這些橫幅廣告時,通??梢枣溄拥较鄳?yīng)的廣告頁面;
2.設(shè)計橫幅廣告時,要力求簡單明了,能夠體現(xiàn)出主要的中心主旨,鮮明、形象地表達(dá)出最主要的廣告意圖;
3.橫幅廣告可以使靜態(tài)圖像,也可以是動態(tài)圖像。一般而言,與靜態(tài)橫幅廣告相比,動態(tài)橫幅廣告更醒目,更能吸引觀眾的注意力;
4.當(dāng)然這還是在恰當(dāng)適合的前提下(討厭那種彈窗式和懸浮式的廣告)使用不當(dāng)會造成意想不到的后果,甚至因此觀看者的反感造成惡性循環(huán),從而對廣告原本的作用大打折扣;
5.設(shè)計橫幅廣告時,究竟是采取靜態(tài)形式還是動態(tài)形式,取決于哪種形式能夠把要表達(dá)的信息準(zhǔn)確、快速地傳遞給觀看者。
設(shè)計過程:
(一)編寫HTML5代碼
1.輸入單擊Banner時要鏈接的網(wǎng)站
<a class="banner" href="www.php.cn">
2.向Banner中添加圖片和文字并使用class屬性標(biāo)識元素
<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">開放知識講座, 視頻Cast!<br /> 分享設(shè)計心得的樂園!<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", "方正靜蕾簡體", "Nanum Pen Script"; }
同時還需要在HTML5代碼中添加Web字體服務(wù)
<title>CSS3 Banner Design - 動畫Banner設(shè)計</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", "方正靜蕾簡體", "Nanum Pen Script"; color: #4ec1cd; }
.modern .banner-desc strong { font-size: 23px; }
6.設(shè)置鼠標(biāo)指針未移動到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ù)完成一系列的圖片移動操作
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", "方正靜蕾簡體", "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è)計腳本, 2012 ? yamoo9.com ---------------------------------------------------------------- */ ;(function($){ $(function() { // $(document).ready(); 文檔準(zhǔ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事件時調(diào)用處理函數(shù) banner_audio.load(); // 加載audio banner_audio.play(); // 播放audio }) .bind('mouseout focusout', function() { // 當(dāng)發(fā)生MouseOut,F(xiàn)ocusOut事件時調(diào)用處理函數(shù) banner_audio.pause(); // 暫停audio banner_audio.currentTime = 0; // 初始化audio播放位置 }); }); })(window.jQuery); // 檢測是否webm格式的函數(shù) function isSupportWebM() { var tester = document.createElement('audio'); return !!tester.canPlayType('audio/webm'); };
如果你能讀到這里,小編希望你對“HTML5如何制作Banner”這一關(guān)鍵問題有了從實踐層面最深刻的體會,具體使用情況還需要大家自己動手實踐使用過才能領(lǐng)會,如果想閱讀更多相關(guān)內(nèi)容的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章名稱:HTML5如何制作Banner
瀏覽路徑:http://jinyejixie.com/article10/jopsdo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供、網(wǎng)站制作、網(wǎng)站策劃、用戶體驗、App設(shè)計、軟件開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)