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 
Allah senden razı olsun kardeşim!
ahmet hocam yeniden teşekkürler.
biraz uğraştan sonra siteyi düzenleyip yayına koyabildim.
firefox engelliyor ama virüs yok.
yalnız şu aklıma geldi. bizim okulun sitesinden oynanan oyunun skoru da size gelecek galiba.
http://kalaba70.meb.k12.tr
Oyun skorları ortak, yani oyun sayfalarının bulunduğu tüm okul sitelerinde gözüküyor.
Ahmet Hocam menu.fla dosyasını CS3 de açınca beklenmedik dosya biçimi diye hata veriyor.Siz CS4 demi yaptınız. Bu adobenin CS sürümleri arasında da office 2003 - 2007 arasındaki gibi sürümler arası dosya uzantısı farkı var ve cs3 de açamıyormuyuz?
Ama menu.fla dosya uzantısı .fla
Sizce Neden hata veriyor?
En son CS5 kullanarak kaydettim. CS3 veya CS4 kullanarak açmanız mümkün değil. Sadece menüleri değiştirecekseniz bilgiler.txt dosyasnı değiştirmeniz yeterli.
Hoca merabalar..Bu bölümle belki alakasız bir soru soracam ama deneyiminizden yaralanmak istiyorum..Hocam şablonunuzu kullanarak yaklaşık 2 ay önce sitemi kullanıma soktum ama google'da okulun adı girildiğinde (google ye eklememe rağmen) maalesef hiç bir sayfada henüz site gözükmüyor..sizce bu neden olabilir?..ilginize teşekkür ederim
Bir site haritası (XML) hazırlayıp Google Webmaster'a yüklemelisiniz. Aynı site haritasını Yahoo ve Bing gibi arama motorlarına da tanıtmalısınız. Yakında site haritası hazırlama ile ilgili bir yazı yayınlayacağım.
Teşekkür ederim Ahmet Bey. Bir deşunu soracağım. Her sayfanın uzunluğu aynı değil. Bunun için ben farklı uzunluklarda arka plan görüntüleri kullanıyorum. Normalde böyle midir?
Hayır tek bir resim kullanmanız yeterli fakat bu resmin yüksek çözünürlükte olması gerekiyor. Ben 1920x1200 gibi resimleri tavsiye ederim. Tüm ekranlarla uyumlu. Yalnız bu şekilde olunca dosya boyutu da artacaktır. Resmin dosya boyutunu düşürmek için ise kaydederken JPG kalitesini düşürün.
Ahmet Bey arka plan görüntüsü sizin sitenizde sabit. Ben de yalnızca orta bölümün hareket etmesini istiyorum. Arka plan görüntüsünü nasıl sabitleriz.
BODY etiketini etkileyen stili şu şekilde yapın:
body
{
background-image: url(arkaplanresminiz.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
ahmet bey çok teşekkür ederim. çok güzel bir tasarım
çalışmalrınızı ilgiyle takip ediyoruz hocam. Teşekkürler. Bu şablonu indirdik ama açtığımızda sizin site gibi olmadığını gördük. Sayfalar bembeyaz; flaslar çalışmıyor; yazılar ve fotoğraflar gözükmüyor. Sebebi ne olablir?
İndirirken sorun çıkmış olabilir. Internet Download Manager veya benzeri bir programla dosyayı indirmenizi öneriyorum. Bu hata sunucudan kaynaklanıyor.
Merhaba Hocam
Öncelikle okulunuz için yaptığınız site çok güzel. Ancak bu siteyi php ile kodlasanız aynı tema olacak şekilde daha çok ilgi görecektir. Yönetim paneli vasıtasıyla ekleme haber resim ekleme daha kolay olacaktır...
Teşekkür ederim hocam.
PHP ile kodlamak sorun değil, yalnız MEB sunucuları desteklemiyor. Çoğu sıkıntı da (anket, defter vs) bu yüzden kaynaklanıyor. Böyle olunca da çoğu öğretmen arkadaşımızın HTML'ye yöneleceğini düşünüyorum.
ahmet hocam öncelikle site şablonu için teşekkürlerimi bildiriyorum.
şablon üzerinde biraz çalıştım.
önce light box indirip galeri düzenledim.
sonra sitenin başlığındaki ilköğretim okulu yazısının başına okulumun ismini eklemek için swf ve fla düzenleme programları indirip uğraştım. hiç biri olmadı. sonra bende aloe flash banner programı vardı. banneri onun içine atıp bi şekilde okulumun ismini ekledim.
bu arada frontpage var sadece dreamweaver falan yok.
şurada takıldım: galeri.html dosyasını açıp sayfaya alt alta galeriler eklemeye uğraştım. frontpage'de şablon aşağı doğru genişliyor gibi görünüyor ama tarayıcıda açınca sonraki eklediğim galeri şablonun dışına taşıyor. div etiketi arayıp bulmaya çalıştım ama yapamadım. ne yapmalıyım?
Hocam Adobe CS4 veya CS5 paketini kullanarak şablonu daha verimli kullanabilirsiniz.