Image: Dreamweaver distance course logo
 
   

Fördjupningslektion 1: sida 1 av 10

 

 

Till kursens framsida

Sida 2 av 10 »

 

 

 

Fördjupningslektion 1

Välkommen till den första lektionen i den här fördjupningskursen för Expression Web!

Bli inte förskräckt av antalet sidor: jag har bara delat upp innehållet i litet mer hanterbara portioner. Det blir litet lättare att läsa då. Och till skillnad från de idéer huvudet kanske fylls av när du hör ordet "fördjupning" så kommer de här lektionerna faktiskt att bli ganska lugna. Det är inte så himla mycket korvstoppning, utan den mesta tiden kommer att gå åt till själva övningarna -- och med det menar jag inte att man måste hetsa ihjäl sig för att hinna, utan mest att det ofta finns så mycket att pilla med att tiden inte alltid räcker till.

De flesta av fördjupningslektionerna kan sägas vara uppdelade i två delar: en där vi går igenom några nya kodknep (främst med CSS), samt en där vi tittar närmare på något som kan vara bra att känna till och kunna använda på sin sida, men som man ofta behöver hämta in utifrån.

Ett praktexempel på något sådant är det vi ska göra i den här lektionen: vi ska dels lära oss hur man använder CSS-funktionerna Visibility och Display. De är parametrar som avgör om något ska synas på sidan eller inte. Det låter kanske litet virrigt, men när vi väl gått igenom vad det handlar om så inser du säkert möjligheterna!

Sedan ska vi skaffa en fullt fungerande gästbok som du har fullständig kontroll över. Du kan alltså ta bort otrevlig (och tyvärr oundviklig) reklam ur den, ändra utseende på den och till och med språk i den! Det är en lättare, lugnare grej som kanske kan vara av intresse för de som vill ha litet fler kontaktmöjligheter mellan er och besökarna.

Då sätter vi igång! Vi börjar med kodbiten.

 

 

 

1. Visibility

Man kan använda CSS och litet javakod för att få olika saker på sidan att antingen gömmas eller visas beroende på vad användaren gör -- man kan t ex ha en bild eller ett stycke text som visas, men när användaren klickar på en särskild knapp så göms texten, eller kanske rent av ersätts med en annan!

Man kan gömma vad som helst på det här sättet så länge man kan sätta en ID-stil på det: det kan alltså vara bilder, textstycken, divar, tabeller... Vad som helst!

Då ska vi se hur man gör.

 

 

 

1.1. Grunderna i hur man gömmer saker

Jag har en bild på en katt, och vill att man med hjälp av knappar ska kunna göra kattbilden antingen synlig eller osynlig. För att göra detta behöver jag fyra saker:

1. Ett element (alltså en bild eller något annat som kan få en CSS-stil)

2. En CSS-stil som ger sitt element parametern "visibility", som betyder "synlighet"

3. En knapp som säger åt webbläsaren att de element som fått en viss stil ska bli osynliga

4. En till knapp som gör så att de element som fått en viss stil blir synliga

Det låter säkert krångligt så här i början, men jag går som vanligt igenom steg för steg precis hur man gör, så det ska nog gå ganska enkelt!

 

 

 

1.2 Sätt ut ett element på din sida

Jag tjatar om "element" hela tiden, och det låter säkert väldigt vagt, men det är egentligen väldigt enkelt: ett element är i det här fallet något på ens webbsida som man kan ge en CSS-stil. Det kan alltså vara en bild (som är vanligast), ett paragrafstycke med text, en tabell, en div, eller nästan vad som helst.

I det här fallet gör jag en ny sida (File > New > Page, väljer HTML och klickar på OK) och sätter ut en bild på en katt.

 

Bilden är alltså ett element -- det kan ha en CSS-stil. Och det är precis vad vi ska skapa nu!

 

 

 

1.3. Skapa stilen

