Psd to Css

Web Tasarımı - Psd to Css ...

Cevapla
Psd to Css
caneralcilioglu isimli Üye şimdilik offline konumundadır

caneralcilioglu

Öğrenci (Diğer) / Uşak

Dosya24

Psd to Css

Alt 29-07-2012 #1
Sponsorlu Bağlantılar

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.
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

max1299 isimli Üye şimdilik offline konumundadır

max1299

Webmaster / İstanbul

Standart
Alt 30-07-2012 #2
                             Sponsorlu Bağlantılar
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
Bu mesajdan alıntı yap
caneralcilioglu isimli Üye şimdilik offline konumundadır

caneralcilioglu

Öğrenci (Diğer) / Uşak

Standart
Alt 30-07-2012 #3
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.
Bu mesajdan alıntı yap
max1299 isimli Üye şimdilik offline konumundadır

max1299

Webmaster / İstanbul

Standart
Alt 30-07-2012 #4
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
Bu mesajdan alıntı yap
yeakca isimli Üye şimdilik offline konumundadır

yeakca(29)

Grafiker / Kütahya

Standart
Alt 31-07-2012 #5
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.
Bu mesajdan alıntı yap
caneralcilioglu isimli Üye şimdilik offline konumundadır

caneralcilioglu

Öğrenci (Diğer) / Uşak

Standart
Alt 31-07-2012 #6
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ş Psd to Css 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?
Bu mesajdan alıntı yap
caneralcilioglu isimli Üye şimdilik offline konumundadır

caneralcilioglu

Öğrenci (Diğer) / Uşak

Standart
Alt 31-07-2012 #7
Arkadaşlar sıkıntıyı çözdüm. Sağ ve Sol taraflara verdiğim height değerlerinden kaynaklanıyormuş.
Bu mesajdan alıntı yap
Ufuk Cebeci isimli Üye şimdilik offline konumundadır

Ufuk Cebeci

Sanat Yn. / İstanbul

Standart
Alt 31-07-2012 #8
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.
Bu mesajdan alıntı yap
Cevapla

Kapat
Şifremi Unuttum?