Stil sayfaları, ortam sorguları, seçiciler oluşturmak veya eklemek ve CSS özelliklerini ayarlamak için CSS Tasarımcısı panelini kullanmayı öğrenin.
CSS Designer paneli (Pencere > CSS Designer), ortam sorgularıyla birlikte 'görsel olarak' CSS stilleri, dosyalar, kurallar ve ayarlı özellikler oluşturmanıza olanak sağlayan bir CSS Özellik Denetimi'dir.
Aşağıdaki bölümler CSS Designer arabiriminde kullanılabilir:
CSS Designer'ı kullanarak bir CSS stil sayfasındaki kuralları ayrı ayrı düzenleyebilir (CSS Designer'da Geçerli sekmesini kullanın) veya isterseniz doğrudan CSS stil sayfasında çalışabilirsiniz (CSS Designer'da Tümü sekmesini kullanın).
CSS Tasarımcısı panelinin Kaynaklar bölmesinde 
öğesini tıklatın ve şu seçeneklerden birini tıklatın:
Belirlediğiniz seçeneğe bağlı olarak Yeni Bir CSS Dosyası Oluştur veya Varolan CSS Dosyasını Ekle iletişim kutusu görüntülenir.
CSS dosyasının adını ve bir CSS oluşturuyorsanız, yeni dosyanın kaydedileceği konumu belirtmek için Gözat'ı tıklatın.
Aşağıdakilerden birini yapın:
(İsteğe Bağlı) Koşullu Kullanım'ı tıklatın ve CSS dosyasıyla ilişkilendirmek istediğiniz ortam sorgusunu belirtin.
CSS Tasarımcısı panelinde, Kaynaklar bölmesinde bir CSS Kaynağını tıklatın.
Yeni bir ortam sorgusu eklemek için @Ortam bölmesinde 
öğesini tıklatın.
Ortam Sorgusu Tanımla iletişim kutusu görüntülenir ve Dreamweaver tarafından desteklenen tüm ortam sorgusu koşullarını listeler.
Gereksinimlerinize göre Koşullar'ı seçin.
Seçtiğiniz tüm koşullar için geçerli değerler belirttiğinizden emin olun. Aksi takdirde, ilgili ortam sorguları başarıyla oluşturulmaz.
Birden çok koşul için yalnızca “Ve” işlemi desteklenir.
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 Tasarımcısı panelinde, Kaynaklar bölmesinde bir CSS kaynağı veya @Ortam bölmesinde bir ortam sorgusu seçin.
Seçiciler bölmesinde öğesini tıklatın. Belgede seçili olan öğeye bağlı olarak CSS Tasarımcısı, ilgili seçiciyi akıllıca tanımlar ve bunun için size istem görüntüler (en fazla üç kurala kadar).
Aşağıdakilerden birini veya daha fazlasını yapabilirsiniz:
Not: Ortam Sorgusunda Çoğalt seçeneği yalnızca, seçili Seçici kaynağında ortam sorgusu bulunuyorsa kullanılabilir. Bir kaynaktaki Seçiciyi başka bir kaynağa ait bir ortam sorgusunda çoğaltamazsınız.
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:
Gerekli seçiciyi tıklatın ve Seçiciler bölmesiyle yeni konumuna sürükleyin.
Özellikler şu kategoriler halinde gruplandırılır ve Özellikler bölmesinin üst kısmında farklı simgelerle temsil edilir:
CSS Seçicisi'nin özelliklerini düzenlemeden önce, CSS Seçicisi ile ilişkili öğeleri Ters İnceleme kullanarak tanımlayın. Bunu yaparak, Ters İnceleme sırasında vurgulanan tüm öğelerin gerçekten değişiklik gerektirip gerektirmediğini değerlendirebilirsiniz.
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.
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 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.
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ı kullanarak CSS seçicileri ve özellikleri ekleyebilir ya da silebilirsiniz. Özellikler bölmesinde özellik grupları arasında da gezinebilirsiniz.
|
Kısayol |
İş Akışı |
|
CTRL + Alt +[Shift =] |
Seçici ekler (Kontrol seçici bölümündeyse) |
|
CTRL + Alt+ S |
Seçici ekler (Kontrol uygulamada herhangi bir konumdaysa) |
|
CTRL + Alt +[Shift =] |
Özellik ekler (Kontrol özellik bölümündeyse) |
|
CTRL + Alt+ P |
Özellik ekler (Kontrol uygulamada herhangi bir konumdaysa) |
|
Öğeyi seçin + Delete |
Seçici seçili durumdaysa onu siler |
|
CTRL + Alt + (PgUp/PgDn) |
Özellikler alt panelindeyken bölümler arasında atlar |
Ç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ı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.
Aşağıdakilerden birini yaparak CSS Designer'ı açın:
CSS Designer'da, Kaynaklar'ın yanındaki + simgesini tıklatın ve Varolan CSS Dosyasını Ekle'yi seçin.
Aşağıdakilerden birini yapın:
Stil sayfasının istediğiniz stili geçerli sayfaya uyguladığını doğrulamak için Önizleme düğmesini tıklatın.
Stiller beklediğiniz şekilde değilse stil sayfasını kaldırmak için İptal'i tıklatın. Sayfa önceki görünümüne döner.
Tamam'ı tıklatın.
