Plantilla

Aquesta plantilla per a la nostra interfície web consta de dos fitxers:

• test.html
• sidebar.html

El fitxer test.html és un model de pàgina. Més endevant farem d'ell tantes còpies com a pàgines volem fer

• A la línia 23 podem canviar el títol de la pàgina:

  <span class="w3-center w3-padding-16">My Page</span>

• A les línies 26-36 tenim el contingut propi de la pàgina:

<!--  ************* INICI CONTINGUT PROPI DE LA PÀGINA ****************   -->

<img src="img_car.jpg" alt="Car" style="width:100%">

<div class="w3-container">
<p>This sidebar is hidden by default, (style="display:none")</p>
<p>You must click on the "hamburger" icon (top left) to open it.</p>
<p>The sidebar will hide a part of the page content.</p>
</div>

<!--  *************** FI CONTINGUT PROPI DE LA PÀGINA *****************   -->

• A les línies 14-16 configurarem la barra inferior de navegació
  • A la línia 14 el primer enllaç, icona ◀
  • A la línia 15 el segon enllaç, icona 🔼
  • A la línia 14 el darrer enllaç, icona ▶

    <a href="#" class="w3-bar-item w3-button">&#9664; Link 1</a>
    <a href="#" class="w3-bar-item w3-button w3-middle"> &#128316; Link 2</a>
    <a href="#" class="w3-bar-item w3-button w3-right">Link 3 &#9654; </a>

Podeu utilitzar altres símbols per les icones, com ara ⏮ ⏭ ✋ 🌡. Les codificacions HTML les trobareu a w3schools Emoji Unicode Reference

Amb el fitxer sidebar.html configurarem la barra de menú lateral, que s'activa en clicar a la icona ☰

Només hem de modificar, afegir o eliminar del fitxer sidebar.html les línies del tipus

 <a href="#" class="w3-bar-item w3-button">Link 1</a>