Dreamweaver CC'nin 2014 sürümüne yönelik en son güncelleştirmeler, Dreamweaver'da mobil ve masaüstü siteleri doğrudan bir PSD kompozisyonundan oluşturmanıza yardımcı olan Extract ile entegrasyon içerir. Yeni Canlı Kılavuzlar, HTML öğelerini doğru olarak yerleştirmenizi ve yeniden düzenlemenizi kolaylaştırır. Geliştirilmiş Canlı Görünüm'de düzenleme de gerçek zamanlı değişikliklere olanak verir.

Bu makalede, bu yeni özelliklerin yanı sıra diğer bazı geliştirmeler tanıtılır ve daha fazla yardım ve eğitim alabileceğiniz kaynaklara bağlar sağlanır.

Adobe Dreamweaver CC 2014.1.1 (Şubat 2015)

Yeni Karşılama ekranı

Dreamweaver'ı ilk kez mi kullanıyorsunuz? Dreamweaver'ı daha önce kullandınız ve becerilerinizi geliştirmenin yollarını mı arıyorsunuz? Önceki sürümden geçerli sürüme nelerin değiştiğini bilmek mi istiyorsunuz? İster yeni kullanmaya başlayan veya deneyimli bir kullanıcı ister Dreamweaver'ın yeni sürümünü değerlendiriyor olun, tüm temel öğrenim kaynaklarına artık doğrudan Karşılama Ekranı'ndan ulaşabilirsiniz.

Dreamweaver CC 2014 sürümüne yönelik en son güncelleştirme, Karşılama Ekranı'ndan videolara (yeni özellikler de dahil), uygulamalı eğitimlere, ipuçları ve tekniklere ve çok daha fazlasına hızlıca erişilebilmesini sağlar.

Karşılama ekranı
Karşılama ekranı

Not:

Bu yeni Karşılama Ekranı yalnızca İngilizce yerel ayarlarını kullananlara sunulur. Diğer yerel ayarları kullananlar için Dreamweaver CC 2014.1 sürümündeki Karşılama Ekranı ve Yeni Özellik açıklaması görüntülenir.

Extract panelindeki geliştirmeler

Görüntüleri Extract panelinden sürüklediğinizde Canlı Kılavuzlar ve Öğeye Hızlı Bakış simgesi artık Canlı Görünüm'de görünür. Bu görsel yardımcılar, görüntüyü gerekli konuma hızlı ve hassas biçimde yerleştirmenize yardımcı olur.

Extract paneli
Extract paneli

Canlı Görünüm'de düzenlemeye ilişkin geliştirmeler

Öğeleri sürükleyip bırakma

Canlı Görünüm'de öğeleri artık ilişkilendirilmiş etiket adını sürükleyerek taşıyabilirsiniz. Fareyi etiket adının üzerine getirdiğinizde, ilgili öğenin sürüklenebileceğini gösteren bir el imleci görünür. Sürüklediğiniz öğeyi, öğenin bırakıldıktan sonraki yerleşiminin nasıl olduğunu görsel olarak belirten Canlı Kılavuzlar yardımıyla bırakabilirsiniz.

Seçim çerçevesi ile seçme

Etiketin içinde bir alanı tıklatıp sürükleyerek metin, görüntüler veya başka öğeleri seçebilirsiniz (seçim çerçevesi ile seçme). Seçim çerçevesi ile seçme, etiket içindeki birden çok öğeyi kolaylıkla seçmenize yardımcı olur.

Not:

Canlı Görünüm'de seçim çerçevesi ile seçmede yalnızca tarayıcı tarafından desteklenen işlemler desteklenir.

Öğe Görüntüleme geliştirmeleri

Öğe Görüntüleme bir sınıfın veya Kimliğin belirtilebildiğini açıkça göstermek için 'Sınıf/Kimlik' ipucu metnini gösterir.

Ayrıca, Öğe Görüntüleme'de yaptığınız değişiklikler '+' simgesini tıklattığınızda kaydedilir. Değişiklikleri kaydetmek için Dreamweaver'ın önceki sürümlerinde olduğu gibi Enter veya Return tuşuna da basabilirsiniz. 

Yeni Kod Görünümü temaları

Kod Görünümü'ne on yeni renk teması eklendi:

  • RecognEyes
  • Havenjark
  • Solarized Koyu
  • Solarized Açık
  • Wombat
  • Monaki
  • Schuss
  • Tango
  • Cool Light
  • Roboticket

Kod Görünümü temaları hakkında daha fazla bilgi için bkz. Kod Görünümü için renk temasını ayarlama.

CSS Tasarımcısı geliştirmeleri

Bu güncelleştirme, CSS Tasarımcısı kullanıcı arabiriminde birkaç değişikliğin yanı sıra Ayarlı Olanları Göster onay kutusunun varsayılan ayarında bir değişiklik içerir.

Başlangıçta, Ayarlı Olanları Göster onay kutusu varsayılan olarak seçilidir ve bu seçenekte yapılan değişiklikler sonraki Dreamweaver oturumlarında da korunur. Örneğin, bu seçeneğin işaretini kaldırırsanız, bir sonraki Dreamweaver oturumunda bu ayar korunur ve seçenek işaretlenmemiş olarak görüntülenir.

