CSS Örnek uygulama-2
•Download as PPTX, PDF•
0 likes•3,680 views
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/
Recommended
More Related Content
More from Hilal Seda Yıldız
CSS Örnek uygulama-2
- 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. 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. 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. 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. HTML Dosyasını Oluşturma-4 Bu kısımda bir footer(altbilgi) tanımladık ve html etiketlerimizi sonlandırdık.
- 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. 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. 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. 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. CSS Dosyasını Oluşturma-2.1: Kod çıktısı
- 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. CSS Dosyasını Oluşturma-3.1: Kod çıktısı
- 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. CSS Dosyasını Oluşturma-4.1:Kod Çıktısı
- 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. CSS Dosyasını Oluşturma-5.1:Kod çıktısı
- 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. CSS Dosyasını Oluşturma-6.1:Kod çıktısı
- 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. CSS Dosyasını Oluşturma-7:Son Ekran
- 21. CSS’den önce CSS’den sonra