Pazartesi , 24 Temmuz 2017
Anasayfa » Sınavlar » Web Tasarımı ve Programlama Sınavı » Web Tasarımı ve Programlama Dersi 1.Dönem 2.Uygulama Sınavı

Web Tasarımı ve Programlama Dersi 1.Dönem 2.Uygulama Sınavı

 

Numara:                             Ad:                                                        Soyad:

Aşağıdaki puanlama kritelerine uygun olarak yapılacak.png tasarımının HTML ve CSS kodlarını yazınız.

PUANLAMA KRİTERLERİ
Zemin ve Genel Düzenleme 15
Sayfanın genel içerik bölümünün 1200px genişliğinde olmasını sağlayın
Üst kısmın zemin renginin tasarımdaki gibi yapın
Orta kısmın zemin rengini tasarımdaki gibi geçişli yapın
Alt kısmın zemin renginin tasarımdaki gibi yapın
İçeriklerin sayfanın ortasında gelmesini sağlayın
Üst kısımdaki turuncu şeridi oluşturunuz
Alt kısımdaki turuncu şeridi oluşturunuz
Üst Bölüm 30
Yazılım logosunun sayfanın sol üst kısımda yaklaşık 40px boşluklu olmasını sağlayın
Yazılım logosuna tıklayınca index.html sayfasına gitmesini sağlayın.
Menüyü liste etiketleri kullanarak oluşturun
Menüyü yatay olarak oluşturun
Her menü öğresi arasında eşit boşluk bırakın
Her menü öğesine tıklandığında ilgili sayfaya link verin(sayfanın olması şart değil)
Fare menü öğeleri üzerinde gezdiğinde web sekmesindeki gibi arkası turuncu olmasını sağlayın(hover)
Web sekmesinin seçili olasını sağlayın(aktif sekme olarak ayarlansın)
Orta Bölüm 25
Sol bölümün içerik genişliğini 750px olarak ayarlayın
Sol bölümdeki içeriğin dışında 20px şeffaf alanı oluşturun
Başlık yazısı arkasına baslik-bg resmini uygulayın
Takvim, tarih ve yazar alanlarını tasarımdaki gibi oluşturun
İçerikteki resmin tasarımdaki gibi sayfaya yerleştrin
İçerikteki yazıyı tasarımdaki gibi (yazı ile resim arasıda boşluk olacak şekilde) yerleştirin
İki içerik arasında 30px boşluk bırakınız
Sol panel ile sağ panel arasındaki boşluğu oluşturunuz.
Sağ paneli 400px genişliğinde oluşturunuz
Sağ paneldeki yazı ile çerçeve arasındaki 30px boşluğu oluşturunuz.
Panel başlığı yanındaki gri alanı oluşturunuz
Panel başlı altındaki 2px yüksekliğindeki gri alanı oluşturunuz.
Panel içindeki arama formunu oluşturunuz.
İkinci paneli oluşturunuz
İkinci paneldeki video resmini oluşturunuz
Alt Bölüm 30
Formun arkasındaki gri alanı oluşturunuz
Form nesneleri ile gri alan kenarları arasındaki boşluğu oluşturunuz
Form başlıkları ile form nesnelerini şekildeki gibi oluşturunuz
Formu gönder butonunu oluşturunuz
Formu gönder butonuna tıklandığında kayit.html sayfasını post yöntemi ile gitmesini sağlayınız
Sosyal medya sembollerini link olacak şekilde tasarımdaki gibi tasarlayınız.
Sosyal medya sembolleri arasında eşit şekilde boşluk bırakınız
Harita resmini tasarımdaki gibi ekleyiniz.

WEB TASARIMI 1.DÖNEM 2.SINAV(ÖĞRENCİ)

Hakkında Hayri

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir