CSS - hoofdstuk 5

-

De ID selector


De ID selector wordt meestal gebruikt om een bepaald gedeelte van de pagina aan te geven (een division, div); de bouwstenen van de pagina. Het is enigszins te vergelijken met het maken van een sjabloon.
Een veel gebruikte structuur bij een webpagina is de volgende:

Er is een koptekst, vaak met een logo of een plaatje, links staat de navigatie en rechts de hoofdinhoud van een pagina.
De divisions (div) zijn zeer geschikt om deze verschillende onderdelen van de pagina te benoemen.
Er zijn 2 manieren om een pagina van div’s te voorzien. Indien je al tekst hebt is de volgende manier het handigst:

  1. Open voorbeeld2.html.
  2. Klik in de bovenste alinea
  3. Selecteer met de tagselector de gehele alinea:

figuur28

  1. Kies uit de knoppenbalk (Common) de knop Insert Div Tag:

    figuur33

5. Vul de gegevens volgens onderstaand scherm in:



Je kies voor Wrap around selection omdat je wilt dat de div geopend wordt aan het begin van de selectie en gesloten wordt na het laatste teken van de selectie. De div wordt gebruikt als een soort “verpakking”; vandaar de term wrap, Engels voor verpakken.
Je ziet het ook terug in de Codeview:

<div id="koptekst">
<p>Proin….. elit. </p>
</div>

Je kunt nu vervolgens de tweede alinea als div navigatie geven, de derde alinea als div hoofdinhoud en de vierde alinea als div footer. De werkwijze is exact dezelfde als bij de eerste alinea.
Na afloop kun je goed zien dat Dreamweaver keurig een gestippeld kader zet om de verschillende divisions. Indien je in een <div> klikt zie je dat de tagselector keurig de betreffende <div> met naam laat zien. Dit is straks bijzonder handig bij het opmaken. We zullen namelijk nog wel wat aan de lay-out moeten doen om het wat te gaan lijken op de indeling van de pagina zoals aan het begin getoond!

Indien je een kale pagina hebt, kun je ook beginnen door eerst divisions te maken. Maak een nieuwe pagina aan en kies weer uit de knoppenbalk (Common) de knop Insert Div Tag:


In de Design View geeft dat als resultaat:




Kies weer uit de knoppenbalk de knop Insert Div Tag:

De divisions moeten achterelkaar komen dus moet je voor het invoegpunt (insert) kiezen voor na de sluittag van de eerste division “koptekst”.

Je voert de stappen ook nog een keer uit voor de div “hoofdinhoud”.
Het uiteindelijke resultaat is dan het onderstaande:

Je kunt nu in de verschillende divisions tekst plakken of tikken

Opdrachten

  1. Open een nieuw bestand en sla dit op als CSS5
  2. Voer bovenstaande handelingen uit en sla het uiteindelijke resultaat op als CSS5
  3. Open een nieuw bestand en sla die op als CSS5div en maak onderstaande div-indeling

4. Maak in hetzelfde bestand onderstaande div- indeling.

Om de breedte te kunnen instellen gebruik je de " width".

 

5. Je kunt divs ook in elkaar zetten. Dit doe je door in de html code de ene div in de andere div te slepen.

Maak in hetzelfde bestand onderstaand voorbeeld na:

 

Hierbij moet je gebruik maken van de functie "kader"

Let op!

* marge is aan de buitenkant van de div

* padding is aan de binnenkant van de div

* om hetzelfde beeld op verschillende beeldschermen te krijgen, kun je het beste werken in procenten

6. Sla het bestand nogmaals op en koppel het via een hyperlink aan je index-pagina als CSS5div2

7. Nog een oefening met divs, maak onderstaande indeling en koppel het aan je website als CSS5div3

div

 

 

 

 

 

 

 

 

 

©jw webdesign