Kullanıcı Kılavuzu İptal

Kod yazma ve düzenleme

Ara

Son güncelleme: 21 May 2021

Kod görünümünde nasıl çalışacağınızı ve Dreamweaver'ın kodlama özelliklerinden en iyi şekilde nasıl faydalanacağınızı öğrenin.

Dreamweaver'da kod ile çalışmanı çeşitli yolları bulunmaktadır.

Yeni Belge iletişim kutusunu kullanarak yeni bir kod dosyası açabilir ve kodunuzu yazmaya başlayabilirsiniz.

Dreamweaver'da yeni bir kod dosyası oluşturma

Siz yazdıkça, kodu seçmenize ve yazım hatalarını önlemeye yardımcı olmak için kod ipuçları görünür. CSS ile ilgili yardıma ihtiyacınız olduğunda Dreamweaver'ın kullanışlı Hızlı Belgeler özelliğini kullanın.

Ekle panelini veya Emmet kısaltmaları gibi kod kısayollarını kullanarak da kod ekleyebilirsiniz.

Aynı kodu tekrar tekrar kopyalayıp yapıştırıyorsanız aşağıdaki zaman kazandıran özellikleri deneyin:

Kodunuza, önceden formatlanmış kod parçacıklarını hızlı bir şekilde oluşturmak ve eklemek için Parçacıklar paneli oldukça kullanışlıdır.
Birden çok imleç birden çok kod satırını tek seferde oluşturmanızı ve düzenlemenizi sağlar.

Dreamweaver ayrıca kodunuzda gezinmeyi ve değişiklikler yapmayı sorunsuz bir işleme dönüştüren bir dizi güçlü düzenleme aracı da sunar.

Kod içinde etiketler, nitelikler veya metin aramak için Dreamweaver'ın bul ve değiştir özelliğini kullanın.
Geçerli dosyanın hem içinden hem de dışından ilgili koda gitmek için Kod Gezgini'ni kullanın. Daha da iyisi, dosyayı yeni bir sekmede bile açmadan kodu ilgili dosyalarda düzenlemek için Hızlı Düzenleme özelliğini kullanın.
Kodu doğrudan düzenlemenizi sağlayan basit, ilgili bir bağlam menüsü açmak için kodu sağ tıklatın.
Etiketlerde metni sarmak için Etiketi Sar seçeneğini kullanın.

Tüm bu kod özellikleri hakkında daha fazla bilgi edinmek için okumaya devam edin.

Ekle panelini kullanarak kod ekleme

Koddaki ekleme noktasını konumlandırın.
Ekle panelinden uygun bir kategori seçin.
Ekle panelinde bir düğmeyi tıklatın veya Ekle panelindeki açılır menüden bir öğe seçin.

Kod, bir simgeyi tıklattığınızda sayfanızda hemen görüntülenir veya kodu tamamlamanız için daha fazla bilgi istenen bir iletişim kutusu görüntülenir.

Ekle panelindeki düğmelerin sayısı ve türü, geçerli belge türüne göre değişir. Bu durum ayrıca, Kod görünümü veya Tasarım görünümü seçeneklerinden hangisini kullandığınıza bağlıdır.

Dreamweaver ile Emmet araç setini birlikte kullanma

Emmet, HTML ve CSS kodunun hızlı bir şekilde yazılmasını ve oluşturulmasını sağlayan bir eklentidir.

Emmet kısaltmalarını Dreamweaver'daki Kod Görünümü'nde veya Kod Denetçisi'nde kullanın ve bu kısaltmaları HTML işaretlemelerine veya CSS'ye genişletmek için Sekme tuşuna basın.

HTML kısaltmaları HTML ve PHP sayfalarında genişletilir. CSS kısaltmaları, CSS, LESS, SASS, SCSS sayfalarında veya bir HTML sayfasındaki stil etiketi içinde genişletilir.

Aşağıda, Emmet kısaltmalarını Kod Görünümü'nde nasıl kullanabileceğinizi gösteren birkaç örnek yer almaktadır. Ayrıntılı bilgi ve başvuru için Emmet belgelerine bakın.

Not:

Dreamweaver şimdilik Emmet 1.2.2 kısaltmalarını desteklemektedir.

Örnek 1: HTML kodunu Emmet kullanarak ekleme

Üç öğe içeren sırasız bir listeye hızlı bir şekilde HTML kodu eklemek için HTML dosyasını açın ve aşağıdaki Emmet kısaltmasını Kod görünümünde <body></body> etiketleri arasına yazın:

div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

Şimdi de imlecin Emmet kısaltmasının hemen sonrasına yerleştirildiğinden emin olun ve kısaltmayı genişletmek için Sekme tuşuna basın. Alternatif olarak, kısaltmanın tamamını seçin ve Enter tuşuna basın.

Kısaltma genişletilerek aşağıdaki kod elde edilir:

<div>
    <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
    <p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>
    <p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>
    <p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>
</div>

Örnek 2: CSS kodunu Emmet kullanarak ekleme

Satıcı önekleriyle birlikte kenarlık yarıçapı oluşturmak üzere CSS kodu eklemek için CSS dosyanızı açın ve aşağıdaki Emmet kısaltmasını bir sınıf içine yazın:

-bdrs

Sekme tuşuna bastığınızda kısaltma genişletilerek aşağıdaki kod elde edilir:

