Destekleniyor
Canlı Görünüm'de düzenleme
- Dreamweaver Kullanıcı Kılavuzu
- Giriş
- Dreamweaver ve Creative Cloud
- Dreamweaver çalışma alanları ve görünümleri
- Site kurma
- Dreamweaver siteleri hakkında
- Sitenizin yerel bir sürümünü kurma
- Yayımlama sunucusuna bağlanma
- Test sunucusu kurma
- Dreamweaver site ayarlarını içe ve dışa aktarma
- Mevcut web sitelerini uzak sunucudan yerel site köküne getirme
- Dreamweaver'daki erişilebilirlik özellikleri
- Gelişmiş ayarlar
- Dosya aktarmak için site tercihlerini ayarlama
- Dreamweaver'da proxy sunucu ayarlarını belirtme
- Dreamweaver ayarlarını Creative Cloud ile senkronize etme
- Dreamweaver'da Git'i kullanma
- Dosyaları yönetme
- Dosyaları oluşturma ve açma
- Dosyaları ve klasörleri yönetme
- Sunucunuzdan dosya alma ve dosyaları sunucunuza koyma
- Dosyaları teslim etme ve teslim alma
- Dosyaları senkronize etme
- Dosyaları farklılıklar açısından karşılaştırma
- Dreamweaver sitenizde dosya ve klasör perdeleme
- Dreamweaver siteleri için Tasarım Notları'nı etkinleştirme
- Olası Gatekeeper zaafını önleme
- Mizanpaj ve tasarım
- Mizanpaj için görsel yardımcılar kullanma
- Sayfanızın mizanpajını hazırlamak için CSS'yi kullanma hakkında
- Bootstrap kullanarak dinamik web siteleri tasarlama
- Dreamweaver'da ortam sorguları oluşturma ve kullanma
- Tablolara sahip içerik sunma
- Renkler
- Değişken ızgara mizanpajlarını kullanarak dinamik tasarım
- Dreamweaver'da Extract
- CSS
- Basamaklı Stil Sayfaları'nı anlama
- CSS Tasarımcısı'nı kullanarak sayfa mizanpajını yapma
- Dreamweaver'da CSS ön işlemcilerini kullanma
- Dreamweaver'da CSS Stili tercihlerini ayarlama
- Dreamweaver'da CSS kurallarını taşıma
- Dreamweaver'da satır içi CSS'yi CSS kuralına dönüştürme
- Div etiketleriyle çalışma
- Arka plana degradeler uygulama
- Dreamweaver'da CSS3 geçiş efektleri oluşturma ve düzenleme
- Kodu formatlama
- Sayfa içeriği ve varlıklar
- Sayfa özelliklerini ayarlama
- CSS başlığı özelliklerini ve CSS bağ özelliklerini ayarlama
- Metinle çalışma
- Metni, etiketleri ve nitelikleri bulma ve değiştirme
- DOM paneli
- Canlı Görünüm'de düzenleme
- Dreamweaver'da belgeleri kodlama
- Belge penceresinde öğe seçme ve görüntüleme
- Özellik denetiminde metin özelliklerini belirleme
- Web sayfası üzerinde yazım denetimi gerçekleştirme
- Dreamweaver'da yatay cetveller kullanma
- Dreamweaver'da font birleşimlerini ekleme ve değiştirme
- Varlıklarla çalışma
- Dreamweaver'da tarih ekleme ve güncelleştirme
- Dreamweaver'da sık kullanılan varlıklar oluşturma ve yönetme
- Dreamweaver'da görüntü ekleme ve düzenleme
- Medya nesneleri ekleme
- Dreamweaver'da video ekleme
- HTML5 video ekleme
- SWF dosyaları ekleme
- Ses efektleri ekleme
- Dreamweaver'da HTML5 ses ekleme
- Kitaplık öğeleriyle çalışma
- Dreamweaver'da Arapça ve İbranice metin kullanma
- Bağlama ve gezinme
- jQuery bileşenleri ve efektleri
- Web sitelerini kodlama
- Dreamweaver'da kod yazma hakkında
- Dreamweaver'da kodlama ortamı
- Kodlama tercihlerini ayarlama
- Kod rengini özelleştirme
- Kod yazma ve düzenleme
- Kod ipuçları verme ve kod tamamlama
- Kodu daraltma ve genişletme
- Parçacıklar ile kodu tekrar kullanma
- Lint kodu
- Kodu en iyileştirme
- Tasarım görünümünde kod düzenleme
- Sayfaların başlık içeriğiyle çalışma
- Dreamweaver'da sunucu tarafı içerikleri ekleme
- Dreamweaver'da etiket kitaplıkları kullanma
- Dreamweaver'a özel etiketleri içe aktarma
- JavaScript davranışlarını kullanma (genel talimatlar)
- Yerleşik JavaScript davranışları uygulama
- XML ve XSLT hakkında
- Dreamweaver uygulamasında sunucu tarafı XSL dönüşümleri gerçekleştirme
- Dreamweaver uygulamasında istemci tarafı XSL dönüşümleri gerçekleştirme
- Dreamweaver'da XSLT için karakter varlıkları ekleme
- Kodu formatlama
- Ürünler arası iş akışları
- Dreamweaver uzantılarını yükleme ve kullanma
- Dreamweaver uygulama içi güncelleştirmeleri
- Dreamweaver'da Microsoft Office belgeleri ekleme (yalnızca Windows)
- Fireworks ve Dreamweaver ile çalışma
- Contribute ile Dreamweaver sitelerindeki içeriği düzenleme
- Dreamweaver-Business Catalyst entegrasyonu
- Kişiselleştirilmiş e-posta kampanyaları oluşturma
- Şablonlar
- Dreamweaver şablonları hakkında
- Şablonları ve şablon tabanlı belgeleri tanıma
- Dreamweaver şablonu oluşturma
- Şablonlarda düzenlenebilir bölgeler oluşturma
- Dreamweaver'da yinelenen bölgeler ve tablolar oluşturma
- Şablonlarda isteğe bağlı bölgeler kullanma
- Dreamweaver'da düzenlenebilir etiket niteliklerini tanımlama
- Dreamweaver uygulamasında yuvalanmış şablonlar oluşturma
- Şablonları düzenleme, güncelleştirme ve silme
- Dreamweaver'da xml içeriğini dışa ve içe aktarma
- Mevcut bir belgenin şablonunu uygulama veya kaldırma
- Dreamweaver şablonlarındaki içerikleri düzenleme
- Dreamweaver'daki şablon etiketleri için sözdizimi kuralları
- Şablon bölgeleri için vurgulama tercihlerini belirleme
- Dreamweaver'da şablon kullanmanın avantajları
- Mobil ve çoklu ekran
- Dinamik siteler, sayfalar ve web formları
- Web uygulamalarını anlama
- Bilgisayarınızı uygulama geliştirme için ayarlama
- Veritabanı bağlantılarında sorun giderme
- Dreamweaver uygulamasında bağlantı komut dosyalarını kaldırma
- Dinamik sayfalar tasarlama
- Dinamik içerik kaynaklarına genel bakış
- Dinamik içerik kaynaklarını tanımlama
- Sayfalara dinamik içerik ekleme
- Dreamweaver'da dinamik içeriği değiştirme
- Veritabanı kayıtlarını görüntüleme
- Dreamweaver'da canlı veri sağlama ve ilgili sorunları giderme
- Dreamweaver'da özel sunucu davranışı ekleme
- Dreamweaver ile form oluşturma
- Kullanıcılardan bilgi toplamak için formları kullanma
- Dreamweaver'da ColdFusion formları oluşturma ve etkinleştirme
- Web formları oluşturma
- Form öğeleri için geliştirilmiş HTML5 desteği
- Dreamweaver uygulamasını kullanarak bir form geliştirme
- Uygulamaları görsel olarak oluşturma
- Dreamweaver'da kalıp ve ayrıntı sayfaları oluşturma
- Arama ve sonuç sayfaları oluşturma
- Kayıt ekleme sayfası oluşturma
- Dreamweaver'da güncelleme kaydı sayfası oluşturma
- Dreamweaver'da kayıt silme sayfaları oluşturma
- Dreamweaver'da veritabanını değiştirmek için ASP komutları kullanma
- Kayıt sayfası oluşturma
- Oturum açma sayfası oluşturma
- Yalnızca yetkili kullanıcıların erişebileceği bir sayfa oluşturma
- Dreamweaver ile ColdFusion'daki klasörlerin güvenliğini sağlama
- Dreamweaver'da ColdFusion bileşenleri kullanma
- Web sitelerini test etme, önizleme ve yayımlama
Canlı Görünüm'de web sayfalarınızı tasarlamayı, düzenlemeyi ve önizlemeyi öğrenin. Kod Görünümü'ne geçmeden öğeleri yeniden düzenleyin veya ekleyin, seçiciler uygulayın, görüntü niteliklerini düzenleyin; metin ekleyin, düzenleyin ve formatlayın.
Canlı Görünüm, içeriğinizin favori tarayıcılarınızda nasıl görünüyorsa Dreamweaver'da da öyle görünmesi için Chromium tabanlı bir görüntü oluşturma motoru kullanır. Geliştirme sırasında sayfanızı hızla önizlemek için Canlı Görünüm'e geçebilirsiniz. Farklı görünümler (kod ve tasarım görünümü) arasında geçiş yaparken zamandan tasarruf etmek için HTML öğelerini doğrudan Canlı Görünüm içinden düzenleyebilirsiniz.
Canlı Görünüm sayfadaki değişiklikleri gösterecek şekilde anında yenilenir.
Aşağıdaki bileşenleri kullanarak sayfalarınızı Canlı Görünüm'de düzenleyebilirsiniz:
- DOM paneli: (Pencere > DOM) Belgenizin HTML yapısını gösterir ve öğeleri bu görünüm içinden kopyalayıp yapıştırmanıza, çoğaltmanıza, silmenize ve yeniden düzenlemenize olanak tanır. Daha fazla bilgi için bkz. DOM paneli.
- Öğe Görüntüleme: Canlı Görünüm'de seçili HTML öğesinin üstünde görünür. Öğe Görüntüleme, HTML öğelerini sınıflar ve kimlikler ile ilişkilendirmenize olanak verir. Daha fazla bilgi için bkz. HTML öğelerini sınıflar ve kimliklerle ilişkilendirme.
- Hızlı Özellik Denetimi: Öğe Görüntüleme altından Sandviç simgesini tıklattığınızda veya metni seçtiğinizde görünür. Hızlı Özellik Denetimi doğrudan Canlı Görünüm'de görüntü niteliklerini düzenlemenize veya metni formatlamanıza olanak verir. Daha fazla bilgi için bkz. Hızlı Özellik Denetimi.
- Canlı Görünüm Özellik Denetimi: Belge penceresinin altında görünür, çeşitli HTML ve CSS özelliklerini Canlı Görünüm'de düzenleyebilmenizi sağlar. Daha fazla bilgi için bkz. Canlı Görünüm Özellik Denetimi.
- Ekle paneli: (Pencere > Ekle) Paneldeki öğeleri doğrudan Canlı Görünüm'e sürükleyebilmenizi sağlar. Daha fazla bilgi için bkz. Öğeleri doğrudan Canlı Görünüm'de ekleme.
Sayfanız dinamik olarak değişiyorsa (komut dosyaları yüzünden) veya meta yenileme özelliği etkin durumdaysa Canlı Görünüm'de yaptığınız düzenlemeler kaybolabilir.
İpuçları:
- Sayfayı düzenlediğiniz sırada Canlı Görünüm'deki görüntü kaybolursa Canlı Görünüm'ü kapatıp yeniden açın.
- Düzenlemeler sayfaya yansıtılmamışsa Canlı Görünüm'de yenile düğmesini tıklatın.
Veritabanları veya JavaScript aracılığıyla dinamik olarak oluşturulan içerik ve şablonlardaki düzenlenemez bölgeler Canlı Görünüm'de de düzenlenemez. Bu tür öğeleri Canlı Görünüm'de tıklattığınızda öğenin etrafında bu öğenin düzenlenemediğini belirten bir gri kenarlık görünür.
Canlı Görünüm'de yalnızca seçili öğe için geçerli olan seçenekler ana menüde sunulur. Geçerli olmayan seçenekler öğe seçildiğinde soluk görünür.
Öğe Görüntüleme
Öğe Görüntüleme'yi kullanarak HTML öğelerini doğrudan Canlı Görünüm içinden sınıflar ve kimlikler ile ilişkilendirebilirsiniz. Öğe Görüntüleme gerekli seçeneği hızlı bir şekilde görüntüleyip seçmenize yardımcı olmak için kullanılabilir sınıflar ve kimlikler için size ipuçları sunar.
Öğe Görüntüleme'yi kullanarak da tabloları formatlayabilirsiniz. Daha fazla bilgi için bağ içeriğine bakın.
HTML öğelerini sınıflar ve kimliklerle ilişkilendirme
Canlı Görünüm'de gerekli öğeyi tıklatın. Öğe Görüntüleme açılır ve şu anda ilişkilendirilmiş olan sınıf ve kimliği görüntüler.
Canlı Görünüm'deyken ayrıca, HTML öğesini DOM panelinde tıklatıp öğeye ait Öğe Görüntüleme'yi görebilirsiniz.
- HTML öğesinin bir sınıf veya kimlikle ilişkisini sonlandırmak için sınıf veya kimliğin yanındaki 'x' düğmesini tıklatın.
- HTML öğesiyle ilişkilendirilmiş sınıf veya kimliği değiştirmek için bu kutuyu tıklatın. Kullanılabilir sınıf ve kimliklerin listesi görüntülenir. Gerekli seçeneği tıklatın.
- Bir sınıf veya kimlik ekleyip bunu öğeye uygulamak için “+” düğmesini tıklatıp adını yazın. Değişiklikleri kaydetmek için “+” öğesini tıklatın veya Enter düğmesine basın.
Böylece CSS Tasarımcısı'nı kullanarak bu sınıf veya kimliği içeren bir seçici tanımlayabilirsiniz. Daha fazla bilgi için bkz. CSS Tasarımcısı'nı kullanarak sayfa mizanpajını yapma.
Geçiş tetiklendiğinde, geçiş öğeleri için Öğe Görüntüleme öğelerle birlikte hareket etmez. Ancak Öğe Görüntüleme kullanarak yaptığınız değişiklikler geçiş öğesiyle aynı konumda olmasa da uygulanır.
Hızlı Özellik Denetimi
Görüntüler için Hızlı Özellik Denetimi
Hızlı Özellik Denetimi, Canlı Görünüm'de seçili öğelerin hemen üstünde görünür. Bu Özellik Denetimi'ni kullanarak Canlı Görünüm'de nitelikleri düzenleyebilir veya metni formatlayabilirsiniz.
Hızlı Özellik Denetimi'ni göstermek veya gizlemek için Ctrl+Alt+H (Win)/CMD+Ctrl+H (Mac) tuşlarına basın.
Hızlı Özellik Denetimi kullanıyorsanız Kod gezgini simgesi Canlı Görünüm'de görüntülenmez.
Bootstrap belgelerinde, Hızlı Özellik Denetimi de görüntüleri özelleştirme seçenekleri içerir.
- Şekilli Kırp: Görüntünün köşelerini daire şekilli yapmak veya yuvarlamak ya da minik resim görüntüsü olarak kırpmak için tıklatın.
- Görüntüyü dinamik yap: Görüntüleri dinamik yapmak ve çeşitli ekran boyutlarına uyarlamak için tıklatın.
Metin için Hızlı Özellik Denetimi
Canlı görünümde metin için Hızlı Özellik Denetimi metni hızlı bir şekilde formatlamanızı, girintilemenizi ve köprü oluşturmanızı sağlar. Metin için Hızlı Özellik Denetimi, şu metin öğeleri için sandviç simgesini tıklattığınızda görünür: h1-h6, pre ve p.
- Format seçeneği öğe etiketini h1-h6, p ve pre olarak hızlı bir şekilde değiştirebilmenizi sağlar.
- Bağ seçeneği, metin öğesine köprü oluşturabilmenizi sağlar.
- Kalın ve İtalik simgeleri metin öğesine <strong> ve <em> etiketleri eklemenizi sağlar.
- Girinti simgeleri metin girintileri eklemenizi veya kaldırmanızı sağlar. Seçiminize bağlı olarak <blockquote> etiketi koda eklenir veya kod içinden kaldırılır.
Bootstrap belgelerinde, metin için Hızlı Özellik Denetimi ayrıca metin öğelerini hizalamanıza ve dönüştürmenize olanak tanır.
- Hizala: İlgili sınıfları uygulayarak Bootstrap metin öğelerini sola, sağa veya iki yana yaslar ya da ortalar.
- Dönüştür: Küçük harf, büyük harf veya cümle düzeni sınıflarını uygulayarak öğenin metin boyutunu değiştirir.
Canlı Görünüm Özellik Denetimi
Canlı Görünüm Özellik Denetimi , Belge penceresinin altından kullanılabilen geleneksel Özellik Denetimi'dir.
Canlı Görünüm Özellik Denetimi metin veya eklenmiş bir nesne gibi o anda seçili durumdaki bir sayfa öğesinin en sık kullanılan özelliklerini incelemenize ve düzenlemenize olanak verir. Canlı Görünüm Özellik Denetimi'nin içeriği seçili öğeye göre değişir.
Canlı Görünüm Özellik Denetimi, Değişken Izgara sayfalarında kullanılamaz.
Belirli bir Özellik Denetimi'ne yönelik Yardım içeriğine erişmek için Özellik Denetimi'nin sağ üst köşesindeki Yardım düğmesini tıklatın. Veya, Özellik Denetimi'nin Seçenekler menüsünden Yardım'ı seçin.
Aşağıda, Canlı Görünüm Özellik Denetimi'ni kullanarak düzenleyebileceğiniz öğeler yer almaktadır:
jQuery Kullanıcı Arabirimi ve şablon ile ilgili özellikleri Canlı Görünüm Özellik Denetimi'nde düzenlenemez.
HTML niteliklerini düzenleme
Görüntülerin HTML niteliklerini, Hızlı Özellik Denetimi'ni kullanarak doğrudan Canlı Görünüm'den hızlıca ekleyebilir, düzenleyebilir veya kaldırabilirsiniz.
Sandviç simgesini tıklattığınızda görüntülere ait Hızlı Özellik Denetimi görünür. Kullanılabilir alana bağlı olarak, Özellik Denetimi görüntünün sağında, solunda, üstünde, altında veya üzerinde görünür. Özellik Denetimi'nde gezinebilir ve onu kolaylıkla kullanabileceğiniz bir konuma yerleştirebilirsiniz.
Nitelikleri düzenlemek için Hızlı Özellik Denetimi'nde sandviç simgesini tıklatın. Görüntünün “title” ve “alt” gibi diğer nitelikleriyle birlikte kaynağını da değiştirebilirsiniz ve bu değişiklikler hemen uygulanır. Aynı şekilde, görüntünün Genişlik ve Yükseklik niteliklerini de Canlı Görünüm'den ayarlayabilirsiniz.
Yaptığınız değişiklikler aşağıdaki işlemlerden birini gerçekleştirdiğinizde kaydedilir:
- Özellik Denetimi'nin dışındaki herhangi bir yeri tıklatın
- Enter tuşuna basın
- Tab tuşuna basarak başka bir niteliği Özellik Denetimi'nde düzenleyin
- Dosyayı kaydedin
Görüntüler dinamik olarak yüklendiğinde görüntünün Hızlı Özellik Denetimi'ni kullanarak görüntü için ayarlanmış nitelikleri hızlıca inceleyebilirsiniz.
Metni doğrudan Canlı Görünüm'de düzenleme
Metin öğelerini artık doğrudan Canlı Görünüm'de düzenleyebilirsiniz. Metin öğesini tıklatarak düzenleyebilirsiniz. Öğe Görüntüleme modundaysanız metni düzenlemek için Enter tuşuna basın.
Düzenleme moduna geçtikten sonra Enter tuşuna bastığınızda sonuçlar, ekleme noktasının Enter tuşuna basılmadan önce nerede olduğuna bağlı olarak değişir. Bu değişiklikler, Tasarım Görünümü'nde metin düzenlerken Enter tuşuna bastığınızda gerçekleşen işleme benzerdir.
Metin öğesini çevreleyen turuncu kenarlık, modun düzenleme modu olarak değiştirildiğini gösterir.
Ekleme noktası, tıklatacağınız yere yerleştirilir. Metin öğesindeki metnin tamamını seçmek için metin öğesini üç kez tıklatın.
Canlı Görünüm'de metin düzenlerken kesme, kopyalayıp yapıştırma ve geri alıp yineleme işlemleri desteklenir. Metin yapıştırma işleminde metin düz metin olarak yapıştırılır.
Otomatik eşitleme özelliği, canlı görünümde yapılan tüm düzeltmeleri kod görünümüyle otomatik olarak eşitler.
Aşağıdaki tabloda, Canlı Görünüm'de metin düzenleme sırasında desteklenen ve desteklenmeyen senaryolar listelenmektedir:


