Adobe Dreamweaver Cs3′de Yatay Menü Oluşturma

ADOBE DREAMWEAVER CS3 YATAY MENÜ OLUŞTURMA

Yatay menü oluşturmak için;

1)Her bir menü elemanını bir satıra gelecek şekilde yazmaya başlayalım.


2)Sırasız listemizi oluşturduktan sonra her bir menü elemanımıza bir bağlantı vermemiz gereklidir.

Not: Bağ verirken ana sayfayı seçip bağ kısmına index.hml .

Hakkımızda yı seçip hakkımızda.html açılmasına sağlamış oluruz . Hepsini bu şekilde yapmalıyız.


3)Herhangi bir metin elemanını tıklıyoruz ve etiket bloğundan <ul> etiketini seçiyoruz.<ul> etiketini biçimlendirmek için iki şey yapıyoruz Bunlardan bir tanesi sırasız liste yani <ul> etiketinin sol kısmındaki var sayılan boşlukları kaldırmak. Bir diğeri ise her bir menü elemanının liste simgelerini kaldırmaktır.

4)Şimdi box kategorisine gelip ve padding değerine top:0 margin değerine top:0 yazıyoruz.

 

5)Son olarak list katogarisine geliyoruz ve list-style-type seçeneğinden none işaretliyoruz.


Bu şekilde <ul> etiketini biçimlendirmesini bitiriyoruz.

6)Şimdi yine herhangi bir menü elemanının üzerine tıklıyoruz ve etiket bloğunda <a> etiketini seçiyoruz.

7)Yeni css oluştur düğmesine gelinir ve okey düğmesine tıklanır.

8)Burada block kategorisinden display yani görünümü block olarak işaretlemeliyiz.


9)Box katogarisine geliyoruz ve with=150 height=30px yazıyoruz


10)Menü elemanlarını yan yana almak için float seçeneğinden left tıklanır ve yatay menümüz tamamlanmış olur.


11)Background gelip colordan bir renk veririz ve apply tıklanır.


12)Type kategorisine gelip color seçeneğinden yazı rengini değiştirmiş oluruz.


13)Font-weight den bold ayarlarız ve apply tıklıyoruz.


14)Text-decoration bölümünden none işaretliyoruz böylelikle menü elemanlarının alt çizgilerini kaldırmış oluruz.


15)Menü elemanlarının hizalanması için text-align seçiyoruz ve orada center tıklamalıyız.


16)Dikeyde hizalanması için box yüksekliği ile satır yüksekliği aynı olması gerekir bunun için type kategorisine geliyoruz ve line-height:30 px veriyoruz.


17)Box kategorisine geliyoruz ve margin boşluk değerini değiştireceğiz.Her bir menü elemanın sağına 5 px ekliyoruz ve ok düğmesine tıklıyoruz.


18)Dosya menüsünden kaydet tıklanır ve dosya adı index olarak kaydedilir. F12 ye basılarak sayfa test edilir.


19)Duplicate seçeneğini işaretliyoruz ve burada selector name yani seçici isminden sonra boşluk bırakmadan :hover yazıyoruz ve ok diyoruz. Bu şekilde yeni bir css oluşturmuş oluyoruz


20)Şimdi bu yeni eklenen biçimlendirmeyi çift tıklarız ve yapılmasını istediğimiz değişiklikleri yaparız.

Bu şekilde yatay menümüzü tamamlamış oluruz.


KODU

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>UntitledDocument</title>

<link href=”../Desktop/anasayfa.css” rel=”stylesheet” type=”text/css” />

</head>

 

<body>

<ul>

<li><a href=”index.html”>Ana Sayfa</a></li>

<li><a href=”hakk&#305;m&#305;zda.html”>Hakk&#305;m&#305;zda</a></li>

<li><a href=”&uuml;r&uuml;nlerimiz.html”>&Uuml;r&uuml;nlerimiz</a></li>

<li><a href=”servislerimiz.html”>Servislerimiz</a></li>

<li><a href=”ileti&#351;im.html”>Bize Ula&#351;&#305;n </a></li>

</ul>

 

</body>

</html>

 

 

Anasayfa.ccs Kodları

ul{

    margin: 0px;

    padding: 0px;

    list-style-type: none;

}

a {

    text-decoration: none;

    color: #FFFFFF;

    background-color: #000000;

    display: block;

    height: 30px;

    width: 100px;

    line-height: 30px;

}

li {

    float: left;

    margin-top: 0px;

    margin-right: 5px;

    margin-bottom: 0px;

    margin-left: 0px;

}

a:hover {

    color: #FFFFFF;

    background-color: #990000;

}

A/11-A SINIFINDAN TUĞÇE BARDAKÇI TARAFINDAN HAZIRLANMIŞTIR..

Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>