Adobe Dreamweaver'ın Tasarım görünümünde kod düzenlemek için Özellik Denetçisinin nasıl kullanılacağını bu konuya bakarak öğrenin.

Dreamweaver, temel kaynak kodu konusunda endişe duymadan web sayfalarını görsel olarak oluşturmanıza ve bunları düzenlemenize olanak tanır, ancak daha fazla kontrol sağlamak veya web sayfanızın sorunlarını gidermek için kodu düzenlemenizi gerektirebilecek zamanlar olur. Dreamweaver, Tasarım görünümünde çalışırken bazı kodları düzenlemenizi sağlar.

Bu bölüm Tasarım görünümünde çalışmayı tercih eden kişiler için tasarlanmıştır ancak koda hızlı erişim isteyen kişiler içindir de.

Tasarım görünümünde alt etiket seçme

Alt etiketler içeren bir nesneyi Tasarım görünümünde seçerseniz, örneğin bir HTML tablosunu, Düzen> Alt Öğe Seç'i belirleyerek ilk alt etiketi hızlıca seçebilirsiniz.

Not:

Bu komut sadece Tasarım görünümünde vardır.

Örneğin, <table> etiketinin normal olarak <tr> alt etiketleri vardır. Etiket seçicide <table> etiketini seçerseniz, Düzen> Alt Öğe Seç'i belirleyerek tablodaki ilk satırı seçebilirsiniz. Dreamweaver, etiket seçicide ilk <tr> etiketini seçer. <tr> etiketi kendi başına alt etiketlere sahip olduğundan (<td> etiketleri), Düzen> Alt Öğe Seç'in tekrar belirlenmesi tablodaki ilk hücreyi seçer.

Özellik denetçisiyle kodu düzenleme

Sayfanızdaki metnin veya nesnelerin niteliklerini incelemek ve düzenlemek için Özellik denetimini kullanabilirsiniz. Özellik denetiminde görüntülenen özellikler genellikle etiketlerin niteliklerine karşılık gelir; Özellik denetiminde bir özelliği değiştirme genellikle Kod görünümünde karşılık gelen niteliği değiştirmekle aynı etkiye sahiptir.

Not:

Etiket denetçisi ve Özellik denetçisinin her ikisi de etiket niteliklerini görmenize ve düzenlemenize olanak sağlar. Etiket denetçisi belirtilen etiketle ilişkilendirilen tüm nitelikleri görüntülemenize ve düzenlemenize olanak sağlar. Özellik denetçisi sadece en genel nitelikleri görüntüler ancak bu niteliklerin değerlerini değiştirmek için daha fazla denetim sağlar ve belirli etiketlere karşılık gelmeyen bazı nesneleri (tablo sütunları gibi) düzenlemenizi sağlar.

  1. Metnin içinde tıklatın ve sayfada bir nesne seçin.

    Metnin veya nesnenin Özellik denetçisi Belge penceresinin altında görüntülenir. Özellik denetçisi görüntülenmiyorsa, Pencere > Özellikler'i seçin.

  2. Özellik denetçisindeki niteliklerde değişiklikler yapın.

Özellik denetçisiyle CFML'yi düzenleme

Tasarım görünümünde ColdFusion işaretlemesini incelemek ve değiştirmek için Özellik denetimini kullanın.

  1. Özellik denetiminde etiket niteliklerini düzenlemek veya yeni nitelikler eklemek için Nitelikler düğmesini tıklatın.
  2. Etiket, açma ve kapama etiketleri arasında içeriğe sahipse, içeriği düzenlemek için İçerik düğmesini tıklatın.

    İçerik düğmesi sadece seçili etiket boş etiket değilse (diğer bir deyişle, hem açma hem de kapama etiketi varsa) görüntülenir.

  3. Etiket şartlı ifade içeriyorsa, İfade kurusunda değişiklikler yapın.

Hızlı Etiket Düzenleyici'ye genel bakış

Hızlı Etiket Düzenleyici'yi Tasarım görünümünden çıkmadan HTML etiketlerini hızlı biçimde incelemek, eklemek ve düzenlemek için kullanırsınız.