Desteklenmiyor


Metin içerebilecek tüm HTML öğeleri ve semantik etiketler


Geçersiz veya kopuk etiketlerin düzenlenmesi. HTML kopuk veya geçersiz etiketler içeriyorsa bu etiketlerin düzenlenmesi tarayıcıların etiketleri algılama biçimine göre değişir:


Canlı Görünüm'de şablonlardan türetilen HTML dosyaları


jQuery Sayfaları'nın düzenlenmesi


Satır içi öğeler içeren yapısal etiketler. Düzenleme için tek bir kutuda bir arada sunulurlar.


Hem statik hem de dinamik içerik bulunan etiketlerin düzenlenmesi. Bu tür etiketlerin seçicilerini düzenleyebilirsiniz ancak metni doğrudan Canlı Görünüm'de düzenleyemezsiniz. Bu tür öğeleri Canlı Görünüm'de çift tıklatırsanız öğelerin etrafında metin düzenlemenin desteklenmediğini belirten bir gri kenarlık görünür.


Dinamik sayfalardaki statik metin


Varlıklar içeren metin


Metin formatlama
Metin formatlamasını ve köprü metnini artık doğrudan Canlı Görünüm'de değiştirebilirsiniz. Metin formatlama seçeneklerini görmek için bir sözcük veya sözcük grubu seçin. Seçili metnin hemen üstünde formatlama seçenekleriyle birlikte Hızlı Özellik Denetimi görüntülenir.
Öğeleri doğrudan Canlı Görünüm'de ekleme
Ekle panelini kullanarak, öğeleri doğrudan Canlı Görünüm'de belgedeki gerekli konuma sürükleyebilirsiniz. Canlı Görünüm'de yer alan Canlı Kılavuzlar ve DOM simgeleri gibi görsel yardımcılar, sürüklenen öğeleri üzerine gelinen bir öğeye göre konumlandırmanıza yardımcı olur.
Öğeyi bırakmadan önce fareyi sayfadaki farklı öğeler üzerine getirdiğinizde Canlı Kılavuzlar (yeşil renkli) görüntülenir. Bu kılavuzlar öğenin eklenebileceği konumları belirtir. Ü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.
- 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.
Öğeyi bırakmadan önce bir süre beklerseniz DOM simgesi (</>) görünür. Farenizi bu simgenin üzerine getirdiğinizde DOM paneli açılır ve ilgili öğeyi belgenin DOM yapısı içine bırakabilirsiniz.
Öğeleri doğrudan Canlı Görünüm'de eklemek için şu adımları uygulayın:
-
Canlı Görünüm'e geçin.
-
Ekle panelinden, gerekli öğeyi tıklatın ve belgeye sürükleyin. Alternatif olarak, gerekli öğeyi Ekle panelinden de tıklatabilirsiniz.
İpucu: Bir öğeyi Ekle panelinden sayfaya sürükleyemiyorsanız bilgisayarınızı yeniden başlatın ve tekrar deneyin.
-
Canlı Kılavuzlar'ı temel alarak öğeyi bir öğenin üstüne, altına, sağına veya soluna bırakın. Veya, </> simgesini tıklatıp DOM panelini kullanarak öğeyi belge yapısında kesin bir noktaya bırakın.
Öğe sayfaya eklenir ve vurgulanır.
Seçim çerçevesi ile seçme
Seçim çerçevesi ile seçme, Canlı Görünüm içinde tıklatarak ve etiketin içinde sürükleyerek bir metin bloğunu kolaylıkla seçmenize olanak tanır. 2014.1 öncesindeki Dreamweaver sürümlerinde bir metin bloğunu tıklatıp sürüklediğinizde öğe bir bütün olarak hareket ediyordu.
Canlı görünümdeki seçim çerçevesi ile seçim yapma özelliği, tarayıcı tarafından desteklenen işlemlerle sınırlıdır.
Öğeleri seçme, sürükleme ve bırakma
Canlı Görünüm'de etiket adını tıklatarak ve ardından istediğiniz konuma sürükleyerek bir öğeyi taşıyabilirsiniz. Bir etiket adını tıklattığınızda, etiketi o noktadan sürükleyebileceğinizi gösteren bir el imleci simgesi görünür. Etiketi sürüklemeye başladığınızda kılavuzlar, bunu doğru konuma yerleştirmenize yardımcı olur.
Canlı Görünüm'de etiket adını tıklatarak, bu etiketin tam içeriğini Kod Görünümü'nde seçebilirsiniz.
Canlı görünümde kodu inceleme
İnceleme modu, Canlı Görünüm ile birlikte çalışarak, HTML öğelerini ve bu öğelerin ilişkilendirilmiş CSS stillerini hızlı şekilde tanımlamanıza yardımcı olur. İnceleme modu açık durumdayken, blok düzeyinde olan herhangi bir öğenin CSS kutu modeli niteliklerini görmek için sayfanızdaki öğelerin üzerine gelebilirsiniz.
İnceleme modunda kutu modelinin görsel bir temsilini görmenin yanı sıra, Canlı görünümde öğelerin üzerine geldikçe CSS Tasarımcısı'nı da kullanabilirsiniz.
CSS Tasarımcısı'nı Geçerli modda açtığınızda ve sayfadaki bir öğenin üzerine geldiğinizde, CSS Tasarımcısı'ndaki kurallar ve özellikler, o öğenin kural ve özelliklerini gösterecek şekilde otomatik olarak güncelleştirilir.
Ayrıca, üzerine geldiğiniz öğeyle ilgili tüm görünüm veya paneller de güncelleştirilir (örneğin, Kod görünümü, Etiket seçici, Özellik denetçisi, vb.).
-
Belge penceresinde belgeniz açık durumdayken, Görünüm > İnceleme'yi tıklatın.Not:
Henüz Canlı görünümde değilseniz, İnceleme modu otomatik olarak bu görünümü etkinleştirir.
-
CSS kutu modelini görmek için sayfadaki öğelerin üzerine gelin. İnceleme modunda kenarlık, kenar boşluğu, dolgu ve içerik farklı renklerle vurgulanır.
-
(İsteğe bağlı) Geçerli olarak vurgulanan öğenin üst öğesini vurgulamak için, bilgisayarınızın klavyesinde sol oka basın. Alt öğe vurgulamasına geri dönmek için sağ oka basın.
-
(İsteğe bağlı) Bir vurgu seçimini kilitlemek için bir öğeyi tıklatın.Not:
Bir vurgu seçimini kilitlemek için bir öğe tıklatıldığında, İnceleme modu kapatılır.
Canlı Görünüm'de klavyeyi kullanarak gezinme
Öğe Görüntüleme'de sayfa öğeleri veya seçiciler arasında klavye yardımıyla geçiş yaparak düzenleme işlemlerini hızlandırabilirsiniz.
Sayfa öğeleri arasında geçiş yapma
Yukarı ve Aşağı ok tuşları Canlı Görünüm'de sayfa öğeleri arasında geçiş yapmanıza yardımcı olur. Geçiş işlemi belgenin DOM yapısını temel alır.
Canlı Görünüm'de klavyeyi kullanarak gezinmek, iç içe ve sarılmış öğelere kolay erişim sağlar.
Yukarı veya aşağı ok tuşunu kullanarak bir öğeye erişim sağladığınızda bu öğe için Öğe Görüntüleme görünür. Böylece, Öğe Görüntüleme'de seçicilere gidebilir veya Enter tuşuna basarak metni doğrudan Canlı Görünüm'de düzenleyebilirsiniz.
Seçiciler arasında geçiş yapma
Öğe Görüntüleme'de seçiciler arasında geçiş yapmak için Sekme tuşuna basın. Odakta olan seçici aşağıda gösterildiği gibi sarı bir kenarlıkla görüntülenir:
Son uygulanan seçiciden sonra Sekme tuşuna basarsanız seçici ekle metin kutusu görünür.
Ana öğeyi seçmek için Ctrl+[ veya Cmd+[ tuşlarını, alt öğeyi seçmek için Ctrl+] veya Cmd+] tuşlarını kullanabilirsiniz.
Canlı Görünüm'de düzenlemeyi devre dışı bırakma
-
Canlı Görünüm'e geçiş yapın ve Görünüm > Canlı Görünüm Seçenekleri'ni tıklatın.
-
Canlı Görünüm Görüntülerini Gizle'yi seçin.
Desteklenmeyen senaryolar
- Dreamweaver şablon dosyaları Canlı Görünüm'de düzenlenemez.
- Hem statik hem de dinamik içerik bulunan etiketler. Bu tür etiketlerin seçicilerini düzenleyebilirsiniz ancak metni Canlı Görünüm'de düzenleyemezsiniz. Bu tür öğeleri Canlı Görünüm'de çift tıklatırsanız öğelerin etrafında metin düzenlemenin desteklenmediğini belirten bir gri kenarlık görünür.
- Sahte seçiciler uygulanmış olan etiketler. Bu tür öğeleri Canlı Görünüm'de düzenlemeye çalıştığınızda beklenmedik sonuçlarla karşılaşabilirsiniz.
- CSS Izgaraları yalnızca Dreamweaver 2019 ve sonraki sürümlerinde Canlı Görünüm'de desteklenir.