Grundkurs i GoLive

1. Inledning

Den här sidan beskriver grunderna i hur man använder programmet GoLive. Du kommer att få göra en enkel hemsida, som du sedan själv kan förbättra.

För att du skall hänga med i det som sägs bör du känna till lite om hur datorn fungerar och hur man skriver HTML-kod. Ett förslag är att du först läser de teoretiska momenten på sidorna om webdesign, som du hittar på min webresurs.

GoLive är ett program med vilket man kan göra allt ifrån enkla hemsidor till avancerade multimediaproduktioner. Det är ganska nytt på marknaden. Så sent som 1998 fanns nämligen inget tillförlitligt, grafiskt program som skrev egen och någorlunda korrekt HTML-kod. De få program som fanns var tämligen undermåliga och gjorde så många fel, att de i praktiken var oanvändbara.

1998 köpte Adobe programmet GoLive från företaget Cyberstudio och började utveckla det för både Mac och Windows. Cyberstudios version hade bara funnits för Mac. När version 4 släpptes under slutet av 1999 var det den första versionen som klarade av att skriva en någorlunda acceptabel kod.

Version 5 släpptes under hösten 2000, efter att ha varit försenat och buggigt i sina förhandsversioner. När jag började skriva den här texten hade jag bara tillgång till version 4 och därför är de flesta bilderna hämtade därifrån. Jag har sedan lagt till information om hur version 5 skiljer sig från 4 efter hand.

Vad tycker jag då om GoLive?

Jag är van att arbeta med ren HTML-kod och har därför haft svårt att anpassa mig till det grafiska gränssnittet. Efter att ha försökt använda programmet under en månad, gav jag till slut upp och övergick till att göra enklare produktioner i GoLive, t.ex rollovers, och sedan flyttade jag över koden från GoLive till min texteditor, där jag tog bort allt skräp och finjusterade sidorna.

Texthanteringen är dålig i GoLive och eftersom jag skriver mycket text får jag det svårt när jag vill styra radbrytningar och styckeindelningar själv. Dessutom lägger programmet till skräpkod överallt, t.ex paragrafelementen <p> och </p>, något som jag sedan fått gå in och ta bort för hand.

GoLive fungerar också dåligt på små skärmar, på t.ex bärbara datorer. På min 15-tums iMac måste jag använda upplösningen 1024x768 för att inte de olika paletterna skall skymma sidan. Men då blir alla kontroller så pyttesmå, att jag har svårt att se dem utan förstoringsglas.

Det skall sägas att det finns ett sätt att förminska paletterna. Om man drar dem till fönsterkanten, förvandlas de till små knappar. Bra för den som klarar av att hålla reda på vad de olika symbolerna på knapparna betyder... Jag saknar dock en enklare möjlighet att kunna växla mellan normalt visningsläge och förminskat, t.ex genom en enkel knapptryckning. Nu måste man dra paletten till fönsterkanten varje gång man vill ha den förminskad.

Däremot är programmet lättarbetat för den som mycket snabbt vill åstadkomma en enkel hemsida. Det är även bra på att hantera tabeller, placera bilder och på mer avancerade saker, som javascripts. GoLive innehåller också några andra mycket användbara finesser, t.ex stavningskontroll, både för svenska språket och HTML, samt länkkontroll. Sådana verktyg är en stor hjälp när man skriver mycket.

Tanken är att den här sidan skall ge dig en liten inblick i hur programmet arbetar och hur man gör en enkel sida. På sidan med fördjupningar har jag lagt in information om mer avancerade funktioner.

2. Menyraden

När du startar programmet blir du förmodligen till en början förvirrad över alla menyer, knappar och alternativ. Här tänker jag berätta lite om vad det är du ser. Jag börjar med menyraden.

File:
Denna meny kallas också Arkiv-menyn, eftersom den innehåller funktioner för att göra olika saker i "arkiven", t.ex spara och öppna. Man kan skapa en enstaka sida eller en hel sajt. Här hittar du även en FTP-funktion, som jag inte prövat, samt möjligheter att skriva ut.

Den här menyn liknar alltså väldigt mycket Arkiv-menyn i andra program och därför behöver vi inte säga så mycket om den här.

