WordPress als een CMS deel 2

In de laatste zelfstudie hebben we een snelle, eenvoudige lay-out in photoshop gemaakt en nu moeten we dat omzetten in een statische HMTL- en CSS-pagina.

Ook verkrijgbaar in deze serie:

WordPress als een CMS: deel 1
WordPress als een CMS: deel 2
WordPress als een CMS: deel 3

Deze tutorial bevat een screencast die beschikbaar is voor leden van Tuts + Premium.

Zodra u comfortabeler bent geworden met HTML en WordPress, kunt u deze stap overslaan en gewoon uw WordPress-thema maken, maar dat zou het doel van deze tutorial verslaan, dus we gaan deze extra stap zetten.

Er zijn twee verschillende soorten tutorials die ik daar zie en de meest populaire lijkt hier te zijn, is de volledige HTML en hier is de volledige CSS en dat is het einde van de tutorial. Ik ben geen grote fan van die methode, dus ik ga je door het hele proces begeleiden. Voor de mensen die fans zijn van de andere methode, kun je de volledige HMTL en CSS vinden aan het einde van deze tutorial.

Snijd en dobbel

We hebben een uiterst eenvoudig ontwerp achter de rug, dus eigenlijk hoeven we slechts 2 afbeeldingen in te korten. Dit zijn het logo en onze inhoud afbeelding.

Haal je cropper-tool tevoorschijn en knip beide afbeeldingen uit.

Probeer het logo voor het logo zo dicht mogelijk bij elke rand te houden.

Sla de afbeelding op voor internet en doe hetzelfde voor onze inhoud afbeelding.

Je hebt een solide basis nodig

Nu we al onze afbeeldingen hebben uitgesneden en opgeslagen, kunnen we ons HTML-bestand maken.

Open uw editor en bereid u voor op het maken van enkele mappen en bestanden. Maak in deze hoofdmap mappen en bestanden.

img /

inc /

index.html

Verplaats je nieuw gemaakte afbeeldingen naar de img-map en ga naar je inc-map. Als je eenmaal binnen bent gaan we een nieuwe map maken en ook 2 nieuwe bestanden. Maak een nieuwe map met de naam CSS en maak binnen die map 2 nieuwe bestanden, reset.css en style.css.

Uw mappenstructuur zou er uit moeten zien als ons screenshot hieronder.

Reset en basisstructuur

Bij het maken van een site is het altijd goed om te beginnen met een stevige CSS-reset. Dit zorgt ervoor dat u begint bij ground zero en eventuele inconsistenties van browsers elimineert.

De CSS-reset die ik altijd gebruik, is afkomstig van http://meyerweb.com/eric/tools/CSS/reset/ dus wijs je browser naar die site en kopieer de CSS-resetcode die hij heeft gemaakt.

Voordat we dit in ons reset.CSS-bestand plakken, zullen we het snel in een kleiner bestand comprimeren.

Als je een google CSS-compressor gebruikt, zijn er honderden scripts die dit voor je doen, persoonlijk gebruik ik CSSdrive http://www.CSSdrive.com/index.php/main/CSScompressor/ dus nogmaals, wijs je browser naar deze site.

Plak je CSS-resetcode in dat vak en stel de compressiemodus in op supercompact. Druk op comprimeren!

U wordt doorverwezen naar een andere pagina met onze nieuw gecomprimeerde CSS-resetcode. Kopieer de code, open reset.css in je editor en plak je code in. Opslaan reset.css en sluit dit bestand.

Nu we onze CSS alle instellingen opnieuw hebben ingesteld, gaan we de eenvoudige HTML-structuur van onze site maken, zodat we enkele CSS-stijlen kunnen toepassen om te zorgen dat alles naar behoren werkt.

Volledige screencast

Bouw blokken

Doe open index.html en voeg deze HTML toe voor het eenvoudige HTML-bestand.

    WordPress CMS - Deel 2

Nu we het meest eenvoudige HTML-bestand hebben gemaakt, kunnen we de 4 belangrijkste elementen van onze pagina maken. Deze elementen zijn Header, Sidebar, Content en Footer. Nogmaals, omdat we werken met een sjabloon die tegen een volledig solide achtergrond is, hoeven we ons geen zorgen te maken over het toevoegen van opvulling aan onze elementen, dus we kunnen gewoon 4 container-divs maken en wat styling beginnen toevoegen.

Maak 4 divs voor elk element en voeg _container toe aan elke naam. We gaan 1 container toevoegen die elk van onze elementen huisvest, zodat we al onze inhoud op de pagina kunnen centreren. Dit wordt container genoemd.

