CSS Tasarımcısı'nı kullanarak sayfa mizanpajını yapma

Ortam sorgularını tanımlama

Kod aracılığıyla ortam sorgusu koşulları eklerseniz, Ortam Sorgusu Tanımla iletişim kutusunda yalnızca desteklenen koşullar doldurulur. Ancak iletişim kutusundaki Kod metin kutusu tamamen (desteklenmeyen koşullar dahil) görüntülenir.

Tasarım/Canlı görünümünde bir ortam sorgusunu tıklatırsanız görüntü kapısı seçili ortam sorgusuna uyacak şekilde değişir. Tam boyutlu görüntü kapısını görüntülemek için @Ortam bölmesinde Global seçeneğini tıklatın.

CSS Seçicileri tanımlama

Stilleri kopyalama ve yapıştırma

Stilleri artık bir seçiciden kopyalayıp bir başkasına yapıştırabilirsiniz. Tüm stilleri veya yalnızca Mizanpaj, Metin ve Kenarlık gibi belirli bir stil kategorisini kopyalayabilirsiniz. 

Bir seçiciyi sağ tıklatın ve kullanılabilir seçeneklerden birini belirleyin:

Seçicileri yeniden düzenleme

Gerekli seçiciyi tıklatın ve Seçiciler bölmesiyle yeni konumuna sürükleyin.

CSS özelliklerini ayarlama

Özellikler şu kategoriler halinde gruplandırılır ve Özellikler bölmesinin üst kısmında farklı simgelerle temsil edilir:

• Mizanpaj
• Metin
• Kenarlık
• Arka Plan
• Daha fazla (görsel denetimlerle birlikte “salt metin” özellikleri ve “salt metin” olmayan özellikler listesi)
  

Yalnızca ayarlı özellikleri görüntülemek için Ayarlı Olanları Göster onay kutusunu seçin. Bir seçici için belirtebileceğiniz tüm özellikleri görüntülemek için Ayarlı Olanları Göster onay kutusunun seçimini kaldırın.

width veya border-collapse gibi bir özellik ayarlamak için Özellikler bölmesinde özelliğin bitişiğinde görüntülenen gerekli seçenekleri tıklatın.

Geçersiz kılınan özellikler, üstü çizili formatta gösterilir.

Kenar boşluklarını, dolguyu ve konumu ayarlama

CSS Tasarımcısı'nın Özellikler bölmesindeki kutu kontrollerini kullanarak hızlı şekilde kenar boşlukları, dolgu ve konum özelliklerini ayarlayabilirsiniz. Bu örnekte olduğu gibi, kod kullanmayı tercih ediyorsanız hızlı düzenleme kutularında kenar boşluğu ve dolgu için steno kodları belirleyebilirsiniz.

Değerleri tıklatın ve gerekli değeri yazın. Dört değerin de aynı olmasını ve eşzamanlı değiştirilmesini istiyorsanız ortadaki bağ simgesini tıklatın.

Herhangi bir anda, sağ, üst ve alt değerleri korurken örneğin, sol kenar boşluğu değeri gibi belirli değerleri devre dışı bırakabilir veya silebilirsiniz.

Kenarlık özelliklerini ayarlama

Kenarlık Kontrolü özellikleri mantıksal sekmeler halinde düzenlenir, böylece özellikleri hızla görüntüleyebilir ve değiştirebilirsiniz. 

Kod kullanmayı tercih ediyorsanız hızlı düzenleme metin kutularında kenar boşlukları ve kenarlık yarıçapı için steno kodları belirleyebilirsiniz.

Kenarlık Kontrolü özelliklerini belirlemek için, öncelikle “Tüm Kenarlar” sekmesinde özellikleri ayarlayın. Ardından diğer sekmeler etkinleşir ve “Tüm Kenarlar” sekmesinde ayarlanan özellikler tek tek kenarlıklara yansıtılır.

Tek bir kenarlık sekmesindeki bir özelliği değiştirdiğinizde, “Tüm Kenarlar” sekmesindeki karşılık gelen özelliğin değeri “tanımlanmamış” (varsayılan değer) olarak değişir. 

Aşağıdaki örnekte Üst kenarlığa ait kenarlık rengi önce siyaha ayarlanmış ve ardından kırmızı olacak şekilde değiştirilmiştir. 

Eklenen kod, steno veya uzun forma yönelik yapılan tercih ayarına göre belirlenir. 

