HTML- och outline-editorn

1. Inledning

I HTML-editorn kan du gå in och ta bort, ändra och lägga till element och attribut till den kod som GoLive har skapat. Men för att du skall kunna arbeta effektivt med HTML-editorn, bör du känna till lite om HTML. På min webresurs hittar du det mesta man behöver veta. Du når den från startsidan.

Här kommer jag att gå igenom de olika finesser som finns i GoLive, men jag säger alltså inte särskilt mycket om hur HTML fungerar.

En sak kan vara bra att veta om GoLive: den lägger till egen arbetskod, som inte tillhör HTML och som heller inte fungerar i webbläsarna. Sådan kod ligger tyvärr ofta kvar om man bara sparar sina sidor. Jag kommer så småningom att visa hur man exporterar sina filer, så att man slipper så mycket skräp i koden som möjligt.

Man kan alltid skriva in egen kod direkt i HTML-editorn. Det går också bra att dra objekt från grundpaletten, så att programmet skapar koden åt dig.

2. Inställningarna för HTML-editorn

Öppna ett nytt dokument. Klicka på fliken Source (källa).

Då ser du följande:

Som du ser har programmet inte bara skapat koden, utan också färglagt den och dragit in vissa underordnade element. Det är en bra hjälp när man försöker förstå hur koden är skriven.

Ovanför koden finns några knappar. Om du håller muspekaren över dem dyker det upp en liten ruta, som ger knappen ett namn. Du kan klicka på var och en av knapparna för att se vad som händer. Det mesta blir sig likt även efteråt.

Om du däremot drar bildobjektet från grundpaletten och lägger in den i HTML-editorn, varnar programmet att du inte lagt in någon giltig adress till bilden.

Jag brukar nästan alltid låta grundinställningen vara. Det är sällan man behöver göra ändringar.

Det bör påpekas att t.ex syntaxkontrollen är inte särskilt tillförlitlig. GoLive hittade mängder med fel på min startsida, som inte är fel. Både syntaxkontrollen och andra varningsmeddelanden tenderar också att bara ge information om att det är fel, men inte hur felet skall åtgärdas.

Denna osäkerhet är viktig att påpeka eftersom programmet har en del felaktigheter. Man bör alltså försöka tänka själv i så hög grad som möjligt. Det vi skall göra nu är lite åt det hållet. Vi skall nämligen lite mer i detalj bestämma hur koden skall visas.

Gå in under Edit - Preferences (Redigera/Inställningar). Klicka på Source (källa) i listan till vänster.

Det här det du ser:

Längst upp finns en ruta som bör vara ikryssad. Den innebär att markerad text går att flytta genom att dra i den med muspekaren. Det är samma flytta-funktion som finns i Word och andra program.

Sedan följer två knappar som också bör vara ikryssade. De hindrar GoLive från att skriva ut en massa fel, t.ex när man använder umlauts och kod den inte känner igen.

Fet stil för HTML-element och indrag och hur stort det skall vara för kod som ligger innanför andra element, t.ex för rader och celler i tabeller. Om du vill att GoLive skall skriva in vilket radnummer du befinner dig på med markören skall du kryssa i den rutan. Likaså om du vill att programmet skall göra mjuka radbrytningar, så att du slipper rulla i sidled för att se all kod.

När du bekantat dig med denna ruta skall du klicka på den lilla blå pilen eller plustecknet till vänster om namnet Source, för att expandera underavdelningarna. Då får du upp nya alternativ:

Browser Sets Här kan du ställa in vilka webbläsare du vill att GoLive skall anpassa koden för. En mycket användbar funktion som jag rekommenderar. jag använder t.ex en viss uppsättning för startsidor och sidor som jag vill att alla skall kunna läsa. Sedan använder jag andra kombinationer för mer avancerade sidor.

Om du vill att GoLive skall anpassa koden för en viss uppsättning webbläsare, klickar du i rutan Default Browser Sets. Grunduppsättningen i GoLive 5 innehåller varken Internet Explorer 6 eller Netscape 6. Man kan inte göra egna poster för dem utan får förlita sig till att Adobe skapar patchar som man kan ladda hem från deras hemsida.

Fonts Här kan du ställa in vilket teckensnitt och vilken storlek HTML-koden skall visas med när man arbetar i programmet. Jag använder gärna Geneva 10 punkter. Välj en stil som är lättläst!

Colors Ställ in vilka färger GoLive skall färga koden med i HTML-läget, samt hur det skall koda.

Printing Här kan du ställa in olika alternativ om du tänker skriva ut koden.

3. Arbeta med editorn

Jag har redan berättat lite om hur man arbetar med editorn. Här skall jag visa lite mer, men egentligen finns det inte särskilt mycket som är krångligt eller konstigt. För att exemplifiera detta tänker jag använda mig av några av de objekt som finns i grundpaletten (Palette).

Lägg in objekten från grundpaletten direkt i HTML-editorn för att se vilken kod som skapas!

De objekt som är speciellt intressanta är Tag och Endtag, som på svenska blir ungefär "element" och "avslutning". När man drar över en "Tag" kommer denna text att stå i editorn. Där måste man sedan ändra den manuellt, t.ex till DIV eller SPAN eller vad man vill. Likadant gör man med avslutningarna. Denna manöver går också att göra i layoutläget, men är då mycket krångligare.

Det är alltså bra att kunna växla mellan layout- och HTML-läget i programmet, för att göra olika saker. Justeringar av HTML-koden är alltid bättre att göra direkt i koden, medan arbetet med att bygga upp en sida går betydligt smidigare i layoutläget.

4. Outline-läget

Outline kan på svenska översättas med disposition eller översikt och visar sidan i dess olika delar och nivåer. Du som känner till hur HTML-koden fungerar förstår detta ganska lätt. Om du har arbetat i visningsläget Disposition i Word, kommer du också att känna igen dig i det som nu följer.

Klicka på fliken Outline (HTML-översikt).

Det här det du ser:

Det finns tre olika slags pilar. Klickar man på en nedåtpekande pil fäller man upp och döljer dess undernivåer. På motsvarande sätt visar man det innehåll ett element rymmer om man klickar på en horisontellt pekande pil.

Den lilla pilen fäller upp en separat rullgardin, där man kan välja mellan olika alternativ. Oftast rör det sig om hur man vill justera texten.

Genom att ta tag i handtaget till vänster kan man flytta runt de olika elementen och lägga dem där man tycker de passar bättre. Man kan också lägga till nya element, döpa om dem och ta bort element. I verktygsfältet längst upp hittar du knappar för detta. Du ser en översikt här nedan till höger.

Att arbeta i Outline-läget är inte att rekommendera. Jag begriper inte alltid vad programmet gör och en av kontrollerna har jag inte ens lyckats klura ut vad den gör. Där har jag satt ett frågetecken. (Klickar man på knappen ändrar den avslutningselementet på något vis.)

Hur arbetar man i Outline? undrar kanske den som ändå inte blivit helt avskräckt. Här kommer ett exempel:

Klicka på den lilla pilen till höger om BODY och välj bgColor.

Nu dyker en ny ruta upp till höger.

Klicka i rutan och välj en ny färg.

Tanken bakom detta visningsläge är dock inte att man skall göra ändringar. I stället är det till för att man lätt skall kunna se hur dokumentet är uppbyggt.