les 2 webdesign toerisme
DESCRIPTION
TRANSCRIPT
![Page 1: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/1.jpg)
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.
![Page 2: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/2.jpg)
3 manieren Een webpagina kun je 3 manieren
indelen:
Tabellen
Layers
Frames
![Page 3: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/3.jpg)
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
![Page 4: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/4.jpg)
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!!!
![Page 5: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/5.jpg)
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)
![Page 6: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/6.jpg)
Rijen, kolommen en lijnen Row:
horizontale rij met cellen () Column:
verticale rij met cellen (kolom) Width:
de schermbreedte (%) Border:
Lijndikte (0 = onzichtbaar)
![Page 7: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/7.jpg)
Voorbeeld: tabel
1 k/r 1 rij 1 rij 1 rij
2 kolom
3 kolom
cel
4 kolom
5 kolom
![Page 8: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/8.jpg)
Voorbeeld: website
We kijken nu even naar een website waarin frames en tabellen zijn gebruikt
www.campingprecaroline.nl
![Page 9: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/9.jpg)
Opdracht 1: tabel maken Voeg een tabel in in het werkblad
(= documentvenster): Insert Table Stel in;
Row; 4 Column: 5 Width: 50% Border: 5
![Page 10: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/10.jpg)
Opdracht 2: opmaak
Voeg in de tabel in: Rij 1:
in cel 1: kleur rood in cel 2: typ een korte tekst in
![Page 11: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/11.jpg)
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
![Page 12: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/12.jpg)
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
![Page 13: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/13.jpg)
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
![Page 14: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/14.jpg)
Opdracht 6: splitsen
Selecteer de cel Ga naar Modify (= aanpassen) En dan Table Klik op Split Cell
![Page 15: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/15.jpg)
Opdracht 7: samenvoegen
Selecteer de cellen Ga naar Modify Kies Table Klik op Merge Cells
![Page 16: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/16.jpg)
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)
![Page 17: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/17.jpg)
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)
![Page 18: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/18.jpg)
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
![Page 19: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/19.jpg)
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
![Page 20: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/20.jpg)
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.
![Page 21: Les 2 Webdesign Toerisme](https://reader036.vdocuments.net/reader036/viewer/2022070303/54b4e22d4a7959bc678b493d/html5/thumbnails/21.jpg)
Mogelijke oplossing
Reisje Naar Lang? Hoe? Kosten?
België 1 dag fiets 300
Spanje 1 week
auto 500