Hızlı Etiket Düzenleyici'de geçersiz HTML yazarsanız, Dreamweaver gereken yerlere kapatma tırnak işaretleri ve kapatma açılı parantezleri ekleyerek bu sorunu düzeltmeye çalışır.

Hızlı Etiket Düzenleyici seçeneklerini ayarlamak için Control-T (Windows) veya Command-T (Macintosh) tuşlarına basarak Hızlı Etiket Düzenleyici'yi açın.

Hızlı Etiket Düzenleyici'nin üç modu vardır:

  • HTML ekle modu yeni HTML eklemek için kullanılır.
  • Etiketi Düzenle modu mevcut kodu düzenlemek için kullanılır.
  • HTML ekle modu yeni HTML eklemek için kullanılır.

  • Etiketi Düzenle modu mevcut kodu düzenlemek için kullanılır.

  • Etiketi Sar modu geçerli seçimin etrafına yeni etiketi sarmak için kullanılır.

Not:

Hızlı Etiket Düzenleyici'nin açıldığı mod, Tasarım görünümündeki geçerli seçime bağlıdır.

Her üç modda da temel Hızlı Etiket Düzenleyici'yi kullanma yordamı aynıdır: düzenleyiciyi açın, etiketleri ve nitelikleri girin veya düzenleyin ve ardından düzenleyiciyi kapatın.

Hızlı Etiket Düzenleyici etkinken Control+T (Windows) veya Command+T (Macintosh) tuşlarına basarak modlar arasında geçiş yapabilirsiniz.  

Hızlı Etiket Düzenleyici'de kodu düzenleme

Tasarım görünümünden çıkmadan HTML etiketlerini hızlı bir şekilde eklemek ve düzenlemek için Hızlı Etiket Düzenleyici'yi (Düzen > Hızlı Etiket Düzenleyici) kullanın.

HTML etiketi ekleme

  1. Tasarım görünümünde kodu eklemek istediğiniz ekleme noktasını yerleştirmek için sayfada tıklatın.
  2. Control+T (Windows) veya Command+T (Macintosh) tuşlarına basın.

    Hızlı Etiket Düzenleyici, HTML Ekle modunda açılır.

    HTML Ekle modunda Hızlı Etiket Düzenleyici
    HTML Ekle modunda Hızlı Etiket Düzenleyici

  3. HTML etiketini girin ve Enter tuşuna basın.

    Etiket, uygulanabiliyorsa, eşleşen kapatma etiketiyle birlikte kodunuza yerleştirilir.

  4. Değişiklik yapmadan çıkmak için Escape tuşuna basın.

HTML etiketi düzenleme

  1. Tasarım görünümünde bir nesne seçin.

    Düzenlemek istediğiniz etiketi Belge penceresinin altındaki etiket seçiciden de seçebilirsiniz. Daha fazla bilgi için bkz. Kodu etiket seçiciyle düzenleme.

  2. Control+T (Windows) veya Command+T (Macintosh) tuşlarına basın.

    Hızlı Etiket Düzenleyici, Etiketi Düzenle modunda açılır.

  3. Yeni nitelikleri girin, mevcut etiketleri düzenleyin veya etiketin adını düzenleyin.
  4. Bir nitelikten diğerine ilerlemek için Sekme tuşuna basın; geri gitmek için Shift+Sekme tuşlarına basın.

    Not:

    Varsayılan olarak, Sekme veya Shift+Sekme tuşlarına bastığınızda değişiklikler belgeye uygulanır.

  5. Hızlı Etiket Düzenleyici'yi kapatmak ve değişiklikleri uygulamak için Enter tuşuna basın.
  6. Başka değişiklik yapmadan çıkmak için Escape tuşuna basın.

HTML etiketleriyle geçerli seçimi sarma

  1. Tasarım görünümünde formatlanmamış metin veya bir nesne seçin.

    Not:

    Açma ve kapama HTML etiketi içeren bir metin veya nesne seçerseniz, Hızlı Etiket Düzenleyici, Etiketi Sar modu yerine Etiketi Düzenle modunda açılır.

  2. Control+T (Windows) veya Command+T (Macintosh) tuşlarına basın veya Özellik denetiminde Hızlı Etiket Düzenleyici düğmesini tıklatın.

    Hızlı Etiket Düzenleyici, Etiketi Sar modunda açılır.

  3. strong gibi tek açma etiketi girin ve Enter (Windows) veya Return (Macintosh) tuşuna basın.

    Etiket, geçerli seçimin başlangıcına eklenir ve eşleşen kapama etiketi sona eklenir.

  4. Değişiklik yapmadan çıkmak için Escape tuşuna basın.

