Kocaeli Üniversitesi
Kocaeli Üniversitesi
 
Tablo sitillerinde değişiklik yapılmıştır. Aşağıdaki örnekleri inceleyebilirsiniz.

Bu sayfanın temasını indirmek için tıklayınız.

İlk olarak yapılacaklar

Aşağıdaki kodları web sitenizin <head> < /head> etiketleri arasına ekleyiniz. Bu kodlar menu ve diğer uygulamalar için kullanılacaktır.

Birim adı zemin rengi için #a0bbcc, #0080c0 veya #036b2c renkleri önerilir.

Head etiket kodları.

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="http://sitil.kocaeli.edu.tr/sitil.css" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://sitil.kocaeli.edu.tr/js/jquery.min.js"></script>
<script type="text/javascript" src="http://sitil.kocaeli.edu.tr/js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="http://sitil.kocaeli.edu.tr/js/vtip.js"></script>
<script type="text/javascript" src="http://sitil.kocaeli.edu.tr/menu.js"></script>  

Simge ve Büyük Resim için

Aşağıdaki kodları web sitenizin <body> < /body> etiketleri arasına ekleyiniz. Bu kodlar menu ve diğer uygulamalar için kullanılacaktır.

Body etiket kodları.

  <div id="site-ici-cerceve"> <!-- Buraya dikkat bu etiket en son alt menü ile kapatılacak -->
  <div class="merkez-icerik">
    <div id="ust">
      <div class="sola"> <a href="http://www.kocaeli.edu.tr/"><img src="http://sitil.kocaeli.edu.tr/resim/kocaeli-simge.gif" alt="Kocaeli Üniversitesi" /></a> </div>
      <div class="saga"> <img src="Biriminizin adı yazılı olan birim resmi" alt="Biriminizin ismi" /> </div>
      <div class="temizleyici">&nbsp;</div>
    </div>
  </div>
  
  <div class="temizleyici"></div>  

Ana Menü için

Aşağıdaki kodları web siteniz üstteki eklediğiniz kodlardan hemen sonra ekleyiniz. Bu kodlar menu için kullanılacaktır. Çalışan örnek yukarıdaki menüdür.