Kullanıcı arabiriminde yapılan değişiklikler:

  • CSS Tasarımcısı paneli bir özellik eklenirken kaydırılır: Özellikler bölümünde “+” simgesini tıklattığınızda panel kaydırılarak, Özellik Ekle satırının neredeyse Özellikler panelinin ortasına gelmesi sağlanır. Özellikler bölümü çok küçük ise, panel kaydırılarak bölümün alt kısmındaki Özellik Ekle satırı gösterilir.
  • Arka plan vurgusu: Yeni Özellik Ekle metin kutusuna odaklanılmış durumdayken satır gri arka planla vurgulanır. 
  • '+' ve '-' düğmelerinin konumu: CSS Tasarımcısı panelinin her bölümünde (Kaynak, Seçiciler, Ortam sorgusu ve Özellikler) görünen “+” ve “-” düğmelerinin konumu daha fazla görünürlük sağlamak için en sağdan şimdi sola taşındı.
  • 'Özel' kategorisinin adı 'Daha Fazla' olarak değiştirildi.

Canlı Görünüm'de uzaktan hata ayıklama

Canlı Görünüm'de açık olan Dreamweaver belgelerinizde artık Google Chrome DevTools kullanarak uzaktan hata ayıklayabilirsiniz. Google Chrome'da, aşağıdaki adımları izleyerek etkinleştirebileceğiniz 5471 numaralı bağlantı noktasını kullanabilirsiniz:

  1. Aşağıdaki komutu yürüterek Dreamweaver'ı başlatın:

    • Windows: <yükleme_yolu> -enableRemoteDebugging
    • Mac: open <yükleme_yolu> --args -enableRemoteDebugging

    Not: args parametresinden önce iki tire yazın

  2. 5471 numaralı bağlantı noktasının hata ayıklama için etkinleştirildiğini belirten iletişim kutusunda Tamam'ı tıklatın.

    Dreamweaver başlatılır.

    Dreamweaver'ı başlatmak için iletişim kutusunda Tamam'ı tıklatın.
    Dreamweaver'ı başlatmak için iletişim kutusunda Tamam'ı tıklatın.

  3. Hata ayıklamak istediğiniz belgeleri Canlı Görünüm'de açın.

  4. Hata ayıklamaya başlamak için Google Chrome'u açın ve adres çubuğuna localhost:5471 yazın. Dreamweaver'daki tüm açık belgelere ait bağların yer aldığı bir liste görüntülenir. 

    Not: Yeni Karşılama Ekranı ve Extract paneli Chromium Embedded Framework (CEF) kullandığı için, bu özelliklerle ilişkili varlıkları da görürsünüz.

    Gerekli belgelerde hata ayıklamak için artık Google Chrome DevTools'u kullanabilirsiniz.

  5. Hata ayıklamayı durdurmak ve Dreamweaver'ı normal modda açmak için Dreamweaver'dan çıkın ve uygulamayı yeniden başlatın.

Diğer geliştirmeler

Tercihleri sıfırla iş akışındaki değişiklikler

Klavye kısayollarını kullanarak tercihleri sıfırladığınızda, Dreamweaver artık tercihlerinizin yedek bir kopyasını 'Adobe Dreamweaver CC 2014.1 Backups' klasöründe oluşturur. Bu klasör otomatik olarak, Windows ve Mac üzerinde orijinal Dreamweaver tercihler klasörüyle aynı klasörde oluşturulur.

Yedekleme klasörünün tam yolu, sıfırlama tercihleri iletişim kutusunda görüntülenir.

Tercihleri ve ayarları sıfırlama
Tercihleri ve ayarları sıfırlama

Dinamik belgelerin görünüm modundaki değişiklik

PHP, CFM ve ASP gibi dinamik belgeler artık varsayılan olarak Kod Görünümü'nde açılmaz. Son kapatılan belge veya odakta bulunan son belge ile aynı modda (Kod/Canlı/Böl) açılırlar.

Adobe Dreamweaver CC 2014.1 (Ekim 2014)

Dreamweaver'da Extract

Extract ile Dreamweaver entegrasyonu, web tasarımcılarının ve geliştiricilerin doğrudan kod yazma ortamı içinden tasarım bilgilerini uygulamalarına ve web için en iyileştirilmiş varlıkları ayıklamalarına olanak verir. Extract, stil bilgilerini ve varlıkları PSD kompozisyonlarından ayıklamak için eksiksiz ve kendi kendine yeterli bir çözüm sağlayarak Photoshop ve Dreamweaver programları arasında geçiş yapıp durma gereğini azaltır.

Dreamweaver'daki Extract paneliyle CSS, görüntüler, fontlar, renkler, degradeler ve ölçüleri doğrudan web sayfanıza ayıklayabilirsiniz. Dreamweaver bu temel Extract özelliklerinin yanı sıra aşağıdaki benzersiz özellikleri de sunuyor:

  • Creative Cloud'daki PSD dosyalarınıza ve sizinle bir iş birliği klasöründe paylaşılmış olan PSD dosyalarına doğrudan erişim
  • CSS'nizde font, renk ve degradeleri bağlamsal kod ipucu kullanarak kolaylıkla tanımlama
  • PSD katmanlarından görüntü etiketleri oluşturmak için sürükle ve bırak desteği
  • Stilleri doğrudan Canlı Görünüme yapıştırma (örneğin, CSS Tasarımcısı ve Öğe Görüntüleme)

