AO1A lessen en huiswerk         AO1B lessen en huiswerk test pagina
Opdracht 1 (relative positioning & selectors & CSS3)
1
  • Maak een DIV "A" met rounded corners (stel breedte in-line in, eerst op 100%)
  • Zorg dat een bepaalde class DIV “B” die in DIV "A" ligt, ook rounded corners heeft, een vaste breedte en een rode rand. Standaard liggen ze allemaal naast elkaar.
  • Maak een class-definitie alleen voor een DIV “C” met dezelfde eigenschappen als “B”, maar die standaard een achtergrondkleur heeft
  • Zie voor verdere opmaak de uitwerking van opdracht 2 onder menu "tests"
Opdracht 2 (file-structuur)
2
  • Bouw een mappenstructuur zoals hier beschreven (laat het bij 2 apps)
  • Maak in elke web-app een index.htm aan (zet er een H1 header met "appA" of iets dergelijks in)
  • Maak in één web-app ook een eigen stylesheet aan
  • Leg de basis css-rules in de common map en de specifieke css voor die site in de style.css (die van hierboven) van die site
  • Roep beide stylesheets in je index.htm aan, eerst de common en dan de andere
  • Bouw nu wat voorbeeld HTML op in de index-file en probeer uit dat css regels uit de common map overruled worden door het stylesheet wat later aangeroepen wordt
  • zet in de common css een class voor een id container die standaard in het midden van de pagina uit-lijnt
Opdracht 3 (basis site, layout met CSS3)
3 Bouw een basis pagina met header-content-footer, met deze pagina als voorbeeld en verder:
  • Maak een standaard opmaak voor een website
    • met een container die in het midden uitlijnt
    • een header
      • met jouw eigen logo => float left
      • Deltion logo => float right
      • een gecentreerde titel
    • een menu gedeelte (verticaal: float left, right of gewoon horizontaal)
    • een content gedeelte
      • floating divs in content (zie voorbeeld)
      • een vergrote beginletter in een div (zie hoofdletter L van Lorum Ipsum tekst in voorbeeld)
    • een footer met jouw naam en copyright teken
    • verwijs in je menu in je base -index naar je verschillende apps. Je kunt per opdracht een app aanmaken
  • Zie voor een basis, de uitwerking van opdracht 3 onder menu "tests"
Opdracht 4 Tabel met rounded corners (CSS3 selectors)
4a)
Maak het voorbeeld van de opgemaakte <table> af.
Geef maar één class !! in het <table> element en baseer de opmaak van <tr>, <td> e.a. op die ene class.
  • Gebruik <th> i.p.v. <td> in de eerste (header-row) en de laatste rij (footer-row) en eventueel in de eerste kolom
    • Geef de header- en footer-row eigen opmaakstijlen mee qua rand, (achtergrond)kleur en lettergrootte en uitlijning tekst
    • Rond tabel hoeken af (top-left, top-right, bottom-left, bottom-right. Zorg dat het daarbij niet uitmaakt hoeveel rijen of kolommen de tabel heeft!
tableA
cel 1cel 2cel 3
cel 1cel 2cel 3
tableB
cel 1cel 2cel 3
cel 1cel 2cel 3
footer tableB
4b) Maak een soortgelijke gelijke opmaak zoals opdracht a), alleen nu op basis van divs.
Deze gaan we gebruiken als (modal) form voor inloggen of voor andere doeleinden (klik voor een voorbeeld op de 3 streepjes in de menubalk).
  • sla de css als aparte file op
  • bouw de html zo netjes mogelijk op zodat we later de inhoud van de header, content en footer-div, dynamisch kunnen vullen met Javascript!
