Share
Jeg er en stor fan av fotocentriske nettsteddesigner? så i dag er jeg glade for å lansere en ny "komplett nettsted" opplæring som er rettet mot fotografer, illustratører og andre visuelle reklamer. I dag 1 utformet vi malen i Photoshop med noen spesielle triks og teknikker. I dag, i dag 2, går vi gjennom den endelige designfasen og gjør så noen "pre-flight" forberedelser for kodingsfasen, som vi går over i detalj i dag 3. I dag 4 viser vi du hvordan du lager tre helt forskjellige nettsteder med samme rå HTML.
Dagens økt vil være relativt rask når det gjelder tekniske triks? men vi går tungt på "arbeidsflyt" -tipsene, så vær oppmerksom hvis du er nysgjerrig på fasen av et prosjekt som skjer etter design og før kodingen begynner.
La oss begynne dagens økt med noen generelle notater om hva "pre-flight"er: Når du er ferdig med å designe et nettsted, er det noen viktige skritt som ideelt sett bør finne sted før du begynner den faktiske kodingsprosessen. Det første trinnet er å begynne å skjære opp designet vårt.
Den fulde skriftlige trinnvise veiledningen er under. Vi starter med Photoshop-dokumentet som vi opprettet i Dag 1, men du kan også laste ned demo PSD for å sjekke arbeidet ditt mot min.
OK, med våre mål nå klart definert, la oss begynne!
Det første trinnet er å skille opp noen bilder som kreves i den kodede mal. I vårt tilfelle er denne prosessen ganske enkel: Ta en god hard titt på malen og pek på alle designelementene som ikke kan dupliseres med CSS eller andre kodende triks. Her er vår liste:
La oss merke hvor disse er på vårt design (klikk for bildet i full størrelse):
">
Å skære disse er ikke vanskelig, så jeg vil ikke gå for mye inn i dybden, men før vi kommer i gang er det verdt å vurdere om noen av disse bildene kan kombineres til en enkelt CSS Sprite.
Hva er en CSS Sprite? Enkelt sagt, en sprite er en metode for å bruke et enkelt bilde som et middel til å lagre flere mindre bilder. For eksempel, ta en titt på sprite som blir brukt på Webdesigntuts:
Når vi starter kodingen, kan vi bare bruke CSS posisjonering og beskjæring av bildet for å vise stykket av sprite som vi vil ha.
Hvorfor bruke en CSS Sprite? Hastighet! Bruke sprites til å lagre bilder vil redusere tiden det tar å laste inn en hel nettside? når bilder blir gjenbrukes igjen og igjen på flere sider, kan dette bety mye lagret tid.
Sprites brukes best med mindre bilder som blir brukt igjen og igjen. For eksempel kan de fleste av eiendelene diskutert ovenfor faktisk reduseres til denne sprite:
I en enkelt sprite har vi allerede prepped mesteparten av vårt design for koding? og det er alt under 19 KB! Ikke dårlig riktig?
For å lage din egen sprite, bare opprett et tomt dokument (starte med en hvilken som helst størrelse, vil du etter hvert beskjære dette til bare å passe nesten hvert element på sprite), og legg deretter til designelementene med en rimelig mengde polstring mellom hver element. Her er noen ekstra triks:
For de gjenværende bildene kan vi bare lage våre egne generiske skiver. Jeg vil liste dem under og beskrive hver enkelt (og hvorfor det ikke er en sprite):
Den indre skyggen overlegg for Slidedown. Det er ikke en sprite fordi den er stor (noe som betyr at det ville unødvendig biff opp størrelsen på sprite).
De øverste og nederste avrundede hjørner: Disse er ikke sprites av noen grunner: 1) som eksemplet ovenfor, de er store og ubehandlede; 2) Disse er sannsynligvis re-skinned eller endret på et senere tidspunkt, noe som betyr at de lastes inn i en sprite bare gir ekstra arbeid, og 3) det er en god mulighet for at vi kan bestemme oss for å dike disse bildene for CSS-metoder i fremtiden.
Bakgrunnsbildet: Dette er ikke en sprite fordi 1) det er sannsynlig å bli byttet ut med et annet BG-bilde og 2) det må gjentas på ubestemt tid, som spriter bare ikke gjør det bra.
Andre "Ikke-Sprites": Tydeligvis vil vi ikke laste våre miniatyrbilder eller andre innholdsbilder i som sprites. Den viktigste grunnen til at dette er praktisk? Sprites er ment for grunnleggende brukergrensesnitt og merkevareelementer som kan lastes raskt og fremskynde et nettsted? hvis vi lastet hvert bilde inn i en enkelt sprite, ville det gi en ekstra lang lastetid, selv om det spedte ting opp etter at den var lastet inn. Tenk på pre-loaders for de store Flash-nettstedene noen år tilbake;)
Den andre åpenbare grunnen er at disse innholdsbildene sannsynligvis endres hver gang noen oppdaterer nettstedet. Sprite-bildet er ment å være ganske mye uendret så lenge nettsteddesignet forblir det samme.
Avsluttende snittnotater: Det går nok med å si, men det er andre måter å skive denne designen på. Ulike tilnærminger kan være fornuftig for din egen variasjon av dette designet? så ikke begrense deg til å bruke ideene ovenfor. Hvis du vil angripe de avrundede hjørnene og bakgrunnsskyggen ved hjelp av CSS3, vil z-indeksegenskapen og en gjennomsiktig PNG, for all del, gå for det!
Nå som vi har våre bildeaktier klar til å gå, er det på tide å samle våre skript på ett sted, slik at når vi setter oss ned til hard koding, er vi klar for handling. Ta en titt igjen på vårt design, la oss identifisere de viktigste områdene som vil kreve flere skript eller plugins:
Hver god fotografmal trenger en lightbox? og det er få bedre enn prettyPhoto der ute akkurat nå. Det er enkelt å installere / tilpasse, og det kommer til å tilby ganske mange ekstra funksjoner som andre lysbokser ikke - som miniatyrnavigering, tilpassede delings tillegg, og mer.
Dette er et ganske enkelt problem ved å bruke noen grunnleggende jQuery? så vi vil faktisk bruke et tilpasset, lettvektskript for denne. Sjekk tilbake på dag 3 for å se hvordan det fungerer!
jQuery Cycle skal håndtere den tunge løftingen for bildene våre. Det er et utrolig godt dokumentert plugin, noe som betyr at det blir enkelt å konfigurere (og tilpasse) for å passe til vår mal.
Jeg har brukt skriften Museo i designet, så vi må finne en måte å bruke dette på i den kodede versjonen. Den raskeste måten å sette opp dette er med @ font-face. Så, vi kjørte skrifttypen gjennom Font Equirrel (http://www.fontsquirrel.com/fontface/generator) for å lage våre fontfiler som vi kan bruke i dag 3.
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.
På dette tidspunktet bør vi nå være klare til å starte HTML / CSS konvertering. Vi har utformet vår nettside mal, skåret noen bilder som vi må bruke, og samlet alle tredjepartsskriptene vi skal kreve for å gjøre nettstedet funksjonen slik vi ønsker det. I neste fase vil vi gjøre den faktiske kodingen? så gjør deg klar for dag 3!
Accentsconagua