hichamt / handy Goto Github PK

Geef HTML-elementen een bijzondere positie op twee webpagina's

Block-elementen worden normaal onder elkaar gepositioneerd. Inline-elementen worden normaal binnen een block-element naast elkaar gepositioneerd in regels. De normale positie van block- en inline elementen wordt static genoemd. Je kunt elementen ook een afwijkende positie geven. Ze lijken daardoor te zweven boven de andere elementen van de webpagina.

1. Maak een webpagina 'handy' na op basis van de voorbeelden in de map Voorbeelden
2. Breid de nieuwsportaal-webpagina over jouw hobby (opdracht layout) uit met elementen die absolute en fixed gepositioneerd zijn.

De opdracht bestaat uit twee type eisen, namelijk functionele eisen en technische eisen. Je moet aan al deze eisen voldoen!

###Functionele eisen Functionele eisen beschrijven welke functionaliteit je eindproduct moet bevatten. Functionele eisen mogen nooit van technische aard zijn! Ieder persoon moet begrijpen welke functionaliteit de opdracht moet bevatten, ongeacht kennis niveau.

De handy webpagina moet aan de volgende functionele eisen voldoen:

• De layout en stijl moet exact overeenkomen met het voorbeeld (Zie Voorbeelden/handy01.png)
• De navigatielinks (title, hammer,screwdriver, saw, pincers) zijn geplaatst over den rode rand van het gecentreerde vlak van de webpagina. (Zie Voorbeelden/handy01.png) De positie van de navigatielinks staat in elk browserscherm op dezelfde plek op de rand.
• De navigatielinks schuiven naar het centrum, wanneer de muis erover heen gaat (Zie Voorbeelden/handy02.png)
• De toolbox is geplaatst in het midden van de webpagina. (Zie Voorbeelden/handy01.png) Op elk browserscherm staat de toolbox op dezelfde plek in de webpagina.
• Het menu ('tape measure', 'wood graver' etc.) van de rode toolbox verschijnt net over/onder de toolbox, wanneer de muis over de toolbox gaat (Zie Voorbeelden/handy03.png)
• Een optie uit het menu van de rode toolbox wordt lichtgeel, wanneer de muis over optie gaat (Zie Voorbeelden/handy04.png)
• De extra tekst over de human factor wordt (pas) zichtbaar in een wit vlak onder het woord human factor, als de muis er over heen gaat. (Zie Voorbeelden/handy05.png)
• Bovenin de webpagina is op een vaste plek in het browser-window (fixed) een menubalk zichtbaar met de opties 'to paint', 'to mason' etc. (Zie Voorbeelden/handy01.png) In elk browserscherm (hoe klein of hoe groot ook) staat deze menubalk bovenin het browserscherm.
• De achtergrond en tekstkleur van het menubalk bovenin wijzigen als de muis erover heen gaat. (Zie Voorbeelden/handy06.png)

###Technische eisen Technische eisen beschrijven aan welke vakgerichte voorwaarden de opdracht moet voldoen. Bijvoorbeeld dat de opdracht in correct validerend HTML en CSS moet worden geschreven.

De handy webpagina moet aan de volgende technische eisen voldoen:

• Werk de aanwezige absolutely.html en absolutely.css verder uit...
• Het document is geschreven in HTML5
• Het document bevat het correcte doctype
• Het document bestaat uit een head en body
• Het document heeft een title
• Het document valideert als correct HTML5, http://validator.w3.org/
• Gebruik nav waar nodig
• Gebruik main en article waar nodig
• Gebruik position: relative, absolute en fixed waar nodig.
• Pas nooit negatieve margins of paddings toe
• Gebruik display: none als elementen onzichtbaar moeten zijn
• Gebruik display: block als elementen zichtbaar moeten worden als block-element

###Bronnen

• positioning elements
• displaying elements