Opplæring: Ta det minimalistiske webdesignet ditt fra Photoshop til HTML
Før vi kommer i gang, er her de to delene av den opprinnelige opplæringen:
- Opplæring: Lag et minimalistisk nettdesignoppsett ved hjelp av Photoshop
- Opplæring: Legg siste hånd på minimalistisk webdesign ved hjelp av Photoshop
Separere elementene i den originale PSD-filen
Først må vi fjerne komprimeringen av nedlastingsfilen til et arbeidssted, og deretter åpne PSD-filen (Minimalist_Template_Final.psd) i Photoshop som vist i figur A nedenfor. Nå kan vi starte med å dissekere bakgrunnsbildene. (PSD-filen vil også spille dobbel plikt som vår trådramme når vi begynner å lage stiler og kode for HTML.)Vi ønsker å organisere oppsettet vårt på en slik måte at det kan settes inn i definerte seksjoner som rader, kolonner, blokker eller fliser slik at de kan gjengis ved hjelp av koding og styling. Teksten og bildene i PSD-oppsettet kommer til å bli lagt oppå bakgrunnen og kan plasseres enkelt med styling og kode.
Figur A
I Photoshop vil vi lage flere individuelle bilder av hovedinnholdet og bakgrunnsseksjonen som begynner med å skille topptekstseksjonen fra kroppen, og deretter bunntekstdelen. Kroppsbakgrunnen vil være en egen beholder, og vi vil til slutt lage seksjoner med HTML5-koder i kodingen for å brette det hele sammen. Teksten og bildene i PSD-oppsettet legges lag på toppen av bakgrunnslagene og kan enkelt erstattes med styling og HTML-kode. Det er bakgrunnselementene som må skilles, og i denne første delen kopierer vi "Bakgrunn" -laget med gradienten og lagrer det som en egen gif-fil som heter background.gif .
Fjern deretter merket av alle de andre lagene i PSD-filen, slik at "Bakgrunn" -laget er synlig.
Lagre filen deretter i webbildekatalogen din (web / bilder) ved å velge Lagre for web og enheter ... som bakgrunn.gif .
Skjermbildet i figur B viser valg av bakgrunnslag.Figur B
Deretter oppretter vi et eget bilde for nettnavnet og underoverskriften. For å bevare den gjennomskinnelige bakgrunnen for tekstdelene vil vi:
- Gjør "nettstedets navn" synlig og sørg for at alle andre lag er skjult.
- Bruk beskjæringsverktøyet (C) for å omgi overskriftene og godta det horisontale valget, og lagre deretter bildet i katalogen for webbilder ved å bruke alternativet Lagre for web og enheter ... som headername.gif . Se figur C og D nedenfor.
- Forsikre deg om at "Trinn bakover" (Alt + Ctrl + Z) for å få PSD-filen tilbake til sin opprinnelige tilstand.
Figur C
Figur D
Deretter beskjæres det omtalte bildet og lagres som et eget gif.
- Gjør laget "bg" og "Image Bg" synlig, og sørg for at alle andre lag er skjult.
- Bruk beskjæringsverktøyet (C) for å omgi de to bakgrunnsbildelagene og godta valget, og lagre deretter bildet i katalogen for webbilder (web \ bilder) ved å velge Lagre for web og enheter ... som funksjon.gif . Se figur E og figur F nedenfor.
- Sørg for å returnere PSD til sin opprinnelige tilstand ved å bruke "Trinn bakover" (Alt + Ctrl + Z).
Figur E
Figur F
Figur G
Nå som vi har de viktigste delene av PSD fordelt på spesifikke seksjoner, er det på tide å begynne å lage HTML-kode og deretter stilene, basert på wireframe-oppsettet. Nedenfor er den grunnleggende HTML-koden for å komme i gang med en disposisjon innenfor kodene til dokumentet, og den lagres som webdokumentindeks.html.
Header Stuff går inn her
Venstre kolonne
Høyre kolonne
Left Feature Article
Right Feature Article
Bunntekstmateriell går inn her
Deretter vil vi begynne å legge til stiler for å gjenopprette koden når vi transformerer PSD-layoutfilen til et fungerende webdokument. Vi vil starte med noen grunnleggende stiler bare for å få definert topptekst, bunntekst, seksjoner og artikler, og vi vil finjustere noen av dem når vi går gjennom opplæringen. Stilene vises nedenfor og lagres som dokumentet styles.css . Den solide røde kanten på 1 pixel er en midlertidig stil for dette trinnet for å vise containerseparasjoner, som du vil se vises nedenfor.
/ * CSS-stiler * /
kropp { background-color: # b9c7c7;
}
#Overskrift { kant: 1px solid rød;
}
#footer { kant: 1px solid rød;
}
.beholder { bredde: 1020px;
min-høyde: 1020px;
margin: 0 auto;
kant: 1px solid rød;
}
.footcon { bredde: 1020px;
margin: 0 auto;
kant: 1px solid rød;
min-høyde: 120 x;
}
#right_column { margin-top: 50 piksler;
float: venstre;
topp: 0;
høyre: 0;
bredde: 610px;
min-høyde: 700 piksler;
flow: auto;
padding-venstre: 5 px;
padding-right: 5px;
}
#left_sidebar { margin-top: 10px;
margin-venstre: 50 piksler;
float: venstre;
topp: 0;
venstre: 0;
bredde: 200px;
min-høyde: 750px;
flow: auto;
padding-venstre: 5 px;
padding-right: 5px;
}
#left_feature { margin-top: 50 piksler;
margin-right: 5px;
float: venstre;
min-høyde: 250 px;
flow: auto;
bredde: 280 piksler;
}
#right_feature { margin-top: 50 piksler;
margin-venstre: 5 px;
float: right;
min-høyde: 250 px;
flow: auto;
bredde: 280 piksler;
}Figur H viser hvordan index.html gjengis som vist i Chrome 17.09:
Figur H
La oss nå legge til gradientbildet i "container" -delen for bakgrunnen ved å legge disse to linjene til vår ".container" -stil:
background-image: url (images / background.gif);
background-repeat: no-repeat;Figur I viser den resulterende endringen, gjengitt i Chrome 17.09:
Figur I
Oppdateringen er subtil, men gradienten er nå synlig bak funksjonsbildet.
Dette avslutter den første delen av opplæringen. Jeg vil plukke opp i neste segment med å legge inn flere stiler for de gjenværende bildene, lage en gradientstil for bunntekstområdet, og legge inn innholdsteksten og koble til navigasjonen og andre funksjoner.
