Kullanıcı Kılavuzu İptal

Div etiketleriyle çalışma

Ara

Son güncelleme: 21 May 2021

Bu div etiketlerini içerik bloklarını ortalamak, sütun etkisi oluşturmak, farklı renk alanları oluşturmak ve daha fazlasını yapmak için kullanmayı öğrenin.

Sayfa mizanpajlarını, el ile div etiketleri ekleyip, bunlara CSS konumlandırma stilleri uygulayarak oluşturabilirsiniz. Bir div etiketi, web sayfasının içeriğindeki mantıksal bölümleri tanımlayan etikettir. Bu div etiketlerini içerik bloklarını ortalamak, sütun etkisi oluşturmak, farklı renk alanları oluşturmak ve çok daha fazlasını yapmak için kullanabilirsiniz.

div etiketleri ve Cascading Style Sheets (CSS) kullanarak web sayfası oluşturma hakkında bilginiz yoksa, Dreamweaver uygulamasıyla birlikte gelen hazır mizanpajlardan birini temel alarak bir CSS mizanpajı oluşturabilirsiniz. CSS ile çalışırken çok rahat değilseniz ancak tablo kullanma hakkında bilginiz varsa, tablo kullanmayı da deneyebilirsiniz.

Div etiketleri ekleme

CSS mizanpajları oluşturmak ve bunları belgenizde konumlandırmak için div etiketlerini kullanabilirsiniz. Konumlandırma stilleri belgenize eklenmiş bir CSS stil sayfanız varsa bu kullanışlıdır. Dreamweaver uygulaması hızla div etiketi eklemenizi ve bu etikete stil uygulamanızı sağlar.

Belge penceresinde, ekleme noktasını div etiketinin görünmesini istediğiniz yere yerleştirin.
Aşağıdakilerden birini yapın:
- Ekle > HTML > Div'i seçin.
- Ekle panelinin HTML kategorisinde Div'i tıklatın.
Aşağıdaki seçeneklerden birini belirleyin:

Ekle

div etiketinin konumunu ve yeni bir etiket değilse, etiket adını seçmenizi sağlar.

Sınıf

Etikete uygulanmış olan sınıf stilini görüntüler. Stil sayfası eklediyseniz, o stil sayfasında tanımlı sınıflar listede görünür. Etikete uygulamak istediğiniz stili seçmek için bu açılır menüyü kullanın.

Kimlik

div etiketini tanımlamak için kullanılan adı değiştirmenizi sağlar. Stil sayfası eklediyseniz, o stil sayfasında tanımlı kimlikler listede görünür. Belgenizde bulunan blok kimlikleri listelenmez.

Not:

Dreamweaver, belgenize aynı kimliği başka bir etiket olarak girerseniz sizi uyarır.

Yeni CSS Kuralı

Yeni CSS Kuralı iletişim kutusunu açar.
Tamam'ı tıklatın.

div etiketi belgenizde yer tutucu metin içeren bir kutu olarak görüntülenir. İşaretçiyi kutunun kenarına taşıdığınızda Dreamweaver kutuyu vurgular.

Div etiketi mutlak şekilde konumlandırılmışsa AP öğesine dönüşür. (Mutlak şekilde konumlandırılmamış div etiketlerini düzenleyebilirsiniz.)

div etiketlerini düzenleme

Bir div etiketi ekledikten sonra bunu değiştirebilir veya buna içerik ekleyebilirsiniz.

Not:

Mutlak şekilde konumlandırılmış div etiketleri AP öğelerine dönüşür.

div etiketlerine kenarlık eklediğinizde veya CSS Mizanpajı Anahatları'nı seçtiyseniz, kenarlıkları görünür. (Görünüm > Görsel Yardımlar menüsünde CSS Mizanpajı Anahatları varsayılan olarak seçilidir.) İşaretçiyi div etiketinin üzerine getirdiğinizde Dreamweaver etiketi vurgular. Vurgu rengini değiştirebilir veya vurgulamayı devre dışı bırakabilirsiniz.

Bir div etiketi seçtiğinizde, buna ilişkin kuralları CSS Tasarımcısı'nı kullanarak görüntüleyebilir ve düzenleyebilirsiniz. Ayrıca, ekleme noktasını div etiketinin içine yerleştirip sonra bir sayfaya eklediğiniz şekilde içerik ekleyerek de div etiketlerine kolayca içerik ekleyebilirsiniz.

div etiketini seçmek için aşağıdakilerden birini yapın:
- div etiketinin kenarlığını tıklatın.
Not:

Kenarlığı görmek için vurguya bakın.
- Bu div etiketinin içine tıklatın ve sonra Ctrl+A (Windows) ya da Command+A (Macintosh) tuşlarına iki defa basın.
- div etiketinin içine tıklatın ve sonra Belge penceresinin altındaki etiket seçiciden div etiketini seçin.
Açık değilse, CSS Tasarımcısı panelini açmak için Pencere > CSS Tasarımcısı'nı seçin.