Menu kodları.

  <ul id="anamenu"> 
    	<li> 
        	<a href="http://www.kocaeli.edu.tr/hakkimizda/">HAKKIMIZDA</a> 
			<!-- Açılan kısım -->
            <div class="sub">
			<!-- Açılan kısım başlığı-->
            <div class="turkuaz" align="center">Hakkımızda</div>
			
            <div class="aralik2"></div><!-- 2 px lik aralık-->
			
            	<ul> 
                	<li><h2>Genel</h2></li> 
                    <li><a href="http://www.kocaeli.edu.tr/hakkimizda/index.php">Tarihçe</a></li>
                    <li><a href="http://www.kocaeli.edu.tr/hakkimizda/?Hakkimizda=KisaBilgiler">Kısa Bilgiler</a></li>
                    <li><a href="http://www.kocaeli.edu.tr/hakkimizda/?Hakkimizda=TanitimFilmi">Tanıtım Filmi</a></li>
                    <li><a href="http://www.kocaeli.edu.tr/hakkimizda/?Hakkimizda=Fotograflarla">Fotoğraflarla Umuttepe</a></li>
                    <li><a href="http://sanaltur.kocaeli.edu.tr/">Sanal Tur</a></li>
                    <li><a href="http://bhi.kocaeli.edu.tr/yerleske.htm">Yerleşkeler</a></li>
                   
                </ul> 
                <ul> 
                	<li><h2>Plan / Rapor / Genelge</h2></li> 
                    <li><a href="http://www.kocaeli.edu.tr/hakkimizda/?Hakkimizda=StratejikPlan">Stratejik Plan</a></li>
                    <li><a href="http://www.kocaeli.edu.tr/hakkimizda/?Hakkimizda=FaaliyetRapor">Faaliyet Raporları</a></li>
                    <li><a href="http://www.kocaeli.edu.tr/hakkimizda/?Hakkimizda=AkademikFaaliyet">Akademik Faaliyet Raporları</a></li>
                    <li><a href="http://www.kocaeli.edu.tr/hakkimizda/?Hakkimizda=AkademikDegerlendirme">Akademik Değerlendirme Raporu</a></li>
                    <li><a href="http://www.kocaeli.edu.tr/hakkimizda/?Hakkimizda=YatirimProgrami">Yatırım Programı Raporu</a></li>
                  </ul> 
                <ul> 
                	<li><h2>Bağlantılar</h2></li> 
                    <li><a href="http://vakif.kocaeli.edu.tr/">Kocaeli Üniversitesi Vakfı</a></li>
                    <li><a href="http://bhi.kocaeli.edu.tr/beb.htm">Bilgi Edinme Birimi</a></li>
                    <li><a href="http://anaokulu.kocaeli.edu.tr/">Uygulama Anaokulu</a></li>
                 </ul> 
                <ul> 
                	<li><h2>Kurullar</h2></li> 
                    <li><a href="http://adek.kocaeli.edu.tr/">Akademik Değerlendirme ve Kalite Geliştirme Kurulu</a></li>
                    <li><a href="http://etikkurul.kocaeli.edu.tr/etikkurullar.html">Üniversite Etik Kurulu</a></li>
                    <li><a href="http://etikkurul.kocaeli.edu.tr/arastirma/arastirmaetikkurullar.html">Araştırma Etik Kurulları</a></li>
                 
                </ul> 
                
            </div>
        </li> 
        <li> 
        	<a href="http://www.kocaeli.edu.tr/universite-yonetim/">YÖNETİM</a> 
            <div class="sub">
            <div class="turkuaz" align="center">Yönetim</div> 
            <div class="aralik2"></div>
            	 <ul> 
                    <li><a href="http://www.kocaeli.edu.tr/universite-yonetim/?Yonetim=Rektorluk">Rektörlük</a></li>
                    <li><a href="http://www.kocaeli.edu.tr/universite-yonetim/?Yonetim=GenelSekreterlik">Genel Sekreterlik</a></li>
                    <li><a href="http://icden.kocaeli.edu.tr/">İç Denetim Birimi</a></li>
                    <li><a href="http://www.kocaeli.edu.tr/universite-yonetim/?Yonetim=YonetimKurulu">Yönetim Kurulu - Kararlar</a></li>
                    <li><a href="http://www.kocaeli.edu.tr/universite-yonetim/?Yonetim=Senato">Senato Üyeleri - Kararlar</a></li>
                 </ul>
                <ul>
                	<li><h2>Rektörlüğe Bağlı Birimler</h2></li>
                    <li><a href="http://bpab.kocaeli.edu.tr/">BAP Koordinasyon Birimi</a></li>
                    <li><a href="http://www.kocaeli.edu.tr/ogrhizmt/engelli/index1.htm">Engelliler Araştırma ve Uygulama Birimi</a></li>
                    <li><a href="http://proje.kocaeli.edu.tr/">Proje Birimi</a></li>
                    <li><a href="http://int.kocaeli.edu.tr/">Uluslararası İlişkiler Birimi </a></li>    
                </ul>
                <ul>
                	<li><h2>Daire Başkanlıkları</h2></li>
                    <li><a href="http://bidb.kocaeli.edu.tr/AnaSayfa.php">Bilgi İşlem </a></li>
                    <li><a href="http://odb.kocaeli.edu.tr/">Öğrenci İşleri </a></li>
                    <li><a href="http://kutuphane.kocaeli.edu.tr/">Kütüphane ve Dökümantasyon </a></li>
                    <li><a href="http://sksdb.kocaeli.edu.tr/">Sağlık, Kültür ve Spor </a></li>
                    <li><a href="http://www2.kocaeli.edu.tr/idari/dairebsk_new.htm">Personel Daire Başkanlığı</a></li>
                    <li><a href="http://strateji.kocaeli.edu.tr/">Strateji Geliştirme </a></li>
                    <li><a href="http://imid.kocaeli.edu.tr/">İdari ve Mali İşler </a></li>
                    <li><a href="#">Yapı İşleri </a></li>
                </ul>
                <ul>
                <li><a href="http://bhi.kocaeli.edu.tr/">Basın ve Halkla İlişkiler Şube Müd.</a></li>   
                <li><a href="http://www.kocaeli.edu.tr/universite-yonetim/?Yonetim=HukukMusavirligi">Hukuk Müşavirliği</a></li> 
                <li><a href="http://kkm.kocaeli.edu.tr/">Kültür ve Kongre Merkezi Müd.</a></li>
                <li>&nbsp;</li>
                <li>&nbsp;</li>
                <li>&nbsp;</li>
                <li><h2>İlanlar</h2></li>
                <li><a href="http://www.kocaeli.edu.tr/universite-yonetim/?Yonetim=ilan">Akademik Personel İlanları</a></li>
                <li><a href="http://imid.kocaeli.edu.tr/ihaleler.php">İhale İlanları</a></li>

                </ul>
                 
            </div> 
        </li> 
    
        <li> 
        	<a href="http://www.kocaeli.edu.tr/e-hizmetler/">E-HİZMETLER</a>
            <div class="sub">
            <div class="turkuaz" align="center">E-Hizmetler</div>
            <div class="aralik2"></div>
            	<ul>
                	<li><a href="http://ogr.kou.edu.tr/KOUBS/genel/giris.cfm">Genel</a></li>
                    <li><a href="http://kutuphane.kocaeli.edu.tr/">E-Kütüphane</a></li>
                    <li><a href="http://ogr.kou.edu.tr/KOUBS/Istatistik/index.cfm">İstatistik </a></li>
                    <li><a href="#">Radyo Kİ</a></li>
                    <li><a href="http://www.kocaeli.edu.tr/e-hizmetler/">Faydalı Bağlantılar</a></li>

                </ul>
                
                <ul>
                	<li><h2>Bilgi Bankası - Altyapı</h2></li>
                	<li><a href="http://akademikfaaliyet.kocaeli.edu.tr">Akademik Faaliyet </a></li>
                    <li><a href="http://akademikpersonel.kocaeli.edu.tr">Akademik Personel B.B </a></li>
                    <li><a href="http://laboratuar.kocaeli.edu.tr">Ar-Ge Laboratuar B.B </a></li>
                    <li><a href="http://akademikfaaliyet.kocaeli.edu.tr/arama.php">AP Bilgi ve Ar-Ge Arama Motoru </a></li>
                    <li><a href="http://mezun.kocaeli.edu.tr">Mezun Bilgi Sistemi </a></li>
                    <li><a href="http://tasinir.kocaeli.edu.tr">Taşınır Kayıt Kontrol </a></li>
					
                 </ul>
                 <ul>
                	<li><h2>Eğitim - İşbirliği</h2></li>
                	<li><a href="http://bkub.kocaeli.edu.tr">BKÜB </a></li>
                    <li><a href="http://bologna.kocaeli.edu.tr">Bologna Süreci </a></li>
                    <li><a href="http://ogr.kocaeli.edu.tr/koubs/bologna/index.cfm">Eğitimde Yeniden Yapılanma ve Kalite Süreci </a></li>
                    <li>&nbsp;</li>
                    <li>&nbsp;</li>
                    <li><h2>Üniversite İşbirlikleri</h2></li>
                    <li><a href="http://kousan.kocaeli.edu.tr">Kocaeli Endüstriyel Dönüşüm</a></li>
                    <li><a href="http://argedestek.kocaeli.edu.tr">Ticari Ar-Ge Destek Merkezi </a></li>
                 </ul>
                  <ul>
                	<li><h2>E-Kocaeli Üniversitesi</h2></li>
                	<li><a href="http://posta2.kocaeli.edu.tr/uwc/auth">E-Posta</a></li>
                    <li><a href="http://eds.kocaeli.edu.tr/">Eğitim Destek Sistemi</a></li>
                    <li><a href="http://eders.kocaeli.edu.tr/">Uzaktan Eğitim</a></li>
               
                 </ul>
                 <ul>
                	<li><h2>Duyurular / Haberler</h2></li>
                	<li><a href="duyurular.php">Duyurular</a></li>
                    <li><a href="universitemizden-haberler.php">Üniversitemizden Haberler</a></li>
                 </ul>
            </div>
        </li> 
        <li><a href="http://www.kocaeli.edu.tr/personel-erisim.php">PERSONEL ERİŞİM</a></li>
        <li><a href="http://www.kocaeli.edu.tr/iletisim.php">İLETİŞİM</a></li>
        <li><a href="http://www.kocaeli.edu.tr/int/">ENGLISH</a></li>
        
    </ul>  

