Övningar i kursen Webbdesign 100p

Transkript

1 Övningar i kursen Webbdesign 100p Innehåll ÖVNINGAR I KURSEN WEBBDESIGN 100P... 1 INLEDNING OCH HISTORIA... 7 ORDNA EGET HEMSIDEUTRYMME HEMSIDOR MED HTML... 8 MÄRKEN I VÅR FÖRSTA HEMSIDA... 8 ATTRIBUT, BAKGRUNDSFÄRG OCH TEXTFÄRG... 8 TEXTFORMATERING... 9 Radbrytning <br>... 9 Förformaterad text <pre>... 9 Linjeavskiljare <hr>... 9 Rubriker <h1>... 9 Kursiverad <i>... 9 Fetstil <b>... 9 Understruken <u> Överstruken <strike> Nedsänkt <sub> Upphöjd <sup> Skrivmaskinstext <tt> Typsnitt, storlek och färg <font> Centrerar <center> Stycke <p> Stycke <div> Indrag <blockquote> Kommentarer <!-- --> BILDER <IMG> LÄNKAR Textlänkar till andra dokument <a> Länkfärger Textlänkar inom dokumentet Bildlänkar Länk till epostadress Bilder med aktiva områden (mappade bilder) LISTOR Numrerad lista <ol> Punktlista <ul> Listelement <li> Definitionslistor <dl>, <dt>, <dd> TABELLER Tabellkropp <table> Tabelltitel <caption> Tabellrad <tr> Tabellceller <th>, <td> RAMAR (FRAMES) Ramsida <frameset> Raminnehåll <frame> Länkar till andra ramar (name och target) Iframe Inline floating frame FÄRGER RGB och hexadecimal kod LJUD Inspelning av ljud Olika ljudformat Komprimmering av ljud Ljud på hemsidan Brogårdsgymnasiet, Kristinehamn

2 2. BILDBEHANDLING MED PHOTOSHOP INLEDNING VERKTYGSLÅDAN Markeringsram Markeringspensel Flyttverktyget Lassoverktyget Trollstav Beskärning Zoom Handen Airbrush Pensel och penna Suddgummi Övertoning Färgpytsen Klonstämpel Smeta ut Röda ögon FÄRGÄNDRING AV BILD Nyans Mättnad Ljushet LAGER TEXTVERKTYGET FORMVERKTYGET TONOMFÅNG OCH KONTRAST Histogram Utjämna Fyllnadsljus Bakgrundsljus Intensitet och kontrast Automatisk färg- och kontrastredigering Nivåer Ersätt färg Gråskalebild Invertera Tröskelvärde Färgreduktion Färgläggning av gråskalebild Övertoningskarta ANIMERING AV GIF-BILDER FILTER OCH EFFEKTER Brus Förvandla pixlar Förvrängning Oskärpa Skärpa Effekter FÖNSTRET FILLÄSARE GRUPPBEARBETNING FILINFORMATION WEBBFOTOGALLERI BILDSTORLEK, UPPLÖSNING OCH KOMPRIMMERING Bildstorlek och upplösning för utskrift Bildstorlek och upplösning för webben Komprimmering och interlaced (sammanflätad) BILDSKANNING BILDFORMAT TIFF Tagged Image File Format BMP Bit Map JPEG Joint Photografic Experts Group GIF Graphics Interchange Format Brogårdsgymnasiet, Kristinehamn

3 PNG (Portable Network Graphics) NU SKANNAR VI MÖNSTER BAKGRUNDER Bild Färdiga mönster Egna mönster Mönster med filtereffekter HEMSIDOR MED FRONTPAGE INLEDNING TEXTREDIGERING OCH NYTT STYCKE BAKGRUNDSFÄRG OCH BAKGRUNDSBILD VISNINGSLÄGEN LÄNKAR OCH BOKMÄRKEN Länkar till andra dokument Länkar inom dokument BILDER Infoga Bildbehandling Klickbara bilder Miniatyrer Genomskinlig GIF-färg RAMAR Dela ramar Iframe (infogad ram) TABELLER STYCKEINSTÄLLNINGAR LISTOR Enkel numrerad lista Enkel punktlista Flernivålista Hängande indrag (definierad term) FORMULÄR Skicka formulär med epost Formulärinnehåll med e-post i Frontpage METAKODER OCH SÖKMOTORER Metakoder med Frontpage Dirigera om användare Web-Standards och DOCTYPE WEBBPLATS Navigering Länkning från startsida Gemensamma kantlinjer Länkfält och gemensam kantlinje bästa metoden! Teman Hovringsknappar Dynamiska effekter Sidövergång Fotogalleri JAVASCRIPT INLEDNING TILL SKRIPT OCH DYNAMISK HTML (DHTML) HÄNDELSER Medelanderutan alert OnClick OnDblClick OnLoad - OnUnLoad OnMouseOver - OnMouseOut Byta bakgrundsfärg Byta textfärg Byta bild (rollover) PROGRAMMERING I JAVASCRIPT Brogårdsgymnasiet, Kristinehamn

4 Variabler Inmatningsrutan Prompt Skriptet läggs mellan head-märkena eller mellan body-märkena Funktionen eval() Funktionen parseint() Urval med If och Else Jämförelseoperatorer och logiska operatorer Sammansatta villkor Funktioner och formulär Kolla bakgrundsfärg Beräkningar Funktioner med parametrar Mer om inmatning och utskrift i textrutor Funktioner som returnerar värde Funktioner i extern fil Utskrift av text i <p> och <div> Objektet event Objektet Date() Senaste uppdatering Tidgivaren SetTimeout() Omvandling till hexadecimala tal Tidmätare Statusrad med objektet Window Öppna fönster Ramar och skript For- och While-loopar Strängar Listrutor och bakgrundsfärg Listrutor och länkar DESIGN OCH LAYOUT INLEDNING DESIGN Attrahera Obalans Obalans Orientera Designmodell Val av navigationsinstrument TEXTER PÅ INTERNET Webbtext Textens byggstenar Djungelns farliga djur TYPOGRAFI Synlig eller osynlig typografi Läsbarhet Teckensnitt Att välja teckensnitt Versaler eller gemena? Teckenstorlek Bokstavsmellanrum Radavstånd Radlängd Spaltarrangemang Färgkontrast Textens bakgrund Utmärkning och förstärkning FÄRGER Varför färg? Färgupplevelse Några färgexempel BILDER Bildens uppbyggnad Brogårdsgymnasiet, Kristinehamn

5 Bildkomposition Manifest och latent bildinnehåll Kontrasten fångar besökaren Bildens kontext Hur väljer man bild? Bildtyper LAGSTIFTNING FÖR INTERNET Personuppgiftslagen Upphovsrättslagen Så gör du din hemsida laglig STILMALLAR MED CSS INLEDNING BAKGRUNDSBILD SIDLAYOUT MED FLYTANDE DIV-MÄRKEN CSS LIKA I ALLA WEBBLÄSARE MER OM MENYER EGENSKAPER FÖR TEXT Stycke Sida FORMAT Stycke Enskilt dokument Flera dokument Span Omformatera märken Text och bild i js-dokument Doctype INLÄMNINGSUPPGIFT - SKOLTIDNING KOLLA VILKEN WEBBLÄSARE TEXTPLACERING Relativ placering med <span> Skikt och absolut placering med <div> DYNAMISKA STILMALLAR Textstorlek utskriven i alertruta Textstorlek inmatad i prompruta Ändra textstil och storlek dynamiskt Byt text dynamiskt MUSPEKARE ANIMERING Följ muspekaren Ändra innehåll med innertext Rörlig text UTFÄLLBARA MENYER (DROP-DOWN) EXPANDERANDE MENY FILTEREFFEKTER HEMSIDOR MED WORD INLEDNING MAPP FÖR HEMSIDA ETT WEBBPLATSEXEMPEL Första sidan historia Bilder, bakgrundsfärg och linjer Skapa länk Andra sidan svenska Tredje sidan Välkommen! Fjärde sidan länksidan Publicering på Internet BILAGA Instuderingsfrågor Länka till DIV-märke inom dokument Brogårdsgymnasiet, Kristinehamn

6 CSS-kod för exempelsida Vertikal meny med CSS Brogårdsgymnasiet, Kristinehamn

7 Inledning och historia Det kanske enklaste sättet att göra hemsidor (webbsidor) för WWW (World Wide Web) är att spara ett Word-dokument som ett HTML-dokument. Det är ett snabbt sätt att göra hemsidor och duger gott för enklare tillämpningar. Vill man emellertid göra hemsidor med lite mer avancerad layout, t ex lägga en bild till höger om texten, lägga in tabeller och ramar (frames), bör man dock lära sig koden (språket) som bygger upp sidorna HTML (HyperText Markup Language). Även om man har tillgång till layoutprogram (typ FrontPage) som delvis automatiskt designar hemsidor bör man känna till grunderna i HTML, eftersom sidorna layoutprogrammen skapar ibland kräver justeringar i HTMLkoden (om t ex skript och applets används). För en datatekniker tillhör det dessutom allmänbildningen att kunna använda grundläggande HTML. År 1990 bestämdes att HTTP (HyperText Transfer Protokoll) skulle bli en standard för informationsöverföring via WWW. Webbläsaren (t ex Netscape eller Explorer) i din dator kopplar upp sig mot en värddator (server) med hjälp av protokollet HTTP (en slags mall för informationsöverföring) och överför hemsidorna mellan din dator och värddatorn. Skall detta fungera måste hemsidorna vara skrivna i märkningsspråket HTML. Microsofts FrontPage och det enklare Composer i Netscape skapar automatiskt HTML-koden. I denna kurs börjar vi med att lära oss grunderna i HTML, sedan lär vi oss programmet FrontPage, som kanske är det vanligaste programmet för design av hemsidor, samt JavaScript. Vi kommer även att gå igenom grundläggande bildbehandling med programmet PhotoShop, enklare animering och ljudhantering. Vi tar även upp god webbdesign, d v s hur informationen på hemsidan bör presenteras så att den blir lättläst och överskådlig, samt publiceringsregler för Internet. Slutligen tar vi upp stilmallar (CSS) och hur de används för att skapa enhetliga webbplatser. I kursen planeras fyra prov på momenten HTML, FrontPage och JavaScript, bildbehandling och CSS, samt webbdesign med betoning på layout och publiceringsregler för Internet. Skolverkets mål för kursen Webbdesign finns på länken (finns även länkat till min hemsida). Detta dokumentet (webbdesignkurs.doc), utgör kursmaterialet och finns tillgängligt på min hemsida. En bra länk för webbdesign är Ordna eget hemsideutrymme Meningen är att ni under kursens gång skall skapa en egen hemsida som ni lägger ut på WWW, som kräver att man har ett hemsidautrymme. För den som inte reda har detta rekommenderas som erbjuder gratis epost- och hemsidaadress om tillsammans 20 MB. Där finns även hjälp (för den som är medlem) och tips för hur man gör hemsidor och hur de överförs (ftpprogram) till WWW. WS_FTP LE är ett gratisprogram (finns under länkar Data på för överföring av filer. I menyn nedan visar fönstret till vänster mappstrukturen på min dator och fönstret till höger min mappstrukur på Passagens server. 7 Brogårdsgymnasiet, Kristinehamn

8 1. Hemsidor med HTML Märken i vår första hemsida Hemsidan läses av en webbläsare (Netscape eller Explorer). Den görs dock i en enkel texteditor som Anteckningar eller Notepad++, som är ett fritt program och kan laddas ner från Fördelen med Notepad++ är att HTML-koden färgas och därmed ökar läsbarheten. Kopiera in följande rader till ett tomt dokument i Anteckningar eller Notepad och spara det under filnamnet test.html med filformatet HTML: <html> <head> <title> Min hemsida </title> </head> <body> Detta är min första hemsida. </body> </html> Öppna sedan filen test.html i webbläsaren och du har Din första hemsida framför dig. Som du ser innehåller HTML-koden ord omslutna av < >. Detta är s k märken (taggar) som anger vad som skall göras. Första märket <html> anger att HTML-koden börjar där och pågår till </html>, som avslutar koden. Ett märke < > avslutas oftast av </ >. Märket <head> markerar början på dokumentets huvud, som innesluter märket <titel>, som i sin tur innesluter sidans titel, d v s texten som står i det blå titelfältet överst på hemsidan. Efter märket <body> följer koden för sidans hela innehåll. Attribut, bakgrundsfärg och textfärg Normalt är hemsidans bakgrund vit. Antag att vi vill ha grön bakgrund. Vi får då lägga in attributet bgcolor i märket för sidans body med en färg (green, blue, white ) som attributets värde: <body bgcolor="green"> Vill vi dessutom ha vit text i hela dokumentet lägger vi även till attributet text vars värde är färgen: <body bgcolor="green" text="white"> Vill vi istället ha en bild som bakgrund används attributet background med bildens filnamn som dess värde. Tänk på att HTML endast hanterar bildformaten JPG och GIF, samt att bildfilen skall ligga i samma mapp (annars anges sökvägen/url-adressen) som HTML-filen: <body background= Anders.jpg" text= white > Sätts attributet bgproperties=fixed ligger bakgrundsbilden still när sidan skrollas. Övning 1.1: Skapa en mapp g:/webbdesign och spara där filen test.html. Övning 1.2: Ändra i exemplet ovan så att bakgrundsfärgen blir grön och textfärgen gul. Övning 1.3: Ändra åter i exemplet så att bakgrunden visar en bild på dig. Välj lämplig färg på texten. 8 Brogårdsgymnasiet, Kristinehamn

9 Textformatering Vi tar bort färgattributen i exemplets body och fortsätter med textformatering. I ett ordbehandlingsprogram som Word är det ju enkelt att formatera texten; ändra typsnitt, göra radmatning, kursivera, centrera o s v. Att åstadkomma detta på hemsidor med HTML är omständligare. Formateringen sker där istället med märken och attribut. Följande underrubriker beskriver de vanligaste märkena för textformatering. Kopiera gärna in exemplen nedan i det inledande HTMLexemplet test.html och provkör. Radbrytning <br> Märket <br> sist i en rad ger radbrytning. Även om enter matar fram ny rad i HTML-dokumentet så uppfattas inte detta på hemsidan. Detta är min första hemsida.<br> Här är nästa rad. Vid längre texter anpassas radlängden automatiskt efter webbläsarens sidbredd (se nästa rubrik). Förformaterad text <pre> Märket <pre> visar texten på hemsidan så som den skrivs in med radbrytningar i HTML. <pre>detta märke tolkar texten så som den matats in.</pre> Linjeavskiljare <hr> Märket <hr> gör en horisontell linje tvärs över sidan. Med attributen width, size, noshade, color och align för justering (med värdena left, right och center) kan linjen formateras. Första exemplet nedan ger en skuggad linje över hela sidan. Andra exemplet ger en röd högerjusterad linje som är 10 pixlar bred och har längden 20 % av sidans bredd. Bredden kan även anges i pixlar. Avslutas ej med </hr>. <hr> <hr color="red" width="20%" size="10" align="right"> Rubriker <h1> Märkena <h1>, <h2>, <h6> markerar rubrikstorlekar, där h1 är störst. Rubrikerna skrivs ut med fetstil och med en tom rad före och efter rubriken. Märket har attributet align för justering, som kan anta värdena left, center och right. <h3>detta är en vänsterjusterad rubrik</h3> <h3 align="right">detta är en högerjusterad rubrik</h3> Kursiverad <i> Märket <i> gör texten kursiverad. I exemplet blir ordet första kursiverat. Detta är min <i>första</i> hemsida. Fetstil <b> Märket <b> gör fetstil av texten. I första exemplet blir första fetstil. I andra exemplet blir första både kursiverad och fetstil. Detta är min <b>första</b> hemsida. Detta är min <i><b>första</b></i> hemsida. 9 Brogårdsgymnasiet, Kristinehamn

10 Understruken <u> Märket gör texten understruken. Överstruken <strike> Märket gör texten överstruken. Nedsänkt <sub> Märket gör texten ned sänkt. Upphöjd <sup> Märket gör texten upp höjd. Skrivmaskinstext <tt> Skriver ut texten som skrivmaskinstext. Typsnitt, storlek och färg <font> Märket <font> har attributen face, size och color. Attributet face ändrar typsnittet och har typsnittsnamn som värde (Arial, Times New Roman, Symbol ); size ändrar storleken och antar värden mellan 1 och 7, eller relativa () stegändringar; color anger färgen (red, green ). Följande exempel skriver ordet inte med typsnittet Arial, största storleken 7 och färgen röd. Det verkar ju <font face="arial" size="7" color="red">inte</font> så svårt det här. Centrerar <center> Märker centrerar texten på sidan. Stycke <p> Märket skapar ett nytt stycke med ett radavstånd före och efter stycket. Har attributet align för justering med värdena left, center och right. Exemplet centrerar de tre raderna på sidan. <p align="center">nu börjar nytt stycke.<br> Det fixar du nog.<br> Stycket skall centreras.</p> Stycke <div> Märket har samma effekt som <p> förutom att det inte skapar en tom rad före och efter stycket. Bryter dock rad. Indrag <blockquote> Märket gör ett indrag i förhållande till föregående stycke (typ tabulator) och lämnar liksom märket <p> ett radavstånd före och efter stycket. Märket saknar attribut. Exemplet gör två indrag: Denna raden ligger längst till vänster. <blockquote> Här kommer första indraget. <blockquote> Här kommer ytterligare ett indrag. </blockquote> </blockquote> Denna rad ligger åter längst till vänster. 10 Brogårdsgymnasiet, Kristinehamn

11 Kommentarer <!-- --> Exemplet nedan visar hur kommentarer läggs in i HTML. Kommentarerna syns ej på hemsidan. <!--Lägger in kommentar--> Övning 1.4: Kopiera textdokumentet j:/anders_a/webbdesign/helger.txt till din mapp /webbdesign. Öppna sedan helger.txt, som innehåller en längre oformaterad text (bry dig inte om att vissa ord i texten är felstavade). Din uppgift är att göra om texten till ett HTML-dokument så att den färdiga hemsidan ser ut som förlagan nedan. Lös uppgiften stegvis och kolla sidan i webbläsaren efter varje ändring: a) Lägg in märkena <html>, <head>, <title> och <body> och spara dokumentet som ett HTMLdokument. Sidans titel skall vara Några svenska helger. Öppna sedan sidan i webbläsaren. Du bör då se en oformaterad text. b) Gör en centrerad huvudrubrik <h1> av raden HELGER SOM FIRAS I SVERIGE, med attributet align. c) Lägg in mellanrubriker med <h3> för varje helg och färglägg, enligt förlagan. d) Kursivera och stryk under första ordet i varje stycke. e) Lägg in ett streck över hela sidan efter stycket om nyårshelgen. f) Den centrerade texten under strecket längst ner på sidan. Den lite större texten har typsnittet Arial och storleken 3. g) Det kortare strecket har längden (width) 140 punkter. h) Texten under strecket har storleken 1. i) Spara dokumentet som helger.html i din mapp webbdesign. 11 Brogårdsgymnasiet, Kristinehamn

12 Bilder <img> Bildformaten.jpg och.gif är de vanligaste på hemsidor. Det nyare formatet.png är ännu inte så utbrett. Det älder bitmap-formatet.bmp fungerar också på hemsidor, men är väldigt utrymmeskrävande jämfört med de andra formaten. Bilderna infogas på hemsidan med märket <img> och attributet src: <img src="anders.jpg"> Bildfilen antas här ligga i samma mapp som HTML-dokumentet. Annars anges sökvägen (bildens urladress). Bilden i exemplet infogas i sin originalstorlek. Bildens höjd och bredd kan dock anges med attributen height och width i punkter (sidan öppnas snabbare om bilden är mindre). Bildens läge på sidan justeras med attributet align, som med värdet left lägger kommande objekt till höger om bilden och med värdet right lägger bilden till höger på sidan. Följande rad gör bilden 100x150 punkter stor, lägger en 1 punkt bred ram runt bilden, samt vänsterjusterar bilden. <img src="anders.jpg" height="100" width="150" border="1" align="left"> Attributet align kan även anta värden top, middle och bottom (testa!). Attributen hspace och vspace anger horisontellt respektive vertikalt avstånd i punkter mellan bilden och intilliggande objekt. Är bildens adress felaktig, om webbläsarens bildvisning är avstängd eller om bilden är stor och laddas ner långsamt till hemsidan är det informativt att kunna tala om vad bilden visar med en alternativtext. Detta görs ned attributet alt: <img src="anders.jpg" height="100" width="150" border="1" align="left" alt= Bilden visar Anders > Övning 1.5: Fortsätt med föregående övning helger.html och lägg in bilder så att sidan får samma utseende som förlagan intill. Samtliga bilder har en ram med tjockleken 1 punkt. Lös uppgiften på följande sätt: a) Kopiera fem passande bilder från Internet till mappen webbdesign. b) Lägg in en bild (kopiera över huvudrubriken med måtten 300 x 100 punkter som är centrerad på sidan. c) Lägg en bild (tomte) till vänster i stycket om julen med höjden 50 punkter. d) Lägg en bild (midsommarstång) till höger i stycket om midsommar med höjden 100 punkter. Bilden skall även innehålla ledtexten Midsommarstång. e) Lägg in två bilder till höger respektive vänster i stycket om nyår med höjden 50 punkter. f) Spara dokumentet under namnet helger.html. 12 Brogårdsgymnasiet, Kristinehamn

13 Länkar Via text- och bildlänkar surfar man enkelt mellan olika hemsidor och dokument. Vi går först igenom textlänkar. Textlänkar till andra dokument <a> En textlänk (hypertextlänk) är i regel ett ord eller en mening med blå textfärg. Genom att klicka på ordet öppnas en annan hemsida. Textlänken skapas av märket <a> (ankare). Attributet href (hypertextreferens) har det länkade dokumentets adress som värde. Märket läggs in före och efter texten som skall markera länken: Det <a href = c:/bilder/katter.jpg > blåfärgade </a> ordet länkar till en bild på hårddisken. Attributet title lägger in en ledtext som talar om var länken leder när markören förs över textlänken på hemsidan. Attributet target med värdet _blank anger att sidan öppnas i ett eget fönster: Det <a href = title= Anders hemsida target= _blank > blåfärgade </a> ordet länkar till Anders Anderssons hemsida. Länkfärger Vanligtvis är textfärgen på obesökta länkar blå och på besökta länkar röd. Färgen går dock att ändra. Detta gör i märket <body> med attributen link, som ger färgen på obesökta länkar; vlink, som ger färgen på besökta länkar; alink, som ger färgen på länken när den aktiveras med markören. Följande rad ger egna val på länkfärgerna: <body bgcolor="green" text="white" link= green vlink= yellow alink= gray > Övning 1.10: Fortsätt med förra dokumentet om helger och lägg in en texten Läs mer om julen på Wikipedia i slutet på stycket om julen, där Wikipedia är länkat till dess artikel om julen. Länken skall öppnas i ett eget fönster, samt visa länken som ledtext, enligt urklippet till höger. Gör sedan samma sak för midsommar och nyår. Länka även tomtebilden i första stycket till Wikipedias artikel om tomtar. Länken öppnas självklart i ett eget fönster. 13 Brogårdsgymnasiet, Kristinehamn

14 Textlänkar inom dokumentet Det går även att länka inom samma dokument (jämför med bokmärken i Word), t ex från ett registerord i början av filen till ett visst ställe längre ner i filen. Delar av ett dokument brukar kallas fragment. Attributet name anger länkens destination, där man själv väljer ett passande länkord med #- tecken framför (i exemplet nedan har vi valt ordet kvast). Följande rader länkar från ordet påsk till stycket som inleds med ordet Skärtorsdagen en bit ner i texten där länkordet finns utan #-tecken: Trettonhelgen och <a href = #kvast > påsk </a> är årets första helger. <a name = kvast > Skärtorsdagen inleder påskhelgen och Märket som anger länkens destination skall inte ha slutmärke. Det går även att länka till ett önskat ställe (fragment) i en annan fil (eller URL-adress) på motsvarande sätt: Trettonhelgen och <a href = kyckling.html#kvast > påsk </a> är årets första helger. Övning 1.12: Öppna i Notepad dokumentet helger.html du skapade i övning 1.3. Skriv in raden Länkar till avsnitten nedan om Julen, Midsommar och Nyår överst på sidan, enligt bilden till höger. Lägg sedan in textlänkar från jul, midsommar och nyår till respektive avsnitt i dokumentet. Bildlänkar En länk från en klickbar bild skapas på samma sätt som en länk från en klickbar text. Bilden placeras inom länkmärket. I exemplet nedan länkar den klickbara bilden Anders.jpg till hemsidan för Åmåls skolor: <a href=" src="anders.jpg" height="100" width="150"></a> Länk till epostadress Länkarna vi hittills visat har gått till andra dokument eller till andra hemsidor. Det går även att skapa länkar till e-postadresser. Istället för metoden http används metoden mailto, samt den aktuella e- postadressen länken skall kopplas till: <a href="mailto://anders.andersson@kristinehamn.se"> Mäjla mig</a> 14 Brogårdsgymnasiet, Kristinehamn

15 Bilder med aktiva områden (mappade bilder) Ibland är det praktiskt att kunna länka delar av en bild, exempelvis vore det ju bra om man kunde klicka på orterna på en kartbild och länka dessa till olika dokument som berättar om respektive ort. Detta åstadkoms med märkena <map> och <area>. Attributet name i <map> namnger bilden (liksom ett bokmärke i Word). Attributet shape i <area> anger formen på det klickbara området i bilden; circle, rect, polygon. Koordinaterna för området anges med attributet coords, vars värden för cirkeln är x, y, r (mittpunktskoordinat och radie), för rektangeln x, y, u, v (övre vänstra respektive nedre högra hörnet) och för polygonen hörnpunkternas koordinater. Bilden till höger, vars storlek är 150x100 punkter, är klickbar på näsan (cirkel) och på diskmedelsflaskan (rektangel). Attributet usemap i src-märket anger att bilden är klickbar. Klickar man på näsan öppnas NWT:s hemsida i eget fönster och klickar man på diskmedelsflaskan öppnas VF:s hemsida i samma fönster. Koden som åstadkommer detta visas nedan: <img src="anders.jpg" usemap="#bilden" height="100" width="150"> <map name="bilden"> <area shape="circle" coords="85,45,5" href=" target= _blank alt= NWT > <area shape="rect" coords="30,40,40,70" href=" alt= VF > </map> Det kan vara litet svårt att hitta rätt koordinater för arean på en gång. En viss hjälp är dock att markören blir ett finger när den är över den mappade arean på bilden i webbläsaren. Hålls dessutom vänster musknapp nedtryckt syns det mappade området. Överlappar två områden varandra är det det först definierade området som gäller. Övning 1.13: Du skall göra en klickbar bild för t.ex. turister av j:/anders_a/webbdesign/vanerkarta.gif, som är en inskannad kartbild över Vänern. Du skall göra följande: a) Lägg in kartbilden i filen klickbild.html. Bilden skall ha storleken 400 x 400 punkter på sidan. b) Lägg in ett klickbart cirkelområde för Kristinehamn. Området skall länkas till Kristinehamns kommuns hemsida ( c) Lägg in ett klickbart cirkelområde för Karlstad. Området skall länkas till Karlstads kommuns hemsida ( d) Lägg in ett klickbart rektangelområde för nationalparken Djurö mitt i Vänern. Området skall länkas till Naturvårdsverkets hemsida för Sveriges nationalparker (kolla på e) Lägg in ett klickbart polygonområde för hela vänerområdet. Länken skall leda till filen vanerfakta.html du själv skapar och som berättar lite fakta om Vänern, t ex sjöns storlek, fiskemöjligheter och seglingshamnar. Det är viktigt att detta området definieras sist så att övriga områdena fungerar. f) Gör någon egen klickbar länk. Lägg den före den i e)-uppgiften. 15 Brogårdsgymnasiet, Kristinehamn

16 Listor Liksom i Word finns det numrerade listor och punktlistor även i HTML. Listorna formateras med nedanstående märken. Numrerad lista <ol> Märket skapar en numrerad lista (order list). Attributet type anger hur listan skall numreras: <ol type= 1 > numrerar 1, 2, 3 <ol type= a > numrerar a, b, c <ol type= A > numrerar A, B, C <ol type= i > numrerar i, ii, iii, iv (romerska siffror) <ol type= I > numrerar I, II, III, IV (romerska siffror) Anges inger attribut numreras med siffror. Punktlista <ul> Märket skapar en punktlista. Attributet type anger typ av punkt: <ul type= disc > <ul type= circle > <ul type= square > Ger en fylld cirkelpunkt Ger en ofylld cirkelpunkt Ger en fylld fyrkant Anges inget attribut blir det en fylld cirkelpunkt. Listelement <li> När märket för punktlistan eller den numrerade listan angetts måste även märket <li> anges för varje listelement. Listelementet har samma attribut (type) som den numrerade listan respektive punktlistan. Vanligtvis anges dock inget attribut i listelementet och då erhålls automatiskt attributen från de omgivande märkena <ol> respektive <ul>. Nedan visas HTML-kod för en numrerad lista och listan som koden genererar. <html> <head> <title> Min hemsida </title> </head> <body > Detta dokumentet innehåller listor<br> <ol> <li> Detta är första punkten på listan.</li> <li> Detta är andra punkten på listan.</li> <li> Detta är tredje punkten på listan.</li> </ol> Listan är nu slut. </body> </html> 16 Brogårdsgymnasiet, Kristinehamn

17 Definitionslistor <dl>, <dt>, <dd> Önskas text istället för nummer eller punkter framför listan används en s k definitionslista. Detta passar bra för t ex ordlistor. Följande exempel visar hur märkena <dl>, <dt> och <dd> används för att skapa en definitionslista i form av några recept. <html> <head> <title> Min hemsida </title> </head> <body > Dokumentet innehåller några recept<br> <dl> <dt> Bullar</dt> <dd> Mjöl</dd> <dd> Mjölk</dd> <dd> Socker</dd> <dd> Jäst</dd> <dd> Fett</dd> <dt> Pizza</dt> <dd> Mjöl</dd> <dd> Vatten</dd> <dd> Jäst</dd> <dd> Fett</dd> <dt> Betong</dt> <dd> Vatten</dd> <dd> Cement</dd> <dd> Grus</dd> </dl> Definitionslistan är nu slut. </body> </html> Övning 1.14: Öppna i Notepad dokumentet helger.html du arbetat med tidigare och lägg till följande listor i slutet av dokumentet före den horisontella linjen, enligt urklippet till höger. Texten finns i filen helger.txt. Lös uppgiften på följande sätt: a) Lägg till en numrerad lista för påsken och pingsten. b) Lägg till en punktlista med cirklar för allhelgonahelgen och trettonhelgen. c) Lägg till en definitionslista för 1:a maj och advent. d) Spara som helger.html. Övning 1.15: Skapa en numrerad lista med två nivåer (flernivålista), enligt urklippet till höger, i ett nytt dokument. Spara dokumentet som ovning1_15.html. 17 Brogårdsgymnasiet, Kristinehamn

18 Tabeller Begreppet tabell i HTML används exempelvis för att skapa traditionella tabeller, spalter och för att placera ut bilder. För att skapa en tabell krävs några olika märken. Tabellen i urklippet till höger är skapad av koden i textrutan under. Tabellmärkena förklaras nedan. Tabellkropp <table> Märket definierar tabellens utseende och placering på sidan. Följande attribut används: width Tabellens bredd i punkter eller procent. border Ytterkantens tjocklek i punkter. Cellpadding Avstånd i punkter från cellkant till cellinnehåll. Cellspacing Avstånd mellan celler. align Placering på sidan; left, center, right. bgcolor Anger tabellfärg. Tabelltitel <caption> Visar en centrerad titel över eller under tabellen, beroende på attributet align; top eller bottom. Tabellrad <tr> Märket påbörjar en ny rad i tabellen. Följande attribut finns: align Justerar innehållet i radens celler horisontellt; left, center, right. valign Justerar innehållet i radens celler vertikalt; top, middle, bottom, basline. bgcolor Anger färg på rad. <html> <head> <title> Min hemsida </title> </head> <body> <table width="40%" border="5"> <caption><h1>avståndstabell</h1></caption> <tr align="center"> <td></td> <th>åmål</th> <th>bengtsfors</th> <th>dals Ed</th> </tr> <tr align="center"> <th>åmål</th> <td></td> <td>37</td> <td>68</td> </tr> <tr align="center"> <th>bengtsfors</th> <td>37</td> <td></td> <td>31</td> </tr> <tr align="center"> <th>dals Ed</th> <td>68</td> <td>31</td> <td></td> </tr> </table> </body> </html> Tabellceller <th>, <td> Innehållet i varje tabellcell formateras med märkena <th> för rubrikceller och <td> för övriga celler. Enda skillnaden mellan märkena är att <th> centrerar och skriver ut texten med fetstil. Båda har följande attribut: colspan Antal kolumner cellen sträcker sig över (normalt en). rowspan Antal rader cellen sträcker sig över (normalt en). nowrap Radbryter ej i cellen. align Som <tr> valign Som <tr> bgcolor Anger färg på cell. 18 Brogårdsgymnasiet, Kristinehamn

