Een website bouwen met progressieve verbetering / Code

element. Zet de tekst in de

tags net onder het menu.

  Lorem ipsum dolor sit amet… 
  Nam aliquet tempor turpis ...

Voeg nu de voettekst toe met behulp van de

label:

Copyright © 2014 SomeNonExistent Company. Alle rechten voorbehouden.

De pagina zou er nu als volgt uit moeten zien:

U kunt het maken Wat betreft en Aanbod pagina's op dezelfde manier - ze zullen niets speciaals in zich hebben (u kunt hun namen als toevoegen

tags net boven de inhoud).

Stap 4: Het contactformulier

Het laatste wat u in HTML kunt doen, is de contactpagina. Kopieer de inhoud van uw index.html naar contact.html en verwijder de inhoud van de

element.

Voeg nu de kop voor het formulier toe (in de

label):

Neem contact met ons op

Daarna kunnen we een toevoegen

element met de juiste velden voor de gebruiker om te vullen (aangezien de server-kant van de dingen vrijwel hetzelfde blijft, zal ik het hier niet behandelen, dus als je je formulier wilt testen, moet je zelf de back-end schrijven):

Uw naam:

Jouw email:

Uw bericht:

tags breken de semanticiteitsregel niet omdat het label en de invoercombinatie eigenlijk een alinea is. De contactpagina zou er als volgt uit moeten zien:

De CSS

Nu onze pagina werkt, kunnen we beginnen om het er een beetje beter uit te laten zien. Maak een bestand en noem het style.css. Voeg nu deze regel toe aan de gedeelte van uw document:

Stap 5: basisstijlen

Het eerste dat u moet doen, is de lettertypen en de algemene vorm van de pagina wijzigen:

* font-family: Calibri, sans-serif;  body width: 900px; marge: automatisch;

Twee regels CSS en je kunt zien dat de pagina er een beetje beter uitziet, omdat het niet langer de standaardlettertypen gebruikt.

Stap 6: De koptekst

Laten we nu wat looks aan de header toevoegen: plaats een beetje in, wijzig de lettergrootte en voeg de achtergrond toe:

h1 opvulling: 100px 10px 20px; marge: 0; achtergrond: #dfdfdf; font-gewicht: normaal; lettergrootte: 3em;

Merk op hoe we de lettergrootte hebben veranderd - we gebruikten em in plaats van een andere eenheid. Dit komt door de laatste regels die in het eerste deel van deze reeks zijn uitgelegd: gebruikers kunnen de basisgrootte van het lettertype wijzigen en als we bijvoorbeeld hebben gebruikt px, hun instellingen worden niet gerespecteerd door ons stylesheet.

Stap 7: Het menu

Nadat het uiterlijk van de kop is hersteld, kunnen we doorgaan met het menu. We zullen ook de lettergrootte van de ankers wijzigen, hun onderstreping verwijderen en een achtergrond toevoegen wanneer ze worden overgeheveld of wanneer ze een actief klasse:

nav background: # aed8ff nav a text-decoration: none; font-size: 1.3em; kleur: # 333; opvulling: 15px 25px; weergave: inline-block;  nav a: hover, nav a.active background: #dfdfdf; kleur: # 666;

Voeg nu de actief klasse aan de juiste ankers in uw bestanden, zodat ze "ingedrukt" verschijnen wanneer de pagina wordt geladen:

Huis

Hier is hoe het er nu uit moet zien:

Stap 8: De inhoud

Hier willen we alleen de leesbaarheid verbeteren door de lijnhoogte te vergroten (vergeet de instellingen van gebruikers niet - we kunnen de grootte van puur visuele elementen zoals koppen en knoppen wijzigen, maar gebruikers stellen hun standaardlettergrootte in om een bepaalde reden). We zullen ook het lettertype veranderen en wat opvulling toevoegen:

p font-family: Helvetica, Arial, Sans-Serif; regelhoogte: 1,6; text-align: rechtvaardigen; opvulling: 10px;

Dit is het resultaat. Merk op hoe de leesbaarheid verbeterde met zo'n kleine verandering:

Stap 9: De voettekst

Dit is ook slechts een kleine cosmetische verandering: achtergrond, opvulling en gecentreerde tekst:

footer opvulling: 10px; achtergrond: #dfdfdf; text-align: center;

Hier ziet u hoe de voettekst er nu uitziet:

Stap 10: Het formulier

Het laatste wat u moet doen, is het uiterlijk van het contactformulier herstellen. Laten we eerst de opvulling en marge van de verwijderen

elementen:

vorm p marge: 0; opvulling: 0;

Laten we nu de breedte van de elementen en </code> hetzelfde zijn. We hebben ook vastgesteld <code>weergeven: blokkeren</code> op hen om ze netjes in te delen:</p><pre>formulierinvoer, formulier textarea width: 300px; weergave: blok; </pre><p>Eindelijk veranderen we de <code><button></code>s neemt de helft van de breedte van het formulier in beslag:</p><pre>formulierknop margin: 10px 0; opvulling: 5px; breedte: 148 px; </pre><p>Dit is het eindresultaat:</p><img src="//accentsconagua.com/img/images_13/building-a-website-with-progressive-enhancement_8.png"><h2> <img>Conclusie</h2><p>In het volgende artikel zullen we wat JavaScript (in het bijzonder jQuery) gebruiken om enkele interactieve elementen aan onze website toe te voegen.</p><p>Voor degenen onder u die meer geavanceerde ontwikkelaars zijn, zult u misschien merken dat deze tutorial niets heeft geleerd wat u niet wist over HTML of CSS. Aangezien we deze strategie vanuit het perspectief van een beginner werken, is dat te verwachten. </p><p>Alternatief, bekijk het als volgt: we hebben een ontwerp gemaakt dat is gebaseerd op de inhoud en niet op een reeds bestaand ontwerp. Natuurlijk is het eenvoudig en duidelijk, maar het helpt om het punt te demonstreren zonder een grote hoeveelheid CSS en andere items op de pagina op te nemen..</p><p>Als u de stylesheet uit het document verwijdert, ziet u het punt dat we proberen aan te tonen: de lay-out van de pagina blijft hetzelfde en u kunt de pagina nog steeds probleemloos gebruiken.</p><p>Vóór het volgende artikel laat u uw vragen, opmerkingen en feedback achter in het onderstaande formulier.</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">Een welkomstpagina voor uw WordPress-product bouwen code deel 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">Een website bouwen in progressieve stappen 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="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur. </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="Zoeken..."> <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>

Een website bouwen met progressieve verbetering

Stap 1: eenvoudige HTML

Stap 2: Kop en menu

Onze voorbeeldrubriek