Edit:
Även Edit är ganska lik redigeringsmenyerna i andra program. Här kan du markera, kopiera, klippa och klistra. Här finns också en bra sök-ersätt-funktion, som hjälper dig att ersätta tecken och uttryck på fler än ett ställe i texten.

Går man in i Preferences (Inställningar) kan man göra olika grundinställningar för att på så sätt anpassa programmet efter eget huvud. Du får utforska denna del av programmet själv, eftersom det mesta blir ganska självklart efter hand du lär dig hur programmet fungerar.

Style (eller Type):
Som du själv märker kan du här göra olika inställningar för tecknen på sidan, t.ex göra den fet, byta teckensnitt, osv. Allt är bekant för den som behärskar grunderna i HTML.

Format (eller Type):
Under den här menyn kan du göra fler inställningar för tecknen. Du kan även justera den i bredd- och höjdled, samt skapa listor av olika slag.

Special:
Under Special kan man skapa länkar, förhandsvisa sidan i valfri webbläsare, skapa HTML-element inklusive attribut, osv. Det finns också en syntaxkontroll för HTML-koden och annat jag går igenom så småningom.

Site:
Den här menyn kompletterar de inställningar man gjort i Edit > Preferences (se ovan). Här kan man skapa länkar, öppna sidan i webbläsaren, skapa makron och redigera de förvalda HTML-alternativen i programmet. Jag kommer att beröra delar av den här menyn längre fram, men till en början kan man helt strunta i att den finns.

Design:
I GoLive 5 finns en ny meny som heter Design, som man använder för att administrera en sajt. Du kommer att få lära dig mer om hur man arbetar med en sajt längre fram.

Movie:
I GoLive 5 finns också en meny som heter Movie, som man använder för att lägga in multimediafiler på en webbsida. Du kommer att få lära dig mer om hur man arbetar med multimedia längre fram.

Window:
För att ta fram olika paletter, t.ex sådana man stängt, måste man gå in här. Pröva dig fram så ser du funktionen. Det är alltså samma verktyg som finns i andra program, t.ex för att ta fram paletter eller verktyg i Photoshop eller Word.

Help:
Under den här menyn hittar man många bra hjälpfiler, både på den egna datorn och på nätet.

3. Verktygsfältet

Det här avsnittet handlar om verktygsfältet. Det mesta är sig likt från andra program, t.ex Word. Jag har skrivit in vad de olika delarna i bilden föreställer. Du får en likadan förklaring om du håller muspekaren över respektive knapp i GoLive.

Verktygsfältet innehåller "genvägar" till funktioner, som också går att nå från menyerna. När man arbetar i de olika visningslägena kommer verktygen också att ändras. Det är dock inget man behöver tänka på i början.

4. Visningslägena

Den här bilden visar alla de kontroller du ser när du arbetar med ett dokument. De olika flikarna tar fram olika visningslägen:

Layout (Layout Editor) är WYSIWYG-delen du arbetar i mest. Här kan man skriva in texten på olika sätt, som du strax kommer att se.

Frames (Frame Editor) fyller samma funktion som Layout, men används då man arbetar med frames.

HTML-källa (HTML Source Editor) visar alltså hur sidan ser ut i textläget. Här kan man gå in och redigera koden för hand.

Om man vill se både Layout- och Source-läget samtidigt kan man gå till menyn Window och klicka på Source Code. Då får man upp en palett med Html-koden och kan på så vis ha kontroll över både koden och layouten samtidigt.

Disposition (HTML Outline Editor) visar hur sidan är uppbyggd utifrån HTML-koden. Här ser du HEAD och BODY och vilka element de innehåller. Praktisk att ha om man använder invecklad kod eller vill få överblick över sina rubriker.

Förhandsgranska (Layout Preview) visar på ett ungefär hur sidan kommer att se ut i webbläsaren. Man bör dock se upp med denna funktion, som inte är helt tillförlitlig. Jag kommer senare att visa andra varianter som fungerar bättre.

Förhandsgranska frames används när man använder frames och även denna visar inte alltid sidorna så som de verkligen blir i webbläsaren.

Sidhanteraren skall vi strax titta närmare på. Härifrån styr du sådant som text-, länk- och bakgrundsfärger.

Javascript öppnar ett nytt fönster där du kan redigera de scripts du skapat i programmet. Det kommer jag att visa närmare på fördjupningssidorna.

