Web sayfalarınızı Dreamweaver'da, tarayıcılarda ve mobil aygıtlarda önizleyin.

Gerçek zamanlı önizleme, sayfalarınızı tarayıcıda veya mobil cihazlarda önizlemenizi ve kodlama yaptıkça değişiklikleri tarayıcıda veya cihazda gerçek zamanlı olarak görüntülemenizi sağlar.

Canlı Görünüm, sayfanızın web'de nasıl görüneceğine dair size bir fikir verir ve öğeleri Kod görünümünde düzenlemenize olanak tanır.

Tasarım görünümü ayrıca sayfanızın tarayıcıda nasıl görüneceğine ilişkin fikir verir ancak sayfayı tam olarak tarayıcıların yaptığı gibi oluşturmaz.

Tarayıcıda Aç özelliği, sayfalarınızın tarayıcılarda nasıl görüneceğini görmenize olanak tanır. Bu gerçek zamanlı olmadığı için veritabanlarından dinamik veri kullanan sayfalarla çalışmak açısından en iyi seçenektir.

Dreamweaver'da farklı önizleme seçenekleri hakkında daha fazla bilgi için okumaya devam edin.

Tarayıcıda Gerçek Zamanlı Önizleme

Dreamweaver'da kod yazdıkça veya tasarladıkça web sayfalarınızı gerçek zamanlı olarak önizleyebilirsiniz. Bu özellik, birden fazla tarayıcıda aynı anda hem kod yazmanızı hem de web sayfalarınızı önizlemenizi sağlar. 

Değişiklikleri tarayıcınızda gerçek zamanlı olarak önizleme
Değişiklikleri tarayıcınızda gerçek zamanlı olarak önizleme

Not:

Kod yazdıkça kodunuzu mobil cihazlarda gerçek zamanlı olarak da önizleyebilirsiniz. Daha fazla bilgi için bkz. Dreamweaver web sayfalarını birden fazla cihazda önizleme.

  1. Gerçek Zamanlı Önizleme'yi tıklattığınızdan emin olun.

    Gerçek zamanlı önizleme
    Gerçek zamanlı önizleme

    Web sayfalarınızı bir tarayıcıda veya bir aygıtta gerçek zamanlı önizleme seçenekleriniz bulunur.

    Web sayfalarınızı bir aygıtta önizlemek istiyorsanız bkz. Dreamweaver web sayfalarını birden fazla aygıtta önizleme ve inceleme.

  2. Web sayfalarınızı tarayıcıda önizlemek için kullanılabilir tarayıcı seçeneklerinden birini tıklatın.

    Not:

    Bu listede görünen tarayıcıları düzenleyebilirsiniz. Tarayıcıyı bu listeye eklemek veya listeden kaldırmak için bkz. Tarayıcı tercihlerini ayarlama.

    Test sunucunuz varsa test sunucusunu ayarlarken “Dosyaları test sunucusuna otomatik olarak gönder” seçeneğini etkinleştirdiğinizden emin olun. 

    Gerçek zamanlı önizleme, test sunucusunda dosyaları ortadan kaldırır. Test sunucusuna otomatik olarak göndermeyi etkinleştirmek, değişiklikleri gerçek zamanlı görmenizi sağlar. 

    Dosyaları test sunucusuna otomatik olarak göndermeyi etkinleştirme
    Dosyaları test sunucusuna otomatik olarak göndermeyi etkinleştirme

  3. İstendiği takdirde, web sayfasını ve ilgili belgelerini kaydedin.

    Web sayfasını görüntüleyen bir tarayıcı açılır.

  4. Sayfanızı kodlamaya devam edin ve kodlama yaptıkça değişiklikleri tarayıcıda izleyin.

Tarayıcı önizleme tercihlerini ayarlama

Bir siteyi önizlerken kullanılacak tarayıcının tercihlerini ayarlayabilir ve birincil ve ikincil tarayıcı tanımlayabilirsiniz.