-webkit-border-radius: ;
 
-moz-border-radius: ;
 
border-radius: ;

Kod yorumlarıyla çalışma

Yorum, kodu açıklamak veya diğer bilgileri sağlamak için HTML koduna eklediğiniz açıklayıcı metindir. Yorum metni sadece Kod görünümünde görüntülenir ve tarayıcıda görüntülenmez.

Kodunuza yorum ekleme

Yorum eklemek için öncelikle yorum metnini yazın. Böylece imlecinizi ekleme noktasına yerleştirebilir ve Yorumu Uygula alt menüsünü açmak için araç çubuğundan Ekle simgesini tıklatabilirsiniz.

Ayrıca metni seçebilir ve bunu bir yorum yapabilirsiniz. Seçili metin bir yorum bloğu içine alınır.

Çeşitli sözdizimi seçeneklerini kullanarak yorumlar ekleyebilirsiniz. Uygun sözdizimini seçtiğinizde Dreamweaver etiketleri sizin yerinize ekler. Tek yapmanız gereken yorum metninizi girmek.

Yorum eklemek için Ctrl+/ (Windows'ta) veya Cmd+/ (Mac'te) klavye kısayollarını da kullanabilirsiniz.

Herhangi bir metin seçmeden klavye kısayolunu kullanırsanız yorum, geçerli satıra uygulanır. Metni seçer ve klavye kısayolunu kullanırsanız yorum seçili metne uygulanır.

Kodunuzdan yorumları kaldırma

Kod yorumlarını kaldırmak için kodu seçin ve araç çubuğunda Yorumu kaldır simgesini tıklatın. Yorumu kaldırmak için Ctrl-/ (Windows'ta) veya Cmd-/ (Mac'te) klavye kısayollarını da kullanabilirsiniz.

Kod yorumlarını değiştirme

Kod görünümünde yorumları gösterme ve gizleme seçenekleri arasında geçiş yapmak için, seçili yorum veya satır için Windows'ta Ctrl+/ veya Mac'te Cmd+/ tuşlarına basın.

Birden çok yerde metin eklemek veya değiştirmek için birden çok imleç kullanın

Birden çok yere imleç ekleyin veya kodun birden çok bölümünü seçin ve Dreamweaver'ın birden çok imleç özelliğini kullanarak aynı anda düzenleyin.

Not:

Kopyala ve yapıştır ile bul ve değiştir işlemleri birden fazla imleç veya birden fazla seçimle çalışmaz.

Birden çok imleç veya birden çok seçim ekleme

Gereksinimlerinize bağlı olarak farklı şekillerde birden çok imleç ekleyebilirsiniz.

Mevcut metni değiştirmeden birden çok yere aynı metni eklemek isterseniz birden çok imleç ekleyin.

Mevcut metni değiştirmek isterseniz birden çok seçim yapabilirsiniz. Kesintisiz metin satırlarını veya kesintili metin satırlarını ya da her ikisini birden seçebilir ve bunlara imleçler ekleyebilirsiniz.

Kesintisiz satırlarda aynı sütun üzerinde birden çok imleç veya birden çok seçim eklemek için:

Alt tuşunu basılı tutun ve dikey olarak tıklatıp sürükleyin. Dikey sürüklediğinizde imleçler sürüklediğiniz her satıra eklenir.

Birden çok satırda imleçlerin bulunduğu yerlere eklenen metin

Kesintisiz metin satırlarını seçmek için Alt tuşuna basın ve çapraz olarak sürükleyin. Çapraz sürüklediğinizde, Dreamweaver bu seçim içinden dikdörtgen bir metin bloğunu seçer.

Birden çok metin satırını aynı anda seçme ve güncelleştirme

Not:

Hızlı bir şekilde imleçler eklemek veya bir seçime birden çok satır dahil etmek için Shift-Alt-Yukarı ok veya Aşağı ok klavye kısayollarını kullanın.

Birden çok yere imleç eklediğinizde (veya metni seçtiğinizde) yazmaya başlayın.

Birden çok imleciniz varsa yeni metin eklenir.

Birden çok metin satırında içerik seçtiyseniz seçili metin yerine, girdiğiniz yeni metin eklenir.

Satırlar arasında farklı sütunlara birden çok imleç eklemek için:

Kesintili metin satırlarına imleçler eklemek için Ctrl tuşuna basın ve imleç eklemek istediğiniz farklı satırları tıklatın.

Birden çok kesintili metin satırına imleçler ekleme

Kesintili metin satırlarını seçmek içi bazı metinleri seçin, ardından Ctrl tuşuna (Windows) veya Cmd tuşuna (Mac) basın ve diğer seçimleri yapmaya devam edin.

Her satırın başına/sonuna imleçler eklemek için:

Birden çok metin satırını seçin ve Sol veya Sağ ok tuşlarına basın.

Seçimin önceki veya sonraki satırlarına imleçler eklemek için:

Shift + Alt + Yukarı/Aşağı ok tuşlarına basın ve ardından sağ ok tuşuna basın.

Kesintili ve kesintisiz metin satırlarını seçmek için:

Bu teknikleri birleştirerek tek bir seçim içerisinde kesintisiz ve ayrı metin satırlarını seçebilirsiniz.

