CSS kullanarak bir içerik sayfası yapılandırmak, ustalaşmak için çok önemli bir beceridir. Bu değerlendirmede bir sayfanın nasıl görünebileceğini seçme yeteneğinizi test edeceğiz.
Başlangıç noktası
Bu değerlendirmeye başlamak için tüm başlangıç dosyalarını içeren zip dosyasını indirin.
Zip dosyası şunları içerir:
- Yapısal işaretleme eklemeniz gereken HTML.
- İşaretlemenizi biçimlendirmek için CSS.
- Sayfada kullanılan görseller.
Örneği yerel bilgisayarınızda oluşturabilir veya alternatif olarak aşağıdaki gibi bir çevrimiçi araç kullanabilirsiniz: codepen, jsFiddle, veya glitch.
Proje tanıtımı
Bu proje için göreviniz, bir kuş gözlem web sitesinin ana sayfasının içeriğini almak ve sayfaya yapısal öğeler ile düzen eklemek. Sayfanın şunlara sahip olması beklenir:
- Sayfanın ana başlığını, site logosunu ve gezinme menüsünü içeren sitenin tüm genişliğini kapsayan bir üst alan. Stil uygulandıktan sonra başlık ve logo yan yana görünür ve gezinme menüsü bu iki öğenin altında yer alır.
- Karşılama metnini içeren bir ana blok ve küçük görsel resimleri içeren bir kenar çubuğu olmak üzere iki sütun içeren bir ana içerik alanı.
- Telif hakkı bilgilerini ve tanıtım yazısı içeren bir alt alan.
Aşağıdakiler için uygun bir HTML öğesi eklemeniz gerekir:
- Üst alan
- Gezinme menüsü
- Ana içerik
- Karşılama metni
- Kenar çubuğu
- Alt alan
Ayrıca şunları yapmalısınız:
- Sağlanan CSS’yi
<link>ile başlangıçta sağlanan mevcut öğenin hemen altına başka bir öğe ekleyerek sayfaya uygulayın .
İpuçları ve püf noktaları
- W3C Nu HTML Denetleyicisi kullanarak HTML, CSS ve SVG’nizdeki istenmeyen hataları (başka türlü gözden kaçırmış olabileceğiniz hataları) yakalayın, böylece bunları düzeltebilirsiniz.
- Bu değerlendirmeyi yapmak için herhangi bir CSS bilmenize gerek yok; verilen CSS’yi bir HTML öğesinin içine koymanız yeterli.
- Sağlanan CSS, işaretlemeye doğru yapısal öğeler eklendiğinde, oluşturulan sayfada yeşil görünecek şekilde tasarlanmıştır.
- Takılıp kalıyorsanız ve hangi öğeleri nereye koyacağınızı tahmin edemiyorsanız, sayfa düzeninin basit bir blok şemasını çizin ve her bloğu sarması gerektiğini düşündüğünüz öğeleri yazın. Bu son derece yararlı bir alıştırma olabilir.
Örnek
Aşağıdaki ekran görüntüsü, ana sayfanın düzenlendikten sonra nasıl görünebileceğinin bir örneğini göstermektedir.
