S T UDE NT DAT OR UT B ILDNING E N

MALMÖ HöGSKOLA

Kurs 6:1

Att publicera på webben

Beijerskajen 8, K3, källaren, sal Apollo (A01:303), 205 06 Malmöwww.bit.mah.se/undervisning/SDM

1

Att publicera på webben, del 1

HTML HTML står för HyperText Markup Language och är inget interaktivt programmeringsspråk. Det är ett så kallat Markup Language, en kod som används för att formatera text och bilder för att de skall kunna renderas i en webbläsare. Det är detta formatteringsspråk som används för att publicera information på Internet. Ett HTML-dokument består av fördefinierade så kallade taggar som används för att strukturera text, bilder, länkar när den visas i en webbläsare. Taggarna känns lätt igen då de alltid står inom < >, det ser alltså ut så här <TAGG>. En bra sida på Internet för att i några grundläggande lektioner lära sig HTML är: http://www.idg.se/, leta efter Webstudio (finns under Design).

Webbläsare De två vanligaste webbläsarna idag är Netscape Communicator och Internet Explorer. Vid publicering av en hemsida är det alltid bra att testa sidan i båda dessa webbläsare eftersom samma HTML-dokument kan se olika ut i de båda webbläsarna. En annan webbläsare som blivit större på senare tid är Opera. Det finns givetvis en standard för vilka taggar man kan använda, nu är man uppe i version 4 av HTML och i framtiden ska man gå över till XHTML . Ett annat problem som inte har med själva webbläsaren att göra är att man ofta installerar små insticksprogram (plug-ins) som ger ökad funktionalitet åt webbläsaren. Några av de vanligaste är: Flash – presenterar filer i swf-format. Sen Microsoft lagt med Flash i sin grundinstallation för Internet Explorer har Flash i stort sett blivit standard för vektoranimering på Internet. Java – den virtuella maskinen är också ett insticksprogram. Det finns olika versioner av virtuella maskiner. Tidigare hade Netscape och Internet Explorer sin egen virtuella maskin men framöver kommer man att få installera Suns egen. VRML – var ett tag tänkt som standard för 3D-visualisering på webben men har aldrig slagit igenom. Det finns ett flertal andra 3D-format som lanserats. Ljud – även här finns en uppsjö av olika format som kan användas. Problemet med insticksprogrammen är just att de oftast är valfria och att de flesta användare alltså inte säkert har tillgång till just den teknik du vill använda för din hemsida. Flash är för tillfället det enda insticksprogrammet som kommer att ha så stor spridning att det kan ses som en standard.

Länkar: Fakta & tutorials: http://www.idg.se/ - grunderna i html. http://www.internic.net/alpha.html - domän namn http://www.w3.org/ - the world wide web consortium. http://internetworld.idg.se/ - tidning om Internet http://www.tashian.com/htmlguide/ - how they do that with html! http://www.pagetutor.com/ - html tutorials från nybörjar till avancerad nivå. http://www.internet.com - har länkar till allt inom webbdesign http://www.google.com - en av de mest pålitliga sökmaskinerna.

2

Webbdesign & Inspiration: http://capdesign.idg.se/default.asp - Nordens största tidning för grafiska formgivare. http://www.webmonkey.com - design och tutorials för webbutvecklare. http://www.snyggt.com - en samling med snygga länkar. http://www.creationstorm.com - kreativitet på webben. http://www.hoogerbrugge.com/ - animationer på hög nivå. http://buzz.bazooka.se/ - webbplats där besökare lägger upp sina egna länktips. http://www.webbpennan.com/links.asp - Webbpennan är till för dig som skriver och redigerar webbtext. http://www.upphovsratt.nu - om upphovsrätt

PUL Personuppgiftslagen är till för att skydda den enskildes integritet. Den innebär att man inte har rätt att behandla (samla in, lagra, samköra, vidarebefordra m.m.) personuppgifter om man inte har fått godkännande från den person vars uppgifter man hanterar. Det finns undantag från regeln om det är föreskrivet i lag, om det är nödvändigt att behandla uppgifter som vid olika avtal och för arbetsuppgifter som har samband med myndighetsutövning. Information om t ex politisk åsikt, religon och hälsa omfattas av speciellt stränga regler.

Planera en webbplats När du skapar webbsidor till en webbplats bör du tänka på följande:

• Vilket innehåll ska webbplatsen ha? • Hur ska detta innehåll vara strukturerat för att den som använder webbplatsen lätt ska kunna

hitta i materialet? • Vilken layout är lämplig med tanke på det budskap du vill förmedla?

