Hemsidor i Netscapes Composer

1. Inledning

Den här sidan är till för dig som inte riktigt vet hur man gör en egen hemsida. Jag har använt mig av gratisprogrammet Netscape Composer, som följer med Netscapes webbläsare. Det är lätt att lära sig och enkelt att använda.

En av nackdelarna med programmet är att det inte skriver så bra kod. Man kan börja använda det och kommer snabbt underfund med det, men i gengäld växer man ganska snart ur det.

För att börja arbeta i programmet måste du först starta Netscape. Sedan hittar du Composer under menyn Communicator eller Tasks. De heter något olika i olika versioner!

Bilden visar alternativet Composer, som startar det program vi nu skall titta närmare på.

I det fönster som öppnas kan man skapa en egen hemsida. Men innan vi börjar arbeta måste vi ta oss en titt på programmets olika verktygsfält.

2. Verktygsfältet Composition

Som alla grafiska program har Composer olika verktygsfält med knappar. Överst på skärmen hittar man det som kallas Composition. På svenska skulle det bli ungefär "sammansättning" eller "komposition".

Om du inte ser detta verktygsfält kan du enkelt ta fram det under menyn View - Show - Show Composition Toolbar:

Olika versioner har oftast olika utseenden på verktysfälten. Här visar jag hur de ser ut i Netscape 4.7 respektive 6.2.

Knapparna döljer ungefär samma funktioner, trots att de ser ungefär likadana ut. Man får en förklaring till vad de betyder om man för muspekaren över dem. Du kan också se på bilden här bredvid vad de är till för. Jag har använt mig av Netscape Composer version 6.2.

Man lär sig dock ganska snart hitta knapparnas funktioner. Här följer en lite längre förklaring:

Minimera används för att fälla ihop verktygsfältet, så att man slipper se det. Detta kan vara användbart om man har ont om plats på skärmen.

New skapar ett nytt, tomt dokument.

Open öppnar ett dokument som redan är sparat på hårddisken.

Save sparar dokumentet på datorn. Browse används för att förhandsgranska den sida man håller på med. Sidan öppnas i ett nytt fönster i webbläsaren utan att Composer stängs.

Print skriver självklart ut sidan.

Spell används för den som skrivit på engelska. Knappen stavningskontrollerar sidan, men med mycket enkla medel. Jag använder inte denna knapp alls. Ett tips är att man skriver all sin text i Word eller motsvarande program och sedan klistrar in texten på sidan.

Image lägger in en ny bild på sidan.

H.Line lägger in en ny horisontell linje på sidan. Det är denna som i skrivs <HR> med kod.

Table lägger in en tabell på sidan. Det skall vi göra strax.

Link skapar en länk från det objekt man markerat.

Anchor lägger in en ankarpunkt, t.ex för att skapa en intern länk till en annan plats på sidan. Detta skall vi göra i avsnitt 5: Här är en intern länk dit >>

Nu har du fått lära dig att hitta på verktygsfältet Composition. Vi skall nu göra en likadan orientering för Formatting.

3. Verktygsfältet Formatting

Det andra verktygsfältet som bör finnas framme är Formatting, som betyder "formatera". Det innehåller några bra grundkommandon, som framförallt gör det möjligt att formatera texten.

På bilden har jag försökt beskriva vad de olika knapparna används för. Här är en lite längre förklaring:

Styckeformat heter egentligen "Paragraph Format" och innehåller alternativ för att skapa nytt stycke, olika sorters rubriker, osv.

Om man bara skriver texten, kommer programmet att skapa nya rader med enkel radbrytning, dvs BR-elementet. För att skapa ett nytt stycke, med P-elementet, måste man således välja det för hand här och dessutom varje gång man vill använda P, snarare än BR. (Förstår du ingenting av detta så kan jag lugna dig med att det inte är särskilt viktigt och sånt som nördar diskuterar!)

Färgväljaren används dels för att välja textfärgen och dels för att lägga in en bakgrundsfärg. När man klickar på någon av de två rutorna öppnas en färgväljare, med webbsäkra färger.

Man kan antingen välja en färg eller skriva in en egen. Textfärgen läggs in då man har markerat texten.

