Construirea unui site web cu o îmbunătățire progresivă / Cod

element. Puneți textul în

etichete chiar sub meniu.

  Lorem ipsum dolor stai amet ... 
  Nam aliquet tempor turpis ...

Acum, adăugați subsolul folosind

etichetă:

Copyright © 2014 Compania SomeNonExistent. Toate drepturile rezervate.

Pagina ar trebui să arate astfel:

Puteți crea Despre și Oferi paginile în același mod - nu vor avea nimic special în ele (puteți adăuga numele lor ca

etichete chiar deasupra conținutului).

Pasul 4: Formularul de contact

Ultimul lucru pe care trebuie să-l faceți în HTML este pagina de contact. Copiați conținutul index.html la contact.html și eliminați conținutul

element.

Acum adăugați titlul pentru formular (în

etichetă):

Contacteaza-ne

După aceasta, putem adăuga a

element cu câmpuri adecvate pentru a umple utilizatorul (din moment ce partea serverului rămâne cam aceeași, nu o voi acoperi aici, deci dacă doriți să vă testați formularul, va trebui să vă scrieți back-end-ul):

Numele dumneavoastră:

Email-ul tau:

Mesajul tau:

tagurile nu încalcă regulile de semanticitate, deoarece eticheta și combo-ul de intrare sunt de fapt un paragraf. Pagina de contact ar trebui să arate astfel:

CSS

Acum, că pagina noastră funcționează, putem începe să o facem mai bine. Creați un fișier și denumiți-l style.css. Acum adăugați această linie la secțiune a documentului:

Pasul 5: Stiluri de bază

Primul lucru pe care trebuie să-l faceți este să schimbați fonturile și forma globală a paginii:

* font-family: Calibri, sans-serif;  corp lățime: 900px; marja: auto;

Două linii de CSS și puteți vedea că pagina arată mai bine, deoarece nu mai utilizează fonturile prestabilite.

Pasul 6: Antetul

Acum, să adăugăm câteva priviri spre antet: spațiul este un pic, schimbați dimensiunea fontului și adăugați fundalul:

h1 padding: 100px 10px 20px; marja: 0; fundal: #dfdfdf; font-weight: normal; font-size: 3m;

Observați cum am modificat dimensiunea fontului - am folosit em în loc de orice altă unitate. Acest lucru se datorează ultimelor reguli explicate în prima parte a acestei serii: utilizatorii pot schimba dimensiunea de bază a fontului și dacă am avea, de exemplu, utilizat px, setările lor nu vor fi respectate de foaia de stil.

Pasul 7: Meniul

După ce am fixat apariția antetului, putem continua cu meniul. De asemenea, vom schimba mărimea fontului ancorelor, vom elimina sublinierea acestora și vom adăuga un fundal atunci când vor fi suspendați sau când vor avea un activ clasă:

nav fundal: # aed8ff nav a text-decoration: nimic; font-size: 1.3; culoare: # 333; padding: 15px 25px; afișare: inline-block;  nav: hover, nav a.active fundal: #dfdfdf; culoare: # 666;

Acum adaugati activ clasați pe ancorele corespunzătoare din fișiere, astfel încât acestea să apară "apăsate" când pagina este încărcată:

Acasă

Iată cum ar trebui să arate acum:

Pasul 8: Conținutul

Aici vom urmări doar îmbunătățirea lizibilității prin creșterea înălțimii liniei (nu uitați de setările utilizatorilor - putem schimba dimensiunea elementelor pur vizuale, cum ar fi anteturile și butoanele, dar utilizatorii își stabilesc dimensiunea implicită a fontului pentru un motiv). De asemenea, vom schimba fontul și vom adăuga unele elemente de umplutură:

p font-familie: Helvetica, Arial, Sans-Serif; linia-înălțime: 1,6; text-align: justify; padding: 10px;

Iată rezultatul. Observați cum sa îmbunătățit lizibilitatea cu o schimbare atât de mică:

Pasul 9: subsolul

Aceasta va fi și o mică schimbare cosmetică: fundal, umplutură și text centrat:

footer padding: 10px; fundal: #dfdfdf; text-align: centru;

Iată cum arată acum subsolul:

Pasul 10: Formularul

Ultimul lucru pe care trebuie să-l faceți este să remediați aspectul formularului de contact. În primul rând, să eliminăm padding-ul și marginea

elemente:

forma p marja: 0; umplutura: 0;

Acum, să stabilim lățimea elemente și elemente </code> să fie la fel. Am stabilit și noi <code>afișare: blocare</code> pe ele să le alinieze frumos:</p><pre>formular de intrare, forma textarea width: 300px; afișare: bloc; </pre><p>În cele din urmă, schimbăm <code><button></code>s pentru a prelua jumătate din lățimea formularului:</p><pre>butonul de formular margin: 10px 0; padding: 5px; lățime: 148px; </pre><p>Acesta este rezultatul final:</p><img src="//accentsconagua.com/img/images_13/building-a-website-with-progressive-enhancement_8.png"><h2> <img>Concluzie</h2><p>În următorul articol, vom folosi câteva coduri JavaScript (mai specific, jQuery) pentru a adăuga elemente interactive pe site-ul nostru.</p><p>Pentru cei care sunteți dezvoltatori mai avansați, puteți descoperi că acest tutorial nu a învățat nimic despre ce nu știați despre HTML sau CSS. Deoarece lucrăm la această strategie din perspectiva unui începător, acest lucru este de așteptat. </p><p>Alternativ, uitați-vă în acest fel: Am creat un design bazat pe conținutul său și nu pe un design preexistent. Desigur, este simplu și simplu, dar vă ajută să demonstrați punctul fără a include o sumă mare de CSS și alte active pe pagină.</p><p>Dacă eliminați foaia de stil din document, ar trebui să vedeți punctul pe care încercăm să-l demonstrăm: aspectul paginii rămâne același și puteți utiliza pagina fără probleme.</p><p>Înainte de următorul articol, vă rugăm să lăsați întrebările, comentariile și feedback-ul dvs. în formularul de mai jos.</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">Cod</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">Construirea unei pagini de bun venit pentru produsul dvs. WordPress Codul Partea 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">Construirea unui site web în pași progresivi 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="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la 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="Căutare..."> <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>

Construirea unui site web cu o îmbunătățire progresivă

Pasul 1: HTML de bază

Pasul 2: Rubrica și meniul

Exemplul nostru