Giriş » GRAFİK TASARIM » CSS tanımı ve tablosuz tasarım

CSS tanımı ve tablosuz tasarım

16 Mart 2007 | Kategori: GRAFİK TASARIM | Yazar:

CSS (Cascading Style Sheets) nedir, ne değildir? Biza sağladığı yararlar nelerdir? Stil şablonumu oluşturdum, peki nasıl sayfama ekleyeceğim gibi bir çok sorunun yanıtı ve basit tablosuz tasarım örneği.İçindekiler

Amaç
Tanım
Öneri
Bağlantı çeşitleri
Tablosuz tasarım giriş

Amaç

Bu yazımızdaki amacımız CSS hakkında genel bilgi vermek, CSS ile daha önce hiç tanışık olmayan kişilere genel bilgiler vermek, bağlantı çeşitlerini tanımak ve bir sayfayı nasıl tablosuz tasarlayabileceğimiz hakkında kısa (etkin) bir örnek hazırlamaktır.

Tanım

CSS (Cascading Style Sheets)’nin Türkçe karşılığı stil şablonları anlamındadır. CSS, HTML üzerinde yer alan çıktıları biçimlendirme fırsatı veren bir teknolojidir. "Peki bize ne gibi yararı vardır?" derseniz bir iki örnek ile CSS’nin neden günümüzde yaygın kullanıldığını ispatlayabilirim.

Bir sayfa düşünün. Bu sayfada çok fazla strong etiketi kullanılmakta. Fakat bazı etiketleri kırmızı ve 11px büyüklüğünde olmasını istiyoruz. İki seçeneğimiz vardır bunun için. Ya HTML kodları ile tek tek her birine özel stiller vereceğiz yada CSS dosyamızdan bir defa belirtip kullanacağız. Fakat işin pratiği her zaman bizim işimize gelecektir.

Projenizi göz önünüze alın. Siz sitenizi kırmızı ton ağırlıklı yaptınız fakat kullanıcılarınızdan gelen yoğun istek üzerine renk değişikliği yapmanız gerekiyor. Ve çok fazla sayfanız var bunu yapmanız belkide günlerinizi alacak. Ama eğer ki siz sitenizi CSS ile stil dosyanızı kullanarak oluşturmuş olsaydınız sadece dakikalarınızı ayırmanız yeterli olacaktı.

Şuanda ben sizlere karşılaştığım, ve bir çok kişinin de zor durumda kaldığı iki basit anıyı belirttim. Sizlerde zamanla bir çok faydası göreceksiniz ve iyi ki CSS ile tanışmışım diyeceksiniz.

Öneri

CSS’yi mutlaka öğrenmelisiniz. Hem zaman kazanmak için, hem işlerinizi daha pratik yürütmek için hem de sayfanızı daha esnek gösterebilmek için. Dikkatinizi bir noktaya çekmek istiyorum. Eskiden toplist diye nitelendirdiğimiz gelişi güzel tüm sitelerin listelendiği siteler popülerdi. Fakat ne zamanki CSS varlığını gösterdi artık yeni trend CSS Galerileri oldu. En sıklıkla takip edilen CSSMania, CSSBeauty, CSSVault vb… gibi siteler arasına ne mutlu ki Türkiye’den de bir iki sitemiz yer almaktadır. İştirak sahibi ve yöneticisi olduğum CSSGaleri.com ve kardeş bağlantım olan CSSBahcesi.com. Galerileri sıklıkla takip ederek CSS kullanarak oluşturulmuş siteleri gezerek daha farklı fikirler elde edebilirsiniz. Diğer siteler ile arasında olan farklılıkları hissedebilir, esnekliği çok net hissedebilirsiniz.

CSS’yi sitenizde yüzeysel olarak kullanmayın. Tüm alanlarınıza yayın. Örneğin kimi siteler sadece linkleri CSS’de biçimlendirir ve diğer alanları eski usul ile biçimlendirir. Hayır, sizler tüm alanlarınızı CSS ile yönetebilmelisiniz, yönetmelisiniz.

Her zaman web’in en geniş ve en basit anlatımı olan fakat Türkçe dil desteği olmayan W3Schools‘a girip dökümanları okuyarak bilgilerinizi tazeleyin.

Bağlantı çeşitleri

Aktif olarak sayılabilir 3 çeşit bağlantı metodu vardır;

Import medotu <style type=text/css media=screen>@import url(dosyaadi.css);</style>
Link medotu <link href="dosyaadi.css" rel=stylesheet type=text/css />
HeadTag medotu sayfada direkt olarak <style type=text/css>…</style> arasına yazılır.