19 Övning 1.18: Skapa en hemsida med ett schema, enligt urklippet intill. Det räcker att schemat görs för dagens tre första timmar. Använd gärna egna ämnes-, sals- och lärarbeteckningar. Lös uppgiften enligt följande punkter: a) Skapa en centrerad tabell med vidden 60 % av sidan. b) Rubrikcellerna skall vara gråfärgade. c) Ämne, sal och lärarsignatur skall skrivas på tre rader i varje cell. d) En lärarsignatur AAN skall länkas till en bild av Anders Andersson (hittar du ingen bild på honom så välj en annan bild). e) En cell med ämnet Matematik skall länkas till hemsidan för Åmåls skolor ( Övning 1.19: Gör en tabell för omvandling mellan temperaturer respektive hastigheter, enligt urklippet intill. Använd urklippets siffror. Ledning: Använd attributen colspan och rowspan. *Övning 1.20: Text i spalter skapas med tabeller i HTML. Tabellen består endast av en tabellrad uppdelad i önskat antal kolumner. Skapa en sida som urklippet nedan. Ge attributet valign värdet top, border värdet 0 och cellspacing värdet 10. Lägg rubriken på en egen rad i tabellen. Infoga en bild på lämpligt ställe. Som du ser är spalterna olika breda. Spalterna blir dock lika breda om tre genomskinliga lika bilder med önskad spaltbredd läggs in på en undre tabellrad. Testa detta! 19 Brogårdsgymnasiet, Kristinehamn

20 *Övning 1.21: Tabeller används ofta för att lägga in både bilder och text på olika ställen på en hemsida. En stor bild kan dessutom delas upp i fler mindre bilder. Bilden till höger utgörs av nio mindre bilder, var och en med storleken 300 x 250 punkter (se markering). Bilderna finns i mappen g:/anders_a/webbdesign/pussel. Skapa en tabell och lägg pusslet. Bilderna är så hårt komprimerade att färgåtergivningen är lite felaktig. Observera att linjemarkeringarna inte skall synas i tabellen (sätt attributen cellpadding och cellspacing till noll). Övning 1.22a: Gör en tabellbaserad hemsida med länkar, bild och text i stil med exemplet i urklippet till höger. Tabellen skall ha måtten 900x600 p, kolumnbredden 300 p och radhöjden 200 p. Observera att bilderna skall passa exakt i tabellcellerna. Välj själv bilder, text och länkar. Övning 1.22b: Hittills har vår hemsida om helgerna fått samma bredd som webbläsaren. Detta är naturligtvis opraktiskt. Ett vanligt sätt att få en bredd och design som är oberoende av webbläsarfönstrets bredd, är att lägga innehållet i en tabell med en rad och en kolumn. Öppna åter ditt dokument om helger och gör följande: a) Lägg sidans innehåll i en tabell med en rad och en kolumn. Tabellen skall ha bredden 700p. b) Centrera tabellen på sidan, samt ge den bakgrundsfärgen silver. c) Observera att tabellen är inramad, samt att det är ett litet avstånd (5 p) mellan text och ram. d) Den färdiga sida skall se ut som urklippet ovan. Kolla att raderna inte bryts när webbläsarfönstrets storlek ändras. Spara. 20 Brogårdsgymnasiet, Kristinehamn

21 Ramar (frames) En vanlig hemsidelayout är att lägga en meny med länkar i en smalare fönster (ram, frame) till vänster på sidan (se min sida Klickar man på en av länkarna öppnas måldokumentet i det större fönstret till höger utan att meny-fönstret till vänster försvinner. På så sätt blir sidan lättnavigerad och risken minskar att man klickar bort sig. Tekniken att åstadkomma detta kallas ramar (frames). Ramsida <frameset> Ett dokument som innehåller ramar saknar märket <body>. Istället används märket <frameset> för att dela upp sidan i önskat antal ramar (fönster). Följande två attribut används för detta: rows anger i procent eller punkter hur många rader sidan skall delas upp i. cols anger i procent eller punkter hur många kolumner sidan skall delas upp i. frameborder="no" Anger om ramen skall ha tredimensionellt utseende (YES/NO). border= 0 Anger rambredden. bordercolor= red Anger färgen på ramen. Raminnehåll <frame> Märket <frame> (som endast kan finnas under <frameset>) anger vilket dokument som skall visas i ramen. Följande attribut används i <frame>: src Anger adressen till dokumentet som skall öppnas i ramen (jämför med märket <img>). Saknas adress skapas ingen ram. marginwidth Horisontellt avstånd i punkter mellan rutans ram och innehåll. marginheight Vertikalt avstånd i punkter mellan rutans ram och innehåll. scrolling Värdet auto (defaultvärde) ger rutan en rullningslist om det behövs; värdet no ger aldrig rullningslist; värdet yes ger alltid rullningslist. noresize Anger om rutans storlek får ändras. Nedan visas koden som skapar sidan till höger. Sidan består av sex ramar (fönster) uppdelade på två rader och tre kolumner. Observera att ordningen ramarna visas i (zooma in och kolla!) är oberoende av i vilken ordning attributen rows och cols deklareras i märket <frameset>. Texten i ramarna (Försts sidan, Andra sidan o s v) står i dokumenten som anges i med src-attributet i <frame>märket: <html> <head> <title> Min hemsida </title> </head> <frameset rows="20%,80%" cols="30%,30%,*"> <frame src="firstasidan.html"> <frame src="andrasidan.html"> <frame src="tredjesidan.html"> <frame src="fjärdesidan.html"> <frame src="femtesidan.html"> <frame src="sjettesidan.html"> </frameset> </html> 21 Brogårdsgymnasiet, Kristinehamn

22 Ramar kan liksom sidor delas upp med <frameset>. Nedan visas koden för en sida med två kolumner, där den andra kolumnen delats upp i tre rader. Ett <frameset>-märke i den andra kolumnen åstadkommer detta: <html> <head> <title> Min hemsida </title> </head> <frameset cols="30%,70%"> <frame src="firstasidan.html"> <frameset rows="30%,30%,*"> <frame src="andrasidan.html"> <frame src="tredjesidan.html"> <frame src="fjärdesidan.html"> </frameset> </frameset> </html> 22 Brogårdsgymnasiet, Kristinehamn

23 Länkar till andra ramar (name och target) Normalt laddas en måldokumentet till en länk till ramen där länken ligger. Ligger emellertid länken i en ram som fungerar som meny, är det praktiskt att ladda måldokumentet till en annan ram. För att kunna ange i vilken ram länkens måldokument skall visas måste ramen ges ett namn. Detta görs i märket <frame> med attributet name. I vilken ram länkens måldokument skall visas anges sedan med attributet target i länkmärket <a>. Förutom ramnamnet kan attributet target bl a anta värdena: _blank: Måldokumentet öppnas i ett nytt fönster. _top: Måldokumentet öppnas i hela fönstret och övriga ramar försvinner. Exemplet nedan visar hur detta fungerar. Dokumentet ramex1.html delar in sidan i två ramar i form av två kolumner. Dokumentet innehall.html utgör menyn och visas i den vänstra ramen. Dokumentet dok_a.html visas i den högra ramen om länken Dok_a aktiveras i menyramen. Vänstra ramen (menyramen) har döpts till ram_nr1 och den högra (där måldokumenten skall öppnas) till ram_nr2. Värdet (ram_nr2) på attributet target i dokumentet innehall.html visar i vilket fönster måldokumentet skall öppnas: ramex1.html: <html> <head> <title> ramex1 </title> </head> <frameset cols="250,*"> <frame src="innehall.html" name="ram_nr1"> <frame src="dok_a.html" name="ram_nr2"> </frameset> </html> innehall.html: <html> <head> <title> innehåll </title> </head> <body> <h1>innehåll</h1> Klicka för önskat dokument:<br> <a href="dok_a.html" target="ram_nr2">dok a</a><br> <a href="dok_b.html" target="ram_nr2">dok b</a><br> <a href="dok_c.html" target="ram_nr2">dok c</a><br> </body> </html> dok_a.html: <html> <head> <title> dok a </title> </head> <body bgcolor="yellow"> Detta är dokument a. </body> </html> 23 Brogårdsgymnasiet, Kristinehamn

24 Övning 1.23a: Du skall nu skapa en sida (se exemplet till vänster) uppdelad i några ramar och med tre länkar från en av ramarna, vars måldokument öppnas på tre olika ställen. Lös uppgiften enligt punkterna nedan: a) Skapa mappen frames i din mapp webbdesign. b) Skapa fem html-dokument med texten Första sidan, Andra sidan o s v. Den fjärde sidan skall dessutom innehålla några länkar. Spara dokumenten i mappen frames under förslagsvis namnen första.html, andra.html o s v. c) Skapa ett dokument ramsida.html i mappen frames som delar upp sidan i fem ramar, enligt exemplet intill. d) Lägg in en länk enligt exemplet i ramen Fjärde sidan som öppnar en jpg-bild i ramen Femte sidan. Lägg in name- och target-attribut på lämpliga ställen. e) Lägg in en länk enligt exemplet i ramen Fjärde sidan som öppnar i ramen Första sidan. Lägg in name- och target-attribut på lämpliga ställen. f) Lägg in en länk enligt exemplet i ramen Fjärde sidan som öppnar kursdokumentet g:/anders_a/webbdesign/webbdesignkurs.doc i ett nytt fönster. Lägg in name- och targetattribut på lämpliga ställen. Övning 1.23b: Skapa hemsidan intill. Den innehåller tre ramar; meny till vänster, vinjett och stora fönstret underst till höger, enligt urklippet nedan. Sida har följande innehåll: Ramen med menyn har bredden 200 p och vinjetten höjden 100 p. Spara som index.html. Ramarnas storlek går inte att ändra i webbläsaren. Menyn innehåller fyra länkar: En till den gula startsidan, en till Övning 1.22a, en till Övning 1.22b och en till tidningen NWT. Alla länkarna öppnas i den gula ramen, utom NWT som öppnas i ett eget fönster. Spara som meny.html. Vinjetten innehåller texten Brogårdsgymneasiet är bäst!. Spara som vinjett.html. 24 Brogårdsgymnasiet, Kristinehamn

25 Iframe Inline floating frame En Iframe är en slags ram som läggs ovanpå en annan sida. Fördelen med en Iframe är att den är enklare att använda än traditionella ramar (frameset). Nackdelen är att äldre webbläsare saknar stöd för Iframe. Koden för sidan till urklippet visas nedan: <html> <head> <title>testsidan</title> </head> <body> Min sida börjar här.<br> <iframe src=" name="kalle" width="200" marginwidth="10" height="200" marginheight="10" scrolling="auto" align="right"> </iframe> <a href=" target="kalle">dok b</a><br> <a href=" ">Dok c</a><br> </body> </html> Attributen marginwidth och marginheight anger avståndet från innehållet i ramen till ramkanten. I exemplet anges ramens höjd och bredd i punkter. Liksom tidigare kan dessa mått även anges i procent av webbläsarfönstret. En Iframe placeras ofta på sidan med hjälp av tabeller. Det finns dessutom möjlighet att göra innehållet i en Iframe hel- eller delvis genomskinligt (se vidare för detaljer). Övning 1.23c: Gör en länksida baserad på en tabell med nio celler och en iframe (se urklipp). Länkarna öppnas i iframen. Observera att tabellens celler är lika stora, samt att iframen sträcker sig över fyra celler. Lägg startsida i iframen. För att spara tid och arbete kan du modifiera den tidigare uppgiften uppgift 1.22a. 25 Brogårdsgymnasiet, Kristinehamn

26 Färger När vi hittills använt färger har vi använt de fördefinierade färger som finns i HTML. Närmare bestämt finns sexton fördefinierade färger; BLACK, GREEN, SILVER, LIME, GRAY, OLIVE, WHITE, YELLOW, MAROON, NAVY, RED, BLUE, PURPLE, TEAL, FUCHISA, AQUA. RGB och hexadecimal kod Färgerna bygger på det s k RGB-systemet (Röd, Grön, Blå), där det finns 255 nyanser av varje färg. Färgerna kan blandas godtyckligt och ge upphov till drygt 16 miljoner färgnyanser (255*255*255). För att komma åt alla dessa färger måste varje RGB-färg anges i det hexadecimala talsystemet, som baseras på basen 16 (det decimala talsystemet baseras på basen 10). Tabellen nedan översätter talen 0-29 i det decimala talsystemet till det hexadecimala: Dec Hex A B C D E F A 1B 1C 1D Nedan visas hur några olika bakgrundsfärger anges med hexadecimal kod. Observera #-tecknet före den hexadecimala koden: <body bgcolor="#0000ff"> (blått; d v s 0 rött, 0 grönt, 255 blått) <body bgcolor="#00a500"> (mellangrönt; d v s 0 rött 165 grönt, 0 blått) <body bgcolor="#090000"> (mörkrött; d v s 9 rött, 0 grönt, 0 blått) <body bgcolor="#ffffff"> (vitt; 255 av alla färger) <body bgcolor="#000000"> (svart; 0 av alla färger) <body bgcolor="#5b5b5b"> (grått; 91 av alla färger) Vill man använda andra färger än de fördefinierade får man prova sig fram eller förslagsvis använda färgblandarprogrammet hexcolor.exe, som finns i kursmappen. I programmet blandas färgerna med tre rullningslister, varefter färgblandningens hexadecimala kod skrivs ut. Programmet är skrivet i Delphi. I Windows webbläsare Explorer kan färgen även anges med rgb-funktionen. Följande exempel visar hur grön färg anges: <body bgcolor="rgb(0,255,0)"> Övning 1.24: Lägg in olika bakgrundsfärger med hexadecimal kod i de fem ramarna i övning Blanda till färgen med programmet hexcolor.exe. Tänk på att texten skall vara läsbar mot bakgrunden. Ljud Liksom det går att lägga in bilder på en hemsida går det även att lägg in ljud, antingen som ett bakgrundsljud som inte går att stänga av eller ett ljud som kan startas och stängas av av användaren. Ljudet kan även läggas in som en länk. Tänk på att ljudet kan vara störande och använd det sparsamt. Inspelning av ljud Vill man exempelvis överföra musik från en CD-skiva görs inspelningen enklast med Windows Ljudinspelaren (hittas via startmenyns Program/Tillbehör/Underhållning). Skivan startas samtidigt som ljudinspelaren startas. När inspelningen är färdig sparas ljudet i en fil med formatet.wav. Fördelen med wav-formatet är att det kan spelas upp direkt av de vanligaste webläsarna. Nackdelen är att formatet är minneskrävande (se nedan). Olika ljudformat Liksom för bilder finns även olika filformat för ljud. De vanligaste formaten är.wav och.mp3. Här nedan beskrivs de vanligaste (källa: Webdesignskolan): 26 Brogårdsgymnasiet, Kristinehamn

27 .midi eller.mid.wav.aif.mp3.ra,.ram,.rpm (Musical Instrument Digital Interface) Ett format för instrumentell musik som stöds av många webläsare utan att behöva plugin-program. Midi-ljuds kvalitet beror på användarens ljudkort. Midi-filer innehåller inget analogt ljud från tex röster och sång. (Waveform Extension) Ljudformat med bra kvalitet som stöds av många webläsare utan plugin-program. Du kan spela in egna WAV-filer från CD, kasettbandspelare eller mikrofon. Filstorleken blir stor vilket gör att det lämpar sig bäst för korta ljudklipp. (Audio Interchange File Format, or AIFF) Har bra ljudkvalitet liksom WAV och kan spelas på flera webläsare utan plugin-program. Du kan spela in egna WAV-filer från CD, kasettbandspelare eller mikrofon. Filstorleken blir stor vilket gör att det lämpar sig bäst för korta ljudklipp. (Motion Picture Experts Group Audio eller MPEG-Audio Layer-3) Är ett komprimerat ljudformat som ger små filstorlekar. Kvaliten kan ofta jämföras med CD-musik om den är rätt inspelad och komprimerad. En teknik gör att ljudet är "strömmande" (streaming) och kan spelas upp innan hela ljudfilen är nedladdad. För att höra ljudet krävs ett plugin-program som tex QuickTime, Windows Media Player eller RealPlayer. (Real Audio format) Har bättre komprimering än MP3 men lägre ljudkvalitet. En teknik gör att ljudet är "strömmande" (streaming) och kan spelas upp innan hela ljudfilen är nedladdad. För att höra ljudet krävs plugin-programmet RealPlayer. Komprimmering av ljud När du spelat in din CD-låt med t ex ljudinspelaren och sparat den i wav-format upptäcker du att en låt på några minuter kräver i storleksordningen 10 MB. Komprimmeras filen till mp3-format minskar storleken till c: a en tiondel. Program som komprimmerar från wav- till mp3-format finns att hämta fritt på webben, exempelvis programmet CDex, som finns att ladda ner gratis på Programmet kan komprimmera direkt från CD-skivan till mp3-format. Ljud på hemsidan Följande märke startar ljudet på hemsidan automatiskt när sidan laddas ner utan att användaren kan stänga av ljudet: <embed src="intro.mid" width="1" height="1" autostart="true" loop="true" ></embed> Skall avändaren kunna stänga av ljudet via en ljudkontroll ges attributen width och height följande värden: width="200" height="32" Då syns följande ljudkontroll: Ges attributet attributet autostart värdet false startar ljudet först när användaren klickar på ljudkontrollens startknapp. Attributet loop innebär att ljudfilen startas om när den kommi till slutet om det des värdet true. Ljudfiler kan även startas via en traditionell HTML-länk: <a href="dance.mid">klicka här!</a> 27 Brogårdsgymnasiet, Kristinehamn

28 Övning 1.25: I mappen G:/Anders_A/webbdesign/ljud finns några ljudfiler. Fler ljudfiler kan hämtas från Multimediabyråns ljudarkiv Använd några ljudeffekter och gör en sida som exempelvis ser ut som urklippet till ovan. Övning 1.26 egen webbplats Du skall nu göra en större uppgift i form av en egen webbplats uppbyggd av minst fem webbsidor (html-dokument), enligt strukturen till höger (ramsidan innehåller två webbsidor). Sidorna skall uppfylla följande krav: Ramsidan, som sparas under namnet index.html (1), skall bestå av åtminstone två ramar. Den ena mindre ramen innehåller en meny med åtminstone de fyra länkarna till startsidan, presentationen av dig själv, länksidan och till presentationen av din hemkommun (se nedan). Menysidan sparas förslagsvis under namnet meny.html (2). Den andra större ramen innehåller startsidan, som på något sätt skall visa att webbplatsen tillhör dig. Startsidan skall innehålla en bakgrundsbild. Förslagsvis sparas startsidan under namnet start.html (3). Alla sidor skall utformas med tabeller med bredden 800 pixlar så att layouten inte skall påverkas av webbfönstrets storlek. Presentationen av dig själv får du utforma ganska fritt. Sidan bör dock innehålla information om var du bor, vad du studerar, dina intressen och din epost-adress. Gärna också en bild av dig. Sidan skall öppnas i ramsidans större ram. Förslagsvis sparas sidan om dig under namnet om_mig.html (4). På länksidan skall du samla minst tio länkar, varav skolans hemsida, webbdesignskolan, ditt schema och skolans matsedel skall finnas med. Länkarna skall placeras i en punktlista och varje länk skall beskrivas med en kort text. Länkarna skall öppnas i egna fönster. En variant är att strukturera länkarna i en flernivålista utifrån olika ämnen. Förslagsvis sparas länksidan under namnet lanksida.html (5). Sidan som presenterar din hemkommun skall struktureras med en tabell med minst två rader och två kolumner. Sidan skall kort berätta om kommunen (historia, innevånarantal, näringsliv o.s.v.), innehålla någon bild och länkar till kommunens hemsida och till sevärdheter i kommunen. Länkarna öppnas i egna fönster. Presentationssidan skall dock öppnas i startsidans större ram. Förslagsvis sparas sidan om kommunen under namnet kommunpresentation.html (6). Meny Presentation av dig själv Ramsida Egen länksida Startsida Presentation av din hemkommun 28 Brogårdsgymnasiet, Kristinehamn

29 Webbplatsen skall överföras till ditt webbhotell. Börja uppgiften med att skapa mappen h:/webbdesign/ovning126. Spara sedan alla filer i den mappen innan du länkar dem till webbplatsen. Överförs sedan hela mappen ovning126 till webbhotellet kommer länkarna att fungera utan problem på Internet. Eftersom de flesta inte kan överföra filer till Passagens webbhotell, ska alla istället använda skolans webbserver. Överför filerna via ftp-programmet med följande inloggningsuppgifter: HostName: hem.skola.kristinehamn.se UserID: webbkursxx (XX fås av lärare) Password: Fås av lärare Med UserID= webbkurs04 blir länken till webbservern på Internet web.kristinehamn.se/webbkurs/4. Länken till en fil i mappen ovning126 med namnet start.html blir då web.kristinehamn.se/webbkurs/4/ovning126/start.html. Har filen namnet index.html behöver den inte anges, eftersom filer med namnet index.html öppnas automatiskt. Skapa ytterligare en sida, projekt.html, dit filen index.html länkas, enligt bilden till höger. Uppgifterna som görs senare i kursen skall även länkas till filen projekt.html, som är länkad till Uppgiften skall lösas på två lektioner (c:a 3 klocktimmar). Webbplatsen skall sedan visas och kommenteras för klassen via den datoranslutna projektorn direkt från Internet. Uppgiften är obligatorisk. Observera att å, ä, ö och mellanslag inte fungerar i filnamn på Internet, samt att Internet skiljer på små och stora bokstäver. Totalt utgörs webbplatsen av sex (6) egna html-sidor, enligt figuren ovan. 29 Brogårdsgymnasiet, Kristinehamn

30 2. Bildbehandling med Photoshop Inledning Det händer ju att vissa av ens semesterbilder är väl mörka eller ljusa, d v s under- eller överexponerade. Tidigare har man inte kunnat göra så mycket åt detta. Med ett bildbehandlingsprogram går det emellertid inte bara att justera bildens ljusstyrka och kontrast, det går även att manipulera med motivet, lägga in en sol där det regnar exempelvis. Detta förutsätter förstås att bilden finns på datorn. I denna kursen skall vi arbeta med bildbehandlingsprogrammet Photoshop. Programmet är omfattande och vi hinner inte lära oss alla dess finesser. Vi skall dock lära oss de delar man har mest nytta av vid webbdesign, exempelvis följande: Justera ljusstyrka, kontrast och färger hos en befintlig bild. Klippa ut och klistra in godtyckliga delar av en befintlig bild med olika metoder. Byta färger i en bild. Justera motivet i en existerande bild. Skapa egna bilder med Photoshop:s rit- och textverktyg. Komprimera bilder. Använda olika filter. Kunna använda lager. Skapa animerade GIF-biler. Du hittar mer om Photoshops möjligheter på Detta kursmaterial avser Photoshop Elements 2.0. Övning 2.1: Fotografera varandra (en bild per elev och en gruppbild) med skolans digitalkamera. Se till att ansiktet upptar c:a en fjärdedel av bildytan och att dina tänder (skratta!) syns. Vi (läraren) sparar sedan bilderna i mappen g:/anders_a/webbdesign/bilder så att alla kommer åt dem. Verktygslådan Vi skall nu gå igenom några av verktygslådans (urklippet till höger) knappar via ett antal övningar. Börja med att öppna bilden av dig själv i mappen g:/anders_a/webbdesign/bilder och använd sedan denna för vissa av nedanstående övningar. Markeringsram Med markeringsramen kan rektangulära och elliptiska markeringar göras. Markeringarna kan kopieras eller klippas ut och klistras in i samma dokument eller i ett nytt dokument, t ex i ett Word-dokument. Klicka på pilen i nedre vänstra hörnet för att ändra ramens form eller i verktygsfältet (se urklipp ovan). Markeringsramen har följande möjligheter: Bilden avmarkeras enklast om man klickar med vänster musknapp i bilden. Hålls SHIFT-knappen nedtryckt blir markeringen kvadratisk respektive cirkulär. Flera markeringar kan göras i bilden om SHIFT-knappen hålls nedtryckt eller genom att klicka i verktygsfältet. Markeringen kan minskas om ALT-knappen hålls nedtryckt. Hålls ALT-knappen nedtryckt vid markeringen centreras markeringen kring nedtryckningspunkten. 30 Brogårdsgymnasiet, Kristinehamn

31 Vill man göra flera kvadratiska eller cirkulära markeringar i bilden måste SHIFT-knappen släppas upp och tryckas ned igen medan vänster musknapp är nedtryckt. Kantutjämning gör att markereringens kanter blir mindre taggiga. Detta märks mest om bilden förstoras. Ett värde över noll på ludd innebär att markeringens kant tonas mot bakgrundsfärgen. Markeringspensel Med markeringspenseln i läget Markering kan markeringen målas fram. Flyttverktyget Det markerade området kan flyttas med flyttverktyget. Tomrmmet fylls med bakgrundsfärgen eller underliggande lager (mer om lager senare). Lassoverktyget Mad lassoverktyget kan man göra godtyckliga markeringar. Lassoverktyget h ar tre markeringsmöjligheter: Med Lasso markerar man området på fri hand med vänster musknapp nedtr yckt. Detta är svårt om området är väldigt oregelbundet. Hålls ALT-knappen nedtryckt ritas linjer mellan klickpunkterna (fästpunkterna). Med Lassopolygon klickar man med vänster musknapp där man vill att ett streck skall ritas. Detta är ofta enklare än med Lasso. Hålls ALT-knappen nedtryckt kan man rita på fri hand. Med Magnetlasso ritas automatiskt en linje i konturen mellan områden med olika nyanser. Fästpunkter skapas automatiskt på lämpliga ställen. Vill man lägga till egna fästpunkter klickar man med vänster musknapp. Bredd anger inom hur många pixlar (1-40) avkänningen görs. Kantkontrast anger känsligheten i konturen (1-100 %), där ett högt värde kan användas vid stora kontraster. Täthet anger frekvensen (0-100) för hur tätt fästpunkterna skall ritas. I samtliga tre fall kan man ta bort senast gjorda fästpunkter genom att upprepat klicka på Deleteknappen. Markeringen underlättas ofta om bilden först förstoras (se nedan). Trollstav Trollstaven är också ett markeringsverktyg som markerar områden automatiskt. Tolerans anger hur stor avvikelsen (1-255) från den markerade pixeln som skall markeras. Skall endast en färgnyans markeras är toleransen 1. Man måste ofta testa ett lämpligt värde på nyansen. Beskärning Vill man bara ha en del av en bild kan bilden beskäras med beskärningsverktyget. Man klickar på beskärningsverktyget eller på höger musknapp för att bekräfta beskärningen. Zoom Ofta är det lättare att arbeta med en större bild, samtidigt som ögonen ansträngs mindre då. Bilden blir större med zoomverktyget. Man zoomar in i bilden genom att klicka på den, och ut ur bilden genom att trycka ner ALT-knappen samtidigt som man klickar i bilden. Punkten man klickar på hamnar mitt i den zommade bilden. Maximal zoomningsgrad är 6400 %. Normal bildstorlek (100 %) återfås genom att dubbelklicka på zoomverktyget eller genom att välja Faktiska pixlar. Handen I en inzoomad bild kan man förflytta sig m h a handverktyget genom att dra i bilden. Hålls CTRLknappen nedtryckt fungerar handen som zoomverktyget. Airbrush Med verktyger Airbrush sprayar man på färgen. Man kan välja penselstorlek och färgens styrka (1-100 %). Färgen som målas är förgrundsfärgen (översta kvadraten i nedre delen av verktygslådan) och den 31 Brogårdsgymnasiet, Kristinehamn

32 väljs med pipett-verktyget. Antingen genom att klicka med pipetten på en färg i bilden eller i färgfönstret (menyn Fönster/Visa Färg). Förgrundsfärgen kan även väljas via färgfönstret. Pensel och penna Med pensel- och pennverktyget kan man rita penseldrag och streck. Penseldragens tjocklek och färgens genomskinlighet (opacitet) kan väljas. Penseldragen kan även tonas, d v s färgen blir svagare allteftersom man ritar. Toningen väljs i rutan alternativrutan Penseldynamik. Färg väljs som för airbrush-verktyget. Suddgummi Med suddgummit kan man radera i bilden. Normalt raderas till bakgrundsfärgen. Vill man radera bort t ex ett penseldrag som ritats i bilden måste man först markera Radera till händelse. Detta innebär att raderingen sker till den sparade bilden. Radergummits form liksom typ (pensel, airbrush, penna, block) kan ändras. Ett lägre värde på opaciteten ger försiktigare radering. Övertoning Övertoning används för att göra fyllningar med färggraderingar, ofta mellan förgrundsfärg och bakgrundsfärg. Fyllningarna kan även ha ytterligare effekter, t ex cirkulära eller kvadratiska. Det finns även en del färdiga fyllningsmönster. Fyllningen görs antingen i hela bilden eller i en markering. Färgpytsen Vill man fylla ett område med samma färg används färgpytsen. Högre värde på tolerans fyller större del av markeringens färgnyanser. Klonstämpel Klonstämpeln används för att måla över delar av en bild med en annan del av bilden. Verktyget används på följande sätt: 1. Välj penselstorlek 2. Vänsterklicka med Alt-knappen nedtryckt på den del av bilden som skall kopieras. 3. Flytta markören till och börja måla med vänsterknnappen nedtryckt. Ett kors visar vilken del av bilden som kopieras. Avmarkeras rutan Justera i verktygsfältet kopieras samma ställe som inledningsvis markerades med Alt-knappen vid varje ny målning. Smeta ut Med smeta ut-verktyget kan man bl a dra ut den existerande färgen i bilden. Detta är användbart om man vill förvränga (morfa) bilden. Välj lämplig storlek på penseln och lämpligt tryck (omkring 50 % är lagom). Röda ögon Vid mörker är pupillen i regel vidöppen. Det innebär att kamerans blixtljuset träffar den blodröda näthinnan med röda ögon som följd på bilden. Med verktyget rödögonspensel justeras röda ögon enkelt till svarta. Prova med toleransen 100 % och en penselstorlek som är något större än pupillen. Prova på bilden rodaogan.jpg. Normalt ersätts röd färg med svart. Verktyget kan emellertid användas för att ersätta andra färger i bilden. Färgen som skall ersättas väljs genom att först välja Första klicket vid Prov i verktygsfältet och sedan klicka på färgen i bilden. Färgen visas då i färgrutan Prov. Färgen som den skall ersättas med väljs i paletten, som visas när färgrutan Ersättning klickas. Välj en lagom tolerans. Ett högt värde ersätter fler nyanser. 32 Brogårdsgymnasiet, Kristinehamn

33 Färgändring av bild Hittills har vi använt färger genom att bl a måla med penslar. Ibland vill man emellertid ändra färgnyansen på ett ansikte eller en bil, öka eller minska ljusheten eller göra delar av bilden svartvit. Markera de del av bilden du vill justera och välj sedan menyvalet Bild/Ställ in/nyans/mättnad (I Photoshop Elements Förbättra/Justera färg/nyans/mättnad ). Nyans Med nyans ändras färgen på markerade området. Mättnad Med mättnad ändras färgstyrkan på det markerade området från maximal färg till ingen färg alls, d v s svartvit bild. Ljushet Med ljushet ändras ljusstyrkan av det markerade området Övning 2.2: Testa förstorningsglaset genom att zoom in och ut. Zooma in så mycket det går på ditt öga. Hur blir bilden? Övning 2.3: Använd smeta ut-verktyget för att 'morfa' bilden av dig, d v s förstora din näsa, haka tänder eller andra delar av ansiktet på ett roligt sätt. Övning 2.4: Klipp ut ditt ansikte genom att markera ansiktet med kvadratisk, rektangulär, ellipsformad och cirkulär markering. Använd lite olika luddnivå (0-10) på markeringarna. Klistra in urklippen i ett tomt Worddokument och jämför skillnaden.välj Ångra efter varje beskärning i Photoshop. Övning 2.5: Flytta ditt ansikte genom att först markera det med den elliptiska markeringsramen och sedan flytta det genom att peka på markeringen med vänster musknapp nedtryckt. Övning 2.7: Klipp åter ut ditt ansikte, men nu med lasso-verktyget. Gör det tre gånger med respektive markeringar lasso, lassopolygon och magnetlasso och klistra in urklippen i ett tomt worddokument. Vilket urklipp blir bäst? Blir resultatet bättre om du zoomar in bilden först? Övning 2.8: Markera ditt huvud med trollstaven (välj lämplig tolerans) och kopiera och klistra in det så att du får två huvuden i dokumentet. Övning 2.9: Markera och klipp ut näsan och munnen i ditt ansikte med förslagsvis lassot. Fånga sedan färgen i ditt ansikte med pipetten med höger eller vänster musknapp och måla sedan över den urklippta ytan med penseln. Färgens genomskinlighet (opacity) ställer du in i penselns kontrollruta. Övning 2.10: I förra övningen får urklippet en färg. Det blir ju inte så bra om ansiktet har olika färger runt urklippet. Vill du att fyllningen skall få samma färg i kanterna som den omgivande färgen kan du använda klonstämpel-verktyget för att fylla ut tomrummet på ett bra sätt. Testa med olika värden på bl a verktygets storlek. Övning 2.11: 33 Brogårdsgymnasiet, Kristinehamn

34 Att morfa innebär t ex att man förändrar ett ansiktet på ett lustigt sätt. Använd förslagsvis klonstämpelverktyget och förändra bilden g:/anders_a/webbdesign/bilder/goran_persson så att den blir som g:/anders_a/webbdesign/bilder/goran_morf. Övning 2.12: Använd förslagsvis lassot och lämpliga färgändringar för att ändra hårfärgen på Göran Persson från g:/anders_a/webbdesign/bilder/goran_persson till g:/anders_a/webbdesign/bilder/goran_persson_hair. Övning 2.13: Använd förslagsvis lassot och lämpliga färgändringar (sätt mättnad till lägsta värdet) och gör Perssons ansikte svartvitt som bilden g:/anders_a/webbdesign/bilder/goran_persson_svartvit. Gör nu istället så att bakgrunden är svartvit som bilden g:/anders_a/webbdesign/bilder/goran_persson_svartvit_invert. Använd Markera/Omvänd när du markerat ansiktet. Övning 2.14: Använd färgbytaren och pipetten så att Perssons kavaj blir grön. Övning 2.15: Använd kloningsverktyget och ge Persson ett öga i pannan som bilden g:/anders_a/webbdesign/bilder/goran_persson_klon Övning 2.16: Öppna bilden g:/anders_a/webbdesign/bilder/tussi i Photoshop och radera det störande hundkopplet m h a förslagsvis kloningsverktyget. Övning 2.17: Öppna bilden g:/anders_a/webbdesign/bilder/fyllningar i Photoshop och gör liknande fyllda fyrkanter och cirklar med figurverktyget (Preset Shapes). Vill du ändra fyllningsfärgen så markera figuren med trollspöt, klicka fyllningsfärgsverktyget och ställ in typ av fyllning i kontrollpaletten. Kolla själv vad som finns under kontrollpalettens tre flikar. Lager Hittills har vi betraktat bilden som en bild. Bilden kan emellertid byggas upp av flera s k lager. Lager innebär att vi kan lägga in bilder i olika lager och bearbeta de olika lagren som separata bilder. Lagren kan beskrivas som genomskinliga plastark (OH-ark) som läggs på varandra, där bilderna på de olika arken tillsammans utgör den totala bilden. Fördelarna med att arbeta med med lager är bl a att man kan ta bort delar av en bild utan att skada bilden i övrigt, samt att ändra t ex placering av människor i en bild genom att ändra lagerföljden. Här följer några användbara begrepp: Ett eller flera lager kan döljas genom att klicka på ögat i lagerpaletten. Flera lager kan länkas samman genom att klicka i kvadraten till vänster om bilden i lagerpaletten. De markerade lagren länkas då till det aktuella lagret (svartmarkerat). Lagrens ordningsföljd kan ändras genom att dra lagren i lagerpaletten med markören. Ordningsföljden är som i paletten med bakgrundsbilden som det underska lagret. Lagret kan flyttas i bilden med flyttverktyget. Lagret kan låsas genom att klicka på låset i lagerpaletten. Ett nytt lager kan skapas via menyn Mer i lagerpalettens övre högra hörn. Ett nytt lager skapas även om en bild (objekt) klistras in i en existerande bild. Text skapar alltid ett nytt lager (se nedan). Ett bild som markerats och klistrats in i ett lager kan återmarkeras i lagret genom att hålla ned ctrlknappen samtidigt som man klickar på lagret i lagerpaletten. Ett lager kan kopieras till en annan bild genom att dra lagret till bilden. Ett lager kan raderas (tas bort) genom att klicka på lagret i lagerpaletten med höger musknapp och välja Radera lager. Länkade lager kan göras om till ett lager via Lager/Lägg samman länkade. Vill man spara bilden med de olika lagren sparas den i Photoshops eget format.psd. En sådan lagerbild upptar dock relativt mycket minne, eftersom den består av flera bilder. 34 Brogårdsgymnasiet, Kristinehamn