Tidslinjen gör det bl.a möjligt att synkronisera ljud och bild i en multimediaproduktion. Detta kommer jag att visa närmare på fördjupningssidorna.

Stylesheets öppnar ett nytt fönster där du kan redigera de stilmallar du skapat i programmet. Det kommer jag att visa närmare på fördjupningssidorna.

Linjalen tar fram en linjal, som gör det möjligt att veta exakt var på sidan du befinner dig.

Layoutkontroll gör det möjligt att anpassa programmet efter eget huvud, men det skall vi vänta med tills fördjupningssidorna.

5. Sidhanteraren

När man arbetar med GoLive använder man även olika paletter. En av dem är sidhanteraren, som gör det möjligt att ändra färger på texten, länkarna och bakgrunden. Den ser du här till höger.

Det finns tre eller fler flikar, beroende på om man t.ex har ColorSync installerat för bildskärmen och liknande finesser. Page låter dig styra färgerna på sidan. HTML låter dig styra vilken HTML-kod som skall visas under Source, samt om den mer avancerade koden skall skrivas på sidan eller importeras. Pending och ColorSync lämnar jag därhän tills vidare.

För att ändra färgerna på sidan klickar man först på Sidhanteraren, så att rätt palett visas. Ta fram fliken Page, som bilden visar. Klicka sedan på en av färgerna, t.ex på den svarta rutan bredvid textfärgen.

Nu poppar ännu en palett upp, som du ser här på bilden till höger. Denna palett kallas för färgpaletten och har en massa funktioner. Den kan se lite olika ut i olika versioner. Bilden är hämtad från GoLive 4.

Här finns bl.a en stor ruta längst upp, som visar den färg man valt. Sedan finns ett antal flikar för olika färgsystem, där den med webbsäkra färger är den jag ringat in.

Man väljer färg med pipetten eller genom att skriva in färgkoden för hand. Sedan klickar man i den stora rutan längst upp och drar ner denna färg med muspekaren så att den hamnar i rätt ruta i sidhanteraren. Vi drar nu alltså den nya färgen ner till textfärgens ruta, som då ändrar färg till den vi valt.

Skriver man sedan lite text i dokumentet, upptäcker man att den nya färgen används.

Välj och lägg in de färger du tycker passar för bakgrunden, texten och länkarna!

6. Grundpaletten

Alla små rutor kallas i programmet för paletter, men det finns en grundpalett som man nästan alltid börjar ifrån. Den kallas i programmet för "Paletten", men jag kallar den här för just "Grundpaletten", för att undvika missförstånd. Du ser den här till höger.

Obs! I version 5 av programmet har man bytt namn på den och gett den två olika flikar: Objects (objekt) som du ser på bilden, samt Color (färger). Därför är "grundpaletten" ett namn jag ibland byter ut mot Objektpaletten eller Färgpaletten, då jag har utgått från GoLive 5.

Du kan läsa mer om hur man anpassar denna palett på sidan Ändra grundinställningarna

Den innehåller nio (eller fler) flikar med olika funktioner på var och en. Här tänker jag bara gå igenom den första fliken, som heter Basic Elements Palette (eller Grundpaletten). På den hittar du tre rader med olika verktyg. Genom att hålla muspekaren över en ikon får du upp en liten förklaring av vad det är för något.

Undersök paletten så att du ser vilka olika alternativ som ges!

En del saker i Basic är ganska lätta att använda, t.ex att lägga in en tabell, bild, dold kommentar, avgränsare eller radbrytning. Genom att pröva de olika alternativen förstår du snart vad de används till. Här är det givetvis en fördel om du redan arbetat med HTML och hemsidor!

De första tre funktionerna i första raden, Layout Grid (layoutrutan), Layout Text Box (textruta) och Floating box (flytande ruta), förklarar jag påandra sidor om programmet.

Spacer berättar jag mer om i avsnitt 11. Mer avancerade funktioner, som scripts, plugins och applets, berättar jag mer om så småningom.

För att du skall förstå hur man använder de olika funktionerna, skall vi nu lägga in en tabell på sidan. Tabeller använder man bl.a för att begränsa sidans bredd.

Ta tag i symbolen för en tabell och dra över den så att den hamnar på sidan.

Då kommer det att se ut som på bilden. Först skapar programmet alltså en tabell bestående av 3 kolumner och 3 rader. I bilden har jag markerat vad som är vad, så att du känner till terminologin.

