Css ile Web Tasarım Dersleri: web tasarım

18 Nisan 2013 Perşembe

Çoklu Sütun Özellikleri

Bu işlem, ayrı paragraflar oluşturmak için formatlama sorunları yaşamadan içeriğiniz için çoklu sütunlar oluşturulmasını sağlar. Sütun sayısını istediğiniz miktara göre değiştirebilirsiniz.

Webkit nedir?: WebKit, web tarayıcılarına web sayfalarını işlemesine izin vermek için tasarlanmış bir yerleşim moturudur

Ne işe Yarar?:

Webkit motoru penceredeki web içeriğini görüntülemek için bir sınıflar kümesi sağlar ve bağlantılar gibi kullanıcı tarafından tıklandığı zaman tarayıcı özellikleri gerçekleştirir.

CSS3 Çoklu Sütunlar

CSS3 ile, metin atma için birden çok sütun oluşturabilirsiniz

birden çok sütun özellikleri:

Sütun sayısı

Sütun boşluğu

Sütun kuralı

Çoklu sütunlar oluşturma

Sütun sayısı özelliği sütun sayısının ayrılabilir olduğunu belirtir:

column-count: number|auto;

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}

<!DOCTYPE html>

<html>

<head>

<style>

.GS

{

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

column-count:3;

}

</style>

</head>

<body>

İçerdeki bu taş ve mermer salonda sizi "VATAN" ve "GALATASARAYLILIK" sevgisi karşılayacaktır. Kapının tam karşısındaki bölümde yalın olmasına karşın görkemli bir anıtta vatan uğruna şehit düşen Galatasaray Lisesi öğrencilerinin listesi yer almaktadır. Bu anıtı gördükten sonra "fazla söze gerek olmadığını“ siz de anlayacaksınız. Salonun, giriş kapısına göre sağ tarafında, Osmanlı İmparatorluğu'nun 1910 senesi hudutlarını gösteren bir harita, haritanın her iki yanında ise şehit olan gencecik yurtseverlerin fotoğrafları sıralanmıştır. Ve haritanın üstünde bir ibare: "Galatasaray'ın bu kahraman evlatları, 500 yıllık bu vatan topraklarını kurtarmak için şehid düştüler. Çoğu öğrenciyken gönüllü olarak katıldıkları savaşlarda şehit olan bu yurtseverler hiçbir zaman unutulmadı.

</div>

</body>

</html>

31 Mart 2013 Pazar

Css Nedir? (Başlangıç)

Hemen hemen hepimiz Microsoft Word programını kullanmışızdır. Css ‘i Word’teki “Stil” yapısına benzetebiliriz. Word’te belirlemiş olduğumuz stilleri nasıl istediğimiz yerde uygulayabiliyorsak,
CSS (Cascading Style Sheets – Stil Sablonları) ‘te , Web dokümanlarına stil eklemek için kullanılan basit ve güçlü bir dildir. Web sayfalarının yapılarını düsündügümüzde 3 kısma ayıra biliriz. çerik kısmı, biçimlendirme kısmı ve dinamik kısım.İçerik kısmı, HTML kodlarını içeren sayfa asıl içerigini olusturan birimleri oluşturma kısımdır. Bu kısım genelde metinlerden olussa da, resim, animasyon ve video gibi elemanlarıda içerir.Biçimlendirme kısmı, içerik kısmını kullanıcıya nasıl görüntülenecegini gösteren kısımdır. Sayfanın biçimini belirler. Kullanıcıya daha okunaklı ve kullanıslı sayfa sunmak için gerekli elemanları içerir. Dinamik kısım, Javascript ile yapılan dinamik islemleri içerir. Etkileşimli
sayfalar oluşturmak için kullanılır. Eskiden ki hala bu sekilde kodlama yapanlar mevcut. çerik kısmı ve biçimlendirme kısmı içi içe kodlama yapardık, örnegin yazıtipi tanımı için <font> etiketini kullanırdık. Eski kodlama yöntemi ile zaman, hız ve erişebilirlik açısından büyük kayıplarımız vardı. CSS biçimlendirme kısmının yönetimini sağlamak için kullanılır.
İ çerik kısmı ile biçimlendirme kısmının ayrılmasını saglayan CSS bize birçok avantajlar saglar. Örnegi 10.000 sayfası olan bir siteyi tek css dokümanı yardımı ile biçimlendirmemizi saglar. CSS 1996Vda W3C tarafından duyuruldu. Son olarak(Ocak 2003’den beri) CSS2.1 sürümü yürürlüktedir. CSS3.0Vda çalısmaları devam etmektedir. CSS3.0 için ayrıntılı bilgiye http://www.w3c.org/Style/CSS/current-work adresinden ulasabilirsiniz. Tablosuz Web Sayfası kodlama teknigini kullanmayanlar CSS’in ehemmiyetini tam olarak anlayamayacaktır.
CSS’in Avantajları
1. Html’ye göre daha çok biçimlendirme seçenekleri mevcuttur.
<h1>Doğuş Efe | Blog</h1>
HTML’de bu elemanın(h1) kalın, altı çizili, Artalan rengi kırmızı olarak atama gibi çesitli özellikler verebiliriz. Ancak bu özellikleri atamak içinde ayrı HTML elemanları kullanmak zorundayız (<strong>, <u>), ancak CSS’de bunu tek bir elemanla yapabiliriz ve ayrıca daha fazla stil özellikleri de atayabiliriz.(örn: kenarlık, rollover vs stillerini ekleyebiliriz.)
h1 {
color: white;
font: italic 11px Arial, serif;
text-decoration: underline;
background: yellow url(arkaplan.gif) repeat-x;
border: 1px solid red;
margin-bottom: 0;
padding: 5px;
}
2.Kullanım Kolaylığı
HTML’de her etikete artı özellikler eklemek için baska bir etiket ve/veya özellik eklememiz gerekmektedir. Bu islemi genis çaplı bir sitede yaptıgımızı düsünürseniz çok büyük zaman kaybı ve uğras gerektiğini göreceksiniz.
<h1><font color=”blue”>Doğuş Efe</font></h1>
Bunun gibi onlarca veya yüzlerce baslıgınız oldugunu düsünün, gerçekten çok zor. CSS’de aynı işlem için
h1 {color: blue}
Kodunu yazmamız yeterli. Bu elemanın özelliklerinde degisiklik yapmak istedigimizde sadece burada degistirerek tüm sitede bu elemanın özelliklerini degistirmis olacagız. Ayrıca bu islemi sadece bu etiket için değil diğer etiketlere de uygulayabiliriz.
h1, h2 {color: blue}
Ayrıca tek bir CSS dosyası ile sitenin tamamını yönetmek web kodlamacıları için çok büyük kolaylıktır. Sadece bir dosyada degislik yaparak tüm sitemizi ara yüzünü yönetebiliriz isterse yüzlerce sayfa olsun.
3.Tasarım Tutarlılığı
Tek CSS dosyası ile tüm sitenizi yönetebilirsiniz, bu özellik sayesinde siteniz tutarlılık kazanacaktır. Web sayfanızdaki ilk sayfadan son sayfaya kadar tutarlılıgınızı koruyarak ziyaretçinize düzenli bir içerik sunmus olacak ve sitenizin kendine has özelliklerini ziyaretçiye benimsetmis olacaksınız. Sayfalarımız hızlı yüklenecektir, çünkü aynı elemanları diger sayfalarda tekrar yüklemeyecek ve bu ziyaretçiye zaman kazandıracaktır.