Kullanıcı Kılavuzu İptal

Dreamweaver'da Extract

Ara

Son güncelleme: 30 Ara 2021

PSD'lerinizi hızlı bir şekilde mobil ve masaüstü için HTML tabanlı web tasarımlarına çevirmeyi öğrenin. Photoshop'tan CSS, görüntüler, ölçüler, fontlar, renkler, degradeler ve çok daha fazlasını doğrudan Dreamweaver'a ayıklayın.

Not:

1 Temmuz 2022'den itibaren, Dreamweaver 21.2 ve önceki sürümlerinde Extract panelindeki özellikler kullanımdan kaldırılacaktır. Stil bilgilerini ve PSD bileşenlerindeki varlıkları ayıklamak için Adobe Photoshop kullanabilir ve bunları Dreamweaver'da yeniden kullanabilirsiniz.

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)

Extract'i kullanmaya başlama

CSS'yi ayıklama

Extract tercihlerini ayarlama

Metin kopyalama

Görüntü ayıklama

Fontları, renkleri ve degradeleri ayıklama

Ölçüleri ayıklama

Extract'i kullanmaya başlama

Dreamweaver'daki Extract, PSD dosyalarınıza doğrudan Dreamweaver'daki Extract paneli içinden erişebilmenizi sağlar. Extract paneli ve çalışma alanı ile Extract panelinde PSD dosyalarınızı yükleme konularında daha fazla bilgi edinmek için aşağıdaki konuları okuyun:

Extract paneli ve çalışma alanı

Extract çalışma alanı Extract'i Dreamweaver ile etkin bir şekilde kullanmanıza yardımcı olacak biçimde tasarlanmıştır. Bu çalışma alanının bölünmüş görünümünde (Canlı Görünüm ve Kod Görünümü), Extract paneli solda ve web sayfanız da sağda görünür. Panelleri ihtiyaçlarınızı karşılayacak şekilde sürükleyerek, sabitleyerek, daraltarak veya genişleterek çalışma alanını özelleştirebilirsiniz. Özelleştirilen çalışma alanını dilerseniz gelecekte kullanmak üzere kaydedebilirsiniz.

Not:

Extract panelini yanlışlıkla kapatırsanız paneli yeniden açmak için Ctrl + K (Win) veya Cmd + K (Mac) klavye kısayolunu kullanın ya da Pencere > Extract'i seçin.

Dreamweaver ilk kez başlatıldığında Extract panelinde, iş akışlarını kullanmaya başlayabilmeniz için etkileşimli bir eğitim görüntülenir. Panelin üst kısmındaki açılır listeyi kullanarak farklı eğitimler arasında geçiş yapabilirsiniz.

İlgili eğitimi kullandıktan sonra Başlayın'ı tıklatarak Dreamweaver'da Extract'i kullanmaya başlayabilirsiniz. Extract panelinde, Creative Cloud hesabınızdaki klasörlerin ve PSD dosyalarının bir minik resim görünümü görüntülenir. Bunlar masaüstünüzden yüklenen veya senkronize edilen ya da sizinle Creative Cloud'daki bir iş birliği klasöründe paylaşılan dosyalardır.

Creative Cloud'da kayıtlı olan PSD dosyaları Extract panelinde gösteriliyor

Not:

Eğitimi yeniden başlatmak için panelin sağ üst köşesindeki açılır menüyü tıklatın ve Eğitimi Başlat'ı seçin.

PSD dosyalarını Creative Cloud'a yükleme

PSD dosyasını Creative Cloud'a yüklemek için Pencere > Extract 'i seçin ve PSD'yi Yükle'yi tıklatın. PSD kompozisyonları başka bir kişi veya ekip tarafından geliştirilmişse bunları Creative Cloud'da paylaşmalarını isteyebilirsiniz. Böylece doğrudan Creative Cloud'da oturum açarak veya Dreamweaver'daki Extract paneli aracılığıyla dosyaları indirebilir ve hesabınıza yükleyebilirsiniz.

Not:

macOS cihazda Dreamweaver 21.2 veya sonraki sürümlerini kullanıyorsanız Finder penceresinden PSD dosya türünü etkinleştirin ve dosyanızı yükleyin.

