Skapa och arbeta med en sajt

1. Inledning

När man arbetar med att skapa en hemsida, upptäcker man ganska snabbt att man måste göra flera sidor. De flesta "hemsidor" är därför inte bara en sida, utan flera.

På webben kallar man flera sidor för en "sajt", efter engelskans "site". I GoLive finns flera bra funktioner för att skapa och underhålla en sajt. Man kan på det viset få mycket hjälp, bl.a med att hålla ordning på alla länkar, alla färginställningar, stilmallar, rättstavning och liknande. Man kan också få hjälp med att skapa överskådliga sajtkartor, m.m.

En sajt måste ligga i en egen mapp på datorn. På det viset är det lättare att hålla ordning på alla filer. Sedan bör man i denna mapp också skapa undermappar för alla avdelningar, t.ex för bilder eller för en viss sektion på sidan. GoLive skapar sedan rätt sökvägar till de olika filerna och katalogerna automatiskt.

Vi skall titta på detta så småningom. Vill du pröva på att göra en övning i att skapa en sajt kan du läsa mer på sidan med undervisningsmaterial och övningar i webbdesign. Läs mer >>

2. Skapa en sajt

Kontrollerna för en sajt hittar man dels under menyn Site och dels under menyn Window. De funktioner som heter likadant är (nästan) identiska.

För att skapa en sajt går man in under File - New Site - Blank. Man kan också importera en sajt, liksom man senare kan importera en sida från en befintlig sajt eller mall. Läs mer om detta i avsnitt 3, Importera en sajt.

I GoLive kan även skapa mappar, men har ett eget system för dem. Går man därför in i en mapp GoLive har skapat kan det vara lite svårt att se alla filer och kataloger.

Uppgift: Skapa en ny sajt på Skrivbordet (eller där du vill ha den) och döp den till ett bra namn, t.ex Hemsidan.

Då sajtmenyn är aktiverad kan man skapa nya sajter och olika sidor och mappar i den definierade sajten. Enklast gör man det via Site-menyn eller genom att högerklicka i sajtfönstret.

Under menyn Site - New kan man alltså skapa nya mappar och sidor. Under Explorer kan man importera filer och exportera hela sajten (eller delar av den) till valfritt medium, t.ex en CD-rom.

Connect innehåller en FTP-funktion, som dock kunde vara bättre än den är. Ladda i stället ner ett separat program, t.ex något du hittar på sidan med Surftips >

Rent allmänt tycker jag att man skall försöka arbeta med en sajt, snarare än separata sidor.

Man får då mycket hjälp av GoLive, som håller reda på vilka filer som finns och hur de hänger ihop.

Flyttar man en fil eller gör ändringar som påverkar andra filer, säger programmet till.

Man kan då även använda det som kallas Point-and-Shoot, som du ser här på bilden, inringat med rött. Dra denna symbol till rätt fil i sajtfönstret så skapar programmet rätt filreferens!

Site Manager, det jag kallat "sajtfönstret" och syns här på bilden, talar om för dig vilka filer, mappar, undermappar, bilder och annat du har i din sajt. Om du har gjort rätt skall du alltså se alla filer här.

För att skapa en fil går du in under Site - New - Page. Du kan också importera filer via Site - Explorer - Add Files. När filen skapats skall du givetvis ge den ett namn. Dubbelklicka sedan på den om du vill redigera den.

Det går självklart också att skapa en ny fil på vanligt sätt, med File - New. Sedan sparar man den i rätt mapp på skrivbordet. GoLive kommer då att uppdatera Site-hanteraren.

Tips!
När du sparar en fil lägger programmet automatiskt till extensionen .html till alla sidor. Skulle du t.ex vilja ha extensionen .asp i stället, kan du styra detta via menyerna Edit - Preferences - Site. Ändra sedan extensionen till det du önskar eller stäng helt av den funktionen!

Uppgift: Pröva att skapa filer på de tre sätt jag berättat om: genom "Site-New-Page", genom att importera en fil till sajten och genom "File-New". Testa de olika knapparna och se vad som händer när du trycker på dem.

