Entwerfen und codieren Ihre erste Website in 9 leicht verständlichen Schritten

1. Bearbeiten Sie den Titel und den Header

OKNO bietet viele HTML-Designcodes, aber wir arbeiten in diesem Tutorial an der index-onepage-personal.html -Datei. Es handelt sich um eine einfache Vorlage für den Design -Design -Code, an der Anfänger arbeiten können. Öffnen Sie es in erhabenem Text und Ihrem Browser, nachdem Sie den Okter -Zip -Ordner extrahiert haben. Mit dem Sublime-Text können Sie den Beispiel-HTML-Code für Website-Design bearbeiten, und in Ihrem Browser werden die Änderungen in Echtzeit angezeigt. Die obere Linie ist für ein helles Logo vor einem dunklen Hintergrund. Das Endergebnis ist für ein dunkles Logo vor einem hellen Hintergrund. Dies soll sicherstellen, dass Ihr Branding auf der Seite sichtbar ist. Ändern Sie die Dateinamen im Website-Designcode (

logo-light.png

und logo-dark.png

), um den Dateinamen Ihres Logos zu entsprechen. Was kann hier geändert werden? Wir können das Hintergrundbild und den Avatar ersetzen. Sie können auch Ihren Namen, Ihre Berufsbezeichnung, Ihren Fachgebiet und andere Informationen hinzufügen. Sie können das Hintergrundfoto aus dem

    	<!-- Logo --><br>		<a class="logo-wrapper" href="index.html"><br>			<img class="logo logo-light lazy" src="/static/imghw/default1.png" data-src="assets/img/logo-light.png" alt="Entwerfen und codieren Ihre erste Website in 9 leicht verständlichen Schritten"><br>			<img class="logo logo-dark lazy" src="/static/imghw/default1.png" data-src="assets/img/logo-dark.png" alt="Entwerfen und codieren Ihre erste Website in 9 leicht verständlichen Schritten"><br>		</a><br>

bg-Image

img

im

container v-center img -Tag durch das Quellattribut Container-V-Center bearbeiten. Das SRC -attribut für das Hintergrundfoto können wir sehen, wo das Bild ermittelt werden soll. Gehen Sie in Ihrem Finder oder Datei -Explorer zu Assets & gt;  img & gt;  

fotos

Um die Bilddatei selbst zu finden. Geben Sie Ihrem Foto einen einfachen Namen und platzieren Sie es in den Ordner fotos . Ändern Sie nun den Namen im H1

-Tag im Abschnitt col-MD-9

/ home . Sie werden durch die DD -Tags in jedem DT -Tags in jedem HREF -attribut mit assets/cv/namer-cv-file.extsion definiert. Fügen Sie das HREF -Matchtribut hinzu, um den Lebenslauf herunterladen zu lassen. Die Zeile in Ihrem Beispiel -HTML -Code für Website -Design sollte jetzt so aussehen: Speichern Sie den HTML -Code für dieses Webdesign -Projekt und testen Sie ihn in Ihrem Browser. Beachten Sie, dass Sie vorerst die Datei nur aus der Schaltfläche öffnen können. Aber sobald Ihre Website live geht, können Besucher Ihren Lebenslauf herunterladen.

3. Dienstleistungen Abschnitt

Fügen wir die Dienste hinzu, die wir in unserem Beispiel -HTML -Code für Website -Design anbieten. Wenn Sie den Namen dieses Abschnitts oder andere Abschnitte in Schritt 1 geändert haben, können Sie den Rest des Tutorials weiterhin folgen. Stellen Sie einfach sicher, dass Sie das H5 -Tag ändern. Dies kann jeder Service sein, den Sie anbieten. Geben Sie in der folgenden Zeile eine kurze Beschreibung Ihres Dienstes im i -Tag. In diesem Beispiel werde ich das starke -Tag unter der Div verwenden. Innerhalb des Aria-Valuenow -attributs sowie des Div . Mit der ersten Zeile können wir das Datum bearbeiten, die folgende Zeile für den Titel Ihrer Ausbildung oder Ihrer Berufserfahrung betrifft, und die endgültige Zeile ist für den Ort. Wenn ich also meinen dreimonatigen Raket Science-Kurs bei der NASA teilen wollte, würde ich den Code so bearbeiten, dass Sie so aussehen:

    	<!-- Logo --><br>		<a class="logo-wrapper" href="index.html"><br>			<img class="logo logo-light lazy" src="/static/imghw/default1.png" data-src="assets/img/logo-light.png" alt="Entwerfen und codieren Ihre erste Website in 9 leicht verständlichen Schritten"><br>			<img class="logo logo-dark lazy" src="/static/imghw/default1.png" data-src="assets/img/logo-dark.png" alt="Entwerfen und codieren Ihre erste Website in 9 leicht verständlichen Schritten"><br>		</a><br>

