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.
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 için aşağıdaki kod ipucu türleri kullanılabilir:
- Etiket ipuçları
- Nitelik adı ipuçları
- Nitelik değeri 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.
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ğ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.
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.
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 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.
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.
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.
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 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.
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.
Öğ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.
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.
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 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.
Not:
Bu otomatik güncelleştirme, yalnızca Dreamweaver'daki JavaScript dosyalarını düzenlerseniz çalışır.
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.
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.
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 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:
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.
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.
-
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.
-
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.
-
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.
-
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.
-
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.
Siteye Özgü Kod İpuçları iletişim kutusunda oluşturduğunuz özelleştirilmiş site yapısını kaydedebilirsiniz.
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ı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.
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.
Ç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.
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.