Ef þú ert nýr til að búa til vefsíðuhönnun með Photoshop, læra að umbreyta þeim .PSD skrám í merkingartækni, staðlahæfar CSS og HTML skrár geta verið svolítið ógnvekjandi.

Eftir allt saman, það eru fullt af frábærum þjónustu þarna úti sem hægt er að sneiða upp og kóða skrárnar þínar fyrir þig. En það eru þessir tilfelli þegar þú vilt frekar að sneiða þá hönnun sjálfur.

Það er þarna Frá Photoshop til HTML: Hvernig á að sneiða hönnunina þína eins og atvinnumaður eftir Jeffrey Way, ritstjóri Nettuts +, kemur inn.

Í þessari 145 blaðsíðu er allt ferlið við að umbreyta .PSD skrá inn í vinnandi vefhönnun nánar í kóðanum.

Fyrirmyndarsíða er notaður til að ganga frá lesendum í gegnum allt ferlið, skref fyrir skref, með einu fordæmi. Allt frá grunnkóðuninni til að gera hönnun á vafra samhæft er fjallað.

Daglega - ef þú hlustar náið - þú getur heyrt gígjur um allan heim frá merkjamálum án árangurs að reyna að þvinga hönnun í stöðu. Það er ekki bara spurning um að læra tungumálið; Memorization er auðvelt verkefni. Skrímslið vekur stig þegar þú skoðar síðuna þína í tíu mismunandi vöfrum, sem öll veita síðuna þína á mismunandi stigum samkvæmni.


Bókin gerir ráð fyrir að þú hafir grunnþekkingu á CSS og HTML, eins og heilbrigður eins og hönnun sem þegar er búin til í Photoshop. Hönnunin sem notuð er í bókinni er einföld, en hugtökin sem notuð eru til að búa til hönnun geta auðveldlega verið beitt til flóknari hönnun.

Bókin hefst með kafla um hvernig á að líta á hönnun áður en þú kafa inn í ferlið við að búa til HTML kóða.

Þó að það kann að virðast eðlilegt að byrja strax að vinna á myndefni vefsvæðisins, gæti þetta í raun ekki verið frekar frá sannleikanum. Þess í stað verðum við fyrst að byggja upp grunninn okkar eða mark-upp, og aðeins þegar það hefur verið lokið getum við farið á myndatökurnar.


Þegar þú velur út þremur undirstöðuþættir sem flest vefsvæði innihalda: haus, aðal innihaldssvæði og fótur er fjallað, og þá stökk bókin rétt í því að setja upp grunn HTML skrána þína. Aftur á móti mun einhver með grunnþekkingu á HTML ekki hafa nein vandræði með þennan hluta.

Þegar grunn HTML kóða er lokið, nær frá Photoshop til HTML hvernig á að sneiða upp .PSD skrárnar þínar.

Taktu smá stund til að skoða hönnunina í Photoshop. Reyndu að ákvarða hverja mynd sem þarf. Mundu að hægt er að endurskapa aðgerðir með CSS; svo vertu skapandi.


Þó að báðir aðferðirnar til að sneiða upp skrárnar þínar séu nefndar, notar bókin blöndu af cropping og klippt og límt til að grípa myndirnar sem þú þarft, frekar en að nota sneið tólið.

Báðar aðferðirnar eru fullkomlega gildar. Ég mæli með því að þú reynir bæði, og valið sem alltaf reynist vera festa ... fyrir þig.


Flýtileiðir lyklaborðsins til að flýta þessu ferli eru fjallað ítarlega. Vistar þessar myndir á vefnum, þar með talin allar stillingar sem þú ættir að nota og hvaða myndarskráartegund sem notaður er fyrir hvaða gerðir af myndum, er einnig rætt ítarlega, eins og CSS sprites. Síðast en ekki síst í þessum kafla eru nokkrar athugasemdir um breytingar sem verða síðan gerðar á HTML skjalinu á grundvelli bakgrunnsmyndanna sem notuð eru.