Öncelikle kesintili metin satırlarını seçin, ardından Ctrl-Alt (Windows'ta) veya Cmd-Alt (Mac'te) tuşlarına basın ve mevcut çoklu seçimlere bir satır kümesi eklemek için sürükleyin.

Hem kesintili hem de kesintisiz metin satırlarını seçme

Dreamweaver içinden Hızlı Belgeler'i kullanarak CSS ile ilgili yardım alın

Dreamweaver'da CSS, LESS veya SCSS dosyalarıyla çalışırken CSS özellikleri veya değerleri hakkında hızlı bir şekilde daha fazla bilgi alabilirsiniz.

İmleci bir özelliğin veya değerin içine yerleştirin ve Ctrl + K tuşlarına basın. Dreamweaver, Web Platform Belgeleri projesinden belgeleri açar.

Birden çok satır içi düzenleyiciyi ve belge görüntüleyiciyi aynı anda açabilirsiniz.

Tek bir satır içi düzenleyiciyi veya belge görüntüleyiciyi kapatmak için sol üstteki “X” simgesini tıklatın veya Hızlı Belgeler odaktayken Esc tuşuna basın.

Tüm satır içi düzenleyicileri ve belgeleri kapatmak için imlecinizi çevreleyen ana kod düzenleyicisine geri getirin ve Esc tuşuna basın.

Kodu analiz etme

Dreamweaver HTML, CSS ve JavaScript için linting (kodu olası hatalara karşı analiz etme) özelliğini destekler.

Linting yoluyla algılanan hatalar ve uyarılar Çıktı panelinde listelenir. Daha fazla bilgi için bkz. Kodda Linting özelliğini uygulama.

Dreamweaver ayrıca hatalı satıra ait satır numarası sütununda hızlı şekilde bir hata önizlemesi gösterir. Satır numarası hata içerdiğini belirtmek için kırmızı olarak görüntülenir ve farenizi üzerine getirdiğinizde hatanın kısa bir açıklaması gösterilir.

Not: Satırdaki yalnızca ilk hata görüntülenir. Satır yalnızca bir uyarı içeriyorsa bu uyarının açıklaması görüntülenir. Satır bir uyarı ve bir hata içeriyorsa yalnızca hata açıklaması görüntülenir.

Etiketi Sar seçeneğini kullanarak kodda metni sarma

Kod görünümünde belirli metin satırlarını etiket ile sarmak için Etiketi Sar seçeneğini kullanın. Tasarım görünümünde veya Canlı görünümde nesneleri etiket ile sarmak için bu özelliği kullanabilirsiniz.

Kod görünümünde metni veya Tasarım görünümünde nesneyi seçin ve klavyenizde Ctrl+T tuşlarına basın.

Bir dizi HTML etiketi arasından seçim yapmanızı sağlayan bir açılır menü görünür.
Menüden bir etiket seçin.

Kod görünümünde çalışıyorsanız seçili metin etiket ile sarılır. Tasarım görünümünde veya Canlı görünümde çalışıyorsanız seçili nesne etiket ile sarılır.

Kodlama bağlam menüsüyle kod düzenleme

Kodunuzda hızlı düzenlemeler yapmak için Dreamweaver'ın bağlam menüsünü kullanın.

Bağlam menüsüne erişmek için sağ tıklatın (Windows'ta) veya Command tuşuna basıp tıklatın (Mac'te). Aşağıdaki seçenekler sunulur:

Hızlı Düzenleme

Hızlı Düzenleme moduna geçmek için bu seçeneği tıklatın. Bu modda, Dreamweaver ihtiyacınız olan kod bölümüne hızlı bir şekilde ulaşmanızı sağlayan bağlama özgü kod ve satır içi araçlar sağlar. Daha fazla bilgi için bkz. Hızlı düzenleme.

Kes, kopyala, yapıştır

Düzenle menüsüne erişmeden metni hızlı bir şekilde kesmek, kopyalamak ve yapıştırmak için bu seçenekleri tıklatın.

Bul ve değiştir, Sonrakini bul, Öncekini bul

Bul menüsüne erişmeden hızlı bir şekilde metin bulmak ve değiştirmek için bu seçenekleri tıklatın.

Yeni parçacık oluştur

Daha sonra yeniden kullanmak için kaydedebileceğiniz kod parçacıkları oluşturmak için bu seçeneği kullanın. Kodu seçin ve seçili kodu bir parçacık haline getirmek için Yeni parçacık oluştur'u tıklatın. Daha fazla bilgi için bkz. Kod parçacıklarıyla çalışma.

İlgili dosyayı açma

Bağ/komut etiketini sağ tıklatın ve dosyayı açmak için İlgili dosyayı aç'ı tıklatın.

Stil Sayfası Ekle

Sayfanıza mevcut bir CSS stil sayfasını ekleyin.

Seçim

Seçim alt menüsü, satır ve blok yorumlarında geçiş yapma, seçimi genişletme ve daraltma, satır içi CSS'leri kurallara dönüştürme, CSS kurallarını taşıma ve kodu yazdırma gibi, belirli bir kod parçasında kullanabileceğiniz çeşitli düzenleme seçeneklerini içerir.

Kod Gezgini

İç ve dış CSS kuralları, sunucu tarafı içeriği, dış JavaScript dosyaları, üst şablon dosyaları, kitaplık dosyaları ve iframe kaynak dosyaları gibi ilgili kod kaynaklarında gezinmek için bu seçeneği tıklatın. Daha fazla bilgi için bkz. İlgili koda gitme.

