Kodlama süresini en aza indirmek için Dreamweaver'ın kod ipuçlarını ve kod tamamlama özelliklerini kullanın.

Dreamweaver'ın akıllı kod tamamlama ya da kod ipuçları özellikleri, yazım hatalarını ve diğer yaygın hataları azaltarak kodları hızlı bir şekilde ekleyip düzenlemenize olanak tanır.

Aşağıdakileri görmek için bu özelliği de kullanabilirsiniz:

  • Bir etiket için kullanılabilen nitelikler,
  • Bir işlev için kullanılabilen parametreler veya
  • Bir nesne için kullanılabilen yöntemler.

Desteklenen diller ve teknolojiler

Dreamweaver aşağıdaki diller ve teknolojiler için kod ipuçlarını destekler:

Bu dillerde kod ipuçlarının ve kod tamamlamanın nasıl işlediğini öğrenmek için okumaya devam edin.

Kod ipuçlarını etkinleştir

Kod ipuçlarını etkinleştirmek için Düzen > Tercihler > Kod İpuçları'nı tıklatın ve Kod İpuçlarını Etkinleştir'i seçin. Kod ipuçlarını devre dışı bırakmak için Kod İpuçlarını Etkinleştir'in seçimini kaldırın.

Kod ipuçlarında açıklamaları etkinleştirmek için Açıklama araç ipuçlarını etkinleştir seçeneğini belirleyin. Böylece kod ipuçlarıyla birlikte bu açıklamaları görebilirsiniz.

HTML kod ipuçları

HTML için aşağıdaki kod ipucu türleri kullanılabilir:

  • Etiket ipuçları
  • Nitelik adı ipuçları
  • Nitelik değeri ipuçları

Etiket ipuçları

Kodunuzu yazmaya başlamak için klavyenizde < tuşuna basın. Siz yazdıkça, Dreamweaver geçerli HTML etiketlerini görüntüler. Yazdığınız dize menüde görünürse, girişinizi tamamlamak için dizeye kaydırarak Enter veya Return tuşuna basın.

Örneğin, < yazdığınızda açılır bir menü etiket adlarının bir listesini gösterir. Etiket adının geri kalanını yazmak yerine menüden metninize ekleyeceğiniz etiketi seçebilirsiniz.

Temel HTML kodu ipuçları
Temel HTML kodu ipuçları

HTML etiketi ipuçları, varsa etiketin kısa bir açıklamasını da içerir.

Nitelik adı ipuçları

Dreamweaver, kendi içinde kod yazılırken etiketler için uygun nitelikleri görüntüler. Bir etiket adı girin ve kullanabileceğiniz geçerli nitelik adlarını görüntülemek için boşluk çubuğuna yazın.

Nitelik adı kod ipuçları
Nitelik adı kod ipuçları

Nitelik değeri ipuçları

Nitelik değer ipucu metni, statik veya dinamik olabilir (ilgili dosyalarda bulunana göre kod ipuçları
görüntüleme değerlerinde olduğu gibi). 

Çoğu nitelik değeri ipuçları statiktir. Örneğin, hedef nitelik değeri yapısı itibariyle kendi içinde statiktir ve dolayısıyla ipuçları da statiktir. 

Statik nitelik değeri ipuçlarına örnek
Statik nitelik değeri ipuçlarına örnek

Dreamweaver'da örneğin id, target, src, href ve class gibi nitelik değerlerinin gerek duyduğu dinamik kod ipuçları görüntülenir.

Aşağıda dinamik olarak görüntülenen kod ipuçlarına birkaç örnek vardır. 

Src için dinamik kod ipuçları

Bu örnekte, src yazarken size geçerli nitelik değerleri sunulmaktadır ve görüntüleri seçtiğinizde, Dreamweaver o anda görüntüler klasörünüzde bulunan geçerli görüntüleri gösterir. Daha sonra aşağı kaydırıp istediğiniz öğeyi seçebilirsiniz.

src için dinamik kod ipuçları
src için dinamik kod ipuçları

CC Libraries'de varlıklarınız bulunuyorsa, src yazdığınızda bu varlıklar da gösterilir. Bu CC Library varlıkları bir bulut simgesiyle gösterilir.

CC Library varlığı seçtiğinizde, görüntü boyutunu yeniden örneklemenizi ve görüntü formatını değiştirmenizi sağlayan bir açılır menü görünür.

