XHTML/CSS konvertatsiyasiga PSD

Agar menda psd bor bo'lsa va nima bo'lishidan qat'i nazar, eng yaxshi bo'lardi html konvertatsiya qilish uchun ishlatiladigan eng yaxshi o'lchamlar nima ekanligini tushunishga harakat qilaman. Faqat PSD rasm o'lchamini bajarish kerakmi?

Mening saytim va sahifam mening rasmimga o'xshash bo'lishi kerak.

Website: http://kansasoutlawwrestling.com

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

Psd2htmlconverter.com saytiga 3 dollar to'lashni buyurdim va bir narsa oldik, lekin HTML va CSS to'g'ri ko'rsatmoqdalar, lekin u kabi bo'lishi kerak emas.

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

Lekin, aslida, asosiy veb-sayt CSS-dan foydalanishga harakat qilaman.

2
Xo'sh, men yaratadigan birovni to'laydigan dizayn edi. Men ko'proq tajriba almashishga harakat qilardim.
qo'shib qo'ydi muallif Jeff Davidson, manba
Bu arzon dizayn emas. Yaxshi kompaniya tuzdim, deb o'ylayman. Dizayn bilan xhtml/CSS kodlash bo'yicha eng yaxshi usuldan ishonch hosil qiling.
qo'shib qo'ydi muallif Jeff Davidson, manba
Agar PSD siz 1x1 piksel bo'lsa, sizning yondashishingiz muammo bo'lishi mumkin.
qo'shib qo'ydi muallif RedFilter, manba
sizning maqsadli auditoriyangiz uchun eng yaxshi nimalarni bilishimiz kerak?
qo'shib qo'ydi muallif Sparky, manba
Men seni yaxshi tushunganim yo'qligini bilmayman, lekin PSD odatda ma'lum bir grid bilan tuziladi. Shunday qilib, allaqachon oldindan aniqlangan ba'zi o'lchamlarga ega bo'lishingiz kerak. PSD-da butunlay tasodifiy o'lchamingiz bo'lsa, unda barcha o'lchamlarni to'g'ri hisoblash qiyin bo'lishi mumkin.
qo'shib qo'ydi muallif Ivan Ivanić, manba
Bu juda keng savol. Sizning maqsadingiz nima? Qaysi turdagi foydalanuvchini qo'llab-quvvatlashni xohlaysiz? 1024x768 sizni qo'llab-quvvatlashingiz kerak bo'lgan eng past o'lchamlarsiz bo'lishi mumkinmi? Mobil foydalanuvchilar? Ushbu psd qanchalik katta? Haqiqatan ham, nima qilish kerakligini bilmayman. Siz xhtml xizmatiga arzon psdni yollaganingiz uchun buni so'raysizmi? Agar shunday bo'lsa, bizdan so'ramang - yollagan odamlarga murojaat qiling.
qo'shib qo'ydi muallif Steve Adams, manba

1 javoblar

Siz nima so'rayotganingizga to'liq ishonchingiz komil emas, lekin siz PSDni qanday ajratish haqida gapiradigan bo'lsangiz, men aniq o'lchamlarda hamma narsani kesmas edim. Tartibni qaerdan kesish kerakligini belgilab qo'ying va uni HTML/CSS bilan qayta o'rnatishni osonlashtiradigan tarzda bo'limga qarab mantiqiy ravishda kesishga harakat qiling.

Mantiqiy tartibni bo'limlarga, masalan. yuqori banner, chap ustun, o'ng ustun, kontent joylari, olmashlari va h.k. Tartibni kesib bo'lgandan keyin, mantiqiy ravishda kichik yoki o'rta o'lchamdagi tasvirlarga ajratishni boshlang.

HTML/CSS-da skelet yaratish uchun yordam berishingiz mumkin, shunda siz shablonni qanday ajratish kerakligini bilasiz. Bu yaxshi ishlashga intiladi, chunki siz uni faqat tasodifiy ravishda kesib o'tmaysiz, aksincha uni siz yaratgan skeletga moslashtirasiz. Shubhasiz, siz bir necha qismga yuqori pankart kabi katta rasmni kesib olishingiz mumkin, ammo bu hech narsani o'zgartirmaydi - hali siz shablonning bo'limlarini sizning skelet qismiga joylashtirishingiz mumkin.

Bu erda tezkorlik bilan chindan ham ni birlashtiradigan narsa bor. Mening aniq misolimdan foydalanmayman, lekin u sizni to'g'ri yo'nalishda ko'rsatishi kerak:

Bu, ehtimol, taqdim etilgan ma'lumot bilan beradigan eng yaxshi maslahat. Batafsil ma'lumot taqdim qilsam, javobimni kengaytiraman.

EDIT -ni tanlang

O'z sahifangizdagi manbaga qaraganda, faqatgina div # middle ni almashtirishingiz kerak, shuning uchun o'ng yon panelda pastga tushmaydi.

CSS stol tartiblari bunday narsalar uchun juda yaxshi. Bunga o'xshash narsalarni bering:

  

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

CSS2-da jadvalga asoslangan nizomlarni muhokama qilgan ba'zi maqolalar:

2
qo'shib qo'ydi
Masalan, o'ng yonbo'ng'ir bo'lmasligi kerak. Ehtimol, biz ikki xil ekran o'lchamiga qarab turibmiz.
qo'shib qo'ydi muallif Jeff Davidson, manba
Hmm, endi meni bezovta qiladigan qism. mening divs to'g'ri qabul qilish.
qo'shib qo'ydi muallif Jeff Davidson, manba
CSS-ning kamdan-kam html ko'rinishi hozirgacha yaxshi ko'rinadi?
qo'shib qo'ydi muallif Jeff Davidson, manba
Men bularning barchasini chalkashtirib yubordim.
qo'shib qo'ydi muallif Jeff Davidson, manba
Hech qanday ma'lumotga ega emas.
qo'shib qo'ydi muallif Jeff Davidson, manba
Bu erda biror narsa yo'q. Menga to'g'ri kelmaslik.
qo'shib qo'ydi muallif Jeff Davidson, manba
qo'shib qo'ydi muallif Jeff Davidson, manba
Men chap qanaqaligini qildim va bu muammoni bartaraf eta olmadi.
qo'shib qo'ydi muallif Jeff Davidson, manba
Men hozirgacha qanday ko'rinishda kurash olib boraman. Ekrandan yaxshi ko'rinmaydigan.
qo'shib qo'ydi muallif Jeff Davidson, manba
Mening rasmim allaqachon dilimlenmiş va postimda tasvirlangan xhtml/CSS kodi bilan ishlashga harakat qilaman. Men boshladim, lekin kengligimni yoki nimani kengaytirishim kerakligini bilmayman. kansasoutlawwrestling.com
qo'shib qo'ydi muallif Jeff Davidson, manba
Bu yerda qoldim. Tasavvurimga qaraganda, yuqoridagi fikrlarni ko'rib chiqdim.
qo'shib qo'ydi muallif Jeff Davidson, manba
qo'shib qo'ydi muallif Jeff Davidson, manba
PSD bor. Men yaxshi chekuvchi emasman. Tartib bilan halol bo'lish uchun men uni yaxshi ko'raman, lekin nima qilishni eng yaxshi deb bilishimga biroz qiyin.
qo'shib qo'ydi muallif Jeff Davidson, manba
Men, albatta, siz yuqoridagi taklifimni ishlatishingiz kerak deb o'ylayman. Bu juda yaxshi ishlaydi.
qo'shib qo'ydi muallif James Johnson, manba
Ha, siz yaxshi boshlanganingizdek ko'rinadi. Faqat yaxshi amallardan foydalaning va sahifalar orasidagi muvofiqlik uchun uslublar jadvallarini yangilang.
qo'shib qo'ydi muallif James Johnson, manba
Buning nima keragi bor? Siz uni ishlatishingiz shart emas ... bu suzuvchi va paydo bo'ladigan layout texnikasi uchun yaxshi alternativ. Kunning oxirida u hali ham 100% CSS, shuning uchun siz yaxshi shaklda edingiz. An'anaviy jadvallardagi eng katta nuqson - bu ularni sekinlashtiradigan narsa, lekin bu bu erda.
qo'shib qo'ydi muallif James Johnson, manba
Jadvallar! CSS jadvali. Buni esda tutish kerak.
qo'shib qo'ydi muallif James Johnson, manba
Jadvallarni ishlatmayapti. CSS2 ekran xususiyatidan foydalanadi va suzuvchi divlarga bo'lgan ehtiyojni almashtirish uchun mo'ljallangan.
qo'shib qo'ydi muallif James Johnson, manba
Men sizni ketish uchun namuna yozdim. Umid qilamanki yordam beradi.
qo'shib qo'ydi muallif James Johnson, manba
Kechirasiz, o'ng yon panelda chap tomonga surilishi kerakligini unutmang.
qo'shib qo'ydi muallif James Johnson, manba
Sizning oldingizda nima bor?
qo'shib qo'ydi muallif James Johnson, manba