Sayfaları önizleme

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.

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. 

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.

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:

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.

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.