Share
I dag fortsetter vi opplæringsserien for å skape ShutterPress-designet ved å konvertere det fra en rå PSD til et funksjonelt nettsted ved hjelp av HTML og CSS. Nå har vi opprettet den første webdesignen og samlet de nødvendige ressursene for koding. Nå skal vi faktisk kode det slik at det vil fungere i alle de store nettleserne!
I dag handler det om å konvertere vår PSD-design til et fullt fungerende HTML-nettsted! Vi går deg gjennom merkingen trinnvis, til vi har et nettsted som ser bra ut på alle de store nettleserne. Vi nærmer oss dette fra en mellomliggende forståelsesnivå, så hvis vi beveger oss for fort forbi noen av de grunnleggende trinnene, er du velkommen til å stille noen spesifikke spørsmål i kommentarfeltet nedenfor.
En spesiell shoutout går til CodeMyConcept, hvem har nådig gitt koden og opplæringen for denne dagen i serien!
Hvis du savnet de to foregående dagene i denne serien, kan du sjekke dem ut her:
OK, med våre mål nå klart definert, la oss begynne!
Først begynner vi ved å skape den grunnleggende mappestrukturen for prosjektet, som vi definitivt trenger å beholde eiendeler godt strukturert og organisert.
I dette tilfellet trenger vi en "css" -mappe med vår hoved css-fil, en "bilder" -mappe og en "js" (Javascript) -mappe når HTML og CSS er fullført, slik at vi kan legge til glidebryteren, lysboksen og trekkspill plugins. Også index.html-filen i rotmappen
Deretter oppretter vi grunnleggende HTML-strukturen i oppsettet med venstre og høyre seksjoner. Vi skal bruke en wrapper div for å inneholde og sentre alt og våre venstre og høyre beholdere inni, samt en div øverst og bunnen av omslaget for å hjelpe oss med de avrundede hjørnene samtidig som layoutet er fleksibelt.
ShutterPress LEFFT MENY HERRETT INNHOLD HER
Vi foretrekker faktisk å lage HTML før du skriver noen CSS, selv om noen mennesker gjør en del av HTML og CSS samtidig, og deretter gå videre til neste seksjon. Vi har funnet ut at det gjør at hele HTML-en først hjelper oss med å tenke på CSS på forhånd og alt annet som kan være nødvendig, for eksempel Javascript eller PHP. Alt jeg legger til på dette tidspunktet er min CSS Reset.
Så begynner vi med å kode på venstre side-menyen. Her trenger vi et h1-tag og en link til vår logo, og en uordnet liste for menyelementene våre. Vi må også neste en annen uordnet liste på den tredje li-taggen i vår undermeny, og gjør det samme med noen dummy-elementer på den andre li-taggen, så vi kan se vår javascript-trekkspill som senere fungerer.
Vi må også legge til noen "åpne" og "lukkede" klasser til koblingene og undermenyen slik at vi kan kontrollere ikonene og hvilken undermeny som er åpnet som standard, og den aktive klassen markerer siden vi ser for øyeblikket..
ShutterPress
Nå, rett etter det kommer de sosiale ikonene og søkefeltet i vår venstre del nederst. Så, vi lager en container div for bunnseksjonen og skiller [divs] for hver av de to delene i den aktuelle beholderen.
For de sosiale ikonene trenger vi et spenning for teksten og en liste for ikonene, hver med en klasse for å få det riktige ikonbildet og den respektive hoverstaten.
For søk-delen lager vi et skjema og divs som inneholder de tilsvarende inngangene for å hjelpe flyte dem og legge til bakgrunn og ikoner. Å gjøre dette i stedet for å bruke stilene direkte til inngangene, virker mye bedre for å unngå problemer med kryss-surfing med linjehøyder og tekstinnrykk.
Sosial:
- tumblr
- picasa
- Vimeo
- flickr
- rss
Så her er hvordan det ser ut i nettleseren vår sammen med CSS Reset
Nå som vi har fullført vår venstre meny, kan vi begynne å kode inn riktig innholdsdel for miniatyrbildet.
Så først oppretter vi en uordnet liste med bilder i koblinger, slik at de er klikkbare for vår lightbox-plugin, og etter det lager vi en div for å inneholde vår forrige og neste knapp.
På dette tidspunktet må vi begynne å kutte miniatyrbildene og lagre dem med tilhørende navn fra HTML, slik at vi kan ha noen inlinebilder som viser.
Slik ser all HTML på oss i Firefox
Nå for noen styling har vi satt opp noen generelle innstillinger for skrifttyper, tekst og koblinger farger og bakgrunnsbilde
Accentsconagua
/ * ------------------------------ * / / * GENERELL RESET * / / * -------- -------------------- * / html, kropp, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote før en abbr acronym adresse stor citer koden del dfn em font fm kbd q s samp liten streik sterk sub sub sup tt var, b, du, jeg, senter, dl, dt, dd, ol, ul, li, fieldset, skjema, etikett, legende, tabell, bildetekst, tbody, tfoot, thead, tr, th, td, hr, margin: 0; padding: 0; kant: 0; omriss: 0; font-size: 100%; vertikaljustering: basislinje; bakgrunn: none; ol, ul listestil: none; h1, h2, h3, h4, h5, h6, li linjehøyde: 100%; blockquote, q quotes: none; q: før, q: etter content: "; table border collapse: collapse; border spacing: 0; input, textarea, velg font: 11px Arial, Helvetica, sans-serif; vertikaljustering: midt; polstring: 0; margin: 0; input: fokus, textarea: fokus disposisjon: none; form, fieldset border-style: none; html, body margin: 0; polstring: 0; min-høyde: 100%; / * - --------------------------------*/ /* GENERELLE INNSTILLINGER */ /*-------- ----------------------- * / body height: 100%; font: 12px / 12px "Lucida Sans", "Lucida Grande", sans-serif ; farge: # 000; bakgrunn: url ('? /images/bg.jpg') gjenta #fff; a tekst-dekorasjon: ingen; farge: # 000; a: svever tekst-dekorasjon: ingen; farge : # 0285da; Deretter setter vi opp wrapper stilene slik at vi kan bygge grunnlaget for vårt layout, som vi begynner å gjøre ved å definere bredden på vår wrapper og sentrere den med en margin: 0 auto;
For de øverste og nedre delene som vi definerte tidligere, setter vi opp bakgrunnsbilder og de nødvendige dimensjonene for å lage våre topp og nederste avrundede hjørner, og for omslaget setter vi opp et bakgrunnsbilde gjentatt i Y-aksen som vil dekke innholdet vårt som inneholder divisjonslinjen mellom venstre og høyre innhold.
For wrapper-bottom div må vi sette opp et klart: begge; fordi når jeg flyter min høyre og venstre beholder, går innpakningen sammen, så vi må forhindre dette ved å rydde flytene.
/ * -------------------------- * / / * WRAPPER * / / * ------------- ----------- * / # wrapper-top bakgrunn: url ("? /images/content-top.jpg") no-repeat rullesenter topp #FFFFFF; høyde: 18 piksler; bredde: 994px; #wrapper bredde: 994px; overløp: skjult; margin: 64px auto 0; bakgrunn: url ("? /images/content-bg.jpg") Gjenta-y-rullingssenteret #FFFFFF; # wrapper-bottom bakgrunn: url ("? /images/content-bottom.jpg") no-repeat rullesenter topp #FFFFFF; høyde: 61px; bredde: 994px; klare: begge; 
Her er resultatet i nettleseren vår:
Nå som vi har pakken klar, kan vi fortsette med innholdet: Først setter vi opp bredden på både høyre og venstre beholder slik at vi kan flyte dem til riktig posisjon.
/ * -------------------------- * / / * VENSTRE MENY * / / * ------------ ------------ * / / * Hovedmeny * / #left bredde: 235px; flyte: venstre; / * ------------------------------ * / / * RIGHT CONTENT * / / * ------- --------------------- * / / * Thumbnail Gallery Innhold * / #right width: 758px; flyte: høyre;
Nå begynner vi å stylere navigasjonen ved å lage et spritbilde for logoen, knappene og ikonene på designet.
Denne spesielle utformingen virker ikke som om den kommer til å vokse i høyde, men vi vil fortsatt holde ting fleksible bare hvis det er et fremtidig behov for å legge til flere elementer i navigasjonen.
Så vi setter opp den venstre beholderen med en minimumshøyde, slik at den venstre bunnen div kan være helt posisjonert uten å måtte bruke en enorm margin for å presse den ned, slik at nye elementer legges til, vil utformingen fortsatt beholde sine opprinnelige dimensjoner.
Vi oppretter også koblingene i navigeringen som skal vises som blokker, slik at hele området kan klikkes og ikke bare teksten og legge til åpne og lukke bakgrunner ved hjelp av sine respektive klaser og justere posisjonen til vår sprite.
Undermenyen med en klasse "lukket" er satt til å vise: ingen; så bare det vanlige vises.
/ * -------------------------- * / / * VENSTRE MENY * / / * ------------ ------------ * / / * Hovedmeny * / #left bredde: 235px; flyte: venstre; min høyde: 615px; stilling: relativ; #left .logo a bakgrunn: url ("? /images/sprite.png") no-repeat scroll 0 0 transparent; display: block; høyde: 32 piksler; margin: 8px auto 0; text-indent: -999999px; bredde: 190px; #left .menu bredde: 100%; border-top: 1px solid #eaeaea; margin-topp: 30px; #left .menu li a display: block; høyde: 35px; linjehøyde: 35px; polstring-venstre: 22px; border-bottom: 1px solid #eaeaea; #left .menu li a.active color: # 0285DA; grense høyre: 1px solid #fff; #left .menu li.closed background: url ("? /images/sprite.png") no-repeat scroll 46px -231px gjennomsiktig; #left .menu li a.opened background: url ("? /images/sprite.png") ikke-gjenta rulle 46px -257px gjennomsiktig; #left .meny li .sub-menu li a padding-left: 38px; #left .menu .sub-menu.closed display: none; # venstre-bunn posisjon: absolutt; bunn: 0; bredde: 100%; For de nederste sosiale ikonene setter vi opp bildene ved hjelp av respektive klase og setter opp bakgrunnsbilder ved hjelp av stillinger, dette gjelder også for svingestatusen.
/ * Sosialt * / # venstre-bunn. Sosialt overflow: hidden; høyde: 34px; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; padding-left: 25px; # venstre bunn. sosialt span float: left; linjehøyde: 34px; # venstre-bunn. sosial ul float: left; margin: 9px 0 0 10px; # venstre bunn. sosial ul li float: left; høyde: 34px; # venstre-bunn. sosial ul li a bakgrunn: url ("? /images/sprite.png") no-repeat-scroll -5px -50px gjennomsiktig; display: block; høyde: 16px; bredde: 16px; margin: 0 5px 0 0; tekstindeks: -999999px; # venstre bunn. sosial ul li a: svever bakgrunnsstilling: -5px -80px; # venstre bunn. sosial ul li a.picasa bakgrunnsstilling: -26px -50px; # venstre bunn. sosial ul li a.picasa: svever bakgrunnsposisjon: -26px -80px; # venstre bunn. sosial ul li a.vimeo bakgrunnsstilling: -47px -50px; # venstre bunn. sosial ul li a.vimeo: svever bakgrunnsstilling: -47px -80px; Og for søkedelen er vi i utgangspunktet flytende av input container divs og setter syles til dem heller enn til inngangen.
/ * Søk * / # venstre-bunn .search overflow: hidden; margin-topp: 12px; # venstre-bunn .search .left background: url ("? /images/sprite.png") no-repeat scroll -5px -203px gjennomsiktig; float: venstre; høyde: 27px; margin-left: 20 piksler; polstring: 6px 0 0 10px; bredde: 158px; # venstre bunn .search .left input border: none; bakgrunn: gjennomsiktig; bredde: 100%; # venstre-bunn .søk. rett (bakgrunn: url ("? /images/sprite.png") ikke-gjentatt rull -173px -203px gjennomsiktig; float: venstre; høyde: 27px; # venstre bunn .søk. rett inntasting bakgrunn: ingen gjentatt rulle 0 0 gjennomsiktig; grense: medium ingen; Markøren: pekeren; høyde: 27px; bredde: 27px; Så her er det vi har akkurat nå i firefox
Her flytter vi bare listepostene for å få et skjermbilde, vi legger til polstring, bakgrunnsfarger og grenser for å få en ramme for hver tumbell og også legge til marginer for separasjon.
Endelig. Vi har knappene våre med en container div som er sentrert, og begge linkene er floated.
/ * ------------------------------ * / / * RIGHT CONTENT * / / * -------- -------------------- * / / * Thumbnail Gallery Innhold * / #right width: 758px; flyte: høyre; # rett. miniatyrbilder overflow: hidden; polstring: 10px 0 0 32px; # rett. miniatyrer li float: left; margin: 0 21px 18px 0; # rett. miniaturer li a border: 1px solid #eaeaea; polstring: 2px; bakgrunn: # f2f2f2; skjerm: blokk; # rett .navigering margin: -10px auto 0; overløp: skjult; bredde: 50px; #right .navigation a background: url ("? /images/sprite.png") no-repeat scroll 0 0 transparent; display: block; float: venstre; høyde: 21px; text-indent: -999999px; bredde: 21px; #right .navigation .prev bakgrunnsposisjon: -159px -75px; margin: 0 8px 0 0; #right .navigation .next bakgrunnsposisjon: -186px -75px; Heres vår første side ferdig i firefox!
Når vi går videre til vår underside, gjør vi det som duplikat vår index.html, og navngi det som subpage.html eller inner.html, så tar vi ut alt innholdet i vår # rette container og begynner å bygge html som er nødvendig for vår skyvegalleri og de 3 modulene nedenfor.
Vi trenger en div for å holde hele oppslaget for min lysbildefremvisning, en liste over bilder som vil bli lysbildene, og vi vil også bruke 3 forskjellige versjoner av bildene, slik at vi kan se noen handling senere med jQuery Cycle plugin.
Vi stiller også en blank div som vil være helt posisjonert på toppen av bildene for å fungere som en ramme hvis dette oppsettet noensinne må implementeres i et CMS for å få noe dynamisk innhold. Hvis dette skjer, kan vi bare legge til noe bilde uten å måtte fotografere de avrundede hjørnene og skyggene før hånden.
Og til slutt for slideshowet må vi opprette en navigasjons div med et par lenker for vår "forrige" og "neste" galleri navigasjon.
Vår siste blokk av innhold har våre 3 moduler satt i egen container, hver modul er en div på egen hånd som jeg vil flyte slik at de er ved siden av hverandre. På innsiden har jeg og h2 tag for tittelen og et avsnitt for teksten.
Modul One
Sed korem sitta feugiat erat på ante vestibulum auktor. Cras rhoncus diam et som gravida sagittis. Ut tempor sapien i neque ultrices varius. Skriv inn tekst.
Modul to
Pellentesque lacinia, augue vel venenatis commodo, ante neque tempor augue, sempre rhoncus diam justo in ante. Du kan også være en del av den liberale delen av livet ditt.
Modul Tre
Suspendisse porta vel enim molestie suscipit elementum leo porta. Cras lorem lectus, viverra sit amet semper quis, vehicula quis velit.
I dette bestemte designet var det litt vanskelig å få rammen for lysbildene, så her er det vi gjorde:
Vi tok laget kalt "Form 90" og droppet fyllingen til 0%. Høyreklikk deretter laget som heter "1720729_high", valgt utløserklippermaske og gjem lag laget.
Gikk tilbake til laget "Form 90" og sett opaciteten til 50%. Høyreklikket på laget og laget et duplikat, valgt begge lagene "Form 90" og slått sammen.
Nå kan du lagre rammen som en separat gjennomsiktig .png og bare legge til litt hvit bakgrunn i hjørnene slik at den dekker bildene på baksiden.
Vi satte dimensjonene for modulene og floated dem for å få dem inn etter at vi satt opp stilene sammen med sprite som bakgrunnsbilde for ikonene.
Vi setter listepostene fra skyvekontrollen for å få en posisjon: absolutt; med forhold til ul slik at de vil kollapse og se som bare ett bilde slik at vi kan få det virkelige utseendet på layoutet, vil vi legge til funksjonaliteten etter at alt er klart.
De forrige og neste knappene er også plassert helt slik at vi kan få dem sentrert vertikalt.
/ * Slideshow Galleri Innhold * / # gallery-holder posisjon: relative; bredde: 719px; margin: 20px auto 0; høyde: 442px; # gallery-holder .slideshow-frame bakgrunn: url ("? /images/slideshow-frame.png") no-repeat scroll 0 0 transparent; høyde: 442px; stilling: absolutt; topp: 0; venstre: 0; bredde: 719px; z-indeks: 10; # gallery-holder .slideshow li høyde: 442px; stilling: absolutt; topp: 0; bredde: 719px # gallery-holder .navigation a height: 92px; venstre: 0; margin-top: -44px; stilling: absolutt; topp: 50%; bredde: 47px; z-indeks: 15; # gallery-holder .navigation a.prev bakgrunnsstilling: -6px -103px; margin-top: -44px; # gallery-holder .navigation a.next bakgrunnsposisjon: -65px -103px; venstre: auto; høyre: 0; # moduler-holder overflow: hidden; margin-topp: 24px; margin-venstre: 20px; # moduler-holder. modul float: left; bredde: 204px; margin-høyre: 40px; # moduler-holder .module h2 font-size: 18px; font-vekt: normal; margin-bottom: 5 px; padding-left: 25px; # moduler-holder .module h2.module-one bakgrunn: url ("? /images/sprite.png") no-repeat bla -128px -170px gjennomsiktig; # moduler-holder .module h2.module-two bakgrunn: url ("? /images/sprite.png") ikke-gjentakende scroll -128px -140px gjennomsiktig; # moduler-holder .module h2.module-tre bakgrunn: url ("? /images/sprite.png") no-repeat-scroll -128px -110px gjennomsiktig; # moduler-holder. modul p farge: # 6a6a6a; linjehøyde: 15px; Etter alt dette kan vi se at modultitlene har en Museo-skrifttype på dem som ikke er en websikker skrifttype, så vi må sette opp dette med @ font-face. Så vi kjørte skrifttypen gjennom Font Equirrel (http://www.fontsquirrel.com/fontface/generator) og plasserte fonter i sin egen fontsmappe i roten til prosjektet vårt og satt opp CSS i våre generelle innstillinger ved å bruke høyre stier for skriftene.
/*---------------------------------*/ /* GENERELLE INNSTILLINGER */ /*----- -------------------------- * / body height: 100%; font: 12px / 12px "Lucida Sans", "Lucida Grande", sans-serif; farge: # 000; bakgrunn: url ('? /images/bg.jpg') gjenta #fff; en tekst-dekorasjon: ingen; farge: # 000; a: svever tekst-dekorasjon: ingen; farge: # 0285da; @ font-face font-family: 'Museo700'; src: url ('? /fonts/museo700-regular-webfont.eot'); src: url ('? /fonts/museo700-regular-webfont.eot?#iefix') format ('embedded-opentype'), url ('? /fonts/museo700-regular-webfont.woff') format '), url ('? /fonts/museo700-regular-webfont.ttf ') format (' truetype '), url ('? /fonts/museo700-regular-webfont.svg#Museo700 ') format (' svg ') ; font-weight: normal; font-style: normal; Så alt vi trenger å gjøre nå er satt skriftfamilien til våre h2-koder, og nå er vår andre side fullført.
# moduler-holder .module h2 font-familie: 'Museo700'; font-size: 18 piksler; font-vekt: normal; margin-bottom: 5 px; padding-left: 25px;
Nå for å legge til noen funksjonalitet og animasjon til prosjektet vårt, skal vi bruke to plugins: jQuery Cycle for vår lysbildeserie (http://jquery.malsup.com/cycle/) og prettyPhoto for vårt lysbilde galleri (http: // www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/) og så skal vi lage en egendefinert funksjon for våre meny trekkspill.
Sørg for at du laster ned prettyPhoto-pluginet og kopier de nødvendige ressursene til de respektive mappene (javascript i "js" -mappen, stilark til mappen "css" osv.), Sykluspluggen kan kobles fra Github og jQuery kan kobles sammen fra Google APIs.
Vi lager også en main.js-fil i vår JS-mappe der vi kan sette vår egendefinerte funksjon og plugin-konfigurasjon.
Så, vi refererer til stilarket i toppteksten av html-filene
ShutterPress
Vi refererer også våre javascript-filer nederst i dokumentet like før lukkede HTML-taggen.