macOS için

PSD dosyasını etkinleştirmek ve yüklemek için aşağıdaki adımları izleyin:

Extract panelinde PSD'yi Yükle'yi tıklatın.
Finder penceresinde, Seçenekler'i tıklatın ve açılan menüden *.psd seçeneğini belirleyin.
PSD dosyasını seçin ve dosyayı yüklemek için Aç'ı tıklatın.

PSD dosyalarını Extract panelinde açma

Extract panelinde, gerekli olan PSD dosyasının minik resim görüntüsünü tıklatın. PSD dosyasını açtıktan sonra dosyanın güncel bir sürümü Creative Cloud'da kullanılabilir olursa PSD dosyasını Extract panelinde yeniden yükleyin. Bunu yapmak için PSD dosyasının adını tıklatın veya sağ üstteki açılır menüde PSD'yi Yeniden Yükle'yi tıklatın. Minik resim görünümüne geri dönüp farklı bir dosya seçmek için panelin sağ üst kısmındaki Creative Cloud simgesini tıklatın.

Görünümü büyütmek ve tasarıma daha yakından bakmak için Extract panelinin üst kısmından yakınlaştırma düzeyini değiştirin veya Alt +/- tuş bileşimini kullanın. PSD dosyasındaki öğeleri göstermek veya gizlemek için Katmanlar sekmesini ya da Katman Kompozisyonu açılır listesini kullanın.

PSD kompozisyonunu bir web sitesinde oluşturmaya artık hazırsınız.

Extract tercihlerini ayarlama

Extract tercihlerini kullanarak, görüntülerin ayıklanması gereken varsayılan dosya formatını ve Extract panelinde görüntülenmesi gereken varsayılan font birimlerini belirtebilirsiniz.

Düzenle > Tercihler (Win) veya Dreamweaver > Tercihler (Mac) seçeneğini belirleyin.
Kategori listesinde Extract'i seçin.
(İsteğe bağlı) Görüntülerin ayıklanması gereken varsayılan formatı değiştirin.

Ayıklanan görüntü formatı
(İsteğe bağlı) Aygıtlar için Extract bölümünden, gerekli çözünürlükleri seçin. Bu ayarlar bir görüntüyü birden fazla çözünürlük sürümünde kaydetmeyi seçtiğinizde kullanılacaktır.
- Sürümleri son eklerle kaydetmek için Sonek sütunu altında karşılık gelen satırı tıklatın ve metni yazın.
- Birden fazla çözünürlük sürümünü ayrı ayrı çıktı klasörlerine kaydetmek için Klasör sütunu altındaki karşılık gelen satırı tıklatın ve göreli yolu belirtin.
Aygıtlar için Extract
(İsteğe bağlı) Extract kullanımıyla ilgili olarak önbelleğe alınmış verileri silmek için Önbelleği Temizle'yi tıklatın.
Uygula'yı tıklatın ve daha sonra Tercihler iletişim kutusunu kapatın.
Yaptığınız değişiklikleri Extract panelinde görmek için PSD'yi yeniden yükleyin (açılır menü > PSD'yi Yeniden Yükle).

Extract panelindeki PSD'yi Yeniden Yükle seçeneği

PSD dosyalarından CSS'yi ayıklama

PSD kompozisyonundaki CSS özelliklerinin tümünü veya belirli bir bölümünü kopyalayıp stilleri doğrudan CSS Tasarımcısı'na, Canlı Görünüm'deki Öğe Görüntüleme'ye veya kodun içine (CSS kaynağına veya HTML belgesine) yapıştırabilirsiniz.

Ayrıca, kod ipuçları PSD kompozisyonunda seçtiğiniz öğenin CSS özellikleri ile otomatik olarak doldurulur. Kodlamayı tercih ediyorsanız bu kod ipuçlarını kullanarak CSS özelliklerini kod olarak ayıklayabilirsiniz.

