Embed Size (px)
DESCRIPTION
Bu slaytta, CSS ile 2 sütun, footer ve header dan oluşan bir tablo oluşturmanın aşamaları açıklanmıştır. Kodların kaynak sitesi: http://www.css-lab.com/
Citation preview
Full Width Two Column Sticky Footer
Hilal Seda YıldızBÖTE-4Eskişehir Osmangazi Üniversitesihilalyildiz.comBu belgedeki kodlar http://www.css-lab.com/ sitesinden alınmıştır
Bu kısımda, HTML dökümanımızın dil kodlamasını utf-8, Başlığını ‘Full Width Two Column Sticky Footer’ olarak belirledik.
HTML Dosyasını Oluşturma-1
HTML Dosyasını Oluşturma-2
Bu kısımda,<body> etiketini açarak sayfanın görünen kısmını kodlamaya başladık.<div> etiketiyle sayfayı anlamsal bölümlere ayırdık(govde, baslik, ic, sol), class lara daha sonra stil
dosyamızda kullanacağımız isimler verdik.
HTML Dosyasını Oluşturma-3
Bu kısımda da bir önceki aşamada yaptığımız işlemlerin devamını gerçekleştirdik(sag, sahtekolon oluşturduk).
HTML Dosyasını Oluşturma-4
Bu kısımda bir footer(altbilgi) tanımladık ve html etiketlerimizi sonlandırdık.
HTML Dosyasını Oluşturma:Son ekran
Önceki dört aşamadan sonra html dökümanımızı stickyf.html olarak kaydedip tarayıcıdaki çıktısının yandaki gibi olduğunu görebilirsiniz
Halihazırdaki sayfamızın, yandaki gibi görünmesini sağlamak istersek neler yapmamız gerekir?
Öncelikle bunun için bir style dosyası oluşturmamız gerekiyor.
Oluşturduğumuz style dosyasını stylef.css kaydedelim
stickyf.html dosyamızın <head></head> kısmına aşağıdaki gibi bir ekleme yapalım. Bu ekleme bizim sayfamızı şekillendireceğimiz stil dosyamızı html sayfamıza çağırmamızı sağlayacak.
CSS Dosyasını Oluşturma-1
CSS Dosyasını Oluşturma-1
1. Satırda sayfanın genel iç ve dış boşlukları belirlenmiştir.2. Satırdan itibaren body kısmının özellikleri belirlenmiştir(background, font, color).8. Satırdan itibaren belirli tarayıcılar için düzenleme yapılmıştır.Şekilde kullanılan etiketler:
before: Belirlenen alanı öne taşır
CSS Dosyasını Oluşturma-2
stickyf.html dosyamızda govde olarak belirlediğimiz class ve alt classları, stylef.css dosyamızın bu kısmında şekillendirdik.Şekilde kullanılan etiketler:
after: Belirlenen nesnenin sonra gelmesini sağlardisplay:block: Linkleri veya nesneleri alt alta getirir
CSS Dosyasını Oluşturma-2.1: Kod çıktısı
CSS Dosyasını Oluşturma-3
Bu bölümde baslık class ımızın biçimsel özelliklerini belirliyoruz.Şekilde kullanılan özellikler:
text-align: yazı hizalamasız-index:2: sütunu alt katmana taşır
CSS Dosyasını Oluşturma-3.1: Kod çıktısı
CSS Dosyasını Oluşturma-4
Bu bölümde, stickyf.html dosyamızda tanımladığımız govde içerisindeki ic, sag, sol bölümlerini görünür hale getirip şekillendiriyoruz. 1 px lik kesikli kırmızı bir çizgiyle ic bölümünün kenarlığını oluşturuyoruz.
CSS Dosyasını Oluşturma-4.1:Kod Çıktısı
CSS Dosyasını Oluşturma-5
Bu bölümde, stickyf.html dosyamızdaki altbilgi yani footer classımızı görünür hale getirip biçimlendiriyoruz.
CSS Dosyasını Oluşturma-5.1:Kod çıktısı
CSS Dosyasını Oluşturma-6
Bu bölümde, stickyf.html dosyamızda tanımladığımız sahtekolon adlı classımızı şekillendiriyoruz. sahtekolon bir sonraki sayfada da görebileceğiniz gibi, sol bölümü footer la birleştirmemizi sağlıyor. Listeye sabit bir uzunluk veriyor. Böylece az önceki ekrandaki sol menünün eksik kalan beyaz kısmı, belirlenen sol menü rengiyle tamamlanmış oluyor.
CSS Dosyasını Oluşturma-6.1:Kod çıktısı
CSS Dosyasını Oluşturma-7
Bu kısımda ise sayfada yer alan metinlerin, classların genel hizalamaları, yazı tipleri belirleniyor. stickyf.html dosyamızda code olarak tanımlanan kısımların renklendirme işlemleri yapılıyor.
CSS Dosyasını Oluşturma-7:Son Ekran
CSS’den önce CSS’den sonra
