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 
Öncelikle düşünceleriniz için teşekkür ederim. Dediğiniz gibi dinamik içerik için PHP veya ASP gibi sunucu tabanlı bir programlama dili kullanmak gerekiyor ve maalesef MEB sunucuları okul siteleri için bu desteği vermiyor. Ben bu konuya şöyle bir çözüm getirdim. Okulumun web sitesini ziyaret ettiğinizde anket, mezunlar, haberler, oyun skorları ve ziyaretçi defteri sayfarının dinamik yapıda olduğunu görebilirsiniz. Bu sayfaların HTML dosyaları MEB sunucusunda, fakat HTML sayfalarının içerik bölümünü IFRAME kullanarak, PHP desteğine sahip, ücretsiz bir sunucudan çağırıyorum. Aynı stilleri kullandığım için site içerisinde bu sayfaların dışardan çağırıldığı ancak kodlamaya bakarak öğrenilebilir.
İlk etapta size önerim 000webhost sitesinden ücretsiz bir alan almak. Herhangi bir reklam içermeyen bu alan oldukça kaliteli ve sorunsuz. PHP ve MySQL desteği mevcut.
Fotoğraf galerisi hakkındaki sorunuza gelince, ben Jquery ile çalışan LightBox fotoğraf galerisi kullanıyorum. Eğer fotoğraf galerilerini de PHP desteğine sahip harici bir sunucuda çalıştırmak isterseniz bir klasördeki fotoğrafları otomatik olarak okuyarak galeri şekline dönüştüren çalışmamı Web Tasarım bölümümde inceleyebilirsiniz.
Ücretsiz veya ücretli, PHP ve MySQL desteğine sahip bir alan aldığınızda dinamik içerikler için size yardımcı olabilirim.
Hocam öncelikle sitenizdeki çalışmalarınızı izlemekten büyük keyif alıyorum.Ben de böte mezunuyum ama web tasarımı konusunda eksiğim.Okul web sitesi şablonunuzu indirdim ve kullanmak için kolları sıvadım.Ayrıca bu çalışmanızı ücretsiz paylaşmanızda çok güzel..Siteyi yapmaya başladım resimli anlatımlarda çok açık zaten.Dumluğınar İlköğretim okulunun sitesinde mezunlar bölümü,anket ve örneğin yorum yazan kişilerin haberleri var.Bunlar phpde olur sanırım ama site meb te çalışıyor ben de siteme butür bölümler yapmak istiyorum,çok güzel olmuş.bu konuda yardımcı olabilir misiniz,ya da şablonunuza bu tür eklentiler yapmayı üdşünür müsünüz.Bunları görünce joomla kullanmaktan bile vazgeçebilirim =)Bir de hocam galeri bölümünü nasıl yaptığınızı soracaktım..Böyle bir site kurduğunuz için teşekkürler ve bu sitenin gelişmesi çok güzel olur.Bilgisini kıskanmayan paylaşımcı olduğunuz için teşekkür ederim.Başarılarınızın devamını dilerim.
mailnizi aldım hocam teşekkür ederim.. gerekli programları bu akşam kurarım.yardım etmek istemeniz bile sevindirdi bizi...Yardımlarınızın devamını bekliyoruz... Hocalar ÇPL
Konu ile ilgili bir e-posta gönderdim hocam hesabınıza.
Sayın Hocam biz de okulumuza bir site yapalım dedik. lakin okulumuzda bu işlerden anlayan birisi olmadığından bu iş bana kaldı. Biz sizin bu şablonu kullanıp kendi okulumuzun sitesine nasıl dönüştürürüz bunun hakkında bir bilgi verirseniz çok sevinecem...
edeb_i@hotmail.com TDE Öğrt.
Evet, kullanabilirsiniz.
Hocam bu şablonu meb in verdiği meb.k12.tr de kullanabilir miyiz?
Dosyayı bir indirme yöneticisi programla ile indirmelisiniz. Örneğin, Internet Download Manager veya Free Download Manager gibi. Bu hata dosyanın bulunduğu sunucudan kaynaklanıyor. Özellikle büyük dosyaların indirilmesi sırasında.
İkinci sorunuza gelince, Adobe CS5 ile kaydetmiştim önce dosyayı. Çoğu kişide Adobe CS5 yazılımları olmadığı için, istek üzerine dosyayı CS4 formatında tekrar kaydederek şablonu güncelledim. Adobe CS5'te sadece CS4 ve CS5 formatları şeklinde kaydetme seçeneği olduğu için en az CS4 sürümüne sahip olmanız gerekiyor.
hocam indirdiğiim dosyayı rardan çıkarınca hata veriyor. gerçi dosyaları çıkarıyor ama hata veriyor. birde illa cs5 ile mi açmam gerekiyor. bende cs3 varda şimdi cs5 nerden bulacağız? emeğinize sağlık...
hocam elinize sağlık, görsel zevkiniz ve tasarımınız çok güzel oldu, inş bende bunu kullanacağım