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

I mitt siste innlegg, "Opplæring: Ta det minimalistiske webdesignet ditt fra Photoshop til HTML", startet vi arbeidet med å dele opp PSD-filen og opprettet bakgrunnsbilder for HTML-siden og startet deretter grunnleggende HTML-koden (index.html) og noen stiler for å etablere de forskjellige seksjonene (styles.css). Våre opprinnelige stiler angir hoved-, beholder-, topptekst-, venstre sidefeltkolonne og høyre sidefeltkolonne, som også inkluderer funksjonsinnholdsseksjonene for et bilde og to funksjonsartikler. Nedlastingen inneholder alle filene som er brukt i denne demonstrasjonen.

Legge til stiler og bygge HTML

Når vi plukker opp hvor vi slapp i forrige stykke, vil vi begynne med å legge til flere stiler for de gjenværende bildene, legge til innholdsteksten og koble til navigasjonsseksjonen, titler for de kjente artikkeldelene og funksjonsinnhold. Figur A viser hvordan index.html-filen ser ut på dette punktet, som gjengitt i Chrome 17.0.9:

Figur A

La oss starte med å legge inn toppteksten øverst til venstre i overskriftsdelen. For å gjøre det mulig å se på bildet, legger vi til flere linjer med stiler i filen styles.css, og vi vil også legge til noe tekstlig innhold i filen index.html. Jeg har beholdt den solide rammen på 1 piksler for nå, men den vil bli fjernet når vi går gjennom opplæringen. Headername.gif- filen kalles som bakgrunnsbilde som en URL, høyden er satt til 100px, margin-toppen er satt til 50px, fontfamilien, størrelse og farge er satt til Tahoma, 14px og # 4b6262 henholdsvis og deretter en toppfylling på 18px og venstrepolstring på 15px runder stylingkodetilleggene til stilene.css-filen, som vises nedenfor:

 Overskriftstiler: 
 #Overskrift { 
 kant: 1px solid rød; 
 background-image: url (images / headername.gif); 
 background-repeat: no-repeat; 
 høyde: 100 piksler; 
 margin-top: 50 piksler; 
 font-family: Tahoma, Geneva, sans-serif; 
 font-size: 14 piksler; 
 font-vekt: normal; 
 color: # 4b6262; 
 padding-top: 18 piksler; 
 padding-venstre: 15px; 
 } 
 HTML-koden lagt til overskriften på filen index.html: 

Slagordet eller fangstfrasen under overskriften

 Figur B viser oppdateringene ovenfor som gjengitt i Chrome 17.0.9: 

Figur B

Deretter oppretter vi søkefeltet og sender inn knappen for den endelige delen av overskriftsdelen. Før vi begynner med koden, må vi fange inn sendeknappspilen som vi opprettet i den originale PSD-filen (se nedlasting). Ved å bruke de samme prosedyrene som i det første segmentet i opplæringen, vil vi åpne PSD-filen i Photoshop og gjøre knappelagene til de eneste synlige lagene, beskjære for å passe pil og gradient, størrelse den til rundt 50x35 piksler, og deretter lagre den som et nett-klart gif og navngi search_button.gif, og lagrer det i webbildekatalogen :

Figur C

