Erstellen einer Website mit fortschreitender Verbesserung / Code

Element. Setzen Sie den Text in das

Tags direkt unter dem Menü.

  Lorem ipsum dolor sitzen amet… 
  Nam aliquet tempor turpis…

Fügen Sie nun die Fußzeile mit der

Etikett:

Copyright © 2014 SomeNonExistent Company. Alle Rechte vorbehalten.

Die Seite sollte jetzt so aussehen:

Sie können das erstellen Über und Angebot Seiten auf die gleiche Weise - sie haben nichts Besonderes (Sie können ihre Namen hinzufügen als

Tags direkt über dem Inhalt).

Schritt 4: Das Kontaktformular

Das letzte, was in HTML zu tun ist, ist die Kontaktseite. Kopieren Sie den Inhalt Ihres index.html zu contact.html und entfernen Sie den Inhalt der

Element.

Fügen Sie nun die Überschrift für das Formular hinzu (in das

Etikett):

Kontaktiere uns

Danach können wir eine hinzufügen

Element mit entsprechenden Feldern, die der Benutzer ausfüllen muss (da die Serverseite der Dinge ziemlich gleich bleibt, werde ich sie hier nicht behandeln. Wenn Sie also Ihr Formular testen möchten, müssen Sie das Back-End selbst schreiben.)

Dein Name:

Deine E-Mail:

Deine Nachricht:

Das

Tags verstoßen nicht gegen die Semantizitätsregel, da die Beschriftungs- und Eingabekombination tatsächlich ein Absatz ist. Die Kontaktseite sollte folgendermaßen aussehen:

Das CSS

Nun, da unsere Seite funktioniert, können wir damit beginnen, dass sie ein bisschen besser aussieht. Erstellen Sie eine Datei und benennen Sie sie style.css. Fügen Sie diese Zeile jetzt dem hinzu Abschnitt Ihres Dokuments:

Schritt 5: Basisstile

Zuerst müssen Sie die Schriftarten und die Gesamtform der Seite ändern:

* Schriftfamilie: Calibri, serifenlos;  body width: 900px; Marge: auto;

Zwei Zeilen CSS und Sie können sehen, dass die Seite ein bisschen besser aussieht, da sie nicht mehr die Standardschriftarten verwendet.

Schritt 6: Die Kopfzeile

Jetzt fügen wir der Kopfzeile einige Looks hinzu: etwas Abstand, ändern Sie die Schriftgröße und fügen Sie den Hintergrund hinzu:

h1 padding: 100px 10px 20px; Marge: 0; Hintergrund: #dfdfdf; Schriftgewicht: normal; Schriftgröße: 3em;

Beachten Sie, wie wir die Schriftgröße geändert haben - wir haben verwendet em anstatt einer anderen Einheit. Dies ist auf die letzte der im ersten Teil dieser Reihe erläuterten Regeln zurückzuführen: Benutzer können die Basisgröße der Schriftart ändern und wenn dies beispielsweise verwendet wurde px, Ihre Einstellungen werden von unserem Stylesheet nicht berücksichtigt.

Schritt 7: Das Menü

Nachdem Sie das Erscheinungsbild der Kopfzeile festgelegt haben, können Sie mit dem Menü fortfahren. Wir ändern auch die Schriftgröße der Anker, entfernen ihre Unterstreichung und fügen einen Hintergrund hinzu, wenn sie über den Mauszeiger bewegt werden oder wenn sie über einen Ankerpunkt verfügen aktiv Klasse:

nav background: # aed8ff nav a Textdekoration: keine; Schriftgröße: 1.3em; Farbe: # 333; Polsterung: 15px 25px; Anzeige: Inline-Block;  nav a: hover, nav a.active background: #dfdfdf; Farbe: # 666;

Nun füge das hinzu aktiv ordnen Sie die entsprechenden Anker in Ihren Dateien zu, so dass sie beim Laden der Seite "gedrückt" werden:

Zuhause

So sollte es jetzt aussehen:

Schritt 8: Der Inhalt