Dreamweaver'daki varsayılan çalışma alanı (Extract adı verilir) hızla çalışmaya başlayabilmeniz için sol kısımda Extract panelini gösterir. Dreamweaver ilk kez başlatıldığında Extract panelinde, Extract iş akışları hakkında bilgi edinmenizi sağlayan basit bir eğitim gösterilir. Başlayın'ı tıklatarak Extract'i kullanmaya başlayabilirsiniz.

Extract paneli varsayılan çalışma alanı
Extract paneli

Dreamweaver'daki Extract iş akışları hakkında daha fazla bilgi için bkz. Dreamweaver ile Extract entegrasyonu.

64 bit mimari

Dreamweaver'ın 64 bit sürümü artık kullanılabilir ve 32 bit sürümünde bulunan tüm özellikleri destekler. Bu yenilik ile artık aşağıdaki Dreamweaver yapılarını Adobe Creative Cloud uygulamasından indirebilirsiniz:

OS Varsayılan yükleme konumu Uygulama Tercihleri klasörü
Windows 32 bit C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Windows 64 bit C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Mac 64 bit /Applications/Adobe Dreamweaver CC 2014.1 ~/Library/Application Support/Adobe/Adobe Dreamweaver CC 2014.1

Sık sorulan sorular

  • 64 bit uygulama Windows'un 32 bit sürümü üzerinde çalışır mı? - Hayır
  • Aynı Windows tabanlı makineye uygulamanın hem 32 bit hem de 64 bit sürümünü yükleyebilir miyim? - Hayır
  • Sistemimde Dreamweaver'ın 32 bit sürümünün mü yoksa 64 bit sürümünün mü çalıştığını nasıl kontrol edebilirim?
    • Windows: Dreamweaver'ı başlatın. Görev Yöneticisi'ni açın ve Dreamweaver işlemini arayın. Dreamweaver'ın başlatılan yapısı 64 bit ise işlemin adı “Dreamweaver.exe” olacaktır. Başlatılan yapı 32 bit ise işlemin adı “Dreamweaver.exe *32” olacaktır.
    • Mac: Etkinlik Monitörü'nü açın ve Görüntü > Sütunlar > Tür'e giderek kontrol edin. Etkinlik Monitörü'nde Dreamweaver'ı bulun ve Tür sütununda yazan değere bakın. Dreamweaver 64 bit ise Tür sütununda “64 bit” yazar.

Dreamweaver'ın 64 bit sürümünü yükleme

  1. Makinenizdeki işletim sisteminin 64 bit tabanlı olduğundan emin olun:

    Makinenizin 64 bit olup olmadığını kontrol etmek için aşağıdaki makalelerde açıklanan adımları uygulayın:

  2. Dreamweaver'ın 64 bit sürümünü Creative Cloud'dan indirin ve bu yapıyı yükleyin.

Canlı Görünüm'deki geliştirmeler

Canlı Kılavuzlar

Canlı Kılavuzlar, aşağıdaki senaryolarda Canlı Görünüm'de öğe ekleyebileceğiniz olası konumları gösteren görsel geri bildirimlerdir:

  • Ekle panelinden sürüklerken
  • Varlık panelinden sürüklerken
  • Canlı Görünüm içinden öğeleri sürüklerken (taşırken).

Not:

Canlı Kılavuzlar, Değişken Izgara belgelerinde desteklenmez.

Öğeyi bırakmadan önce fareyi sayfadaki farklı öğeler üzerine getirdiğinizde Canlı Kılavuzlar görüntülenir. Üzerine gelinen öğenin üstünde, altında, solunda veya sağında görünebilirler.

  • Üstünde ve Altında: Satır içi etiketler dışında, her türlü öğe/etiket üzerine gelindiğinde görünür. Fareyi öğenin ilk (üst) %50'sinin üzerine getirdiğinizde kılavuzlar üzerine gelinen öğenin üstünde görünür. Fareyi öğenin son (alt) %50'sinin üzerine getirdiğinizde kılavuzlar üzerine gelinen öğenin altında görünür.
Üzerine gelinen öğelerin üstünde ve altında Canlı Kılavuzlar
Üzerine gelinen öğelerin üstünde ve altında Canlı Kılavuzlar

  • Sol ve Sağ: Satır içi etiketlerin (örneğin <a>, <span>) veya “float özelliği” ayarlanmış olan etiketlerin üzerine gelindiğinde görünür.
Üzerine gelinen öğelerin sağında ve solunda Canlı Kılavuzlar
Üzerine gelinen öğelerin sağında ve solunda Canlı Kılavuzlar

Yapısal öğeleri tam olarak yerleştirme

HTML öğelerini belge yapısına daha doğru şekilde yerleştirmek için Canlı Kılavuzlar'ın yanı sıra Öğeye Hızlı Bakış'ı da kullanabilirsiniz.  

Öğeyi bırakmadan önce bir süre beklerseniz Öğeye Hızlı Bakış simgesi (</>) görünür. Farenizi bu simgenin üzerine getirdiğinizde Öğeye Hızlı Bakış açılır ve ilgili öğeyi Öğeye Hızlı Bakış içine bırakabilirsiniz.

Öğeye Hızlı Bakış simgesi
Tam olarak yerleştirmenize yardımcı olan Öğeye Hızlı Bakış simgesi

Canlı Görünüm'de Bağlam menüsü

