denne artikel er blevet bidraget af PSDtoWP.net

måske ville det være bedst at starte her med hvorfor. Omkring en fjerdedel af alle hjemmesider kører på online blogging platform. Dette gør det langt et af de mest populære open source content management systemer på planeten.

langt de fleste internetdesignere bruger stadig Photoshop til at designe en hjemmeside, selvom der er alternativer. Det betyder, at en masse hjemmeside designere nødt til at finde måder på hvordan man kan konvertere PSD-filer til en lydhør tema!

nu kan det virke ret ligetil. Det er dog ikke ligefrem nemt at konvertere en PSD-fil til en hjemmeside. Det kræver meget mere end bare Photoshop-færdigheder! For at gøre din PSD-fil til et responsivt tema, der kan bruges på , skal du have viden om frontend-udviklingssprog som HTML, CSS og JavaScript samt backend-programmeringssproget PHP.

nu hvor hvorfor er ude af vejen, er det tid til at gå videre til hvordan! Selvom hvor bestemt ikke er let, det kan stadig opnås i fem ret enkle at forstå trin!

trin et: Opret internetdesign

Spring til trin to, hvis du allerede har designet din hjemmeside.

der er meget mere ved at lave en hjemmeside end blot at oprette et logo og sætte en menu, en sidebjælke, en sidefod og indholdet sammen. Brikkerne i dette puslespil skal oprettes i første omgang, og processen med denne skabelse er noget, som ikke alle kan gøre så nemt.

det internetdesign, du opretter, skal være den perfekte balance mellem form og funktion, et internetdesign, der passer til en god brugeroplevelse.

Forskning

for at skabe et internetdesign, der med succes opfylder kriterierne for udseende og funktionalitet, skal du gøre nogle seriøse undersøgelser. Først og fremmest, hvem er din målgruppe, og hvad ønsker din målgruppe? Disse er naturligvis centrale aspekter af din forskning.

Lær af andre

et andet aspekt af internetdesign, som du skal undersøge, er de teknikker, dine konkurrenter har anvendt. Disse konkurrenter er sandsynligvis bedre etableret end du er, så du vil helt sikkert kunne lære meget af det design, de bruger! Når du har gjort din forskning, og du har en god ide om, hvordan din hjemmeside skal se ud, skal du begynde at tænke på funktionalitet. Hvilke funktioner ønsker du, at dit design skal have?

trådramme

når du har ALT sorteret ud, få det ned på papir. Tegn & skitse, hvordan du forestiller dig, at din side skal se ud for at få et visuelt hjælpemiddel, når du bevæger dig fremad!

Design

når du er færdig med at lave de fysiske skitser / trådrammer, er du klar til at hoppe ind i kaptajnens stol og fyre op Photoshop. Den første ting, du skal gøre, før du begynder for alvor, er at sikre dig, at du bruger et kolonnebaseret gitter som f.eks. Dette får dit design til at se rigtig ryddeligt og justeret ud! Dette er ikke kun for æstetik. Brug af et kolonnebaseret gitter til at oprette et justeret design gør det lettere for dig eller din frontend-udvikler, der vil udvikle HTML og CSS for at skabe et optimeret, responsivt layout til tablets og smartphones!

inden du går videre til næste trin, skal du huske, at du skal holde dine PSD-designfiler organiseret i lag, dvs. hvert afsnit skal have sin egen mappe med tilsvarende titler!

Trin To: Skær PSD

når du har oprettet et hjemmeside design, som du er helt tilfreds med, er det crunch tid. Grundlæggende hvad du skal gøre nu er PSD til ordtryk proces.

hjemmesider i disse dage er alle bygget ved hjælp af HTML5 og CSS3. Disse er langt bedre end CSS2, fordi i stedet for alle knapper, kanter, gradienter, afrundede kanter og alle de andre funktioner, der oprettes ved hjælp af billeder, oprettes de som funktionelle dele af CSS3-kodningen. Derfor vil udskæring af PSD-filen stort set nu kun involvere udskæring af baggrundsbillederne fra PSD!

for at gøre dette skal du åbne filen i enten Photoshop eller Illustrator, afhængigt af hvilket program du brugte til at oprette designet. Hvis designeren havde gjort sit job rigtigt, ville han have oprettet en velstruktureret designfil med mapper og lag, hvilket gjorde det nemt for dig at finde det, du har brug for. Undersøg internetdesignet og se efter billeder, som du tror ville have brug for udskæring. Dette er dybest set alle billeder, der ikke kan oprettes ved hjælp af CSS3, normalt logoet og baggrundsbillederne. Læs hvordan du skærer billeder her.

