Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Örnek uygulama-2

3,535 views

Published on

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/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

CSS Örnek uygulama-2

  1. 1. Full Width Two Column Sticky Footer Hilal Seda Yıldız BÖTE-4 Eskişehir Osmangazi Üniversitesi hilalyildiz.com Bu belgedeki kodlar http://www.css-lab.com/ sitesinden alınmıştır
  2. 2. 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
  3. 3. 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.
  4. 4. 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).
  5. 5. HTML Dosyasını Oluşturma-4 Bu kısımda bir footer(altbilgi) tanımladık ve html etiketlerimizi sonlandırdık.
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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ğlar display:block: Linkleri veya nesneleri alt alta getirir
  10. 10. CSS Dosyasını Oluşturma-2.1: Kod çıktısı
  11. 11. 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
  12. 12. CSS Dosyasını Oluşturma-3.1: Kod çıktısı
  13. 13. 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.
  14. 14. CSS Dosyasını Oluşturma-4.1:Kod Çıktısı
  15. 15. 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.
  16. 16. CSS Dosyasını Oluşturma-5.1:Kod çıktısı
  17. 17. 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.
  18. 18. CSS Dosyasını Oluşturma-6.1:Kod çıktısı
  19. 19. 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.
  20. 20. CSS Dosyasını Oluşturma-7:Son Ekran
  21. 21. CSS’den önce CSS’den sonra

×