jQuery Slider,Fotogaleri,Tab,Tarih Destekli Okul Temam v11

Kodla Büyü
X

xorcistforyou

Seçkin Üye
Seçkin Üye
Mesajlar
909
Okul siteniz için yeni bir tasarım geliştirdim. Üzerinde istediğiniz değişikliği yaparak kullanabilirsiniz.
Yine tamamiyle resimlerin, şablonun, html ve css kodlamanın bana ait olduğu bir tasarımdır.

Diğer Çalışmalarım :
=================================================================================
V1 incelemek için : template-icon-gif-png-f110/jquery-slider-fotogaleri-tab-tarih-destekli-okul-temasi-t35587.html
V2 incelemek için : template-icon-gif-png-f110/jquery-slider-tab-tarih-fotogaleri-destekli-okul-temam-v2-t36424.html
V3 incelemek için : template-icon-gif-png-f110/jquery-slider-fotogaleri-tab-tarih-destekli-okul-temam-v3-t36981.html
V4 incelemek için : template-icon-gif-png-f110/jquery-slider-fotogaleri-tab-tarih-destekli-okul-temam-v4-t37466.html
V5 Transparan Tema incelemek için : template-icon-gif-png-f110/jquery-slider-tarih-tab-fotogaleri-transparan-okul-temam-v5-t37803.html
V5.1 Transparan Tema incelemek için : template-icon-gif-png-f110/jquery-slider-tarih-tab-fotogaleri-transparan-okul-tema-v5-1-t38693.html
V6 Transparan Tema incelemek için : template-icon-gif-png-f110/jquery-slider-tarih-tab-fotogaleri-transparan2-okul-temam-v6-t38208.html
V7 incelemek için : template-icon-gif-png-f110/jquery-slider-fotogaleri-tab-tarih-destekli-okul-temasi-v7-t39625.html
V8 incelemek için : template-icon-gif-png-f110/jquery-slider-fotogaleri-tab-tarih-destekli-okul-temam-v8-t41012.html
V9 incelemek için : template-icon-gif-png-f110/jquery-slider-fotogaleri-tab-tarih-destekli-okul-temam-v9-t41897.html
V10 incelemek için : template-icon-gif-png-f110/jquery-slider-fotogaleri-tab-tarih-destekli-okul-temam-v10-t42422.html
Yarışma için hazırladığım tema : template-icon-gif-png-f110/yarisma-icin-hazirladigim-jquery-destekli-okul-temam-t42683.html

Joomla Antares V0 incelemek için : joomla-f70/kod-adi-antares-joomla-1-5-15-okul-temam-gule-gule-kullanin-t37187.html
Joomla Antares V1 incelemek için : joomla-f70/kod-adi-antares-1-joomla-1-5-15-okul-temam-sorunsuz-t38019.html


" Temanın Özellikleri "
=======================
1. 3 kolondan oluşmaktadır. Site 960px genişliğindedir.

2. Yeni bir banner tasarımı kullandım. 960px genişliğinde.

3. Yatay ve dikey menu sistemi kullandım. Yatay menude seçili görsel efekti ve fare üzerinde özelliği mevcuttur.

4. Dikey menulerde fare üzerinde özelliği kullanılmıştır. Dikey menu başlıklarında simge kullanılmıştır.

5. jQuery slider kullanılarak okul - personel sayfaları hazırlanmıştır.

6. Örnek banner kullanımı hazırladım. Boş olanı "Resimler" klasörü içindedir. Resimler klasöründe "baslik.jpg" dosyasını "baslik1.jpg" dosyası ile değiştirin.

7. Site IE ve Firefox'ta dağılmadan görüntülenmektedir. IE 6 desteği yoktur.

8. jQuery eklentisi ile resim galerisi otomatik ve manuel geçişli hazırlanmıştır.

ÖNİZLEME İÇİN TIKLAYINIZ

Kod: 
Şifre : fatih
 

Ekli dosyalar

  • prsnl.jpg
    prsnl.jpg
    70.3 KB · Görüntüleme: 2,718
  • okl.jpg
    okl.jpg
    76.7 KB · Görüntüleme: 2,718
  • sayfaalti.jpg
    sayfaalti.jpg
    41.8 KB · Görüntüleme: 2,718
  • galeri.jpg
    galeri.jpg
    57.3 KB · Görüntüleme: 2,718
  • index-ust.jpg
    index-ust.jpg
    79.9 KB · Görüntüleme: 2,718
  • xhtml-css tema projem 11.rar
    xhtml-css tema projem 11.rar
    462.2 KB · Görüntüleme: 666
Fatih hocam başlık kısımlarını bilerek mi boş bırakıyorsun yoksa unuttuğun birşeymi?
<title>Untitled Document</title>
 
hasari' Alıntı:
Fatih hocam başlık kısımlarını bilerek mi boş bırakıyorsun yoksa unuttuğun birşeymi?
<title>Untitled Document</title>
Genişletmek için tıkla ...

