Görsel Ortam Sorguları

Kodda Linting özelliğini uygulama desteği

Dreamweaver uygulamasının bu yeni sürümünde, sık karşılaşılan hatalar için Linting özelliğini kullanarak kodunuzda hata ayıklayabilirsiniz. Linting bir program çalıştırarak koddaki olası hataları tanımlama işlemidir. Dreamweaver uygulaması HTML, CSS ve JavaScript dosyaları yüklenirken, kaydedilirken veya düzenlenirken bu dosyalara Linting özelliğini uygulayabilir. Hatalar ve uyarılar daha sonra yeni Çıktı panelinde listelenir.

Daha fazla bilgi için bkz. Kodda Linting özelliğini uygulama.

Emmet desteği

Dreamweaver uygulamasında birkaç satır kod yazan hırslı bir geliştirici misiniz? Kod içinde Emmet kısaltmaları kullanarak zaman kazanın. Hatırlanması ve yazılması kolay olan bu kısaltmalar Kod Görünümü'nde Sekme tuşuna bastığınızda eksiksiz kodlara dönüştürülür.

Ayrıntılı bilgi için bkz. Emmet kullanarak kod ekleme.

CSS ön işlemcileri

Kod Görünümü'nde görüntü ve renk önizlemesi

Görüntü önizlemesi

Dreamweaver, farenizi görüntü URL'sinin üzerine getirdiğinizde görüntülere Kod Görünümü'nde önizleme yapabilmenizi sağlar.

Görüntü önizlemeleri <img src="https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" /> gibi uzak görüntü yolları için artık etkin durumdadır.

Dreamweaver uzak yolların önizlemesini görüntüleyemezse “Görüntü yüklenemedi” mesajı görüntülenir.

Şu görüntü dosyası türlerinin önizlemesini elde edebilirsiniz:

JPEG
JPG
PNG
GIF
BMP
SVG

Aşağıdaki durumlarda farenizi URL'lerin üzerine getirdiğinizde görüntü önizlemesi gösterilir:

• url( );
• data-uri( )
• img etiketinin Src niteliğinin değeri

Renk önizlemesi

Kod Görünümü'nde varlık önizlemesi daha da iyileştirildi. Dreamweaver, farenizi renk değerlerinin üzerine getirdiğinizde renklere Kod Görünümü'nde önizleme yapabilmenizi sağlar. Desteklenen formatlar şunlardır:

3 ve 6 basamaklı Onaltılı renk değerleri: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228,0.5);
HSL: hsl(120, 100%, 50%);
HSLA: hsla(120, 60%, 70%, 0.3);
Hazır renk adları: Zeytin, Mavimsi Yeşil, kırmızı vb;

Yeni kod parçacıkları

Parçacıklar, projenizde tekrar tekrar kullanabileceğiniz kod parçalarıdır. Dreamweaver'ın bu sürümünde yeni ve güncelleştirilmiş kod parçacıkları sağlanır:

• Boostrap_Snippets
• CSS_Animation_And_Transitions
• CSS_Effects
• CSS_Snippets
• HTML_Snippets
• JavaScript Parçacıkları (güncelleştirildi)
• PHP_Snippets
• Preprocessor_Snippets
• Responsive_Design_Snippets

Kod parçacıklarını kullanma hakkında bilgi için bkz. Kod parçacıklarıyla çalışma.

Bootstrap tümleştirmesi

Bootstrap çerçevesi (sürüm 3 ve sonrası) kullanılarak oluşturulan web sitelerini artık Dreamweaver'da açabilir ve kod ya da görsel tasarım özelliklerini kullanarak sayfaları düzenleyebilirsiniz. Dosya adlarında “bootstrap” ifadesi yer alıyorsa Dreamweaver ilişkilendirilmiş CSS dosyalarını tanır. 

Bootstrap bileşenlerini Dreamweaver içinden de ekleyebilir (Ekle panelinden) ve ızgaraları hızlıca ve kolaylıkla düzenleyerek çeşitli görüntü kapılarının tasarımını değiştirebilirsiniz.

Ayrıntılı bilgi için bkz. Bootstrap dosyalarıyla çalışma.

Bootstrap başlangıç şablonları

Dreamweaver dinamik tasarımlarınızla çalışmaya hızlı bir şekilde başlayabilmeniz için şimdi Bootstrap şablonları içeriyor. Aşağıdaki Bootstrap şablonlarına Yeni Belge iletişim kutusundan erişebilirsiniz:

• Bootstrap-eCommerce
• Bootstrap-One PageBootstrap-Portfolio
• Bootstrap-The Agency
• Bootstrap-The Grid

Kod Katlama

HTML, CSS, LESS, SASS, SCSS, JS, PHP, XML ve SVG dosyalarında etiket bloklarını temel alarak artık kod katlama yapabilirsiniz. Farenizi satır numarası sütununun üzerine getirdiğinizde Kod Görünümü'nde satır numaralarının yanında küçük bir üçgen görünür; bu üçgeni tıklatarak kod bloklarını daraltabilir ya da genişletebilirsiniz. Bu yeni kod katlama işlevi seçime dayalı olan mevcut işlevin yerini alır.

Kod Görünümü'nde iki satırdan fazla kod içeren tüm etiket blokları için kod katlama simgeleri (ters üçgenler) görüntülenir.

Kopyala, Kes, Yapıştır ve sürükleyip bırakma işlemleri kod katlama durumunu korur. Örneğin, daraltılmış bir kod bloğunu kopyaladığınızda, Yapıştır işlemi kopyalanan metni daraltılmış bir blok olarak yapıştırır.

HTML dosyalarında kod katlama

Daha önceki kod daraltma işlevinden farklı olarak, daraltılan içerik artık kapanış etiketini içerir ve önceki uygulamadan farklı olarak oluşturulur.

Daraltılmış kod bloğunda görüntülenen karakter sayısı artırılmıştır. Böylece, daraltılan etiket bloğunda varsa ilk niteliklere önizleme yapılabilir. Örneğin, daraltılmış Div etiketinin id ve class nitelikleri varsa daraltılmış blok aşağıdaki gibi görünür:

Windows'ta, farenizi daraltılmış kodun üzerine getirdiğinizde daraltılmış kodun içerdiği koda önizleme yapabilirsiniz. Daraltılmış bloğun içerdiği koda Etiket Seçici, Bul ve Değiştir, Satıra Git, Öğeye Hızlı Bakış, Canlı Görünüm veya Geri Al/Yinele üzerinden odaklanıldığında, daraltılmış blok otomatik olarak genişletilir. Odak kod bloğunun dışına çıktığında otomatik olarak daraltılır.

CSS, LESS, SASS, SCSS ve JS dosyalarında kod katlama

CSS, Less, Sass, SCSS ve JS dosyalarında süslü ayraçlar içine alınmış kod blokları daraltılabilir.

Açılış süslü ayracı “{“ içeren herhangi bir satırda fareyi kod daraltma bölmesinin üzerine getirin.

Daralt'ı tıklattığınızda eşleşen süslü ayraç çifti arasındaki içerik daraltılır ve önizleme “{…}” olarak görüntülenir.

PHP dosyalarında kod katlama

PHP kod bloklarının yanı sıra PHP dosyaları, HTML öğeleri, CSS ve JS kod blokları da daraltılabilir.

“<?php” ile başlayan ve “?>” ile biten her PHP bloğu daraltılabilir.

<?php içeren herhangi bir satırda fareyi kod daraltma bölmesinin üzerine getirin ve kod bloğunu daraltmak için Daralt simgesini tıklatın.