Psd to Css

caneralcilioglu · 30 Tem 2012

Selamlar,
Arkadaşlar ne zamandan beridir photoshop ile yaptığım web tasarımlarını css'e dökmeye/çevirmeye çalışıyorum. Yalnız bir türlü bu işin mantığını kavrayamadım. İnternetten "erbilen" ve birçok arkadaşın videolarını izledim ama birisi de çıkıpta bunun mantığı şudur şöyle yapılır dememiş.

Bu işin mantığı nedir açıklarsanız sevinirim.

max1299 · 30 Tem 2012

ilk önce ana divi ortalıyorsun margin:0 auto;
genişliği normalde 960px dir yani width:960px;
henelde bu tarz mizanpaj divlerinde yükseklik verilmez yada height:auto yapılır

üst kısım---------------------------------
daha sonra logoyu üst kısma(top) yerleştiriyorsun
yan tarafına yada altına menuyu ul li tagları ile yerleştiriyorsun
logo ve menuyu float ile left komutuyla yan yana getiriyorsun float:left;
menu ul tagı içerisindeki li tagındaki linkleri float:left; ile yanyana getiriyorsun

not: a,span,li,ul,h,p gibi etiketleri displa:block; içine alıp div haline getirip margin padding gibi ayarlamalar yapabilirsin

dahasonra

sütunlar kısmı------------------------------
sütünları div olarak yazıyorsun genişliğini ve yüksekliğini verip ve float ile yan yana getiriyorsun
genelde iki yada üç sütun olur

no:eğer float özallği verince kayma oluşuyorsa boş bir divi en alta ekleyip clear özelliği ile kaymaları önleyebilirsin eğer kayma oluşan divler float:left ise clear:left olacak float:right is clear:right olacak eğer hem right hem de left ise clear:both olacak

daha sonra

içerik--------------------------------------------

not: a,span,li,ul,h,p gibi etiketleri displa:block; içine alıp div haline getirip margin padding gibi ayarlamalar yapabilirsin

bu nottaki özellik ile bütün içerikler tablo kullanmdan div gibi yönetebilirsin
width height background margin padding vs gibi

footer-------------------------

footerda aynı yöntemle copyright yazısı ve footer menulerini float: ile yan yana getiriyorsun

sonuç-------------------------------------

kısacası tablosuz tasarım için display:block kullanacaksın bütün içeriklerde
bir top oluşturup içerisine logo menu koyacaksın
sütunlar olacak iki yada üç adet
ve birde footer

ipuçları: bu şekilde kodlama yaparak kendini geliştirebilirsin ve css iyi bilmelisin
incelikler için fatih hayrioğlu sitesine bakabilirsin

kolay gelsin

not psd den keserken dış hatlarda boşluk bırakma yani tam ölçülü kes kenarlar yapışsın
ve margin padding gibi ölçüleri photshopta hesapla cetvel yada crop tool işini görebilir ölçülerde

caneralcilioglu · 30 Tem 2012

Css bilgim çok az olduğu için neyi nerede kullanacağımı bilmiyorum. Şimdilik elimde tablolarla hazırlanmış olan sistemi divler ile çalışacak hâle getirsem bile yetecek. Önümde çok kısa bir süre var ve hâla sitenin kodlarını yerleştirecek sağlam bi tasarım oturtamadım.

max1299 · 30 Tem 2012

dreamweaver tavsiye ederim görselde divler görünüyor işini kolaylaştırır

css için fatih hayrioğlunu tavsiye ederim erbilenin videoları biraz hızlı ve notepad kullanıyor

dreamweaver ile psd to css yazarsan daha iyi olur neyi nerye koyacağını öğrenirsin

ben dreamweaver kullanıyodum hakan çamoğlunu izleyerek öğrendim kafamda bir şeyler oluştu sonra erbilen ve fatih hayrioğlu derken bu işi öğrendik sana kendin için site kuracaksan wordpressi tavsiye ederim kolay gelsin

yeakca · 31 Tem 2012

Birden öğrenilecek bir iş değil. Sürekli pratik yapman gerekli küçükte olsa uygulama yapmalısın yoksa öğrenmen ve mantığını kavraman çok zaman alır. CSS kodlarının tam olarak ne işe yaradığını öğrenmelisin ve uygulamasını yaparak öğrenme sürecini hızlandırırsın.

caneralcilioglu · 31 Tem 2012

Sanırım çok kısa bir sürede de olsa bu işin mantığını kavramadım ve sitemi css'e döktüm. Aslında bildiğim css kodları bunun için yeterliymiş

