EBGBVS – Bölüm 2 – Video 2
Yazar: Volkan Görgülü | Yayın Tarihi:
17 Ağustos 2008 | Yorumlar:
37 Yorum
Kategori: CSS & XHTML
(EBGBVS – Eşi Benzeri Görülmemiş Bir Video Serisi)
Merhaba arkadaşlar, yeni paylaşımım ile karşınızdayım, bu videoda sizler ile anlamlı XHTML etiketleri kullanarak kodlamayı öğrenmeye çalıştığım dönemlerde, CSS ile sayfa yapımı kodlama sürecimi çok kolaylaştıran bir yöntemi paylaşıyorum.
Photoshoptaki bir tasarımı koda dökmek adına bir çok değerli bilgiyi barındıran bu videoyu aşağıdaki resme tıklayarak izleyebilirsiniz. Videoda kullandığım dosyaları ise bu bağlantı ile bilgisayarınıza indirebilirsiniz.
Bilgisayarınıza indirin: Normal Kalite (54 MB FLV) | Yüksek Kalite (78 MB AVI)
Arkadaşlar bugüne kadar bir çok video hazırladım Web Deneyimleri için ama bu ve serideki diğer videoların yeri benim için çok farklı olucak, çünkü bir tasarımı koda dökerken kullanıdığım bilgileri sizler ile paylaşmak çok farklı bir tecrübe benim için, umarım faydalı olmuştur.
Çekinmeyin, Lütfen Sorularınızı Sorun ya da Eleştirin
Başlangıç seviyesindeki arkadaşlar lütfen aklınıza takılan bir soru varsa çekinmeden sorun ya da ileri seviyedeki arkadaşlarda eleştirilerini yöneltebilirler ya da bilgi eklemesi yapabilirler.
Bilgi paylaşımının yorumlar aracılığı ile devam etmesini çok istiyorum, bir sonraki paylaşımımda görüşmek üzere 
Başka bir paylaşımımı inceleyebilirsiniz
Düşüncelerinizi duymaya ihtiyacım var!
Zamanınızın çok küçük bir bölümünü ayırarak, bu form aracılığı ile yazı hakkındaki düşüncelerinizi paylaşabilirsiniz.
Yazıya Gelen Yorumlar
1
Anıl Kıral
18 Ağustos 2008´de söylemiş
Tebrik ederim volkan abi çok başarılısın! Emeğine sağlık. Nişanın da hayırlı olsun
2
Mehmet Eroğlu
18 Ağustos 2008´de söylemiş
Yine güzel ve keyifli bir paylaşım olmuş
3
Cihan ÖNER
18 Ağustos 2008´de söylemiş
işte budur..
Volkan hocam sadece resimler ile nasıl yapıldığını göstermek daha mantıklı olmuş. Uzun uzun kodlar ile yapmış olsaydın video çok uzayabilirdi ve Çok güzel olmuş eline koluna sağlık
4
SalihSDemir
18 Ağustos 2008´de söylemiş
Yeni bir video yine teşekkürler her ne kadar kota nedeniyle fazla özgür olamasamda internet ortamında.. D
Bir isteğim var. Ben AVI lerin sıkıştırıldığında bayağı bir küçüldüğünü duymuştum hatta elimde normalde 120 MB olan 4 MB lık sıkıştırılmış bir video var. Eğer bu kadar fark edecekse videoları sıkıştırıp yayınlarsanız sevinirim.
5
Eray Usta
18 Ağustos 2008´de söylemiş
Volkan harika bir iş çıkarmışsın yine gerçekten muhteşem bi yeteneksin sen
Tebrikler EBGBVS serisi hiç bitmesin 
Ya da böle EBGBVS tarzında paylaşımlara devam et Volkan harika. Ellerin dert görmesin.
6
Eray Usta
18 Ağustos 2008´de söylemiş
Volkan videoyu ikinci kez izledim. @Cihan ÖNER sadece resimlerle yapman yeterli olmuş demiş ama benim senden yegane bir isteğim olucak. Böyle EBGBVS peşinden farklı bir photoshop tasarımını tamamen videoda koda dökmeyi anlatabilirmisin. Ya da css ve xhtml ile ilgili daha çok kod ağırlıklı video hazırlayabilirmisin. Teşekkürler tekrardan.
7
Furkan
18 Ağustos 2008´de söylemiş
İlk önce çok hoş olduğunu söylemek isterim. Yavaş yavaş ilerliyoruz. Teşekkürler..
8
Ömer Demircioğlu
18 Ağustos 2008´de söylemiş
Yine döktürmüşsün emeğine sağlık…
Nişanın hayırlı olsun ALLAH tamamına erdirsi…
9
Volkan Görgülü
18 Ağustos 2008´de söylemiş
Arkadaşlar resimler kullanarak bu şekilde kodları geliştirmemin sebebi, size sadece ana yapıyı kodlamayı açık ve net bir şekilde göstermek istemem, kısacası daha yeni başlıyoruz kodlamaya, @Cihan Öner, sanırım yanlış anlamış
10
Mert Güler
18 Ağustos 2008´de söylemiş
Yine çok güzel bir video olmuş Volkan abi. Tebrik ederim.
Diğer videoları da dört gözle bekliyorum. Kota sorunum olmasına rağmen izledim valla 
İnşallah bu EBGBVS bitince herkes kendi temasını yapabilecek
Senin de temennin o sanırım 
11
emin varol
18 Ağustos 2008´de söylemiş
eline sağlık yine çok güzel olmş
12
Engin
18 Ağustos 2008´de söylemiş
Videolar çok başarılı, umarım birlikteliğinde öyle olur
13
Mert Gr
18 Ağustos 2008´de söylemiş
10 numara olmuş açıklayıcı ve akıcı bir video
14
Volkan Görgülü
18 Ağustos 2008´de söylemiş
Arkadaşlar çok teşekkür ederim, bir faydası dokunuyor ise ne mutlu bana, şu anda yeni video üzerinde çalışıyorum
15
Tansu Özmen
18 Ağustos 2008´de söylemiş
Tebrik eder, başarılarınızın devamını dilerim.
Takipteyiz
16
Shawn Ralf
18 Ağustos 2008´de söylemiş
Olayı kaptım neredeyse
Diğer serileri dört gözle bekliyorum. Umarım okul açılmadan 3-4 video daha seyredebiliriz.
17
zonaye
18 Ağustos 2008´de söylemiş
css dosyasında #icerik kullanabiliniyorken neden div#icerik bu şekilde kullanıyorsun?
18
yakuter
18 Ağustos 2008´de söylemiş
Birkaç not eklemek isterim:
1)Margin ve padding gibi özellikler için “Trouble” kelimesi yerine 12den başlamak üzere saat istikametinde düşünebiliriz.
2)Siteyi ortalamak için “margin:0 auto;” malesef yeterli olmuyor. Şurada kısaca değinmiştim. Konuyu pekiştireceğine inanıyorum.
3)Bir ara ağzında “sieses” kaçıyor ve hemen “cesese” şeklinde düzeltiyorsun. Güzel bir mesaj
4)css ile siteyi ortalamak, float, clear ve margin kullanımı özellikle bilinmesi gereken hususlar ve oldukça güzel bir şekilde açıklamışsın. Yine konuyu pekiştirmesi amacıyla float kullanımını kısaca açıklayan bir yazı yazmıştım, okunabilir.
Her yönüyle dikkatle izlenilmesi gereken bir video. Herhangi bir olumsuz nokta göremedim. Ağzına sağlık Volkan. Heyecanlı olduğunu söylemişsin ama inan farkedilmiyor
19
SNaRe
18 Ağustos 2008´de söylemiş
Gerçekten çok güzel olmuş. Aklıma takılan birçok soruya cevap vermişsin. çizilmiş bir resmi resimlere ayırmada gerçekten güzel olmuş. Bende hep merak ederdim öğrenmiş olduk.
Yeni videoyu bekliyoruz 12 den önce koyarsan uyumadan izlemek istiyorum
20
Engin YILDIRIM (TechnoMANYAK)
18 Ağustos 2008´de söylemiş
tebrikler cok guzel bi video olmus…
div lerle calismadigim halde vide yu izleyince div lerle calisma istegi dogdu birden
21
Engin YILDIRIM (TechnoMANYAK)
18 Ağustos 2008´de söylemiş
birde birsey sormak istiyotum div id=”asdad” ile div class=”asdas” nin arasindaki fark neler ? yani class yapinca ne oluo id yapinca ne oluyor ???
css dosyasinda . koyunca class # koyunca id oldugunu biliyorum fakat id ile class in arasindak farklari bilmiyorum…
22
yakuter
18 Ağustos 2008´de söylemiş
id ile class arasındaki fark id’nin sadece bir kez çağırılıyor olması, class’ın ise birden çok defa kullanılması. Bu nedenle genel iskelet yapısında (örn. üst, sol, icerik, alt) id kullanmak ve diğer yerlerde class kullanmak uygundur.
23
Furkan TURAN
18 Ağustos 2008´de söylemiş
Bu videoyu izledikten sonra uğraşıp durdum ve WordPress classic temasını da kullanarak ortaya çalışır halde bir tema çıkarttım.
Öğrettiklerin için çok teşekkürler.
Oluşturduğum temayı incelemek isterseniz linki: Basit Tema
Ayrıca Engin YILDIRIM‘ın sorusunun cevabını ben de merak ediyorum.
24
Cemil Bilgi
19 Ağustos 2008´de söylemiş
ben 3 kolonlu tema yapacagım,
div ana….. (içerik yazılar)
float: center
diz yan1 (sol menu )
float: left
div yan2
float: right (sag menu)
float kodlarını böyle yapacagım heralde?
çok güzel anlatmıssın, sabah bende istedigim temanın resimleriyle bi demo hazırlayacagım.
3. videoyu 5 gözle bekliyorum.
ellerine saglık, nişanı kaçırdık ama dügün için davet edersen geliriz:)
hayırlı olsun
iyi çalışmalar
25
Volkan Görgülü
19 Ağustos 2008´de söylemiş
@zonaye, div#deneme formatında yazılınca daha anlaşılır oluyor, hepsi bu ama bende bu şekilde göstermekten vazgeçtim ve yeni videoda direk #deneme şeklinde kullanımlar yapıyorum.
@yakuter,
1 – Evet, saat mantığıda güzel
2 – Çok haklısın, Internet Explorer için biraz daha uğraşmak lazım, paylaşım için teşekkürler
3 – Aslında bu konuda nihai kararı mı vermiş değilim
4 – Tekrar paylaşımın için teşekkürler
@Engin Yıldırım, @yakuter çok net bir şekilde açıklamış, ama bu konu üzerine bir paylaşım yapmayı düşünüyorum
@Furkan Turan, okuduklarım beni çok mutlu etti ama keşke bahsettiğin çalışmanı çevirim içi görüntüleyebilme şansımız olsa idi
26
Volkan Görgülü
19 Ağustos 2008´de söylemiş
@Cemil Bilgi, float:center malesef yok, left ve right var, bahsettiğin yapıda soldan sağa sıralama şu şekilde olacaksa,
ana içerik, yan sütun 1 (sol), yan sütun 2 (sağ)
ana içerik için float:left ve diğer ikisi içinde float:right kullanabilirsin.
27
Evrim BAKIR
19 Ağustos 2008´de söylemiş
Volkan gerçekten güzel paylaşımlar eline sağlık. Devamını herkes beklediği gibi bende bekliyorum
…
Ayrıca nişan için kutlarım
Hayırlısı olur inşallah.
28
Cemil bilgi
19 Ağustos 2008´de söylemiş
Volkan abi,
(sol menü1) (Ana içerik) (Sag menü2)
şeklinde 3 kolunlu,
div#yan1icerik{
background:url(resimler/yan1.jpg) no-repeat top left;
width:190px;
height:500px;
float:right;
}
div#anaicerik{
background:url(resimler/icerik.jpg) no-repeat top left;
width:600px;
height:490px;
float:left;
}
div#yan2icerik{
background:url(resimler/yan2.jpg) no-repeat top left;
width:190px;
height:500x;
float:right;
}
1 menu çıkıyor, 2. menu cıkmıyor.
29
Volkan Görgülü
19 Ağustos 2008´de söylemiş
@Cemil Bilgi, yan1icerik’e float:left vermeyi denemelisin, ya da internette bir alana yüklersen daha kolay yardımcı olabiliriz.
30
Cemil Bilgi
19 Ağustos 2008´de söylemiş
her şey tamam, teşekkürler @Volkan abi,
sayende yavaş yavaş istedigim gibi bir tema yapıyorum.
işte benim istedigim temanın demosu,
http://www.mizah-tr.com/demo.rar
31
fatihturan
19 Ağustos 2008´de söylemiş
Merhaba Volkan.
Hazırladığın videoyu izledim. Eline sağlık. Sanırım gece kaydetmişsin bu videoyu. Saat gecenin 1′inde falan olduğu görülüyor. Epey yorucu olmuştur.
Bu arada arkadaşlar kullandığınız dizin yapısını biraz daha ayrıntılı olarak hazırlarsanız büyük projelerde gerçekten çok daha yararlı olacaktır. Volkan’ın oluşturduğu video’da sadece /resimler klasörü gösterilmiş.
Örneğin resimler adlı klasörün altında arkaplanları ayırmak için /bg klasörü, kullandığınız ikonlar için /icons klasörü, form öğeleri için /forms klasörü gibi klasörler açıp kestiğiniz görselleri ilgili klasörlere aktararak daha düzgün bir yapıya sahip olabilirsiniz.
Aynı şekilde CSS ve JS dosyalarınızı da bu şekilde organize edebilirsiniz. Mesela CSS dosyalarınızı /sunum klasöründe, javascript veya diğer gerekli betikleri /betikler klasörüne yerleştirebilirsiniz.
32
Volkan Görgülü
19 Ağustos 2008´de söylemiş
@Fatih Turan, kesinlikle çok haklısın büyük projelerde çok daha organize bir dizin yapısı gerekli.
33
Alper
22 Ağustos 2008´de söylemiş
margin: 0 auto;
Olayında 0′ın neye auto’nun neye tekabül ettiğini bilmiyordum, öğrenmiş oldum.
Teşekkürler
34
çağrı
12 Eylül 2008´de söylemiş
selam abi burdan bir video inidrmiştim geri silmişim yanlışlıkla daha ilk css ogrenın videosu galiba 0 dandı başlamak aradım bulamadım acaba linkini paylaşırmısın abi ?
35
sL1pknot
25 Aralık 2008´de söylemiş
Aynen Alper gibi bende öğrenmiş oldum.
36
ciko11
03 Ağustos 2009´de söylemiş
1 tanesin volkan
Geri İzlemeler