Share
Så du har just köpt en HTML-mall och nu måste du anpassa den innan du kan lägga den på nätet, men du är inte erfaren med kod så du är inte säker på hur du ska göra det. Nåväl, lugnt, för i den här handledningen kommer vi att gå igenom hela processen.
Vi kommer att arbeta utifrån antagandet att du aldrig har sett en rad HTML innan, än mindre redigerad, så oavsett hur ny du ska arbeta med kod kommer du att visas exakt vad du ska göra varje steg i sätt.
Låt oss börja i början.
Tekniskt sett är svaret på den här frågan "Hyper Text Markup Language". Men i syfte att anpassa en mall kan du betrakta HTML som en serie öppnings- och stängningskoder så här:
Taggar anges med < och > tecken, och stängningskoden innehåller alltid a /. Par av taggar har innehåll mellan dem så här:
John Smith, Front End Developer
Ibland finns det dock också fristående taggar, utan någon avslutande partner, så här:
Olika HTML-taggar gör att olika typer av innehåll visas på en webbsida. Ovanstående exempel på taggar skulle skapa en stor rubrik som läser "John Smith, Front End Developer" och exemplet
För att redigera en HTML-mall behöver du bara veta vilka taggar som representerar de delar av sidan du vill ändra, hur man hittar dem i koden och hur man redigerar dem så att de visar vad du vill.
Ja, det är helt möjligt att redigera HTML i anteckningsblock eller ett liknande program, men det går mycket smidigt för dig om du använder en korrekt kodredigeringsapp. En av de främsta anledningarna är att du får färgad markering av din kod, vilket du kommer att se inom kort, vilket gör det mycket lättare att läsa och redigera.
Jag rekommenderar Sublim Text, som du kan ladda ner här: https://www.sublimetext.com/3
Ladda ner mallen som du har köpt. I den här handledningen använder vi den här "Clean CV" -mallen för att visa.
De flesta HTML-mallar kommer i en ZIP-fil - om så, fortsätt och ta bort din nu. Kolla sedan in i mallens mappar tills du hittar filen "index.html" eller "index.htm".
I vårt exempel CV-mall finns filen "index.html" i katalogen "01.html-webbplats".
Öppna nu den filen i Chrome. Även om Chrome inte är din standard eller föredragna webbläsare, använd det ändå, för vi kommer att arbeta med några verktyg som den har inbyggd för att hjälpa dig med redigeringsprocessen.
Om det här är första gången du redigerar en mall, försök att inte dra nytta av tanken på att justera färger och layout ännu. För att göra det måste du gräva i CSS, språket som ansvarar för sidstyling. Det är en bra idé att fokusera på en sak i taget när du är ny för att anpassa mall och HTML är det bästa stället att börja.
För att få bollen att rulla, ta en titt på din mall i Chrome och ta reda på vilka skrivna element och bilder på sidan du behöver ändra. Om du vill kan du förbereda en lista så att du kan gå igenom och kolla varje objekt när du gör dina ändringar.
När det gäller vår CV-mall vill vi ändra:
Nu har vi en lista över objekt att ändra, vi kan ställa om att hitta motsvarande HTML-taggar i koden. Låt oss börja med namnet.
Högerklicka på namnet, som läser "John Smith" som standard och välj Inspektera:
En panel som denna ska öppnas i din webbläsare:
Panelen "Inspektion"Denna panel ger dig ett interaktivt sätt att titta på koden. Håll musen över linjen som visar ...
Genom att sväva musen över olika koder och se vilka områden av sidan som lyser, hjälper den här panelen dig att ta reda på vilken kod som motsvarar vilket element. Du fortsätter bara att sväva över olika streckkodar tills den del du letar efter lyser upp.
Expandera nu h1 taggar genom att klicka på den lilla triangeln till vänster och du bör se innehållet mellan dem, dvs. John Smith Front End Developer.
Denna formulering matchar vad du ser på skärmen, så du vet att du har hittat rätt del av koden.
Nu är det dags att öppna din HTML-fil för redigering. Öppna filen "index.html" i Sublime Text och du bör se något så här:
Du vill hitta koden här som matchar det du såg i Chrome inspektören. Bläddra tills du hittar den på rad 61 - 64.
Nu kan du redigera innehållet mellan taggarna för att ändra namn och yrke åt dig själv. Ändra först "John Smith" till ditt eget namn:
Sedan mellan taggar, ändra "Front End Developer" till ditt eget yrke.
Spara filen och uppdatera sedan mallen i Chrome. Du borde se dina ändringar se ut som så:
Nu har du den grundläggande processen ner:
Låt oss upprepa processen för att redigera resten av innehållet som vi vill anpassa.
Nästa lägger vi till vår egen bild till vänster om namn och yrkesområde. Högerklicka på bilden och inspektera den och anteckna motsvarande tagg:
Du kan se i inspektionsfönstret den här raden är direkt ovanför de linjer vi just ändrat:
Gå till din HTML-fil och leta efter taggen på rad 59:
För den här taggen måste du ändra värdet på src ange att du ser inuti img märka. Du gör det genom att redigera vad som ligger mellan citattecken. Du ändrar det till filnamnet och platsen för din egen bild.
Ta en bild av dig själv som är 150px med 150px i storlek, (ignorera att filnamnet där står 140x140.png, storleken är faktiskt 150x150).
Släpp din bild i undermappen "_content"; Det ligger i samma mapp som din "index.html" -fil.
Nu ändrar du värdet på. I din HTML-fil src attribut, ersätta "140x140.png" med den fil du just lagt till i "_content" undermappen. Var noga med att kontrollera filförlängningen du skriver ut är densamma som den på din fil, t.ex. "Png" / "jpg":
Spara din fil, uppdatera Chrome, och du borde se din nya bild visas:
Låt oss nu redigera länkarna på sociala medierikonen i det övre högra hörnet av mallen. Precis som tidigare högerklickar du på en av ikonerna och inspekterar den. I fönstret, titta på raden ovanför den som är markerad och du ser att den innehåller texten "facebook-ikon". Vi ska använda detta för att hitta koden i vår HTML-fil.
Tillbaka i Sublime Text, tryck på CTRL + F och kör en sökning för "facebook-ikon". Du borde hitta den på rad 75.
De en tagg på rad 75 är det som skapar länken på ikonen och href att du ser inuti det bestämmer var den länken ska gå. Du måste ändra värdet av det href attribut till din Facebook-URL (till exempel: https://www.facebook.com/mylink).
Ersätt # Det finns som standard med din webbadress. Gör sedan samma sak för Twitter på rad 79, Google+ på rad 83 och LinkedIn på rad 87.
Om det finns en ikon som du vill ta bort helt, markera den länken som börjar vid öppningen märkning och efterbehandling vid stängningen tagg och ta bort den koden.
Spara och uppdatera nu din webbplats, så när du klickar på länkarna borde de gå till rätt plats.
Nästa upp låt oss ändra kontaktinformationen direkt under sociala ikoner.
Börja med att inspektera ordet "Email" så vi kan hitta var den här kontaktinformationen börjar i koden. Notera koden du har markerat och raden nedanför så att du kan matcha den i din HTML-fil.
I Sublime Text trycker du på CTRL + F igen och den här gången söka efter "Email". Du måste hitta förekomsten av ordet "Email" som är omgiven av kod som matchar det du såg i inspektionsfönstret.
Du hittar den på rad 94. Markera standardadressen "[email protected]" på de två platserna på den raden:
Byt sedan ut den med din egen e-postadress. På nästa rad kan du också ersätta telefonnumret med dig själv och på linjen nedanför som du kan ersätta webbadressen med din egen:
Låt oss nu gå vidare och börja redigera huvud CV-sektionerna i mallen. Det finns några delar till dessa avsnitt, så vi ska börja med att inspektera var och en av dem så att du vet vad du ska leta efter i din kod. Detta kommer också att vara en chans för dig att lära dig lite mer om att flytta genom inspektionsfönstret för att hitta olika delar av din webbplats.
Bläddra ner till avsnittet "Professionell profil", högerklicka i texten och kontrollera det.
I inspektören ser du att den har markerat a p tagg-den här taggen är ansvarig för att skapa stycken i din text.
Därefter vill vi veta hur en hel del av texten i en CV-sektion ser ut som kod, inte bara enskilda stycken. I inspektionsfönstret klickar du på raden av kod ovanför det stycke du just inspekterat och du borde se all text tänds:
Detta berättar att varje sektion av kod är inslaget i taggarna div är kort för a division, och dessa taggar används för att styra layout och styling.
Kontrollera nu CV-sektionens titel, "Professionell profil":
Först kommer allt du ser är en annan uppsättning av div taggar. Detta beror på att den aktuella rubriken är inbäddad mellan dessa taggar.
Slå den lilla triangeln på slutet av linjen för att expandera den och se dess innehåll, gör sedan samma sak igen på nästa rad tills du ser texten "Professionell profil" du letar efter. Du hittar den insvept i ...
Nu vet vi vad koden ser ut för varje del av detta CV-avsnitt, vi kan gå tillbaka till Sublime Text och börja redigera den.
Placera markören högst upp i ditt HTML-dokument så att du kan börja söka från toppen. Tryck CTRL + F och sök efter "cv-item". Fortsätt titta tills du hittar förekomsten av koden Nu kan du ersätta texten för Professional Profile-sektionen med din egen. Wrap varje stycke av din text med ... När du är klar, se till att öppningsfliken för din sista paragraf i avsnittet innehåller attributet ... Om du sparar ditt HTML-dokument och uppdaterar din webbplats ska du se allt i de två översta sektionerna har anpassats. Nu kan vi fortsätta att redigera de återstående CV-artiklarna på samma sätt som vi just gjorde med "Professionell profil". Kontrollera varje del av varje avsnitt för att bekanta dig med koden du ska leta efter för att redigera dem. Kontrollera en jobbtitel: Kontrollera en arbetsperiod: Kontrollera en punktlista: Använd samma tillvägagångssätt som du gjorde för att redigera sektionen "Professionell profil" för att redigera innehållet i de återstående CV-sektionerna. För att redigera jobbtitelar hittar du jobbperioder eller punktlistor, koden som matchar det du såg i inspektionsfönstret, precis som du har gjort med varje redigering hittills. Använda sig av ... Notera: Om du vill lägga till nya CV-sektioner eller ta bort befintliga, måste du använda inspektören för att hitta kodtaggarna som svep hela sektionen. I det här exemplet ser du hela avsnittet är inslaget med taggarna I din kod kan du nu hitta hela kvarteret och antingen kopiera och klistra in det för att skapa ett nytt objekt, eller ta bort mycket om du vill bli av med om det. Med dina CV-sektioner redigerade vi ner till sista objektet på vår lista över ändringar. upphovsrättsmeddelandet i sidfoten. Återigen använder vi samma process. Högerklicka på upphovsrättsmeddelandet och inspektera det: Hitta sedan matchande kod i din HTML och rediger den med det aktuella året och ditt eget namn: Bra gjort! Du har just helt anpassat denna HTML-mall för att visa ditt eget innehåll. Jag hoppas att du nu känner dig säker på att du ska få mer kodanpassning i framtiden. Mallen vi arbetade med kan vara relativt enkel, men kom ihåg att processen för redigering alltid är densamma, oavsett hur komplicerat en mall kan tyckas. Kontrollera bara mallen och identifiera koden för den del du vill ändra, hitta sedan den koden i din HTML-fil och redigera den. När du redigerar, om du ser en HTML-tagg du inte förstår, låt inte det hålla dig tillbaka. Det finns oändliga mängder information online för att hjälpa dig att lära dig vad alla gör. För lite extra hjälp längs vägen, kolla in dessa bra inlärningsguider:Professionell profil
klass med värdet sista, så här: 
p taggar för att skapa avsnitt, och som med avsnittet "Professionell profil", om du avslutar en sektion med en paragraf, se till att det är det taggen innehåller class = "sista", d.v.s.. 
Redigera copyright-meddelande
Och du är klar!
Accentsconagua
