Web Ödevi 2 - Webpanosu.NET
Transkript
Web Ödevi 2 - Webpanosu.NET
Web Ödevi 2 - 201510 Şifalı bitkileri tanıtan tek sayfalık bir site yani sadece index.html sayfası bulunan bir site yapacaksınız. Sitenizi en geç 6 Kasım 2015 Cuma saat 21:00’a kadar yayınlamalısınız. Bu index.html sayfasında div etiketleri kullanarak sayfayı bölümlere ayıracaksınız. Sayfadaki div etiketleri şöyle olacaktır. Tüm bu div etiketlerinin görüldüğü gibi id’si vardır. Tüm sayfayı içine alan sayfa div’i vardır. Bunun içinde banner isimli başka bir div vardır. Banner div’inin altında icerik div’i vardır. Son olarak icerik div’inin altında alt div’i vardır. Öncelikle bu div etiketlerini oluşturup id’lerini veriniz. Banner div’inin içine banner resmini ekleyiniz. https://www.bitkikitabi.com/Bitkiler.aspx adresinden alfabetik olarak sıralanmış bitkilerden iki tanesini seçip aşağıdaki gibi içerik div’inin içine ekleyiniz. Bu bitkilerin resimlerini de indirip resimler klasörünüze kaydediniz. Burada örnek olarak menekşe ve cevizi seçtik. Onlara ait olan metinleri ve resimleri kullanarak aşağıdaki gibi bir html sayfası hazırladık. Not: Herkesin seçtiği bitkiler farklı olacaktır. Alt div’inin içine de aşağıdaki yazıyı yazınız. Photoshopta indirdiğiniz resimlerin üzerindeki yazıları aşağıdaki gibi siliniz. Bunun için nokta düzeltme fırçası aracını kullanabilirsiniz. HTML sayfanız bittiyse CSS kısmına başlayabilirsiniz. En sonda bitmiş sayfanın resmine de bakabilirsiniz. Öncelikle yeni bir css dosyası oluşturup css klasörüne kaydediniz. Sonra bu stil dosyasını index’e bağlayınız. İlk olarak body için kural yazınız. Body’nin css Kuralları: o Arkaplan: http://subtlepatterns.com/ adresinden beğendiğiniz bir arkaplanı indirip resimler klasörüne kopyalayınız. Bu resmi body’nin arkaplan resmi olarak ayarlayınız. Biz aşağıdaki resmi seçtik. Siz başka bir resim seçiniz. o Yazı Tipi: sans-serif o Yazı rengi: #666 o Yazı boyutu: 0.9em Kaplayıcı sayfa div’inin css kuralları: o Genişlik: 650px; o Ortalanmış o Arkaplanı: beyaz banner div’inin içindeki resmin css kuralları: o Alt Kenarlık: 8 piksel düz çizgi ve #0069b4 renginde İçerik div’inin css kuralları: o İç boşluk: 15px Sayfadaki tüm başlık 1’ler için css kuralları: o Yazı rengi: #688816 o Alt kenarlık: 2 piksel düz çizgi ve #688816 renginde o Üst dış boşluk: 0 piksel o Alt dış boşluk: 0 piksel Sayfadaki tüm başlık 2’ler için css kuralları: o Yazı rengi: #ea5b0c Sayfadaki tüm paragrafların css kuralları: o Hizalama: iki yana yaslı Bitkilerin resimleri için css kuralları: o İç boşluk: 5px o Kenarlık: 2px düz çizgi ve #ccc renginde Bitkilerin latince isimlerinin yazdığı paragrafların css kuralları: o Hizalama: Sağda o Dış boşluk: 3 piksel o Yazı boyutu: 0.8em Bitkilere ait sadece ilk paragrafların css kuralları: o Yazı: Kalın o Yazı rengi: #a00057 Tüm strong etiketlerinin css kuralları: (latince isimlerin olduğu yerde strong kullanmıştık) o Yazı rengi: Siyah Size göre yazıda önemli gördüğünüz yerler için aşağıdaki css kurallarını uygulayınız. İpucu: span ile yazıyı işaretle class ile biçimlendir. o o o Yazı: Kalın Yazı tipi: Tahoma Yazı rengi: Siyah Alt div’inin css kuralları: o Arpkaplan rengi: #222 o Yazı rengi: #eee o İç boşluk: 10px