Les 2 Webdesign Toerisme

529 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
529
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Les 2 Webdesign Toerisme

  1. 1. Indelen van de Webpagina <ul><li>Waarom????: </li></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>Omdat je de beperkte schermruimte efficiënt moet te gebruiken. </li></ul></ul><ul><ul><li>Om op en neer springende pagina’s te vermijden. </li></ul></ul><ul><ul><li>Omdat het scherm niet volgepropt mag lijken. </li></ul></ul>
  2. 2. 3 manieren <ul><li>Een webpagina kun je 3 manieren indelen: </li></ul><ul><ul><li>Tabellen </li></ul></ul><ul><ul><li>Layers </li></ul></ul><ul><ul><li>Frames </li></ul></ul>
  3. 3. Tabellen <ul><li>Positioneren: </li></ul><ul><ul><li>van de elementen (teksten, plaatjes, kleur,enzovoorts) </li></ul></ul><ul><ul><li>Voorkomt springers of dancers </li></ul></ul><ul><li>Onderhoud: </li></ul><ul><ul><li>handig om de site bij te kunnen werken </li></ul></ul><ul><li>Eenvoudig: </li></ul><ul><ul><li>te bewerken </li></ul></ul>
  4. 4. Layers <ul><li>Layers zijn zwevende lagen (cellen) </li></ul><ul><li>Overal te plaatsen </li></ul><ul><li>Kun je zelfs laten bewegen (mbv een timeline via een guide-line) </li></ul><ul><li>Zichtbaar of onzichtbaar </li></ul><ul><li>Teksten, plaatjes, kleur etc. </li></ul><ul><li>Oude browsers kunnen ze niet zien!!! </li></ul>
  5. 5. Frames <ul><li>Frames (lijsten) tonen in een pagina meerdere pagina’s </li></ul><ul><li>Ieder frame is een bestand (pagina) </li></ul><ul><li>Ieder frame is los te bewerken </li></ul><ul><li>Nadelig bij oude browsers en zoekmachines </li></ul><ul><li>Vaak gebruikte frames indeling: </li></ul><ul><ul><li>Kop of topframe; titel </li></ul></ul><ul><ul><li>Navigatieframe; knopjes </li></ul></ul><ul><ul><li>Inhoudsframe; mainFrame (teksten etc) </li></ul></ul>
  6. 6. Rijen, kolommen en lijnen <ul><li>Row: </li></ul><ul><ul><li>horizontale rij met cellen (  ) </li></ul></ul><ul><li>Column: </li></ul><ul><ul><li>verticale rij met cellen (kolom) </li></ul></ul><ul><li>Width: </li></ul><ul><ul><li>de schermbreedte (%) </li></ul></ul><ul><li>Border: </li></ul><ul><ul><li>Lijndikte (0 = onzichtbaar) </li></ul></ul>
  7. 7. Voorbeeld: tabel 5 kolom 4 kolom cel 3 kolom 2 kolom 1 rij 1 rij 1 rij 1 k/r
  8. 8. Voorbeeld: website <ul><li>We kijken nu even naar een website waarin frames en tabellen zijn gebruikt </li></ul><ul><li>www.campingprecaroline.nl </li></ul>
  9. 9. Opdracht 1: tabel maken <ul><li>Voeg een tabel in in het werkblad (= documentvenster): </li></ul><ul><ul><li>Insert </li></ul></ul><ul><ul><li>Table </li></ul></ul><ul><ul><li>Stel in; </li></ul></ul><ul><ul><ul><li>Row; 4 </li></ul></ul></ul><ul><ul><ul><li>Column: 5 </li></ul></ul></ul><ul><ul><ul><li>Width: 50% </li></ul></ul></ul><ul><ul><ul><li>Border: 5 </li></ul></ul></ul>
  10. 10. Opdracht 2: opmaak <ul><li>Voeg in de tabel in: </li></ul><ul><li>Rij 1: </li></ul><ul><ul><li>in cel 1: kleur rood </li></ul></ul><ul><ul><li>in cel 2: typ een korte tekst in </li></ul></ul>
  11. 11. Opdracht 3: opmaak <ul><li>Verander in de tabel: </li></ul><ul><li>Rij 1: </li></ul><ul><ul><li>in cel 1: kleur blauw </li></ul></ul><ul><ul><li>in cel 2: typ: dit is cel 2 </li></ul></ul><ul><li>Rij 2: </li></ul><ul><ul><li>in cel 1: kleur rood </li></ul></ul><ul><ul><li>in cel 2: typ: dit was wit </li></ul></ul>
  12. 12. Opdracht 4: selecteren <ul><li>Plaats een tabel met 3 rijen en 3 kolommen op het werkblad </li></ul><ul><li>Ga op de cel staan en klik met de muis </li></ul><ul><li>Klik meerdere cellen aan </li></ul>
  13. 13. Opdracht 5; selecteren <ul><li>Meerdere onafhankelijke cellen selecteren: </li></ul><ul><ul><li>Druk op de Ctrl-toets </li></ul></ul><ul><ul><li>Ga met muis op de cel staan en klik </li></ul></ul><ul><ul><li>En klik op de andere cellen die je wilt selecteren </li></ul></ul>
  14. 14. Opdracht 6: splitsen <ul><li>Selecteer de cel </li></ul><ul><li>Ga naar Modify (= aanpassen) </li></ul><ul><li>En dan Table </li></ul><ul><li>Klik op Split Cell </li></ul>
  15. 15. Opdracht 7: samenvoegen <ul><li>Selecteer de cellen </li></ul><ul><li>Ga naar Modify </li></ul><ul><li>Kies Table </li></ul><ul><li>Klik op Merge Cells </li></ul>
  16. 16. Opdracht 8: invoegen <ul><li>Klik binnen de cel waar je een rij of een kolom wilt invoegen; </li></ul><ul><ul><li>Kies modify </li></ul></ul><ul><ul><li>Dan Table </li></ul></ul><ul><ul><li>Dan insert Row (rijen) </li></ul></ul><ul><ul><li>Of Insert Columns </li></ul></ul><ul><ul><li>Maar Insert Rows or Columns kan het ook (dan kun je opgeven hoeveel) </li></ul></ul>
  17. 17. Tabeleigenschappen <ul><li>Nadat een tabel is gemaakt kunnen we </li></ul><ul><li>de eigenschappen aanpassen zowel voor </li></ul><ul><li>de gehele tabel als de afzonderlijke </li></ul><ul><li>cellen. </li></ul><ul><li>Dit doe je met de Property Inspector (properties) </li></ul>
  18. 18. Property Inspector <ul><li>Gebruiken voor de hele tabel bij: </li></ul><ul><ul><li>Links, midden(centreren) of rechts uitlijnen van de tabel op de pagina </li></ul></ul><ul><ul><li>Achtergrondkleur, achtergrondplaatjes in de tabel te plaatsen </li></ul></ul><ul><ul><li>Lijndikte en kleur van de tabel </li></ul></ul>
  19. 19. Property Inspector <ul><li>Gebruiken voor het aanpassen van een of meer cellen bij: </li></ul><ul><ul><li>Het horizontaal (Horz) en verticaal (Vert) uitlijnen van de celinhoud. </li></ul></ul><ul><ul><li>Breedte(W) en hoogte (H) van de cel </li></ul></ul><ul><ul><li>Achtergrond -kleur en -plaatje </li></ul></ul><ul><ul><li>Kleur van de lijnrand van de cel of cellen </li></ul></ul>
  20. 20. Eindopdracht: reisinfo <ul><li>Nieuwe lege pagina </li></ul><ul><li>Via Page Properties een lichte achtergrond kleur </li></ul><ul><li>Tabel in voegen </li></ul><ul><li>5 kolommen </li></ul><ul><li>2 rijen </li></ul><ul><li>Breedte 85% </li></ul><ul><li>Lijndikte zelf bepalen </li></ul><ul><li>Let op welke cellen je straks moet splitsen </li></ul><ul><li>Naam reisbureau </li></ul><ul><li>Foto invoegen in kolom 1 </li></ul><ul><li>Bestemming (2 stuks) </li></ul><ul><li>Duur (2 varianten) </li></ul><ul><li>Vervoer (2 mogelijkheden) </li></ul><ul><li>Prijs (2 mogelijkheden) </li></ul><ul><li>Tabel/cellen in andere kleur dan pagina. </li></ul><ul><li>Tabel centreren en celinhoud links of rechts uitlijnen. </li></ul>
  21. 21. Mogelijke oplossing 500 auto 1 week Spanje 300 fiets 1 dag België Kosten? Hoe? Lang? Naar Reisje

×