Html,css,Jquery kullanarak sayfa oluşturma - Sanal Hayat Keyifli Forumun Tek Adresi - Sesli Sohbet

15 Mart 2012, 16:06

Can sıkıntısı gidermek üzere oluşturulan bi sayfa fazla detaylı değil..
Sayfanın son haline gözatmak için:

HTML, css ve jquery kullanarak web üzerinde hareketli siteler oluşturmak üzerine ufak bir yazı olucak sanırım.. öncelikle html dosyamızı oluşturuyoruz..

HTML-Kodu:
<!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><**** content="text/html; charset=utf-8" http-equiv="Content-Type" /><link href="zurna.css" rel="stylesheet" type="text/css"/> <script src="jquery.min.js" type="text/javascript"></script><script src="sistem.js" type="text/javascript"></script><title>Zurna!</title></head> <body> <div id="orta"> <div id="zurnabaslik">Zurna FM</div> <div id="djliste"> <ul class="listeler"> <li class="liste"><a id="tikla" href="#">Dicey Zurna</a></li> <li class="liste"><a id="tikla2" href="#">Dicey Klavye</a></li> <li class="liste"><a id="tikla3" href="#">Dicey Ayna</a></li> <li class="liste"><a id="tikla4" href="#">Dicey Sohbet</a> </li> <li class="liste"><a id="tikla5" href="#">Dicey PisiPisi</a></li> </ul> </div> <div id="ictaraf"> <img src="dj.png"/> </div> <div id="tasiyici"> <embed type="application/x-shockwave-flash" src="player.swf" style="" id="ply" name="ply" bgcolor="#FFFFFF" quality="high" allowfullscreen="true" allowscriptaccess="always" flashvars="file=http://72.20.6.34:8044/;stream.nsv&type=mp3&volume=50&autostart=true" height="20" width="328"></div> <script type="text/javascript" src="http://www.zurnafm.com/swfobject.js"></script> <script type="text/javascript"> var s1 = new SWFObject("http://www.zurnafm.com/player.swf","ply","328","20","9","#FFFFFF"); s1.addParam("allowfullscreen","true"); s1.addParam("allowscriptaccess","always"); s1.addParam("flashvars","file=http://72.20.6.34:8044/;stream.nsv&type=mp3&volume=50&autostart=true"); s1.write("tasiyici"); </script> </div> </div> </body></html>
Öncelikle doctype html head body taglarımızı yerleştirdik html dosyamıza daha sonra kullanacağımız zurna.css ve sistem.js dosyalarımızı html sayfamıza çağırdık.. hareketlendirmeler için jquery kütüphanesini kullanacağımız için jquery.js dosyamızıda html sayfamıza çekiyoruz..