Bundan sonra sağ tıklatma bağlam menüsünü kullanarak öğeleri Canlı Görünüm'de kesebilir, kopyalayabilir, yapıştırabilir ve silebilirsiniz. Bağlam menüsünü kullanarak Canlı Görünüm'de öğeleri de çoğaltabilir veya ana etiketi ya da alt etiketi seçebilirsiniz.

Not:

Canlı Görünüm'de klavye kısayollarını da kullanabilirsiniz (örneğin Windows'ta Ctrl+x, ctrl+c, Ctrl+v, Ctrl + d ve Delete tuşu).

Önce, Canlı Görünüm'de bir öğe seçerek Öğe Görüntüleme'de görüntüleyin. Daha sonra etiket alanının içini sağ tıklatarak yukarıdaki bağlam menüsü seçeneklerini görüntüleyin. Bu seçenekler etiket düzeyinde işlevseldir. 

Öğe Görüntüleme'deki değişiklikler

Öğe Görüntüleme'yi kullanarak artık bir öğeye seçiciler uygulamakla kalmıyor, aynı zamanda istediğiniz CSS kaynağında bir seçici oluşturup ortam sorgusu atayabiliyorsunuz. Herhangi bir stil sayfasında bulunmayan bir seçici yazıp Enter tuşuna bastığınızda Öğe Görüntüleme bir CSS kaynağı ve ortam sorgusu belirleme seçeneklerini sunar.

Öğe Görüntüleme'deki CSS Kaynağı ve Ortam Sorgusu seçenekleri
Öğe Görüntüleme'deki CSS Kaynağı ve Ortam Sorgusu seçenekleri

CSS kaynağı veya ortam sorgusu seçmek istemezseniz Esc tuşuna basarak bu seçenekleri atlayın.

Uygulanan bir seçiciyi sağ tıklatıp ilgili koda gidebilir (Koda Git seçeneği) veya kopyalanan stilleri yapıştırabilirsiniz (Stilleri Yapıştır seçeneği).

Öğe Görüntüleme'deki Koda Git ve Stilleri Yapıştır seçenekleri
Öğe Görüntüleme'deki Koda Git ve Stilleri Yapıştır seçenekleri

Not:

Koda Git seçeneği, aynı seçici birden çok ortam sorgusuna eklenmişse alt seçenekleri gösterir. Stilleri Yapıştır seçeneği, kopyalanan seçiciler sahteyse veya bileşen seçicileriyse alt seçenekleri gösterir.

Canlı Görünüm'de öğeleri taşıma

Dreamweaver artık öğelerin Canlı Görünüm'de (etiket düzeyinde) taşınmasını destekliyor. Bir öğeyi Canlı Görünüm'de seçebilir ve sürükleyip başka bir konuma bırakabilirsiniz.

  1. Taşımak istediğiniz öğeyi tıklatın ve Öğe Görüntüleme (öğeyi çevreleyen mavi kutu) göründüğünde öğeyi sürükleyin. “Sürükleme” işlemi başlatıldığında fare imleci öğenin taşınmaya hazır olduğunu belirtecek biçimde değiştirilir.

  2. Referans öğeleri (sürüklenen öğeyi yerleştirirken konumunu referans alacağınız asıl öğeler) mavi bir kenarlıkla vurgulanır. Referans öğesine göreceli olarak yerleştirilebilecek konumları belirtmek için Canlı Kılavuzlar (yeşil renkli) görüntülenir.

Not:

Canlı Görünüm'de yalnızca statik öğeler taşınabilir. PHP gibi dinamik içerik etiketleri taşınamaz.

Öğeyi bırakmadan önce bir süre beklerseniz Öğeye Hızlı Bakış simgesi (</>) görünür. Farenizi bu simgenin üzerine getirdiğinizde Öğeye Hızlı Bakış açılır ve ilgili öğeyi Öğeye Hızlı Bakış içine bırakabilirsiniz. 

Canlı Görünüm'de klavyeyi kullanarak gezinme

Dreamweaver, hızlı klavye kullanıcılarının işini kolaylaştırmak ve web tasarımı sürecini hızlandırmak için sayfa öğelerinde artık klavye kullanarak gezinilmesini destekliyor. Şunları yapabilirsiniz:

  • Yukarı ve aşağı ok tuşlarını kullanarak sayfa öğeleri arasında gezinebilirsiniz. Canlı Görünüm'de klavyeyi kullanarak gezinmek, iç içe ve sarılmış öğelere kolay erişim sağlar.
  • Sekme tuşunu kullanarak Öğe Görüntüleme'de seçiciler arasında geçiş yapabilirsiniz

Daha fazla bilgi için bkz. Canlı Görünüm'de klavyeyi kullanarak gezinme.

Canlı Görünüm'de Hızlı Etiket Düzenleyici

Canlı Görünüm'deyken Windows'ta Ctrl+T veya Mac'te Cmd+T tuşlarına bastığınızda, seçili öğe için bir Hızlı Etiket Düzenleyici görüntülenir. Hızlı Etiket Düzenleyici için üç farklı durum kullanılır: Etiketi Düzenle, Etiketi Sar ve HTML Ekle. Ctrl/Cmd + T tuş bileşimiyle bu durumlar arasında geçiş yapabilirsiniz.

Canlı Görünüm'de Hızlı Etiket Düzenleyici
Canlı Görünüm'de Hızlı Etiket Düzenleyici

Dreamweaver çalışma alanındaki değişiklikler