35 Anses bilden färdig kan den dock göras om till ett lager via menyvalet Lager/Gör till ett lager. Sedan kan bilden sparas i exempelvis jpg-format. Välj komprimmeringsgrad. 35 Brogårdsgymnasiet, Kristinehamn

36 Övning 2.18: Gör om bilden g:/anders_a/webbdesign/bilder/tre_killar så att den ser ut som bilden g:/anders_a/webbdesign/bilder/tre_killar_trilling. Markera med magnetlassot, kopiera och klistra in. Övning 2.19: I gamla diktaturländer ändrade man i historien genom att bl a plocka bort obekväma personer från fotografier. Plocka bort en av killarna på bilden g:/anders_a/webbdesign/bilder/tre_killar så att det blir som på bilden g:/anders_a/webbdesign/bilder/tva_killar. Markera med magnetlassot och klipp ut. Fyll sedan den urklippta ytan med samma färg som väggen. Välj färg med pipetten genom att klicka på väggen. Fyll sedan ytan med förslagsvis klonstämpeln. Jämna eventuellt sedan till kanterna med smeta-ut-verktyget. Övning 2.20: Nu skall vi istället lägga till en person i en bild. Du skall ändra bilden g:/anders_a/webbdesign/bilder/tre_killar så att den blir som bilden g:/anders_a/webbdesign/bilder/fyra_killar. Börja med att markera och kopiera de två högra killarna och klistra in dem i ett nytt lager med Redigera/Kopiera och Redigera/Klistra in. Markera med lassot (ludd 20 är lagom) och kopiera sedan den vänstre killen. Spelvänd lagret genom att dra det till en ny bild och där välja Bild/Rotera/Vänd vågrätt. Dra sedan tillbaka lagret till ursprungsbilde och ta bort det rättvända lagret. Ändra ordningsföljden på lagren så att tvillingen hamnar bakom de båda andra. Kopiera gärna in fler tvillingar bakom de andra killarna. Sammanfoga lutligen till ett lager med Lager/Lägg samman länkade. Textverktyget Med textverktyget läggs text in i en bild genom att klicka på det ställe på bilden man vill ha texten. Textmarkören blinkar i bilden och det är bara att skriva in texten. Samtidigt skapas ett nytt lager för texten. Ett nytt textlager skapas varje gång en ny text skapas. Texten kan redigeras genom att markera den på traditionellt sätt. Typsnitt, storlek, färg m m väljs i textpaletten. Här följer några användbara begrepp: Texten kan tänjas på kreativa sätt via en knapp i textpaletten. Skall texten färgas med övertoning måste den förenklas, d v s göras om från vektor till punktgrafik. Detta görs genom att markera textlagret och via menyvalet Lager/Förenkla lager. När detta är gjort går det inte att redigera texten. Nu kan emelletid texten övertonas med övertoningsverktyget. Först måste dock texten markeras, d v s håll ned Ctrl-knappen och klicka på textlagret i lagerpaletten. Skall texten som skapas vara genomskinlig, d v s att hålen i bokstäverna är genomskinliga, skapas texten förslagsvis i ett nytt dokument med genomskinlig bakgrund. Glömmer man sig går det emellertid alltid att ta bort bakgrundslagret. Dokumentet spaas sedan i GIF-format (se nedan), som endast sparar ytor där det finns pixlar (formatet JPG sparar en rektangulär bild med bakgrund). Fler texteffekter (skuggor, glasknappar ) fås via menyvalet Fönster/Lagerstilar. Effekterna avaktiveras via den streckade cirkeln till höger i fönsterpaletten i figuren till höger. 36 Brogårdsgymnasiet, Kristinehamn

37 Övning 2.21: Öppna exemplet g:/anders_a/webbdesign/bilder/textstilar och gör ett liknande dokument i Photoshop. Alla stilarna baseras textstorleken 72 p. Använd även effekterna i fönstret Lagerstilar. Lös uppgiften enligt följande punkter: a) Öppna ett nytt Photoshop-dokument med vit bakgrund och storleken 300x600 punkter med upplösningen 100 pixlar/tum (mer om upplösning senare). b) Skriv in texten Vanlig med röd, fetstil och storlek 72 p. Alla nedanstående texter har i grunden denna färg och storlek. Lägg texten på bakgrunden. c) Skapa ett nytt lager och lägg där texten Butt. Välj gärna egna texter med t ex övertoningar och skevningar! d) Skapa ett nytt lager och lägg där texten Chisel. e) Skapa ett nytt lager och lägg där texten Cut. f) Skapa ett nytt lager och lägg där texten Shad. g) Skuggan är något genomskinlig och görs suddig med blur. h) Skapa ett nytt lager och lägg där texten Olika. Bokstäverna har sedan fyllts med olika färger med fyllningsverktyget. i) Det färdiga dokumentet består nu av fem olika lager förutom bakgrunden. j) Ta bort lagret som bakgrunden ligger på. Texten blir då genomskinlig. k) Lägg samman alla lagren med Lager/Gör till ett lager. l) Spara texten via Arkiv/Spara i GIF-format. m) Lägg in bilden i ett HTML-dokument och kolla om texten är genomskinlig. Övning 2.22: n) Lägg in en text med ditt namn i t ex bilden på dig själv delvis bakom ditt huvud, ungefär som i exemplet j:/anders_a/webbdesign/bilder/textskugga. Observera att texten ligger bakom den ena killens huvud och framför den andres (kopiera en del av huvudet i mitten till ett nytt lager som läggs överst). Skuggan åstadkoms exempelvis genom att kopiera texten och ge den en annan färg (har ej hittat något skuggverktyg?!). Förstora bilden med förstoringsglaset i verktygspaletten så blir den enklare att jobba med. Formverktyget Med formverktyget skapas rektanglar, avrundade rektanglar, ellipser, polygoner, linjer och egna former. Formernas proportioner och storlek kan justeras via geometrialternativet, liksom polygonens antal sidor. Dessutom kan formerna ges ett stort antal förvalda stilar, s k lagerstilar, passande för exempelvis egendesignade knappar. Så länge lagret formen tillhör inte är förenklat kan det redigeras på liknande sätt som text. För egna former finns ett stort antal förvalda former (vektorformer), bl a natur, djur, former och pratbubblor. Urklipp i en vektorform kan göras med en annan vektorform och sedan markera knappen Ta bort från formområde. För att urklipp med markeringsverktygen skall kunna göras måste det aktuella lagret först förenklas. Skuggriktningen justeras via menyvalet Lager/Lagerstilar/Stilinställningar för det aktuella lagret. 37 Brogårdsgymnasiet, Kristinehamn

38 Övning 2.221: Öppna ett nytt dokument med genomskinlig bakgrund och storleken 2 x 1 cm. Gör sedan en snygg rundad knapp utan text, som du sparar med Arkiv/Spara för webben under namnet knappmall.gif. Bilden sparas med Gif-format därför att kanterna skall vara genomskinliga. Öppna sedan en kopia av bilden och lägg in lämplig text i knappen och spara den igen med Arkiv/Spara för webben under ett nytt namn med Gif-format. Övning 2.222: Gör ett kreativt kollage med några egna former. Tonomfång och kontrast Histogram En bild som är för mörk, för ljus eller har dålig kontrast är enkel att förbättra om den är sparad på dator. Börja med att kolla på bildens histogram (Bild/Histogram), som visar hur bildens pixlar fördelar sig på olika ljusnivåer. Svart är 0 och vitt är 255, d v s det finns 255 ljusnivåer (toner, intensitetsnivåer). Är bilden mörk finns relativt många pixlar i början av histogrammet och om bilden är ljus finns relativt många pixlar i slutet av diagrammet. Har histogrammet stor andel pixlar koncentrerade till få toppar tyder det på att bilden har hög kontrast (stora hopp mellan ljusa och mörka toner). Är däremot pixlarna jämnt fördelade i diagrammet tyder det på dålig kontrast (grå bild med dålig detaljåtergivning). Bilden kan förbättras på lite olika sätt. Bilden ovan visar histogrammet för den övertonade bilden under diagrammet. Nedan går vi igenom ett antal verktyg som påverkar bildens kontrast, ljus och färg. Flera verktyg leder till samma resultat, men på lite olika sätt. Utjämna Kommandot Bild/Justeringar/Utjämna minskar automatiskt kontrasten i bilden, d v s drar isär histogrammet så att tonomfånget blir större. Det innebär att mörkast partierna i bilden blir mörkare och ljusaste ljusare. Testa på bilden Björnar2.jpg. Fyllnadsljus Motiv tagna i motljus blir ofta för mörka. Med Förbättra/Justera ljussättning/fyllnadsljus blir bilden ljusare genom att mörka pixlar minskar, d v s endast mörka pixlar påverkas. Testa på bilden fyllnadsljus.jpg. Bakgrundsljus Ett bra exponerat motiv med en överexponerad bakgrund är störande. Den ljusa bakgrunden kan mörkas med Förbättra/Justera ljussättning/justera bakgrundsljus. Här påverkas endas bildens ljusa pixlar. Testa på bilden ljusbakgrund.jpg. Fungerar halvbra. Intensitet och kontrast Bildens intensitet och kontrast kan justeras via Förbättra/Justera intensitet/kontrast/intensitet/kontrast. Intensiteten förflyttar hela histogramkurvan till höger eller 38 Brogårdsgymnasiet, Kristinehamn

39 vänster, d v s gör bilden ljusare eller mörkare. Kontrasten påverkar hela diagrammet som i Utjämna, men kan här påverkas godtyckligt. Testa på bilden Björnar2.jpg. Automatisk färg- och kontrastredigering Programmet innehåller några enklare verktyg som automatiskt korrigerar färg och kontrast. Verktygen ligger under menyvalet Förbättra. Testa följande verktyg på bilden fargfel.jpg: Autonivåer Påverkar mörka och ljusa färger i bilden. Autokontrast Påverkar bildens kontrast. Automatisk färgkorrigering Tar bort färgfel i bilden från t ex glödlampor, samt påverkar mörka och ljusa färger och färger nära grått. Snabbkorrigering Ovanstående korrigeringar görs här delvis interaktivt. Nivåer Ibland vill man endast justera vissa toner i en bild, t ex endast göra mörka partier lite ljusare eller endast ljusa partier lite mörkare. Detta görs genom att ändra bildens nivåer via Förbättra/Justera intensitet/kontrast/nivåer. Dialogrutan som kommer upp används på följand sätt. Pilarna under histogrammet (ingångsnivåer) ökar bildens kontrast: Vänstra pilen gör mörka partier (skuggor) mörkare. Mittenpilen gör mellantoner mörkare eller ljusare. Högra pilen gör ljusa partier (högdagrar) ljusare. Pilarna under det övertonade fältet (utgångsnivåer) minskar bildens kontrast: Vänstra pilen gör mörka partier ljusare. Högra pilen gör ljusa partier mörkare. Kontrasten kan även justeras m h a de tre pipetterna: Vänstra pipetten fångar en mörk ton (pixel) i bilden och gör alla pixlar som är mörkare än den svart. (0). Högra pipetten fångar en ljus ton (pixel) i bilden och gör alla pixlar som är ljusare än den vit. (255). Mittenpipetten fångar bildens mellantoner, d v s en grå nyans, och tar bort eventuella färgfel frå t ex belysning så att det verkligen blir grått. Kolla tonvärdena i Infopaletten och ställ in pipettens provstorlek på 3x3 pixlar Pipettpaletten. Ersätt färg Med menyvalet Förbättra/Justera färg/ersätt färg kan en färg i bilden ersättas med en annan färg. Klicka i bilden med den vänstra pipetten för att välja den färg som skall bytas ut. Pipetten i mitten utökar och den högra minskar färgområdet som skall ersättas Det vita i den lilla bilden visas vilka delar som kommer att ersättas. Reglaget Överstrålning ökar på antalet nyanser som kommer att ersättas. Ersätt färgen genom att dra i reglagen nedan tills önskad färg uppkommer. Påverkar den utvalda färgen i hela bilden, om inte den del som skall ersättas är markerad. Testa på bilden kavaj.jpg och dam.jpg. 39 Brogårdsgymnasiet, Kristinehamn

40 Gråskalebild Menyvalet Förbättra/Justera färg/ta bort färg gör om färgbilden till en gråskalebild med 255 olika gråskaletoner. Invertera Menyvalet Bild/Justeringar/Invertera gör en positiv bild negativ och negativ bild positiv. Användbart om man vill göra bilder av t ex inskannade filmnegativ (nyare skannrar omvandlar dock i regel automatiskt till positiv). Tröskelvärde Menyvalet Bild/Justeringar/Tröskelvärde omvandlar bilden till en svartvit bild, d v s uppbyggd av endast vita och svarta punkter. Tröskelvärdet väljer man själv, d v s alla punkter under tröskelvärdet blir svarta och alla över vita. Testa på bilden dam.jpg. Färgreduktion Menyvalet Bild/Justeringar/Färgreduktion reduceras antalet färger/gråskalor i bilden till ett godtyckligt antal (max 255). Exempelvis innebär 2 nivåer i en RGB-bild två nyanser i varje färg, d v s totalt sex färger. Vill man att bilden skall bestå ett ett visst antal förutbestämda färger, kan man först omvandla bilden till en gråskalebild, ange antalet nivåer och sedan markera respektive nivå med trollspöet och färga det med hinken. Färgläggning av gråskalebild Fram till mitten av 1900-talet innan färgfototekniken började bli vanlig, colorerades ofta svartvita fotografier för hand till färgbilder. Med ett bildbehandlingsprogram är det relativt enkelt att färglägga svartvita bilder. Gången är följande: 1. Markera området som skall färgläggas. 2. Kopiera det och klistra in det som ett nytt lager. 3. Färglägg det med önskad färg med t ex hinken. Lämplig färg hämtas med pipetten från en annan bild, t ex ansiktsfärg. 4. Ändra lagrets opacitet så att strukturer syns i bilden. Gör bilden dam.jpg till en gråskalebild och färglägg den. Övertoningskarta Med menyvalet Bild/Justering/Övertoningskarta ersätts bildens färger och kontraster med ett antal fördefinierade övertoningar. Skapar psykedeliska bilder. 40 Brogårdsgymnasiet, Kristinehamn

41 Animering av GIF-bilder Hemsidor innehåller ofta rörliga bilder, d v s animeringar. Animeringarna är uppbyggda av ett antal GIF-bilder, som samverkar till en rörlig bild. Animeringar är enkla att skapa i PhotoShop, där bilderna som skall animeras läggs i olika lager. Bilden som visas först ligger i det understa lagret (bakgrunden). Gör på här för att skapa en animering: 1) Öppna ett nytt dokument i PhotoShop med genomskinlig bakgrund. Lagom stort med upplösningen 72 dpi. 2) Skapa eller öppna en bild (eller text). 3) Kopiera in bilden till ett nytt lager och gör en liten ändring, t ex en vridning (Bild/Omforma/Omforma fritt) eller förflyttning i sidled. 4) Kopiera den senaste bilden till ett nytt lager o s v tills alla bilder är färdiga. 5) Spara dokumentet som Arkiv/Spara för webben. 6) Klicka för Animera (och eventuellt Genomskinlig om det är en bild utan bakgrund, t ex text), samt välj tiden mellan bildväxlingarna och om animeringen skall upprepas. 7) Klicka på OK och spara bilden som en vanlig GIF-bild. 8) Den animerade bilden är nu färdig att använda. Provkör bilden genom att klicka på den eller lägg in den i ett HTML-dokument. Övning 2.21: Öppna bilden g:/anders_a/webbdesign/bilder/björnar2 i Photoshop och ta fram dess histogram via knappen på verktygsfältet (stapeldiagrammet). Som du ser saknar bilden helt svarta och helt vita pixlar. Idealet är om bilden innehåller pixlar av alla ljusnivåer. I detta fallet så borde vi försöka att öka bildens tonomfång. Använd Förbättra/Justera intensitet/kontrast/intensitet/kontrast och gör bildens mörka delar mörkare och de ljusa delarna ljusare. Kolla att histogrammet förändras. Finjustera tills bilden ser bra ut. Se dock till att inte ha för mycket svart respektive vitt. Det skapar hål i bilden, d v s information försvinner. Övning 2.22: Öppna bilden g:/anders_a/webbdesign/bilder/katten i Photoshop och korrigera bilden så att den blir bättre. Övning 2.23: Öppna bilden g:/anders_a/webbdesign/bilder/seamiss i Photoshop. Färgkorrigera sedan med Förbättra/Justera färg/nyans/mättnad så att det röda i bilden försvinner, d v s gör så att båten blir vit. Övning 2.24: Öppna bilden g:/anders_a/webbdesign/bilder/tre11 i Photoshop. Bilden är tagen i fjällen i svagt ljus, därav bildens blåa ton. Korrigera kontrast med Förbättra/Justera intensitet/kontrast/intensitet/kontrast och färger med Förbättra/Justera färg/nyans/mättnad så att bilden blir bättre och det blå i bilden minskar. Övning 2.25: Öppna bilden på dig själv och gör en Andy Warhol -bild (Marilyn Manson i olika ansiktsfärger) av dig själv, d v s ändra färgerna genom att på lämpligt sätt kombinera Bil/Justeringar/Färgreduktion med Förbättra/Justde färg/ersätt färg så att färgen i ansiktet ändras. Gör sex olika bilder av ditt ansikte som ligger förskjutna till varandra i olika lager. Övning 2.26: Gör en GIF-animering bestående av 5-10 bilder. Du får själv hitta på animeringens innehåll. Provkör sedan den färdiga animeringen. 41 Brogårdsgymnasiet, Kristinehamn

42 Filter och effekter I Photoshop finns stora möjligheter att påverka bilden med olika typer av filter, bl a för att öka eller minska bildens skärpa, förvränga bilden (morfa) och göra om bilden till en målning. Filtren är uppdelade på 13 olika kategorier (se urklipp till vänster), som i sin tur innehåller många olika filter. Nedan beskrivs de olika filterkategorierna och några av deras filter. Filtren hittas antingen under menyvalet Filter, eller i fönstret Fönster/Filter, som även visar exempel på respektive filters effekter. Brus Innehåller fyra olika filter, bl a: Addera brus gör att bilden ser lite medfaren ut, t ex för att få text (bilden måset förenklas först) i bilden att se mer naturligt ut. Damm och repor reducerar små skador i bilden. Förvandla pixlar Innehåller sju filter som på olika sätt förvadlar pixlarna så att bilden blir fläckig. Filtren skapar effektfulla bilder. Förvrängning Innehåller 13 filter som på olika förvränger bilden, bl a: Gör flytande för morfning av bilden. Testa följande verktygen Tänj, Turbulens (med och motsols), Snör ihop och Blås upp. Knipning gör bilden skrattspegelliknande. Krusning gör bilden vågig. Skeva gör bilden vågig på ett godtyckligt sätt. Glas och vattenringar visar bilden genom glas/vatten. Våg skapar olika typer av vågor i bilden. Oskärpa Skapar en oskarpare bild. Detta är effektfullt om man vill framhäva en viss detalj i bilden, som t ex ögonen i bilden till höger. Skärpa Innehåller 4 filter, där det bästa är: Oskarp mask som förbättrar kantskärpan med tre reglage. Effekter Fönster/Effekter påverkar bilden på liknande sätt som ett filter. Bl a kan bilderna inramas och texten (som måste ligga i ett eget lager) påverkas. Övning 2.27: Öppna bilden av dig själv och testa några olika filtereffekter utan att spara. Övning 2.28: Öppna bilden av dig själv. Öppna även ett tomt Photoshop-dokument med måtten 70x150 mm. Markera sedan kvadratiskt och kopiera ditt huvud. Klistra sedan in sex kopior av ditt huvud i det nya dokumentet med två huvuden i tre rader. Kopiorna skall klistras in i nya lager. 42 Brogårdsgymnasiet, Kristinehamn

43 Bilden skall alltså bestå av sex lager förutom bakgrunden. Förändra sedan varje bild (lager) med en filtereffekt. Lägg in text under varje bild i bildens lager som anger vilken filtereffetk du använt. Övning 2.29: Öppna bilden g:/anders_a/webbdesign/bilder/mvc-377s i Photoshop och gör den skarpare. Blir den bättre! Övning 2.30: Öppna åter bilden g:/anders_a/webbdesign/bilder/mvc-377s, men gör nu endast ögonen skarpare. Blir det bättre? Övning 2.31: Öppna bilden g:/anders_a/webbdesign/bilder/oskar_okt_00 och gör allt utom ansikte suddigare. Bilden skall ungefär se ut som g:/anders_a/webbdesign/bilder/suddig_bild när den är färdig. Här har oskärpan (suddigheten) ökats med filtret Image/Blur/Blur More. Att öka oskärpan i vissa delar av bilden är ett sätt att lyfta fram det centrala i bilden. Övning Bildutställning på temat teknik och naturvetenskap: Varje elev i kursen skall skapa en bild i Photoshop Elements. Bilderna kommer sedan att hängas ut i ett gemensamt utrymme i närheten av datasalen. Bilden skrivs ut på skolans färglaserskrivare. Du har ganska fria händer att utfoma din bild. Bilden får dock inte innehålla förvrängda (morfade) personer, samt skall skapas utifrån följande punkter: Bildens motiv skall ha temat teknik eller naturvetenskap, t ex något matematiskt, fysikaliskt innehåll, såsom en vacker formel, eller kan även vara en satirbild om genmodifiering eller växthuseffekten, ett kollage av kända forskare, djur, formler eller bilar. Det kan även vara en reklambild för t ex mobiltelefoner, t ex att Newton ringer till Einstein på mobilen i någon oväntad miljö. Bilden skall ha måtten 28 x 19 cm, d v s knappt ett A4, och upplösningen 300 ppi. Bilden kan baseras på ett fotografi, men det är inte nödvändigt.. Bilden skall vara signerad med ditt namn i högra nedre hörnet, gärna med ett skrivstilsliknande typsnitt. Bilden skall innehålla någon figur från formverktyget. Någon filtereffekt och effekt skall användas. Spara bilden direkt under din enhet h:/ under filnamnet bildendittnamn så att läraren lätt hittar bilden. Du har ungeför två lektioner på dig att göra bilden. Använd din fantasi och var kreativ! Fönstret Filläsare Via menyvalet Fönster/Filläsare kommer ett användbart fönster upp. Här är det lätt att navigera mellan olika bilder och få filinformation om bilderna. Bilder kan även öppnas härifrån. Gruppbearbetning Bilder tagna med digitalkameran blir ofta väldigt stora i både format och minnesutrymme. Skall bilderna användas på en hemsida måste de därför först krympas. Detta kan förstås göras bid för bild. I Photoshop finns emellertid en funktion för ändra filformat, bildstorlek och upplösning på samtliga bilder i en viss mapp. Detta görs under menyvalt Arkiv/Gruppbearbetning, enligt urklippet till höger. 43 Brogårdsgymnasiet, Kristinehamn

44 Filinformation Under menyvalet Arkiv/Filinformation kan information om bilden lagras, t ex var den är tagen och fotografens namn. Informationen lagras i bildfilen. Lagras ett urklipp av bilden försvinn er dock informationen. Webbfotogalleri Vill man lägga upp en webbsida med många bilder och tillhörande texter från t ex en skolresa eller öppet hus på skolan är det enkelt att göra detta via menyvalet Arkiv/Skapa webbfotagalleri. Webbsidan skapas praktiskt taget automatiskt, även eventuell komprimmering av bilderna. Bildtexterna får man dock lägga till själv. Webbsidan skapas på följande sätt: Lägg alla bilder som skall ingå på webbsidan i rätt ordning i en egen mapp. Skapa en ny mapp där den nya webbsidan skall sparas. Öppna varje bild (enklast via Filläsaren) i Photoshop och lägg in bildtexterna via menyvalet Arkiv/Filinformation och spara. Öppna Arkiv/Skapa webbfotagalleri. Välj stilar, d v s typ av layot. Ange ifrån vilken mapp bilderna skall hämtas. Ange i vilken mapp galleriet skall skapas. Välj inställningar för varje alternativ, bl a visning av bildtext, bildstorlek och bakgrundsfärg. Observera att bildtexten som lagts in för originalbilden försvinner om bildernas storlek ändras. Klicka på OK när allt är ifyllt. Nu skapas några nya mappar med bilder i mappen som skapades under andra punkten ovan, samt själva webbfilen index.htm. För över hela mappen med ftp-programmet och länka till hemsidan. Övning 2.32: Skapa ett webbfotogalleri med några bilder (t ex med temat djur eller filmer och med bilder du hittar på Internet) som du lägger en länk till på din hemsida. Förse bilderna med bildtexter. Bildstorlek, upplösning och komprimmering Med upplösning menas med vilken noggrannhet detaljerna i bilden återges. Det som begränsar upplösningen är hur många punkter pixels är uppbyggd av. Måttet för upplösning återges i enheten PPI pixels per inch. Ibland används även enheten DPI dots per inch. För tryckta rastrerade bilder används beteckningen LPI lines per inch för rastertätheten. Bildens upplösning (PPI eller DPI) bör vara dubbelt så hög som rastertätheten (LPI). Bildstorlek och upplösning för utskrift I PhotoShop ändras bildensstorlek och upplösning för utskrift via menyvalet Bild/Ändra storlek/bildstorlek. Dokumentstorlek (även upplösning) avser bilden som skall skrivas ut. Upplösningen för bilder som skall skrivas ut med bläckstråleskrivare bör ligga på minst 300 ppi. För dagstidningar räcker 170 ppi. Bildstorlek och upplösning för webben Pixeldimensioner i Bild/Ändra storlek/bildstorlek anger bildens absoluta storlek, d v s så stor den kommer att visas på en webbsida. Skall en bild anpassas för webben är det vanligt att välja en upplösning på 72 ppi (skärmen är c:a 30 cm (12,5 tum) bred och innehåller vanligtvis omkring 1000 pixlar per rad. Alltså är skärmupplösningen 1000/12,5=80 ppi.). Välj först upplösningen och sedan bildstorleken; antingen i pixlar eller cm. Rutan Ändra bildupplösning skall vara förkryssad. Komprimmering och interlaced (sammanflätad) Innan en bilds upplösning förändras (som i förra stycket) bör man testa menyvalet Arkiv/Spara för webben. Där väljs vilket format bilden skall sparas i (jpg, gif ). Följande användbara val kan göras: 44 Brogårdsgymnasiet, Kristinehamn

45 Bildstorleken (i % eller pixlar). Glöm inte att verkställa. För jpg-format kan kompressionsgraden väljas med ett reglage vid pilen vid Kvatitet. Resultatet syns i den vänstra bilden. För gif-format kan rutan Sammanflätad kryssas för. Detta innebär att hela bilden visas med successivt förbättrad kvalitet under nedladdningen, till skillnad från jpg-bilder som växer fram uppifrån under nedladdningen. En sammanflätad (som även kallas interlaced) bild upptar något mer minne. Bildskanning Skanning innebär att en pappersbild eller diabild läses in till datorn via en bildläsare (skanner). När du skannar väljer du själv upplösning och skala. Vid skanning av bilder för utskrift på traditionell laseroch bläckstråleskrivare med upplösning 600 ppi räcker det att skanna bilden med upplösningen 150 ppi, om den skannade bilden skall ha samma storlek som originalet. Skall den skannade bilden endast visas på datorskärmen räcker 76 ppi. Nöjer du dig med en kopia av halva originalstorleken (d v s skalan 50 %) kan du naturligtvis också halvera upplösningen. Skaländringen innebär att bildens mått i cm ändras, men att antalet pixlar bibehålls. Detta innebär att om skalan halveras så dubbleras upplösningen. Ändrar du skalan från exempelvis 100 % till 50 % bör du därför också halvera upplösningen från exempelvis 152 ppi till 76 ppi. Det är alltså upplösningen som avgör hur stort minnesutrymme bilden upptar för en given storlek. Tänk alltid på att kolla filstorleken innan du skannar bilden. En tumregel är att den skannade bilden oavsett mått och upplösning inte bör överstiga 1 MB, åtminstone inte i övningssammanhang. Bildformat Som du säkert redan vet kan bilder (punktgrafik) sparas i olika format (BMP, JPG ). Nedan presenteras kort några vanliga filformat. I Photoshop-handledningen står mer om de olika formaten. TIFF Tagged Image File Format Formatet sparar inte bara varje bildpunkt utan även bl a information om bildstorlek och upplösning. Infogas bilden i ett annat dokument visas den med samma storlek och upplösning som den skapades med i skannern eller bildbehandlingsprogrammet. Komprimeras i ett bildbehandlingsprogram. BMP Bit Map Är standardformat för Windows och kan därför användas i de flesta tillämpningar. Formatet BMP spara dock inte lika mycket information om bilden som TIFF och kan därför bl a inte användas som förlaga vid tryckning i fyrfärg. JPEG Joint Photografic Experts Group Ett komprimerat bildformat. Komprimeringen är alltid förstörande, d v s det försvinner information vid komprimeringen så att originalbilden inte går att återskapa. Visar 16,7 miljoner färger. Tillsammans med GIF (se nedan) vanligt format på Internet. GIF Graphics Interchange Format Ett komprimerat bildformat som är icke-förstörande, d v s all information om originalbilden finns lagrat i den komprimerade bilden. Bilden behöver inte vara fyrkantig och kan innehålla genomskinliga partier. Används för animeringar. Visar bara 256 färger och används därför oftast till logotyper, ritade bilder, knappar och bakgrunder. Tillsammans med JPEG (se ovan) vanligt format på Internet. PNG (Portable Network Graphics) är utvecklat som ett patentfritt alternativ till GIF och används för förlustfri komprimering och för visning av bilder på webben. Till skillnad från GIF stöder PNG 24-bitars bilder och åstadkommer 45 Brogårdsgymnasiet, Kristinehamn

46 bakgrundsgenomskinlighet utan taggiga kanter. Däremot stöder inte vissa webbläsare PNG-bilder. PNG bevarar genomskinlighet i gråskale- och RGB-bilder. Nu skannar vi Skolans skanner är av fabrikatet Agfa PhotoLook (?). Följ punkterna nedan när du skannar: Sätt på skannern innan datorn startas så att datorn tar med skannerrutinerna vid uppstarten. Lägg på bilden och gör en Prescan, d v s gör en grovskanning av bilden. Markera den del av bilden du vill skanna. Ställ in skala och upplösning. Välj RGB-läget (CMYK-läget använd om den inskannade bilden skall tryckas i fyrfärg). Gör eventuellt inställningar för att modifiera ljusstyrka, kontrast och färgbalans. Kolla filstorleken! Spara och skanna bilden. Bilden skall sparas i formatet TIFF (se nedan). Vill du ha bilden i t ex JPG-format får du spara om TIFF-bilden i ett bildbehandlingsprogram. Övning 2.33: Arbeta gärna 2-4 elever per grupp i följande skannuppgift. Välj en detaljrik färgbild ur en bok (exempelvis en kartbild). Gör en prescan av bilden. Markera en del av bilden (c:a 5x5 cm). Välj skalan 100 %. Gör nu tre skanningar med de tre lägsta upplösningarna (76, 152, 354 ppi). Skriv ut de tre olika bilderna på en färgskrivare (alternativt laserskrivare) och studera bildernas upplösning. Anteckna filstorlekarna på respektive bild. Visa bilderna för läraren. Skanna samma motiv igen, men nu med skalan 50 %. Skriv ut. Kolla filstorleken och jämför med bilderna som är skannade med skalan 100 %. Vad är skillnaden? 46 Brogårdsgymnasiet, Kristinehamn

