Cyberstudio.dk

SeaMonkey er både en browser (beslægtiget med Netscape og Firefox) og webeditor. Når du åbner SeaMonkey er det som browser.

For at begynde at designe en ny webside vælger du 
File >> New >> Composer Page

For at redigere en eksisterende side
File >> Edit page (Genvejstast: Ctrl. E).

Vejledning i anvendelse af tabeller til strukturering af en websides indhold

Websites indhold struktureres ved at indsætte tabeller, der strukturerer websitet i regioner. (Det er også muligt at anvende CSS).

Struktur med fem regioner
I det følgende struktureres et website med fem regioner:
Øverst og nederst på sitet er hhv. Header-region og Footer-region.
Hovedindholdet er struktureret i tre regioner: (I eks. herunder markeret med grønt).
Left sidebar (til menu), Content (til indhold) og Right sidebar (til nyheder m.m.).

Illustration af website med fem regioner
Eksempel på tabelstruktur der strukturerer websitet i fem regioner.
Tabelbredden er sat til 960 pixels, for at optimere til en skærmopløsning på 1024 px.
Først er der indsat en tabel med tre rækker og en kolonne.
I den indsatte tabels anden række er indsat en ny tabel, der består af en række og tre kolonner. I hver af de tre kolonner indsættes en tabel til hhv. menu, indhold og nyheder.

Instruktion i konstruktion af website med fem regioner

Der indsættes 5 tabeller, den 1.tabel strukturerer hele siden, den 2.tabel strukturerer hovedindholdet (i ovenstående eksemple markeret med grønt).
de sidste tre tabeller strukturer hhv. menu, indhold og nyheder.

Åben Seamonkey
Vælg file/new/composer page

Før vi starter med indholdet skal filen gemmes.
Klik på file/save as, vælg den rigtige mappe (mappenavn: web), at placere filen i,
skriv titel (f.eks. dit navn eller firmanavn) og klik OK, derefter skrives filnavn (f.eks.: test eller skabelon), klik på Gem.
(Undgå æ, ø og å, mellemrum og store bogstaver i filnavne).

Indsættelse af den 1. tabel
Klik på table/insert table
Sæt rows til 3, columns til 1, width til 960 pixels og border til 0.
Klik på advanced edit og sæt værdierne for cellspacing til 0 og cellpadding til 0.
(Værdierne for cellspacing og cellpadding angives ved at klikke på hhv cellspacing og cellpadding og derefter skrive værdien 0 i det nederste felt: Value).
Klik OK
For at centrere tabellen, vælg table >> select table
Klik på align center ikonet.

Indsættelse af den 2. tabel
For at dele hovedindholdet i tre kolonner/spalter indsættes en tabel med tre kolonner i den anden række.
(Hovedindholdet er markeret med grønt i ovenstående eksempel).

Placer curseren i den 2.række
Klik på table/insert table
Sæt rows til 1, columns til 3, width til 960 pixels og border til 0
Klik på advanced edit og sæt cellspacing til 0 og cellpadding til 0
Klik OK.

Bredden i de tre kolonner skal nu angives.
Placer curseren i den første celle/kolonne
Vælg table>>table proporties>>cells, sæt flueben ved width og angiv 200 pixels.
Ved content alignment sættes flueben ved vertical og top vælges.
(Fordi indholdet almindeligvis placeres øverst på siden).
Klik OK.

Proceduren gentages ved de to næste celler og deres bredder sættes til hhv. 560 pixels og 200 pixels. (Så den samlede bredde er 960 pixels).

Der skal nu indsættes en tabel i hver af de tre celler/kolonner:
til at strukturere hovedindholdet i: menu, indhold og nyheder:

Indsættelse af den 3. tabel, beregnet til menu (menu-tabellen)
Placer curseren i den venstre celle/kolonne i den sidst indsatte tabel.
Klik på table >> insert table
Sæt rows til 10, columns til 1, width til 180 pixels og border til 0
Klik på advanced edit og sæt cellspacing til 1 og cellpadding til 5
Klik OK.

Indsættelse af den 4. tabel, (Content/indholds-tabellen):
Placer curseren i den midterste celle/kolonne i den sidst indsatte tabel.
Klik på align center.
Klik på table/insert table
Sæt rows til 1, columns til 1, width til 540 pixels og border til 0
Klik på advanced edit og sæt cellspacing til 1 og cellpadding til 5
Klik OK.

Indsættelse af den 5. tabel, (nyhedstabellen)
Kopier menu-tabellen og indsæt den centreret i den 3. celle/kolonne.

Klik på save.

Der findes flere attributes
Same Window TARGET="_top" (default, dvs. man behøver ikke at indsætte target).
New Window = TARGET="_blank"

Når man arbejder med framesetfiler kan man også anvende:
Parent WindowTARGET ="_parent"
Same frame TARGET ="_self"

Indsættelse af et baggrundsbillede på hele siden
Der er bedst at indsætte med CSS, men det kan også gøres ved at klikke på
Format menu >> Page Colors and Background og vælge et baggrundsbillede.

Indsættelse af et baggrundsbillede i en tabel: 
<table border="" cellpadding="" cellspacing="0" width="" background="bg-tabel.gif">

Indsættelse af et baggrundsbillede i en tabelcelle:
<td background="bg-celle.gif">

Baggrundsbilledet skal være i gif-format.

Indsættelse af bogmærke (link til et sted på den samme side)
Først indsættet man et anker på det sted på siden man vil linke til
Placer curseren hvor ankeret skal være og klik på Insert >>Named Anchor.
Giv ankeret et sigende navn, eller kald det f.eks.anker1.

For at linke til ankeret klikker man på Insert >> Link
I det tomme felt hvor man kan vælge hvilke fil man vil linke til, skal man klikke på den lille trekant til højre i feltet, og derefter vælge det anker man vil linke til.
Der er en lille fejl i programmet, så man skal indsætte et bogstav og fjerne det igen før man kan klikke på OK.