Bakgrunner innen webdesign: Går fra PSD til kode

I mitt forrige innlegg med tittelen "Bakgrunner i nettdesign: Opprette et tema." Jeg illustrerte prosessen med å lage en layout ved hjelp av Photoshop for å bygge bakgrunner med forskjellige elementer, inkludert knapper, bilder, teksturer, lag, tekst, farger og plassering. I dette segmentet vil jeg demonstrere å ta PSD-filen og konvertere den for visning i HTML ved hjelp av CSS-stilkoding.

  • Alle filer som er referert til i dette innlegget er tilgjengelige i nedlastingen " Nettsteddesign fra PSD til kode ."
  • Ledsagergalleriet, "Opprette et nettsted fra Photoshop til CSS-kode, " inneholder bilder i full størrelse.
La oss først åpne PSD-filen i nedlastingen , vist i figur A. (Du må laste ned filen og pakke ut for å få tilgang til alle filene.)

I Photoshop lager vi flere skiver av hovedinnholdet i bakgrunnen, og begynner med å skille topptekstseksjonen fra kroppen, og deretter bunntekstdelen. Kroppsbakgrunnen vil være en egen inndeling og vi vil etter hvert opprette divisjoner med koder i kodingen for å brette det hele sammen.

Husk at du vil organisere oppsettet på en slik måte at du kan plassere dem i definerte inndelinger i rader, kolonner, blokker eller fliser slik at de kan gjengis i koding. Teksten og bildene i PSD-oppsettet legges på toppen av bakgrunnslagene og kan enkelt plasseres med stylingkode. Det er bakgrunnselementene som må skiver, og før jeg lager skivene, vil jeg kopiere Body Background- laget trekorn og lagre det som en egen gif-fil som heter WoodGrainBg.gif . Alle bilder og skiver er inkludert i nedlastingen.

Lager skiver

Først må du slå av alle de andre lagene i PSD-filen med unntak av lagets innholdsbakgrunn, alle knappene X-lag og tekstlagene som navngir alle knappene. Hold dem synlige og aktive som vist i Lag-dialogboksen i figur B.

Velg deretter Slice Tool som vist i figur C.

Deretter bruker du Skiveverktøyet en boksform over toppområdet, deretter en annen boks for hovedinnholdets område, og deretter en til for bunntekstområdet, som vist i figur D.

Nå velger du Slice Select Tool som vist i figur E.

Når du dobbeltklikker over den første delen for overskriften, åpnes en dialogboks som vist i figur F.

Legg til navnet på skiven, i dette tilfellet Header . Når de tre skivene er navngitt, lagrer du filen ved å gå til menybanen File | Lagre for Internett | Lagre, eller (Alt + Shift_Ctrl_S). Alle skivene blir lagret som separate bilder som vist i figur G.

Siden matbildene overlapper noe med overskriften og bakgrunnen på kroppen, må vi skille den skiver. Deretter vil vi skjule de aktive lagene og synliggjøre matbilde-collagen øverst til venstre på overskriften og kroppsseksjonene, og oppretter derfor en fjerde skive for den delen, som vist i figur H.

Så vil vi navngi og lagre skiven slik vi gjorde i trinnene for de tre første ovenfor. Jeg navngav denne skiven Food Images . Vi har nå fire skiver som skal brukes til å bygge hoveddelene av topptekst-, karosseri- og bunntekstdelene av oppsettet.

Bygge koden

For koden vil vi sette inn noen avdelinger for topptekst-, kropps- og bunntekstseksjoner sammen med to kolonner inne i hovedseksjonen. For å gjøre dette vil vi opprette et sett med divisjonskoder sammen med flere elementer i et HTML-dokument og deretter legge til litt CSS for å legge ned styling og plassering.

Den første HTML-en vises her i Snippet 1, og filen kan bli funnet i nedlastingen som InitialPage.html :

Utdrag 1