47 Mönster Med färgpytsen kan förutom färger även mönster fyllas. Vid Fyll i verktygsfältet väljs Mönster och sedan väljs mönstren i rutan till höger. Fler mönster kan läsas in via rutans högerpil. Egna mönster kan skapas på följande sätt ur en existerande bild: Markera en lite fyrkant av det som skall bli mönstret. Spara mönstret via Redigera/Ange mönster Mönstret finns nu med i mönsterrutan i verktygsfältet. Bakgrunder Även om läsbarheten kanske är bäst med en vit bakgrund blir webbsidan mer spännande med en bakgrundsbild. Det är dock viktigt att bakgrunden inte är störande. Bakgrunden kan antigen vara en uttunnad bild eller ett mönster. Bild Är bakgrunden en bild är det viktigt att bildens mått är anpassade till webbsidans storlek för att undvika att bakgrunden upprepas. Dessutom bör bakgrunden fixeras (vattenstämpel i FrontPage och bgproperties="fixed" i HTML) om webbsidan skall vara scrollbar. Skapa bakgrundsbilden på följande sätt: Öppna bilden (t ex ett fotografi) i Photoshop Elements. Justera bildstorleken via menyvalet Bild/Ändra storlek/bildstorlek så att bilden passar webbsidan, t ex 1280*800 pixlar för en helsida. Prova dig fram genom att spara originalbilden under ett annat namn och infoga den i din webbsida. Gör gärna bakgrundsbilden något större än webbsidan. Tänk på att bakgrunden inte skall störa innehållet på webbsidan. Tunna ut bilden via menyvalet Förbättra/Justera färg/nyans/mättnad och t ex reglaget Ljushet. Filtereffekten Filter/Stilisera/Relief är också användbart för bakgrunder (se bilder). Testa gärna andra filtereffekter! Optimera nu bildens minnesstorlek för webben genom att spara den via menyvalet Arkiv/Spara för webben. Välj förslagsvis JPEG-format med låg kvalitet, som är tillräckligt för en bakgrundsbild. Färdiga mönster En bakgrund med ett upprepningsbart färdigt mönster skapas på följande sätt: Skapa ett nytt dokument med förslagsvis storleken 40 x 40 pixlar. Fyll dokumentet med önskat mönster. Spara med Arkiv/Spara för webben med lägsta kvaliteten. Eftersom en bakgrundsbild som är mindre än ett webbsidan upprepas, fylls hela webbsidan med bilden. 47 Brogårdsgymnasiet, Kristinehamn

48 Egna mönster Utgörs bakgrunden av ett upprepningsbart mönster är bildens dimensioner oväsentliga. Ett mönster med 2 pixlar breda röda ränder skapas på följande sätt: Skapa en ny bild via menyvalet Arkiv/Nytt Skapa sedan en genomskinlig bild med dimensionen 4*1 pixlar. Förstora bilden så att rutmönstret med de fyra pixlerna syns. Rita/fyll de två vänstra pixlarna med pennverktyget med röd färg. Spara bilden via menyvalet Arkiv/Spara för webben som en GIF-bild. Öppnas bilden som en bakgrundsbild uppfyller den hela webbsidan som en randig bild (se urklipp ovan) eftersom den upprepas. En mönsterbild med två pixlars breda diagonala ränder (se urklipp) skapas på motsvarande sätt utifrån en bild med 4*4 pixlar. Mönster med filtereffekter Med hjäp av olika filter kan enfärgade (eller övertonade) bilder ges effektfulla bakgrunder. Testa några av följande filter: Filter/Brus/Addera brus Filter/Förvandla pixlar/mezzotint Filter/Förvandla pixlar/skapa fläckar Filter/Konstnärliga/Svamp (se urklipp) Filter/Skiss/Conté Crayon (bl a tegel- och säckvävsmönster) Kombineras dessa filter med ett filter för oskärpa under menyvalet Filter/Oskärpa fås ytterligare användbara effekter. Denna typ av bakgrunder går ofta att upprepas. Prova därför med en bildstorlek på 100*100 pixlar. Spara bilden liksom tidigare via menyvalet Arkiv/Spara för webben. Övning 2.34: Skapa följande bakgrundsbilder i Photoshop Elements och testa dem sedan som bakgrundsbilder i en hemsida (förslagsvis via FrontPage): a) Gör en bakgrundsbild av ett fotografi. Testa med att tunna ut bilden, oskärpa och/eller relief. Bilden bör vara c: a 1280*800 pixlar stor. b) Skapa en bakgrundsbild med ett rutmönster uppbyggt av 8*8 pixlar, enligt urklippet till höger. Linjerna är 2 pixler breda. Även filtret för oskärpa har använts. c) Skapa en bakgrundbild med mosaikplattor. Utgå från en 100*100 pixlar stor gråskalebild, som utsätts för filtret Filter/Textur/Mosaikplattor (se urklipp), samt intensitetsändring viamenyvalet Förbättra/Justera intensitet/kontrast/intensitet/kontrast. d) Hitta på en egen bakgrund. Därmed är vi klara med kursens bildbehandlingsdel. 48 Brogårdsgymnasiet, Kristinehamn

49 3. Hemsidor med FrontPage Inledning Hittills i kursen har vi skapat våra hemsidor med HTML-kod. Detta fungerar vanligtvis bra, samtidigt som man har totalkoll på vad man gör. Nackdelen med att skriva hemsidor med kod är att det är ganska tidsödande och kräver kunskaper i det relativt abstrakta HTML-språket. Dessutom syns ju inte sidan som man layoutar förrän efteråt när koden är inskriven. Vanligtvis används därför program som automatiskt skapar HTML-kod utifrån en layout. Vanliga webbdesignprogram är FrontPage och Dreamweawer. Det går även att skapa enklare webbsidor med ordbehandlingsprogrammet Word (skapar dock onödigt mycket HTML-kod). HTML-koden skapas då när dokumentet sparas med menyvalet Arkiv/Spara som webbsida. I denna kursen kommer vi att använda Microsofts program FrontPage. Programmets menyer har vissa likheter med Word och är enkelt att använda och lära sig. Programmet används även i professionella sammanhang. Inledningsvis kommer vi inte att använda oss av begreppet webbplats, utan spara Frontpagedokumenten som enskilda htm-dokument. Textredigering och nytt stycke Skriv in texten som du vill ha den på hemsidan. Typsnitt, textstorlek, justeringar o s v väljs på liknande sätt som i Word via verktygsfältet. Under menyvalet Format/Tecken kan ytterligare textformatering göras. Enter-tangenten skapar nytt stycke (<p>-tagg), d v s tom rad före och efter. Ny rad utan nytt stycke skapas med Shift-Enter, som skapar en <br>-tagg i HTML-koden. Bakgrundsfärg och bakgrundsbild Sidans bakgrundsfärg väljs genom att klicka på sidan med höger musknapp och välja Sidegenskaper. Under fliken Bakgrund väljs sedan bakgrundsfärgen. Bakgrundsbild väljs genom att markera rutan och bläddra fram bildfilen. Skall bakgrundsbilden ligga still när sidan rullas väljs Vattenstämpel (kolla HTML-koden!). Visningslägen Längs ner på sidan finns tre flikar för olika visningslägen: Normal I detta visningsläge layoutas och redigeras sidan. HTML I detta läget visas HTML-koden, som även kan redigeras. Förhandsgranskning Här visas hur sidan ser ut och fungerar i webbläsaren, bl a kan länkarna testas. Länkar och bokmärken Länkar till andra dokument Hyperlänkar från textlänkar och bilder skapas på följande sätt: Markera länkordet (eller bilden). Klicka på höger musknapp och välj Egenskaper för hyperlänk (eller länkknappen i verktygsfältet). Välj fil eller url-adress för länken via filväljaren eller genom att skriva in länkadresen i nedre textfältet. Klicka på Målram om länken skall öppnas i ett annat eller nytt fönster och gör lämpligt val. Länkar inom dokument I långa hemsidor är det praktiskt att lägga länkar från början av sidan till olika stycken. Länkarna går då till bokmärken man definierar upp. Gör på följande sätt: Markera ordet dit länken skall gå. Skapa bokmärket genom menyvalet Infoga/Bokmärke och välj OK. 49 Brogårdsgymnasiet, Kristinehamn

50 Markera länkordet (bilden) och välj Egenskaper för hyperlänk med höger musknapp. Klicka där på knappen Bokmärken och välj önskat bokmärke. Det går även att länka till bokmärken i andra dokument. Gör på samma sätt som i föregående punkt, men välj dokument innan bokmärke. Bilder Infoga En bild (jpg, gif eller png) infogas via menyvalet Infoga/Bildobjekt/Från fil (eller via bildknappen i verktygsfältet). Bildens storlek ändras genom att dra i dess hörn och bilden kan flyttas genom att dra i den (som i Word). Bildens egenskaper (läget på sidan, ram, avstånd till text ) kan justeras via menyvalet Bildegenskaper med höger musknapp. Ledtext läggs in via menyvalet Bildegenskaper under höger musknapp, fliken Allmänt och i textfältet efter Text. Bildbehandling Bilden kan ändras på olika sätt, bl a ljusstyrka och kontrast, bilden kan spegelvändas, roteras och beskäras (klicka på bilden och på beskäringsverktyget, justera den streckade ramen så att den ramar in det som skall vara kvar, klicka på beskäringsverktyget igen). Klickbara bilder I HTML är det ganska krångligt att göra delar av bilder klickbara (mappade). I FrontPage är det emellertid enkelt. Markera området som skall vara aktivt på bilden med det rektangulära, cirkelformiga eller polygonformiga verktyget i verktygsfältet Bilder (finns under menyvalet Visa/Verktygsfält/Bilder). Dialogrutan för hyperlänkar kommer upp och länken skapas som tidigare. Miniatyrer Via menyvalet Verktyg/Skapa miniatyr automatiskt skapas en miniatyr av den markerade bilden. När man klickar på miniatyren visas originalbilden. Miniatyrer ökar överskådligheten och snabbar upp nedladdningen av sidan. Genomskinlig GIF-färg En av fördelarna med GIF-bilder är att en av dess 256 färger kan göras genomskinlig. Detta är användbart om bilden inte skall vara fyrkantig, som JPG-bilder alltid är. Med det utklippta verktyget till höger från verktygsfältet Bilder görs den utpekade färgen genomskinlig. 50 Brogårdsgymnasiet, Kristinehamn

51 Övning 3.1: Gör en hemsida i Frontpage med en presentation av dig själv, enligt urklippet till höger. Uppgiften skall lösas på följande sätt: Skapa en mappen övning3_1 i din mapp webbdesign. Öppna ett nytt dokument i Frontpage och spara det direkt under namnet presentation.htm i mappen övning3_1. Spara sedan efter varje ändring med Ctrl-s. Bakgrundsfärgen skall vara gul. Skriv in texten med storlekarna 24, 14 och 10 p, enligt urklippet. Lägg in den övre linjen med tjockleken 1 p. Lägg in en bild på dig själv till höger på sidan. Bilden skall vara inramad och ha ledtext, t ex Bilden visar Anders. Kopiera bilden till din mapp övning3_1. Klickas bilden öppnas den i ett eget fönster. Lägg in länkarna, som skall öppnas i egna fönster. Kartan över Vänern finns i j:/anders_a/webbdesign/vanerkarta.gif. Kopiera den till din mapp övning3_1. Lägg in en klickbar centrerad bild över Vänern så att hemsidorna för åtminstone Karlstads och Kristinehamns kommuner visas i egna fönster när man klickar på dem. finns i j:/anders_a/webbdesign/vanern.jpg. Varje länk skall ha ledtext. Kopiera bilden till din mapp övning3_1. Lägg in en centrerad linje under bilden, som upptar 50 % av sidans bredd. Lägg in länk till din e-postadress. Överför innehållet i mappen till ditt webbhotell och öppna sidan presentation.htm på Internet. Extrauppgift: Ta bort länken till bilden på dig själv. Skapa istället en miniatyrbild (Verktyg/Skapa miniatyr automatiskt), som förstoras när man klickar på den. Visa sidan för din lärare. 51 Brogårdsgymnasiet, Kristinehamn

52 Ramar Även ramsidor (frames) skapas enkelt i FrontPage. En ramsida innehållande två sidor (meny och huvudsida) utgörs av tre dokument; de två sidorna och en ramsidedokument. Detta skapas på följande sätt: Skapa först ramsidan genom menyvalet Arkiv/Nytt/Sida eller webbplats och välj där Sidmallar. Klicka på fliken Ramsidor. Nu visas mallar för sidor med olika antal och lägen för ramar. Välj mallen Innehåll (det går att lägga till och ta bort ramar i efterhand, se nedan). Två ramar visas nu på sidan. Välj en befintlig sida som startsida eller skapa en ny sida för ramarna. Skapa en ny sida för varje ram. Spara dokumenten i en ny mapp (behöver inte vara en webbplats). De tre dokumenten sparas efter varandra. Ramsidan får namnet index.htm om inget anges. Ge vänstra sidan namnet innehall.htm och den högra huvud.htm. Ge den vänstra sidan rubriken Innehåll och skriv in orden Startsidan och Annan sida. Länka ordet Startsidan så att sidan huvud.htm visas i den högra ramen genom att klicka på knappen Målram i dialogrutan för länkar och sedan markera den högra ramen. Vill man ändra startsida för en ram klickar man med höger musknapp på sidan och väljer Ramegenskaper. Sedan bläddrar man fram sidan som skall vara ramstartsida. Ramegenskaperna kan ändras via höger musknapps menyval Ramegenskaper, bl a kan rambredd, marginaler och visning av rullningslist ändras. Under knappen Ramsida kan bl a kantlinjerna mellan sidorna avmarkeras. Dela ramar Vill man dela den högra ramen i två ramar markeras ramen och menyvalet Ramar/Dela ram väljs. Vill man lägga in en ram under den vänstra och högra ramen markeras hela ramsidan innan den delas. Ibland får man själv skriva in ett ramnamn under menyvalet Ramegenskaper på höger musknapp. Ramar går även att tas bort via menyvalet Ramar/Dela ram. Iframe (infogad ram) En Iframe infogas via Infoga/Infogad ram. Den inbäddade ramen som målram väljs sedan på vanligt sätt, genom att först välja Plats i det här dokumentet i Redigera hyperlänk innan Målram väljs. En Iframe får namnet I1, I2 av Frontpage. Övning 3.2a: Du skall här göra en hemsida med tre ramar, enligt urklippet intill. Lös uppgiften på följande sätt: Skapa mappen h:/webbdesign/övning3_2 på din enhet. Kopiera sidan presentation.htm du gjorde i förra övningen till mappen övning3_2. Glöm inte att även kopiera bilderna som tillhör sidan. Skapa ett dokument med texten Brogårdsgymnasiet är bäst! i Frontpage och spara det under namnet vinjett.htm i mappen övning3_2. Skapa ett dokument meny.htm 52 Brogårdsgymnasiet, Kristinehamn

