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:

  • 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 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ı paneli
CSS Tasarımcısı paneli


Stil sayfaları oluşturma ve ekleme

  1. 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
    CSS Tasarımcısı'nı kullanarak stil sayfaları oluşturma ve ekleme
    CSS Tasarımcısı'nı kullanarak stil sayfaları oluşturma ve ekleme

    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.

  2. 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.

  3. Aşağıdakilerden birini yapın:

    • Dreamweaver belgesini CSS dosyasıyla bağlamak için Bağ'ı tıklatın.
    • CSS dosyasını belgeye içe aktarmak için İçe Aktar'ı tıklatın.
  4. (İsteğe Bağlı) Koşullu Kullanım'ı tıklatın ve CSS dosyasıyla ilişkilendirmek istediğiniz ortam sorgusunu belirtin.

Ortam sorgularını tanımlama

  1. CSS Tasarımcısı panelinde, Kaynaklar bölmesinde bir CSS Kaynağını tıklatın.

  2. 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.

  3. Gereksinimlerinize göre Koşullar'ı seçin.

    Ortam sorguları tanımlama
    Ortam sorguları tanımlama

    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.

    Not:

    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 Seçicileri tanımlama

  1. CSS Tasarımcısı panelinde, Kaynaklar bölmesinde bir CSS kaynağı veya @Ortam bölmesinde bir ortam sorgusu seçin.

  2. 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 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:

  • 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.
Stilleri kopyalama ve yapıştırma
Stilleri kopyalama ve yapıştırma


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)

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.

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.

kenar boşluğu özelliği
Kenar boşluğu özelliği

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. 

Kenarlık kontrolü özellikleri
Kenarlık kontrolü özellikleri

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. 

Tüm kenarlar için kenarlık rengini ayarlama
Tüm kenarlar için kenarlık rengini ayarlama

Tüm kenarlarda kenarlık
Tüm kenarlarda kenarlık


Üst kenarlık rengini ayarlama
Üst kenarlık rengini ayarlama

Üst kenarlık rengi kırmızı olarak ayarlanmış
Üst kenarlık rengi kırmızı olarak ayarlanmış


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.

Özelliği devre dışı bırakma/silme
Özelliği devre dışı bırakma/silme

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.  

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 

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.

  1. Aşağıdakilerden birini yaparak CSS Designer'ı açın:

    • Pencere > CSS Designer'ı seçin.
    • Shift + F11 tuşlarına basın.
  2. CSS Designer'da, Kaynaklar'ın yanındaki + simgesini tıklatın ve Varolan CSS Dosyasını Ekle'yi seçin.

    Varolan CSS dosyasını ekle
    Varolan CSS dosyasını ekle

  3. Aşağıdakilerden birini yapın:

    • Harici CSS stil sayfanıza gitmek için Gözat'ı tıklatın.
    • Dosya/URL kutusuna stil sayfasının yolunu yazın.
  4. 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.

  5. Tamam'ı tıklatın.

Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

Yasal Uyarılar   |   Çevrimiçi Gizlilik İlkesi