Accentsconagua

WordPress som ett CMS Del 2

Koda
Share

I den sista handledningen vi visade upp en snabb, enkel layout i Photoshop och nu måste vi göra det till en statisk HMTL- och CSS-sida.

Finns även i serien:

  1. WordPress som ett CMS: Del 1
  2. WordPress som ett CMS: Del 2
  3. WordPress som ett CMS: Del 3

Denna handledning innehåller en skärmdump som är tillgänglig för Tuts + Premium-medlemmar.

När du blir mer bekväm med HTML och WordPress kan du hoppa över det här steget och bara skapa ditt WordPress-tema, men det skulle besegra syftet med denna handledning så vi ska ta det här extra steget.

Det finns två olika typer av tutorials som jag ser ut där och den mest populära verkar vara här är full HTML och här är den fullständiga CSS och det är slutet på handledningen. Jag är inte ett stort fan av den metoden så jag ska gå igenom hela processen. För de personer som är fans av den andra metoden kan du hitta hela HMTL och CSS i slutet av denna handledning.

Skiva och tärning

Vi fastar med en extremt enkel design, så vi behöver verkligen bara klippa upp 2 bilder. Dessa är logotypen och vår innehållsbild.

Ta ut ditt cropperverktyg och skär ut båda bilderna.


För logotypen, försök hålla den så nära varje kant som möjligt.



Spara bilden för webben och gör detsamma för vår innehållsbild.


Du behöver en solid grund

Nu när vi har alla våra bilder skivade ut och sparat, kan vi fortsätta och skapa vår HTML-fil.

Öppna din redaktör och förbered dig för att skapa några mappar och filer. Skapa dina mappar och filer i din rotmapp.

img /

inc /

index.html

Flytta dina nyskapade bilder till img-mappen och gå in i din ink-mapp. En gång inom ink kommer vi att skapa en ny mapp samt 2 nya filer. Skapa en ny mapp som heter CSS och inuti den mappen skapar 2 nya filer, reset.css och style.css.

Din mappstruktur ska se ut som vår skärmdump nedan.


Återställ och grundläggande struktur

När du skapar en webbplats är det alltid bra att börja med en solid CSS-återställning. Detta säkerställer att du börjar vid mark noll och eliminerar eventuella inkonsekvenser i webbläsaren.

Den CSS återställning som jag alltid använder är från http://meyerweb.com/eric/tools/CSS/reset/ så peka din webbläsare på den webbplatsen och kopiera CSS återställningskoden som han har skapat.

Innan vi klistrar in detta i vår reset.CSS-fil kommer vi snabbt komprimera den till en mindre fil.

Om du google CSS kompressor finns det hundratals skript som kommer att göra detta för dig, personligen använder jag CSSdrive http://www.CSSdrive.com/index.php/main/CSScompressor/ så igen, peka din webbläsare på den här sidan.

Klistra in din CSS-återställningskod i den rutan och ställ komprimeringsläget till superkompakt. Hit komprimera den!



Du kommer att omdirigeras till en annan sida med vår nyligen komprimerade CSS-återställningskod. Kopiera koden, öppna upp reset.css i din redaktör och klistra in din kod. Spara reset.css och stäng den här filen.

Nu när vi har vår CSS återställt all installation, kommer vi att skapa den grundläggande HTML-strukturen på vår webbplats så vi kan tillämpa några CSS-stilar för att se till att allt fungerar ordentligt.

Full Screencast


Byggklossar

Öppna index.html och lägg till den här HTML-filen för den grundläggande HTML-filen.

    WordPress CMS - Del 2

Nu när vi har den mest grundläggande HTML-filen som skapats kan vi skapa de fyra huvudelementen på vår sida. Dessa element är Header, Sidebar, Content och Footer. Återigen, för att vi arbetar med en mall som står emot en helt solid bakgrund, behöver vi inte oroa oss för att lägga till vaddering på våra element, så vi kan bara skapa 4 container divs och börja lägga till några styling.

Skapa 4 divs för varje element och lägg till _container för varje namn. Vi ska lägga till 1 behållare som ska hysa alla våra element så att vi kan centrera allt vårt innehåll på sidan. Detta kommer att kallas container.

