So erstellen Sie eine Website: Für Anfänger

So erstellen Sie eine Website: Für Anfänger

Wollten Sie schon immer eine Website erstellen? Vielleicht haben Sie einige unserer HTML ( HTML verstehen ) und CSS-Tutorials , wissen aber nicht, wie man diese Sprachen in einem größeren Projekt verwendet.





Heute werde ich Sie durch den Prozess der Erstellung einer kompletten Website von Grund auf führen. Machen Sie sich keine Sorgen, wenn dies eine schwierige Aufgabe zu sein scheint, ich werde Sie bei jedem Schritt des Weges begleiten.



Sie erstellen diese Website mit HTML, CSS und JavaScript mit einem Hauch von jQuery ( Anleitung zu jQuery ). Du wirst nichts tun Ja wirklich Spitzenreiter, daher sollte dieser Code in den meisten modernen Browsern ziemlich gut funktionieren.





Wenn Sie sich bei einem CSS nicht sicher sind, sehen Sie sich die CSS-Anleitung bei W3Schools.com .

Das Design

Hier ist das Design für diese Website. Werfen Sie einen Blick auf ein hochauflösendes Bild, wenn Sie es besser sehen möchten, oder laden Sie das vollständige Projekt hier herunter.



Ich habe diese Website für eine fiktive Firma in . entworfen Adobe Photoshop 2017. Wenn Sie interessiert sind, stellen Sie sicher, dass Sie die .PSD-Datei aus dem Bundle-Download holen. Folgendes erhalten Sie in der Photoshop-Datei:

In der PSD finden Sie alle Ebenen gruppiert, benannt und farbcodiert:



Sie müssen ein paar Schriftarten installiert haben, damit die Dinge richtig aussehen. Das erste ist Schriftart Super , wird für alle Symbole verwendet. Die anderen beiden Schriftarten sind PT Serife und Myriad Pro (im Lieferumfang von Photoshop enthalten). Wenn Sie sich nicht sicher sind, wie Sie Schriftarten installieren, lesen Sie unsere Anleitung .

Mach dir keine Sorgen, wenn du nicht hast Adobe Photoshop , Sie brauchen es nicht, um fortzufahren.



Anfangscode

Jetzt, da das Design klar ist, beginnen wir mit der Codierung! Erstellen Sie eine neue Datei in Ihrem bevorzugten Texteditor (ich verwende Erhabener Text 3 ). Speichern unter index.html . Sie können dies beliebig nennen, der Grund, warum viele Seiten als Index bezeichnet werden, liegt an der Funktionsweise von Webservern. Die Standardkonfiguration für die meisten Server besteht darin, die Seite index.html bereitzustellen, wenn keine Seite angegeben ist.

Wenn Sie die Details nicht erfahren möchten, holen Sie sich den vollständigen Code aus dem Download .

Hier ist der Code, den Sie benötigen:





Noise Media


/* CSS goes here, at the top of the page */





/* JavaScript goes here, at the bottom of the page */


Dies bewirkt mehrere Dinge:

  • Definiert das absolut erforderliche HTML.
  • Definiert einen Seitentitel von 'Noise Media'
  • Enthält jQuery, das auf Google CDN gehostet wird ( was ist ein CDN ).
  • Enthält Font Awesome, die auf Google CDN gehostet wird.
  • Definiert a Stil -Tag, um Ihr CSS zu schreiben.
  • Definiert a Skript -Tag, um Ihr JavaScript zu schreiben.

Speichern Sie Ihre Datei erneut und öffnen Sie sie in Ihrem Webbrowser. Sie werden wahrscheinlich nicht viel bemerken und es wird sicher noch nicht wie eine Website aussehen.

Beachten Sie, wie der Seitentitel ist Rauschmedien . Dies wird durch den Text innerhalb der definiert Titel Schild. Dies hat in der sein Kopf Stichworte.

Wie viele Fotos können 32 GB aufnehmen?

Die Kopfzeile

Lassen Sie uns die Kopfzeile erstellen. So sieht das aus:

Beginnen wir mit dem kleinen grauen Stück oben. Es ist ein helles Grau mit einem leichten Dunkelgrau darunter. Hier ist eine Nahaufnahme:

Fügen Sie diesen HTML-Code in das ein Karosserie Tag oben:

Während Sie hier sind, lassen Sie uns das aufschlüsseln. EIN div ist wie ein Container, in den man andere Sachen packen kann. Diese 'anderen Sachen' können mehr Container sein, Text, Bilder, alles wirklich. Es gibt einige Einschränkungen, was in bestimmte Tags aufgenommen werden kann, aber Divs sind ziemlich allgemeine Dinge. Es hat eine Ich würde von Top-Leiste . Dies wird verwendet, um es mit CSS zu stylen und bei Bedarf mit JavaScript auszurichten. Stellen Sie sicher, dass Sie nur ein Element mit einer bestimmten ID haben – sie sollten eindeutig sein. Wenn mehrere Elemente denselben Namen haben sollen, verwenden Sie a Klasse Stattdessen sind sie dafür gemacht! Hier ist das CSS, das Sie zum Stylen benötigen (oben in Ihrem Stil Schild):

html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial'; /* initial fonts */
}
#top-bar {
width: 100%;
background: #F1F1F1; /* light gray */
border-bottom: 1px solid #D4D4D4; /* dark gray 'underline' */
height: 25px;
}

Beachten Sie, wie das Rautezeichen (#, Hashtag, Rautezeichen) vor dem Namen verwendet wird. Dies bedeutet, dass das Element eine ID ist. Wenn Sie eine a-Klasse verwenden, würden Sie stattdessen einen Punkt (.) verwenden. Die html und Karosserie Bei Tags wird der Abstand und der Rand auf Null gesetzt. Dies verhindert unerwünschte Abstandsprobleme.

Es ist Zeit, zum Logo und zur Navigationsleiste überzugehen. Bevor Sie beginnen, benötigen Sie einen Container, um diesen Inhalt einzufügen. Machen wir dies zu einer Klasse (damit Sie sie später wiederverwenden können) und wie es ist nicht eine responsive Website, machen Sie sie 900 Pixel breit.

HTML-Code:


CSS:

.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}

Es kann schwer zu sagen sein, was vor sich geht, bis Sie den Code fertig haben, daher kann es hilfreich sein, einen (temporären) farbigen Hintergrund hinzuzufügen, um zu sehen, was passiert:

background: red;

Jetzt ist es an der Zeit, das Logo zu erstellen. Schriftart Super wird für das Symbol selbst benötigt. Font Awesome ist eine Reihe von Symbolen, die als Vektorschrift verpackt sind - großartig! Der obige Anfangscode hat Font Awesome bereits eingerichtet, also ist alles einsatzbereit!

Diesen HTML-Code hinzufügen Innerhalb das Normal-Wrapper div.:



CSS:

.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}

Machen Sie sich keine Sorgen, dass die anderen Schriftarten nicht zum Design passen – Sie werden das später aufräumen. Wenn Sie andere Symbole verwenden möchten, gehen Sie zu Font Awesome Icons Seite und dann ändern fa-lautstärke runter auf den Namen des Symbols, das Sie verwenden möchten.

Wenn Sie auf die Navigationsleiste gehen, verwenden Sie eine ungeordnete Liste ( das ) dafür. Diesen HTML-Code hinzufügen nach das Logo-Container (aber immer noch im Normal-Wrapper ):

Die href wird verwendet, um auf andere Seiten zu verlinken. Diese Tutorial-Website hat keine weiteren Seiten, aber Sie können hier den Namen und den Dateipfad (falls erforderlich) eingeben, z. Bewertungen.html . Stellen Sie sicher, dass Sie dies in beide doppelten Anführungszeichen setzen.

Hier ist das CSS:

#navbar {
list-style-type: none; /* remove bullet points */
margin: 29px 0 0 0;
padding: 0;
float: right;
font-size: 16pt;
}
#navbar li {
display: inline; /* make items horizontal */
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
text-decoration: none; /* remove underline */
color: #000000;
padding: 0 16px 0 10px; /* space links apart */
margin: 0;
border-right: 2px solid #B4B4B4; /* divider */
}
#navbar li a:link.last-link {
/* remove divider */
border-right: 0px;
}
#navbar li a:hover {
/* change color on hover (mouseover) */
color: #EB6361;
}