Herhangi Bir Başlık

  • Herhangi Bir Liste 1
  • Herhangi Bir Liste 2

Yukarıdaki sitili elde etmek içn kullanılancak kod aşağıdaki gibidir. (Herhangi Bir Başlık kodları)

  <div class="genel bin">
     <div class="genel dokuzyuzdoksansekiz">
        <div class="aralik"></div><!-- 5 px lik aralık-->
        	<h4><a href="#">Herhangi Bir Başlık</a></h4>
            <div class="bilgi">
                <ul class="sade-liste">
                    <li>Herhangi Bir Liste 1</li>
                    <li>Herhangi Bir Liste 2</li>
                </ul>
			</div>	
     </div>
  </div>  

İki Sütünlu yapı (aşağıdaki gibi)

Başlık 1

  • Liste 1
  • Liste 2

Başlık 2

  • Liste 1
  • Liste 2

Etkinlikler

02
Mart
Başlık
Açıklama
  <!--Sol sütun -->
  <div class="yediyuz">
    <h4>Başlık 1</h4>
    <p>
    <div class="bilgi">
      <ul class="sade-liste">
        <li>Liste 1</li>
        <li>Liste 2</li>
      </ul>
      <div class="temizle"></div>
    </div>
    </p>
    <h4>Başlık 2</h4>
    <p>
    <div class="bilgi">
      <ul class="sade-liste">
        <li>Liste 1</li>
        <li>Liste 2</li>
      </ul>
      <div class="temizle"></div>
    </div>
    </p>
  </div>
  
   <!--Sağ sütun -->
  <div class="ikiyuzdoksan son">
    <div class="genel ikiyuzseksenalti son">
      <h4>Etkinlikler</h4>
      <div class="etkin">
        <div class="etkinlik-ayrac"></div>
        <div class="etkinlik-tarih">
          <div class="etkinlik-tarih-gun">02</div>
          <div class="etkinlik-tarih-ay">Mart</div>
        </div>
        <div class="etkinlik-baslik"> <a href="#" class="popup"> Başlık </a>
          <div class="etkinlik-saat"> Açıklama </div>
        </div>
        <div class="temizle"></div>
      </div>
      <div class="etkinlik-ayrac"></div>
          <div class="devam">
                <div class="baglanti"> <a href="#" class="ozel">Bu bir özel bağlantıdır</a> </div>
          </div>
      </div>
  </div>  

