Kullanıcı Kılavuzu İptal

Sayfaları önizleme

 

 

Web sayfalarınızı Dreamweaver'da ve tarayıcılarda önizleyin.

Gerçek zamanlı önizleme, sayfalarınızı tarayıcıda önizlemenizi ve kod yazarken değişiklikleri tarayıcıda 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ü de sayfanızın web'de nasıl görüneceğine dair bir fikir verir ancak sayfayı tam olarak tarayıcıların yaptığı gibi işlemez.

Tarayıcıda Aç özelliği, sayfalarınızın tarayıcılarda nasıl görüneceğini görmenizi sağlar. Bu, gerçek zamanlı olmadığından veritabanlarındaki dinamik verileri kullanan sayfalarla çalışmak için en iyi seçenektir.

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

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

Dreamweaver'da kod yazarken veya tasarım yaparken web sayfalarınızı gerçek zamanlı olarak önizleyebilirsiniz. Bu özellik, birden fazla tarayıcıda aynı anda kod yazmanızı ve 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

  1. Dreamweaver durum çubuğunda Gerçek Zamanlı Önizleme'yi tıklatın.

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

    Web sayfalarınızı bir tarayıcıda gerçek zamanlı olarak önizlemeyi seçebilirsiniz.

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

    Bu listede görüntülenen 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 sunucusundaki dosyaları kaldırır. Test sunucusuna otomatik olarak gönderme seçeneği etkinleştirildiğinde değişiklikleri gerçek zamanlı olarak görebilirsiniz. 

  3. İstendiğinde web sayfasını ve ilgili belgelerini kaydedin.

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

  4. Sayfanız için kod yazmaya devam edin ve kod yazarken değişiklikleri tarayıcıda izleyin.

Tarayıcı önizleme tercihlerini ayarlama

Tarayıcıda gerçek zamanlı önizleme ve önizleme arasında geçiş yapabilirsiniz. Siteyi önizleme sırasında kullanılacak tarayıcı tercihlerini ayarlayın ve varsayılan birincil ve ikincil tarayıcıları tanımlayın.

Bu tarayıcı tercihleri, sitenizi gerçek zamanlı önizleme ile canlı olarak önizleyip izlemediğinizden veya sayfayı tarayıcıda açıp açmadığınızdan bağımsız olarak kullanılır.

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

    Gerçek zamanlı önizleme
    Statik Tarayıcıda Önizleme varsayılanını kullan

    Statik Tarayıcıda Önizleme varsayılanını kullan seçeneğinin seçimini kaldırırsanız gerçek zamanlı önizleme devre dışı bırakılır. Tarayıcıda önizlemeyi açmak için birincil ve ikincil tarayıcıların klavye kısayollarını kullanabilirsiniz. Alternatif olarak, Dosya menüsünü kullanabilir veya durum çubuğundaki cihaz önizleme simgesini tıklatabilirsiniz. 

  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 bir tarayıcıyı 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üzenle 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üncellemek istiyorsanız bu seçeneğin işaretini kaldırın.)

Statik Tarayıcıda Önizleme varsayılanını kullan  Bu, kullanıcıların dosyalarını tarayıcıda önizleme modunu seçmelerine olanak tanır. Onay kutusu işaretlendiğinde kullanıcılar, menülerden “Tarayıcıda aç” seçeneğini ve kısayolları kullanarak dosyaları önizleyebilir. Seçenek işaretlenmezse, tarayıcılarda dosyaların önizlemesi için Gerçek Zamanlı Önizleme kullanılır. Varsayılan olarak, onay kutusu işaretli değildir ve dosyaların tarayıcıda önizlenmesi için Gerçek zamanlı önizleme kullanılır.

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 diğer alanlarda düzenleme yapma seçenekleriniz (örneğin, CSS Stilleri panelinde veya Kod görünümünde) Canlı görünümde tıklattığınızda değişir.

    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 Canlı görünümde sayfayla etkileşimde bulundukça güncellenir.

  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ı renkle 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. Alternatif olarak, Canlı görünümde bir bağı etkin duruma getirmek için Control tuşunu basılı tutarak bağı tıklatabilirsiniz.

Bağları Sürekli İzle Canlı Görünümdeki bağları, yeniden devre dışı bırakılıncaya veya sayfa kapatılı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, yenileme öncesinde dosyanızı sunucuya yerleştirerek her iki dosyanın da senkronize edilmesini sağlar.

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 sürümünü 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. Sayfayı önizleme sırasında 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 bir 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 site kökünün göreceli yoluyla bağlanmış içerik görünmez. Bunun nedeni, tarayıcıların site köklerini tanımaması ve sunucuların tanımasıdır.

    Not:

    Kök göreceli yollarıyla bağlanmış içeriği önizlemek için dosyayı uzak bir sunucuya yerleştirin ve ardından görüntülemek için Dosya > Tarayıcıda Önizleme seçeneğini belirleyin.

  3. Testi tamamladığınızda tarayıcıdaki sayfayı kapatın.

Daha hızlı ve daha kolay yardım alın

Yeni kullanıcı mısınız?