Målgrupp Varför ska vi skapa en webbplats? • Vilka behov ska den fylla? Ska vi använda den till att lagra information på eller informera, upplysa eller kommunicera med? Fundera varför vi ska använda en webbplats till denna kommunikation istället för t ex en trycksak? Vem ska vi kommunicera med? • Vilka vi vill nå via webbplatsen (=målgruppen)? • Vilka förkunskaper har målgruppen vad det gäller webbplatsens innehåll?

Struktur Det är viktigt att besökaren lätt kan ta sig fram mellan dina sidor. Det som avgör hur lätt det är att ta sig fram på webbplatsen är strukturen och navigeringsuppbyggnaden. Ta gärna god tid på dig att tänka igenom hur dina sidor hör ihop, Finns det en passande rubrik för innehållet på en samling sidor bör man samla dom under en meny. Tänk dig själv in i situationen att vara en besökare till din webbplats och hur man som ny besökare tänker för att hitta rätt information. Använd papper och penna för att strukturera upp en webbplats. Du kan spara mycket tid om du har en klar bild över hur din webbplats ska utformas.

3

Layout Bland det viktigaste att tänka på när du skapar webbsidor är:

• Sidorna ska vara lätta att läsa • Texten ska vara tydlig mot bakgrunden • Texten ska inte vara för liten • Textspalter bör inte vara för breda • Stycken bör inte vara för långa • Använd inte kraftiga bakgrundsmönster på sidor med text

Komma igång Starta Dreamweaver För att starta Dreamweaver klickar du på Start, peka på program och välj Dreamweaver 3.

Arbetsytan Dokumentfönstret består av en titelrad för den aktuella filen som är öppen, den blåa raden Normalt visas alltid dokumentfönstret och några paletter. När du startar programmet så visas ett antal standardpaletter, Objects (Objekt), Properties (Egenskaper) och Launcher (Startknappar). Vilka vi kommer att beskriva mer nedan.

Paletter Det finns ett flertal paletter att välja mellan och du bestämmer själv vilka som ska visas. För att visa eller dölja paletter klickar du på Fönster-menyn och på den palett du vill visa eller dölja. Paletter som visas är markerade med en bock. Behöver du ej paletten så stänger du ner den via att klicka på X längst upp till höger eller vänster på den blå raden i paletten övre högra hörn.

Menyrade

Paletter

Dokumentfönst

Statusrad

4

Objects-paletten Via Objects kan du infoga olika objekt du vill ha på sin webbsida. Genom att föra pekaren över de olika knapparna på paletten och väntar en liten stund så får du upp en textruta som beskriver vad funktionen innebär. De mest använda funktionerna är Infoga bild och Infoga tabell, vi kommer senare att beskriva några av dessa funktioner. Launcher-paletten (Startknappar) I paletten kan man öppna och stänga andra paletter och olika verktygsfält.

Skapa en webbplats Genom att definiera en webbplats innan du börjar göra enskilda webbsidor så underlättas administreringen av webbplatsen. När du skapar dina webbsidor så inser du snart att det blir många filer och bilder inom webbplatsen. Du kan bl a flytta och byta namn på filer och dessa uppdateras lätt, kontrollera länkar och uppdatera länkar som brutits. Via webbplatshanteraren får du också upp den trädliknande struktur som webbplatsen har osv. Innan du börjar ditt arbete med dina webbsidor så bör du definiera din webbplats. Detta gör du via att använda textmenyn Site och New Site och följande fönster öppnas:

1. I fönstret för Local Info skriver du in namnet på webbplatsen, ex "Mina hemsidor" i det tomma fältet bredvid Site Name:.

2. I det tomma fältet bredvid Local Root Folder: skriver du in sökvägen där du spara din webbplats lokalt på din hårddisk. Du kan också via att trycka på mappikonen efter fältet söka reda på den mapp du ska spara dina hemsidor.

3. Skriv även in den adress som du kommer att publicera din sida på i fältet HTTP Address:.

Sedan väljer du Web Server Info fältet och följande fönster öppnas:

Det första du gör är att välja vilken Server Access:, i de flesta fallen gäller FTP. Sedan får du upp de övriga fälten som du också fyller i. Är du inte säker på vilka uppgifter du behöver för att koppla upp dig mot server du använder så kontakta din tekniker eller handledare för att få dessa uppgifter. Klicka på OK. Webbplatsen skapas och visas i ett eget fönster. I fönstret

visas en översikt för din webbplats struktur (nu är den tom beroende på att vi ännu inte har skapa några nya filer i mappen). Till vänster under fältet Remote Site kommer det att visas vilka filer som är publicerade på servern och till höger Local Folder anges vilka filer som är lagrade lokalt på din hårddisk.

