Les 7

Voorbereiding

Download HIER de nodige STARTBESTANDEN

Nodige modules:

Probeer indien mogelijk deze modules met Composer te installeren

Opdracht

1. Overzicht

Zorg voor een mooi overzicht die alle foto's van de verschillende raceauto's weergeeft. Gebruik hiervoor de foto's uit de gedownloade bestanden. Let hierbij op het volgende:

  1. Gebruik een onopgemaakte lijst en laat de auto's floaten met een beetje marge
  2. Leg een menulink in het hoofdmenu 'Auto's'
  3. De mogelijk tot klikken op een afbeeldingen is uitgeschakeld

2. Slideshow

Op de frontpage komt een slideshow te staan net onder de menubalk aan de linkerkant van de tekst. Deze heeft de volgende eigenschappen:
  1. De slideshow toont enkel de foto's van de Lamborghini's
  2. De slideshow is enkel zichtbaar op de frontpage
  3. Onder de slideshow staan er bedieningsknoppen om naar de volgende en vorige foto te gaan
lambo
  1. Handig stukje code:
 
volgende vorige

3. Vertaling

  1. Op de homepage komt volgende inleidende tekst te staan. Pas hiervoor de huidige tekst aan:

Een raceauto of racewagen, soms renwagen genoemd, is een auto die is uitgerust voor het beoefenen van autosport. Doorgaans zijn deze auto's zeer kostbaar, vanwege de geavanceerde en hoogstaande technologische materialen die de auto kan bevatten. Bij een racewagen speelt de aerodynamica een grote rol. Formule 1-auto's zijn bijvoorbeeld zeer aerodynamisch gebouwd om bij maximumsnelheden zo weinig mogelijk luchtweerstand te hebben. Bij raceauto's is de motor krachtiger dan bij gewone personenwagens. Deze kracht wordt met behulp van techniek vergroot, tot soms wel 10 keer die van een normale auto. Er bestaan ook raceauto's die minder geavanceerd zijn. Deze worden vaak gebruikt in wedstrijden waarbij alle deelnemers in hetzelfde type auto rijden. De winnaar van dit soort races kunnen zich in dit soort races alleen onderscheiden door hun rijstijl en niet door de raceauto zelf.

  1. Voorzie onderaan een optie tot kiezen van een andere taal. Van bovenstaande tekst en dus van de homepage voorzie je drie vertalingen: Nederlands, Engels en Frans. Uiteraard zijn er geen bolletjes te zien bij die taalkeuze:
vertaling

4. Webform

Onderstaande toont het uiteindelijke webformulier. Hou rekening met volgende eigenschappen:

  1. Link in het hoofdmenu
  2. De optie tot kiezen van een wagen mag enkel verschijnen indien het antwoord op de vorige vraag ja is
  3. Er wordt een mail verstuurd naar jezelf en naar mij (adres geef ik mondeling door)
  4. Wanneer je bij de ontvangen mail op reply drukt dan wordt er verzonden naar de invuller van het formulier
  5. Zorg dat de invuller een bevestigingspagina te zien krijgt waar hij persoonlijk wordt aangesproken
  6. De tekstgrootte van de banner-tekst is 25pt
  7. De tekstkleur: #cc0000

form

indien ja

5. Bricks

Maak een nieuwe pagina aan die je kan bereiken met een menulink. Deze pagina is volledig gebouw met Bricks, vervolgens wat opgefrist met de nodige CSS. Aan jullie om hetzelfde resultaat te bekomen. Een aantal eigenschappen:

  1. Om het geheel op een gekleurde achtergrond te zetten moet je alle onderdelen van de bricks-structuur in een wrapper steken
  2. Werk in kolommen als je twee zaken naast elkaar wil plaatsen
  3. Geef elke brick een css klasse die je dan codeert in de asset-injector

bricks

6. CSV Import

In de eerder gedownloade bestanden zit een Excel-bestand. Hierin zit een lijst met alle automerken (volgens Wikipedia). Het enige wat je moet doen is deze lijst van merken op een aantrekkelijke manier weergeven op jouw site.

merken