når du udskifter disse baggrundsbilleder ved hjælp af CSS, vil du se et enormt fald i belastningstider. Dette ville tiltrække en masse brugere til din hjemmeside, fordi den gennemsnitlige internetbruger ikke kan stå lange loading tider!

trin tre: Opret HTML, CSS3 og JavaScript

når du har skåret billederne fra din PSD-fil, er det tid til at oprette HTML5 og CSS3. Det første du skal gøre er at oprette en ny mappe, hvor du opretter indeks.html og stil.css. Opret også en undermappe kaldet billeder eller img (alt efter hvad du foretrækker) og placer de billeder, du har udpakket i denne mappe. Opret en anden mappe kaldet JavaScript eller js. Dette er til senere, så du kan gemme alle JavaScript-og jesperyfilerne på et godt markeret sted. Når du er færdig med at oprette alle mapper, filer og undermapper, er det tid til at begynde at opbygge HTML5 og CSS3.

HTML5

HTML5 er et relativt nyt sprog, der besidder både HTMLL såvel som HTML-funktionaliteter. Dette sprog bruges i det væsentlige til at oprette dokumentets grundlæggende struktur samt udpege alle elementerne på siden. HTML5 har separate elementer til de forskellige sektioner på din hjemmeside, såsom <header >, < nav>, < bortset>samt < footer> elementer (og meget mere), som gør det muligt at oprette et pænt, velstruktureret dokument, der er universelt læsbart. Her er nogle fremragende ressourcer, som du kan bruge til at lære eller opdatere din hukommelse om HTML5.

HTML ressourcer

H3schools er nummer top hjemmeside for at lære det grundlæggende i HTML5. Hvert element og attribut på dette sprog forklares og undervises ved hjælp af demoer, hvilket giver en nem læringsoplevelse.

en udviklersektion – folkene bag den populære bro.ser har en udviklersektion på deres hjemmeside. Du kan bruge dette afsnit til at lære meget om HTML5 gennem de tutorials, de har der, uanset om du er nybegynder eller en avanceret koder.

Tuts – denne hjemmeside har en masse forskellige HTML5 tutorials, hvoraf nogle er gratis og nogle er betalt for.

V3 – denne hjemmeside er ansvarlig for udviklingen af alle de åbne internetstandarder, der er oprettet for at sikre nettets levetid. Her kan du finde dybdegående information om HTML5 samt alle dens seneste udviklinger.

V3 Validator – når du har afsluttet din HTML5, skal du sætte den gennem denne validator. Det vil fortælle dig,om din HTML5 opfylder de åbne standarder for H3!

CSS3

CSS refererer til Cascading stilark, og CSS3 er den nyeste version af dette front-end sprog. CSS3 bruges til at tage de blotte knogler af de elementer, der er oprettet ved hjælp af HTML5 og form, position og stil dem. Dette giver dig mulighed for at oprette et ensartet internetdesign, hvor alle elementerne bekræfter med stedets overordnede design. Når du har brugt CSS3, vil du opdage, at din HTML5 vil være meget renere og mere velstruktureret, hvilket igen gør det muligt at indlæse meget hurtigere såvel som at lade den indekseres hurtigere af søgemaskiner. Nedenfor er nogle ressourcer til at hjælpe dig med at lære eller opdatere din hukommelse om CSS3:

CSS Resources

H3 CSS – H3 er på de mest kendte og berømte ressourcer til CSS3 tutorials og eksempler på de forskellige CSS3 selektorer, egenskaber og værdier. Det bedste ved dette er, at hver tutorial har en ‘prøv det selv’ Side, som lader dig anvende det, du har lært.

Lær CSS3. Det er også et glimrende sted at få dig fortrolig med CSS3, samt opdatere din viden om sproget.

CSS design Tuts – denne hjemmeside indeholder en hel overflødighedshorn af tutorials, som du kan gå igennem. Nogle af disse tutorials skal betales for, men andre er stadig helt gratis og kan lære dig meget om CSS3-vælgere, egenskaber og værdier.

V3 CSS – denne hjemmeside er et godt sted at holde sig opdateret med de nyeste CSS3 nyheder, fordi dette er selve Fællesskabet, der udvikler CSS3 Internet standarder. Det er også et godt sted at finde ud af tekniske oplysninger om sproget.

CSS Validator – dette er validatoren, hvorigennem du skal køre alle dine CSS3, før du gør hjemmesiden offentlig. Dette er for at sikre, at din CSS3 opfylder de internetstandarder, der er fastsat af V3!

responsivt Design

