Share
Sie haben also gerade eine HTML-Vorlage gekauft und müssen sie anpassen, bevor Sie sie online stellen können. Sie haben jedoch noch keine Erfahrung mit Code, so dass Sie nicht sicher sind, wie Sie damit umgehen sollen. Nun, seien Sie ruhig, denn in diesem Tutorial werden wir Sie durch den gesamten Prozess führen.
Wir gehen davon aus, dass Sie noch nie zuvor eine HTML-Zeile gesehen haben, geschweige denn eine bearbeitete. Unabhängig davon, wie neu Sie mit Code arbeiten, wird Ihnen genau angezeigt, was Sie bei jedem Schritt des Befehls tun sollen Weg.
Beginnen wir ganz am Anfang.
Technisch gesehen lautet die Antwort auf diese Frage "Hyper Text Markup Language". Für das Anpassen einer Vorlage können Sie jedoch HTML als eine Reihe von öffnenden und schließenden Tags wie folgt betrachten:
Tags sind mit gekennzeichnet < und > Zeichen, und das schließende Tag enthält immer eine /. Paare von Tags haben Inhalte zwischen sich wie folgt:
John Smith, Front-End-Entwickler
Manchmal gibt es jedoch auch eigenständige Tags ohne Abschlusspartner wie diese:
Durch verschiedene HTML-Tags werden verschiedene Inhaltstypen auf einer Webseite angezeigt. Das obige Beispiel von Tags würden eine große Überschrift mit der Aufschrift „John Smith, Front-End-Entwickler“ und das Beispiel erstellen
Um eine HTML-Vorlage zu bearbeiten, müssen Sie nur wissen, welche Tags die Teile der Seite darstellen, die Sie ändern möchten, wie Sie sie im Code finden und wie sie bearbeitet werden, damit sie zeigen, was Sie möchten.
Ja, es ist durchaus möglich, HTML-Code in Notepad oder einem ähnlichen Programm zu bearbeiten. Mit einer geeigneten Code-Bearbeitungs-App können Sie jedoch problemloser arbeiten. Einer der Hauptgründe ist, dass Sie den Code farbig hervorheben, wie Sie in Kürze sehen werden. Dies erleichtert das Lesen und Bearbeiten.
Ich empfehle Sublime Text, den Sie hier herunterladen können: https://www.sublimetext.com/3
Laden Sie die von Ihnen gekaufte Vorlage herunter. Im Fall dieses Tutorials verwenden wir diese Vorlage zum Bereinigen des Lebenslaufs.
Die meisten HTML-Vorlagen werden in einer ZIP-Datei geliefert. Wenn ja, extrahieren Sie jetzt Ihre. Schauen Sie sich dann in den Ordnern der Vorlage um, bis Sie die Datei "index.html" oder "index.htm" finden.
In unserer Beispiel-CV-Vorlage befindet sich die Datei "index.html" im Verzeichnis "01.html-website".
Öffnen Sie nun diese Datei in Chrome. Auch wenn Chrome nicht Ihr Standard- oder bevorzugter Browser ist, verwenden Sie ihn trotzdem, da wir mit einigen Tools arbeiten werden, die in Chrome integriert sind, um Sie bei der Bearbeitung zu unterstützen.
Wenn Sie zum ersten Mal eine Vorlage bearbeiten, sollten Sie nicht auf die Idee kommen, die Farben und das Layout noch anzupassen. Dazu müssen Sie sich in CSS, der für das Seitenstyling verantwortlichen Sprache, einarbeiten. Es ist eine gute Idee, sich auf eine Sache zu konzentrieren, wenn Sie die Anpassung von Vorlagen neu kennen. HTML ist der beste Ausgangspunkt.
Um den Ball ins Rollen zu bringen, werfen Sie einen Blick auf Ihre Vorlage in Chrome und finden Sie heraus, welche Elemente und Bilder auf der Seite geändert werden müssen. Wenn Sie möchten, können Sie eine Liste erstellen, durch die Sie jedes Element während der Bearbeitung durchgehen können.
Im Falle unserer Lebenslaufvorlage möchten wir ändern:
Jetzt haben wir eine Liste von Elementen, die geändert werden können, und können die entsprechenden HTML-Tags im Code suchen. Beginnen wir mit dem Namen.
Klicken Sie mit der rechten Maustaste auf den Namen, der standardmäßig "John Smith" lautet, und wählen Sie aus Prüfen:
Ein solches Fenster sollte sich in Ihrem Browser öffnen:
Das Fenster "Inspektion"In diesem Fenster können Sie den Code interaktiv betrachten. Bewegen Sie die Maus über die angezeigte Linie …
Wenn Sie den Mauszeiger über verschiedene Codezeilen bewegen und sehen, welche Bereiche der Seite aufleuchten, können Sie herausfinden, welcher Code zu welchem Element gehört. Sie bewegen sich einfach über verschiedene Codezeilen, bis der gewünschte Teil aufleuchtet.
Nun erweitern Sie die h1 Klicken Sie auf das kleine Dreieck links neben dem Tag und Sie sollten den Inhalt dazwischen sehen, d. h. John Smith Entwickler für Benutzeroberflächen.
Dieser Wortlaut stimmt mit dem überein, was Sie auf dem Bildschirm sehen. Sie wissen also, dass Sie den richtigen Teil des Codes gefunden haben.
Nun ist es Zeit, Ihre HTML-Datei zur Bearbeitung zu öffnen. Öffnen Sie die "index.html" -Datei in Sublime Text. Sie sollten etwa Folgendes sehen:
Sie möchten hier den Code finden, der dem entspricht, was Sie im Chrome-Inspector gesehen haben. Blättern Sie durch, bis Sie ihn in den Zeilen 61 - 64 finden.
Jetzt können Sie den Inhalt zwischen den Tags bearbeiten, um den Namen und den Beruf in Ihren eigenen zu ändern. Bearbeiten Sie zuerst „John Smith“ in Ihren eigenen Namen:
Dann dazwischen Tags, ändern Sie "Front-End-Entwickler" in Ihren eigenen Beruf.
Speichern Sie Ihre Datei und aktualisieren Sie die Vorlage in Chrome. Sie sollten sehen, dass Ihre Änderungen folgendermaßen aussehen:
Jetzt haben Sie den grundlegenden Prozess:
Wiederholen Sie den Vorgang zum Bearbeiten des restlichen Inhalts, den Sie anpassen möchten.
Als nächstes fügen wir unser eigenes Bild links vom Namen- und Berufsbereich hinzu. Klicken Sie mit der rechten Maustaste auf das Bild, prüfen Sie es und notieren Sie das entsprechende Tag:
Sie sehen im Inspektorfenster, dass diese Zeile direkt über den Zeilen liegt, die wir gerade geändert haben:
Gehen Sie zu Ihrer HTML-Datei und suchen Sie das Tag in Zeile 59:
Für dieses Tag müssen Sie den Wert von ändern src Attribut sehen Sie in der img Etikett. Sie tun dies, indem Sie das, was zwischen den Anführungszeichen steht, bearbeiten. Sie ändern es in Dateiname und Speicherort Ihres eigenen Bildes.
Schnappen Sie sich ein Bild von sich selbst, das 150 x 150 Pixel groß ist (ignorieren Sie, dass dort der Dateiname 140x140.png lautet, die Größe ist eigentlich 150x150)..
Legen Sie Ihr Bild im Unterordner "_content" ab. Es befindet sich im selben Ordner wie Ihre "index.html" -Datei.
Ändern Sie jetzt in Ihrer HTML-Datei den Wert von src Ersetzen Sie „140x140.png“ durch die Datei, die Sie gerade zum Unterordner „_content“ hinzugefügt haben. Stellen Sie sicher, dass die von Ihnen eingegebene Dateierweiterung derjenigen in Ihrer Datei entspricht, z. "Png" / "jpg":
Speichern Sie Ihre Datei, aktualisieren Sie Chrome, und Ihr neues Bild sollte angezeigt werden:
Jetzt bearbeiten Sie die Links auf den Social Media-Symbolen in der oberen rechten Ecke der Vorlage. Klicken Sie mit der rechten Maustaste auf eines der Symbole und prüfen Sie es. Schauen Sie sich im Fenster die Zeile über der hervorgehobenen Zeile an, und Sie sehen, dass sie den Text "facebook-icon" enthält. Wir werden dies verwenden, um den Code in unserer HTML-Datei zu finden.
Zurück in Sublime Text drücken Sie STRG + F und führe einen Fund für "facebook-icon" aus. Sie sollten es in Zeile 75 finden.
Das ein Das Tag in Zeile 75 erstellt den Link auf dem Symbol und das href Attribut, das Sie darin sehen, bestimmt, wohin der Link gehen wird. Sie müssen den Wert davon ändern href Attribut zu Ihrer Facebook-URL (zum Beispiel: https://www.facebook.com/mylink).
Ersetze das # das ist standardmäßig mit Ihrer URL da. Machen Sie dasselbe für Twitter in Zeile 79, Google+ in Zeile 83 und LinkedIn in Zeile 87.
Wenn Sie ein Symbol vollständig entfernen möchten, markieren Sie den Link ab der Öffnung tag und ende am abschluss Tag, dann löschen Sie den Code.
Jetzt speichern und aktualisieren Sie Ihre Site. Wenn Sie dann auf die Links klicken, sollten sie an den richtigen Ort verschoben werden.
Als Nächstes wollen wir die Kontaktinformationen direkt unter den sozialen Symbolen ändern.
Beginnen Sie mit der Überprüfung des Wortes "E-Mail", damit wir herausfinden können, wo dieser Kontaktinformationsbereich im Code beginnt. Notieren Sie sich die hervorgehobene Codezeile und die Zeile darunter, damit Sie sie in Ihrer HTML-Datei zuordnen können.
Drücken Sie in Sublime Text STRG + F wieder und diesmal nach "Email" suchen. Sie müssen die Instanz des Wortes „E-Mail“ suchen, die von Code umgeben ist, der dem entspricht, was Sie im Inspektorfenster gesehen haben.
Sie finden es in Zeile 94. Markieren Sie die Standard-E-Mail-Adresse "[email protected]" an den beiden Stellen in dieser Zeile:
Dann ersetzen Sie es durch Ihre eigene E-Mail-Adresse. In der nächsten Zeile können Sie die Telefonnummer auch durch Ihre eigene Nummer ersetzen. In der Zeile darunter können Sie die Webadresse durch Ihre eigene Adresse ersetzen:
Beginnen wir nun mit der Bearbeitung der Hauptabschnitte des Lebenslaufs der Vorlage. Es gibt ein paar Teile in diesen Abschnitten. Wir werden also zunächst jeden Abschnitt untersuchen, damit Sie wissen, worauf Sie in Ihrem Code achten müssen. Hier haben Sie auch die Möglichkeit, ein wenig mehr darüber zu erfahren, wie Sie sich durch das Inspektorfenster bewegen, um verschiedene Teile Ihrer Website zu finden.
Scrollen Sie nach unten zum Abschnitt „Professionelles Profil“, klicken Sie mit der rechten Maustaste in den Textabschnitt und prüfen Sie ihn.
Im Inspektor wird angezeigt, dass a markiert ist p tag-Dieses Tag ist für das Erstellen von Absätzen in Ihrem Text verantwortlich.
Als Nächstes möchten wir wissen, wie ein ganzer Textabschnitt in einem Lebenslaufabschnitt im Code aussieht, nicht nur einzelne Absätze. Klicken Sie im Inspektorfenster auf die Codezeile über dem Absatz, den Sie gerade geprüft haben, und der gesamte Text sollte leuchten:
Dadurch erfahren Sie, dass jeder Codeabschnitt in die Tags eingeschlossen ist div ist kurz für a Einteilung, Diese Tags werden verwendet, um das Layout und das Styling zu steuern.
Überprüfen Sie nun den Titel des Lebenslaufabschnitts „Berufsprofil“:
Zuerst sehen Sie nur eine andere Gruppe von div Stichworte. Dies liegt daran, dass die eigentliche Überschrift zwischen diesen Tags verschachtelt ist.
Schlagen Sie auf das kleine Dreieck am Ende der Zeile, um es zu erweitern und den Inhalt zu sehen. Machen Sie dasselbe erneut in der nächsten Zeile, bis Sie den gesuchten Text „Professional Profile“ sehen. Sie finden es eingepackt …
Jetzt wissen wir, wie der Code für jeden Abschnitt dieses Lebenslaufs aussieht. Wir können zu Sublime Text zurückkehren und mit der Bearbeitung beginnen.
Positionieren Sie den Mauszeiger oben in Ihrem HTML-Dokument, damit Sie mit der Suche von oben beginnen können. Drücken Sie STRG + F und suchen Sie nach "cv-item". Suchen Sie weiter, bis Sie die Instanz des Codes gefunden haben Jetzt können Sie den Text für den Abschnitt "Professionelles Profil" durch Ihren eigenen ersetzen. Umhüllen Sie jeden Absatz Ihres Textes mit … Wenn Sie fertig sind, stellen Sie sicher, dass das öffnende Absatz-Tag des letzten Absatzes des Abschnitts das Attribut enthält … Wenn Sie Ihr HTML-Dokument speichern und Ihre Site aktualisieren, sollten Sie sehen, dass in den beiden oberen Abschnitten alles angepasst wurde. Jetzt können wir mit den übrigen CV-Elementen auf dieselbe Weise wie mit dem „Berufsprofil“ arbeiten.. Untersuchen Sie jeden Teil jedes Abschnitts, um sich mit dem Code vertraut zu machen, nach dem Sie suchen müssen, um ihn zu bearbeiten. Überprüfen Sie einen Jobtitel: Überprüfen Sie einen Jobzeitraum: Überprüfen Sie eine Aufzählungsliste: Gehen Sie genauso vor, wie Sie den Abschnitt "Berufsprofil" bearbeitet haben, um den Inhalt der verbleibenden Lebenslaufabschnitte zu bearbeiten. Um Jobtitel, Jobperioden oder Aufzählungslisten zu bearbeiten, finden Sie den Code, der mit dem übereinstimmt, was Sie im Inspektorfenster gesehen haben, genau wie Sie dies bei jeder Bearbeitung getan haben. Benutzen … Hinweis: Wenn Sie neue Lebenslaufabschnitte hinzufügen oder vorhandene entfernen möchten, müssen Sie den Inspektor verwenden, um die Codetags zu finden, die den gesamten Abschnitt einschließen. In diesem Beispiel sehen Sie, dass der gesamte Abschnitt mit den Tags umschlossen ist In Ihrem Code können Sie nun den gesamten Codeblock finden und entweder kopieren und einfügen, um ein neues Element zu erstellen, oder das gesamte Lot löschen, wenn Sie es entfernen möchten. Mit den bearbeiteten Lebenslaufabschnitten haben wir den letzten Punkt auf unserer Änderungsliste. Die Copyright-Meldung in der Fußzeile. Wieder verwenden wir den gleichen Prozess. Klicken Sie mit der rechten Maustaste auf die Copyright-Meldung und prüfen Sie sie: Finden Sie dann den passenden Code in Ihrem HTML-Code und bearbeiten Sie ihn mit dem aktuellen Jahr und Ihrem eigenen Namen: Gut gemacht! Sie haben diese HTML-Vorlage gerade vollständig an Ihre eigenen Inhalte angepasst. Ich hoffe, Sie sind jetzt zuversichtlich, in Zukunft weitere Anpassungen des Codes vornehmen zu können. Die Vorlage, an der wir gearbeitet haben, ist relativ einfach, aber denken Sie daran, dass der Bearbeitungsprozess immer derselbe ist, egal wie kompliziert eine Vorlage ist. Überprüfen Sie einfach die Vorlage und geben Sie den Code für den zu ändernden Teil an. Suchen Sie dann den Code in Ihrer HTML-Datei und bearbeiten Sie ihn. Wenn Sie beim Bearbeiten ein HTML-Tag sehen, das Sie nicht verstehen, lassen Sie sich nicht davon abhalten. Es gibt unendlich viele Online-Informationen, die Ihnen helfen, zu erfahren, was jeder einzelne tut. Für zusätzliche Hilfe auf dieser Route lesen Sie diese großartigen Lernhilfen:Berufsprofil
Klasse mit dem Wert zuletzt, so was: 
p Tags zum Erstellen von Absätzen. Wenn Sie einen Abschnitt mit einem Absatz beenden, stellen Sie wie beim Abschnitt "Professionelles Profil" sicher, dass er Absatz enthält tag beinhaltet class = "last", d.h.. 
Copyright-Meldung bearbeiten
Und du bist fertig!
Accentsconagua