När man för muspekaren mot tabellens ram, förvandlas den till en hand, pil eller annat verktyg. Det betyder att tabellen går att flytta. Handen förekommer i många sammanhang och betyder alltid samma sak: du kan flytta ett objekt.

För att börja skriva i en cell klickar man i den. För att markera cellen klickar man på kanten av den, så att kanten ändrar färg. För att markera flera celler är det enklast att hålla nere Shift och sedan markera de celler man önskar.

Man kan också ändra storlek på tabellen genom att hålla muspekaren vid kanten av tabellen. När en dubbelpil dyker upp kan man ta tag i kanten och dra eller skjuta den, så att den får rätt storlek. Det finns ett enklare sätt att få fram denna dubbelpil på och det är att hålla nere Alt och sedan föra muspekaren över tabellens kanter.

Bekanta dig med hur man markerar tabellen så att man kan skriva i den. Pröva också att markera en och flera celler, samt att dra och trycka i tabellens kanter.

7. Tabellpaletten

När man markerat hela tabellen, förändras sidhanteraren och ersätts med följande palett. (I GoLive 5 ser paletten något olika ut.) Jag har här kallat den för tabellpaletten. Som du ser innehåller den flikar för hela tabellen (Table), en rad (Row), en cell (Cell), samt om tabellen innehåller dolda fält (Hidden).

Det är en stor fördel om man kan lite HTML innan man börjar använda denna palett på allvar. Här tar jag bara upp sånt som inte finns i HTML och som finns i GoLive, varför du måste försöka lära dig lite HTML för att utnyttja programmets möjligheter fullt ut.

Vi börjar med att titta på inställningarna för hela tabellen. Du som känner till HTML borde inte ha några svårigheter att förstå vad som döljer sig under de olika knapparna. Här kan man först ställa in antalet rader och kolumner. Man skriver in en ny siffra i fältet och klickar sedan på knappen som dyker upp till höger om detta fält. Detta gäller för alla ändringar man gör. (Man kan också trycka Enter.)

Man kan även ställa in tabellens bredd och höjd. Här har jag valt pixlar som enhet, något jag rekommenderar. Man använder nästan uteslutande pixelvärden numera när man gör hemsidor.

Ett normalt värde för löpande text är att lägga den i en tabellcell som är mellan 500 och 600 pixlar bred. Då blir den lagom bred på alla skärmar. Om man inte gör denna begränsning, kommer texten att fylla ut hela bildskärmens bredd och bli svår att läsa.

Ändra tabellen så att den får 2 kolumner och 2 rader. Gör tabellen 550 pixlar bred. Ta bort kanterna (Border) runt tabellen!

På liknande sätt kan man sedan ställa in värdena för enskilda rader och celler. Det är inte så vanligt att man ställer in hur raderna skall se ut och därför hoppar vi över det. Däremot skall vi ändra cellernas bredd.

Markera cellen längst uppe till vänster så att inställningarna för cellerna dyker upp i tabellpaletten.

Här kan du finjustera hur cellerna skall se ut. Det som framförallt är intressant är att ställa in cellernas bredd. Så här brukar jag ställa in mina celler:

Vertical alignment: top
Horizontal alignment: default

På det här viset hamnar alltid texter och bilder längst upp i cellerna.

Justera cellerna i vänsterkolumnen så att de blir 150 pixlar breda. Cellerna i högerkolumnen skall vara resten av sidan, dvs auto.

De övriga inställningarna kan vara bra att göra för den som vill styra tabellen mer exakt. Jag går inte igenom vad som är vad här, eftersom det går att läsa på min webresurs. Ett bra ställe att börja på är t.ex sidan om tabeller på min webresurs.

8. Lägg in en rubrik

Så här långt har du förhoppningsvis en sida som ser ut så som bilden här nedanför visar. Du har kanske valt en annan färg än jag, men det gör inget:

Nu skall vi lägga in en rubrik. Det är lämpligt att göra det i cellen längst upp till höger. Ett tips är att skriva texten först och först därefter ställa in teckenstorlek och annat.

Skriv in en kortfattad rubrik och välj storlek m.m. så som du tycker blir snyggt!

9. Bildpaletten