Hızlı Etiket Düzenleyici'deki ipuçları menüsünü kullanma

Hızlı Etiket Düzenleyici, düzenlediğiniz veya eklediğiniz etiketin tüm geçerli niteliklerini listeleyen nitelik ipucu menüsü içerir.

İpuçları menüsünü devre dışı bırakabilir veya Hızlı Etiket Düzenleyici'de menü açılmadan önce geçen süreyi ayarlayabilirsiniz.

Etiketin geçerli niteliklerini listeleyen ipuçları listeleyen ipuçları menüsünü görmek için Hızlı Etiket Düzenleyici'de nitelik adını düzenlerken kısa bir süre duraklayın. Düzenlemekte olduğunuz etiketin geçerli tüm niteliklerini listeleyen bir ipuçları menüsü görüntülenir.

Benzer biçimde, geçerli etiket adlarını görüntüleyen ipuçları menüsünü görmek için Hızlı Etiket Düzenleyici'de etiket adını girerken veya düzenlerken kısa bir süre duraklayın.

Not:

Hızlı Etiket Düzenleyici kod ipuçları tercihleri, normal kod ipuçları tercihleriyle denetlenir. Daha fazla bilgi için bkz. Kod ipucu tercihlerini ayarlama.

  1. Aşağıdakilerden birini yapın:
    • Etiket veya nitelik adını yazmaya başlayın. Kod İpuçları menüsündeki seçim, yazdığınız harflerle başlayan ilk öğeye atlar.

    • Bir öğe seçmek için Aşağı ve Yukarı Ok tuşlarına basın.

    • Bir öğeyi bulmak için kaydırma çubuğunu kullanın.

  2. Seçili öğeyi eklemek için Enter tuşuna basın veya eklemek üzere öğeyi çift tıklatın.
  3. Öğe eklemeden ipuçları menüsünü kapatmak için Escape tuşuna basın veya yazmaya devam edin.

İpuçları menüsünü devre dışı bırakma veya görüntülenmeden önceki gecikme süresini değiştirme

  1. Düzen > Tercihler (Windows) veya Dreamweaver > Tercihler (Macintosh) seçeneğini belirleyin ve Kod İpuçları'nı seçin.

    Kod İpuçları Tercihleri iletişim kutusu görüntülenir.

  2. İpuçları menüsünü devre dışı bırakmak için Kod İpuçlarını Etkinleştir seçeneğinin seçimini kaldırın.

Kodu etiket seçiciyle düzenleme

Tasarım görünümünden çıkmadan etiketleri seçmek, düzenlemek veya kaldırmak için etiket seçiciyi kullanabilirsiniz. Etiket seçici, Belge penceresinin altındaki durum çubuğunda yer alır ve bir dizi etiketi görüntüler.

Etiketi düzenleme veya silme

  1. Belgenin içinde tıklatın.

    Ekleme noktasına uygulanan etiketler, etiket seçicide görüntülenir.

  2. Etiket seçicide bir etiketi sağ tıklatın (Windows) veya Control tuşunu basılı tutup tıklatın (Macintosh).
  3. Etiketi düzenlemek için menüden Etiketi Düzenle'yi seçin. Hızlı Etiket Düzenleyici'de değişikliklerinizi yapın. Daha fazla bilgi için bkz. Hızlı Etiket Düzenleyici'de kodu düzenleme.
  4. Etiketi silmek için menüden Etiketi Kaldır'ı seçin.

Etikete karşılık gelen bir nesne seçme

  1. Belgenin içinde tıklatın.

    Ekleme noktasına uygulanan etiketler, etiket seçicide görüntülenir.

  2. Etiket seçicide bir etiketi tıklatın.

    Etiket tarafından temsil edilen nesne sayfada seçilir.

    Not:

    Bağımsız tablo satırları (tr etiketleri) veya hücreleri (td etiketleri) seçmek için bu tekniği kullanın.

