Opplæring: Ta det minimalistiske webdesignet ditt fra Photoshop til HTML, del 3

Dette er det tredje og siste segmentet i serien av vår serie om å konvertere en minimalistisk webdesign i Photoshop til HTML. Her er de to første, hvis du savnet dem:

  • Opplæring: Ta det minimalistiske webdesignet ditt fra Photoshop til HTML
  • Opplæring: Ta det minimalistiske webdesignet ditt fra Photoshop til HTML, del 2

Alle filene som er knyttet til denne opplæringen er tilgjengelige i nedlastingen.

Hvis du vil gå helt tilbake, kan du sjekke den originale serien for å lage et minimalistisk nettstedoppsett ved hjelp av Photoshop som fikk PSD til HTML-serien:

  • Opplæring: Lag et minimalistisk nettdesignoppsett ved hjelp av Photoshop
  • Opplæring: Legg siste hånd på minimalistisk webdesign ved hjelp av Photoshop
Figur A viser nettdesignet slik det ser ut etter at de to første delene i å bygge indeksen.html webdokumentet er fullført, som vist i Chrome 17.0.9.

Figur A

I det endelige segmentet legger vi bare igjen stylingen og innholdet for bunntekstdelen, som er omgitt av den røde kanten over. Vi starter med å lage en CSS3-stil gradient.

La oss først åpne PSD-filen en siste gang, og i dette trinnet skal vi bruke bunntekstområdets gradientlag for å hjelpe oss med å fange opp og lage CSS3-stiler vi skal bruke for webdokumentet vårt.

  • Forsikre deg om at bunntekstsjiktet er aktivt og det eneste synlige laget, og velg deretter beskjæringsverktøyet (C).
  • Velg nå en skive av gradienten i bunnteksten, og sørg for å velge hele topp til bunn av gradienten. bredden betyr egentlig ikke noe, men i mitt tilfelle valgte jeg en del som er omtrent 100px bred.
  • Trykk enter for å godta avlingen; valget er vist i figur B :

Figur B

  • Velg deretter File og deretter Save for Web ... og navn den footer_ gradient.gif ; lagre den i arbeidsmappen din. Vi vil bruke denne gradvise "stillbilde" for vårt neste trinn. RGB 99, 112, 111: HEX62716f, og RGB 116, 143, 143: HEX 748f8f

Et av favorittverktøyene mine på nettet er Ultimate CSS Gradient Generator av ColorZilla, som lar deg lage en rekke graderinger inkludert horisontaler, vertikaler og radialer. Vi bruker den til neste del.

En gang på nettstedet Gradient Generator, skal jeg velge Importer fra bilde. Knappen blir pekt ut med den røde pilen som vist i figur C.

Figur C

Nå velger du Velg fil og bla til footer_gradient.gif- filen; Velg Åpne, og velg deretter Importer, når filnavnet vises i dialogboksen, som vist i figur D nedenfor.

Figur D

CSS-gradientstyling for bakgrunn, lineær bakgrunn og filterstopp opprettes som et tilpasset sett. Før vi godtar den genererte koden, kan vi nå oppdatere fargestoppene for mer nøyaktig å reflektere effekten som stemmer overens med gradienten vi opprettet i PSD. Vi setter først det første fargestoppet til 60% og det andre fargestoppet til 80%. Du kan også navngi det tilpassede settet og lagre den unike permalink for fremtidig referanse. Den resulterende genererte gradientutgangen vises nedenfor i figur E, og stilkoden er inkludert rett under skjermbildet.

Figur E

