Share
Es gibt viele Möglichkeiten, Ihre persönliche Lebenslauf-Website zu erstellen.
Sie können einen von vielen Website-Buildern verwenden oder sich für ein CMS wie WordPress, Drupal oder ähnliches entscheiden. Sie können auch einen professionellen Entwickler einstellen, um einen für Sie herzustellen.
Bei so vielen Möglichkeiten kann es schwierig sein zu wissen, wo man anfangen soll. Um die Dinge noch komplizierter zu gestalten, beinhaltet jede dieser Optionen andere Vor- und Nachteile, ganz zu schweigen vom Schwierigkeitsgrad oder dem Preis.
Es gibt jedoch eine weitere gute Möglichkeit, Ihre persönliche Website in angemessener Zeit zu erstellen. Und das ist mit einer HTML-Lebenslaufvorlage. Sie sind einfach zu verwenden und können auf Ihren Hosting-Server hochgeladen werden.
Hier sind einige der Besten (zum schnellen Durchblättern, bevor Sie weiterlesen):
Darüber hinaus ist der Code hinter einer professionellen Lebenslauf-Website-Vorlage für Neulinge weitaus weniger kompliziert als die komplexeren Programmiersprachen, die in Content-Management-Systemen verwendet werden.
In diesem Teil der Reihe Making a Great Personal Resume-Websites führen wir Sie durch den einfachen Prozess des Änderns und Hochladens einer Vorlage für einen HTML-Lebenslauf.
Folgen Sie diesem Workflow, um Ihre Lebenslauf-Website zu erstellen und an Ihre persönliche Marke anzupassen. So können Sie Ihre Website in kürzester Zeit starten.
Bevor wir mit der Änderung von Websitevorlagen beginnen, sollten wir uns mit den Tools befassen, die Sie benötigen, um Ihre HTML-Lebenslauf-Website zum Laufen zu bringen:
Der Kauf des Domainnamens für Ihre Site ist nur der erste Schritt auf Ihrer Reise. Sie benötigen außerdem einen Hosting-Server, auf den Sie die Dateien für Ihre Website hochladen. Das richtige Hosting-Unternehmen zu finden ist nicht einfach, zumal es so viele gibt. Die meisten Hosting-Anbieter bieten grundlegende Hosting-Pakete zwischen 5 und 10 USD pro Monat an. Einige Unternehmen bieten unbegrenzte Bandbreite und Speicherplatz an, während andere Pläne mit eingeschränktem Umfang anbieten.
Dabei ist zu beachten, dass fast alle Hosting-Anbieter HTML-Vorlagen unterstützen. Lesen Sie bei einem Hosting-Unternehmen die häufig gestellten Fragen (FAQs) durch und stellen Sie sicher, dass das Unternehmen einen Kundensupport bietet, falls Sie Hilfe bei Ihrer Website benötigen. Sie sollten auch ein wenig recherchieren und die Bewertungen eines bestimmten Hosts auf unabhängigen Websites lesen, um zu sehen, wie zufrieden seine Kunden sind.
Wenn Sie eine Hosting-Firma gefunden haben, müssen Sie einen FTP-Client herunterladen. Mit einem FTP-Client können Sie Ihre Vorlage auf die Hosting-Server hochladen. Die Wahl des FTP-Programms hängt vom Betriebssystem Ihres Computers ab.
Eines der beliebtesten Programme ist FileZilla. Es ist ein kostenloses FTP-Programm, das sehr einfach zu bedienen ist und unter Windows, Mac und Linux verfügbar ist.
Sie benötigen außerdem einen Texteditor, um Änderungen an den Dateien Ihrer Vorlage vorzunehmen. Sie können Notepad oder TextEdit verwenden, um Änderungen vorzunehmen, die Verwendung eines Code-Editors macht es jedoch viel einfacher. Im Gegensatz zu herkömmlichen Texteditoren enthält ein Code-Editor Werkzeuge, die die Bearbeitung erleichtern, z. B. die Verwendung unterschiedlicher Farben für verschiedene Teile des Codes. So können Sie leichter sehen, was Sie bearbeiten.
Im Rahmen dieses Tutorials verwende ich Sublime Text, das auf Mac, Windows und Linux verwendet werden kann. Die Testversion kann kostenlos heruntergeladen werden. Erfahren Sie mehr über die Arbeit mit diesem beliebten Code-Editor:
Die letzten beiden Dinge, die Sie benötigen, sind Ihre HTML-Lebenslaufvorlage und die Bilder, die Sie auf Ihrer Website verwenden möchten.
Für die Zwecke dieses Tutorials verwende ich die Flatrica HTML-Lebenslauf-Website-Vorlage, hier gezeigt:
Flatrica HTML-Lebenslauf-Website-Vorlage.Sie finden Ihre Website-Vorlage im Downloads Bereich Ihres Envato-Kontos, nachdem Sie Ihren Einkauf getätigt haben. Nachdem Sie die HTML-Site-Vorlage heruntergeladen haben, entpacken Sie den Ordner und speichern Sie ihn für einen einfachen Zugriff auf Ihrem Desktop.
Wenn es um Bilder geht, benötigen Sie Ihren Kopfschuss und alle anderen persönlichen Fotos, die Sie verwenden möchten. Sie können auch ein Hintergrundbild oder -muster verwenden. Stellen Sie also sicher, dass alle Bilder auf Ihrem Computer gespeichert sind, damit Sie sie Ihrer Vorlage hinzufügen können.
Nachdem Sie nun alles eingerichtet haben, können Sie die Vorlage mit Ihren Informationen personalisieren. Hier erfahren Sie, wie Sie die HTML-Vorlage von Flatrica anpassen:
Bevor wir mit dem Bearbeiten der Dateien beginnen, werfen wir einen Blick auf die Struktur dieser HTML-Vorlage. Wenn Sie den Ordner entpacken, werden Sie feststellen, dass er zwei Ordner enthält: einen mit Dokumentation und einen mit den eigentlichen Vorlagendateien.
Ein Blick auf die in dieser HTML-Lebenslauf-Websitevorlage enthaltenen Dateien.Der Ordner mit den eigentlichen Site-Vorlagendateien enthält mehrere Unterordner:
Neben diesen Ordnern gibt es auch mehrere HTML-Dateien: index-normal.html, index-video.html, single-blog.html, und single-portfolio.html.
Beachten Sie, dass Ihre Vorlage möglicherweise nicht alle diese Dateien und Ordner enthält. In den meisten Fällen werden Sie jedoch auf die Stylesheets, Images, JavaScript und PHP-Ordner stoßen. Ihre Vorlage enthält möglicherweise auch weniger oder mehr HTML-Dateien.
Doppelklick index-normal.html(oder index.html, falls Sie eine andere Vorlage verwenden). Dadurch wird die Datei in Ihrem Browser geöffnet. So können Sie leichter verstehen, welche Teile des Codes Sie bearbeiten müssen und wie Sie sie in Ihrer HTML-Vorlagendatei finden können.
Browser-Code-Inspector-Ansicht des Codes der HTML-Vorlage.Wenn Sie sich die Vorlage in Ihrem Browser ansehen, sehen Sie, dass Sie Folgendes bearbeiten müssen:
Sobald Sie wissen, was geändert werden soll, können Sie nach dem entsprechenden Code suchen.
Klicken Sie mit der rechten Maustaste auf den Namen, der gelesen wird John Doe und wählen Sie Prüfen. Sie sehen ein Popup-Fenster unten, das den HTML-Code zeigt, aus dem unsere Vorlage besteht.
Die Codezeile, die den Namen enthält, wird auf der linken Seite von ausgewählt Inspektor Panel, mit dem entsprechenden Stil auf der rechten Seite.
Wie Sie dem obigen Screenshot entnehmen können, steht der Name zwischen Tags: Dies sind die HTML-Tags, die zur Darstellung von Überschriften verwendet werden.
In den meisten Fällen haben solche Tag-Paare ein öffnendes und ein schließendes Tag, und der Inhalt muss zwischen diesen Tags platziert werden, damit er auf einer Webseite angezeigt wird:
John Doe
Um die Vorlage zu bearbeiten, müssen Sie nur wissen, welche Tags den zu bearbeitenden Teil der Seite enthalten, im Code suchen und durch Ihre Informationen ersetzen.
Gehen Sie nun zurück zum Vorlagenordner und klicken Sie mit der rechten Maustaste auf index-normal.html, und wählen Sie Mit überhöhtem Text öffnen. Sie sollten jetzt den vollständigen HTML-Code sehen, aus dem Ihre Vorlage besteht.
Um mit der Bearbeitung der Vorlage zu beginnen, möchten Sie denselben Code finden, den Sie im Inspektorfenster Ihres Browsers gesehen haben.
Scrollen Sie nach unten, bis Sie die Linien finden 150-151. Klicken Sie dann zwischen das Tags und ersetzen Sie den Namen durch Ihren eigenen.
Ersetzen des Standardnamens und der Kontaktinformationen.Danach klicken Sie zwischen den Tags, löschen Sie den Text und geben Sie Ihren Beruf ein.
Wenn Sie diese Schritte immer wieder wiederholen, können Sie alle Dummy-Informationen durch Ihre eigenen ersetzen.
Wenn sich in der Vorlage ein Abschnitt befindet, den Sie nicht benötigen, löschen Sie ihn einfach. In der Abbildung unten habe ich alles in der Preistabelle ausgewählt und den gesamten Code darin gelöscht.
Sie können Abschnitte des Codes löschen, die Sie nicht benötigen. Um die Bilder durch Ihre eigenen zu ersetzen, wählen Sie einfach alle Bilder im entsprechenden Ordner aus, löschen Sie sie und legen Sie die Bilder in demselben Ordner ab. Wenn Sie den Rat zu einem früheren Zeitpunkt befolgt haben, haben Sie Ihre Bilder mit den gleichen Namen wie die Platzhalter benannt, sodass Sie die Vorlage schneller bearbeiten können.
Wenn Sie weitere Informationen hinzufügen möchten, wählen Sie den vorhandenen Code im gewünschten Abschnitt aus und kopieren Sie ihn durch Klicken Steuerung / Befehl-C, und fügen Sie es unten mit ein Steuerung / Befehl-V. In der Abbildung unten wollte ich eine weitere Skill-Leiste hinzufügen, also habe ich den Code für die vierte Skill-Leiste ausgewählt und ihn gleich unten kopiert:
Sie können HTML-Abschnitte bei Bedarf duplizieren.Und das Endergebnis sieht so aus:
Das Endprodukt beim Hinzufügen einer weiteren Skillleiste.Nachdem Sie alle Informationen ausgetauscht haben, können Sie die Vorlage für die Lebenslauf-Website nach Ihren Wünschen gestalten. Standardmäßig enthält die Flatrica HTML-Vorlage mehrere verschiedene Stylesheets. Wenn Sie sich den Stylesheets-Ordner ansehen, werden Sie feststellen, dass sie nach den verwendeten Farben benannt sind:
Flatrica verfügt über zahlreiche Stylesheet-Optionen.Sie können die Farbe schnell anpassen, indem Sie das Stylesheet im Kopf des Dokuments durch den Namen Ihres bevorzugten Stylesheets ersetzen. Suchen Sie nach der Codezeile, in der Folgendes steht:
Ändern Sie den Namen in style_blue.css wird unserer Vorlage eine völlig neue Farbe und Aussehen verleihen:
Die Ergebnisse der Anwendung des blauen Stylesheets.Wenn Sie abenteuerlustig sind, können Sie das aufgerufene Haupt-Stylesheet bearbeiten style.css mit Schriftarten und Farben Ihrer Wahl. Zum Beispiel können Sie die Hintergrundfarbe in bearbeiten style.css indem Sie einen HEX-Code Ihrer gewünschten Farbe eingeben:
Hintergrundfarbe: # 65b5c1;
Die Bearbeitung von CSS kann auf dieselbe Weise erfolgen, wie wir den HTML-Code bearbeitet haben. Klicken Sie mit der rechten Maustaste auf das Element, das Sie formatieren möchten, und klicken Sie auf Prüfen. Dieses Mal sollten Sie nach dem Code auf der rechten Seite des suchen Inspektor Tab und finden Sie den gleichen Code im Code-Editor.
Ein Blick auf die CSS-Datei der Site-Vorlage.Nachdem Sie die Site-Vorlagendateien nach Ihren Wünschen geändert haben, müssen Sie sie auf Ihren Hosting-Server hochladen. Sie sollten eine E-Mail von Ihrem Host erhalten haben, die die erforderlichen Informationen zum Übertragen von Dateien per FTP enthält.
Starten Sie Ihr FTP-Programm, um den Upload-Vorgang zu starten. In diesem Fall verwende ich FileZilla. Geben Sie die von Ihrem Host bereitgestellten Informationen in die obere Leiste ein und klicken Sie auf Schnelle Verbindung:
Informationen in FileZilla einfügen.Suchen Sie den Ordner mit Ihrer Vorlage auf Ihrem Computer auf der linken Seite des Bildschirms und klicken Sie darauf, um ihn zu erweitern. Wählen Sie unten links alle Dateien und Ordner aus und ziehen Sie sie auf die rechte Seite des Bildschirms.
Stellen Sie sicher, dass Sie sie in den Stammordner Ihres Hosting-Servers in hochladen public_html Mappe.
Dateien per FTP auf den Server hochladen.Wenn alle Dateien hochgeladen wurden, öffnen Sie Ihren Browser und geben Sie Ihren Domainnamen ein. Herzlichen Glückwunsch, Ihre neue Lebenslauf-Website ist jetzt live!
Nachdem Sie nun wissen, wie Sie eine HTML-Lebenslaufvorlage verwenden, finden Sie hier vier kurze Tipps, mit denen Sie Ihre persönliche Website noch beeindruckender gestalten können:
Das Bearbeiten einer HTML-Vorlage mag auf den ersten Blick einschüchternd wirken, aber es ist nicht so schwierig, wenn Sie erst einmal verstanden haben, wie die Vorlage strukturiert ist und was bearbeitet werden muss. Wenn Sie sich auch die Zeit nehmen, einige Tutorials zu lesen, beherrschen Sie HTML und CSS in kürzester Zeit. Verwenden Sie unseren Leitfaden oben, um die Vorlage für Ihre Lebenslauf-Site zu ändern und Ihre Chancen auf eine Einstellung zu erhöhen.
Accentsconagua