Extract panelinde (Pencere > Extract), gerekli PSD dosyasını tıklatın. PSD'nin minik resim görünümü genişletilerek kompozisyonu daha net görebilmeniz sağlanır.
PSD dosyasında, gerekli öğeyi veya varlığı tıklatın. Öğenin CSS özelliklerinin yer aldığı, bu özellikleri seçme ve kopyalama seçeneklerini sunan bir açılır liste görünür. Seçili öğenin genişliğini ve yüksekliğini piksel ya da yüzde olarak görüntüleyebilirsiniz.

Not: Burada yüzde ayarını seçerseniz ölçümler de yüzde birimleri olarak görüntülenir.

Extract panelindeki CSS'yi Kopyala seçeneği

CSS'yi kopyalamak için, kopyalamak istediğiniz özellikleri seçin ve CSS'yi Kopyala'yı tıklatın.
CSS'yi belgenize aşağıdaki yöntemlerden birini kullanarak yapıştırın:
- CSS Tasarımcısı içinden CSS'yi yapıştırmak için gerekli seçiciyi sağ tıklatın ve Stilleri Yapıştır'ı tıklatın.
- Öğe Görüntüleme'yi kullanarak CSS'yi yapıştırmak için bir seçiciyi sağ tıklatın ve sonra Stilleri Yapıştır'ı tıklatın.
- CSS'yi kod içine yapıştırmak için ekleme noktasını gerekli konuma yerleştirip sağ tıklatın ve sonra Yapıştır'ı tıklatın.

CSS'yi ayıklama ile ilgili kod ipuçları kullanmak için şu adımları gerçekleştirin:

Belgenize eklenmiş bir CSS kaynağını açın veya HTML belgesinin Kod Görünümü'ne geçin.
Extract panelinde, gerekli PSD dosyasını ve sonra da kompozisyondaki gerekli öğeyi tıklatın.
Belgenizde, ekleme noktasını kod içindeki gerekli konuma yerleştirin.
İlgili CSS özelliğinin adını yazmaya başladığınızda, PSD kompozisyonu içindeki seçili öğenin CSS özelliklerini içeren kod ipuçlarını görürsünüz. Gerekli CSS özelliğini tıklatarak koda ekleyin.

PSD dosyasında bir öğenin CSS özelliği ile ilgili kod ipuçları
Birden çok CSS özelliğini ayıklamak için gerekli özellikleri Extract paneli açılır penceresinden seçin. Daha sonra kod ipuçlarında Seçili Olanı Ekle'yi tıklatın.

CSS özelliklerini toplu olarak ekleme

PSD dosyalarından metin kopyalama

PSD kompozisyonlarınızdaki metin veya içerik tek bir tıklatmayla web sayfanıza eklenebilir. Extract panelinde PSD kompozisyonunuzdan metin kopyalamak için bir metin öğesi seçin ve Metni Kopyala'yı tıklatın. Metin panonuza kopyalanır. Metni bundan sonra her gerektiği yere yapıştırabilirsiniz.

Extract panelindeki Metni Kopyala seçeneği

Not:

Metni ayıkladıktan sonra, metin ile ilişkilendirilmiş font ve renk gibi özellikleri ayıklayabilirsiniz. Daha fazla bilgi için bkz. PSD dosyalarından fontları, renkleri ve degradeleri ayıklama.

PSD dosyalarından görüntüleri ayıklama

PSD kompozisyonlarınızdaki herhangi bir katmanı Extract panelinden web sayfanızın Canlı görünümündeki belirli bir konuma sürükleyebilirsiniz. Canlı Görünüm'de yer alan Canlı Kılavuzlar ve DOM simgesi gibi görsel yardımcılar bir öğenin sürüklenmesine ve yerleştirilmesine yardımcı olur. Öğeyi bırakmadan önce bir süre beklerseniz DOM simgesi (</>) görünür. Farenizi </> simgesinin üzerine getirdiğinizde DOM yapısı görüntülenir ve ilgili öğeyi bu yapı içine bırakabilirsiniz. Kodlamayı tercih ediyorsanız bağlamsal kod ipucu kullanabilir ve görüntüleri ayıklayabilirsiniz. Kod ipuçları, renkleri ve degradeleri görüntü olarak ayıklamanızı sağlar.

Not:

PSD dosyanız birden çok çalışma yüzeyi içeriyorsa her bir çalışma yüzeyi katmanlar bölmesinde bir klasör olarak görüntülenir. Klasörü genişleterek veya daraltarak içeriğini görebilir ya da gizleyebilirsiniz. Belirli bir çalışma yüzeyini yakınlaştırmak için çalışma yüzeyi adını tıklatmanız yeterlidir. Uzaklaştırmak için çalışma yüzeyinin dışında herhangi bir yeri ve ardından SIĞDIR'ı tıklatın.

Dreamweaver ayıklanan görüntüyü eklemeden önce, görüntü adını gösterir ve bu adı düzenleyebilirsiniz. Görüntü varsayılan olarak site kök klasörüne kaydedilir. Görüntüyü özel bir konuma kaydetmek isterseniz dosya adıyla birlikte dizin yolunun tamamını girebilirsiniz.

Not: Görüntüyü tanımlı bir siteye ait olmayan bir belgeye ayıklıyorsanız görüntü, belgenin bulunduğu dizine ayıklanır. Kaydedilmemiş belgeler varsa önce bu belgeleri kaydetmeniz istenir.

Görüntüyü yerel diskinize de kaydedebilir ve daha sonra web sayfanızdan çağırabilirsiniz. Ayrıca, dinamik bir web sitesi tasarlıyorsanız farklı cihazlar için tek bir tıklatmayla görüntünün birden çok çözünürlük sürümünü kaydedebilirsiniz.

Extract panelinde, görüntüleri indirmek istediğiniz PSD dosyasını tıklatın.
PSD dosyasında gerekli görüntüyü tıklatın.

Not:

PSD kompozisyonundaki görüntüleri göstermek veya gizlemek için Katmanlar sekmesini ya da Extract panelindeki Katman Kompozisyonları açılır listesini kullanın. Görüntü birden çok katmandan oluşuyorsa görüntünün ayıklanacak katmanlarını tek tek seçebilirsiniz.

Kod ipuçları, çalışma alanının sağ kısmında yer alan Kod Görünümü'ndeki açılır pencerede görüntülenir.
Birden çok görüntüyü içe aktarmak için Shift veya Command tuşunu basılı tutun ve gerekli görüntüleri tıklatın. Seçili görüntüler tek bir görüntü olarak ayıklanır.
Aşağıdaki işlemlerden birini gerçekleştirin:
- Görüntüyü tıklattığınızda görünen açılır menüde simgesini tıklatın. Yolu, dosya adını, dosya formatını ve ölçek faktörünü (gerekiyorsa) belirtin. Ardından, aşağıdaki işlemlerden birini gerçekleştirin:
  
  Görüntüyü 1x çözünürlükte kaydetmek için Kaydet'i tıklatın. Görüntüyü ölçeklendirmek için Ölçekle'yi seçin ve ölçek faktörünü belirtin.
  
  Görüntünün birden çok çözünürlük sürümünü kaydetmek için Toplu Kaydet'i tıklatın. PSD dosyası bu sürümleri içermek zorunda değildir; Dreamweaver, ayıklama işlemi sırasında görüntüyü birden çok çözünürlükte kaydedebilir.
Gerekli çözünürlük sürümlerini ve karşılık gelen çıktı klasörünü Tercihler altından belirtebilirsiniz.
Varlığı Ayıkla simgesini kullanarak görüntüleri ayıklama
- Görüntüyü belgenizin Canlı Görünüm'üne sürükleyin. Canlı Görünüm'de görüntüyü konumlandırmanıza yardımcı olmak için Canlı Kılavuzlar görünür.
Görüntüyü bıraktığınızda Dreamweaver görüntünün adını görüntüler. Görüntünün adının yanı sıra uzantısını da düzenleyebilir ve Enter tuşuna basarak görüntüyü kaydedebilirsiniz. Görüntü varsayılan olarak site kök klasörüne kaydedilir. Görüntüyü özel bir konuma kaydetmek için dosya adıyla birlikte yolu da girin.
Bir görüntüyü Extract panelinden sürüklediğinizde dosya adı ve uzantı düzenleme seçeneği
- Görüntüyü tıklattığınızda Dreamweaver'daki bağlamsal kod ipuçları doldurulur. HTML belgenizin Kod Görünümü'nde veya CSS belgenizde imleci ekleme noktasına yerleştirin. Arka plan görüntüsünün özellik adını veya <img> etiketini yazdıktan sonra, seçili görüntünün adı kod ipuçlarında görünür. Görüntüyü seçin, gerekirse adı ve uzantıyı değiştirin ve Enter tuşuna basın.
Görüntü varsayılan olarak site kök klasörüne kaydedilir. Görüntüyü özel bir konuma kaydetmek için dosya adıyla birlikte özel dosya yolunu da girin.
Kod ipuçları kullanarak görüntüleri ayıklama

