, fremstilling af prototyper med nettet 960 css ramme,,,,, 10,,,,,,,,, 13,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss., - 960 er en css ramme, der gør det muligt for udviklere hurtigt prototype design.de er fremragende værktøjer til at skabe modeller.hvorfor?fordi de gør alt det hårde arbejde, der gør det muligt for dem at få hurtigere resultater, det lyder godt, men hvordan gør vi det?der er en masse artikler på internettet, sprængning eller støtte css rammer, men ingen indhold for at hjælpe uerfarne læsere beslutte.det her er anderledes.denne artikel omfatter hele prototypefremstilling proces.forestil dig, at du får et design, og du har brug for en model for kunden.denne artikel er de grundlæggende elementer af grid - 960, planlægning af nettet til design og kodning prototypen.stikprøven design vil udnytte mest kapacitet af grid - 960 giver dig et solidt videngrundlag for at arbejde på.efter du har set designet under, det er tid til at lære om, hvordan nettet 960 virker.,,,,,, 1.at gøre nettet, nettet 960 fungerer ved hjælp af klasse gennem arv.nettet 960 indeholder to net: 12 og 16, kolonne.de vigtigste beholder altid er 960px bredt.ved hjælp af 960 tillader de kombinationer af kolonne, samtidig med at den er let at arbejde med.vi vil bruge den 12. kolonne net til kode denne konstruktion, men vi vil ikke bruge alle 12 kolonner.hver netcelle har en margen: 0 10px,.dette skaber et nedløbsrør af 20px.ved at skabe en række, den samlede bredde af alle elementer at tilføje til 960.tag et kig på nettet 960 er demo - side.vil du se et godt net med alle mulige kombinationer.hver netcelle har en klasse, der angiver, hvad bredde, det skal være.her er fordelingen af kolonne bredder til 12 kolonne net.,,, 60px,, 140px,, 220px,, 300px,, 380px,, 460px,, 540px,, 620px,, 700px,, 780px,, 860px,, 940px, hver bredde svarer til en klasse navn formet sådan:, grid_x, hvor x er et nummer fra ovennævnte liste.hvis du vil have en blok med bredde 940 brugsklasse, grid_12,.hvordan virker grid - 960 ved, hvad bredde, det skal være?hver grid_x er et vigtigt, container_y. grid_x, hvor y er enten 12 og 16 i kolonner.lad os dykke ned i en kode.her er, hvordan man kan skabe en to ro - nettet i en 12 - kolonne beholder.Let the first row be 940px, and the second row contain two equal columns., ,<div class="container_12"> \t<div class="grid_12"><p>940px</p></div> \t<div class="clear"></div> \t<div class="grid_6"><p>460px</p></div> \t<div class="grid_6"><p>460px</p></div> \t<div class="clear"></div> </div>, , When creating a row in the grid, make sure all the child grid_X numbers add up to the number of columns you're using. dette sikrer den korrekte bredde.to grid_6 div er tilføje op til 12.du er ikke begrænset til de samme tal.du kan også bruge 6, 4 og 2.der har du det, en hurtig grid klar til indhold.nu ved du, hvordan nettet 960 fungerer, lad os se, hvordan man skaber den model.,,, 2.mock - up -, at visualisere design er net, der er let.der er en række for header image, en række for nav bar, en række med 2 kolonne for den overordnede historie og plakat, spacer, 4 kolonner med spacer, end en fod med tre søjler.klik på billedet til kode.,,, efter at de visuelle, du må forstå, hvor for at skabe den model er nettet.ved hjælp af bredder, svarer den klasse&#er fra listen, og lad os smide nogle kode sammen.husk at tilføje clearing div ved udgangen af hver linje.Don't forget to include the stylsheets included in the Grid 960 package., ,<div class="container_12"> \t<div class="grid_12"></div> \t<div class="clear"></div> \t \t<div class="grid_12"></div> \t<div class="clear"> </div> \t \t<div class="grid_7"></div> \t<div class="grid_5"></div> \t<div class="clear"></div> \t \t<div class="grid_12"></div> \t<div class="clear"></div> \t \t<div class="grid_3"></div> \t<div class="grid_3"></div> \t<div class="grid_3"></div> \t<div class="grid_3"></div> \t<div class="clear"></div> \t \t<div class="grid_12"></div> \t< div klasse = "klar" > < /div > < div klasse = "grid_4" > < /div > < div klasse = "grid_4" > < /div > < div. klasse = "grid_4" > < /div > < /div >,, skelettet er klar.tid til at starte simulerer design.den grønne barer er bare divs med en baggrund, farve og højde.den navbar ikke har fastsat højde.det vil i stedet være kontrolleret af størrelsen af forbindelser indenfor.Don't forget to add the header image as well., ,\tdiv.spacer { \t\tbackground-color: #8FC73E; \t\theight: 1em; \t} \t \tdiv#navbar { \t\tbackground-color: #8FC73E; \t\tpadding: 10px 0; \t}, ,Apply the class to correct grid_12 divs and set the ID., ,<div class="container_12"> \t<div class="grid_12"><a href="images/header.png" alt=""/></div> \t<div class="clear"></div> \t \t<div class="grid_12" id="navbar"></div> \t<div class="clear"> </div> \t \t<div class="grid_7"></div> \t<div class="grid_5"></div> \t<div class="clear"></div> \t \t<div class="grid_12 spacer"></div> \t<div class="clear"></div> \t \t<div class="grid_3"></div> \t<div class="grid_3"></div> \t<div class="grid_3"></div> \t<div class="grid_3"></div> \t<div class="clear"></div> \t \t<div class="grid_12 spacer"></div> \t<div class="clear"></div> \t \t<div class="grid_4"></div> \t<div class="grid_4"></div> \t<div class="grid_4"></div> </div>, ,The middle columns don't require any effects. tilføj noget sted indehaver tekst til at udfylde design.du kan gøre noget her.for at tage fat på den øverste del, gå til fods.i skærmbillede, fod er en farve.du kan ikke gøre dette med den nuværende kode.et dæksblad div omkring bunden tre kolonner løser problemet.så du tror, det er ikke noget, bare sæt en. det bryder nettet, da nettet 960 afhængig af forældre og børn til at anvende styles (husk gearvælgeren container_12. grid_4?)en subgrid løser problemet.nettet 960 tillader indlejrede net.skabe et subgrid ved at tilføje en grid_12 div., så de grid_4 er inde i det.ved anvendelse af indlejrede net børn elementer kræver særlige klasser.det første barn har brug for en klasse "alpha" og det sidste barn en klasse & qout; omega "edit avance for at afspejle de ændringer og anvende stilistiske ændringer til fods.,, < div klasse =" grid_12 "id =" lille "> < div klasse =" grid_4 alpha "> < /div > < div klasse =" grid_4 "> < /div > < div klasse =" grid_4 omega "> < /div > < /div >,, okay&#fod {baggrund farve:&#e5e5e6;}, fremragende!den fod har en solid baggrund farve, og de kan justere størrelsen af kolonner om nødvendigt.tilføje nogle dumme tekst til fods kolonner for lige nu, og lad os komme til navbar.den navbar er en simpel unordered liste.tilføje nogle forbindelser og korrekt -.,, < div klasse = "grid_12" id = "navbar" > < /div > < ul > < li > artikel < /li > < li > emner < /li > < li > på < /li > < li > redaktører < /li > < li > kontakt < /li > < /ul > < /div >,, div&#navbar ul (liste stil: ingen; display: blok; margen: 0 10px;} div&#navbar ul li {flyde: venstre margen: 0 1.5em; skrifttype: dristige 1em arial;},,,, søde.den side er virkelig sammen.det eneste, der er tilbage, er at blokere virkninger på den øverste del.det er mere barsk end det ser ud.før vi dykke ind, skal du vide en ting om nettet 960 og css rammer i almindelighed.,,, 3.css rammer ikke løse alle dine problemer, erne læsere kan have indset noget.den side er meget strenge.alt er en bestemt størrelse og den ændrede størrelse skaber problemer eller potentielt bryder design.designere også ofre nogle af vores design målsætninger for det net 960 tillader det.for eksempel stikprøveplanen var 1000px bredt.nettet 960 kun skaber net 960px bred, så den ekstra størrelse er tabt.hvad nu, hvis du vil gøre din side 1000px i stedet for 960?kort sagt, du kan ikke uden at gøre noget tungt ændring til loven.den rammer låse designere i en række begrænsninger.siger kunden vil have en konstruktion, der er mere eller mindre.designeren vil sandsynligvis nødt til at afskaffe den kode, de har skrevet for at nå nye mål.der er endnu et problem, der ikke er blevet afsløret endnu... lige højde kolonner.siden midten kolonner, alle har samme baggrund, de ser ud til at være lige store højder.i fod et dæksblad div er baggrunden bag de 3 søjler.nettet 960, giver ikke dig lige højde kolonner.der er naturligvis en måde, du kan klare det på egen hånd.da vi er fremstilling af prototyper af et ef - design, bruger ikke tid på at tænke over de finere detaljer om, hvordan design vil fungere, når i produktionen.du er kun forsøger at formidle idéer på dette stadium.der er også et andet aspekt af grid - 960 for at tage hensyn til, før de øverste del.nettet 960 afhængig af mellemstore elementer og margener for at skabe en korrekt dimensioneret row.hvis du anvender polstring eller grænser, design osv.).hvis du gør det, du er nødt til at tilpasse størrelsen af div for at afspejle de ændringer.at blive trætte af det.tilpasse størrelsen af elementer i to steder vil altid føre til forvirring og gøre det vanskeligere at opretholde design.når det er sagt.lad os afslutte den øverste del.,,, 4.den øverste del, men heldigvis kan manøvre rundt om samme højde kolonner i den øverste del.da et billede på den ret, som er et sæt højde og bredde, vi kender den anden kolonne er størrelse.skabe blokken virkning ved at tilføje en ny div med en grænse i de eksisterende divs.glem ikke at sætte heights.sæt ikke polstring på divs, fordi det vil ændre bredde af blok og bryde nettet.i stedet fastsætte en margen på et barn element.dette vil ikke ændre den bredde på blokken.anvende en margen til en overensstemmelse element.dette giver den ønskede virkning, og teksten var passende.,, < div klasse = "grid_7 topsection" > < div > < /div > < /div > < div klasse = "grid_5 topsection" > og lt; /div >,, så brug en klasse i stedet for id, fordi topsection klasse er anvendt på to divs.det giver os også mulighed for at ændre de højder, lettere.vælg en højde (dette tal er helt op til dig, og skabe et klasse.,, div.topsection div (grænse: faste 10px&#e5e5e6. højde: 280px;} div.topsection div p {margen: 10px;}, sejt!lad os se fremskridt.,,, klar til at udfylde de to kasser?bare fyld den venstre nogle med en stikprøve tekst.ikke for meget, eller det vil svømme over den kasse.dette skaber et problem i den endelige udformning.hvordan ved du, hvor meget tekst er for meget?for produktionen af designet, designer skal bruge for at skabe en funktion til kun at tillade x antal ord til at stoppe den strøm.tid til at få den plakat billede klar.før at indsætte et billede bestemme dimensioner.hvis du er god matematik og forståelse den model, de sikkert allerede ved, hvor stor den skal være.hvis du ikke gør det, tænd ildflue og gøre i dom.klik på indsigt.tag ned til div i spørgsmål og klik på det.luk layout regning.ildflue vil udvise en nyttig rubrik model reference.se det billede til hjælp.klik på det billede, for fullsize.,,, skærmbillede viser plakat div er 360x280.find et image og skabe en stil.jeg besluttede at lade image fylde hele div (i modsætning til stikprøveplanen.), hvis de ønskede at skabe en 10px margen, sørg for at reducere de dimensioner, som 20px på hver side.,, img&#plakat (bredde: 360px. højde: 280px;}, bør du få det.denne model er fuldført.de er fri til at smide nogle virkelige tekst og ændre det billede,.,,,, 5.ved dine grænser, nu hvor prototypen er færdig, for at gøre status over, hvad der er sket.du har formået at hurtigt prototype af et design.nettet 960 nemt opstår nettet for os.hvor skal i hen herfra?naturligvis vil vi vise kunden og se, hvad de tror.der er et par forbehold.har du prøvet dette design i ie6 eller ie7?nej, skal vi?nej, det er en prototype.dette er, hvordan det ville se ud i produktion.det er naturligt, at en browser særheder, vil blive udarbejdet før produktion.hvad hvis kunderne vil skabe en mere kompleks design?i dette tilfælde skal de hurtigt begynde at se på de grænser, der er fastsat i rammebestemmelserne.hvad nu, hvis udformning skal være flydende eller elastiske?rammerne vil ikke gøre det.du er nødt til at starte fra bunden.husk, at css rammer ikke løse alle dine problemer, men de kan hjælpe med noget.nettet 960 samt andre er gode til at lave prototyper.du kan lige så godt bruge begreberne grid - 960 i produktionen kode, men det er ikke anbefale, at stikke en ramme hele vejen gennem produktion.css rammer er ligesom ethvert instrument, de har deres anvendelsesformål.med det i tankerne, gå ud og prototype.