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:
- Kaynaklar: Projeyle ilişkili CSS dosyaları koleksiyonu
- @Ortam: Ekran boyutunu denetlemek için ortam sorguları
- Seçiciler: @Ortam panelinde seçili ortam sorgusuyla ilişkili seçiciler
- Özellikler: Yalnızca ayarlı özellikleri gösterme seçeneği bulunan seçili seçici ile ilişkili özellikler
-
CSS Tasarımcısı panelinin Kaynaklar bölmesinde öğesini tıklatın ve şu seçeneklerden birini tıklatın:
- Yeni Bir CSS Dosyası Oluştur: Yeni bir CSS dosyası oluşturmak ve belgeye eklemek için
- Varolan CSS Dosyasını Ekle: Varolan bir CSS dosyasını belgeye eklemek için
- Sayfada Tanımla: Belge içinde bir CSS tanımlamak için
- Yeni Bir CSS Dosyası Oluştur: Yeni bir CSS dosyası oluşturmak ve belgeye eklemek için
-
-
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.
-
-
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:
- Önerilen seçiciyi yukarı veya aşağı ok tuşlarını kullanarak daha belirli veya daha az belirli yapın.
- Önerilen kuralı silin ve gerekli seçiciyi yazın. Seçici Türü için ifade ile birlikte seçicinin adını da yazdığınızdan emin olun. Örneğin, bir kimlik belirtiyorsanız, seçicinin adına “#” önekini ekleyin.
- Belirli bir seçiciyi aramak için bölmenin üst kısmındaki arama kutusunu kullanın.
- Bir seçiciyi yeniden adlandırmak için seçiciyi tıklatın ve gerekli adı yazın.
- Seçicileri yeniden düzenlemek için seçicileri gerekli konuma sürükleyin.
- Bir seçiciyi bir kaynaktan diğerine taşımak için seçiciyi Kaynak bölmesindeki gerekli kaynağa sürükleyin.
- Seçilen kaynaktaki bir seçiciyi çoğaltmak için seçiciyi sağ tıklatın ve Çoğalt'ı tıklatın.
- Bir seçiciyi çoğaltmak ve ortam sorgusuna eklemek için seçiciyi sağ tıklatın, fareyi Ortam Sorgusunda Çoğalt seçeneğinin üzerine getirin ve ardından ortam sorgusunu seçin.
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çicide hiç stil yoksa Kopyala ve Tüm Stilleri Kopyala seçenekleri devre dışı bırakılır.
- Düzenlenemeyen uzak siteler için Stilleri Yapıştır devre dışı bırakılır. Ancak, Kopyala ve Tümünü Kopyala stilleri kullanılabilir.
- Bir seçicide zaten kısmen var olan Stiller (Üst Üste Binme) yapıştırılabilir. Tüm
seçiciler birleştirilerek yapıştırılır.
- CSS dosyalarının İçe Aktar, Bağ, Satır İçi Stiller gibi farklı bağlantıları için de Stiller
kopyalanıp yapıştırılabilir.
Ö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)
Not:
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.
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.
İ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.
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.