Dreamweaver'da kod yorumları gibi kod öğelerinizin renklerini (kod renklendirmesini) özelleştirmeyi öğrenin.

Dreamweaver'da arabirim renk tercihlerinizi Düzen > Tercihler > Arabirim'i kullanarak değiştirebilirsiniz.

Dört farklı renk temasından tercih yapabilir ve açık veya koyu bir kod teması seçebilirsiniz. 

Renk ve kod temanızı ayarladıktan sonra Dreamweaver'da kod renklerinizi yerleşik main.less dosyasında seçicileri düzenleyerek daha da kişiselleştirebilirsiniz.

Dreamweaver CC 2017'de kod renklendirmesi hakkında

Dreamweaver CC 2017'de kod renklendirmesi main.less tema dosyasında bulunan seçiciler tarafından kontrol edilir.

Dreamweaver CC 2017'de kod renklendirmesini özelleştirmek için aşağıdakileri yapın:

  1. Dreamweaver'da varsayılan renk ve kod tema tercihlerinizi ayarlayın. 
  2. Mevcut bir kod temasını taban olarak kullanarak bir kod teması oluşturun.
  3. Yeni kod temasını düzenleyin.
  4. Değiştirmeniz gereken seçicileri ve diğer kod öğeleri üzerindeki etkisini anlayın.
  5. Main.less tema dosyasında seçicileri düzenleyin ve değişikliklerinizi kaydedin.

Renk temalarını ve kod temalarını ayarlama

Dreamweaver'ı başlattığınızda tercihlerinize göre bir renk teması seçebilirsiniz. Ayrıca bu tercihi istediğiniz zaman değiştirebilirsiniz.

  1. Düzen > Tercihler'i (Windows) veya Dreamweaver > Tercihler'i (Macintosh) seçin.

  2. Soldaki Kategori listesinden Arabirim'i seçin.

  3. Renk Temaları listesinden bir tema seçin. 

  4. Arabirim temasını ayarladıktan sonra kod temasını ayarlayın.

    Açık veya koyu bir kod teması seçebilirsiniz. Ardından, bu temayı yeni bir adla kaydedebilir ve daha fazla özelleştirebilirsiniz.

    Varsayılan kod temaları
    Varsayılan kod temaları

  5. Değişiklikleri kaydetmek için Uygula'yı tıklatın.

Kod temalarını özelleştirme

Bir kod teması seçtikten sonra, kod temasını yeni bir adla kaydederek ve düzenleyerek kod renklerini özelleştirin.

  1. Düzen > Tercihler'i (Windows) veya Dreamweaver > Tercihler'i (Macintosh) seçin.

  2. Açık veya koyu bir kod teması seçin, ardından artı simgesini tıklatın ve temayı yeni bir adla kaydedin.

    Not:

    Varsayılan açık ve koyu kod temaları düzenlenemez, bu nedenle değişiklikleri bu temanın bir kopyasında yapmanız gerekir. Oluşturduğunuz yeni temalar her zaman düzenlenebilir.

    Temayı kopyalama ve düzenleme
    Temayı kopyalama ve düzenleme

  3. Varsayılan kod temasını yeni bir adla kaydedin.

    Varsayılan bir kod temasından bir kod teması oluşturma
    Varsayılan bir kod temasından bir kod teması oluşturma

  4. Yeni oluşturulan kod temasını seçin ve Düzenle simgesini tıklatın.

    Main.less dosyası Dreamweaver'da açılır ve artık kod renklerinizi özelleştirmek için temada seçicileri düzenleyebilirsiniz.

    Main.less dosyasını kaydettiğinizde kod görünümü, yeni renklerle yenilenir.

Seçicileri anlama

Kod öğelerinin renklerini değiştirmek için main.less dosyasında seçicilerin özelliklerini düzenleyin.

Ancak, main.less dosyası içindeki seçicileri değiştirmeye başlamadan önce farklı seçicilerin ne anlama geldiğini ve etkiledikleri kod öğelerini anlamak önemlidir. Bu seçiciler tarafından etkilenen HTML, CSS, JavaScript ve PHP dosyalarındaki kod öğelerini anlamak için aşağıdaki tabloyu gözden geçirin.

Seçiciler HTML CSS JavaScript PHP
.cm-atom    gibi varlık adları Hex, rgb veya HSL formatında renkler, strong, none, auto, inherit vb. gibi önceden tanımlanmış nitelik değerleri. true, false, null, undefined, NaN, Infinity True, False, Null ve __LINE__, __DIR__, vb. sihirli sabitler
.cm-attribute  Nitelik Adı all, braille, print, screen vb. ortam türleri    
.cm-bracket <, >, /> ve </ gibi etiket parantezleri      
.cm-builtin    ID seçicileri   htmlspecialchars, trim, substr vb. yerleşik işlevler
.cm-comment  Yorum Yorum Yorum Yorumlar
.cm-def    “@ rule” değişken, işlev tanımı ve işlev parametresi  İşlev tanımında işlev adı 
.cm-error  Başlangıç etiketi olmayan kapatma etiketleri
Varlık değeri için eksik bir tırnak işareti
Eksik { veya } parantez işaretleri veya bir özellik değeri için eksik tırnak veya tanınmayan özellik adı    
.cm-keyword    Renk adları, !important, @media içinde and, only vs. gibi anahtar sözcükler Kontrol yapısı anahtar sözcükleri (if, else, …), in, of, from, default, public, private vs. function, if, else, new, echo, isset vs. anahtar sözcükler
.cm-meta  <!DOCTYPE> Açıklama -webkit-, -o-, vs. gibi tarayıcıya özel önekler Yayılmış sözdiziminde elips. Örnek: myFunction(...iterableObj); <!DOCTYPE> Açıklama ve PHP başlangıç ve bitiş etiketleri: <?php, ?>
.cm-number    Birimli veya birimi olmayan bir sayı 12, 2.1, 123e-5, 0x11, 0b11, 0o11 vb. bir sayı 12, 2.1, 0x11, 0b11, 0123, 5.0E+19 vb. bir sayı
.cm-operator      İşleçler: +, -, *, +=, !==, &&, >>> vs. ===, &&, !, =>, +, -, vs. gibi işleçler
.cm-property    Özellik adı Nesne özelliği veya yöntemi  
.cm-qualifier    Sınıf seçicisi    
.cm-string  nitelik değeri Url() çağrısına iletilen, tırnak işaretleri arasında font adı, vb. gibi normal dize. Harf dizesi Harf dizesi
.cm-string-2    scrollbar-arrow-color, scrollbar-base-color, vb. standart olmayan özellikler. Normal ifadeler  
.cm-tag  Etiket adı Etiket seçici    
.cm-variable    Tırnak işaretleri olmadan font adları Global değişkenler/işlevler, sınıf referansları Kullanıcı tanımlı işlev adları, arabirim/sınıf referansları, sınıf özellikleri, gölgeler, 
.cm-variable-2    main-bg-color gibi özel özellikler Kapsamlı değişkenler/işlev referansları Kullanıcı tanımlı ve önceden tanımlanmış değişkenler, parametreler veya nitelikler
.cm-variable-3   :hover, :focus vs. gibi sahte sınıflar ve ::first-letter, ::selection vs. gibi sahte öğeler    

