När Collis lanserade den här webbplatsen och frågade läsare för instruktionsförfrågningar, var en vanlig en "magazine teman" hur-till för bloggplattformar. Denna handledning fokuserar på den första delen av processen: tillämpa ett CSS-rutnät till designen för att prototyper en mall för hemsidan.
Demo och Source
Du kan se en demonstration av denna handledning genom att klicka på "Demo" knappen nedan. För källan innehåller inte ZIP-filnedladdningen CSS-koden.
Vad vi bygger
Fokuset här är på ett webbdesign-exempel med hjälp av CSS-ramramen för Blueprint, baserat på min tidigare CSS Grid Framework-artikel. Du kan dock tillämpa samma process på alla CSS-rutor som du föredrar. Om du inte gillar att använda gallerramar på produktionsplatser kan du alltid ersätta CSS-koden och motsvarande HTML-klasser med din egen.
Siddesignen som visas nedan påverkas av många WordPress-tidskrifter, så du kanske ser bekanta designelement, men det här är inte en WP-specifik handledning.
En typisk grafisk designprocess
Låt mig påpeka att jag bara är en "fåtölj", självlärd designare, och min designs minimalistiska natur kommer att återspegla min brist på lämplig träning. Förhoppningsvis kan du fokusera på den allmänna rutnadesigneringen och kodningsprocessen, som bygger på geometriska element, inte på stil.
En typisk designprocess för webbsidor är att börja med en skiss på papper, följt av en grafisk mockup i Photoshop eller Fireworks, etc. Släpp i alla designelement, placerade ungefär där du vill ha dem. Senare, i CSS-nätbaserad designfas bestämmer du exakta mätningar.)
FilmPundits är en webbplats som ägs av en kompis som jag bygger upp. Mockupen nedan är en av flera "FilmScenic" -designer som jag har prototypat. Filmens ämne lutar sig bara till det här exemplet på grund av widescreen-stilbilderna.
Om du vill använda en liknande design för icke-filmämnen, justera bildhöjderna så att de ser mindre widescreen-y. För mina designbehov måste den största bilden ha störst effekt. Så kompositionen är placerad något utanför centrum, horisontellt. Detta gör hela sidan lite mer dynamisk och gör ögat till de viktigaste elementen.
Låt oss titta på "guide" -linjerna nedan, som bildar designnätet för mockupen ovan.
Använd din favoritgrafikprogramvara för att vrida styrlinjerna till en "skiva" -karta:
Om du inte använder ett CSS-nät, skulle du antingen manuellt koda din webbsida och CSS-fil vid den här tiden, eller låta din programvara generera koden för dig.
CSS-nätbaserad designprocess
Nu när vi har en grafisk designmockup, behöver vi översätta det till HTML och CSS-kod. Att upprepa, med hjälp av ett CSS-nät ramar fram prototypprocessen. Du kan mäta dina designelement i pixelbredder och finjustera för att passa CSS-nätet som du använder. (Jag får inte mycket in i vertikal positionering eftersom jag tenderar att kontrollera det med bildhöjder och topp / bottenmarginaler.)
Här är den process som jag brukar använda för att tillämpa CSS-nät, som behandlar den grafiska designmockupen som en sida. Du måste justera detta så att det passar dina behov.
På en bit papper ritar du en avgränsande rektangel - landskap eller porträtt - som representerar den allmänna formen på din siddesign.
Avdela den begränsande rektangeln i grova sektioner: rubrik, sidfot, huvudinnehåll, sidofält.
Skilj de grova sektionerna vidare, efter behov.
Välj ditt CSS-rutnätverk, oavsett om det är förbyggt eller anpassat. Jag använder Blueprint. Du kan använda det här ensidiga PDF-dokumentet som ett "fuskark".
Bestäm på max sidbredd. Jag har använt standardbredden för Blueprint på 950 pixlar, som är formad av 24 kolumner på 30 px breda och 10 px breda rännor mellan kolumnerna (24x30 - 10 = 950 px).
Mock upp din design i raster grafikprogram (Photoshop, Fireworks, etc.) om du vill. Jag brukar springa över det här steget eftersom. Observera att de flesta CSS-gridramar innehåller ett PNG- eller JPG-galler som du kan överlappa som en guide. Jag använde inte det nätet i den grafiska designprocessen som diskuterats ovan.
Bestäm minsta bredd för dina olika avsnitt.
Jag ville att sidofältet skulle vara minst 190 px bredt (5 Blueprint-kolumner), men lämnade det tills sista, för att säkerställa att de tre små funktionsblocken längst ner till vänster hade prioritet.
Den vänstra sidan av "funktioner" -blocket ska ha en ganska liten vit yta (> = 30 px, eftersom det är bredden på en kolumn i Blueprint). Efter att ha twiddling med sektorerna med högre prioritet bestämde jag mig om 3 kolumner = 110 px breda.
De tre små funktionerna måste ha samma bredd. Något mindre än 190 px bred skulle inte ha samma visuella inverkan. Något mer än 190 px skulle inte lämna tillräckligt med utrymme för det vita utrymmet till vänster. (Om jag hade tid och lutning, kunde jag ha skapat en anpassad ritning ram som skulle ge finare kontroll, eller använde en större bredd sida helt och hållet.)
Den stora funktionens bildbredd (590 px = 15 kolumner) bestäms automatiskt, eftersom den måste spänna bredden på alla tre mindre funktionsblock. Dess förhållande höjd / bredd är större än för de mindre funktionen bilderna, för visuell påverkan och därmed att indikera att det är "viktigare" än andra sidelement. Alla dessa bilder ger en widescreenliknande överklagande, trots olika förhållanden mellan höjd och bredd.
I avsnittet "Senaste inlägg" i sidofältet tvingas bildbredden till 70 px (2 kolumner) - i stället för mina önskade 48x48 tummar - som en följd av vilken horisontell skärmfastighet som finns kvar. (Här är en CSS-gridram kan vara en skuld: tvångsstorlekar.) I slutet ändras dock de små små miniatyrerna lätt vid "widescreen" -temat.
Eventuella textblock som är för breda kan enkelt löstas genom att använda en mindre typsnitt - helst med en typsnitt som fortfarande kan läsas i den mindre storleken.
Bestäm elementhöjder om möjligt. Tillfredsställande höjdpreferenser är mindre av intresse för mig, men jag minimerade placeringen av designelement vertikalt, så att den övergripande siddesignen echoes en "widescreen" känsla. Åtminstone för denna hemsida mall, ville jag inte att sidhöjden skulle vara så stor att de flesta läsare skulle behöva rulla ner. Det skulle förstöra "widescreen" -effekten.
Menyn är bara en platshållare och omfattas inte här i koden. Den spänner över hela "innehållsbredden" på 710 px (18 kols).
Höjden på den stora funktionen avbildades av layouten. Dess proportioner bör likna en "wide screen".
De små bilderna är en nedskalad version av de jag använder på en annan filmplats. Originalen är 470 w x 175 h. Eftersom det bara är 190 px brett att arbeta med, gör en originalbildsskalning den resulterande höjden 71 px, som jag har trimmat här till 70 px. Den resulterande andelen ger fortfarande en bredbilds-känsla, men echo det faktum att dessa block inte är lika viktiga som den stora funktionen bilden.
Höjden på texten i varje liten funktion sektion definieras av fyra vertikala sektioner: film titel, postdatum, postförfattare och beskrivning, samt flera "nedre gränser". (I CSS-koden senare ser du att standardlinjens höjd är 115%.)
Höjden på objekten i blocket Senaste inlägg är minst 49 px, även om de varierar beroende på längden på ett inläggs titel.
Överst i sektionen Nyheter står inte helt upp till toppen av de små funktionerna. Det finns sätt att uppnå detta, även om jag inte har täckt det här.
Bestäm de slutliga bredderna för varje element, factoring i ditt rutnätverks inställningar. Du kan använda din pappersskissa eller grafikmockup som ett hjälpmedel.
Skär upp din grafiska mockup, om du använder en och spara segment till bildfiler.
Lägg till nödvändiga Blueprint div-taggar och klassattribut som stödjer din design.
Test och tweak tills du har en slutlig design som du är nöjd med.
Om du vill, ta bort ramschemat. Det innebär att ersätta den explicit ram (HTML, CSS) med en implicit en - vilket för mig låter som mycket onödigt arbete (men det är bara jag). I åtminstone, i produktion, använd den "komprimerade" versionen av Blueprint-filerna.
Gå och lev.
Om du är en riktig designer, till skillnad från mig själv, kommer du förmodligen att göra det mesta av designmockupen i ditt favoritgrafikredigeringspaket. Jag föredrar oftast att skissa på papper, sedan mocka i flygning med hjälp av HTML och CSS (både Blueprint och anpassade klasser), som diskuteras nedan.
Nätbaserad kodningsprocess
Nu när du har en mockup av din sidlayout kan du börja kodning i HTML och CSS. Här är en grov process av de faktiska kodningsstegen:
Inkludera nödvändiga CSS-referenser för Blueprint och IE villkorskod i huvud del av din webbsida.
I kroppslabeln, börja med a div vars klass attributet är inställt på "behållare". Detta är en Blueprint-kod för att ange ett behållarområde för designelement. Detta avsnitt av hela sidan. Om du vill att rutnätet ska vara synligt, för att hjälpa dig att placera element på rätt sätt, lägg till värdet "showgrid" till klass attribut av denna div.
Börja raffinera blocken i mindre sektioner med hjälp av HTML-innehåll som är inslaget i div taggar, samt CSS-kontrollerade rektanglar för bilder. För att ange bredder, använd klassen "span-x". Lägg till i några anpassade CSS-klasser som du behöver. Jag brukar lägga in överflödiga anpassade block (med grå bakgrund), ta bort dem sedan jag har min verkliga design implementerad i kod.
Du kan fortsätta att förfina varje grovt block eller hoppa till nästa steg.
Skapa alla nödvändiga logotyper, ikoner eller banderoller som inte redan skapades tidigare.
Byt ut grova block med verkliga designelement. Lägg till lämpligt div taggar, eventuella återstående Blueprint klassvärden.
Exempel HTML och CSS-kod
För att göra de ovanstående processerna klarare, låt oss titta på några faktiska HTML- och CSS-kodfragment för det exemplar av filmplatsdesign som tidigare visats. Tänk på att jag har gått extrema med de icke-Blueprint div-taggarna för tydlighet i denna handledning. Du kommer noga att vilja ta bort eventuella överskottsklasser, eventuellt slå samman nestade div-taggar.
Observera också att jag har använt vissa "fula" icke-Blueprint CSS-klassnamn för tydlighet. De föregås av "fs-", följt av ett funktionellt namn för att klargöra vad jag använder dem för.
Jag har kodat fem steg för denna handledning för att illustrera förfiningsprocessen i HTML och CSS. Normalt skulle jag komprimera steg 1-3.
Blank mall med Blueprint "container" -klass och tom CSS-fil.
Grovt blockerande steg 1.
Grovt blockerande stadium 2. Förfinera grova block från steg 1.
Grovt blockerande stadium 3. Slutlig blockförfining i nödvändiga sektioner.
Slutlig webbsida och CSS.
Dessa steg kommer att bli tydligare i avsnitten nedan.
Share
Accentsconagua