Okul Web Sitesi Şablonu

25 Eyl 2010 Cmt 457 yorum

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.

136191 kez okundu.

457 Yorum Var

  1. Abdullah demiş ki

    Güzel çalışma olmuş ellerine sağlık. Rica etsem şablonu benimde almam mümkün mü. teşekkürler şimdiden aeroglu72@hotmail.com

  2. Fatih demiş ki

    Çok güzel bir çalışma. Hocam ellerinize sağlık. Şablonu bana da göndereniz mümkün mü. Şimdiden teşekkürler.

    f_tasli@hotmail.com

  3. Oğuzhan K. demiş ki

    Ellerinize Sağlık Banada yollaya Bilirmisiniz karaman061@outlook.com Şimdiden Teşekkürler

  4. Sinan demiş ki

    Hocam Şablon çok güzel olmuş olmuş.Rica etsem bana da yollar mısınız? profnanis@hotmail.com

  5. Tuğba demiş ki


    Hocam öncelikle elinize sağlık görsel olarak başarılı bi çalışma olmuş..Şablonu rica etsem bana da gönderir misiniz ?
    Adresim: ergulec2700@hotmail.com
    Teşekkür ederim.

  6. İbrahim Küçükaltay demiş ki

    Merhaba Ahmet Bey

    Templateniz çok güzel rica etsem yollaya bilirmisiniz incelesem bi kısmını da kullansam izniniz doğrultusunda. Şimdiden Teşekkür Ediyorum.

    ibrahimkucukaltay@hotmail.com

  7. Sözer AYVAT demiş ki

    ahmet bey okul sitesi için hazırlamış olduğunuz ziyaretçi defterini okul sitemize uyarlamamıza yardımcı olurmusunuz. 735328@meb.k12.tr

    • Ahmet Soyarslan demiş ki

      Ücretli/ücretsiz bir hosting alanına sahipseniz hızlı bir şekilde defteri ekleyebilirsiniz. Sorun yaşadığınız bölümleri belirtirseniz yardımcı olabilirim.

  8. İsmail Özkan Alsan demiş ki

    Hocam site gerçekten görsel olarak güzel. Şablonu rica etsem banada göndereblir misiniz?
    iioalsan@gmail.com

  9. Cihan demiş ki

    Öncelikler sayfa güzel olmuş lakin bir yanlışlık yapılmış framset kullanılmış buda sayfalar arası geçişte adres çubuğunda problem olarak gözüküyor

    • Ahmet Soyarslan demiş ki

      IFRAME'den bahsediyorsanız onu dinamik içerikleri HTML sayfalarına çağırmak için kullanıyoruz. Çünkü MEB'in altyapısı sadece HTML'yi destekliyordu. Artık sistem de değişti zaten.

  10. Mahmut AKARSLAN demiş ki

    HOCAM SLM
    öncelikle yardımlarınızdan dolay çok teşekkür ederiz. haber resimlerini büyütüp duyurular bölümünü inceltebilir miyiz? 2. sorum index html dosyası yok yardımcı olursanız çok sevinirm.
    saygılar.
    mahmutakarslan@hotmail.com

    • Ahmet Soyarslan demiş ki

      Haber resimleri alanı Flash dosyasıdır, Adobe Flash CS5 kullanarak o alanı daraltabilirsiniz. Aynı zamanda data.xml dosyasındaki bannerWidth ve bannerHeight değerlerini, HTML dosyasında Flash ile ilgili boyutları da değiştirmelisiniz. Son olarak CSS (stil.css) dosyasında duyurular ve haberlere verileren alanlar için genişlikleri belirlemeniz gerekiyor. Biraz zahmetli bir işlem.



Yorum Yazın