tämä artikkeli on myötävaikuttanut PSDtoWP.net

ehkä olisi parasta aloittaa tästä syystä. Noin neljännes kaikista verkkosivustoista toimii WordPress-verkkoblogialustalla. Tämä tekee siitä ylivoimaisesti yhden suosituimmista avoimen lähdekoodin sisällönhallintajärjestelmistä planeetalla.

valtaosa web-suunnittelijoista käyttää edelleen Photoshopia verkkosivujen suunnitteluun, vaikka vaihtoehtoja on olemassa. Tämä tarkoittaa, että paljon sivuston suunnittelijat täytyy löytää tapoja muuntaa PSD tiedostoja reagoiva WordPress teema!

nyt tämä saattaa vaikuttaa melko suoraviivaiselta. Kuitenkin, muuntaa PSD tiedosto WordPress verkkosivuilla ei ole aivan helppoa. Se vaatii paljon enemmän kuin vain Photoshop taitoja! Jotta kääntää PSD-tiedoston reagoiva teema, jota voidaan käyttää WordPress, tarvitset tietoa front end web development kielet kuten HTML, CSS ja JavaScript, sekä backend ohjelmointikieli PHP.

nyt kun Miksi on pois tieltä, on aika edetä miten! Vaikka miten varmasti ei ole helppoa, se voidaan silti saavuttaa viisi melko helppo ymmärtää vaiheet!

Vaihe yksi: luo www-design

siirry vaiheeseen kaksi, Jos olet jo suunnitellut sivustosi.

verkkosivuston tekemiseen liittyy paljon muutakin kuin vain logon luominen ja valikon, sivupalkin, alatunnisteen ja sisällön yhdistäminen. Tämän palapelin palaset on luotava ensinnäkin, ja tämän luomisen prosessi on jotain, että kaikki eivät voi tehdä niin helposti.

web design luot on, että täydellinen tasapaino muodon ja toiminnon, web design, joka palvelee suuri käyttäjäkokemus.

tutkimus

ulkonäkö-ja toiminnallisuuskriteerit onnistuneesti täyttävän www-rakenteen luominen vaatii perusteellista tutkimusta. Ensinnäkin, kuka on kohdeyleisösi ja mitä kohdeyleisösi haluaa? Nämä ovat selvästi keskeisiä näkökohtia tutkimuksessanne.

oppia muilta

toinen osa web design, että sinun täytyy tutkia on tekniikoita kilpailijat ovat soveltaneet. Nämä kilpailijat ovat todennäköisesti paremmin perustettu kuin olet, joten olisit varmasti voi oppia paljon suunnittelu, että he käyttävät! Kun olet tehnyt tutkimusta ja sinulla on hyvä käsitys siitä, miten sivuston pitäisi näyttää, sinun pitäisi alkaa ajatella toiminnallisuutta. Mitä toimintoja haluat web design hallussaan?

Wireframe

kun olet selvittänyt kaiken, kirjoita se paperille. Piirrä & luonnostele, miltä sivustosi näyttää, jotta saat visuaalista apua edetessäsi!

Design

kun olet tehnyt fyysiset sketsit / rautalangat, olet valmis hyppäämään kapteenin tuoliin ja käynnistämään Photoshopin. Ensimmäinen asia, joka sinun täytyy tehdä ennen kuin aloitat tosissaan, on varmistaa, että käytät sarakepohjaista ruudukkoa, kuten XXgrid. Tämä tekee suunnittelu näyttää todella siisti ja linjassa! Tämä ei ole vain estetiikkaa varten. Käyttämällä sarakepohjaisen ruudukon luoda linjassa suunnittelu helpottaa sinua tai etupään kehittäjä, joka kehittää HTML ja CSS luoda optimoitu, reagoiva layout tabletit ja älypuhelimet!

ennen kuin siirryt seuraavaan vaiheeseen, muista, että PSD-suunnittelutiedostot on järjestettävä kerroksittain, eli jokaisella osiolla tulee olla oma kansionsa vastaavine otsikoineen!

Vaihe Kaksi: Viipaloi PSD

kun olet luonut web design, että olet täysin tyytyväinen, se crunch aika. Pohjimmiltaan mitä sinun tarvitsee tehdä nyt on PSD WordPress prosessi.