İnceleme sırasında sekmeler, “ayarlanan” sekmelerin önceliğine bağlı olarak odaklanırlar. En yüksek öncelik “Tüm kenarlar” sekmesindedir ve ardından “Üst”, “Sağ”, “Alt” ve “Sol” gelir. Örneğin bir kenarlık için yalnızca üst değerin ayarlanması durumunda, hesaplanan mod odağı “Üst” sekmesine alarak “Tüm kenarlar” sekmesini yoksayar, çünkü “Tüm kenarlar” sekmesi ayarlanmamıştır.

Özellikleri devre dışı bırakma veya silme

CSS Özelliğini Etkinleştir/Devre Dışı Bırak özelliği, kodda doğrudan değişiklik yapmanıza gerek kalmadan CSS Tasarımcısı panelinden CSS bölümlerini yorum satırına çevirmenize olanak sağlar. CSS bölümlerini yorum satırına çevirdiğinizde, belirli özelliklerin ve değerlerin sayfanız üzerinde ne tür etkileri olduğunu görebilirsiniz.

Bir CSS özelliğini devre dışı bıraktığınızda, Dreamweaver, devre dışı bıraktığınız CSS özelliğine CSS yorum etiketleri ve bir [disabled] etiketi ekler. Devre dışı bırakılan CSS özelliğini kolayca tercihinize göre yeniden etkinleştirebilir veya silebilirsiniz.

CSS Designer'ı kullanarak her özelliği devre dışı bırakabilir veya silebilirsiniz.

Aşağıdaki ekran görüntüsü, height özelliği için devre dışı bırak ve sil simgelerini gösterir. Özelliğin üzerine fareyi getirdiğinizde bu simgeler görünür olur.

Ayrıca silme ve devre dışı bırakma kontrollerini Kenarlık Kontrolü grubu düzeyinde kullanarak bu eylemleri tüm özelliklere de uygulayabilirsiniz.

Klavye kısayolları

Klavye kısayolları kullanarak CSS seçicileri ve özellikleri ekleyebilir ya da silebilirsiniz. Özellikler bölmesinde özellik grupları arasında da gezinebilirsiniz.  

CSS Seçicisi ile ilişkili sayfa öğelerini tanımlama

Çoğunlukla, tek bir CSS Seçicisi birden fazla sayfa öğesi ile ilişkilidir. Örneğin bir sayfanın ana içeriğindeki metin ve üstbilgi ile altbilgi metninin tamamı aynı CSS Seçicisi ile ilişkilendirilebilir. CSS Seçicisinin özelliklerini düzenlediğinizde, Seçici ile ilişkili tüm öğeler etkilenir (değiştirmek istemedikleriniz de dahil).

Canlı Vurgulama, CSS Seçicisi ile ilişkili tüm öğeleri tanımlamanıza yardımcı olur. Yalnızca bir öğeyi veya birkaç öğeyi değiştirmek istiyorsanız, söz konusu öğeler için yeni bir CSS Seçicisi oluşturup ardından özellikleri düzenleyebilirsiniz.

CSS Seçicisi ile ilişkili sayfa öğelerini tanımlamak için, Canlı Görünüm'de (Canlı Kod “kapalıyken”) farenizi Seçicinin üzerine getirin. Dreamweaver, ilişkili öğeleri noktalı çizgilerle vurgular.

Öğeleri vurgu ile çevirmek üzere Seçiciyi tıklatın. Bu durumda öğeler mavi bir kenarlıkla vurgulanır.

Öğelerin etrafındaki mavi vurguyu kaldırmak için Seçiciyi tekrar tıklatın.

Canlı Vurgulama varsayılan olarak etkindir. Canlı Vurgulamayı devre dışı bırakmak için Belge Araç Çubuğunda Canlı Görünüm seçeneklerini tıklatın ve Canlı Vurgulamayı Devre Dışı Bırak seçeneğini tıklatın. 

Harici CSS stil sayfasına bağ oluşturma

Harici CSS stil sayfasını düzenlerken, o CSS stil sayfasına bağlı tüm belgeler düzenlemeleri yansıtmak için güncelleştirilir.

Belgede bulunan CSS stillerini yeni bir CSS stil sayfası oluşturmak için dışa aktarabilirsiniz ve harici stil sayfasındaki stilleri uygulamak için bu sayfayı ekleyebilir veya sayfaya bağ oluşturabilirsiniz.

Oluşturduğunuz ya da sitenize kopyaladığınız tüm stil sayfalarını sitenizin sayfalarına ekleyebilirsiniz.