Tablosuz Tasarım (Tableless Design) terimini sık sık duymuşsunuz! Tablo kullanmadan web sitesi tasarlamak web standartlarına uyumluluk anlamına gelmektedir. Sizde tablosuz tasarım yapmaya başlayın!
Bu video da yer alan konular…
– DIV kullanarak web arayüzü hazırlamak
– Genel CSS kullanımı
– Sayfa özelliklerini ayarlamak
Emeğine Sağlık Hakan abi, ben bi kursta webtasarım okuyordum çoğu tasarımlarımızı table olarak öğretiyorlardı ama kurs bana şuan bildiklerimin %10’unu öğretti. Kendimce ücretsiz bir sitem var ve ie’de görünür halini hiç sorma :) Sitende Sadece 1 Tane Dreamweaver videosu olduguna üzüldüm umarım devamı gelir siteni sürekli takipte olacagım başarılar…
Selam Selim Emre,
Takip etmeye devam et Dreamweaver videolarının devamı gelecek ;)
Merhaba Hakan Ağabey bu anlattığın yöntem ile PSD tasarımları web sitesi haline getirebilirmiyiz ?
Merhaba Furkan,
Sorunun cevabı evet… Başlangıç noktan Photoshop ta olsa, Fireworks te olsa hatta Illustrator bile olsa çalışmanı parçalara ayırdıktan sonra Dreamweaver da bu yöntemle sonuçlandırılmalı…
İlerleyen derslerde bu tarz bir video yayınlayabilirim izlemeye devam ;)
merhaba,
dersleriniz cok başarılı, teşekkur ederim.
dreamweaverda div ve css kullanarak box ları yanyana yapabilme ve IE lerdede sorun yasamayacagimizi anlatacağınız dersinizi olabilir mi?
sabırsızlıkla bekliyorum.
sevgi ve sağlıkla kalın.
Tarayıcı sorunları için 2 püf noktası söyleyeceğim.
1.DIV’leri yanyana getirmek için FLOAT kullandıktan sonra mutlaka CLEAR ile onu toparlayın.
2.Gerekli yerlerde genişlik ve yükseklik değerlerini verin. Çünkü her tarayıcının varsayılan boşluk değeri aynı değildir!
DIV’leri yan yana getirmek içinde şu dokümana bakabilrisiniz: http://www.camoglu.net/CSSModelleme.pdf
güzel ve faydalı bir çalışma olmuş hakan bey teşşekürler. ama ben şu yana yana div tag açmayı anlamadım pek haber sitesi yapmam gerekiyor. yardımcı olursanız çok sevinirim. (documana baktım)
photoshopta slice ile yüzlerce karden oluşan tablolar var mesela. bunları tek tek div yapmak yerine daha kestirme bir yol varmıdır hocam?
merhaba, öncelikle çok faydalı bir ders olmuş
DIV’leri yan yana getirmeyi pdf dokumandan anlayamadım. yeni bir siteye başlıyorum ve div ler ile işim kolay olacak gibi, yardımcı olursanız sevinirim…
Hakan Hocam divleri yan yana getirme olayını anlayamadım. Detaylı bir şekilde anlatabilirmisiniz?
div’leri yan yana getirirken; float bölümünden left seceneğini seçerseniz, seçili kutu bir önceki kutunun yanına gelir. olmaması durumunda ise kutularınızın ölçüsüne dikkat edin..
slm hakan abi senin videolarına hocamın tavsiyesiyle izlemeye başladım özelikle menü tasarımı ve tablosuz tasarım videolarını çok begendim bu videolarının devamı varsa bana linklerini felan atarsan sevinirim başarılarının devamını dilerim
Tesadüf diye birşey yok her zaman lazımdın ama sizin gibi alçak gönüllü birinin varlığını bilmiyordum DW eğitimi alacak durumum yok amam 95 ten beri teknisyenim (PC) web tasarımı yapmak istiyordum ama birtürlü olmadı ille eğitim almak lazım ama işte dumumum yok sadece bir videonuzu izlememe rağmen konuya hakim olduğunuzu anladım bravo bilginizi paylaştığınız için saygı benden izlemeye devam edeceğim hatta bütün videolarınızı haydedip evde uygulayacağım teşekkürler Türk evladı!!! Dürüstçe ben Div ne demek bilmiyorum 14 Ocak 2010 itiraf ama öğrenmeyeğim anlamına gelmez :)
Sevgili Çamoğlu,
Değer yaratmanın bilgi, farklılık ve farkındalık ile mümkün olduğu günümüzde alçakgönüllük ve özgvüneninizin tam olması sebebi ile bizimle paylaşmış olduğunuz bilgileriniz için teşekür eder; takdirlerimi size iletmek isterim.
saygılarımla
Merhaba Uzay,
DIV ne demek bilmiyorum yazmışsın açıkça. Aynen dediğin gibi bilmemek önemli değil önemli olan öğrenmek istemektir bence. DIV, division kelimesinin kısaltmasıdır. Türkçe anlamı ise “bölme”…
Merhaba,
Ben MEB de çalışan bir bilgisayar öğretmeniyim. Uzun zamandır bu DIV ile tasarım yapmayı çalışıyordum. Css kodları falan yazmayı öğreniyordum. Bu video olayları daha hızlı anlamamı sağladı. Şu anda DIV ile tasarım yapabiliyorum. Hakan bey size çok teşekkür ediyorum. Çalışmalarınızı takipteyim. Devamını bekliyorum. İyi çalışmalar.
mrb ben dreamweaverda div içine flash dosya ekliyorum. test ettiğimde bunu ekranda görüyorum. fakat bunu server a attıp baktıgımda flash dosya görünmüyor. neden acaba yardımcı olursanız sevinirm.
Dreamweaver’da sayfaya flash eklediğiniz anda gerekli olan js dosyaları otomatik olarak oluşturulur ve Scripts klasörünün içine konur. Eğer sunucuya upload ederken bu klasörü göndermezseniz flash alanları göremezsiniz.
ben zaten sunucuya gönderilmesini gerekn tüm dosyaları gönderdim. ve bu işlemi dreamwevar cs3 de yaparken olmadı ama dreamweavr 8 de yaparken oldu. bazı baska deneme yanılma yöntemlerini de yaptım. ben sorunun dreamwear cs3 de yapılması gereken bir ayar oldugu kanısına vardım. tabi hocam bu işin üstadı sizsiniz. yardımcı olursanız sevinirim.
(bir de ben dreamwevarda site tanımlama yaprken hedef klasörü tanıtmama rahmen local files paletinde tanıttıgım hedef klasör değilde masaüstündeki tüm klasörleri gösteriyor.)
ertugrul o sorun Windows 7 işletim sisteminde bendede oldu.Portable,Cs Serilerinin Hepsinde Var…
çözümü yok mu yani dostum.
Hakan benim bir sorum olacak. site tasarımınıza bayıldım, dikkatimi çeken bir şey var konumuzla az da olsa alakalı. Sorum şu Divleri yaptık diyelim herşey çok güzel, artaalan olsun yada sağ tarafa bir reklam koyduk diyelim bunu nasıl sabitleriz yani sayfa aşağıya doğru kayarken artaalan veya sağadaki reklamımızı nasıl sabit tutarız tıpkı sizin sitenizin artaalanı gibi scrol ile birlikte kaymayacak..
çok özür dilerim hakan bey yazacaktım direkt hakan yazmışım. :(
Osman Bey, arkaplanı sabitlemek ile herhangi bir DIV’i sabitlemek hemen hemen aynı yöntemle yapılır.
Arkaplan için CSS ekranında Background kategorisinden attachment özelliğini fixed yapın.
DIV için ise Positioning kategorisinden type özelliğini fixed yapın.
Merhaba öğrettiğiniz şekilde sitemi tasarlıyordum ki … şöyle bir sorunla karşılaştım
Logo üst sayfa üst menü sonra ana gövde yaptım o güvdenin içine 3 tane div ekliyemedim yanyana olucak şekilde float kullanıyorum gene olmuyor
bu konuda yardımınızı bekliyorum iyi çalışmalar
Öncelikle çok teşekür ederim hakan abi inşaaalah merakla bekliyorum PSD tasarımları web sitesi haline getirme videosunu başarılarının devamını diliyorum saygılarımla
Tablo ile tasarım yapabiliyorum gerektenden sorun cıkıyor ve saglıklı olmuyor sayfada kaymalar ve benzeri sorunlar cıkıyor paylasim icin tskler devamını bekleriz
Merhaba Hakan Bey ,
Yıllardır web tasarımı yapıyorum , birçok kişi ve kurum ile çalıştım ve işimdede iyi olduğumu söylemek istiyorum fakat Yeniliklere kapalıydım , ve kapalı olduğum konunun başında Div geliyordu. Yıllarca tablolarla çalıştığım için artık tablolara istediğim gibi taklalar attırabiliyor ve sorunsuz işimi yürütebiliyordum. Ta ki sizin bir videonuza denk gelene kadar;….
Tasarımlarımda görsel ihtiyaçlarımı Fireworks mx2004 den bu yana Fireworks ile gideriyorum. ( Gururla söylüyorum lisanslı bir kullanıcıyım )
Sizin bir videonuzda fireworks’u övmeniz neticesinde ( Fireworks’a dair konusunda sertifikalı bir uzmandan övgü görmek , beni size bir nevi yakınlaştırdı. çünkü fireworks en iyi ekip arkadaşımdır , canımdır , cananımdır.) diğer videolarınızı inceledim. ( vimeo ) Akabinde “Tablosuz tasarım yapın” , “div kullanın” diye içten bir çağrınız bu yorumu yazmama kadar getirdi olayları :)
Anlatım o kadar sade ve net ki ; 1 defa izledikten sonra , kolaylığı , kod temizliği , zaman faydasını anladım ve size samimiyetim ile söylüyorum elimde bulunan şuan yapım sürecinde olan tüm web sayfalarının tasarımlarını tablo’dan çıkarıp Div’e taşıdım.
Bundan sonra “tablom kaydı” , “site sola çekiyor” , “firefox da net çekmiyor” , “Explorerda cam gibi ama.. safaride karıncalı ” gibi sorunlarla tablolara takla attırmıyacağıma Fireworks’um ve Mouse’um üzerine söz veriyorum.
Artık belirli periodlar ile bu blog’u ve vimeo sayfanızı ziyaret edicem.
Anladım ve Aydınlatma için Teşekkürler.
Can Bey, aynen devam. Fireworks ve DIV en doğru yoldur ;)
Gerçekten çok faydası oldu bundan sonra hep div kullanıcam..
merhabalar hakan bey.çalışmanızı gerçekten begendim.ve benimde bir kaç sorum olacak.
yanyana div ekleme mantıgını anladım fakat ilk sırada eklediğim yanyana 3 divde sorun çıkmazken bir alt sırada eklediğim yanyana 3 divde sorun çıkıyor.(ilk sıradada, ikinci sıradada 3 divden sonra clear özelliğini kullanıyorum) acaba bu işin mantıgı yanyana olabildiğince az div eklemekmidir?(mesela 2 div gibi) burdan yola çıkarak photoshopda hazırladıgımız site tasarımlarını olabildiğince az kareye mi bölmemiz gerekir?son bir soru daha photoshopdan keserek aldıgımız imagesları divlere arkaplan olarak mı koymamız gerekir yoksa image olarak mı?ben hepsini arkaplan olarak yerleştiriyorum da..
çok yeniyim ve öğrenmek için çok istekliyim.acilen yardımcı olabilirseniz çok çok sevinirim.teşekkürler.
Çok teşekkur ederim hakan bey sayenizde tablosuz tasarım yapabilecegiz tebrikler…
merhabalar hakan bey kayseriden size yazıyorum ben kayseri belediyesinin acmıs oldugu web tasarım kursuna gidiyorum hocamız bize sizin videolarınızı izlettiyor konularımızı sizin videolarınız dan takip ederek ilerliyoruz sizi cok beğeniyoruz yapmış olduğunuz çalışmalardan dolayı ve bize sunduğunuz faydalı bilgilerden dolayı size cok teşşkür ederiz
saygılar..
hakan bey ben dreamweaver ve flash öğrenmekteyim. bunların yanında ek program olarak photoshop mu yoksa fireworks mü önerirsiniz.
Merhaba Hakan Bey,
Photoshop kullanarak oluşturulan div ler ile burada oluşturulan div ler arasında fark var bu problem olur mu
@turgut: Web tasarım için tavsiyem Fireworks olur. Ancak fotoğrafları düzenlemek için Photoshop’ta gerekli. Yani bu işi ciddi anlamda yapmak için ikiside gerekiyor bir yerde.
@Kazım Can: Photoshop ile oluşturulan DIV’leri direk kullanmamanızı öneririm. DIV yapısı Dreamweaver ile baştan oluşturulmalıki ileride tarayıcı problemi, sayfada kaymalar vb. sorunlarla karşılaşmayın.
eğitimlerinizi çok beğendim ve eğitim sitem olan ;
siteyapmak.org da yayınladım. bir sakıncası varsa kaldırabilirim
saygılarımla,
bu arada sizin yolunuzda ilerlemeye çalışıyorum çok başarılısınız.
@Akif Yaldır: herhangi bir sorun yok yayınlayabilirsin.
HAKAN bey ben dreamweaver öğreniyorum fakat etiketler ve seçiçiler(html kodları) kafamı karıştırıyor ve anlamakta zorluk çekiyorum sizce dreamweaverdan önce HTML öğrenmem, dreamweaver ı kısa sürede anlamamda ve öğrenmemde bana hız kazandırırmı. şimdiden teşekkürler.
veritabaı olusturmayı nasıl yapcaz hocam veri tabanı olsurmayı bilmiyorum veri tabanıyla form nasıl yapılır onu bilmek istiyorum
hocam paylaştığınız video gerçekten tasarım hakkında müthiş zihnimi açtı teşekkürlerimi sunarım.
Sitenizi devamlı olarak takip ediyorum ve sayenizde web tasarımı yapıyorum ama siteye arkafona background resim koydum mozillada çalıştı chromeda çalıştı fakat i.explorerda çalışmadı sebebini öğrenebilirmiyim şimdikten teşşekkürler….
hakan bey ben sizin dediğiniz gibi divlerle sitemi yapmaya başladım ama menü de sorun yaşıyorum spry menü de açilan menü flashların arkasinda kaliyor yani li bölümleri alta gömülüyor ve videonun arkasında kaliyor bana yardımcı olurmusunuz…
Merhaba ben photoshopta bir Tasarım yaptım bunu Dreamweaverda nasıl kodlaya bilirim yardımcı olurmsunuz
hakan abi süpersin bu alemde yok senin gibi…
Merhaba, çok faydalı bir eğitim olmuş. Daha önce bu video ile basit bir sayfa yapmıştım. Sonra bilgisayarımdan kaldırdığım dreamweaver programını bugün yeniden kurdum yine bir sayfa hazırlamak istiyordum. insert div dedikten sonra id kısmına div in ismini yazıyor. ardından nev css style butonuna basıyorum fakat yeni stil yaratılmıyor. div i oluşturduktan sonra üzerine gelip edit css dediğim zaman da yine css edit paneli açılmıyor. Sorun neden kaynaklanıyor acaba? Daha önce olan şey şimdi niye olmuyor. Eksik bir ayar mı yaptım acaba? Teşekkürler.
öncelikle bizlere yardımcı olduğunuz için çok teşekkür ederim yalnız size bir sorum olacak;
benim photoshop’ta yaptığım tasarımları macromedia dreamwear’da açtığımda kodlar taple olarak gözüküyor
1-ben photoshop’ta div ile tasarım yapamazmıyım
2-dreamwear’da tapleyi div’e nasıl çeviririm
şimdiden teşekkürler.
Hakan bey anlatımınızı çok beğendim, emeğinize sağlık..
Şöyle bir sorunum var: 3 tane yanyana sütun oluşturmak için float kullandığımda, ana div için verdiğim arka plan görünmez hale geliyor. Bunu nasıl çözebilirim?
Problemi deneyerek çözdüm :) absolute verince düzeldi, çalışmalarınızda başarılar dilerim
slm hakan abi ben dreamwear % 75 biliyorum ama divler hariç bide tasarım konusunda pek iyi olduğumu söyleyemem ne yapmalıyım
merhaba hakan bey sizi uzun süredir takip ve takdir ediyorum ve bir yol gösterirseniz sevinirim sizin videolarınızı izleyerek kendimi geliştirdim ve ben
Dreamweaver de site yaptım
kod yazmayı bilmiyorum. oto galeri sitesi yaptım fakat sıkıntım şurda kullanıcı paneli oluşturmak istiyorum
Yönetici siteye girecek ve resim atacak bilgi girebilecek bu dreamweaverde mümkünmü yardımcı olursanız sevinirim
hakan abi şu menüyü nasıl yapıyoruz anlatırmısın
hakan abi ben bu menü içerik kenarları nasıl kıvırmalı yaplıyor ne olur banada öğret hakan abi çok ihtiyacım var yardım et bu e – postaya mail at ne olur:ayhnbrkaltun@hotmail.com
güzel anlatıyor ve uyguluyorsunuz tebrik ederim.
Anılarım canlandı :p div ile kodlama yapmayı öğrendiğim ilk video idi bu :)