Je zult merken dat elke afsluitende div-tag een opmerking ernaast heeft. Ons sjabloon zal niet extreem lang worden, maar in de toekomst wanneer je met veel divs en elementen op je pagina werkt, kan het moeilijk zijn om bij te houden welke

tag hoort bij de opening

label. Door opmerkingen toe te voegen, kun je bijhouden welke ender bij de opener hoort.

We hebben onze containers allemaal ingesteld, dus laten we wat styling toevoegen, zodat we ervoor kunnen zorgen dat onze sidebar- en inhoudcontainers mooi naast elkaar blijven drijven!

Doe open style.css en voeg snel een aantal algemene stijlen toe.

Deze man heeft een stijl

 body background: # f5f5f5; lettergrootte: 62,5%; kleur: # 6e6e6e; font-family: Helvetica, Verdana, Sans-Serif;  p font-size: 1.4em; regelhoogte: 1.5em; marge: 0 0 15 px 0;

Als je ooit een CSS-bestand hebt gebruikt, zou dit er heel bekend uit moeten zien. Als je dat niet hebt gedaan, hebben we wat variabelen van ons lichaamselement veranderd. Dit heeft invloed op ons hoofd-HTML-bestand. We hebben de achtergrondkleur gewijzigd in de kleur van ons PSD-bestand en de standaardkleur van alle tekst op de pagina aangepast met behulp van kleur.

Vervolgens stellen we de standaardlettertypestapel in die we voor onze site willen gebruiken. Dit vertelt onze browser dat we willen dat Helvetica het hoofdlettertype is dat voor onze pagina wordt gebruikt. Als Helvetica niet beschikbaar is, zoekt de browser naar Verdana en vervolgens naar het volgende beschikbare schreefloze lettertype.

Als je opengaat index.html in je browser zie je een lege beige pagina. Omdat we geen elementen in onze container hebben, gaan we een standaardhoogte en een aantal achtergrondkleuren toevoegen, zodat we kunnen zien waarmee we werken.

 div height: 200px;  / * - Structuurelementen - * / #container width: 900px; marge: 0 auto;  #header_container width: 100%; achtergrond: rood;  #sidebar_container width: 280px; achtergrond: blauw;  #content_container width: 580px; achtergrond: oranje;  #footer_container width: 100%; achtergrond: groen;

Ververs de pagina en je zou iets moeten hebben dat op de onderstaande screenshot lijkt.

We hebben een standaardhoogte van 200px ingesteld voor al onze div's, zodat we ze zonder inhoud konden zien. Zonder de standaard hoogte zouden onze divs allemaal een hoogte van 0px hebben en zouden we niets zien.

Nu we onze div's op de pagina laten verschijnen, moeten we ervoor zorgen dat de zijbalk en de inhoudsbakken naast elkaar op de pagina staan. We gaan de float-eigenschap gebruiken om dit te bereiken.

Opmerking: Tenzij ik u zeg alle stijlen uit het huidige CSS-element te verwijderen, voegt u de nieuwe eigenschappen toe aan de reeds bestaande eigenschappen.

 #header_container float: left; beiden opschonen;  #sidebar_container float: left;  #content_container float: right #footer_container float: left; beiden opschonen;

We duwen onze sidebar div naar links van de pagina en de content div naar de rechterkant van de pagina. Dit is een van de eenvoudiger kolomvormige lay-outs die je tegenkomt. We willen niet dat onze kop- en voettekstcontainers elementen naast zich laten zweven, dus we hebben een duidelijke toegevoegd: beide; eigendom met de float-eigenschap. Clear zorgt ervoor dat er geen andere elementen aan weerszijden van de huidige container staan.

Vernieuw en raadpleeg de screenshot!

We hebben nu de basisstructuur van onze pagina voltooid, zodat we onze andere elementen aan de pagina kunnen toevoegen. We beginnen met de header. We weten dat alles goed is gepropt en uitgelijnd, zodat u de achtergrondkleuren uit onze container-divs kunt verwijderen.

Hoe over sommige navigatie

In je header_container div kun je een h1-tag en een ongeordende lijst toevoegen die als onze topnavigatie zal fungeren.

 / * - header_container - * / Gear'd
  Wat betreft
 Plannen en prijzen
 FAQ
 Contact

