Kod ipuçları verme ve kod tamamlama

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.

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

• HTML
• CSS
• JavaScript 
• PHP

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ştirme

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.

Ayraçların ve Tırnak İşaretlerinin otomatik olarak eklenmesini etkinleştirmek için sırasıyla Ayraçları otomatik ekle ve Tırnak işaretlerini otomatik ekle'yi seçin.

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.

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

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.

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.

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.

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.

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.

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 ö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'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.

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

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.

“::” 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.

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

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.

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.

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. 

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.

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

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.

Site yapısını kaydetme

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

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.

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. 

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.