Belge araç çubuğundaki değişiklikler

Belge araç çubuğu değiştirildi ve kullanımı daha basit hale getirildi.

  • Tasarım ve Canlı Görünüm seçenekleri tek bir denetim (açılır liste) olarak birleştirildi.
Dreamweaver CC (Ekim 2014) sürümünde Tasarım ve Canlı Görünüm seçenekleri
En son güncelleştirme olan Dreamweaver CC (Ekim 2014) sürümünde Tasarım ve Canlı Görünüm seçenekleri

Önceki sürümlerde Belge araç çubuğundaki Tasarım ve Canlı Görünüm düğmeleri
Önceki sürümlerde Belge araç çubuğundaki Tasarım ve Canlı Görünüm düğmeleri

  • Belge Başlığı alanı artık Özellik Denetçisi'ne taşındı.
Dreamweaver CC'de (Ekim 2014) Belge araç çubuğu
En son güncelleştirme olan Dreamweaver CC (Ekim 2014) sürümünde Belge araç çubuğu

Dreamweaver CC'nin (Ekim 2014) Belge Başlığı alanı Özellik Denetçisi'ne taşındı
En son güncelleştirme olan Dreamweaver CC (Ekim 2014) sürümünde Belge Başlığı alanı Özellik Denetçisi'ne taşındı

Önceki sürümlerde Belge araç çubuğundaki Başlık alanı
Önceki sürümlerde Belge araç çubuğundaki Başlık alanı

  • İnceleme ve Canlı Kod düğmeleri simgelerle değiştirildi.
Dreamweaver CC (Ekim 2014) sürümünde Canlı Kod ve İnceleme simgeleri
En son güncelleştirme olan Dreamweaver CC (Ekim 2014) sürümünde Canlı Kod ve Denetle simgeleri

Önceki sürümlerde Canlı Kod ve Denetle düğmeleri
Önceki sürümlerde Canlı Kod ve İncele düğmeleri

  • Geri, İleri, Yenile seçenekleri Adres çubuğu ile birlikte gruplandırıldı ve Belge araç çubuğunun ortasına yerleştirildi.
Dreamweaver CC'de (Ekim 2014) Geri, İleri ve Yenile seçenekleri bulunan Adres çubuğu
En son güncelleştirme olan Dreamweaver CC (Ekim 2014) sürümünde Geri, İleri ve Yenile seçenekleri bulunan Adres çubuğu

Önceki sürümlerde Geri, İleri ve Yenile seçenekleri bulunan Adres çubuğu
Önceki sürümlerde Geri, İleri ve Yenile seçenekleri bulunan Adres çubuğu

  • Tarayıcıda Önizle/Hata Ayıkla, Canlı Görünüm Seçenekleri ve Dosya Yönetimi simgeleri gruplandırıldı ve Belge araç çubuğunun sağına hizalandı.
Dreamweaver CC'de (Ekim 2014) Önizleme, tarayıcıda hata ayıklama, Canlı Görünüm seçenekleri ve Dosya Yönetimi simgeleri
En son güncelleştirme olan Dreamweaver CC (Ekim 2014) sürümünde Önizleme, Tarayıcıda Hata Ayıklama, Canlı Görünüm seçenekleri ve Dosya Yönetimi simgeleri

Önceki sürümlerde Önizleme, Tarayıcıda Hata Ayıklama, Canlı Görünüm seçenekleri ve Dosya Yönetimi simgeleri)
Önceki sürümlerde Önizleme, Tarayıcıda Hata Ayıklama, Canlı Görünüm seçenekleri ve Dosya Yönetimi simgeleri)

Varsayılan çalışma alanındaki değişiklikler

Dreamweaver ile birlikte hazır olarak gelen çalışma alanları değiştirildi ve artık şu şekilde sunuluyor:

  • Kod
  • Tasarım
  • Extract
Çalışma Alanları
Çalışma Alanları

Varsayılan çalışma alanı artık Extract'tir. Bu çalışma alanında Extract paneli solda ve web sayfası da sağda görünür. Dreamweaver ilk kez başlatıldığında Extract panelinde, Extract iş akışları hakkında bilgi edinmenizi sağlayan basit bir eğitim görüntülenir. Extract'i kullanmaya başlamak için Başlayın'ı tıklatın.

Extract çalışma alanı
Extract çalışma alanı

HTML belgeleri için varsayılan görünüm artık, Canlı Görünüm ve Kod Görünümü gösterilecek biçimde yatay olarak bölünmüş olan Böl Görünümü'dür. Aşağıda listelenenler gibi dinamik dosyalar varsayılan olarak tam Kod Görünümü'nde açılır. Görünümleri böldüğünüzde bu belgeler Tasarım ve Kod Görünümü'nde gösterilir.

  • PHP
  • PHP Şablonu (Example.dwt.php)
  • ASP
  • ASP Şablonu (Example.dwt.asp)
  • JSP
  • JSP Şablonu (Example.dwt.jsp)
  • CFM
  • CFM Şablonu (Example.dwt.cfm)
HTML belgeleri için Canlı Görünüm'ün ve Kod Görünümü'nün gösterildiği varsayılan görünüm
HTML belgeleri için Canlı Görünüm'ün ve Kod Görünümü'nün gösterildiği varsayılan görünüm

Dinamik belgeler için tam Kod Görünümü'nün gösterildiği varsayılan görünüm
Dinamik belgeler için tam Kod Görünümü'nün gösterildiği varsayılan görünüm

