Kullanıcı Kılavuzu İptal

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

Ara

Son güncelleme: 21 May 2021

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.

Not:

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 gri kenarlıklı bir öğe düzenlenemez

Not:

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.

Not:

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.

Canlı görünümde sayfa öğelerinin hemen üstünde görünen Hızlı Özellik Denetimi

Hızlı Özellik Denetimi'ni göstermek veya gizlemek için Ctrl+Alt+H (Win)/CMD+Ctrl+H (Mac) tuşlarına basın.

Not:

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.

Bootstrap belgelerinde görüntüler için Hızlı Özellik Denetimi

Ş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.

Not:

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:

HTML

Image

Table

Media - yalnızca HTML5 Ses ve HTML5 Video

Anchor

Form

FormButton

FormTextArea

FormSubmitButton

FormRange

FormRadioButton

FormList

FormImage

FormFile

FormCheckBox

FormColor

FormDate

FormDateTime

FormDateTimeLocal

FormMonth

FormTime

FormWeek

FormNumber

FormLabel

FormHidden

FormGeneric

Not:

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.

Not:

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.

Turuncu kenarlık düzenleme modunu belirtir

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:

Destekleniyor	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: Tarayıcılar kopuk etiketi kapatarak HTML kodunu düzeltiyorsa etiketleri Canlı Görünüm'de düzenlemenize izin verilebilir. Tarayıcılar oluşturma sırasında yeni bir etiket ekliyorsa kopuk veya geçersiz etiketleri düzenleyemezsiniz.
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.

Metni formatlamak için Hızlı Özellik Denetimi

Öğ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.

Üstte ve altta 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

Öğ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.

Not:

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üm'de etiket adını tıklatarak bu etiketin tam içeriğini Kod Görünümü'nde seçin

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.

Burada paragraf seçilidir — Burada, paragraf seçilidir. Aşağı ok tuşuna tekrar bastığınızda, sonraki görüntüde gösterildiği gibi DOM yapısındaki bir sonraki öğe olan kalın formatındaki metin seçilir.

Görüntü ilk başta odaktadır — Burada ilk başta görüntü odaktadır. Aşağı ok tuşuna basıldığında, sonraki görüntüde gösterildiği gibi görüntünün altındaki paragraf seçilir.

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:

Odakta olan seçici vurgulanır — Odakta olan seçici sarı bir kenarlıkla vurgulanır.

Son uygulanan seçiciden sonra Sekme tuşuna basarsanız seçici ekle metin kutusu görünür.

Not:

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.