Dreamweaver hakkında 10 Hack – Web Geliştiricileri için En İyi Kod Düzenleyici

Dreamweaver, internetteki tüm web tabanlı etkinliklerin anasıdır. Çoğu insan için Dreamweaver yalnızca web siteleri oluşturmak için bir araçtır, ancak Dreamweaver'ın güç merkezi olduğunu yalnızca profesyoneller bilir.

Dreamweaver, onu web geliştiricilerinin en gözde aracı yapan birçok özellik ve seçeneğe sahiptir. Kuşkusuz bu yazılım, mevcut pazarda başka hiçbir web geliştirme yazılımının sahip olmadığı en iyi bilinen IDE'ye (Entegre Geliştirme Ortamı) sahiptir. Geliştirme, ortak çalışma ve kodlama araçları olan Dreamweaver, web geliştiricilerinin oynaması için uygun bir aralık sağlar. Bu nedenle, yeni başlayan web geliştiricileri için Dreamweaver'ın kullanımını nasıl en üst düzeye çıkarabileceklerini bilmek önemlidir.

Uzman web geliştiricilerini ve sıradan web geliştiricilerini ayıran tüm özellikler, üzücü sezgisel menülerin katmanları altında gizlidir, bu nedenle yeni web geliştiricileri becerilerini geliştirmekte zorlanıyorlar. Ancak bu yazımda sizlere Dreamweaver'ın günümüz pazarının taleplerini karşılamak için bilinmesi çok önemli olan gizli ve güçlü fonksiyonlarını göstereceğim. Bu makale, bu işlevlere hızlı bir şekilde erişmenize yardımcı olacak ve işinizin kalitesini artıracak ve kodlamanızı önemli ölçüde iyileştirecek ilk on yararlı hack'i size sağlayacaktır.

1. Dinamik Görünüm ve Canlı Görünüm:

Dreamweaver'ın statik görünümü veya açık dosyalarımızı sunduğunu herkes bilir. Ancak, WordPress gibi bir uygulamanın dinamik görünümlerinde soru cevapsız kalıyor. Dinamik görünümü ayarlamak için Dreamweaver'a dinamik görünümler için kullanılacak ayarları anlatmamız gerekiyor. Bunu ayarlamak için görünüm > Canlı Görünüm > seçenekler menüsüne tıklayarak HTTP İstek Ayarlarına gidin ve ardından uygulamanızı doğru şekilde görüntülemek için gereken GET veya POST'u girin.

Bundan sonra, Dreamweaver'da Tasarım Görünümü panelini değiştirecek Canlı Görünüm'ü, sayfanızın canlı, piksel mükemmelliğinde oluşturulmuş WebKit'ine değiştirin. Ardından, Tasarım Görünümü arayüzündeki yer tutucu simgesi yerine canlı Javascript, DOM manipülasyonları, veritabanı sorguları, sunucu tarafı kodu ve işlenmiş CSS ile tamamlayın.

2. Navigasyonu hızlandırmak için önyükleme:

Gezinme, duyarlı web sitesinde Bootstrap'in çok yardımcı olabileceği daha küçük ekranların ihtiyaçlarını karşılamak için uyarlanabilir yeteneğe sahip olması gereken tek sayfa bileşenidir. Bootstrap, gezinme çubuğunuzu kolayca kurmanıza ve yatay şeritten dikey panele geçmenize olanak tanır. Bunun nedeni, Dreamweaver'ın tüm Bootstrap gezinme esnekliğini desteklemesi ve etkili, duyarlı bir web sitesi geliştirme söz konusu olduğunda bu özelliğin kullanımının kolay olmasıdır.

Size hızlı bir bakış sağlamak için, geliştirmenizde Bootstrap'i nasıl kullanacağınızın hızlı demosu aşağıdadır.

Bootstrap ile gezinmeyi hızlandırmak, Dreamweaver'ın yeni belge diyaloğuyla başlar. Yeni belge iletişim kutusundaki Bootstrap Çerçevesi düğmesini tıklamanız ve ayrıca aşağıdakiler gibi tam özellikli gezinme seçeneklerini kullanmak için derleme öncesi düzen seçeneği onay kutusunu işaretlemeniz yeterlidir;

• Standart, sırasız ve anlamsal olarak doğru bağlantı listesi.
• Marka imajını yerleştirmek için logo yerleştirme alanı.
• Gönder düğmesini ve arama alanını etkinleştirmeye hazır.
• Alt gezinme öğeleri için açılır menüler için ön ayarlar ve bölücülerle tamamlayın.
• Gerektiğinde hizalanabilen sol ve sağ bölümler.
• Yerleşik yanıt verme.