5

Skapa en tom webbsida Du kan skapa en ny tom webbsida på flera olika sätt. Vi kommer här att utgå från platsfönstret. Högerklicka i det högra fönstret och välj ny fil på snabbmenyn. En ny tom webbsida skapas. Dubbelklicka på filen för att öppna den.

Redigera webbsidor

Skriva in text När du skapat en ny, tom webbsida visas den i dokumentfönstret. Det är i dokumentfönstret som du skriver in text och infogar bilder, tabeller mm som du vill ska visas på din webbsida. När du har fönstret öppet är det bara till att skriva in texten. Precis som i en ordbehandlare hoppar Dreamweaver automatiskt till en ny rad när du trycker på Enter. Om du vill ha ett nytt stycke med blankrad trycker du bara på Enter. Vill du däremot ha ett nytt stycke utan blankrad trycker du på shift + Enter.

Formatera text När du ska formatera texten på din webbsida så använder du paletten Properties (Egenskaper) där du hittar de mest förekommande inställningar som behövs för redigering av din text. Du kan även använda textmenyn Text om du vill göra mer avancerade inställningar men för det mesta räcker det att använda de funktioner som finns på paletten. Som vi tidigare beskrivit så hittar du paletten under textmeny Windows och där väljer du paletten Properties (Egenskaper)och följande fönster öppnas för paletten:

Markera den text du vill formatera och välj några av följande funktioner på paletten:

1. Formatmall där kan du välja mellan olika rubrikmallar. 2. Teckensnitt där kan du välja olika teckenlistkombinationer, 3. Teckenstorlek där kan du välja vilken storlek på tecknen, du kan inte ange storleken i punkter utan endast i färdiga steg mellan 1 - 7. 4. Färg, via att klicka på knappen kommer det upp en färgpalett och du kan välja vilken färg du vill ha på markerad text. 5. Fet stil. 6. Kursiv stil. 7. Förändra placering av texten på sidan, höger, centrerad eller vänsterställd text. 8. Hjälp, klicka på knappen och du kommer direkt till hjälpfunktionen och kan där kan du få svar på dina frågor. 9. Punktad lista skapas. 10. Numrerad lista skapas. 11. Minskat indrag av texten. 12. Ökat indrag av texten.

6

Lägga till bilder För att en webbsida ska bli trevligare, lättare att läsa och titta på så har man möjlighet att använda bilder. Bilderna på en webbsida är aldrig inbakade i sidan utan det finns en länk från sidan till den plats du har sparat bildfilen. För att kunna visa en bild på webben så måste bilden vara sparad i filformaten JPG eller GIF. För att infoga bilder på en webbsida:

1. Klicka på Insert-menyn och välj Image eller klicka på Insert Image i paletten Objects. Dialogrutan Välj bildkälla visas.

2. Leta upp önskad Bild.

3. Om du vill se hur bilden ser ut direkt i dialogrutan markerar du Preview Images. 4. Klicka på Select (välj). 5. En varningsruta visas eventuellt nu där du blir informerad om relativa sökvägar. Klicka på OK. 6. En varningsruta dyker upp och påminner att bilden inte finns sparad i din webbplats. Om du

vill att bilden ska sparas i webbplatsen klickar du på Ja. Dialogrutan Kopiera fil visas. Välj var i webbplatsen bilden ska sparas. Klicka på Spara.

När du har infogat bilden i programmet förändras paletten Properties (Egenskaper) och får ett nytt utseende för de egenskaper som kan förändra bilder, paletten förändras enligt bilden nedan:

I fönstret kan du göra och se följande inställningar för bilden: W, bredden på bilden i enheten pixlar. H, höjden på bilden i enheten pixlar. Src, var bilden finns sparad. Link, om bilden är länkad och går till annan sida eller bild. Align, justeringmöjlighet hur bilden ska förhålla sig till texten, webbläsarstandard, överst, mitten, nederst osv.

7

Alt, du kan skriva in en alternativtext vad bilder innehåller. Denna text visas som en textruta i webbläsaren. Detta är ett bra alternativ om någon har en äldre version av webbläsare som har svårt att visa vissa bilder så kommer texten upp istället.

Egenskaper för en webbsida Välj i textmenyn Modify och Page Properties... och du får upp följande fönster: Title: titel på vad sidan handlar om Background Image: via att klicka på knappen Browse... kan du välja att lägga in en bakgrundsbild på din sida. Background: ger dig möjlighet att istället för en bakgrundsbild lägga in en bakgrundsfärg, tryck på den rutan efter texten och du får upp en palett med färger. Link: lägga in färg på länkar. Visitied Links: lägger in en färg på när du besökt en länk. Active Links: lägger in en färg på aktiv länk

