PSD'den XHTML/CSS Dönüşümüne

Eğer bir psd'im varsa ve html dönüşümü için kullanılacak en iyi azalmanın ne olduğunu anlamaya çalışıyorum. Sadece psd görüntü boyutunu yapalım mı?

Sitem ve sayfamın görüntüsünün aşağıdaki gibi görünmesi gereken sayfası var.

Website: http://kansasoutlawwrestling.com

Mockup jpg: http://kansasoutlawwrestling.com/assets/images/wrestling.jpg

Ben psd2htmlconverter.com gitti 3 dolar ödedi ve bir şey var ama html ve CSS doğru gösterir ama olması gerektiği gibi değil ayrı değil.

http://kansasoutlawwrestling.com/crap/admintemp/testing/index.html

Ama gerçekten CSS ana web sitesinde çalışıyorum.

2
Peki, yaratılacak birini ödediğim bir tasarımdı. Daha fazla deneyim kazanmaya çalışıyordum.
katma yazar Jeff Davidson, kaynak
Onun ucuz bir tasarım değil. İyi bir firmanın bana çok güzel bir şey tasarladığını düşünüyorum. Sadece tasarımı ile xhtml/css kodlama hakkında gitmek için EN İYİ yolu emin değilim.
katma yazar Jeff Davidson, kaynak
PSD'niz 1x1 pikseliyse, yaklaşımınız bir sorun olabilir.
katma yazar RedFilter, kaynak
Hedef kitlenizin sizin için neyin en iyi olduğunu nasıl bilmeliyiz?
katma yazar Sparky, kaynak
Seni iyi anladım mı bilmiyorum, ama genellikle PSD akılda belirli bir ızgara ile yapılır. Yani önceden tanımlanmış bazı boyutlara sahip olmalısınız. PSD'de tamamen rastgele boyutunuz varsa, tüm boyutları doğru olarak hesaplamak zor olabilir.
katma yazar Ivan Ivanić, kaynak
Bu bir soru çok geniştir. Amacın ne? Ne tür bir kullanıcıyı desteklemek istersiniz? 1024x768, desteklemeniz gereken en düşük çözünürlük olabilir mi? Mobil kullanıcılar? Bu psd ne kadar büyük? Gerçekten neye ihtiyacın olabileceğine dair hiçbir fikrim yok. Bunu soruyorsunuz çünkü ucuz bir psd'den xhtml hizmetine mi ihtiyacınız var? Eğer durum buysa, bize sormayın - İstediğiniz kişileri sorun.
katma yazar Steve Adams, kaynak

1 cevap

Ne sorduğundan emin değilsiniz, ancak PSD'yi nasıl dilimleyeceğiniz hakkında konuşuyorsanız, her şeyi belirlenen boyutlarda dilimlemem. Mizanpajın dilimleneceği yere dikmesine izin verin ve kısmi olarak HTML/CSS ile yeniden bir araya getirme işlemini kolay bir şekilde kesmeye çalışın.

Düzeni bölümlere, örneğin Üst afiş, sol sütun, sağ sütun, içerik alanı, altbilgi, vb. Düzeni bölümlendirdikten sonra, mantıksal olarak küçük veya orta boyutlu görüntülere dilimlemeye başlayın.

HTML/CSS'de bir iskelet oluşturmanıza yardımcı olabilir, böylece şablonu nasıl dilimleyeceğiniz konusunda bir fikriniz olur. Bu iyi çalışma eğilimindedir çünkü sadece onu rastgele dilimlemekle kalmazsınız, aksine yarattığınız iskelete uyacak şekilde dilimleyebilirsiniz. Açıkçası, bir üst banner gibi büyük bir görüntüyü birkaç parçaya ayırmanız gerekebilir, ancak bu gerçekten hiçbir şeyi değiştirmez - şablonun bölümlerini iskeletinizin bölümlerine hala uydurmaktasınız.

İşte, görüntüyü dilimlemeyi nasıl yapacağınızı göstermek için gerçekten bir araya getirdiğim bir şey. Tam örneğimi kullanmazdım, ama sizi doğru yönde göstermelidir:

Muhtemelen verilen bilgilerle verebileceğim en iyi tavsiye budur. Daha fazla bilgi verirseniz, cevabımı genişleteceğim.