53 med texten Startsidan, Länksidan, Brogårdsgymnasiet, Mitt schema och Matsedel. Spara dokumentet i mappen övning3_2. Öppna ett nytt dokument i Frontpage och skapa en ramsida med tre ramar. Länka till dokumenten meny.htm, vinjett.htm och presentation.htm. Spara ramsidan under namnet ramsida.htm i mappen övning3_2. Skapa en egen sida med bra länkar, enligt urklippet till höger. Spara sidan som lankar.htm i mappen övning3_2. Lägg åtminstone in länkar till Goggle, Länksidan på skolan bibliotek och till Länkskafferiet ( Länkarna skall öppnas i ett eget fönster. Observera att sidan skall ha samma gula bakgrundsfärg som övriga sidor som tillhör webbplatsen. Koppla länkarna i dokumentet meny.htm så att Startsidan och Länksidan öppnar prenentation.htm respektive lankar.htm i den stora ramen, Övriga länkar öppnas i ett eget fönster. Meny-ramen skall vara 200 punkter bred, stora ramen får resten av sidans bredd, samt vinjettramen skall vara 100 punkter hög. Blädderlisterna mellan ramarna skall ej visas. Överför sidan med tillhörande bilder till ditt webbhotell och provkör den på Internet. Visa den fungerande sidan för din lärare. Övning 3.2b: Nu skall du göra en sida med en infogad ram (iframe), enligt urklippet till höger. Lös uppgiften på följande sätt: Öppna dokumentet meny.htm i Frontpage och spara det direkt som uppgift3_2b.htm i mappen övning3_2. Lägg in en infogad ram med menyvalet Infoga/Infogad ram. Högerjustera ramen på sidan. Gör så att dokumentet prenentation.htm visas i ramen. Länka om länkarna Startsidan och Länksidan i menyn så att de öppnas i den infogade ramen. Överför sidan med tillhörande bilder till ditt webbhotell och provkör den på Internet. Visa den fungerande sidan för din lärare. 53 Brogårdsgymnasiet, Kristinehamn

54 Tabeller Tabeller i FrontPage skapas nästan på exakt samma sätt som i Word. Även programmens menyer är snarlika varandra. Tabellen skapas via tabellsymbolen i verktygsfältet eller via menyvalet Tabell/Infoga/Tabell Tabellen formateras på följande sätt: Hela tabellen markeras genom att dubbelklicka till vänster om tabellen. Cellernas egenskaper (färg, kantlinjer, justering ) ändras via menyvalet Cellegenskaper på höger musknapp. Tabellens egenskaper (storlek, justering, cellavstånd, cellutfyllnad, färg, kantlinjer) ändras via menyvalet Tabellgenskaper på höger musknapp. Övriga justeringar görs via verktygsfältets menyval Tabell, menyn på höger musknapp och paletten Rita tabell under menyvalet Tabell. Allt påminner mycket om Word. Övning 3.3a: Gör en temperaturtabell, enligt urklippet till höger. Lös uppgiften på följande sätt: Öppna ett nytt dokument i Frontpage och spara det direkt under namnet ovning3_3a i mappen h:/webbdesign/övning3_3a på din enhet. Skapa en tabell med bredden 303 p och med kantlinjetjockleken 1 p. Ange cellbredderna (utom den översta) till 150 p. Sammanfoga de två översta cellerna och skriv in Temperatur med textstorleken 24 p, centrerat och typsnittet Arial. Skriv in övrig text i tabellen. Underrubrikerna har 14 p och siffrorna 12 p. Hämta bilderna på Celsius och Kelvin från Internet (sök via Goggle) och spara dem i mappen övning3_3a. Infoga bilderna så att de blir 150 p breda och 200 p höga (behåll ej bildförhållandet) så att de passar precis i cellerna. Överför sidan med tillhörande bilder till ditt webbhotell och provkör den på Internet. Visa den fungerande sidan för din lärare. Styckeinställningar Även styckeinställningar görs på liknande sätt i FrontPage som i Word. Justering av indrag och radavstånd görs under menyvalet Format/Stycke. Skillnaden mot Word är att här anges höger och vänster indrag i punkter. Se listor för hängande indrag. 54 Brogårdsgymnasiet, Kristinehamn

55 Listor Inställning av listor skiljer sig något ifrån Word. Exempelvis finns färre listtecken och möjligheten att välja flernivålistor saknas. Menyer och verktygsknappar är dock ganska lika. Hur följande listtyper skapas i Frontpage är bra att känna till. Enkel numrerad lista En numrerad lista (se urklipp) skapas med en knapp i verktygsfältet. Listtecken ändras via menyvalet Format/Punkter och numrering. Enkel punktlista Skapas på liknande sätt som numrerad lista. Punkttecken (se urklipp) ändras via menyvalet Format/Punkter och numrering. Flernivålista Flernivålista (se urklipp) innebär att varje nivå i en lista har en underlista, exempelvis har ofta övningsuppgifter numrerade 1, 2, 3 deluppgifter som är numrerade a, b, c. En sådan lista skapas på följande sätt i Frontpage: Klicka på knappen för numrerad lista (siffran 1 visas) i verktygsfältet. Skriv in texten. Du vill nu skapa en underlista. Tryck därför på Enter. Klicka sedan två gånger på knappen för Öka indrag på verktygsfältet (nästan som i Word). Välj ny listsymbol (bokstaven a visas) och skriv in texten. Vid tryckning på Enter visas listsymbolen b. För att återgå till den yttre listan trycks Enter ned tre gånger. Listtecknet 2 visas nu. Listan avslutas genom att trycka på Enter några gånger. Hängande indrag (definierad term) Även om detta (se urklipp) inte är ett äkta hängande indrag så är det ett bra alternativ (i HTML skallas listypen definitionslista). Skapa listan på följande sätt: Välj formatmallen Definierad term i listboxen till vänster på verktygsfältet. Skriv in marginalordet. Tryck på Enter. Markören hamar nu en bit in på raden. Skriv in texten och tryck på Enter efteråt. Markören hamnar nu i marginalen. Skriv in det nya marginalordet o s v. 55 Brogårdsgymnasiet, Kristinehamn

56 Övning 3.4a: Gör en sida med en tabell och en iframe, enligt urklippet till höger. Lös uppgiften på följande sätt: Öppna ett nytt dokument och spara det under namnet ovning 3_4a.htm i mappen h:/webbdesign/övning3_2 på din enhet. Lägg in en tabell med nio lika stor celler med måtten 600 x 600 punkter. Varje cell skall ha måtten 200 p. Ta bort kantlinjerna. Lägg in en bild på dig själv i den övre vänstra cellen. Bilden skall fylla cellen precis. Sammanfoga de fyra nedersta högra cellerna och lägg in en Iframe (Infoga/Infogad ram). Lägg in länkarna, enligt urklippet. Länkarna skall öppnas i Iframen. Startsidan skall vara dokumentet presentation.htm du gjorde i övning 3.1 ovan. Bakgrundsfärgen skall vara samma gula färg som i presentation.htm. Spara och stäng dokumentet. Överför webbplatsen till ditt webbhotell och provkör den på Internet. 56 Brogårdsgymnasiet, Kristinehamn

57 Övning 3.4b: Gör en sida med interna länkar (bokmärken) och styckeinställningar, enligt urklippet intill. Bokmärke här innebär att att när man klickar på t ex ordet Jul i innehållet flyttas markören till det stycket i texten. Lös uppgiften på följande sätt: Öppna ett nytt dokument i Frontpage och spara det under namnet ovning 3_4b.htm i mappen h:/webbdesign/ på din enhet. Kopiera texten om helgerna påsken, julen midsommar och nyår från dokumentet h:/anders_a/it_grundkurs/helg er.doc och klistra in det i ovning 3_4b.htm. Huvudubriken har storleken 24 p, övrig text 12 p. Mellanrubrikerna har fetstil. Typsnittet för all text är Arial. Gör styckeinställning så att indraget är 200 p efter hela texten. Gör styckeinställning så att avstådet efter stycke är 6 p för hela texten. För mellanrubrikerna skall dessutom avståndet före stycke vara 18 p. Lägg in ett bokmärke vid varje rubrik. Länka sedan helgerna vid innehåll till respektive bokmärke. Testa länkarna och styckeinställningen genom att göra webbfönstret mindre i Förhandsgranskning. Lägg in en kantlinje runt texten, samt färga styckena med olika bakgrundsfärger (gul, röd, grön och grå via Format/Kantlinjet och fyllning ). Utfyllnaden skall vara 6 p för höger, vänster och nederkanten så att inte texten ligger på kantlinjen. Spara och stäng dokumentet. Överför sidan till ditt webbhotell och provör den på Internet. Övning 3.4c: Gå till sidan 28 och gör övning Klicka här! Detta gäller endast dem som inte gjort kapitel 1 Hemsidor med HTML. 57 Brogårdsgymnasiet, Kristinehamn

58 Formulär Det blir allt vanligare att göra beställningar via hemsidor. Beställningarna görs då via ett formulär på hemsidan, d v s genom att fylla i textfält och klicka i kryssrutor och alternativknappar. Nedanstående frågeformulär är ett exempel på detta. Om nedanstående formulär skickas via skapas en bifogad textfil enligt texten under formuläret. Fornamn=Kalle&Efternamn=Larsson&Telefon=654321&Onskemal=F%E5+en+egen+hemsida.&Bakgrund=V3& Kristinehamn=ON&Bjorneborg=ON&Alder=50-60&B1=Skicka Formulär är relativt enkla att skapa i Frontpage. Gör på följande sätt: Skapa formuläret via menyvalet Infoga/Formulär/Formulär. Kontrollerna (knappar, textrutor ) läggs inom det streckade området. Det skapas alltid en Skicka- och Återställknapp. Återställknappen raderar formulärinnehållet och Skickaknappen skickar formuläret till angiven adress. Skall formuläret skickas till en epostadress skrivs epostadressen in i form-märket i HTML-läget på följsande sätt: <form method="post" action="mailto:anders.andersson@kristinehamn.se"> (Skall något hämtas till formuläret från t ex en databas skall attributet method ha värdet GET och skall formuläret skickas till ASP-dokumentet register.asp skall action ha värdet register.asp ) Lägg in kontrollerna i formuläret och ge dem betecknande namn (name) genom att klicka på den med höger musknapp och välja Egenskaper för formulärfält. Där kan även texten som står på kontrollen (value) och kontrollens bredd anges. Exempelvis kan en textrutas egenskaper ändras ytterligare genom att välja Bekräfta, bl a tillåtet antal tecken och password. Alternativknapparna får automatiskt samma namn om de tillhör samma formulär. Kontrollernas type anger vilken sorts kontroll det är. Textruta har typen text, kryssruta checkbox, knapp button, alternativknapp radio och listruta select. Har knappen typen submit anger det formulärinnehållet skickas till adressen efter attributet action i form-märket. Har knappen typen reset raderas formulärinnehållet. Skall det fungera att skicka formuläret måste datorn ha ett epost-program installerat. Hemma fungerar det säkert, men troligen inte på skolan. Formulärkomponenten Etikett skapas genom att markera texten och följande komponent och sedan välja Etikett. Med detta menas att t ex en kryssruta markeras om även texten klickas. Däremot finns ingen textkomponent som kallas etikett (som i Visual Basic). 58 Brogårdsgymnasiet, Kristinehamn

59 Skicka formulär med epost När ovanstående formulär skickas via epost hamnar ju formulärinnehållet i en bifogad fil, enligt exemplet. Texten är lite kryptisk att läsa. Med följande tillägg i form-märket blir det mer lättläst: <form method="post" action="mailto:anderskrister@privat.utfors.se?subject=formuläret" enctype="text/plain"> Attributet enctype="text/plain" gör att formulärinnehållet inte hamnar i en bifogad fil, utan stället direkt i epostmeddelandet. Tillägget?subject=Formuläret efter epostadressen gör att texten Formuläret står som ämne (subject) i epostmeddelandet. Så här blir presentationen av formulärinnehållet i epostmeddelandet: Fornamn=Kalle Efternamn=Larsson Telefon= Onskemal=Få egen hemsida. Bakgrund=Ekonom Besokt=Kristinehamn Besokt=Björneborg Alder=50-60 B1=Skicka Här har även alternativknapparnas fått värdena (value) Tekniker, Naturvetare, Ekonom respektive Annat. Kryssrutorna har alla fått namnet (name) Besokt. Med betecknande namn på kontrollernas värden (value) och namn (name) blir formulärinnehållet lättläst i epostmeddelandet. Presentationen i epostmeddelandet har alltså följande syntax för en kontroll: Namn=Värde Formulärinnehåll med e-post i Frontpage I förra stycket gjorde vi inställningarna i HTML-läget i Frontpage för att skicka formulärinnehållet till en e-postadress. Samma inställningen kan emellertid även göras direkt i Frontpage på följande sätt: Högerklicka i formulärfältet. Välj Egenskaper för formulär Välj alternativet Skicka till annat Klicka på knappen Alternativ Inled din e-postadress med mailto: i textfältet vid Åtgärd Skriv text/plain i textfältet Kodningstyp Inställningen är nu klar. Kolla gärna i HTML-läget hur det ser ut i Form-märket. 59 Brogårdsgymnasiet, Kristinehamn

60 Metakoder och sökmotorer Webbsidor på Internet hittas automatiskt av sökmotorernas (Altavista, Google) sökrobotar (spindlar) och indexeras i en databas för hittas snabbare. Sökrobotarna indexerar bl a efter texten i sidans titelmärke, varför det är viktigt att titeln speglar sidans innehåll; en sida som t ex handlar om matematik bör ha titeln matematik. Indexeringen sker även efter metakoderna, där sidans innehåll presenteras. Metakoden läggs in i sidans HEAD-avsnitt och anges i märket <meta> med två attribut; name och content. Attributet name kan anta tre värden som placeras i tre olika meta-märken med olika värden på attributet content. Här anges de tre värden attributet name respektive attributet content antar: author Content ges värdet på den persom, förening eller företag som ligger bakom hemsidan. description Content ges värdet på vad sidan innehåller i form av några ämnesområden. keywords Content ges värdet på vad sidan innehåller i form av några nyckelord som beskriver sidan. Beskriv sidan med många tänkbara sökord som passar in på sidan. En hemsida gjord av Anders Andersson som handlar om matematik, fysik och data och innehåller länkar och kursmaterial från Brogårdsgymnasiet i Kristinehamn kan ha följande metakoder: <head> <title>matematik, fysik, matte, data, programmering</title> <meta name= author content= Anders Andersson > <meta name= description content= matematik, fysik och data > <meta name= keywords content= matematik, matte, fysik, Fysik A, Fysik B, gymnasiefysik, data, datakurser, programmering, pascal, Brogårdsgymnasiet, Kristinehamn > </head> Sökrobotarnas indexering underlättas dessutom i hög grad av om sidans kod uppfyller W3C:s regler (se nedan). Ram- och dynamiskt genererade (PHP, ASP) sidor är dock svåra att indexera. Metakoder med Frontpage Metakoderna kan även läggas in via Frontpage: Högerklicka och välj menyvalet Sidegenskaper Klicka på fliken Eget. Klicka på den undre knappen Lägg till. Skriv in author, description eller keywords i det övre fältet och värdena i det undre fältet, enligt urklippet till höger. Dirigera om användare Metakoderna kan även användas för att dirigera om en användare till till en annan webbsida eller dokument. Detta görs på följande sätt i Frontpage: Högerklicka och välj menyvalet Sidegenskaper Klicka på fliken Eget. Klicka på den övre knappen Lägg till. Skriv refresh i det övre fältet och en tid och en adress i det undre fältet, enligt urklippet till höger, vilket innebär att adressen anropas efter 5 sekunder. Följande HTML-kod skapas och åstadkommer detta: <meta http-equiv="refresh" content="5; URL= Utelämnas adressen uppdateras istället den aktuella sidan efter den angivna tiden. 60 Brogårdsgymnasiet, Kristinehamn

61 Web-Standards och DOCTYPE Liksom det finns skrivregler för det svenska språket finns det även regler för hur korrekt HTML skall skrivas. Språkrådet är svenska språkets myndighet, medan W3C (World Wide Web consortium) är det internationella organ som samordnar gemensamma regler (syntax) för webbaserat innehåll. Deras adress är Hemsidor med korrekt HTML tolkas lika oavsett webbläsare, samt hittas lättare av Internets sökrobotar. Ett exempel på en i regel fungerande, men enligt W3C felaktig, HTML-syntax är följande rad: <b><i> lite fet och kursiverad text </b></i> Felaktigt! Följande rad är dock riktig är enligt W3c: <b><i> lite fet och kursiverad text </i></b> Rätt! Märkenas ordning är alltså viktig. Det är också viktigt att tala om vilken typ (docktype) av standard en webbsida har. Följande rad visar hur en korrekt ramsida skall inledas för att lättare hittas av en sökmotor: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> Följande rad visar hur en vanlig body-sida inleds: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> Webbsidor kan valideras via W3C:s webbtjänst som anger sidans eventuella fel och visar om den uppfyller reglerna. En sida som uppfyller W3C:s regler kan förses med bilden till höger. Innehåller sidan även CSS-kod (se kapitel 7 nedan) kan den sedan valideras med Läs mer om web-standards på t ex Övning 3.5a: Gör en egen formulärsida som inneåller flera och olika kontroller. Länka sidan till din hemsida och prova att skicka till din epost-adress från din hemdator. Övning 3.5b: Kolla om sidorna på din webbplats uppfyller W3C:s standards. 61 Brogårdsgymnasiet, Kristinehamn

62 Webbplats Hittills har vi främst använt Frontpage som en förenklande editor för hemsidor. Frontpage har emellertid ytterligare användbara finesser som kräver att hemsidorna görs i form av en s k webbplats, som ytligt sett är en blåprickad mapp (se urklipp ovan) där alla hemsidor som hör till webbplatsen samlas. En ny webbplats skapas på följande sätt: Gör menyvalet Arkiv/Nytt/Sida eller webbplats Ett fönster öppnas då till höger på sidan. Välj där Tom webbplats under Nytt En dialogruta kommer upp där du först skapar en ny mapp för din webbplats. Kalla förslagsvis mappen för testplatsen. Klicka på Bläddra-knappen och skapa mappen på på lämpligt ställe. Välj sedan en lämplig mall, t ex Webbplats med en sida, och klicka på OK. Du är nu tillbaka i FrontPage, men ser ännu inget dokument. Mappen testplatsen innehåller dock filen index.htm, samt två automatiskt skapade mappar - _private och images (enligt urklippet till höger). Navigering Sidan index.htm som skapades i samband med att webbplatsen skapades hittas under vyn Navigering längts till vänster i fönstret. Sidan, som får bli webbplatsens startsida, öppnas genom att klicka på sidsymbolen. Vyn navigering används för att skapa webbplatsens länkstruktur genom att dra filsymbolerna till önskat ställe på sidan. Ännu finns dock bara en fil. Ligg kvar i navigeringsvyn och skapa ytterligare två sidor via den vita rutan längst upp till vänster (med ledtexten Skapa en ny normal sida), som länkas till index-sidan. Klicka på sidsymbolerna och döp om sidorna till startsida, sid1 respektive sid2, som blir sidornas titlar (filnamnen ändras ej), enligt urklippet till höger. Länkning från startsida Observera att sidorna ännu inte är fysiskt länkade. Detta görs på följande sätt: Öppna startsidan i redigeringsläget. Välj Navigering under Infoga-menyn. Välj komponenttypen Länkfält, fälttypen Fält baserat på navigeringsstruktur och tryck på Nästa. Välj fältformatet Använd sidans tema och tryck på Nästa. Välj orienteringen med länkfältet upptill och tryck på Slutför. Välj Sidor som är underordnade startsidan, samt Startsida och Överordnad sida. Nu finns länkar från startsidan till sid1 och sid2, samt från sid1 och sid2 till startsidan. Vi vill dock även skapa länkar från sid1 och sid2, vilket görs med gemensamma kantlinjer. 62 Brogårdsgymnasiet, Kristinehamn

63 Gemensamma kantlinjer Med begreppet gemensamma kantlinjer skapas ett område som är gemensamt för webbplatsens alla sidor, där text, länkar och bilder kan placeras. Gemensamma kantlinjer skapas på följande sätt: Gå till startsidan. Välj Gemensamma kantlinjer under Format-menyn. Välj detta för webbplatsens alla sidor, samt lägg den i överkanten och inkludera navigeringsknappar och tryck på OK. Länkarna hamar nu under linjen. De kan dock flyttas till området över linjen och då bli synliga på alla sidorna. Ta dock bort det kursiverade länkfältet i det gemensamma området. Nya sidor som infogas i länkstrukturen får automatiskt gemensamma kantlinjer med länkar. Lägg in en ny sida och ge den titeln sid3. Skriv in texten AB Webbsidor under länkarna på det gemensamma området. Det färdiga dokumentet ser ut som urklippet till höger. Ordningen på länkarna ändras genom att flytta om sidorna i vyn Navigering. Länkfält och gemensam kantlinje bästa metoden! Hittills har länkarna endast gått till sidor i webbplatsen. Det har dessutom varit lite omständligt att skapa och ändra länkarna. Följande metod är flexiblare, och där går även att skapa externa länkar. Hoppa över menyvalet Infoga/Navigering och gör istället på följande sätt: Skapa webbplatsen som tidigare. Välj direkt Gemensamma kantlinjer under Format-menyn. Radera fältet [Redigera egenskaperna för ] under i sidrubriken in den gemensamma kantlinjen. Lägg marhören i länkfältet under sidrubriken och välj Infoga/Webbkomponent. Välj komponenttypen Länkfält och fälttypen Fält med anpassade länkar. Klicka på Nästa och Nästa och Slutför. Ge länkfältet ett namn, t ex Länkarna, och klicka på OK. Nu måste alla sidor länkas manuellt. Lägg till en länk genom att klicka på knappen Lägg till länk i dialogrutan Egenskaper för länkfält. Texten på knappen läggs in översta fältet där länken skapas. Observera att länkarna endast kan öppnas i samma fönster, vilket gör detta till ett mindre bra alternativ för externa länkar eftersom det gemensamma länkfältet då försvinner. Med hovringsknappar (se nedan) kan dock sidan öppnas i nytt fönster. Klicka på OK. Den nya länken syns på alla sidor först när ändringen sparats. Länkfältet som skapats syns nu i vyn Navigering, där även sidorna måste dras in i strukturen under index.htm för att texten i banderollen skall synas. 63 Brogårdsgymnasiet, Kristinehamn

64 Teman Sidans och länkarnas utseende i förra exemplet är ju ganska tråkiga. Med begreppet Teman får dock sidorna genast ett proffessionellare utseende. Teman är en uppsättning färdiga layouter i Frontpage som kan appliceras på sidorna i en webbplats. Ett tema skapas på följande sätt: Välj Tema under menyvalet Format. Pricka för om temat skall gälla för webbplatsens alla sidor eller bara för aktuell sida. Välj tema. I exemplet nedan är Akvarell valt. Tryck på OK. Temat designar även bakgrund, linjer och knappar för t ex navigering framåt och bakåt på sidan. Det är olika knappar för att navigera utefter webbplatsens länkstruktur (Start- och Nästa-knappen i urklippet till höger) och till externa länkar (knappen Vindkraftverk). De två första knapparna skapas via menyvalet Infoga/Webbkomponent. Markera komponenttypen Länkfält och fälttypen Fält baserat på länkstruktur. Klicka sedan vidare till dialogrutan Egenskaper för länkfält och pricka för lämpliga alternativknappar. Startknappen avser startsidan och Nästa-knappen intilliggande sidor på samma nivå i länkstrukturen. Knappen för andra länkar skapas på liknande sätt, men med fälttypen Fält med anpassande länkar markerad. 64 Brogårdsgymnasiet, Kristinehamn

65 Hovringsknappar I det tidigare exemplet har webbplatsens länkar skapats automatiskt via menyvalet Infoga/Navigering Nackdelen med detta är att vi har dålig kontroll över hur länkarna skapas, bl a skapas bara länkar till och mellan sidorna under startsidan. En flexiblare variant är därför att först skapa den gemensamma kantlinjen (om länkarna skall synas på alla sidorna) och sedan skapa länkarna på egen hand via menyvalet Infoga/Webbkomponent. Här kan man välja att lägga in länkarna via hovringsknappar eller via knappar anpassade till det aktuella temat. En hovringsknapp skapas på följande sätt: Välj komponenttypen Dynamiska effekter och effekten Hovringsknapp. Klicka på knappen Slutför. Skriv in knapptexten och välj vad knappen skall länka till. Klicka på OK. Knappen kan redigeras genom att högerklicka på den och välja Egenskaper för hovringsknapp, t ex kan länk, färg och effekter för knappen ändras. Observera att hovringsknappar kan läggas var som helst på sidan, samt att de inte visas när sidan förhandsgranskas i Frontpage. Granska därför sidan i webbläsaren. Hovringsknapparna anpassas dock inte till temat. Knappar anpassade till temat skapas på följande sätt med länkfält: Välj komponenttypen Länkfält och fälttypen Fält med anpassade länkar. Klicka på knappen Nästa. Välj sidans tema. Klicka på Nästa. Välj en orientering. Klicka på Slutför. Namnge länkfältet och lägg in länkarna. Observera att dessa mållänkar öppnas i det aktuella fönstret. Temat kan väljas nu eller innan knapparna skapas. Även denna typ av knapp kan läggas var som helst på sidan. Dynamiska effekter Via menyvalet Format/Effekter för dynamisk HTML kan bilder t ex komma inflygande när sidan öppnas eller bytas ut när muspekaren pekar på dem. Sidövergång Via menyvalet Format/Sidövergångar kan sidövergångarna göras effektfulla med t ex rutor eller persienner. Effekten blir mer uttalad om sidan har bakgrundbild eller bakgrundsfärg. 65 Brogårdsgymnasiet, Kristinehamn

66 Övning 3.5b: Här skall du skapa en webbplats baserad på gemensamma kantlinjer och teman. Den färdiga webbplatsen skall se ut som urklippen till höger. Lös uppgiften enligt följande punkter: Skapa en webbplats (mapp med blå prick) med namnet Minwebbplats och spara den i din mapp h:/webbdesign. Skapa tre webbsidor som du ger namnen startsidan.htm, ommig.htm och lankar.htm. Spara sidorna i mappen Minwebbplats med menyvalet Arkiv/Spara allt. Lägg in en gemensam kantlinje via menyvalet Format/Gemensamma kantlinjer överst på sidan. Ta bort all text i den gemensamma kantlinjen och lägg istället in ett länkfält via menyvalet Infoga/Webbkomponent och välj komponenttypen Länkfält och fälttypen Fält med anpassade länkar. Klicka på Slutför och skapa länkar till de tre sidorna. Ge dem namnen Startsidan, Lite om mig och Mina länkar, enligt urklippen. Skriv även in ditt namn överst i den gemensamma kantlinjen, som i urklippen. Ett alternativ är att istället lägga in en banderoll via menyvalet Infoga/Webbsidebanderoll. Texten i webbsidebanderollen blir sidans titel (rubrik), d v s texten som även står på sidsymbolen i navigeringsmenyn. Välj ett tema för webbplatsen via menyvalet Format/Tema I exemplet är temat Grekiskt tempel, men du kan välja vilket tema du vill. Lägg in en bild av dig själv på startsidan, samt en länk till din epostadress. Skriv in lite fakta om dig själv på sidan om dig själv. Använd formatmallen Rubrik 3 för texten Här är..., samt använd en punktlista. Skriv in några bra länkar på länksidan. Lägg in minst två hovringsknappar i den gemensamma kantlinjen, den ena länkar t ex till Brogårdsgymnasiet och den andra till Kristinehamns kommun. Knapparna skall ha liknande färgnyans som temat (använd pipetten!). Länkarna skall öppnas i egna fönster. Provkör webbplatsen i webbläsaren. Överför den sedan till ditt webbhotell och provör den på Internet. Om du redan har en hemsida på ditt webbhotell är det lämpligt att även överföra mappen Minwebbplats och starta t ex startsidan.htm därifrån. Då riskerar du inte att förstöra hemsidans struktur. 66 Brogårdsgymnasiet, Kristinehamn

67 Fotogalleri Ett fotogalleri skapas enkelt och snyggt via menyvalet Infoga/Bildobjekt/Nytt fotogalleri, enligt urklippet till höger. Under fliken Bilder infogas bilderna med knappen Lägg till. Bildtexterna skrivs in i nedre delen av dialogrutan. Galleriets utseende väljs under fliken Layout och bildernas storlek kan anges under knappen Redigera Övning 3.5c: Fortsätt med webbplatsen i uppgift 3.5b och gör följande kompletteringar: Lägg in en sidövergång med vågräta persienner när ommig.htm och lankar.htm öppnas (Format/Sidövergångar). När startsidan.htm öppnas skall bilden läggas in med en spiral (Format/Effekter för dynamisk HTML). När man klickar på texten Här är lite fakta om mig i dokumentet ommig.htm, skall orden flyga ut upp till höger på sidan (Format/Effekter för dynamisk HTML). Lägg till en ny sida till webbplatsen för ett bildgalleri. Spara sidan som galleri.htm. Lägg in ett fotogalleri med bildtexter för minst fem bilder, enligt urklippet. Välj vilka bilder du vill. Miniatyrbilderna skall ha storleken 100 x 83 punkter och de stora bilderna 300 x 250 punkter. Ändra färgen på hovringsknapparna så att de får temats färger på knapp och text (använd pipetten!). Ta bort ditt namn överst i den gemensamma kantlinjen och lägg istället in en webbsidebanderoll på webbplatsens samtliga sidor utom på startsidan. Texten i banderollen skall vara samma som på knapparna under banderollen. Överför webbplatsen till ditt webbhotell och provör den på Internet. Visa webbplatsen för din lärare. 67 Brogårdsgymnasiet, Kristinehamn

68 Publicera webbplats Det är nu dags att överföra den färdiga webbplatsen till Internet. Detta görs antingen som vi gjort tidigare med ett FTP-program eller med Frontpages verktyg för publicering på Internet, vilket fungerar på följande sätt: Klicka på menyvalet Arkiv/Publicera webbplats Skriv in adressen till servern där sidan skall publiceras, t ex ftp.passagen.se. Klicka på OK. Skriv in användarnamn och lösenord. Klicka på OK. Fungerar allt visas nu webbplatsens filer och mappar. Klicka på knappen Publicera. Webbplatsens filer och mappar överförs nu till webbservern. En meddelanderuta visar när webbplatsen är överförd. Vissa inställningar sparas i webbplatsen, så nästa gång den publiceras behöver inte adressen till webbservern anges. Dessutom ser Frontpaget till att identiska filer inte överförs till webbservern, liksom att filer som är borttagna från webbplatsen rederas när en ny version publiceras. Observera dock att om en webbplats publiceras på ett webbserverutrymme som redan innehåller en hemsida, riskerar hemsidan att ersättas av den nya webbplatsen. I Frontpage publiceras alltid hela webbplatsen (även om bara de filer som ändrats överförs), medan användaren själv väljer vilka filer som skall överföras med ett FTP-program. För att publiceringen i Frontpage skall fungera måste alltså hemsidan göras i form av en webbplats, d v s en enskild sida går inte att publicera. Övning 3.6 webbplats för din hemort: Du skall nu göra en webbplats för din hemkommun/hemort, enligt strukturen nedan. Webbplatsen skall göras i Frontpage och utformas med gemensamma kantlinjer och ett genomgående tema på webbplatsens alla sidor. Observera att temats knappar inte kan öppna länkarna i andra fönster än där de ligger, vilket dock hovringsknappar kan. Lös uppgiften enligt följande punkter: 1. Skapa en webbplats med namnet min_hemort och spara den i din mapp h:/webbdesign. 2. En startsida (se struktur nedan) med en bild som kommer inflygande (görs med Effekter för dynamisk HTML) och med en kort text som presenterar orten, samt två aktuella händelser med länkar. Startsidan skall utformas med en tabell. 3. Den gemensamma kantlinjen skall innehålla länkar i form av temmaknappar och hovringsknappar. 4. Följande länkar skall finnas (se struktur nedan): Turism (se nedan), biblioteket (hovringsknapp), lokaltidningen (t ex via hovringsknapp), vädret för området (länka till SVT:s väder via hovringsknapp), karta (länka till karta på t ex för orten via hovringsknapp), boende (se nedan), skolor (se nedan), tidtabell för buss och tåg (hovringsknapp 68 Brogårdsgymnasiet, Kristinehamn

69 via t ex eller bilder (se nedan), lediga jobb i kommunen (länka till och Platsbankens lediga jobb i den kommun orten tillhör via hovringsknapp). 5. Bildsidan innehåller minst fem bilder med bildtexter från din hemort. Bilderna skall visas med Fotogalleri. 6. Turismsidan innehåller länkar till tre av ortens sevärdheter. Sidan skall innehålla en bild på en sevärdhet. Sidan skall även innehålla en länk Skicka information till en sida innehållande ett formulär för förfrågningar till turistbyrån, enligt urklippet till höger (gjort med tema). Använd etiketter (d v s klickas texten fokuseras textrutan). Innehållet skall skickas till turistbyråns epostadress i din hemkommun. 7. Skolsidan innehåller länkar till tre av ortens skolor. Sidan skall innehålla en bild på en skola. 8. Boendesidan innehåller länkar till tre boenden i kommunen, t ex ett hotell, ett vandrarhem och en campingplats. Sidan skall innehålla en bild på ett vandrarhem eller hotell. Saknas hemsidor kan länken istället gå till en epostadress. 9. Externa länkar öppnas i ett nytt fönster via hovringsknappar. Länkar tillhörande webbplatsen (d v s Startsida, Bilder, Turism, Skolor, Boende och Förfrågan) öppnas i samma fönster. 10. Byte av sidor i webbplatsen skall ha någon effekt gjord med Sidövergångar. 11. Länken till webbplatsen öppnar först en sida (introsidan) med en vacker bild med välkomsttext till din hemkommun innan den efter 3 sekunder dirigerar vidare till din startsida (kolla under metakoder). Gör denna punkten sist när webbplatsen i övrigt är klar. Detta är webbplatsens egentliga startsida (intro.htm) som öppnas först på webbservern. Observera att introsidan inte skall innehålla den gemensamma kantlinjen och temat. Hitta på en egen layout! 12. Överför den färdiga webbplatsen min_hemort (inklusive mappen) till din webbserver och lägg en länk från din hemsida till webbplatsens introsida min_hemort/intro.htm. Namnge länken på din hemsida min_hemort. Bilder Turism Förfrågan Intro (intro.htm) Startsida Skolor Boende Uppgiften kommer att bedömas av lärare och eventuellt visas för klassen. Uppgiften skall lösas på tre klocktimmar. 69 Brogårdsgymnasiet, Kristinehamn

70 4. JavaScript Inledning till skript och dynamisk HTML (DHTML) En användare har små möjligheter att påverka utseendet hos de hemsidor vi hittils gjort. Det mest interaktvia vi gjort är formulären vi skapat, fyllt i och skickat till en epostadress. Utseendet på hemsidan kan emellertid påverkas av användaren via händelser, s k dynamisk HTML (DHTML). Exempelvis kan användaren ändra text- och bakgrundsfärg, välja bilder, öppna meddelanderutor och göra beräkningar på hemsidan m h a dhtml och händelsestyrda skript. Händelserna påverkas i regel via musklick och formulärobjekt och påminner delvis om de händelsestyrda programspråken Delphi och Visual Basic. Ett av de vanligare skriptspråken, VBScript, baseras just på Visual Basic. VBScript funger dock endast på Microsofts Internet Explorer. Netscape har utvecklat skriptspråket JavaScript som accepteras av de vanligaste webbläsarna. Microsoft har även utvecklat en egen variant av JavaScript kallat JScript. Språken är ganska lika, men JavaScript är mer accepterat. Java och JavaScript är helt olika programmeringsspråk, även om det finns likheter i språkens syntax. Skripten vi hittills talat om är s k klientbaserade skript, d v s de körs i webbprogrammet på surfarens egen dator. Dessa skript kan inte användas på värddatorn (servern) hemsidan är upplagd på för att t ex kommunicera med en databas. För detta krävs t ex CGI-skript, ASP eller PHP. Denna kursen handlar om det klientbaserade JavaScript. Vi börjar med att gå igenom vanliga händelser och visar sedan några tillämpningar som endast kräver JavaScript-kod i HTML-märket. Därefter går vi igenom hur JavaScript-program infogas i HTML-dokumentet. Händelser En händelse är när användare t ex klickar på en länk, en knapp eller när texten ändras i en textruta. Eftersom JavaScript är händelsestyrt reagerar det på dessa händelser med att köra ett program. Programmet kan dock vara ganska enkelt och endast omfatta en kodrad. Nedan presenteras de vanligaste händelserna och motsvarande JavaScript-kod. Medelanderutan alert visas ofta i windowsprogram. Meddelanderutan (se urklipp nedan) anropas via en händelse, t ex OnClick: OnClick= alert( Detta är en meddelanderuta. ); Observera att texten i meddelanderutan alert sätts inom apostroftecken och värdet till OnClick-händelsen sätts inom citattecken. Vi skall nedan använda meddelanderutan som illustration till några vanliga händelser. OnClick Händelsen inträffar när användaren klickar med vänster musknapp på ett objekt, t ex på en länk, en bild eller på en knapp. Följande kodrad öppnar en meddelanderuta när man klickar på en länk: Klickar du på denna <a href="filen.htm" OnClick= alert( Detta är en meddelanderuta. ); >länken <a>öppnas en meddelanderuta. Händelsen kan även aktiveras via en knapp med koden: <form> <input type="button" value="tryck" OnClick="alert('Detta är en meddelanderuta.');"> </form> 70 Brogårdsgymnasiet, Kristinehamn

71 OnDblClick Händelsen inträffar när användaren dubbelklickar med vänster musknapp på ett objekt. Följande kodrad öppnar en meddelanderuta när användaren dubbelklickar någonstans i dokumentet (hemsidan), på formuläret (i närheten av knappen), eller dubbelklickar på knappen: <body OnDblClick="alert('Dubbelklickat i dokumentet.');"> <form OnDblClick="alert('Dubbelklickat i formuläret.');"> <input type="button" value="tryck" OnDblClick="alert('Dubbelklickat på knappen.');"> </form> </body> Observera att händelser som berör hela dokumentet (hemsidan) läggs i body-märket. Exemplet visar även att samma händelse på överordnade nivåer också utlöses; om exempelvis knappen dubbelklickas utlöses även händelsen på formulär- och bodynivå i nämnd ordning. OnLoad - OnUnLoad Händelserna inträffar när dokumentet (hemsidan) laddas respektive lämnas. I exemplet nedan visas en meddelanderuta när sidan laddas: <body OnLoad="alert('Nu laddas en sida om skript.');"> Observera att händelsen ligger i body-märket. OnMouseOver - OnMouseOut Händelserna inträffar när markören pekar på respektive flyttas från ett objekt. I följande exempel visas en meddelanderuta när markören pekar på ett länkord: Läggs musmarkören över <a href="filen.htm" OnMouseOver="alert('Markören ligger på länkordet.');">länkordet </a>visas en meddelanderuta. Detta är emellertid en dålig lösning, eftersom det inte går att öppna länken. Förs markören över länkordet kommer meddelanderutan upp som förhindrar att länken kan aktiveras. Byta bakgrundsfärg Vi vet att attributet bgcolor för bakgrundsfärgen ligger i body-märket. Bakgrundsfärgen kan emellertid ändras av användaren med enkel JavaScript-kod i t ex en knapp: <input type="button" value="röd" OnClick="document.bgColor='red';"> <input type="button" value="grön" OnClick="document.bgColor='green';"> En variant är att lägga in några alternativknappar för olika färger: Gul: <input type="radio" name="r1" value="v1" checked OnClick="document.bgColor='yellow';"> Röd: <input type="radio" name="r1" value="v2" OnClick="document.bgColor='red';"> Grön: <input type="radio" name="r1" value="v3" OnClick="document.bgColor='green';"> Följande sats i button-knappens OnClick-händelse prickar även för rätt alternativknapp: <input type="button" value="gul" OnClick="document.bgColor='yellow';R1[0].checked='true';"> <input type="button" value="röd" OnClick="document.bgColor='red';R1[1].checked='true';"> <input type="button" value="grön" OnClick="document.bgColor='green';R1[2].checked='true';"> Observera att alternativknapparna nås via en indexerad (0-2) vektor med samma namn (här R1) som alternativknapparna. Observera även att bokstavsstorleken har betydelse i bgcolor. 71 Brogårdsgymnasiet, Kristinehamn

72 Byta textfärg Även textfärgen går att byta med ett enkelt JacaScript. Följande skript med händelsen OnMouseOver ändrar textfärgen till röd på det länkade ordet röd när muspekaren ligger över det: Ordet <a OnMouseOver="this.style.color='red';">röd</a> blir rött när markören pekar på det. Länkattributet href är utelämnat för att undvika länkning. Ordet behåller den röda texten när muspekaren flyttas från ordet. Vill man att färgen skall återta sin ursprungliga svarta färg kan man lägga in händelsen OnMouseOut i samma märke: Ordet <a OnMouseOver="this.style.color='red';" OnMouseOut="this.style.color='black';">röd</a> blir rött när markören pekar på det. Byta bild (rollover) En rolig effekt kan vara att låta användaren byta en bild genom att klicka på bilden. Detta kallas ibland rollovers. Följande kodrad byter bild vid händelserna OnClick och OnDblClick. Vid dubbelklick visas ursprungsbilden: <img name="bilden" border="0" src="killar.jpg" width="275" height="207" OnClick="bilden.src='killar_sv.jpg';" OnDblClick="bilden.src='killar.jpg';"> Med attributet name ges bilden namnet bilden, som vi sedan refererar till när vi byter bild vid händelserna. Bildrutan med namnet bilden kan naturligtvis även anropas från andra märken (taggar) i dokumentet. Övning 4.1: Gör en hemsida i förslagsvis Frontpage där det går att byta färg på bakgrunden med knappar och alternativknappar. Klickar man på sidan skall en meddelanderuta komma upp. Lös uppgiften enligt följande punkter: När sidan öppnas skall bakgrunden vara gul. Dubbelklickar du på bakgrunden skall en meddelanderuta visas med texten Dubbelklickat i dokumentet!. Bakgrunden blir grön efter att OK klickats. Lägga in ett formulär med två knappar (button), där den ena ändrar bakgrunden till röd och den andra till gul. Lägg in tre alternativknappar (radio) med vilka du kan byta bakgrundsfärg till grön, blå och vit. *Gör så att rätt alternativknapp blir förprickad när färgen väljs via en knapp. Övning 4.2: Gör en hemsida med en bild. Klickar du en gång i bilden visas en ny bild och dubbelklickar du i bilden visas ursprungsbilden. Övning 4.3: Gör en hemsida med en bildruta. Under bilden står fyra ord skrivna. Klickar man på ett av orden öppnas en ny bild i bildrutan. Välj själv fyra lämpliga bilder. Lös uppgiften enligt följande punkter: Lägg in en bild på sidan. Ge bilden förslagsvis namet bilden. Skriv in ett ord under bilden och knyt en OnClick-händelse till ordet så att bilden ovan byts när du klickar på ordet. Knyt en OnMouseOver-/OnMouseOut-händelse till ordet så att texten blir röd när muspekaren är över ordet. Kopiera och gör samma för ytterligare tre ord. 72 Brogårdsgymnasiet, Kristinehamn

73 *Övning 4.4a: En finess är att visa en liten fyrkant till vänster om länkordet musmarkören momentant ligger över, samtidigt som ordet får röd textfärg. Händelsen OnMouseOver skall då utlösa två moment: Byta textfärg och byta bild. Kodmässigt görs detta på följande sätt: OnMouseOver="this.style.color='red'; bild1.src='punkt.gif';" Objektet bild1 hänvisar till bildrutan gif-bilden skall läggas i. Observera att momenten skiljs åt med semikolon och att båda momenten omges med ett gemensamt citattecken. Gör nu så att detta fungerar för tre länkord, enligt urklippet ovan. Punktbilderna (en svart och en med samma färg som bakgrunden) skapar du förslagsvis i Paint och sparar i gif- eller jpg-format. Vill du göra en rund punkt måste den göras i Photoshop med genomskinlig bakgrund och sparad som gif-format. *Övning 4.4b: Gör en hemsida med en länk till t ex NWT:s hemsida i form av en knapp med texten Tryck, som är en GIF-bild gjord i Paint. När markören ligger över knappen ändrar den utseende, d v s bilden byts (enligt urklippet). När markören lämnar knappen återgår den till det ursprungliga utseendet. 73 Brogårdsgymnasiet, Kristinehamn

74 Programmering i JavaScript Hittils har våra skript varit knutna till händelser i HTML-kodens märken (taggar). Vill man emellertid åstadkomma mer avancerade saker måste man skriva fristående JavaScript-program, vars syntax påminner mycket om programspråken C++ och Java. Följande rader visar syntaxen i ett enkelt JavaScript-program som skiver ut Jag gillar JavaScript: <script language="javascript"> document.write("jag gillar JavaScript."); </script> //Här anges vilket skriptspråk som används //Utskrift på skärmen Detta skript ligger mellan body- eller head-märkena. Kommentarer på en rad föregås av //. Kommentarer på flera rader inleds med /* och avslutas med */. Variabler Liksom i programmeringsspråk som C++ och Visual Basic kan man använda variabler i JavaScript, som dock är ett s k löst typat språk och inte kräver variabeldeklarationer. Koden blir dock tydligare med deklarationer och vi kommer därför att göra detta i fortsättningen. Följande program beräknar summan av två heltal: <script language="javascript"> var tal1=7, tal2=8 //Variablerna tal1, tal2 och tal3 används. var tal3 tal3=tal1+tal2 document.write("summan är "+tal3); //Observera plustecknet före variabeln. </script> Inmatningsrutan Prompt Med inmatningsrutan Prompt kan vi göra inmatningar till programmet. Följande program beräknar kvadraten av ett inmatat tal: <script language="javascript"> var tal tal=prompt("ange ett heltal!","mata in här"); document.write("kvadraten av talet är "+tal*tal); </script> En skojig finess är att läsa in någons namn när sidan öppnas och sedan skriva ut namnet på hemsidan med större text. Detta görs med document.write satsen med html-märken i utskriften, enligt följande exempel: <script language="javascript"> var a; a=prompt("vad heter du?","mata in här"); document.write("<h1>välkommen "+a+"!</h1>"); </script> Skriptet läggs mellan head-märkena eller mellan body-märkena. 74 Brogårdsgymnasiet, Kristinehamn

75 Funktionen eval() Funktionen eval() omvandlar en sträng till ett tal, under förutsättning att strängen går att omvandla. Försöker man t ex att omvandla strängen Kalle till ett tal fås värdet NaN not a number. Följande program läser in och beräknar summan av två tal: <script language="javascript"> var a, b, sum a=prompt("ange ett tal!","mata in här"); b=prompt("ange ett tal till!","mata in här"); sum=eval(a)+eval(b) document.write("summan av talen är "+sum); </script> //Strängarna a och b omvandlas //till tal med funktionen eval() Eller något kortare: a=eval(prompt("ange ett tal!","mata in här")); b=eval(prompt("ange ett tal till!","mata in här")); document.write("summan av talen är "+(a+b)); //Observera parenteser vid additionen Förra exemplet fungerade utan att vi behövde omvandla talen med funktionen eval() därför att det är underförstått att det är tal-variabler vid multiplikation. Addition fungerar emellertid även på strängar. Programmet fungerar även för decimaltal (använd decimalpunkt). Funktionen parseint() Funktionen parseint omvandlar en sträng till heltal (observera att Int måste skrivas mede stort I). Funktionen avrundar dock decimaltal nedåt, d v s talets decimaler trunkeras bort. Föregående uppgift ser ut på följande vis med parseint: <script language="javascript"> var a, b, sum a=prompt("ange ett heltal!","mata in här"); b=prompt("ange ännu ett heltal!","mata in här"); sum=parseint(a)+parseint(b); document.write("summan av talen är "+sum); </script> Observera att detta programmet endast adderar heltal. Urval med If och Else I programmering uppkommer ofta olika valsituationer, t ex att välja ut det största eller minsta talet, eller att omvandla valutan kronor till dollar eller pund. Detta åstadkoms med en If-sats. Ett program som läser in två tal och skriver ut det största talet i en alert-ruta kan se ut på följande sätt: <script language="javascript"> var a, b a=prompt("ange ett heltal!","mata in här"); b=prompt("ange ett till heltal!","mata in här"); if (a>b) alert(a+" är störst"); else alert(b+" är störst"); </script> Observera att klamrar inleder och avslutar if- och else-satserna. Det är dock inte nödvändigt att avsluta med en else-sats. Syntaxen påminner mycket om den i programspråket C Brogårdsgymnasiet, Kristinehamn

76 Jämförelseoperatorer och logiska operatorer Olika typer av jämförelseoperatorer används bl a vid urval med if-satser. Operatorerna är desamma som i C++: < Mindre än > Större än <= Mindre än eller lika med >= Större än eller lika med == Lika med!= Inte lika med (skiljt ifrån) && Och Eller! Icke Sammansatta villkor Följande program läser in ett tal och kollar om det ligger i intervallet 5 a 20: <script language="javascript"> var a; a=prompt("ange ett heltal!","mata in här"); if (a>=5 && a<=20) document.write("talet inom"); else document.write("talet utanför"); </script> Observera att det är måste vara parenteser runt villkoret i If-satsen. Övning 4.5: Skriv ett skript som via två inmatningsrutor (prompt) frågar efter ditt förnamn (Kalle) respektive efternamn (Johansson) och som sedan skriver ut Du heter Kalle Johansson med: a) document.write(). Formatera gärna texten med html-märken. b) alert-ruta Övning 4.6: Skriv ett skript som läser in a) två decimaltal och som kollar om talen är lika stora. b) två namn och som sedan skriver ut det som kommer först i alfabetisk ordning. Gör inläsning med promtrutor och utskrift med en alertruta. Övning 4.7: Skriv ett JavaScript som läser in tre tal via promt-rutor och skriver ut talens summa och produkt i en alert-ruta. Gör inläsning med tre promtrutor och utskrift med en alertruta. 76 Brogårdsgymnasiet, Kristinehamn

77 Övning 4.8: Använd de logiska operatorerna && och i tre program som läser in ett tal och som kollar om talet ligger i intervallet: a) 10 < tal < 20 b) 10 tal 20 c) tal < 10 eller tal > 20 Gör inläsning med en promtruta och utskrift med en alertruta, enligt urklippet ovan. *Övning 4.9: Skriv ett program som läser in tre tal och som sedan skriver ut det största av talen. Om inget ensamt tal är störst skrivs detta ut. Gör utskriften i dokumentet med document.write(). *Övning 4.10: Skriv ett program som läser in tre heltal och som sedan skriver ut talen i storleksordning med det minsta först. Gör utskriften i dokumentet med document.write(). *Övning 4.11: Skriv ett program som läser in tre heltal och som sedan kollar om något av talen är lika, alla lika eller alla olika. Gör utskriften med alert-ruta. 77 Brogårdsgymnasiet, Kristinehamn

78 Funktioner och formulär Programmen vi hittills har skrivit i JavaScript har ju inte varit så praktiska att använda; när vi kört programmet har vi varit tvungna att backa till föregående webbfönster för att kunna köra programmet igen. I fortsättningen skall skripten placeras i funktioner som anropas via t ex formulärknappar. Följande skript, som läser in och beräknar kvadraten av ett tal, är placerat i webbsidans huvud mellan head-taggarna. Funktionerna brukar placeras där; dels därför att de blir lätta att hitta, dels därför att webbläsaren skall läsa funktionen när sidan laddas. Här kommer webbsidan med funktionen kvadrat, som anropas via en OnClick-händelse i en formulärknapp: <html> <head> <title>ny sida 1</title> <script language="javascript"> function kvadrat() //Funktionen har namnet kvadrat. //Funktionen börjar med en klammer. var a; a=prompt("mata in ett heltal!","skriv här"); alert("talets kvadrat är "+a*a); //Funktionen avslutas med en klammer. </script> </head> <body> <form > <input type="button" value="tryck" name="b1" OnClick="kvadrat();"></p> </form> </body> </html> Följande skript räknar antalet tryck på knappen som anropar funktionen och skriver ut antalet i textrutan T1 i formuläret. Observera att variabeln antal initieras med värdet 0 i skriptet före funktionen: <html> <head> <title>ny sida 1</title> <script language="javascript"> var antal=0 //Variabeln antal function rakna_klick() antal=antal+1; f1.t1.value=antal; //Textrutas värde tilldelas med formulärnamnet f1 och textrutans namn T1 </script> </head> <body> <form name="f1"> //Formuläret ges namnet f1 <input type="button" value="tryck" name="b1" OnClick="rakna_klick();"> <br> Antal klick: <input type="text" name="t1" size="20"></p> </form> </body> </html> 78 Brogårdsgymnasiet, Kristinehamn

79 Används flera funktioner placeras de efter varandra: <script language="javascript"> var antal=0; function rakna_klick() antal=antal+1; alert("antal klick: "+antal); function kvadrat() var a; a=prompt("mata in ett heltal!","skriv här"); alert("talets kvadrat är "+a*a); </script> Övning 4.12: Skriv en funktion som i en textruta skriver ut totala antalet klick på knappen efter varje klickning, samt som i en alertruta skriver ut texten Du har klickat minst 5 gånger när du klickat fem eller fler gånger på knappen som anropar skriptfunktionen. Ledning: Använd en IF-sats som kollar antal klick. Övning 4.13: Skriv en funktion som ändrar färg på bakgrunden i ordningen röd, blå, gul, grön, vit, röd, blå o s v varje gång du klickar på en knapp på webbsidan. Ledning: Använd en IF-sats med satsen: document.bgcolor="yellow"; Övning 4.14: Modifiera föregående övning med ytterligare en funktion genom att lägga in en knapp och en bildruta. Varje gång man klickar på knappen byts bilden i bildrutan. Minst tre olika bilder skall ingå i sekvensen. Övning 4.15: Modifiera föregående övning med ytterligare en funktion genom att lägga in knappen Visa bild där man kan välja vilken bild som skall visas genom att skriva in filnamnet i en promt-ruta. Ledning: Använd följande rader i funktionen: bilden.src =prompt("ange bildens filnamn: ",""); 79 Brogårdsgymnasiet, Kristinehamn