Kod İpucu Araçları

Kod İpucu Araçları alt menüsü renk seçiciyi, URL tarayıcısını ve Font listesi araçlarını parmaklarınızın ucuna getirir.

Kod bloklarını girintileme

Kod görünümünde veya Kod denetçisinde bir kod yazar veya düzenlerken, seçili bloğun veya kod satırının girintileme düzeyini bir sekme sağa veya sola kaydırarak değiştirebilirsiniz.

Seçili kod bloğunu girintileme

Sekme tuşuna basın veya
Ctrl+] tuşlarına basın veya
Düzen > Girinti Kodu'nu seçin.

Seçili kod bloğunu dışa alma

Shift+Sekme tuşlarına basın veya
Ctrl+[ tuşlarına basın veya
Düzen > Çıkıntı Kodu'nu seçin.

İlgili koda gitme

Kod Gezgini, sayfanızdaki belirli bir seçimle ilgili kod kaynakları listesi görüntüler. Bu aracı, iç ve dış CSS kuralları, sunucu tarafı içeriği, dış JavaScript dosyaları, üst şablon dosyaları, kitaplık dosyaları ve iframe kaynak dosyaları gibi ilgili kod kaynaklarında gezinmek için kullanın. Kod Gezgini'ndeki bir bağı tıklattığınızda, Dreamweaver ilgili kod parçasını içeren dosyayı açar. Dosya, etkinleştirilmişse ilgili dosyalar alanında görülür. İlgili dosyalar etkinleştirilmemişse, Dreamweaver seçilen dosyayı Belge penceresindeki ayrı bir belgede açar.

Kod Gezgini'nde bir CSS kuralını tıklatırsanız, Dreamweaver sizi doğrudan bu kurala götürür. Kural dosya için dahili bir kuralsa, Dreamweaver kuralı Bölünmüş görünümde görüntüler. Kural harici bir CSS dosyasıysa, Dreamweaver dosyayı açar ve kuralı ana belgenin üst kısmındaki ilgili dosyalar alanında görüntüler.

Kod Gezgini aracına Tasarım, Kod ve Bölünmüş görünümlerden ve ayrıca Kod denetçisinden erişebilirsiniz.

Kod Gezgini ile çalışma hakkında Dreamweaver mühendislik ekibi tarafından sunulan video tanıtımı için bkz. www.adobe.com/go/dw10codenav.

Canlı Görünüm, ilgili dosyalar ve Kod Gezgini ile çalışma hakkındaki video eğitimi için bkz. www.adobe.com/go/lrvid4044_dw.

Kod Gezgini'ni açma

Sayfada herhangi bir bölümü Alt tuşuna basarak tıklatın (Windows) veya Command+Option tuşlarına basarak tıklatın (Macintosh). Kod Gezgini, tıklattığınız alanı etkileyen koda olan bağları görüntüler.

Kapatmak için Kod Gezgini'nin dışındaki bir bölümü tıklatın.

Not:

Kod Gezgini'ni, Kod Gezgini göstergesini tıklatarak da açabilirsiniz. Bu gösterge, fare 2 saniye süreyle boşta kaldığında sayfanızdaki ekleme noktasının yakınında görülür.

Kod Gezgini ile koda gitme

İlgilendiğiniz sayfa alanından Kod Gezgini'ni açın.
Gitmek istediğiniz kod parçasını tıklatın.

Kod Gezgini, ilgili kod kaynaklarını dosyaya göre gruplar ve dosyaları alfabetik olarak listeler. Örneğin, üç harici dosyadaki CSS kurallarının belgenizdeki seçimi etkilediğini varsayın. Bu durumda, Kod Gezgini bu üç dosyayı ve seçimle ilgili CSS kurallarını listeler. Kod Gezgini, belirli bir seçimle ilgili CSS için Geçerli Mod'daki CSS Stilleri paneline benzer şekilde işlev görür.

Not:

CSS kurallarına olan bağların üzerine fareyle geldiğinizde Kod Gezgini kuraldaki özelliklerin araç ipuçlarını görüntüler. Bu araç ipuçları, bir adı paylaşan birden fazla kuralı birbirinden ayırmak istediğinizde fayda sağlar.

Kod Gezgini göstergesini devre dışı bırakma

Kod Gezgini'ni açın.
Sağ alt köşedeki Göstergeyi Devre Dışı Bırak'ı seçin.
Kapatmak için Kod Gezgini'nin dışındaki bir bölümü tıklatın.

Kod Gezgini göstergesini yeniden etkinleştirmek için, Kod Gezgini'ni açmak üzere Alt tuşuna basarak tıklatın (Windows) veya Command+Option tuşlarına basarak tıklatın (Macintosh) ve Göstergeyi Devre Dışı Bırak seçeneğinin işaretini kaldırın.

JavaScript veya VBScript işlevine gitme

Kod görünümünde ve Kod denetçisinde kodunuzdaki tüm JavaScript veya VBScript işlevlerinin listesini görebilir ve bunlardan herhangi birine atlayabilirsiniz.

Kod görünümünde (Görünüm > Kod) veya Kod denetçisinde (Pencere > Kod Denetçisi) belgeyi görüntüleyin.
Aşağıdakilerden birini yapın:
- Kod görünümünde, Kod görünümünün herhangi bir yerinde sağ tıklatın (Windows) veya Control tuşunu basılı tutup tıklatın (Macintosh) ve içerik menüsünden İşlevler alt menüsünü seçin.
Not:

İşlevler alt menüsü Tasarım görünümünde görüntülenmez.

Kodunuzdaki JavaScript veya VBScript işlevleri alt menüde görüntülenir.

Not:

İşlevleri alfabetik sırada listelenmiş biçimde görmek için Kod görünümünde Control tuşuna basarak sağ tıklatın (Windows) veya Option-Control tuşuna basarak tıklatın (Macintosh), ardından İşlevler alt menüsünü seçin.
- Kod denetçisinde araç çubuğundaki Kodda Gezinme ({ }) düğmesini tıklatın.
Kodunuzdaki atlayacağınız işlevin adını seçin.

JavaScript'i ayıklama

JavaScript Ayıklayıcı (JSE), Dreamweaver belgenizdeki JavaScript'in tümünü veya çoğunu kaldırır, harici bir dosyaya dışa aktarır ve harici dosyayı belgenize bağlar. JSE, ayrıca, onclick ve onmouseover gibi olay işleyicileri kodunuzdan kaldırarak, bu işleyicilerle ilişkilendirilmiş JavaScript'i belgenize göze batmayacak şekilde ekleyebilir.

Kullanmadan önce JavaScript Ayıklayıcı'ya ait aşağıdaki sınırlandırmaları unutmayın:

JSE, belgenin gövdesindeki komut dosyası etiketlerini ayıklamaz (Spry widget'ları dışında). Bu komut dosyalarını haricileştirme, beklenmedik sonuçlara neden olabilir. Dreamweaver, varsayılan olarak, bu komut dosyalarını JavaScript'i Haricileştir iletişim kutusunda listeler, ancak ayıklama için seçmez. (İstediğiniz takdirde el ile seçebilirsiniz.)
JSE, JavaScript'i .dwt (Dreamweaver şablonu) dosyalarının düzenlenebilir bölgelerinden, şablon örneklerinin düzenlenemeyen bölgelerinden veya Dreamweaver Kitaplığı öğelerinden ayıklamaz.
JavaScript'i Haricileştir veya Göze Batmayacak Şekilde Ekle seçeneğini kullanarak JavaScript'i ayıkladıktan sonra, Davranışlar panelinden Dreamweaver davranışlarını artık düzenleyemezsiniz. Dreamweaver, Davranışlar panelini göze batmayacak şekilde eklediği davranışlarla denetleyemez ve dolduramaz.
Sayfayı kapattıktan sonra değişikliklerinizi geri alamazsınız. Ancak, aynı düzenleme oturumunda kaldığınız sürece değişiklikleri geri alabilirsiniz. Geri almak için, Düzenle > JavaScript'i Haricileştirmeyi Geri Al öğelerini seçin.
Karmaşık sayfalardan bazıları beklediğiniz şekilde çalışmayabilir. Global değişkenlere ve gövdesinde document.write() kodu bulunan sayfalardan JavaScript'i ayıklarken dikkatli olun.

Dreamweaver'da JavaScript desteği hakkında Dreamweaver mühendislik ekibi tarafından sunulan video tanıtımı için bkz. www.adobe.com/go/dw10javascript.

JavaScript Ayıklayıcı'yı kullanmak için:

JavaScript içeren bir sayfa açın.
Araçlar > JavaScript'i Haricileştir'i tıklatın.
Gerekirse, JavaScript'i Haricileştir iletişim kutusundan varsayılan seçimleri düzenleyin.
- Dreamweaver'ın herhangi bir JavaScript'i harici bir dosyaya taşımasını ve geçerli dosyada harici dosyaya referans vermesini isterseniz, Yalnızca JavaScript'i Haricileştir öğesini seçin. Bu seçenek, onclick ve onload gibi olay işleyicilerini belgede bırakır, ayrıca Davranışlar panelinde Davranışlar'ı görünür olarak bırakır.
- Dreamweaver'ın 1) JavaScript'i harici bir dosyaya taşıyıp geçerli dosyada bu harici dosyaya referans vermesini ve 2) olay işleyicileri HTML'den kaldırıp JavaScript'i kullanarak bu işleyicileri çalışma süresinde eklemesini isterseniz, JavaScript'i Haricileştir ve Göze Batmayacak Şekilde Ekle öğelerini seçin. Bu seçeneği belirledikten sonra, Davranışlar panelinden Davranışlar'ı düzenleyemezsiniz.
- Düzen sütunundan, uygulamak istemediğiniz tüm düzenlemelerin seçeneğini kaldırın veya Dreamweaver'ın varsayılan olarak belirlemediği düzenlemeleri seçin.
  Dreamweaver, aşağıdaki düzenlemeleri varsayılan olarak listelediği halde seçmez:
  
  Belgenin başlığında document.write() veya document.writeln() çağrılarını içeren komut dosyası blokları.
  
  Belgenin başlığında EOLAS işleme koduna ilişkin işlev imzalarını içeren, document.write() kullanan komut dosyası blokları.
  
  Bloklar yalnızca Spry widget'ını veya Spry veri kümesi yapıcılarını içermediği sürece belgenin gövdesindeki komut dosyası blokları.
- Dreamweaver, kimliği olmayan öğelere otomatik olarak kimlik atar. Bu kimlikleri istemediğiniz takdirde kimlik metni kutularını düzenleyerek değiştirebilirsiniz.
Tamam'ı tıklatın.

Özet iletişim kutusu, ayıklamaların bir özetini verir. Ayıklamaları inceleyin ve Tamam'ı tıklatın.
Sayfayı kaydedin.

Dreamweaver, SpryDOMUtils.js dosyasını ve ayıklanmış JavaScript içeren başka bir dosyayı oluşturur. Dreamweaver, SpryDOMUtils.js dosyasını sitenizde bir SpryAssets klasörüne, diğer dosyayı da JavaScript'i ayıkladığınız sayfayla aynı düzeye kaydeder. Orijinal sayfayı yüklediğinizde, her iki bağımlı dosyayı da web sunucunuza yüklemeyi unutmayın.

Hızlı Düzenleme

Dreamweaver'daki Hızlı Düzenleme modu, kodlama ortamınızı pek çok panel ve simge ile tıka basa doldurmak yerine ihtiyacınız olan kod bölümüne hızlı bir şekilde ulaşmanızı sağlayan bağlama özgü kod ve satır içi araçları sunar.

Hızlı Düzenleme moduna şu şekilde girebilirsiniz:

Kod parçacığını sağ tıklatın ve görünen bağlam menüsünden Hızlı Düzenleme'yi seçin
Ctrl + E (Windows'ta) veya Cmd+E (Mac'te) tuşlarına basın

Hızlı Düzenleme modunu HTML dosyalarıyla kullanma

HTML dosyasında imleci bir sınıfın ya da bir kimlik niteliğinin (ad veya değer) içerisine veya etiket adına yerleştirin. Hızlı Düzenleme, projenizde eşleşen tüm CSS, SCSS ve LESS kurallarını gösterir. Bu kuralları, HTML dosyasının bağlamından hiç çıkmadan doğrudan satır içinden düzenleyebilirsiniz.

Birden çok kural eşleştiğinde sağ taraftaki listeyi kullanarak (veya Alt-Yukarı/Aşağı ok tuşlarını kullanarak) aralarında gezinin.

Doğrudan satır içi düzenleyiciden bir CSS kuralı oluşturmak için Yeni Kural'ı tıklatın veya Ctrl-Alt-N (Windows'ta) veya Cmd-Opt-N (Mac'te) tuşlarına basın.

Hızlı Düzenleme modunu JavaScript dosyalarıyla kullanma

JavaScript dosyasında imleci bir işlev adına yerleştirin. Hızlı Düzenleme, işlevin gövdesini (require() ifadesi tarafından başvurulan diğer dosyalarda bulunsa bile) gösterir.

Hızlı Düzenleme modunu CSS, SCSS veya LESS dosyalarıyla kullanma

İmleciniz bir renk değerinin içindeyken Hızlı Düzenleme'yi açtığınızda renk seçiciye erişebilir ve CSS kodunuzda kullanılan renkleri hızlı bir şekilde düzenleyebilirsiniz.

CSS dosyası içinden renk seçiciye erişme

CSS, LESS veya SCSS dosyası içinden imlecinizi bir cubic-bezier() veya steps() geçiş zamanlama işlevine yerleştirdiğinizde Hızlı Düzenleme grafiksel bir geçiş eğrisi düzenleyicisi görüntüler.

Önceden tanımlanan zamanlama işlevleri ease, ease-in, ease-out, ease-in-out, step-start ve step-end de geçerli başlangıç noktalarıdır.

Hızlı Düzenleme kullanarak bir Bezier eğrisinde işlem yapma

Kodu elden geçirme

Kodu elden geçirmek, mevcut bilgisayar kodunun harici davranışını değiştirmeden kodu yeniden yapılandırma sürecidir. Böylece kod daha okunabilir, sürdürülebilir ve anlaşılması daha kolay hale gelir. Yinelenen kod, uzun yöntemler veya kodda büyük sınıflar olduğunda kullanılır. Kodda hata ayıklamak, küçük fonksiyonlar ve uygun değişiklikler nedeniyle zaman kazandırır.

JavaScript'te elden geçirme işleminde, fonksiyonları yeniden adlandırabilir ve bir değişkenin kapsamını belirleyebilirsiniz. Böylece bu değişkeni tanımlandığı kod bloğu içinden çağırmanız mümkün olur.

Not:

Kodu elden geçirme işlemi artık yalnızca .js dosyalarıyla kullanılabilir.

JavaScript'te elden geçirme

Kodu html, php ve javascript belge türlerinde elden geçirebilirsiniz. Dreamweaver'da kod alanına sağ tıklattığınızda açılan menüde Elden Geçir seçeneği görüntülenir. Elden Geçir menüsünde aşağıdaki seçenekler yer alır:

Yeniden Adlandır
Değişkene Ayıkla
Fonksiyona Ayıkla
Try Catch İçine Al
Koşul İçine Al
Ok Fonksiyonuna Dönüştür
Getters/Setters Oluştur

Elden geçirme seçeneklerinin işlevlerini anlamak için aşağıdaki bölümlere bakın:

Yeniden Adlandır

Yeniden Adlandır, JavaScript kodunda bir değişken adının veya fonksiyon adının tüm yinelemelerini değiştirmek için kullanılır. Elden geçirme sırasında bir değişkenin tıklatılıp sürüklenerek seçilmesi gerekmez.

JavaScript'te yeniden adlandırmak için aşağıdaki adımları uygulayın:

Değişiklik gerektiren kodu vurgulayın veya metin imlecini koda yerleştirin.
Seçili metni sağ tıklatın ve ardından Elden Geçir > Yeniden Adlandır'ı seçin. Dilerseniz, Yeniden Adlandır işlemi için Windows işletim sisteminde Ctrl + Alt + R veya macOS'ta Command + option + R klavye kısayollarını da kullanabilirsiniz.
Ekranda, değişkenin tüm yinelemelerini değiştirmenize olanak tanıyan çoklu imleç görünümü görüntülenir. Çoklu imleç iyileştirmeleri geçerli seçimin bir sonraki yinelemesini seçer. Geçerli adı değiştirmek için benzersiz bir değişkenin veya fonksiyonun adını yeniden yazın.

Yeniden Adlandır öncesinde

Yeniden Adlandır sonrasında

Değişkene ayıkla

JavaScript'te bir değişken, yerel değişken veya sabitlerle bir deyimi değiştirmek için deyimi seçip sağ tıklatarak Değişkene Ayıkla'yı kullanın. Ardından, Elden Geçir > Değişkene Ayıkla'yı seçin. Dilerseniz, Windows işletim sisteminde Ctrl + Alt + V ve macOS'ta Cmd + Alt + V kısayollarını da kullanabilirsiniz.

Fonksiyona ayıkla

Parametre içindeki bir fonksiyonun çağrılmasında bir deyimi değiştirmek için Fonksiyona Ayıkla'yı kullanın. Yeni parametrenin varsayılan değeri, fonksiyon gövdesinin içinden başlatılabilir veya fonksiyon çağrılarından geçirilebilir.

Fonksiyona Ayıkla'yı kullanarak elden geçirmek için aşağıdaki adımları uygulayın:

JavaScript'te herhangi bir deyimi veya deyim kümesini seçin.

Bir deyimin seçilmesi
Elden Geçir > Fonksiyona Ayıkla'yı sağ tıklatıp seçin. Dilerseniz, Windows işletim sisteminde Ctrl + Alt + M veya Mac OS'ta Cmd + Alt + M kısayollarını da kullanabilirsiniz.
Ekranda görüntülenen açılır menüden fonksiyonun ayıklanacağı hedef kapsamı seçin.

Kapsam türleri
Çıktı, seçilen hedef kapsamına göre değişir. Örneğin, hedef kapsamı bir yapıcı, seçili sınıf veya genel bir fonksiyon olabilir.

Fonksiyona ayıkla'nın özellikleri şunlardır:
- Seçimde veya ayıklanmış kapsamda bulunan tanımlayıcılara göre iletilecek parametreleri tanımlar.
- Seçimde değerleri değiştirilen tanımlayıcılara göre fonksiyondan döndürülecek dönüş parametrelerini tanımlar.
- Aynı zamanda benzersiz adlı bir fonksiyon da oluşturur.
Aşağıdaki ekran görüntülerinde çıktı, seçilen ilgili hedef kapsamına göre görüntülenmektedir.
Yapıcı

Sınıf

Genel

Try catch içine al

Programı derledikten sonra bir hata olarak görüntülenen kod bloğunda bir istisna için Try Catch İçine Al'ı kullanın. Bu fonksiyon, kod bloğunu bir try catch bloğu içine alır. Bu kod bloğu, program yürütülürken bir istisna olarak işaretlenir.

Kodu seçin veya imleci koda yerleştirin, sağ tıklatın ve Elden Geçir > Try Catch İçine Al'ı seçin. İmleci bir konuma yerleştirirseniz imleç etrafındaki ifadeleri bulur, aksi takdirde kodun ifadelerden oluşup oluşmadığını kontrol eder. İfadeler varsa kodu bir Try Catch bloğu içine alır.

Try catch içine al öncesinde — Try Catch İçine Al öncesinde

Try catch içine al sonrasında — Try Catch İçine Al sonrasında

Koşul içine al

Koşul İçine Al'ı yalnızca belirli bir koşulda derlemek üzere koddaki bir deyim için kullanın.

Koddaki bir deyimi seçin, sağ tıklatın ve Elden Geçir > Koşul İçine Al'ı kullanın.

Koşul içine al öncesinde — Koşul İçine Al öncesinde

Koşul içine al sonrasında — Koşul İçine Al sonrasında

Ok fonksiyonuna dönüştür

Ok fonksiyonu, this, arguments, super veya new.target gibi kendi fonksiyon deyimlerine sahip olmayan bir deyimdir. Bu fonksiyon deyimleri, yöntem olmayan deyimler içindir ve yapıcı olarak kullanılamaz.

İmleci fonksiyona yerleştirin, sağ tıklatın ve Elden Geçir > Ok Fonksiyonuna Dönüştür'ü seçin.

Ok fonksiyonuna dönüştür öncesinde — Ok Fonksiyonuna Dönüştür öncesinde

Ok fonksiyonuna dönüştür sonrasında — Ok Fonksiyonuna Dönüştür sonrasında

Not:

Seçilen ifadenin bir parametresi varsa parametre yapısı param => {statement} olarak görünür.
Seçilen ifadenin sıfır veya param (param1, param2) gibi birden fazla parametresi varsa parametre yapısı param (param1, param2) => {statements} olarak görünür.

Getters/setters oluştur

JavaScript'te, belirli bir özelliğin değişiklik gerektirdiği bir fonksiyonu yürütmek için bir setter kullanılabilir. Setters (ayarlayıcılar) çoğu zaman, bir tür sözde özellik oluşturmak için getters (alıcılar) ile birlikte kullanılır. Gerçek bir değere sahip bir özellik için setter oluşturamazsınız.

İmleci bir nesne deyiminin üyesine yerleştirin, sağ tıklatın ve Elden Geçir > Getters/Setters Oluştur'u seçin.

Getters/setters oluştur öncesinde — Getters/Setters Oluştur öncesinde

Getters/setters oluştur sonrasında — Getters/Setters Oluştur sonrasında

Sorun giderme ipuçları

Aşağıdaki tabloda, hatalı kod seçimi nedeniyle ekranda görüntülenen ilgili hata mesajları için sorun giderme ipuçları verilmektedir:

Fonksiyon adı	Hata mesajı	Sorun giderme ipucu
Yeniden Adlandır	Belirtilen konumda deyim yok	İmleci bir değişkenin veya fonksiyonun adının önüne veya üzerine yerleştirin.
Değişkene Ayıkla	Seçim bir deyim oluşturmuyor	Kodu elden geçirmeden önce kodda bir deyim seçin.
Fonksiyona Ayıkla	Seçilen blok, ifade kümesini veya bir deyimi temsil etmelidir	Bir ifade kümesi veya deyim içeren bir bloğu seçtiğinizden emin olun.
Try Catch İçine Al	Try-catch bloğu içine almak için geçerli kodu seçin	Try catch elden geçirme seçeneğini uygulamadan önce herhangi bir kodu seçtiğinizden emin olun.
Koşul İçine Al	Koşul bloğu içine almak için geçerli kodu seçin	Koşul İçine Al elden geçirme seçeneğini uygulamadan önce bir deyim seçtiğinizden emin olun.
Ok Fonksiyonuna Dönüştür	İmleci bir fonksiyon deyiminin içine yerleştirin	Elden geçirme seçeneğini uygulamadan önce imleci bir fonksiyon deyiminin içine yerleştirdiğinizden emin olun.
Getters/Setters Oluştur	İmleci bir nesne deyiminin üyesine yerleştirin	Getters/setters oluştur elden geçirme seçeneğini uygulamadan önce imleci nesne deyiminin bir üyesine yerleştirdiğinizden emin olun.

Metin bulma ve değiştirme

Sitenizde veya klasörünüzde herhangi bir metin, kod ya da boşluk aramak için Dreamweaver'ın bul ve değiştir özelliklerini kullanabilirsiniz.

Bir işaretlemenin tamamını aratabilir veya aramanızı Tasarım görünümünde oluşturulan bir metin ya da yalnızca kod ile sınırlayabilirsiniz.

Ayrıca gelişmiş bul ve değiştir işlemleri için güçlü desen eşleme algoritmalarını (normal deyimler) kullanabilirsiniz.

Metni bulduğunuzda bunu belirlediğiniz bir metin, kod veya boşluk ile değiştirmeyi tercih edebilirsiniz.

Daha fazla bilgi için bkz. Metin bulma ve değiştirme.

Kod görünümünde görüntüleri ve renkleri önizleme

Görüntüler ve renkler için ilgili kodu ekledikten sonra doğrudan Kod görünümü içinden önizleme yapabilirsiniz.

Görüntü önizlemesi

Kod görünümünde herhangi bir görüntünün önizlemesini görmek için farenizi görüntü URL'sinin üzerine getirin. Aşağıdakilerden biri olarak başvurulan görüntülere önizleme yapabilirsiniz:

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

Dreamweaver uzakta barındırılan görüntülerin önizlemelerini de gösterir.

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

Aşağıdaki görüntü türlerinin önizlemesini yapabilirsiniz:

JPEG
JPG
PNG
GIF
SVG

Renk önizlemesi

Kod Görünümü'nde renklere önizleme yapmak için farenizi renk değerlerinin üzerine getirin. Desteklenen dosya formatları şunlardır:

3 ve 6 basamaklı Onaltılık 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.

Renk önizlemesi daha önce belirtilen renk formatları için tüm belge türlerinde kullanılabilir.

Değeri sağ tıklatın ve renk seçiciyi açmak için Hızlı Düzenleme'yi seçip farklı bir renk belirleyin.

Not:

Görüntüler ve renkler için önizlemeleri devre dışı bırakmak isterseniz Görünüm > Kod Görünümü Seçenekleri > Varlık Önizleme seçeneğinin işaretini kaldırın.

Kodu yazdırma

Çevrimdışı olarak düzenlemek, arşivlemek veya dağıtmak için kodunuzu yazdırabilirsiniz.

Kod görünümünde bir sayfa açın.
Dosya > Kodu Yazdır'ı seçin.
Yazdırma seçeneklerini belirleyin ve ardından Tamam'ı (Windows) veya Yazdır'ı (Macintosh) tıklatın.