SIFIRDAN CSS DERSLERİ (Kendi Anlatımım)

quote:

Orijinalden alıntı: umutozturk

DERS 1. CSS NEDİR / CSS'E GİRİŞ

Arkadaşlar, günümüzde web tasarım alanında birçok teknolojiden ve dilden yararlanılmaktadır. Web tasarım projelerinin belirli aşamalarında HTML gibi işaretleme dillerinden, CSS gibi stil dillerinden, Javascript gibi scripting dillerinden ve asp, asp.net, php gibi programlama dillerinden faydalanılır. Temel olarak her web sitesi, HTML tagları ile oluşturulmaktadır. Daha doğrusu html olmadan komplike bir web sitesi tasarlamak imkansızdır.

Şimdi burada CSS ne işe yarıyor ondan bahsedelim. CSS, geçişli stil sayfaları olarak Türkçeye çevrilebilir. CSS ile tasarımlarımızda kullandığımız öğelere, html elementlere, resimlere, kısacası tüm tasarım ögelerimize tutarlı ve farklı stiller tanımlayabiliriz. HTML ile bazı işaretlemeler, bazı stilllendirmeler yapılmaktaydı, ancak css çok daha ileri düzeyde müdahale şansı vermektedir.

Bununla beraber, harici bir stil sayfasında stillerimizi tanımlar ve sayfalara import edersek, ilerleyen süreçte, stillerimizde bir değişiklik yapmak için tüm sayfaları tek tek açıp renkleri boyutları vs değiştirmek yerine, stil sayfamızdaki gerekli değerleri editleyerek, hızlıca tüm sayfalarımızda değişiklikleri yapmış oluruz. Ayrıca bu şekilde bir stil sayfasından gelen stil verileri ile sayfalarımız, birbiriyle tutarlı, belli bir sistematik sahibi, font olarak, düzen olarak, renk olarak birbiriyle alakalı bir yapıya kavuşur. Bu da günümüz web standartları açısından çok önemlidir.

CSS'de divler kullanarak, html ile oluşturulan tablolardan bağımsız, esnek ve şık tasarımlar yapabiliriz. Ayrıca table'ların tasarımlarda yavaşlamaya neden olduğu da aşikar. Divlerle yapılan tasarımların yanı sıra, CSS ile, normalde javascripti ile sayfayı koda boğacağımız menüleri, kolaylıkla yapabiliriz. İlerleyen derslerimizde bunların hepsini ayrıntılı olarak işleyeceğiz.

Özellikle dinamik web sitesi tasarımlarında css olmazsa olmazdır. Sitenin CSS tabanlı tasarlanması, işi daha sonra devralacak ve altyapıyı hazırlayacak yazılımcı için çok önemlidir.

Şimdilik genel olarak CSS ile ilgili yazacaklarım bu kadar. Birazdan ikinci dersimize geçeceğiz. İkinci dersimizde CSS kullanımı ile ilgili temek yapı taşlarını öğreneceğiz. Ama benim önerim ikinci derse geçmeden önce, bir kod editörü edinmenizdir. Birçok özelliği, ücretsiz oluşu ve Türkçe dil desteği ile Notepad++ benim sizlere önerimdir. İnternetten ücretsiz olarak kolayca indirebilirsiniz.

quote:

Orijinalden alıntı: umutozturk

DERS 2-CSS İLE WEB TASARIMINA GİRİŞ

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, özel mesajla değil foruma yazarak sorarsanız birçok arkadaşımızın yararlanmasını sağlayabiliriz. 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.

Alıntıları Göster

quote:

Orijinalden alıntı: Persona Grata

Hocam çok faydalı bir konu olacak yeni başlayanlar için.

Alıntıları Göster

quote:

Orijinalden alıntı: umutozturk

CSS DERSLERİ 3. İLK STİLLERİMİZİ TANIMLIYORUZ