sivustot on nykyään rakennettu HTML5: n ja CSS3: n avulla. Nämä ovat paljon parempia kuin XHTML ja CSS2, koska sen sijaan, että kaikki painikkeet, reunat, kaltevuudet, pyöristetyt reunat ja kaikki muut ominaisuudet luodaan kuvien avulla, ne luodaan toiminnallisina osina CSS3 koodaus. Näin ollen PSD-tiedoston viipalointi tarkoittaa periaatteessa nyt vain PSD: n taustakuvien viipalointia!

tätä varten sinun on avattava tiedosto joko Photoshopissa tai Illustratorissa riippuen siitä, mitä ohjelmistoa käytit mallin luomiseen. Jos suunnittelija olisi tehnyt työnsä oikein, hän olisi luonut hyvin jäsennellyn suunnittelutiedoston kansioineen ja kerroksineen, jolloin sinun on helppo löytää tarvitsemasi. Tutki verkkosuunnittelua ja etsi kuvia, joiden arvelet tarvitsevan viipalointia. Nämä ovat periaatteessa mitä tahansa kuvia, joita ei voi luoda käyttämällä CSS3, yleensä logo ja taustakuvat. Lue kuvien viipalointi täältä.

kun nämä taustakuvat korvataan CSS: llä, latausajat laskevat valtavasti. Tämä houkuttelisi paljon käyttäjiä sivustoosi, koska keskimääräinen internetin käyttäjä ei kestä pitkiä latausaikoja!

kolmas vaihe: luo HTML, CSS3 ja JavaScript (jQuery)

kun olet leikannut kuvat PSD-tiedostostasi, on aika luoda HTML5 ja CSS3. Ensimmäinen asia, mitä sinun tarvitsee tehdä, on luoda uusi kansio, johon luot hakemiston.html ja tyyli.css. Myös, luo alikansio nimeltään kuvia tai img (kumpi haluat) ja aseta kuvat olet purkanut tähän kansioon. Luo toinen kansio nimeltä JavaScript tai js. Tämä on myöhempää varten, joten voit tallentaa kaikki JavaScript-ja jQuery-tiedostot hyvin merkittyyn paikkaan. Kun olet luonut kaikki kansiot, tiedostot ja alikansiot, on aika alkaa rakentaa HTML5 ja CSS3.

HTML5

HTML5 on suhteellisen uusi kieli, jolla on sekä XHTML että HTML-funktiot. Tätä kieltä käytetään lähinnä asiakirjan perusrakenteen luomiseen sekä sivun kaikkien osien nimeämiseen. HTML5: ssä on erilliset elementit verkkosivustosi eri osioille, kuten <otsikko>, <nav>, <syrjään> sekä <alatunniste> elementit (ja paljon muuta), joiden avulla voit luoda siistin, hyvin jäsennellyn ja yleisesti luettavan asiakirjan. Seuraavassa on joitakin erinomaisia resursseja, joiden avulla voit oppia tai päivittää muistiasi HTML5: stä.

HTML Resources

W3Schools on ykkössivusto HTML5: n perusteiden oppimiseen. Jokainen elementti ja ominaisuus tämän kielen selitetään ja opetetaan käyttäen demoja, mikä tekee helppo oppimiskokemus.

Mozilla Developer ’ s Section – suositun selaimen Mozilla Firefoxin takana olevilla on kehittäjän osio verkkosivuillaan. Voit käyttää tätä osiota oppia paljon HTML5 kautta tutorials heillä on siellä, olitpa aloittelija tai kehittynyt koodari.

Web Design Tuts – tämä sivusto on paljon erilaisia HTML5 tutorials, joista osa on ilmaisia ja osa maksullisia.

W3 – tämä sivusto vastaa kaikkien avoimen verkon standardien kehittämisestä, jotka on luotu WWW: n pitkäikäisyyden varmistamiseksi. Täältä löydät perusteellista tietoa HTML5: stä sekä sen viimeisimmistä kehitysvaiheista.

W3-validaattori – kun olet suorittanut HTML5: n, laita se tämän validaattorin läpi. Se kertoo, jos HTML5 täyttää W3 open web standardit!

CSS3

