Bir okulun ana sayfasını düzenlemek

Bu değerlendirmede, bir okulun ana sayfasının metnin şekillendirmenizi sağlayarak, bu ünite boyunca ele aldığımız tüm metin şekillendirme tekniklerini kavrayışınızı test edeceğiz. Yol boyunca biraz eğelebilirsiniz.

Ön koşul: Bu değerlendirmeyi denemeden önce, bu ünitedeki tüm derslerin üzerinde çalışmış olmanız gerekir
Amaç: CSS metin stil tekniklerinin anlaşılmasını test etmek.

Başlangıç noktası

Bu değerlendirmeyi başlatmak için şunları yapmalısınız:

Alternatif olarak, değerlendirmenizi yapmak için JSBin ve Glitch gibi siteleri kullanabilirsiniz. HTML'yi yapıştırabilir ve CSS'i bu çevrimiiçi düzenleyicilerden birine doldurabilir ve arka plan resmini işaret etmek için bu URL'yi kullanabilirsiniz. Kullandığınız çevrimiçi düzenleyicinin ayrı bir CSS paneli yoksa, bunu <style> etiketi ile HTML sayfanıza yerleştirebilirsiniz.

Not: Sıkıştığınızda bizden yardım isteyebilirsiniz — bu sayfanın altındaki Değerlendirme ve daha fazlası bölümüne bakabilirsiniz.

Proje tanıtımı

Hayli bir okulun ana sayfası için bir miktar ham HTML, ayrıca sayfayı üç sütunlu bir düzende biçimlendiren ve başka bazı temel stil sağlayan bazı CSS'ler sağlandı. Yaptığınız bitleri işaretlemenin kolay olduğundan emin olmak için CSS eklemelerinizi CSS dosyasının altındaki yourmun altına yazmalısınız. Bazı seçiciler tekrarlıysa endişelenmeyin.

Yazı tipleri:

  • Öncelikle, kullanımı ücretsiz birkaç yazı tipi indirin. Bu bir okul olduğundan, yazı tipleri sayfada oldukça ciddi, resmi, güveniir bir his verecek şekilde seçilmelidir — genel metin gövdesi için serif site çapında bir yazı tipi, başlıklar için ise sans-serif veya slab-serif birlikte güzel olabilir.
  • @font-face ile bu iki yazı tipi için uygun bir hizmet kullanın.
  • Gövde yazı tipinizi tüm sayfaya ve başlıklar için seçtiğiniz yazı tipinide başlıklara uygulayın.

Genel metin stili:

  • Sayfaya site genelinde font-size: 10px olarak tanımlayın.
  • Başlıklarınıza ve diğer öğe türlerinize, uygun bir göreli birim kullanarak tanımlanmış uygun yazı tipi boyutları verin.
  • Gövde metninize line-height niteliği ile uygun bir metin yüksekliği verin.
  • Üst düzey başlığınızı sayfada ortalayın.
  • Başlıklarınızı letter-spacing niteliği ile fazla ezilmemeleri için harflerin arasına biraz boşluk verin.
  • Gövde metninize  letter-spacing ve word-spacing nitelikleri ile biraz boşluk verin.
  • Her başlıktan sonra ilk paragrafa <section> ile biraz metin girintisi verin, örn. 20px.

Başlantılar:

  • Bağlantıları ziyaret, odak ve fareyle üzerine gelme durumlarına göre sayfanın üst ve alt kısmındaki yatay çubukların rengiyle uyumlu bazı renkler verin.
  • Varsayılan olarak bağlantıların altı çizili olacak şekilde yapın, ancak üzerine geldiğinizde veya odaklandığınızda alt çizgiler kaybolmalı.
  • Varsayılan odak çerçevesini sayfadaki TÜM bağlantılardan kaldırın.
  • Etkin duruma gözle görülür şekilde farklı bir stil verin, böylece güzelce öne çıksın, ancak yine de genel sayfa tasarımına uymasını sağlayın.
  • Dış bağlantıların yanlarına harici bağlantı simgesinin eklenmesini sağlayın.

Listeler:

  • Listelerinizin ve liste öğelerinizin aralığının genel sayfasının stiliyle uyumlu olduğundan emin olun. Her liste öğesi line-height niteliği değeriyle paragraf satırıyla aynı olmalıdır ve her liste öğesi paragraflar arsında yaptığınız gibi üstte ve altta aynı boşluğa sahip olmalıdır.
  • Liste öğelerinize sayfanın tasarımına uygun güzel bir madde işareti verin. Özel bir madde işareti götüntüsü mü yoksa başka bir şey mi seçeceğiniz size kalmış.

Gezinti menüsü:

  • Sayfa için uygun bir görünüme sahip olacak şekilde gezinme menünüzün stilini belirleyin.

İpuçları ve püf noktaları

  • Bu alıştırma için HTML'yi herhangi bir şekilde düzenlemenize gerek yoktur.
  • Gezinme menüsünün düğmelere benzemesi gerekmez, ancak sayfanın yan tarafında aptalca görünmemesi için biraz daha uzun olması gerekir; ayrıca bunu dikey bir gezinme menüsü yapmanız gerektiğini unutmayın.

Örnek

Aşağıdaki ekran görüntüsüi bitmiş tasarımın nasıl görünebileceğine dair bir örnek göstermektedir:

Değerlendirme ve daha fazlası

Çalışmanızın değerlendirilmesini istiyorsanız veya takılıp kaldıysanız yardım isteyebilirsiniz.

  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyeiciye koyun.
  2. MDN söyleşi/öğrenme forumu kategorisinde değerlendirme ve/veya yardım isteyen bir yazı gönderin. Gönderi şunları içermelidir:
    • "Okulun ana sayfasını düzenlemek için istenen değerlendirme" gibi açıklayıcı bir başlık.
    • halihazırda denedikleriniz ve biden ne yapmamızı istediğinizle ilgili ayrıntılar, örneğin, takılıp kaldıysanız ve yardıma ihtiyacınız varsa veya bir değerlendirme istiyosanız.
    • Değerlendirilmesini istediniz veya yarımda ihtiyaç duyduğunuz önreğin bir çevrimiçi paylaşılabillir düzenleyicide bulunan bağlantısı (yukarıdaki 1.adımda belitildiği gibi). Bu, içine girmek için iyi bir uygulamadır — kodunu göremiyorsanız, kodlama sorunu olan birine yardım etmek çok zordur.
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.

In this module