Boganmeldelse: Fra Photoshop til HTML
Hvis du er ny til at oprette webstedsdesign ved hjælp af Photoshop, lærer du at omdanne dem .PSD-filer til semantiske CSS og HTML-filer, der er kompatible med standarder, kan være lidt skræmmende.
Der er trods alt masser af gode tjenester derude, der kan skære og kode dine filer til dig. Men der er de tilfælde, hvor du måske foretrækker at skære dem selv.
Det er der Fra Photoshop til HTML: Sådan skærer du dine designs som en pro af Jeffrey Way, redaktør af Nettuts +, kommer ind.
I denne 145-siders bog er hele processen med at konvertere en .PSD-fil til et fungerende website-design dækket i detaljer med kodeeksempler.
Et modelsted bruges til at gå læsere gennem hele processen, trin for trin, med et enkelt eksempel. Alt fra den grundlæggende kodning til at gøre dine designs cross-browser kompatible er dækket.
På daglig basis - hvis du lytter nøje - kan skrig høres rundt om i verden fra kodere, der forsøger at tvinge et design til position. Det handler ikke kun om at lære sproget; memorisering er en nem opgave. De scream-inducerende punkter opstår, når du ser dit websted i ti forskellige browsere, som alle gør dit websted til forskellige niveauer af konsistens.
Bogen forudsætter, at du har et grundlæggende kendskab til CSS og HTML, samt et design, der allerede er oprettet i Photoshop. Det design, der bruges i bogen, er simpelt, men de begreber, der bruges til at oprette designet, kan let anvendes til mere komplekse designs.
Bogen starter med et afsnit om, hvordan man ser på et design, før man dykker ind i processen med at oprette HTML-koden.
Selv om det måske forekommer naturligt at begynde at arbejde på billederne på vores hjemmeside, kunne det faktisk ikke længere være sandheden. I stedet skal vi først bygge vores base eller mark-up, og først når det er gennemført, kan vi gå videre til visuelle billeder.
Udvælgelse af de tre grundlæggende sektioner, som de fleste hjemmesider indeholder: Et overskrift, hovedindholdsareal og en footer er dækket, og så springer bogen lige ind i processen med opsætning af din grundlæggende HTML-fil. Igen vil enhver med en grundlæggende kendskab til HTML ikke have nogen problemer med denne del.
Når din grundlæggende HTML-kode er færdig, dækker Fra Photoshop til HTML, hvordan du sparer dine .PSD-filer.
Tag et øjeblik at se over designet i Photoshop. Prøv at bestemme hvert billede, der skal bruges. Husk, at funktioner kan genskabes med CSS; så vær kreativ.
Mens begge metoder til opdeling af dine filer er nævnt, bruger bogen en kombination af beskæring og skærer og indsætter til at gribe de billeder, du skal bruge, i stedet for at bruge skiveværktøjet.
Begge metoder er helt gyldige. Jeg anbefaler, at du prøver begge, og vælger som nogensinde viser sig at være hurtigste ... for dig.
Tastaturgenveje for at fremskynde denne proces er dækket dybtgående. Lagring af disse billeder til internettet, herunder alle de indstillinger, du skal bruge, og hvilken billedfiltype der skal bruges til hvilke typer billeder, diskuteres også i vid udstrækning, som CSS sprites. Sidst men ikke mindst i dette afsnit er der nogle noter om tilpasninger, som derefter skal laves til HTML-filen ud fra de baggrundsbilleder, der bruges.
Når din HTML og billeder er klar, er det tid til at dykke ind i CSS for dit websted. Browser resets er stresset og dækket dybtgående, samt hvordan man genopbygger en standardiseret, standard CSS-fil.
Hver browser bruger en smule "standard CSS" til automatisk at stile din markering. Ved første øjekast tror du måske, at dette er yderst hjælpsomt ... Hvis hver browser implementeret dem identisk, ville det ikke være et problem. Desværre er det ikke tilfældet.
Der er en række CSS-principper, herunder relative vs. absolut positionering og CSS-former, dækket på en praktisk og anvendelig måde. For dem, der ikke er eksperter på CSS, vil disse afsnit være særligt informative, mens de, der er, måske vil springe over disse dele. En anden stor del af CSS-koden, der er omfattet, er, hvordan man laver klæbende footers, noget der kan være frustrerende for nye CSS-designere.
Kodningen af yderligere sider ud over vores hjemmeside er dækket, herunder hvordan man foretager små justeringer af layout og indhold, og hvad du skal tilføje til dine CSS-filer. Når du er færdig med dette afsnit, har du alle de sideskabeloner, der er nødvendige for en fuldt funktionel porteføljeside.
Det endelige regelmæssige kapitel i bogen dækker, hvordan du gør dit design kompatibelt med browseren, specielt når det kommer til ældre browsere som Internet Explorer 6 og 7. Et af de største problemer, der er dækket over længden, er manglen på transparenshåndtering i billeder i IE6 , med en række forskellige løsninger til at overvinde det.
Visning af dit websted i Internet Explorer 7 og nedenfor for første gang vil få dig til at kramme. Du kan blive heldig, men det meste af tiden finder du mange problemer, der skal løses.
Et bonus kapitel i slutningen viser dig, hvordan du opretter jQuery overgangseffekter, som er indarbejdet i site design. For alle der er nye til JavaScript og jQuery, er det et interessant projekt, der lærer nogle grundlæggende teknikker.
Alt i alt, hvis du har outsourcet konverteringen af dine .PSD-filer til HTML, eller hvis du har lyst til at prøve at designe websites i Photoshop, er denne bog absolut værd at læse.
Med komplette, trinvise instruktioner, der let kan anvendes på mange projekter og tonsvis af eksempler kode, Fra Photoshop til HTML er sikker på at komme i gang med at konvertere dine egne designs. Med lidt øvelse kunne de anvendte begreber bruges på stort set ethvert design!
Bogen kommer også med kildefilerne til den oprettede side, som du kan bruge i dine egne projekter, men du kan lide.
Skrevet udelukkende til WDD af Cameron Chapman .
Hvad synes du om denne bog? Lad os vide i kommentarfeltet ...