Det finns en hel del sajtfunktioner som kan vara bra att känna till.

Markerar man en fil i Sitemanager, får man i Inspector-paletten (kallas i den svenska versionen för Kontextpaletten) information om filens namn, sökväg, storlek, osv.

I fliken bredvid Inspector, i den som kallas View Controller, kan du också ställa in vilka kolumner som skall visas i sajtfönstret (se bilden här bredvid).

Under fliken Colors får man reda på vilka färger man skapat. Denna finess har man nog inte så stor användning för i början, men kan vara bra att känna till. Jag berättar mer om den så småningom.

Det kan också vara bra att veta att man kan högerklicka i sajtfönstret eller på en fil (Ctrl + klicka i Mac), för att på så vis snabbt komma åt olika funktioner.

Du kan själv klura ut det mesta genom att testa dig fram. Alla dessa funktioner går ju också att nå via menyerna och paletterna.

Att arbeta med en sajt innebär t.ex att man låter GoLive uppdatera sökvägar till flyttade eller omdöpta filer, ändra uppgifter om nya bildstorlekar, osv. Man slipper alltså en massa onödigt arbete.

GoLive skapar också en kopia av det arbete man gjort, vilket innebär att man kan se en backup-mapp i den mapp man förvarar sin hemsida.

Backup.site brukar denna fil eller mapp heta och man hittar den ibland också i Site-fönstret. Kraschar datorn och du inte har sparat är det förmodligen denna fil som blir din räddning...

3. Importera en sajt

När man importerar en sajt gör man det enklast via menyraden File - New Site - Omport from Folder.

Bilden visar rutan som då kommer fram på skärmen.

Man väljer den mapp där hemsidan och allt material ligger. Dessutom anger man vilken fil som är startsida.

Här har jag valt mappen med filerna till min webresurs. Eftersom min startsida heter index.html. markeras den automatiskt av programmet.

När man klickar på Import letar GoLive igenom den mapp man valt och skapar en datafil, som sedan används för att hålla ordning på alla filer i sajten.

Därför är det lämpligt att hela sajten ligger så samlat som möjligt. Helst bör man välja en eller ett par mappar med alla sajtens filer i. Då blir det lättare att arbeta med sidorna senare.

Datafilen heter sajtens namn plus tillägget .site. Min sajt heter därför "Jonas_Webresurs.site". Datafilen är den man skall öppna, för att GoLive skall förstå att man vill arbeta med sajten.

Det går alltid att öppna sajtens filer och göra ändringar i dem. Men då uppdateras inte datafilen och GoLive meddelar att filerna inte stämmer. Ta därför för vana att alltid öppna datafilen när arbetet med sajten skall göras!

GoLives Filhanterare

GoLive använder ett särskilt fönster för att visa alla filer och mappar som sajten innehåller. Jag kallar detta för filhanteraren. Den påminner om Utforskaren i Windows, men ser lite annorlunda ut i Mac-versionen av GoLive.

Flikarna

Längst upp i filhanteraren hittar du några flikar. Jag har redan nämnt dem, men här skall vi titta lite närmare på dem.

Flikarna heter Files, External, Designs, osv. Dessvärre är deras nytta inte särskilt väl dokumenterad i hjälpfilerna och i de böcker jag läst säger man inte heller mycket om dem.

Den flik man använder mest är Files. Du ser den på bilden här bredvid.

Här får man en god överblick över alla de filer och mappar som sajten innehåller.

Filerna är organiserade efter olika kategorier eller kolumner. Först visas namnet, sedan typen av fil, storlek och liknande.

I avsnitt 1 visade jag hur de ser ut. Vill man ändra vilka kolumner som skall visas gör man det under fliken View Controller, som finns bredvid Inspector (Kontextpaletten). Jag berättade om det i avsnitt 2. Du ser också en bild av filhanteraren här nedanför.

Till vänster om mapparna finns plus- och minustecken (eller pilar i Mac), som indikerar att man kan fälla ut eller in innehållet i mappen.