CSS viittaa Cascading-tyylisiin lakanoihin, ja CSS3 on tämän front-end-kielen uusin versio. CSS3: lla otetaan HTML5: llä luotujen elementtien paljaat luut ja muoto, sijainti ja tyyli ne. Näin voit luoda johdonmukainen web design, jossa kaikki elementit vahvistavat sivuston yleistä suunnittelua. Kun olet käyttänyt CSS3, huomaat, että HTML5 on paljon puhtaampi ja paremmin jäsennelty, mikä puolestaan mahdollistaa sen ladata paljon nopeammin sekä mahdollistaa sen indeksoida nopeammin hakukoneet. Alla on joitakin resursseja, joiden avulla voit oppia tai päivittää muistiasi CSS3: sta:

CSS resurssit

W3 CSS – W3 on tunnetuimpia ja maineikkaimpia resursseja CSS3-tutoriaaleille ja esimerkkejä eri CSS3-valitsimista, ominaisuuksista ja arvoista. Parasta tässä on, että jokainen opetusohjelma on ’kokeile sitä itse’ sivu, jonka avulla voit soveltaa mitä olet oppinut.

Opi CSS3 – Mozilla ei ole vain Firefox-selaimen luoja. Se on myös erinomainen paikka tutustua CSS3, sekä päivittää tietoa kielen.

CSS Web Design Tuts – this website contains a whole cornucopia of tutorials that you can go through. Jotkut näistä tutorials on maksettava, mutta toiset ovat edelleen täysin ilmaisia, ja voi opettaa sinulle paljon CSS3 valitsimet, ominaisuudet ja arvot.

W3 CSS – tämä sivusto on loistava paikka pysyä ajan tasalla uusimmat CSS3 uutiset, koska tämä on juuri yhteisö, joka kehittää CSS3 web standardeja. Se on myös hyvä paikka selvittää teknisiä tietoja kielen.

CSS Validator – tämä on validaattori, jonka kautta sinun pitäisi ajaa kaikki CSS3 ennen kuin julkistaa sivuston. Tämä on, jotta voidaan varmistaa, että CSS3 täyttää web standardeja W3!

responsiivinen Design

internet on kulkenut pitkän tien perustamisestaan lähtien. Tämä johtuu osittain kynnyksellä älypuhelimet ja tabletit, ja leviämisen tämäntyyppisten teknologian osaksi jokapäiväistä elämää. Näiden laitteiden valtavan suosion seurauksena merkittävä osa internetin kokonaiskäyttäjistä katsoo verkkosivustoja huomattavasti pienemmillä näytöillä kuin keskimääräinen kannettava tietokone. Lisäksi he ovat vuorovaikutuksessa näiden verkkosivustojen kanssa ei käyttämällä kursoreita, käyttämällä sormiaan. Siksi, moderni sivusto on voitava sopeutua erilaisia laitteita, jotka ovat siellä. Tässä on reagoiva suunnittelu tulee kuvaan. Käyttämällä responsive design, suunnittelijat voivat tehdä sivuston, joka voi säätää sen koko layout perustuu laitteen tyyppi sitä tarkastellaan.

on hyvä idea päättää etukäteen, haluatko uuden sivuston ominaisuus reagoiva suunnittelu tai ei ennen kuin aloitat rakentamisen HTML5 ja CSS3. Tämä johtuu siitä, että kun koodaat reagoiva osa sivuston suunnittelu, sinun täytyy työskennellä CSS3 media kyselyt. Käyttämällä näitä media kyselyt, voit määritellä erilaisia kuvioita ja tyylejä eri näytön päätöslauselmia.

muista koskaan käyttää kiinteitä leveyksiä, käytä prosentteja sen sijaan. Tätä kutsutaan fluid tai liquid layout design, jonka avulla voit optimoida sivuston ei vain resoluutiot määritelty mediakyselyissä, mutta kaikki päätöslauselmat niiden välillä samoin. Tämä on valtava etu sivustollesi, koska älypuhelimet, tabletit ja tietokoneet, jotka ovat tulossa ulos tänään on niin monia eri kokoja, ja siksi päätöslauselmat, ja sinun täytyy sijoittaa ne kaikki.

responsiiviset resurssit

tässä on hienoja resursseja, joita voit käyttää muistin virkistämiseen tai responsiiviseen suunnitteluun ja kaikkeen siihen liittyvään koodaukseen:

Google responsiivinen – tämä on loistava resurssi niille teistä, jotka ovat uusia responsiivisessa suunnittelussa käyttäen CSS3-mediakyselyjä.