Header Stuff går inn her





Venstre kolonne




Høyre kolonne





Bunntekstmateriell går inn her





Den opprinnelige CSS-en vises i utdrag 2 og er tilgjengelig i nedlastingen som filen style.css :

Utdrag 2

 / * CSS-stiler * / 

 kropp { 

 background-color: #ebebeb; 

 } 

 #Overskrift { 

 kant: 1px solid rød; 

 } 

 #footer { 

 kant: 1px solid rød; 

 } 

 .beholder { 

 bredde: 1000 piksler; 

 margin: 0 auto; 

 kant: 1px solid rød; 

 } 

 #right_column { 

 margin-top: 10px; 

 float: right; 

 topp: 0; 

 høyre: 0; 

 bredde: 475px; 

 min-høyde: 600 piksler; 

 flow: auto; 

 padding-venstre: 5 px; 

 padding-right: 20px; 

 } 

 #left_sidebar { 

 margin-top: 10px; 

 float: venstre; 

 topp: 0; 

 venstre: 0; 

 bredde: 475px; 

 min-høyde: 600 piksler; 

 flow: auto; 

 padding-venstre: 20 piksler; 

 padding-right: 5px; 

 } 

Fra begynnelsen vil jeg vise grunnlaget for oppsettet med enkle inndelinger som skiller topptekst, hovedinnhold og bunntekst fra kroppen. Alt er inkludert i starten med som er satt til 1000 piksler bredde, og dette inkluderer de tre primære innholdsområdene, og. Som du kan se i CSS, er bakgrunnen av kroppen satt til en lysegrå. Jeg har lagt til en 1px rød kant bare for å visualisere elementene som vist i figur I :

Legge til bakgrunnsbildeskivene

Nå som vi har de grunnleggende layoutformene med de primære elementene på plass, er det på tide å legge til litt stil med bildene vi har skivet i de forrige trinnene våre, og legge til kroppsbakgrunnsbilde, topptekst, hovedinnholdsdel og bunntekstskiver . Nå skal jeg legge til mer stylingkode og fjerne den røde rammen i CSS, som vist nedenfor i utdrag 3 .

Utdrag 3

 kropp { 

 background-color: #ebebeb; 

 overflow-y: auto; 

 overflow-x: auto; 

 margin: 0; 

 polstring: 0; 

 } 

 #main { 

 bakgrunn: url (bilder / WoodGrainBg.gif); 

 Bakgrunnen-repeat: repeat; 

 overflow-y: auto; 

 overflow-x: auto; 

 } 

 #main .container { 

 flow: hidden; 

 } 

 #hovedinnhold { 

 bakgrunn: url (bilder / Body.gif) repetisjon av toppsenter; 

 margin: 0px auto; 

 float: right; 

 bredde: 1000px; 

 farge: # 403116; 

 flow: hidden; 

 } 

 #Overskrift { 

 bakgrunn: url (images / Header.gif); 

 background-repeat: no-repeat; 

 Bakgrunnen-stilling: center; 

 flow: hidden; 

 padding-bottom: 185px; 

 color: # 030303; 

 } 

 #footer { 

 background-image: url (images / Footer.gif); 

 background-repeat: no-repeat; 

 Bakgrunnen-stilling: center; 

 margin: auto; 

 color: # 030303; 

 flow: auto; 

 padding-bottom: 235px; 

 } 

 .beholder { 

 bredde: 1000 piksler; 

 margin: 0 auto; 

 } 

 #right_column { 

 margin-top: 10px; 

 float: right; 

 topp: 0; 

 høyre: 0; 

 bredde: 475px; 

 min-høyde: 600 piksler; 

 flow: auto; 

 padding-venstre: 5 px; 

 padding-right: 20px; 

 } 

 #left_sidebar { 

 margin-top: 10px; 

 float: venstre; 

 topp: 0; 

 venstre: 0; 

 bredde: 475px; 

 min-høyde: 600 piksler; 

 flow: auto; 

 padding-venstre: 20 piksler; 

 padding-right: 5px; 

 } 