Hier wollen wir nur die Lesbarkeit verbessern, indem Sie die Zeilenhöhe erhöhen (vergessen Sie nicht die Einstellungen der Benutzer - wir können die Größe von rein visuellen Elementen wie Kopfzeilen und Schaltflächen ändern, aber die Benutzer legen aus einem Grund ihre Standardschriftgröße fest). Wir ändern auch die Schriftart und fügen einige Füllungen hinzu:

p Schriftfamilie: Helvetica, Arial, Sans-Serif; Zeilenhöhe: 1,6; Text ausrichten: begründen; Polsterung: 10px;

Hier ist das Ergebnis. Beachten Sie, wie sich die Lesbarkeit mit einer so kleinen Änderung verbessert hat:

Schritt 9: Die Fußzeile

Dies ist auch nur eine kleine kosmetische Änderung: Hintergrund, Auffüllen und zentrierter Text:

Fußzeile Polsterung: 10px; Hintergrund: #dfdfdf; Text ausrichten: Mitte;

So sieht die Fußzeile jetzt aus:

Schritt 10: Das Formular

Als letztes müssen Sie das Erscheinungsbild des Kontaktformulars festlegen. Lassen Sie uns zuerst die Auffüllung und den Rand von entfernen

Elemente:

form p margin: 0; Polsterung: 0;

Nun stellen wir die Breite der ein Elemente und </code> gleich sein Wir setzen auch <code>Bildschirmsperre</code> auf sie, um sie schön aufzustellen:</p><pre>Formulareingabe, Formulartextbereich width: 300px; Bildschirmsperre; </pre><p>Schließlich ändern wir die <code><button></code>s nimmt die Hälfte der Formularbreite ein:</p><pre>Formularschaltfläche Marge: 10px 0; Polsterung: 5px; Breite: 148px; </pre><p>Das ist das Endergebnis:</p><img src="//accentsconagua.com/img/images_13/building-a-website-with-progressive-enhancement_8.png"><h2> <img>Fazit</h2><p>Im nächsten Artikel verwenden wir JavaScript (insbesondere jQuery), um interaktive Elemente zu unserer Website hinzuzufügen.</p><p>Für diejenigen unter Ihnen, die fortgeschrittenere Entwickler sind, werden Sie möglicherweise feststellen, dass dieses Lernprogramm nichts beibrachte, das Sie nicht über HTML oder CSS wissen. Da wir diese Strategie aus der Sicht eines Anfängers ausarbeiten, ist dies zu erwarten. </p><p>Alternativ, sehen Sie es so: Wir haben ein Design erstellt, das auf dem Inhalt und nicht auf einem bereits vorhandenen Design basiert. Natürlich ist das einfach und unkompliziert, aber es hilft, den Punkt zu demonstrieren, ohne viel CSS und andere Assets in die Seite aufzunehmen.</p><p>Wenn Sie das Stylesheet aus dem Dokument entfernen, sollten Sie den Punkt sehen, den wir zu demonstrieren versuchen: Das Layout der Seite bleibt gleich und Sie können die Seite trotzdem ohne Probleme verwenden.</p><p>Bitte hinterlassen Sie vor dem nächsten Artikel Ihre Fragen, Kommentare und Rückmeldungen in das untenstehende Formular.</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/code">Code</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/code/building-a-welcome-page-for-your-wordpress-product-code-part-1.html">Erstellen einer Begrüßungsseite für Ihr WordPress-Produkt Code Teil 1</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_7/building-a-welcome-page-for-your-wordpress-product-code-part-1_2.png');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/webdesign/building-a-website-in-progressive-steps-wireframing.html">Aufbau einer Website in progressiven Schritten Wireframing</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_26/building-a-website-in-progressive-steps-wireframing.png');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante Informationen und nützliche Tipps zur Programmierung. Website-Entwicklung, Webdesign und Webentwicklung. Photoshop-Tutorials. Erstellung von Computerspielen und mobilen Anwendungen. Werden Sie von Grund auf professioneller Programmierer. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Suche..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>

Erstellen einer Website mit fortschreitender Verbesserung

Schritt 1: Grundlegendes HTML

Schritt 2: Überschrift und Menü

Unsere Beispielüberschrift