German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)
Es gibt viele Möglichkeiten, Ihre persönliche Lebenslauf-Website zu erstellen.
Sie können einen oder mehrere Website-Builder verwenden oder sich für ein CMS wie WordPress, Drupal oder ähnliches entscheiden. Sie können auch einen professionellen Entwickler beauftragen, eine für Sie zu erstellen.
Bei so vielen Möglichkeiten kann es schwierig sein zu wissen, wo man anfangen soll. Um die Sache noch komplizierter zu machen, bietet jede dieser Optionen unterschiedliche Vor- und Nachteile, ganz zu schweigen vom Schwierigkeitsgrad oder Preis.
Es gibt aber auch eine andere großartige Möglichkeit, Ihre persönliche Website in angemessener Zeit zu erstellen. Dazu verwenden Sie eine HTML-Lebenslaufvorlage. Sie sind einfach zu verwenden und können auf Ihren Hosting-Server hochgeladen werden.
Hier sind einige der besten (zum schnellen Durchsuchen, bevor Sie weiterlesen):
-
Lebensläufe15 besten HTML-Lebenslaufvorlagen für fantastische persönliche Websites
Darüber hinaus ist der Code hinter einer professionellen Website-Vorlage für Lebensläufe für Anfänger weitaus weniger kompliziert als die komplexeren Programmiersprachen, die in Content-Management-Systemen verwendet werden.
In diesem Teil der Reihe Making a Great Personal Resume Website führen wir Sie durch den einfachen Prozess zum Ändern und Hochladen einer HTML-Lebenslaufvorlage.
Befolgen Sie diesen 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.
Was benötigen Sie, um Ihre Lebenslauf-Website live zu bringen?
Bevor wir mit der Änderung von Websitevorlagen beginnen, möchten wir uns mit den Tools befassen, die Sie benötigen, um Ihre HTML-Lebenslauf-Website zum Laufen zu bringen:
1. Die richtige Hosting-Firma
Der Kauf des Domainnamens für Ihre Website ist nur der erste Schritt auf Ihrer Reise. Sie benötigen außerdem einen Hosting-Server, auf dem 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 US-Dollar pro Monat an. Einige Unternehmen bieten unbegrenzte Bandbreite und Speicherplatz, während andere eingeschränktere Pläne anbieten.
Wichtig ist, dass fast alle Hosting-Anbieter HTML-Vorlagen unterstützen. Lesen Sie beim Einkauf für ein Hosting-Unternehmen die häufig gestellten Fragen (FAQs) durch und stellen Sie sicher, dass das Unternehmen Kundenunterstützung 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 die Kunden sind.
2. Ein FTP-Client
Sobald Sie ein Hosting-Unternehmen 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.
3. Ein Code-Editor
Sie benötigen außerdem einen Texteditor, um Änderungen an den Dateien Ihrer Vorlage vorzunehmen. Während Sie einen Editor oder TextEdit verwenden können, um Änderungen vorzunehmen, wird die Verwendung eines Code-Editors dies erheblich vereinfachen. Im Gegensatz zu normalen Texteditoren enthält ein Code-Editor Tools, die die Bearbeitung erleichtern, z. B. die Verwendung unterschiedlicher Farben für verschiedene Teile des Codes, damit Sie leichter sehen können, was Sie bearbeiten.
Für die Zwecke dieses Tutorials verwende ich Sublime Text, der unter Mac, Windows und Linux verwendet werden kann. Die Testversion kann kostenlos heruntergeladen werden. Erfahren Sie mehr über die Arbeit mit diesem beliebten Code-Editor:
-
Sublime TextNützliche Verknüpfungen für einen schnelleren Workflow in Sublime Text 3
4. Die HTML-Vorlage und die Bilder für Ihre Lebenslauf-Website
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 hier gezeigte Flatrica HTML-Lebenslauf-Website-Vorlage:
Sie finden Ihre Website-Vorlage nach dem Kauf im Download-Bereich Ihres Envato-Kontos. Wenn Sie die HTML-Site-Vorlage heruntergeladen haben, entpacken Sie den Ordner und speichern Sie ihn für den einfachen Zugriff auf Ihrem Desktop.
Wenn es um Bilder geht, benötigen Sie Ihr Portraitfoto Farben, die Sie verwenden möchten. Sie können auch ein Hintergrundbild oder -muster verwenden. Stellen Sie daher sicher, dass alle Bilder auf Ihrem Computer gespeichert sind, damit Sie sie Ihrer Vorlage hinzufügen können.
Wie Sie den Inhalt Ihrer Lebenslauf-Website-Vorlage bearbeiten können
Nachdem Sie alles eingerichtet haben, ist es an der Zeit, die Vorlage mit Ihren Informationen zu personalisieren. Lassen Sie uns durchgehen, wie Sie die Flatrica-HTML-Vorlage anpassen:
1. Die Struktur der HTML-Lebenslaufvorlage
Bevor wir mit dem Ändern 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.
Der Ordner mit den eigentlichen Site-Vorlagendateien enthält mehrere Unterordner:
- Colors, die alle in der Site-Vorlage verwendeten Farbcodes und Variablen enthalten.
- Schriftarten, die alle Symbolschriftarten enthalten.
- Bilder mit allen Platzhalterbildern.
- Ein Ordner enthält den gesamten JavaScript-Code, der für die ordnungsgemäße Funktion der Vorlage erforderlich ist. In den meisten Fällen müssen Sie diesen Ordner oder die darin enthaltenen Dateien nie bearbeiten, da JavaScript zusätzliche Funktionen bietet, z. B. das Umschalten des Menüs zum Öffnen, das Steuern der Folienanimationen und das Überprüfen von Formularen.
- Ein PHP-Ordner, der den PHP-Code enthält, der für das Funktionieren des Kontaktformulars erforderlich ist. Sie müssen hier nur eine einzige Codezeile bearbeiten, um Ihre E-Mail-Adresse hinzuzufügen.
- Der Sass-Ordner enthält alle Variablen für die Stylesheets.
- Stylesheets enthalten die CSS-Dateien, die Sie bearbeiten müssen, um der Vorlage Ihr Styling hinzuzufügen und es mit Ihrer Marke abzugleichen.
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 Ordner Stylesheets, Bilder, JavaScript und PHP stoßen. Ihre Vorlage enthält möglicherweise auch mehr oder weniger HTML-Dateien.
2. Ersetzen der Standard-HTML-Vorlageninformationen
Doppelklicken Sie auf die Datei index-normal.html (oder auf index.html, falls Sie eine andere Vorlage verwenden). Dadurch wird die Datei in Ihrem Browser geöffnet und es wird einfacher zu verstehen, welche Teile des Codes Sie bearbeiten müssen und wie Sie sie in Ihrer HTML-Vorlagendatei finden.
Wenn Sie sich die Vorlage in Ihrem Browser ansehen, werden Sie feststellen, dass Sie Folgendes bearbeiten müssen:
- Ihr Name und Ihre Kontaktinformationen.
- Der Klappentext über den Schaltflächen zum Herunterladen Ihres Lebenslaufs.
- Verschiedene Abschnitte mit Informationen zu Ihrer Ausbildung, Ihren Fähigkeiten, Ihrer Erfahrung, Ihrem Portfolio, früheren Kunden und vielem mehr.
Sobald Sie wissen, was Sie ändern müssen, können Sie nach dem entsprechenden Code suchen.
Klicken Sie mit der rechten Maustaste auf den Namen John Doe und wählen Sie Inspizieren. Unten sehen Sie ein Fenster mit dem HTML-Code, aus dem unsere Vorlage besteht.
Die Codezeile mit dem Namen wird auf der linken Seite des Inspektorfensters mit dem entsprechenden Stil auf der rechten Seite ausgewählt.
Wie Sie dem obigen Screenshot entnehmen können, befindet sich der Name zwischen den <h4>-Tags, den HTML-Tags, die zur Darstellung von Überschriften verwendet werden.
In den meisten Fällen haben Tag-Paare wie dieses ein öffnendes und ein schließendes Tag, und der Inhalt muss zwischen diesen Tags platziert werden, damit er auf einer Webseite wie folgt angezeigt wird:
<h4>John Doe</h4>
Um die Vorlage zu bearbeiten, müssen Sie lediglich wissen, welche Tags den Teil der Seite enthalten, den Sie bearbeiten möchten, sie im Code finden und durch Ihre Informationen ersetzen.
Öffnen Sie die HTML-Datei in Ihrem Editor
Kehren Sie nun zum Vorlagenordner zurück, klicken Sie mit der rechten Maustaste auf die Datei index-normal.html und wählen Sie Mit Sublime 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 es um die Zeilen 150-151 finden. Klicken Sie dann zwischen die <h4>-Tags und ersetzen Sie den Namen durch Ihren eigenen.
Klicken Sie danach zwischen die <h6>-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 die Vorlage einen Abschnitt enthält, den Sie nicht benötigen, löschen Sie ihn einfach. Im folgenden Screenshot habe ich alles im Abschnitt "Preistabelle" ausgewählt und den gesamten darin enthaltenen Code gelöscht.
Wie Sie Bilder durch Ihre eigenen ersetzen
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 Ihre Bilder im selben Ordner ab. Wenn Sie den Ratschlägen zuvor gefolgt sind, haben Sie Ihre Bilder mit denselben Namen wie die Platzhalter benannt, wodurch die Bearbeitung der Vorlage beschleunigt wird.
Wenn Sie weitere Informationen hinzufügen möchten, wählen Sie den vorhandenen Code im gewünschten Abschnitt aus, kopieren Sie ihn, indem Sie auf STRG/CMD + C klicken, und fügen Sie ihn unten mit STRG/CMD + V ein. Im folgenden Screenshot möchte ich eine weitere Fertigkeitsleiste hinzufügen. Also, ich habe ich Code für die vierte Fertigkeitsleiste ausgewählt und ihn direkt darunter kopiert:
Und das Endergebnis sieht so aus:
So ändern Sie das Erscheinungsbild Ihrer HTML-Lebenslauf-Site
Nachdem Sie alle Informationen ersetzt haben, ist es an der Zeit, die Website-Vorlage für den Lebenslauf nach Ihren Wünschen zu gestalten. Standardmäßig enthält die Flatrica-HTML-Vorlage verschiedene Stylesheets. Wenn Sie sich den Ordner Stylesheets ansehen, werden Sie feststellen, dass er nach den verwendeten Farben benannt ist:
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 mit der Aufschrift:
<!-- CUSTOM STYLE -->
<link href="stylesheets/style.css" id="switch_style" rel="stylesheet">
Wenn Sie den Namen in style_blue.css ändern, erhält unsere Vorlage eine völlig neue Farbe und ein neues Aussehen:
Wenn Sie sich abenteuerlustig fühlen, können Sie das Haupt-Stylesheet style.css mit Schriftarten und Farben Ihrer Wahl bearbeiten. Sie können beispielsweise die Hintergrundfarbe in der Datei style.css bearbeiten, indem Sie einen HEX-Code Ihrer gewünschten Farbe wie folgt eingeben:
background-color: #65b5c1;
Das Bearbeiten von CSS kann auf die gleiche 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 Überprüfen. Dieses Mal möchten Sie auf der rechten Seite der Registerkarte "Inspektor" nach dem Code suchen und dann denselben Code im Code-Editor finden.
Wie Sie Ihre Website-Dateien auf den Server hochladen
Nachdem Sie die Website-Vorlagendateien nach Ihren Wünschen geändert haben, müssen Sie sie auf Ihren Hosting-Server hochladen. Sie sollten von Ihrem Host eine E-Mail mit den erforderlichen Informationen zum Übertragen von Dateien über FTP erhalten haben.
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 dann auf QuickConnect:
Suchen Sie den Ordner mit Ihrer Vorlage auf Ihrem Computer auf der linken Seite des Bildschirms und klicken Sie darauf, um ihn aufzuklappen. 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 im Ordner public_html hochladen.
Sobald alle Dateien hochgeladen wurden, öffnen Sie Ihren Browser und geben Sie Ihren Domainnamen ein. Herzlichen Glückwunsch ,Ihre neue Lebenslauf-Website ist jetzt online!
Vier schnelle Tipps, um Ihre Website für Lebensläufe großartig zu machen
Nachdem Sie nun wissen, wie Sie eine HTML-Lebenslaufvorlage verwenden, finden Sie hier vier kurze Tipps, mit denen Sie Ihre persönliche Website noch besser gestalten können:
- Komprimieren Sie Ihre Bilder - Stellen Sie vor dem Hochladen von Dateien auf Ihren Hosting-Server sicher, dass Sie die Dateigröße Ihrer Bilder reduzieren, indem Sie sie optimieren. Dies wird Ihnen helfen, Ihre Website zu beschleunigen. Sie können ein Tool wie TinyJPG verwenden, um die Bilder zu komprimieren, ohne deren Qualität zu beeinträchtigen.
- Erwägen Sie das Minimieren Ihrer Stylesheets und JavaScript-Dateien - Wie bei Bildern hilft das Reduzieren der Dateigröße dabei, dass Ihre Website schneller geladen wird. Tools wie CSS Minifier und JSCompress erledigen den Job für Sie.
- Hinzufügen Ihrer Website zu Ihren Social Media-Profilen - Sie haben hart daran gearbeitet, Ihre Website zu erstellen. Jetzt ist es an der Zeit, die Welt darüber zu informieren. Erhöhen Sie Ihre Sichtbarkeit, indem Sie Ihre Website zu Ihren Social Media-Profilen hinzufügen.
- Verwenden Sie es als Teil Ihrer E-Mail-Signatur - Eine der besten Möglichkeiten, Ihre Website zu bewerben, besteht darin, sie Ihrer E-Mail-Signatur hinzuzufügen. Die Einrichtung ist einfach, kostenlos und dauert Sekunden. Die Vorteile sind jedoch zahlreich.
Richten Sie Ihre HTML-Lebenslaufvorlage ein
Das Bearbeiten einer HTML-Vorlage mag zunächst einschüchternd erscheinen, ist jedoch nicht so schwierig, wenn Sie erst einmal verstanden haben, wie die Vorlage aufgebaut 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 obigen Leitfaden, um Ihre Website-Vorlage für Lebensläufe zu ändern und Ihre Chancen auf eine Anstellung zu erhöhen.
By
