Web Sayfasına Resim Ekleme

Hayırlı günler bugün web sayfasına dreamweaver ile ve kodla resim eklemeyi anlatacağım.

Resim eklemeye başlamadan önce resimleri web sayfanıza ekleyeceğiniz klasöre atmanız gerekmektedir. Resimlerinde boyutlarını küçültmenizi tavsiye ederim. Çünkü büyük boyutlu resimler site belleğinizi ve site trafiğinizi dolduracaktır. Bu da sitenizi yoracak ve geç açılmalara neden olacaktır.

Dreamweaver ile Resim Ekleme:  Kaynak: www.mustafakarsli.com

Benim bilgisayarda cs5 Türkçe kurulu olduğu için ona göre anlatacağım. İlk olarak dreamweaverı açalım ve menülerden Ekle -> Görüntü (İnsert -> İmage) alt menüsüne tıklıyoruz. Karşımıza resim ekleme penceresi gelecek bu pencereden eklemek istediğimiz resmi seçiyoruz ve tamama basıyoruz. Aşağıda resmi inceleyebilirsiniz.

Yukarıdaki pencerede tamama bastıktan sonra karşımıza görüntü etiket tanımlama penceresi gelecek bu pencereden Alternatif metin yazan yere resim açıklamasını yazıyoruz. Bu açıklama fare resmin üzerine gelince görünecek. Uzun açıklama yazan yere ise resme link vermek istiyorsak oraya bağlantı adresini yazıyoruz. Aşağıda resmi inceleyebilirsiniz.

Yukarıdaki pencerede tamama bastıktan sonra resmimiz sayfamıza eklenecektir.  Resmin üzerine bir kere tıklayarak seçili konuma getirdiğimizde dreamweaverın alt kısmındaki özelikleri kullanarak resmi biçimlendirebiliriz. Aşağıda resim özelliklerini görebilirsiniz.

Yukarıdaki resme göre kısaca açıklayacak olursak;

• Gen: Resim genişliği  Kaynak: www.mustafakarsli.com
• Yük: Resim Yüksekliği
• D Boşluk: Resmin diğer nesnelerle dikeydeki boşluğu piksel olarak.
• Y Boşluk: Resmin diğer nesnelerle yataydaki boşluğu piksel olarak.
• Kaynak: Resmin adresi
• Bağ: Resme bağlantı (link) vermek için kullanılır.
• Hedef: Resme bağlantı verildiğinde aktif olur. Bağlantı verildiğinde tıklanınca sayfanın nerede açılacağı seçilir. _blank:yeni sayfada, _self:aynı sayfada, …
• Orijinal: Eklenen resim yüksek çözünürlüklü ise sayfa yüklenirken resim açılmada sorun olmaması için düşük çözünürlüklü aynı resim seçilir ve sayfaya yüksek çözünürlüklü resim yüklenene kadar düşük çözünürlüklü resim görüntülenir.
• Alt: Resme açıklayıcı yazı yazılır. Fare resmin üzerine gelince resmin üzerinde burada yazan yazı görünür.
• Düzenle: Resmi resim editörleriyle düzenlemek için kullanılır.
• Kenarlık: Resme kenarlık vermek için kullanılır. Boş yada 0 kenarlık yok anlamındadır. 1,2,3,.. şeklinde değer verilir. Sayı büyüdükçe kenarlık kalınlığı artar.
• Hizala: Resmi sayfadaki yazılar ve nesnelerle hizalamak için kullanılır. Orta, sol, üst, …
• Sınıf: Resme belirli sitiller vermek için kullanılır.

Yukarıda anlatılanlara göre kendi web sayfalarınızı zenginleştirebilirsiniz.

Kod ile Resim Ekleme:  Kaynak: www.mustafakarsli.com

Bir web sayfasına kod ile aşağıdaki gibi resim eklenir:

<img src="resimadresi/resim.jpg" width="300" height="200" align="middle">

Yukarıda kod ile resim eklenir. Resim eklemek için img etiketi kullanılır. Src parametresi resmin adresini yani konumu belirtir. Width resim genişliğini, height resim yüksekliğini belirtir. Align ise resmin hizalanması belirtir. Align parametresindeki middle ise dikeyde ortalı olduğunu gösterir.

Başka sitelerdeki resimleri de web sayfanıza ekleyebilirisiniz. Eklemek istediğiniz resmin tam adresini img etiketindeki src parametresine vermeniz gerekir.

Bu şekilde web sayfalarınıza resimler ekleyebilirsiniz. Evet hadi bakalım web sayfalarımızı biraz görsel yönden zenginleştirelim. Gerisi sizin çalışmanıza kalmış.

İlerleyen günlerde başka derslerde görüşmek üzere sağlıcakla kalınız.

Mustafa KARSLI   Kaynak: www.mustafakarsli.com