Yeni Başlayanlar İçin 10 Basit Ama Faydalı Dreamweaver İpuçları ve Püf Noktaları

Adobe Dreamweaver, web tasarımcıları için güçlü bir araçtır. Dreamweaver, web siteleri geliştirmek için görsel bir tasarım yüzeyi ve kod düzenleyici sağlar. Hem artıları hem de eksileri olmasına rağmen, çok çeşitli özellikleri etkili bir şekilde web siteleri oluşturmanıza olanak tanır.

İşte yeni başlayanlar için 10 basit ama kullanışlı Dreamweaver ipucu ve püf noktası.

1. Satır sonlarını silin:

Bir belgeden, e-postadan veya Word dosyasından Dreamweaver'a metin kopyalarken, paragrafların veya satırların sonunda satır sonları görürsünüz. Bağlantı kesme karakteri <br> satırların sonunu belirtir, bu nedenle ondan sonraki herhangi bir metin altındaki satırda görüntülenir. Bu karakterler görünmezdir ve bu nedenle onları kaldırmak zordur. Dreamweaver genellikle bu karakterleri vurgulamasa da, tercih menüsündeki ayarları değiştirerek programın satır sonlarını gösteren küçük sarı bir simge göstermesini sağlayabilirsiniz. Satır sonları göründüğünde bunları kolayca silebilirsiniz.

2. Bir site tanımlamayı unutmayın:

İnsanlar genellikle Dreamweaver'da çalışmayı bir kelime belgesiyle çalışmakla karıştırır. Ancak, bir site tasarlamak tek bir dosya oluşturmakla ilgili değil, resimler, JavaScript dosyaları, Web sayfaları ve CSS dosyaları gibi birbiriyle ilişkili dosyalardan oluşan bir koleksiyonla bir site oluşturmakla ilgilidir. Bunu anlamayan kullanıcılar genellikle bir site kurmanın önemini unuturlar. Dreamweaver, kurulumu kolay bir site süreci sağlar. Sitenizin dosyalarının konumu hakkında bilgi sağlar ve birçok Dreamweaver yönetim aracından birini seçmenize olanak tanır. Bu araçlar, dosyanızı Web sunucunuza aktarır, bozuk bağlantıları kontrol eder ve şablonlarla bir site oluşturur.

3. Kodunuzun yazı tipi boyutunu artırın:

Dreamweaver'ın yazı tipi boyutunu ayarlama özelliği ile birkaç kolay adımda kod boyutunu artırabilirsiniz. Yazı tipi boyutlarınızı büyütmek için önce Dreamweaver > Tercihler'i seçin, ardından Yazı Tipleri kategorisine tıklayın, ardından yeni boyutu seçin ve Tamam'a tıklayın. Bu, kodu kolayca okunabilir hale getirmenize yardımcı olur ve web sitenizi uzun süre gözlerinizi yormadan geliştirmeye çalışabilirsiniz.

4. CSS arka planını kapatın

CSS'nin özelliklerinden biri arka plan özelliğidir. Bu özellik, arka planınıza renk veya resim eklemenizi sağlar. Dreamweaver'ın arka plan stenografi özelliği, 3 satırlı kodu bir görüntü, renk ve tekrar özelliğini tanımlayan tek bir satıra kısaltır. Bu, arka plan özelliklerini tanımlamayı kesinlikle kolaylaştırabilir, ancak steno versiyonunda bir özellik bırakırsanız, web tarayıcısı “yok” olarak değerlendirir. Örneğin, arka planları değiştirirken yalnızca görüntü özelliğini belirtirseniz, web tarayıcısı önceki arka plandan mevcut rengi kaldıracaktır. Bu nedenle, bu sorunu önlemek için CSS arka plan kısayolunu kapatmak daha iyidir.

5. CSS Tasarımcısı ile stilleri kopyalayın:

CSS Designer ile web sayfanızdaki stilleri görsel olarak geliştirebilirsiniz. CSS tasarımcısının daha fazla özelliğini kullanmak istiyorsanız, kopyalama veya çoğaltma işlemlerini kullanmak için herhangi bir seçiciye sağ tıklayın. Bu seçenekler, stilleri bir seçiciden diğerine kopyalamanıza olanak tanır. Bu stiller arka plan, metin, animasyon veya kenarlığı içerir. Bir seçicinin tamamını kopyalamak istiyorsanız, hedeflenen bir yaklaşım için standart yinele veya medyaya çoğalt komutunu kullanın. Bu kısayollar size çok zaman kazandıracak ve aynı zamanda tutarlı bir stil sağlayacaktır.

6. Gezinti çubuğunu kaldırın:

