25/4/2007
Sayfaya imaj girmek :

Tasarımınızın gerekliğine göre bazı yerlere imaj girmek durumunda kalırız. Bu bir table ya da div tagının içi olabilir. Bu makalede bir projeye dahil olmayan boş bir sayfa üzerinde imaj işlemlerini yapacağız.

İmaj eklemenin çeşitli yolları bulunmaktadır.

Insert>Picture>From File

Bunun yanında direk kameradan veya tarayıcıdandan imaj eklemenizde mümkün.

Resmi bu şekilde girince, erişilebilirlik özellikleri ile ilgili bir pencere gelmektedir. Alternate text’i doldurmanın etik olarak iyi bir alışkanlık olduğunu bilmenizde yarar var. Engelli kullanıcılar, eski browser kullananlar, tüm görselleri kapatarak sörf yapanlar için önemli bir özellik.

İmaj eklemenin bir diğer yolu da sürükle bıraktır. Tool box’dan ya da Folder List’ten.

Veya toolbarınızdaki “insert picture from file” butonunu kullanabilirsiniz.

İmaj Özellikleri

General Tab’ı

İmaj ikonuna sağ klik yapıp, Picture Properties’i açıyoruz.

Browse’u kullanarak girmek istediğimiz resmi bulup işlemi tamamlıyoruz.

Şimdi bu kutuyu inceleyelim.

Resim eklendikten sonra “Picture File Type” butonu etkin hale gelmektedir. EW bu başarılı özelliği ile imaja format değişikliği uygulayabilmektedir.

Üst barda bu değişikliler sonucu imajın yeni boyu EW tarafından hesaplanıp bildiriliyor.

Bu pencerede GIF ve JPEG formatları için özelliklerde ayarlanabiliyor. JPEG seçiliyken “Use image as is” seçimini iptal ederek bu özelliklerin aktif hale gelmesini sağlıyoruz.

İmaj tipi üzerinde oynadığımızda bir uyarı gelmiyor fakat çalıştığınız sayfayı kaydetmek istediğinizde imajla ilgili bir pencere açılıyor.

Bu pencerede yeni imaj işlemi için ne yapmak istediğiniz soruluyor. Ben örnekte bir JPEG resmi PNG-24’de çevirdim. İsimde ya da klasörde değişiklik yapmadan, EW aynı isimde, aynı klasörde bir başka imaj yarattı.

İmaja alternatif yazı, uzun tanım eklemek, imajı linklemek; imaj özellik kutusuyla oldukça kolay.

<a href=”default.htm”> <img alt=”deneme olarak yazılmış yazı” src=”witch_by_TheCryBaby.jpg” width=”500″ height=”720″ ></a>

Appearance Tab’ı :

Bu tab’da ise imajın genel olarak yerleşim ayarları bulunmaktadır.

“Wrapping Style”; imajınıza etrafına yazı bindirmesi yapmanızı sağlayan CSS kuralını hazırlayan bölümdür.

“Layout” ise imajınızın bordür kalınlığı, marjinleri, yerleşimi gibi özelliklerin belirlendiği bölümdür.

“Size” ise imajınızın boyuyla ilgili bölümdür. “Specify size” daki işareti kaldırarak imajın boyunun değiştirilebilmesini engelleyebilirsiniz. “Keep aspect ratio” ise imaj boyunda yapılan değişiklerde oranın korunmasını sağlar.

İmaja yazı bindirme

Gelişen web teknolojilerinde karşılaşılan tüm ihtiyacı karşılaması düşünülerek hazırlanmış Expression Web imaja yazı bindirme konusunda da kolaylık sağlamış.

İlk yapmanız gereken imajınızın ve yazılarınızın durumunu belirlemek. Bu örnekte imajı sağa yaslı olarak düşünüyoruz.

Şimdi yazımızı ekleyelim.

Dikkat etmeniz gereken konu, yazı ve imajın aynı tag’ın içinde yer almasıdır.

Sırada yazının imajdan açılması var. Bunun için Picture Properties penceresinde Appearance tab’ını açıyoruz. Horizantal ve Vertical Margin’leri 30px yapıyoruz.

Sonuç

Bu işlemi yaparken EW şu kodları bastı.

<img alt=”” src=”witch_by_TheCryBaby.jpg” width=”500″ height=”720″ style=”float: right” />
<style type=”text/css”>