4c) Maak de modal-dialog-box van opdracht B gereed voor gebruik in meerdere pagina's
  • Header en footer moeten (dezelfde) donkere achtergrond met lichte tekst hebben
  • footer: klein lettertype, rechts uitlijnend
  • content: lichte achtergrond met donkere tekst
  • Bij druk op een knop (op deze pagina: hamburger-menu rechts boven moet:
    • achtergrond van hele pagina grijs worden (overlay)
    • verschijnt model-dialog-box ongeveer 200px van de top, horizontaal gezien in het midden
  • In de header van de modal staat een rood kruis waarmee je de modal kan sluiten (zie vb. hamburger bovenaan)
  • zorg dat de modal-box van bovenaf "er in glijdt" met een css transition (zie voorbeeld met bootstrap)
  • "Voorbeeld Dialog HTML CSS in jsFiddle"
Opdracht 5 (CSS3 & selectors & Menu)
Maak een horizontaal menu:
  • Maak een geneste <ul> - <li> structuur van 2 lagen diep
  • Geef de <li>'s een breedte en achtergrondkleur
  • Zet de <li>'s met een float naast elkaar
  • Leg <a href>'s in de <li>'s en zet de text-decoration uit
  • Zet de breedte van de <a href>'s en laat de <li>'s mee rekken, zodat je op de link op de hele <li> werkt en niet alleen op de tekst van de <a href>
  • Geef met de pseudo-selector :hover, de gehoverde <li>'s een andere kleur
  • Geef met de pseudo-selector :first-of-type, de linkse <li>, links afgeronde hoeken. Herhaal dit voor de rechtse
  • Zet de <ul> van een <li> op display:none
  • Zorg dat je met een hover op bovenstaande <li>'s, de onderliggende <li>'s op display:block zet, zodat ze zichtbaar worden
  • Maak witranden rond de <li>'s. (met margin of border... ?!)
  • Maak het menu verder werkend
5a)
5b) Vul de CSS aan zodat het menu volledig werkt (voorbeeld standaard menu)
5c) Maak het uitklappen vanm submenu's mooier met transitions:
  • transition op height van submenu
  • transition op opacity van <li> of <a href>
  • eventueel transition op breedte van <li> of <a href>
Zie effect op opacity en effect op hoogte
Opdracht 6 Vier manieren van menu besturing
6 Maak 4 verschillende sites, allemaal gebaseerd op dezelfde css in de common map:
6a) Besturing via nieuwe pagina's
6b) Besturing met iframe's
6c) Besturing via hidden pagina's (divs)
6d) Besturing met PHP includes
Opdracht 7 Modal-login-box
7 Maak in een kopie van de site op basis van de php-include (opdr 6D) en bouw daar een inlog-mogelijkheid in
  • Zet uiterst rechts in je menubalk een inlog-link (of knop)
  • Bij klikken op die knop:
    • Verschijnt er een dialogbox op basis van 4b) met een mogelijkheid voor invullen van een inlognaam, password en een submit-button
    • Ligt er een overlay achter deze modal-box, waardoor de rest grijs wordt
  • Bij klikken op inloggen verdwijnt de dialog-box en de overlay weer en wordt de inlognaam in een PHP-SESSION opgeslagen bij juiste inlog
  • Wanneer er ingelogd is veranderd de tekst in de "inlog-button" in [gebruikersnaam] + uitloggen
  • Wanneer op "uitloggen" wordt gedrukt, log je uit en veranderd de tekst van de button weer in inloggen
Opdracht 8 Dynamisch menu vanuit PHP array
8 Een menu is (meestal) opgebouwd met een <ul>, <li> en <a> -structuur.
Om makkelijker een menu-item toe te kunnen voegen en verschillende rechten aan menuitems mee te kunnen geven, gaan we hem opbouwen vanuit een PHP-array.
Voorbeeld verschillende opdrachten: link
Opdracht 9 Bootstrap basis en grid-system
9 Test basis layout met Bootstrap
zoek voorbeelden op bootstrap.com en w3schools!!
  • gebruik CDN voor Bootstrap
  • Bouw pagina met container en jumbotron header op
  • Test 12 kolommen bij lg, 4 kolommen bij sm en 1 bijn xs
  • Test een nav-bar (gewone, of met tabs), i.p.v. jumbotron zorg bij klik dat content veranderd (zie opdracht 6, maar dan met Bootsrap menu)
  • Kijk hoe je de gewone menubar responsive maakt: als de viewport smal wordt, verdwijnt menu onder hamburgermenu
  • test verschillende andere bootstrap elementen
Opdracht 10 Eindopdracht PHP-menu en Bootstrap
10 De eindopdracht is een integratie van opdracht 8 en 9.
Kopieer hiervoor opdracht 8 in een nieuwe map en vervang daarbij alle layout-elementen door Bootstrap

Paginakenmenerken
  • Vervang je eigen menu-opbouw door die van Bootstrap menu
  • Vervang je eigen dialog (voor inloggen met rechten) door een dialog van Bootstrap
  • De paginalayout moet worden:
    • Bovenaan een menu (via Bootstrap) dat bij mobiele weergave inklapt tot een hamburgermenu ("Brand": Deltion-logo blijft altijd zichtbaar)
    • De content bevat bij
      • grote beeldschermen: een linker- en rechter sidebar en een middencontent
      • medium beeldschermen (tablets) 1 left-sidebar, content en de ander staat er niet
      • bij telefoons: alle 3 divs zichtbaar maar volle breedte onder elkaar
    • de footer staat altijd op volle breedte