Skapa en tabell Tabeller är mycket användbara för att få en snygg layout och att styra upp innehållet på webbsidan. När du använder tabeller kan du på ett enkelt sätt presentera text och bild i rader och kolumner. När du ska infoga en tabell på din webbsida så använder du Objects-paletten och väljer där knappen Infoga tabell och följande fönster öppnas:

I fönstret kan du göra följande inställningar för att skapa en tabell: Rows, anger du hur många rader du vill ha i din tabell. Columns, anger du hur många kolumner du vill ha i din tabell. Bredd, Anger du hur bred tabellen ska vara, du kan välja att ange enheter i procent eller i pixlar. Border, anger du hur tjock kantlinjerna ska vara på din tabell, 0 betyder att kanterna blir osynliga i din webbläsare. Cell Padding, anger du hur stort avståndet ska vara från cellens innehåll och till cellens kant, anges i enheten pixlar. Cell Spacing, anger du hur tjock linjerna ska vara mellan cellerna, anges i enheten pixlar. När du skrivit in dina uppgifter i fönstret tryck på OK. Egenskaper för hela tabellen Om du markerar hela tabellen så ser du de egenskaper som gäller för hela tabellen på Objects-paletten, enligt fönstret nedan:

8

Här kan du se de grundinställningar som är gjorda på tabellen och du kan även ändra dessa. I Objects-paletten kan man bl a förändra följande egenskaper: Rows, ändra antal rader i tabellen. Cols, ändra antalet kolumner i tabellen. W, ändra bredden på tabellen antingen i pixlar eller i procent. H, ändra höjden på tabellen antingen i pixlar eller i procent. Align, välja justering av tabellens läge på webbsidan, vänster, höger eller centrerad. Border, ändra kanten att vara osynlig eller synlig, enhet är angivna i pixlar. Bg, kan du antingen länka en bakgrundsbild (övre fältet) eller välja en färg på färgpaletten som visas när du trycker på knappen. Brdr, om du har en kantlinje kan du välja en färg på den via färgpaletten som visas när du trycker på knappen. Egenskaper för enskild cell eller rad När du arbetar i en enskild rad eller cell så kommer du enbart att arbete inom cellen eller radens område. Dina förändringar av egenskaper berör endast den enskilda cellen eller raden. När du ställer dig i en cell eller rad kommer Objects-paletten att förändra enligt nedan fönster:

Den övre delen av paletten är densamma som när du bearbetar text. Den nedre delen visar egenskaper för enskilda cellen. De inställningar du bl a kan göra i fönstret är: Horz, var i fältet du vill placera text och bild i cellen i horisontellt läge, vänster, centrerad eller höger. Vert, var i fältet du vill placera text eller bild i cellen i vertikalt läge, toppen, mitten, botten, baslinje. W, ändra bredden på cellen eller raden. H, ändra höjden på cellen eller raden. Bg, kan du antingen länka en bakgrundsbild för cellen eller raden (övre fältet) eller välja en färg på färgpaletten som visas när du trycker på knappen nedre fältet. Brdr, om du har en kantlinje för cellen eller raden kan du välja en färg på den via färgpaletten som visas när du trycker på knappen. Ändra storlek på tabell, enskild cell eller rad Du kan på ett enkelt sätt utan att använda paletterna ändra storleken på höjd eller bredd på hela tabellen eller enskild cell eller rad via pekaren. Ställ dig mitt på

9

kantlinjen mellan två celler. Pekaren kommer att ändra utseende enligt bilden nedan: Slå samman eller dela upp celler På Properties-paletten finns två små knappar som du kan använda för att slå samman två eller flera celler eller dela upp en cell till flera celler. Knapparna till att slå samman respektive dela upp cell hittar du längst nere till vänster på Properties -paletten. Tänk på att du måste stå i tabellen för att egenskaperna ska visas på paletten. Du har en tabell som består av 2 rader och 4 kolumner och du vill slå samman de två mittersta cellerna på första raden, markerar dessa två celler. Sedan väljer du på Properties-paletten knappen Merges selected cells using spans (Slå samman celler) och resultat blir enlig bilden.

