25/12/2009
Merhaba bu makalemizde Expression Web 3 ile gelen bir diğer yeni özelliği, “SuperPreview” özelliğini inceleyeceğiz. Web tasarımcılarının en büyük sorunlarından bir browser farklılıklarıdır. Her browser’ın kendi sınırlarını çizmeye çalıştığı, aynı browser’ın versiyonlarının bile farklı davrandığı web aleminde bir siteyi herkesin aynı tasarımı görebileceği şekilde ayarlamak büyük bir sorundur…
Web tasarımcılarının en büyük sorunlarından bir browser farklılıklarıdır. Her browser’ın kendi sınırlarını çizmeye çalıştığı, aynı browser’ın versiyonlarının bile farklı davrandığı web aleminde bir siteyi herkesin aynı tasarımı görebileceği şekilde ayarlamak büyük bir sorundur. Bu sebeple web tasarımcısının bilgisayarında tüm browserlar yüklüdür. Çünkü bir ticaret sitesi tasarlıyorsanız örneğin, boş ver IE 6.0 kullananları, Mac’cileri, Safari’yi diyemezsiniz. Her tür kullanıcıyı düşünmek zorundasınız. Ama ya sizde IE 8.0 yüklüyken siteyi IE 6.0 ile kontrol etmek isterseniz ne olacak? Bu konuda yardımcı third party programlar bulunmakta ama Expression Web 3 zaten ihtiyacınızı ve fazlasını karşılayabilecek bir programla geliyor. “SuperPreview”
Expression Web’in önceki sürümlerinden beri zaten “Preview in Multiple Browsers” özelliği vardı. Bu özelliği kullandığınız anda kontrol etmek istediğiniz tasarım bilgisayarınızda yüklü olan tüm browserlarla açılırdı. Peki IE 8 yüklüyken IE 6’yı nasıl kontrol edeceğiz?
Tasarımınızı yaptınız ve farklı browserlarda nasıl göründüğünü kontrol etmek istiyorsunuz. O zaman “SuperPreview”u açalım. Bardaki butonu kullanarak
ya da File>Display in SuperPreview menüsünü kullanarak veya (Shift+F12) kısa yolu ile “SuperPreview”u açıyoruz.
Ayrıca “SuperPreview” un Expression grubunda standalone çalışabildiğini de söylemeliyim.
“SuperPreview” ayrı bir uygulama olarak açılır. Diğer özelliklerini de anlatacağım ama “SuperPreview” deki en önemli yer 1 ve 2 olarak işaret ettiğim yerlerdir. Bunlar soldaki görünümün hangi browser’a sağdaki görünümün hangi browsera ait olduğunu gösterir. Mouse imlecini üstlerine getirdiğinizde transparan bir şekilde ait oldukları tasarımın üzeri renklenir.
Soldaki kutucuk IE 6 için ön görünüm veriyor. Kırmızı işaretli kutucuğa tıklayarak görünümlerin yerlerini değiştirebilirsiniz.
Sağdaki ise IE 8 için görünüm veriyor.
Başka bir browser ile tasarımınızı kontrol etmek isterseniz, sağdaki kutucuktaki “+” işaretine basmanız gerekmektedir.
Bunu yapınca sağ tarafta hangi browserı seçmek istediğinizi soran bir ekran belirir.
Ben sağ tarafta tasarımı Firefox 3.5 ile açmasını istiyorum. Firefox’u seçince bu sefer sol köşedeki butonu kullanarak sayfayı refresh etmem gerektiğini söyleyen bir uyarı geliyor.
Artık sol taraf IE 6.0, sağ taraf Firefox 3.5 oldu. Çok yararlı değil mi?
Şimdi gelelim üst bardaki araçları kontrol etmeye. “Selection Mode” (V) tasarımınızdaki elementleri seçmenize yarar.
Bunu yaptığınızda seçmiş olduğunuz elementin farklı renkte göründüğüne dikkat edin. Bir diğer özellik ise seçilen elementin özelliklerinin ayrı bir kutuyla verilmesi ve browsera göre faklılıkların kırmızı ile belirtilmesidir.
Diğer bir araç ise “Panning Mode” (H)’dur. Bu araç ile tasarımlarınızı kaydırabilirsiniz. Bir tarafta tasarımı kaydırırken diğer tarafta aynı şekilde kayar.
“Box Highlighting Mode” (L) aktif ise tasarımınızda bir element seçtiğinizde o element farklı bir renk alır.
Eğer “Lights-Out Highlighting Mode” (L) aktif ise sadece seçtiğiniz element görünür olur diğer yerler transparan bir şekilde kararır.
Tasarımın etrafındaki cetvellerin görünür olup olmayacağını ayarlayabileceğiniz araç “Toggle Ruler Visibility” (R)’dir.
“Toggle Thumbnail Visibility”(T) ile tasarımların sağ alt köşesinde küçük bir versiyonlarını ve tasarımın neresine baktığınızı görmeniz mümkün.
Cetvellerden kılavuz çizgileri sürükleyebildiğinizi söylememde yarar var sanıyorum.
Ve bu kılavuz çizgileri “Toggle Guide Visibility” (Ctrl+;) ile açıp kapayabilirsiniz.
Tasarımların göründüğü pencerelerin nasıl dizileceğine karar verebilirsiniz. Yatay, dikey ya da tek pencere üzerinden çalışabilirsiniz.
Bence buradaki en ilginç ve güzel özellik, “Overlay Layout” (D). Bu görünümü şeklini seçtiğinizde iki browser için tasarımları üst üste gösterir.
Bence çok güzel bir özellik.
İstediğiniz URL’yi girip tasarımların yerleşimlerini browserlar için kontrol edebilirsiniz.
Bakalım Yahoo nasılmış?
Sayfalara zoom in / zoom out yapabilirsiniz.
Gelelim alt bara. Elementlerin üzerine geldikçe o element ile ilgili bilgiler alt barda görünür.
Sağ alt köşedeki “DOM” (O)’a basarak,
kodları ayrı açabilirsiniz.
Yine sağ alt köşeden çözünürlükleri de ayarlayabilirsiniz.
Bu makalede Expression Web 3 ile gelen ve çalışmalarınızda işinizi oldukça kolaylaştırabilecek “SuperPreview” özelliğini inceledik.
İyi çalışmalar
Teşekkürler.
