Indelen van de Webpagina (vervolg) les 3

Waarom????:

juiste en dezelfde plaats efficiënt. voorkomt springers of dancers. voorkomt volproppen.

3 middelen om in te delen Een webpagina kun je met 3

middelen indelen:

Tabellen

Layers

Frames

Tabellen

Positioneren

Onderhoud

Eenvoudig

Te converteren naar layers

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.

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!!!

Voorbeeld: Layer (laag)

Voorbeeld: website

We kijken nu even naar een website waarin ook layers zijn gebruikt:

www.hetnet.nl

Opdracht 2: een layer (laag) maken

Voeg een layer in (op het werkblad [=documentvenster]):

Insert Layer

Of via de werkbalk met drag and drop

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)

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

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

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

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

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)

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)

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)

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

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

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

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