Evet arkadaşlar şimdi CSS stilleri tanımlamayı öğrenmeye başlayabiliriz. Şimdi index.html sayfamızı ve stil.css sayfamızı editörümüz ile açalım. Dediğim gibi ben hız ve ücretsiz olması açısından, ayrıca kod renklendirme özelliği nedeniyle Notepad++ öneriyorum.

Arkadaşlar bir önceki derste stil sayfamızı hmtl sayfamız içerisine import etmiştik Bu ne demek artık stil sayfasında tanımladığımız stilleri, html sayfamız içerisine çağırabilir ve bu şekilde elementlerimizi, divlerimizi stillendirebiliriz.

Arkadaşlar burada çok önemli bir nokta var. Stilleri tanımlarken bazı tasarımcılar CSS id lerden yararlanırken , bazıları ise CSS Classlardan yararlanır. İD sadece bir elemente atanabilirken, class, aynı sayfa içerisinde farklı ögelere atanabildiği için ben class kullanımını tavsiye ediyorum ve bu dersleri de class kullanımına göre hazırladım.

Bildiğiniz gibi, standart html elementleri vardır. Bunlar kısaca, body, p, h1, h2, a gibi elementlerdir. Bu tip standart html elementlerine stil sayfamızda stil tanımlarken aşağıdaki gibi bir yazım izliyoruz.

EVET ARKADAŞLAR ŞİMDİ AŞAĞIDAKİ ÖRNEĞİ İNCELERSENİZ, BURADA BODY ELEMENTİNE BİR STİL TANIMLIYORUZ. BODY ELEMENTİ SAYFAMIZIN GENEL ŞABLONUNU İFADE EDER VE AKSİ TANIMLANMADIĞI SÜRECE SAYFAMIZA KOYDUĞUMUZ TÜM ÖGELERİ ETKİLER.

Arkadaşlar, incelerseniz görmüşüzsünüzdür. Yazım kurallarımız aslında oldukça basit. CSS'de eğer HTML elementlerine bir stil veriyorsak, mesela burda bosy ye verdik, önce element adını yazıyoruz boşluk bırakıp süslü parantezimizi açıyoruz. Tanımlayıcı: değer; şeklinde satırlarımızı yazıyoruz. Mesela burada body elementine şu stilleri tanımlamışız.

body {
Sayfa genelinde arka plan olarak gümüş rengi kullanıyorum demişiz
Sayfa genelinde (aksi belirtilmedikçe) yazı tipi olarak Trebuchet kullanacağım demişiz
Sayfa genelinde font boyutu olarak aksi belirtilmedikçe 12 punto kullanacağım diyoruz
Sayfa genelinde aksi belirtilmedikçe font rengi olarak mor kullanacağım diyoruz.
}

EVET ŞİMDİ DE CSS SAYFAMIZI KAYDEDELİM, HTML SAYFAMIZI AÇALIM VE body TAGLARININ ARASINA SELAMLAR YAZALIM (Stillerimizin nasıl çalıştığını göreceğiz)

VEEEE SONUÇ YÜZ GÜLDÜRÜCÜ
EVET ŞİMDİ DE index.html SAYFANIZI TARAYICINIZDA ÇALIŞTIRIN BAKALIM SEÇTİĞİNİZ STİLLER ÇALIŞIYOR MU :) :) BAKIN ARKA PLAN GÜMÜŞ RENGİ, YAZILARIMIZ TREBUCHET 12 PİKSEL OLMUŞ VE YAZI RENGİ DE MOR:

ARKADAŞLAR EĞER SİZLERE YARDIMCI OLABİLİYORSAM DERSLERİN DEVAMI GELECEKTİR. HEPİNİZE İYİ ÇALIŞMALAR :)

Alıntıları Göster

quote:

Orijinalden alıntı: hanım keleşi getir

Bır zamanlar bu ıslere meraklıydım ama artık wordpress gıbı hazır sıstemler yuzunden bıraktım dersler faydalı elınıze saglık