Dieses CSS beginnt mit einem ungeordnete Liste . Es entfernt dann die Aufzählungspunkte mit Listenstiltyp: keiner; . Links sind etwas voneinander entfernt und erhalten eine Farbe, wenn Sie mit der Maus darüber fahren. Der kleine graue Teiler ist eine rechte Umrandung an jedem Element, die dann für das letzte Element mit der entfernt wird letzter Link Klasse. So sieht das aus:

Alles, was für diesen Abschnitt übrig bleibt, ist die rote horizontale Farbmarkierung. Fügen Sie diesen HTML-Code nach dem Normal-Wrapper :

Und hier ist das CSS:

#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}

Das ist der obere Abschnitt fertig. So sieht es aus – dem Design ziemlich ähnlich, oder?

Hauptinhaltsbereich

Es ist jetzt an der Zeit, zum Hauptinhaltsbereich überzugehen – dem sogenannten „above the fold“. So sieht dieser Teil aus:

Dies ist ein ziemlich einfacher Teil, ein Text links mit einem Bild rechts. Dieser Bereich wird lose in Drittel unterteilt, ungefähr in etwa der Goldener Schnitt .

Sie benötigen das Beispielbild für dieses Teil. Es ist im Download enthalten. Dieses Bild ist 670px breit und stammt aus unserem Panasonic Lumix DMC-G80/G85 Test.

HTML hinzufügen nach das top-color-splash Element:



Welcome!


Noise Media is a technology company specialising in tech reviews.


We’re very good at what we do, but unfortunately, we are not a real company.


Make sure you visit makeuseof.com for the full tutorial on how to build this website.

um wie viel steigt dein Snap Score?

Alternatively, check out our review of the Panasonic G80 shown on the right!






Beachten Sie, wie die Normal-Wrapper Element ist zurückgekehrt (das ist die Freude an der Verwendung von Klassen). Sie fragen sich vielleicht, warum das Bild ( img )-Tag wird nicht geschlossen. Dies ist ein selbstschließendes Tag. Der Schrägstrich ( /> ) weist darauf hin, da es nicht immer sinnvoll ist, ein Tag schließen zu müssen.

CSS:

.one-third {
width: 40%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
margin-top: 20px;
}
.two-third {
width: 60%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
padding-left: 40px;
text-align: right;
margin-top: 20px;
}
.featured-image {
max-width: 500px; /* reduce image size while maintaining aspect ratio */
}
.no-margin-top {
margin-top: 0; /* remove margin on things like headers */
}

Das wichtigste Attribut hier ist Box-Größe: Bordüre-Box; . Dadurch wird sichergestellt, dass die Elemente immer eine Breite von 40 % oder 60 % haben. Der Standardwert (ohne dieses Attribut) ist Ihre angegebene Breite plus alle Auffüllungen, Ränder und Rahmen. Die Bildklasse ( Featured-Bild ) hat ein maximale Breite von 500px . Wenn Sie nur eine Dimension (eine Breite oder eine Höhe) angeben und die andere leer lassen, ändert CSS die Größe des Bildes unter Beibehaltung seines Seitenverhältnisses.

Angebotsbereich

Lassen Sie uns den Angebotsbereich erstellen. So sieht das aus:

Dies ist ein weiterer einfacher Bereich. Es enthält einen dunkelgrauen Hintergrund mit weißem Text in der Mitte.

Diesen HTML-Code hinzufügen nach der Vorherige Normal-Wrapper :



makeuseof is the best website ever


Joe Coburn



Und dann dieses CSS:

#quote-area {
background: #363636;
color: #FFFFFF;
text-align: center;
padding: 15px 0;
}
h3 {
font-weight: normal;
font-size: 20pt;
margin-top: 0px;
}
h4 {
font-weight: normal;
font-size: 16pt;
margin-bottom: 0;
}

Hier ist nicht viel los. Die Größe ist die wichtigste erforderliche Anpassung - Schriftgröße, Abstände und so weiter. So sieht das Ganze jetzt aus – es fängt an, wie eine Website auszusehen!

Symbolbereich

Machen wir weiter – es ist fast fertig! Hier ist der nächste Bereich, der erstellt werden muss:

In diesem Teil werden mehrere Klassen verwendet. Die drei Icons sind mit Ausnahme des Inhalts größtenteils gleich, daher ist es sinnvoll, Klassen anstelle von IDs zu verwenden. Diesen HTML-Code hinzufügen nach der Vorherige Angebotsbereich :






