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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
<!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&#305;m&#305;zda</a></li> <li><a href="aktiviteler.html">Aktiviteler</a></li> <li><a href="#" class="MenuBarItemSubmenu">Spor Dallar&#305;</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">&#304;leti&#351;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>&nbsp;</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>&nbsp;</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>&nbsp;</p> <p>&nbsp;</p> <p>&lt;sdqdsadsada</p> </div> </div> </div> </div> </div> <div id="footer"> &copy;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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
@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; } |