Ayrıca bunlara ek olarak sayfada o anki elemente <p style="…"></p> ile de stil verebilirsiniz ama bu tercih etmediğimiz yöntemdir.

Tablosuz tasarım giriş

Şimdiye kadar CSS hakkında bilgiler verdik. Nedir ne değildir anlamaya -anlatmaya- çalıştık. Şimdi gelelim bir örnek ile konuyu bütünleştirmeye. Amacımız tablo kullanmadan bir sayfa (layout) oluşturmaya. Öncelikle sayfamızda yer alacak ana alanları listeleyelim;

Tüm alanları bünyesinde barındıracak #ana alanı,
Header görevini üstlenecek #ust alanı,
Content görevini üstlenecek #orta alanı,
Sağ ve Sol içeriğimizi yönetebileceğimiz #sag ve #sol alanları,
Son olarak Footer görevini üstlenecek #alt alanı.

Sırayla bu alanlarımızı şekillendirelim ve gerekli açıklamalarımızı satır aralarına yazalım;

#ana {
    width: 600px; /* Alanın genişliğini ayarla */
    margin: auto; /* Alanın dışa bağlı boşluğu ayarla. Auto değeri alanı ortalı gösterecektir */
    }
#ana #ust {
    height: 100px; /* Alanın yüksekliğini ayarla */
    background: #aaa; /* Arkaplan rengini ayarla */
    border: 1px solid #888; /* 1px genişliğinde ve #888 renginde düz hat çerçeve oluştur */
    margin: 0 0 5px; /* margin özelliği top right bottom left olarak 4 değer alır. Biz şuan top ve left’i 0 bottom’u 5 verdik. Eğer left ile right eşit olmasaydı left’i tanımlamamız gerekekti ama şuan left değeride 0 olacaktır. */
    }
#ana #orta {
    background: #fff;
    margin: auto;
    }
#ana #orta #sol {
    float: left; /* Sola hizala */
    width: 400px;
    height: 350px; /* Bu alana değer vermeyebilirsiniz, yazılarınızı girdikte alan otomatik uzayacaktır. */
    border: 1px solid #888;
    background: #eee;
    }
#ana #orta #sag {
    float: right; /* Sağa hizala */
    width: 195px;
    height: 350px; /* Bu alana değer vermeyebilirsiniz, yazılarınızı girdikte alan otomatik uzayacaktır. */
    border: 1px solid #888;
    background: #eee;
    }
#ana #alt {
    clear: both; /* Float alanlarını temizle (Bu özellik kullanılmaması halinde float’ın altında kalan alanlar browser uyuşmazlığı yaşayarak kaymalar doğurabilir */
    height: 100px;
    background: #aaa;
    border: 1px solid #888;
    margin-top: 5px;
    }

Ve stil dosyamızı oluşturduk. Yukarıdaki kodlarımızı yazdığımız sayfamızı stil.css adıyla kaydedelim. Şimdi ise bu dosyamızı html sayfamıza ekleyerek sayfamızı tamamlayalım;

<html>
    <head>
        <title>Tablosuz tasarım giriş</title>
        <link rel="stylesheet" type="text/css" media="screen" href="stil.css" _fcksavedurl=""stil.css"" _fcksavedurl=""stil.css"" />
    </head>
    <body>
    <div id="ana">
        <div id="ust">Header</div>
            <div id="orta">
                <div id="sol">Sol alan</div>
                <div id="sag">Sağ alan</div>
            </div>
        <div id="alt">Footer</div>
    </div>
    </body>
</html>

Ve işlemlerimiz tamamlanmıştır. Sayfamız artık kullanıma hazır haldedir. Güle güle kullanın.

Sercan Çakır (SrcnCkr)

Arama Terimleri:

css tanımı, Tablosuz web tasarım seti indir, tablosuz tasarım örnekleri, css tablosuz tasarım, tablosuz tasarım eğitim seti, tablosuz tasarım nedir, tablosuz tasarım nasıl yapılır, tablosuz tasarim, tablosuz tasarım eğitim seti free indir, tablosuz tasarım eğitim seti indir

ceviz.net

Yazar - 16 Mart 2007. Kategori GRAFİK TASARIM. Bu yazıya yazılan yazıları RSS üzerinden takip edebilirsiniz RSS 2.0. Yorum yazabilir veya geri izlemede bulunabilirsiniz.