Costruire un sito Web con miglioramento progressivo / Codice

elemento. Metti il testo nel

tag appena sotto il menu.

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

Ora aggiungi il piè di pagina usando il

etichetta:

Copyright © 2014 SomeNonExistent Company. Tutti i diritti riservati.

La pagina dovrebbe ora apparire così:

Puoi creare il Di e Offrire pagine allo stesso modo - non avranno nulla di speciale in loro (puoi aggiungere i loro nomi come

tag appena sopra il contenuto).

Passaggio 4: il modulo di contatto

L'ultima cosa da fare in HTML è la pagina dei contatti. Copia il contenuto del tuo index.html a contact.html e rimuovere il contenuto del

elemento.

Ora aggiungi l'intestazione per il modulo (nel file

etichetta):

Contattaci

Dopo di ciò, possiamo aggiungere un

elemento con campi appropriati che l'utente deve compilare (poiché il lato server delle cose rimane più o meno lo stesso non lo coprirò qui, quindi se vuoi testare il tuo modulo dovrai scrivere tu stesso il back-end):

Il tuo nome:

La tua email:

Il tuo messaggio:

i tag non infrangono la regola della semantica perché l'etichetta e la combinazione di input sono in realtà un paragrafo. La pagina di contatto dovrebbe assomigliare a questa:

Il CSS

Ora che la nostra pagina funziona, possiamo iniziare a farlo sembrare un po 'meglio. Crea un file e chiamalo style.css. Ora aggiungi questa linea al sezione del tuo documento:

Passaggio 5: stili di base

La prima cosa da fare sarebbe cambiare i caratteri e la forma generale della pagina:

* font-family: Calibri, sans-serif;  body width: 900px; margine: auto;

Due righe di CSS e puoi vedere che la pagina ha un aspetto leggermente migliore in quanto non utilizza più i caratteri predefiniti.

Passaggio 6: l'intestazione

Ora aggiungiamo alcuni aspetti all'intestazione: spostiamolo un po ', modifica la dimensione del carattere e aggiungi lo sfondo:

h1 padding: 100px 10px 20px; margine: 0; sfondo: #dfdfdf; font-weight: normal; font-size: 3em;

Si noti come abbiamo cambiato la dimensione del carattere - abbiamo usato em invece di qualsiasi altra unità. Questo a causa dell'ultima delle regole spiegate nella prima parte di questa serie: Gli utenti possono cambiare la dimensione base del carattere e se, per esempio, abbiamo usato px, le loro impostazioni non sarebbero rispettate dal nostro foglio di stile.

Passaggio 7: il menu

Dopo aver sistemato l'aspetto dell'intestazione, possiamo andare avanti con il menu. Modificheremo anche la dimensione dei caratteri delle ancore, rimuoviamo la loro sottolineatura e aggiungiamo uno sfondo quando sono al passaggio del mouse o quando hanno un attivo classe:

nav background: # aed8ff nav a text-decoration: none; font-size: 1.3em; colore: # 333; imbottitura: 15px 25px; display: blocco in linea;  nav a: hover, nav a.active background: #dfdfdf; colore: # 666;

Ora aggiungi il attivo classare gli ancoraggi appropriati nei file in modo che vengano "premuti" quando viene caricata la pagina:

Casa

Ecco come dovrebbe essere ora:

Passaggio 8: il contenuto

Qui, mireremo solo a migliorare la leggibilità aumentando l'altezza della linea (non dimenticare le impostazioni degli utenti: possiamo modificare le dimensioni di elementi puramente visivi come intestazioni e pulsanti, ma gli utenti impostano le loro dimensioni predefinite per un motivo). Cambiamo anche il carattere e aggiungiamo un po 'di padding:

p font-family: Helvetica, Arial, Sans-Serif; altezza della linea: 1,6; allineamento del testo: giustificare; imbottitura: 10px;

Ecco il risultato. Si noti come la leggibilità è migliorata con una modifica così piccola:

Passaggio 9: il piè di pagina

Questo sarà anche solo un piccolo cambiamento estetico: sfondo, riempimento e testo centrato:

footer padding: 10px; sfondo: #dfdfdf; allineamento del testo: centro;

Ecco come appare il footer ora:

Passaggio 10: il modulo

L'ultima cosa da fare è correggere l'aspetto del modulo di contatto. Per prima cosa, rimuoviamo il padding e il margine del

elementi:

forma p margine: 0; padding: 0;

Ora impostiamo la larghezza del elementi e </code> essere lo stesso Abbiamo anche impostato <code>blocco di visualizzazione</code> su di loro per allinearli bene:</p><pre>modulo di input, modulo textarea width: 300px; blocco di visualizzazione; </pre><p>Alla fine cambiamo il <code><button></code>s per occupare metà della larghezza del modulo:</p><pre>pulsante di forma margine: 10px 0; imbottitura: 5px; larghezza: 148 px; </pre><p>Questo è il risultato finale:</p><img src="//accentsconagua.com/img/images_13/building-a-website-with-progressive-enhancement_8.png"><h2> <img>Conclusione</h2><p>Nel prossimo articolo, utilizzeremo alcuni JavaScript (in particolare, jQuery) per aggiungere alcuni elementi interattivi al nostro sito web.</p><p>Per quelli di voi che sono sviluppatori più avanzati, potreste scoprire che questo tutorial non ha insegnato nulla che non sapevate su HTML o CSS. Dal momento che stiamo lavorando a questa strategia dal punto di vista di un principiante, c'è da aspettarselo. </p><p>Alternativa, guardala in questo modo: abbiamo creato un design basato sul suo contenuto e non basato su un progetto preesistente. Certo, è semplice e diretto, ma aiuta a dimostrare il punto senza includere una grande quantità di CSS e altre risorse nella pagina.</p><p>Se rimuovi il foglio di stile dal documento, dovresti vedere il punto che stiamo cercando di dimostrare: il layout della pagina rimane lo stesso e puoi ancora utilizzare la pagina senza problemi.</p><p>Prima del prossimo articolo, si prega di lasciare le vostre domande, commenti e feedback nel modulo sottostante.</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">Codice</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">Creazione di una pagina di benvenuto per il tuo prodotto WordPress codice parte 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">Costruire un sito Web in fasi progressive 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="/">it.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informazioni interessanti e consigli utili sulla programmazione. Sviluppo di siti web, web design e sviluppo web. Tutorial di Photoshop. Creazione di giochi per computer e applicazioni mobili. Diventa un programmatore professionista da zero. </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="Ricerca..."> <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>

Costruire un sito Web con miglioramento progressivo

Passaggio 1: HTML di base

Passaggio 2: titolo e menu

La nostra intestazione del campione