Share
Så du har nettopp kjøpt en HTML-mal, og nå må du tilpasse den før du kan sette den på nettet, men du er ikke erfaren av kode, så du er ikke sikker på hvordan du skal gjøre det. Vel, vær lett, for i denne opplæringen skal vi gå gjennom hele prosessen.
Vi skal jobbe ut fra antagelsen om at du aldri har sett en linje med HTML før, enda mindre redigert en, så uansett hvor ny du skal jobbe med kode, vil du bli vist nøyaktig hva du skal gjøre hvert trinn i vei.
La oss starte helt fra begynnelsen.
Teknisk sett er svaret på dette spørsmålet "Hyper Text Markup Language". Men med det formål å tilpasse en mal, kan du vurdere HTML som en serie med åpne og lukke koder som dette:
Etiketter er angitt med < og > tegn, og den avsluttende koden inneholder alltid a /. Par med tagger har innhold i mellom dem som dette:
John Smith, Front End Developer
Noen ganger er det imidlertid også stå alene, uten avslutningspartner, slik:
Ulike HTML-koder gir forskjellige typer innhold på en nettside. Ovenstående eksempel på Etiketter vil skape en stor overskrift som leser "John Smith, Front End Developer", og eksemplet
For å redigere en HTML-mal er alt som du trenger å vite, hvilke koder som representerer delene av siden du vil endre, hvordan du finner dem i koden, og hvordan du redigerer dem slik at de viser hva du vil.
Ja, det er helt mulig å redigere HTML i Notisblokk eller et lignende program, men det vil gå mye mer jevnt for deg hvis du bruker en ordentlig kodedigeringsapp. En av hovedårsakene er at du får farget utheving av koden din, som du vil se kort, noe som vil gjøre det mye lettere å lese og redigere.
Jeg anbefaler Sublime Text, som du kan laste ned her: https://www.sublimetext.com/3
Last ned malen du har kjøpt. I tilfelle av denne opplæringen bruker vi denne "Clean CV" -malen for å demonstrere.
De fleste HTML-maler vil komme i en ZIP-fil - hvis ja, gå videre og hent ut ditt nå. Deretter ser du rundt i malens mapper til du finner filen "index.html" eller "index.htm".
I vårt eksempel CV-mal er filen "index.html" funnet i katalogen "01.html-nettsted".
Nå åpner du filen i Chrome. Selv om Chrome ikke er standard eller foretrukket nettleser, bruk det allikevel, fordi vi skal jobbe med noen verktøy som den har innebygd for å hjelpe deg med redigeringsprosessen.
Hvis dette er første gang du redigerer en mal, prøv å ikke bli trukket inn i ideen om å justere fargene og oppsettet ennå. For å gjøre det må du grave inn i CSS, språket som er ansvarlig for sidestyling. Det er en god ide å fokusere på en ting om gangen når du er ny til maltilpasning, og HTML er det beste stedet å starte.
For å få ballen til å rulle, ta en titt på malen din i Chrome, og finn ut hvilke skriftlige elementer og bilder på siden du må endre. Hvis du vil, kan du forberede en liste slik at du kan gå gjennom og kontrollere hvert element av når du gjør endringene dine.
I tilfelle av vår CV-mal ønsker vi å endre:
Nå har vi en liste over elementer som skal endres, vi kan angi om de finner deres tilsvarende HTML-koder i koden. La oss starte med navnet.
Høyreklikk på navnet, som leser "John Smith" som standard, og velg Undersøke:
Et panel som dette skal åpnes i nettleseren din:
Panelet "Inspeksjon"Dette panelet gir deg en interaktiv måte å se på koden. Hold musen over linjen som viser ...
Ved å sveve musen over ulike linjer med kode og se hvilke områder av siden lyser, hjelper dette panelet deg med å finne ut hvilken kode som tilsvarer hvilket element. Du holder bare svinger over forskjellige kodelinjer til den delen du leter etter lyser opp.
Utvid nå h1 merker ved å klikke på den lille trekant til venstre, og du bør se innholdet mellom dem, dvs.. John Smith Front End Developer.
Denne formuleringen stemmer overens med det du ser på skjermen, så du vet at du har funnet den riktige delen av koden.
Det er nå på tide å åpne HTML-filen din for redigering. Åpne filen "index.html" i Sublime Text, og du bør se noe slikt:
Du vil finne koden her som samsvarer med det du så i Chrome-inspektøren. Bla gjennom til du finner den på linjene 61 - 64.
Nå kan du redigere innholdet mellom kodene for å endre navn og yrke til din egen. Først, rediger "John Smith" til eget navn:
Deretter i mellom tags, endre "Front End Developer" til ditt eget yrke.
Lagre filen, og oppdater deretter malen i Chrome. Du bør se at endringene dine ser ut som slik:
Nå har du den grunnleggende prosessen ned:
La oss gjenta prosessen for å redigere resten av innholdet vi vil tilpasse.
Deretter legger vi til vårt eget bilde til venstre for navn og yrkesområde. Høyreklikk bildet og inspiser det, og merk den tilhørende taggen:
Du kan se i inspektørvinduet denne linjen ligger rett over linjene vi nettopp har endret:
Gå til HTML-filen din og finn taggen på linje 59:
For denne taggen må du endre verdien av src attributt du ser inne i img stikkord. Du gjør dette ved å redigere hva som er mellom siteringstegnene. Du endrer den til filnavnet og plasseringen av ditt eget bilde.
Ta et bilde av deg selv som er 150px med 150px i størrelse, (se bort fra at filnavnet der står 140x140.png, størrelsen er faktisk 150x150).
Slett bildet ditt i «_content» -undermappen; Det er i samme mappe som filen "index.html".
Nå, i HTML-filen din, endre verdien til src attributt, erstatte "140x140.png" med filen du nettopp har lagt til «_content» -undermappen. Pass på å sjekke filutvidelsen du skriver ut, er den samme som den på filen din, f.eks. "Png" / "jpg":
Lagre filen, oppdater Chrome, og du bør se det nye bildet dukker opp:
La oss nå redigere koblingene på ikonene for sosiale medier i øverste høyre hjørne av malen. Høyreklikk på et av ikonene, og kontroller det, som før. I vinduet, se på linjen over den som er uthevet, og du vil se at den inneholder teksten "facebook-ikon". Vi skal bruke dette for å finne koden i vår HTML-fil.
Tilbake i Sublime Text, trykk CTRL + F og kjør et søk for "facebook-ikon". Du bør finne den på linje 75.
De en tag på linje 75 er det som lager koblingen på ikonet, og href attributt du ser inne, bestemmer hvor den linken skal gå. Du må endre verdien av det href Tilskrive til Facebook-nettadressen din (for eksempel: https://www.facebook.com/mylink).
Bytt ut # Det er som standard med nettadressen din. Deretter gjør du det samme for Twitter på linje 79, Google+ på linje 83 og LinkedIn på linje 87.
Hvis det er et ikon du vil fjerne helt, merker du linken som starter ved åpningen tag og etterbehandling ved avslutningen tag, og slett deretter koden.
Lagre og oppdatere nettstedet ditt nå, så når du klikker koblingene, skal de gå til riktig sted.
Neste opp, la oss endre kontaktinformasjonen rett under de sosiale ikonene.
Start med å inspisere ordet "Email", så vi kan finne hvor denne delen av kontaktinformasjonen starter i koden. Legg merke til koden du har markert, og linjen under det slik at du kan matche den i HTML-filen din.
I Sublime Text, trykk CTRL + F igjen og denne gangen søk etter "Email". Du må finne forekomsten av ordet "Email" som er omgitt av kode som passer til det du så i inspektørvinduet.
Du finner det på linje 94. Merk av standard e-postadressen "[email protected]" på de to stedene på den linjen:
Så erstatt den med din egen e-postadresse. På neste linje kan du også erstatte telefonnummeret med din egen, og på linjen nedenfor kan du erstatte webadressen med din egen:
La oss nå gå videre og begynne å redigere de viktigste CV-delene av malen. Det er noen få deler til disse seksjonene, så vi skal begynne med å inspisere hver av dem, så du vet hva du skal se etter i koden din. Dette vil også være en sjanse for deg å lære litt mer om å flytte gjennom inspektørvinduet for å finne forskjellige deler av nettstedet ditt.
Rull ned til delen Profesjonell profil, høyreklikk i teksten og kontroller det.
I inspektøren ser du at den har markert a p tag-denne taggen er ansvarlig for å lage avsnitt i teksten.
Deretter vil vi vite hva en hel del av teksten i en CV-del ser ut i kode, ikke bare enkelte avsnitt. I inspektørvinduet klikker du på linjen med kode over avsnittet du nettopp har inspisert, og du bør se hele teksten lyser:
Dette forteller deg at hver del av koden er pakket inn i kodene div er kort for a inndeling, og disse kodene brukes til å kontrollere layout og styling.
Kontroller nå CV-seksjonens tittel, "Profesjonell profil":
Først vil alt du ser er et annet sett av div tags. Dette skyldes at selve overskriften er nestet mellom disse kodene.
Treff den lille trekanten på slutten av linjen for å utvide den og se innholdet, og gjør det samme igjen på neste linje til du ser "Profesjonell profil" -teksten du leter etter. Du finner den pakket inn i ...
Nå vet vi hvordan koden ser ut til hver del av denne CV-delen, vi kan gå tilbake til Sublime Text og begynne å redigere den.
Plasser markøren rett øverst i HTML-dokumentet ditt, slik at du kan begynne å søke fra toppen. trykk CTRL + F og søk etter "cv-item". Fortsett å se til du finner forekomsten av koden Nå kan du erstatte teksten for profesjonell profil seksjonen med din egen. Wrap hvert avsnitt av teksten med ... Når du er ferdig, må du kontrollere at åpningsfeltet i det siste avsnittet i delen inneholder attributtet ... Hvis du lagrer HTML-dokumentet ditt og oppdaterer nettstedet ditt, bør du se alt i de to øverste seksjonene er tilpasset. Nå kan vi fortsette å redigere de gjenværende CV-artiklene på samme måte som vi bare gjorde med "Profesjonell profil". Inspiser hver del av hver seksjon for å gjøre deg kjent med koden du bør se etter for å redigere dem. Kontroller en jobbtittel: Kontroller en jobbperiode: Kontroller en kolliste: Bruk samme tilnærming som du gjorde for å redigere delen "Profesjonell profil" for å redigere innholdet i de gjenværende CV-seksjonene. Hvis du vil redigere jobbtitler, finner jobbperioder eller punktlister koden som samsvarer med det du så i inspeksjonsvinduet, akkurat som du har gjort med hver redigering så langt. Bruk ... Merk: Hvis du vil legge til nye CV-seksjoner, eller fjerne eksisterende, må du bruke inspektøren til å finne kodetakene som vikler hele delen. I dette eksemplet ser du hele delen er pakket inn med kodene I koden din kan du nå finne hele koden og enten kopiere og lime inn den for å lage et nytt element, eller slette mye hvis du vil bli kvitt det. Når du har redigert CV-seksjonene, er vi ned til det siste elementet på listen over endringer. opphavsrettsmeldingen i bunnteksten. Igjen bruker vi den samme prosessen. Høyreklikk på opphavsrettsmeldingen og inspiser den: Finn deretter den matchende koden i HTML-en og rediger den med inneværende år og ditt eget navn: Bra gjort! Du har akkurat tilpasset denne HTML-malen for å vise ditt eget innhold. Jeg håper du føler deg trygg på å ta på deg mer kodeopppasning i fremtiden. Malen vi jobbet på, kan være relativt enkel, men husk at prosessen for redigering alltid er den samme, uansett hvor komplisert en mal kan virke. Bare inspiser malen og identifiser koden for den delen du vil endre, og finn den koden i HTML-filen din og rediger den. Når du redigerer, hvis du ser en HTML-kode, forstår du ikke, ikke la det holde deg tilbake. Det finnes uendelige mengder informasjon på Internett for å hjelpe deg med å lære hva hver og en gjør. For litt ekstra hjelp underveis, sjekk ut disse gode læringsguider:Profesjonell profil
klasse med verdien siste, som dette: 
p koder for å lage avsnitt, og som med delen "Profesjonell profil", hvis du avslutter en seksjon med et avsnitt, må du kontrollere det tag inkluderer class = "siste", dvs. 
Rediger opphavsrettsmelding
Og du er ferdig!
Accentsconagua