Bu div etiketine uygulanan kurallar panelde görünür.
Gereken düzenlemeleri yapın.

Div etiketlerinin vurgulama rengini değiştirme

Tasarım görünümünde işaretçiyi div etiketinin kenarına getirirseniz Dreamweaver etiketin kenarlıklarını vurgular. Vurgulamayı gerektiği şekilde etkinleştirebilir ya da devre dışı bırakabilirsiniz ya da vurgu rengini Tercihler iletişim kutusunda değiştirebilirsiniz.

Düzen > Tercihler'i (Windows) veya Dreamweaver > Tercihler'i (Macintosh) seçin.
Soldaki kategori listesinden Vurgulama'yı seçin.
Aşağıdaki değişikliklerden herhangi birini yapın ve Tamam'ı tıklatın:
- div etiketlerinin vurgu rengini değiştirmek için Fare Üzerinde renk kutusunu tıklatın ve sonra renk seçiciyi kullanarak bir vurgu rengi seçin (ya da vurgu rengi için metin kutusuna on altılık bir değer girin).
- div etiketlerinin vurgulanmasını etkinleştirmek ya da devre dışı bırakmak için Fare Üzerinde'nin Göster onay kutusunu işaretleyin ya da işaretini kaldırın.
Not:

Bu seçenek, işaretçiyi üzerine getirdiğinizde Dreamweaver tarafından vurgulanan, örneğin tablolar gibi, tüm nesneleri etkiler.

CSS mizanpaj blokları

CSS mizanpaj bloklarını Tasarım görünümünde çalışırken görselleştirebilirsiniz. CSS mizanpaj bloğu, sayfanızda herhangi bir yere yerleştirebileceğiniz bir HTML sayfası öğesidir. Daha ayrıntılı olarak, CSS mizanpaj bloğu display:inline bildirimini içermeyen bir div etiketi ya da display:block, position:absolute veya position:relative CSS bildirimlerini içeren diğer herhangi bir sayfa öğesidir. Aşağıda, Dreamweaver uygulamasında CSS mizanpaj bloğu olarak kabul edilen öğelere birkaç örnek verilmiştir:

div etiketi
Kendisine atanmış mutlak ya da göreli bir konumu olan görüntü
Kendisine display:block stili atanmış bir a etiketi.
Kendisine atanmış mutlak ya da göreli bir konumu olan paragraf

Not:

Görüntü oluşturma amaçlı olarak, CSS mizanpaj blokları satır içi öğeleri (kodu bir metin satırının içine düşen öğeler) ya da paragraflar gibi basit blok öğeleri içermez.

Dreamweaver, CSS mizanpaj bloklarını görüntülemek için bir dizi görsel yardım sağlar. Örneğin tasarım sırasında CSS mizanpaj blokları için anahatları, arka planları ve kutu modelini etkinleştirebilirsiniz. Ayrıca, fare işaretçisini blokun üzerine getirdiğinizde seçili bir CSS mizanpaj bloğunun özelliklerini görüntüleyen araç ipuçları görüntüleyebilirsiniz.

Aşağıdaki CSS mizanpaj bloğu görsel yardımları listesi, Dreamweaver uygulamasının her biri için neleri görüntülediğini açıklar:

CSS Mizanpajı Anahatları

Sayfadaki tüm CSS mizanpaj bloklarının anahatlarını görüntüler.

CSS Mizanpajı Arka Planları

Ayrı ayrı CSS mizanpaj blokları için geçici olarak atanan arka plan renklerini görüntüler ve sayfada normalde görünecek diğer tüm arka plan renklerini ve görüntülerini gizler.

CSS mizanpaj bloğu arka planlarını görüntülemek için görsel yardımı her etkinleştirdiğinizde, Dreamweaver her CSS mizanpaj bloğuna otomatik olarak ayrı bir arka plan rengi atar. (Dreamweaver renkleri algoritmik bir işlem kullanarak seçer. Renkleri sizin atayabileceğiniz hiçbir yöntem yoktur.) Atanan renkler görsel olarak ayırt edilebilir ve CSS mizanpaj bloklarını birbirinden ayırmanıza yardımcı olacak şekilde tasarlanmıştır.

CSS Mizanpajı Kutu Modeli

Seçili CSS mizanpaj bloğunun kutu modelini (dolgularını ve kenar boşluklarını) görüntüler.

CSS mizanpaj bloklarını görüntüleme

CSS mizanpaj bloğu görsel yardımlarını gerektiği şekilde etkinleştirebilir veya devre dışı bırakabilirsiniz. Tüm CSS mizanpaj bloklarını görüntülemek için Görünüm > Tasarım Görünümü Seçenekleri > Görsel Yardımcılar'ı seçin.

CSS Mizanpajı Arka Planları'nı, CSS Mizanpajı Kutu Modeli'ni ve CSS Mizanpajı Anahatları'nı etkinleştirebilir veya devre dışı bırakabilirsiniz.

Benzer konular

Adobe

Daha hızlı ve daha kolay yardım alın

Yeni kullanıcı mısınız?