Sie können diese Schritte für die beiden anderen Ereignis Klasse-Abschnitt / Testimonials Kommentar wiederholen. Diese Zitate haben eine besondere Formatierung, die wir so verlassen werden, wie sie sind. Alles, was wir tun werden, ist, den im starken -Tag gefundenen Text zu bearbeiten, um Teile des Testimonials mit fettem Text hervorzuheben. Wir können unser Foto mit einer vertrauten Codezeile ändern. Wenn wir diese Zeile lesen, können wir sehen, dass wir unsere Fotos in dem Ordner

wakes

haben müssen, der im Ordner img gefunden wird. Wir müssen auch den Dateinamen ändern, damit unsere Website weiß, welches Foto zu verwenden ist.  Lassen Sie uns diese Änderungen vornehmen und speichern. Aktualisieren Sie Ihren Browser, um Ihr Foto zu sehen. Es sieht so aus, als ob wir eine kurze Beschreibung des auf dem Bild gezeigten Projekts hinterlassen können. Nutzen wir diese HTML -Webseitenvorlage voll aus und fügen Sie eine kurze Beschreibung hinzu. Versuchen Sie, mit Google zu verlinken, um zu sehen, wie dies funktioniert.

Mit diesem Abschnitt können Sie bis zu sechs Projekte teilen. Befolgen Sie die obigen Schritte für jede Arbeit, die Sie teilen möchten.

    					<div class="col-sm-4"><a href="assets/cv/my-resume.docx" download class="btn btn-primary btn-filled btn-block">Download CV</a></div><br>

8. Kontaktabschnitt

ist nun die Zeit, die Kontaktinformationen im HTML -Code für dieses Webdesign -Projekt einzurichten. Dies ist ein einfacher Schritt, um in Ihrem Webdesign -Code auszuführen. Dies folgt dem gleichen Prozess, über den wir im zweiten Schritt dieses Webdesign -Code -Tutorial gesprochen haben. 

Innerhalb des Abschnitts / Inhalts fügen wir unsere Adresse, Telefonnummer und E -Mail -Adresse hinzu. Fühlen Sie sich frei, die Art der Kontaktinformationen zu ändern, die Sie teilen, indem Sie bearbeiten, was sich innerhalb der Platzhalter -Attribute in der Schaltfläche Tag befindet.

    	<!-- Logo --><br>		<a class="logo-wrapper" href="index.html"><br>			<img class="logo logo-light lazy" src="/static/imghw/default1.png" data-src="assets/img/logo-light.png" alt="Entwerfen und codieren Ihre erste Website in 9 leicht verständlichen Schritten"><br>			<img class="logo logo-dark lazy" src="/static/imghw/default1.png" data-src="assets/img/logo-dark.png" alt="Entwerfen und codieren Ihre erste Website in 9 leicht verständlichen Schritten"><br>		</a><br>

Aber funktioniert unser Kontaktformular? Noch nicht! Wir müssen eine sehr schnelle Bearbeitung unserer PHP -Datei machen. Gehen Sie in Ihrem Finder oder Datei -Explorer zu

Assets & gt;  php im OKNO -Ordner. Öffnen Sie dann die Datei contact-form.php in Sublime-Text. Wenn ein Besucher das Kontaktformular ausfüllt, erhalten Sie eine E -Mail, die Ihnen mitteilt, was er gesagt hat.

9. Bearbeiten Sie die Fußzeile

    					<div class="col-sm-4"><a href="assets/cv/my-resume.docx" download class="btn btn-primary btn-filled btn-block">Download CV</a></div><br>

Dies ist die letzte unserer Schritte, um eine Website zu codieren. Die Fußzeile dieser einseitigen Website bietet den Erstellern der OKNO-Webvorlage und drei Links ein Copyright-Guthaben. Sie können die Fußzeile vollständig entfernen, einige Elemente entfernen oder die Links bearbeiten. Wenn Sie die Links bearbeiten möchten, werde ich Sie durchführen, wie dies zu tun ist. Mit dieser Änderung können Besucher auf diese Website gehen, indem Sie auf

anmelden. Sie können diesen Text in alles ändern, was Sie möchten. Wiederholen Sie diesen Vorgang für die nächsten beiden Listenelemente.

Wir sind fertig! Dieser Prozess spart Ihnen viel Zeit, wenn Sie eine Website für sich oder einen Kunden erstellen. Und wie Sie sehen können, ist dies eine der einfachsten Möglichkeiten, eine Website zu erstellen. 

Finden Sie fantastische HTML -Webseitenvorlagen aus Envato -Elementen

