Header Ads Widget

Ticker

6/إبداعات/ticker-posts

سلسة دروس كيفية انشاء موقع راديو [الهيدر + المحتوى]


طريقة انشاء الهيدر ( رأس الصفحة) و محتوى الصفحة








بطبيعة الحال موضوعنا هو حول كيفية انشاء موقع راديو

اذا سنحتاج الى ايقونات  لمحطات الراديو مثلا



و كذلك لرابط بث القناة

http://broadcaster.infomaniak.ch/aswat-high.mp3

  1. الهيدر رأس الصفحة

سيكون على جزئين كود css

و كود html

  • كود css
سيوضع ما بين <style>        </style>




#top{
   height: 160px;
   width: 625px;
   background: url(http://i.imgur.com/zt1lOfO.png) center;
   background-position: x y, x y;
   background-repeat:  repeat-y;            
   font-size: 80px;
   text-align: center;
   color: #de07f8;
   line-height: 40px;
   font-family: &#39;Droid Arabic Kufi&#39;, serif;
   text-shadow: 2px 0 0 #000000, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0    #fff, -1px 1px 0 #fff;
  } 
  • كود html


سيوضع بعد <body>







<center><div id='top'><spain><br/>راديو المغرب</spain></div></center>







انشاء جدول لوضع ايقونات المحطات بداخله
و سيكون على شقين شق css و شق html

  • كود css



table, th, td, tr {
   border: 0px solid ;
   width: 450px;
   direction: rtl;
  }
table.center{
     margin-left: auto;
     margin-right: auto;
   
     }

th{
    height: 50px;
}  
tr{
   height: 110px;
  }


  • كود html
سيكون به امر تشغيل الصوت و رابط الايقونة و كذا رابط بث المحطةّ
و بطبيعة الحال هذه الامور ستكون داخل قالب الجدول



في هذا المثال انا وضعت اربع محطات لهذا الكود سيكون على الشكل التالي



<table class='center'>
<tr><th><span id='dummy' onclick='playSound(this, &apos;http://broadcaster.infomaniak.ch/aswat-high.mp3&apos;);'>
      <img border='0' height='80' id='Bottom-1' name='Bottom-1' src='http://i.imgur.com/gN9cF11.png' width='80'/>
    </span></th>
<th><span id='dummy' onclick='playSound(this, &apos;http://live.medi1.com/medi1&apos;);'>
      <img border='0' height='80' id='Bottom-1' name='Bottom-1' src='http://i.imgur.com/eXyOfZb.png' width='80'/>
    </span></th>
<th><span id='dummy' onclick='playSound(this, &apos;http://radio.mfmradio.ma/casa.mp3&apos;);'>
      <img border='0' height='80' id='Bottom-1' name='Bottom-1' src='http://i.imgur.com/Diu6ZEG.png' width='80'/>
    </span></th>
<th><span id='dummy' onclick='playSound(this,&apos;http://mp3lg4.tdf-cdn.com/9033/jet_121413.mp3&apos;);'>
      <img border='0' height='80' id='Bottom-1' name='Bottom-1' src='http://i.imgur.com/uOIJNPN.png' width='80'/>
    </span></th>
<th><span id='dummy' onclick='playSound(this, &apos;http://media.yabiladi.com:8000/;stream.nsv&apos;);'>
      <img border='0' height='80' id='Bottom-1' name='Bottom-1' src='http://i.imgur.com/QPCT8mj.png' width='80'/>
    </span></th>  
  </tr></table>



و اخيرا كود السكريبت و هو المهم و المسؤول على تشغيل الصوت و ايقافه

سيوضع قبل <head/>





<script type='text/javascript'>
          function playSound(el,soundfile) {
              if (el.mp3) {
                  if(el.mp3.paused) el.mp3.play();
                  else el.mp3.pause();
               
 }
                  else {
                  el.mp3 = new Audio(soundfile);
                  el.mp3.play();
              }
          }
   
</script>

النتيجة


نسيت ان اخبركم اني اضفت امر لاستدلع الخط  arabicdroidkufi

الامر يوضع بعد <head>


<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>


إرسال تعليق

0 تعليقات