.style1 {
margin: 30px;
}
</style>

Projelerinizde imaja yazı bindirme işleminizi bu şekilde çözmek yerine CSS yazmanızı tavsiye ederim. Eğer bu projede bir CSS dosyası tanımlamış olsaydık. classımız şu şekilde olacaktı.

.bindirme{
float:right;
magrin:30px
}

Bu sitili imaja uygulayacaktık.

<img alt=”” src=”witch_by_TheCryBaby.jpg” width=”500″ height=”720″ />

Bu şekilde hazırlanmış bir CSS kuralınızı her defasında istediğiniz imaja uygulayabilirsiniz.

Picture ToolBar :

İmajın üstüne sağ klik “Show Pictures Toolbar” a tıklıyoruz.

Soldan Sağa;

Insert Picture from file : İmaj girmemizi sağlıyor.

Auto Thumbnail: Orijinal resme linkli thumbnail yaratmanızı sağlıyor. Bu iyi düşünülmüş bir özellik olmuş. Resim seçiliyken butona basarsanız, EW sizin için resmin küçük versiyonunu büyük resme linkli olarak hazırlıyor. Sayfayı kaydettiğinizde ise bu thumbnail resmi nereye, hangi formatta kaydetmek isteğinizi soran iletişim penceresi geliyor.

Tools>Page Editor Options’daki Autothumbnail tab’ı ile oluşturacağınız thumbnaillerinizin özelliklerine karar verebilirsiniz.

Bring Forward, Send Backward: İmajın z-indexlerini ileri geri değiştiren butonlar.

Rotate Left 90° – Rotate> Right 90° : İmajınızı saat yönünün tersine ve saat yönünde 90° çeviren butonlar.

Flip Horizontal,  Flip Vertical : İmajınızı yatay ve dikey çeviren butonlar.

More Contrast, Less Contrast, More Brightness, Less Brightness : Kontrast ve ışık ayarlarını yapan butonlar.

Crop : İmajınızı kırpmanıza yarayan buton.

Crop butonuna tıklayıp, imajınızın istediğiniz bölümünü seçip, enter’a basınca crop işlemini tamamlamış oluyorsunuz.

Sayfayı kaydettiğinizde bu kırpılmış imajı nereye, hangi formatta kaydetmek isteğinizi soran iletişim penceresi geliyor.

Set Transparent Color : İmajınızı EW ile transparan GIF haline getirmeniz mümkün. Butonu seçip imajınızdaki yok etmek istediğiniz arka plan rengine tıklayıp, dosyayı kaydettiğinizde yeni oluşan imaj için gelen iletişim penceresindeki işleminizi de tamamlayınca; transparan GIF’iniz hazır oluyor.

Color: İmajınızı siyah beyaz ve silik bir hale getirmenize sağlayan buton.

Bevel: İmajınıza Bevel uygulayabilen buton.

Resample : İmajın fiziksel boyunu ve pixel boyutlarını artırıp azaltan buton.

Select, Rectangular Hotspot, Circular Hotspot, Polygonal Hotspot, Highlight Hotspots: İmajların üstünde bölgesel link vermenizi sağlayan butonlar.

Toolbar’ı en çok kullanmanıza sebep olacak bölüm olacaktır. Tasarımlarınızda bazen navigasyon imajını tek parça halinde çıkarmak zorunda kalabilirsiniz. Bu durumlarda hot spot’lar işinizi çok kolaylaştıracaktır.

Mapleyeceğiniz imajı seçip istediğiniz şekli kullanarak hot spotu belirtiyoruz. Mouse bıraktığımızda spot’un nereye linkleneceğini belirtmemizi isteyen pencere açılacak. Linkimizi verip işlemi tamamlıyoruz.

Farklı şekil seçenekleriyle, farlı hot spotlar yaratabiliyoruz.

Select butonu ile hot spotlarımızın özellikleri ile istediğimiz zaman oynayabiliyoruz. Yerlerini, şekillerini değiştirebiliyoruz.

Highlight Spot butonu ile yarattığımız hot spotları kolayca görebiliyoruz.

Restore: Bu buton sayfayı kaydedene kadar yaptığınız imaj işlemlerini geri alır.

Bu makalede Microsoft Expression Web’de imaj işlemlerini anlattım.

İyi çalışmalar.