Dreamweaver CS4 | Tablosuz Tasarım

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

56 Comments

Selim Emre

about 13 sene ago

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...

Hakan Çamoğlu

about 13 sene ago

Selam Selim Emre, Takip etmeye devam et Dreamweaver videolarının devamı gelecek ;)

Furkan

about 13 sene ago

Merhaba Hakan Ağabey bu anlattığın yöntem ile PSD tasarımları web sitesi haline getirebilirmiyiz ?

Hakan Çamoğlu

about 13 sene ago

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 ;)

Ferzan

about 13 sene ago

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.

Hakan Çamoğlu

about 13 sene ago

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

ertugrul

about 13 sene ago

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)

mustafa okur

about 13 sene ago

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?

metin yar

about 13 sene ago

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...

alper

about 13 sene ago

Hakan Hocam divleri yan yana getirme olayını anlayamadım. Detaylı bir şekilde anlatabilirmisiniz?

metin yar

about 13 sene ago

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..

ertan ALPTEKİN

about 13 sene ago

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

Uzay

about 12 sene ago

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 :)

Bekir

about 12 sene ago

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

Hakan Çamoğlu

about 12 sene ago

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"...

FaTih

about 12 sene ago

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.

ertugrul günay

about 12 sene ago

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.

Hakan Çamoğlu

about 12 sene ago

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.

ertugrul günay

about 12 sene ago

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.)

Özgür Ulupinar

about 12 sene ago

ertugrul o sorun Windows 7 işletim sisteminde bendede oldu.Portable,Cs Serilerinin Hepsinde Var...

ertugrul günay

about 12 sene ago

çözümü yok mu yani dostum.

osman

about 12 sene ago

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..

osman

about 12 sene ago

çok özür dilerim hakan bey yazacaktım direkt hakan yazmışım. :(

Hakan Çamoğlu

about 12 sene ago

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.

Yusuf

about 12 sene ago

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

Cevdet kula

about 12 sene ago

Ö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

destan

about 12 sene ago

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

Can Demir

about 12 sene ago

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.

Hakan Çamoğlu

about 12 sene ago

Can Bey, aynen devam. Fireworks ve DIV en doğru yoldur ;)

ali

about 12 sene ago

Gerçekten çok faydası oldu bundan sonra hep div kullanıcam..

aysen

about 12 sene ago

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.

bilge

about 12 sene ago

Çok teşekkur ederim hakan bey sayenizde tablosuz tasarım yapabilecegiz tebrikler...

gül

about 12 sene ago

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..

turgut

about 12 sene ago

hakan bey ben dreamweaver ve flash öğrenmekteyim. bunların yanında ek program olarak photoshop mu yoksa fireworks mü önerirsiniz.

Kazım Can

about 12 sene ago

Merhaba Hakan Bey, Photoshop kullanarak oluşturulan div ler ile burada oluşturulan div ler arasında fark var bu problem olur mu

Hakan Çamoğlu

about 12 sene ago

@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.

Hakan Çamoğlu

about 12 sene ago

@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.

Akif Yaldır

about 12 sene ago

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.

Hakan Çamoğlu

about 12 sene ago

@Akif Yaldır: herhangi bir sorun yok yayınlayabilirsin.

TURGUT

about 12 sene ago

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.

kaan

about 12 sene ago

veritabaı olusturmayı nasıl yapcaz hocam veri tabanı olsurmayı bilmiyorum veri tabanıyla form nasıl yapılır onu bilmek istiyorum

enes

about 12 sene ago

hocam paylaştığınız video gerçekten tasarım hakkında müthiş zihnimi açtı teşekkürlerimi sunarım.

volkan yatağan

about 12 sene ago

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....

mehmet önder

about 12 sene ago

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...

Sedat

about 12 sene ago

Merhaba ben photoshopta bir Tasarım yaptım bunu Dreamweaverda nasıl kodlaya bilirim yardımcı olurmsunuz

tamerkirci

about 12 sene ago

hakan abi süpersin bu alemde yok senin gibi...

Tayfun Kurt

about 12 sene ago

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.

salih

about 12 sene ago

ö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.

fatih gönen

about 12 sene ago

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?

fatih gönen

about 12 sene ago

Problemi deneyerek çözdüm :) absolute verince düzeldi, çalışmalarınızda başarılar dilerim

hakkı volkan

about 12 sene ago

slm hakan abi ben dreamwear % 75 biliyorum ama divler hariç bide tasarım konusunda pek iyi olduğumu söyleyemem ne yapmalıyım

hasan kocdemir

about 12 sene ago

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

aslı

about 11 sene ago

hakan abi şu menüyü nasıl yapıyoruz anlatırmısın

ayhan

about 11 sene ago

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

ozan

about 11 sene ago

güzel anlatıyor ve uyguluyorsunuz tebrik ederim.

Emre

about 5 sene ago

Anılarım canlandı :p div ile kodlama yapmayı öğrendiğim ilk video idi bu :)

Leave a Comment

Please be polite. We appreciate that.
Your email address will not be published and required fields are marked