Koden for søkefeltet inneholder flere CSS3-tillegg for graderinger, grensradius, rammeskygge og bakgrunner; oppdateringene til filen styles.css vises nedenfor:

 / * Søkemeterstiler * / 
 #form { 
 margin-venstre: 700 piksler; 
 } 
 .Søk { 
 skjerm: inline-block; 
 zoom: 1; / * display: inline-block for IE7 * / 
 * skjerm: inline; 
 kant: solid 1px # d2d2d2; 
 polstring: 1px 1px; 
 -webkit-border-radius: 7px; 
 -moz-border-radius: 7px; 
 border-radius: 7px; 
 -webkit-box-skygge: 0 1px 0px rgba (0, 0, 0, .1); 
 -moz-box-skygge: 0 1px 0px rgba (0, 0, 0, .1); 
 boksskygge: 0 1px 0px rgba (0, 0, 0, .1); 
 bakgrunn: # b9c7c7; 
 bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# b9c7c7), til (#ededed)); 
 bakgrunn: -moz-lineær gradient (topp, # b9c7c7, #ededed); 
 filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# b9c7c7', endColorstr = '# ededed'); / * ie7 * / 
 -ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# b9c7c7', endColorstr = '# ededed'); / * ie8 * / 
 } 
 .søkinngang { 
 font-family: Tahoma, Geneva, sans-serif; 
 font-size: 22 pikslene; 
 color: # e0e9e9; 
 } 
 .søk .felt { 
 bakgrunn: # b9c7c7; 
 polstring: 0px 2px 3px 12px; 
 bredde: 190px; 
 kant: solid 1px #bcbbbb; 
 disposisjon: ingen; 
 -webkit-border-radius: 7px; 
 -moz-border-radius: 7p; 
 border-radius: 7px; 
 -moz-box-skygge: innsatt 0 1px 2px rgba (0, 0, 0, .2); 
 -webkit-box-skygge: innsatt 0 1px 2px rgba (0, 0, 0, .2); 
 boksskygge: innsatt 0 1px 2px rgba (0, 0, 0, .2); 
 } 
 .søk .knappen { 
 margin-bottom: -10px; 
 } 

Og HTML-seksjonen og koden legges til overskriftsdelen like under

undertittel i filen index.html som vist nedenfor:

 Figur D viser den resulterende overskriftsseksjonen som vist i Chrome 17.0.9: 

Figur D

Søkefunksjonaliteten som er inkludert i denne opplæringen er kun til demonstrasjonsformål, og vil faktisk ikke være et fungerende søk. (En databaseforbindelsesforbindelse må implementeres for søkeresultatresultater.)

Deretter legger vi til styling og HTML for venstre navigasjonssidefelt med tekst om "About", "Blog", "Products", "Services" og "Contact". Alle hyperkoblinger vil peke på "dummy" -sider for å holde denne opplæringen i bevegelse; Hvis du imidlertid ønsker å koble til faktiske undersider, trenger du bare å bruke den endelige filen index.html som mal, og gi dem nytt navn etter behov for de resterende sidene. Først settes HTML for navigasjonen inn i en uordnet liste og er den eneste koden som er lagt til i venstre sidefelt-seksjon som vist nedenfor:





  • Og CSS-stylingen legges til i venstre sidefelt for anker- og listeartikler, og med en endring i margen satt til -35px for justering.

     #left_sidebar { 
     margin-top: 10px; 
     margin-venstre: -35px; 
     float: venstre; 
     topp: 0; 
     venstre: 0; 
     bredde: 200px; 
     min-høyde: 750px; 
     flow: auto; 
     padding-venstre: 5 px; 
     padding-right: 5px; 
     } 
     #left_sidebar a, li { 
     font-family: Tahoma, Geneva, sans-serif; 
     font-size: 22 pikslene; 
     font-style: normal; 
     font-vekt: 600; 
     color: # 4b6262; 
     text-decoration: none; 
     list-style: none; 
     } 
    Figur E viser de resulterende oppdateringene for navigasjonsdelen som gjengitt i Chrome 17.0.9:

    Figur E

    Deretter vil vi legge til stylingen for områdene våre med innhold som er skilt inn i venstre og høyre underseksjon i høyre kolonneseksjon og like under funksjonsbildet. Stylingtilleggene til høyre kolonne inkluderer skrift og noen CSS3 tekstskyggeeffekt for funksjonstitlene og en egen fontstyling for funksjonsartikkelen, de ekstra stilene som ble lagt til stilen.css-filen vises nedenfor:

     #right_column .feature_title { 
     font-family: Tahoma, Geneva, sans-serif; 
     font-size: 22 pikslene; 
     font-vekt: 500; 
     color: # 1f2626; 
     margin-top: -5px; 
     tekstskygge: 2px 1px 2px # 656e6e; 
     filter: dropshadow (farge = # 656e6e, offx = 2, offy = 1); 
     } 
     #right_column .feature_article { 
     font-family: Verdana, Geneva, sans-serif; 
     font-size: 14; 
     font-vekt: normal; 
     } 

    HTML-koden som er lagt til i filen index.html, vises nedenfor:

    Utvalgt innhold Tittel 1

    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporid incididunt out labore and dolore magna aliqua. Ut enim ad minim veniam, quis nostrud trening ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure doloru i reprehenderit velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "

    Utvalgt innhold Tittel 2

    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporid incididunt out labore and dolore magna aliqua. Ut enim ad minim veniam, quis nostrud trening ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure doloru i reprehenderit velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "

     Figur F viser resultatet med funksjonsartikkeldelene som vist i Chrome 17.0.9: 

    Figur F

    Figur G viser nettsiden slik den står med de nyeste HTML- og CSS-stilene som er lagt til, og med de røde rammene fjernet fra topptekst- og containerdelen, men bunntekstdelens røde kant er igjen for å skille den fra seksjonene som er konvertert.

    Figur G

    Det tredje og siste segmentet i veiledningsserien Minimalistisk PSD til HTML avsluttes med å legge til i bunntekstdelen, inkludert å lage en CSS3-stilgradient.

    © Copyright 2020 | mobilegn.com