Bu tarayıcı tercihleri, sitenizi gerçek zamanlı önizleme ile önizlemenizden veya yalnızca sayfayı tarayıcıda açmanızdan bağımsız olarak kullanılır.

  1. Dosya > Gerçek Zamanlı Önizleme > Tarayıcı Listesini Düzenle'yi seçin.

  2. Listeye tarayıcı eklemek için Artı (+) düğmesini tıklatın, Tarayıcı Ekle iletişim kutusunu tamamlayın ve ardından Tamam'ı tıklatın.
  3. Listeden tarayıcı silmek için tarayıcıyı seçin ve Eksi (-) düğmesini tıklatın.
  4. Seçili tarayıcının ayarlarını değiştirmek için Düzen düğmesini tıklatın, Tarayıcıyı Düzenle iletişim kutusunda gerekli değişiklikleri yapın ve ardından Tamam'ı tıklatın.
  5. Seçili tarayıcının birincil mi yoksa ikincil mi olduğunu belirlemek için Birincil Tarayıcı veya İkincil Tarayıcı seçeneğini belirleyin.

    F12 (Windows) ya da Option+F12 (Macintosh) birincil tarayıcıyı açar; Ctrl+F12 (Windows) ya da Command+F12 (Macintosh) ikincil tarayıcıyı açar.

  6. Önizleme ve sunucuda hata giderme için geçici bir kopya oluşturmak üzere Geçici Dosya Kullanarak Önizleme'yi işaretleyin. (Belgeyi doğrudan güncelleştirmek istiyorsanız bu seçeneğin işaretini kaldırın.)

Canlı görünümde sayfaları önizleme

Canlı görünüm, sayfanızın bir tarayıcıda nasıl görüneceği hakkında daha gerçekçi ve düzenlenebilir bir görünüm sağlaması nedeniyle klasik Dreamweaver tasarım görünümünden farklıdır. 

Tasarım görünümündeyken istediğiniz zaman Canlı görünüme geçiş yapabilirsiniz. Ancak, Canlı görünüme geçiş yapmak, Dreamweaver'daki diğer klasik görünümler arasında geçiş yapmakla ilişkili değildir (Kod/Bölünmüş/Tasarım). Tasarım görünümünden Canlı görünüme geçiş yaptığınızda, Tasarım görünümü, düzenlenebilir ve “canlı” arasında geçiş yapar.

Canlı görünüme girdiğinizde, Tasarım görünümü donmuş durumda kalırken Kod görünümü düzenlenebilir durumda kalır; böylece kodu değiştirip yaptığınız değişikliklerin geçerlilik kazanıp kazanmadığını görmek amacıyla Canlı görünümü yenileyebilirsiniz. Canlı görünümdeyken, canlı kodu görüntüleme seçeneğiniz de vardır. Canlı Kod görünümü, tarayıcının sayfayı oluşturmak için yürüttüğü kod versiyonunu görüntülemesi açısından Canlı görünüme benzer. Canlı görünüm gibi Canlı Kod görünümü de düzenlenemez bir görünümdür.

Canlı görünümün diğer bir avantajı da, JavaScript'i dondurabilme özelliğidir. Örneğin, Canlı görünüme geçiş yapabilir ve kullanıcı etkileşiminin bir sonucu olarak renk değiştiren jQuery tabanlı tablo satırlarına gidebilirsiniz. JavaScript'i dondurduğunuzda, Canlı görünüm sayfayı geçerli durumunda dondurur. Artık CSS veya JavaScript'i düzenleyebilir ve yaptığınız değişiklikleri görmek amacıyla sayfayı yenileyebilirsiniz. JavaScript'in Canlı görünümde dondurulması, farklı açılır menü durumları veya klasik Tasarım görünümünde göremediğiniz diğer etkileşimli öğelere ilişkin özellikleri görmek veya değiştirmek istediğinizde faydalı olur.

