Web Tasarım ve Prog.Değerlendirme SorularıWeb Uygulama Sınavı Örneği

css ve div konularını içeren  web tasarımı ve programlama dersi uygulama sınavı örneği. Bu sayfada yer alan içerik web tasarımı ve programlama dersi için örnek bir sınav  olması ve öğrencilerin kendilerini sınayabilmesi için eklenmiştir. Aşağıda yer alan açıklamalar ve verilen resimleri kullanarak belirtilen web sayfasını ve stil dosyalarını oluşturup kendinizi sınayabilirsiniz. Sınav sonrası değerlendirme ölçeği ile kendi notunuzu değerlendirebilirsiniz.

Uygulama Sınavı ile ilgili açıklamalar

Genel Bilgiler

Öncelikle numaranız ve isminizden oluşan bir klasör oluşturunuz klasör ve dosya adlarında kesinlikle Türkçe karakter kullanmayınız. (Örnek: 1sefik)

Klasör içeriğiniz düzenli olmalı örneğin stil dosyanız css klasöründe, site resimlerini resimler klasöründe olacak  şekilde düzenleyiniz.

Site görünümü ve gerekli olan tüm ölçüler resimde görüldüğü gibidir.  Bunun dışında herhangi bir uzunluk veya genişlik bilgisine gerek yoktur.

Site Görünümü ve Gerekli Ölçüler

 

Html sayfasında bulunması gereken temle html etiketlerini mutlaka yazınız. Tasarımda sadece div kullanılacak hiçbir yerde tablo kullanmayınız. Tasarım için sadece ana sayfayı oluşturmanız yeterli. Sayfada belirtilen Hakkmızda, İletişim, Ürünler bağlantıları oluşturulacak ancak bu bağlantılara ait html sayfalarını oluşturmanıza gerek yoktur. Sadece resimde görünen index.html yi oluşturmanız yeterlidir.

Tasarımdaki yazı rengi, yazıtipi, çizgi rengi ,arkaplan resmi , banner vb. tüm biçimlendirme özellikleri stil dosyası içerisinden yapılacak stil dosyası css klasörü içerisinde tutulacak

Not: Kenarlıklarda köşelerin yuvarlanması ve linklere verilen gölgenin görüntülenmebilmesi için firefox , chrome veya internet explorer 9 veya daha yeni sürümlerinde  sayfanızı test ediniz

Site Başlığı Web Uygulama Sınavı olacak

Sitede kullanılacak resimler

Arka plan resmi	Banner	Anasayfadaki resim

Arkaplan

Site arka planı resimdeki gibi bulut resminden oluşacak

içerik, ve linklerden oluşan katmanların (divlerin) arkaplan renkleri beyaz yani #FFFFFF olacak

Banner

Banner ilgili alana arkaplan resmi olarak stil dosyası içerisinden eklenecek

Kenarlıklar

Tüm kenarlıkların renkleri #336699 , Tüm kenarlıkların köşeleri 10px olarak yuvarlanacak

İçerik

Ana Sayfa başlığı 24px boyutunda ve #000080 renginde olacak

Anasayfada 2 paragraf , iki yana yaslanmış ve #336699 renginde olacak paragraf yanındaki resim.png dosyası index.html içerisinden eklenecek metin ile resmi hizalama resimdeki gibi olacak

Linkler

Soldaki Menü linkleri normal hali

resimde görüldüğü gibi gölgeli olacak

Zemin rengi #AACCFF

Yazı rengi #000080

Soldaki Menü linkleri mouse ile link üzerine  gelindiğinde

Zemin rengi #EEEEEE

Yazı rengi #FF0000

Altta bulunan linkler nomal hali

alt çizgisi olmayacak

rengi #000080 olacak

Alltaki linlerin mouse ile üzerine  gelindiğinde

renk değişmeyecek

altı çizgili olacak

Not : Sınav süresi 60-70 dakika olarak kendinizi sınayabilirsiniz.

Değerlendirme Çizelgesi : Aşağıda excelde hazırlanmış  değerlendirme çizelgesini indirerek sınav sonrası notunuzu değerlendirebilirsiniz.

Değerlendirme Eklenecek

 

Yukarıdaki sitenin tamamlanmış halini buradan indirebilirsiniz.

Yukarıdaki sitenin çalışan halini buradan inceleyebilirsiniz

Örnek çözüm için video eklenecektir.