25/4/2007
Merhaba. Bu makalede, ASP.NET ile hazırlanmış ve Master Page’i olan bir sitenin, Expression Web kullanılarak nasıl değiştirileceğini inceleyeceğiz.

Üzerinde çalışacağımız site daha önce benim tarafımdan tasarlanıp, takım arkadaşlarım tarafından ASP.NET ile yayına geçirilmiş bir sitedir. Site yayına geçtikten sonra, müşteriden gelen istek üzerine genel bir düzenleme yapılması gerekmiştir. Bu aşamada ben tasarımcı olarak müşterinin grafiksel isteklerini uygulayarak, bunları programcı arkadaşlarıma aktarırdım. Çünkü aspx sayfalarına müdahale etmem zordu. Ama Expression Web’de bu artık mümkün.

Başlayalım. İlk önce siteyi EW’e(Expression Web) tanıtmamız gerekiyor.

Menuden File>New>Web Site’yi kullanarak, site tanıtma penceresini açıyoruz. Bu sıfırdan yapacağımız bir site olmayacağı için “Import Web Site Wizard” ı seçiyoruz. Browse ile siteyi lokalimizde nerede tutacağımızı bildiriyoruz. Bir siteye ekleme yapmadığımıza göre “add to current web site” yi işaretlemiyoruz.

Ok’e basınca yeni bir pencere açılıyor. Bu pencere, import edeceğiniz sitenin nerede olduğuna bağlı olarak, nasıl alacağınızı sormaktadır. Benim örneğimde import edilecek sitede lokalimde olduğu için “File System” i seçip yer bildiriyorum. Sitenin altında subsites olmadığını bildiğim için burayı boş bırakıyorum.

Next’e basarak devam ediyoruz. Gelen ekranda, yeni kopyayı nerede tutacağımızı soruyor. Biz zaten başta burayı bildirdiğimiz için adres doğru olarak geliyor.

Next’e basarak işlemi sonlandırıyoruz.

Dosya transfer ekranı açılıyor. Bu aşamada FTP programı işlevinde görünüyor EW.

Tüm dosyaları seçerek yeni klasörüne aktarıyoruz.

Böylece siteyi EW’e tanıtmış oluyoruz. EW’yi kapayıp açtığınızda Folder List’te en son hangi site ile çalışmışsanız o sitenin klasörleri hazır oluyor. Bu sebeple yeni tanıttığımız siteyi Folder List’te açmalıyız. Folder List’in üstünde, klasör ikonun yanındaki oka tıklayarak “Open Site”yi seçiyoruz.

Gelen pencerede Web Sites’i seçiyoruz. Bu daha önce tanımladığımız tüm sitelerimizi görmemizi sağlıyor.

Sitemizi seçip devam ediyoruz. Artık site üzerinde çalışmaya hazırız.

ASP.NET programcıları hazırladıkları web sitelerinde genellikle master page kullanırlar. Bu tasarımcıların aşina oldukları DWT(Dynamic Web Template) ile aynı işi gören bir şablon sayfadır. Master Page ile yaratılmış bir siteyi editlemek için Visual Studio kullanmak gerekirken, artık bu sayfaları EW ile düzenleyebiliyoruz.

İşte Expression Web bu aşama tartışılmaz derecede başarılı. Master page düzenlemek, aspx sayfaları html sayfası kadar kolay düzenlemek büyük bir rahatlık.

Başlayalım.

İlk önce projenin master page’ini buluyoruz.

Master page artık açık.

Design, Split, Code görünümlerini kullanarak Master Page’in istediğimiz şekilde kontrolünü yapabiliriz.

Header ve footer, master page’de yaratılmış. İçeriğin değişeceği alan ContentPlaceHolder ile belirlenmiş. Master page’den yaratılmış tüm sayfalar bu içerik alanında farklılık gösteriyor. Bunun dışındaki alanlarda değişiklik yaptığımızda tüm sayfalarda değişmiş olacak.

İlk değişiklik header’in daraltılması. Hazır olan header, iki satırdan oluşan ve içinde resimler tutan bir table. Bu table’ı seçiyoruz. Yapacağımız ilk işlem table’ın satır sayısını bire indirmek olacaktır. Çünkü artık iki satırlı bir table’a ihtiyacımız yok. Yeni hazırladığımız header imajı daha küçük boyutlu olacak.

Table’ı seçtikten sonra, table özellik penceresi ile ya da split ve code moda geçerek kodlar üzerinde değişiklik yapabiliriz.

Bu örnekte özellik kutularını kullanmayı öğrenelim.

EW yüklendiğinde sağ alt tarafta CSS kutucuğu ve Tag kutucuğu tablı olarak geliyor. Ama siz özellik kutularının yer değiştirebilir olduğunu unutmayın.

Tag Properties tabını seçiyoruz. Bu da kendi başına bir kutu olarak durabilir.

Tag Properties, seçili olan table’ın özelliklerini gösteriyor.

Bu kutudaki Show Tag Properties butonuna tıklıyoruz. Table’ın özelliklerini gösteren bir pencere açılıyor. Table ile ilgili istediğiniz değişikliği bu kutudan yapabilirsiniz.

Fakat ben farklı ve hızlı bir yolla konuyu çözmek istiyorum. İlk önce table’ın alt satırındaki resmi seçip siliyoruz.

Açılan satırın içinde sağ klik yapıp, Delete>Delete Rows’u seçiyoruz.

Artık tek satırlı table’ımız hazır. Eski imajı kaldırıp yerine yenisini koyalım. Bunu yapmanın farklı yolları var.

Insert>Picture>From File ile imajı yerine koyabiliyoruz.

Bunu yapınca erişilebilirlik özellikleri ile ilgili bir pencere geliyor. Alternate text’i doldurmanın etik olarak iyi bir alışkanlık olduğunu belirtmeliyim. Engelli kullanıcılar, eski browser kullananlar, tüm görselleri kapatarak sörf yapanlar için önemli bir özellik.

Diğer bir yol ise; toolbox’dan HTML>Image objesini sürükleyip bırakmak. Bunu yaptığınız da bir imaj ikonu beliriyor. Bu ikona çift tıklayarak özeliklerinin penceresini açabilir ayarlarınızı yapabilirsiniz.

Folder List’ten resmin kendisini de sürükleyip bırakabilirsiniz.

İşlemlerimizi bitirdiğimizde master page’imizi kaydediyoruz. Böylece projedeki, bu master page’den yaratılmış tüm sayfalar değişmiş oluyor.

Master page’de bir Türkçe karakter problemi gözüküyor. Bunun düzelmesi için <HEAD> tag’ının altına

<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″ />

Satırını ekliyorum.

EW’nin Türkçe dilbilgisi kontrolü yapan bir Web editörü olması ise gerçekten çok güzel bir özellik.

Master Page’de değişiklikleri yaptıktan sonra geriye kalan iç sayfalardaki değişiklikler oluyor.

Eğer bir siteyi EW’ye tanıtarak çalışırsanız, dosyalar aspx dosyası bile olsa ön izleme yapabileceğinizi unutmayın.

Bu makalede master page’li bir siteyi Microsoft Expression Web’e tanıtmayı ve düzenlemeyi anlattık.

İyi çalışmalar.