Canlı görünümde sayfaları önizlemek için:

  1. Tasarım görünümünde (Görünüm > Tasarım) veya Kod ve Tasarım görünümlerinde (Görünüm > Kod ve Tasarım) olduğunuzdan emin olun.

  2. Canlı görünüm düğmesini tıklatın.

  3. (İsteğe bağlı) Değişiklikleri Kod görünümünde, CSS Stilleri panelinde, harici bir CSS stil sayfasında veya başka bir ilgili dosyada yapın.

    Canlı görünümde düzenleme yapamazsınız ancak Canlı görünümde tıklattığınızda diğer alanlarda düzenleme yapma seçenekleriniz (örneğin, CSS Stilleri panelinde veya Kod görünümünde) değişir.

    Not:

    Belgenin üst kısmındaki İlgili Dosyalar araç çubuğundan ilgili dosyayı açıp Canlı görünümü odak noktasında tutarak ilgili dosyalarla (CSS stil sayfaları gibi) çalışabilirsiniz.

  4. Kod görünümünde veya ilgili dosyada değişiklik yaptıysanız, Belge araç çubuğunda Yenile düğmesini tıklatarak veya F5 tuşuna basarak Canlı görünümü yenileyin.

  5. Düzenlenebilir Tasarım görünümüne geri dönmek için, Canlı görünüm düğmesini tekrar tıklatın.

Canlı Kodu Önizleme

Canlı Kod görünümünde görüntülenen kod, sayfa kaynağını tarayıcıdan görüntülediğinizde göreceğiniz görünüme benzer. Bu tür sayfa kaynakları statiktir ve yalnızca tarayıcıdan sayfa kaynağı sunar; Canlı Kod görünümü ise dinamiktir ve siz Canlı görünümde sayfayla etkileşimde bulundukça güncelleştirilir.

  1. Canlı görünümde olduğunuzdan emin olun.

  2. Canlı Kod düğmesini tıklatın.

    Dreamweaver, tarayıcının sayfayı yürütmek amacıyla kullanacağı canlı kodu görüntüler. Kod, sarı vurgulanmıştır ve düzenlenemez.

    Sayfadaki etkileşimli öğelerle etkileşim kurduğunuzda, Canlı Kod, koddaki dinamik değişiklikleri vurgular.

  3. Canlı Kod görünümünde değişikliklerin vurgulanmasını kapatmak için, Görünüm > Canlı Görünüm Seçenekleri > Canlı Koddaki Değişiklikleri Vurgula seçeneklerini belirleyin.

  4. Düzenlenebilir Kod görünümüne geri dönmek için, Canlı Kod düğmesini tekrar tıklatın.

Canlı Kod tercihlerini değiştirmek için, Düzen > Tercihler (Windows) veya Dreamweaver > Tercihler (Macintosh OS) seçeneklerini belirleyin ve ardından Kod Rengi kategorisini seçin.

JavaScript'i dondurma

Aşağıdakilerden birini yapın:

  • F6 tuşuna basın

  • Canlı Görünüm düğmesinin açılır menüsünden JavaScript'i Dondur'u seçin.

Belgenin üst kısmındaki bilgi çubuğu, JavaScript'in dondurulduğunu belirtir. Bilgi çubuğunu kapatmak için kapatma bağını tıklatın.

Canlı görünüm seçenekleri

Canlı Görünüm düğmesinin açılır menüsünde veya Görünüm > Canlı Görünüm Seçenekleri menü öğesinde JavaScript'i Dondur seçeneği dışında kullanılabilir başka seçenekler de bulunmaktadır.

JavaScript'i Dondur Geçerli durumda JavaScript'ten etkilenen öğeleri dondurur.

JavaScript'i Devre Dışı Bırak JavaScript'i devre dışı bırakır ve sayfayı, bir tarayıcı tarafından JavaScript etkinleştirilmediğinde görüntüleneceği şekilde yeniden oluşturur.

Eklentileri Devre Dışı Bırak Eklentileri devre dışı bırakır ve sayfayı, bir tarayıcı tarafından eklentiler etkinleştirilmediğinde görüntüleneceği şekilde yeniden oluşturur.

Canlı Koddaki Değişiklikleri Vurgula Canlı Koddaki değişikliklerin vurgulanmasını açar veya kapatır.

Canlı Görünüm Sayfasını Yeni Bir Sekmede Düzenle Tarayıcı Gezinmesi araç çubuğunu veya Bağları İzle özelliğini kullanarak göz attığınız site belgeleri için yeni sekmeler açmanıza olanak sağlar. Belgeye yönelik yeni bir sekme oluşturmak için öncelikle belgeye göz atmanız ve ardından Canlı Görünüm Sayfasını Yeni Bir Sekmede Düzenle seçeneğini belirlemeniz gerekir.

