Les 3 Webdesign Toerisme
-
Upload
community-horeca-en-toerisme -
Category
Technology
-
view
321 -
download
0
description
Transcript of Les 3 Webdesign Toerisme
![Page 1: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/1.jpg)
Indelen van de Webpagina (vervolg) les 3
Waarom????:
juiste en dezelfde plaats efficiënt. voorkomt springers of dancers. voorkomt volproppen.
![Page 2: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/2.jpg)
3 middelen om in te delen Een webpagina kun je met 3
middelen indelen:
Tabellen
Layers
Frames
![Page 3: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/3.jpg)
Tabellen
Positioneren
Onderhoud
Eenvoudig
Te converteren naar layers
![Page 4: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/4.jpg)
Opdracht 1: maak een tabel Nieuwe lege pagina Via Page Properties
een lichte achtergrond kleur
Tabel in voegen 5 kolommen 4 rijen Breedte 75% Lijndikte 4 Let op welke cellen je
straks moet splitsen of samenvoegen
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 rechts uitlijnen en
celinhoud links uitlijnen.
![Page 5: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/5.jpg)
Layers Layers zijn zwevende lagen (cellen) Overal te plaatsen Kun je zelfs laten bewegen Zichtbaar of onzichtbaar Teksten, plaatjes, kleur etc. Werkt sneller dan tabellen Oude browsers kunnen ze niet zien, dan
converteren naar een tabel!!!
![Page 6: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/6.jpg)
Voorbeeld: Layer (laag)
![Page 7: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/7.jpg)
Voorbeeld: website
We kijken nu even naar een website waarin ook layers zijn gebruikt:
www.hetnet.nl
![Page 8: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/8.jpg)
Opdracht 2: een layer (laag) maken
Voeg een layer in (op het werkblad [=documentvenster]):
Insert Layer
Of via de werkbalk met drag and drop
![Page 9: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/9.jpg)
Opdracht 3: selecteren Klik op de layer marker (geel icoon met C)
Er verschijnt dan een rand met zwarte blokjes.
Voeg nog een layer toe en probeer beide te selecteren.
Selecteer ze nu een voor een (via de layer marker)
![Page 10: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/10.jpg)
Opdracht 4: verplaatsen
Verplaats de layers
Ga met de muis op de rand staan
Versleep ze naar een andere positie Let op je hoeft de layer niet eerst te
selecteren
![Page 11: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/11.jpg)
Opdracht 5: vergroten/verkleinen
Selecteer de layer Ga in met de muis in een hoekpunt
staan of op een zwart blokje Hou de muisknop ingedrukt en
maak de layer groter en kleiner
![Page 12: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/12.jpg)
Opdracht 6; properties
Selecteer meerdere onafhankelijke layers : In de property inspector (je ziet dan
multiple layers staan) de waarden van W en H wijzigen
(groter en kleiner) Dit kun je ook doen met een layer
![Page 13: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/13.jpg)
Opdracht 7: positioneren (1)
Selecteer de layers Ga naar Modify (= aanpassen) En dan naar Align (uitlijnen) Kies dan left Kies dan right Kies dan top Kies dan bottom
![Page 14: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/14.jpg)
Opdracht 8: Positioneren (2) Ga naar VIEW en dan naar GRID
(=raster) en vink SHOW GRID aan Selecteer een layer Maak de layer 3 vakjes breed Maak de layer 3 vakjes hoog Doe hetzelfde met de andere layer En zorg dat ze mooi even hoog staan
(let op met SNAP to GRID kun je rastervakjes groter en kleiner maken om preciezer te werken)
![Page 15: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/15.jpg)
Opdracht 9: invoegen
Selecteer layer 1 en typ een korte tekst
Selecteer layer 2 en voeg via Insert, dan Image, een plaatje in de layer.
(zorg dat de layer zichtbaar (=visible) is)
![Page 16: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/16.jpg)
Layer: eigenschappen
De hoogte (H) en breedte (W) De posities; links (L) en top (T) De stapelvolgorde (Z) Achtergrond kleur en plaatje Overflow (volgende dia) Dit doe je met de Property
Inspector (properties)
![Page 17: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/17.jpg)
Overflow Te gebruiken als de inhoud van de layer groter
is dan de layer
Visible: layer past zich aan inhoud aan
Hidden: layer blijft even groot (inhoud die te groot blijft onzichtbaar)
Scroll: layer krijgt altijd schuifbalken
Auto: alleen schuifbalken als de inhoud groter is
![Page 18: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/18.jpg)
Converteren naar een tabel Oudere browsers kunnen layers niet
lezen. Kies Modify, dan Convert, dan
Layers to Table: Klik op most accurate Klik een vinkje bij Use Transparant GIFs Uitlijnen: dan Center on Page Geen overlap; dan Prevent Layer
Overlaps
![Page 19: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/19.jpg)
Opdracht 10: eindopdracht (a)Werk aan de hand van layers de gele cellen uit en bekijk het resultaat via F12
Reisbureau
Bestemming
Duur Vervoer
Prijs
foto Belgie 3 dagen
Fiets 300
Naam: Spanje 15 dagen
auto 500
![Page 20: Les 3 Webdesign Toerisme](https://reader036.fdocuments.net/reader036/viewer/2022082916/54b4e2244a7959e3798b481a/html5/thumbnails/20.jpg)
Opdracht 11: eindopdracht(b)plaats de layers van de gele cellen in een tabel en bekijk dit via F12 (tip: lijndikte tabel 0)
Reisbureau
Bestemming
Duur Vervoer
Prijs
foto Belgie 3 dagen
Fiets 300
Naam: Spanje 15 dagen
auto 500