Post on 13-Jan-2015
description
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