Yeni Başlayanlar İçin 10 Faydalı Dreamweaver İpuçları

Bir Dreamweaver kullanıcısı kesinlikle onun ne kadar güçlü olduğunu düşünecektir. Bugünün piyasasında tonlarca özellik, seçenek ve tartışmasız en bilinen IDE (Integrated Development Environment) ile doludur. Ancak bazı geliştiricilerin talep ettiği kriterleri karşılamıyor olabilir, Dreamweaver inkar edilemez bir şekilde geliştirme, işbirliği ve kodlama araçları sunar. Bu seçenekler ve araçlar, pişman, daha az sezgisel menüler altında gizlidir, bu yüzden bugünkü yazımızda dersler veriyoruz..

Size, geliştirme sürenizi yağlayacak ve kod kalitenizi önemli ölçüde artıracak birçok yardımcı hileyle birlikte, onlara hızlı bir şekilde erişmenize yardımcı olacak Dreamweaver'ın en güçlü işlevlerinden bazılarını göstereceğiz. Atlamadan sonra tam liste.

1. Dinamik Görünüm “Canlı görüntü”

DW'nin açık dosyalarımızın statik bir görünümünü sunduğunu zaten biliyoruz, peki ya "dinamik görünümler" gibi bir uygulamanın açıklaması?

İlk önce, ihtiyacımız var söylemek DW hangi ayarları kullanmamız için"dinamik görünümler" doğru şekilde. Bunu yapmak için HTTP İstek Ayarları -den Görünüm> Canlı Görünüm Seçenekleri menüden sonra ALMAK veya POST uygulamanızı doğru görmeniz için gereken parametreler.

Sonra geçiş yaparak Canlı görüntü DW, eski yerini alır Tasarım görünümü Sayfanızın canlı, piksel mükemmel bir WebKit görüntülemesine sahip bölme; gördüğünüz yer tutucu simgeler yerine canlı Javascript, DOM manipülasyonları, veritabanı sorguları, sunucu tarafı kodu ve görüntülenen CSS ile tamamlayın Tasarım görünümü.

2. "Kod Gezgini", DW'nun Ateş Çubuğu'dur.

Bir adım daha ileri gitmek, Kod Gezgini ve ne zaman Canlı görüntü Pencerenin herhangi bir yerinde ALT tıklatılarak (Mac için Command Option tuşuna basılarak), anında bu öğeyi oluşturan kodu sunar. Firefox / Firebug'da şu anda görebileceklerinize benzer.

3. JavaScript Donuyor

Ajax'ın dinamik doğası nedeniyle, çoğu zaman belirli öğelerin oluşturulmadığı veya ilk sayfa yüklenmesinde kullanılamadığı bir sayfa ile etkileşim kurmamız gerekir. Bunlar, sayfa yüklendikten bir süre sonra sayfaya enjekte edilen öğelerdir. İşte bir örnek:

Tamamen JavaScript'te uygulanan bir araç ipucunun stilini değiştirmek isteyebilirsiniz. Bugünden önce, neyin yaratıldığını ve nerede üretildiğini bulmak için senaryolarınızda yöntemsel olarak arama yapmanız gerekir..

Bunun yerine, şunu deneyin:

Sayfanızı sayfanızda düzenleyin Canlı görüntü, sonra vur F6 JavaScript'i istediğiniz zaman dondurmak, sayfadaki herhangi bir dinamik öğeyle ilgili kodu hedeflemenize ve incelemenize olanak sağlar.

4. Live View'in Bir Sonraki En İyi Arkadaşı - "Live Code"

Kullanırken Canlı görüntü, ayrıca açabilirsiniz Canlı Kod. Canlı Kod Vurduğunuzda kodunuzu günceller, tıklar ve öğelerdeki öğeler ve öğelerle etkileşime girer. Canlı Görünüm penceresi!

5. Otomatik JavaScript Tamamlama

Dreamweaver akıllı ve eksiksiz bir HTML ve CSS kod tamamlamasıyla birlikte gelir, peki ya Javascripts? Dreamweaver'da jQuery veya Prototype kodlarsanız, Javascript kodunun tamamlanmasını sağlayan API uzantıları olduğunu bilmelisiniz. Gerekli yazmayı azaltır ve hızlı kodlayıcılar için oldukça kullanışlı olabilir.

Daha fazla okumak veya indirmek için buraya tıklayın:

• Dreamweaver için jQuery API uzantısı
• Dreamweaver için prototip API uzantısı

6. anında kodları güzelleştirmek