Noen få merknader om CSS-kodingsoppdateringen:

  1. Jeg har satt kroppsoverløpet y og x til automatisk og gitt margen og polstring en innstilling på 0 hver, dette for å stille inn justeringen av siden i alle nettleserversjoner.
  2. Hovedbakgrunnsbildet WoodGrainGb.gif er satt til å gjenta med automatisk overløp y og x. slik at i hvilken som helst skjermoppløsning eller nettleservindu vil trekornbakgrunnen dekke hele visningsområdet.
  3. Hoved. beholderelementet er satt til et overløp av skjult; Dette er for å la matkollasjebildet dele elementet til å legge seg over de andre divelementene.
  4. Bakgrunnsbildet #main_content body.gif er satt til å gjenta vertikalt og sentrert med en margin på 0px, og auto.
Testing av det nye utseendet og følelsen i både IE- og Firefox-nettlesere, den endrede CSS har oppdatert gjengivelsen av siden som vist i Firefox i figur J :

Legger til de gjenværende bildene

Bakgrunnsbilde av matkollasjene FoodImages.gif og suppebildet Soup.gif vil bli inneholdt i deres egne divisjoner med navnet henholdsvis #headImage og #footImage . Og fordi disse bildene vil være på linje over hverandre og overlappe flere andre div, vil de få tildelt et z-indeksnummer på 2, og alle de andre div-elementene vil bli tildelt z-indeks på 1. Det høyere tallet z-indeks tilordnet et element vil gjengi det over alle de lavere tildelte tallene, slik at ethvert element som tildeles en høyere nummerert z-indeks alltid vil være over de lavere nummererte elementene. Dette lar oss legge flere div-elementer som kan overlappe hverandre i dokumentet.

CSS for og for vises i kodebit 4 . Utdrag 4
 #headImage { 

 background-image: url (images / FoodImages.gif); 

 background-repeat: no-repeat; 

 bredde: 495px; 

 høyde: 460px; 

 stilling: absolutt; 

 z-indeks: 2; 

 float: venstre; 

 margin-venstre: -250px; 

 margin-top: 45 px; 

 } 

 #footImage { 

 background-image: url (images / Soup.gif); 

 background-repeat: no-repeat; 

 bredde: 475px; 

 høyde: 185px; 

 stilling: absolutt; 

 z-indeks: 2; 

 float: right; 

 margin-top: 90 piksler; 

Legg merke til både #headImage og #footImage CSS at z-indeksen: 2 er satt, posisjonene er absolutte, og bredden og høyden er også definert. Marginnstillingene forskyver bildene i plassering i beholderen, og disse kan justeres avhengig av ønsket plassering.

De fullstendige CSS-oppdateringene vises i Snippet 5 og finnes i nedlastingsfilen som ImagesAddedStyle.css .