Zor bulursanız, başka bir seçenek var. Dreamweaver, özelleştirilmiş gezinme çubuğu oluşturmanıza olanak tanır. Koyu paleti tercih ediyorsanız, <nav> etiketinize .navbar-inverse sınıfını eklemeniz yeterlidir. Hatta onunla da oynayabilirsiniz. Navigasyonu her zaman sayfanın üzerinde göstermek istiyorsanız, .navbar-fixe-top yazın. Aşağıda göstermek istiyorsanız, .navbar-fixed-bottom yazın. Bu Bootstrap sınıflarının tümü standarttır ve Dreamweaver kod ipuçları da bu kodlamayı destekler, bu nedenle tüm kodlamayı aklınızda tutmanız gerekmez. Öğe ekranına .navbar yazmanız yeterlidir ve istediğiniz seçeneği seçebileceğiniz açılır liste açılır.

3. JavaScript'i dondurmak:

Ajax'ın çok dinamik bir doğası var. Bu nedenle, çoğu zaman ilk sayfa yüklemesinde kullanılamayan veya oluşturulmamış öğelerle sayfayla etkileşim kurmamız gerektiğinde. Bu öğeler, bir süre yüklendikten sonra sayfaya eklenebilir, bu nedenle ilk yüklemede görünmez. Örneğin, tamamen JavaScript'te uygulanan araç ipucunun stilini değiştirmek istediğinizde, hangi öğenin nerede oluşturulduğunu bulmak için komut dosyalarınızda yöntemli bir şekilde arama yapardınız. Komut dosyalarında arama yapmak yerine aşağıdakileri deneyin.

Dreamweaver'ınızı Canlı Görünüm'e yerleştirin ve sayfanızı oluşturun. Ardından, JavaScript'i istediğiniz zaman dondurmak için F6'ya basın; bu, sayfadaki herhangi bir dinamik öğenin herhangi bir kodunu incelemenize ve hedeflemenize olanak tanır. Bu, yalnızca dinamik öğenin tam kodunu hedeflemenize yardımcı olmakla kalmayacak, aynı zamanda dinamik web sitesinde herhangi bir kodu arama süresini azaltarak geliştirmenizi hızlandıracaktır.

4. Kodun vurgulanması:

Her gün ve gece karmaşık kodlama görmeye alışkın değilseniz, bir kodlama komut dosyası çok kafa karıştırıcı olabilir. Bu, kodların vurgulanmasının, tüm komut dosyasında ayrımlar oluşturmanıza yardımcı olduğu yerdir. Dreamweaver, gözlerinizi kanayan kenarla hareket ettirmek yerine, onu okumanıza yardımcı olan kodlamayı vurgulayan bir özelliğe sahiptir. Bunun için Dreamweaver tercihlerini açın ve teknoloji önizlemeleri bölümünü açın. Ardından kod vurgulamayı etkinleştir seçeneğini tıklayın ve bırakın Dreamweaver kendi işini yapsın. Ancak, bu özellik yalnızca en son sürümde mevcut olduğundan Dreamweaver sürümünüzü güncellemeniz gerekebilir.

Vurgulama seçeneğini etkinleştirdikten sonra, herhangi bir etikete çift tıklayın, etiketin geçerli sayfadaki tüm örneklerini vurgulayacaktır. Ancak, parametreler tanımlanmalıdır. Bu araç, benzer öğeleri hızlı bir şekilde belirlemek ve bunlara gitmek için harikadır. Herhangi bir öğeyi vurguladığınızda, vurgulanan bir öğeden sonraki öğeye atlamak için PC'de f3, Mac'te CMD-G) klavye kısayollarını kullanın. Ayrıca, shift değiştirici önceki bölüme geri gidebilir. Ayrıca, kod vurgulama, belirli sınıfları kolayca tespit edebilmeniz için HTML etiketlerinin öznitelikleri ve değerleriyle de çalışır.

5. Otomatik JavaScript Tamamlama:

Dreamweaver, akıllı ve eksiksiz HTML ve CSS kodlarının bulunduğu harika bir platformdur. Yine de, bazı insanlar JavaScript'in tamamlanmadığına inanıyor. jQuery veya Prototype durumunda, Dreamweaver'da Javascript tamamlama kodları sağlayan API uzantıları olduğunu bilmelisiniz. Bu kodlar geliştirme sürecini hızlandırır çünkü bu kodları kullanarak tüm komut dosyalarını yazmaya gerek yoktur ve hızlı kodlayıcılar için oldukça kullanışlıdır.

Dreamweaver, her web geliştiricisinin görevini hızlandırmasına ve minimum çabayla mümkün olan en iyi ürünü üretmesine yardımcı olan bu tür jQuery ve Prototip tamamlama kodlarını kullanmanıza izin veren tek web geliştirme yazılımıdır.

6. İlgili Dosyalara Kolayca Erişin:

CSS ve JavaScript, HTML ve PHP dosyalarını açtığınızda gördüğünüz bağımsız dosyaların adlarıdır. PHP dosyasını açarken pencerenin üst kısmında görebilirsiniz. Tüm bu seçenekler ön tarafa yerleştirildiğinden, bu dosyalara kolayca geçiş yapabilir ve açmadan bile kaydedilebilecek değişiklikler yapabilirsiniz. İlgili dosyalar çubuğunda herhangi bir dosyaya tıkladığınızda, bu size kaynağını Kod Görünümü'nde ve Tasarım Görünümü'nde ana sayfayı gösterecektir.