Aşağıdaki tablo, main.less dosyasındaki seçiciler tarafından etkilenen Dreamweaver şablonlarını ve kitaplıklarını gösterir.

Sınıf Şablonlar(DWT) Kitaplık(LBI)
.cm-templateComment Şablon yorumları  
.cm-templateAttrVal Şablon yorumlarında nitelik değerleri  
.cm-instanceParam InstanceParam yorumu ve niteliği  
.cm-instanceParamAttrVal InstanceParam nitelik değerleri  
.cm-libraryItem   Belgeye eklenen Kitaplıklar. Örneğin: .cm-libraryItem { color: #3A3A3A; background-color: #A4A4A4; }

Seçicilerin diğer kod dosyalarını nasıl etkilediğini anlama

Main.less tema dosyasındaki seçicilerin kod dosyalarındaki (HTML, CSS, JavaScript ve PHP dışındaki) kod öğelerini nasıl etkilediğini öğrenmek için Token Inspector'ı indirin ve kullanın.

İndir

  1. Token Inspector'ı indirip ayıklayın.

  2. Google Chrome kullanarak TokenInspector\CM-Modes-Interactive\demo\TokenInspector.html dosyasına gidin ve dosyayı açın.

    TokenInspector yardımcı uygulaması şu iki bölümden oluşur:

    • Kod düzenleyici, 
    • Modları değiştirmek için bir seçenek ve 
    • Sağda bir seçici listesi.
    Seçicileri anlamak için Token Inspector'ı kullanma
    Seçicileri anlamak için Token Inspector'ı kullanma

    A. Kod Düzenleyici B. Modu Değiştir seçeneği C. Seçici listesi 
  3. Dosya içeriğini kopyalayıp Kod Düzenleyici'ye yapıştırın.

  4. Dosyanın modunu dosya adı uzantısına yazıp Modu değiştir'i tıklatarak değiştirin.

    Örneğin, bu bir HTML dosyası ise dosya adı uzantısını html olarak değiştirin. Sayfa, moddaki değişikliği yansıtacak şekilde güncelleştirir ve sayfanın üst kısmında geçerli modu belirtir.

    Token Inspector'da mod göstergesi
    Token Inspector'da mod göstergesi

  5. Görünümünü değiştirmek istediğiniz kod öğesini seçin.

    Ardından, Token Inspector seçiciyi vurgular.

  6. (İsteğe bağlı) Ayrıca belirli bir seçiciyi seçip kod dosyanızda bu seçiden etkilenen kod öğelerini görebilirsiniz.

  7. Düzenlemek ve güncelleştirmek istediğiniz seçicileri not edin ve Token Inspector'ı kapatın.

Main.less dosyasında seçicileri düzenleme

Artık düzenlemeniz gereken seçicileri bildiğinize göre main.less dosyasında ilgili değişiklikleri yapabilirsiniz.

  1. Aşağıdaki yorumu görene kadar dosyanın sonuna gidin:

    / * Özel kod renkleri veya geçersiz kılmalar bu satırdan sonra başlamalıdır * /

  2. Renklerini düzenlemek istediğiniz kod öğeleri için seçicileri yazın. Aşağıdaki örneğe benzer bir sözdizimi kullanın:

    .cm-tag {color: #00D0D0; }

  3. Aynı rengi birden fazla öğeye atamak istiyorsanız birden fazla seçiciyi gruplayın. Aşağıdaki örnekte, virgülle ayrılan birden çok seçici tek bir renge atanmıştır.

    .cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #cf681d;}

  4. Dosya türüne özel kod renklendirmesi özelleştirmesi yapmak için aşağıdaki örnekte gösterildiği gibi kod öğesini dosya türü seçicisinin içine alın:

    .HTML{
    .cm-tag{ color: #00D0D0;}
    }
  5. Değişikliklerinizi yaptıktan sonra dosyayı kaydedin.

    Dreamweaver, tüm açık belgelerde Kod görünümünü yeni renklerle yeniler.

Not:

Değişikliklerinizde sözdizimi hataları veya tanımlanmamış değişkenler varsa Dreamweaver yaptığınız özel kod değişikliklerini yüklemez ve bunun yerine varsayılan Koyu kod temasına geri döner.

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