Kodunuza bir CC Library varlığı ekleme
Kodunuza bir CC Library varlığı ekleme

Not:

Bu kod ipuçlarında yalnızca 50 CC Library varlığı görüntülenebilir. Bu ipuçları alfabetik sırada görünür.

Not:

Dreamweaver koduna uzak CC Library varlığı eklenmesi desteklenmez.

href için dinamik kod ipuçları

Href yazdığınızda, Dreamweaver klasörünüzdeki dosyaların bir listesini görüntüler ve ayrıca bağ oluşturmak istediğiniz dosyayı arayıp seçme seçeneğini size sunar.

href için dinamik kod ipuçları
href için dinamik kod ipuçları

id ve stil için dinamik kod ipuçları

CSS dosyalarınızda kimlik tanımladıysanız, HTML dosyalarınızda id yazdığınızda Dreamweaver kullanılabilir tüm kimlikleri görüntüler.

id için dinamik kod ipuçları
id için dinamik kod ipuçları

Benzer şekilde, CSS stilleri tanımladıysanız HTML dosyalarınızda style yazdığınızda Dreamweaver kullanılabilir tüm stilleri görüntüler.

style için dinamik kod ipuçları
style için dinamik kod ipuçları

CSS kod ipuçları

Kod ipuçları aşağıdaki farklı CSS türleri için kullanılabilir:

  • @kurallar
  • Özellikler
  • Sahte seçiciler ve sahte öğeler
  • Steno

Kod ipuçlarının dışında, CSS özellikleri için de ipuçları kullanılabilir.

CSS @kuralları için kod ipuçları

Dreamweaver, aşağıda gösterildiği gibi tüm @kuralları için kod ipuçları ile birlikte CSS kuralının bir açıklamasını görüntüler.

CSS @kuralı kod ipuçları
CSS @kuralı kod ipuçları

CSS özellikleri ipuçları

CSS properties yazdığınızda, iki nokta üst üste yazarken, geçerli bir değer seçmenize yardımcı olacak bir kod ipucu görünür.

Aşağıdaki örnek kodda, font-family: yazılırken geçerli font kümeleri görünür.

Font kümelerinden birini seçebilir veya bu ipuçlarından Fontları Yönet iletişim kutusunu açıp tercih ettiğiniz fontları ayarlayabilirsiniz.

CSS özellikleri için kod ipuçları ve yardım
CSS özellikleri için kod ipuçları ve yardım

CSS'de renkle çalışmanız yardımcı kod ipuçlarına başka bir örnektir. Herhangi bir renkle bağlantılı özelliği yazdığınızda (örneğin kenarlık rengi veya arka plan rengi gibi), iki nokta üst üste yazarken, kod ipuçları renklerin bir listesini görüntüler. Listeden bir renk seçebilir veya kod ipucunun kendisinden Renk Seçici'yi açıp tercih ettiğiniz bir rengi ayarlayabilirsiniz.

CSS renkle ilgili kod ipuçları
CSS renkle ilgili kod ipuçları

CC Libraries'de renk örnekleriniz varsa kod ipuçları bunları da görüntüler.

CC Libraries'den gelen renk örnekleri bulut simgesiyle gösterilir
CC Libraries'den gelen renk örnekleri bulut simgesiyle gösterilir

Not:

Bu kod ipuçlarında yalnızca 50 CC Library varlığı görüntülenebilir. Bu ipuçları alfabetik sırada görünür.

Sahte seçici ve sahte öğe ipuçları

Öğenin belirli bir durumunu tanımlamak için bir seçiciye CSS sahte seçicisi ekleyebilirsiniz. Örneğin, :hover kullandığınızda, kullanıcı seçici tarafından belirtilen öğenin üzerinde durduğunda stil uygulanır.

“:” yazdığınızda, imleç doğru bağlamda ise Dreamweaver geçerli sahte seçicilerin listesini gösterir.

Sahte seçici kod ipuçları
Sahte seçici kod ipuçları

“::” yazdığınızda imleç doğru bağlamda ise Dreamweaver geçerli sahte öğelerin (bir öğenin belirtilen parçalarının stilini belirlemek için kullanılan) listesini gösterir.

Sahte öğe kod ipuçları
Sahte öğe kod ipuçları

CSS steno ipuçları

Steno özellikleri diğer çeşitli CSS özelliklerinin değerlerini aynı anda ayarlamanızı sağlayan CSS özellikleridir. Arka plan ve font özellikleri CSS steno özelliklerine bazı örneklerdir.