Adobe Dreamweaver CS5, bir tarayıcı gezinme araç çubuğuyla birlikte gelir. Bu araç çubuğu, Dreamweaver'ın canlı görüntü seçeneğiyle kullanılmak üzere oluşturulmuştur. Bu seçeneklerin her ikisini de belge penceresinde bulabilirsiniz. Canlı görünüm, web sayfanızın bir önizlemesini görmek için kullanılır. Canlı görüntü ile bağlantıya tıklayabilir ve belirli bir sayfaya gidebilirsiniz. Gezinme araç çubuğu, yeni sayfanın konumunu görüntüler ve sayfalar arasında kolayca gezinmenizi sağlar. Görünüm > Araç Çubukları bölümündeki Tarayıcı gezinme seçeneğinin işaretini kaldırarak bu araç çubuğunu kullanmadığınız zamanlarda gizleyebilirsiniz.

7. Dosyalarınızı yönetin:

Dreamweaver ile bir site kurduğunuzda, tüm dosyalar Dosyalar panelinde bulunur. Bu dosya panelini yeniden adlandırma, taşıma ve dosya adını vurgulama gibi birçok işlev için kullanabilirsiniz. Bu muhtemelen yaygındır ve tüm bunları biliyor olabilirsiniz, ancak web sayfaları normal dosyalardan farklıdır. Web sayfalarında harici bir stil sayfası dosyasından görüntüler, diğer Web sayfalarına bağlantılar ve CSS stilleri bulunur. Bir resmin, web sayfasının veya CSS dosyasının normal olarak Windows gezgini aracılığıyla yeniden adlandırılması, bağlantıların kopmasına neden olabilir. Dreamweaver, dosyalar panelini kullanarak bir dosyayı taşırsanız veya yeniden adlandırırsanız bağlantıları otomatik olarak güncellemenize olanak tanır. Bu şekilde kırık link yok.

8. Etiket seçiciyi seçin:

CSS sınıf stilini uygularken etiketi hassas bir şekilde eklemek veya kaldırmak zor olabilir. Kesin çizgileri seçmek için Dreamweaver'ın etiket seçicisi en iyisidir. Etiket seçici, belge penceresinin sol alt kısmına yerleştirilmiştir. Bu seçici, metnin çevresinde bulunan tüm HTML'yi ve diğer etiketleri gösterir. Etiket seçici çubuğunda bulunan bir etiketi tıklayarak belirli etiketleri seçebilirsiniz. Vurgulanan etiket, etiketin seçildiğini gösterir.

9. Parçacıkları kullanın:

Dreamweaver, çok fazla zaman kazandırabilecek temel kod parçaları olan snippet'ler sağlar. Snippet'ler, her sistemde kullanılabilir olmalarını sağlayan Creative Cloud aracılığıyla senkronize edilir. En çok kullanılanları klavye kısayolu olarak atayabilirsiniz. Kısayolları düzenlemek istiyorsanız, klavye kısayolları tasarımını açın ve standart seti çoğaltın. Ardından, favorilerinizi seçmek için komutlar bölümünün altındaki snippet kategorisini seçin. Ardından, oluşturduklarınız da dahil olmak üzere mevcut tüm parçacıkların bir listesini bulacaksınız. En zor kısım, hangi klavye kombinasyonlarının kullanılmadığını bulmaktır. Ancak bu bir değiştirici kullanılarak çözülebilir.

10. WordPress ve Dreamweaver'ı bağlayın:

Dreamweaver ve WordPress harika bir ekip oluşturur. Dreamweaver'ın dinamik dosya araç seti ile WordPress sayfalarını tasarlayabilir ve değiştirebilirsiniz. Bu araç seti, özel filtreler, dinamik olarak ilgili dosyalar ve siteye özel kod ipuçları içerir. Zor kısım, Dreamweaver ile diğer site sayfalarıyla nasıl çalışılacağını bulmaktır. Önce WordPress site kökünde bulunan index.php dosyasıyla başlamalı ve oradan gitmelisiniz. Yolu doğrudan web adresine ekleyebilir veya bir bağlantıyı tıklatmak için Dreamweaver özelliğini kullanabilirsiniz. Sayfa görüntülendikten sonra Dreamweaver'daki CSS ve diğer araçlar sizin kontrolünüzdedir.

Adobe Dreamweaver, bir web sitesi oluşturmak için mükemmeldir. Kod tamamlama, kod daraltma ve sözdizimi vurgulama gibi temel özelliklerin yanı sıra kod incelemeleri ve gerçek zamanlı sözdizimi denetimi gibi bazı gelişmiş özelliklerle birlikte gelir. Bahsedilen bu ipuçları, web sitenizi daha verimli bir şekilde oluşturmanıza yardımcı olacaktır. Çok fazla kodlama olmadan bir web sitesi oluşturmak için araçlar arıyorsanız, bu web sitesi oluşturma araçlarına göz atın.