Þegar HTML og myndirnar þínar eru tilbúnar er kominn tími til að kafa inn í CSS fyrir síðuna þína. Valkostir vafra eru stressuð og þakklát, og hvernig á að endurreisa stöðluðu, vanræksla CSS skrá.

Hver vafri notar smá "sjálfgefið CSS" til að stilla sjálfvirkan sjálfvirkt sjálfkrafa. Við fyrstu sýn gætir þú hugsað að þetta sé mjög gagnlegt ... Ef hver vafra útfærði þau á sama hátt myndi þetta ekki vera vandamál. Því miður er þetta ekki raunin.


A tala af ábendingar og bragðarefur eru þakin fyrir að setja upp CSS skrárnar þínar fyrir utan það, þar á meðal að vísa til Photoshop skrárnar fyrir textaformat gildi og nota Fahrner's Image Replacement Technique fyrir hluta af hausnum. Það er líka stór hluti um að búa til dálka innan hönnunarinnar, sem nær yfir hugtökin sem notuð eru mikið.

There ert a tala af CSS meginreglum, þ.mt hlutfallslegt vs alger staðsetning og CSS form, þekin á hagnýtan og nothæf hátt. Fyrir þá sem eru ekki sérfræðingar hjá CSS, munu þessi köflum vera sérstaklega upplýsandi, en þeir sem eru kunna að vilja sleppa yfir þessum hlutum. Annar mikill hluti af CSS kóða sem fjallað er um hvernig á að búa til klístur fætur, eitthvað sem getur verið pirrandi fyrir nýja CSS hönnuði.

Kóðun viðbótarsíður fyrir utan heimasíðuna okkar er þakin, þar á meðal hvernig á að gera smávægilegar breytingar á útliti og efni og hvað þú þarft að bæta við CSS skrárnar þínar. Þegar þú ert búinn að þessum kafla mun þú hafa allar blaðsniðmátarnar nauðsynlegar fyrir fullkomlega hagnýta eigu vefsíðunnar.

Endanleg regluleg kafli í bókinni fjallar um hvernig hægt er að gera hönnun vafrans samhæft sérstaklega þegar kemur að eldri vöfrum eins og Internet Explorer 6 og 7. Eitt af stærstu málunum sem fjallað er um er að skortur á gagnsæjari meðhöndlun á myndum í IE6 , með ýmsum lausnum til að sigrast á því.

Ef þú skoðar vefsíðuna þína í Internet Explorer 7 og hér að neðan í fyrsta skipti mun þú láta þig vita. Þú gætir orðið heppin, en mest af þeim tíma finnur þú fjölmargir málefni sem þurfa að vera fastar.


Bónus kafli í lokin sýnir þér hvernig á að búa til jQuery bráðabirgðaáhrif, sem eru felld inn í vefhönnunina. Fyrir þá sem eru nýir að JavaScript og jQuery er það áhugavert verkefni sem kennir nokkrar grunntækni.

Á heildina litið, ef þú hefur verið að útvistun viðskipta þinnar .PSD skrár til HTML, eða ef þú hefur áhuga á að prófa að hanna vefsíður í Photoshop, er þessi bók örugglega þess virði að lesa.

Með heill skref-fyrir-skref leiðbeiningar sem auðvelt er að beita á mörgum verkefnum og tonn af dæmi kóða, Frá Photoshop til HTML er viss um að byrja með að breyta eigin hönnun þinni. Með smá æfingu gætu hugtökin sem notuð eru verið notuð á nánast hvaða hönnun sem er!

Bókin kemur einnig með heimildarskrárnar fyrir síðuna sem búin er til, en þú getur notað í eigin verkefnum þó þú vilt.

Sækja sýnishorn kafla


Skrifað eingöngu fyrir WDD eftir Cameron Chapman .

Hvað finnst þér um þessa bók? Vinsamlegast láttu okkur vita í athugasemdarsvæðinu ...