CS4 Dreamveawer İngilizce versiyonunu kullandığımdan o şekilde atıyo başlığı... Tüm adobe programlarını ingilizce kullanmayı tercih ediyorum...

Yazarsam kendi adımı yazacağım oraya. Değiştiriken zorluk olmasın diye o şekilde bırakıyorum.. Sizler istediğinizi yazın...
 
hocam calışmlarınız mükkemmel :+1:
ama bir öneri getirmek istiyorum mesela bu tasarımı frameli hale getirirseniz güncellemlerde tüm sayfaları değiştrmek zorunda kalmazsınız...
frameli bit tema hazırlamanız mümkünmü acaba liselere yönelik 3 sütunlu..
 
tesekkurler hocam.

frame dediğiniz gibi güncelleme açısından rahatlık verecektir. Bu aralar HTML altyapıdan tema yapmaya ara verdim PHP - MYSQL kullanmaktayım..

düşünelim bi hocam...
 
frameli bir çalışmanızı dört gözle bekliyorum hocam bizim gibi amatörler için gerçekten çok yardımı olurdu... iyi çalışmalar dilerim
 
wezyr' Alıntı:
frameli bir çalışmanızı dört gözle bekliyorum hocam bizim gibi amatörler için gerçekten çok yardımı olurdu... iyi çalışmalar dilerim
Genişletmek için tıkla ...

Teşekkür ederim...

Şimdiye kadar hiç öle bir düşüncem olmadı ve taraftar olmadım frame kullanmaya.. Bir kaç deneme yapabilirim..

Yalnız frame'in nasıl ve nerde görünmesini ve hangi mantıkla çalışmasını yazarsanız tasarlarken yardımcı olur bana...
 
Güzel çalışmalar yapmışsınız, ellerinize yüreğinize sağlık.Bende siteyi yenilemeyi düşünüyordum. Arkadaşlara meta taglar harici değiştirebilirsiniz demişsiniz. Kodlamaya dokunmadan en altta yazan tasarımcı yazısını silip kullanabilir miyim?
 
xorcistforyou' Alıntı:
wezyr' Alıntı:
frameli bir çalışmanızı dört gözle bekliyorum hocam bizim gibi amatörler için gerçekten çok yardımı olurdu... iyi çalışmalar dilerim
Genişletmek için tıkla ...

Teşekkür ederim...

Şimdiye kadar hiç öle bir düşüncem olmadı ve taraftar olmadım frame kullanmaya.. Bir kaç deneme yapabilirim..

Yalnız frame'in nasıl ve nerde görünmesini ve hangi mantıkla çalışmasını yazarsanız tasarlarken yardımcı olur bana...
Genişletmek için tıkla ...

genel bilgilerin olduğu kısım (baner;sağ menü, sol menü ve alt kısım) sabit kalmalı ortada kalan kısmı da framli yaparsanız daha mantıklı olur. örneğin çalışmalarınızda yeni bir menü linki eklediğimizde tüm sayfaları günecellememiz gerekiyor ama framli olursa sadece diyelimki sağ menüyü değiştririz. içerik içinde ortadaki frame link veririz. böyelce sadece 1 yeni sayfa yapmış oluruz 1 de güncelleme yapmış oluruz...

özetlemek gerekirse üst menü,alt menü, solmenü,sağ menüve orta alan olmak üzere 5 framli bir index ve menü linlerini orta alana yönlendirilmesi gibi bir çalışma olabilir. sağ ve sol menü olup olmaması da tasarımcıya bağlı
 
@bashcasy
evet, bir çok versiyon oldu ve hepsi tasarımlarıyla birbirinden farklı ve eşsiz 8)

@wezyr
işin kötü yanı merkezde açılan frame'in yanında kaydırma çubuğu çıktığında tüm görsellik bozulur. bunun için eklenen frame'in yüksekliğine göre sol veya sağ bölümün genişlemesi lazımki görsellik bozulmasın. script destekli eklenmesi gerekir heralde...

bunu frame kullanmadan jquery.ajax'ın load fonksiyonu ile yapılır ama işte kaydırma çubuğu işi bozuyo.. denemekte lazım tabi..
 
xorcistforyou' Alıntı:
@wezyr
işin kötü yanı merkezde açılan frame'in yanında kaydırma çubuğu çıktığında tüm görsellik bozulur. bunun için eklenen frame'in yüksekliğine göre sol veya sağ bölümün genişlemesi lazımki görsellik bozulmasın. script destekli eklenmesi gerekir heralde...
Genişletmek için tıkla ...

script e gerek yoktu frame boyutunu ayarlarken değerini sanırım % olarak veriyorduk
 
bir yerlerden not almıştım belki yardımı olur.


1-iframe yüksekliğini içeriğine göre otomatik ayarlamak için kullanabilirsiniz. iframe kaydırma çubuğu yok tarayıcı kaydırma çubuğu var:
head tagları arasına kodu yapıştır:
Kod:
<script language="JavaScript">
<!--
function boyutlama()
{
var yukseklik=document.getElementById('iframe').contentWindow.document.body.scrollHeight;
document.getElementById('iframe').height=yukseklik;
}
//-->
</script>