Du märker att varje stängande div-tagg har en kommentar bredvid den. Vår mall kommer inte att bli extremt lång, men i framtiden när du arbetar med massor av divs och element på din sida kan det vara svårt att hålla reda på vilka

taggar tillhör det öppnandet
märka. Om du lägger till kommentarer kommer du att leta reda på vilken ände som tillhör den öppnare.

Vi har våra behållare all installation, så vi kan börja lägga till en styling så att vi kan se till att våra sidofält och innehållsbehållare flyter bredvid varandra!

Öppna style.css och lägg till några generella stilar snabbt.

Den här mannen har lite stil

 kropp bakgrund: # f5f5f5; typsnittstorlek: 62,5%; färg: # 6e6e6e; fontfamilj: Helvetica, Verdana, Sans-Serif;  p font-size: 1.4em; linjehöjd: 1.5em; marginal: 0 0 15px 0;

Om du någonsin har använt en CSS-fil, borde det se väldigt bekant ut. Om du inte har det, har vi gjort vissa variabler av vårt kroppselement. Detta påverkar vår huvudsakliga HTML-fil. Vi ändrade bakgrundsfärgen till färgen på vår PSD-fil, samt ändrade standardfärgen på vilken text som helst på sidan med färg.

Därefter ställer vi in ​​standardfontsstapeln som vi vill använda för vår webbplats. Detta berättar för webbläsaren att vi vill att Helvetica ska vara det huvudsakliga teckensnittet som används för vår sida. Om Helvetica inte är tillgängligt så söker webbläsaren efter Verdana, och sedan till slut nästa tillgängliga sans-serif-typsnitt.

Om du öppnar dig index.html i din webbläsare ser du en blank beige sida. Eftersom vi inte har några element i vår behållare kommer vi att lägga till en standardhöjd och några bakgrundsfärger så att vi kan se vad vi arbetar med.

 div höjd: 200px;  / * - Strukturelement - * / #container width: 900px; marginal: 0 auto;  #header_container bredd: 100%; bakgrund: röd;  #sidebar_container width: 280px; bakgrund: blå;  #content_container width: 580px; bakgrund: orange;  #footer_container bredd: 100%; bakgrund: grön;

Uppdatera sidan och du borde ha något som ser ut som skärmdumpen nedan.


Vi ställde en standardhöjd på 200px för alla våra divs så att vi kunde se dem utan innehåll inom dem. Utan standardhöjden skulle våra divs alla ha en höjd på 0px och vi skulle inte se någonting.

Nu när vi har våra divs som visas på sidan, måste vi se till att sidofältet och innehållsbehållarna sitter bredvid varandra på sidan. Vi ska använda floategenskapen för att uppnå detta.

Obs! Om inte jag säger att du ska ta bort alla stilar från det aktuella CSS-elementet, lägg bara till de nya egenskaperna till redan befintliga egenskaper.

 #header_container float: left; klara: båda;  #sidebar_container float: left;  #content_container float: right #footer_container float: left; klara: båda;

Vi flyter vår sidofält div till vänster om sidan och innehållsdelen till höger på sidan. Detta är en av de enklare kolumnformat du kommer att stöta på. Vi vill inte att våra huvud- och sidfotbehållare ska ha några element som flyter bredvid dem så vi har lagt till en klar: båda; fastighet med flottöregenskapen. Clear gör att inga andra element är med på vardera sidan av den aktuella behållaren.

Uppdatera och kolla skärmdumpen!


Vi har nu grundstrukturen på vår sida färdigställd så att vi kan börja lägga till våra andra element på sidan. Vi ska börja med rubriken. Vi vet att allt är flytande och anpassat korrekt så att du kan ta bort bakgrundsfärgerna från våra containerdivor.

Hur om någon navigering

Inuti din header_container div kan du lägga till en h1-tagg samt en oorderad lista som kommer att fungera som vår toppnavigering.

 / * - header_container - * / 
Gear'd

Om du uppdaterar sidan kommer du att se standardkoderna, inget mycket att titta på. Vi ska använda h1 som vår logotyp. Växla tillbaka till style.css och lägg till några egenskaper till vår h1 # logo tagg.

 h1 # logo bredd: 280px; höjd: 96px; textindelning: -9999px; bakgrund: url (... / ... /img/logo.gif) övre vänster ingen upprepning; flyta till vänster;

