Jens Chr. Stenz Justesen

ProgramoversigtForrige programNæste program

Program 17/10 - Netmedieworkshop

9.30-10.00

Tabeller
Tabeller til styring af layout
Eksempel med tabeller

10.00-10.50

Øvelse 1: Tabeller

10.50-11.00 Pause
11.00-11.30 Brug af links på websider, konventioner?, link-tilstande.
Typer: Relative og absolutte, 'named anchors'.
'Targets'.
Test af links!
Fejl i links- maskinkoder mm.
11.30-12.00

Øvelse 2: Forsøg med links og 'targets'.

12.00-13.00 Frokost
13.00-14.30 Diskussion af K-planer

 


Øvelse 1:Tabeller

Redesign af netside

Tabeller kræver en lille smule erfaring (og tålmodighed) at arbejde med i Dreamweaver. Derfor skal man prøve sig lidt frem, for at lære at håndtere dem. I den første øvelse skal I se på et skærmbillede fra en side, hvor der er brugt tabeller og så prøve at genskabe siden i html med Dreamweaver.

1. Åben siden med tabeldesign. Find ud af hvordan siden er designet med tabeller. Genskab siden i Dreamweaver!

Der er brugt nogle billeder på siden og de kan downloades her:

Tips til øvelse 1:

  1. Kig godt på billedet og diskuter forskellige muligheder for hvordan man kan designe siden med en tabel.
  2. Husk også på at man kan justere indholdets placering i en tabelcelle.
  3. Justering af teksten omkring billeder har ikke noget med tabellen at gøre, det er normal 'højre'- og 'venstre'-justering.

Se hvordan andre har designet en netside

Hvis man støder på et interessant websted på WWW og gerne vil se hvordan designerne har kreeret siderne kanman bruge Dreamweaver til at afkode designernes tricks - hvordan de har opbygget siden. Man kan jo så overveje at bruge deres kode eller bare lade sig inspirere.

2. Åben Phrenicea hjemmeside i en browser. Gem siden på din harddisk og åben filen i Dreamweaver. Se hvordan de har brugt tabeller til at styre layoutet på siden.

Øvelse 2: Lænker og targets

1. Kopier URL-adressen fra denne side.

2. Åben et nyt dokument i Dreamweaver, skriv noget tekst, marker teksten og indsæt linket du kopierede.

3. Gem dokumentet og afprøv linket i en browser. Fungerer det eller fungerer det ikke? (Der er flere måder at indsætte links!)

- Hvis linket ikke fungerer, så prøv at finde ud af, hvad årsagen er.
- Hvis linket fungerer, så prøv at indsætte linket på en anden måde

4. Når du har fået linket til at fungerer, så prøv at ændre i Target-egenskaben til '_self' og '_blank' for linket (iproperties-vinduet) og afprøv i browseren. Hvad er forskellen på de to?

 


Litteratur
Fleming, J. Designing Web Navigation - Five tips for planning your space. 1998
* Nielsen, J. Is Navigation Useful?. Alertbox.com, 2000
* Lynch, Patrick J., and Sarah Horton. Web Style Guide - Basic Design Principles for Creating Web Sites. New Haven and London: Yale UP. 2002.- Interface Design og Page Layout.
Nielsen, J. Guidelines for Visualizing Links. Alertbox.com, 2004
 
Vejledninger
Oversigt over tabelegenskaber
Elementære HTML-tags - Links og Tables (viser tags i forbindelse med brug af tabeller)
.
Liste over HTML-elementer - Links og tables (viser tags i forbindelse med brug af tabeller).


* Fra den obligatoriske litteratur