Share
Grid 960 er et CSS Framework som gjør det mulig for utviklere å raskt prototype design. De er gode verktøy for å lage mock ups. Hvorfor? Fordi de gjør alt tung løft, kan du få raskere resultater.
Det høres fint ut, men hvordan gjør vi det? Det er mange artikler på internett-sprengning eller støtte CSS-rammer, men ingen har noe innhold for å hjelpe uerfarne lesere å bestemme seg. Denne er forskjellig. Denne artikkelen dekker hele prototypeprosessen. Tenk deg at du får et design, og du trenger en mock for kunden. Denne artikkelen forklarer grunnlinjen til Grid 960, planlegger gridet for et design, og koder prototypen. Prøveutformingen vil utnytte de fleste funksjonene til Grid 960, noe som gir deg en solid kunnskapsbase å jobbe med. Når du har sett designet nedenfor, er det tid for å lære om hvordan Grid 960 fungerer.
Gitter 960 fungerer ved å bruke klasser gjennom arv. Gitter 960 gir to gitter: 12 og 16 kolonner. Hovedbeholderen er alltid 960px bred. Bruke 960 tillater de fleste kombinasjoner av kolonne samtidig som det er lett å jobbe med. Vi vil bruke 12 kolonne grid for å kode dette designet, men vi vil ikke bruke alle 12 kolonnene. Hver rutenett har en margin: 0 10px. Dette skaper en renner på 20px. Når du lager en rad, legger hele bredden på alle elementene opp til 960. Ta en titt på Grid 960s demoside. Du vil se et fint rutenett med alle slags kombinasjoner. Hver gridcelle har en klasse som angir hvilken bredde den vil være. Her er brudd ned av kolonnebredder for et 12 kolonne rutenett.
Hver bredde tilsvarer et klassenavn som er dannet slik: grid_X hvor X er et tall fra listen ovenfor. Hvis du vil ha en blokk med bredde 940, bruk klasse grid_12. Hvordan vet Grid 960 hvilken bredde den skal være? Hver grid_x er en väljare container_Y .grid_X hvor Y er enten 12 eller 16 for kolonner. Lar dykke inn i noen kode. Slik lager du en to-rads rutenett i en 12 kolonnebeholder. La den første raden være 940px, og den andre raden inneholder to like kolonner.
940px
460px
460px
Når du lager en rad i rutenettet, må du sørge for at alle grid_X-tallene legger opp til antall kolonner du bruker. Dette sikrer riktig bredde. To grid_6 div s legger opp til 12. Du er ikke begrenset til de samme tallene. Du kan også bruke 6, 4 og 2. Der har du det, et raskt rutenett for innhold. Nå som du vet hvordan Grid 960 fungerer, kan vi se hvordan du lager mockup.
Det er enkelt å visualisere designens rutenett. Det er en rad for topptekstbildet, en rad for navlinjen, en rad med 2 kolonner for overskriftens historie og plakat, en spacer, 4 kolonner, en spacer, enn en bunntekst med 3 kolonner. Klikk på bildet for koden.
Når du har sjekket ut det visuelle, bør du forstå hvordan du lager mockupens rutenett. Ved å bruke breddene, samsvarer du klassen # s fra listen og lar oss kaste noen koden sammen. Husk å legge til clearing div på slutten av hver rad. Ikke glem å inkludere stilarkene som følger med i Grid 960-pakken.
Skjelettet er klart. Tid til å begynne å overlappe designet. De grønne stolpene er bare divs med bakgrunnsfarge og høyde. Navbar har ikke en sett høyde. I stedet vil det bli styrt av størrelsen på koblingene inni. Ikke glem å legge til topptekstbildet også.
div.spacer bakgrunnsfarge: # 8FC73E; høyde: 1em; div # navbar bakgrunnsfarge: # 8FC73E; polstring: 10px 0;
Påfør klassen for å korrigere grid_12 divs og angi ID.
Midtkolonnene krever ingen effekt. Legg til litt plassholdertekst for å fylle ut designet. Du kan gjøre noen her. Før du takler toppseksjonen, flytter du til bunnteksten. I skjermbildet er bunnteksten en solid farge. Du kan ikke oppnå dette med gjeldende kode. En wrapper div rundt de tre nederste kolonnene løser problemet. Så du tror, ikke så mye, bare sett inn en div. Det bryter rutenett siden Grid 960 er avhengig av foreldre og barn å bruke stilene (husk selgercontaineren_12 .grid_4?) En undergrid løser problemet. Gitter 960 gir nestede rister. Opprett en undergrid ved å legge til en grid_12 div, og legg deretter grid_4'en i den. Ved bruk av nestede rister krever barnelementene spesielle klasser. Det første barnet trenger en klasse "alpha" og det siste barnet en klasse &qout;omega "Rediger markeringen for å gjenspeile endringene og bruk stilistiske endringer i bunnteksten.
div # footer bakgrunnsfarge: # e5e5e6;
Utmerket! Nå har bunnteksten en solid bakgrunnsfarge, og du kan justere størrelsene på kolonnene om nødvendig. Legg til litt dummy tekst til kolonnefoten for akkurat nå, og la oss flytte til navbar. Navbar er en enkel uordnet liste. Legg til noen koblinger og riktig styling.
div # navbar ul listestil: none; skjerm: blokk; margin: 0 10px; div # navbar ul li float: left; margin: 0 1.5em; skrifttype: fet 1em Arial;
Søt. Siden kommer virkelig sammen. Alt som er igjen, skaper blokkeringseffekter på toppseksjonen. Dette er mer uhyggelig enn det fremgår. Før vi dykker inn, må du innse noen ting om Grid 960 og CSS-rammene generelt.
Astute lesere kan ha innsett noe. Siden er ekstremt stiv. Alt har en definert størrelse og endring av størrelsen skaper problemer eller potensielt bryter designet. Designere ofrer også noen av våre designmål fordi Grid 960 tillater det. For eksempel var prøveutformingen 1000px bred. Gitter 960 lager bare grensesnitt 960px bredt, så den ekstra størrelsen går tapt. Hva om du vil lage din side 1000px i stedet for 960? Kort sagt, du kan ikke uten å gjøre noen tunge endringer i koden. Rammen låser designere inn i et sett med begrensninger. Si at klienten ønsker et design som er bredere eller tynnere. Designeren vil mest sannsynlig måtte kutte koden de har skrevet for å oppnå de nye målene. Det er et annet problem som ikke har blitt avslørt ennå - lik høyde kolonner. Siden de midtre kolonnene alle deler samme bakgrunn, ser de ut til å være like høyder. I bunnteksten setter en wrapper div en bakgrunn bak de 3 kolonnene. Gitter 960 gir deg ikke like høyde kolonner. Det er selvfølgelig en måte du kan oppnå dette på egen hånd. Siden vi prototyperer et design, ikke bruke tid på å bekymre deg om de finere detaljene om hvordan designet vil fungere når det er i produksjon. Du prøver bare å formidle ideene på dette stadiet. Det er også et annet aspekt av Grid 960 å ta hensyn til før du tar tak i toppseksjonen. Grid 960 er avhengig av store elementer og marginer for å lage en riktig størrelse rad. Hvis du bruker polstring eller grenser, bryter designet. Hvis du gjør det, må du justere størrelsen på div for å gjenspeile endringene. Vær lei av dette. Juster størrelsen på elementene på to steder vil alltid føre til forvirring og gjøre designet vanskeligere å vedlikeholde. Når det er sagt. La oss fullføre toppseksjonen.
Heldigvis kan du manøvrere rundt like høyde kolonner i øverste delen. Siden bildet til høyre som en sett høyde og bredde, vet vi den andre kolonnens størrelse. Opprett blokk-effekten ved å legge til en ny div med en kantlinje inne i eksisterende divs. Ikke glem å sette høyder. Ikke sett polstring på divs fordi det vil endre bredden av blokk og bryte rutenettet. Angi i stedet en margen på et barnelement. Dette vil ikke endre bredden på blokken. Bruk en margin til et inline element. Dette skaper den ønskede effekten og teksten brytes for å passe.
Bruk en klasse i stedet for ID fordi topSection-klassen er brukt på to div. Dette gjør det også mulig for oss å endre høydene lettere. Velg en høyde (dette nummeret er virkelig opp til deg) og opprett en klasse.
div.topSection div border: solid 10px # e5e5e6; høyde: 280px; div.topSection div p margin: 10px;
Kul! Lar sjekke fremgangen.
Klar til å fylle de to boksene? Gå videre og fyll den venstre, noen med noen eksempler på tekst. Ikke gjør for mye eller det vil overløpe esken. Dette skaper et potensielt problem i den endelige utformingen. Hvordan vet du hvor mye tekst er for mye? For produksjonsdesignet, ville designeren trenge en funksjon for å bare tillate X mengde ord for å stoppe overflyten. Tid for å få plakatbildet klart. Før du setter inn et bilde, bestemme dimensjonene. Hvis du er god matte og forstå bokmodellen, vet du mest sannsynlig hvor stor den skal være. Hvis du ikke gjør det, brann du opp FireBug og tar en topp i DOM. Klikk på Inspiser. Gå ned til diven i spørsmålet og klikk på den. Åpne kategorien Layout. FireBug vil vise en nyttig boks modell referanse. Sjekk ut bildet for å få hjelp. Klikk på bildet for full størrelse.
Skjermbildet viser plakat div er 360x280. Finn et bilde og opprett en stil. Jeg bestemte meg for å la bildet fylle hele diven (i motsetning til prøveutformingen.) Hvis du ønsket å lage en 10px-margin, må du sørge for å redusere dimensjonene med 20px på hver side.
img # poster width: 360px; høyde: 280px;
Du bør få dette. Mockupen er fullført. Ta gjerne inn noen ekte tekst og endre bildet rundt.
Nå som prototypen er ferdig, for å utnytte hva som er gjort. Du har klart å prototype et design raskt. Grid 960 opprettet nettverket nettopp for oss. Hvor skal du reise herfra? Naturligvis vil vi vise klienten og se hva de synes. Det er imidlertid noen advarsler. Har du testet dette designet i IE6 eller IE7? Nei. Skal vi? Nei. Dette er en prototype. Slik ser det ut i produksjonen. Det er naturlig at alle nettleseregenskaper skulle bli utarbeidet før produksjon. Hva om kundene ønsker å skape en mer kompleks design? I dette tilfellet vil du raskt begynne å se rammene for rammen. Hva om designet skal være flytende eller elastisk? Rammen vil ikke gjøre det. Du trenger å starte fra bunnen av. Husk at CSS-rammer ikke løser alle dine problemer, men de hjelper med noen. Gitter 960 og andre er flotte for å kaste sammen prototyper. Du kan like godt bruke konseptene Grid 960 i produksjonskoden, men det anbefales ikke å holde rammen helt gjennom produksjonen. CSS-rammer er akkurat som alle verktøy, de har sine bruksområder. Med det i tankene, gå videre og prototype!
Accentsconagua