Kod sayfanız düzensiz, dağınık kod satırlarına benziyor mu? Kullan Kaynak Formatını Uygula Tam olarak tercihlerinize göre biçimlendirin ve yeniden biçimlendirin. Onları hızlı bir şekilde temizlemek için, Kaynak Kodunu Biçimlendir altındaki simge Kodlama araç çubuğu (Düzen> Araç Çubukları> Kodlama) ve seç Kod Biçimi Ayarları tercih ettiğiniz biçimlendirmeyi ayarlamak için.

Ayrıca, biçimlendirme seçeneğine de erişebilirsiniz. Komutlar> Kaynak Formatını Uygula veya sadece seçerek bir kod bloğuna uygulayın. Seçime Kaynak Biçimlendirme Uygula seçenek.

7. Widget alın

Sadece tıklayın Dreamweaver simgesini genişlet Uygulama Çubuğunuzdaki (bir vitese benzeyen) Web Widget'larına Göz Atın. Bu sizi Yahoo !, JQuery ve diğer pek çok üreticiden ek widgetlar bulabileceğiniz Adobe Exchange'e götürecektir..

8. Subversion ve Dreamweaver

Ve evet, Dreamweaver Subversion (SVN) özelliğini desteklemektedir. Projelerinin revizyon kontrolünü sağlamak için SVN kullanan geliştiriciler için bu iyi bir haber olabilir. Dreamweaver geliştiricisi Andrew Voltmer tartışıyor Subversions'ı Dreamweaver ile nasıl kullanabilirsiniz?.

9. Artık Gereksiz Stiller Yok

Çoğu kişi Dreamweaver'ı, bir kelime işlemcisi gibi, içeriği görsel olarak güncellemenin bir yolu olarak kullanır. Dreamweaver CS4'ten önce, bu durum gibi gereksiz CSS kurallarına neden olabilir. .1. sınıf, .sınıf 2, ve bunun gibi. Dreamweaver CS4'te, yalnızca Mülkiyet Müfettişi için HTML modu (Müfettişin solundaki HTML simgesine tıklayın) ve sadece gereksiz HTML işaretlemesini ekleyerek tüm gereksiz CSS’ye elveda deyin.

10. Form Doğrulama kolaylaştırıldı

Form alanlarınızı doğrulamak istiyorsunuz, ancak sıfırdan yeniden oluşturmanız gerekeceğinden endişelenmek mi istiyorsunuz? Telaşa gerek yok. Metin alanı gibi varolan bir form öğesini seçmeniz ve Spry Validation widget -den Ekle> Spry menüsü. Ardından, minimum veya maksimum karakterler gibi doğrulama gereksinimlerini doğrudan Mülkiyet denetçisi.

Bonus: 3 daha fazla

11. İlgili Dosyalara Kolayca Erişim

Bir HTML veya PHP dosyasını açtığınızda, şimdi belge penceresinin en üstünde CSS, Javascript ve hatta PHP için dosyalar içeren bir bağımlı dosya adı satırı göreceksiniz. Bunları açmadan bile kolayca bu dosyalara geçebilir, değişiklik yapabilir ve kaydedebilirsiniz. İlgili Dosyalar çubuğundaki herhangi bir dosyayı tıkladığınızda kaynağını Kod görünümünde ve üst sayfayı Tasarım görünümünde görürsünüz. Veya geçerli seçiminizi etkileyen CSS kaynak koduna hızlı bir şekilde erişmek için Kod Gezgini'ni kullanın..

12. Tarayıcı uyumluluğunu kontrol edin

Uyumluluk olup olmadığını kontrol etmek istediğiniz belgeyi açın; Kod / Bölünmüş / Tasarım görünümlerine erişilen aynı menü çubuğundan, en sağa bakın.Sayfayı Kontrol Et' buton.

Tıklamak açılan menüyü genişletecekTarayıcı Uyumluluğunu Kontrol Edin'. Tarayıcı Uyumluluğu sonuçları penceresi Pencerenin altında, ele almanız gereken sorunları gösterecek.

Not: Bu Mac'te IE'nin yeni sürümlerini kontrol etmeyecektir! Test etmek için hangi tarayıcıların kullanılacağını seçmek için Sayfayı Kontrol Et > Ayarlar menüden.

13. Önizleme PHP Sayfaları

Dreamweaver, yazılım içindeki PHP kodlarını çalıştırmanızı ve önizlemenizi sağlar. İşte nasıl kurulum yapılacağı.

Başlamak

