Bu bölümde tasarımımıza son şeklini vereceğiz.

Adım 1. Style.css belgemize aşağıdaki kodu ekleyelim :

h2 {
font-size:20px;
color:#333333;
font-weight:bold;
}

böylece h2 tanımımızı yaptık. Örneğin sayfamıza yazdığımız şiirin başlığını

<h2>Hürriyete Doğru</h2>

şeklinde yaparsak görünümü tanımladığımız boy, boyut ve fontta olacaktır. Benzer şekilde tanımlamalar yapabilirsiniz.

Adım 2. Sayfa linklerini tasarımımıza ekleyelim. İndex.html belgesinde <div id=”linkmenu”> ifadesinin altına şu kodları ekleyin;

<a href="#">Ana sayfa</a>
<a href="#">Hakkında</a>
<a href="#">Dersler</a>
<a href="#">Forum</a>
<a href="#">İletişim</a

not: # işareti yerine ilgili sayfaların linklerini yazılacak.

Adım 3. CSS belgemize şu kodları ekleyelim;

#linkmenu a {
padding-top:15px;
padding-left:15px;
padding-right:15px;
height:27px;
float:left;
text-decoration:none;
color:#FFFFFF;
font-weight:bold;
font-size:14px;
margin-top:1px;
}

Adım 4. Ve son olarak da sayfa linkleri için efekt ekleyelim. Css belgemize aşağıdaki kodu yazarak

tasarım işimizi noktalıyoruz.

#linkmenu a:hover {
background-image:url(resimler/efekt.png);
}
Dört bölümlük çalışmamızın neticesi :



EKLEME : aktif sayfayı belirtmek için pek çok yöntem kullanılabilir. Ben bu yöntemlerden
birini kısaca açıklayayım ;

index.html belgemizde sayfa linklerinin bulunduğu yeri şu şekilde değiştirin (adım 2 yerine) :

<a href="index.html" id="anaaktif">Ana sayfa</a>
<a href="hakkinda.html" id="hakaktif">Hakkında</a>
<a href="dersler.html" id="dersaktif">Dersler</a>
<a href="#">Forum</a>
<a href="#">İletişim</a

burada eğer henüz sayfa oluşturmadıysanız link yerine “#” koymak daha doğru olur.
Örnek olması için Forum ve İletişim sayfası için böyle bir gösterimde bulundum.
Daha sonra css belgemizde efekt özelliğinin tanımladığı yerdeki kodu şu şekle
getirin (adım 4 yerine) :

#linkmenu a:hover {
background-image:url(resimler/efekt.png);
}
body#home a#anaaktif,
body#hakkinda a#hakaktif,
body#ders a#dersaktif {
background-image:url(resimler/efekt.png);
}

gördüğünüz gibi aktif sayfa gösteriminde de efekt.png resmini kullandım. İsterseniz farklı
resimler kullanabilirsiniz.

Hepsi bu kadar. Yazması uzun uygulaması kolay. Vakit ayırıp emek harcayarak oluşturduğum
bu yazı dizisi umarım Gimp'e meraklı pek çok arkadaşın işine yarar.

                                                             Şaban KUŞ (ivme)
                                                             GimpTR yazarı

not: artık söz sizde çalışmalarınızı forumda görmek isteriz.
çalışmamızın sonucunu buradan inceleyebilirsiniz.