Jeg har lagt til den faste bredden på 1020px manuelt, margen satt til 0 og auto, og høyden satt til 100px til toppen av fotbeholderstyling.

 .footcon { 
 bredde: 1020px; 
 margin: 0 auto; 
 høyde: 100 piksler; 
 bakgrunn: # 748f8f; / * Gamle nettlesere * / 
 bakgrunn: -moz-lineær gradient (topp, # 748f8f 0%, # 748f8f 60%, # 728c8b 80%, # 677777 100%); / * FF3.6 + * / 
 bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, farge-stop (0%, # 748f8f), farge-stop (60%, # 748f8f), farge-stop (80%, # 728c8b), farge- stop (100%, # 677777)); / * Chrome, Safari4 + * / 
 bakgrunn: -webkit-lineær gradient (topp, # 748f8f 0%, # 748f8f 60%, # 728c8b 80%, # 677777 100%); / * Chrome10 +, Safari5.1 + * / 
 bakgrunn: -o-lineær gradient (topp, # 748f8f 0%, # 748f8f 60%, # 728c8b 80%, # 677777 100%); / * Opera 11.10+ * / 
 bakgrunn: -ms-lineær gradient (topp, # 748f8f 0%, # 748f8f 60%, # 728c8b 80%, # 677777 100%); / * IE10 + * / 
 bakgrunn: lineær gradient (topp, # 748f8f 0%, # 748f8f 60%, # 728c8b 80%, # 677777 100%); / * W3C * / 
 filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 748f8f', endColorstr = '# 677777', GradientType = 0); / * IE6-9 * / 
 } 
Vi vil nå legge til disse stilene i stilene.css-filen vår, oppdatere bunntekstcontainerstilene som oppretter de fire kolonnene, og vi vil også fjerne den røde kanten. La oss nå se index.html-filen i Chrome 17.0.9, vist i figur F :

Neste, vil vi legge til de fire kolonnene til bunnteksten: Social Networking, Stay Connected, Participate, Copyright 2012, and Rights and Privacy Disclaimer. Først oppretter vi seksjonene og legger deretter inn det respektive innholdet.

Fra PSD-filen ser vi at alle bunntekstparagrafdeler har samme skrift ansikt, størrelse og styling av Lucinda sans Unicode, 12px, vanlig og fargen #ffffff. Fontstylingen følger disse retningslinjene og vises nedenfor:

 .kolonne p { 
 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 font-size: 12 piksler; 
 font-style: normal; 
 color: # ffffff; 
 tekst-Justering: venstre; 
 } 

Deretter setter vi stilene for fire kolonner som vil passe innenfor det definerte bunntekstområdet med flottøren igjen, margin satt til 0 0 20px, venstre polstring til 3%, og bredden satt til 22, 5%, med den første kolonnen satt til tøm alt og polstring igjen av 0:

 .kolonne { 
 flyte: venstre; 
 margin: 0 0 20px; 
 polstring-venstre: 3%; 
 bredde: 22, 5%; 
 } 
 første { 
 Rydd alt; 
 polstring-venstre: 0; 
 } 

Deretter vil vi style ankerteksten med tekstdekorasjon satt til ingen, en venstre marg på 25px og fargen satt til #ffffff:

 .kolonne a { 
 text-decoration: none; 
 color: # ffffff; 
 margin-left: 25px; 
 } 

Ansvarsfraskrivelsesdelen bruker identisk styling som bunntekstdelen med følgende stiler definert:

 . Ansvarsfraskrivelse { 
 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 font-size: 12 piksler; 
 font-style: normal; 
 color: # ffffff; 
 margin-venstre: 180 piksler; 
 } 
 . Ansvarsfraskrivelse a { 
 text-decoration: none; 
 color: # ffffff; 
 margin-venstre: 240 piksler; 
 } 

Bunntekstseksjonen HTML kodet i filen index.html:


 
 
 
 

SOSIALT NETTVERK

HOLD KONTAKTEN

DELTA

 Vi inviterer deg til å delta i vårt nettsamfunn. Bli med på Facebook-siden vår, se videoene våre på YouTube, følg oss på Twitter ....

Copyright 2012

Her vises endringene for bunnteksten i Chrome 17.0.9:

Figur G

Mens ikonene under Social Networking og Stay Connected ikke er forankret i lenker, vil det ikke ta mye å dele opp ikonene i individuelle bildefiler og legge til kobling til hver. Eller, et annet alternativ kan være å lage et bildekart for hvert av de to bunntekstbildene.

Dette fullfører den tredelte serien for å konvertere PSD-filen til HTML-kode. Figur H viser det fullførte nettstedet som vist i Chrome 17.0.9:

Figur H

© Copyright 2020 | mobilegn.com