80 Kolla bakgrundsfärg Följande funktion ändrar sidans bakgrundsfärg till blå om den från början är röd: function test() if (document.bgcolor=="#ff0000") document.bgcolor="blue"; Observera att att färgen vid jämförelse måste anges på hexadecimal form. Beräkningar Med objektet Math kan man göra de flesta matematiska beräkningar. Följande funktion läser in ett tal och beräknar kubiken av talet med metoden pow(x,y), där x är talet och y exponenten (x y ): function kubiken() var a; a=eval(prompt("ange ett tal!","")); //Omvandlar till tal alert("kubiken är "+Math.pow(a,3)); //Beräknar a 3 Nedan visas några matematiska metoder och egenspaker: Math.pow(x,y) x upphöjt till y Math.abs(x) Absolutbeloppet av x, d v s gör talet positivt. Math.round(x) Avrundar till närmaste heltal, enligt räknereglerna. Math.ceil(x) Avrundar till närmast större heltal. Math.floor(x) Avrundar till närmast mindre heltal. Math.sin(x) Ger sinus för x (radianer). Math.cos(x) Ger cosinus för x (radianer). Math.tan(x) Ger tangens för x (radianer). Math.random() Ger ett slumptal mellan 0 och 1 med 16 decimaler. Math.PI Ger talet pi (egenskap). Math.SQRT2 Ger kvadratroten ur 2. Math.E Ger talet e (2.71 ). Övning 4.16: Lägg in en knappar och textrutor i samma formulär för varje uppgift nedan. Inläsning och utskrift görs i textrutor, enligt urklippet till höger. a) Skriv en skriptfunktion som läser in ett tal och beräknar talets kvadratrot. b) Skriv en skriptfunktion som läser in en radie och beräknar cirkelns area. c) Skriv en skriptfunktion som läser in två kateter och som sedan beräknar triangelns hypotenusa. d) Skriv en skriptfunktion som genererar ett slumptal (heltal) mellan 1 och 10 (inklusive 1 och 10). e) Skriv en skriptfunktion som läser in en bas och en exponent och beräknar potensen. *Övning 4.17: Skriv ett HiLo-spel, där programmet genererar ett slumpal som du sedan försöker att hitta via gissningar. 80 Brogårdsgymnasiet, Kristinehamn

81 Funktioner med parametrar Funktionerna vi hittills gjort har anropats utan parametrar (variabler), t ex kubiken() i exemplet ovan. Alla matematiska funktioner ovan anropas dock med en parameter x (pow med två parametrar x och y). Följande programexempel visar hur en egen funktion med parametrar skrivs. Funktionen addera(a,b) adderar variableran a och b och skriver ut summan i en alert-ruta. Funktionen anropas med a=3 och b=6: function addera(a,b) //Funktionen har parametrarna a och b. var sum; sum=a+b; alert("summan är "+sum); <input type="button" value="beräkna" name="b1" OnClick="addera(3,6);"> //addera anropas med a=3 och b=6. Mer om inmatning och utskrift i textrutor Hittills har vi gjort inmatningar och utskrifter i alert- och promtrutor. Detta är lite opraktiskt och heller inte så snyggt. I fortsättningen skall vi använda oss av textrutor i formulär. I följande exempel görs en inmatning i en textruta och utskriften i en alertruta via ett funktionsanrop i knappen Mata in. Skriptkoden nedan visar även hur textrutan fokuseras när sidan laddas: function inmata(ordet) alert("du heter "+ordet); </script> </head> <body onload="f1.t1.focus();"> //Textrutan fokuseras när sidan laddas med metoden focus() <form name="f1"> //Deklarera formulärnamnet <input type="text" name="t1" size="20"></p> <input type="button" value="mata in" name="b5" OnClick="inmata(f1.T1.value);"> </form> Observera följande för skriptkoden ovan: Nytt här är att funktionen anropas med en variabel (argument), d v s med textrutans värde (f1.t1.value) angivet på formen formulärnamn.komponentnamn.värde (i detta fallet räcker det med T1.value). Formulärnamnet (f1) hittar du själv på. I body-taggen måste formulärnamnet anges. I funktionen inmata ovan får variabeln ordet textrutans värde via funktionsanropet. I följande exempel adderas två tal som matas in i två textrutor. Summan skrivs ut i en tredje textruta. Additionen görs i en funktion med två argument som anropas via en knapp. function summa(a,b) f1.t3.value=eval(a)+eval(b) </script> </head> <body onload="f1.t1.focus();"> //Funktionen anropas med två variabler //Variablerna omvandlas till tal //Textrutan fokuseras när sidan laddas med metoden focus() 81 Brogårdsgymnasiet, Kristinehamn

82 <form name="f1"> Tal 1:<input type="text" name="t1" size="9"> Tal 2:<input type="text" name="t2" size="9"> <input type="button" value="summera" name="b5" OnClick="summa(T1.value,T2.value); f1.t1.select();"> Summan: <input type="text" name="t3" size="9" onfocus="f1.t1.select();"> </form> Observera att innehållet i den översta textrutan T1 markeras med metoden select() via OnClickhändelsen vid inmatningen med knappen. Försöker man att markera innehållet i textrutan med summan (T3) går det inte, eftersom innehållet i T1-rutan markeras via händelsen onfocus för T3-rutan. Funktioner som returnerar värde Hittills har funktionerna vi skrivit beräknat och gjort utskrifter i själva funktionskroppen. Ibland är det emellertid enklare att låta funktionen returnera ett värde som t ex skrivs ut direkt i formulärdelen. I följande exempel returneras ett slumptal mellan 1 och 100 till onclick-händelsen i knappen och skrivs ut i textrutan. Funktionen beräknar endast slumptalet: <script language="javascript"> function slump() return Math.floor(Math.random()*100)+1); </script> </head> <body> <form name="f1"> <input type="button" value="klicka" name="b5" OnClick="f1.T2.value=slump();"><p> <b>slumptal:</b><input type="text" name="t2" size="11"> </form> </body> </html> Övning 4.18: Gör ett skript som läser in två kateter via två textrutor och beräknar och skriver ut hypotenusan i en tredje textruta, med följande finesser: Översta textrutan fokuseras när programmet startar. Det går inte att markera texten i rutan med hypotenusan. Innehållet i första rutan markeras när inmatning görs. </p> Övning 4.19: Skriv ett skript som genererar slumptal (heltal) mellan I skriptet skall även skrivas ut antal genererade slumptal, summan av slumptalen och medelvärdet av de genererade slumptalen, enligt urklippet till höger. Innehållet i textrutorna skall inte gå att markera. Försöker man fokuseras knappen istället. Övning 4.20: Skriv ett skript för ett HiLo-spel, d v s du skall försöka att gissa vilket tal mellan 1 och 100 skriptet genererat. Skriptet svarar om din gissning är för hög, för låg eller rätt i den undre textrutan. När du gissat rätt får sidan röd bakgrunsdfärg. 82 Brogårdsgymnasiet, Kristinehamn

83 Funktioner i extern fil Funktioner som skall användas av flera script-program lagras med fördel i en extern JavaScript-fil med ändelsen.js. Endast funktionen lagras i js-filen, inte <script>-taggar elle HTML-kod (se sid 69 ovan). Följande exempel visar en js-fil med den enkla funktionen test som visar en meddelanderuta: function test() //Funktionen heter test alert( Detta är en meddelandruta! ); Filen lagras i under namnet skript.js. Filen infogas i HTML-filen på följande sätt: <html> <head> <title>ny sida 2</title> <script type="text/javascript" src="skript.js"></script> </head> <body> Funktionen anropas sedan som om den var definierad i HTML-koden. <!--Funktionen lagras i skriptfilen skript.js--> Utskrift av text i <p> och <div> Formlär saknar någon komponent som påminner om en etikett (label) i Delphi eller VisualBasic. Däremot går det att styra utskriften i ett <p>- och <div>-märke med JavaScript. Följande rader i ett skript var obj = document.getelementbyid("kalle"); obj.innerhtml= Här är texten! ; skriver ut texten Här är texten i följande <div>-märke: <div id="kalle">här hamnar texten</div> Det går även att skriva ut variabler och HTML-formatering: obj.innerhtml="<h1>nummer: "+antal+"</h1>"; Attributet id definierar i vilket <p>-märke utskriften sker, det här fallet attributet med namnet kalle. Färgen på märkets text ändras med följande rad: obj.style.color="blue"; Motsvarande fungerar även för <h1>-, <div>- och <a>-märken. Ersätts.innerHTML med.innertext fungerar detta endast i webbläsaren Explorer. Attributet id kan även användas istället för attributet name i <form>-taggen. I följande exempel skrivs innehållet i en textruta ut i en alert-ruta: <script language="javascript"> function oppna() alert("du matade in: "+document.getelementbyid("kalle").value); </script> </head> <body> <input type="button" value="tryck" name="b1" onclick="oppna();"> <input type="text id="kalle"> </body> 83 Brogårdsgymnasiet, Kristinehamn

84 Övning 4.21: Skriv ett skript som skriver ut ett slumptal mellan 1 och 100 (se urklipp) i ett <h1>-märke. Innan knappen aktiverats syns bara knappen. Objektet event I nyare versioner av JavaScript (1.2) finns objektet event som gör det möjligt att bl a läsa av tangenterna, musknapparna och erhålla markörens läge på skärmen. Vi tar upp följande egenskaper till objektet event. ASCII-kod hos tangent event.keycode Egenskapen event.keycode ger ASCII-koden för en nedtryckt tangent. Följande kodrader kollar om en nedtryckt tangent är Enter-tangenten. Detta kan t ex användas för att anropa funktioner utan att knappar behöver aktiveras.: function test(e) if (e.keycode==13) alert( Du tryckte på Enter-tangenten ); <form name="f1"> <input type="text" name="t1" size="8" onkeydown="test(event);"> </form> String-funktionen String.fromCharCode(e.keyCode) omvandlar ASCII-koden till motsvarande tecken. 84 Brogårdsgymnasiet, Kristinehamn

85 Musknappar och koordinater event.button, event.x, event.y Egeneskapen event.button kan anta värdet 1 eller 2 för vänster respektive höger musknapp. Egenskaperna event.x och event.x ger webbfönstrets koordinater. Följande kod anropar en funktion om en musknapp aktiveras. Är det höger musknapp skrivs koordinaten ut och är det vänster musknapp skrivs detta ut i en alert-ruta: document.onmousedown=klick; function klick() if(event.button==2) alert(event.x+","+event.x); if(event.button==1) alert("vänster musknapp"); Skärmkoordinaterna ges av event.screenx och event.screeny. //Observera att parenteser saknas i funktionen Övning 4.22: Modifiera skriptet 4.19 ovan så att det går att det även går att göra inmatning med Enter-tangenten. Övning 4.23: Gör ett skript som skriver ut tecken och ASCII-koden i två textrutor (eller i ett <p>-märke för ASCIIkoden). Ledning: Använd händelsen onkeydown. Objektet Date() Tider och datum anges i JavaScript med objektet Date(). En variabel (instans) av objektet deklareras på följande sätt: tiden = new Date(); Följande metoder finns för utskrift av olika tidsformat: tiden.getyear() //Ger året tiden.getmonth() //Ger månaden; 0, 1, 2 tiden.getdate() //Ger dagens datum tiden.getday() //Ger namnet på veckodagen tiden.gethours() tiden.getminutes() tiden.getseconds() tiden.gettime() //Ger antalet millisekunder mellan och tiden. tiden.tolocalestring() //Ger utförligt datum Följade funktion skriver ut aktuell tid och datum i en textruta: function test() tid=new Date(); f1.t1.value=tid.tolocalestring(); 85 Brogårdsgymnasiet, Kristinehamn

86 Senaste uppdatering Sidan aktualitet ökar om det visas när den senast är uppdaterad. För att slippa göra detta själv kan funktionen lastmodify användas i ett skript. Följande rader läggs ofta in längst ner på en sida: <SCRIPT LANGUAGE="JavaScript"> document.write("senaste uppdatering " + document.lastmodified); </SCRIPT> Tidgivaren SetTimeout() Förlopp kan upprepas med tidgivaren SetTimeout. Syntaxen är följande: kalle = settimeout(test,1000); //Variabeln aa behöver inte anges Detta innebär att funktionen test() anropas med 1000 ms mellanrum. Vill man stänga av tidgivaren görs detta med följande kod: cleartimeout(kalle); //Detta förutsätter att variabeln aa tilldelats enligt ovan. Följande funktion anropas varje sekund: function test() tid=new Date(); f1.t1.value=tid.tolocalestring(); aa = settimeout("test()",1000) Omvandling till hexadecimala tal Färger tilldelas lite omständigt på hexadecimal form i html-koden. Det finns dock en funktion som omvandlar ett decimalt heltal till motsvarande hexadecimala tal. Följande sats omvandlar heltalsvariabeln heltal till hexadecimala talet hexa: hexa=heltal.tostring(16); Vill vi t ex ha en färg på hexadecimal form kan vi gör a på följande sätt: farg= # +r+g+b; document.bgcolor=farg; Där r, g, b är hexadecimala variabler. Följande funktion slumpar en ny färg för bakgrunden var tiondels sekund: function tid() var pp,r,g,b; r=math.floor(math.random()*255)+1; //Genererar slumptal mellan för rött, grönt och gult. g=math.floor(math.random()*255)+1; b=math.floor(math.random()*255)+1; pp="#"+r.tostring(16)+g.tostring(16)+b.tostring(16); //Omvandlar slumptalen till hexadecimala tal document.bgcolor=pp; aa=settimeout(tid,100); //Avbryts med onclick="cleartimeout(aa);" i en knapp t ex. 86 Brogårdsgymnasiet, Kristinehamn

87 Övning 4.24: Gör ett skript som skriver ut aktuell timme, minut och sekund när knappen aktiveras. Skriv ut i textrutor (som i urklippet) eller i en <p>-tagg. *Övning 4.25a: Gör ett skript som genererar en slumpmässig färg för bakgrunden när du klickar på en knapp. Färgens decimala nummer skall skrivas ut i var sin textruta, som i urklippet. Övning 4.25b: Gör ett skript som slumpmässigt byter mellan bakgrundsfärgerna rött, grönt, gult och blått. Tiden för färgväxlingen matas in i textrutan, med startvärdet 500 när sidan öppnas. Skriptet skall innehålla två knappar en för att starta och en för att stoppa färgväxlingen. Tidmätare Nedan visas en skriptfunktion som mäter och skriver ut tiden i ett p-märke från det att sidan öppnas. Modulusoperatorn % används för att beräkna hela sekunder (0-59). var starttid=new Date(); function tiden() var msek, sek; nutid=new Date(); msek=nutid.gettime()-starttid.gettime(); sek=math.round((msek%60000)/1000); //Beräknar hela sekunder med modulus (%) if (sek==60) sek=00; min=math.floor(msek/60000); window.tt.innertext="tid sidan varit öppen: "+min+":"+sek; settimeout("tiden()",10); </script> </head> <body onload="tiden();"> Övning 4.26a: Gör ett skript som automatiskt byter mellan två bilder varje sekund med hjälp av tidgivaren SetTimeout(). Lös uppgiften på följande sätt: Välj ut de två bilderna du skall använda. Lägg in den ena bilden,startbilden, på hemsidan i förslagsvis Frontpage. Ge bildmärket förslagsvis namnet bilden. Gör en skriptfunktion som byter skiftar mellan de båda bilderna varje sekund. Skripfunktionen skall anropas direkt när sidan öppnas från body-märket. *Övning 4.26b: Gör ett skript som skriver ut hur länge sidan varit öppen med tidgivaren SetTimeout(). Tiden skall anges i minuter, sekunder och tiondelar åtskiljda av kolon, enligt urklippet. Gör utskriften i en textruta eller i ett p-märke. 87 Brogårdsgymnasiet, Kristinehamn

88 *Övning 4.26c: Gör med hjälp av Date-klassen ett skript som skriver ut veckodag, datum, månad och årtal i ett <h1>märke, enligt urklippet till höger. Statusrad med objektet Window Objektet Window, som skapas av märkena <body> eller <frameset>, används bl a för att öppna nya fönster. Det kan även användas för att lägga in text på statusraden längst ner i fönstret. Följande skriptsats innan body-märket lägger in en text i statusraden oberoende av var muspekaren befinner sig: window.defaultstatus="anders Andersson"; Följande skriptsats visar en text i statusraden när muspekaren befinner sig över en länk eller knapp: onmouseover="window.status='kalle';" Eller i en länk så att Kalle visas i statusraden istället för sökvägen: <a href="skript_slump.htm" onmouseover="window.status='kalle';return true;">klicka här!</a> Öppna fönster Länkar öppnar sidor i det aktuella fönstret med följande HTML-kod: <a href = skript_slump.htm > Klicka här!</a> Vill man öppna sidor via t ex formulärknappar utförs samma sak med följade skriptkod: window.location="skript_slump.htm"; Skriptkoden läggs i en funktion eller direkt i t ex en onclick-händelse: onclick="window.location='skript_slump.htm';" Följande kod öppnar ett dokument i ett nytt fönster med angiven storlek och som användaren kan ändra storleken på: window.open("skript_slump.htm","fonster2","width=100,height=100,resizable=yes"); Strängen fonster2 anger fönstrets namn, som används om man skall referera till fönstret via en Target. Förutom egenskaperna width, height, resizable, finns även scrollbar, menyer och location (adressrutan). Egenskaperna har värdet yes eller no. Följande kodrader visar hur ett fönster med en bild i kan öppnas tre sekunder efter att den aktuella webbsidan öppnats: <script> function fonster() window.open("epost.jpg","fonster2","width=100,height=100,resizable=yes"); </script> </head> <body onload="settimeout(fonster,3000);"> 88 Brogårdsgymnasiet, Kristinehamn

89 Ramar och skript I förra stycket öppnade vi dokument i det aktuella fönstret. Har vi ramsidor (frames) vill vi kanske kunna påverka utseendet i andra fönster. Detta kan göras med ordet parent, som hänvisar till fönstret där ramarna skapas (ramsidan). Antag att vi att tre ramar. Följande skriptkod i ett fönsterdokument (menyn) visar hur färgen kan ändras i ett annat fönster tillhörande ramsidan. Detta fönster har namnet hoverst. Samt hur en sida samtidigt laddas till det tredje fönstret: parent.hoverst.document.bgcolor='green'; // I webbläsaren Google Crome fungerar detta inte när dokumenten parent.hunderst.location='skript_slump.htm'; //är lagrade på datorn, men när de överförs till webbservern. Förslagsvis läggs koden i en funktion kopplad till en knapp eller länk. Ett funktionsanrop av funktionen lenkar() från en länk görs med följande kod: Detta är en <a href="javascript:lenkar();">länk</a>. Har man många fönster eller inte vet namnen på fönstren kan man istället anropa fönstren med vektorn frames[i], som inneåller ramens samtliga fönster. Fönstren adresseras med ett index, som för tre fönster har värdena 0, 1, 2 (börjar alltid med 0). Föregående anrop kan alltså även göras med följande skriptkod: parent.frames[1].location='skript_slump.htm'; parent.frames[2].document.bgcolor='green'; Bilden bilar.jpg laddas till en bildruta med namnet rutan i ramen med indexet 1 med följande kod: parent.frames[1].rutan.src= bilar.jpg ; *Övning 4.27: Gör ett skript innehållande en textruta och där det står Mata in i statusraden när musmarkören ligger över textrutan. Övning 4.28: Gör ett skript innehållande en inmatningsruta och en knapp. När man matar in ett filnamn i textrutan och klickar på knappen skall dokumentet visas i fönstret. Detta skript kan användas om man inte vill att alla skall ha tillgång till en viss sida, där då filnamnet är lösenordet. Det är då praktiskt att inte behöva mata in början och slut på url-adressen. Detta kan istället läggas till i skriptkoden: window.location= +f1.t1.value+".se"; Gör även så att det går att mata in med Enter-tangenten. För att detta ska fungera måste ett IDattributet användas i textrutan och utan <form>-taggar med följande kod: window.location=" Övning 4.29: Gör ett skript i ett dokument som 10 s efter att sidan öppnats öppnar ett nytt fönster i dokumentet med måtten 100 x 200 pixels. Användaren skall kunna ändra det nyöppnade fönstrets storlek. 89 Brogårdsgymnasiet, Kristinehamn

90 Övning 4.30: Gör en ramsida innehållande tre fönster/ramar. Det vänstra fönstret är menyfönster. Länkarna och knapparna skall fungera på följande sätt: Länk 1 färgar bakgrunden röd och grön i sida 2 respektive 3. Länk 2 öppnar ett nytt fönster (200 x 200 pixels) med Brogårdsgymnasiets hemsida. I sidan 2 öppnas en bild på dig och i sidan 3 ett annat dokument, Webbdesignkursen. Klickar man på översta knappen visas Brogårdsgymnasiets hemsida i det övre fönstret och Sundsta gymnasiets (Karlstad) hemsida i det nedre fönstret. Mata in ett dokumentnamn/sökväg som sedan öppnas i sidan 2 när nedersta knappen klickas. For- och While-loopar I JavaScript (lisom i andra programspråk) är for- och while-looparna de vanligaste repetitionssatserna. En funktion som beräknar summan av med en for-loop och lägger summan i en textruta ser ut på följande sätt: function op() var sum=0; //sum får startvärdet 0 for (i=1;i<=5;i++) //i++ är samma sak som i=i+1. Indexet i måste vara ett heltal sum=sum+i; f1.t1.value=sum; //summan skrivs ut i en textruta Observera att parentesen i for-satsen innehåller tre fält: I första ges indexet ett startvärde, i andra kollas om villkoret är uppfyllt och i sista ökas (eller minskas) indexet. Loopen pågår så länge villkoret är uppfyllt. I följande funktion beräknas samma summa med en while-loop: function op() var sum=0,i=1; while (i<=4) sum=sum+i; i++; f1.t1.value=sum; //indexet i behöver inte vara ett heltal 90 Brogårdsgymnasiet, Kristinehamn

91 Strängar Följande två strängmetoder är användbara: strang.length //Anger längden (antal tecken) hos strängen strang. strang.charat(x) //Anger tecknet i positionen x i strängen strang. Första positionen är 0. Övning 4.31: Gör ett skript som beräknar summan av talföljden upp till det tal som står i översta textrutan (Största tal). Summan skrivs ut i undre textrutan. Observera att innehållet i övre textrutan markeras när knappen tryckn ner. Lendning: Använd f1.t2.select(); Övning 4.32: a) Ett tal i Fibonaccis talföljd fås som summan av de två föregående talen. Talföljdens sju första tal är: 1, 1, 2, 3, 5, 8, 13. Skriv ett skript som läser in ett heltal (n) och sedan beräknar det n:te talet i Fibonaccis talföljd. b) Skriv ut ordningsnumret och motsvarande Fibonaccital i en tabell. Inmatningen görs som i a). Använd följande sats för utskriften: document.write(i+":"+sum3+"<br>"); Övning 4.33: Skriv ett skript som läser in en mening via en textruta och som sedan skriver ut meningen baklänges i textrutan under. *Övning 4.34: Gör ett skript som fungerar som hemsidan fleraramar/index.htm, d v det gäller att få så många klickar som möjligt i de röda fönstren unde tjugo sekunder. Skriptet slumpar fram vilket fönster vars bakgrund skall färgas röd två gånger i sekunden. Ledning: Skriptet har en variabel (n) som räknar antal klickar (document.onmousedown=tryck, som läggs i ett skript och anropar funktionen tryck() när man klickar på sidan) i de fyra olika dokumenten. Variabeln är deklarerad i det översta vänstra dokumentet (0) och ökas med ett (1) i det dokument där man klickar, med följande kod: parent.frames[0].n=parent.frames[0].n+1; parent.frames[0].ff.t1.value=parent.frames[0].n; //Koden läggs i alla dokumenten //ff är formulärnamnet i frames[0] Eller kortare: parent.frames[0].ff.t1.value=parent.frames[0].n++; Observera att även utskriften i i det 0:te dokumentet görs från dokumentet där man klickar. Tycker du uppgiften verkar svår kan du titta hur den är löst. De fem siddokumenten finns i den angivna mappen i länken ovan. 91 Brogårdsgymnasiet, Kristinehamn

92 Listrutor och bakgrundsfärg Komponenten listrutan (listbox), som tillhör ett formulär, är praktisk att använda i menyer. Listrutan skapas med märkena select och option. I följande skriptexempel kan bakgrundsfärgen väljas i en listruta. Färgen ändras när knappen aktiveras: <script language="javascript"> function farg() document.bgcolor=ff.d1.options[ff.d1.selectedindex].value; </script> </head> <body> <form name="ff"> <p><input type="button" value="knapp" name="b1" onclick="farg();"></p> <p><select size="1" name="d1"> <option>välj en färg</option> <option value="red">röd</option> <option value="yellow">gul</option> <option value="green">grön</option> </select></p> </form> </body> Vektorn options[..] i märket select innehåller de tre olika valen (0, 1, 2), som inte är utskrivbara. Egenskapen value (red, yellow, green) är dock utskrivbar. Egenskapen selectedindex hänvisar till det markerade valet i listrutan. Attributet size anger hur många alternativ som skall visas i listrutan. Här visas en färg i taget. Vill vi att färgändringen skall ske direkt när valet görs i listrutan lägger vi in en onchange-händelse i select-märket: <select size="1" name="d1" onchange="farg();"> Listrutor och länkar Nästa exempel visar hur en webbsida kan väljas via listrutan. I exemplet visas sidan direkt när valet görs via onchange-händelsen i select-märket.: <script language="javascript"> function farg() if (ff.d1.selectedindex!=0) //Kollar så att inte första alternativet väljs i listrutan (Välj dokument) window.location=ff.d1.options[ff.d1.selectedindex].value; </script> </head> <body> <form name="ff"> <p><select size="1" name="d1" onchange="farg();"> <option>välj ett dokument</option> <option value="skript_fkn.htm">funktioner</option> <option value="c:/andersa/webbdesign/skript_slump.htm">slumptal</option> <option value=" </select></p> </form> </body> 92 Brogårdsgymnasiet, Kristinehamn

93 Följande exempel visar på motsvarande sätt hur en bild väljs till bildrutan bilden : <script language="javascript"> function farg() if (ff.d1.selectedindex!=0) bilden.src=ff.d1.options[ff.d1.selectedindex].value; </script> </head> <body> <form name="ff"> <p><select size="1" name="d1" onchange="farg();"> <option>välj en bild</option> <option value="anders99.jpg">anders</option> <option value="killar.jpg">killar</option> <option value="finnmark2.jpg">finnmarken</option> </select></p> </form> <p><img name="bilden" src="killar.jpg" width="269" height="201"></p> </body> Följande exempel visar hur en sida väljs i listrutan i det vänstra fönstret till det högra fönstret. I exemplet ligger htm-filerna som väljs i mappen ovanför mappen ramsidan är sparad i. Observera att de inledande punkterna i sökvägen till dokumentet (../express.htm ) markerar detta: <script language="javascript"> function farg() if (ff.d1.selectedindex!=0) parent.frames[1].location=ff.d1.options[ff.d1.selectedindex].value; </script> </head> <body> <form name="ff"> <p><select size="1" name="d1" onchange="farg(this);"> <option>välj en sida</option> <option value="../skript_slump.htm">slumpsidan</option> <option value="../skript_fkn.htm">funktioner</option> <option value="../express.htm">express</option> </select></p> </form> </body> 93 Brogårdsgymnasiet, Kristinehamn

94 Följande exempel visar hur man via två listrutor kan välja ramar och vilken bakgrunsdfärg respektive ram skall ha. Observera att i den översta listrutan kan flera val göras (håll ned Ctrl-tangenten) därför attattributet multiple finns med i select-märket: <script language="javascript"> function farg() for (i=0;i<=3;i++) if (ff.ramen.options[i].selected) //Kollar om alternativet är valt i listrutan parent.frames[i].document.bgcolor=ff.fargen.options[ff.fargen.selectedindex].value; </script> </head> <body> <form name="ff"> <b><font face="arial">välj ram:</font></b> <select size="4" name="d1" name="ramen" onchange="farg();" multiple> //multiple tillåter flera val i listrutan. <option value=0>övre vänstra</option> //I urklippet nedan är tre val gjorda. <option value=1>nedre vänstra</option> <option value=2>övre högra</option> <option value=3>nedre högra</option> </select></p> <p><font face="arial"><b>välj bakgrundsfärg:</b></font> <select size="1" name="fargen" onchange="farg();"> <option value="red">röd</option> <option value="yellow">gul</option> <option value="green">grön</option> </select></p> </form> <p><font size="6">övre vänstra ramen</font></p> </body> Övning 4.35: Gör en hemsida innehållande tre ramar. I den vänstra ramen kan man via två listrutor välja bland några bilder respektive kommuners hemsidor. Bilderna och hemsidorna skall visas i de högra ramarna. Sidan skall fungera som exemplet bildochramar/index.htm. *Övning 4.36: Gör en sida med två listrutor. I den ena väljs landskap och i den andra kommuner. Endast kommuner i det valda landskapet skall visas i listrutan. Den valda kommunens hemsida visas sedan i det andra fönstret. Sidan skall fungera som exemplet lankommapp/index.htm. Ledning: Följande rad påverkar texten i listrutan: formnamn.listrutenamn.options[1].text="filipstad"; 94 Brogårdsgymnasiet, Kristinehamn

95 Övning 4.37 egen webbplats Här skall du göra en webbplast med några olika skriptfinesser. Lös uppgiften enligt följande punkter: 1) Skapa mappen skriptuppgift och spara tre bilder i mappen. 2) Skapa ramsidan index.html med tre ramar, enligt urklippet till höger. Meny-ramen har bredden 250 p och den övre ramen höjden 100 p. Kantlinjerna skall inte gå att ändra. 3) Skapa startsidan start.html, som innehåller ett skript om senaste uppdatering. 4) Skapa sidan bildvisning.html, som när den lilla bilden klickas visar den i den stora bildrutan. Det skall heller inte gå att kopiera den stora bilden; klickas den visas en meddelanderuta med texten Bilden kan ej kopieras.. Ledning: Använd händelsen OnMouseDown. 5) Skapa sidan bildspel.html, som när den byter bild varannan sekund. 6) Skapa sidan beräkning.html, som läser in en radie och beräknar cirkelns omkrets. Den första rutan är fokuserad när sidan öppnas och blir markerad vid beräkning. Försöker man markera den andra rutan blir den första markerad. 7) Skapa sidan skriptuppgift.html, som innehåller tabellen med de fyra länkarna överst på sidan. Tabellen är 600 p bred och varje cell 150 p bred. Klickar man på ett av orden öppnas respektive sidan i ramen under. Ett rolig finess är att bakgrundsfärgen i cellen ändras när markören ligger över cellen. 8) Skapa sidan meny.html med menyerna till vänster. Sidan har tre val: a) Listrutan innehåller länkarna till de fyra sidorna som öppnas i den högra nedre ramen. b) Klickas knappen öppnas internetdokumentet i ett nytt fönster vars url-adress anges i textrutan. c) Klickas texten i den onumrerade listan får sidan i den högre nedre ramen den färgen. Även texten får den färgen när markören ligger över texten. En finess är att lägga till en undermeny för fler färger under den andra färgen. Ledning: Skapa ytterligare en menysida med som öppnas när länken Fler färger klickas. 9) Överför mappen skriptuppgift till din webbserver och länka startsidan till ditt dokument projekt.html på webbservern, enligt urklippet till höger. 95 Brogårdsgymnasiet, Kristinehamn

96 5. Design och layout Inledning Vi har nu via HTML, CSS (se nedan), Photoshop och JavaScript de hårda verktygen för att göra bra hemsidor. Nu återstår att lära mer om de mjuka verktygen design och layout, d v s hur sidan skall utformas för att innehållet skall nå ut på bästa sätt. Vi kommer i detta kapitel att gå igenom design, ord och meningar, typografi, bild, samt färg. Vi kommer även att ta upp lite om publiceringsregler på Internet. Designbiten av kursen baseras på boken Webbdesign av Bo Bergström, utgiven på förlaget Liber (2001). Inledningsvis tittar vi på några hemsidor från företag och institutioner verksamma inom framtidsinriktade branscher som teknik, design, mode och konst, vars hemsidor får representera de senaste idéerna inom webbdesign. Tänk på bl.a. följande punkter när du betraktar hemsidorna: Textens utseende och placering Rubriker Färgkombinationer (likartade färger etc.) Mörka respektive ljusa bakgrunder Bakgrundens utformning Bildval Här är hemsidorna: Kolla länkarna till Companies och Museums & Schools (Jakob Nielsen) Design Det viktigaste vid bra webbdesign är att: Attrahera besökaren med lockande form och innehåll. Orientera besökaren genom hemsidans (sajtens) alla delar. Internetworlds bästa svenska sajter 2010 Postorderföretaget vann. Kolla de 100 bästa sajterna: Läs gärna vinnarmotiveringen, samt artikeln om företaget som gör halens hemsida. Attrahera Mycket av attraktionen ligger i en väl strukturerad och balanserad hemsida. Helhetsintrycket skall vara seriöst och tydligt signalera sidans budskap, vare sig det gäller att sälja bilar eller presentera ett museum. Onödig information riskerar att skymma det väsentliga. Det gäller att snabbt fånga 96 Brogårdsgymnasiet, Kristinehamn

97 besökarens intresse så att han/hon vill komma vidare på sajten. För att lyckas med detta bör webbdesignern vara medveten om följande grundläggande designregler: Symmetri och asymmetri Kontrast och balans Optisk mittpunkt Gestaltlagar Symmetri Symmetri innebär att innehållet på sidan är centrerat. Detta ger intryck av ordning och reda. Nackdelen är möjligen att formen är stel och tråkig. Asymmetri Asymmetrin skapar dynamik och ger en mer spännande layout. Asymmetrin skapar kontrast. Kontrast Kontrasten bidrar allra mest till attraktionen. En dominerande bild, rubrik eller symbol gör sidan medryckande. Kontrasten lockar till att gå vidare. Symmetri Denna texten är exempel på ett symmetriskt stycke, som vanligtvis är snyggt. Emellertid lite tråkig. Asymmetri Denna texten är exempel på ett asymmetriskt stycke, som skapar spänning. Skapar visuell styrka. Kontrast Attraherar Balans Kontrasten måste dock vara balanserad för ögat. Annars riskerar sidan att vicka åt ena eller andra hållet. Optisk mittpunkt En sida upplevs harmonisk om text eller bilder placeras något över sidans mitt. Obalans Obalans Gestaltlagar Den mänskliga hjärnan försöker att hitta ordning och samband i främmande strukturer. Följande gestaltlagar tar fasta på detta och ger vägledning för webdesign: Detta är bättre Detta är sämre Närhetens lag: Bilder och texter som hör samman bör placeras nära varandra. Likhetens lag: Element (knappar t ex) som liknar varandra hör sannolikt ihop och har liknande funktioner. Placera t ex knappar på samma ställen på sajtens alla sidor och använd samma textstil för länkar. Slutenhetens lag: Avgränsa sammanhörande texter med ramar. Detta förbättrar struktur och läsbarhet. 97 Brogårdsgymnasiet, Kristinehamn