internettet er kommet langt siden starten. Dette skyldes til dels fremkomsten af smartphones og tablets og spredningen af disse typer teknologi i vores hverdag. Som et resultat af den enorme popularitet af disse enheder ser en betydelig del af de samlede brugere af internettet på hjemmesider På betydeligt mindre skærme end den gennemsnitlige bærbare computer. Derudover interagerer de med disse hjemmesider, ikke ved at bruge markører, ved at bruge deres fingre. Derfor skal den moderne hjemmeside være i stand til at tilpasse sig de forskellige typer enheder, der er derude. Det er her responsivt design kommer ind. Ved hjælp af lydhør design, designere er i stand til at gøre en hjemmeside, der kan justere hele sit layout baseret på den type enhed, det bliver set på.

det er en god ide at beslutte på forhånd, om du vil have din nye hjemmeside til at have responsivt design eller ej, før du begynder at bygge HTML5 og CSS3. Dette skyldes, at når du koder den responsive del af din hjemmesides design, skal du arbejde med CSS3-medieforespørgsler. Ved hjælp af disse medieforespørgsler kan du definere forskellige teksturer og stilarter til forskellige skærmopløsninger.

husk aldrig at bruge faste bredder, brug procenter i stedet. Dette kaldes flydende eller flydende layout design, som giver dig mulighed for at optimere din hjemmeside ikke kun for de opløsninger, der er defineret i dine medieforespørgsler, men også for alle opløsningerne mellem dem. Dette er en kæmpe fordel for din hjemmeside, da smartphones, tablets og computere, der kommer ud i dag, har så mange forskellige størrelser og derfor opløsninger, og du skal rumme dem alle.

Responsive Resources

her er nogle gode ressourcer, du kan bruge til at opdatere din hukommelse eller lære om responsivt design og Al relateret kodning:

Google Responsive – dette er en stor ressource for dem af jer, der er nye til responsivt design ved hjælp af CSS3 medieforespørgsler.

principper for responsivt design – læs denne artikel for at forstå forskellen mellem responsivt design og adaptivt design. Det har nogle gode eksempler, der hjælper dig med at forstå tingene i detaljer!

Fluid Grids – du kan bruge denne fremragende artikel af ethan Marcotte til at lære om fluid grids og hvordan man bruger dem. Prøv at bruge eksemplerne i artiklen selv!

Responsive front-end-rammer

hvis du ikke er villig til at lære rebene for så vidt angår CSS3-medieforespørgsler, eller måske har du simpelthen ikke tid nok til det, kan du prøve at bruge en lydhør front-end-ramme i stedet. Hvis du beslutter dig for at bruge en gitterramme, skal du huske, at du skal anvende den samme ramme på CSS såvel som HTML, da du vil arbejde med foruddefinerede klasser og ID ‘ er for at forbinde rammen oprettet ved hjælp af HTML5 til CSS3. Ved hjælp af en lydhør front-end ramme vil helt sikkert give dig mulighed for at udvikle din hjemmeside meget hurtigere, men på ulempen vil det også bremse din hjemmesides indlæsningstider på grund af den store mængde kode, som du ikke bruger.

nogle af de mest populære front-end rammer er:

Bootstrap – denne responsive ramme er forholdsvis let at implementere, og en ekstra bonus er, at den bruger en CDN til at reducere virkningen af din hjemmesides indlæsningshastigheder også.

LESS – dette er en adaptiv CSS-gitterramme snarere end en lydhør, der giver dig mulighed for at oprette et adaptivt layout.

Foundation – dette er en front-end grid ramme med en Filstørrelse, der er helt lille for at minimere den indvirkning, det vil have på din hjemmesides indlæsningshastighed.

JavaScript (vs CSS3)

JavaScript er et af de mest populære programmeringssprog i verden i øjeblikket. Dette skyldes, at det understøttes af en lang række bro.sere og også på grund af det faktum, at det indeholder biblioteker som f. eks.js samt rammer som AngularJS. Det er ikke underligt, at så mange udviklere sværger ved dette programmeringssprog! I nyere tid er JavaScript imidlertid begyndt at blive forældet, da mange af dens funktioner er begyndt at blive overtaget af CSS3-animationer, som giver dig mulighed for at animere overgange mellem stilarter.

Javascript Resources

V3 – dette er et glimrende sted at starte, hvis du er ny til JavaScript, takket være den fremragende tutorial, der er tilgængelig på denne hjemmeside.

når du har erfaring med JavaScript, kan du begynde at bruge biblioteker som denne for at programmere meget lettere. det er det mest populære JavaScript-bibliotek med en kilometer.

NodeJS – hvis du foretrækker backend systemer, men samtidig elsker JavaScript, tjek denne hjemmeside.

