Html et CSS - Créer une mise en page de site Web

1. Einführung in den Kurs: Willkommen in dieser Videoserie, wo Sie lernen, wie Sie einfach Ihre eigene Website mit nur HTML und CSS erstellen können. In dieser Serie habe ich wirklich eine einfache Website mit nur HTML und CSS erstellt. Nicht nur Sie werden lernen, wie man eine Website erstellt, sondern Sie werden auch die Website lernen. Gestaltung von Workflow, die ich glaube, wenn Sie folgen, wird auf jeden Fall erhöhen Ihre Produktivität in dieser Stadt ist wirklich machen diese Website, obwohl es einfach aussieht. Aber durch den Aufbau dieser, werden Sie die grundlegenden und die Web-Design-Workflow lernen, die sehr wichtig in Web-Design-Prozess sind . Zuerst werde ich Ihnen beibringen, ein Layout zu erstellen. Diese Website ist eine zweispaltige Website mit einer einfachen Struktur. Dann werde ich HTML und CSS verwenden, um dieses Layout zu entwerfen, und nach dem Entwerfen des Layouts werde ich Inhalte auf diese Weise hinzufügen und eine Website erstellen, die zuerst Sie die Last entworfen haben, entweder auf Papier oder auf jeder Art von Farbe oder Photoshopped und dann mit HTML und CSS zum Leben erwecken und dann Inhalte hinzufügen, wird Ihren Entwicklungsprozess so viel einfacher und gut organisiert. zunächst Lassen Sie mich Ihnenzunächstsagen, dieser Kurs ist nicht für einen kompletten Anfänger gedacht, der nichts über HTML und CSS weiß. Ich nehme an, Sie haben ein sehr grundlegendes Verständnis von HTML und CSS wie, sagen wir, zum Beispiel, Sie wissen, was ein Header-Tags, Absatz-Tags, Hotel Ziel CSS I D und ändern Sie die Hintergrundfarbe bei Sitra. Wenn Sie mehr über die Grundlagen von HTML und CSS erfahren möchten, können Sie auf die blaue drei Schulen Website gehen . Sie haben einige erstaunliche Inhalte zu organisieren, so dass gesagt, lasst uns beginnen. 2. Lecture: Zuerst lassen Sie mich Ihnen das Layout zeigen, das ich mit dem kostenlosen Online-Victor Sort entworfen habe, für das auch Vector V E C P. Rheißt R Suchen Sie einfach auf Google und Sie werden dies finden. Es ist ein erstaunliches Programm, um Victor Kunst online zu machen. Hier habe ich gerade verwendet Grundformen Zehe bauen einen Hang. Dieses Layout ist in verschiedene Abschnitte unterteilt. Diese out of black box ist der Rapper, der alle unsere Elemente innerhalb der Seite, den Hash oder das Pfund Sign vor halten wird . Von diesem Rapper bedeutet, dass ich das als I d in meinem Dave erklären werde. Danach habe ich den Leiter der Sektion, der ein Live mit einer Idee Header sein wird. Und darin habe ich das Logo, das auch ein Live mit einem I D Logo sein wird. Dann habe ich das nie Bar. Danach habe ich kein anderes Div mit einem i-d-Container, der unseren Hauptinhalt hält und das muss links und rechts abschneiden. Der linke Abschnitt hat ein bisschen aus um qualifizierte Person und der rechte Abschnitt hat jetzt ein wenig 73%. Und unten Hier habe ich die Fußzeile mit I d Foto. Ich hoffe also, dass Ihnen die Struktur dieser Last klar ist. Jetzt, da wir einen Löwen gemacht haben, ist es an der Zeit, ihn zu zitieren. Also in dieser Videoserie werde ich Corp verwenden, in dem ein Online-Tool ist, um HTML, CSS und JavaScript zu schreiben . Sie können auch einen Texteditor wie erhabenen Text oder Klammer More Pack plus plus verwenden, wenn Sie diese Website machen möchten . Aber hier werde ich Corp verwenden, in dem perfekt für dieses Tutorial sein wird. Also fangen wir an. Gehen Sie vor Gericht, gerendert Io und erstellen Sie ein Fahrzeug und klicken Sie dann hier, um eine neue Pin zu machen. Dies ist die General Interferes Off Corp in diesem linken Teil ist in drei Abschnitte für die Bewertung jedes Dämon CSS und JavaScript-Code unterteilt . Und im rechten Abschnitt sehen Sie die Ausgabe für dieses Tutorial. Ich werde Js oder JavaScript nicht benötigen, also werde ich es minimieren. Nein, wir lassen uns schon zuerst unseren HTML Marco erstellen. Zuerst werde ich ein reparatives Recht machen. Hash it up und Brust Stub Corbyn erstellt automatisch den David Idea Rapper alle unsere Inhalte werden in diesem Rapper gehen Also dies ist eine Blackbox, die ich Ihnen in unserem Design gezeigt habe niedrig. Also in diesem Rapper werde ich den Dave mit dem Ideen-Header erstellen. Und dann in der Hürde werde ich einen Deal mit dem Ideenlogo erstellen. Ich erschaffe das lukrativ im Kopf Additiv. Da unser Logo im Inneren der härteren Nein nach dem Kopf vorhanden ist. Oh, ich werde die Knave-Bar erstellen und danach werde ich den Container erstellen. Und wenn Sie unser Design sehen, muss ich in diesem Container leben, im linken Abschnitt und im späten Abschnitt. Also werde ich diese Primitive in diesem Container und schließlich außerhalb des Containers erstellen . Ich werde den Fotobereich erstellen. Also das ist alles, was wir für HTML-Markup schreiben müssen. Jetzt kommt der Spaß Teil zwei Stil erlaubt. Zuerst lassen Sie uns alle Tags zurücksetzen, indem Sie eine strenge und dann sagte die Marge auf Null und Abschied 20 und ausländische Familie Ariel, wenn Sie FF schreiben und drücken Sie Tab das Gericht, wenn wird oder abgeschlossen, so geben Sie eine ausländische Familie aus Antenne. Danach werde ich den Rapper anvisieren, Also lassen Sie mich eine Grenze von roter Farbe geben, so dass Sie alle Elemente sehen können, die in diesem Rapper geht . Dann werde ich den Header anvisieren. Lassen Sie uns ein bisschen aus 100% und Höhe von 100 Pixel. Sehen Sie, wie ein Rapper erweitert wurde, um diesen Header zu halten. Ändern wir nun die Hintergrundfarbe dafür. Ich werde einen Hex-Kernwert verwenden. Sie können jede Farbe haben, die Sie mögen, aber für dieses Tutorial habe ich diese Website, die Heck erzielte bieten Also werde ich einfach auf dieses Elektronenblau klicken , das das X in die Zwischenablage kopiert und jetzt kann ich es hier einfügen , um die Hintergrundfarbe. Lassen Sie mich dieses vit entfernen, weil es standardmäßig 100% ist, also muss ich es nicht schreiben. Wählen wir nun das lokale aus. Ich gebe ihm eine Höhe von 50 Pixel und dito 100 Pixel und geben wir ihm eine Hintergrundfarbe . G verschwunden. Lassen Sie mich die Höhe ändern. 200 Pixel Es ist dämlich. Also lasst uns 80 Pixel schreiben. Okay, das ist gut. Lassen Sie mich nun einige Abschießzehen ein Hauptabseilen geben, um etwas Platz zu schaffen. Richtig? Beißen 20 Pixel Dies gilt also für 20 Pixel Polsterung oben, links unten und rechts. Diese Rapper-Vogelbeobachtung bedeutet, dass der innere Raum und Rand Raum außerhalb bedeutet. Nun lasst uns unser Logo zuerst positionieren. Erhöhen wir die Zehe 200 Pixel Jetzt ist es gut hier. Ich werde es eine Position relativ geben und sie ist die Top 20 Pixel oder machen es 10 Pixel und links 20 Pixel. Dies wird also das Logo relativ zum Kopf des Let me etwas über 2150 Pixel bewegen. Danach fügen wir eine Zahl hinzu. Geben Sie ihm ein Herz aus 70 Bilder von und sie sind gewachsen Farbe aus diesem Licht drei und geben einen Rand Top off 10 Picks in, so dass es nicht mit dem härteren nach der Nervenleiste kleben, Ich werde den Behälter Ziel. Also zuerst werde ich es eine grüne Grenze geben, um zu sehen, ob der linke und rechte Abschnitt Opposition richtig. Dann werde ich den linken Abschnitt anvisieren. Also hier werde ich es eine Höhe von 400 Pixel geben. Sehen Sie, wie sich Lacandona erweitert hat. Bedeutung sind linken Abschnitt innerhalb des Containers erstellt wurde. Jetzt lassen Sie es uns rüber geben. Also möchte ich, dass dieser linke Abschnitt 25% Rabatt auf diesen Container belegt, also werde ich schreiben. Gewählte 25% und schließlich geben Sie ihm eine Hintergrundfarbe. Also wähle ich dieses grünliche Blau. Sehen Sie, unser linker Abschnitt hat 25% von ihrem Geist besetzt, was die Diff mit dem Id Container ist. Lassen Sie uns die Höhe von diesem auf 600 Bild erhöhen. Jetzt ist es gut. Jetzt werde ich den richtigen Abschnitt anvisieren. Also hier gebe ich eine Höhe von 600 Pixel und ein bisschen ab 73%. Ich gebe es nicht einen Sieger von 75%, denn wenn ich es 75 Person gemacht, dann wird es keinen Raum zwischen dem linken und dem rechten Abschnitt geben. Um also die Marge zu haben, mache ich es 73%. Und schließlich werde ich die Hintergrundfarbe ändern. Aber diese Ente Minze Farbe. Es gibt also einen Tarifabschnitt. Keine Sorge, es ist hier unten. Also, um diese Seite an Seite zu haben, müssen wir sie aufdecken. Also im ersten Stock, der rechte Abschnitt zwei rechts hier werden Sie feststellen, dass der Abschnitt gekommen ist, bietet Container, der diese grüne Grenze ist. Dies liegt daran, dass Veranstaltungsort und Element es aus dem normalen Fluss aus dem Dokument kommt . So ist der normale Fluss von oben nach unten. Deshalb ist das nach oben gestiegen. Um das zu beheben, müssen wir die Flöte löschen. Aber zuerst, lassen Sie uns unseren linken Abschnitt schweben. Wer hat so rechter Schwimmer links gelassen? Nein. Sie können sowohl unsere Position richtig sehen, aber unsere außerhalb seiner Cantina, sogar die Haupt-Rapper Container. Also repariere das. Wir müssen den Schwimmer für diese Ebene löschen. Fügen Sie einen Pseudo-Selektor auf dem Container hinzu. Also rechter Behälter und dann zum Doppelpunkt. Und gleich nachdem sie in diesem richtigen Inhalt Colin sind, doppelte Bedingung markieren, Anzeigeblock und klar beides. Dies ist ein Trick, der verwendet wird, um die Böden zu löschen und lässt das Element auf ihren normalen Boden kommen . Normalcy sind links und der rechte Abschnitt befindet sich innerhalb seines übergeordneten Elements , der der davit-Ideencontainer ist. Lassen Sie uns also dem Container einen oberen Rand geben. Sagen Sie Marge. Top 10 Pixel. Nein, schließlich werden wir das Foto erstellen. Also rechts gefundenes Foto, geben Sie ihm die Höhe von 100 Fixierer und lässt es die Hintergrundfarbe zu diesem amerikanischen Fluss. Und ich würde mir die 10 besten Pixel vorstellen. Lassen Sie mich den Witz vom rechten Abschnitt ändern. 74%. Aber das sieht gut aus. Also herzlichen Glückwunsch, Sie haben Ihr Website-Layout mit HTML und CSS Doppelpunkt gemacht. Also jetzt ist es an der Zeit, den Inhalt in einem Layout hinzuzufügen, um es zu einer funktionierenden Website zu machen. Also füge ich zuerst einen Text in der Lokomotive hinzu. Dafür werde ich sein drei Header-Tag erstellen. Und in diesem werde ich Firmennamen schreiben. Du kannst alles schreiben. Sie Nein, Lassen Sie uns diese Navigationsleiste zuerst machen. Ich werde die Navigation Manu innerhalb der Kopfzeile erstellen und dann werde ich die Navigation innerhalb der Knave Bar erstellen. zuerst Erstellen wir eszuerstim Abschnittskopf. Die häufigste Methode zum Erstellen einer Navigationsleiste ist die Verwendung einer Nordenliste. Also werde ich eine A nordeste erstellen. Und darin werde ich Listenelemente haben, die einen Link enthalten. Also richtig, Sie werden dann innen nachgelassen und drücken Sie die Registerkarte Court kann den Markt für Sie erstellen. Dann innerhalb der Liste Artikel rechts A und nach oben gedrückt, um den Link in der X Chef rechten Pfund zu machen . Wenn Sie also auf diesen Link klicken, wird es nirgendwo hingehen. Und dann in diesem ein Tag, rechts, rechts, der Name des Menüpunkts. Das ist also unser Manu, aber das sieht nicht wie ein Navigationsmenü aus. Wir müssen einige CS hinzufügen, um es gut aussehen zu lassen. Aber zuerst, lassen Sie mich dieses X drei Element innerhalb des unteren positionieren, so dass sie das Logo hashen. Es sind drei und in dieser richtigen Position absolut. Dann werde ich ein Top 20 Pixel geben oder sagen, 30 Pixel. Sieht richtig aus. Also, jetzt lasst uns mit Domino arbeiten. Erstes Ziel, das U-Element und dann auf der rechten Seite schweben. Danach werde ich das Ally Element anvisieren und die Anzeige in der Linie machen, so dass das Element nebeneinander platziert wird. Lassen Sie mich dem U Element First einen oberen Rand geben, rechten Rand, oben 30 Pixel oder sagen wir, 40 Dixon. auch Lassen Sie unsaucheine Randrate von 40 Pixeln geben, um etwas Platz in der linken Seite zu schaffen. Dann werde ich den A-Typ so richtig Hash A anvisieren und darin werde ich Textdekoration schreiben. Keiner. Dies wird die zugrunde liegende entfernen Jetzt lassen Sie uns einen Farbfarbkampf geben und Ihre Begnadigung aus 20 Pixel auf allen Seiten anwenden . So machen wir unser Navigationsmenü? Nein, entfernen wir die Hintergrundfarbe aus dieser Kopfzeile. Ich meine, warte, ähm, auf einer Auktion, weil ich eine weiße Farbe habe. Ändern Sie also die Farbe in Schwarz, und jetzt ist es falsch. Ich werde auch die Hintergrundfarbe aus Logo entfernen. Jetzt werde ich ein paar ho-Effekt-Wohnungen mit der Pseudo-Klasse über so richtig hinzufügen, Header U l I ein Doppelpunkt über Und dann in diesem ersten, lassen Sie mich eine untere Grenze geben, um zu sehen, wie es aussieht. Es ist irgendwie gut aussehen, aber ich werde Rand auf allen Seiten so entfernt unten hinzufügen. Nein, es sieht gut aus. Das ist also die Naba innerhalb des Abschnittsleiters. Nein. Lassen Sie uns dieses Menü in der nab unsere Live für diese erstellen. Ich werde das nur schneiden, auflisten und es in der Nath Bharti probieren. Ich muss ein wenig in meinem CSS ändern. Entfernen Sie einfach den Hash-Header und ersetzen Sie ihn durch Hash. Niemals, weil unser ul Element jetzt im Nerv ist. Bardo. Entfernen Sie dann den Rand oben innerhalb des Hash-Werts. Nun, weil ich den negativen Raum nicht benötige, der das Menü nach oben drückt und dann werde ich einen Rand von 20 Pixel geben . Hier sollte Platz sein, lassen Sie mich die Marge auf 25 ändern. Nein, es ist gut. Ich weiß, dass wir ein Logo und Navigation erstellt haben. Lassen Sie uns Inhalte im linken Abschnitt hinzufügen. Also innerhalb des linken Abschnitts, werde ich seine drei Tag mit den Textnachrichten erstellen, und dann werde ich einen Absatz von Dummy-Text hinzufügen. Also schreibe einfach P, dann größer als Zeichen und schreibe. Laden Sie ihn und drückte Up Corp Umschlag automatisch einfügen. Es braucht für dich. Lassen Sie uns dies noch einmal kopieren und einfügen und die H Street ändern, um zu arbeiten. Also haben wir den Inhalt innerhalb des linken Abschnitts platziert. Es ist Zeit, einige CS zu korrigieren, ist die erste. Ich werde die Grundsteuer innerhalb des linken Abschnitts anvisieren, also gebe ich einen Abschied von 30 Pixel und dann Mittellinie diesen Text. Lassen Sie uns die Partei in 20 Pixel reduzieren. Okay, jetzt wollen wir den Peter rechten Pfund linken Abschnitt und p hier anvisieren. Mal sehen, wie rechtfertigen aussieht. Also texte ich ausrichten. Rechtfertige jetzt. Es sieht nicht gut aus. Ändern Sie es in „Mitte“. Okay, also werde ich einen unteren Rand von 10 Pixeln oder vielleicht vier geben, um es zu beheben. Lassen Sie uns nun die Hintergrundfarbe aus diesem linken Abschnitt in etwas ändern, das hier gut aussieht . Ich werde die Farbe wählen, die ich für die nie verwendet habe. Also habe ich eine Google Chrome Extension politica installiert. Dies ist ein tolles Werkzeug, um Farbe von jeder Website zu wählen, so klicken Sie auf diese Erweiterung und klicken Sie jetzt auf die Option wählen Farbe aus Tonhöhe und jetzt nehmen Sie einfach Ihre meisten über, um die Farbe, die Sie wählen möchten. Und wenn Sie die Farbe in diesem oberen quadratischen Feld sehen, klicken Sie einfach auf. Die Farbe wird in die Zwischenablage kopiert. Jetzt werde ich nur diese Farbe im linken Abschnitt Hintergrundfarbe Eigenschaft so einfach wie das basieren . Also lassen Sie mich unterstreichen, um es stehen zu lassen. Beachten Sie ein wenig Hier für dieses Tutorial Zweck, Ich habe hinzugefügt, Überschrift und einige Absätze Zeit. Aber Sie können auch beiseite Menü erstellen, wenn Sie möchten. Als nächstes ist der richtige Abschnitt. Also gehen Sie in die Rate Abschnitt, leben und erstellen Sie einen Jordan tang und rechts. Willkommen auf meiner Website. Dann werde ich ein Absatz-Tag mit etwas Dummy-Text erstellen. Lassen Sie uns noch einen Besseren hinzufügen. Also wieder werde ich diesen gesamten Twin p Inhalt kopieren und einfügen, um etwas mehr Inhalt zu haben. Lasst uns das H ändern, das in Gaza gelitten wurde. Sie sind immer noch Weltraum. Also wieder werde ich noch eine Sache kopieren und einfügen und ändern. Das sind jetzt 12 weitere Inhalte. Ich glaube, ich habe genug Inhalt. Du kannst mehr hinzufügen, wenn du willst, aber ich höre jetzt hier auf. Lassen Sie uns etwas hinzufügen. Siehe Vorfahren zum H und Pitak im rechten Abschnitt. Zuerst werde ich das H ein Tag anvisieren. Lassen Sie uns versuchen, einen Rand links. 20 Pixel Oh, vielleicht 30 wählen es aus. Lasst es uns einfach vorerst lassen. Wir werden dies nach dem Essen Styling Zehe einen Absatz weiter ändern. Nächstes Ziel, der Absatztyp. Lassen Sie mich ihm einen Text geben. Die Linie Property Center Rand links weg 30 nimmt ihn oder vielleicht 10 nimmt ihn. Dieser Absatz sieht also sehr nahe beieinander. Also werde ich einen Rand unten oder 20 Pixel hinzufügen, um etwas Platz für immer zu schaffen. Ich denke, jetzt kann ich den H einen Stil ändern. Lassen Sie es in die Mitte verschieben, indem Sie den Text Align center -Eigenschaft verwenden. Also, jetzt brauche ich den Rand nicht, also entfernen Sie das, aber ich werde einen unteren Rand von 10 Pixeln hinzufügen, um mehr Platz im unteren Bereich zu schaffen. Jetzt ist es Zeit, die Hintergrundfarbe zu ändern. Also werde ich das kritische erneut mit dem Farbwähler-Tool auswählen und es dann im rechten Abschnitt testen . Hintergrundfarbe. Ok, Unsere Website hat jetzt einige Inhalte. Ich brauche diese grünen Grenzen nicht, also entfernen Sie die Grenze. Lassen Sie mich einige Rand oberen Zehe dieses H ein Tag hinzufügen. So Marge sprechen 20 Pixel. Nein, es ist gut. Schließlich ist es an der Zeit, einem Foto Inhalte hinzuzufügen. Ich werde einige sehr einfachen Text in einem Foto hinzufügen, also werde ich seine vier Tag verwenden. Und in diesem ich warnte ein kopuliertes Symbol für diese u kann auf Prozent Kopie schreiben und dann legte ich alles in Ordnung reserviert als ein Pfeifen-Symbol und von Ihnen gemacht. Wählen wir nun diesen Text. Lassen Sie mich zuerst diese auf die Mitte ausgerichtet und dann Al Gore Abschied für 20 Pixel oder vielleicht 30 Pixel Nr. 40 Pixel Nein, es ist gut. Und schließlich werde ich die Hintergrundfarbe von diesem Wasser auf die gleiche graue Farbe ändern, die wir für alle unsere Sektion verwendet haben . So sind endlich einfach. Upside ist bereit, und wir haben dies nur mit HTML und CSS gemacht. Also, jetzt, da Sie Ihre Zwei-Spalten-Website erstellt haben, ist es Zeit, auf die Fähigkeiten in diesem Video Städte gelernt zu erweitern. Versuchen Sie also, drei Spalten Website oder vier Spalten zu machen. Suchen Sie einfach auf Google nach drei Spalten oder vier Spalten. Die Ohren sind laut. Sie erhalten über jeden und von diesem Freund entworfen das Layout für sich selbst und nachdem das Layout gemacht wird, dann fügen Sie den Inhalt hinzu. Ich kann wetten, wenn Sie dieses Prinzip folgen, das zuerst den Herrn in Papier oder einem Grafikprogramm entworfen und dann mit dem HTML und CSS umgesetzt und dann Inhalte hinzufügen, werden Sie in der Lage sein, jede Website zu tragen. Ich hoffe, Sie haben etwas aus meiner Videoserie gelernt. Und wenn du das tust, bitte ich dich um eine Überprüfung und einen Daumen hoch. Es hilft mir immens und hält ihn motiviert, mehr Kontrolle zu machen. Vielen Dank