Spry Nesneleri (WTP – 20. Hafta)
Merhaba bu yazımızda Web Tasarım ve Programlama dersinde gördüğümüz SPRY nesneleri inceleyeceğiz. Daha sonra da bu nesneleri birlikte kullandığımız örnek bir web sitesi projesi gerçekleştireceğiz.
Spry Framework (Spry Çerçevesi)
Spry çerçevesi, ziyaretçilere görsel olarak daha gelişmiş, daha etkili web sayfaları hazırlayıp sunmak amacıyla kullanılan bir JavaScript kütüphanesidir. Spry kullanarak hazırlamakta olduğunuz belgelerinize basit Java Script kodlarıyla çeşitli türlerde efektler ekleyebilir ve sitenizin daha zengin bir görünüme sahip olmasını sağlayabilirsiniz.
SPRY Nesneleri Ekleme ve Düzenleme :
- Ekle menüsünden Spry seçeneğiyle
- Ekle Panelinden Spry seçeneğiyle
SPRY Nesneleri :
- Spry Menü Çubuğu
- Spry Sekmeli Panel
- Spry Akordeon
Daha önce öğrendiğimiz bilgiler ve yeni öğrendiğimiz Spry Nesneleri ile “Bilişim Spor” web sitesi yapacağız. Bunun için ilk önce tasarımı el ile çizelim.
Şimdi de site haritasını oluşturalım.
- Ana Sayfa (index.html)
- Hakkımızda (hakkimizda.html)
- Aktiviteler (aktiviteler.html)
- Spor Dalları
- Futbol (futbol.html)
- Voleybol (voleybol.html)
- Basketbol (basketbol.html)
- Atletizm (atletizm.html)
- Tenis (tenis.html)
- İletişim (iletisim.html)
Dosyalar:
HTML Kodlar :
index.html içeriği :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="CSS/bilisimStil.css"/>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<title>Bililim Spor Merkezi</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="MM_preloadImages('Resimler/beslenme2.jpg')">
<div id="tasiyici">
<div id="banner">
<img src="Resimler/banner.jpg" alt="Bilişim Spor" />
</div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">Ana Sayfa </a> </li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="aktiviteler.html">Aktiviteler</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Spor Dalları</a>
<ul>
<li><a href="futbol.html">Futbol</a></li>
<li><a href="voleybol.html">Voleybol</a></li>
<li><a href="basketbol.html">Basketbol</a></li>
<li><a href="atletizm.html">Atletizm</a></li>
<li><a href="tenis.html">Tenis</a></li>
</ul>
</li>
<li><a href="iletisim.html">İletişim</a></li>
</ul>
</div>
<div id="slider"><img src="Resimler/slider.jpg" width="1000" height="300" alt="Spor" /> </div>
<div id="spryNesneler">
<div id="spryPanel">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Sporcu Sağlığı</li>
<li class="TabbedPanelsTab" tabindex="0">Beslenme</li>
<li class="TabbedPanelsTab" tabindex="0">Antreman</li>
<li class="TabbedPanelsTab" tabindex="0">İpuçları</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"><strong><img src="" alt="Sporcu Sağlığı" name="saglik" width="100" height="100" class="solB" id="saglik" style="background-color: #00CC33" align="left" />Lorem Ipsum</strong>, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur</div>
<div class="TabbedPanelsContent">
<ul>
<li>Sebze ağırlıklı Beslenme </li>
<li>Et ağırlıklı Beslenme</li>
<li>Karışık Beslenme </li>
<li>Dengeli Beslenme</li>
</ul>
<p><a href="www.saglik.gov.tr" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Resim','','Resimler/beslenme2.jpg',1)"><img src="Resimler/beslenme1.jpg" alt="Beslenme Alışkıanlıkları" name="Resim" height="150" id="Resim" /></a></p>
</div>
<div class="TabbedPanelsContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate arcu nec rutrum eleifend. Nam sollicitudin dui est, id mollis nibh blandit vitae.</p>
<p> In id mauris at ante pharetra imperdiet. Integer laoreet augue vel lectus vulputate, vitae mollis est blandit. Suspendisse rhoncus convallis enim. Integer ut pharetra metus. Sed rutrum, magna nec maximus accumsan, elit arcu hendrerit dui, ut tincidunt leo mauris sed mauris. Morbi cursus nisi ac mauris lobortis scelerisque. Nulla finibus pulvinar aliquet. Mauris ac erat sapien.</p>
</div>
<div class="TabbedPanelsContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate arcu nec rutrum eleifend. Nam sollicitudin dui est, id mollis nibh blandit vitae. </p>
<p>In id mauris at ante pharetra imperdiet. Integer laoreet augue vel lectus vulputate, vitae mollis est blandit. Suspendisse rhoncus convallis enim. </p>
<p>Integer ut pharetra metus. Sed rutrum, magna nec maximus accumsan, elit arcu hendrerit dui, ut tincidunt leo mauris sed mauris. Morbi cursus nisi ac mauris lobortis scelerisque. Nulla finibus pulvinar aliquet. Mauris ac erat sapien.</p>
</div>
</div>
</div>
</div>
<div id="spryAkordion">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Futbol</div>
<div class="AccordionPanelContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate arcu nec rutrum eleifend. Nam sollicitudin dui est, id mollis nibh blandit vitae. </p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Voleybol</div>
<div class="AccordionPanelContent">
<p>Lorem ipsum dolor sit amet, consectetur</p>
<p> adipiscing elit. Etiam vulputate arcu nec rutrum eleifend.</p>
<p> Nam sollicitudin dui est, id mollis nibh blandit vitae. </p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Tenis</div>
<div class="AccordionPanelContent">
<p> </p>
<p>Lorem ipsum dolor sit amet, consectetur </p>
<p>adipiscing elit. Etiam vulputate arcu nec rutrum eleifend. Nam sollicitudin dui est, id mollis nibh </p>
<p>blandit vitae. </p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Atletizm</div>
<div class="AccordionPanelContent">
<p>Lorem ipsum dolor sit am</p>
<p>et, consectetur adipiscing elit. Etiam vulputate arcu nec rutrum eleifend. Nam solli</p>
<p>citudin dui est, id</p>
<p> mollis nibh blandit vitae. </p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Basketbol</div>
<div class="AccordionPanelContent">
<p> </p>
<p>Şubat 13, 2020</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate arcu nec rutrum eleifend. Nam sollicitudin dui est, id mollis nibh blandit vitae. </p>
<p> </p>
<p> </p>
<p><sdqdsadsada</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer"> ©2020 <br />Tüm Hakları Bilişim Spor Kulübüne aittir. Bilgi ve fotoğraflar izinsiz kullanılamaz. </div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>CSS içeriği :
@charset "utf-8";
/* www.bilisimmatik.com sitesinden indirilmiştir.
Tekirdağ Zübeyde Hanım MTAL - Bilişim Teknolojileri Alanı
*/
body {
font-family:Verdana, Geneva, sans-serif;
background:url(../Resimler/arkaplan01.jpg);
background-attachment:fixed;
}
#tasiyici {
width:1000px;
margin:20px auto;
border:#333 solid 3px;
background-image:url(../Resimler/arkaplanTasiyici.png);
}
#banner {
height:200px;
}
#menu {
height:50px;
background:#EEE;
}
#slider {
height:300px;
border-bottom:#000 solid 5px;
}
#spryNesneler{
height:330px;
}
#spryPanel {
width:500px;
height:330px;
background-color:#09C;
float:left;
}
#spryAkordion {
width:500px;
height:330px;
background-color:#FC0;
float:right;
}
#KayitFormu{
height: 400px;
text-align: center;
}
#footer {
clear:both;
margin:0px;
height:100px;
background:#444;
color:#FFF;
padding:50px 50px 0px 50px;
text-align:center;
}
.solB {
margin: 10px;
}
Bir cevap yazın