Dreamweaver'da Sıralanmamış Dizin Listesinden Gezinme Çubuğu Nasıl Oluşturulur - mankenler

İşte basit bir rollover efekti ile madde işaretli bir listeyi Dreamweaver'daki bir gezinme çubuğuna dönüştürmek için harika bir CSS hüneri. Gezinme çubukları için madde işaretli bir liste kullanmak, mevcut erişilebilirlik standartlarını karşılayan web siteleri için kabul gören bir kuraldır.

Kredi: istockphoto'nun fotoğrafları. com

Aynı bağlantılar sırasız listede yer alıyor ancak stillerin uygulanması görünümlerini önemli ölçüde değiştiriyor.

Kredi: Fotoğraflar istockphoto. com

Sırasız liste ve bağlantı etiketlerini yeniden tanımlamak için CSS'yi kullanarak bir gezinti çubuğu oluşturmak için şu adımları izleyin:

1. İmlecinizi sayfada gezinme çubuğunuzu oluşturmak istediğiniz yere yerleştirmek için tıklayın.

2. Bağlantı olarak sunulmak istediğiniz metni girin, paragraf iadesi oluşturmak için Geri veya Enter tuşuna basarak ayırın.

   Bağlantıları sırasız bir liste olarak biçimlendirmek için, bağlamak istediğiniz her metin satırını

   etiketi ile ayırın.

3. Sırayla her bir metin parçası seçerek, Ortak Ekle panelinde Köprü simgesini tıklatarak ve ardından bağlantı kurmak istediğiniz sayfayı seçerek veya bir URL girerek bağlantı oluşturun.

4. Bağlantıların tamamını seçmek için sürükleyin ve sonra Özellik denetçisindeki Sırasız Liste simgesini tıklatın.

   Her bağın başında bir madde işareti görünür. Herhangi bir bağlantı ayrı bir madde işaretiyle belirlenmemişse, önce bağlantı ile bağlantı arasındaki boşluğu silmek için tıklatın ve bağlantıları bir paragraf dönüşüyle ​​ayırmak için Geri Dön ya da Enter tuşuna basın.

   

5. Bir bağlantı listesi (veya bir sayfada zaten bulunan diğer içerikler) arasında bir etiket eklemek için, içeriği seçin ve Ortak Ekle panelinde Div simgesini tıklatın.

   Div Ekle iletişim kutusu açılır.

   Biçimlendirmeyi eklemek isterseniz, sırasız bağlantı listesine bir etiket ekleme yardımcı olur.

6. Ekle açılır listesinden Seçim Yakınında Sargı'yı seçin.

   Yeni bir etiket eklediğiniz yerin daha hassas kontrolü için, Insert Div diyalog kutusunun üstündeki Ekle açılır listesinden seçenekleri seçebilirsiniz.

   

7. Sınıf alanına veya kimlik alanına bir ad girin.

   Girdiğiniz sınıf veya kimlik adıyla bir etiket otomatik olarak bağlantı listesinin çevresindeki sayfaya eklenir.

8. Div Bölmesini Ekle iletişim kutusunun altındaki Yeni CSS Kuralı düğmesini tıklayın.

   Yeni CSS kural adı, CSS Tasarımcısı Seçici panelindeki stil adları listesine eklenir.

9. Özellikler panelinde, renk, arka plan, boyut, kenar boşlukları ve dolgu için istediğiniz ayarları belirtin.

   Stil biçimlendirme etiketi içeriğine otomatik olarak uygulanır çünkü stil 5-7. Adımlarda oluşturduğunuzda uygulanır.

10. Sırasız listeyi yalnızca gezinme çubuğunda kullanıldığında biçimlendirecek bir bileşik stil oluşturmak için, sınıf adını içeren bileşik bir stil oluşturun. navbar:

    1. İmlecinizi madde işaretli listenin herhangi bir yerine yerleştirin.

    2. Seçiciler panelinin üstündeki artı işaretini (+) tıklayın.

    3. Seçici Adı alanında, Dreamweaver uygulamasının otomatik olarak girildiğinden emin olun. Seçiciler panelinde yeni stil adı olarak navbar ul.

    4. Özellikler panelinde kenar boşluklarını ve dolguyu 0 olarak ayarlayın.

11. Liste etiketi etiketlerini yeniden tanımlamak için bileşik bir stil oluşturun:

    1. İmlecinizi madde işaretli listenin herhangi bir yerine yerleştirin.

    2. Seçiciler panelinin üst kısmındaki artı işaretini tıklayın.

    3. Seçici Adı alanında, Dreamweaver uygulamasının otomatik olarak girildiğinden emin olun. Seçiciler panelinde yeni stil adı olarak navbar ul li.

    4. Özellikler panelinde Görüntüyü Satır İçi Düzey olarak ayarlayın.

    5. Madde işaretini kaldırmak için Liste Stili Türünü Yok olarak değiştirin.

    6. Sol ve sağ kenar boşluklarını 20 piksele ayarlayın.

       Bu adım, liste öğelerini yatay listede birbirinden ayırır. Tasarımınızı, tasarımınıza en uygun bağlantılar arasındaki boşluk miktarını oluşturmak üzere değiştirebilirsiniz.

12. Bağlantı etiketini yeniden tanımlamak için bir stil oluşturun:

    1. İmlecinizi navbar'daki bir bağlantıya yerleştirmek için tıklayın.

    2. Seçiciler panelinin üst kısmındaki artı işaretini tıklayın.

    3. Stil adını değiştirmek isterseniz, Seçici panelindeki ada çift tıklayın ve kullanmak istediğiniz adı girin.

    4. Özellikler panelinin Metin bölümünde, Metin Dekorasyonunu Yok olarak ayarlayın.

    5. Halen Metin bölümünde, sayfalara yüklendiğinde bağlantıların rengini belirlemek için renk kuyusundan bir renk seçin.

13. Bir kullanıcı imleci bağlantıya getirdiğinde bağlantı renginin değişmesi için fareyle üzerine gelme etiketini yeniden tanımlamak için yeni bir stil oluşturun:

    1. Seçiciler panelinin üst kısmındaki artı işaretini tıklayın.

    2. Seçici Adı alanına şunu girin: navbar a: gezinme.

    3. Özellikler panelinin Metin bölümünde, Metin Dekorasyonunu Yok olarak ayarlayın.

    4. Metin bölümünde, kullanıcılar imlecini bağlantı üzerine getirdiğinde bağlantı rengini belirtmek için renk kuyusundan bir renk seçin.

14. Bir kullanıcı bir bağlantıyı tıklattıktan sonra bağlantı rengi değişecek şekilde ziyaret edilen bağlantı etiketini yeniden tanımlamak için yeni bir stil oluşturun:

    1. Seçiciler panelinin üst kısmındaki artı işaretini tıklayın.

    2. Seçici Adı alanına şunu girin: navbar a: ziyaret edildi.

    3. Özellikler panelinin Metin bölümünde, Metin Dekorasyonunu Yok olarak ayarlayın.

    4. Metin bölümünde, ziyaretten sonra bağlantı rengini belirtmek için renk kuyusundan bir renk seçin.

15. Bağlantı stillerinin etkisini görmek için sayfayı bir tarayıcıda görüntülemek için çalışma alanının üst kısmındaki Canlı düğmeyi tıklatın veya Önizleme düğmesini tıklatın.