Werbung

Wollten Sie schon immer eine Website machen? Vielleicht haben Sie etwas von unserem HTML gelesen (verstehen HTML 5 Schritte zum Verständnis Basic HTML-Code 5 Schritte zum Verständnis Basic HTML-Code Lesen Sie mehr) und CSS-Tutorials 5 Baby Steps zum Erlernen von CSS und zu einem Kick-Ass CSS Sorcerer 5 Baby Schritte zu CSS lernen und ein Kick-Ass werden CSS Sorcerer CSS ist die wichtigste Veränderung, die Webseiten im letzten Jahrzehnt erlebt haben, und ebnete den Weg für die Trennung von Stil und Inhalt. Auf moderne Weise definiert XHTML die semantische Struktur ... Read More, weiß aber nicht, wie man diese Sprachen in einem größeren Projekt verwendet.

Heute führe ich Sie durch den Prozess der Erstellung einer vollständigen Website von Grund auf. Mach dir keine Sorgen, wenn das wie eine schwierige Aufgabe scheint, ich werde dich bei jedem Schritt des Weges begleiten.

Sie erstellen diese Website mit HTML, CSS und JavaScript mit einem Hauch von jQuery (Anleitung zu jQuery Ein Leitfaden zu JQuery für JavaScript-Programmierer Ein grundlegender Leitfaden zu JQuery für Javascript-Programmierer Wenn Sie ein Javascript-Programmierer sind, wird dieses Handbuch zu JQuery helfen Sie beginnen, wie ein Ninja zu kodieren. Lesen Sie mehr). Sie werden nichts wirklich blutig machen, also sollte dieser Code ziemlich gut in den meisten modernen Browsern funktionieren.

Wenn du dir CSS nicht sicher bist, schau dir den CSS Guide auf W3Schools.com an.

Das Design

Hier ist das Design für diese Website. Werfen Sie einen Blick auf ein Bild mit hoher Auflösung, wenn Sie ein besseres Aussehen wünschen, oder noch besser, laden Sie das vollständige Projekt hier herunter.

Ich entwarf diese Website für eine fiktive Firma in Adobe Photoshop CC 2017. Wenn Sie interessiert sind, stellen Sie sicher, dass Sie die .PSD-Datei aus dem Bundle herunterladen. Hier ist, was Sie in der Photoshop-Datei erhalten:

In der PSD findest du alle Ebenen gruppiert, benannt und farblich markiert:

Sie müssen ein paar Schriftarten installiert haben, damit die Dinge richtig aussehen. Der erste ist Font Awesome, der für alle Icons verwendet wird. Die anderen beiden Schriftarten sind PT Serif und Myriad Pro (in Photoshop enthalten). Wenn Sie nicht sicher sind, wie Sie Zeichensätze installieren, lesen Sie unseren Leitfaden So installieren Sie Zeichensätze unter Windows, Mac & Linux So installieren Sie Zeichensätze unter Windows, Mac & Linux Lesen Sie weiter.

Mach dir keine Sorgen, wenn du kein Photoshop hast, du brauchst es nicht, um fortzufahren.

Anfangscode

Jetzt, da das Design klar ist, fangen wir an zu programmieren! Erstellen Sie eine neue Datei in Ihrem bevorzugten Texteditor (ich verwende Sublime Text 3). Speichern Sie dies als index.html . Sie können dies alles nennen, was Sie wollen, der Grund, warum viele Seiten Index genannt werden, liegt an der Art, wie Webserver funktionieren. 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, greifen Sie den vollständigen Code aus dem Download.

Hier ist der Code, den Sie brauchen:

Noise Media /* CSS goes here, at the top of the page */ /* JavaScript goes here, at the bottom of the page */ 

Das macht mehrere Dinge:

• Definiert das erforderliche Mindest-HTML.
• Definiert den Seitentitel "Noise Media"
• Enthält jQuery, das auf Google CDN gehostet wird (Was ist ein CDN? Was sind CDNs? Warum ist Speicher nicht mehr ein Problem? Was CDNs sind? Warum Speicher nicht mehr ein Problem ist CDNs machen das Internet schnell und Websites erschwinglich, auch wenn Sie Millionen von Benutzern skalieren, Bandbreite kostet Geld, diejenigen von uns mit begrenzten Verträgen wissen das nur allzu gut ... Lesen Sie mehr).
• Enthält Font Awesome, das auf Google CDN gehostet wird.
• Definiert ein Stil- Tag, in das Sie Ihr CSS schreiben können.
• Definiert ein Skript- Tag, in das Sie JavaScript schreiben können.

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

