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. Skift mellem de enkelte vinduer kan foretages ved at vælge menuknappen Select Window:

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 5" 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 - når du anvender layout gitteret. 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) kan du føre musen ind over objektets kanter. Når markøren bliver til en pil flankeret af en mørk kvadrat, 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 lille mørk 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.

Som standard bør du dog nok idag holde dig til en mindste skærmstørrelse på 800 x 600 punkter.

NOTE:
I GoLive for Windows er standardstørrelsen for dokumentvinduerne 620 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 fanebladet Color fra Objects Paletten.

Farvepaletten har adskillige farveknapper der hver især repræsenterer de forskellige farveområder. Den mest anvendte 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 midt 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: Farveområde knapper.

C: Swatches - farveprøver.

5. Træk nu farven fra previewområdet til venstre i 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 Window > 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.

Du kan få det aktuelle site vindue frem som foreste vindue ved at føre "point and shot" tråden op over ikonet Select Window i menubaren, hvis det skulle være skjult af de øvrige åbne viner, du arbejder med.

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.

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.

9. Fra Window-menuen vælger du nu Align.

Fra en position bag Inspectoren fremkommer der nu en ny dialogboks, hvorfra det er muligt at positionere de valgte billeder indbyrdes. Hvis Align i forvejen er valgt kan du få den synlig ved at du vælger Align to gange eller ved at trykke Ctrl+8 to gange.

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 nu at centrere dine billeder samt at give dem fælles bundlinie, ved at du vælger de respektive ikoner i Align dialogen.

11. De mest benyttede muligheder kan du også finde som ikoner i værktøjslinien, når du har vlagt flere ensartede objekter.

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 fjerde 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.