CSS dosyamızı şekillendiriyoruz
HTML-Kodu:
@import url(http://fonts.googleapis.com/css?family=Sansita+One);body{ margin:0; padding:0; background-color:#00192F; font-family: 'Sansita One', cursive;}#orta{ margin:0 auto; background-color:black; height:600px; width:900px; position:absolute; display:none; border-radius: 15px; box-shadow: 3px 3px 3px #333;}#zurnabaslik{ color:white; font-size:44px; text-align:center; display:none; position:absolute; text-shadow: 3px 3px 3px #00192F; margin-top:10px;}#djliste{ color:white; font-size:18px; display:none; position:absolute; margin-top:100px; margin-left:50px;}.listeler{ list-style-type:none; display:inline;}.liste{ display:inline; padding-right:40px; position:relative;}.liste a:link{ text-decoration:none; color:white;}.liste a:visited{ text-decoration:none; color:white;}.liste a:hover{ text-decoration:none; color:red;}#ictaraf{ margin-top:200px; margin-left:200px; position:absolute; display:none;}#tasiyici{ margin-left:300px; margin-top:580px; display:none;}
Css dosyamızda sayfamızdaki nesnelerin nerede nasıl duracaklarını belirliyoruz. hareketlendirmeler için hazırlıyor ve sayfaya saklıyoruz bazılarını.. sonrasında

Jquery ".js" dosyamızı şekillendiriyoruz.
HTML-Kodu:
$(function(){ $("#orta").css("top",($(window).height()-600)/2); $("#orta").css("left",($(window).width()-900)/2); $("#orta").fadeIn(1000); $("#zurnabaslik").delay(2000).fadeIn(); $("#zurnabaslik").animate({"left":"+=340px"}); $("#djliste").delay(3000).slideDown(3333); $("#tasiyici").delay(6000).fadeIn(3333); $('#tikla').click(function(){ $("#ictaraf").fadeOut(); $("#ictaraf").fadeIn(); }); $('#tikla2').click(function(){ $("#ictaraf").fadeOut(); $("#ictaraf").fadeIn(); }); $('#tikla3').click(function(){ $("#ictaraf").fadeOut(); $("#ictaraf").fadeIn(); }); $('#tikla4').click(function(){ $("#ictaraf").fadeOut(); $("#ictaraf").fadeIn(); }); $('#tikla5').click(function(){ $("#ictaraf").fadeOut(); $("#ictaraf").fadeIn(); });});
jquery dosyamızda daha önce css dosyamızda sakladığımız nesneleri teker teker sayfaya çağırıyoruz. fadeIn, slideDown komutlarını ve sıralamayı belirlemek için delay veriyoruz bazı hareketlere.. click fonksiyonlarıylada açılann DJ listesinden herhangi birine tıklandığında resim açıyoruz. Bu içeriğin resimleri de olabilir yada herhangi başka bir içerik.. Örnek için ben sadece tek 1 resim kullandım bütün dj butonları tek bir resmi açıyor o yüzden..

15 Mart 2012, 16:07

Bu arada Css kodunda div id'si orta olan bölümümüze "position:absolute;" vererek bütün ekran çözünürlüklerinde sabit sayfa ortasında kalmasını sağlayacağız. Tabi sadece position:absolute vererek bunu sağlamamız mümkün değil.. Sağdan ve soldan sayfayı ortalaması için herhangi bir genişlik verdikten sonra "margin:0 auto;" özelliğini css'ine eklediğimizde olacaktır. Ancak üstten ve alttan ortalamak için herhangi bir seçenek yok.. bu yüzden js yardımı alacağız.
HTML-Kodu:
#orta{ margin:0 auto; background-color:black; height:600px; width:900px; position:absolute; display:none; border-radius: 15px; box-shadow: 3px 3px 3px #333;}
Css'de position:absolute verdiğimiz div'imizi javascriptle istediğimiz gibi konumlandırabiliriz..
Öncelikle function tag'ımızı açıyoruz.. burda kullandığımız önemli fonksiyonlar $(window).height() ve $(window).width() bu komutlar javascript yardımıyla ekran çözünürlüğüne göre tarayıcıda ne kadar pixel olduğunu hesaplayacaklar bize.. Geri kalan kısmı matematiksel biraz.. Ekran yüksekliğini alıyoruz ve orta css'de ona verdiğimiz "height:600px;" yani 600'den çıkarıyor ve 2'ye bölüyoruz.. Aynı şekilde width içinde 900'den çıkarıyor ve 2ye bölüyoruz.. Javascript işlemler sonucunda orta css'in içine top:300 yada left:400 gibi atamalar yapıyor. Bu her çözünürlüğe göre değişiyor ki sayfanızın orta kısmı her çözünürlükte sayfanın tam ortasında gözüküyor..
HTML-Kodu:
$(function(){ $("#orta").css("top",($(window).height()-600)/2); $("#orta").css("left",($(window).width()-900)/2); });

15 Mart 2012, 16:06	#1
KuzeY Mesajlar: n/a	Html,css,Jquery kullanarak sayfa oluşturma Can sıkıntısı gidermek üzere oluşturulan bi sayfa fazla detaylı değil.. Sayfanın son haline gözatmak için: HTML, css ve jquery kullanarak web üzerinde hareketli siteler oluşturmak üzerine ufak bir yazı olucak sanırım.. öncelikle html dosyamızı oluşturuyoruz.. HTML-Kodu: <!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><** content="text/html; charset=utf-8" http-equiv="Content-Type" /><link href="zurna.css" rel="stylesheet" type="text/css"/> <script src="jquery.min.js" type="text/javascript"></script><script src="sistem.js" type="text/javascript"></script><title>Zurna!</title></head> <body> <div id="orta"> <div id="zurnabaslik">Zurna FM</div> <div id="djliste"> <ul class="listeler"> <li class="liste"><a id="tikla" href="#">Dicey Zurna</a></li> <li class="liste"><a id="tikla2" href="#">Dicey Klavye</a></li> <li class="liste"><a id="tikla3" href="#">Dicey Ayna</a></li> <li class="liste"><a id="tikla4" href="#">Dicey Sohbet</a> </li> <li class="liste"><a id="tikla5" href="#">Dicey PisiPisi</a></li> </ul> </div> <div id="ictaraf"> <img src="dj.png"/> </div> <div id="tasiyici"> <embed type="application/x-shockwave-flash" src="player.swf" style="" id="ply" name="ply" bgcolor="#FFFFFF" quality="high" allowfullscreen="true" allowscriptaccess="always" flashvars="file=http://72.20.6.34:8044/;stream.nsv&type=mp3&volume=50&autostart=true" height="20" width="328"></div> <script type="text/javascript" src="http://www.zurnafm.com/swfobject.js"></script> <script type="text/javascript"> var s1 = new SWFObject("http://www.zurnafm.com/player.swf","ply","328","20","9","#FFFFFF"); s1.addParam("allowfullscreen","true"); s1.addParam("allowscriptaccess","always"); s1.addParam("flashvars","file=http://72.20.6.34:8044/;stream.nsv&type=mp3&volume=50&autostart=true"); s1.write("tasiyici"); </script> </div> </div> </body></html> Öncelikle doctype html head body taglarımızı yerleştirdik html dosyamıza daha sonra kullanacağımız zurna.css ve sistem.js dosyalarımızı html sayfamıza çağırdık.. hareketlendirmeler için jquery kütüphanesini kullanacağımız için jquery.js dosyamızıda html sayfamıza çekiyoruz.. CSS dosyamızı şekillendiriyoruz HTML-Kodu: @import url(http://fonts.googleapis.com/css?family=Sansita+One);body{ margin:0; padding:0; background-color:#00192F; font-family: 'Sansita One', cursive;}#orta{ margin:0 auto; background-color:black; height:600px; width:900px; position:absolute; display:none; border-radius: 15px; box-shadow: 3px 3px 3px #333;}#zurnabaslik{ color:white; font-size:44px; text-align:center; display:none; position:absolute; text-shadow: 3px 3px 3px #00192F; margin-top:10px;}#djliste{ color:white; font-size:18px; display:none; position:absolute; margin-top:100px; margin-left:50px;}.listeler{ list-style-type:none; display:inline;}.liste{ display:inline; padding-right:40px; position:relative;}.liste a:link{ text-decoration:none; color:white;}.liste a:visited{ text-decoration:none; color:white;}.liste a:hover{ text-decoration:none; color:red;}#ictaraf{ margin-top:200px; margin-left:200px; position:absolute; display:none;}#tasiyici{ margin-left:300px; margin-top:580px; display:none;} Css dosyamızda sayfamızdaki nesnelerin nerede nasıl duracaklarını belirliyoruz. hareketlendirmeler için hazırlıyor ve sayfaya saklıyoruz bazılarını.. sonrasında Jquery ".js" dosyamızı şekillendiriyoruz.** HTML-Kodu: $(function(){ $("#orta").css("top",($(window).height()-600)/2); $("#orta").css("left",($(window).width()-900)/2); $("#orta").fadeIn(1000); $("#zurnabaslik").delay(2000).fadeIn(); $("#zurnabaslik").animate({"left":"+=340px"}); $("#djliste").delay(3000).slideDown(3333); $("#tasiyici").delay(6000).fadeIn(3333); $('#tikla').click(function(){ $("#ictaraf").fadeOut(); $("#ictaraf").fadeIn(); }); $('#tikla2').click(function(){ $("#ictaraf").fadeOut(); $("#ictaraf").fadeIn(); }); $('#tikla3').click(function(){ $("#ictaraf").fadeOut(); $("#ictaraf").fadeIn(); }); $('#tikla4').click(function(){ $("#ictaraf").fadeOut(); $("#ictaraf").fadeIn(); }); $('#tikla5').click(function(){ $("#ictaraf").fadeOut(); $("#ictaraf").fadeIn(); });}); jquery dosyamızda daha önce css dosyamızda sakladığımız nesneleri teker teker sayfaya çağırıyoruz. fadeIn, slideDown komutlarını ve sıralamayı belirlemek için delay veriyoruz bazı hareketlere.. click fonksiyonlarıylada açılann DJ listesinden herhangi birine tıklandığında resim açıyoruz. Bu içeriğin resimleri de olabilir yada herhangi başka bir içerik.. Örnek için ben sadece tek 1 resim kullandım bütün dj butonları tek bir resmi açıyor o yüzden.. Paylaş Bu sitelerde paylaş; Digg Del.icio.us Technorati Twitter

15 Mart 2012, 16:07	#2
KuzeY Mesajlar: n/a	Cevap: Html,css,Jquery kullanarak sayfa oluşturma Bu arada Css kodunda div id'si orta olan bölümümüze "position:absolute;" vererek bütün ekran çözünürlüklerinde sabit sayfa ortasında kalmasını sağlayacağız. Tabi sadece position:absolute vererek bunu sağlamamız mümkün değil.. Sağdan ve soldan sayfayı ortalaması için herhangi bir genişlik verdikten sonra "margin:0 auto;" özelliğini css'ine eklediğimizde olacaktır. Ancak üstten ve alttan ortalamak için herhangi bir seçenek yok.. bu yüzden js yardımı alacağız. HTML-Kodu: #orta{ margin:0 auto; background-color:black; height:600px; width:900px; position:absolute; display:none; border-radius: 15px; box-shadow: 3px 3px 3px #333;} Css'de position:absolute verdiğimiz div'imizi javascriptle istediğimiz gibi konumlandırabiliriz.. Öncelikle function tag'ımızı açıyoruz.. burda kullandığımız önemli fonksiyonlar $(window).height() ve $(window).width() bu komutlar javascript yardımıyla ekran çözünürlüğüne göre tarayıcıda ne kadar pixel olduğunu hesaplayacaklar bize.. Geri kalan kısmı matematiksel biraz.. Ekran yüksekliğini alıyoruz ve orta css'de ona verdiğimiz "height:600px;" yani 600'den çıkarıyor ve 2'ye bölüyoruz.. Aynı şekilde width içinde 900'den çıkarıyor ve 2ye bölüyoruz.. Javascript işlemler sonucunda orta css'in içine top:300 yada left:400 gibi atamalar yapıyor. Bu her çözünürlüğe göre değişiyor ki sayfanızın orta kısmı her çözünürlükte sayfanın tam ortasında gözüküyor.. HTML-Kodu: $(function(){ $("#orta").css("top",($(window).height()-600)/2); $("#orta").css("left",($(window).width()-900)/2); }); Paylaş Bu sitelerde paylaş; Digg Del.icio.us Technorati Twitter

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)