Administreres af:

Du vil i denne del tilføje en allerede eksisterende side samt gøre indholdet mere dynamisk ved at tilføje rollovers og animationer.

1. Kopier den eksisterende side

* Brug Windows Stifinder til at kopiere filen Features.html fra Tour\TStart\Pages mappen og til Tour\Matchbox\Pages mappen.

Da du tidligere trak indholdet fra Sample.html over i dit WEB-sted opdaterede GoLive selv de henvisninger, som var på siden, så de stadig refererede til de oprindelige placeringer. Derfor skulle du manuelt omlinke henvisningerne til de indsatte billeder.

Denne gang, da du har kopieret hele filen Features.html fra en mappe til en anden, er henvisningerne ikke blevet opdateret. I stedet leder dokumentets henvisninger efter billederne i Media mappen et niveau over den nuværende placering. Da billederne imidlertid er placeret indenfor WEB-stedets egen mappestruktur i en mappe parallel med den aktuelle (i media mappen), vil GoLive selv lænke henvisningerne korrekt, når du opdaterer projektet.

2. Åbn mappen Pages i site vinduet.

3. Klik på opdateringsknappen i værktøjslinien for at opdatere site vinduet med den nye side. Den nye side Features.html vil nu også blive vist i site vinduet. Bemærk at der i Site vinduet fremkommer en lille grøn "Bug" - et skadedyr - ud for Features.html filen. Bug'en fremkommer fordi der er fejl i linkningen på siden. Denne fejl skal vi nu have fundet.

4. Dobbeltklik på Features.html i site vinduet for at åbne siden, så du kan redigere i den. Når siden er åbnet, klikker du på den tilsvarende grønne Bug i menulinien, hvorefter du gennemscroller siden for at finde den meget fremtonende røde markering, som omkranser billedet Questions.gif.

5. Ret linken fra at pege på Answers.html til at pege på questions.html og se den røde markering i link feltet forsvinde, når du gennem siden.

Den røde markering omkring billedet forsvinder først, når du har fravalgt og derefter genvalgt Bug'en.

Opret rollovers

Du skal nu til at oprette rollovers på din hjemmeside. Rollovers er objekter, som skifter udseende, når du fører musemarkøren op over dem eller klikker på dem.

For at spare dig tid, er der allerede reserveret plads til en billedknap fra paletten og et billede af en lukket tændstikæske er indsat på pladsen. Du kan selv finde Rollover ikonet i Objects palettens andet faneblad Smart. Det er her det tredie ikon.

1. Klik for at vælge billedet af tændstikæsken.

Noter dig, at inspectoren skifter til Rollover (knap) Inspector. Noter også, at Main ikonet er valgt i button inspector. Herved vises at pladsen er lænket til Box.gif, det billede som skal vises, når musen er udenfor billedet.

Du skal nu til at vælge det billede som skal fremkomme, når brugerens mus føres op over knappen.

2. Klik på Over ikonet i Rollover inspectoren. Klik derefter i feltet ved siden af tekstfeltet for at aktivere Point and Shoot knappen.

3. Indsæt billedet Boxopen.gif fra media mappen i site vinduet.

Du er i layout view, hvorfor det stadig er det billede, som skal vises når musen er udenfor knappen, som du ser. Button inspectoren viser dog det korrekte billede for, når musen er over knappen.

4. Gem dit arbejde.

5. Vælg en browser fra din browsermenu i værktøjslinien. Browseren vil vise Features.html og du kan teste din nyindsatte rollover.

6. Gå tilbage til Features.html i GoLive.

Animering af siden

HTML 4.0 understøtter Dynamic HyperText Markup Language (DHTML), som giver dig mulighed for at indføje flytbare, stakkede lag kaldet floating (flydende) bokse. Boksene kan bevæge sig rundt på din hjemmeside og dermed animere den.

NOTE: Kun browsere der understøtter HTML 4.0 vil kunne vise din side korrekt. Det betyder, at du ikke kan være sikker på en korrekt gengivelse i browserversioner 3.x og tidligere. Siden vil ikke kunne gengives korrekt i disse browsere og vil indsætte indholdet af lagene i den rækkefølge de indlæses.

For at spare dig tid, er der allerede reserveret plads til et flydende objekt, ved at der er oprettet en Floating box fra paletten, hvori der er indsat et billede. Du kan selv finde ikonet for den flydende boks i Objects palettens første faneblad som det tredie ikon.

Du skal nu selv tilføje den bevægelse som billedet skal udføre, når brugeren ser på din hjemmeside.

1. Klik på et hjørne af den flydende boks for at vælge den. Vær sikker på, at det er den flydende boks og ikke billedet du har valgt. Den flydende boks kan vælges ved at du fører musen op over kanten hvor billedet er. Når musen skifter til en hånd, der peger til venstre, kan boksen vælges. Peger hånden opad, vil det være billedet du vælger.

Inspectoren skifter til at være Floating Box inspector.

2. Klik på optageknappen (record) i floating box inspectoren for at begynde registrering af optagelsen.

3. Bevæg musen ind over venstrekanten af den flydende boks. Når musen igen bliver til den venstrepegende hånd, kan du flytte boksen rundt på din hjemmeside. Optagelsen stopper, når du igen slipper musen. Herunder er skitseret, hvordan du kan bevæge boksen fra punkt til punkt.

4. Gem dit arbejde.

5. Klik på fanebladet Preview, for at se resultatet af din optagelse. Du kan genindlæse dokumentet ved at højreklikke i Preview feltet, men udenfor et billede, og vælge opdater fra menulisten.

6. Når du er færdig, vælger du igen fanebladet Layout.

Hvis du vil eksperimentere med opsætningen af den skabte animation af laget, kan du vælge knappen for DHTML Timeline Editor øverst i højre hjørne af layout vinduet.

7. Luk siden helt.