Als u de pagina vernieuwt, ziet u de standaardtags. Niets is echt veel om naar te kijken. We gaan de h1 gebruiken als ons logo. Schakel terug naar style.css en voeg een aantal eigenschappen toe aan onze h1 # -logolabel.

 h1 # logo width: 280px; hoogte: 96 px; text-indent: -9999px; achtergrond: url (... / ... /img/logo.gif) linksboven niet herhalen; zweven: links;

Wat we hier hebben gedaan, is de hoogte en breedte van uit h1 instellen op de hoogte en breedte van ons logo. Vervolgens hebben we de tekst verwijderd door deze in te knippen met -9999px. Ten slotte hebben we de achtergrond van onze h1 ingesteld op onze logo-tag en deze naar links geduwd. Dit zorgt ervoor dat het mooi naast de navigatie ligt.

Het logo ziet er geweldig uit, maar de navigatie heeft een beetje CSS-liefde nodig. Laten we het wat geven!

Een korte kleine omweg uit onze navigatie, we gaan snel ons Days-lettertype gebruiken dat we hebben gebruikt voor ons logo en navigatie.

We gaan @ font-face gebruiken om CSS te laten weten dat we het nieuwe lettertype voor ons bestand willen gebruiken. Deze eigenschap is niet in alle browsers beschikbaar, maar we gaan een lettertypestapel gebruiken om ervoor te zorgen dat de andere browser onze stijlen nog steeds kan zien.

Eerst moeten we ons lettertype in ons CSS-bestand opnemen. Maak een nieuwe map met de naam lettertypen in onze inc map en sleep days.otf naar de nieuwe map met lettertypen.

Als je het lettertype niet hebt, kun je het downloaden, evenals andere lettertypeveiligheidslettertypen van http://spyrestudios.com/21-awesome-font-face-embedable-typefaces/

Zodra we het lettertype hebben, kunnen we @ font-face gebruiken om het in ons CSS-script op te nemen.

 @ font-face font-family: Days; src: url ("... /fonts/days.otf");

De eerste eigenschap vertelt ons CSS-bestand wat de naam van het lettertype is, zodat we het in onze eigenschap font-family kunnen gebruiken met andere elementen. De tweede eigenschap is waar ons lettertype zich bevindt.

Terug naar onze navigatie. Het is de standaard geworden om ongeordende of geordende lijsten te gebruiken als het gaat om navigatie. Het stylen van de navigatie kan een beetje moeilijk worden als je een beginner bent, maar als je er eenmaal aan begint, kan deze heel krachtig zijn.

 ul.nav float: right; marge: 25px 0 0 0;  ul.nav li float: left; marge: 0 0 0 10px;  ul.nav li a font-family: Days, Helvetica, Verdana, Sans-Serif; tekstdecoratie: geen; opvulling: 5px 10px; kleur: # 6e6e6e; -moz-border-radius: 5px; -webkit-border-radius: 5px; lettergrootte: 1,4em;  ul.nav li a: hover background: # e0e0e0;  ul.nav li.active a background: # 00b8ff; kleur: # f5f5f5;

We verwijzen naar ul.nav en drijven het goed. Dit plaatst het aan de rechterkant van onze content-div, tegenover ons logo.

Standaard bevinden de li-tag (s) van onze lijsten zich boven op elkaar op een nieuwe regel voor elke li. We willen dit niet, we willen dat onze navigatie zij aan zij zit. Drijf tot de redding! We voegen een beetje marge toe aan elke li-elementen om ze een beetje te spreiden.

We gaan een aantal styling toevoegen aan onze link-elementen om ze op grafische knoppen te laten lijken. We gaan een andere eigenschap gebruiken die niet in alle browsers beschikbaar is, maar ik wil alles eenvoudig houden omwille van het leren.

Dit waar -moz-border-radius en -webkit-border-radius in het spel komen. Deze 2 eigenschappen voegen een mooie straal van 5 pixels toe aan elk koppelingselement. U merkt alleen de afronding wanneer de link actief is of wordt bewogen, omdat dit de enige 2 gebeurtenissen zijn waarbij we de achtergrondkleur wijzigen.

Vernieuw en koester uzelf in de glorie van uw nieuwe navigatie!

Met onze nieuwe kennis van lijsten gaan we naar de zijbalk en voegen we een andere ongeordende lijst toe voor navigatie in de zijbalk. De methode om de zijbalknavigatie te maken is bijna identiek aan onze topnavigatie, dus als je op zoek bent naar een uitdaging, probeer dan de zijbalk zelf te maken en te stylen voordat je naar de echte code kijkt!