body tagları arasına istenen yere ise aşağıdaki kodları yapıştırıp , "src" ve "name" kendi sitenize göre değiştirin:
Kod:
<iframe src="deneme.html" name="anasayfa" onload="boyutlama();" scrolling="no" id="iframe" frameborder="0"

style="width:100%;" marginheight="0" marginwidth="0"></iframe>




2-iframe yüksekliğini tarayıcıya göre otomatik ayarlamak için kullanabilirsiniz. iframe kaydırma çubuğu var tarayıcı kaydırma çubuğu yok
head tagları arasına kodu yapıştırın:
Kod:
<script type="text/javascript">
<!--
function boyutlama()
{
var yukseklik=document.getElementById('iframe').contentWindow.document.body.scrollHeight;

var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight-150;//tarayıcınızın dikey kaydırma çubuğu görünüyorsa 150 sayısını artırın .altta boşluk olursa 150 değerini azaltınız.
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight-150;//tarayıcınızın dikey kaydırma çubuğu görünüyorsa 150 sayısını artırın .altta boşluk olursa 150 değerini azaltınız.
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight-150;//tarayıcınızın dikey kaydırma çubuğu görünüyorsa 150 sayısını artırın .altta boşluk olursa 150 değerini azaltınız.
}

if (yukseklik>myHeight) document.getElementById('iframe').height=myHeight
else
document.getElementById('iframe').height=yukseklik;


}
//-->
</script>

body tagları arasına istenen yere ise aşağıdaki kodları yapıştırıp , "src" ve "name" kendi sitenize göre değiştirin:
Kod:
<iframe src="deneme.html" name="anasayfa" onload="boyutlama();" scrolling="auto" id="iframe" frameborder="0"

style="width:100%;" marginheight="0" marginwidth="0"></iframe>

kodları düzenleyerek genişliğide otomatik olacak şekilde istediğiz gibi değiştirebilirsiniz

Ayrıca:
Kod:
<body onresize="boyutlama()">

kodda görüldüğü gibi body tag içersine onresize="boyutlama()" kodunu eklerseniz,
tarayıcınızın boyutunu değiştirdiğinizde iframe otomatik kendini ayarlayacaktır.
 
bashcasy' Alıntı:
xorcistforyou' Alıntı:
@wezyr
işin kötü yanı merkezde açılan frame'in yanında kaydırma çubuğu çıktığında tüm görsellik bozulur. bunun için eklenen frame'in yüksekliğine göre sol veya sağ bölümün genişlemesi lazımki görsellik bozulmasın. script destekli eklenmesi gerekir heralde...
Genişletmek için tıkla ...

script e gerek yoktu frame boyutunu ayarlarken değerini sanırım % olarak veriyorduk
Genişletmek için tıkla ...

bana en mantıklısı haber.html sayfası yapıp bunun içeriğini olduğu gibi index sayfası içine oluşturacağımız div'in içine yüklemek olacaktır jquery ajax fonksiyonu ile.. Bunla ilgili biraz deneme yapıcam.. sonuç isteidiğim gibi olursa böyle yapıcam..

olmadı <the korsan hocamın paylaştığı yukarıdaki çözümlerden birini eklerim index sayfasına..

Aslında eski yöntemleri bırakıp göncel çözümleri kullanmak daha mantıklı...
 
yine jquery diyorum 8)

load fonksiyonunu kullanarak istediğimi yaptım.. Görsellikte herhangi bir bozulma yaşamadım.. yakında sizlerle bu özelliği kullanan ve kullanmayan tasarımlarımı paylaşacağım..
En sevindiğim ise frame kullanmaktan kurtuldum..

Sabırla bekleyin :wink:
 
Hocam öncelikle yüreğinize sağlık demek istiyorum ben bilişim teknolojileri bölümünden mezunum 2 seneden beri bir kanser problemim var bununla uğraşıyorum ve bu yüzden kazandığım fırat üniversitesine gidemedim halen bu hastalıkla uğraşıyorum ve evden çıkamıyorum bu yüzden sürekli bilgisayar başındayım ama bu 2 senedir kodlamayla uğraşmıyorum nette gezerken bu siteye rastladım samimiyeti hoşuma gitti o yüzden hem öğrenmek belkide hemde öğretmek istiyorum.Öğrenmek derken lafı uzattım zaten sadete geleyim :) Galeri kısmına önizlemeli bir jqueryslider koyarsanız daha iyi olur yani resmin üstüne geldiğinizde büyütülebilirse daha hoş durur şuan için son kullanıcı olarak söylüyorum bunu tabiki başırılarınızın devamını dilerim...
 
Allah yardımsınız olsun hocam.. İnş zamanla şifaya kavuşursunuz..

Galeride geçen resimler üzerindeki fontu diyorsanız bilgisayarımda birçok font yüklü olduğu için adını bılmıyorum... Belki "tondo" olabilir...
 
Cevap yazmak için giriş yap yada kayıt ol.
BBNET
Geri
Üst