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.

260755 kez okundu.

457 Yorum Var

  1. Hakan ÖZTÜRKER demiş ki

    Hocam banner daki kızları kaldırmak için Flash CS4 yeterli olur mu?

    • Ahmet Soyarslan demiş ki

      En son CS5 ile kaydetmiştim yalnız. Flash CS4 açmaz şu anda. CS5'i elde etme şansınız yoksa CS4 formatında kaydedip tekrar yükleyeyim.

  2. MEMET demiş ki

    hocam dediğiniz gibi yaptım oldu fakat gönderdiğim url'de problem var..çünkü yüklediğim stemap sonrasında "URL'ye izin verilmiyor
    Bu URL'ye, bu yerdeki bir Site Haritası için izin verilmiyor." şeklinde mesaj aldım

  3. MEMET demiş ki

    web yönetici merkezinde site doğrula bölümü var,belirttikleri bir dosyayı siteye yükelememiz sonra çalıştırmamız isteniyor..nedense doğrulamıyı geçemiyorum..

    • Ahmet Soyarslan demiş ki

      Sitenizi kaydederken adresini şu şekilde vermelisiniz:

      http://okulweb.meb.gov.tr/**/**/*****/

      Aksi takdirde doğrulama dosyasını göremeyecektir.

  4. ismail kara demiş ki

    Hocam merhaba! Hazırlamış olduğunuz şablonu çok beğendik. Elinize sağlık. Açıklamalarınızla kendimize göre düzenledik fakat siteyi internete yüklediğimizde yan menü linkleri yeni pencerede açılıyor. bilgisayarda çalıştığında sorun yok. internete yüklendiğinde sorun var. yardımcı olursanız seviniriz.

    • Ahmet Soyarslan demiş ki

      Scripts klasöründeki dosyaların "tam" yüklendiğinden emin olun. Özellikle "java.js" dosyasının.

  5. Memet demiş ki

    Hocam tekrar meraba,,dediğiniz gibi site haritası oluşturdum..daha sonra ne yapmam gerekiyor acaba?..

    • Ahmet Soyarslan demiş ki

      Site haritasının dizinlenip dizinlenmediğini takip etmek istiyorsanız Google Webmaster'da oturum açarak site haritanızı buraya yüklemelisiniz.

      Google, XML olarak hazırlanan haritaları kabul ediyor.

  6. Hakan ÖZTÜRKER demiş ki

    Sayın Hocam http://mardindumlupinar.meb.k12.tr/ adresinde yaptığınız sitenin haber kısmının kodlarını mümkünse hocam hakanozturker44@hotmail.com adresine gönderebilirseniz size minnettar kalırım. İlginiz ve çalışmalarınız için teşekkürler.

    • Ahmet Soyarslan demiş ki

      Haber kısmından kastınız manşet haberlerin altında yer alan ".. ziyaretçi defterine mesaj yazdı." bölümü değil mi?

  7. Hakan ÖZTÜRKER demiş ki

    Haber kısmında height değerini artırmayı unutmuşum. Promlem düzeldi. İlginiz için teşekkür ederim

  8. Hakan ÖZTÜRKER demiş ki

    Hocam başlıkta söylediğiniz gibi yaptım ama bir yerlerde hata yapıyorum onu bulamadım. Adobe Flash CS5 de yok hocam.

  9. Hakan ÖZTÜRKER demiş ki

    Hocam banner'daki çocukları silemedim ve 2 den fazla haber ekleyince sitenin alt kısmı bozuluyor. Bu konuda yardımcı olabilir misiniz? İlginiz için teşekkürler.

    • Ahmet Soyarslan demiş ki

      Haber sayısı artınca çıkan kaydırma çubuklarını önlemek için "Anasayfa Haberleri" başlığına gözatın.

      Adobe Flash CS5 kurulu mu?

  10. Hakan ÖZTÜRKER demiş ki

    Hocam emeğinize sağlık çok güzel olmuş. Bizleri düşünerek böyle bir çalışmada bulunmanızdan ötürü size çok teşekkür ederim. Tek bir ricam var banner'daki çocukları nasıl silebilirim? Şimdiden teşekkürler.

    • Ahmet Soyarslan demiş ki

      Teşekkür ederim düşünceleriniz için.

      Çocuk resimlerini silmek için Adobe Flash CS5 ile "menu.fla" dosyasını açmalısınız.



Yorum Yazın