En mall för en One-page webbplats

Till att börja med så behöver vi en mall, en grund för webbplatsen, eller webbsidan, som vi skall jobba med i övningen. Tanken är att vi gör en ny webbsida med egen header, footer och style.

Du kan själv bestämma vilket innehåll du lägger in i webbplatsen. Du kommer få grundstrukturen för sidan i övningen, men innehållet i form av text och bilder behöver du själv lägga till.

Du kan återanvända style som du redan byggt i kursen så här långt, det går bra att importera delar av din befintliga stylesheet och justera vissa inställningar för till exempel färgschemat.

En mall för webbsidan onepage

Vi börjar med grundmallen som vi känner igen, det är HTML, CSS och JavaScript.

Skapa en ny webbsida public/oneguide.html med tillhörande stylesheet public/css/oneguide.css och en JavaScript-fil public/js/oneguide.js.

Använd den kunskap du fått så här långt för att bygga grunden för webbsidan så att den innehåller en header och en footer. Välj ett passande färgschema och lägg till så att webbplatsen är responsiv.

Så här blev det för mig.

Image description — Bild: Så här ser mallen ut för mig, men du skapar din egna mall.

Min meny är responsiv, en bra start.

När jag byggde min grundmall så försökte jag återanvända så många grundkonstruktioner som jag redan hade i min befintliga webbplats, det var mest färgschemat som jag justerade.

Min grundmall

Här kan du tjuvkika på min grundmall. men du bygger din egen. Det viktiga är att du lämnar utrymme för att fylla på med innehåll på sidan.

<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>One-page with CSS</title>
  <link rel="stylesheet" href="css/oneguide.css" />
  <link rel="icon" href="img/blue-fish.svg" />
</head>
<body>
  <header class="siteheader">
    <div>
      <a href="me.html">
        <img src="img/blue-fish.svg" alt="Logotyp">
        <span>Risbrodammens FVOF</span>
      </a>
    </div>

    <nav class="navbar">
      <button class="menu-toggle" id="menu-toggle">&#9776;</button>
      <ul class="navlinks" id="nav-links">
        <li><a href="#hittahit">Hitta hit</a></li>
        <li><a href="#fiskeomrade">Fiskeområde</a></li>
        <li><a href="#oppet">Öppettider</a></li>
        <li><a href="#fiske">Fiske</a></li>
        <li><a href="#priser">Priser</a></li>
        <li><a href="#historia">Historia</a></li>
        <li><a href="#om">Om</a></li>
        <li><a href="#kontakt">Kontakt</a></li>
      </ul>
    </nav>
  </header>

  <div class="wrapper">
    <h1>Här skall vi nu fylla på med innehåll!</p>
  </div>

  <footer class="sitefooter">
    <div class="footer-triptych">
      <div class="footer-column">
        <h3 id="historia">Historia</h3>
        <ul>
          <li></li>
        </ul>
      </div>
      <div class="footer-column">
        <h3 id="om">Om</h3>
        <ul>
          <li></li>
        </ul>
      </div>
      <div class="footer-column">
        <h3 id="kontakt">Kontakt</h3>
        <ul>
          <li></li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <p>Copyright &copy; Risbrodammens Fiskevårdsförening (RFVF)</p>
    </div>
  </footer>

  <script src="js/oneguide.js"></script>
</body>
</html>

Det är inuti <div class="wrapper"> som vi skall placera sidans innehåll.