Image: Dreamweaver distance course logo
 
   

Fördjupningslektion 2: sida 1 av 4

 

 

Till kursens framsida

Sida 2 av 4 »

 

 

 

Fördjupningslektion 2

Förra gången tittade vi dels på hur man skapar knappar som kan gömma (och ta fram) olika saker på ens sida, samt hur man skaffar en egen gästbok. Det var en del trixande där, men allt skedde ju egentligen på ett annat ställe: vad gäller gästboken så var det enda vi gjorde med vår egen webbsida att infoga en länk som leder till gästboken vi designade.

Men nu ska vi göra något som verkligen sätter spår: ett automatiskt galleri! Det blir alltså en automatiskt rullande serie med bilder (eller text, om man vill) som sköter sig själv, och som du kan sätta in i stort sett var du vill på din webbsida. Dessutom kan besökaren själv avbryta det automatiska bildbytet och välja exakt vilken av dina bilder han eller hon vill se istället.

Galleriet består av ett par olika kodbitar som vi ska infoga i våra sidor, och sedan ska vi putsa till dem så att våra gallerier ser ut så som vi vill ha dem.

Sedan ska vi se hur man skapar så kallade "spoilerknappar" -- en knapp med två funktioner: när man klickar på den så visas något man gömt på sidan, och när man sedan klickar på samma knapp igen så göms det som visades!

Det är inte lika jobbigt som det låter, men det kommer att kräva att du läser noga, för som vi lärt oss så kan minsta stavfel i en kod göra så att allt på sidan går fel, och i värsta fall får man börja om med galleriet från början....

 

 

 

1. Det automatiska galleriet

Nu ska vi prova att göra

ett automatiskt galleri!

Det består av ett antal rutor som rullar på automatiskt.

Man kan fylla rutorna med vanlig text, som du ser. Men...

Du kan dessutom själv bestämma om du vill att galleriet ska rulla automatiskt eller om du själv ska få välja bild.

Klicka bara på Auto: för automatisk rullning eller Manual: för manuellt byte.

 

Om du väljer Manual kan du sedan klicka på någon av rubrikerna i rutan nedan, så får du se den rutan här.

Läckert, va? Nu ska vi se hur man gör.

Vi börjar med det viktigaste: galleriet uppfanns av smartingarna på DynamicDrive och finns som original här: http://www.dynamicdrive.com/dynamicindex17/agallery.htm

Men jag har gjort om det litet så att det passar oss.

Det vi ska göra nu kommer att kräva litet kodande och en hel del pyssel, men det är inget som kommer att göra slut på oss. Jag kommer som vanligt att beskriva hur jag gör för att få galleriet att fungera, från början till slut, och du kan själv hänga på om du vill.

Du lär märka att det här galleriet ser ganska grovt ut jämfört med andra, tjusigare gallerier man kan hitta på nätet -- och det är alldeles sant: Detta är i grunden en ganska så grovhuggen bildväxlare. Men det är ändå en bra punkt att börja på i och med att det här galleriet består av minimalt med tjafs, så det ska funka utan problem på alla datorer, och så är kodandet som krävs för att få det att fungera en bra övning inför de mer moderna och betydligt läckrare lösningar vi ska titta på litet längre fram i den här kursen.

Då sätter vi igång!

 

Vad ska vi göra, egentligen?

Gallerikoden vi ska använda består av ett antal rätt så avancerade kodbitar, men som tur är så slipper vi skriva in dem för hand: det räcker med att kopiera dem från den här sidan och klistra in dem där de ska vara -- och jag visar förstås precis var jag vill ha dem.

Grunden i gallerikoden vi ska använda utgörs av två stycken: stycke 1 är ganska långt, stycke 2 är kortare och innehåller dessutom en kort snutt som skapar en ny bildruta i galleriet. För varje ny bildruta du vill ha i ditt galleri kommer du att behöva kopiera just den lilla snutten och klistra in den efter den förra. Men det tar vi som det kommer.

 

 

1.1. Det första kodstycket

(Det är nog säkrast att man börjar med en helt ny sida första gången man ger sig på galleriet, så slipper man bråka med alltför många andra kodsnuttar.)

Markera och kopiera precis allt i rutan Gallerikod stycke 1 nedan, från och med <!-- HÄR BÖRJAR GALLERIKODEN hela vägen ned till och med <!-- HÄR SLUTAR STYCKET DU INTE BÖR ÄNDRA PÅ -->.

Det här är det längsta stycket vi ska använda. Om du vill vara noga -- och det vill du ju -- så kan du använda knappen under rutan. När du klickar på den så markeras all text i rutan automatiskt. Då kan du kopiera den markerade koden.


GALLERIKOD STYCKE 1



