Share
Ci sono molti modi per creare il tuo sito Web personale.
Puoi utilizzare uno dei tanti costruttori di siti Web oppure puoi optare per un CMS come WordPress, Drupal o simili. Puoi anche assumere uno sviluppatore professionista per crearne uno per te.
Con così tante scelte, può essere difficile sapere da dove cominciare. Per rendere le cose ancora più complicate, ognuna di queste opzioni viene fornita con un diverso insieme di pro e contro, per non parlare del livello di difficoltà o del prezzo richiesto.
Ma c'è un altro ottimo modo per creare il tuo sito personale in un ragionevole lasso di tempo. E questo usando un modello di curriculum HTML. Sono facili da usare e da caricare sul server di hosting.
Ecco alcuni dei migliori (per navigare rapidamente prima di leggere):
Inoltre, il codice che si cela dietro un modello di sito Web di curriculum professionale è molto meno complicato per un principiante rispetto ai più complessi linguaggi di programmazione utilizzati nei sistemi di gestione dei contenuti.
In questa parte della serie Realizzazione di un sito Web di un resume personale, ti guidiamo attraverso il semplice processo di modifica e caricamento di un modello di curriculum HTML.
Segui questo flusso di lavoro per rendere il tuo sito Web di curriculum e personalizzarlo per il tuo marchio personale, in modo da poter avviare il tuo sito in un attimo.
Prima di iniziare con la modifica del modello di sito, copriamo gli strumenti necessari per ottenere il tuo sito Web di ripristino HTML attivo e funzionante:
L'acquisto del nome di dominio per il tuo sito è solo il primo passo del tuo viaggio. Avrai anche bisogno di un server di hosting in cui caricerai i file per il tuo sito web. Trovare la giusta compagnia di hosting non è facile, soprattutto perché ce ne sono così tanti. La maggior parte dei provider di hosting offre pacchetti di hosting di base tra $ 5 e $ 10 al mese. Alcune aziende offrono larghezza di banda e spazio illimitati, mentre altre offrono piani più ristretti.
La cosa importante da tenere presente è che quasi tutti i provider di hosting supportano i modelli HTML. Quando acquisti in giro per una società di hosting, leggi le domande frequenti e assicurati che l'azienda fornisca assistenza ai clienti, nel caso in cui avessi bisogno di aiuto con il tuo sito web. Dovresti anche fare una piccola ricerca e leggere le recensioni di un particolare ospite su siti web indipendenti per vedere quanto sono soddisfatti i loro clienti.
Una volta trovata una società di hosting, è necessario scaricare un client FTP. Un client FTP ti consentirà di caricare il tuo modello sui server di hosting. La scelta del programma FTP dipende dal sistema operativo utilizzato dal computer.
Uno dei programmi più popolari è FileZilla. È un programma FTP gratuito molto facile da usare ed è disponibile su Windows, Mac e Linux.
Avrai anche bisogno di un editor di testo per apportare modifiche ai file del tuo modello. Mentre puoi usare Notepad o TextEdit per apportare modifiche, l'uso di un editor di codice lo renderà molto più semplice. A differenza dei normali editor di testo, un editor di codice include strumenti che facilitano la modifica, come l'uso di colori diversi per parti diverse del codice, il che rende più facile vedere cosa si sta modificando.
Per gli scopi di questo tutorial, userò Sublime Text, che può essere utilizzato su Mac, Windows e Linux, e la versione di prova è scaricabile gratuitamente. Scopri di più su come lavorare con questo popolare editor di codice:
Le ultime due cose di cui hai bisogno sono il tuo modello di curriculum HTML e le immagini che prevedi di utilizzare sul tuo sito.
Ai fini di questo tutorial, userò il Flatrica HTML riprende il modello del sito web, mostrato qui:
Flatrica HTML riprende il modello del sito web.Puoi trovare il modello del tuo sito web nel download area del tuo account Envato dopo aver effettuato l'acquisto. Una volta scaricato il modello di sito HTML, decomprimere la cartella e salvarla sul desktop per un facile accesso.
Quando si tratta di immagini, avrai bisogno del tuo ritratto e di qualsiasi altra foto personale che intendi utilizzare. Puoi anche usare un'immagine o uno schema di sfondo, quindi assicurati di avere tutte le immagini memorizzate sul tuo computer in modo da poterle aggiungere al tuo modello.
Ora che hai tutto a posto, è il momento di personalizzare il modello con le tue informazioni. Esaminiamo come personalizzare il modello HTML di Flatrica:
Prima di iniziare a modificare i file, diamo un'occhiata alla struttura di questo modello HTML. Quando decomprimi la cartella, noterai che contiene due cartelle: una con la documentazione e una con i file modello effettivi.
Uno sguardo ai file inclusi in questo modello di sito Web di resume HTML.La cartella con i file modello di sito effettivi ha diverse sottocartelle all'interno:
Oltre a queste cartelle, ci sono anche diversi file HTML: index-normal.html, index-video.html, single-blog.html, e single-portfolio.html.
Tieni presente che il tuo modello potrebbe non avere tutti questi file e queste cartelle; tuttavia, nella maggior parte dei casi, troverai i fogli di stile, le immagini, le cartelle JavaScript e PHP. Il tuo modello potrebbe anche avere meno o più file HTML.
Doppio click index-normal.html(o index.html nel caso in cui stai utilizzando un modello diverso). Questo aprirà il file nel tuo browser, che renderà più facile capire quali parti del codice dovrai modificare e come trovarle nel tuo file modello HTML.
Vista dell'ispettore del codice del browser del codice del modello HTML.Se guardi il modello nel tuo browser, vedrai che devi modificare:
Una volta che sai cosa cambiare, puoi iniziare a cercare il codice corrispondente.
Fai clic con il tasto destro sul nome che legge John Doe e selezionare Ispezionare. Noterai un pannello pop-up in basso che mostra il codice HTML che costituisce il nostro modello.
La riga di codice che contiene il nome è selezionata nella parte sinistra del Ispettore pannello, con lo stile corrispondente sul lato destro.
Come puoi vedere dallo screenshot qui sopra, il nome è tra il tag, che sono i tag HTML utilizzati per rappresentare le intestazioni.
Nella maggior parte dei casi, le coppie di tag di questo tipo hanno un tag di apertura e chiusura e il contenuto deve essere posizionato tra questi tag per essere visualizzato su una pagina Web, in questo modo:
John Doe
Per modificare il modello, tutto ciò che devi sapere è quali tag contengono la parte della pagina che desideri modificare, trovarli nel codice e sostituirli con le tue informazioni.
Ora, torna alla cartella dei modelli, fai clic con il tasto destro del mouse su index-normal.html, e selezionare Apri con testo sublime. Ora dovresti vedere il codice HTML completo che costituisce il tuo modello.
Per iniziare a modificare il modello, devi trovare lo stesso codice che hai visto nel pannello Inspector del tuo browser.
Scorri verso il basso finché non lo trovi intorno alle linee 150-151. Quindi, fare clic tra il tag e sostituisci il nome con il tuo.
Sostituzione del nome e delle informazioni di contatto predefiniti.Successivamente, fai clic su tag, elimina il testo e inserisci la tua professione.
Ripetere questi passaggi più e più volte ti permetterà di sostituire tutte le informazioni fittizie con le tue.
Se nel modello è presente una sezione che non è necessaria, è sufficiente eliminarla. Nella schermata qui sotto, ho selezionato tutto nella sezione Tabella prezzi e cancellato tutto il codice in esso.
Puoi cancellare sezioni del codice che non ti servono. Per sostituire le immagini con le tue, basta selezionare tutte le immagini nella cartella corrispondente, eliminarle e posizionare le immagini nella stessa cartella. Se hai seguito il consiglio in precedenza, hai nominato le tue immagini con lo stesso nome dei segnaposto, il che rende più veloce la modifica del modello.
Se si desidera aggiungere ulteriori informazioni, selezionare il codice esistente nella sezione desiderata, copiarlo facendo clic Controllo / Comando-C, e quindi incollarlo di seguito con Controllo / Comando-V. Nello screenshot qui sotto, volevo aggiungere un'altra barra delle abilità, quindi ho selezionato il codice per la quarta barra delle abilità e l'ho copiato immediatamente sotto:
Puoi duplicare sezioni di HTML se necessario.E il risultato finale assomiglia a questo:
Il prodotto finale di aggiungere un'altra barra delle abilità.Una volta sostituite tutte le informazioni, è il momento di modellare il modello di sito Web del curriculum a proprio piacimento. Per impostazione predefinita, il modello Flatrica HTML viene fornito con diversi fogli di stile. Se guardi la cartella dei fogli di stile, noterai che prendono il nome dai colori usati:
Flatrica viene fornito con numerose opzioni di fogli di stile.È possibile regolare rapidamente il colore sostituendo il foglio di stile nella parte superiore del documento con il nome del foglio di stile preferito. Cerca la riga di codice che dice:
Cambiare il nome in style_blue.css darà al nostro modello un nuovo colore e aspetto:
I risultati dell'applicazione del foglio di stile blu.Se ti senti avventuroso, puoi modificare il foglio di stile principale chiamato style.css con caratteri e colori a tua scelta. Ad esempio, puoi modificare il colore di sfondo nel style.css inserendo un codice HEX del colore desiderato in questo modo:
background-color: # 65b5c1;
La modifica dei CSS può essere eseguita nello stesso modo in cui abbiamo modificato l'HTML. Fai clic con il pulsante destro del mouse sull'elemento da modificare e fai clic Ispezionare. Questa volta, vorrai cercare il codice sul lato destro del Ispettore scheda e quindi trovare lo stesso codice nell'editor di codice.
Uno sguardo al file CSS del modello del sito.Dopo aver modificato i file dei modelli di sito a tuo piacimento, dovrai caricarli sul tuo server di hosting. Dovresti aver ricevuto un'email dal tuo host contenente le informazioni necessarie per il trasferimento dei file via FTP.
Per iniziare il processo di caricamento, avvia il tuo programma FTP. In questo caso, sto usando FileZilla. Inserisci le informazioni fornite dal tuo host nella barra in alto, quindi fai clic su QuickConnect:
Inserimento di informazioni in FileZilla.Individua la cartella con il modello sul tuo computer sul lato sinistro dello schermo e fai clic su di essa per espanderla. In basso a sinistra, seleziona tutti i file e le cartelle e trascinali sul lato destro dello schermo.
Assicurati di caricarli nella cartella principale del tuo server di hosting nel public_html cartella.
Caricamento di file sul server tramite FTP.Una volta caricati tutti i file, apri il browser e inserisci il tuo nome di dominio. Congratulazioni, il tuo nuovo sito Web di CV è ora disponibile!
Ora che sai come utilizzare un modello di curriculum HTML, ecco quattro suggerimenti rapidi che ti aiuteranno a rendere il tuo sito personale ancora più fantastico:
La modifica di un modello HTML può sembrare intimidatoria all'inizio, ma non è così difficile una volta compreso il modo in cui il modello è strutturato e ciò che deve essere modificato. Se ti prendi anche il tempo di leggere alcuni tutorial, padroneggierai HTML e CSS in pochissimo tempo. Utilizza la nostra guida in alto per modificare il tuo modello di sito di curriculum e aumentare le tue possibilità di essere assunto.
Accentsconagua