YouTube

Checkout our YouTube channel for more tech reviews, tutorials and giveaways!







Reviews

If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.







Buying Guides

At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.



Diese drei Symbole sind auch Schriftart-Super . Der HTML-Code verwendet wieder die Normal-Wrapper Klasse. Hier ist das CSS:

.icon-outer {
box-sizing: border-box; /* ensure padding and borders do not increase the size */
float: left;
width: 33.33%;
padding: 25px;
margin: 0;
text-align: center;
}
.icon-circle {
background: #EEEEEE;
color: #B4B4B4;
width: 200px;
height: 200px;
border-radius: 200px; /* make rounded corners */
margin: 0 auto;
border: 2px solid #D6D6D6;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
font-size: 75pt;
padding: 30px 0 0 0;
cursor: pointer;
}
.icon-circle:hover {
/* change color on hover (mouseover) */
color: #FFFFFF;
background: #EB6361;
}
h5 {
margin: 15px 0 10px 0;
font-size: 20pt;
}

Es gibt ein paar neue Dinge im CSS. Die abgerundeten Ecken werden von Randradius: 200px; . Wenn Sie diesen Wert gleich der Breite einstellen, erhalten Sie einen perfekten Kreis. Sie können dies reduzieren, wenn Sie eher ein Quadrat mit abgerundeten Ecken bevorzugen. Beachten Sie, wie Hover-Aktionen auf die Divs angewendet werden – es ist nicht nur auf Links beschränkt. So sieht dieser Abschnitt jetzt aus:

Das letzte, was zu tun ist, ist die Fußzeile! Dies ist wirklich einfach, da es sich nur um einen grauen Bereich ohne Text handelt. Fügen Sie diesen HTML-Code nach den Symbolbereichen hinzu. Normal-Wrapper :

Hier ist das CSS:

#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}

Sehen Sie - wirklich einfache Sachen.

Füge etwas Pizzazz hinzu

Das war's, die Codierung ist fertig! Sie können die Dinge absolut so lassen, wie sie sind, es ist eine fertige Webseite. Sie haben vielleicht bemerkt, dass es nicht aussieht Exakt wie das Design. Der Hauptgrund dafür sind die verwendeten Schriftarten. Lass uns das klären.

Die für die meisten Titel verwendete Schriftart ist Unzählige Pro . Das kommt mit Adobe Cloud erstellen, aber nicht als Webfont verfügbar. Die derzeit auf der Webseite verwendete Schriftart ist Helvetica . Das sieht ok aus, du könntest es aber so lassen wie es ist PT Sans ist als Webfont verfügbar. Die für den gesamten Text verwendete Schriftart ist PT Serife , die als Webfont verfügbar ist.

Webfonts sind ein einfacher Prozess. Genau wie das Laden einer neuen Schriftart auf Ihren Computer können Webseiten Schriftarten bei Bedarf laden. Eine der besten Möglichkeiten, dies zu tun, ist durch Google-Schriften .

Fügen Sie dieses CSS hinzu, um zu den besseren Schriftarten zu wechseln:

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
font-family: 'PT Sans', 'Helvetica', 'Arial';
}

Ändern Sie nun Ihre HTML- und Body-Elemente, um die neuen Schriftarten zu verwenden:

font-family: 'PT Serif', 'Helvetica', 'Arial';

Beachten Sie, dass das h3-Element nicht in der Liste enthalten ist – dies wird standardmäßig PT-Serifen Anstatt von PT-Sans .

Lassen Sie uns als letzte Schönheit noch etwas JavaScript verwenden, um durch drei verschiedene vorgestellte Bilder zu scrollen. Du wirst brauchen Bild_2 und Bild_3 für diesen Teil, und wieder, ist es optional. Die Website ist zu diesem Zeitpunkt ohne diese Funktion voll funktionsfähig. So wird es aussehen (beschleunigt):

Ändern Sie Ihren HTML-Code so, dass er drei vorgestellte Bilder enthält. Beachten Sie, dass zwei davon eine CSS-Klasse von haben versteckt . Jedem Bild wurde eine ID zugewiesen, damit das JavaScript jedes von ihnen unabhängig ansprechen kann.





Hier ist das CSS, das benötigt wird, um die zusätzlichen vorgestellten Bilder auszublenden:

