Stilmallar i GoLive

1. Inledning

På den här sidan visar jag de verktyg som finns i GoLive för att lägga in stilmallar.

Jag förutsätter att du redan har en aning om vad stilmallar är. Allt du behöver veta om teorin finns på mina sidor om stylesheets >

Vill man använda GoLive för att lägga in stilmallar är det alltså så, att man bör kunna en hel del om själva koden. Visserligen ser det lätt ut, men detta är definitivt inget för nybörjaren.

GoLives verktyg för stilmallar är trots detta ganska bra. Den klarar av att följa den standard som finns. Däremot har programmet inte alltid koll på vilka kommandon som kommer i konflikt med varandra, i de olika webbläsarna.

Tidigare versioner av GoLive klarade bara av att hantera externa stilmallar. I och med version 5 finns dock utrymme för både interna (i HEAD) och externa stylesheets.

2. Skapa en intern stilmall

1. Börja med att öppna ditt HTML-dokument, där du vill ha stilmallen. Klicka på knappen Open CSS Interface, längst uppe till höger i dokumentfönstret. Du ser en bild av knappen hör ovanför till höger.

Nu öppnas ett nytt fönster. I namnlisten står först filnamnet och sedan att det är en stilmall (Style Sheet).

För att arbeta med denna palett måste du också använda verktygsfältet (Toolbar) längst upp på skärmen. Där finns följande verktyg:

Ny klass (New Class Selector)
Nytt element (New Element Selector)
Nytt Id (New ID Selector)
Ny stilmallsfil (New Style Sheet Selector)

...och den sista knappen är ett litet plustecken som gör att man kan duplicera en inställning för ett element, t.ex H1. Sedan kan man lägga till eller dra ifrån stilmallskod, t.ex skapa en lite mindre teckenstorlek, för H2. På så vis sparar man mycket tid.

Vanligast är att man försöker styra olika element och vilka utseenden de skall ha. Vi börjar med att styra BODY. Klicka på Nytt element i verktygsfältet.

2. i Inspector-paletten (kallas i den svenska versionen för Kontextpaletten) dyker nu olika verktyg fram. I textfältet för Name skriver du in BODY och trycker Return.

De olika flikarna har olika funktioner:

Basic visar en lista över dina inställningar för BODY.

Font innehåller olika alternativ för att styra teckensnittet.

Text gör det möjligt att ställa in värden för knipning, spärrning, indrag och liknande.

Block använder man för att ställa in marginaler, padding och liknande.

Position är till för att positionera olika objekt.

Border ställer in ett objekts ramar.

Background ställer in bakgrundsfärger och bakgrundsbilder.

List & Others Properties utnyttjas av den som vill skapa mallar för olika slags listor.

Alla flikar och de alternativ som finns under dem borde inte vara särskilt konstiga för den som satt sig in i hur koden fungerar. Jag har redan berättat en hel del om hur det fungerar på mina sidor om stilmallar. Skall du arbeta mycket med själva koden skall du läsa mer där.

Gå till sidorna om stylesheets >

Här skall vi endast göra ett par olika inställningar, för att se hur verktygen fungerar och används. Vi fortsätter därför våra inställningar för BODY:

3. Klicka på fliken för FONT, som bilden visar.

Color ställer in textfärgen. Det finns ett antal förvalda alternativ (under den svarta pilen).

Man kan även dubbelklicka på färgrutan och välja en valfri färg i den särskilda färgpaletten. Den färg man själv skapar måste sedan dras över till färgrutan i Inspector.

Jag vill även ha en textstorlek på 12 pixlar. Först väljer jag därför enheten px och sedan skriver jag in värdet. LineHeight struntar jag i. Under Style och Weight kan man t.ex sätta Normal - eller ingenting.

Om man inte vill använda de förinställda samlingarna av teckensnitt, kan man enkelt göra egna sammanställningar:

• Klicka på New
• Skriv in namnet på teckensnittet...
• ...eller välj ett i listan
• Med pilarna uppåt/nedåt kan du flytta den interna ordningen mellan dem

4. Byt nu tillbaka till fliken Basic. Du ser då den kod som programmet har skapat för dina inställningar. Bilden visar hur det ser ut.

Man kan inte redigera denna text direkt, utan måste alltid gå tillbaka under rätt flik och ändra det som blivit fel.

Man kan därför inte heller ändra ordningen på de olika kommandona, om man nu skulle vilja ha dem i en annan ordning. Det får man i så fall göra för hand, i läget för HTML-redigering av dokumentet.

Dessvärre verkar det också som om GoLive inte är utrustad med alla CSS-kommandon som finns. Framförallt saknar jag fler sätt att styra länkarna på.

Om du sedan återvänder till ditt dokument och faktiskt tittar på HTML-koden ser du att programmet lagt in en stilmall i HEAD. Bilden nedanför till höger visar en (redigerad) bild av hur det ser ut.

Detta är alltså hela principen för att hantera stilmallar för enskilda element.

Klasser

Vi skall nu också ta oss en titt på hur man styr flera element samtidigt, m.h.a klasser.

Jag vill ha en inställning för DIV (eller SPAN) för att kunna göra tonplattor och färglagd text.

Klicka på Ny Klass (New Class Selector) i Verktygsfältet.

Inspector ser nu likadan ut som tidigare och du måste nu ge klassen ett namn. Namnet måste börja med en punkt eftersom det är en klass. Jag väljer namnet .tonplatta.

På motsvarande sätt som tidigare ställer jag in de värden jag önskar. Resultatet ser du på bilden här bredvid.

Självklart måste man sedan testa sin sida i olika webbläsare, på olika datorer och helst också på flera olika plattformar, dvs Pc, Mac och några till.

Lita aldrig på GoLives egen visning! programmet har visserligen en egen "webbläsare", men den hittar allt som oftast på saker, som inte stämmer med hur webbläsarna visar sidan.

Särskilt stilmallsstyrda sidor måste kontrolleras mycket noggrant. Blir det fel kan man sedan själv gå in och redigera koden.
 

3. Lägg in en extern stilmall

Den som vill använda sig av en extern stilmall måste göra på ett lite annorlunda sätt. Först måste man nämligen skapa den särskilda stilmallsfilen.

1. Välj att öppna ett nytt specialdokument, under File - New Special - Style Sheet Document.

2. Spara det med lämpligt namn i samma mapp som dina HTML-filer.

3. Förfarandet är sedan detsamma som när man skapar interna stilmallar. Du väljer att skapa mallar för olika element och klasser, via verktygsfältet (Toolbar) och Inspector. Detta sker exakt på samma sätt som jag visade ovan.

4. För att lägga in en hänvisning till den externa stilmallen i ditt HTML-dokument, måste du alltid först öppna det. Sedan klickar du på knappen för CSS-gränssnittet, som den röda ringen visade i inledningen till avsnitt 2 ovan.

5. I verktygsfältet klickar du sedan på New StyleSheet File

6. I Inspector väljer du din stilmallsfil. Programmet lägger då automatiskt in ett LINK-element i HEAD, som hänvisar till din externa CSS-fil.

7. Bilden visar hur jag lagt in både en intern och en extern stilmall.

Genom att klicka på de olika blå rutorna, kan man gå in och redigera inställningarna i efterhand.