Utdrag 5

 kropp { 

 background-color: #ebebeb; 

 overflow-y: auto; 

 overflow-x: auto; 

 margin: 0; 

 polstring: 0; 

 } 

 #main { 

 bakgrunn: url (bilder / WoodGrainBg.gif); 

 Bakgrunnen-repeat: repeat; 

 overflow-y: auto; 

 overflow-x: auto; 

 z-indeks: 1; 

 } 

 #main .container { 

 overløp: synlig; 

 } 

 #hovedinnhold { 

 bakgrunn: url (bilder / Body.gif) repetisjon av toppsenter; 

 margin: 0px auto; 

 float: right; 

 bredde: 1000px; 

 farge: # 403116; 

 skriftstørrelse: 1.2em; 

 flow: hidden; 

 z-indeks: 1; 

 } 

 #contentText { 

 margin: 0 20 10 200; 

 padding-venstre: 170 piksler; 

 padding-right: 30px; 

 } 

 #Overskrift { 

 bakgrunn: url (images / Header.gif); 

 background-repeat: no-repeat; 

 Bakgrunnen-stilling: center; 

 flow: auto; 

 padding-bottom: 240 piksler; 

 color: # 030303; 

 z-indeks: 1; 

 skriftstørrelse: 1.2em; 

 } 

 #footer { 

 background-image: url (images / Footer.gif); 

 background-repeat: no-repeat; 

 Bakgrunnen-stilling: center; 

 margin: 0 auto; 

 color: # 030303; 

 padding-bottom: 160 piksler; 

 padding-venstre: 35px; 

 z-indeks: 1; 

 flow: auto; 

 skriftstørrelse: 1.2em; 

 max-høyde: 300 piksler; 

 } 

 #footer .leftContainer { 

 bredde: 450px; 

 float: venstre; 

 tekst-Justering: venstre; 

 stilling: i forhold; 

 padding-right: 20px; 

 } 

 #footer .rightContainer { 

 bredde: 475px; 

 float: right; 

 tekst-Justering: venstre; 

 stilling: i forhold; 

 padding-right: 10px; 

 } 

 .beholder { 

 bredde: 1000 piksler; 

 margin: 0 auto; 

 stilling: i forhold; 

 } 

 #right_column { 

 margin-top: 10px; 

 float: right; 

 topp: 0; 

 høyre: 0; 

 bredde: 475px; 

 min-høyde: 600 piksler; 

 flow: auto; 

 padding-venstre: 5 px; 

 padding-right: 20px; 

 } 

 #left_sidebar { 

 margin-top: 10px; 

 float: venstre; 

 topp: 0; 

 venstre: 0; 

 bredde: 475px; 

 min-høyde: 600 piksler; 

 flow: auto; 

 padding-venstre: 20 piksler; 

 padding-right: 5px; 

 } 

 / * Bilder CSS-stiler * / 

 #headImage h1, #headImage small { 

 margin: 0 px; 

 viser: blokk; 

 text-indent: -9999px; 

 } 

 #headImage { 

 background-image: url (images / FoodImages.gif); 

 background-repeat: no-repeat; 

 bredde: 495px; 

 høyde: 460px; 

 stilling: absolutt; 

 z-indeks: 2; 

 float: venstre; 

 margin-venstre: -250px; 

 margin-top: 45 px; 

 } 

 #footImage { 

 background-image: url (images / Soup.gif); 

 background-repeat: no-repeat; 

 bredde: 475px; 

 høyde: 185px; 

 stilling: absolutt; 

 z-indeks: 2; 

 float: right; 

 margin-top: 90 piksler; 

 } 

Legg merke til følgende:

  1. z-index 1-innstillingen er lagt til elementene #main, #main_content, #header og #footer.
  2. #footer .leftContainer og #footer .rightContainer-styling er lagt til slik at bunntekstbildet og teksten kan justeres og skilles i bunnteksten.
  3. #headImage h1, #headImage small tillater en

    og en tekst i overskriftsbildet, med tekstinnrykket satt til -9999px. Dette hjelper med SEO søkeord uten å måtte gjengi teksten på skjermen.

Jeg har lagt til flere avsnitt

av Lorem ipsum-fyllstofftekst innenfor hovedinnholdet, venstre sidefelt, høyre sidefelt og venstre bunntekst for å hjelpe til med å visualisere hele utformingen med tekst og bilder. Du kan se oppsettet med bilder som er gjengitt i Firefox, som vist i figur K, og HTML-en finner du i nedlastingsfilen ImagesAddedPage.html .

kommende

I den neste delen av denne bakgrunnen i serien til webdesign, vil jeg legge til menykoblingen og navigasjonen som vil gjøre toppknappene aktive og oppdatere tekststylingen.

© Copyright 2021 | pepebotifarra.com