Vill du i istället dela upp en cell till flera celler ställer du dig i cellen och väljer i Properties-palettens knappen Split cells into rows or columns (Dela upp en cell i rader eller kolumner). Ta bort rader, kolumner eller hel tabell För att ta bort en rad, kolumn eller hel tabell måste du första markera det du vill ta bort och sedan trycker du på knappen Delete. Design av tabell Du kan på ett enkelt sätt byta färg och stil på din tabell med hjälp av fördefinierade färgscheman fört text, bakgrundsfärg, länkar osv. Markera tabellen och välj i textmenyn Commands och Format Tabel. Prova dig fram och göra olika inställningar i fönstret och när du är klar trycker du på OK. Skapa Länkar För att en besökare ska kunna förflytta sig mellan dina webbsidor på ett enkelt sätt måste du använda dig av hyperlänkar. Textlänkar är understrukna och visas vanligen med en annan färg än den övriga texten. När du pekar på en länk i en webbläsare ändras muspekaren till en pekande hand. Du kan länka via text, bilder, del av en bild osv. Intern länkning via text När du skapar en webbplats så har du i allmänhet flera sidor och vill gå mellan dessa. För att göra det måste du göra en länkning mellan dessa olika sidor.

1. Markera texten/bilden som du vill ska fungera som en länk. 2. Klicka på mappikonen till höger om fältet Link i paletten Properties.

Dialogrutan Select file visas.

Markera den fil du vill länka till och tryck på knappen Select. Spara filen. För att kunna se om länken fungerar måste du starta webbläsare via att välja i textmenyn File och Preview in Browser välj webbläsare och testa sedan länken i webbläsare.

10

Länka till annan webbsida på Internet När du vill skapa en länk till en annan webbsida på Internet måste du känna till sökvägen.

1. Markera texten på din webbsida du vill ska fungera som en länk. 2. Skriv adressen till webbsidan i fältet vid Link i paletten Properties (Egenskaper), t ex

http://www.mah.se. 3. Tryck på Enter

Länka till e-postadress Om du vill att någon ska skicka e-post till dig så kan man göra en länk med sin egen e-postadress. Ta fram Objects-paletten och välj knappen Insert E-Mail Link (Infoga E-post länk) och följande fönster öppnas:

Skriv in den text som du vill ska länkas ifrån och din e-postadress och tryck på knappen OK. Följande text infogas automatiskt in i dokumentet: Kalle.Anka@ankeborg.se Spara dokumentet och startar en webbläsare för att pröva länken.

Förhandsgranska När du har sparat din webbsida vill du gärna se hur den ser ut i en webbläsare innan du publicerar sidan på Internet. Detta gör du genom att i textmenyn välja File och Preview in Browser.

Publicera på Internet Testa webbplatsen Innan du publicerar din webbplats och alla webbsidor på Internet finns det en del saker att tänka på och testa innan t ex att alla länkar är rätt och hur nedladdningstiden ser ut för olika sidor.

Kontrollera länkar Funktionen Kontrollera länkar är praktisk om du snabbt vill veta vilka länkar det finns fel i t ex om de leder till sidor som inte finns. Välja Site och Check Links Sitewide och följande fönster visas:

Kontrollen utför alltid två test: - Brutna länkar visar vilka webbsidor som innehåller länkar som leder till webbsidor som saknas i webbplatsen - Externa länkar visar vilka sidor som innehåller länkar som leder till webbsidor som finns utanför webbplatsen. Du kan åtgärda brutna länkar direkt i dialogrutan Link Checker.

1. Se till att visningsläget Broken Links (Brutna länkar) visas. 2. Klicka på länken i kolumnen Broken Links (Brutna länkar). 3. Skriv in den rätta sökvägen eller klicka på mappikonen som visas och leta fram rätt sida. 4. Klicka på Spara eller Stäng när du är klar.

11

Publicera När du har sparat ett antal webbsidor så gå till webbplatshanteraren eller starta upp den via textmenyn Site och Open Site, välj din webbplats. I webbplatshanteraren ser du nu de filer och mappar som finns på din webbplats som är lagrad lokalt på din hårddisk till höger i fönstret. Skulle du inte se dem så tryck på knappen Refresh på verktygsfältet så uppdateras fönstret och du kan se vad du har gjort efter förra gången du tittade. När du vill publicera dina sidor så måste du först koppla upp dig på den server som du ska publicera dina sidor. Du ställde in dessa uppgifter när du skapade din webbplats och nu behöver du bara välja knappen Connect i verktygsfältet och du blir uppkopplad. Sedan markerar du den mapp eller filer som du vill publicera och drar dessa över till det vänstra fönstret och till mappen på servern som du ska spara dina sidor i. Du kan också använda knappen Put på verktygsfältet.