APP DESIGN

-

De inhoud

We kunnen onze app op diverse manieren vullen.

Na wat opmaak hebben we nu het volgende beeld:

De koptekst en voettekst is ingevuld. We maken nu wat ruimte, door in de css de content te definieren.

Maak een apart css bestand waarin je de code kunt toevoegen. Maak een klasse aan die je content noemt en geef deze de afmetingen van je app. Selecteer in de html de div "content" en pas de klasse toe.

.content {
height: 1000px;
width: 80%;
margin-right: auto;
margin-left: auto;
}

Je krijgt dan het volgende in de html:

En in live-view

Je kunt er nu voor kiezen om de ruimte te vullen, met Lorem Ipsum. Leuker is natuurlijk om inhoud van internet te halen.

Om de foto's in je app in het midden te zetten maken we de volgende klasse aan:

.foto {
margin-right: auto;
margin-left: auto;
display: block;
}

Je kunt de app hier bekijken. Doe dit bij voorkeur met een mobiel apparaat.

Om je inhoud meer vorm te geven biedt ook jquery diverse mogelijkheden.

Je kunt bijvoorbeeld kiezen voor "inklapbaar blok"

Je krijgt dan het volgende:

Vervolgens kun je dan ieder van die stukjes vullen met je eigen inhoud en je eigen tekst.

Voorbeeld 2016

Opmaak

Bij de opmaak van je app kun je gebruik maken van alle CSS die we al eerder hebben gebruikt. In de bovenstaande app maak ik gebruik van:

 

Opdracht:

1. voer bovenstaande handelingen uit en zoek op internet een stukje inhoud.

2. vul hiermee een aantal pagina's

3. maak gebruik van diverse CSS

4. Zorg ervoor dat je app volledig gevuld is en gekoppeld aan je website.

 

 

 

 

 

 

 

Vervolg

 

©jw webdesign