PSD till Wordpress konvertering: förklarade från A till ö (3 / 5 steg)

Steg 3: Steg tre: skapa HTML, CSS3 och JavaScript (jQuery)

När du har avslutat det andra steget i proceduren PSD till WordPress konvertering av skivning PSD-filen på din webbplats, måste du komma igång med att koda med hjälp av HTML5 och CSS3. För det första, skapa en ny mapp och skapa två filer i denna mapp, nämligen index.html och style.css. Dessutom skapa en undermapp i mappen. Denna mapp är vad du kommer att använda att lagra alla bilder som du kommer till extraktet från din PSD-filen. Skapa en annan undermapp som du använder för att lagra alla filerna jQuery. Kom ihåg att nämna och märka alla dessa mappar och sub mappar ordentligt!

HTML5
HTML5 är namnet på ett språk som fortfarande något begynnande frontend, en vars användning är utbredd tack vare dess användarvänlighet och mångsidighet. Denna mångsidighet härrör främst från det faktum att detta gränssnitt språk innehåller funktioner från både HTML och XHTML. Du kommer att använda detta gränssnitt språk för att skapa de nakna ben i din slutliga Webbplatsdesign, inklusive vissa centrala delar av din hemsida som sidhuvudet och sidfoten. Med hjälp av HTML5 kommer att underlätta skapandet av en övergripande design som är trevligt att titta på och kompatibel med alla webbläsare. Nedan listas några resurser som du kan använda om du är intresserad av lärande om HTML5 eller om du vill friska upp minnet om detta gränssnitt språk:

1. http://www.w3schools.com/html/
   Denna webbplats kan lätt betraktas website för lärande om grunderna i HTML5. Varje aspekt av detta fronten språk lärs grundligt med hjälp av demos, att göra för en händer på lärande upplevelse.
2. https://developer.mozilla.org/en-US/Learn/HTML
   Mozilla Firefox är känd för att vara världens ledande webbläsaren. Dessutom, är folk över på Mozilla stor på teahing främre delen språk till utvecklare genom några intressant tutorials!
3. http://webdesign.tutsplus.com/categories/html
   Du kan hitta en hel del olika tutorials för HTML5 här. Vissa av dem kräver att du betalar, men många är gratis för dig att ta en titt på.
4. http://www.w3.org/TR/html5/
   W3 är en veritabel ikonoklasm av internet. Praktiskt taget varje öppen källkod web standard, standarder som Internet praktiskt taget körs på, har kommit från denna webbplats. Använd denna resurs för att få information om HTML5 samt lära sig om alla de senaste uppdateringarna om fronten språket!
5. https://validator.w3.org/
   När du har avslutat hela HTML5 koden för din webbplats, rekommenderas du starkt att uttrycka det genom denna validerare. Den vilja berätta du om din kod uppfyller W3 öppna webbstandarder!

CSS3
CSS är ett populärt frontend språk, den fullständiga formen som är Cascading Style Sheets. Den senaste versionen av detta frontend språk kallas CSS3 som är vad du kommer att använda för att forma, position, stil och annars bygger på grundläggande struktur du skapade med hjälp av HTML5. Detta resulterar i en övergripande slutliga webbdesign som är beställda, snyggt och framför allt konsekvent följer en enda stil. Du kommer att märka en stor nedgång i laddningstider efter tillägg av CSS3 till din webbplats, och du kommer att göra det enklare för sökmotorer att indexera också! Här är en lista över resurser som hänför sig till CSS3:

1. http://www.w3schools.com/css/
   W3 nämns här än en gång tack vare dess utmärkta resurser som lär dig om CSS3 och dess olika selektorer, egenskaper och värden.
2. https://developer.mozilla.org/en-US/Learn/CSS
   Mozilla nämns också en andra gång tack vare den vård och omsorg ger de utvecklare, så att de kan lära sig om CSS3 och stanna upp datum med de senaste nyheterna som rör klientdelen språket.
3. http://webdesign.tutsplus.com/Categories/CSS

Du kan gå igenom den långa listan av tutorials som äger denna webbplats och hitta en hel del som kommer att hjälpa dig. Några tutorials kommer att behöva betalas, men andra kan användas gratis.

http://www.w3.org/Style/CSS/
Denna webbplats är en utmärkt resurs som du kan använda för att vidareutveckla dina kunskaper om CSS3. Alla webbstandarder öppen källkod CSS3 kommer härifrån!

https://jigsaw.w3.org/css-validator/
Det skulle vara en bra idé att använda denna validerare när du är klar kodning CSS3 för denna hemsida. Detta kommer att hjälpa dig att se om din kod möter webbstandarder som har ställts in av W3

