Administreres af:

Du starter dit design ved at åbne filen index.html angivet i site vinduet.

1. Åben hjemmesiden index.html:

Vælg Matchbox mappen i site vinduet. Dobbeltklik på index.html.

! Note: For lettere at kunne komme til de forskellige vinduer og paletter i Adobe GoLive kan du placere dokument vinduet oveni site vinduet og føre paletterne ud til siden. Ved at dobbeltklikke på menulinierne kan du dokke paletterne ud mod kanten. Paletterne kan igen gøres flydende ved at dobbeltklikke på dobbeltstregerne i paletternes top. Skift mellem de enkelte vinduer kan foretages ved at vælge menuknappen Toggle Between Windows:

Det første du skal gøre er at ændre titlen på hjemmesiden. Dette er den tekst som fremkommer i browserens titellinie, når siden vises.

2. I dokumentvinduet markerer du teksten "Welcome to Adobe GoLive" og erstatter den derefter med den rigtige titel: First Strike Matches.

Layout og tilføjelse af tekst

Et af de objekter som du muligvis vil bruge ofte er layout gitteret (layout grid). Ved at anvende layout gitteret på hjemmesiden, kan du placere andre objekter på siden med en nøjagtighed på en pixel. Det er ikke nødvendigt, at layout gitteret anvendes i hele sidens længde. Du kan også selv vælge om du vil anvende layout gitteret fra side til side.

Gitteret tilpasses automatisk længden af de objekter du placerer indeni det. Du kan selv ændre på størrelsen af gitteret ved at vælge det og derefter trække i håndtagene til gitteret har den ønskede størrelse. Layout gitteret er blot eet af de objekter, som du har mulighed for at vælge i paletten.

1. Hvis nødvendigt, vælg View > Palette fra værktøjslinien. Sørg for at Basic fanebladet er valgt.

2. Træk layout gitteret fra paletten og ud i dit dokument.

! Note: Hvis du holder musen stille over fanebladene i paletten, vil der komme en lille boks, som viser navnet på det pågældende område. Navnet står lige ved siden af musen. Navnet på de enkelte ikoner indenfor et fanebladsområde vises nederst i paletten.

Det er muligt at indskrive tekst og indsætte billeder direkte på den hjemmeside du arbejder med i Adobe GoLive. Her skal du imidlertid først placere en boks kaldet en tekst layout boks. Tekst layout boksen skal placeres i layout gitteret. Derefter indskrives teksten i tekst layout boksen og du kan herefter flytte tekst layout boksen rundt på gitteret og tilpasse boksen i størrelse for at ændre udseendet af din side.

3. Træk tekst layout boksen fra paletten og til venstre side af dit layout gitter.

4. For at ændre positionen af tekstboksen (eller et hvilket som helst andet objekt) skal du først fravælge objektet. Derefter fører du musen op over objektet. Når markøren bliver til en hånd, kan du flytte med objektet.

NOTE:
Du kan også vælge objektet og flytte det en pixel af gangen ved at holde Ctrl+Alt tasterne nede samtidig med at du bruger piletasterne.

5. Klik indenfor tekst boksens område og skriv "Welcome to First Strike Matches."

6. Tryk på retur-tasten for at skifte til nyt tekstafsnit og skriv "For answers to your burning questions about our matches, use the links below."

På tilsvarende måde som du anvender et tekstbehandlingsprogram, kan du også redigere og formatere teksten i GoLive.

7. Marker teksten "Welcome to First Strike Matches." i tekst layout boksen.

8. På værktøjslinien klikker du på centrer symbolet og på symbolet for fed skrift (Bold).

Vælg derefter font størrelse 6 fra font size rullepanelet.

9. Hvis du vil ændre størrelsen af tekst layout boksen (eller andre objekter i GoLive), kan du føre musen til et af de håndtag som er på objektet. Når musen skifter form til en hul (ikke sort) pil, kan du trække i håndtaget med venstre musetast indtil boksen har den størrelse du ønsker.

! NOTE: Når du designer hjemmesider, bør du tilpasse dine objekter efter brugerens skærm. Da du ikke kender størrelsen af denne, kan du vælge at tilpasse efter en 14" skærm, som er den mindst mulige størrelse. Nederst til højre i dokumentvinduet kan du indstille bredden af dit dokumentvindue. 580 pixel svarer til standardstørrelsen af en 14" skærm. På denne måde kan du hjælpe dig selv til ikke at anvende bannere og lignende, som er for brede.

NOTE:
I GoLive for Windows er standardstørrelsen for dokumentvinduerne 520 pixel. Du kan selv ændre dette efter behov.

I løbet af dit arbejde bør du for din egen skyld sikre dig ved at gemme dine data med jævne mellemrum.

10. Vælg File > Save eller tryk Ctrl+S.

Tilføje farver

Du kan nu tilføje farve til teksten og til baggrunden af dokumentet.

1. Marker teksten "Welcome to First Strike Matches."

2. Hvis nødvendigt, vælg View > Color Palette fra værktøjslinien.

Farvepaletten har adskillige faneblade der hver især repræsenterer de forskellige farveområder. Det mest anvendte faneblad er for de såkaldte WEB-sikre farver (browser safe). Det er en god ide at anvende WEB-sikre farver, da de sikrer at dine farver ikke virker grumsede eller urene på platforme, der ikke understøtter andre farver.

3. Vælg WEB-sikre farver på farvepaletten.

4. Vælg din farve ved at bruge farveprøverne til venstre i paletten eller ved at anvende rulleboksen til højre eller ved at indskrive farvekoden i boksen for value (værdi). Find/vælg/skriv farven med værdien #FF6633.