DÜZENLEME

Sayfanızdaki kaynağa baktığımızda, sadece div # middle 'ı kaydırmanız gerekecek ve sağ kenar çubuğunun altına düşmemesi gerekiyor.

CSS tablo düzenleri bu tür şeyler için gerçekten iyidir. Böyle bir şeye şuna bir şans ver:

  

<div id="container">   
    <div id="layout">   
        <div id="left-sidebar">   
            <!-- left sidebar-->
        </div>   
        <div id="content">
            <!-- content -->
        </div>
        <div id="right-sidebar">   
            <!-- right sidebar -->   
        </div>   
    </div>  
</div>

İşte CSS2'deki tablo tabanlı düzenleri tartışan bazı makaleler:

2
katma
Örneğin, sağ kenar çubuğu, olmaması gereken itme. Belki iki farklı ekran boyutuna bakıyoruz.
katma yazar Jeff Davidson, kaynak
Hmm tamam şimdi beni rahatsız edecek kısmı. div'larım doğru hizalandı.
katma yazar Jeff Davidson, kaynak
Eksi CSS benim html şu ana kadar iyi görünüyor mu?
katma yazar Jeff Davidson, kaynak
Bu konuda kafam karıştı.
katma yazar Jeff Davidson, kaynak
Gerçek görüntü verileri için geçerli değilse, herhangi bir şey masada büyük değil.
katma yazar Jeff Davidson, kaynak
Burada bir şey doğru değil. Bana doğru bakma.
katma yazar Jeff Davidson, kaynak
katma yazar Jeff Davidson, kaynak
Bir kayan nokta yaptım ve sorunu düzeltmek için görünmüyordu.
katma yazar Jeff Davidson, kaynak
Şimdiye kadar nasıl göründüğüyle uğraşıyorum. Ekranımdan iyi görünmüyor.
katma yazar Jeff Davidson, kaynak
Görüntüyü zaten dilimlenmiş ve yazımda açıklandığı gibi xhtml/css koduyla gelmeye çalışıyorum. Başladım ama genişliğimi veya neyi genişletmem gerektiğinden emin değilim. kansasoutlawwrestling.com
katma yazar Jeff Davidson, kaynak
Burada sıkışıp kaldım. Yukarıdaki resme baktıktan sonra fikirlerimi yayınladım.
katma yazar Jeff Davidson, kaynak
katma yazar Jeff Davidson, kaynak
Psd var. Ben iyi bir dilimleyici değilim. Düzen ile dürüst olmak gerekirse onu seviyorum ama ne yapmak için en iyi olacağını anlamaya biraz zor.
katma yazar Jeff Davidson, kaynak
Yukarıdaki önerimi kullanman gerektiğini düşünüyorum. Çok iyi çalışıyor.
katma yazar James Johnson, kaynak
Evet, iyi bir başlangıç ​​yaptığınız anlaşılıyor. İyi uygulamaları kullanmaya devam edin ve sayfalar arasında tutarlılık için stil sayfalarını güncel tutun.
katma yazar James Johnson, kaynak
Kafan karışacak ne var? Kullanmak zorunda değilsiniz ... sadece yüzmeye ve ortaya çıkan bir düzen tekniğine güzel bir alternatif. Günün sonunda, hala% 100 css, bu yüzden iyi durumdasınız. Geleneksel tabloların en büyük dezavantajı, işlem görmeye yavaş olmalarıdır, ancak buradaki tartışma budur.
katma yazar James Johnson, kaynak
Tablolar! = CSS tabloları. Bunu hatırlamak için iyi yaparsın.
katma yazar James Johnson, kaynak
Tablo kullanmıyor. CSS2 ekran özelliğini kullanıyor ve yüzer div ihtiyacını değiştirmeyi amaçlıyor.
katma yazar James Johnson, kaynak
Gitmen için bir örnek gönderdim. Umarım yardımcı olur.
katma yazar James Johnson, kaynak
Üzgünüz, sağ kenar çubuğunun da sola kayması gerektiğini söylemeyi unutmuştum.
katma yazar James Johnson, kaynak
Şimdiye kadar sahip olduğunuz şeylerin nesi var?
katma yazar James Johnson, kaynak