Vad vi har gjort här ställer höjden och bredden av h1 till höjden och bredden på vår logotyp. Nästa har vi tagit bort texten genom att indraga den med -9999px. Slutligen har vi satt bakgrunden till vår h1 till vår logotyptag och flyttat den till vänster. Detta kommer att se till att det sitter fint utöver navigationen.


Logotypen ser fantastisk ut, men navigationen behöver lite CSS-kärlek. Låt oss ge det lite!

En snabb liten sidosteg från vår navigering, vi kommer snabbt att inkludera vår dagstyp som vi använde för vår logotyp och navigering.

Vi ska använda @ font-face för att berätta CSS att vi vill använda den nya teckensnittet för vår fil. Den här egenskapen är inte tillgänglig i alla webbläsare, men vi ska använda en typsnittstapel för att se till att den andra webbläsaren fortfarande kan se våra stilar.

Först måste vi inkludera vår typsnitt i vår CSS-fil. Skapa en ny mapp som heter teckensnitt i vår inc-mapp och dra days.otf i mappen nya teckensnitt.

Om du inte har dagens teckensnitt kan du ladda ner det, liksom andra font-face-säkerhetsfonter från http://spyrestudios.com/21-awesome-font-face-embedable-typefaces/

När vi har teckensnittet kan vi använda @ font-face för att inkludera det i vårt CSS-skript.

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

Den första egenskapen berättar för vår CSS-fil vad namnet på teckensnittet är så att vi kan använda det i vår typsnitt med andra objekt. Den andra egenskapen är där vår typsnitt finns.

Tillbaka till vår navigering. Det har blivit standarden att använda oordnade eller beställda listor när det gäller navigering. Styling av navigeringen kan bli lite svår när du är nybörjare men när du tar det kan det vara mycket kraftfullt.

 ul.nav float: right; marginal: 25px 0 0 0;  ul.nav li float: left; marginal: 0 0 0 10px;  ul.nav li en font-family: Days, Helvetica, Verdana, Sans-Serif; text-dekoration: ingen; vaddering: 5px 10px; färg: # 6e6e6e; -moz-gränsen-radie: 5px; -webkit-gräns-radie: 5px; typsnittstorlek: 1.4em;  ul.nav li a: svävar bakgrund: # e0e0e0;  ul.nav li.active a background: # 00b8ff; färg: # f5f5f5;

Vi refererar ul.nav och flyter den rätt. Detta sätter den längst till höger om vår innehålls div från vår logotyp.

Som standard ligger li-taggarna i våra listor ovanpå varandra på en ny linje för varje li. Vi vill inte ha det här, vi vill att vår navigering ska sitta bredvid varandra. Flyta till räddningen! Vi lägger till en liten marginal för varje li-element för att rymma dem lite.

Vi ska lägga till några stylingar till våra länkelement för att få dem att se ut som grafiska knappar. Vi ska använda en annan egenskap som inte är tillgänglig i alla webbläsare, men jag vill hålla allt enkelt för lärandens skull.

Detta var -moz-border-radius och -webkit-border-radius komma i spel. Dessa 2 egenskaper lägger till en fin 5 pixelradie för varje länkelement. Du kommer bara märka avrundningen när länken är aktiv eller svängs på eftersom det är de enda 2 händelserna där vi ändrar bakgrundsfärgen.

Uppdatera och baska i ära av din nya navigering!


Med vår nya kunskap om listor kommer vi att flytta över till sidofältet och lägga till en annan oordnad lista för viss sidospårnavigering. Metoden för att skapa sidospärrnavigering är nästan identisk med vår toppnavigering, så om du letar efter en utmaning, försök att göra sidofältet själv och stil det innan du tittar på den aktuella koden!

