08119 Web Tasarımının Temelleri. Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "08119 Web Tasarımının Temelleri. Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU"

Mehmed Eyüboğlu
5 yıl önce
İzleme sayısı:

1 Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU

2 Resimlerin Kullanımı : Web sayfasının hızlı açılmasınısağlamak için düşük dosya boyutlu resimler kullanılmalıdır. GIF ya da JPG formatındaki sıkıştırılmış resimler tercih edilmelidir. Web sayfalarında kullanılabilecek resim formatları ise; gif, jpg, jpeg, png formatlarıdır.

3 Sayfaya resim yerleştirmek : <IMG SRC= emyo.jpg BORDER=n ALT= Okul Manzarası > Dosya adı Tag (ve dosyanın yeri) (Resim çağırmak) Sınır (Resmin kenarlık çizgisi) Açıklama (Resmin açıklaması)

4 Resim için boyut belirtmek : Boyut belirtmek için HEIGHT ve WIDTH özniteliklerine piksel cinsinden değerler atanır. <IMG SRC= emyo.jpg Width= 600 Heigth= 800 > Genişliği (Horizental) Piksel (Değer) Eni (Vertical)

5 Düşük çözünürlüklü resimler kullanmak : Resminiz tam olarak yüklenmeden önce daha çabuk olarak düşük çözünürlüklü bir örneğinin ekrana gelmesini isteyebilirsiniz. Bunun için önceden bu düşük çözünürlüklü örneği oluşturup LOWSRC özniteliğinde bu resmi, SRC de ise asıl resmi göstermeniz gerekir. <IMG SRC= emyo.jpg LOWSRC= emyo2.jpg ALT=...>

6 Resimlerin çevresine metin yerleştirmek : Resimlerin çevresine metin yerleştirmek için ALIGN özniteliği kullanılır. Left değeri resmi sola, metni onun sağına; Right değeri resmi sağa, metni onun soluna yerleştirir. <IMG SRC= emyo.jpg ALIGN=right>

7 Metin sarımını durdurmak : Bir resmi metinle sardığınızda, yanında resim kalmayıncaya kadar metin resmin yanında devam edecektir. <BR CLEAR=left> sol yanında resim kalmayana kadar sarımını durdurmak <BR CLEAR=right>sağ yanında resim kalmayana kadar sarımını durdurmak <BR CLEAR=all> Her iki yanında resim kalmayana kadar sarımını durdurmak

8 Örnek Uygulama : Sonraki Yansı

9 Örnek Uygulama :

10 Resmin çevresine boşluk eklemek: <IMG SRC= emyo.jpg ALT= EMYO HSPACE=40 VSPACE=10> Burada resmin sağına ve soluna 40 ar piksellik HorizontalSPACE (Yatay Boşluk), alt ve üstüne ise 10 ar piksellik VerticalSPACE (Dikey Boşluk) eklenmiştir. HSPACE ve VSPACE boş piksel sayısıdır.

11 Resmi Ölçeklemek : <IMG SRC= emyo.jpg WIDTH=x HEIGHT=y> Resmi yeni boyut atayarak büyütmek için Width ve height nitelikleri kullanılır. Verilen değerler x ve y değerleri piksel cinsindendir.

12 Resimleri Hizalamak : Resimleri çevresindeki yazılarla hizalamak için de ALIGN özniteliği kullanılır. <IMG SRC= emyo.jpg ALIGN=direction> Burada direction yerine; texttop, top, middle, absmiddle, bottom, absbottom seçeneklerinden birisi yazılır.

13 Yatay Çizgi Eklemek : Web sayfanıza yatay düz bir çubuk eklemek için: <HR SIZE= 2 WIDTH= 70% ALIGN= CENTER NOSHADE> Burada SIZE piksel cinsinden yükseklik, WIDTH piksel ya da sayfa genişliğine göre yüzde cinsinden genişlik belirtir. NOSHADE ise gölgesiz bir çubuk oluşturmanızı sağlar.

14 Banner Kullanmak : Banner Örnekleri

15 Banner Kullanmak : Banner (Türkçe: "Manşet, Büyük başlık, Pankart") Reklam ve tanıtım amaçlı hazırlanan, Web siteleri ile gazetelerde başlık ya da alt kısmında yer alabilecek ölçülerde ya da afiş olarak, tasarlanmış kurumsal iletişim öğesidir. Genelde logo ile bütünleşik olarak kullanılır.

16 Banner Kullanmak : Banner boyut olarak 450x120 piksel, 600x140 piksel boyutlarında olabilir. Resim olarak hareketlide tasarlanabilir. Genelde logo ile birlikte kullanıldığından sayfanın üst ortasından ilk dikkat çeken kısımdır. Kabul edilebilir bir büyüklükte (KB) tasarlanmalıdır.

17 Banner Kullanmak : Daha büyük ölçülerde de tasarlanmaktadır. (Bkz. Örnek)

18 Devamı Haftaya

Benzer belgeler

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 6. DERS YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 HYPERLINKS - KÖPRÜ Sayfalara link (bağlantılar) oluşturmak için kullanılır.