Principles of Responsive Webdesign-Lue tämä artikkeli ymmärtääksesi eron responsive web designin ja adaptive web designin välillä. Siinä on hienoja esimerkkejä, joiden avulla voit ymmärtää asioita yksityiskohtaisesti!

Fluid Grids – voit käyttää tätä Ethan Marcotten erinomaista artikkelia oppiaksesi fluid gridsistä ja niiden käytöstä. Kokeile itse käyttää kirjoituksessa annettuja esimerkkejä!

responsiivinen front-end framework

jos et halua oppia CSS3: n mediakyselyissä, tai ehkä sinulla ei yksinkertaisesti ole tarpeeksi aikaa siihen, kokeile sen sijaan responsiivista front-end framea. Jos päätät käyttää grid framework, muista, että sinun täytyy soveltaa samaa framework CSS sekä HTML, koska työskentelet ennalta määriteltyjen luokkien ja tunnukset yhdistää kehyksen luotu HTML5 CSS3. Käyttämällä reagoiva front-end puitteet varmasti voit kehittää sivuston paljon nopeammin, mutta haittapuoli se myös hidastaa sivuston latausajat, koska suuri määrä koodia, että et käytä.

joitakin suosituimpia front-end-kehyksiä ovat:

Bootstrap-tämä reagoiva kehys on melko helppo toteuttaa, ja lisäbonuksena on, että se käyttää CDN: tä vähentämään sivustosi latausnopeuksien vaikutusta.

vähemmän – tämä on mukautuva CSS grid framework eikä reagoiva, jonka avulla voit luoda mukautuva asettelu.

Foundation-tämä on front-end grid framework, jonka tiedostokoko on ehdottoman pieni, jotta voidaan minimoida sen vaikutus sivustosi latausnopeuteen.

JavaScript (vs CSS3)

JavaScript on yksi maailman suosituimmista ohjelmointikielistä tällä hetkellä. Tämä johtuu siitä, että sitä tukee laaja valikoima selaimia ja myös siitä, että se sisältää kirjastoja, kuten jQuery, ja backend järjestelmiä, kuten Node.js sekä kehyksiä kuten AngularJS. Ei ole ihme, että niin monet kehittäjät vannovat tämän ohjelmointikielen nimeen! Viime aikoina JavaScript on kuitenkin alkanut vanhentua, sillä monet sen toiminnoista ovat alkaneet siirtyä CSS3-animaatioihin, joiden avulla tyylien välisiä siirtymiä voi animoida.

Javascript resurssit

W3 – tämä on erinomainen paikka aloittaa, Jos olet uusi JavaScript, kiitos erinomainen opetusohjelma, joka on saatavilla tällä sivustolla.

jQuery – kun sinulla on jonkin verran kokemusta JavaScriptistä, voit alkaa käyttää tämänkaltaisia kirjastoja ohjelmoidaksesi paljon helpommin. jQuery on suosituin JavaScript kirjasto Mailin.

NodeJS – jos pidät enemmän backend-järjestelmistä, mutta samalla rakastat JavaScriptiä, tsekkaa tämä sivusto.

AngularJS-Yhdistä HTML: n ja Javan valtavat voimat käyttämällä tätä kehystä ja saat dynaamisia näkymiä.

muista tarkistaa seuraa resursseja ennen kuin aloitat JavaScript animoida elementtejä sivustossasi, kun voit luultavasti myös käyttää CSS3:

CSS3 Animations – jälleen kerran käännymme w3schools meidän CSS3 tutorials. Tutustu tällä sivustolla oleviin demoihin ymmärtääksesi kaikki eri CSS3-animaatiot.

Mozilla Animations – lisää tietosi CSS3-animaatioista Mozillan toimittamien yhdeksän näytteen ja esimerkin avulla.

neljäs vaihe: Rakenna WordPress teema tiedostoja

nyt, kun olet onnistuneesti muuntaa PSD malleja HTML5, CSS3 ja JavaScript, on aika suuri muuntaminen: kääntämällä HTML osaksi täysin reagoiva WordPress teema. Muista seurata WordPress malli hierarkia, jotta voit varmistaa teemoja todella toimii. Yleisjärjestys on aloittaa otsikosta.php, jota seuraa index.php, alatunniste.php ja tyyli.css. Käytät näitä neljää mallia kaikilla sivustosi sivuilla.