Nu skall vi lägga in en bild i cellen längst uppe till vänster. Börja med att klicka så att tabellens celler syns, om de inte gör det. Symbolen för en bild finns i grundpaletten under Basic och syns här till höger.

Ta tag i bildsymbolen och lägg in den i cellen längst upp till vänster i tabellen.

Nu dyker bildpaletten upp, som du ser på bilden här till höger. Det står (Empty Reference!) eftersom programmet inte vet vilken bild vi skall lägga in. Klicka på Browse för att välja bild. Har du ingen färdig kan du ta den jag själv har använt: apa.jpg.

När man jobbar med en sajt och har definierat den i GoLive, hittar den oftast rätt sökvägar till de bilder man lägger in. Då kan man även ta tag i knappen med krullsymbolen (kallas point-and-shoot i hjälpfilerna) och dra den till rätt fil. Detta förfarande berättar jag mer om när jag beskriver hur man arbetar med en sajt.

När du valt bild ser du att programmet själv ställt in hur bred och hög bilden är. Du kan också justera den i höjd- och sidled. Klickar du i Low gör GoLive automatiskt en lowsrc-bild.

Mer säger jag inte om bilder här. Du får pröva dig fram. Mer hjälp får du på min webresurs, på sidan som heter Introduktion till bilder.

10. Lägg in länkar

I nedre vänstra cellen skall vi nu lägga in länkar till de olika undersidorna. Det skall t.ex finnas en sida med sajtinformation, en med bilder och en med länkar.

För att skapa en länk gör man så här:

Skriv in texten för de olika länkarna, t.ex Startsidan, Sajtinfo, Bilder och Länkar.

Markera den första textraden, t.ex "Startsidan".

Klicka på länksymbolen i verktygspaletten eller välj "New Link" under Special-menyn.

Nu kommer en länkpalett upp, som du ser här bredvid. Nu står det (Empty Reference!) och det beror ju på att vi inte valt någon sida. Problemet är dock att det inte går att välja någon sida, eftersom någon sådan ännu inte tillverkats! Därför måste vi skriva in ett filnamn och göra denna sida efteråt.

Jag valde att göra nya sidor med namnen index.htm, sajtinfo.htm, bilder.htm och links.htm. Vill du se hur sidan blev?

11. Spacer

Jag skall avsluta den här grundkursen med två funktioner som kan vara bra att känna till.

Den första är ett HTML-element som heter Spacer. Det används i Netscape bl.a för att få tabellerna korrekta. Netscape brukar nämligen ibland strunta i att man angett en viss bredd på en tabellcell. Med elementet kan man också skapa indrag i vanlig brödtext.

Man lägger helt enkelt in en spacer i en tabellcell. Sedan skriver man in hur bred den skall vara och då ser GoLive till att koden blir korrekt och tabellcellen tillräckligt bred.

Det finns emellertid också andra sätt att åstadkomma detta för Netscape, men då måste man vara ganska bra på HTML-kodning. Spacer är alltså ett enklare sätt att göra samma sak.

Den som använder elementet bör dock ha klart för sig att det inte fungerar i Internet Explorer. Det är därför man måste testa alla sidor man gör i flera olika webbläsare. I JavaScript-skolan visar jag hur ett testprotokoll kan se ut. Du hittar det här >

12. Lägg till teckensnitt

En annan sak som kan vara bra att känna till är hur man lägger till teckensnitt till den lista som finns från början i GoLive. Gör man inte egna tillägg får man stå ut med programmets egna och ganska spartanska inställningar.

Gör så här:

• Gå in under Style - Font - Edit Font Sets
• Klicka på Default om du vill ändra det teckensnitt som GoLive använder till brödtexten, alltså den som används innan du ändrat den.
• Klicka på Page om du vill lägga till ett teckensnitt som går att välja under Style och Font.
• Klicka sedan på New
• Välj bland teckensnitten genom att klicka på knappen som är inringad med rött i bilden.
• Lägg till så många teckensnitt du vill. Klicka sedan på OK.
• Gå in under Style - Font och välj det nya teckensnittet.

Vi har nu lagt till sådana teckensnitt som går att aktivera via FONT-elementet. Jag rekommenderar dig dock att i stället tillverka stilmallar, åtminstone om du tänker använda dig av tabeller. Annars måste du skriva in ett FONT i varje tabellcell.