.hidden {
display: none;
}

Nachdem wir uns nun um HTML und CSS gekümmert haben, wechseln wir zu JavaScript. Es ist nützlich, das Document Object Model (DOM) für diesen Teil zu verstehen, aber es ist keine Voraussetzung.

Finden Sie die Skript Bereich unten auf der Seite:


/* JavaScript goes here, at the bottom of the page */

Fügen Sie das folgende JavaScript in die Skript Schild:

/* JavaScript goes here, at the bottom of the page */
$(document).ready(function() {
// run once the page is ready
var time = 2500;
// get the image containers
$im1 = $('#f-image-1');
$im2 = $('#f-image-2');
$im3 = $('#f-image-3');
setInterval(function(){
// call function every x milliseconds (defined in time variable above)
changeImage();
}, time);
var currentImage = 1;
function changeImage(){
switch(currentImage) {
case 1:
// show image 2
$im1.hide();
$im2.show();
$im3.hide();
currentImage = 2;
break;
case 2:
// show image 3
$im1.hide();
$im2.hide();
$im3.show();
currentImage = 3;
break;
default:
// show image 1
$im1.show();
$im2.hide();
$im3.hide();
currentImage = 1;
}
}
});

Hier passiert einiges. Der Code ist darin enthalten $(Dokument).bereit() . Dies bedeutet, dass es ausgeführt wird, sobald Ihr Browser das Rendern der Seite abgeschlossen hat. Dies ist eine bewährte Vorgehensweise. Die setInterval() Funktion wird verwendet, um die Bild ändern () Funktion regelmäßig in einem vordefinierten Intervall in Millisekunden (1000 Millisekunden = 1 Sekunde). Dies wird im gespeichert Zeit Variable. Sie können diesen Wert erhöhen oder verringern, um das Scrollen zu beschleunigen oder zu verlangsamen. Schließlich wird eine einfache case-Anweisung verwendet, um verschiedene Bilder anzuzeigen und das aktuell angezeigte Bild zu verfolgen.

Programmier-Challenge

Das ist es! Hoffentlich haben Sie während des Prozesses viel gelernt. Wenn Sie Lust auf eine Herausforderung haben und Ihre neu erworbenen Fähigkeiten auf die Probe stellen möchten, versuchen Sie es mit diesen Modifikationen:

Fußzeile hinzufügen: Fügen Sie etwas Text in die Fußzeile ein (Hinweis: Sie können die Normal-Wrapper und ein Drittel/zwei Drittel Klassen.).

Verbessern Sie das Scrollen von Bildern: Ändern Sie das JavaScript, um die Bildänderungen zu animieren (Hinweis: siehe jQuery einblenden und Animiert ).

Implementieren Sie mehrere Anführungszeichen: Ändern Sie die Anführungszeichen, um zwischen einem von mehreren verschiedenen Anführungszeichen zu wechseln (Hinweis: Schauen Sie sich den Bildlaufcode als Ausgangspunkt an).

Einen Server einrichten: Richten Sie einen Server ein und senden Sie Daten zwischen der Webseite und dem Server (Tipp: Lesen Sie unseren Leitfaden zu JSON und Python ).

So verkleinern Sie eine Audiodatei

Wenn Sie mit JavaScript vertraut sind oder Erfahrung mit Ruby haben, können Sie sich mit einem statischen Website-Builder wie GatsbyJS oder Jekyll an der Erstellung einer Website versuchen.

Teilen Teilen Tweet Email So ändern Sie das Erscheinungsbild Ihres Windows 10-Desktops

Möchten Sie wissen, wie Sie Windows 10 besser aussehen lassen können? Verwenden Sie diese einfachen Anpassungen, um Windows 10 zu Ihrem eigenen zu machen.

Weiter lesen Verwandte Themen
  • Programmierung
  • HTML
  • Web-Design
  • CSS
Über den Autor Joe Coburn(136 veröffentlichte Artikel)

Joe hat einen Abschluss in Informatik an der University of Lincoln, Großbritannien. Er ist ein professioneller Softwareentwickler und wenn er nicht gerade Drohnen fliegt oder Musik schreibt, ist er oft beim Fotografieren oder Videoproduzieren anzutreffen.

Mehr von Joe Coburn

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um zu abonnieren