Aşağıdaki örnekte görüldüğü gibi, bir CSS steno özelliği (örneğin arka plan) yazarsanız, boşluk girdikten sonra Dreamweaver şunu görüntüler:

  • İlgi sırasına göre uygun özellik değerleri
  • Kullanılması gereken zorunlu değerler (örneğin, font özelliğini kullandığınızda, font boyutu ve font ailesi zorunludur)
  • Bu özellik için tarayıcı genişlemesi
Arka plan CSS özelliği için kod ipuçları
Arka plan CSS özelliği için kod ipuçları

CSS steno özellikleri doldurulduğunda kod ipuçları ayrıca yazdığınız özellik değerlerini de görüntüler.

CSS kod ipuçları

Bazı CSS özellikleri için (örneğin box-shadow veya text-shadow), Dreamweaver bu özellikleri izlemesi gereken değerleri ve yıldız işareti kullanan zorunlu değerleri gösteren ipuçlarını görüntüler. 

Ayrıca tarayıcının CSS'yi nasıl yorumladığını da görebilirsiniz.

CSS özellikleri için görünen ipuçları
CSS özellikleri için görünen ipuçları

JavaScript kod ipuçları

JavaScript dosyalarında, Dreamweaver değişkenler ve işlev parametreleri için kod ipuçları sunar. 

Aşağıdaki örnekte, kod parçacığı türü gösterir.

JavaScript kod ipuçları
JavaScript kod ipuçları

Dreamweaver, JavaScript dosyalarında çalışırken kullanılabilir kod ipuçları listesini otomatik olarak yeniler. Örneğin, birincil bir HTML dosyasında çalışıyorsanız ve değişiklik yapmak için JavaScript dosyasına geçiş yapıyorsanız. JavaScript dosyasında yaptığınız değişiklik, birincil HTML dosyasına döndüğünüzde kod ipuçları listesine yansıtılır. 

Not:

Bu otomatik güncelleştirme, yalnızca Dreamweaver'daki JavaScript dosyalarını düzenlerseniz çalışır.

Canlı Nesne Denetleme

Dreamweaver, JavaScript türü kod ipuçlarını da otomatik olarak yeniler.

Örneğin bir değişkeni sayısal olarak tanımladıysanız Dreamweaver bu bilgileri saklar. Daha sonra kodunuzda bu değişkene başvurduğunuzda, Dreamweaver değişkenin türünü belirtir.

Değişken türünü (örneğin bir dize olarak) değiştirirseniz Dreamweaver'ın kod ipuçları bu değişkeni otomatik olarak dize olarak gösterir.

Değişken türünü gösteren kod ipucu
Değişken türünü gösteren kod ipucu

Dinamik belgeleri dahil etme

Belirli bir işlev için yorum eklediyseniz bu işlevle ilgili ipucu verildiğinde Dreamweaver bu işlevin belgelerini de görüntüler. 

PHP kod ipuçları

Dreamweaver; PHP 5.6 ve 7.1 sürümleri için kod ipucunu destekler. Bu PHP kod ipuçları, siteye özel olmakla birlikte tüm temel işlevleri, sınıfları ve sabitleri kapsar.

PHP 5.6 ve 7.1 hakkında daha fazla bilgi için bkz. PHP Kılavuzu.

Siteye özel kod ipuçları hakkında daha fazla bilgi için bkz. Siteye özel kod ipuçları.

Değişkenlerin otomatik tamamlanması yardımcı bir PHP kod ipuçları özelliğidir.

Dolar işareti ($) yazdığınızda, geçerli komut dosyanızdaki tüm değişkenlerin bir listesi görünür. İstediğinizi seçip Enter/Return tuşuna basın. İlgili dosyalardaki değişkenler de listelenir ve böylelikle aynı değişkenin farklı bir amaçla kullanma tehlikesi ortadan kaldırılır.

PHP 7.1 varsayılan olarak ayarlandığında Dreamweaver, PHP 7.1 sürümüne özgü kod ipuçlarını görüntüler.

PHP 7 kod ipuçları
PHP 7 kod ipuçları

PHP nesnesi kod ipucu örneği
PHP nesnesi kod ipucu örneği

PHP kod ipuçları için gecikme ayarlarını düzenleme

