dreamwear css menu yardım

Dreamweaver - dreamwear css menu yardım Sponsorlu Bağlantılar arkadaşlar dreamwearda acemiyim daha.bir tane css menü var bunu dreamwearda nasıl kullanabilirim? saatlerce uğraştım, araştırdım ama bir türlü beceremedim.yardımcı olabilirseniz çok sevinirim....

Cevapla
dreamwear css menu yardım
cemkalan isimli Üye şimdilik offline konumundadır

cemkalan

Hiç Biri / İstanbul

Standart

dreamwear css menu yardım

Alt 09-06-2009 #1
Sponsorlu Bağlantılar

arkadaşlar dreamwearda acemiyim daha.bir tane css menü var bunu dreamwearda nasıl kullanabilirim? saatlerce uğraştım, araştırdım ama bir türlü beceremedim.yardımcı olabilirseniz çok sevinirim.
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

ahwet1 isimli Üye şimdilik offline konumundadır

ahwet1(28)

Öğrenci (Diğer) / İstanbul

Standart
Alt 20-07-2009 #2
                             Sponsorlu Bağlantılar
dreamweaver da çok yeni ise sana tavsiyem ilk önce programın nasıl çalıştığını kavra. yani programı öğren ilk önce, sonra da üerinde css menu gübü uygulamaları incele değiştir güncelle vs.
Bu mesajdan alıntı yap
Ali Emre isimli Üye şimdilik offline konumundadır

Ali Emre(27)

Webmaster / İzmir

Standart
Alt 20-07-2009 #3
Css menü hazırlamak için Dreamweaver programından ziyade eğer hakim değilseniz css ve html kodlarını öğrenin.Çünkü DW bir araçtır.KOdları biliyosanız basit bir editörle bile menü hazırlarsınız.

1.Adım Başlangıç olarak her zamanki gibi XHTML kodumuzu yazalım:

<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Haberler</a></li>
<li><a href="#">Ürünler</a></li>
</ul>

Tekniğin özeti şu menü oluşturmak için hazırlanan XHTML kodunda sırasız listeler(li) bir zemin resmi(sekme_sag_resim.gif) ve link elementine(a) bir zemin resmi(sekme_sol_resim.gif) atayarak esneklik sağlamak.

2. Adım Daha önceki menü örneklerinden de alışkın olduğumuz margin,padding ve liste imgelerini kaldırma işlemini yapalım:

ul {
margin: 0;
padding: 0;
list-style: none;
width: 600px;
float: left;
border-bottom: 1px solid gray;
}

3. Adım Yukarıda bahsettiğimiz metodu uygulamak için iki adet resim hazırlamalıyız.

dreamwear css menu yardım dreamwear css menu yardım

Bu resimlerin yüksekliklerinin uzun olmasının nedeni font boyutunun arttırılması(yakınlaştırma) durumunda iki satır olabilecek menülerde menü görünümünün bozulmaması içindir.

4. Adım Menüyü yatayda sıralamak için float:left tanımlaması yapıyoruz ve sağ zemin resmini(sekme_sag_resim.gif) uyguluyoruz:

ul li {
float: left;
background: url(images/sekme_sag_resim.gif) no-repeat top right;
}

5. Adım Daha önceki örneklerde gördüğümüz gibi tüm sekmeye link vermek için display:block tanımlaması yapıyoruz, sekmenin sol kısmını tamamlamak için zemin resmi olarak(sekme_sol_resim.gif) ekliyoruz, tüm sekmelerde aynı yüksekliği yakalamak için line-height tanımlamasını yapıyoruz, text-decoration: none ile link alt çizgilerini kaldırıyoruz ve IE Mac ortamında sorun çıkarmaması için float:left ekliyoruz:

<ol>
li a {
background:url(images/sekme_sol_resim.gif) no-repeat left top;
display: block;
padding: 0 2em;
line-height: 2.5em;
text-decoration: none;
float: left;
color:#000;
}

6. Adım Güzel bir görünüm katmak için basit bir rollover efekti verelim:

ul a:hover {
color: #9D9C9C;
}

Örnek Kodlar:
http://www.fatihhayrioglu.com/dokuma...kmeli_menu.zip

Fatih HAYRİOĞLU na teşekkür ederiz...
Bu mesajdan alıntı yap
Cevapla

Benzer Konular
Konu Konu Bilgileri Forum Cevaplar Son Mesaj
tea cup menu sLyman Kitap kapağı, broşür, menü vb. 16 26-03-2009 15:59:54
Flash Menu yardım edin bu gence :p zezak Flash 5 24-03-2009 15:27:00
menu tasarımı srknyzc81 Kitap kapağı, broşür, menü vb. 8 09-02-2008 00:04:03

Kapat
Şifremi Unuttum?