6 LÄGG TILL INTERAKTIVITET

6 LÄGG TILL INTERAKTIVITET I den här lektionen, lägger du till Webb 2.0-funktionalitet till dina webbsidor genom att göra följande: Använda Dreamweaver-beteenden Tillämpa ett beteende med hjälp av Spry-effekter Arbeta med XML-data och datakällor Infoga en Spry-tabell och en Spry-dragspelswidget Den här lektionen tar ungefär 60 minuter att fullborda.. Innan du börjar måste du kopiera över filerna från mappen lessons > lesson06 och från mappen images från cd-skivan Adobe Dreamweaver CS4 Allt i en bok till din hårddisk. 126

Dreamweaver skapar sofistikerade interaktiva effekter med beteenden, datauppsättningar och dragspelspaneler med hjälp av Spry Framework för Ajax. 127

Lär dig mer om Dreamweaver-beteenden Ett Dreamweaver-beteende är JavaScript-kod som utför en händelse, som att öppna ett webbläsarfönster, när det triggas igång av en händelse, som ett musklick. Tillämpandet av ett beteende är en trestegsprocess: 1 Markera sidelementet som du vill ska trigga igång beteendet. 2 Välj beteendet som ska tillämpas. 3 Ange inställningarna eller parametrarna för beteendet. Normalt involverar igångtriggandet av elementet en länk, som kan kopplas till en bestämd text eller till en bild. Ibland kräver inte beteendet att en ny sida laddas och använder sig då av en dummielänk som representeras av ett fyrkantstecken (#). I Lektion 5 använde du dummielänkar till att trigga igång poppuppobjekt i undermenyerna. Spryeffekt-beteendet du kommer att använda i den här lektionen kräver inte en länk för att fungera, men håll länkarna i åtanke när du arbetar med andra beteenden. Dreamweaver kommer i de flesta fall att lägga till den kod som krävs, däremot måste du ibland skapa en dummielänk att användas som den igångtriggare som krävs för att aktivera en del Dreamweaver-beteenden. Dreamweaver innehåller mer än 30 beteenden, som alla nås i Beteendepanelen. Välj Fönster > Beteenden för att visa Beteendepanelen. Sedan klickar du på plus-tecknet (+) i beteendepanelen för att visa de beteenden som finns tillgängliga för en särskild markering i Dokumentfönstret. En del av de funktioner som finns tillgängliga för dig med hjälp av Dreamweavers beteenden innehåller följande Öppna ett webbläsarfönster Växla en bildkälla och växla tillbaka den för en överrullningseffekt Tona in och tona ut en bild eller ett sidområde Förstora eller förminska en bild eller ett grafiskt element Visa ett poppuppvarningsmeddelande Ändra text eller annat HTML-innehåll inom ett givet område Visa eller dölja delar av sidan sidan Anropa en användardefinierad JavaScriptfunktion Alla beteenden finns inte tillgängliga jämt. Vissa beteenden blir tillgängliga först i samband med att vissa sidelement som bilder eller länkar. Exempelvis måste du först montera en bild på sidan, innan beteendet växla bild aktiveras i Beteendelistan. 128 LEKTION 6 LÄGG TILL INTERAKTIVITET

Alla beteenden visar en unik dialogruta som definierar de relevanta inställningarna. Exempelvis tillåter dialogrutan Öppna webbläsarfönster dig att ange webbadressen till filen som ska visas i det nya fönstret, bredden och höjden på det fönstret och andra fönsterattribut. De här paramterarna kan ändras när som helst. Efter att du har definierat parametrarna för beteendet, listas det i Beteendepanelen med den förinställda igångtriggningshändelsen visad till vänster och namnet på beteendet visat till höger. Händelsen kan ändras genom att välja en annan händelse från från Beteende-listan. Exempelvis är Öppna webbläsarfönster-beteendet förinställt att tillämpas genom händelsen onclic; om du föredrar en överrullningsigångtriggning, kan du ändra händelsen till onmouseover. Beteendena är extremt flexibla och multipla beteenden kan tilldelas samma igångtriggare. Exempelvis kan du växla en bild till en annan och samtidigt byta ut den medföljande bildtexten med ett enda klick. Även om den snabba responsen tyder på att händelserna sker samtidigt, triggas de i själva verket igång i en följd. När multipla beteenden med samma igångtriggningshändelse tillämpas, har du möjlighet att ändra ordningen de behandlas i genom att flytta dem upp eller ned i Beteendepanelen. Förhandsvisa en färdig fil I den första delen av den här lektionen, kommer du att arbeta med en sida om resebyråkunder. För att förhandsvisa filen du kommer att arbeta med, tar vi oss en titt på den färdiga sidan i webbläsaren. 1 Öppna Adobe Dreamweaver CS4. 2 Om nödvändigt, tryck F8 för att öppna Filernapanelen och välj DW CIB från platslistan. 3 I Filernapanelen expanderar du lesson06-mappen. ADOBE DREAMWEAVER CS4 ALLT I EN BOK 129

4 Markera filen ourclients-finished.html och tryck F12 (Windows) eller Alt+F12 (Mac) för att förhandsvisa den i din primära webbläsare. Sidan innehåller Ajax-drivna effekter skapade med Dreamweaver Spryteknologi. 5 Om Microsoft Internet Explorer är din primära webbläsare, kan ett meddelande dyka upp ovanför webbläsarfönstret och tala om att JavaScript hindras från att köra. Om så sker, klickar du på det meddelandet och väljer Tillåt markerat innehåll. För din muspekare över rubriken, Our Corporate clients. Lägg märke till att en röd färg framhäver rubriken för en kort stund och sedan försvinner. Det här är resultatet av en Spry-effekt som kallas Högdager. 6 Klicka på spaltrubriken Startdate för att sortera datan efter år i stigande ordning. Sedan klickar du på rubriken igen för att sortera datan efter år i fallande ordning. Sedan klickar du på spaltrubriken Company för att sortera datan i alfabetisk ordning. Förmågan att sortera tabellen efter spaltrubrikerna uppnås med hjälp av Spry datauppsättningar. 7 När du är färdig, stänger du webbläsarfönstret och återvänder till Dreamweaver. 130 LEKTION 6 LÄGG TILL INTERAKTIVITET

Använd Spry-effekter-beteenden Spry-effekter skapar visuella effekter på en sida som att markera element, tona in eller ut ett foto eller skaka en hel div (sidsektion) likt en jordbävning. De här effekterna är avsedda att väcka uppmärksamhet eller att markera ett element. De är dramatiska och skall användas sparsamt så att inte hela tiden olika delar av din sida blinkar, krymper, skakar eller blixtrar till. 1 I Filernapanelen dubbelklickar du på filen ourclients-start.html för att öppna den i Dreamweaver. 2 Välj Arkiv > Spara som och Spara filen som ourclients.html. Behöver du startsidan igen, förblir den oförändrad på din hårddisk. 3 Spry-effekter kan tilldelas till vad som helst som är markerat i Dokumentfönstret. De kan också tilldelas till alla sidelement som har ett ID. Istället för att använda oss av metoden aktuell markering, ska vi tilldela ett ID till ett element och sedan lägga till en Spry-effekt till det elementet. Du lägger till ett ID med hjälp av Kod och Designläget. 4 Placera muspekaren var som helst i <h1>-rubriken: Our Corporate Clients 5 Klicka på Delaknappen för att visa Kod och Designläget. 6 I koden omedelbart efter h1-rubriken men innan den avslutande haken (>), infogar du ett mellanrum och skriver in id= occ. Det IDnamnet är en förkortning för våra företagskunder. 7 Klicka på Designknappen för att återvända till Designläget. 8 Om nödvändigt, väljer du Fönster > Beteenden för att visa Beteendepanelen. Klicka på Plusknappen (+) för att lägga till ett beteende. Välj Effekter > Högdager. ADOBE DREAMWEAVER CS4 ALLT I EN BOK 131

9 I dialogrutan för högdager anger du Målelementet till h1 occ. Lämna den förinställda effektvaraktigheten som den står (1000 millisekunder). Se till att Startfärgvärdet är #fff, att Slutfärgvärdet är #f00 och värdet för Färg efter effekt är satt till #fff. Klicka sedan på OK. Effekten blir en kortvarig röd högdager bakom elementet <h1 id= occ >. OBS: Högdagereffekten kan tas bort genom att markera Högdager i Beteendepanelen och klicka på Minusknappen (-). 10 I Beteendepanelen, klickar du på onclickfältet för att aktivera det. Från poppuppmenyn väljer du sedan onmouseover. När du vill ändra inställningarna för Högdagereffekten, dubbelklickar du på dess namn Högdager i Beteendepanelen för att öppna dialogrutan för högdager. 11 Använd Live-vy eller din webbläsare för att visa filen. Du får inte syn på effekten om du inte för din muspekare över rubriken. Klicka på Live-vy igen eller stäng din webbläsare för att återvända till Dreamweavers Redigera-läge. 12 Spara ditt arbete. Andra Spry-effekter kan läggas till en <div> eller alla slags blocknivåelement. De kan även fås att träda i funktion när sidan laddas. Spry-effekter erbjuder ett urval uppmärksamhetsskapande visuella element som lyfter din sida och gör den mer tilltalande. Lär dig mer om XML-data Innan du kan visa några datauppsättningar med Spry, måste du skapa en korrekt XML-datakälla. XML, en förkortning för Extensible Markup Language, är ett standardiserat format för att lagra data, exempelvis i form av en textfil. Varje XML-fil kan innehålla multipla dataposter. I den här övningen kommer du exempelvis att arbeta med en XML-fil som innehåller data för en rad kunder. Den filen heter clients.html och den innehåller flera kundposter. 132 LEKTION 6 LÄGG TILL INTERAKTIVITET

Varje kundpost, rensad från datan, ser ut så här: <client> <company></company> <desc></desc> <work></work> <startdate></startdate> </client> XML är precis som HTML ett markup-språk. De använder båda samma taggbaserade metod för att märka upp text. XML är dessutom utvidgningsbart i och med att du kan skapa dina egna taggnamn utifrån den data som du märker upp. Som du kommer att upptäcka i nästa övning, kallas sättet som XML-elementen döps och ordnas för ett schema. Den faktiska datan infogas mellan start- och stopptaggpar, som nedan: <company>company Anon</company> Data som tillsammans med specialtecken (som vinkelparanteserna som omger taggarna) förlitar sig på en specialavgränsare för teckendata som används som nedan: <desc>![cdata[company Anon är a <strong>bold</strong> company.]]</desc> CDATA-avgränsaren gör det möjligt för XML-data att innehålla HTML-taggar. Exempelvis innehåller XML-filen som används i den här övningen en fullt HTMLformaterad oordnad lista. Importera XML-data med Spry Dreamweavers enklaste väg för att arbeta med XML-schemat är Spry dataobjekt, som du använder i enlighet med följande steg: 1 Om nödvändigt, expanderar du mappen lesson06 och dubbelklickar på filen ourclients.html för att öppna den. Placera din muspekare under textstycket i main content <div> för att ange insättningspunkten för Spry datauppsättningar. 2 I Infogapanelen, växlar du till Sprykategorin genom att välja Spry från panellistan eller klicka på Spryfliken. 3 I Sprykategorin, klickar du på Spry Datauppsättningar. En annan metod är att välja Infoga > Spry > Spry Datauppsättningar. Tre steg krävs för att fullborda inställningarna datauppsättningar. 4 När dialogrutan Spry Datauppsättningar öppnas, är den första skärmbilden som visas dialogrutan för att Ange Datakälla. Ställ in menyn Välj datatyp till XML. Lämna namnfältet Datauppsättningar som det står (ds1) och klicka på Bläddra. ADOBE DREAMWEAVER CS4 ALLT I EN BOK 133

5 I dialogrutan Välj XML-källa, letar du dig fram till mappen lesson06 och väljer clients.xml. Klicka på Välj för att stänga dialogrutan Välj XML-källa. I Radelementsområdet, väljer du client. 6 Klicka på Nästaknappen längst ned i dialogrutan för att gå vidare till nästa steg. I skärmen för att Ställa in dataalternativ, väljer du en datatyp för varje spalt. 134 LEKTION 6 LÄGG TILL INTERAKTIVITET

För att se vilken typ som tilldelats en spalt, klickar du i den. När en spalt är markerad, visas datatypen nära övre delen av Typmenyn. Den förvalda typen kan ändras med hjälp av poppuppmenyn. Datatyperna inkluderar sträng (bokstäver och siffror), nummer, datum och html. De tre första spalternas data kan förbli sträng, men den som kallas work måste anges till HTML, eftersom den innehåller HTML-taggar. Datatypen för den sista spalten ska fortsatt vara sträng. Se faktarutan på nästa sida (Spry datatyper) för en förklaring till varför den här spalten inte använder datatypen datum. 7 Klicka på Nästaknappen för att gå vidare till det sista steget. När skärmen för att Välja infoga alternativ öppnas, väljer du Infoga tabell och klickar sedan på Konfigureraknappen. ADOBE DREAMWEAVER CS4 ALLT I EN BOK 135

Dialogrutan Spry Datauppsättningar infoga tabell dyker upp. I den här dialogrutan hittar du verktyg för att lägga till eller ta bort spalter, ändra ordningen på spalterna för att underlätta sorteringen, tillämpa klasser på spalter och rader samt uppdatera detaljregioner när en rad klickas på. 8 Klicka på OK för att acceptera de förinställda alternativen. Du återvänder nu till dialogrutan för att Välja infoga alternativ. För den här övningens lilla tabell duger det utmärkt med de förinställda inställningarna, men som du ser finns det kraftfullare sorterings- och visningsalternativ i Spry datauppsättningar. Dessa används för större eller mer komplexa tabeller. 9 Klicka på Klar. Spry datatyper För att kunna sortera data, krävs att du anger rätt datatyper. Följande datatyper finns tillgängliga: sträng Alfanumerisk data. 136 LEKTION 6 LÄGG TILL INTERAKTIVITET

10 Välj Arkiv > Spara. Dreamweaver behöver inkludera ett antal JavaScript-filer för att aktivera Sprydata-funktionaliteten. Filerna fanns redan på plats i mappen SpryAssets, annars hade du inte kunnat förhandsvisa den färdiga sidan ourclients-finished. html. Under mer normala omständigheter, hade Dreamweaver uppmanat dig att lägga till de här filerna. I Designläget, kan du se tabellen med datauppsättningsplatshållarna. Den faktiska datan lagras i en XML-fil och visas endast när sidan återskapas i Livevyn eller en webbläsare. Förutom tabellen och platshållaren, har Dreamweaver dessutom infogat ett antal nyckelkodrader. Förutom de tidigare nämnda JavaScript-filerna, har en JavaScript-funktion lagts till i <head>-taggen. 11 Klicka på Kodknappen för att visa koden. Skrolla upp till början av Dokumentet. Runt rad 25, kommer du att se länkar till JavaScripts och funktionen som lagts till för att styra dina Spry-datauppsättningar. Spry datauppsättningars erbjuder dig ett kraftfullt alternativ för att importera XML- och HTML-källmaterial och visa dem dynamiskt på en webbsida med hjälp av tabeller eller behållare (normalt divs). Staplade behållare (ett av alternativen i dialogrutan för att välja Infogalternativ) kan inkludera detaljerade layouter och spotlight-sektioner, något som ger dig stor valfrihet när du arbetar med Spry datauppsättningar. ADOBE DREAMWEAVER CS4 ALLT I EN BOK 137

Skapa Spry Dragspel Ett Spry Dragspel liknar en Spry Flikpanel i det att det organiserar en stor mängd innehåll i ett kompakt och flerpaneligt format. Flikarna staplas ovanpå varandra istället för sida vid sida; när du klickar på en tabb, glider innehållet fram i en smidig rörelse. Om innehållet i panelen är längre eller bredare än själva panelen, dyker rullningslister upp automatiskt. Vi börjar med att förhandsvisa det som ska bli resultatet av den här övningen. 1 I Filernapanelen väljer du santorini-finished.html och trycker F12 (Windows) eller Alt+F12 (Mac) för att förhandsvisa den i din primära webbläsare. Sidan maincontent information befinner sig i ett Spry Dragspel. 2 Navigera mellan panelerna genom att klicka på rubrikerna. 3 Stäng ner din webbläsare och återvänd till Dreamweaver. Välj Arkiv > Stäng för att stänga santorini-finished.html. 138 LEKTION 6 LÄGG TILL INTERAKTIVITET

Lägg till ett Spry Dragspel I den här övningen kommer du att införliva ett Spry Dragspel med din layout. 1 I Filernapanelen dubbelklickar du på santorini-start.html för att öppna den i Dreamweaver. 2 Välj Arkiv > Spara som. I filnamnfältet, skriver du in santorini.html. Klicka på Spara. Utgångslayouten för santorini-sidan sparas oförändrad i santorini-start.html file. 3 Placera din muspekare i slutet av raden Paradise by the Sea för att skapa en insättningspunkt Dragspelspanelen. 4 I Sprykategorin i Infogapanelen, klickar du på Spry Dragspelikonen. Dreamweaver infogar det förvalda Spry Dragspelselementet på sidan. Utgångselementet är ett Dragspel med två paneler, där den översta panelen visas. En blå flik med etiketten Spry Dragspel: Dragspel 1 och en ram utmärker det nya objektet. Efter att det infogats, kan Dragspelets etiketter och innehåll ändras direkt i Designläget. 5 Välj Arkiv > Spara allt. Om nödvändigt, klickar du på OK för att acceptera filerna som Dreamweaver lägger till mappen SpryAssets. 6 Markera platshållarfrasen Label 1 och skriv in Welcome to Santorini. 7 Markera fotot av paret på taket och hela texten under det som beskriver byarna och stränderna. Stoppa innan nästa rubrik, What Our Customers Say. ADOBE DREAMWEAVER CS4 ALLT I EN BOK 139

8 För att säkerställa att du inte lämnar några lösa taggar efter dig, klickar du på Kodknappen. Se till att hela kodblocket från den inledande <p>-taggen innan bilden till den avslutande </ul>-taggen efter den andra listan är markerad. Det rör sig uppskattningsvis om raderna 39 60. 9 Klicka på Designknappen för att återvända till Designläget. 10 Välj Redigera > Cut eller tryck Ctrl+X (Windows) eller Kommando+X (Mac) för att kopiera fotot och texten Klippboken. 11 Återvänd till Dragspelspanelen. Markera texten Content 1. Välj Redigera > Klistra in eller tryck Ctrl+V (Windows) eller Kommando+V (Mac) för att Klistra in innehållet i panelen. OBS: För att dölja innehållet så att du kan arbeta med andra paneler, högerklickar (Windows) eller Kontroll-klickar (Mac) du på elementet och väljer Visa Element > Dolda eller Visa Element > Återställ alla visade element. Eftersom skrollningen inte är aktiverad i Designläget, ser du bara delar av innehållet du har lagt till i Designläget. 12 För att se eller redigera hela innehållet, dubbelklickar du på panelen. Du kan också högerklicka (Windows) eller Kontroll-klicka (Mac) och välja Visa element > Hela. 140 LEKTION 6 LÄGG TILL INTERAKTIVITET

13 Positionera din muspekare över den gråa Label 2-listen för att visa ögonikonen. Klicka sedan på ögat för att öppna panel 2. 14 Markera Label 2-texten och skriv in What our customers say. 15 Upprepa steg 7 till 11 för att klippa ut nästa rubrik, <h2>-rubriken What our customers say och informationen under den rubriken. Stoppa innan nästa rubrik, Recommended Hotels. Klistra in den inuti panel 2. En sektion av sidan återstår att lägga till Spry Dragspelet. Därför ska vi lägga till en tredje panel för den i nästa övning. Lägg till ytterligare paneler För att lägga till eller ta bort paneler i ett Spry Dragspel, använder du Egenskapsrutan. 1 Se till att Spry Dragspelet Dragspel 1 är markerat i Dokumentfönstret. 2 I Egenskapsrutan, klickar du på Plusknappen (+) för att lägga till en panel. OBS: Paneler kan tas bort genom att klicka på Minusknappen och sorteras genom Uppoch Ned-pilarna. 3 I Dokumentfönstret, väljer du Label 3 och skriver in Recommended Hotels. 4 Upprepa steg 7 till 11 från den föregående övningen för att Klistra in <h1>-rubriken Recommended hotels tillsammans med fotot och tabellen, inuti panel 3. 5 Välj Arkiv > Spara. Använd Live-vy eller tryck F12 (Windows) eller Alt+F12 (Mac) för att förhandsvisa sidan i din primära webbläsare. Förinställningen är att den översta panelen visas när sidan återges. 6 Klicka på de andra Dragspelsflikarna och skrolla för att se mer av innehållet. 7 Klicka på sidolistlänken till rekommenderade hotell samtidigt som fliken Recommended Hotels är stängd. Klicka sedan på fliken Recommneded Hotels för att öppna den panelen. I sidolisten klickar du återigen på länken till rekommenderade hotell. Länken i sidolisten fungerar bara när den tredje panelen är aktiv och öppen. ADOBE DREAMWEAVER CS4 ALLT I EN BOK 141

8 Klicka på Live-vy igen eller stäng webbläsarfönstret för att återvända till Redigeraläget. 9 Radera meningen i sidolisten som lyder Check our recommended hotels. Den här länken fungerar endast när panelen Recommended Hotels är öppen, vilket kan skapa förvirring. I och med den snabbare åtkomsten till sidans hela innehåll som dragspelet erbjuder, behövs inte heller länken längst ner på sidan. 10 Välj Arkiv > Spara. Du skapade ett Spry Dragspel och lade till content och ytterligare paneler till det. Även om innehållet som lades till i den här övningen redan fanns på sidan, hade du också kunnat skriva in och redigera innehållet direkt i panelerna. Du kan också kopiera material från andra källor, som Word-dokument. Allt slags innehåll kan infogas till panelerna, utöver den text, de bilder och tabeller som vi använde oss av i den här övningen. I nästa övning kommer du att anpassa CSS:en för Spry Dragspelet. Anpassa ett Spry Dragspel Precis som andra Spry-widgetar, har Spry Dragspel en CSS-fil kopplad till sig. I den här övningen kommer du att justera höjden på innehållet i panelerna och ändra färgschemat för etikettraderna. OBS: En del väljarnamn är för långa för att visas i panelen Alla Regler, utan visas först när du för din muspekare över väljaren. 1 I panelen för CSS-stilar, letar du upp CSS-filen SpryDragspel.css och expanderar dem. Du har nu fyra externa formatmallar kopplade till sidan. 2 Markera.AccordionPanelTab. 3 Klicka på Redigera formatikonen (den som ser ut som en penna). 142 LEKTION 6 LÄGG TILL INTERAKTIVITET

4 I dialogrutan CSS-regeldefinition för.accordionpaneltab i SpryDragspel.css, väljer du Typkategorin och klickar på färgrutan för att öppna färgväljaren. I färgväljaren, ändrar du färgen till vitt (#FFF). 5 Välj Bakgrundskategorin. I Bakgrundsfärgfältet, ändrar du #CCC till #345FA3. Det här är färgen som används i <h1>-rubriken precis ovanför Dragspelet. I de kommande stegen, ändrar du all blå färg i Spry Dragspelet till färgen #345FA3. 6 Sedan klickar du på OK. ADOBE DREAMWEAVER CS4 ALLT I EN BOK 143

7 I Alla reglerpanelen för CSS-format, väljer du.accordionpanelcontent. Om nödvändigt, förstorar du Egenskapsrutan alldeles under Alla reglerpanelen. Klicka på höjddatafältet för att göra det redigeringsbart och ändra 200 till 400. Lämna menyn som öppnas till höger inställd till px. Tryck Enter (eller Retur). Allt innehåll i panelerna är satt till samma höjd. Valet av 400 pixlar innebär att en större del av innehållet kan visas innan användaren måste skrolla, utan att för den del göra så att användaren inte ser att det finns fler paneler nedanför den första. Vilken höjd du väljer för.accordionpanelcontent, beror på mängden innehåll som du vill visa i det aktuella fallet. 8 I Alla reglerpanelen, väljer du.accordionpanel Open.AccordionPanelTab. I Egenskapsrutan, klickar du på bakgrundsfärgfältet för att göra det redigeringsbart och skriver in #345FA3. Tryck Enter (eller Retur). 9 Klicka på länken Lägg till egenskap. Skriv in color för egenskapsnamnet och skriv in #FFF som färgvärde. Tryck Enter (eller Retur). 144 LEKTION 6 LÄGG TILL INTERAKTIVITET

10 I Alla reglerpanelen, väljer du.accordionpaneltabhover. I Egenskapsrutan, klickar du på färgrutan och använder färgväljaren för att välja gul (#FF0) som översvävningsfärg för öppen panel. Du ska nu ändra fler färger genom att redigera färgvärdet i i Egenskapsrutan. 11 I Alla reglerpanelen, väljer du.accordionpanelopen.accordionpaneltabhover. I Egenskapsrutan, upprepar du processen du genomförde i steg 10 till ändra värdet för översvävningsfärg för öppen panel till gul (#FF0). 12 I Alla reglerpanelen, väljer du.accordionfocused.accordionpaneltab. (Focus syftar på hur fliken visas när den är aktiv.) I Egenskapsrutan, upprepar du processen beskriven i steg 8 för att ändra den förinställda blåa bakgrundsfärgen till #345FA3. 13 I Alla reglerpanelen, väljer du till sist.accordionfocused.accordionpanelopen.accordionpaneltab. I Egenskapsrutan, ändrar du den förinställda blåa bakgrundsfärgen till #345FA3. Du har nu framgångsrikt skapat ett färgschema för Dragspelspanelen som matchar webbsidans färger. Du har ändrat höjden på innehållet i panelerna för att göra det möjligt att visa mer av innehållet innan användarna måste börja skrolla. ADOBE DREAMWEAVER CS4 ALLT I EN BOK 145

Repetitionsfrågor 1 Sant eller falskt: XML är en metod för att lagra data i en vanlig textfil för senare användning i webbprogram. 2 Vilka är fördelarna med att använda Spry-effekter? 3 Vilka är fördelarna med att använda Spry datauppsättningar för att lägga till en webbsida? 4 Vilken funktion fyller ett Spry Dragspel? Repetitionssvar 1 Sant. XML är ett mark-up-språk som liknar HTML, där data taggas och struktureras som ren text, ett filformat som inte hör till något särskilt program. 2 Spry-effekter skapar en fokuspunkt på en sida genom att visuellt framhäva, tona in eller ut eller skaka om för att dra uppmärksamheten till ett sidelement. 3 Spry datauppsättningar lägger till XML- eller HTML-information till en sida i tabellformat, komplett med sorteringsbara spalter och andra avancerade egenskaper. På så sätt kan användarna interagera med datan på sidan. 4 Ett Spry Dragspel innehåller två eller fler kollapsbara paneler som visar eller döljer innehåll i sidans innehållsområde. 146 LEKTION 6 LÄGG TILL INTERAKTIVITET