Bağı İzle Canlı Görünümde tıklattığınız bir sonraki bağı etkin duruma getirir. Diğer bir seçenek olarak, Canlı görünümde bir bağı etkin duruma getirmek için Ctrl tuşunu basılı tutarak o bağı tıklatabilirsiniz.

Bağları Sürekli İzle Canlı Görünümdeki bağları, siz onları yeniden devre dışı bırakıncaya veya sayfayı kapatıncaya kadar sürekli etkin duruma getirir.

Uzak Dosyaları Otomatik Senkronize Et Tarayıcı Gezinmesi araç çubuğunda Yenile simgesini tıklattığınızda, yerel ve uzak dosyayı otomatik olarak senkronize eder. Dreamweaver, her iki dosya da senkronize edilecek şekilde, yenileme öncesinde dosyanızı sunucuya yerleştirir.

Belge Kaynağı için Test Sunucusunu Kullan Genellikle dinamik sayfalar (ColdFusion sayfalar gibi) tarafından kullanılır ve dinamik sayfalar için varsayılan olarak seçilir. Bu seçenek belirlendiğinde, Dreamweaver, Canlı görünüm ekranı için kaynak olarak sitenin test sunucusundaki dosya versiyonunu kullanır.

Belge Bağları için Yerel Dosyaları Kullan Dinamik olmayan siteler için varsayılan ayar. Bir test sunucusu kullanan dinamik siteler için bu seçenek belirlendiğinde, Dreamweaver, test sunucusundaki dosyalar yerine belgeye bağlanan dosyaların (örneğin, CSS veya JavaScript dosyaları) yerel sürümlerini kullanır. İlgili dosyalarda yerel değişiklikler yaparak bu dosyaları test sunucusuna koymadan önce nasıl göründüklerini görebilirsiniz. Bu seçim kaldırılırsa, Dreamweaver, ilgili dosyaların test sunucusu sürümlerini kullanır.

HTTP İstek Ayarları Sizi, canlı verileri görüntülemek için değer girebileceğiniz bir gelişmiş ayarlar iletişim kutusuna götürür. Daha fazla bilgi için, iletişim kutusundaki Yardım düğmesini tıklatın.

Tarayıcıda aç

Bir sayfayı istediğiniz zaman tarayıcıda açabilirsiniz; sayfayı önce web'e yüklemeniz gerekmez. Sayfaya önizleme yaparken; gerekli eklentileri veya ActiveX denetimlerini tarayıcınıza yüklemiş olmanız koşuluyla, JavaScript davranışları, belgenin göreceli ve mutlak bağları, ActiveX® denetimleri ve tarayıcı eklentileri de dahil olmak üzere, tarayıcıyla ilgili tüm işlevlerin çalışması gerekir.

Belgeyi tarayıcıda açmadan önce kaydedin, aksi durumda tarayıcı yaptığınız en son değişiklikleri görüntülemez.

  1. Belge araç çubuğunda dosya adını sağ tıklatın ve Tarayıcıda Aç'ı tıklatın.

    Not:

    Listelenen tarayıcı yoksa Düzen > Tercihler ya da Dreamweaver > Tercihler (Macintosh) seçeneğini belirleyin ve tarayıcı seçmek için soldaki Tarayıcıda Önizleme kategorisini seçin. Daha fazla bilgi için bkz. Tarayıcı önizleme tercihlerini ayarlama.

  2. Sayfanızdaki bağları tıklatın ve içeriği test edin.

    Not:

    Bir test sunucusu belirtmediğiniz ya da Düzen > Tercihler > Tarayıcıda Önizleme yolundan Geçici Dosya Kullanarak Önizle öğesini seçmediğiniz sürece, belgeleri yerel bir tarayıcıda önizlerken sitenin köke ilişkin yoluyla bağlanmış içerik görünmez. Bunun nedeni tarayıcının site köklerini tanımamasıdır, sunucular tanır.

    Not:

    Köke ilişkin yollarla bağlanmış içeriği önizlemek için dosyayı uzak bir sunucuya yerleştirin ve sonra görüntülemek için Dosya > Tarayıcıda Önizleme seçeneğini belirleyin.

  3. Testi bitirdiğinizde tarayıcıdaki sayfayı kapatın.

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