Beachten Sie, dass der Seitentitel Noise Media lautet. Dies wird durch den Text innerhalb des Titel- Tags definiert. Dies muss innerhalb der Kopf- Tags sein.

Der Header

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

Beginnen wir mit dem kleinen grauen Bit oben. Es ist ein Hellgrau mit einem leichten Dunkelgrau darunter. Hier ist eine Nahaufnahme:

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

Während du hier bist, lasst uns das durchbrechen. Ein div ist wie ein Container, um andere Dinge hinein zu legen. Dieses "andere Zeug" kann mehr Container, Text, Bilder, alles wirklich sein. Es gibt einige Einschränkungen für bestimmte Tags, aber divs sind ziemlich generische Dinge. Es hat eine ID von Top-Bar . Dies wird verwendet, um es mit CSS zu formatieren und es bei Bedarf mit JavaScript zu versehen. 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 stattdessen eine Klasse - dafür sind sie gedacht! Hier ist das CSS, das Sie benötigen, um es zu formatieren (setzen Sie es oben in Ihrem Stil- Tag):

 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 Hash-Zeichen (#, Hashtag, Pfundzeichen) vor dem Namen verwendet wird. Dies bedeutet, dass das Element eine ID ist. Wenn Sie eine Klasse verwenden, verwenden Sie stattdessen einen Punkt (.). Bei den Tags html und body ist der Abstand und der Rand auf Null gesetzt. Dies verhindert unerwünschte Abstandsprobleme.

Es ist Zeit, zu dem Logo und der Navigationsleiste überzugehen. Bevor Sie beginnen, benötigen Sie einen Container, in den Sie diesen Inhalt einfügen können. Lassen Sie uns daraus eine Klasse machen (damit Sie sie später wiederverwenden können), und da dies keine reaktionsschnelle Website ist, machen Sie sie 900 Pixel breit.

HTML:

CSS:

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

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

 background: red; 

Es ist Zeit, das Logo jetzt zu erstellen. Font Awesome wird für das Symbol selbst benötigt. Font Awesome ist eine Sammlung von Icons, die als Vektor Font verpackt sind - super! Im obigen Code oben ist bereits Font Awesome eingerichtet, so dass alles bereit ist!

Fügen Sie diesen HTML- Code in das normale Wrapper- div ein:

  
 Lärmmedien 

CSS:

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

Mach dir keine Sorgen über die anderen Schriften, die nicht zum Design passen - du wirst das später aufräumen. Wenn Sie andere Symbole verwenden möchten, gehen Sie zur Seite "Awesome-Symbole für Schriftarten" und ändern Sie die Fa-Lautstärkeregelung auf den Namen des Symbols, das Sie verwenden möchten.

Wenn Sie auf die Navigationsleiste gehen, verwenden Sie hierfür eine ungeordnete Liste ( UL ). Fügen Sie dieses HTML nach dem Logo-Container hinzu (aber immer noch innerhalb des normalen Wrappers ):

Zuhause
Über
Bewertungen
Kontakt

Der href wird verwendet, um mit anderen Seiten zu verlinken. Diese Tutorial-Website hat keine anderen Seiten, aber Sie können hier den Namen und den Dateipfad (falls erforderlich) angeben, zB reviews.html . Stellen Sie sicher, dass Sie dies in doppelte 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 einer ungeordneten Liste . Anschließend werden die Aufzählungszeichen mit List-style-type entfernt: none; . Links sind ein wenig voneinander entfernt und erhalten eine Farbe, wenn Sie mit der Maus darüber fahren. Der kleine graue Teiler ist ein rechter Rand für jedes Element, der dann für das letzte Element mit der Last-Link- Klasse entfernt wird. So sieht das aus:

Alles, was für diesen Abschnitt übrig ist, ist das rote horizontale Farbhighlight. Fügen Sie dieses HTML nach dem normalen Wrapper hinzu :

Und hier ist das CSS:

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

Das ist der oberste Abschnitt. Hier ist, wie es aussieht - ziemlich ähnlich dem Design richtig?

Hauptinhaltsbereich

Jetzt ist es an der Zeit, sich auf den Hauptinhaltsbereich zu begeben - das sogenannte "über den Haufen". So sieht dieser Teil aus:

Dies ist ein ziemlich einfacher Teil, ein Text von links mit einem Bild auf der rechten Seite. Dieser Bereich wird locker in Drittel unterteilt und nähert sich ungefähr dem Goldenen Schnitt. Verwenden des Goldenen Schnitts in der Fotografie für eine bessere Komposition Verwenden des Goldenen Schnitts in der Fotografie für eine bessere Komposition Haben Sie Schwierigkeiten mit der Fotomontage? Hier sind zwei Techniken basierend auf dem Goldenen Schnitt, die Ihre Aufnahmen mit wenig Aufwand drastisch verbessern werden. Weiterlesen .

Sie benötigen das Beispielbild für diesen Teil. Es ist im Download enthalten. Dieses Bild ist 670px breit, und ist von unserer Panasonic Lumix DMC-G80 / G85 Bericht Panasonic Lumix DMC-G80 / G85 Bericht Panasonic Lumix DMC-G80 / G85 Bericht Die Lumix G85 ist Panasonic's neueste spiegellose Kamera, und es packt eine ernsthafte Punch-in die Videoabteilung, mit HDMI-Ausgang und 4K-Aufnahme - alles für $ 1000! Weiterlesen .

Fügen Sie den HTML-Code nach dem Top-Colour-Splash- Element hinzu:

Herzlich willkommen! 
Noise Media ist ein Technologieunternehmen, das auf technische Bewertungen spezialisiert ist.
Wir sind sehr gut in dem was wir tun, aber leider sind wir keine richtige Firma.
Besuchen Sie makeuseof.com für das vollständige Tutorial zum Aufbau dieser Website.
Alternativ sehen Sie sich unseren Testbericht zur Panasonic G80 an!

Beachten Sie, wie das normal-Wrapper- Element zurückgegeben wurde (das ist die Freude an der Verwendung von Klassen). Sie wundern sich vielleicht, warum das image ( img ) -Tag nicht schließt. Dies ist ein selbst schließendes Tag. Der Schrägstrich ( /> ) zeigt dies an, da es nicht immer sinnvoll ist, ein Tag zu schließen.

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-Sizing: border-box; . Dies stellt sicher, dass die Elemente immer 40% oder 60% Breite haben. Der Standardwert (ohne dieses Attribut) ist die angegebene Breite zuzüglich etwaiger Abstände, Ränder und Rahmen. Die Bildklasse ( featured-image ) hat eine maximale Breite von 500px . Wenn Sie nur eine Dimension (eine Breite oder eine Höhe) angeben und die andere leer lassen, wird CSS das Bild unter Beibehaltung des Seitenverhältnisses skalieren.

Zitatbereich

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

Dies ist ein weiterer einfacher Bereich. Es enthält einen dunkelgrauen Hintergrund mit weiß zentriertem Text.

Fügen Sie dieses HTML nach dem vorherigen normalen Wrapper hinzu :

"Makeuseof ist die beste Website aller Zeiten" 
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 passiert nicht viel. Dimensionierung ist die Hauptanpassung, die benötigt wird - Schriftgröße, Abstand und so weiter. So sieht das Ganze nun aus - es sieht aus wie eine Website!

Symbolbereich

Lass uns weitermachen - es ist fast fertig! Hier ist der nächste Bereich, der erstellt werden muss:

Dieser Teil wird mehrere Klassen verwenden. Die drei Icons sind größtenteils gleich, mit Ausnahme des Inhalts, daher ist es sinnvoll, statt Ids Klassen zu verwenden. Fügen Sie dieses HTML nach dem vorherigen Zitat-Bereich hinzu :

  
 Youtube 
Besuche unseren YouTube-Kanal für mehr technische Bewertungen, Tutorials und Giveaways!
 Bewertungen 
Wenn Sie ein neues Gadget kaufen möchten, klicken Sie hier zuerst. Wir geben Ihnen detaillierte Berichte über die neuesten Geräte.
 Einkaufsführer 
Bei Buying Guides bemühen wir uns, den Lesern die Tools zur Verfügung zu stellen, um das beste Material für den geringsten Geldbetrag zu erhalten.

Diese drei Symbole sind auch Font-Awesome. Der HTML-Code verwendet wieder die normale 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 durch den Rand-Radius festgelegt: 200px; . Wenn Sie diesen Wert auf die 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 - sie ist nicht nur auf Links beschränkt. So sieht dieser Abschnitt jetzt aus:

Die Fußzeile

Das letzte, was zu tun ist, ist die Fußzeile! Das ist wirklich einfach, da es nur ein grauer Bereich ohne Text ist. Fügen Sie dieses HTML nach dem normalen Wrapper der Icon-Bereiche hinzu:

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ügen Sie etwas Pizzazz hinzu

Das ist es, 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 genau wie das Design aussieht. Der Hauptgrund dafür sind die verwendeten Schriften. Lass uns das klären.

Die Schriftart, die für die meisten Titel verwendet wird, ist Myriad Pro . Dies wird mit Adobe Create Cloud geliefert, ist jedoch nicht als Webfont verfügbar. Die aktuell auf der Webseite verwendete Schriftart ist Helvetica . Das sieht gut aus, so dass Sie es unverändert lassen können, PT Sans ist jedoch als Webfont verfügbar. Die Schriftart, die für den gesamten Text verwendet wird, ist PT Serif, die als Webfont verfügbar ist.

Webfonts sind ein einfacher Prozess. Genauso wie eine neue Schriftart auf Ihren Computer geladen wird, können Webseiten bei Bedarf geladen werden. Eine der besten Möglichkeiten hierfür ist Google Fonts.

Fügen Sie dieses CSS hinzu, um zu den besseren Schriften 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 Fonts zu verwenden:

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

Beachten Sie, dass das h3-Element nicht in der Liste enthalten ist - dies ist standardmäßig PT-Serif anstelle von PT-Sans .

Lassen Sie uns zum Schluss ein wenig JavaScript verwenden, um durch drei verschiedene vorgestellte Bilder zu blättern. Sie benötigen Image_2 und Image_3 für diesen Teil, und wieder ist es optional. Die Website ist an dieser Stelle ohne diese Funktion vollständig 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 versteckte CSS-Klasse haben. Jedem Bild wurde eine ID zugewiesen, sodass das JavaScript jedes dieser Objekte unabhängig voneinander ansprechen kann.

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

 .hidden { display: none; } 

Nachdem nun auf HTML und CSS geachtet wurde, wechseln wir zu JavaScript. Es ist hilfreich, das Dokumentobjektmodell JavaScript und Webentwicklung zu verstehen: Verwenden des Dokumentobjektmodells JavaScript und Webentwicklung: Verwenden des Dokumentobjektmodells In diesem Artikel wird das Dokumentskelett vorgestellt, mit dem JavaScript zusammenarbeitet. Wenn Sie mit diesem abstrakten Dokumentobjektmodell vertraut sind, können Sie JavaScript schreiben, das auf jeder beliebigen Webseite funktioniert. Lesen Sie mehr (DOM) für diesen Teil, aber es ist keine Voraussetzung.

Suchen Sie den Skriptbereich unten auf der Seite:

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

Fügen Sie das folgende JavaScript innerhalb des Skript- Tags hinzu:

 /* 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 geschehen ein paar Dinge. Der Code ist in $ (document) .ready () enthalten . Dies bedeutet, dass es ausgeführt wird, sobald Ihr Browser die Seite gerendert hat - das ist eine gute Übung. Mit der Funktion setInterval () wird die Funktion changeImage () regelmäßig in einem vordefinierten Intervall in Millisekunden aufgerufen (1000 Millisekunden = 1 Sekunde). Dies wird in der Zeitvariablen gespeichert. Sie können dies 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.

Coding-Herausforderung

Das ist es! Hoffentlich hast du während des Prozesses viel gelernt. Wenn Sie eine Herausforderung suchen und Ihre neu gefundenen Fähigkeiten auf den Prüfstand stellen möchten, warum sollten Sie diese Änderungen nicht implementieren:

Fügen Sie eine Fußzeile hinzu: Fügen Sie Text in die Fußzeile ein (Hinweis: Sie können die normalen Wrapper und die Drittel- / Zweidrittelklassen wiederverwenden.).
Verbessern Sie das Bildscrollen: Ändern Sie das JavaScript, um die Bildänderungen zu animieren (Hinweis: Sehen Sie sich jQuery fadein und animate an).
Mehrere Anführungszeichen implementieren: Ändern Sie die Anführungszeichen, um zwischen mehreren verschiedenen Anführungszeichen zu wechseln (Hinweis: Sehen Sie sich den Bildlauf-Code für einen Startpunkt an).
Einrichten eines Servers: Richten Sie einen Server ein und senden Sie Daten zwischen der Webseite und dem Server (Hinweis: Lesen Sie unseren Leitfaden zu JSON und Python Wie Sie Python und JavaScript zur Kommunikation mit JSON erhalten So holen Sie Python und JavaScript um JSON zu kommunizieren Heute werde ich Ich zeige Ihnen, wie Sie JSON verwenden, um Daten von JavaScript an Python zu senden. Ich werde auf die Einrichtung eines Webservers eingehen, zusammen mit allem Code, den Sie benötigen.

Hast du heute neue Fähigkeiten gelernt? Wie sind Sie mit den Programmieraufgaben fertig geworden? Welche Änderungen haben Sie vorgenommen, um diese Website zu Ihrer eigenen zu machen? Lassen Sie es uns in den Kommentaren wissen, wir würden es gerne wissen!