Ders 2: CSS İle Web Tasarımına Giriş

Arkadaşlar şunu unutmayalım, bir web master olmak için, mutlaka HTML bilmeniz gerekiyor. Bu derslerde temel HTML bilgisine sahip olduğunuzu farzediyorum. Ancak gene de takıldığınız yerleri bana sorabilirsiniz.  CSS yazımında farklı stiller vardır, bazı tasarımcılar bir teknik uygularken, bazıları başka bir teknik ile işlerini halledebilir. Burada anlatacaklarım, benim kendi şahsi tecrübelerimden ve tasarım tekniğimden oluşan bilgilerdir. Genelgeçer doğrulardır diye bir iddiam yok. Biryanlışım eksiğim olursa uyarmaktan çekinmeyiniz. Bu dersleri düzgün şekilde takip ederseniz, CSS ve HTML işe şık web siteleri tasarlar hale geleceksiniz.

Arkadaşlar, iyi bir web tasarımın temeli iyi bir görsel algıdır. İyi bir web tasarımcı olmak istiyorsanız, işlerinizi görecek kadar Photoshop bilmek zorundasınız. Temel olarak sitelerinde kullanacağınız görsellerin, bannerlerin, footerların, spot imageların veya slider imageların PS ile tasarlanmış olması, tasarımlarınıza çok büyük artı katacaktır.

Kodları bilerek ekran görüntüsü olarak upload edeceğim. Bu sizin kopyala yapıştırdan ziyade kendiniz kodları yazmanıza neden olacak ve bir süre sonra bu yazıma aşina olacaksınız.

Evet arkadaşlar şimdi masaüstümüzde bir klasör açarak işe başlayalım. Normalde yazılım da eklediğim için tabi ki local serverin içerisinde bu klasörü oluşturuyorum ama şimdi statik bir site yapacağımız için masaüstünde bir klasör açmamız yeterli. klasörümüzün adı deneme olsun. bu klasörümüzün içine girip bir tane de images diye klasör açalım. Sitemizde kullanacağımız resimleri bu klasör içerisinde barındıracağız.

Şimdi deneme klasörümüzün içerisinde bir hmtl dosyası oluşturmakla işe başlayalım. Boş bir html dosyasının kod düzeni şu şekilde olacaktır.

Boş bir editör sayfasında bu kodları girdikten sonra index.html olarak kaydedelim ve index sayfamızı bir browser ile açalım. Ben mozilla firefox kullandığım için bu dersler boyunca mozilla görüntülerine yer vereceğim. Mozilla, CSS konusunda en mantıklı davranan tarayıcı. İE özellikle eski sürümleri ise tam bir fiyasko.

Evet bu kodları yazı kaydedip çalıştırdık ama boş bir sayfa geldi tabi ki bu doğal. Şimdi ise stil sayfamızı oluşturalım. Yine boş bir not defteri sayfası açarak içerisine hiçbir şey yazmadan farklı kaydet diyerek stil.css şeklinde kaydedelim (türkçe karakter ve boşluk kullanmadığınız takdirde istediğiniz ismi verebilirsiniz benimstilim.css gibi de olabilir :))

Evet şimdi deneme klasörümüzn görünümü şu şekilde olmalıdır:

Şimdi elimizde bir html sayfası var, ama bunun içerisine stillerimizi tanımlayacağımız stil sayfasını nasıl entegre edeceğiz. Bunu ben import yolu ile yapmayyı tercih ediyor. HTML sayfaları içerisinde, import komutundan başka stil ve css ile ilgili stil kodu olmamasına dikkat ediyorum. Yani her türlü görünüm tek bir merkezden idare ediliyor. ne güzel değil mi :) HTML sayfaları bazen 30 sayfayı tek tek açıp yazı fontu veya rengi değiştirdiğim günler aklıma geliyor da yıllar öncesi için, gülümsüyorum. CSS büyük nimet.

Her neyse, import kodumuzu, html sayfamızda < head > tagları arasında kullanıyoruz. Kullanımı da şu şekilde. Aşağıdaki görseldeki kodu, html sayfanızda, head tagları arasına yazarsanız, orada urlsi geçen stil sayfası ile bağlantı kurmuş ve sayfanıza import etmiş olursunuz.

ARKADAŞLAR ZAMAN BULDUKÇA DERSLERİMİZ DEVAM EDECEK. BİR DAHAKİ DERSTE, CSS KULLANIMINA GİRECEĞİZ. STİL TANIMLAMAYI VE BUNLARI SAYFAMIZA ÇAĞIRMAYI GÖRECEĞİZ.