Toen Collis deze site lanceerde en lezers om tutorial-verzoeken vroeg, was er een algemene voor een "magazine-thema's" -instructie voor blogplatforms. Deze zelfstudie concentreert zich op het eerste deel van het proces: het toepassen van een CSS-raster op het ontwerp om een startpagina-sjabloon te prototypen.
Demo en bron
Je kunt een demo van deze tutorial bekijken door hieronder op de knop "Demo" te klikken. Voor de bron bevat de download van het ZIP-bestand geen Blueprint CSS-code.
Wat we bouwen
De focus ligt hier op een voorbeeld van een webpaginaontwerp met behulp van het Blueprint CSS grid framework, gebaseerd op mijn eerdere Which CSS Grid Framework-artikel. U kunt echter hetzelfde proces toepassen op elk CSS-rasterkader dat u verkiest. Als u het gebruik van rasterkaders op productiesites niet leuk vindt, kunt u de CSS-code en de bijbehorende HTML-klassen altijd vervangen door uw eigen CSS-code.
Het onderstaande pagina-ontwerp wordt beïnvloed door verschillende WordPress-tijdschriftthema's, dus u kunt bekende ontwerpelementen zien, hoewel dit geen WP-specifieke zelfstudie is.
Een typisch grafisch ontwerpproces
Laat ik erop wijzen dat ik slechts een 'fauteuil' ben, autodidactisch ontwerper, en de minimalistische aard van mijn ontwerp zal mijn gebrek aan goede training weerspiegelen. Hopelijk kunt u zich daarmee concentreren op het algemene ontwerp en coderingsproces van het raster, dat gebaseerd is op geometrische elementen, niet op stijl.
Een typisch ontwerpproces voor webpagina's is om te beginnen met een schets op papier, gevolgd door een grafische mockup in Photoshop of Fireworks, enz. Laat alle ontwerpelementen vallen die zich op de plek bevinden waar u ze wilt hebben. Later, in de CSS grid-gebaseerde ontwerpfase, bepaalt u de exacte metingen.)
FilmPundits is een site die eigendom is van een vriend die ik aan het opbouwen ben. Het onderstaande mockup is een van de verschillende "FilmScenic" -ontwerpen die ik heb geprototypeerd. Het onderwerp film leent zich gewoon voor dit voorbeeld vanwege de beelden in breedbeeldstijl.
Als u een soortgelijk ontwerp wilt gebruiken voor niet-filmonderwerpen, past u de beeldhoogten aan zodat ze er minder widescreen-y uitzien. Voor mijn ontwerpbehoeften moet de grootste afbeelding de meeste impact hebben. Dus de compositie bevindt zich iets uit het midden, horizontaal. Dit maakt de hele pagina een beetje dynamischer en trekt de aandacht naar de belangrijkste elementen.
Laten we de onderstaande 'gids'-lijnen bekijken die het ontwerpraster vormen voor de bovenstaande mockup.
Gebruik uw favoriete grafische software om de hulplijnen in een "plak" -kaart te veranderen:
Als u geen CSS-raster gebruikt, codeert u op dit moment uw webpagina en CSS-bestand handmatig, of laat uw software de code voor u genereren.
CSS Grid-Based Design Process
Nu we een grafisch ontwerpmodel hebben, moeten we dat vertalen in HTML- en CSS-code. Om nog maar eens te herhalen, versnelt het gebruik van een CSS grid framework het prototypingproces. U kunt uw ontwerpelementen in pixelbreedten en finetune meten, zodat ze passen bij het CSS-raster dat u gebruikt. (Ik kom niet veel in verticale positionering omdat ik de neiging heb om dat te regelen met beeldhoogten en boven / onder marges.)
Hier is het proces dat ik meestal gebruik om CSS-rasters toe te passen, die de mockup voor grafisch ontwerpen als een terzijde behandelen. U moet dit aanpassen aan uw behoeften.
Teken op een vel papier een begrenzende rechthoek - landschap of portret - die de algemene vorm van uw paginaontwerp vertegenwoordigt.
Verdeel de begrenzingsrechthoek in ruwe secties: koptekst, voettekst, hoofdinhoud, zijbalk.
Verdeel de ruwe secties verder, indien nodig.
Kies uw CSS-rasterframe, of het nu voorgebouwd of op maat is. Ik gebruik Blueprint. U kunt dit PDF-document van één pagina gebruiken als een "spiekbriefje".
Bepaal de maximale paginabreedte. Ik heb de Blueprint standaardpaginabreedte van 950 pixels gebruikt, die is samengesteld uit 24 kolommen van elk 30 px breed en 10 px brede goten tussen kolommen (24x30 - 10 = 950 px).
Bespreek uw ontwerp in grafische rastersoftware (Photoshop, Fireworks, enz.) Als u dat wilt. Ik heb de neiging om deze stap over te slaan omdat. Merk op dat de meeste CSS-rasterwerken een PNG- of JPG-raster bevatten dat u als een overlay kunt plaatsen. Ik heb dat raster niet gebruikt in het hierboven besproken grafische ontwerpproces.
Bepaal de minimale breedte voor uw verschillende secties.
Ik wilde dat de zijbalk minimaal 190 px breed was (5 Blueprint-kolommen), maar dit tot de laatste keer heeft overgelaten om ervoor te zorgen dat de drie kleine functieblokken linksonder voorrang hadden.
De linkerkant van het "functies" -blok zou een redelijk beetje witruimte moeten hebben (> = 30 px, omdat dat de breedte is van één kolom in Blueprint). Na twiddling met de secties met hogere prioriteit, vestigde ik me op 3 kolommen = 110 px breed.
De drie kleine functiesblokken moeten dezelfde breedte hebben. Iets minder dan 190 px breed zou niet dezelfde visuele impact hebben. Alles met meer dan 190 px zou niet genoeg ruimte laten voor de witte ruimte aan de linkerkant. (Als ik de tijd en de neiging had, had ik een aangepast Blueprint-raamwerk kunnen maken dat een fijnere controle zou geven of een pagina met een grotere breedte zou gebruiken.)
De breedte van de grote functieafbeelding (590 px = 15 kolommen) wordt automatisch bepaald, omdat deze de breedte van alle drie de kleinere functieblokken moet overbruggen. De hoogte / breedte-verhouding is groter dan voor de kleinere functie-afbeeldingen, voor visuele impact en dus om aan te geven dat deze "belangrijker" is dan andere pagina-elementen. Al deze afbeeldingen geven een breedbeeld-achtige aantrekkingskracht, ondanks verschillende verhoudingen in hoogte / breedte.
In de sectie "Recente berichten" van de zijbalk wordt de breedte van de afbeelding geforceerd naar 70 px (2 cols) - in plaats van mijn gewenste 48x48 duimen - als gevolg van wat horizontaal schermvast is. (Hier is waar een CSS rasterframe een verplichting kan zijn: geforceerde formaten.) Uiteindelijk wijzen zelfs de kleine miniaturen licht op het "breedbeeld" -thema.
Tekstblokken die te breed zijn, kunnen eenvoudig worden gecorrigeerd door een kleiner lettertype te gebruiken - bij voorkeur een lettertype-familie die nog steeds leesbaar is met een kleiner formaat.
Bepaal elementhoogten waar mogelijk. Het voldoen van de hoogtevoorkeuren is voor mij minder belangrijk, maar ik heb de plaatsing van ontwerpelementen verticaal geminimaliseerd, zodat het algemene paginaontwerp een "breedbeeld" -gevoel weerkaatst. In ieder geval voor deze startpagina-sjabloon, wilde ik niet dat de pagina-hoogte zo groot was dat de meeste lezers naar beneden moesten scrollen. Dat zou het "breedbeeld" -effect verpesten.
Het menu is slechts een tijdelijke aanduiding en wordt hier niet in de code behandeld. Het omvat de volledige "content" -breedte van 710 px (18 cols).
De hoogte van het grote functiebeeld werd bepaald door de lay-out. De verhoudingen zouden moeten lijken op een "breed scherm".
De afbeeldingen met kleine functies zijn een verkleinde versie van die ik gebruik op een andere filmsite. De originelen zijn 470 x 175 uur. Aangezien er slechts 190 px breed is om mee te werken, wordt door het schalen van een originele afbeelding de resulterende hoogte 71 px, die ik hier heb bijgesneden tot 70 px. De resulterende verhouding geeft nog steeds een breedbeeldgevoel, maar weerspiegelt het feit dat deze blokken niet zo belangrijk zijn als het grote functiebeeld.
De hoogte van de tekst van elke kleine functie-sectie wordt bepaald door vier verticale secties: filmtitel, datum van de post, auteur en beschrijving van de post, evenals verschillende "ondergrenzen". (In de CSS-code later ziet u dat de standaardlijnhoogte 115% is.)
De hoogte van de items in het blok Recente berichten is minimaal 49 px, hoewel ze variabel zijn, afhankelijk van de lengte van de titel van een bericht.
De bovenkant van de Nieuws-sectie komt niet helemaal overeen met de top van de kleine functies. Er zijn manieren om dit te bereiken, hoewel ik dat hier niet heb behandeld.
Bepaal de uiteindelijke breedte van elk element, rekening houdend met de instellingen van uw rasterframe. U kunt uw papieren schets of grafische mockup gebruiken als hulpmiddel.
Snijd uw grafische mockup op, als u er een gebruikt en sla segmenten op in afbeeldingsbestanden.
Voeg de benodigde Blueprint div-tags en klassekenmerken toe om uw ontwerp te ondersteunen.
Test en knijp totdat je een definitief ontwerp hebt waarmee je tevreden bent.
Als je wilt, haal je het Blueprint-framework eruit. Dit betekent dat het expliciete framework (HTML, CSS) moet worden vervangen door een impliciet framework - wat voor mij klinkt als een hoop onnodig werk (maar dat ben ik alleen). Gebruik in de productie de gecomprimeerde versie van de Blueprint-bestanden.
Ga leven.
Als u een echte ontwerper bent, zult u waarschijnlijk, in tegenstelling tot ik, de meeste van de ontwerpmodellen in uw favoriete grafische bewerkingspakket doen. Ik schets over het algemeen liever op papier en bespreek het vervolgens direct met HTML en CSS (beide Blueprint en aangepaste klassen), zoals hieronder besproken.
Op grid gebaseerd coderingsproces
Nu u een mockup van uw paginalay-out hebt, kunt u beginnen met coderen in HTML en CSS. Hier volgt een globaal proces van de daadwerkelijke codeerstappen:
Voeg de nodige Blueprint CSS-verwijzingen en IE-voorwaardelijke code toe in de hoofd element van uw webpagina.
Begin in de body-tag met een div wiens klasse attribuut is ingesteld op "container". Dit is een Blueprint-code om een containergebied voor ontwerpelementen op te geven. Dit gedeelte van de hele pagina. Als u wilt dat het raster zichtbaar is, voegt u de waarde "showgrid" toe om de elementen correct te plaatsen klasse kenmerk van deze div.
Begin met het verfijnen van de blokken in kleinere secties met behulp van HTML-inhoud ingepakt div tags, evenals CSS-gestuurde rechthoeken voor afbeeldingen. Als u breedte wilt opgeven, gebruikt u de Blueprint "span-x" -klassen. Voeg eventuele aangepaste CSS-klassen toe die u nodig hebt. Ik gebruik meestal overbodige aangepaste blokken (met een grijze achtergrond) en verwijder ze vervolgens nadat ik mijn daadwerkelijke ontwerp in code heb geïmplementeerd.
U kunt doorgaan met het verfijnen van elk ruw blok of doorgaan naar de volgende stap.
Maak de nodige logo's, pictogrammen of banners die nog niet eerder zijn gemaakt.
Vervang ruwe blokken door actuele ontwerpelementen. Voeg de juiste toe div tags, eventuele resterende Blueprint-klassewaarden.
Voorbeeld HTML en CSS-code
Om de bovenstaande processen duidelijker te maken, laten we enkele echte HTML- en CSS-codefragmenten bekijken voor het voorbeeld van de filmsite die eerder is afgebeeld. Houd er rekening mee dat ik in deze zelfstudie puur voor de duidelijkheid extreem ben gegaan met de niet-Blueprint-labels. Waarschijnlijk wilt u overtollige klassen verwijderen, mogelijk geneste div-tags samenvoegen.
Merk ook op dat ik een aantal "lelijke" CSS-klassenamen voor niet-Blueprint voor de duidelijkheid heb gebruikt. Ze worden allemaal voorafgegaan door "fs-", gevolgd door een functionele naam, om duidelijk te maken waarvoor ik ze gebruik.
Ik heb voor deze zelfstudie vijf fasen gecodeerd, ter illustratie van het verfijningsproces in HTML en CSS. Normaal zou ik fase 1-3 comprimeren.
Leeg sjabloon met blauwdruk "container" klasse en leeg CSS-bestand.
Ruwe blokkeringsfase 1.
Ruwe-blokkeerfase 2. Verfijn ruwe blokken vanaf fase 1.
Ruwe-blokkeerfase 3. Laatste blokverfijning in noodzakelijke secties.
Laatste webpagina en CSS.
Deze stappen worden duidelijker in de onderstaande secties.
Stap 1: Lege sjablooncode
Om te beginnen, willen we het HTML-bestand instellen:
FilmScenic-sjabloon
koptekst, inhoud, zijbalk en voettekst, ga hier naartoe
Share
Accentsconagua