Det här är inte heller så svårt, bara du minns ungefär vad CSS handlar om och hur det funkar. Om du hunnit glömma det under sommaren kan du alltid skumma igenom lektion 6 och 7 i grundkursen, så kommer det säkert tillbaka!

Jag ska skapa en CSS-stil som ger det element den används på parametern "visibility". Den parametern kan vara inställd på två olika saker: "visible" och "hidden" -- alltså "synlig" och "gömd".

Jag vill att kattbilden som ska få den här stilen ska vara synlig från första början, så jag ska ställa in ID:ts visibility på just "visible". Då gör jag så här:

Jag ser till så att paletten Apply Styles syns. Om den inte gör det kan man trolla fram den genom att gå in på Task Panes > Apply Styles. Då dyker den upp.

 

Jag klickar på knappen New Style i paletten, så får jag skapa en ny stil.

 

Då dyker stilfönstret upp. Redan nu måste man ha ögonen med sig: vi ska skapa ID-stilar, inte class-stilar. Och ID-stilar kräver "brädgårdar" framför sina namn, inte punkter. Så jag suddar ut allt som står i rutan Selector och skriver så här däri:

#katt

 

Det betyder att min stil som jag snart ska skapa är en ID-stil som heter katt.

Som du säkert minns så bör man bara använda samma ID-stil en gång per sida. Det funkar bäst när man gör sånt här. Det blir litet mer jobb om man vill att flera saker ska försvinna med ett enda knappklick, men inte mycket -- det tar vi sen!

Rutan Define In får vara inställd på Current page. Det gör så att stilen bara går att använda i just den här sidan -- om jag vill använda samma stil på en annan sida så får jag i så fall skapa den där. Men det går alltså precis lika bra att skapa den här stilen i en stillista och koppla sidan till listan, så som vi gjorde i lektion 7 i grundkursen. Jag gör bara så här för enkelhetens skull.

Nu är det dags att ställa in exakt vad stilen "katt" ska göra. Här kan man som bekant ange en himla massa olika saker, men det enda vi är intresserade av just nu är parametern "visibility". Den finns i kategorin Layout i listan till vänster, så jag klickar på den.

Då hittar vi rutan Visibility högst upp till vänster.

Om man klickar på pilen bredvid rutan så visas en liten meny på de inställningar just den parametern kan ha: collapse och inherit (som vi struntar i), visible (alltså synlig) eller hidden (gömd). Jag ville att bilden skulle synas från början, så jag väljer "visible". Jag skulle naturligtvis kunna välja en massa ytterligare inställningar, t ex bakgrundsfärg, ramlinje, position, och så vidare -- men det ids jag inte! Jag nöjer mig med att bara ange visibility. Sedan klickar jag på OK.

 

Nu har ID-stilen "#katt" dykt upp i paletten Apply Styles. Då är den klar att användas!

 

Jag klickar på kattbilden i min sida så att den markeras och klickar sedan på stilen #katt i Apply Styles-paletten. Då får den bilden just den stilen. (När man gett ett element en stil så ser man det även på den lilla fliken uppe till vänster om elementet -- i det här fallet kommer kattbilden att få #katt inlagt i fliken där det just nu står img.)

 

Nu har vi alltså ett element på vår sida -- kattbilden -- och vi har dessutom skapat en stil som vi använt på elementet! Då är det bara knapparna kvar, de som ska styra stilens synlighet.

 

 

 

1.4. Skapa knappen som gör katten osynlig

Nu ska vi sätta in en knapp som, när man trycker på den, gör kattbilden osynlig!

Man kan göra på flera olika vis, men jag vill ha en riktig webbknapp så jag gör så här: jag ser till så att paletten Toolbox syns. (Om den inte gör det kan man gå in på Task Panes > Toolbox.)

Där klickar jag på pluset vid HTML så att dess innehåll listas (om det redan är ett minus vid HTML behöver du inte klicka där.)

