Indelen van de Webpagina Waarom????:

Om de knopjes, de teksten, de plaatjes en de filmpjes (de elementen of de assets) en kleuren altijd netjes op de juiste en dezelfde plaats op het scherm te laten verschijnen.

Omdat je de beperkte schermruimte efficiënt moet te gebruiken.

Om op en neer springende pagina’s te vermijden.

Omdat het scherm niet volgepropt mag lijken.

3 manieren Een webpagina kun je 3 manieren

indelen:

Tabellen

Layers

Frames

Tabellen

Positioneren: van de elementen (teksten, plaatjes,

kleur,enzovoorts) Voorkomt springers of dancers

Onderhoud: handig om de site bij te kunnen werken

Eenvoudig: te bewerken

Layers

Layers zijn zwevende lagen (cellen) Overal te plaatsen Kun je zelfs laten bewegen (mbv een

timeline via een guide-line) Zichtbaar of onzichtbaar Teksten, plaatjes, kleur etc. Oude browsers kunnen ze niet zien!!!

Frames

Frames (lijsten) tonen in een pagina meerdere pagina’s

Ieder frame is een bestand (pagina) Ieder frame is los te bewerken Nadelig bij oude browsers en

zoekmachines Vaak gebruikte frames indeling:

Kop of topframe; titel Navigatieframe; knopjes Inhoudsframe; mainFrame (teksten etc)

Rijen, kolommen en lijnen Row:

horizontale rij met cellen () Column:

verticale rij met cellen (kolom) Width:

de schermbreedte (%) Border:

Lijndikte (0 = onzichtbaar)

Voorbeeld: tabel

1 k/r 1 rij 1 rij 1 rij

2 kolom

3 kolom

cel

4 kolom

5 kolom

Voorbeeld: website

We kijken nu even naar een website waarin frames en tabellen zijn gebruikt

www.campingprecaroline.nl

Opdracht 1: tabel maken Voeg een tabel in in het werkblad

(= documentvenster): Insert Table Stel in;

Row; 4 Column: 5 Width: 50% Border: 5

Opdracht 2: opmaak

Voeg in de tabel in: Rij 1:

in cel 1: kleur rood in cel 2: typ een korte tekst in

Opdracht 3: opmaak

Verander in de tabel: Rij 1:

in cel 1: kleur blauw in cel 2: typ: dit is cel 2

Rij 2: in cel 1: kleur rood in cel 2: typ: dit was wit

Opdracht 4: selecteren

Plaats een tabel met 3 rijen en 3 kolommen op het werkblad

Ga op de cel staan en klik met de muis

Klik meerdere cellen aan

Opdracht 5; selecteren

Meerdere onafhankelijke cellen selecteren: Druk op de Ctrl-toets Ga met muis op de cel staan en klik En klik op de andere cellen die je wilt

selecteren

Opdracht 6: splitsen

Selecteer de cel Ga naar Modify (= aanpassen) En dan Table Klik op Split Cell

Opdracht 7: samenvoegen

Selecteer de cellen Ga naar Modify Kies Table Klik op Merge Cells

Opdracht 8: invoegen

Klik binnen de cel waar je een rij of een kolom wilt invoegen; Kies modify Dan Table Dan insert Row (rijen) Of Insert Columns Maar Insert Rows or Columns kan het

ook (dan kun je opgeven hoeveel)

Tabeleigenschappen

Nadat een tabel is gemaakt kunnen we de eigenschappen aanpassen zowel

voor de gehele tabel als de afzonderlijke cellen.

Dit doe je met de Property Inspector (properties)

Property Inspector

Gebruiken voor de hele tabel bij: Links, midden(centreren) of rechts

uitlijnen van de tabel op de pagina Achtergrondkleur,

achtergrondplaatjes in de tabel te plaatsen

Lijndikte en kleur van de tabel

Property Inspector

Gebruiken voor het aanpassen van een of meer cellen bij: Het horizontaal (Horz) en verticaal

(Vert) uitlijnen van de celinhoud. Breedte(W) en hoogte (H) van de cel Achtergrond -kleur en -plaatje Kleur van de lijnrand van de cel of

cellen

Eindopdracht: reisinfo Nieuwe lege pagina Via Page Properties

een lichte achtergrond kleur

Tabel in voegen 5 kolommen 2 rijen Breedte 85% Lijndikte zelf bepalen Let op welke cellen je

straks moet splitsen

Naam reisbureau Foto invoegen in kolom

1 Bestemming (2 stuks) Duur (2 varianten) Vervoer (2

mogelijkheden) Prijs (2 mogelijkheden) Tabel/cellen in andere

kleur dan pagina. Tabel centreren en

celinhoud links of rechts uitlijnen.

Mogelijke oplossing

Reisje Naar Lang? Hoe? Kosten?

België 1 dag fiets 300

Spanje 1 week

auto 500