Responsive Design
Internet används för att vara ganska konsekvent för länge sedan. Alla som använt internet såg samma sak, eftersom alla var med ungefär samma typ av skärm. Detta är inte fallet idag. Med tillkomsten och spridning av smartphone teknik samt tillkomsten av tablet datorer tillsammans med olika storlekar bärbara datorer, har en tydlig förändring i webbdesign tillkommit. En webbplats som är lämplig för en bärbar dator är helt enkelt inte lämplig att använda på en smartphone, så webbdesigners har svarat på detta genom att uppfinna responsive design. Responsive design är en teknik där en webbdesigner använder en uppsättning media frågor i CSS3 kod som gör att webbplatsen du vill upptäcka typ av det som visas på skärmen och anpassa sig därefter.

Eftersom tillägg av responsive design till en webbplats kräver planering från ögonblicket den första biten av koden är skriven, måste du verkligen bestämma innan kodning börjar processen på allvar om du vill infoga responsive design i webbplatsens övergripande design eller inte. Om du vill inkludera den, måste du lägga till vissa CSS3 media frågor. I dessa frågor som media ska du ange vissa parametrar för din webbplats för att hålla reda på. Du ska ange vissa regler där webbsidan visas på en enhet som är av en viss storlek, det ändras dess storlek, form och övergripande format till en som är användbara i den enhet som är av den storleken. Dessutom rekommenderas att du infoga flytande design i din webbplats, whereby lyhörd temat kommer att gälla för resolutioner mellan dem som fastställts av parametrar samt. Detta kommer att göra din webbplats mer universell, som smartphones och tabletter dessa dagar kommer i så många olika former och storlekar.

Här är några utmärkta resurser som du kan använda för att lära sig om all information som rör alla aspekter av responsive design, eller du kan använda dem för att friska upp minnet om du vet om responsive design men behöver något som dessa för att friska upp minnet:

1. https://developers.google.com/web/fundamentals/la...
   Använda den här resursen om du vill veta mer om hur du använder CSS3 media frågor.
2. http://blog.froont.com/9-basic-principles-of-resp...
   Använda denna artikel att lära sig om skillnaderna mellan responsive design och adaptiv design. Detta hjälper dig att förstå responsive design mycket bättre.
3. http://alistapart.com/article/fluidgrids
   Detta utmärkta blogg är framför allt en stor resurs eftersom det talas om en mycket viktig aspekt av responsive design som är användningen av flytande nät.

Lyhörd front-end ram
Om du vill spara tid men ändå vill ha funktionerna i responsive design, är det bästa du kan göra ta lite av en genväg och använda vad som kallas en lyhörd frontend ramen istället. Detta gör att du kan spara tid, som tillämpar en frontend ramen är mindre tidskrävande än införliva responsive design i din webbplats. Men tänk på att använda en lyhörd främre ram snarare än en komplett responsive design inkorporering i webbplatsens kod är en genväg, och alla genväg kommer till ett pris. Priset är i detta fall en längre laddningstid för din webbplats. Kom också ihåg att du kommer att behöva tillämpa samma rutnät ramen för både CSS3 och HTML5.

Här är några av de mest populära front-end ramarna:

1. http://getbootstrap.com
   Bra för nybörjare, eftersom det är lätt att använda. Använder en CDN som bidrar till att minska dess inverkan på spindelväv lastande hastigheter!
2. http://lessframework.com/
   Ger adaptiv design som en elternative till responsive design.
3. http://Foundation.ZURB.com/

En lyhörd klientdelen rutnät ram med liten filstorlek, att underlätta bättre laddningstider!

JavaScript (vs CSS3)
Av alla programmering och kodning språk i världen är en av de mest populära ett språk kallas JavaScript. JavaScript är skyldig sin popularitet främst på det faktum att det är så lätt att använda. Också, det är nästan allmänt läsbar, en annan punkt som fungerar till dess fördel. JavaScript har dock på senare tid sett sin dominans hotas av tillkomsten av CSS3, som låter dig skapa animerade övergångar mellan stilar.

Vad som följer är en lista över resurser som du kan använda för att lära sig om JavaScript, eller att friska upp minnet om du fick veta om det men inte riktigt vet hur man kan tillämpa dina kunskaper:

1. http://www.w3schools.com/js/
   Bra för nybörjare som vill börja lära sig om JavaScript.
2. https://jquery.com/
   För dem som nu har en del erfarenhet när det gäller JavaScript och vill börja använda kod med libaries som jQuery.
3. https://nodejs.org/
   För att kärlek backend programmering men också vill införliva JavaScript i deras arbete.
4. https://angularjs.org/
   Ett utmärkt sätt att kombinera styrkorna av HTML och JavaScript, så att du kan dra nytta av båda frontend språk att göra några olika, nya och spännande.

Se till att kolla in följa resurser innan du börjar använda CSS3 för att animera element på din webbplats med hjälp av

JavaScript:

1. http://www.w3schools.com/CSS/css3_animations.asp
   Som alltid, på en lista med resurser som hjälper dig lära dig programmera språk, W3 skolor helt enkelt har att göra cut utan anledning än det är den bästa resursen ute för att hjälpa dig att lära dig programmering och dess olika språk, särskilt CSS3.
2. https://developer.mozilla.org/en-US/docs/Web/Guid...
   Nio prover som du kan använda i din egen webb design!