Share
Grid 960 är en CSS-ram som gör det möjligt för utvecklare att snabbt prototyper mönster. De är utmärkta verktyg för att skapa mock ups. Varför? Eftersom de gör alla tunga lyft kan du få snabbare resultat.
Det låter bra, men hur gör vi det? Det finns många artiklar på internet sprängning eller stödja CSS ramar, men ingen har något innehåll för att hjälpa oerfarna läsare bestämma. Den här är annorlunda. Denna artikel täcker hela prototypprocessen. Tänk dig att du får en design och du behöver en mock up för kunden. Denna artikel förklarar grunderna för Grid 960, planerar nätet för en design och kodar prototypen. Projektering kommer att utnyttja de flesta funktionerna i Grid 960, vilket ger dig en fast kunskapsbas att arbeta med. När du har sett designen nedan, är det dags att lära dig hur Grid 960 fungerar.
Roster 960 fungerar genom att använda klasser genom arv. Roster 960 ger två rader: 12 och 16 kolumner. Huvudbehållaren är alltid 960px bred. Med 960 tillåts de flesta kombinationer av kolonn samtidigt som det är lätt att arbeta med. Vi kommer att använda 12 kolumnen för att koda denna design, men vi kommer inte använda alla 12 kolumnerna. Varje nätcell har en marginal: 0 10px. Detta skapar en rännan på 20px. När du skapar en rad, lägger den totala bredden på alla element upp till 960. Ta en titt på Grid 960s demosida. Du kommer att se ett bra rutnät med alla möjliga kombinationer. Varje nätcell har en klass som anger vilken bredd det kommer att bli. Här är rasten nedåt av kolonnbredderna för ett 12 kolonnnät.
Varje bredd motsvarar ett klassnamn som är utformat så här: grid_X där X är ett tal från ovanstående lista. Om du vill ha ett block med bredd 940 använd klassen grid_12. Hur vet Grid 960 vilken bredd den ska vara? Varje grid_x är en väljare container_Y .grid_X där Y är antingen 12 eller 16 för kolumner. Låt oss dyka in i någon kod. Så här skapar du ett rader med två rader i en 12-kolonncontainer. Låt den första raden vara 940px, och den andra raden innehåller två lika kolumner.
940px
460px
460px
När du skapar en rad i rutnätet, se till att alla barngrid_X-nummer lägger till antalet kolumner du använder. Detta säkerställer rätt bredd. Två grid_6 div s lägger till upp till 12. Du är inte begränsad till samma nummer. Du kan också använda 6, 4 och 2. Där har du det, ett snabbt rutnät redo för innehåll. Nu när du vet hur Grid 960 fungerar, kan vi se hur man skapar mockup.
Att visualisera designens rutnät är enkelt. Det finns en rad för rubrikbilden, en rad för navfältet, en rad med 2 kolumner för rubrikhistorien och affischen, en spacer, 4 kolumner, en spacer, än en sidfot med 3 kolumner. Klicka på bilden för koden.
När du har kontrollerat visuellt, borde du förstå hur man skapar mockupens rutnät. Använd bredden, matcha klassen # s från listan och låt kasta en kod ihop. Kom ihåg att lägga till clearing-diven i slutet av varje rad. Glöm inte att inkludera stilarken som ingår i Grid 960-paketet.
Skelettet är klart. Tiden för att börja överlagra designen. De gröna staplarna är bara divs med bakgrundsfärg och höjd. Navbaren har inte en inställd höjd. Istället kommer det att styras av storleken på länkarna inuti. Glöm inte att lägga till huvudbilden också.
div.spacer bakgrundsfärg: # 8FC73E; höjd: 1em; div # navbar bakgrundsfärg: # 8FC73E; vaddering: 10px 0;
Applicera klassen för att korrigera grid_12 divs och ställa in ID.
Mittenkolumnerna kräver inga effekter. Lägg till lite platshållare text för att fylla i designen. Du kan göra några här. Innan du klarar av den övre delen, flytta dig till sidfoten. I skärmdumpen är fotfoten en solid färg. Du kan inte uppnå detta med den aktuella koden. En wrapper div runt de tre nedre kolumnerna löser problemet. Så du tror, ingen stor sak, bara sätt in en div. Det bryter nätet eftersom Grid 960 bygger på föräldrar och barn att tillämpa stilar (kom ihåg väljaren container_12 .grid_4?) En undergrid löser problemet. Nät 960 möjliggör kapslade nät. Skapa en undergrid genom att lägga till en grid_12 div, lägg sedan grid_4 inuti den. Vid användning av kapslade galler behöver barnelementen specialklasser. Det första barnet behöver en klass "alpha" och det sista barnet en klass &qout;omega "Redigera markeringen för att avspegla ändringarna och tillämpa stilistiska ändringar på sidfoten.
div # footer bakgrundsfärg: # e5e5e6;
Excellent! Nu har footern en solid bakgrundsfärg och du kan justera storlekarna på kolumnerna om det behövs. Lägg till lite dummy-text i kolumnerna för kolumnerna just nu och låt oss flytta till navbar. Navbar är en enkel oorderad lista. Lägg till några länkar och korrekt styling.
div # navbar ul list-style: none; display: block; marginal: 0 10px; div # navbar ul li float: left; marginal: 0 1.5em; typsnitt: fet 1em Arial;
Ljuv. Sidan kommer verkligen samman. Allt som finns kvar skapar blockeffekterna på det övre avsnittet. Det här är mer syndigt än det verkar. Innan vi dyker in måste du inse några saker om Grid 960 och CSS-ramarna i allmänhet.
Starka läsare kan ha insett någonting. Sidan är extremt stel. Allt har en definierad storlek och förändring av storleken skapar problem eller kan bryta mot designen. Designers offrar också några av våra designmål eftersom vad Grid 960 tillåter. Exempelvis var provkonstruktionen 1000px bred. Grid 960 skapar bara grid 960px bred, så den extra storleken går förlorad. Vad händer om du vill göra din sida 1000px istället för 960? Kort sagt, du kan inte utan att göra någon kraftig ändring av koden. Ramverket låser konstruktörer i en uppsättning begränsningar. Säg att klienten vill ha en design som är bredare eller tunnare. Designern kommer sannolikt att skrapa koden som de har skrivit för att uppnå de nya målen. Det finns ett annat problem som ännu inte har avslöjats - lika höga kolumner. Eftersom mittenkolumnerna delar samma bakgrund, verkar de vara lika höga. I sidfot sätter en wrapper div en bakgrund bakom de 3 kolumnerna. Roster 960 ger dig inte lika höga kolumner. Det finns självklart ett sätt att du kan uppnå detta på egen hand. Eftersom vi prototyper en design, spendera vi inte tid på att oroa oss för de finare detaljerna om hur designen fungerar när den är i produktion. Du försöker bara förmedla idéerna på detta stadium. Det finns också en annan aspekt av Grid 960 att ta hänsyn till innan du klarar av toppsektionen. Grid 960 bygger på stora element och marginaler för att skapa en riktigt stor rad. Om du applicerar vaddering eller gränser, bryter designen. Om du gör det måste du justera storleken på div för att spegla ändringarna. Var trött på detta. Justera storlekarna på element på två ställen leder alltid till förvirring och gör konstruktionen svårare att behålla. Med det sagt. Låt avsluta toppsektionen.
Lyckligtvis kan du manövrera runt lika höga kolumner i det övre avsnittet. Eftersom bilden till höger som en bestämd höjd och bredd vet vi den andra kolumnens storlek. Skapa blockeffekten genom att lägga till en ny div med en kant inuti de befintliga delarna. Glöm inte att ställa in höjderna. Ställ inte vaddering på divs eftersom det kommer att ändra bredden på blocket och bryta gallret. Ange i stället en marginal på ett barnelement. Detta ändrar inte bredden på blocket. Applicera en marginal till ett inline-element. Detta skapar önskad effekt och texten wraps för att passa.
Använd en klass i stället för ID eftersom TopSection-klassen tillämpas på två divs. Detta gör det också möjligt för oss att ändra höjderna lättare. Välj en höjd (det här numret är verkligen upp till dig) och skapa en klass.
div.topSection div border: solid 10px # e5e5e6; höjd: 280px; div.topSection div p margin: 10px;
Häftigt! Låt oss se framstegen.
Klar att fylla de två rutorna? Fortsätt och fyll i den vänstra en med några exempeltext. Gör inte för mycket eller det kommer att rinna över lådan. Detta skapar ett potentiellt problem i den slutliga designen. Hur vet du hur mycket text är för mycket? För produktionsdesignen skulle designaren behöva skapa en funktion för att bara tillåta X mängd ord för att stoppa överflödet. Tid för att få affischbilden klar. Innan du lägger in en bild bestämma dimensionerna. Om du är bra en matte och förstå boxmodellen vet du förmodligen redan hur stor den ska vara. Om du inte gör det, skjuter du upp FireBug och tar en topp i DOM. Klicka på Inspektera. Gå ner till den aktuella diven och klicka på den. Öppna fliken Layout. FireBug kommer att visa en användbar referensmodellreferens. Kolla in bilden för hjälp. Klicka på bilden för full storlek.
Skärmdumpen visar affischen div är 360x280. Hitta en bild och skapa en stil. Jag bestämde mig för att låta bilden fylla hela diven (till skillnad från i provdesignen.) Om du ville skapa en 10px-marginal, var noga med att minska dimensionerna med 20px på varje sida.
img # poster width: 360px; höjd: 280px;
Du borde få det här. Mockupen är klar. Ta gärna in någon riktig text och ändra bilden runt.
Nu när prototypen är färdig, för att göra förråd vad som har gjorts. Du har lyckats prototyper en design snabbt. Grid 960 skapade enkelt nätet för oss. Var ska man åka härifrån? Naturligtvis skulle vi visa kunden och se vad de tycker. Det finns dock några försiktighetsåtgärder. Har du testat den här designen i IE6 eller IE7? Nej, borde vi? Nej. Det här är en prototyp. Så här skulle det se ut i produktionen. Det är naturligt att alla webbläsares quirks skulle utarbetas före produktion. Vad händer om kunderna vill skapa en mer komplex design? I det här fallet börjar du snabbt se ramarna för ramverket. Vad händer om designen måste vara flytande eller elastisk? Ramverket kommer inte att göra det. Du måste börja från början. Kom ihåg att CSS-ramar inte löser alla dina problem, men de hjälper till med vissa. Nät 960 liksom andra är bra för att kasta samman prototyper. Du kan lika bra använda begreppen Grid 960 i produktionskoden, men det rekommenderas inte att hålla fast med en ram hela vägen genom produktion. CSS-ramar är precis som alla verktyg, de har sina användningsområden. Med det i åtanke, gå vidare och prototyp!
Accentsconagua