I Status-kolumnen ser man vilka filer som innehåller fel. Den gröna symbolen är av en insekt. Det engelska ordet för insekt är "bug", som på datorspråk betyder att det finns ett fel.

Dessvärre varnar GoLive för alla typer av fel och jag har inte hittat något enkelt sätt att välja ut vad jag själv tycker är ett fel.

Exempel: Skriver jag <A namne="1"> så varnar programmet för att det saknas ett </A> i länken. Detta trots att webbläsarna vet att det inte är en länk utan ett bokmärke.

Fortsätter vi titta på de olika kolumnerna, hittar vi Size, som berättar om storleken på en mapp eller fil. I de övriga kolumnerna kan man se när en fil ändrades (Modified) och om den är skrivskyddad (Locked).

En bra funktion är att det i kolumnen Used går att se om filen används. Många gånger är det svårt att överblicka det och här får man alltså hjälp med att hitta sådana filer.

Kolumnerna Kind och URL talar sedan om vilken slags fil det är, samt vilken adress den har.

Tips!
Genom att högerklicka på en fil eller mapp får man fram olika alternativ, som man annars måste leta fram långt ner i menysystemet. Det är t.ex lätt att byta namn på filer och få GoLive att uppdatera alla sidor som hänvisar till det gamla filnamnet.

Om du vill lära dig mer om hur man importerar filer till sajten, samt underhåller den, kan du läsa mer på sidan med undervisningsmaterial och övningar i webbdesign. Läs mer >>

4. Mallsidor

När man skapat en sajt i GoLive har man möjlighet att koppla ett bibliotek till den. I detta lagrar man sådan information som skall finnas på flera sidor, t.ex ett sidhuvud och en sidfot. I stället för att sedan gå in och ändra på varje sida, kan man enkelt uppdatera filen i biblioteket och be Dreamweaver göra de nödvändiga uppdateringarna av varje fil.

Ett bibliotek innehåller bl.a mallsidor (templates). Dessa använder man när layouten är densamma för flera sidor och när det är viktigt att de ser likadana ut.

Det betyder att man kan skapa ett bibliotek med flera mallsidor, för att skapa en verkligt effektiv sajt. Man har då mallsidor för nya dokument och behöver bara uppdatera sin biblioteksfil för att förändra flera sidor samtidigt.

För att titta lite närmare på dessa funktioner skall vi först ta fram sajtfönstret. Genom att klicka på rutan med dubbelpilen, längst nere till höger i sajtfönstret, får du upp något som kallas för Site Extras. Det är här mallsidor (templates) hamnar. Underligt nog kallas mappen för Stationaries.

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

• Skapa först en sida med all text, kod och annat som skall utgöra mallen
• Spara filen som valfritt namn i den mapp som heter Stationary, som du hittar i mappen Data i din sajt.

Man kan också dra en fil i sajtfönstrets vänstra del, till Stationary på andra sidan.

När man dubbelklickar på en fil i Stationary-mappen, får man alltid upp en fråga om man vill ändra filen eller om man vill skapa en ny fil utifrån mallen. GoLive ser alla filer i Stationary som mallsidor.

Förutom att mallsidor finns i sajtfönstret, kan man också hitta dem i objektpaletten. Där finns en särskild flik för sådana objekt man skapat själv. Site Extras heter den. Jag går dock inte närmare in på alla dessa funktioner här, utan tar upp det på en senare sida.

5. Komponenter

I förra avsnittet berättade jag om hur man skapar mallsidor.

I samma fönster i Site Managern (sajtfönstret) finns en mapp som heter Components.

Det är i den man sparar alla sådana filer, som inte räknas som mallsidor, men som ändå innehåller kod som man vill kunna återanvända. Mallobjekt skulle man kunna kalla dem.

Fördelen med att använda komponenter eller mallobjekt är att man kan skapa standardiserade formulär och tabeller och använda dem på flera olika sidor.