1. İlk önce yer -> Yeni site üst gezintiden.
2. Her ikisini de göreceksiniz Temel ve Gelişmiş Site Tanımı seçenek sekmeleri. Seçerek devam edelim Gelişmiş Site Tanımı sekmesi.
3. Site için uygun kutuya bir klasör adı girin (bu örnek için klasör adı olarak "myphp" kullanacağız).
4. 'Varsayılan Görseller Klasörü' alanına adını girerek "images" adında başka bir klasör oluşturun..
5. Altında Yerel Bilgi, alanlara aşağıdaki değerleri girin:
   • Site adı: sitenin adı. Yalnızca Dreamweaver'da kullanılmak üzere
   • Yerel kök klasör: Bu, çalışacağınız sitenin adıdır. Siteleri, anlaşmazlıkları en aza indirecek şekilde veya adlarını karıştıracak şekilde adlandırdığınızdan emin olun..
   • Varsayılan Görüntüler klasörü: Bu isteğe bağlıdır, ancak çoğu site bir ölçüde görüntüleri kullanacağından, şimdi oluşturulması önerilir. Bu, DW'nin kodlama aşaması sırasında belgelerinize resim eklemek için 'bakacağı' yer.
   • İle İlgili Linkler: Bu, Dreamweaver'daki belge bağlantısının nasıl işleneceğini tanımlar. Belge veya Kök seçebilirsiniz. İkisi arasındaki farklar:
     • Doküman Göreceli - Çalıştığınız dosyaya ve bağlantılı öğeye göre bir yol ekler..
     • Root Relative - Belgenin / dosyanın ROOT klasörüyle ilişkilendirilmesine neden olan / kullanır.
     • Başka bir alternatif, sunucu yapılandırma dosyalarına bazı yapılandırmalar eklemektir. Daha ileri düzeyde bir görev olarak, şimdilik yalnızca Document-göreli özelliğini kullanmaya devam edeceğiz..
   • HTTP adresi: projeniz için site kök klasörünü girin
   • Büyük / küçük harfe duyarlı bağlantılar: Dreamweaver, projedeki herhangi bir dosyanın sunucuya yüklenirken büyük / küçük harf duyarlı sorunu olup olmadığını kontrol edecektir. Kullandığınızda bildirimler gösterilecektir: Site -> Sitewide Linkleri Kontrol Et. İsterseniz kontrol bırakabilirsiniz. Dosyaları şahsen küçük harf olarak adlandırdığım için kişisel olarak işaretli bırakmam. Büyük harf önerilmez.
   • Önbellek: Enable önbelleği kontrol et.
6. İçinde Uzaktan Bilgi sayfasında, FTP'nizi kurun veya uzak bir sunucuya başka bir erişim sağlayın veya Erişim'i Yok olarak bırakın..
7. İçinde Test Sunucusu Sayfa, test edeceğiniz dosya türü / sistemiyle ilgili seçeneği seçin.
8. Sürüm Kontrolü bu örnek için kullanılmayacağından, aşina olmadığınız sürece boş bırakabilirsiniz..
9. Gizleme Sitenizin klasörüne ve DW'ye .psd, .fla ve diğer kaynak dosyaları yerleştirmenize izin verir. Sitenizi yüklerken / güncellerken bunları dikkate almaz..
10. Tasarım notları dosyalarda yapılan değişiklikleri not ettiği için bir web tasarım ekibi için idealdir. Bu şekilde kullanmamız bizim için varsayılan olarak kontrol edildi ve para cezası verildi..
11. Ayrılmak Dosya Görünümü Sütunu, Katkıda bulunmak, ve Şablonlar varsayılan olarak.
12. dinç Sayfa sadece otomatik olarak Dreamweaver ile birlikte gelen Spry varlıkları klasörünü gösterir. Bunu değiştirmeye gerek yok. Her ayar bittiğinde, tıklayın tamam.

PHP'yi Dreamweaver'da Önizleyin

Şimdi bir PHP dosyası açın ve gerekli değişiklikleri yapın. Bu dosyayı Dreamweaver'da görüntülemek için F12 tuşuna basın ve sonuçlar varsayılan tarayıcınızda gösterilecektir. Hangi tarayıcının kullanıldığını değiştirebilirsiniz. Düzenle -> Tercihler -> Tarayıcıda Önizleme Yap. Bu, daha hızlı bir düzenleme önizleme süresi sağlar, tarayıcı çubuğunuza uzun URL'ler girme gereksinimini ortadan kaldırır veya PHP dosyalarını oluşturmak için zaman tasarrufu sağlayan başka bir sunucu yazılımı kullanır!

Bu kadar. Mutlu Dreamweaver'ing :-)

Editörün Notu: Bu gönderi tarafından yazılmıştır Jesse Matlock Hongkiat.com için. Son 6 yıldır, Jesse UI tasarım, uygulama geliştirme ve web trendlerini içine çekiyor. Ismarlama uygulama geliştirmeye odaklanan küçük, ama çok yetenekli bir geliştirme ekibi için kurucu ve tasarım lideridir..