Minska/öka textstorleken används för just det och lägger in elementen SMALL eller BIG. Här bör man tänka på att programmet inte förstår vad som är normalläget, utan lägger till nya element varje gång man klickar på knapparna.

När jag först minskade texten och sedan ökade den igen, eftersom den blev för liten, lade programmet in följande kod:

<big><small>Jonas Webresurs</small></big>

Man behöver inte tänka länge innan man inser att programmet alltså skapar en fruktansvärd massa kod, som egentligen inte behövs.

Teckensort är det som är fet, kursiv och understruken stil. Klicka en gång för att lägga till och en gång till för att ta bort. Jag brukar skriva texten först och lägga till effekterna efteråt, men det gör man som man vill.

Listor skapr punkt- respektive numrerade listor av den text man skapat.

Indrag skapar ett textindrag med BLOCKQUOTE-elementet. På engelska kallas indrag för "indent".

Textjustering skapar vänsterställd, centrerad, högerställd, samt marginalställd text. Det senare innebär att både vänster- och högerkanten blir raka, som knappsymbolen visar.

Tips!
I menyerna längst upp i Composer, hittar du alla dessa alternativ och några till. Ta dig tid att bekanta dig med deras innehåll innan du fortsätter!

Innan vi gör en första, enkel sida, måste vi också titta lite närmare på de olika visningslägen som finns.

4. Visningslägen

I Netscape 3 och 4 finns små möjligheter att växla visningslägen. Man kan visserligen alltid öppna sin sida i ett separat textredigeringsprogram, som Anteckningar, men det är ju inte något smidigt arbetssätt.

I Netscape 6 finns däremot bättre verktyg för detta. Bilden visar hur kontrollerna ser ut. De ligger längst ner på Composers arbetsyta.

Normalläget är det grafiska gränssnittet, som låter dig göra sidorna utan att kunna någon kod.

Dispositionsläge kallar jag det som visar vilka element som använts. Här kan man t.ex se strukturen på sina rubriker, utan att störas av den omkringliggande texten. Man kan också se om programmet lagt in onödiga element, som jag visade i förra avsnittet. Tyvärr går det inte att redigera elementen i detta läge, t.ex för att ta bort onödiga element.

HTML-koden kan man också redigera för hand, vilket är användbart när man vill ta bort onödiga element eller ändra eller lägga till i koden. Känner man sig osäker behöver man inte gå in här alls.

Förhandsgranska är det sista visningsläget. Klickar man här visas sidan så som den kommer att se ut i Netscapes webbläsare.

Detta var genomgången v programmets delar. Nu skall vi tillverka en enkel sida.

5. En enkel sida

Vi skall nu tillverka en mycket enkel hemsida, men med en väldigt vanlig och användbar layout. Sidan fungerar bra som en startsida för en större sajt och går därför enkelt att bygga på efter hand.

När man gör hemsidor är det vanligt att man använder tabeller. Då kan man placera olika objekt, t.ex rubriker och bilder, var man vill. Dessutom kan man begränsa sidans bredd, så att den går lättare att läsa.

A. Nytt dokument

Börja med att skapa ett nytt dokument.

B. Lägg in en tabell

Klicka på knappen Table, på verktygsfältet "Composition". En dialogruta dyker då upp. Ibland kallas den även för "Kontextmeny" eller något liknande.

Bilden visar hur den ser ut. Jag skrev in att jag ville ha två rader och två kolumner, samt att tabellen skall vara 600 pixlar bred.

Tips!
Klickar du på Advanced Edit-knappen kan du göra fler inställningar och lägga in de attribut du vill.

När du skapat tabellen, dyker den upp i ditt dokument, markerad med röda kanter. Ställer dig inuti tabellen och klickar på Table-knappen igen, får du upp ytterligare en kontextruta, där du kan göra ännu fler inställningar. Varför man använder tre olika inställningsrutor kan man ju fundera en stund över. Två hade räckt!

Tips!
Jag går inte igenom vad de olika alternativen innebär. Vill du förstå mer måste du lära dig lite HTML, t.ex på sidorna Introduktion till HTML och Tabeller