.php dosyalarında kod yazma performansını geliştirmek amacıyla Dreamweaver 2017.5 ve sonraki sürümlerde PHP kod ipuçları için eklenmiş bir gecikme vardır. PHP kodunu yazdığınızda Dreamweaver ipuçlarını 400 milisaniye gecikme sonrasında görüntüler. PHP kodu için gecikme ayarlarını değiştirmek istiyorsanız bu yordamı uygulayın: 

  1. Dreamweaver uygulamasından çıkın.

  2. Brackets.json dosyasını aşağıdaki konumdan bir metin düzenleyicisi kullanarak açın:

    • Win%appdata%\Adobe\Dreamweaver CC 2017\<yerel_ayar>\Configuration\Brackets\
    • macOS~/Library/Application Support/Adobe/Dreamweaver CC 2017/<yerel_ayar>/Configuration/Brackets/
  3. İletişim kutusunun sağ üst köşesindeki Yapıyı Kaydet düğmesini tıklatın.

    JSON dosyasında soyadı/değer çiftinden sonra bir virgül ekleyin.

    Tercih ettiğiniz gecikme süresiyle şu satırı ekleyin: “delayInPHPHint”: <milisaniye cinsinden süre>. Örneğin, “delayInPHPHint”: 200.

  4. Dosyayı kaydedin ve Dreamweaver'ı başlatın.

Siteye özgü kod ipuçları

Dreamweaver, geliştiricilerin PHP kod ipuçlarını Kod görünümünde yazdıkları gibi görebilmeleri için Joomla, Drupal, Wordpress veya diğer çerçevelerle çalışmalarına izin verir. Kod ipuçlarını görüntülemek için, ilk olarak Siteye Özgü Kod İpuçları iletişim kutusunu kullanarak bir yapılandırma dosyası oluşturmanız gerekir. Yapılandırma, Dreamweaver'a, sitenize özgü kod ipuçları için nereye bakması gerektiğini gösterir.

Siteye özel kod ipuçlarıyla çalışma hakkında bir video eğitimi için bkz. www.adobe.com/go/learn_dw_comm13_tr.

Yapılandırma dosyasını oluşturma

Dreamweaver'da kod ipuçlarını görüntülemek amacıyla gereken yapılandırma dosyasını oluşturmak için Siteye Özgü Kod İpuçları iletişim kutusunu kullanın.

Varsayılan olarak, Dreamweaver yapılandırma dosyasını Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets dizininde saklar.

Not:

Oluşturduğunuz kod ipuçları özellikle Dreamweaver Dosyalar panelinde seçtiğiniz site içindir. Kod ipuçlarının görüntülenmesi için, çalıştığınız sayfa o anda seçili olan sitede bulunmalıdır.

  1. Site > Site Seçenekleri > Siteye Özgü Kod İpuçları'nı seçin.

    Varsayılan olarak, Siteye Özgü Kod İpuçları özelliği hangi İçerik Yönetimi Sistemi (CMS) çerçevesini kullandığınızı belirlemek için sitenizi tarar. Dreamweaver varsayılan olarak üç çerçeveyi destekler: Drupal, Joomla ve Wordpress.

    Yapı açılır menüsünün sağındaki dört düğme, çerçeve yapılarını içe aktarmanızı, kaydetmenizi, yeniden adlandırmanızı veya silmenizi sağlar.

    Not:

    Varsayılan olarak varolan çerçeve yapılarını silemezsiniz veya yeniden adlandıramazsınız.

  2. Alt kök metin kutusunda, çerçevenin dosyalarını sakladığınız alt kök klasörünü belirtin. Çerçeve dosyalarının konumuna gözatmak için metin kutusunun yanındaki klasör simgesini tıklatabilirsiniz.

    Dreamweaver, çerçeve dosyalarınızı içeren klasörlerin dosya ağacı yapısını görüntüler. Taramak istediğiniz tüm klasörler ve dosyalar görüntüleniyorsa, taramayı başlatmak için Tamam'ı tıklatın. Taramayı özelleştirmek istiyorsanız sonraki adımlara gidin.

  3. Taramaya eklemek istediğiniz bir dosyayı veya klasörü seçmek için Dosyalar penceresinin üzerindeki artı (+) düğmesini tıklatın. Dosya/Klasör Ekle iletişim kutusunda, dahil etmek istediğiniz belirli dosya adı uzantılarını belirtebilirsiniz.

    Not:

    Tarama sürecini hızlandırmak için belli bir dosya adı uzantısı belirtin.

  4. Dosyaları taramadan çıkarmak için, taranmasını istemediğiniz dosyaları seçin ve ardından Dosyalar penceresinin üstündeki eksi (-) düğmesini tıklatın.

    Not:

    Seçili çerçeveniz Drupal veya Joomla ise, Siteye Özel Kod İpuçları iletişim kutusu Dreamweaver yapılandırma klasörünüzdeki bir dosyaya giden ek bir yol görüntüler.

    Bu çerçeveleri kullanırken gerekli olduğu için bu yolu silmeyin.

  5. Siteye Özgü Kod İpuçları özelliğinin belirli bir dosya veya klasörü nasıl ele alacağını özelleştirmek için, onu listeden seçin ve aşağıdakilerden birini yapın:

    • Seçili klasörü taramaya eklemek için Bu Klasörü Tara öğesini seçin.
    • Seçili bir dizindeki tüm dosyaları ve klasörleri dahil etmek için Yinelemeli öğesini seçin.
    • Belirli bir dosya veya klasör için taramanıza dahil edilmesini istediğiniz dosya adı uzantılarını belirtebileceğiniz Uzantıları Bul iletişim kutusunu açmak için Uzantılar düğmesini tıklatın.

