Maak een eigen website van één-pagina (index.html). De inhoud mogen jullie kiezen, bijvoorbeeld een sportclub of
vereniging. Het is de bedoeling om de inhoud en de vormgeving aan te passen.

Download hier de uitleg voor de opbouw en opmaak.
Je krijgt ook een startbestand mee met commentaren in de HTML & CSS.

Bekijk hier voorbeelden van vorige jaren.

Er is gebruik gemaakt van het grid-systeem van bootstrap 4. In deze CSS staat display:flex centraal.

De menu bestaat uit: Home, Info, Team, Foto's en Contact

Als je geen Dreamweaver hebt, kan je Sublime Text, Notepadd++ of een andere teksteditor gebruiken. Zolang je maar in de juiste extensie bewaard .html voor de inhoud en .css voor de stijl van je website.

1. Inhoud binnen de HTML-tags

Alle teksten ga je aanpassen naar je eigen inhoud. De afbeeldingen die je wilt gebruiken moet je bewaren in de map "img". Vul de HTML-tags verder aan , kopiëer deze vanuit de pdf en zet ze op de juiste plaats. Lees de HTML commentaren .

2. CSS (style) aanpassen naar je eigen kleuren

Verander volgende eigenschappen color (tekstkleur) en background-color (achtergrondkleur). Geef ook een leuk lettertype mee voor de headings.

Vul de CSS-selectors verder aan , kopiëer deze vanuit de pdf en zet ze op de juiste plaats. Lees de CSS commentaren .

Je levert de volledige map in, dus je index.html + map img. Best website zippen (onepage.zip).

Responsive

Leer hier hoe u een soepel scrolleffect kunt creëren.

Bekijk hier het voorbeeld.

Je moet 2 zaken doen om naar een andere plaats binnen dezelfde pagina te springen:

  1. Om te kunnen linken naar een tekst verderop in een pagina, moet die tekst een ankerplaats worden.
    <div class="main" id="section1">
  2. Een link maken: je gooit een anker uit, naar de unieke ankerplaats die je net gemaakt hebt.
    <a href="#section2">Link</a>

De volledige code ziet er zo uit: 

<head>
<style>
#section1 {
  height: 100vh;
  overflow:auto;
  background-color: pink;
}

#section2 {
  height: 100vh;
  overflow:auto;
  background-color: yellow;
}
</style>
</head>

<body>

<div class="main" id="section1">
  <h2>Section 1</h2>
  <p>Click on the link to see the "smooth" scrolling effect.</p>
  <a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
  <p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>

<div class="main" id="section2">
  <h2>Section 2</h2>
  <p>Click on the link to see the "smooth" scrolling effect.</p>
  <a href="#section1">Click Me to Smooth Scroll to Section 1 Below</a>
  <p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>


</body>

Je kan met CSS nu ook een soepel scrolleffect creëren.

Bekijk hier het voorbeeld. 

html {
  scroll-behavior: smooth;
}

Safari en oudere browsers ondersteunt deze CSS-code nog niet. Hierdoor moeten we jQuery gebruiken: 

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>