kun olet täysin ymmärtänyt, miten mallihierarkia toimii, sinun täytyy alkaa hajottaa HTML-tiedostoja palasiksi. Voit aloittaa luomalla kansion teemoja kansio, joka löytyy WordPress asennus, jonka osoite on/wp-content/themes/. Luo tiedoston otsikko.php tässä kansiossa. Tämä tiedosto on mitä voit käyttää julistaa asiakirjan tyyppi sekä kaikki kohteet, jotka kuuluvat otsikon sivun, kuten metat, otsikko, tyylisivut, JavaScript ja niin edelleen. Kun olet tehnyt tämän, luo alatunniste.php ja liitä kaikki alatunnisteen elementit HTML-asiakirjaan. Jos sivustosi suunnittelu sisältää sivupalkin, Luo tiedosto nimeltä sivupalkki.php sekä ja sisältävät kaikki asiaankuuluvat koodaus tässä tiedostossa.

kun olet saanut luotua kaikki näissä tiedostoissa olevat verkkosivustosi elementit, sinun on aloitettava kotisivusi luominen. On olemassa useita tapoja voit tehdä tämän. Esimerkiksi, voit yksinkertaisesti luoda indeksi.php, Etusivu.php tai page-home.php, mikä tahansa näistä tiedostoista sopii mitä yrität tehdä niin lopullinen valinta on täysin sinun. Nyt kun olet tehnyt luoda yksi kolmesta malleja etusivullesi, sisältävät kaikki .php tiedostot olet juuri tehnyt. Nyt kun sinulla on ylä -, ala-ja puoli valmiina, liitä HTML5 kotisivusi välillä ja olet onnistuneesti luonut kotisivun sivustosi. Seuraa vain samaa prosessia kaikille sivustosi sivuille ja voit siirtyä seuraavaan ja viimeiseen vaiheeseen.

vaihe viisi: käytä WordPress sisäänrakennettuja tageja ja toimintoja

kun olet onnistunut luomaan WordPress-teeman, sinun täytyy nyt varmistaa, että voit muokata verkkosivustoasi admin-paneelissa sen sijaan, että sinun pitäisi muuttaa teematiedostoa joka kerta, kun haluat muuttaa jotain. Mahdollisesti suosituin WordPress toimintoja tehdä kaikki sisältö muokattavissa kautta admin paneeli on lisäämällä add_meta_box toiminto. Yksinkertaisesti perustaa meta laatikot sisältöä kullakin sivulla ja olet hyvä mennä!

verkkosivujesi ydintoimintojen luominen on melko helppoa WordPressin avulla. Esimerkiksi, näytetään tietoja, kuten linkkejä sivustoilla voidaan tehdä helposti käyttämällä WordPress toimintoja. Yksinkertaisesti tarkistaa toiminnon viite sivun WordPress nähdä kaikki käytettävissä olevat toiminnot.

vastaavasti WordPress tarjoaa myös mallitunnisteita. Nämä ovat pohjimmiltaan toimintoja itse, ainoa ero on, että ne luotiin nimenomaan tiettyjä teemoja, jotka tekevät niistä tehokkaampia.

WordPress-valikko

kun kirjaudut verkkosivustosi admin-paneeliin, haluat todennäköisesti muuttaa valikoiden valikkoja ja ulkoasua, jotta sinun ei tarvitse muokata sitä admin-paneelissa. Tämä on melko helppoa, koska käytät WordPress, sinun tarvitsee vain korvata valikkoluettelon mallin tiedoston yhdellä rivillä PHP, jonka jälkeen voit aloittaa lisäämällä valikkokohteet.

saattaa olla tilanteita, joissa sisäsivulla on eri otsikko tai alatunniste. Jos haluat lisätä tämän toiminnon verkkosivustoosi, sinun tarvitsee vain lisätä ehdollisia tunnisteita. Näiden avulla voit soveltaa eri koodia valituille sivuille tai virkaa.

kun WordPress-sivusto on toiminnassa kehityspalvelimellasi, sinun tarvitsee vain saada se live-palvelimellesi. Tässä on artikkeli, jossa se on selitetty yksityiskohtaisesti, miten siirrät WordPress sivuston, askel askeleelta. Seuraa vain kaikkia kuutta vaihetta ja sinulla on sivustosi toiminnassa live-palvelimella ei ole aikaa.