Share
Quindi hai appena acquistato un modello HTML e ora devi personalizzarlo prima di poterlo mettere online, ma non hai esperienza con il codice, quindi non sei sicuro di come procedere. Bene, rilassati, perché in questo tutorial ti mostreremo l'intero processo.
Stiamo lavorando partendo dal presupposto che non hai mai visto una linea di HTML prima, per non parlare di una modifica, quindi non importa quanto tu stia lavorando con il codice ti verrà mostrato esattamente cosa fare ogni passo della modo.
Iniziamo dall'inizio.
Tecnicamente parlando la risposta a questa domanda è "Hyper Text Markup Language". Tuttavia, ai fini della personalizzazione di un modello, puoi considerare HTML come una serie di tag di apertura e chiusura come questo:
I tag sono indicati con < e > segni e il tag di chiusura include sempre a /. Le coppie di tag hanno un contenuto tra di loro in questo modo:
John Smith, sviluppatore front-end
A volte, tuttavia, ci sono anche tag stand alone, senza partner di chiusura, come questo:
Tag HTML diversi fanno apparire diversi tipi di contenuti su una pagina web. L'esempio sopra di i tag creano una grande intestazione leggendo "John Smith, Front End Developer" e l'esempio
Per modificare un modello HTML è sufficiente sapere quali tag rappresentano le parti della pagina che si desidera modificare, come trovarli nel codice e come modificarli in modo che mostrino ciò che si desidera.
Sì, è completamente possibile modificare HTML in Blocco note o un programma simile, ma le cose andranno molto più facilmente per te se usi un'app corretta per la modifica del codice. Uno dei motivi principali è l'evidenziazione colorata del codice, come vedrai tra poco, il che renderà molto più facile la lettura e la modifica.
Raccomando Sublime Text, che puoi scaricare qui: https://www.sublimetext.com/3
Scarica il modello che hai acquistato: nel caso di questo tutorial utilizzeremo questo modello "Clean CV" per dimostrarlo.
La maggior parte dei modelli HTML arriverà in un file ZIP - in tal caso, andare avanti ed estrarre il tuo ora. Quindi cerca nelle cartelle del modello fino a trovare il file "index.html" o "index.htm".
Nel nostro modello di esempio CV, il file "index.html" si trova nella directory "01.html-website".
Ora apri il file in Chrome. Anche se Chrome non è il tuo browser predefinito o preferito, ti preghiamo di usarlo comunque, perché lavoreremo con alcuni strumenti che ha in-built per aiutarti con il processo di editing.
Se è la prima volta che modifichi un modello, cerca di non farti coinvolgere dall'idea di modificare ancora i colori e il layout. Per farlo devi scavare nel CSS, la lingua responsabile dello stile di pagina. È una buona idea concentrarsi su una cosa alla volta quando si è nuovi alla personalizzazione dei modelli e HTML è il miglior punto di partenza.
Per ottenere il lancio della palla, dai un'occhiata al tuo modello in Chrome e scopri quali elementi e immagini scritte sulla pagina devi modificare. Se lo desideri, puoi preparare un elenco in modo che tu possa esaminare e controllare ogni elemento quando apporti le modifiche.
Nel caso del nostro modello di CV, vogliamo cambiare:
Ora abbiamo un elenco di elementi da modificare, possiamo impostare l'individuazione dei loro tag HTML corrispondenti nel codice. Iniziamo con il nome.
Fare clic con il tasto destro sul nome, che legge "John Smith" per impostazione predefinita e selezionare Ispezionare:
Un pannello come questo dovrebbe essere aperto nel tuo browser:
Il pannello "Ispezione"Questo pannello ti offre un modo interattivo di guardare il codice. Passa il mouse sopra la linea che mostra ...
Spostando il mouse su diverse linee di codice e osservando quali aree della pagina si illuminano, questo pannello ti aiuta a capire quale codice corrisponde a quale elemento. Continui a librarsi su diverse linee di codice fino a quando la parte che stai cercando si illumina.
Ora espandere il h1 tag facendo clic sul piccolo triangolo alla loro sinistra e dovresti vedere il contenuto tra di loro, cioè. John Smith Sviluppatore Front End.
Questa formulazione corrisponde a ciò che vedi sullo schermo, quindi sai di aver trovato la parte giusta del codice.
È giunto il momento di aprire il file HTML per la modifica. Apri il file "index.html" in Sublime Text e dovresti vedere qualcosa di simile a questo:
Vuoi trovare il codice qui che corrisponde a quello che hai visto in Google Chrome Inspector. Scorri fino a trovarlo sulle linee 61 - 64.
Ora puoi modificare il contenuto tra i tag per cambiare il nome e la professione in base al tuo. Innanzitutto, modifica "John Smith" con il tuo nome:
Quindi, tra il tag, modifica "Front End Developer" alla tua stessa professione.
Salva il file quindi aggiorna il modello in Chrome. Dovresti vedere le tue modifiche apparire così:
Ora hai il processo di base in basso:
Ripetiamo la procedura per modificare il resto del contenuto che vogliamo personalizzare.
Successivamente aggiungeremo la nostra immagine a sinistra del nome e dell'area professionale. Fai clic con il tasto destro sull'immagine e controllala, e osserva il tag corrispondente:
Puoi vedere nella finestra dell'ispettore questa linea è direttamente sopra le linee che abbiamo appena cambiato:
Vai al tuo file HTML e trova il tag sulla riga 59:
Per questo tag, dovrai modificare il valore di src attributo che vedi all'interno del img etichetta. Lo fai modificando cosa c'è tra le sue virgolette. Lo cambierai con il nome del file e la posizione della tua immagine.
Prendi un'immagine di te che è 150px per 150px in dimensioni, (ignora che il nome del file dice 140x140.png, la dimensione è in realtà 150x150).
Trascina la tua immagine nella sottocartella "_content"; si trova nella stessa cartella del tuo file "index.html".
Ora, nel tuo file HTML, cambia il valore di src attributo, sostituendo "140x140.png" con il file appena aggiunto alla sottocartella "_content". Assicurati di controllare che l'estensione del file che digiti sia la stessa del file, ad es. "Png" / "jpg":
Salva il tuo file, aggiorna Chrome e dovresti vedere la tua nuova immagine mostrare:
Ora modifichiamo i collegamenti sulle icone dei social media nell'angolo in alto a destra del modello. Proprio come prima, fai clic con il pulsante destro su una delle icone e ispezionala. Nella finestra, guarda la riga sopra quella che è evidenziata e vedrai che include il testo "icona di Facebook". Lo useremo per trovare il codice nel nostro file HTML.
Torna in Sublime Text, premi CTRL + F ed esegui una ricerca per "icona di facebook". Dovresti trovarlo sulla linea 75.
Il un tag on line 75 è ciò che crea il collegamento sull'icona e il href l'attributo che vedi al suo interno determina dove andrà quel collegamento. Avrai bisogno di cambiare il valore di quello href attributo al tuo URL di Facebook (ad esempio: https://www.facebook.com/mylink).
Sostituisci il # questo è lì per impostazione predefinita con il tuo URL. Poi fai la stessa cosa per Twitter sulla linea 79, Google+ sulla linea 83 e LinkedIn sulla linea 87.
Se c'è un'icona che desideri rimuovere completamente, evidenzia il suo link a partire dall'apertura tag e finitura alla chiusura tag, quindi elimina quel codice.
Ora salva e aggiorna il tuo sito, quindi quando fai clic sui collegamenti dovrebbero andare nella posizione corretta.
Avanti, cambiamo le informazioni di contatto proprio sotto le icone sociali.
Inizia esaminando la parola "Email" in modo che possiamo trovare dove inizia questa sezione di informazioni di contatto nel codice. Prendi nota della riga di codice che hai evidenziato e della riga sotto in modo da poterla abbinare nel tuo file HTML.
In Sublime Text, premere CTRL + F di nuovo e questa volta cerca "Email". Devi individuare l'istanza della parola "Email" che è circondata dal codice corrispondente a ciò che hai visto nella finestra dell'ispettore.
Lo troverai sulla linea 94. Evidenzia l'indirizzo email predefinito "[email protected]" nelle due posizioni su quella linea:
Quindi sostituirlo con il proprio indirizzo email. Nella riga successiva puoi anche sostituire il numero di telefono con il tuo e nella riga sottostante puoi sostituire l'indirizzo web con il tuo:
Ora andiamo avanti e iniziamo a modificare le sezioni CV principali del modello. Ci sono alcune parti in queste sezioni, quindi inizieremo esaminando ciascuna di esse in modo da sapere cosa cercare nel codice. Questa sarà anche l'occasione per imparare un po 'di più su come spostarsi attraverso la finestra di ispezione per trovare diverse parti del tuo sito.
Scorri verso il basso fino alla sezione "Profilo professionale", fai clic con il pulsante destro del mouse sul testo e controllalo.
Nell'ispettore vedrai che ha evidenziato a p tag: questo tag è responsabile della creazione di paragrafi nel testo.
Quindi, vogliamo sapere che aspetto ha un'intera sezione di testo in una sezione CV, non solo singoli paragrafi. Nella finestra dell'ispettore, fai clic sulla riga di codice sopra il paragrafo appena ispezionato e dovresti vedere tutto il testo illuminato:
Questo ti dice che ogni sezione di codice è racchiusa nei tag div è l'abbreviazione di a divisione, e questi tag sono usati per controllare il layout e lo stile.
Ora controlla il titolo della sezione CV, "Profilo professionale":
All'inizio, tutto ciò che vedrai è un altro insieme di div tag. Questo perché l'intestazione effettiva è annidata tra questi tag.
Colpisci quel piccolo triangolo all'estremità della linea per espanderlo e vedere il suo contenuto, poi fai di nuovo lo stesso sulla linea successiva finché non vedi il testo "Profilo professionale" che stai cercando. Lo troverai avvolto in ...
Ora sappiamo come appare il codice per ogni parte di questa sezione CV, possiamo tornare a Sublime Text e iniziare a modificarlo.
Posiziona il cursore nella parte superiore del documento HTML in modo da poter iniziare la ricerca dall'alto. stampa CTRL + F e cerca "cv-item". Continua a cercare finché non trovi l'istanza del codice Ora puoi sostituire il testo della sezione Profilo professionale con il tuo. Avvolgi ogni paragrafo del tuo testo con ... Quando hai finito, assicurati che il tag del paragrafo iniziale del paragrafo finale della sezione includa l'attributo ... Se salvi il tuo documento HTML e aggiorni il tuo sito dovresti vedere che tutto nelle prime due sezioni è stato personalizzato. Ora possiamo passare alla modifica delle restanti sezioni dell'articolo CV nello stesso modo in cui abbiamo appena fatto con il "Profilo professionale". Esamina ogni parte di ogni sezione per familiarizzare con il codice che dovresti cercare per modificarli. Ispezionare un titolo di lavoro: Ispeziona un periodo di lavoro: Ispezionare una lista di punti: Utilizza lo stesso approccio usato per modificare la sezione "Profilo professionale" per modificare il contenuto delle sezioni CV rimanenti. Per modificare titoli di lavoro, periodi di lavoro o elenchi puntati, trova il codice corrispondente a quello che hai visto nella finestra di ispezione, proprio come hai fatto finora con ogni modifica. Uso ... Nota: se desideri aggiungere nuove sezioni CV o rimuovere quelle esistenti, dovrai utilizzare l'ispettore per trovare i tag di codice che avvolgono l'intera sezione. In questo esempio viene visualizzata l'intera sezione con i tag Nel tuo codice ora puoi trovare l'intero blocco di codice e copiarlo e incollarlo per creare un nuovo elemento, o eliminare tutto se vuoi liberarti se. Con le sezioni del tuo CV modificate siamo fino all'ultimo elemento del nostro elenco di modifiche; il messaggio di copyright nel footer. Ancora una volta useremo lo stesso processo. Fai clic con il tasto destro del mouse sul messaggio di copyright e ispezionalo: Quindi trova il codice corrispondente nel tuo codice HTML e modificalo con l'anno corrente e il tuo nome: Molto bene! Hai appena completamente personalizzato questo modello HTML per mostrare i tuoi contenuti. Spero che ora ti senta sicuro di assumere più personalizzazione del codice in futuro. Il modello su cui abbiamo lavorato potrebbe essere relativamente semplice, ma ricorda che il processo di modifica è sempre lo stesso, indipendentemente da quanto possa sembrare complicato un modello. Basta ispezionare il modello e identificare il codice per la parte che si desidera modificare, quindi trovare quel codice nel file HTML e modificarlo. Quando stai modificando, se vedi un tag HTML che non capisci, non lasciare che ti trattenga. Ci sono un'infinità di informazioni online per aiutarti a capire cosa fa ognuno. Per ulteriore aiuto lungo il percorso, consulta queste fantastiche guide di apprendimento:Profilo professionale
classe con il valore scorso, come questo: 
p tag per creare paragrafi, e come con la sezione "Profilo professionale", se stai terminando una sezione con un paragrafo assicurati che sia tag include class = "ultimo", vale a dire. 
Modifica il messaggio di copyright
E hai finito!
Accentsconagua