Detta förfarande liknar det jag berättar om på sidan Ändra grundinställningarna, närmare bestämt hur man anpassar objektpaletten.

Skillnaden är dock att om man ändrar något i koden för en "component" räcker det med att uppdatera filen i Components. Då uppdaterar GoLive alla filer som använder detta objekt automatiskt!

För att skapa en viss komponent gör man så här:

• Gör iordning det objekt du vill spara som en komponent, t.ex ett formulär eller en tabell
• Klicka på Sidhanteraren (Page Inspector eller Inspect Page Settings)
• I paletten Inspector tar du fram fliken HTML (se bilden ovan)
• Klicka på knappen "Settings to use Page as a Component"
• Spara filen som valfritt namn i den mapp som heter Components, som du hittar i mappen Data på din sajt.

GoLive gillar inte att man bara sparar fragment av en Html-sida. Den vill helst ha en hel sida och dessutom korrekt kodad. Detta kan vara en aning irriterande, i synnerhet om man bara vill använda sig av en knapp i ett formulär som komponent.

Et annat sätt att använda färdiga komponenter blir då att skapa nya objekt i objektpaletten. Detta berättade jag om på sidan Ändra grundinställningarna >

För att använda ett objekt i Component på en eller flera sidor och automatiskt får uppdatering av alla sidor som använder objektet, krävs att man använder funktionen Smart. Den fungerar så här:

• Öppna valfritt dokument
• Klicka på Smart-fliken i objektpaletten
• Dra ett Smart-Object-objekt över på sidan (se bild) och välj vilken fil i mappen Component objektet skall hämtas ifrån
• Nu skapas ett objekt utifrån koden i filen du valt i Component

Som du ser i bilden har jag skrivit fel. Men jag behöver inte ändra på varje sida utan det räcker med att uppdatera rätt fil i Component. Då jag sparar den får jag upp ett felmeddelande, om att någon eller några filer använder detta objekt och därför behöver uppdateras. Klicka på Ok för att bekräfta uppdateringen.

Du kan läsa mer om SMART-funktionerna på sidan SMARTa objekt >

6. Felsökning

När man arbetar med en sajt händer det ibland att man måste rätta till fel som uppstått. Då kan man använda GoLives verktyg för att rätta flera fel samtidigt.

Ett vanligt fel är att interna länkar slutat fungera, t.ex eftersom man skrivit in felaktiga adresser, redigerat sidor utanför GoLive eller importerat sådana felaktiga filer.

I det här avsnittet skall vi därför titta lite på hur man rättar till olika fel. Jag har valt ut tre olika situationer, som kräver tre olika verktyg.

a) Fel i koden

Det bästa sättet att upptäcka fel i koden är via fönstret för filhanteraren, alltså den översikt GoLive öppnar då man klickar på sin site-fil.

Under fliken Files ser man nämligen sina filer och i kolumnen "Status" finns markeringar för alla de fel programmet hittat. Jag berättade om detta i avsnitten 1-3 ovan.

Till höger ser du en något uppförstorad "bugg", som programmet har hittat. För att rätta till filen med felet kan man dubbelklicka på dess ikon.

Felet som indikeras finns i koden. Därför måste man växla till Html-läget (=siffran 1 i bilden till höger).

Klicka på blixten för att kontrollera koden (2).

Den röda bollen symboliserar felaktigheter i koden. Den gula triangeln varnar för möjliga fel (3)

När man väljer ett fel i listan får man se felet markerat i koden och kan då ta ställning till om man vill ändra eller inte (4).

Kontrollen av felen i koden hittar inte alla fel. Programmet varnar t.ex inte för felaktiga sökvägar till bilder eller felaktiga länkadresser. Sådana fel måste man därför leta efter på andra ställen.

I avsnitt 4 berättade jag om "Site Extras". Det var en funktion man tog fram genom att klicka på en särskild knapp längst nere i fönstret för filhanteraren.

Bilden till vänster visar hur denna knapp ser ut. Filhanteraren visar då två fönster, ett med alla filer man har i sajten och ett med alla filer som saknas.