A: Preview - se den valgte farve her.

B: Faneblade.

C: Swatches - farveprøver.

5. Træk nu farven fra previewområdet i toppen af farvepaletten og ind over den markerede tekst. Klik derefter udenfor det markerede område, for at se dit valg.

Tilføj herefter baggrundsfarven på siden.

6. Find/vælg/skriv farven med værdien #66CCCC.

7. Træk nu farven fra previewområdet og op over "papir"-symbolet til venstre for teksten i dokumentvinduet.

8. Gem dit arbejde. Vælg File > Save eller tryk Ctrl+S.

Indsætning af billede

For at gøre din hjemmeside mere visuelt attraktiv, kan du bruge billeder i dit design. I denne del af gennemgangen, vil du komme til at indsætte tre billeder på siden. For hvert billede skal der først reserveres en plads til billedet og derefter lænkes det aktuelle billede til den reserverede plads.

Standard billedformater til hjemmesider er .GIF (Graphical Interchange Format) og .JPG (Joint Photographic Experts Group - JPEG). GIF anvendes typisk til gengivelse af stregtegninger og tegneserielignende billeder og .JPG anvendes til fotografier og andre billeder med mere end 256 farver.

Først skal du reservere plads til det første billede.

1. Træk billedikonet fra paletten og placer det indenfor layoutgitteret og til højre for den indsatte tekst layout boks. Hvis ikke der er tilstrækkelig plads, kan du markere layoutgitteret og derefter ændre størrelsen ved at trække i håndtagene.

Adobe GoLive indeholder en palette kaldet Inspector, som beskriver indholdet/sammenhængen til det valgte objekt. Paletten gør det lettere for dig at tilpasse objekterne uden at du skal bruge værktøjsliniens menupunkter. Du skal bruge inspectoren nu, hvor du skal arbejde med den reserverede billedplads.

2. Hvis ikke inspectoren vises, skal du vælge View > Inspector fra værktøjslinien.

Da du har valgt at reservere plads til et billede, fremtræder inspector som billedinspektor. Kilden til billedet angives i linien kaldet Source og i feltet står der endnu "Empty Reference!", da du ikke har valgt et billede.

3. Fra Point and shoot knappen i inspectoren kan du trække en link fra det billede du skal bruge. Ved at holde musen stille over et område, skifter det aktive vindue til det vindue, som du peger på. Find Matchbox.gif i media mappen i Matchbox site vinduet. Alternativt kan du vælge knappen browse, for at skanne gennem komputeren og finde frem til dit billede.

Du kan se hvilket billede du vælger, da filnavnet på billedet bliver markeret, når du holder musen over det.

Når du slipper musen over det valgte billede, vil billedet komme til syne på hjemmesiden og source-linien vil gengive sti- og filnavn frem til billedet.

4. Hvis du har brug for at ændre størrelsen på layout gitteret, kan du først vælge det og derefter kan du ændre på egenskaberne, der vises i inspector vinduet. Vær opmærksom på, at du skal opdatere til de nye egenskaber ved at trykke på den lille krøllede pil til højre for det felt du redigerer - hver gang og ved hvert felt!

5. Træk to ikoner mere fra paletten og placer dem ved siden af hinanden nedenfor de allerede indsatte objekter og i nærheden af kanten. Du kan flytte sidens objekter i forhold til hinanden, hvis de er i vejen.

6. Vælg den reserverede billedplads til venstre og brug derefter link inspectoren til at finde billedet Features.gif i site vinduet.

! NOTE: Hvis du holder Ctrl+Alt tasterne nede, kan du trække direkte fra pladsholderen i dokumentet og ud til billedet i site vinduet. Du opnår herved samme effekt som ved Point and Shoot.

7. Vælg den sidste billedholder og lænk til billedet Questions.gif.

Du skal nu positionere de to billeder i forhold til hinanden.

8. Shift-klik for at vælge begge billeder.

Inspectoren bliver nu til en Multiselection Inspector.

9. Såfremt billederne er positioneret vandret/lodret skævt i forhold til hinanden, vil du få en eller flere muligheder for at kunne positionere dem.

10. Vælg Special fanebladet i multiselection inspectoren og klik offset til i den horisontale del. Sæt offset til 60 pixel og klik på den knap der markeres.

11. Klik på centreringsknappen på værktøjslinien for at centrere begge billeder samtidig og i forhold til hinanden.

12. Gem dit arbejde.

Tilføje nøgleord

Med Adobe GoLive har du mulighed for at tilføje nøgleord til din hjemmeside. Teksten bliver ikke vist på selve siden men anvendes af søgemaskinerne til at katalogisere din hjemmeside.

1. Klik på trekanten ved siden af "papir"-ikonet til venstre for titelfeltet øverst i dokument vinduet.

2. Vælg fanebladet Head fra paletten - det tredie faneblad.

3. Træk Keywords ikonet fra paletten og over til den nu åbne head-sektion af din hjemmeside.

Inspectoren skifter nu til keywords inspector.

4. I bunden af inspectoren kan du indskrive dine stikord. Skriv "First Strike Matches".

5. Tryk på en af knapperne for opdatering eller tryk på Enter på tastaturet.

6. Tilføj flere ord eller vendinger, hvis du ønsker det. Vær opmærksom på, at hver indtastning fremstår som et enkelt søgekriterie, for søgemaskinerne.

7. Når du er færdig, klikker du igen på trekanten øverst i dokument vinduet for at lukke head-sektionen af hjemmesiden.

8. Gem dit arbejde.