C. Lägg in en bild

I den tabellcell som ligger överst till vänster skall vi nu lägga in en bild. Ställ dig i cellen och klicka på Image-knappen på verktygsfältet "Composition".

Den ruta som kommer upp har en knapp som heter "More Properties", som jag har klickat på för att få fram alla alternativ.

Klickar du på Advanced Edit-knappen kan du göra fler inställningar och lägga in de attribut du vill, precis som tidigare.

Det enda man behöver göra här är egentligen bara att välja den bild man vill ha med. Jag valde en som heter apa.jpg: Här hittar du den >

Obs!
Som du märker anpassas tabellen efter bilden och de mått du har ställt in stämmer inte längre. Detta får man leva med under själva redigeringsarbetet. Man rättar enklast till allt sådant mot slutet, när sidan börjar bli klar.

D. Skapa en rubrik

Vi skall nu också lägga in en rubrik. Markera cellen överst till höger och skriv in en lämplig text. Jag valde att skriva "Välkommen!".

Hamnar texten i mitten i stället för längst upp i cellen?

Då ställer du dig bara i cellen och klickar på knappen Table igen. Klicka sedan på fliken Cell, kryssa i knappen för vertikal justering och välj att lägga texten längst upp, dvs "top".

Normalt behöver man dock inte skriva in något värde för horisontell justering, eftersom grundinställningen (default9 är vänsterställd text (left).

För att ändra textens storlek måste du först markera den och sedan välja ett lämpligt alternativ i rullgardinsmenyn på verktygsfältet Formatting, som är det snabbaste sättet, eller under menyn Format, som möjliggör fler alternativ.

Jag valde alternativet "Heading 1" under "Paragraph" och "Arial" under "Font". Detta innebär att jag lade in en ganska stor rubrik, faktiskt den största som går att göra med HTML. Vill man göra större text måste man använda ett bildbehandlingsprogram och göra rubrikerna som en bild.

Som teckensnitt för webben brukar man använda sådana som saknar seriffer. Du kan läsa mer om vad detta är på min sida om teckensnitt: Gå till sidan om teckensnitt >

Gör man sedan en radbrytning är programmet redo att ta emot mer text, med en annan formattering. Här kan man skriva in något mer, om man vill.

E. Spara sidan

När man arbetat en liten stund med sin sida är det bra att spara den. På det viset slipper man göra om det man gjort, om datorn skulle hänga sig eller krascha.

Man sparar genom att gå in under menyn File och välja alternativet Save.

Första gången man sparar får man upp en liten ruta, där man skall skriva in sidans titel. Denna syns överst på namnlisten när sidan sedan öppnas i en webbläsare.

Bilden visar hur denna ruta ser ut, samt den kod som skapas i programmet. Du hittar mer information om hur koden fungerar på sidan Introduktion till HTML >

När du sedan trycker på "Ok" får du upp en ruta, där du kan välja var filen skall sparas. Eftersom webbläsarna alltid söker efter filen "index.html" bör du döpa din startsida till det.

Obs!
När du skriver in filnamnet bör du endast skriva namnet och ingen filändelse. Döp alltså din fil till index och inte index.html. Anledningen är att programmet själv lägger till ändelsen ".html".

Tips!
När man skapar hemsidor brukar man få problem om man använder svenska tecken, mellanslag och andra konstiga tecken. Ibland kan man inte ens använda stora bokstäver. Detta gäller framförallt då man lägger upp sina sidor på Internet.

F. Lägg in länkar

I cellen längst ner till vänster skall vi nu lägga in länkar till andra sidor. Jag väljer att skapa en länk tillbaka till startsidan, samt ytterligare några stycken: Sajtinfo, Bilder och Länkar. Var och en väljer ju själv vilka länkar man vill ha.

Klicka i cellen längst ner till vänster. Skriv in valfria texter för länkarna. Försök göra rubrikerna så kärnfulla som möjligt, så att besökaren förstår vart de leder.

För att skapa själva länken markerar du först texten och klickar sedan på knappen för en länk på verktygsfältet Composition.

I rutan som kommer fram skriver du in sidans namn. Eftersom vi inte har skapat den ännu hittar vi bara på ett bra namn. Rubriken "Sajtinfo" kan ju t.ex leda till en sida med samma namn, som bilden nedan visar.

Under knappen More properties hittar du inställningar för att skapa länkar till samma ställe på samma sida, snarare än en annan sida.

Har du skapat en ankarpunkt, syns den i så fall i listan som kommer upp. Du kan också välja att länka till en viss rubrik på sidan.

Ankarpunkter skapar du genom att ställa dig där du vill lägga in den och klicka på knappen "Anchor" på verktygsfältet "Composition". På sidan dyker det då upp en gul skylt med ett ankare på, som bilden här bredvid föreställer.

Om du har frågor om detta kan du alltid pröva dig fram. Du hittar också mycket mer information på sidorna Introduktion till HTML och 100 frågor och svar.

Under knappen Advanced Edit kan du lägga in fler attribut om du skulle vilja det.

Tips!
Välj gärna ett passande teckensnitt för länkarna. Däremot kommer inte vanliga textfärger att fungera, eftersom länkfärgerna ser lite annorlunda ut. För att ändra länkfärgerna har jag inte hittat nåt sätt alls. Snarare måste man gå in i koden och skriva in kommandona för hand. Självklart kan man då även skapa en stilmall om man vill.

Du hittar mer information om länkfärger och stilmallar på sidan med 100 frågor och svar.

G. Lägg in en ny rad och en avgränsare

När jag tittar på sidan inser jag att jag vill lägga till en avgränsare längst ner. Det är ett element som heter HR och knappen för detta heter H.Line, som står för "Horisontal line".

Problemet är bara att om jag lägger den under tabellen, kommer den att sträcka sig lika långt åt höger, som webbläsarens fönster är, alltså längre än de 600 pixlar vi ställt in för tabellen.

Därför vill jag lägga in avgränsaren inne i tabellen. Jag ställer mig någonstans i tabellen och klickar på knappen Table, så att tabellhanteraren öppnas.

I stället för två rader skriver jag nu en trea. Men jag vill inte bara ha en ny rad, utan jag vill också att den skall sträcka sig över två kolumner. Annras kommer ju avgränsaren bara att bli lika bred som vänsterkolumnen.

I tabellhanterarens fönster klickar jag därför på fliken Cells och knappen Advanced Edit.

I rutan som dyker upp skriver jag in attributet colspan, som skapar en cell som sträcker sig över flera kolumner. Värdet 2 anger att jag vill att cellen skall sträcka sig över två kolumner. Sedan klickar jag på "Add" för att lägga till attributet och värdet.

När programmet registrerat förändringen, klickar jag på Ok för att återvända. Nu skall en ny rad lagts till, vars cell sträcker sig över två kolumner.

Det är i denna cell jag nu skall lägga till en avgränsare. Jag ställer mig följaktligen i cellen och klickar på knappen "H.Line". Nu läggs linjen in på sidan!

Tips!
Om du dubbelklickar på det objekt som lagts in, får du automatiskt upp menyn för att göra inställningar av det. När jag dubbelklickade på avgränsaren, kom följande ruta upp, som du ser nedanför på bilden.

Jag tycker inte att man skall göra alltför stora ändringar här, eftersom det bara är de riktigt nya webbläsarna som förstår koden.

Dessutom fungerar Netscapes kod sällan särskilt bra i Internet Explorer, och vice versa.

Vill man skapa fräcka avgränsare, kan man enkelt göra dem i ett bildredigeringsprogram. Du kan läsa mer om hur man gör på sidan Bilder på hemsidan >

H. Vad händer sedan?

När du skapat alla länkar och skrivit in en välkomsttext, är det bara att spara sidan. För att se hur den ser ut kan man alltid titta på den via Composers egen tolk, i det visningsläge som heter Preview.

För att se alla ändringar måste man alltid spara sidan först. Vill man vara säker på hur sidan kommer att se ut, kan man alltid öppna den direkt i webbläsaren, i stället för att använda Preview-läget.

Så här såg min sida ut: Klicka här för att titta på den!

Titta på fler sidor om olika program: Programkunskap >>