PSD dosyalarından ölçüleri ayıklama

Extract panelini kullanarak, PSD kompozisyonundaki iki öğe arasındaki ölçü değerini kolaylıkla görebilir ve ayıklayabilirsiniz.

PSD dosyasının Extract panelinde, Shift veya Command tuşunu basılı tutarak gerekli öğeleri tıklatın.

Extract panelinde, iki öğe arasındaki yatay ve dikey uzaklık görüntülenir.

Extract panelinde ölçüler

Not:

Ölçüleri yüzde birimleri olarak görüntülemek için herhangi bir öğeyi ve ardından yüzde değerini tıklatın.
Gerekli değeri tıklatarak panoya kopyalayın.
Bu değeri her gerektiğinde, örneğin CSS Tasarımcısı'nın CSS özelliklerine veya kodunuza yapıştırın.

PSD dosyalarından fontları, renkleri ve degradeleri ayıklama

Extract panelini kullanarak, PSD kompozisyonlarınızda kullanılan font, renk veya degradelerin CSS özelliklerini ayıklayabilirsiniz.

Extract panelinde Stiller'i tıklatın.
Fontları ayıklamak için Fontlar bölümünde aşağıdaki işlemleri gerçekleştirin.
1. Gerekli font türünü genişletin.
  
  Fontlar ile ilgili daha fazla bilgi edinmek için Adobe Fonts simgesini () tıklatın.
2. Kopyalamak istediğiniz formatı ve boyutu tıklatın ve açılan pencerede CSS'yi Kopyala seçeneğini tıklatın. Extract, tıklattığınız font, format ve boyutu kullanan metin öğelerini etiketler.
  
  Not:
  
  Fontun birimini Extract tercihleri altından (Tercihler > Extract) “em” veya “rem” olarak değiştirebilirsiniz. Değişiklikleri görmek için Extract panelinin sağ üst köşesindeki açılır menüde PSD'yi Yeniden Yükle seçeneğini tıklatın.
  
  Fontları ayıklama
3. CSS'yi her gerektiğinde, örneğin koda veya CSS Tasarımcısı'na yapıştırın.
Renkleri ayıklamak için Renkler bölümünde aşağıdaki işlemleri gerçekleştirin:
1. Gerekli renk örneğini tıklatın. Extract, seçili rengi kullanan öğeleri etiketler.
  
  Not: Renk seçiciyi kullanarak PSD kompozisyonundan başka bir rengi de seçebilirsiniz.
2. Renk örneğini tıklattığınızda görünen açılır pencereden gerekli renk modelini (RGB, Hex veya HSL) seçin ve daha sonra renk değerini kopyalayın (Ctrl+c; Cmd+c).
  
  Renkleri ayıklama
3. Renk değerini her gerektiğinde, örneğin koda veya CSS Tasarımcısı'na yapıştırın.
Degradeleri ayıklamak için Degradeler bölümünde bir degrade renk örneğini tıklatın. Açılan listede CSS'yi Kopyala seçeneğini tıklatın. CSS'yi her gerektiğinde, örneğin koda veya CSS Tasarımcısı'nda yapıştırın.

Tercihler altından seçilen satıcı önekleri (Tercihler > CSS Stilleri) de degradelerle birlikte yapıştırılır. Bir radyal degradeyi ayıklarsanız karşılık gelen CSS bir satıcı öneki olmadan eklenir çünkü radyal degradeler desteklenmez.

Degradeyi ayıklama