Ayrıca, mevcut çözümünüzü etkileyecek CSS kaynak koduna hızlı bir şekilde erişmek için herhangi bir kod gezgini aracını da kullanabilirsiniz. CSS kaynak koduna bu hızlı erişim, kodlama süresini azaltır ve web geliştiricisinin geliştirme sürecinin farklı yönlerine odaklanmasını sağlar.

7. Kodları anında güzelleştirin:

Düzensiz ve dağınık kod satırları, bu kodlamanın geliştiricisinin, kodları sırayla yazacak kadar profesyonel ve yetenekli olmadığını göstermektedir. Bu aynı zamanda web sitesinin arama motoru optimizasyonu sırasında çok önemli olan bir şeydir. Ancak kodlarınızı düzenlemek ve güzelleştirmek sanıldığı kadar zor değil. Dreamweaver seçeneklerinin doğru bilgisi ile kodlarınızı anında düzenleyebilirsiniz. Sadece "Kaynak biçimlendirmeyi uygula" seçeneğini kullanın ve tam olarak tercihlerinize göre yeniden düzenleyin. Kodlamanızı temiz ve düzenli hale getirmek için, kodlama araç çubuğunun altındaki "Kaynak kodunu biçimlendir"e tıklayın ve ardından "düzenle > araç çubukları > kodlama"ya gidin ve ardından tercih ettiğiniz ayarı belirlemek için "kod biçimi ayarları"nı seçin.

Komut dosyanızı organize etmenin başka bir yolu da Komutlar > Kaynak Biçimlendirmeyi Uygula'dan biçimlendirme seçeneğine erişmek veya Seçime Kaynak Biçimlendirmeyi Uygula seçeneğini belirleyerek bunu yalnızca bir kodlama bloğuna uygulamaktır.

8. Tüy Bırakmayan Kodlama:

Adobe, Dreamweaver'ı ne kadar güçlü araçlar ve özelliklerle donatırsa donatsın, web sitelerinde ne kadar çok çalışırsanız, kodlama tarafında o kadar çok çalışmanız gerekir. Bu şey becerilerinizi artırabilir, ancak çok fazla kodlama yazmak kolay bir iş olmadığı için sonsuz hataların kapılarını da açacaktır. Dreamweaver bunu biliyor ve bu nedenle Dreamweaver'ın Creative Cloud (CC) olan en son sürümünde Linting desteği adı verilen bir özellik var. Linting, CSS, HTML ve JavaScript için kullanılabilen temel bir programlama sözdizimi kontrol aracıdır. Bu sayede Dreamweaver herhangi bir sorun veya hata tespit ettiğinde hem genel hem de özel bir dizi işaret fişeği gönderir.

Testi çalıştırmak için Dreamweaver'da kodlarla dolu bir sayfa açın ve durum çubuğunun sağ tarafında daire içinde küçük yeşil bir onay işareti göreceksiniz. Daire içine alınmış küçük bir yeşil onay işareti varsa, kodunuzla ilgili her şey yolunda demektir. Kırmızı ile çevrelenmiş bir kırmızı çarpı işareti varsa, kodlamanızla ilgili bazı sorunlar vardır ve web sitenizi düzgün bir şekilde çalıştırmak için onu revize etmeniz gerekir. Üstelik hatanın işaretine tıklayarak sizi hata açıklaması ile hata yaptığınız sütun ve satıra götürebilir. En iyi yanı, bu özelliğin bir sınırı olmaması ve yeşil işareti alana kadar kullanabilirsiniz.

9. Tarayıcı uyumluluğunu kontrol etme:

Tarama yeteneği, her web geliştirme sürecinin en temel şeylerinden biridir. Bu nedenle Dreamweaver, web geliştirmenize başlamadan önce bu temel şeyleri asla kaçırmamanız için işinizi kolaylaştırdı. Uyumluluğunu kontrol etmek istediğiniz belgeyi Dreamweaver'da açın. Kod, bölme ve tasarım görünümleri seçeneklerinin yer aldığı menü çubuğundan “Sayfayı Kontrol Et” butonu olarak adlandırılan bir seçenek daha bulunmaktadır.

Tıkladığınızda, bir açılır menü açacak, içindeki tarayıcı uyumluluğunu kontrol et seçeneğini seçecek ve uyumluluğunuzun sonucunu ayrı bir pencerede görecektir.

10. Kod Minimizasyonu:

Büyük web sitesi için kod yazarken, genellikle bir kod yığını ekranda sizi rahatsız etmeye başlar. Çok az insan klavyeden tek bir tuşa basarak bu kodlama yığınını en aza indirebileceğini biliyor. Kodlama parçasında herhangi bir değişiklik yapmaya gerek olmadığından emin olduğunuzda, o bloğu seçin ve kod satırı numarasının yanındaki “-“ ye tıklayın. Bu yığın küçülecek ve siz genişletene kadar sizi rahatsız etmeyecek.