Projeye Google Fonts Eklenmesi ve Web Sitesinde Slider Kullanımı
Beşinci adımımız olan bu adımda projemize Google Fonts eklemeyi öğreneceğiz. Ardından lisanslı bir slider'ın sitede nasıl kullanılacağını inceleyeceğiz.
Google Fonts
CSS3 ile gelen en büyük yeniliklerden biri de kuşkusuz font-face kullanımıdır. Bu yeni teknikle kullanıcıların işletim sisteminde tanımlı olmayan font'lar web sayfalarında gösterilebilir.
İleri web sitesi projemizde ise en çok kullanılan Google Font olan Open Sans fontunu kullanacağız.
Open Sans font sayfasına gitmek için yukarıdaki bağlantıyı kullanabilirsiniz.
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600&subset=latin-ext' rel='stylesheet' type='text/css'>
</head>
Google Font kullanımı için head kısmına yukarıdaki kodları yapıştırmamız yeterlidir.
body {
font-family: 'Open Sans', sans-serif;
}
Son olarak body kısmı için font ailesini Open Sans olarak tanımladığımızda artık fontumuzu projemizde kullanabilir olacağız.
Projenizde Google Fonts gibi harici bir kaynak yerine dahili bir font ailesi kullanmak isterseniz yukarıdaki bağlantının son başlığını inceleyiniz.
Web Tasarımda Slider
Web tasarımda slider iki anlama gelmektedir. İlki bir haber ve duyuru gibi geçişli görsellerin bulunduğu, gerektiğinde kısa açıklama metinlerinin kullanıldığı bilgilendirme alanlarıdır.
Örneğin; yukarıda gördüğünüz basit bir slider örneğidir. Bunu Prev ile Next geçiş düğmelerinden ve 1, 2, 3 gibi slider menüsünden anlayabilirsiniz.
Biz projemizde ise JMPress adlı bir slider kullanacağız.
JMPress Slider sayfasına gitmek için yukarıdaki bağlantıyı kullanabilirsiniz.
Slider'ın ikinci anlamı ise yukarıdaki görselde de gördüğünüz gibi ileri proglama bilgisi gerektiren aralık seçimi bileşenidir. Bu tür slider'lar genellikle bir tarih ya da fiyat aralığını seçmek için idealdir.
Ekler
Bu adımda biten çalışmayı ise aşağıdaki bağlantıdan indirebilirsiniz.
Bu adımın videosunu 1080p HD kalitesinde izleyebilirsiniz.
Beşinci adımı tamamladınız. Bir sonraki adımda ana sayfamızdaki içerik alanını ve Paketler bölümünü tamamlayacağız.