طريقة انشاء الهيدر ( رأس الصفحة) و محتوى الصفحة
بطبيعة الحال موضوعنا هو حول كيفية انشاء موقع راديو
اذا سنحتاج الى ايقونات لمحطات الراديو مثلا
و كذلك لرابط بث القناة
http://broadcaster.infomaniak.ch/aswat-high.mp3
- الهيدر رأس الصفحة
سيكون على جزئين كود 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: 'Droid Arabic Kufi', 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;
}
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: 'Droid Arabic Kufi', 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;
}
<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;
}
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, 'http://broadcaster.infomaniak.ch/aswat-high.mp3');'>
<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, 'http://live.medi1.com/medi1');'>
<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, 'http://radio.mfmradio.ma/casa.mp3');'>
<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,'http://mp3lg4.tdf-cdn.com/9033/jet_121413.mp3');'>
<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, 'http://media.yabiladi.com:8000/;stream.nsv');'>
<img border='0' height='80' id='Bottom-1' name='Bottom-1' src='http://i.imgur.com/QPCT8mj.png' width='80'/>
</span></th>
</tr></table>
<tr><th><span id='dummy' onclick='playSound(this, 'http://broadcaster.infomaniak.ch/aswat-high.mp3');'>
<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, 'http://live.medi1.com/medi1');'>
<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, 'http://radio.mfmradio.ma/casa.mp3');'>
<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,'http://mp3lg4.tdf-cdn.com/9033/jet_121413.mp3');'>
<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, 'http://media.yabiladi.com:8000/;stream.nsv');'>
<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>
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 تعليقات