Ett snabbt och enkelt sätt att kopiera den markerade texten
är att hålla ned tangenten Ctrl och trycka på C

 

När all kod i rutan ovan är kopierad kan du gå in på din nya, tomma webbsida och klicka på vyknappen Split (alltså Dela) så att du ser sidans kod på skärmens övre halva.

Koden du just kopierade styr över galleriets inställningar. Detta är inget som ska synas på själva sidan, så den ska in någonstans mellan taggarna <head> och </head>. Gör så här:

Klicka till höger om <head> tills markören blinkar där.

 

Tryck sedan på Enter tills du fått fram ett par tomma rader. Klicka i någon av de tomma raderna tills markören blinkar där.

 

När markören blinkar i någon av de tomma raderna kan du klistra in koden du just kopierade. Det enklaste sättet är att hålla ned tangenten Ctrl och trycka på V. Det tråkiga sättet är att gå in på Redigera > Klistra in (Edit > Paste).

Då var första stycket avklarat! När vi har allt annat på plats ska vi ska se vad det gör och hur man ändrar på det, men nu är det dags för det andra stycket.

 

 

 

1.2. Det andra kodstycket

Här är det andra stycket i gallerikoden. Den är inte lika lång som stycke 1. Markera all kod i rutan nedan, från och med <!-- högst upp till och med </table> längst ned, och kopiera den. Om du vill kan du klicka på knappen strax under rutan. Då markeras all kod. Sedan är det bara att kopiera den, precis som du gjorde förut.


GALLERIKOD STYCKE 2



Ett snabbt och enkelt sätt att kopiera den markerade texten
är att hålla ned tangenten Ctrl och trycka på C

 

När koden ovan kopierats kan du gå till din nya sida igen.

Stycket du just kopierade är koden för själva galleriet -- det som kommer att synas på din sida, och som dina besökare kan mixtra med själva. Som du naturligtvis minns från HTML-lektionen i grundkursen så betyder det att det här stycket ska in mellan taggarna <body> och </body> i din kod!

Du hittar starttaggen <body> strax under all kod du klistrade in i förra steget. (Det kodstycket slutar med en tydlig rubrik som säger "HÄR SLUTAR STYCKET DU INTE BÖR ÄNDRA PÅ".) När du hittat starttaggen <body> så klickar du till höger om den, och kan gärna trycka in ett par tomma rader nedanför den.

 

Klicka i någon av de tomma raderna tills markören blinkar där. Sedan är det bara att klistra in koden för stycke 2 där markören är.

 

Nu kan vi förhandsgranska din sida. Det gör man genom att spara den och sen trycka på tangenten F12 på tangentbordet. Då öppnas sidan i en webbläsare! Det kallas för att förhandsgranska sidan. På så vis får du se hur den kommer att se ut "på riktigt" snabbt, utan att behöva ladda upp den till din webbplats på nätet innan den är klar. (Det blir mer om den här funktionen och annat man kan behöva känna till när man vill att ens sidor ska se bra ut i olika webbläsare i en senare lektion.)

Om allt gått rätt till så ska du nu se ett fullt fungerande galleri!

(Observera: om du besöker din sida i Internet Explorer så kan dess automatiska säkerhetsspärr sätta igång -- det är ganska ofrånkomligt. Den spärrar i så fall ditt galleri så att det ser ut som tre blå rutor ovanpå varann. För att gå förbi säkerhetsspärren klickar du på den gula textrand som dykt upp högst upp i webbläsarfönstret och väljer "Tillåt innehåll som har blockerats". Då får du en fråga om du vill tillåta webbplatsen att "köra aktivt innehåll". Svara "Ja" så kommer galleriet att visas på rätt sätt.)

 

Det består visserligen bara av tre tråkiga rutor jag satt in, men det funkar åtminstone. Tjusigt, va?

Tyvärr ser det inte lika tjusigt ut nere i designvyn på din sida:

[ OBSERVERA: Det kan hända att kontrollrutan längst ned i galleriet inte syns i din designvy. I så fall går du in på menyn
View > Visual Aids > CSS Display:none Elements. När det valet är förbockat så ska kontrollrutan dyka upp. ]

 

Det ser bara ut som en stapel med tre blå rutor, och med en liten kontrollruta längst ned. Vad trist! Och när du infogar ett sånt här galleri i någon av dina noggrant designade webbplatser så kommer det till råga på allt att se ut som om galleriet verkligen sabbar hela utseendet på din plats -- men det stämmer egentligen inte, för när sidan är sparad och man tittar på den på nätet (eller förhandsgranskar den) så kommer galleriet bara att visa en ruta åt gången. Det är bara i vyn Design som alla rutor visas samtidigt.

Så hur gör man nu för att ändra på innehållet i rutorna?

 

 

 

 

Till kursens framsida

Sida 2 av 4 »