98 Less is more Överlasta inte sidan med bilder och texter och var inte rädd för att lämna stora ytor tomma. Överlastade sidor ger ett rörigt och oproffsigt intryck. Startsidan viktig Startsidan, och i synnerhet dess övre del, är sajtens viktigaste sida. Den skall förmedla ett så övertygande budskap att besökaren vill gå vidare på sajten. Kortare rubriker och någon enstaka bild som anspelar på sajtens innehåll i kombination med en personlig och spännande design är bra. Bilderna skall vara små (max 50 kb) så att sidan laddas snabbt. Startsidan bör innehålla information om: Vem som står bakom hemsidan Verksamhet Eventuellt varumärke Dessutom är det viktigt att startsidan är aktuell och ständigt uppdaterad. Lägg gärna in ett skript för senaste uppdateringsdatum nederst på sidan. Orientera Har besökaren väl blivit attraherad av av startsidan gäller det att behålla intresset via en välstrukturerad och lättorienterad sida. Enkelt och tydligt Hemsidan skall vara enkel att orientera sig i. Principen är att ett barn eller en relativt datorovan person skall ha utbyte av sidan. Det skall via rubriker tydligt framgå var länkar går. Viktigt är också att man inte går vilse när man klickar vidare på sajtens länkar. Läggs navigeringsverktygen i en separat ram på sidan undviks oftast detta. Följande frågor kontrollerar sidans tydlighet: Har varje sida en tydlig, attraherande och orienterande struktur? Har varje sida ett tydligt dominant, visuellt element? Har varje sida lättolkad navigeringshjälp? Innehåller alla sidor information om adress, telefonnummer och andra data som kommer med på en utskrift? Har varje sida en e-postlänk för frågor och synpunkter. Finns senaste uppdateringsdatum angivet på sidan? Enhetlighet Det skall finnas en röd tråd genom sajtens sidor så att besökaren känner igen sig, t ex följande: Företagsnamn eller logotype upprepas på varje sida. Liknande typografi på sidorna. Knappfunktionernas form enhetliga. Startsidans dominanta bild förekommer i mindre format på alla sidor. Enhetliga färgskalor. Använd en enhetlig formatmall för sajtens sidor. Sajtens budskap skall framgå i hela sajten. Variation Försök att variera designen utan att enhetligheten går förlorad, t ex genom att varje sida har något nytt medryckande. Tänk dock på att inte röra till det. Att kombinera variation och enhetlighet kräver känsla. 98 Brogårdsgymnasiet, Kristinehamn

99 Länkar Länkarna tillhör sajtens viktigaste viktigaste delar. Tre vanliga ställen att placera länkar på är: 1. I den löpande texten. Detta är effektivt i lite längre texter. 2. Direkt efter en kortare inledande text (ingress). 3. I en separat länkmeny. Kombinationer av dessa tre ställen är möjliga, men tänk på att vara konsekvent med placeringarna. Övning 5.1: Du skall under några veckor bygga upp en ny sajt innehållande ett antal sidor. Du får själv bestämma innehållet på sajten, det viktiga är att du bygger upp sajten efter vedertagna designregler. Börja med att komma på vad din sajt skall handla om (din hemkommun, en nationalpark, en resa etc). Börja sedan att skissa på sajtens förstasida. Designmodell Sajtens startsida skall, som vi sett, vara attraherande och intresseväckande. Följande designmodeller visar några olika idéer på hur text, bilder och knappar ofta placeras på hemsidan. Vinkelhaksmodellen Här är designen knuten till det övre vänstra hörnet. I sidans överdel och till vänster läggs då länkar, listrutor och menyer. Fördelen med denna modell är att sidans viktiga delar syns på alla skärmar och att layouten är oberoende av skärminställningarna. Modellen är vanlig och bygger ofta på tre ramar: en över och en till vänster för menyerna, samt en större ram där de länkade sidorna öppnas. Centrummodellen Här utgår designen från sidans centrum, där text och länkar placeras kring en dominant bild. Eventuellt med en menyrad på sidans över- eller underdel (om hela sidan syns i fönstret). Magasinmodellen Modellen påminner om en dagstidning med text och bild ordnade tabeller och spalter. Modellen passar för informationstäta sidor. Passagens hemsida är ett exempel på detta. Personlig modell Utforma en egen personlig designmodell, t ex en kombination av ovanstående modeller. En variant kan vara att börja med en häftig startsida utan länkar som visas under några några sekunder innan en mer konventionell startsida automatiskt visas. Övning 5.2: Kolla vilka designmodeller andra sajter har (använd länkarna i början på kapitlet). Skapa sedan en designmodell för din hemsida, d v s bestäm dig för hur länkarna skall placeras på sidan, om sidan skall 99 Brogårdsgymnasiet, Kristinehamn

100 baseras på ramar (hur många?) etc. Gör sedan klart startsidan som du började att skissa på i övning 5.1. Tänk på att designmodellen du väljer skall prägla hela sajten. Val av navigationsinstrument Man tar sig vidare i sajten med länkar eller navigationsinstrument, d v s med ikoner, knappar och listrutor. Här gäller det att välja ett navigationsinstrument som passar in i sammanhanget och att placera det rätt. Placering Navigationsintrumenten skall naturligtvis placeras så att de är lätta att upptäcka på sidan, t ex där besökaren förväntas att fästa blicken. Ofta placeras länkarna i menyramar. För att undvika att besökaren går vilse i sajten bör det på varje sida finnas en länk till startsidan. Baseras sajten på menyramar är detta i regel inget problem. Viktigt är också att navigationsinstrumenten är lätta att förstå. Navigationsinstrument Följande navigationsinstrument är vanliga: Bilder Metafor Ikon Text Knappar Listrutor används ofta som länkar. En variant är klickbara (mappade) bilder, där olika delar av bilden är länkade. Passar exempelvis för kartor och gruppbilder. Nackdelen är att bilder upptar mycket minne och att sidan öppnas långsamt. betyder liknelse, t ex att startsidans symbol i webbläsaren är ett hus och att spara symboliseras av en diskett i Word. I en internetaffär kan t ex en kundvagn symbolisera att man vill handla. är ett tecken eller en förenklad bild som inte kräver någon textförklaring. Det kan t ex vara en pil för nästa sida. Ikon och metafor är snarlika. är kanske det vanligaste navigationsinstrumentet i form av en textlänk. är praktiska och synliga. Enklast är att använda formulärknapparna prydligt uppradade i menyramen (tråkigt?). En variant är att designa egna knappar i t ex Photoshop som anknyter till sajtens innehåll; sängar i en hotellsajt, datorer i en datorsajt o s v. Risken finns dock att det blir övertydligt. Glöm inte att förse knapparna med betecknande text. används om valmöjligheterna är många, t ex för att länka till medlemmarna i en förening. Listrutan är en formulärkomponent. Testfrågor om webbsajt Låt några inom webbsajtens målgrupp testa den när den börjar bli färdig och be dem besvara t ex följande frågor: Vad tycker du om webbsajtens utseende? Vilka signaler sänder den ut? Skapar sajten förtroende? Vilken typ av information och tjänster tror du finns på sajten? Vem tror du sajten vänder sig till? Vad är sajtens mål? Vilka tjänster klickar du på? Vilka länkar undviker du? Vad betyder denna ikon (visa bild på ikon)? 100 Brogårdsgymnasiet, Kristinehamn

101 Övning 5.3: Kolla vilka navigationsinstrument andra sajter har (använd länkarna i början på kapitlet). Bestäm dig sedan för vilka navigationsinstrument (knappar, textlänkar, bilder och/eller listrutor) Din sajt skall ha och gör eventuellt en egen knappdesig. Texter på Internet Texter på Internet läses ofta på ett annorlunda sätt än texter i tidningar och böcker, delvis därför att det är mer ansträngande för ögonen att läsa på en skärm, men också därför att Internet kombinerar text med länkar och bilder. Texter på Internet är därför ofta skrivna som ingresser i tidningar. Frågan är alltså hur en bra text skall skrivas på Internet. Webbtext Vad är målet? Det primära målet är att få fram sitt budskap på ett tydligt sätt. Det kan gälla att sälja varor, sprida idéer eller informera om en skola. Ingen skall behöva tveka om sajtens innehåll. Utgå från besökaren Skriv texten med tanke på målgruppen. Är det ungdomar, kvinnor eller tekniken som sajten vänder sig till. Anpassa språk och layout efter målgruppen. Kom till saken direkt Fånga läsaren genom att låta textens viktigaste budskap komma först. Glöm alltså intetsägande inledningar. Onödig text riskerar att läsaren tappar intresset och slutar läsa. Texten skall vara som gäddan: Bitsk i början, fast i köttet och i mitten och med ett snärtigt slut. Det korta webbspråket Skärmtexter bör vara kortare än tryckta texter, eftersom en text på skärm läses c:a 25 % långsammare än på papper. Dessutom bör texterna skrivas så att sidan inte behöver skrollas. Kortare spalttexter som ryms på en sida rekommenderas. Tänk speciellt på att inte lägga in en tryckt text på webbsidan utan att korta ner texten först. Här följer några skrivregler för webben: Använd korta ord, korta meningar och korta stycken. Helst skall varje stycke handla om en avgränsad idé eller handling ett stycke, en handling är en slags grundregel. Stryk det som går att stryka. Skriv i aktiv form och plocka bort de flesta adjektiven för att få ett rakt och konkret språk. Ta bort dina favoritformuleringar, som trots mycket arbete ofta är överflödiga (kill your darlings). 101 Brogårdsgymnasiet, Kristinehamn

102 Textens byggstenar En slagkraftig rubrik fångar läsaren, ingressen tydliggör budskapet och mellanrubrikerna lockar läsaren genom texten. Överskrift eller rubrik Skillnaden mellan överskrift och Djurliv i djungeln rubrik är att överskriften beskriver textens innehåll på ett sakligt och ibland tråkigt sätt, medan rubriken fångar läsarens intresse med en mer lockande formulering. Djungelns farliga djur Gör bra rubriker Tänka på att en besökare kan komma in på sidan från olika håll. Bra rubriker skall därför vara både tydliga, informationsrika och lockande på en gång. Tänk därför till lite extra när du skriver rubriker. En s k dårrad med mindre bokstäver på en sida kan komplettera Detta är en dårrad en rubrik. Mellanrubriker (mindre rubriker i texten) som talar om vad ett stycke handlar om delar upp textmassan och gör den mer Djungelns farliga djur lättläst. En variant är s k kantrubriker till vänster på sidan. Ingresser, länkar och citat En ingress är en kort sammanfattning som ofta inleder en tidningsartikel. Detta fungerar även på webbsidor. En variant är att ingressen på webb sidan följs av en länk till artikeln/texten. Är det en lång text är det praktisk att inleda texten med en innehållsförteckning med länkar Varierad och lockande (bokmärken) till textens mellanrubriker. Texten blir med varierad och lockande om citat bryts ut ur texten. Övning 5.4: Utforma texterna i din webbsajtför de tilltänkta besökarna med bra rubriker, mellanrubriker, ingresser o s v. Tänk på att använda rätt webbspråk. 102 Brogårdsgymnasiet, Kristinehamn

103 Typografi Typografi är läran om bokstavsformer och om hur de används i olika sammanhang. Exempelvis används olika bokstavsformer (fonter, teckensnitt) för datorskärnar och för tryckt text. Historiskt har skrivytan gått från grottvägg, via marmortavlor (kilskrift), papyrus (hieroglyfer), pergament, papper till datorskärm. Typografins uppgift är här att skapa ett typografiskt arrangemang som underlättar läsningen. Synlig eller osynlig typografi Teckensnittet är viktigare än man tror. Det ger karaktär åt innehållet och kan skapa associationer hos läsaren.liksom människor kan även texten ett kroppsspråk som påverkar läsaren. Man talar om synlig typografi. Exempel på detta är leksaksaffärernas barnsliga och lekfulla typsnitt. Vilket intryck förmedlar följande typsnitt? Curlz Palace Script Tempus Sans Forte är ett typsnitt Arial Times New Roman De fyra första får exemplifiera synlig typografi (värme, personlig), medan de två sista mer neutrala (möjligen formella). Man talar då om osynlig typografi. Läsbarhet Texten skall arrangeras så att texten blir lätt att läsa. Följande punkter påverkar läsbarheten: Teckensnitt Versaler eller gemena (stora eller små) bokstäver Teckengrad (storlek) Bokstavsmellanrum Radavstånd Radlängd Spaltarrangemang Ordmellanrum Färg Bakgrund Teckensnitt Idag finns tiotusentals olika teckensnitt. Grovt kan dessa indelas i tre grupper: Antikvor Kännetecknas av tjocka och tunna partier, samt har fötter eller klackar (seriffer). Sanserifer Extremer Times New Roman är exempel på en antikva. Kännetecknas av jämntjocka former och saknar serifer (sans=sakna på franska). Arial är exempel på en sanseriff. Kännetecknas av personlig stil. Curl Mt är en extrem. Att välja teckensnitt I tryckt text ger antikvor bästa läsbarheten. Olika tjocklek och serifer underlätt då läsandet. På datorskärmen i mindre storlekar (<13 p) är emellertid Sanseriferna lättare att läsa. Skärmen bränner 103 Brogårdsgymnasiet, Kristinehamn

104 sönder antikvornas tunnare partier och seriferna framstår som klumpar. Georgia är dock en specialanpassad antikva för skärmen. I rubriktexter på skärmen spelar det mindre roll vilket typsnitt man väljer. Andra bra teckensnitt för skärmen är Arialoch Verdana. Versaler eller gemena? VERSALER ÄR SVÅRLÄSTA EFTERSOM DE ÄR LIKA HÖGA, medan ordbilden med gemena bokstäver tyds lättare därför att bokstäverna har olika höjd. Teckenstorlek I rubriker är textstorleken inget problem. I den löpande texten är läsbarheten bäst vid p. För att få harmoni på sidan mellan de olika teckenstorlekarna brukar man använda sig av det gyllene snittets förhållande (5/8). Detta går igen i Fibonaccis talföljd, där det tredje talet är summan av de två föregående (1, 2, 3, 5, 8, 13, 21, 34 ). Exempelvis väljs storleken på den löpande texten till 13 p, underrubriken till 21 p och mellanrubriken till 34 p. Detta är riktvärden och på hemsidor är det ju dessutom ofta svårt att välja så exakta teckenstorlekar. Bokstavsmellanrum Teckenavståndet bör vara större på skärmen än på papper för god läsbarhet. När det är dålig kontrast mellan bakgrund och text och vid ljus text på mörk bakgrund ökar också läsbarhet om teckenavståndet ökar. Annars uppfattas lätt rn som m, cl som d och ol som d eller cl. Teckenavståndet ändras enkelt i Frontpage via menyvalet Format/Tecken och fliken Teckenavstånd. På fackspråk kallas ändring av teckenavstånd knipning. Radavstånd Radavståndet är också viktigt för läsbarheten. Om exempelvis teckenstorleken är 13 p bör radhöjden vara 15 p. Detta kallas på fackspråk för överkägel. Radlängd Läsbarheten försämras om radlängden (spaltbredden) är större än tecken per rad. Blir radlängden å andra sidan för kort blir läsandet ryckigt. 104 Brogårdsgymnasiet, Kristinehamn

105 Spaltarrangemang Texter på Internet läses ofta på ett annorlunda sätt än texter i tidningar och böcker, delvis därför att det är mer ansträngande för ögonen att läsa på en skärm, men också därföatt på Internet. Texter på Internet läses ofta på ett annorlunda sätt än texter i tidningar och böcker, delvis därför att det är mer ansträngande för ögonen att läsa på en skärm, men också därföatt på Internet. Texter på Internet läses ofta på ett annorlunda sätt än texter i tidningar och böcker, delvis därför att det är mer ansträngande för ögonen att läsa på en skärm, men också därföatt på Internet. Textspalter kan formateras på fyra olika sätt: Vänsterställd Vanligast är vänsterställd text. Den Texter på Internet läses ofta på ett annorlunda sätt har två fördelar, dels skapas ett än texter i tidningar och konstant ordmellanrum, dels blir det böcker, delvis därför att det färre avstavningar. I båda fallen ökas är mer ansträngande för läsbarheten. Nackdelen är att ögonen att läsa på en högermarginalen kan bli hackig med skärm, men också därföatt på Internet. störande mönster (bett, hack, avsats). Idealet är omväxlande långa och korta rader. Högerställd Högerställd text används sällan. Möjligen för att lägga en bildtext till vänster om bilden. Centrerad Centrerad text används oftast för rubriker, förstorade citat och dikter. Dock aldrig i löpande text. Marginaljusterad Tidningsspalter är ofta marginaljusterade, d v s med både rak vänster och högerkant. Nackdelen med detta är att ordmellanrummet varierar. Färgkontrast Läsbarheten är beroenda av kontrasten mellan text och bakgrund. Läsbarheten blir bäst med svart text på vit bakgrund. Grön och blå text på vit bakgrund går också bra. Däremot är längre vita texter på svart bakgrund tröttande för ögonen (ögat bländas av den vita texten). Kortare vita texter på svart bakgrund kan dock vara effektfullt. Därför att det är mer ansträngande för ögonen att läsa på en skärm, men också därför att Textens bakgrund Färger används ofta på hemsidor för att skapa uppmärksamhet. Undvik dock att kombinera komplementfärger. Visserligen kan de ge spännande effekter, men ger ofta en skrikig och störande effekt. Vill man trots allt ha en orolig bakgrund kan man göra på följande sätt: Lägg en relativt stor textstorlek på en någorlunda enhetlig bakgrund. Mot en orolig bakgrund kan man lägga en ljus bakgrundsplatta som kontrast till texten. Ett alternativ är att skugga texten. Rejält stora bokstäver syns mot de flesta bakgrunder. 105 Brogårdsgymnasiet, Kristinehamn

106 Utmärkning och förstärkning Enskilda ord Ibland vill man märka ut vissa delar av en text, t ex ett ord eller början på ett stycke. Ett ord kan märkas ut på tre olika sätt: Kursiv stil Med kursiv stil märks ett ord ut på ett diskret sätt. Fetstil Kapitäler Med fetstil blir markeringen starkare. Ett elegantare sätt är att använda KAPITÄLER, d v s små stora bokstäver med samma höjd. KAPITÄLER är alltså inte vanliga versaler. Kapitäler infogas enkelt via Format/Tecken i Frontpage. Stycken A nfanger är ett elegant sätt att markera början på en längre text. Anfanger kan gå över flera rader. Har ej hittat anfanger i Frontpage. Ett alternativ är att lägga in en bild i början. Första raden i ett nytt stycke inleds ofta i tidningsartiklar med ett litet indrag. Mellanrubriker Mellanrubriker är viktiga för läsbarheten. De delar upp texten och ger en förhandsvisning om textens innehåll. Rent typografiskt gäller ofta följande för en mellenrubrik: Halvfet mellanrubrik mot mager brödtext. Kursiv mellanrubrik mot rak brödtext. Mellanrubriken skall vara 4-6 punkter större än den löpande texten (brödtexten). Mellanrubriken placeras närmare sitt stycke än föregående stycke. Övning 5.5: Kolla typografin för några andra sajter har (använd länkarna i början på kapitlet). Utforma sedan texterna i din webbsajtför med en passande typografi. 106 Brogårdsgymnasiet, Kristinehamn

107 Färger Varför färg? Färger är viktigt på webben och används främst för att: Attrahera Färger och visuella element skapar känslor hos besökaren och drar till sig besökarens blickar. Ljusa färger i rött och gult skapar en välkomnande stämning, medan mörka blågröna färger ger andra signaler. Strukturera Genom att ge olika avsnitt (ramar, linjer, navigationsinstrument) olika färg blir det lättare för besökaren att hitta på sidan. Pedagogisera Färger kan även används för att pedagogisera sidan, exempelvis genom att ge ett avsnitt som handlar om växter ljusgrön bakgrund, om vatten ljusblå bakgrund och rymden svart bakgrund. Färgupplevelse Som vi sa i förra avsnittet bör man inte placera komplementfärger (rött och grönt t ex) intill varandra. Den starka kontrasten gör sidan skrikig; om man nu inte vill uppnå detta. Upplevelsen av färger varierar dock i viss mån mellan människor och kulturer. För den västerländska färgupplevelsen gäller ofta följande motsatsförhållanden: Vitt står för oskuld, men också för kapitulation. Svart för kraft, men också död. Grått för värdighet, men också för depression. Rött för kärlek, men även för krig. Gult för sol, men även för fara. Grönt för natur, men även för avundsjuka. Blått för himmel, men även för melankoli (sorg). Några färgexempel Text och bild på vit bakgrund ger en positiv upplevelse. Vit text på svart bakgrund ger ett mystiskt och skrämmande intryck. Gråa färger kan ge intryck av elegans och moderiktighet, men för andra ett tråkigt intryck. Röda färger kan ge intryck av vitalitet och värme, men även av skrikighet. Kombinera gärna olika nyanser av samma färg. Det ger ofta en harmonisk färgupplevelse. Övning 5.6: Kolla färgsättningen för några olika sajter (använd länkarna i början på kapitlet). Utforma sedan din webbsajtför med passande färger. 107 Brogårdsgymnasiet, Kristinehamn

108 Bilder Bilder är oerhört viktiga i all form av media, inte minst i webbsajter. Bilden går nämligen rakt in i betraktarens högerhjärna, där känslor och associationsförmåga finns, och tolkas under någon bråkdels sekund. Uppfattas bilden som vän eller fiende? farlig eller ofarlig? munter eller stötande? positiv eller negativ? har den något budskap? tolkas bilden så som användaren tänkt sig? hur uppfattas bilden i olika kulturer? Tänk på detta när du väljer bilder. Bildens uppbyggnad Bilder med djup har förgrund, mellanplan och bakgrund. I bilden till höger är personerna i förgrunden, granden i mellanplanet och bergen i bakgrunden. Bilden ovan på WTC saknar däremot djup. Bilden kan vara en höjd (övre bilden)- eller breddbild (undre bilden). Dessutom kan man välja på när-, halv- och helbilder. Bilderna ovan är hel- och halvbilder, medan bilden på pojken är en närbild. I närbilder kan detaljer bli betydelsefulla (vad tittar pojken på?). Den undre bilden är dessutom en beskuren och fokuserad bild, som därmed ger ett annat intryck än den totala bilden. De tre bilderna till höger är beskurna på tre olika sätt. Vilken beskärning är bäst? Slutligen är bilden till höger tagen ur grodperspektiv. Vilket intryck skapar den av personen? Bildkomposition Vid symmetrisk komposition (se nedan) placeras motivet mitt i bilden. Kompositionen utstrålar harmoni, men är kanske lite tråkig. Vid asymmetrisk komposition respektive diagonalkomposition ligger motivet inte mitt i bilden. Detta kan skapa mer liv och spänning mellan olika delar av bilden. 108 Brogårdsgymnasiet, Kristinehamn

109 Manifest och latent bildinnehåll Vad en bild visar är inte alltid entydigt. Bilden till höger visar en vuxen och ett barn omgivna av vacker natur. Detta kan alla vara överens om. Detta är bildens manifesta innehåll. Barnet tittar dock oroligt bakåt. Överraskas han av fotografen, kommer det en björn eller är det stupet som skrämmer? Detta kan tolkas på olika sätt beroende på betraktarens bakgrund, ålder o s v. Detta tolkningsbara innehåll är bildens latenta innehåll. Kontrasten fångar besökaren Ofta är det kontraster i bilden som fångar betraktarens uppmärksamhet. Kontrasterna kan skapas på åtminstone tre olika sätt: I bilden Kontrast skapas av ljusa partier mot mörk bakgrund (eller tvärtom), ett markant objekt i bilden, eller ett iögonfallande färginslag, t ex i en svartvit bild. I bildbehandling Kreativ bildbehandling fångar ofta betraktaren. Vanligt är att frilägga en bild genom att skära bort hela eller delar av bakgrunden eller att göra en breddbild av en höjdbild. En skuggning (se bilden nedan) lyfter bilden mot besökaren I bildens sammanhang Genom att sätta samman flera bilder till ett collage hamnar bilderna i ett visst sammanhang. Tillsammas skapar bilderna en helhet. Kontrasten kan skapas genom att bilderna har olika storlek, färg och är när- eller avståndsbilder. Text till bilderna kan skapa ytterligare spännade kontrast och öka känslan av sammanhang. 109 Brogårdsgymnasiet, Kristinehamn

110 Bildens kontext En bild får i regel sin betydelse av sammanhanget den finns i. Detta sammanhang kallas bildens kontext. De flesta förknippar bilden på WTC med attentaten 11 september 2001; bilden behöver ingen text. Med en text till bilden kan dock kontexten, och därmed tolkningen, bli en annan. SKORSTENAR förgiftar städer Hur väljer man bild? Vad är målet med hemsidan och hur kan en bild på bästa sätt hjälpa till att uppnå målet? Svaren på dessa båda frågor är avgörande för vilka bilder som väljs. Vem betraktaren/besökaren är och vilka bilder hon/han kan tänkas attraheras/skrämmas av är naturligtvis också avgörande för bildvalet. Fakta, prosa och poesi Ett sätt att kategorisera bilder är att dela in dem i följande tre grupper: Faktabilder registrerar vekligheten så som den ser ut. Bilderna används ofta inom utbildning, information och reklam. Även naturligtvis passande för webbsajter. Prosabilder har mer berättande stil och präglas ofta av fotografens personlighet, t ex vackra naturbilder för att illustrera en produkt (exempelvis Arlas bilder på kor). Poesibilder är ännu mer personligt präglade och av mer konstnärlig karaktär, ibland bara ett vackert mönster. Kan passa på webbsajtens startsida för att inspirera/locka besökaren att stanna kvar på sajten. Poesibilder kan även passa som bakgrundsbilder. 110 Brogårdsgymnasiet, Kristinehamn

111 Bildtyper På Internet används bilder i olika sammanhang, bl a som bakgrundsbilder. Oavsett om bilderna är tecknade eller fotograferade brukar de delas in i tre typer; huvudbild, bakgrundsbild och bilder i sekvens. Huvudbild är den dominerande och viktigaste bildtypen på en webbsida. Den kan framhävas med en ram eller med en skuggning. Ofta samspelar de med rubrik och annan text på sidan. Bakgrundsbild kompletterar innehållsmässigt texter och bilder på sidan. Bakgrundsbilden skall ge sajten ett sammanhållande karaktärsdrag, utan att för den skull dominera sidan. En bakgrundsbild kan även ge liv åt t ex enformig textinformation som statistik. Bilder i sekvens kan göras som ett bildspel på sidan för att exempelvis visa olika motiv från en turistort eller tillverkningsprocess. Bildspelet kan skapas med exempelvis javascript. Övning 5.7: Kolla bilderna i några olika sajter (använd länkarna i början på kapitlet). Kolla särskilt: Bildkomposition Bildkontrast Bildbehandling Bildkontext Prosa- och poesibilder Bakgrundsbilder Välj och skapa utifrån detta lämpliga bilder till din webbsajt. 111 Brogårdsgymnasiet, Kristinehamn

112 6. Lagstiftning för Internet Internet är ett kraftfullt medium som praktiskt taget alla har tillgång till och även kan publicera sig på. Därmed uppstår ofta frågor om vad som får publiceras på Internet i form av bild och text. En tidning har en ansvarig utvivare, medan Du är ansvarig för vad som publiceras på Din hemsida. Personuppgiftslagen (PUL) och Upphovrrättslagen reglerar vad som är tillåtet att publicera på Internet. Personuppgiftslagen Personuppgiftslagen (PUL) skall förhindra att den personliga integriteten kränks. I princip är det exempelvis förbjudet att publicera personuppgifter på Internet utan personernas medgivande (samtycke). Med personuppgifter menas sådana uppgifter som kan identifiera en person via t ex namn, bild eller adress. Hur PUL tillämpas i praktiken beskrivs i stycket Så gör du din hemsida laglig nedan. På Datainspektionens hemsida kan du läsa mer om PUL. Upphovsrättslagen Upphovsrättslagen reglerar vem som har uppovsrätten till vad som publiceras på bl a Internet, exempelvis är det i princip förbjudet att kopiera bilder på Internet och lägga in dem på en egen hemsida utan att först fråga den som har upphovsrätten till bilderna. Hur Upphovsrättslagen tillämpas i praktiken beskrivs i stycket Så gör du din hemsida laglig nedan. På Skoldatanätets hemsida kan du läsa mer om Upphovsrättslagen. Så gör du din hemsida laglig Följande FAQ-text om vad som är tillåtet att publicera på Internet är hämtad från tidningen Intenetworlds hemsida 1. Får jag kopiera en enkel hemsida? Att härma layouten på en enkel standardhemsida, med rubrik, ramar, text och bild är okej om du inte bara kopierar allt rakt av med rubriktext, färg, typsnitt och allt. Men det är knappast lagligt att kopiera en mer avancerad hemsida rakt av. 2. Får jag skriva av en text? Du har rätt att citera ur en offentliggjord text, men inte skriva av eller kopiera hela texter. Gränsen brukar gå vid någon eller några meningar, medan du i vetenskapliga sammanhang kan citera betydligt mer. Däremot måste du alltid uppge källan, det vill säga berätta var texten kommer ifrån. Citaträtten gäller både texter, musik och film. Att publicera en hel bild eller ett helt konstverk är inte tillåtet enligt citaträtten. 3. Får jag skriva om grannen på en vanlig hemsida? Du får skriva om en granne om det handlar om harmlösa uppgifter som inte kan upplevas som kränkande av den omskrivna. Du får även skriva om honom om det sker inom ramen för en samhällsdebatt. Men det är inte tillåtet att publicera kränkande uppgifter om en privatperson, exempelvis att skriva hatartiklar om grannen för att hans katter stör dig. Men handlar det om offentliga personer är det till och med tillåtet att kalla dem psykopater om det görs när du diskuterar deras offentliga gärning eller uppdrag. Du kan alltid skriva om någon om du fått ett samtycke från den omskrivna. Tidningar och mediesajter har oftast en ansvarig utgivare och då gäller inte längre personuppgiftslagen, utan då skyddas istället sidan av grundlagen. 4. Får jag lägga ut bilder från klassfesten? Fotografier räknas som personuppgifter och kräver därmed samtycke från alla personer på bilden för att publiceras på en privat hemsida, enligt personuppgiftslagen (PUL). Folk reagerar ofta starkare på 112 Brogårdsgymnasiet, Kristinehamn

113 att bilder publiceras än namn. Även om publiceringen sker inom ramen för en samhällsdebatt har du ändå inte rätt att publicera kränkande bilder av ren privat karaktär. Datainspektionen gillar inte hemsidor med exempelvis festbilder. 5. Får jag publicera bilder och fotografier på sajten? Du får inte publicera foton och bilder på din hemsida utan fotografens eller illustratörens tillstånd. Tips! Fotografera själv eller hämta gratisbilder för icke-kommersiellt bruk på 6. Får jag manipulera bilder? Du får inte manipulera bilder utan fotografens tillstånd. 7. Får jag länka till andra hemsidor? Ja, du får länka till statiska hemsidor, men inte till musik eller filmsnuttar. Juristerna är oense om du får länka så att hemsidan dyker upp inom dina egna ramar, och eftersom rättsläget är osäkert är det bäst att låta länken poppa upp i ett eget webbläsarfönster. 8. Vad är förbjudet att skriva om på hemsidan? Givetvis är det förbjudet att publicera barnpornografiskt material, och även att inneha sådana bilder. Det är också förbjudet att sprida bilder på sexuellt våld eller tvång eller annat grovt våld. Du har inte heller rätt att uttrycka dig nedsättande mot en folkgrupp på grund av ras, hudfärg, etniskt ursprung eller religion. Det är också förbjudet att uppmana till brott. Har du en gästbok på din sajt är du ansvarig för vad som skrivs i den, d v s du skall ta bort inlägg som kan upplevas som kränkande. 113 Brogårdsgymnasiet, Kristinehamn

114 7. Stilmallar med CSS Inledning Arbetar man med webbplatser som innehåller många dokument kan det vara praktiskt att lägga upp formatmallar/stilmallar (som i Word) för olika texttyper, t ex för brödtext, huvudrubriker, mellanrubriker, stycken med indrag o s v. Formatmallarna kan då läggas i ett eget dokument eller i början på HTML-dokument innanför <head>-märket. Cascading Style Sheets (CSS) är det vanligaste språket för att beskriva formatmallar. CSS ger dessutom formateringsmöjligheter som HTML saknar, bl a att lägga bakgrundsfärg och bakgrundsbild till stycken och sidor, att rama in stycken och att ge texter och bilder (skikt) godtycklig placering på hemsidan. Dessutom ger CSS i kombination med JavaScript stora dynamiska möjligheter. CSS är omfattande och denna kurs berör det mest grundläggande. Kolla på om du vill veta mer. Vi introducerar begreppen i CSS genom att formatera en bakgrundsbild. Bakgrundsbild I HTML vet vi att bakgrundsbilder upprepas om de är mindre än webbläsarfönstret: <body background="aa.jpg"> Med följande CSS-formatering upphävs upprepningen: <body style="background-image: url(aa.jpg); background-repeat: no-repeat"> Regeluppsättningen efter style-attributet är den CSS-formatering som talar om för webbläsaren hur body-märket ska tolkas. Deklarationen av regeluppsättningen kan även göras separat inom head-märket, vilket ökar läsbarheten av koden: <html> <head> <title>ny sida 1</title> <style type="text/css"> body /*body kallas selektor eller väljare*/ background-image: url(aa.jpg); background-repeat: no-repeat; </style> </head> <body> </body> </html> Följand deklaration upprepar bakgrundsbilden i y-led: body background-image: url(aa.jpg); background-repeat: repeat-y; Medan följande deklaration upprepar den i x-led: background-repeat: repeat-x; 114 Brogårdsgymnasiet, Kristinehamn