Site yapısını kaydetme

Siteye Özgü Kod İpuçları iletişim kutusunda oluşturduğunuz özelleştirilmiş site yapısını kaydedebilirsiniz.

  1. Dreamweaver uygulamasından çıkın.

  2. Dosya ve klasör yapısını, gerektiği şekilde dosya ve klasör ekleyip silerek dilediğiniz gibi oluşturun.

  3. Site yapınız için bir ad belirtin ve Kaydet'i tıklatın.

Not:

Belirtilen ad zaten kullanılıyorsa, Dreamweaver farklı bir ad girmenizi veya aynı adlı yapının üzerine yazmak istediğinizi doğrulamanızı ister. Varsayılan çerçeve yapılarının üzerine yazamazsınız.

Site yapılarını yeniden adlandırma

Site yapınızı yeniden adlandırırken, varsayılan üç çerçeve yapısının adını veya “custom” sözcüğünü kullanamayacağınızı unutmayın.

  1. Yeniden adlandırmak istediğiniz yapıyı görüntüleyin.

  2. İletişim kutusunun sağ üst köşesindeki Yapıyı Yeniden Adlandır simgesini tıklatın.

  3. Yapı için yeni bir ad belirtin ve Yeniden Adlandır'ı tıklatın.

Not:

Belirttiğiniz ad zaten kullanılıyorsa, Dreamweaver farklı bir ad girmenizi veya aynı adlı yapının üzerine yazmak istediğinizi doğrulamanızı ister. Varsayılan çerçeve yapılarının üzerine yazamazsınız.

Site yapısına dosya veya klasör ekleme

Çerçevenizle ilişkili her dosyayı veya klasörü ekleyebilirsiniz. Dosya veya klasör ekledikten sonra taramak istediğiniz dosyaların dosya adı uzantılarını belirtebilirsiniz. 

  1. Dosya/Klasör Ekle iletişim kutusunu açmak için Dosyalar penceresinin üzerindeki artı (+) düğmesini tıklatın.

  2. Dosya/Klasör Ekle metin kutusunda eklemek istediğiniz dosya veya klasöre gidin yol girin. Bir dosya veya klasöre gözatmak için metin kutusunun yanındaki klasör simgesini de tıklatabilirsiniz.

  3. Taramak istediğiniz dosyaların dosya adı uzantılarını belirtmek için Uzantılar penceresinin üzerindeki artı (+) düğmesini tıklatın.

    Not:

    Tarama sürecini hızlandırmak için belli bir dosya adı uzantısı belirtin.

  4. Ekle'yi tıklatın.

Bir sitede dosya adı uzantılarını tarama

Sitenin yapısında bulunan dosya adı uzantılarını görüntülemek ve düzenlemek için Uzantıları Bul iletişim kutusunu kullanın.

  1. Siteye Özgü Kod İpuçları iletişim kutusunda Uzantılar düğmesini tıklatın.

    Uzantıları Bul iletişim kutusu, o anda taranabilir olan uzantıları listeler.

  2. Listeye başka bir uzantı eklemek için Uzantılar penceresinin üzerindeki artı (+) düğmesini tıklatın.

  3. Listeden bir uzantıyı silmek için eksi (-) düğmesini 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