Wenn Ihnen die Webvorlage, die wir in diesem Tutorial verwendet haben, gefallen haben, finden Sie noch mehr Abwechslung für Envato -Elemente. Es gibt eine Menge moderner Auswahlmöglichkeiten für Sie, und Sie können sie genauso einfach bearbeiten wie Entwerfen und codieren Ihre erste Website in 9 leicht verständlichen Schritten. Hier sind nur einige Optionen, die Sie ausprobieren können, die in Envato -Elementen zu finden sind.

1. Aster: Creative Portfolio & Agentur HTML -Vorlage Wenn Sie nicht zu viel Codierung für Webdesign kennen, können Sie weiterhin eine atemberaubende Website erstellen. Diese HTML -Vorlage ist ein gutes Beispiel für die Codierung von Webdesign. Es ist für digitale Portfolios und Kreativagenturen hergestellt. Es stehen mehr als fünf Homepage -Muster zur Auswahl sowie über 17 Innenseiten. Der Code ist sauber und kommentiert, wodurch der Aster eine der einfachsten Möglichkeiten für die Codierung einer Website macht. 

2. Appstorm: App -Start -up -Vorlage

Lerncodierung für Webdesign? Hier ist die perfekte HTML -Webseitenvorlage für ein Tech -Startup. AppStorm wurde unter Berücksichtigung von Software entwickelt. Das Layout ist unglaublich modern und funktional und für Mobilgeräte gemacht. Wählen Sie aus drei verschiedenen Startseite Designs und Anpassungsoptionen für das perfekte Aussehen. AppStorm ist der einfachste Weg, eine Website für Ihre neue App oder SaaS -Produkte zu codieren.

3. Jadusona: E-Commerce Baby Shop Bootstrap4 Vorlage

Jadusona ist eine minimale, benutzerfreundliche E-Commerce-Website. Sie haben eine Vielzahl von Seitendemos, mit denen Sie Ihre Kinder- und Kinderprodukte zeigen können. Machen Sie Ihren Online -Baby Shop dank Jadusonas Funktionen vor, z. Dies ist ein gutes Beispiel für Webdesign -Codierung, um Ihre Website zu starten.

4. Erika: Portfolio, Lebenslauf und Lebenslauf HTML -Vorlage
• Ergänzen Sie Ihren physischen Lebenslauf oder Lebenslauf mit Erika. Diese Online -Zielseite ist der perfekte Ort, um den Besuchern alles über Sie und Ihre Fähigkeiten zu erzählen. Zeigen Sie Ihre Dienste, Ihr Portfolio und mehr mit Erika. Es handelt sich um retina-fähig, browser kompatibel und reaktionsschnell, sodass Besucher von jedem Gerät stöbern können. Grundsätzlich ist Erika alles, was Sie benötigen, wenn Sie einen persönlichen Webvorgang -Download benötigen. Starten Sie mit dieser Vorlage mit Codierung für Webdesign! 
• 5. Emily: Personal Blog HTML -Vorlage
Geben Sie Ihrem Inhalt die Plattform, die sie mit Emily verdient. Diese persönliche Blog HTML -Webseitenvorlage bietet über 14 HTML -Seiten, mit denen Sie Ihre Website erstellen können. Das Design ist voll und ganz reaktionsschnell und browser kompatibel, sodass Besucher Ihr Blog auf jedem Gerät genießen können. Wenn Sie im HTML -Code etwas über das Webdesign erfahren möchten, zeigt Ihnen ein Projekt wie Emily, wie es fertig ist. Die oben vorgestellten Webdesign -Vorlagen sind einige der besten Webdesign -Beispiele für Anfänger, die Sie heute online finden können. Wenn Sie sich Premium -Optionen mit sauberem Code ansehen möchten, lesen Sie diese Artikel vom Envato Tuts -Team.

Erfahren Sie mehr über Code mit Envato -Tuts

Egal, ob Sie ein Anfänger sind oder mit Code erfahren, es gibt immer etwas Neues zu lernen. Wenn Sie Video -Tutorials und -anleitungen finden möchten, um Ihnen zu helfen, lesen Sie den YouTube -Kanal Envato Tuts. Es gibt Hunderte von Video -Tutorials, einschließlich für Code. Schauen Sie sich einfach unsere Code -Videohandbuch -Wiedergabeliste an. Hier finden Sie einen Blick auf das, was Sie finden können:

Es gibt auch schriftliche Tutorial -Guides und Kurse auf der Website von Envato Tuts. Im Folgenden finden Sie einige, mit denen Sie beginnen können. Webdesign -Vorlagen sind perfekt, wenn Sie HTML einfach erstellen möchten, oder schnelles Webdesign für Anfänger und Experten. Es gibt noch mehr HTML -Webseitenvorlagen von Themeforest, die Sie ohne Mitgliedschaft kaufen können.

Das obige ist der detaillierte Inhalt vonEntwerfen und codieren Ihre erste Website in 9 leicht verständlichen Schritten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!