Alıntıları Göster

quote:

Orijinalden alıntı: umutozturk

Wordpress kurup tema oluştururken veya editlerken de her halükarda CSS'e ihtiyacınız olacak. Ama bu şekilde ilgi olmayacaksa uğraşmayı da düşünmüyorum açıkçası ders yazmakla...

Bakalım, talebe göre :) Amacım sadece hevesli arkadaşlara yardımcı olmak...

Alıntıları Göster

quote:

Orijinalden alıntı: hanım keleşi getir

Valla sana soyle diyim artik Dh'de bu bolum oldu topu topu 5 uye felan yada 2 uye bu forumda takiliyor millet konu disinda surekli eskiden burasi cok guzeldi senin gibi ustalar vardi her konuda yardim ediyorlardi ama simdi konu acsan 2 mesaji gecmiyor konunun hit'i, webmaster sitelerinde konu acabilirsin belki orada talep gorur...

quote:

Orijinalden alıntı: Persona Grata

quote: Orijinalden alıntı: hanım keleşi getir Valla sana soyle diyim artik Dh'de bu bolum oldu topu topu 5 uye felan yada 2 uye bu forumda takiliyor millet konu disinda surekli eskiden burasi cok guzeldi senin gibi ustalar vardi her konuda yardim ediyorlardi ama simdi konu acsan 2 mesaji gecmiyor konunun hit'i, webmaster sitelerinde konu acabilirsin belki orada talep gorur...

Arkadaş haklı maalesef. Tasarım bölümü son mücadelelerini veriyor.

Alıntıları Göster

quote:

Orijinalden alıntı: umutozturk

:) burası ben bıraktığımda ana baba günüydü neden böyle oldu ki :(

Alıntıları Göster

quote:

Orijinalden alıntı: takeiteasy

Devam etseniz çok güzel olur elinize sağlık :)

Alıntıları Göster

quote:

Orijinalden alıntı: umutozturk

İlginiz için çok teşekkürler. En kısa sürede yeni ders ekleyeceğim yeter ki yararım olsun bu konuda hevesli arkadaşlara.

Alıntıları Göster

quote:

Orijinalden alıntı: Kraliyet Ailesi

Takipteyim çok yararlı konu olucak.

Alıntıları Göster

quote:

Orijinalden alıntı: FYL

Takipteyim.Eğer burayı bırakıp başka bir sitede yazarsanız pm beklerim.

quote:

Orijinalden alıntı: Çağdaş

Bende takipteyim, bilgisayar kursu yüzünden bıraktım css ile php takip etmeyi, az birşey kapmıştım onlarda gitti gibi :/

Alıntıları Göster

quote:

Orijinalden alıntı: umutozturk

Bu gece yetiştirmem gereken bir proje var. Bitireyim,Yarın ofisten yazarım bir ders mutlaka :) İlgi olması hoşuma gitti yeter ki takip edenler olsun. CSS ve PHP dersleri olarak devamı gelecektir.

Alıntıları Göster

quote:

Orijinalden alıntı: umutozturk

CSS'DE CLASS TANIMLAMALARINA BAŞLANGIÇ

Dayanamadım yazayım dedim. Şimdi arkadaşlar bundan önceki dersimizde bahsettiğim gibi, html tarafından hazır olarak bulunan elementlerden bahsetmiştik. Örneğin body elementi sayfanın genel olarak özelliklerine atayacağımız stilleri içeriyordu. Bunun yanında mesela hr yani horizontal rule elementine de stiller atayabiliriz. Keza a, h1, h2, h3, h4, p gibi elementlere de stiller atamak olası. Bu stilleri atarken css sayfasını yazdığımız esnada direkt yazıp özellikleri süslü parantezler arasına yerleştiriyorduk.

