Sadece WYSIWYG Kullanmanıza gerek yok
Dreamweaver, harika bir WYSIWYG editörüdür , ancak web sayfalarını "ne gördüğünüzü alırsınız" ortamında yazmak istemiyorsanız, yine de harika bir metin editörü olduğu için Dreamweaver'ı kullanabilirsiniz. Ancak, Dreamweaver kod düzenleyicideki yol kenarına kaymış birçok özellik var çünkü birincil odak, ürünün "tasarım görünümü" veya WYSIWYG editör bölümüdür.
Dreamweaver Kod Görünümü'ne Nasıl Gidilir?
Dreamweaver'ı bir HTML düzenleyici olarak hiç kullanmadıysanız, sayfanın en üstündeki üç düğmeyi bile fark etmemiş olabilirsiniz: "Kod", "Bölme" ve "Tasarım". Dreamweaver, "Tasarım görünümü" veya WYSIWYG modunda varsayılan olarak başlar. Ancak HTML kodunu görüntülemek ve düzenlemek için geçiş yapmak kolaydır. Sadece "Kod" düğmesine tıklayın. Veya, Görünüm menüsüne gidin ve "Kod" u seçin.
Sadece HTML yazmayı öğreniyorsanız veya değişikliklerin belgenizi nasıl etkileyeceğini anlamak istiyorsanız, kod görünümünü ve tasarım görünümünü aynı anda açabilirsiniz. Bu yöntemin güzelliği, her iki pencerede de düzenleyebileceğinizdir. Böylece resim etiketinizin kodunu HTML'de yazabilir ve ardından sayfadaki başka bir konuma sürükleyip bırakarak taşımak için tasarım görünümünü kullanabilirsiniz.
İkisini de aynı anda görüntülemek için:
- "Böl" düğmesine tıklayın ("Kod" ve "Tasarım" arasında)
- Görünüm menüsünde "Kod ve Tasarım" ı seçin
HTML kodunuzu düzenlemek için Dreamweaver uygulamasını kullanmanızdan sonra, varsayılan olarak kod görünümünde Dreamweaver uygulamasını açmak için tercihlerinizi değiştirebilirsiniz. En kolay yol kod görünümünü çalışma alanı olarak kaydetmektir. Dreamweaver, kullanmakta olduğunuz son çalışma alanında açılacaktır. Eğer değilse, sadece Pencere menüsüne gidin ve istediğiniz çalışma alanını seçin.
Kod Görünümü Seçenekleri
Dreamweaver çok esnektir, çünkü onu özelleştirmek ve istediğiniz şekilde çalışmasını sağlamak için pek çok yolu vardır. Seçenekler penceresinde, kod renklendirme, kod biçimlendirme, kod ipuçları ve ayarlayabileceğiniz kod yeniden yazma seçenekleri vardır. Ancak kod görünümündeki bazı özel seçenekleri de değiştirebilirsiniz.
Kod görünümündeyken, araç çubuğunda bir "Görünüm Seçenekleri" düğmesi bulunur. Görünüm menüsüne girip "Kod Görünümü Seçenekleri" ni seçerek de seçenekleri görüntüleyebilirsiniz. Seçenekler şunlardır:
- Word Wrap - HTML kodunu sarar ve yatay kaydırma yapmadan görüntüleyebilirsiniz. Bu seçeneğin kodunuzda herhangi bir satırbaşı iadesi olmadığını, sadece okunması daha kolay olacak şekilde kodu görüntülediğini unutmayın.
- Satır Numaraları - kodun yanındaki satır numaralarını görüntüler. Görünüm penceresinden daha uzun sarılmış çizgiler için çizgi sarma sembolü gösterir.
- Gizli Karakterler - bir web sayfasında görüntülenecek boşluklar yerine özel karakterler görüntüler. Bir nokta bir yer değiştirir, bir çift chevron her bir sekmenin yerini alır ve her bir satır kopmasının yerini bir pilcrow veya paragraf işareti alır.
- Geçersiz Kod'u Vurgula - sarı renkte yanlış HTML'yi vurgular. Sarı etiketi seçerseniz, Özellik Denetçisi size nasıl düzeltileceğine dair ipuçları verir.
- Sözdizimi Boyama - kodunuzun renk kodlamasını açar veya kapatır. Renk kodlamanızın renklerini tercihlerin kod boyama bölümünde değiştirirsiniz.
- Otomatik Girinti - kodun üstündeki kod girintiliyse bir satırbaşı dönüşünden sonra kodunuzu otomatik olarak girer. Tercihlerin kod biçimlendirme bölümünde sekme boyutunu değiştirerek girintinin boyutunu değiştirebilirsiniz.
Dreamweaver Kod Görünümünde HTML Kodunu Düzenleme
Dreamweaver'ın kod görünümünde HTML kodunu düzenlemek kolaydır. Sadece HTML’nizi yazmaya başlayın. Ancak Dreamweaver, onu temel bir HTML düzenleyicinin ötesinde genişleten bazı ekstralar sunar. Bir HTML etiketi yazmaya başladığınızda,
HTML’de yeniyseniz, HTML etiketlerinin listesinde gezinebilir ve ne yaptığını görmek için çeşitli olanları seçebilirsiniz. Dreamweaver, bir etiket yazdıktan sonra özellikler için sizi uyarmaya devam edecektir. Örneğin, " etiketine kadar daraltacaktır.
Ancak kod ipuçları etiketlerde bitmez. Eklemek için kod ipuçlarını kullanabilirsiniz:
Kod ipuçları görünmüyorsa, görüntülenmesini sağlamak için Ctrl-boşluk çubuğuna (Windows) veya Cmd-boşluk çubuğuna (Macintosh) basabilirsiniz. Kod ipucunun görünmemesinin en yaygın nedeni, etiketinizi tamamlamadan önce farklı bir pencereye geçmenizdir. Dreamweaver, karakterin yazılmasını kapattığından <, pencereyi terk edip geri dönerseniz, kod ipuçlarını yeniden başlatmanız gerekir.
Çıkış tuşlarına basarak kod ipuçları menüsünü kapatabilirsiniz.
Açılış HTML etiketinizi yazdıktan sonra, kapatmanız gerekecek. Dreamweaver bunu doğal bir şekilde yapar. "İhtiyaçlarınıza en uygun Etiketleri Kapat" seçeneğini yazarsanız.
Sayfalarınızı HTML’de düzenlemeye geçmek için hazır değilseniz, ancak kodu yazılı olarak izlemek istiyorsanız kod denetçisini denemelisiniz. Bu HTML kodunu ayrı bir pencerede açar. Kod görüntüsü gibi çalışır ve aslında, geçerli belge için temel olarak çıkarılabilir bir kod görüntüleme penceresidir. Kod denetçisini açmak için Pencere menüsüne gidin ve "Kod Denetçisi" ni seçin veya klavyenizdeki F10 tuşuna basın.
Dreamweaver HTML kodunu biçimlendirir, ancak görüntülenmesini istersiniz. Örneğin, girintilemek için 3 boşluk kullanır, ancak hiçbir zaman IMG etiketlerini girmezseniz, kod yazma seçeneklerinde bu biçimlendirme bilgilerini belirtebilirsiniz. Sonra Komutlar menüsüne gidip "Kaynak Formatını Uygula" yı seçersiniz. Bu, başka biri tarafından yazılan kodun size tanıdık bir biçimde girilmesini sağlamanın harika bir yoludur.
Birçok HTML kodlayıcısının bilmediği veya kullanmadığı bir özellik, HTML kodunu daraltma yeteneğidir. Bu, etiketleri belgedeki kaldırmaz, ancak yalnızca üzerinde çalıştığınız şeylerin dikkatini dağıtmayan görünümden kaldırır. Kodunuzu daraltmak için:
- Gizlemek istediğiniz kod bölümünü seçin
- Düzen menüsünde, "Kod Daralt" alt menüsünden "Seçimi Daralt" ı seçin.
Kodu seçmek daha kolay bir yoldur ve daha sonra olukta görünen kod çökmesi simgelerine tıklar. Ayrıca seçili koda sağ tıklayıp "Seçimi Daralt" ı da seçebilirsiniz.
Vurgulananlar hariç her şeyi gizlemek isterseniz, yukarıdaki yöntemlerden herhangi birinde "Dış Seçimi Daralt" ı seçin.
Daraltılmış kodu genişletmek için, üzerine çift tıklayın. Bu kodu açar ve seçer. Daha sonra bu seçimi taşıyabilir veya silebilir veya etrafına ek etiketler ekleyebilirsiniz.
Dış şablonu düzenlemek istemediğiniz sayfalarda daraltmayı ve özelliği her zaman genişletebilirsiniz. Dışarıda düzenlemek ve daraltmak istediğiniz içerik alanını seçersiniz. Sonra HTML’nizi yazınız. Sayfayı Tasarım görünümünde görüntüleyebilir veya bir tarayıcıda önizleyebilirsiniz. Daraltılmış kod, yalnızca görünümden gizlenen belgeden kaldırılmaz. Bir dizi ürün üzerinde çalışırken de kullanabilirsiniz. Birini bitirdiğinizde, onu daraltın. Kod gösterilmediğinde bittiğini biliyorsun.