Tasarım görünümünde komut dosyalarını yazma ve düzenleme

Hem Tasarım görünümünde hem de Kod görünümünde istemci tarafı JavaScripts ve VBScripts öğeleriyle aşağıdaki yöntemlerle çalışabilirsiniz:

  • Tasarım görünümünden çıkmadan sayfanız için JavaScript veya VBScript komut dosyası yazın.

  • Tasarım görünümünden çıkmadan belgenizde harici komut dosyasına bağ oluşturun.

  • Tasarım görünümünden çıkmadan komut dosyasını düzenleyin.

    Başlamadan önce sayfada komut dosyası işaretçilerinin görüntülendiğinden emin olmak için Görünüm > Görsel Yardımcılar > Görünmez Öğeleri seçin.

İstemci tarafı komut dosyası yazma

  1. Komut dosyasının olmasını istediğiniz yere ekleme noktasını yerleştirin.
  2. Ekle > HTML > Komut'u seçin.

  3. Dosya seçimi penceresinde komutu seçin.

    Not:

    Açma veya kapatma komut etiketleri eklemeniz gerekmez.

Seçili dosya için komut etiketi belgeye eklenir.

Komut dosyasını düzenleme

  1. Komut dosyası işaretçisini seçin.
  2. Özellik denetiminde Düzenle düğmesini tıklatın.

    Komut dosyası, Komut Dosyası Özellikleri iletişim kutusunda görüntülenir.

    Harici bir komut dosyasına bağ oluşturduysanız dosya, düzenlemeleri yapabileceğiniz Kod görünümünde açılır.

    Not:

    Komut dosyası etiketleri arasında kod varsa, harici komut dosyasına bağ olsa bile Komut Dosyası Özellikleri iletişim kutusu açılır.

  3. Dil kutusunda, komut dosyasının dili olarak JavaScript veya VBScript seçeneğini belirleyin.
  4. Tür açılır menüsünde komut dosyasının türünü (istemci tarafı veya sunucu tarafı) belirleyin.
  5. (İsteğe bağlı) Kaynak kutusunda, harici olarak bağ oluşturulmuş komut dosyasını belirleyin.

    Dosyayı seçmek için klasör simgesini veya Gözat düğmesini tıklatın ya da yolu yazın.

  6. Komut dosyasını düzenleyin ve Tamam'ı tıklatın.

Tasarım görünümünde ASP sunucu tarafı komut dosyalarını düzenleme

Tasarım görünümünde ASP sunucu tarafı komut dosyalarını incelemek ve değiştirmek için ASP komut dosyası Özellik denetimini kullanın.

  1. Tasarım görünümünde sunucu dili görseli simgesini seçin.
  2. ASP komut dosyası Özellik denetiminde Düzenle düğmesini tıklatın.
  3. ASP sunucu tarafı komut dosyasını düzenleyin ve Tamam'ı tıklatın.

Özellik denetimini kullanarak sayfada komut dosyalarını düzenleme

  1. Özellik denetiminde Dil açılır menüsünden komut dosyası yazma dilini seçin veya Dil kutusuna dilin adını yazın.

    Not:

    JavaScript kullanıyor ve sürümünden emin değilseniz, JavaScript1.1 veya JavaScript1.2 yerine JavaScript'i seçin.

  2. Tür açılır menüsünde komut dosyasının türünü (istemci tarafı veya sunucu tarafı) belirleyin.
  3. (İsteğe bağlı) Kaynak kutusunda, harici olarak bağ oluşturulmuş komut dosyasını belirleyin. Dosyayı seçmek için klasör simgesini tıklatın veya yolu yazın.

  4. Komut dosyasını düzenlemek için Düzenle'yi tıklatın.

JavaScript davranışlarını kullanma

Etiket denetiminin Davranışlar sekmesini kullanarak sayfa öğelerine JavaScript (istemci tarafı) davranışlarını kolayca ekleyebilirsiniz. Daha fazla bilgi için bkz. Dreamweaver'da yerleşik JavaScript davranışlarını uygulama.

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