Sedan letar jag rätt på kategorin Form Controls, alltså formulärkontroller, och klickar på pluset vid den. Då visas alla formulärkontroller man kan infoga i sin sida, och knappen är ju precis en sådan.

 

Jag klickar-och-drar Input (Button) in på min sida. När jag släpper musknappen hamnar en ny knapp där. Jag gör så att den hamnar under bilden (det är bara att sätta markören till vänster om knappen och trycka på Enter).

 

Knappen heter "button", vilket kanske inte är så roligt. Det ska vi ändra på om ett litet tag, men först kommer det vi alla väntat på: vi ska in i koden!

Jag klickar på vyknappen Split (eller Dela) så att sidans kod syns i den övre halvan av skärmen medan sidans design syns i den nedre.

 

Sedan klickar jag på knappen jag just infogade nere i designvyn. Då markeras dess kod i den övre halvan, så jag ser var den är.

 

När jag ser vilken kod som styr knappen kan jag klicka någonstans i kodvyn så att raden avmarkeras. Nu ska jag ändra litet på koden som var markerad.

Knappen heter som sagt "button". Jag vill ändra det till "Gör katten osynlig!". För att fixa till det så ändrar man bara på det som står innanför citationstecknen efter parametern Value i koden. Jag markerar "button"...

 

... och skriver in vad jag vill att knappen ska heta.

 

När jag då klickar i designvyn så får knappen sitt nya namn:

 

Men bara för att knappen heter "Gör katten osynlig!" så betyder det inte att något händer när man klickar på den. Faktum är att när man klickar på knappen så händer absolut ingenting. Testa gärna!

För att få knappen att faktiskt göra som den heter så måste man lägga in en kodsnutt i knappen. Kodsnutten kommer i korta ordalag att säga åt det element som har stilen "katt" att parametern "visibility" ställs in på "hidden", alltså gömd. Då blir det elementet osynligt! Och eftersom snutten som styr det hela bakas in i knappens kod så körs den bara när man klickar på knappen. Fiffigt, va?

Dessutom: varje gång du infogar en formulärkontroll -- i vårt fall en knapp -- så infogas start- och sluttaggarna för formulär med dem. Det är de som gör att det dyker upp en grå fyrkant runt knapparna. Om du stör dig på dem kan du radera start- och sluttaggarna för form -- alltså <form method="post"> och </form> -- från koden. De gör varken till eller från här. Var bara försiktig så att du inte råkar sudda ut för mycket!

För att visa hur det går till raderar jag här starttaggen <form method="post">...

 

... och sluttaggen </form>.

 

Klart!

 

Men nu fortsätter vi att mixtra med knappen.

Jag börjar med att sätta markören till vänster om tecknen /> i slutet på knappkoden. Det är knappstyckets sluttagg.

 

För översiktens skull trycker jag på Enter två gånger så att jag får en tom rad att mixtra med -- sluttaggen hamnar på raden under. Jag klickar i den tomma raden så att markören blinkar där.

 

Nu skriver jag följande kodsnutt på den tomma raden:

onclick="document.getElementById('katt').style.visibility='hidden';"

 

(Det går bra att kopiera kodraden ovan om du känner dig osäker. Då kan du klistra in den i din egen knappkod. Det gör man som vanligt genom att klicka där man vill ha kopian och sen gå in på Edit > Paste.)

På svenska betyder kodsnutten att när någon klickar på knappen (det är det "onclick" betyder) så ska det element som har ID:t "katt" få parametern "visibility" inställd på "hidden", alltså gömd. Det krångliga är att få med alla bokstäver!

Så här ser det ut i min kod:

 

Om jag nu sparar sidan och laddar upp den så blir det så här:

En bild på en katt, och en knapp under...

 

Undrar vad som händer när jag klickar på knappen?

 

Katten försvann! Testa gärna själv.

Nu ska vi se hur man kan trolla fram den igen.

 

 

 

 

Till kursens framsida

Sida 2 av 10 »