AngularJS – Kombiner de formidable kræfter HTML og Java ved hjælp af denne ramme og få nogle dynamiske visninger.

sørg for at tjekke de følgende ressourcer, før du begynder at bruge JavaScript til at animere elementer på din hjemmeside, mens du sandsynligvis også kan bruge CSS3:

CSS3 animationer. Gennemgå demoer tilgængelige på denne hjemmeside for at forstå alle de forskellige CSS3 animationer.

Mosilla animationer – yderligere din viden om CSS3 animationer med de ni prøver og eksempler, som Mosilla har givet.

Trin fire: Byg temafilerne

nu hvor du har konverteret dine PSD-designs til HTML5, CSS3 og JavaScript, er det tid til den store konvertering: at gøre din HTML til et fuldt responsivt tema. Husk at følge skabelonhierarkiet for at sikre, at dine temaer rent faktisk fungerer. Den generelle rækkefølge er at starte med header.php, efterfulgt af indeks.php, sidefod.php og style.css. Du vil bruge disse fire skabeloner på alle siderne på din hjemmeside.

når du har en fuld forståelse af, hvordan skabelonhierarkiet fungerer, skal du begynde at bryde HTML-filerne i stykker. Du kan starte med at oprette en mappe i mappen Temaer, som du kan finde i din installation. Opret filhovedet.php i denne mappe. Denne fil er, hvad du vil bruge til at erklære dokumenttype samt alle de elementer, der hører til i overskriften på din side, såsom metas, Titel, stilark, javascripts og så videre. Når du er færdig med dette, skal du oprette sidefod.php og indsæt alle sidefodselementerne i dit HTML-dokument. Hvis designet af din hjemmeside indeholder en sidebjælke, skal du oprette en fil med navnet sidebar.php samt og omfatter alle de relevante kodning i denne fil.

når du har afsluttet oprettelsen af alle elementerne på din hjemmeside i disse filer, skal du begynde at oprette din startside. Der er flere måder, du kan gøre dette på. For eksempel kan du blot oprette indeks.php, forsiden.php eller side-Hjem.php, nogen af disse filer vil være egnet til det, du forsøger at gøre, så det endelige valg er helt op til dig. Nu hvor du er færdig med at oprette en ud af de tre skabeloner til din startside, skal du inkludere alle .php-filer, du lige har lavet. Nu hvor du har din top, bund og side klar, indsæt HTML5 på din hjemmeside imellem, og du vil med succes have oprettet hjemmesiden på din hjemmeside. Du skal blot følge den samme proces for alle siderne på din hjemmeside, og du kan gå videre til næste og sidste trin.

trin fem: brug indbyggede tags og funktioner

når du har oprettet temaet til dit ordtryk, skal du nu sørge for, at du er i stand til at redigere din hjemmeside fra adminpanelet i stedet for at skulle ændre temafilen hver gang du vil ændre noget. Muligvis er de mest populære funktioner til at gøre alt dit indhold redigerbart via adminpanelet ved at tilføje funktionen add_meta_boks. Du skal blot oprette metabokse til indholdet på hver side, og du er god til at gå!

oprettelse af kernefunktionaliteterne på din hjemmeside er ret nemt at bruge. For eksempel kan visning af oplysninger som links på dine hjemmesider gøres nemt ved hjælp af funktioner. Du skal blot kontrollere funktionsreferencesiden for at se alle tilgængelige funktioner.

tilsvarende tilbyder vi også skabelonmærker. Disse er i det væsentlige funktioner selv, med den eneste forskel, at de blev oprettet specifikt til specifikke temaer, der gør dem mere effektive.

når du logger ind på adminpanelet på din hjemmeside, vil du sandsynligvis gerne ændre menupunkterne i menuer og udseende, så du ikke behøver at redigere det ved hjælp af adminpanelet. Alt du skal gøre er at erstatte menulisten for skabelonfilen med en linje PHP, hvorefter du blot kan begynde at tilføje menupunkter.

der kan være situationer, hvor en indre side har en anden sidehoved eller sidefod. For at tilføje denne funktionalitet til din hjemmeside, alt hvad du skal gøre er at tilføje betingede tags. Disse giver dig mulighed for at anvende anden kode for udvalgte sider eller indlæg.

når din hjemmeside er oppe at køre på din udviklingsserver, skal du blot hente den på din live server. Her er en artikel, hvor det er forklaret i detaljer, hvordan du flytter en hjemmeside, trin for trin. Du skal blot følge alle de seks trin, og du vil have din hjemmeside op at køre på en live-server på ingen tid.