115 Med följande deklaration läggs bakgrundsbilden med övre vänstra hörnet i punkten x=100 och y=50. Dessutom blir bakgrundsfärgen gul: body background-image: url(aa.jpg); background-repeat: no-repeat; background-position: ; background-color: yellow; Följande deklaration upprepar bilden i y-led 100 punkter från vänstra kanten: body background-image: url(aa.jpg); background-repeat: repeat-y; background-position: 100; background-color: yellow; Med deklarationen background-position: 100%; hamnar bakgrundsbilden till höger i webbläsaren. Hittills har vi tillämpat egenskaperna background-image, background-repeat, background-position och background-color på väljaren <body>. Egenskaperna kan dock även tillämpas på andra väljare, t ex <div> och <p> som vi nu skall göra. Övning 7.1: Formatera en HTML-sidas så att bakgrundsfärgen är röd och bakgrundsbilden ligger: a) Överst till vänster. b) Överst till höger. c) 20 pixlar ner på höger sida. d) 20 ner och 50 pixlar in på sidan. e) Skapa en övertonad bild i Photoshop med storleken 150 x 20 pixlar och spara den som overtonad.jpg. Lägg sedan in bilden som en bakgrundsbild till vänster på HTML-sidan med upprepning i y-led, samt lägg in texten (<h2>) enligt urklippet till höger. 115 Brogårdsgymnasiet, Kristinehamn

116 Sidlayout med flytande div-märken Våra hemsidor har hittills delats in med tabeller <table> eller ramar <frameset>, vilket ofta fungerar bra. Ett ytterliggare och numera vanligare sätt att dela in sidor är i lager med flytande <div>-taggar, vilket följande sida är uppbyggd med. Varje lager baseras på en <div>-tag och är inramat för läget på sidan skall framgå bättre. Nedan visas hur <div>-taggarna är placerade i HTML-koden. Däremot framgår inte hur <div>-taggarna är formaterade med selektorer via attributet id. CSS-koden (stilmallen) ligger istället i formatfilen mall.css som är länkad till HTML-dokumentet. På så sätt blir HTML-filen överskådligare att läsa. Innehåller dessutom webbplatsen många sidor räcker det med att ändra i filen mall.css för att ändringen skall få genomslag på alla sidorna, vilket är den främsta styrkan med CSS. Formatfilen mall.css ligger direkt efter sidan kod nedan, med koden för hela sidan, inklusive stilmallarna, finns i bilagan sist i detta dokument. Kopiera denna, klistra in i förslagsvis Notepad++ och öppna i en webbläsare. Jämför hur sidan öppnas i olika webbläsare. I urklippet ovan är sidan öppnad i Firefox, vilket skiljer något från om sidan öppnas i Explorer, bl.a. textens position i lagren och lagrens bredd. I Firefox beräknas lagrens bred i urklippet ovan på följande sätt: 1) Det yttre lagret har bredden 600 px. 2) Det vänstra menylagret (Meny) har bredden 115 px. Därtill kommer paddingen 5 px till vänster, samt kantlinjen 1+1=2 px. Lagrets totals bredd är alltså 122 px. 3) Mittenlagret (Lite om HTML) har bredden 364 px, 5+5=10 px padding, samt 1+1=2 px kantlinje. Totalbredden är alltså 376 px. 4) Det högra lagret (som innehåller bilden och Nyheter) har bredden 100 px, samt 1+1=2 px kantlinge. Titalbredden är alltså 102 pixlar. 5) De tre lagrens sammanlagda bredd blir =600 px, d.v.s. samma som det yttre lagrets bredd. I IE hamnar padding och linjebredder innanför div-bredden, d.v.s. texten blir smalare. I detta exempel har lagrens bredder valts så att de skall passa exakt i det yttre lagret för att illustrera hur padding och kantlinjer påverkar lagrets bredd. I praktiken kan dock lagrens göras något smalare så att marginalen blir större mellan lagren. Nu är det dags att fördjupa sig i HTML- och CSS-koden för sidan i urklippet ovan: 116 Brogårdsgymnasiet, Kristinehamn

117 <html> <head> <title>ny sida 1</title> <link rel="stylesheet" href="mall.css" type="text/css"> /*CSS-formateringarna länkade från filen mall.css </head> <body> /*Grå bakgrundsfärg med en bild längst upp till höger*/ <div id="yttre"> /*Hela den vita bakgrunden med svart kantlinje*/ <div id="rubrikdiv"> /*Övre rubrikrutan med grå bakgrund och röd linje*/ <h1> Anders hemsida </h1> </div> <div id="meny_vanster"> /*Menyn flyter till vänster och har grön kantlinje*/ <h2>meny</h2> <ul> <li><a href="1">länk1</a></li> <li><a href="2">länk2</a></li> <li><a href="3">länk3</a></li> </ul> </div> <div id="hoger"> /*Lagret flyter till höger med gul kantlinje*/ <div id="hogerbild"> /*Bilden ligger i ett eget block med röd kantlinje*/ <img src="aa.jpg" width="90" height="90" border="1"> </div> <div id="hogertext"> /*Texten ligger i ett eget lager med grön kantlinje*/ <h4>nyheter</h4> Idag har det snöat omkring 30 mm, d.v.s. 3 cm snö. Dessutom är det -11 grader. </div> </div> <div id="innehall"> /*Huvudtexten ligger i ett lager med blå kantlinje*/ <h2> Lite om HTML </h2> Det kanske enklaste sättet att göra hemsidor (webbsidor) för WWW (World Wide Web) är att spara ett Word-dokument som ett HTML-dokument. Det är ett snabbt sätt att göra hemsidor och duger gott för enklare tillämpningar. Vill man emellertid göra hemsidor med lite mer avancerad layout, t ex lägga en bild till höger om texten, lägga in tabeller och ramar (frames), bör man dock lära sig koden (språket) som bygger upp sidorna HTML (HyperText Markup Language). </div> <div id="nederst"> </div> <div id="undermeny"> <ul> </div> /*Lagret ligger över hela sidan med gul kantlinje under lagren ovan. /*Clear raderar den flytamde lagerordningen*/ <h6>sidan gjord av Anders </h6> </ul> /*I den undre menyn ligger det undre länkfältet med hovrande länkar*/ <li><a href="1">länkkkkkkk1</a></li> <li><a href="2">l2</a></li> <li><a href="3">länk3</a></li> </div> </body> </html> Nedan följer innehållet i formatfilen mall.css, som visar hur ID-selektorerna är definierade: body text-align: center; background-color: grey; background-image: url(aa.jpg); background-repeat: no-repeat; background-position: 100% 0; #yttre width: 600px; height: 520px; margin-right: auto; margin-left: auto; border: 1px solid black; background-color: white; 117 Brogårdsgymnasiet, Kristinehamn

118 #rubrikdiv #innehall width: 598px; height: 50px; border: 1px solid red; background: #e1e1e1; width: 364px; border: 1px solid blue; float: left; padding: 5px; text-align: left; #meny_vanster width: 115px; border: 1px solid green; float: left; padding-left: 5px; text-align: left; #nederst width: 598px; height: 50px; border: 1px solid yellow; clear: both; #hoger width: 100px; border: 1px solid yellow; float: right; #hogerbild width: 100px; height: 100px; border: 1px solid red; #hogertext width: 80px; border: 1px solid green; padding: 5px; margin-right: auto; margin-left: auto; text-align: left; #undermeny width: 600px; border: 1px solid blue; float: left; #undermeny ul #undermeny li list-style-type: none; margin-left: 0px; padding-left: 0px; width: 75%; background: red; float: left; display: inline; /*Påverkar märket ul i selektorn undermeny*/ /*Tar bort listans punkter*/ /*Andel av undermeny. Utan width visas bara länkar. /*ul görs flytande, 75% färgas /*Påverkar märket li i selektorn undermeny*/ /*Lägger listelementen bredvid varandra*/ 118 Brogårdsgymnasiet, Kristinehamn

119 #undermeny a #undermeny a:hover display: block; float: left; padding-left: 30px; padding-right: 30px; padding-top: 2px; padding-bottom: 2px; text-decoration: none; background: red; color: black; border-right: 1px solid black; /*Påverkar märket a i selektorn undermeny*/ /*Textlänkens aktiva område ökar till att även omfatta paddingen*/ /*Lägger listobjekten på samma rad*/ /*Tar bort linje under länktext*/ /*Pseudoklasen hover skapar en dynamisk effekt när markören ligger över länken i*/ /*selektorn undermeny*/ background: black; /*Bakgrunden bakom länktexten blir svart och texten röd*/ color: red; CSS lika i alla webbläsare Med följande kod i början av html-dokumentet tolkas CSS-koden ganska lika i olika webbläsare: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> Sidan bör dock kollas i olika webbläsare. Mer om DOCTYPE på s Brogårdsgymnasiet, Kristinehamn

120 Övning 7.2: Här skall en text formateras med fyra flytande div-märken (boxar), enligt urklippet nedan. Lös uppgiften enligt följande punkter: a) Kopiera den inledande texten på sidan 6 i detta kursdokument, enligt urklippet och klistra in den i ett HTML-dokument i Notepad++. Spara som ovn7_2.html. b) Formatera body-märket så att bakgrunden blir gul. c) Formatera en ID-selektor med namnet yttre för ett div-märke som centrerar texten på sidan och ger den bredden 500px. d) Formatera en ID-selektor med namnet box1 för ett centrerat div-märke med bredden 100px och grön bakgrundsfärg. e) Formatera en ID-selektor med namnet box2 för ett flytande div-märke till vänster på sidan med bredden 100px och 10 px padding til höger och vänster. f) Formatera en ID-selektor med namnet box3 för ett flytande div-märke till höger på sidan med bredden 100px och centrerad text. g) Formatera en ID-selektor med namnet box4 för ett div-märke över hela sidan och som ligger direkt under box3 (löses med egenskapen clear: right;). Med egenskapen clear: left; lägger sig boxen direkt under box2, vilket ju inte passar här. Med egenskapen clear: both; lägger sig boxen under den box som ligger längst ner. Observera att samtliga boxar är inramade, samt att ni själva får skriva in texten i de fyra boxarna. 120 Brogårdsgymnasiet, Kristinehamn

121 Övning 7.3: Gör den horisontella menyn till höger, som baseras på ett listlementet <ul>. Det har följande egenskaper: a) Bakgrundsfärgen är gul och textfärgen röd. b) Paddingen över och under är 20 px och till höger och vänster 30 px. c) En svart linje över, under (border-bottom) och till höger om varje länkfält. d) Hovereffekten är att texten blir gul och bakgrunden röd. e) Länkarna till tidningarna NWT, VF och DN öppnas i ett nytt fönster. Spara som ovn7_3.html. Övning 7.4: Gör den vertikala menyn till höger. Använd och ändra koden i föregående uppgift. Menyn har följande egenskaper: a) Menyn är vertikal (ta bort alla float: left;). b) Bakgrundsfärgen är gul och textfärgen röd. c) Menyn har bredden 150 px (width: 150px; i väljaren för ul). d) Paddingen över, under och till vänster är 5 px. e) En svart linje under (border-bottom) varje länkfält. f) En svart linje över det översta länkfältet. Ledning: Formatera i det översta <a>-märket med CSS-kod för kantlinje (se det inledande exemplet med bakgrundsbilder). g) Hovereffekten är att texten blir gul och bakgrunden röd. Spara som ovn7_4.html. En lösning till uppgiften finns i bilagan. Övning 7.5: Klipp ut och klistra in CSS-formateringarna från föregående uppgift i en egen fil med namnet meny.css, som sedan länkas in i filen ovn7_4.html. Koden för länkningen finns i det längre exemplet ovan. Mer om menyer Att göra menyer är ju lite komplicerat. På länken finns HTML- och CSSkod till många olika typer av menyer. Kopiera och testa! 121 Brogårdsgymnasiet, Kristinehamn

122 Egenskaper för text Egenskaper i CSS kan jämföras med attribut i HTML, d v s det är egenskaperna som anger hur texten skall formateras. Denna formatering görs oftast i styckemärket (taggen) <p>. Följande formatmall för ett stycke <p> innehåller två egenskaper för texten; textstorlek och textfärg: p font-size: 10pt; color: red /*Så här görs kommentarer i stilmallar */ Här kallas p för väljare, font-size respektive color för egenskap och 10 pt respektive red för egenskapernas värden. Hela uttrycket innanför klamrarna kallas även regel. Vi går först igenom egenskaperna (syntaxen) för att formatera stycken och sidor. Stycke Nedan listas några användbara egenskaper: font-size: Teckenstorlek, anges med enheten pt. font-family: Teckensnittet, t ex arial, times, garmond. font-weight: Textens tjocklek; normal, bold, lighter font-style: Textens stil; italic (kursiv), normal color: Textfärg background-color: Färgen bakom styckets text, t ex red, green. background-image: Bakgrundsbild till stycke; url(lok.jpg) letter-spacing: Avstånd mellan textens tecken. border-style: Skapar en ram runt styckets text; dotted, solid. text-indent: Gör ett indrag på styckets första rad i punkter. text-align: Textens justering; left, right, center, justify (raka marginaler) margin: Alla marginaler (höger, vänster, över, under) anges i cm. margin-left: Vänstermarginalen margin-right: Högermarginalen margin-bottom: Avstånd i punkter eller % till följande stycke (även negativt) margin-top: Avstånd i punkter eller % till föregående stycke (även negativt) text-transform: Byter skiftläge; uppercase (stora bokstäver), lowercase (små bokstäver), capitalize (stor begynnelsebokstav i varje ord), none (normalt). 122 Brogårdsgymnasiet, Kristinehamn

123 Sida Egenskaper som skall gälla för hela sidan anges med väljaren body, exempelvis bakgrundsfärg och bakgrundsbild. Här följer några exempel: Grön bakgrundsfärg: body background-color: green Bilden leo.jpg är bakgrundsbild: body background-image: url('leo.jpg') Bakgrundsbilden är fixerad på sidan: body background-image: url('leo.jpg'); background-attachment: fixed Observera att semikolon avgränsar om flera egenskaper används. Format CSS kan användas för att formatera texten på tre nivåer: Enskilt stycke i HTML-dokumentet. Enskilt HTML-dokument. Flera HTML-dokument via separat malldokument. Stycke Med attributet style i styckemärket <p> kan texten formateras enligt nedanstående exempel. Det fetstilta visar CSS-formateringen. <html> <head> <title> Min hemsida 1</title> </head> <body> <p style="font-size: 20pt; background-color: red"> ffgfgf fdgfgfg fgfgfgfef sdsefef fdfdffdf ffff hggfgf fggsfg uiui ukkuk ukk jgjhgjy jhjhj hjhj jh ffgfgf fdgfgfg fgfgfgfef sdsefef fdfdffdf ffff hggfgf fggsfg uiui ukkuk ukk jgjhgjy jhjhj hjhj jh </p> <p style= font-weight: bold; margin-right: 5cm; margin-left: 15cm; background-image: url(finnmark2.jpg)"> ffgfgf fdgfgfg fgfgfgfef sdsefef fdfdffdf ffff hggfgf fggsfg uiui ukkuk ukk jgjhgjy jhjhj hjhj jh ffgfgf fdgfgfg fgfgfgfef sdsefef fdfdffdf ffff hggfgf fggsfg uiui ukkuk ukk jgjhgjy jhjhj hjhj jh </p> <p style="border-style: solid; font-style: italic; margin-righ: 15cm; margin-left: 2cm"> ffgfgf fdgfgfg fgfgfgfef sdsefef fdfdffdf ffff hggfgf fggsfg uiui ukkuk ukk jgjhgjy jhjhj hjhj jh ffgfgf fdgfgfg fgfgfgfef sdsefef fdfdffdf ffff hggfgf fggsfg uiui ukkuk ukk jgjhgjy jhjhj hjhj jh </p> </body> </html> 123 Brogårdsgymnasiet, Kristinehamn

124 <html> <head> <title> Min hemsida 1</title> <style type="text/css"> /*Attributet type behöver inte anges*/.kursiv font-style: italic;.ram border-style: solid; font-style: italic; margin-right: 15cm </style> </head> <body background="finnmark.jpg" bgproperties=fixed> <p class="kursiv"> ffgfgf fdgfgfg fgfgfgfef sdsefef fdfdffdf ffff hggfgf fggsfg uiui ukkuk ukk jgjhgjy jhjhj hjhj jh ffgfgf fdgfgfg fgfgfgfef sdsefef fdfdffdf ffff </p> <p class="ram"> ffgfgf fdgfgfg fgfgfgfef sdsefef fdfdffdf ffff hggfgf fggsfg uiui ukkuk ukk jgjhgjy jhjhj hjhj jh ffgfgf fdgfgfg fgfgfgfef sdsefef fdfdffdf ffff </p> </body> </html> Enskilt dokument Skall samma formatering användas för flera textstycken är det enklare att göra deklarationen inom <head>-märket i början av HTMLdokumentet. För att skilja olika styckeformateringar åt kan de indelas i klasser, som ges lämpliga namn (kursiv och ram i exemplet). Observera punkten framför klassnamnet. Formateringen görs med märket <style> och klasstillhörigheten med attributet class i märket <p>. Det fetstilta i koden ovan visar CSSformateringen. Attributet type="text/css" i style-märket behöver inte anges eftersom webbläsaren utgår ifrån att det är stilmallar av typen CSS som används. Flera dokument Skall samma format användas för flera HTML-dokument är det praktiskt att göra formatdeklarationerna i ett särskilt malldokument, vars namn har ändelsen.css. I exemplet nedan ligger klassdeklarationen i dokumentet malldok.css, som inte innehåller någon annan text är formatdeklarationerna:.kursiv font-weight: bold; margin-right: 5cm; margin-left: 15cm.ram border-style: solid; font-style: italic; margin-right: 15cm; margin-left: 2cm HTML-dokumenet till höger anropar dokumentet malldok.css ovan där formatdeklarationerna finns via märket <link>, enligt exemplet till höger. Observera att textfärgen i andra stycket har formateras till röd. Span Med html-taggen <span> kan man använda en klass för att formatera en del av en text: Nu formaterar jag <span class= kursiv > Anders Andersson </span> med klassen kursiv från CSS-ramen ovan. <html> <head> <title> Min hemsida 1</title> <link rel="stylesheet" href="malldok.css" type="text/css"> </head> <body background="finnmark.jpg" bgproperties=fixed> <p class= kursivt > ffgfgf fdgfgfg fgfgfgfef sdsefef fdfdffdf ffff hggfgf fggsfg uiui ukkuk ukk jgjhgjy jhjhj hjhj jh ffgfgf fdgfgfg fgfgfgfef sdsefef fdfdffdf ffff hggfgf fggsfg uiui ukkuk ukk jgjhgjy jhjhj hjhj jh </p> <p class= ram ; style="color: red"> ffgfgf fdgfgfg fgfgfgfef sdsefef fdfdffdf ffff hggfgf fggsfg uiui ukkuk ukk jgjhgjy jhjhj hjhj jh ffgfgf fdgfgfg fgfgfgfef sdsefef fdfdffdf ffff hggfgf fggsfg uiui ukkuk ukk jgjhgjy jhjhj hjhj jh </p> </body> </html> 124 Brogårdsgymnasiet, Kristinehamn

125 Omformatera märken Skall man skapa formatmallar för olika rubriknivåer är det enklaste att utgå från de existerande HTML-märkena H1, H2, H3 o s v och sedan ändra deras egenskaper. Följande deklarationer (väljare) omformaterar de två rubriknivåerna H1 och H2, styckemärket p för den löpande texten, samt formaterar bakgrundsbilden: H1 font-size: 34pt; font-family:arial; font-weight: bold H2 font-size: 21pt; font-family:arial; font-weight: bold; font-style: italic pfont-size: 12pt;font-family:georgia, arial, sans-serif /*Finns ej georgia väljs arial eller en sans-serif*/.rod_kursiv font-style: italic; color:red /*Klassnamnet rod_kursiv gör texten kursiv-röd*/ body background-image:url('leo.jpg');background-attachment:fixed Med dessa deklarationer i ett eget CSS-dokument styr de webbplatsens samtliga sidor. Att omformatera som ovan är särskilt praktiskt om sidorna görs i FrontPage, eftersom programmets formatmallar Rubrik1, Rubrik2, Rubrik3, samt Normal för brödtexten bygger på HTML-märkena H1, H2, H3 respektive styckemärket P. Länkas CSS-dokumentet till sidorna som skapas i FrontPage (via menyvalet Format/Formatmallslänkar ) hänger alltså omformateringarna med när formatmallarna väljs i FrontPage. Väljaren p.rod_kursiv visar klassnamnet rod_kursiv (som man hittar på själv!) som en formatmall i Frontpages formatmallslista, enligt urklippet till höger, vilken ger samma stil som väljaren p, men dessutom röd och kursiv text. Text och bild i js-dokument Vi vet att länken till en bakgrundsbild kan läggas i en extern css-fil. För webbplatser med många sidor vore det praktiskt att även kunna lägga textavsnitt och bilder som förekommer på många sidor i en extern fil. Ett css-dokument kan dock endast lagra formateringar. Däremot kan en JavaScript-funktion ladda både text och bild till ett <p>- respektive <img>-märke. Genom att lagra funktionen i ett separat JavaScript-dokument med filändelsen.js kan funktionen anropas från flera webbsidor. Ett js-dokument lagrar endast funktioner, inte <script>-märken eller HTML-kod. Följande JavaScript-funktion innehåller en text och en bildlänk: function test() //Funktionen heter test window.text1.innertext="texten kommer från funktionen"; //Texten är kopplad till id=text1 bilden.src="grimeton1.jpg"; //Bilden är kopplad till <img>-komponenten med namnet bilden Funktionen lagras i textdokumentet skript.js, som länkas till HTML-dokumentet, enligt följande exempel: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <title>ny sida 2</title> <script type="text/javascript" src="skript.js"></script> <!--Funktionen lagras i skriptfilen skript.css--> <link rel="stylesheet" href="stilar.css" type="text/css"> <!--Stilmallarna lagras i filen stilar.css--> </head> <body onload="test();"> <!--Funktionen test anropas när sidan laddas--> <img name="bilden" border="1" width="275" height="207"> <!--Bilden hamnar här--> <p class=lenk id=text1></p> <!--Texten hamnar mellan p-märkena--> </body> </html> Funktionen anropas via händelsen onload när sidan laddas. Innehållet i formatfilen stilar.css visas här: H1 font-size: 34pt; font-family:arial; font-weight: bold; margin-bottom: -20 p font-size: 12pt; font-family:georgia.lenk font-style=italic /*Klassnamnet lenk gör texten kursiv*/ body background-image:url('grimeton.jpg');background-attachment:fixed 125 Brogårdsgymnasiet, Kristinehamn

126 Doctype De fyra inledande raderna i föregående exempel anger enligt vilken standard webbläsaren skall tolka html- och css-koden. Utan dessa rader kan sidan öppnas felaktigt. Se vidare s. 60 om webbstandard. Övning 7.6: Uppgift 7.2 skall nu kompletteras med rubriker och textformateringer i CSS. Urklippet till höger är från webbläsaren Explorer. Lös uppgiften enligt följande punkter: a) Öppna filen ovn7_2.html i Notepad++. b) Lägg in den inledande DOCTYPE-koden. c) Gör så att all text får storleken 10 pt med typsnittet Georgia genom att formatera div-märket med: div font-size: 10pt; font-family:georgia d) Lägg in huvudrubriken Lite om Internet med märket <h1>, som formateras med typsnittet Arial, centrerat och storleken 24pt med formateringen: h1 font-size: 24pt; font-family: Arial; text-align: center; e) Definiera klassen red som ger röd text med CSS-formatering:.red color: red; f) Använd klassen red i div-märket för box1 för att göra texten röd. g) Lägg in mellanrubriken Vänster i box2 med <h2>, som formateras med storleken 14pt, vänsterjusterat, typsnittet Arial, samt inget avstånd över och under med formateringen: h2 font-size: 14pt; font-family: Arial; text-align: left; margin-bottom: 0px; margin-top: 0px; h) Lägg in mellanrubriken Att göra hemsidor med <h2>. i) Lägg in mellanrubriken höger i box 3 med märket <h2>, som formateras med klassen kursivgron:.kursivgron color: green; font-style: italic; j) Lägg in mellanrubriken Nedre boxen med <h2>. k) Formatera texten i det nedersta stycket med ett <p>-märke med klassen kursivgron. l) Lägg in en hover-effekt på box2 så texten blir röd och bakgrunden svart när markören ligger över den, enligt urklipprt till höger: #meny_vanster:hover color:red; background: black; m) All CSS-formatering skall läggas i formatfilen stilar.css och länkas in i filen ovn7_2.html. 126 Brogårdsgymnasiet, Kristinehamn

127 Inlämningsuppgift - skoltidning Vi har nu gått igenom de mest centrala delarna i CSS. Använd nu dina kunskaper och skapa en webbplats för en skoltidning. Webbplatsen skall ha följande innehåll och struktur: Alla sidors layout ska baseras på CSS-formaterade div-taggar. Sidorna ska ha samma fixerad bredd, förslagsvis 1200 px. Alla sidor ska ha samma hovrande meny. Använd förslagsvis Webbplatsens text skall vara enhetlig, d v s rubriktexter och löpande text skall vara lika på alla sidor. Det skall finnas tre rubriknivåer med egna formateringar: H1 (Arial, 24 p, fet) överst på varje webbsida, H2 (Arial, 18 p, kursiv) för underrubriker och H3 (Arial, 14 p, fet) för mellanrubriker. Löpande text (<p>) skall ha typsnittet Georgia och storleken 13 p. Tänk på att avståndet mellan en rubrik och följande stycke bör vara mindre än mellan rubriken och föregående stycke. Ledning: Prova med egenskapen margin-bottom: -20 för rubrikformateringen. Hitta på ett namn för tidningen. Menyn ska innehålla länkar till följande sju sidor: o Startsida (index.html), kan ju ha korta notiser (ingresser) från de senaste inläggen på övriga sex sidor nedan, samt länkar dit. o Debatt o Rektorn ordar o Ordföranden ordar o Gäst ordar o Artiklar o Nyheter Lägg in lite passande text på varje sida och gärna en bild. Alla länksidor ska ha samma utseende och layout. Det enda som skiljer sidorna åt är innehållet. Metakoder (se sidan 60 ovan) för startsidan så att den hittas lättare av internets sökrobotar. Glöm inte Doctype överst på alla sidor. All CSS-kod ska placeras i filen stilmall.css och länkas till HTML-sidorna. Ett skript för senaste uppdatering skall finnas under adressraden allra längst ner på varje sida. *Har du tid kan du även göra en logga för tidningen som visas på alla sidorna. När allt är klart överförs sidan till din area på skolans webbserver och länkas till din fil projekt.html, som vi gjorde i första uppgiften (se sidan 29 ovan). *Validera mallsidan med W3C:s validator, som finns på under Webbutveckling. Se även sidan 61 ovan. Du har fem lektioner (c:a 5 timmar) på dig att lösa uppgiften. Spara webbplatsen i mappen webbdesign/skoltidning/ på din dator. Arbetet med webbplatsen förenklas om du först gör en mallsida (.html), som alla sju sidorna skall baseras på. När du sedan skapar en ny sida sparar du bara en ny version av mallsidan med Spara som. Förslagsvis är startsidan din mallsida. Använd gärna verktyget för att hitta passande färgkombinationer. För att få inspiration till din layout kan du kolla på Sveriges 100 bästa sajter 2013: Kolla vilken webbläsare Utformas CSS för att passa en viss webbläsare, måste man kolla vilken webbläsare som används. Detta görs med följande kod inom <head>-märket: <! [if IE]> <![endif] > <! [if IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="ie.css" /> <link rel="stylesheet" type="text/css" media="screen" href="ie7.css" /> 127 Brogårdsgymnasiet, Kristinehamn

128 <![endif] > 128 Brogårdsgymnasiet, Kristinehamn

129 Textplacering Som nämndes i inledningen till kapitlet ger CSS möjlighet att placera objekt som text och bilder på ett betydligt mer godtyckligt sätt än med traditionella HTML-taggar. Genom att knyta objekten till skikt kan de placeras med pixelnoggrannhet på sidan. Objekten kan antingen placeras relativt andra objekt eller absolut utifrån sidans koordinater. Relativ placering med <span> Med märket span anges ett format inuti ett annat format. Följande exempel visar hur textstorlek och bakgrundsfärg för ett ord i en mening kan anges med CSS i ett span-märke: <html> <head> <title>texten</title> <body> Detta är <span style="font-size:40pt;background-color:red">texten</span> som är röd. </body> </html> Följande exempel visar hur formateringen för upphöjt och nedsänkt tecken görs med span och klasserna upp och ned i ett <p>-märke: <html> <head> <title>ny sida 1</title> </head> <style type="text/css"> span.upp position:relative; top: -0.3em span.ned position:relative; top: 0.3em </style> <body> <p> Area mäts i enheten m<span class="upp">2</span>, medan vatten har kemiska beteckningen H<span class="ned">2</span>o. </p> </body> </html> Enheten 1 em motsvarar det storleken på det aktuella teckensnittet. I exemplet ovan flyttas alltså texten upp (-0.3 em) respektive ned 0.3 textstorlekar. Fördelen med den relativa placeringen är alltså att förflyttningen görs förhållandevis lika mycket oavsett textstorlek. Skikt och absolut placering med <div> Vid traditionell webbdesign har man små möjlighter att påverka det exakta läget av text och bild på hemsidan. De placeras ju i den ordning de läggs in i HTMLdokumentet. Med CSS och skikt kan dock placeringen göras fullständigt godtyckligt. Följande exempel visar hur ett textskikt och en bild placeras på sidan. Texten skrivs ut med början i koordinaten x=200 och y=100 med radlängden 150, samt omgärdard av en röd ram. Bildens övre vänstra hörn har koordinaten (50, 50). Måtten anges i enheten pixel (px) och origo är i sidans övre vänstra hörn. Väljarna texten och bilden innehåller skiktens egenskaper. Hemsidans kod visas på nästa sida: 129 Brogårdsgymnasiet, Kristinehamn

130 <html> <head> <title>testar</title> </head> <style type="text/css"> #texten position:absolute; left:200px; top=100px; width:150px; border:solid red 2px; z-index:2 #bilden position:absolute; left:50px; top=50px; z-index:1 </style> <body> <h1>detta är löpande text</h1> <h1>observera att bakgrundstexten.</h1> <div id="texten">här är texten som skrivs ut 200 pixlar till höger (x) och 100 ner (y).</div> <div id="bilden"><img src="grimeton1.jpg" width="200"></div> </body> </html> Observera att skikten placeras över bakgrundstexten, samt att textskiktet placerar över bildskiktet. Skiktet med högst z-index placeras överst. Innehåller skiktet ett ord eller en bild som inte kan radbrytas anpassas skiktbredd efter detta. Skiktes höjd kan anges med egenskapen height. Korstecknet # används för att ange att väljaren (texten respektive bilden) skall kopplas till ett element (div i detta fallet, men det fungerar även med p, td, h1,a o.s.v.) med attributet id. Skiktet kan döljas genom att ge egenskapen visibility värdet hidden (värdet visible är förvalt): #bilden position:absolute; left:50px; top=50px; z-index:1; visibility:hidden Att kunna dölja skikt är användbart i t ex utfällbara menyer och textbyte i element (se exempel nedan). CSS-koden kan även placeras som ett attribut i ett märke. Följande exempel visar hur en bild kan placeras på sidan: <img style="left: 100px; POSITION: absolute; TOP: 200px; " src="karta.jpg" width="250" height="150"> Motsvarande kan göras för <p>- och <div>-märken. Övning 7.1: Gör en hemsida som innehåller meningen Det är kul med CSS med textstorleken 18 pt. Ordet kul skall dessutom ramas in (se urklipp). All formatering (textstorlek och ram) skall göras med CSS. Ledning: Använd <p> och <span>. Övning 7.2: Gör en hemsida med en text som har röd skugga, enligt urklippet. Ledning: Förskjut två skikt med samma text 1-2 pixlar. 130 Brogårdsgymnasiet, Kristinehamn

131 Dynamiska stilmallar I JavaScript är objektet window överordnat objektet document, som avser den aktuella hemsidan. Objektet document innehålleri sin tur vektorn all, som innehåller alla märken (taggar) som finns i dokumentet. Följande satser skriver ut webbsidans alla märken: <script language="javascript"> for (i=0;i<document.all.length;i++) document.write(document.all[i].tagname+" "); </script> Observera dock att vektorn all inte innehåller information om stilmallar som deklarerats före märket body. Med hjälp av objektet style går det sedan att komma åt märkenas (t ex div-märkets) egenskaper. Följande rad kommer åt textstorleken i ett div-märke kopplat via attributet id till väljaren texten: document.all.texten.style.fontsize Objektegenskaperna (fontsize) är samma som stilmallsegenskaperna (font-size), men utan bindestreck och med storbokstav i andra ordhalvan. Genom att kombinera JavaScript och stilmallar (CSS) som i exemplen nedan erhålls dynamiska stilmallar. Textstorlek utskriven i alertruta Följande exempel skriver ut textstorleken i ett div-märke: <html> <head> <title>texten</title> </head> <body> <div id="texten" style="font-size:40pt">här är texten.</div> <script language="javascript"> alert("textstorlek= "+document.all.texten.style.fontsize); </script> </body> </html> Textstorlek inmatad i prompruta I följande exempel får texten den storlek som användaren matar in i en promtruta. Observera att funktionen stor() som läser in textstorleken anropas när sidan laddas via body-märket: <html> <head> <title>texten</title> </head> <script language="javascript"> function stor() document.all.texten.style.fontsize=prompt("ange textstorleken!","mata in här"); </script> <body onload="stor()"> <div id="texten">här är texten.</div> </body> </html> 131 Brogårdsgymnasiet, Kristinehamn