İpucu: Tasarım Görünümü'ne geçiş yapmak için, “Canlı” seçeneğinin bitişiğindeki açılır listeyi ve sonra da Tasarım'ı tıklatın. Yatay bölmeyi dikey bölmeye dönüştürmek için Görünüm > Dikey Böl'ü seçin. Canlı/Tasarım Görünümü şimdi solda görünüyor. Canlı/Tasarım Görünümü'nü sağa almak için Görünüm > Canlı Görünüm Solda veya Tasarım Görünümü Solda seçimini kaldırın.

Dreamweaver artık bir HTML belgesi için seçtiğiniz Canlı Görünüm durumunu hatırlıyor ve aynı görünümü daha sonra açtığınız tüm HTML belgelerine uyguluyor. Örneğin, ilk açtığınız belgenin HTML1 olduğunu varsayalım. Belge görünümü, Kod Görünümü ve Canlı Görünüm olarak bölünmüştür. Bu belgenin görünümünü tam Canlı Görünüm'e dönüştürdüğünüzü varsayalım. Bundan sonra, açtığınız ilk belge (diyelim ki HTML2) tam Canlı Görünüm'de görüntülenir.  

Değişken ızgara belgelerindeki değişiklikler

Canlı Görünüm'de düzenleme desteği

Canlı Görünüm'deki yeni düzenleme özellikleri Dreamweaver CC'nin önceki sürümünde sunuldu. Bu sürümde, Canlı Görünüm'deki bu düzenleme özellikleri değişken ızgara belgeleri için de sunulur. Değişken bir web sayfasının geliştirilmesi Canlı Görünüm'de düzenleme yaparak hızlandırılabilir, çünkü değişiklikleri aynı görünüm içinde anında düzenleyebilir ve önizleyebilirsiniz.

Aşağıdaki özellikler değişken ızgara belgelerini Canlı Görünüm'de düzenlemenize yardımcı olur:

Değişken ızgara belgesinin HTML DOM yapısını artık Öğeye Hızlı Bakış kullanarak da görselleştirebilirsiniz. 

Not: Değişken ızgara mizanpajlarında Öğeye Hızlı Bakış, HTML öğelerini kopyalamanıza, yapıştırmanıza, çoğaltmanıza veya yeniden düzenlemenize olanak vermez.

Değişken ızgara belgelerini görüntülemeye ve düzenlemeye yönelik kullanıcı arabirimi Canlı Görünüm'deki düzenleme özelliklerini kapsayacak şekilde değiştirildi. Değişken ızgara belgesinde bir öğeyi seçtiğinizde artık Öğeleri Gizle ve Yeni Satır Başlat gibi denetimlerin yanı sıra Öğe Görüntüleme de gösterilir.

Önceki sürümlerde değişken ızgara seçenekleri
Önceki sürümlerde değişken ızgara seçenekleri

Dreamweaver CC'de (Ekim 2014) Öğe Görüntüleme ile birlikte değişken ızgara seçenekleri
En son güncelleştirme olan Dreamweaver CC (Ekim 2014) sürümünde Öğe Görüntüleme ile birlikte değişken ızgara seçenekleri

Ayrıca, değişken ızgara belgeleri artık doğrudan Canlı Görünüm'de açılır. Değişken ızgara belgelerini bundan sonra Tasarım Görünümü'nde görüntüleyemez veya düzenleyemezsiniz.

Dreamweaver CC'de (Ekim 2014) Belge araç çubuğu
En son güncelleştirme olan Dreamweaver CC (Ekim 2014) sürümünde Belge araç çubuğu

Önceki sürümlerde değişken ızgara belgesindeki Belge araç çubuğu
Önceki sürümlerde değişken ızgara belgesindeki Belge araç çubuğu

Değişken ızgara belgeleri hakkında daha fazla bilgi için bkz. Değişken ızgara mizanpajlarını kullanarak dinamik tasarım.

Ekle iş akışındaki değişiklikler