Nedan hittar du HTML och CSS-koden för vår sidobarnavigering. Jag kommer inte att gå igenom det, för som jag sa tidigare är det ganska mycket identiskt med vår rubriknavigering, förutom att vi sätter en bredd på våra länkelement eftersom vi vill att de ska vara fulla storleken på sidofältet.

 
 #sidebar_container ul, #sidebar_container ul li float: left; klara: båda; bredd: 280px;  #sidebar_container ul li margin: 0 0 10px 0;  #sidebar_container ul li a -moz-border-radius: 5px; -webkit-gräns-radie: 5px; vaddering: 7px 10px; text-dekoration: ingen; färg: # 6e6e6e; flyta till vänster; klara: båda; bredd: 260px; typsnittstorlek: 1.5em; text-transform: stor bokstav; font-family: dagar, Helvetica, Verdana, Sans-Serif;  #sidebar_container ul li a: svävar bakgrund: # e0e0e0;  #sidebar_container ul li.active a background: # 00b8ff; färg: # f5f5f5;

Nu borde du vara en oorderad lista pro och jag hatar att göra det här för dig, men vi ska rocka en lista som jag lovar. Vi ska använda en annan lista för vår sidfot.

Återigen kommer jag att ge dig både HTML och CSS-koden med en liten förklaring eftersom det är nästan identiskt med undantag för att vi flyter vissa element annorlunda denna gång.

 
 #footer_container color: #bebebe;  #footer_container a color: # 6e6e6e; text-dekoration: ingen; typsnittstorlek: 1.4em;  #footer_container ul li float: right; border-left: 1px solid #bebebe; vaddering: 0 10px;  #footer_container ul li.copyright float: left; vaddering: 0; gräns: 0;  #footer_container ul li p margin: 0;

Vi har vår footerlista och var och en av våra li-element floats rätt men vi vill ut li.copyright att sitta på vänster sida av vår sida bort från den faktiska footerlistan. För att göra detta ger vi det en klass av upphovsrätt och flyter den kvar i stället för höger. Vi har också lagt till några gränser till vänster om varje li-element med undantag för vår copyright li för lite krydda.

Är du fortfarande sjuk i listan? Om svaret är ja du har tur, är vi färdiga med listor för denna handledning. Tack för att du hållit dig så länge: P

Vi är nära mållinjen, vi måste bara lägga till några innehållsdelar och lägga till några sista minuters touchups.

Fyll upp det med innehåll

 
Planer och priser
 
Fri plan
 
 
  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sitter med en elit vitae bågformad 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 condimentum bibendum dolor. Mauris sed ipsum. Phasellus i diam. Nam sapien ligula, consectetuer id, hendrerit in, kurs sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sitter med en elit vitae bågformad 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 condimentum bibendum dolor. Mauris sed ipsum. Phasellus i diam. Nam sapien ligula, consectetuer id, hendrerit in, kurs sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sitter med en elit vitae bågformad 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 condimentum bibendum dolor. Mauris sed ipsum. Phasellus i diam. Nam sapien ligula, consectetuer id, hendrerit in, kurs sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.

Alla våra innehållselement är huvudsakligen standardelement på sidan med undantag för vår header_image div. Det här är bra eftersom det betyder en minimal mängd CSS för att göra vår sida ser fantastisk ut.

 / * - Rubrikelement - * / h1, h2, h3 font-family: Days, Helvetica, Verdana, Sans-Serif;  h2 font-size: 4em; färg: # 00b8ff;  h3 font-size: 2em; färg: # 6e6e6e; linjehöjd: 2em;  / * - Postelement - * / .header_image float: left; klara: båda; marginal: 10px 0; bakgrund: # 00b8ff; vaddering: 10px; -moz-gränsen-radie: 5px; -webkit-gräns-radie: 5px;

Headers är stylade, huvudbilden ser bra ut. Allt tycks komma samman. Uppdatera sidan och baska i ära av din nya sida! Sidhuvudet ser lite ut men sugas helt upp till toppen av sidan.


Vi lägger till en liten bit av topp- och bottenmarginal till vår toppbehållare för att rymma allt.

Lägg till marginalegenskapen till vårt header_container-element.

marginal: 20px 0;

Detta lägger till 20 pixlar av marginal till topp och botten av header_container. Det är väldigt enkelt!

Den sista touchup vi ska lägga till är en liten bit vadderar och gränsen till vår footer_container.

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

Vi är alla kodade och allt ser bra ut så det är slutet på denna handledning. Flytta till nästa handledning där vi ska ta den här filen och göra WordPress generera innehåll för varje sida!

Koda
×