Hieronder vindt u de HTML- en CSS-code voor onze zijbalknavigatie. Ik zal je er niet doorheen laten lopen, want zoals ik al eerder zei, het is vrijwel identiek aan onze header-navigatie, behalve dat we een breedte instellen op onze link-elementen, omdat we willen dat ze de volledige grootte van de zijbalk hebben.

  Gratis abonnement
 Not So Free Plan
 Trump Plan

 #sidebar_container ul, #sidebar_container ul li float: left; beiden opschonen; breedte: 280 px;  #sidebar_container ul li margin: 0 0 10px 0;  #sidebar_container ul li a -moz-border-radius: 5px; -webkit-border-radius: 5px; opvulling: 7px 10px; tekstdecoratie: geen; kleur: # 6e6e6e; zweven: links; beiden opschonen; breedte: 260 px; font-size: 1.5em; text-transform: hoofdletters; font-family: Days, Helvetica, Verdana, Sans-Serif;  #sidebar_container ul li a: hover background: # e0e0e0;  #sidebar_container ul li.active a background: # 00b8ff; kleur: # f5f5f5;

Inmiddels zou je een ongeordende lijstpro moeten zijn en ik haat het om dit met je te doen, maar we gaan nog een lijst rocken die ik beloof. We gaan een andere lijst gebruiken voor onze voettekst.

Nogmaals, ik ga je zowel de HTML- als CSS-code geven met een klein beetje uitleg, omdat het bijna identiek is, behalve dat we sommige elementen nu anders dobberen.

  Copyright Gear'd © 2009
 algemene voorwaarden
 ontwikkelaars
 FAQ

 #footer_container color: #bebebe;  #footer_container a color: # 6e6e6e; tekstdecoratie: geen; lettergrootte: 1,4em;  #footer_container ul li float: right; border-left: 1px solid #bebebe; opvulling: 0 10px;  #footer_container ul li.copyright float: left; opvulling: 0; rand: 0;  #footer_container ul li p margin: 0;

We hebben onze voettekstlijst en elk van onze li-elementen is goed verzonden, maar we willen li.copyright aan de linkerkant van onze pagina wegzetten van de daadwerkelijke voettekstlijst. Om dit te doen geven we het een klasse van auteursrechten en zweven het weg in plaats van rechts. We hebben ook enkele randen links van elk li-element toegevoegd, behalve onze copyright-li voor een klein beetje specerijen.

Ben je al ziek van lijsten? Als het antwoord ja is, heb je geluk, we zijn klaar met lijsten voor deze tutorial. Bedankt dat je zolang hebt gepast: P

We zijn in de buurt van de finishlijn, we moeten alleen wat content-elementen toevoegen en een aantal last-minute aanpassingen toevoegen.

Vul het op met inhoud

Plannen en prijzen

Gratis abonnement

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus specimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ulcis, orci.

Al onze inhoudselementen zijn voornamelijk standaardelementen op de pagina, behalve onze header_image div. Dit is goed, want het betekent een minimale hoeveelheid CSS om onze pagina er geweldig uit te laten zien.

 / * - Headerelementen - * / h1, h2, h3 font-family: Days, Helvetica, Verdana, Sans-Serif;  h2 font-size: 4em; kleur: # 00b8ff;  h3 font-size: 2em; kleur: # 6e6e6e; regelhoogte: 2em;  / * - Berichtelementen - * / .header_image float: left; beiden opschonen; marge: 10 px 0; achtergrond: # 00b8ff; opvulling: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px;

Headers zijn gestileerd, header-afbeelding ziet er geweldig uit. Alles lijkt samen te komen. Ververs de pagina en koester uzelf in de glorie van uw nieuwe pagina! De koptekst ziet er een beetje uit, maar wordt tot aan de bovenkant van de pagina leeggezogen.

We gaan een klein beetje boven- en ondermarge toevoegen aan onze headercontainer om alles uit te sparen.

Voeg de marge-eigenschap toe aan ons header_container-element.

marge: 20 px 0;

Dit voegt 20 marge pixels toe aan de boven- en onderkant van header_container. Het is heel simpel!

De laatste touchup die we gaan toevoegen is een beetje opvulling en rand aan onze footer_container.

 border-top: 1px solid # d0d0d0; opvulling: 10px 0;

We zijn allemaal gecodeerd en alles ziet er goed uit dus dat is het einde van deze tutorial. Ga naar de volgende tutorial waar we dit bestand gaan gebruiken en WordPress content laten genereren voor elke pagina!

Code