3. Hämta och infoga bilder

Transkript

1 Sida 1 av 8 Lektion 1: sida 4 av 4 «Sida 3 av 4 Till kursens framsida 3. Hämta och infoga bilder Nu vet vi ju hur man sätter in text i sin sida. Men hur gör man med bilder? Det är inte svårt alls! Det enda krånglet är att komma ihåg var man har sin bildmapp... Vi kommer att få hämta en del övningsbilder i den här kursen, så det är lika bra att gå igenom precis hur man gör för att hämta hem dem, hur man sätter dem i rätt mapp, och hur man får ut dem på ens sida. Det fungerar precis likadant "på riktigt", fast istället för att ladda ned dina bilder från en webbplats kanske du sätter in dem i din bildmapp via din digitalkamera eller något liknande Spara en bild från nätet Låt oss säga att jag har en bild som jag vill använda på min sida: bilden heter yawn.jpg. (De vanligaste bildfilerna på nätet har ändelsen.jpg,.gif samt.png. Vi kommer att gå mer in på det i framtiden.) Bilden är hämtad från stock.xchng [ och används enbart i utbildningssyfte. Jag kan klicka en gång med höger musknapp på bilden, så får jag upp en meny:

2 Sida 2 av 8 Jag väljer Spara bild som (eller liknande; det skiljer sig litet beroende på vilken webbläsare man använder). Då får jag välja var i min dator jag vill spara bilden. Vi vill alltid spara våra bilder i bildmappen, så jag klickar i rutan Spara i högst upp och väljer Mina dokument, för det var ju där jag skapade min webbmapp, som i sin tur innehåller min bildmapp. När jag är i Mina dokument dubbelklickar jag på min webbmapp, "Mats webbplats", så att den öppnas. Där dubbelklickar jag på min bildmapp, "bilder", så att den öppnas. Nu får jag skriva vad bilden ska heta. Jag döper min till "yawn". Här finns en viktig grej: använd absolut inte å, ä, ö eller andra konstiga tecken! Dreamweaver är helylleamerikanskt och kan inte "se" bilder som har å, ä eller ö (samt andra knasiga symboler) i namnet. Håll dig till små bokstäver från a till z. Sedan är det bara att klicka på knappen Spara, så sparas bilden i min bildmapp. Man behöver inte ändra på något; programmet sköter alla inställningar själv. Nu finns bilden i min bildmapp, och då kan jag använda den i Dreamweaver utan problem! (Man kan använda bilder som finns utanför bildmappen med, men då blir det huvudbry när den ska publiceras. Så se alltid till att bilden du vill använda i din sida först finns i din bildmapp.) 3.2. Sätt in en bild i din sida Nu vill jag använda bilden jag sparade. Då går jag in på den sida jag vill använda bilden i. Sedan klickar jag på den rad jag vill att bilden ska vara på så att markören blinkar där (vi kommer att bli mycket mer exakta och sofistikerade i framtida lektioner, men just nu nöjer vi oss med att sätta in bilden på en tom rad):

3 Sida 3 av 8 Därefter går jag in på Insert > Image. Då visas fönstret Select Image Source. Här får jag välja precis vilken bildfil jag vill sätta in i min sida. Jag ser till så att det är namnet på min bildmapp som står i rutan Leta i. (Om det inte gör det så är det bara att klicka i rutan, så får du leta dig fram till bildmappen.) Då visas de bilder mappen innehåller. Jag klickar på den bildfil jag vill ha och klickar på knappen OK. Nu sätts bilden in i sidan! Men det kan hända att ditt Dreamweaver först slänger upp fönstret Image Tag Accessibility Attributes. (Det här fönstret dyker inte upp i alla Dreamweaver-versioner; om du inte får upp det så kan du strunta i det här.) Fönstret vill veta vad bilden ska ha för Alternate text -- alltså "alternativ text", vad som ska stå i bildens ställe om den inte syns hos besökaren. Det är en grej som också blivit Internet-standard på sistone, särskilt nu när Braille-plattorna blivit allt billigare och vanligare bland synskadade: om de besöker sidan känner de att det finns en bild där, men om du inte skriver något som alternativ text så har de ingen aning om vad bilden egentligen föreställer. Så det hör till artigt sätt att skriva en kort och kärnfull beskrivning av bilden i Alternate text-rutan, gärna på engelska om din sida riktas mot en internationell publik. Man brukar skriva ungefär såhär: Image: yawning man Mer än så behövs inte. Börja inte gå in på vilken färg han har på tröjan eller att han har rasande fina tänder. Tala bara om att här är en bild (Image) och vad den föreställer i så få ord du kan korta ned det till. Däremot kan du strunta i rutan Long description. Klicka på OK istället.

4 Sida 4 av 8 Sådär! Nu har vi en bild på vår sida. Här är det värt att nämna att när du fått ut dina sidor på nätet (steg 5 på den här sidan) så kan det hända att någon av dina bilder helt enkelt inte syns på din sida, även om du är 100% säker på att du gjort alldeles rätt. I så fall beror det med största sannolikhet på att just den bildens filnamn innehåller något av de förbjudna tecknen -- alltså å, ä, ö eller något annat skumt. Som tur är så är det lätt att döpa om en bild: gå in i din lokala webbplats, leta rätt på bilden som inte vill synas i paletten Files, högerklicka på den (eller Option-klicka om du har en Mac) och välj Edit > Rename (alltså "Döp om"). Då får du ge bilden ett nytt namn. Det är bara att skriva något nytt namn och klicka en gång någonstans bortanför filen så färdigställs namnet. Men även om du döpt om en bild behöver du ändå ta bort den feldöpta bilden från din sida och sätta in den som fått rätt namn. Allt det här gäller samtliga bilder, inte bara de du hämtat från nätet. Så om du t ex har ett eget digitalfoto som heter "öland" och använder den på någon av dina Dreamweaver-sidor så kommer den bilden inte att synas när du publicerat sidan förrän du: 1. Gått in i din lokala webbplats och öppnat sidan 2. Tagit bort den bråkiga bilden från sidan 3. Döpt om bildfilen i Files-paletten till exempelvis "oland" 4. Lagt ut den nydöpta bilden på sidan igen 5. Sparat sidan och publicerat den Krångligt, men så är det! 3.3. Justera en bild Nu ska vi justera bilden. Som du kanske minns så innebär det att placera den till vänster, i mitten, eller till höger på sida.

5 Sida 5 av 8 Börja med att klicka en gång på bilden så att den blir vald. Nu kanske du märker att Properties-fältet bytt utseende och att det finns en Align-ruta där -- och det vi använde för att placera texten hette ju Align... Men den rutan kan du strunta i, för den gäller bara bildens vertikala position! Med den kan man alltså bestämma om en bild ska finnas högst upp, längst ned, eller i mitten på det utrymme man placerat den i. Men detta gäller inte för vanliga sidor som den vi har, utan kräver grejor som tabeller och liknande för att det ska funka -- och det är något vi inte kommer att pyssla med förrän om ett tag. Så hur gör man för att justera en bild? Det finns flera olika sätt. Läs igenom hela stycket, för vissa sätt kanske saknas i just din version av Dreamweaver. I så fall finns det andra som fungerar! Om du använder en äldre version av Dreamweaver kanske du hittar tre små knappar som liknar de som används för textjustering i Properties-fältet: I så fall är det de du använder för att placera bilden: se till att bilden är markerad (alltså att du klickat på den), och klicka sedan på den knapp som visar åt vilket håll du vill ha bilden, så flyttar sig bilden enligt ditt val. Om du däremot inte har några sådana knappar så kan du gå in på menyn Format > Align istället och välja något där. Left är ju vänster, Center är mitten, och Right är höger. Jag klickar på bilden och går in på Format > Align > Center. Sådär! Nu är jag nöjd med min fina sida och vill spara den. 4. Save As Jag kan visserligen gå in på File > Save, som vanligt, men jag kan även gå in på File > Save As (Arkiv > Spara som) om jag vill spara sidan med ett särskilt namn -- t ex gasp.html. Då är det bara att skriva gasp i rutan Filnamn i fönstret som dyker upp, och sedan klicka på Spara. Här behöver man faktiskt inte bry sig om filändelsen, för så länge det står.html någonstans i rutan Filformat så sköter programmet det självt.

6 Sida 6 av 8 Som du ser på rutan Spara i högst upp så låter Save As-funktionen oss välja exakt var vi vill spara filen. I mitt fall nöjer jag mig med att spara den i min webbmapp. Men om du vill spara en fil någon annanstans så är det bara att bläddra fram den mapp du vill ha i rutan Spara i innan du klickar på Spara. 5. Publicera sidor med bilder i När jag nu sparat sidan så är det dags att publicera den -- och bilden! Man måste nämligen även publicera de bilder man använt på sidan: de finns inte "inbakade" i sidan som man kanske kunde tro. Så om du publicerar sidan men glömmer att publicera bilden och sen besöker sidan med din webbläsare så kommer du att upptäcka att det inte att finnas någonting där bilden skulle vara (utom möjligen den alternativa texten du skrev in). Du publicerar bilder på precis samma sätt som du publicerar sidor: klicka på bildfilen i Files-paletten och klicka på knappen Put file(s). Då laddas den upp till din webbplats på nätet. Men om du har flera nya bilder som du vill publicera är det litet onödigt att gå in i mappen och börja klicka på dem en och en. Då är det faktiskt lättare att bara klicka på själva bildmappen och publicera den istället, så förs hela rasket ut på nätet. Värt att nämna är att du bara behöver publicera bilden en gång. Även om du ändrar på sidans innehåll och publicerar en ny version så behöver du alltså inte ladda upp samma bild igen. Så länge den finns på rätt ställe i din webbplats på nätet så kommer sidan att återanvända den. Så jag publicerar sidan gasp.html. Sedan öppnar jag bildmappen i Files-paletten genom att klicka på det lilla plus-tecknet till vänster om den, klickar på bildfilen yawn.jpg, och publicerar den med. När jag då byter till Remote view så ser jag att sidan, bildmappen, och bilden i mappen förts ut på nätet! Du märkte nog att bildmappen skapades automatiskt: jag publicerade ju bara bilden, men nu finns även mappen bilder ute på nätet. Det beror på att Dreamweaver är jättenoga med ordningen, så den tar litet egna initiativ om användaren är en ansvarsfeg slarver.

7 Sida 7 av 8 (Om du sparat eller publicerat något men det av någon anledning inte dyker upp i Files-paletten så kan du behöva uppdatera paletten. Det är inget konstigt, utan fungerar i stort sett på precis samma sätt som när du uppdaterar en webbläsare: du tvingar bara paletten att ta en ny titt på allt innehåll i webbsidan. Då listas även det den kanske "glömde" förra gången. Du uppdaterar Files-paletten genom att klicka på den cirkelformade pilen till höger kontaktknappen.) Och man nu besöker följande sida så möts man av följande skönhet: mholmgren.qqq.hosting.barentshus.com/gasp.html Så gör man alltså för att spara en bild till bildmappen i sin lokala webbplats, sätta ut den på en webbsida, och sedan få ut hela rasket på nätet. Nu har vi gått igenom de allra yttersta grunderna i webbdesign! Men de är också de absolut viktigaste, för utan dem hade det inte blivit nånting alls. Nu när du kan skriva text och sätta ut bilder på nätet så är allt annat egentligen mest bara finesser och finlir. Men sånt är ju kul med, och vi sätter igång med det i nästa lektion. Nu är det dags för övningen!

8 Sida 8 av 8 Övning, lektion 1 Skapa en sida i din webbplats som heter index.html. För att den ska fungera rätt måste den ha ändelsen.html, och sidan index.php måste raderas från din webbplats på nätet. Skriv en presentation av dig själv på sidan. Använd olika format på texten där du tycker det behövs -- starta med en rubrik (alltså heading), t ex. Ställ in sidans utseende så att den har andra standardfärger än svart text på vit bakgrund. Du får gärna använda ytterligare färger på texten om det går i din version av Dreamweaver. Ställ in sidans standardteckensnitt till en annan typsnittsgrupp (om det går i din version av Dreamweaver). Klicka på en av miniatyrbilderna nedan. Då öppnas bilden i originalstorlek. Spara den stora versionen av bilden till din bildmapp enligt beskrivningen i kurstexten (se stycket Infoga bilder i sidan). Bilderna är hämtade från stock.xchng [ och används enbart i utbildningssyfte. Spara minst två av bilderna till din bildmapp och infoga dem i din sida. När du är nöjd med din sida kan du publicera den på din webbplats på nätet. Kom ihåg att du måste publicera bilderna med, annars blir det bara tomma lådor med ett litet "x" i där bilderna ska vara (det är symbolen för "bild saknas"). Det fixar du till genom att helt enkelt ladda upp bilderna till din webbplats. När du är klar e-postar du adressen till din nya sida (eller nya sidor om det är flera) till mats.holmgren@svefi.net så hör jag av mig till dig. Sedan kan du börja med lektion 2! «Sida 3 av 4 Till kursens framsida