Peki stil tanımlarken her zaman hazır elementler mi kullanacağız. Tabi ki hayır. Şunu bilmeliyiz ki, CSS ile kodladığımız ve geliştirdiğimiz sitelerde mümkün olduğunca table kullanmaktan kaçınmalıyız. Table kullanımı, hem tarayıcının yavaş yorumlamasına yol açmakta, hem farklı tarayıcıların farklı yorumlamaları yüzünden sitelerde kaymalar meydana gelmektedir. Bununla beraber, table sistemi ile, asla divlerle yakaladığımız esnekliği yakalayamayız. Eğer iyi bir tasarımcı olmak istiyorsak, mümkün mertebe CSS'in faydalarından yararlanmalıyız.

Peki bilmeyenler için div ne demek onu anlatalım. Arkadaşlar divler, aslında web sitesinde kullandığımız tabloların hücreleri gibidir. Ancak CSS sayesinde divleri kullanarak,, çok rahat şekilde bağımsız ve esnek bir biçimde web sitesinin mizanpajını yaratabiliriz.

Divler <div> şeklinde açılır ve </div> şeklinde kapatılır. Normal HTML elementlerinde de bu böyledir zaten. peki divlere nasıl stiller verebiliriz. Arkadaşlar önceki derslerde de yazdığım gibi, ben id yerine class kullanılması taraftarıyım. CSS'de classlar, css sayfasında tanımlanır.

Örneğin web sitemizde içerisine banner resmi koyacağımız bir divimizin olacağını varsayalım. Öncelikle stil sayfasında banner isminde bir class tanımlayacağız. Yazım şu şekilde olmalıdır.

Gördüğünüz gibi class tanımlarken, classa vereceğimiz ismi yazarken öncesinde mutlaka bir nokta işareti koyuyoruz yoksa belirtiğimiz class çalışmayacaktır.

Burada yazılan tanımlayıcıları da kısaca açıklayalım:
margin-top:100px; BANNERİN DURACAĞI DİVİN (KULLANDIĞIMIZ İLK DİV OLDUĞU İÇİN) SAYFANIN ÜSTÜNDEN KAÇ PİKSEL UZAKTA OLACAĞINI BELİRLER.

margin-left:100px; BANNERİN DURACAĞI DİVİN (KULLANDIĞIMIZ İLK DİV OLDUĞU İÇİN) SAYFANIN SOLUNDAN KAÇ PİKSEL UZAKTA OLACAĞINI BELİRLER.

width:900px; BANNERİN DURACAĞI DİVİN GENİŞLİĞİNİ BELİRLER

height:300px; BANNERİN DURACAĞI DİVİN YÜKSEKLİĞİNİ BELİRLER

padding:10px; PADDİNG, MARGİNE BENZER, YANİ MESAFE BELİRTİR. AMA MARGİN DİVİN DIŞINDAKİ MESAFEYİ BELİRLERKEN, PADDİNG, DİVİN DIŞ SINIRI İLE DİVİN İÇERİSİNDEKİ YAZILARIN, RESİMLERİN, VB ÖGELERİN ARASINDAKİ MESAFEYİ BELİRLER. LEFT, RİGHT, TOP, BOTTOM DİYE AYRI AYRI STİL VERİLEBİLİR. SADECE PADDİNG YAZMAK, DİVİN 4 KENARINDAN DA EŞİT UZAKLIKTA ÖGELER YERLEŞECEK DEMEKTİR.

lütfen resmi inceleyiniz kavrayacaksınız :)

evet diğer dersimizde, belirttiğimiz classları, html sayfalarımızda nasıl çaıracağımızı, divlere nasıl bu classları atamayaı öğreneceğiz. Diğer dersimizde banner class'ını tamamen oluşturup, divlerle çalışmaya başlamış olacağız. Görüşmek üzere :)

Alıntıları Göster

quote:

Orijinalden alıntı: ApriLRaiN

Mükemmel bir paylaşım.Sizi takipteyim.Teşekkür ederim...

Alıntıları Göster