Når Collis lanserte dette nettstedet og spurte leserne om opplæringsforespørsler, var det vanlig å ha en "magazine temaer" for blogger. Denne opplæringen fokuserer på den første delen av prosessen: Bruke et CSS-nett til design for å prototype en startside mal.
Demo og Kilde
Du kan se en demonstrasjon av denne opplæringen ved å klikke på "Demo" -knappen nedenfor. For kilden inneholder ikke ZIP-filnedlastingen CSS-koden.
Hva vi bygger
Fokuset her er på et nettside design eksempel ved hjelp av Grenseoppsett CSS grid rammeverket, basert på min tidligere Which CSS Grid Framework artikkel. Du kan imidlertid bruke samme prosess til et CSS-gridramme du foretrekker. Hvis du ikke liker å bruke rutenettverk på produksjonssteder, kan du alltid erstatte CSS-koden og tilhørende HTML-klasser med dine egne.
Sidedesignet som er vist nedenfor, er påvirket av mange WordPress-magasinetemaer, slik at du kanskje ser kjente designelementer, selv om dette ikke er en WP-spesifikk opplæring.
En typisk grafisk designprosess
La meg påpeke at jeg bare er en "lenestol", selvlærte designer, og min minimalistiske natur vil gjenspeile min mangel på riktig opplæring. Forhåpentligvis kan du fokusere på det generelle griddesign og kodingsprosessen, som er basert på geometriske elementer, ikke på stil.
En typisk prosessprosess for nettsider er å starte med en skisse på papir, etterfulgt av en grafisk mockup i Photoshop eller fyrverkeri, etc. Slip inn alle designelementene, plassert omtrent hvor du vil ha dem. Senere, i CSS-gridbasert designfase, bestemmer du nøyaktige målinger.)
FilmPundits er et nettsted eid av en venn som jeg bygger opp. Mockupet nedenfor er en av flere "FilmScenic" -design som jeg har prototypisert. Filmemnet gir seg bare til dette eksempelet på grunn av widescreen-stilbilder.
Hvis du vil bruke en lignende design for ikke-filmemner, juster du bildestørrelsene for å få dem til å se mindre widescreen-y. For designbehovene mine må det største bildet ha størst effekt. Så sammensetningen er plassert litt utenfor sentrum, horisontalt. Dette gjør hele siden litt mer dynamisk og trekker øyet til de viktigste elementene.
La oss se på "guide" linjene nedenfor, som danner designruten for mockupen over.
Bruk din favorittgrafikkprogramvare til å snu styrelinjene til et "skive" -kart:
Hvis du ikke bruker et CSS-nett, vil du enten manuelt kode nettsiden og CSS-filen på dette tidspunktet, eller la programvaren generere koden for deg.
CSS Grid-Based Design Prosess
Nå som vi har en grafisk designmockup, må vi oversette det til HTML og CSS-kode. Å gjenta, ved hjelp av et CSS-gridramme, øker prototypeprosessen. Du kan måle designelementene i pikselbredder og finjustere for å passe til CSS-nettet som du bruker. (Jeg får ikke mye inn i vertikal posisjonering fordi jeg pleier å kontrollere det med bildehøyder og topp / bunnmarginer.)
Her er prosessen jeg vanligvis bruker til å bruke CSS-nett, som behandler den grafiske designmockupen som en side. Du må justere dette for å dekke dine behov.
På et stykke papir tegner du et avgrensende rektangel - landskap eller portrett - som representerer den generelle formen på sidedesignet ditt.
Del avgrensende rektangel i grove deler: header, bunntekst, hovedinnhold, sidebjelke.
Skille de tøffe delene videre, etter behov.
Velg ditt CSS-gridramme, enten det er forhåndsbygd eller tilpasset. Jeg bruker Blueprint. Du kan bruke dette ett-siders PDF-dokumentet som en "jukseark".
Bestem på maksimal sidebredde. Jeg har brukt standardblokkbredden på 950 piksler, som er dannet av 24 kolonner på 30 px bred, og 10 px brede takrenner mellom kolonnene (24x30 - 10 = 950 px).
Mock designen din i raster grafikk programvare (Photoshop, fyrverkeri, etc.) hvis du vil. Jeg pleier å hoppe over dette trinnet fordi. Merk at de fleste CSS-gridrammer inkluderer et PNG- eller JPG-nett som du kan legge over som en guide. Jeg brukte ikke det rutenettet i den grafiske designprosessen som er diskutert ovenfor.
Bestem minimumbredder for dine ulike seksjoner.
Jeg ønsket at sidebjørnen skulle være minst 190 px bred (5 Blueprint-kolonner), men forlot dette til sist, for å sikre at de tre små funksjonsblokkene nederst til venstre hadde prioritet.
Den venstre siden av "features" -blokken skal ha en god bit hvit plass (> = 30 px, siden det er bredden på en kolonne i Blueprint). Etter å ha twiddling med de høyere prioriterte seksjonene, slo jeg meg på 3 kolonner = 110 px bred.
De tre små funksjonene må ha samme bredde. Alt mindre enn 190 px bredt ville ikke ha samme visuelle innvirkning. Alt mer enn 190 px ville ikke gi nok plass til det hvite rommet til venstre. (Hvis jeg hadde tid og tilbøyelighet, kunne jeg ha opprettet en skreddersydd rammeverk som ville gi finere kontroll, eller brukt en større bredde-side helt.)
Den store funksjonens bildebredde (590 px = 15 kolonner) blir automatisk bestemt, siden den må spenne bredden på alle tre mindre funksjonsblokkene. Dens høyde / breddeforhold er større enn for de mindre funksjonene, for visuell påvirkning og dermed å indikere at det er "viktigere" enn andre sideelementer. Alle disse bildene gir en widescreen-lignende appell, til tross for forskjellige høyde / breddeforhold.
I delen "Nylige innlegg" i sidefeltet blir bildebredden tvunget til 70 px (2 kols) - i stedet for mine ønskede 48x48 tommer - som et resultat av hvilken horisontal skjerm fast eiendom er igjen. (Her er der et CSS-gridramme kan være et ansvar: tvunget størrelser.) Til slutt skjønner selv de små miniatyrbildene lett på "widescreen" -temaet.
Eventuelle tekstblokker som er for brede, kan enkelt løstes ved hjelp av en mindre skrift - helst ved hjelp av en skriftfamilie som fortsatt kan leses med redusert størrelse.
Bestem elementhøyder der det er mulig. Tilfredsstillende høydepreferanser har mindre betydning for meg, men jeg minimerte plasseringen av designelementene vertikalt, slik at den overordnede sidedesignen ekko en "widescreen" -følelse. I hvert fall for denne hjemmesiden malte jeg ikke at sidens høyde skulle være så stor at de fleste lesere måtte rulle nedover. Det ville ødelegge "widescreen" effekten.
Menyen er bare en plassholder og ikke dekket her i kode. Den spenner over hele innholdsbredden på 710 px (18 kols).
Høyden på det store funksjonsbildet ble bestemt av oppsettet. Dens proporsjoner bør ligne en "bred skjerm".
De små funksjonene er en nedskalert versjon av de jeg bruker på et annet filmsted. Originalerne er 470 w x 175 h. Siden det er bare 190 px bred for å jobbe med, skaleres et originalbilde med den resulterende høyden 71 px, som jeg har trimmet her til 70 px. Den resulterende andelen gir fortsatt en widescreen-følelse, men ekko det faktum at disse blokkene ikke er like viktige som den store funksjonen bildet.
Høyden på teksten til hver liten funksjonsseksjon er definert av fire vertikale seksjoner: filmtittel, postdato, postforfatter og beskrivelse, samt flere "bunngrenser". (I CSS-koden senere ser du at standardlinjens høyde er 115%.)
Høyden på elementene i blokkene Nylige innlegg er minst 49 px, men de er variable, avhengig av lengden på et innleggs tittel.
Øverst i nyhetsseksjonen står ikke helt opp til toppen av de små funksjonene. Det er måter å oppnå dette på, selv om jeg ikke har dekket det her.
Bestem de endelige breddene til hvert element, factoring i gridrammens innstillinger. Du kan bruke papirskisse eller grafikkmockup som hjelpemiddel.
Slå opp din grafiske mockup, hvis du bruker en, og lagre segmenter til bildefiler.
Legg til de nødvendige Blueprint div-kodene og klassen attributter for å støtte designen din.
Test og tweak til du har en endelig design du er fornøyd med.
Hvis du vil, ta ut rammebetingelsene. Dette betyr å erstatte det eksplisitte rammeverket (HTML, CSS) med en implisitt - som for meg høres ut som mye unødvendig arbeid (men det er bare meg). I det minste, i produksjon, bruk den "komprimerte" versjonen av Blueprint-filene.
Gå live.
Hvis du er en ekte designer, i motsetning til meg selv, vil du sannsynligvis gjøre det meste av designmockupen i din favorittgrafikredigeringspakke. Jeg foretrekker vanligvis å skisse på papir, deretter mocke på fly med HTML og CSS (både Blueprint og egendefinerte klasser), som omtalt nedenfor.
Grid-Based Coding Process
Nå som du har en mockup av sidelayout, kan du starte koding i HTML og CSS. Her er en grov prosess av de faktiske kodingstrinnene:
Inkluder de nødvendige Blueprint CSS referanser og IE betinget kode i hode element av websiden din.
I kroppsmerket, start med a div hvem sin klasse Attributtet er satt til "container". Dette er en Blueprint-kode for å spesifisere et beholderområde for designelementer. Denne delen av hele siden. Hvis du vil at rutenettet skal være synlig, kan du også legge til verdien "showgrid" til klasse attributt av denne div.
Begynn å raffinere blokkene i mindre seksjoner ved hjelp av HTML-innhold innpakket i div koder, samt CSS-kontrollerte rektangler for bilder. For å spesifisere bredder, bruk leksikonene "span-x". Legg til i alle egendefinerte CSS-klasser du trenger. Jeg legger vanligvis inn overflødige egendefinerte blokker (med en grå bakgrunn), og fjern dem da jeg har min faktiske design implementert i kode.
Du kan fortsette å forfine hver ujevn blokk, eller hoppe til neste trinn.
Lag eventuelle logoer, ikoner eller bannere som ikke allerede var opprettet tidligere.
Bytt ut tøffe blokker med egnede designelementer. Legg til riktig div koder, eventuelle gjenværende Blueprint klasse verdier.
Eksempel HTML og CSS kode
For å gjøre de ovennevnte prosessene tydeligere, la oss se på noen egentlige HTML- og CSS-kodefragmenter for filmprodukteksemplet som ble vist tidligere. Vær oppmerksom på at jeg har gått ekstrem med ikke-Blueprint div-kodene for klarhet i denne opplæringen. Du vil sannsynligvis ønske å fjerne eventuelle overskytende klasser, eventuelt slå sammen nestede div-koder.
Vær også oppmerksom på at jeg har brukt noen "stygge" CSS-klassenavn for ikke-Blueprint-skrifter for klarhet. De er alle foran "fs-", etterfulgt av et funksjonelt navn, for å gjøre det klart hva jeg bruker dem til.
Jeg har kodet fem trinn for denne opplæringen, for å illustrere forfiningsprosessen i HTML og CSS. Normalt vil jeg komprimere fase 1-3.
Blank mal med Blueprint "container" klasse og tom CSS fil.
Grov blokkeringstrinn 1.
Grov blokkering 2. Avgrens ru blokker fra trinn 1.
Grov blokkeringsfase 3. Endelig blokkforbedring til nødvendige seksjoner.
Endelig nettside og CSS.
Disse trinnene vil bli tydeligere i seksjonene nedenfor.
Share
Accentsconagua