Değişken ızgara belgeleri için Ekle iletişim kutusu artık bir “konum yardımı” içeriyor. Konum yardımı, eklenen öğeyi odaktaki öğenin öncesine, sonrasına veya bu öğeyle iç içe yerleştirebilmenizi sağlar (Canlı Görünüm'de). Değişken ızgara özellikleri ekleme hakkında daha fazla bilgi için bkz. Değişken ızgara öğeleri ekleme.

Gizli Öğeleri Yönet seçeneğindeki değişiklik

Gizli Öğeleri Yönet seçeneği (belge araç çubuğundaki göz düğmesi) bir değişken ızgara belgesindeki bağlam menüsüne taşındı.


Gizli öğeleri yönetmek için, değişken ızgara sayfasını sağ tıklatın ve “Gizli Öğeleri Yönet”i seçerek gizli öğeleri görüntüleyin. Bu öğeleri gizlemek için HUD'deki göz simgesini tıklatabilirsiniz. 

Dreamweaver CC'de (Ekim 2014) sağ tıklatma menüsündeki Gizli Öğeleri Yönet seçeneği
En son güncelleştirme olan Dreamweaver CC (Ekim 2014) sürümünde sağ tıklatma menüsündeki Gizli Öğeleri Yönet seçeneği

Önceki sürümlerde gizli öğeleri yönetmek için kullanılan “göz” simgesi
Önceki sürümlerde gizli öğeleri yönetmek için kullanılan “göz” simgesi

Kod Görünümü için hazır olarak gelen renk temaları

Kod Görünümü için artık aşağıdaki kullanıma hazır olarak sunulan renk temalarından birini kullanabilirsiniz:

  • Klasik (varsayılan seçimdir; Dreamweaver'ın önceki sürümleri ile aynıdır)
  • Raven
  • Slate
  • Blanche
  • Geneva
Klasik, Raven, Slate, Blanche ve Geneva temaları
Klasik, Raven, Slate, Blanche ve Geneva temaları

Kod Görünümü için bir tema belirtmek üzere kod renklendirmesi tercihlerini kullanın. Arka planlar, önplanlar ve gizli karakterler için farklı renk şemaları seçerek temayı özelleştirebilirsiniz.

Listelenen her bir belge türü için etiket ve kod öğelerinin formla ilgili etiketler veya JavaScript tanımlayıcıları gibi farklı kategorilerine ait renkleri özelleştirebilirsiniz. Örneğin, tüm belge türlerine uygulanan Raven temasıyla, formla ilgili etiketler için yalnızca HTML belgelerinde mavi renk olmasını seçebilirsiniz.

Uygula'yı tıklattığınızda temadaki tüm özel ayarlar kaydedilir ve bu özelleştirilmiş tema Dreamweaver oturumlarında kullanılabilir.

Not:

Özelleştirilmiş kod temalarını Tercihler iletişim kutusundaki Ayarları Senkronize Et seçeneğini kullanarak Dreamweaver örnekleriniz arasında senkronize olarak tutabilirsiniz. Daha fazla bilgi için bkz. Dreamweaver ayarlarını Creative Cloud ile senkronize etme.

Kod Görünümü ve Canlı Görünüm senkronizasyonu

Kod Görünümü ve Canlı Görünüm senkronizasyonu, koda Canlı Görünüm'de yaptığınız değişiklikleri anında önizleyebilmenizi sağlar. Dreamweaver'ın önceki sürümlerinden farklı olarak, değişiklikleri Canlı Görünüm'de önizlemek için Yenile'yi tıklatmanız gerekmez.

Kod Görünümü ve Canlı Görünüm senkronizasyonunun nasıl gerçekleştiğini aşağıdaki iş akışlarında (odak Kod Görünümü'nde iken) görebilirsiniz:

  • Kes/Kopyala/Yapıştır/Sil, Geri Al/Yinele gibi metin işlemleri.
  • Odak Kod Görünümü'ndeyken öğeleri Öğeye Hızlı Bakış'ta taşıma.
  • Kod Görünümü'nde yazma.
  • Öğeye Hızlı Bakış'ta Sil/Çoğalt/Kopyala/Yapıştır işlemleri (sağ tıklatma seçenekleri).
  • Özellik Denetçisi'nde, metin formatlarını değiştirme gibi işlemler; örneğin, Kalın/İtalik, Sınıfı Değiştirme, Kimlik, Format, Sayfa özellikleri ve font uygulama.
  • Kod Görünümü'nde kod ipuçları kullanarak Sınıf veya Kimlik ekleme/silme.
  • Ekle panelinden Kod Görünümü'ne Div, Image, köprü ve yapısal öğeler gibi öğeler ekleme.
  • <style> etiketi içinde CSS stilleri ekleme/düzenleme. 
  • CSS dosyalarında kod düzenleme.

Not:

JavaScript kodunda yapılan değişikliklerin Canlı Görünüm'de görülebilmesi için sayfanın tamamen yenilenmesi veya yeniden yüklenmesi gerekir. 

Canlı Görünüm'de Varlıklar paneli

Varlıklar paneli (Pencere > Varlıklar) artık Canlı Görünüm'de kullanılabilir. Varlıklar panelini kullanarak aşağıdaki görevleri kolaylıkla yönetebilirsiniz:

  • Varlıkları (görüntüler, URL'ler, renkler veya ortam) önizleme bölmesinden veya Varlıklar panelinin liste görünümünden sürükleyin ya da ekleyin.

Not: Mac'te varlıkları yalnızca önizleme bölmesinden sürükleyebilirsiniz.

  • Renk değerini kopyalayın ve Dreamweaver'daki CSS Tasarımcısı gibi herhangi bir metin alanına, Kod Görünümü'ne, renk seçiciye ve hatta Not Defteri gibi başka uygulamalara yapıştırın.

Not:

 

  • Komut Dosyaları, Şablon ve Kitaplık kategorileri Kod Görünümü'nde daha ilgili oldukları için Canlı Görünüm'ün Varlıklar panelinde gizlenmişlerdir.
  • Dreamweaver CC'nin bu sürümünde Flash ve Filmler kategorileri “Ortam” adı verilen tek bir kategoride birleştirilmiştir ..
         

Canlı Görünüm'de Varlıklar paneli
Canlı Görünüm'de Varlıklar paneli

Tasarım ve Kod Görünümü'nde Varlıklar paneli
Tasarım ve Kod Görünümü'nde Varlıklar paneli

Varlıklar panelinin nasıl kullanılacağına ilişkin ayrıntılı talimatlar için bkz. Varlıklarla Çalışma.

Yeni başlangıç şablonları

Dreamweaver, dinamik sitelerle çalışmaya daha hızlı başlayabilmeniz için artık yeni ve dinamik başlangıç şablonları içeriyor. Yeni Belge iletişim kutusunda yer alan aşağıdaki şablonlardan birini seçebilirsiniz (Dosya > Yeni > Başlangıç Şablonları):

  • Hakkında sayfası
  • Blog gönderisi
  • e-Ticaret
  • E-posta
  • Portföy
Yeni ve dinamik başlangıç şablonları
Yeni ve dinamik başlangıç şablonları

Bir şablon seçip Yeni Belge iletişim kutusunda Oluştur'u tıklattığınızda, Dreamweaver yeni belgeyi kaydetmek isteyip istemediğinizi sorar. Belgeyi kaydettiğinizde, şablonun daha sonra dilediğiniz şekilde özelleştirebileceğiniz bir kopyasını oluşturmuş olursunuz.

Bir sonraki başlatmada tercihleri sıfırla

Dreamweaver ile ilgili sorunları gidermek için bazen tüm özel ayarların bulunduğu tercihler klasörünü silmeniz gerekir. Bu sürüm öncesinde, makinenizde tercihler klasörüne el ile gidip bu klasörü silmeniz gerekiyordu. Bu sürümde, bir iletişim kutusu kullanarak tercihleri tek tıklatmayla silme seçeneği sunuluyor:

Tercihleri sıfırla
Tercihleri sıfırla

Dreamweaver'ı başlatırken aşağıdaki klavye kısayollarını basılı tutarak Tercihleri Sıfırla iletişim kutusunu açabilirsiniz:

  • (Win) Windows tuşu + Ctrl + Shift
  • (Mac) Cmd + Option + Shift

Not:

Tercihleri sıfırla seçeneğini sağduyulu bir şekilde kullanın. Tercihleri ve ayarları sıfırladığınızda çalışma alanı, klavye kısayolları, uzantılar ve uygulama tercihlerinde yapılan tüm özel ayarlar kaybolur.

Mac'te, Cmd + Option + Shift tuşlarını basılı tutarak Dreamweaver'ı başlatın (Dock'ta yer alan Dreamweaver simgesini tıklatın).

Windows'ta, şu adımları gerçekleştirin:

  1. Yükleme klasörüne gidip Dreamweaver.exe dosyasını bulun ve bu dosyayı tıklatın.

  2. Windows + Ctrl + Shift tuşlarını basılı tutarak Dreamweaver.exe dosyasını çift tıklatın.

Daha önce belirtilen kısayol tuşlarını Kullanıcı Hesabı Denetimi (UAC) iletişim kutusu görünürken dahi basılı tuttuğunuzdan emin olun. 

Diğer geliştirmeler

Ayarları senkronize etmeye yönelik değişiklikler

Dreamweaver'ın önceki sürümündeki Creative Cloud'da kayıtlı olan ayarları şimdi Tercihler iletişim kutusunu kullanarak içe aktarabilirsiniz. Dreamweaver'ın bir sonraki başlatılışında, buluttan içe aktarılan ayarlar tüm yerel ayarları geçersiz kılar ve uygulanır.

Dreamweaver'ın önceki sürümlerinden ayarları içe aktarma
Dreamweaver'ın önceki sürümlerinden ayarları içe aktarma

Bu sürümden itibaren ayrıca, önceki sürümlerde senkronize edilen ayarlara ek olarak aşağıdaki ayarlar da Creative Cloud ile senkronize edildi:

  • Yeni eklenen kod renk temaları
  • Mac'te, Uygulama çubuğu ve Uygulama çerçevesi ayarları

CSS Tasarımcısı değişiklikleri

Dreamweaver'ın bu sürümü CSS Tasarımcısı'ndaki kullanıcı deneyimine yönelik birçok geliştirme içerir. CSS Tasarımcısı paneli aynı zamanda iş akışlarını hızlı şekilde kullanmaya başlamanıza yardımcı olan bir alıştırma deneyimi de içerir.

Karşılama ekranındaki değişiklikler

Karşılama ekranındaki Site Şablonları seçeneği şimdi Başlangıç Şablonları ile değiştirildi. Site Şablonları'na, Yeni Belge iletişim kutusundan (Dosya > Yeni) erişebilirsiniz.

jQuery sürüm güncelleştirmeleri

Dreamweaver, aşağıdaki güncelleştirilmiş jQuery kitaplıklarını içerir:

  • jQuery - 1.8.3 ila jQuery - 1.11.1
  • jQuery UI - 1.9.2 ila jQuery UI - 1.10.4

jQuery başlatıcı sayfaları kaldırılmıştır. 

PhoneGap güncelleştirmesi

Dreamweaver'ın uygulamaları paketlemek için PhoneGap Build ile doğrudan entegrasyonu, Dreamweaver CC'nin 2014 sürümü (Ekim 2014) ve sonrasına yönelik en son güncelleştirmede desteklenmez.

Ancak doğrudan çevrimiçi PhoneGap Build hizmetine erişim sağlayıp en son özellik güncelleştirmelerinden yararlanarak web uygulamalarınızı yerel mobil uygulamalar olarak paketleyebilirsiniz. Daha fazla bilgi için bkz. PhoneGap Build hizmetini Dreamweaver CC'nin 2014 sürümüne yönelik en son güncelleştirme ile birlikte kullanma.

Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

Yasal Uyarılar   |   Çevrimiçi Gizlilik İlkesi