För att se alla sådana fel, klickar man bara på fliken Errors, som du ser vid siffran 1 i bilden nedanför. Programmet visar då en lista med alla fel där sökvägen till en fil saknas eller en länk verkar vara felaktig (2).

Programmet indikerar även andra fel, som man måste undersöka var för sig (3).

För att få reda på vilket felet är måste man öppna filen i listan. Enklast är att dubbelklicka på den. Programmet meddelar då vad den hittat och man kan sedan välja att rätta till felet eller inte.

Bilden här nedanför visar hur ett sådant felmeddelande kan se ut. En svaghet är att man inte redan i filhanteraren kan se viken slags fel det är.

Man kan inte heller sortera felen i den ordning man själv vill, t.ex för att sila bort alla fel som inte är "riktiga" fel.

Förhoppningsvis lägger Adobe in sådana hjälpmedel i kommande versioner. Har man tusentals sidor på sin sajt, som jag har, är det nästan omöjligt att sitta och öppna varje fil för sig!

Ett smidigt sätt att ändra felaktiga sökvägar till bilder, är att använda point-and-shoot-verktyget.

Det ser ut som en liten kanelbulle och finns bl.a i Inspector-paletten (kontextpaletten).

I stället för att klicka å mappsymbolen och leta upp rätt fil manuellt, tar man tag i point-and-shoot-knappen och drar den till rätt bild.

Bilderna nedan visar var verktyget finns (vänstra bilden) och hur det ser ut när man använder det (högra bilden):

c) Fel sökvägar till många bilder

Om man upptäcker att man har många fel, är det väldigt tidsödande att försöka rätta till dem ett och ett. Förmodligen har man många fel som liknar varandra, t.ex en länk till startsidan som inte fungerar på alla filer i en hel mapp.

Om man har många fel som liknar varandra tjänar man då mycket tid på att använda sök- och ersätt-funktionerna.

I det exempel jag använt mig av här har jag hittat ett fel, som innebär att sökvägen till alla bilder är fel. I stället för att leda till "nya_bilder", är sökvägen i stället riktad mot "bilder". Därmed syns inte bilderna på sidan.

För att ändra alla förekomster av "bilder" till "nya_bilder" går jag in under Edit (Redigera) och väljer fliken Find. Fliken är markerad med siffran 1 i bilden:

Jag skriver in det uttryck jag vill söka efter i den översta rutan. Eftersom jag pratar om bilder i texten, väljer jag att skriva in uttrycket "/bilder/" i stället för "bilder". Annars riskerar man att programmet byter ut även det vanliga ordet "bilder" med "nya_bilder".

För att minimera sådana fel kan man ställa in att programmet bara skall leta efter hela ord och meningar (se siffran 2 i bilden).

Jag skriver sedan in det ord jag vill ersätta med (3).

Eftersom jag vill ersätta texten i koden markerar jag det (4).

Slutligen väljer jag ut de filer som programmet skall söka igenom och ändra i (5).

Det går att välja enstaka filer eller hela mappar. Väljer man mappar kommer dessa inte att visas i fönstret. Därför gäller det att ha lite koll på vilka filer programmet verkligen söker igenom.

GoLive hade tidigare en liten bugg som gjorde att den ibland slarvade med genomsökningen av väldigt stora sajter. Både därför och för att själv ha kontroll bör man alltså välja mindre enheter att söka i. Ett tips är att ta en mapp i taget.

När allt är klart klickar man på Replace All, som betyder "Ersätt alla".

En liten pil indikerar vilken fil som söks igenom.

När sökningen är klar kommer en ruta fram som frågar om programmet verkligen skall ersätta med det man sagt.

Här har man sista möjligheten att stoppa sök- och ersättningen, om man upptäcker att man gjort nåt fel.

Tips!
Det vanligaste felet man gör är att välja ut fel uttryck. Det är t.ex lätt att välja "bilder" i stället för "/bilder", med följd att även vanliga ord ersätts. Tänk därför noga igenom vilket ord som skall ersättas!