Okul Web Sitesi Şablonu
Kendi okuluma hazırladığım web sitesi için çok istek almamdan dolayı bir okul web sitesi şablonu oluşturuyorum.
Okulumun web sitesiyle hemen hemen aynı olan sitenin özellikleri şu şekilde:
- Flash menü.
- XML destekli Flash manşet haber akışı.
- Jquery ile hazırlanmış duyurular.
Site tam ekran bir arkaplana sahip.
Menülerin ve Okul Adının Değiştirilmesi:
Sitenin ana dizinindeki "bilgiler.txt" dosyasını açın. Okul adını ve menüleri ihtiyacınıza göre değiştirip dosyayı kaydedin.
okuladi=Örnek İlköğretim Okulu Şablonu
menu1=ANASAYFA
menu1tanim=Anasayfaya git.
menu1link=anasayfa.html
Manşet Haber Flash Kullanımı:
Yeni manşet haberler eklemek için öncelikle haberinizle ilgili bir resim dosyası oluşturun veya fotoğraflarınızdan birisini de kullanabilirsiniz. Bu resmi Galeri klasörüne kopyalayın ki sitenin ana dizininde karışıklık oluşturmasın.
Sitenin kök klasöründeki data.xml dosyasını bulun ve Not Defteri ile açın.Aşağıdaki kodu kullanarak ilgili yere yeni öğe <item> ekleyin.
<item image="Galeri/haberresmi.jpg" link="" target="_self" textBlend="no"><![CDATA[<font color='#EEC008'>Haber Başlığı<br /></font><font color='#FFFFFF'>Haber açıklaması.</font>]]></item>
Dosyayı kaydedin ve kapatın.
Manşet Haber Geçiş Efektlerini Değiştirmek:
Anasayfada vereceğiniz manşet haberlerin geçiş efektlerini değiştirmek için data.xml dosyasını Not Defteri benzeri bir uygulama ile açın ve aşağıdaki satırı bulun.
transitionType="1"
Buradaki 1 değerini 1-5 arasındaki bir değer ile değiştirerek farklı geçiş efektleri görebilirsiniz. Değeri değiştirdikten sonra dosyayı kaydedin ve kapatın. Manşet haber flash dosyasının tüm ayarlarını data.xml dosyası ile yapıldığını da hatırlatmakta fayda var. Örneğin, animasyon geçiş hızı, ileri-geri düğmeleri, otomatik geçiş gibi birçok ayarı bu dosyadan yapabilirsiniz.
Anasayfa Haberleri:
Sitenin kök dizininde index.html dosyasıı açın. İçerik bölümündeki Okulumuzdan Haberler başlığı altındaki "haber" sınıfına sahip aşağıdaki DIV elementini bulun.
<div class="haber">
<div class="haber_resim"><img src="Duyuru/okul.jpg" width="80" height="80" /></div>
<div class="haber_bilgi">
<div class="haber_baslik">Haber 1</div>
<div class="haber_metin" align="justify"> Haber metni.</div>
</div>
</div>
Bu elementi alt alta çoğalttınızda siteye yeni haber eklemiş olacaksınız. Haberleri artırdıkça başlığın hemen altında bulunan aşağıdaki DIV elementinin height (yükseklik) değerini de artırınız. Böylelikle kaydırma çubukları gözükmeyecektir.
<div style="overflow:auto; height:250px;">
Bu değer ekleyeceğiniz her yeni haber için 100 px artırın.
Duyurular:
Sitenin kök klasöründeki index.html dosyasını bulun ve görüntüleme açısından rahat olması için Dreamweaver benzeri bir uygulama ile açın.
Div kimliği newsticker-demo olan satırı bulun. Bu elementin altındaki her <li></li> etiketi bir duyuruyu ifade ediyor. Aşağıdaki satırı eklediğinizde yeni bir duyuru eklenmiş olacak.
<li>
<div class="thumbnail">
<img src="Resimler/duyuru.jpg">
</div>
<div class="info">
<span class="duyuru_baslik">Duyuru 1</span>
<div class="duyuru_metin">Duyuru metni.</div>
</div>
<div class="clear"></div>
</li>
Dosyayı kaydedin ve kapatın.
Yan Menü:
Yan menüdeki linklerde gezinmeyi JavaScript kodları ile yaptım. Yan menüye yeni bağlantı eklemek için <ul class="yanmenu"> öğesinin altına aşağıdaki kod satırın ekleyin.
<li class="menu_oge" onclick="golink(adres.html');">Link adı</li>
Kullanıcıya hangi sayfada olduğunu göstermek için bağlantıyı aşağıdaki gibi değiştirin.
<li class="menu_oge_aktif">Gösterilen Sayfa</li>
Bağlantıları belirli başlıklar altında toplamak için aşağıdaki stil sınıfını kullanın.
<li class="menu_oge_sabit">Faydalı Linkler</li>
Dosyayı kaydedin ve kapatın.
Sitenin önizlemesini buraya tıklayarak izleyebilirsiniz. Şablon çeşitli nedenlerden dolayı yayından kaldırılmıştır.
Bu şablon için fotoğraf galerisinin nasıl oluşturulduğunu öğrenmek için tıklayın.
Bu şablon için ziyaretçi defterinin nasıl oluşturulduğunu öğrenmek için tıklayın.
Bu şablon için nasıl anket hazırlanacağını öğrenmek için tıklayın.
Not: Şablon üzerinde geliştirmelere devam edeceğim, bu sayfadan kullanım bilgilerine ve güncel sürüme sahip olabilirsiniz. Görüş ve önerilerinizi yorum olarak ekleyebilirsiniz.
Web sitemi şu anda Masaüstü Görünümü'nde geziyorsunuz.
Mobil cihazınızdan geziniyorsanız Mobil Görünüm'e geçmek için 
En popüler kelime oyununda yarışmaya hazırsanız buraya 
Aradığınız ürünü akılınızdaki fiyata bulun. Hemen şimdi 
Mini blog sitesi 
hocam arka fon için elinde güzel ilköğreitme uygun resimler varsa paylaşabilirseniz çok seviniriz
Sayın Hocam;
Tasarımınızı çok beğendim. Bir sorum olacak. Yan menüde herhangi bir menünün altına açılır menü yapmak istiyorum. Örneğin fare ile personelimiz yazısının üzerine gelince alt menüler açılıp okul idaresi, sınıf öğretmenleri, branş öğretmenleri gibi.
Jquery ile çok kolay animasyonlu açılır menü yapabilirsiniz.
Sayın hocam selamlar. Bu şablonda yer alan duyurular (?Jquery ile hazırlanmış duyurular) bölmünü başka bir sayfaya monte etmeye çalıştım. ama bir turlu yerleştiremedim. yerleştirdim ya duyurular hareket etmiyor. index sayfama yerleştirdim. ilgili tagların arasına cagırıcak kodlarımı yanlıs yazdım acaba. yardımıc olabilirseniz cok sevinicem hocam. Şimdiden iyi çalışmalar dilerim.
Java dosyalarının konumlarını kontrol edin, muhtemelen orda sorun vardır eğer index'teki değişiklikleri aynen okul şablonundaki gibi yapmışsanız.
hocam yan menude ki bağlantıların başka bir sayfada açılması için nasıl bir değişiklik yapmamız gerek acaba..
Onun için bağlantılar "a" etiketi ile yapılacak ama stil dosyasında da bir sürü değişiklik gerekecek.
hocam gerekli düzenlemeyi yaptım ama swf olarak kaydedemediğim için nasıl yapacağımı bilemiyorum Adobe Flash CS5 tr kullanıyorum ?
CTRL-ENTER ile SWF olarak kaydedliyor.
mezunlar bölümünü ilgi ile bekliyoruz hocam
Öncelikle çok büyük bir beklenti içerisine girmenizi tavsiye etmem. Çünkü çok basit bir sistem hazırladım. Üzerinde değişiklik yapılacak dosya sayısı birden fazla olduğu ve yönetici girişi eklenmem gerektiği için bu yazı biraz uzadı. Vakit bulursam artık yazacağım.
Beklettiğim için kusura bakmayın.
selam hocam. Seçtikten sonra SHIFT Ok işaretleri ile veya fare ile hareket ettirebilirsiniz demişsiniz fakat sadece o alanı seçemiyorum. seçmek için ne yapmam gerekiyor ? oradaki bütün yerleri denedim ama bir türlü sadece orayı secemedim :( yardım ederseniz sevinirim. tşk
Araç çubuğundan Selection Tool'u seçin ve yazıya tıklayın.
merhabalar hocam öncelikle böyle bir çalışmayı bizlerle paylaştığınız için teşekkürlerimi sunuyorum. bende şablonu indirip gerekli düzenlemeleri yaptım fakat sitede üst menü görünmüyor sadece "yükleniyor lütfen bekleyiniz" yazısı çıkıyor sorunun kaynağı nedir acaba?
değiştireceğim dosyayı buldum ama oradakı yazı yazılan dikdörtgen kutuyu nasıl hareket ettireceğimi bulamadım ? nasıl yapacaz hocam
Seçtikten sonra SHIFT Ok işaretleri ile veya fare ile hareket ettirebilirsiniz.
hocam menü.fla dosyasını açtım cs5 ile ama hangi dosyayı değiştirecem bilemiyorum