Yalnız bi sıkıntı oluştu sayfamda 4 ana div içerisinde sırasıyla banner ust menu icerik ve footer kısımları var. Yalnız ben sayfama Asp.net repeater ile veri çekiyorum ve çektiğim verileri sayfa derlendiğinde divlerden dışarıya taşıyor. Görüntü de bir bozulma olmuyor istediğim görüntüyü elde edebiliyorum yalnız divlerin boyutları sayfa derlenmeden önce ki hâliyle kalıyor ve bu da benim sayfam daki veriler çekildikten sonra footer çekilen veriye göre aşağıya kaymıyor. Acaba ne tür bi işlem yapmam gerekir?

caneralcilioglu · 31 Tem 2012

Arkadaşlar sıkıntıyı çözdüm. Sağ ve Sol taraflara verdiğim height değerlerinden kaynaklanıyormuş.

Ufuk Cebeci · 31 Tem 2012

max1299' Alıntı:
ilk önce ana divi ortalıyorsun margin:0 auto;
genişliği normalde 960px dir yani width:960px;
henelde bu tarz mizanpaj divlerinde yükseklik verilmez yada height:auto yapılır

üst kısım---------------------------------
daha sonra logoyu üst kısma(top) yerleştiriyorsun
yan tarafına yada altına menuyu ul li tagları ile yerleştiriyorsun
logo ve menuyu float ile left komutuyla yan yana getiriyorsun float:left;
menu ul tagı içerisindeki li tagındaki linkleri float:left; ile yanyana getiriyorsun

not: a,span,li,ul,h,p gibi etiketleri displa:block; içine alıp div haline getirip margin padding gibi ayarlamalar yapabilirsin

dahasonra

sütunlar kısmı------------------------------
sütünları div olarak yazıyorsun genişliğini ve yüksekliğini verip ve float ile yan yana getiriyorsun
genelde iki yada üç sütun olur

no:eğer float özallği verince kayma oluşuyorsa boş bir divi en alta ekleyip clear özelliği ile kaymaları önleyebilirsin eğer kayma oluşan divler float:left ise clear:left olacak float:right is clear:right olacak eğer hem right hem de left ise clear:both olacak

daha sonra

içerik--------------------------------------------

not: a,span,li,ul,h,p gibi etiketleri displa:block; içine alıp div haline getirip margin padding gibi ayarlamalar yapabilirsin

bu nottaki özellik ile bütün içerikler tablo kullanmdan div gibi yönetebilirsin
width height background margin padding vs gibi

footer-------------------------

footerda aynı yöntemle copyright yazısı ve footer menulerini float: ile yan yana getiriyorsun

sonuç-------------------------------------

kısacası tablosuz tasarım için display:block kullanacaksın bütün içeriklerde
bir top oluşturup içerisine logo menu koyacaksın
sütunlar olacak iki yada üç adet
ve birde footer

ipuçları: bu şekilde kodlama yaparak kendini geliştirebilirsin ve css iyi bilmelisin
incelikler için fatih hayrioğlu sitesine bakabilirsin

kolay gelsin

not psd den keserken dış hatlarda boşluk bırakma yani tam ölçülü kes kenarlar yapışsın
ve margin padding gibi ölçüleri photshopta hesapla cetvel yada crop tool işini görebilir ölçülerde

arkadaş bu nasıl bir yardım etmek nasıl bir yardım anlamadım açıkçası! tasrımı görmeden neyin nerede olacağını bilmeden yardım isteyen birisine böylesi şeylerden bahsedip hem kafa karıştırmak hem de saçmalamakdan başka birşey değil bu. bence kendini iyice geliştirmeden ya da bildiklerini anlatmayı öğrenmeden kimseye yardım etmeye çalışma çünkü az bilen birisi senin bu anlatımınınla bildiği herşeyi bi kalemde siler atar. yazık yani.

	Benzer konular	Forum			Tarih
	Freelance Front-End Developer -> PSD to HTML & CSS - Türkiye Geneli	Freelancer İş Arayanlar	1	2K	19 Ocak 2015
F	Komplike tasarımları CSS'e aktarmak. (PSD to CSS - Yardım!)	Web Tasarımı	2	2K	19 Ağu 2013
S	.Psd Photoshop Css Çevirme	Photoshop Soru ve Sorunlarınız	0	1K	21 Ocak 2013
	Psd to Css ?	Css	5	2K	6 Eki 2012
	PSD to CSS - Türkiye Geneli	Sonuçlanan İlanlar	1	1K	22 Şub 2012
	Freelance Psd to Css , php oop Programlama - Türkiye Geneli	Sonuçlanan İlanlar	1	2K	18 Şub 2012
	Uygun fiyata Psd to Css yapılır - Türkiye Geneli	Sonuçlanan İlanlar	2	1K	22 Ağu 2011
H	Website tasarım, kurulum, psd to css, css, xhtml site tasarımı	Sonuçlanan İlanlar	7	2K	9 Mar 2011

Psd to Css

Benzer konular