Kullanışlı ifadeler.

  • Liste 1
  • Liste 2
  • Liste 1
  • Liste 2
  • Liste 1
  • Liste 2
  • Liste 1
  • Liste 2
Bir yazı
Bir yazı
Bir yazı
Bir yazı
 
TABLO sitilli
Başlık 1Başlık 2
yazıyazı
yazıyazı
yazıyazı
TABLO sitilsiz
Başlık 1Başlık 2
yazıyazı
yazıyazı
yazıyazı
 
Sağa dayalı resim.
 
Sola dayalı resim.

  <p>
        <div class="hata">
        	<ul class="sade-liste">
            	<li>Liste 1</li>
                <li>Liste 2</li>
        	</ul>
        </div>
         <div class="bilgi">
        	<ul class="sade-liste">
            	<li>Liste 1</li>
                <li>Liste 2</li>
        	</ul>
        </div>
        <div class="ikaz">
        	<ul class="sade-liste">
            	<li>Liste 1</li>
                <li>Liste 2</li>
        	</ul>
        </div>
        <div class="tamam">
        	<ul class="sade-liste">
            	<li>Liste 1</li>
                <li>Liste 2</li>
        	</ul>
        </div>
		<div class="etiket">
        Bir yazı
        </div>
        <div class="aralik2"></div>
        <div class="basarili">
        Bir yazı
        </div>
        <div class="aralik2"></div>
        <div class="hatali">
        Bir yazı
        </div>
        <div class="aralik2"></div>
        <div class="turkuaz">
        Bir yazı
        </div>
        <div class="aralik"></div>
        
        <div class="icerik-ayrac">&nbsp;</div>
        <div class="aralik"></div>
		<div class="aralik"></div>
        <div class="devam">
          <div class="baglanti">
          <a href="#" class="sh">Sağ tarafa devam/normal bağlantı</a> 
          </div>
    	</div>
         <div class="aralik2"></div>
        <div class="devam">
          <div class="baglanti">
          <a href="#" class="ozel">Sağ tarafa devam/normal bağlantı</a> 
          </div>
    	</div>
         <div class="aralik"></div>
         <div class="baglanti">
          <a href="#" class="ozel">devam/normal bağlantı</a> 
          </div>
          <div class="aralik"></div>
         <div class="baglanti">
          <a href="#" class="sh">devam/normal bağlantı</a> 
          </div>
		  <div class="temizle"></div>
		  TABLO sitilli
		   <table id="tablo">
          <tr><th>Başlık 1</th><th>Başlık 2</th></tr>
          <tr class="cift"><td>yazı</td><td>yazı</td></tr>
          <tr><td>yazı</td><td>yazı</td></tr>
          <tr class="cift"><td>yazı</td><td>yazı</td></tr>
          </table>
		  TABLO stilisiz
		   <table>
          <tr><th>Başlık 1</th><th>Başlık 2</th></tr>
          <tr class="cift"><td>yazı</td><td>yazı</td></tr>
          <tr><td>yazı</td><td>yazı</td></tr>
          <tr class="cift"><td>yazı</td><td>yazı</td></tr>
          </table>
		  <div class="temizle"></div>
		  <div class="aralik"></div>
          <div class="icerik-ayrac">&nbsp;</div>
		  <div class="aralik"></div>
          Sağa dayalı resim. <img src="resim/kocaeli-simge.gif" class="alignright" alt="" />
          <div class="temizle"></div>
		  <div class="aralik"></div>
          <div class="icerik-ayrac">&nbsp;</div>
		  <div class="aralik"></div>
          <img src="resim/kocaeli-simge.gif" class="alignleft cizgi" alt="" />Sola dayalı resim. 
          <div class="temizle"></div>
		  </p>  
  

Alttaki gibi bir adres çubuğu eklemek için kodlar aşağıdadır.

  <div id="alt-menu-icerik">
    <p class="sol">Sol tarafa bir yazı</p>
    <p class="sag">&copy; Kocaeli Üniversitesi<br />
      Kocaeli Üniversitesi Umuttepe Yerleşkesi<br />
      41380, Kocaeli<br />
      Tel: +90 (262) 303 10 00 / Belgegeçer: +90 (262) 303 10 33 </p>
    <div class="temizle">&nbsp;</div>
  </div>  
  

Sol tarafa bir yazı

© Kocaeli Üniversitesi
Kocaeli Üniversitesi Umuttepe Yerleşkesi
41380, Kocaeli
Tel: +90 (262) 303 10 00 / Belgegeçer: +90 (262) 303 10 33

 

En alttaki menü her site için kullanılacak ve </body> etketinin hemen üstüne ekleyiniz.

  <!--Türkçe siteler için -->
						<script type="text/javascript" src="http://sitil.kocaeli.edu.tr/alt.js"></script>
						<!--İngilizce siteler için -->
						<script type="text/javascript" src="http://sitil.kocaeli.edu.tr/alt-int.js"></script>