Lektion 2 Del 1 Kapitel 6

Transkript

1 Lektion 2 Del 1 Kapitel 6 Inlärningsmål Att kunna kontrollera och styra webbsidors utseende med hjälp av CSS mallar Att med hjälp av CSS mallar kunna ge en hel website ett gemensamt utseende Att med hjälp av class och ID attributet kunna koppla en speciell mall till ett enskilt element Att kunna styra font format (storlek, font, färg) och andra egenskaper för text Att kunna ange bakgrunds färg och bilder för element Att förstå box modellen och kunna kontrollera marginaler, kantlinjer, och padding Att med hjälp av stilmallar kunna skilja innehåll och framställning Introduktion I denna lektion skall vi lära oss att styra utseendet på våra webbsidor med hjälp av stilmallar så kallade CSS (Cascading Stye Sheet) mallar. Inline Styles (individuell stilmall) Det finns flera sätt att deklarera styles för en webbsida. Vi skall börja med att titta på så kallade inline styles. Dessa deklareras direkt i anslutning till aktuellt element. Man kan tex som i fig 6.1 koppla det till ett p element <p style = font-size: 20pt >. Om man vill ange flera egenskaper för ett element så separeras dessa med hjälp av ett semikolon <p style = font-size: 20pt; color: blue >. Embedded Style Sheets (Lokal stilmall) Nästa typ av stilmall är lokala stilmallar. Lokala stilmallar deklareras i webbdokumentets huvud och gäller för hela dokumentet, inte bara för ett enstaka element. Dessa deklareras med <style type = text/css > följt av de styles som man vill definiera. Exempel. <style type = "text/css"> em { background-color: #8000ff; color: white } h1 { font-family: arial, sans-serif }

2 p { font-size: 14pt }.special { color: blue } </style> I denna stylesheet anger vi egenskaper för tre element och en klass. För em anger vi bakgrundsfärg och text färg, för h1 anger vi vilken font vi skall använda och för p anger vi vilken teckenstorlek vi vill använda. På rad 30 använder vi oss av ett p element tillsammans med klassen special som definieras i mallen. En kalas refereras med class = namn och definieras med.klassnamn. P elementet kommer i detta fallet att få den teckenstorlek som anges av p i stilmallen och den färg som anges av klassen special. Kolliderande Styles Infogat i det stycke som omfattas av p elementet och klassen special finns ett em element. Detta ärver formatering av p elementet men kommer inte att tillämpa klassen special eftersom att em har egen formatering av färger som går före klassens formateringar. Själva namnet Cascading antyder att vi kan hantera flera style sheets. Det är det som är finessen med style sheets att man kan definiera flera nivåer av dem och prioritets regler styr vilken som tillämpas. Det finns flera nivåer här men vi koncentrerar oss på de vi kan påverka i våra program. Kort kan vi säga att lokal mallar gäller före externa och att individuella gäller före lokala. Ytterligare exempel på stylesheets i konflikt finns i exempel/fig 6.3 External Style Sheets (Externa stilmallar) Externa stilmallar definieras i egen fil med fil ändelsen.css. Dessa är mycket bra för att skapa ett gemensamt utseende på en hel webbsite. För att referera till denna från XHTML filen skriver man i XHTML filen följande <link rel = stylesheet type = text/css href = styles.css />, se figur Figur 6.4 visar den externa CSS filen. Den formaterar fem olika element. a { text-decoration: none } /* Länkar skall inte ha någon understrykning */ a:hover { text-decoration: underline; color: red; background-color: #ccffcc } /* När man håller mus pekaren over en länk skall textfärgen ändras till röd och bakgrunden bli ljus grön */ li em { color: red; font-weight: bold; background-color: #ffffff } /* em element som står i en lista skall visas med röd fet stil med vit bakgrund */ ul { margin-left: 2cm } /* oordnade listor skall ha en 2 cm marginal */ ul ul { text-decoration: underline; margin-left:.5cm }

3 */ nästlade oordnade listor skall visas med understrykning och ha en vänstermarginal om 0,5 cm (från föregående lista)*/ Validering av CSS filer Liksom för XHTML filer finns det även en validerings tjänst hos W3C för CSS filer. Den finns på adressen Använd denna för att kontrollera att era CSS filer är korrekta. Positionering av element För att bestämma var på webbsidan innehållet skall visas finns i css metoder för att styra elementens position på sidan. Detta deklareras som en egenskap till ett element i stilmallen. Element kan antingen lägesplaceras absolut eller i förhållande till något annat element. I figur 6.8 används absolut positionering an element med individuell stilmall. Absolut placering Först anges en absolut position för en bild därefter placeras en text ovanpå denna. Slutligen läggs ytterligare en bild mellan den första bilden och texten. Här inför vi även ett nytt begrepp, lager för att kunna placera element på varandra. Det är värdet på egenskapen z-index som avgör vilket element som hamnar i vilket lager. <p><img src = "i.gif" style = "position: absolute; top: 0px; left: 0px; z-index: 1" alt = "First positioned image" /></p> <p style = "position: absolute; top: 50px; left: 50px; z-index: 3; font-size: 20pt;">Positioned Text</p> <p><img src = "circle.gif" style = "position: absolute; top: 25px; left: 100px; z-index: 2" alt = "Second positioned image" /></p> Relativ placering När man innehålls placerar element relativt så är de en del av flödet av element på sidan och de element man placerar lägesbestäms alltid relativt något annat element. I figur 6.9 används relativ placering av element. På rad 21, 22 placeras klassen.super 1 gånger storleken på lilla x högre relativt den text som föregår klassen. De övriga klasserna i stilmallen gör liknande formateringar bara åt andra håll, neråt, högre och vänster. Här introducerar vi även ett annat element, span som används för att gruppera innehåll på en webbsida. Span används ofta när man vill skapa lager efter som detta element behandlas lika i de flesta webbläsare. Ett annat element som brukar använda

4 tillsammans med stilmallar är elementet div med den skillnaden att det elementet används för enskilda rader av element och ger blank rad före och efter. I detta exempel används span för att göra den del av texten som vi lägesplacerar röd och 0.6 gånger mindre än standardstorleken på texten (relativt stora M) samt applicerar fonten verdana eller arial. Bakgrunder Vi har tidigare sett egenskapen background-color tillsammans med enskilda element. Denna kan naturligt vis även appliceras på hela dokumentet genom att koppla den till elementet body. Man kan även använda bilder som bakgrund till en webbsida. I figur 6.10 kopplas en bild till en webbsida enligt följande. body { background-image: url(logo.gif); background-position: bottom right; background-repeat: no-repeat; background-attachment: fixed; } Först anger vi vilken bild vi vill använda med background-image: sökväg. Sedan anger vi egenskaper för denna. Den skall placeras i nedre högra hörnet, den skall inte repeteras och den skall inte följa med texten när man scrollar sidan. Ytterligare en ny egenskap introduceras här, font-weight. Med denna styr man om testen skall vara tex fet (bold), möjliga värden är lighter, normal, bold och bolder. Värden på font-weight kan även anges med siffror från 100 till 900 där normal motsvaras av värdet 400. Begränsning av elementens brädd och höjd Man kan även styra hur stor platts ett element får ta upp på sidan med hjälp av stilmallar. Detta görs genom att innefatta det element du vill begränsa i ett div element och sedan ange egenskaper för detta. Detta görs med egenskaperna width och hight. Detta demonstreras i fig Här visas tre olika begränsningar där vi väljer att titta på den tredje på rad 32. <div style = width: 20%; height: 30%; overflow: scroll >. Vi anger vi brädden till 20 procent av sidans brädd och höjden till 30 procent fönstrets höjd. Slutligen säger vi att om inte texten ryms så skall den kunna rullas med rullister. Box modellen Genom att ange ett element som flytande kan man bryta textflödet och placera text i något som kan liknas med en text box. Man använder även här div elementet nu tillsammans med egenskapen float. Detta demonstreras i figur Till text boxen anger man marginal, border och padding. Marginal ger avståndet mellan textboxens ytterlinje och omgivande element. Border anger typ av ram och brädd på denna.

5 Padding anger avstånd mellan ramen och innehållet i boxen(se fig 6.13). I figur 6.14 demonstreras olika typer av ramar appliceras på element och i fig 6.15 visas olika typer av kantlinjer.

6 Del 2, Kapitel 7 Inlärningsmål Att kunna skriva enkla JavaScript program Att kunna hantera input och output funktioner Att kunna använda aritmetiska operatorer Att kunna använda val satser Att kunna använda relations och jämförelseoperatorer Introduktion Vi skall i denna lektion börja lära oss att använda JavaScript för att åstadkomma webbsidor med dynamiskt innehåll. JavaScript är det överlägset största script språket för klient applikationer på internet och stöds av de flesta webbläsare. Grundläggande om JavaScript Till en början kommer vi att placera våra script i dokumentets head. I figur 7.1 ser vi ett enkelt JavaScript som skriver ut en rad text till dokumentet. Själva scriptet börjar på rad 12 med <script type = text/javascript >. Detta talar om att här följer ett script skrivet i javascript. Rad 13 startar en kommentar vilket gör att webbläsare som inte stöder JavaScript kommer att strunta i den kod som följer. På rad 14 anropar vi webbläsarens document objekt och writeln metoden. Det är denna metod som skriver ut till webbfönstret. Det som finns i den parentes som följer kommer att skrivas ut till webbfönstret. Som ni ser har vi infogat xhtml element i texten som skall skrivas ut. Detta medför att texten kommer att formateras som rubriknivå 1. Det finna två varianter av utskrifts metoden, write som skriver ut en rad och writeln som dessutom lägger till en radmatning. Alla rader JavaScript avslutas med ett semikoilon. I figur 7.2 visar man hur en utskrift kan delas upp på flera write satser och hur en satts kan delas på flera rader. På rad 14 börjar utskriften och fortsätter sedan på rad 15. Eftersom vi använder write så kommer utskrifterna att hamna på samma rad. Argumentet på rad 15 är dessutom delat på två rader och sammanfogat med ett plustecken (+). I figur 7.3 visar man hur man kan infoga XHTML rad bryt i utskriften.

7 JavaScript är ett objekt baserat programmerings språk. De objekt som används i en webbsida organiseras i en speciell objekthierarki och för att accessa ett speciellt objekt måste dess sökväg anges. document.writeln("<h1>welcome</h1>" ); betyder att vi anropar objektet writeln som är ett under objekt till document. Dialog rutor I exempel 7.4 och 7.5 tas två metoder för att interagera med användaren upp. Den första metoden är med hjälp av en meddelandedialog ruta (poppup ruta). Denna anropas med widow.alert( medelande ); Meddelande i detta fallet är den text som skrivs ut i dialog rutan ovanför knappen. Dialog rutor är faktiskt mycket användbara när man skall fel söka sin kod. Mer om detta senare. Nästa dialog ruta som tas upp i figur 7.5 är en inmatningsprompt. Denna används för att mata in värden till ett script. De värden som matas in behandlas som textsträngar. Om vi som i detta fallet önskar mata i heltal så måste vi se till att konvertera de inmatade värdena. Syntaxen för en immatningsruta är som följer window.prompt( "Enter first integer", "0" );, det första argumentet är den text som skall stå som ledtext i dialog rutan och det andra argumentet är det defoult värde som skall stå i inmatningsfältet. Som ni ser är både alert och prompt ett under objekt till window. I figur 7.5 ser vi även andra nyheter. Vi inför variabler som deklareras med var följt av variabelns namn. Vi behöver inte tänka på att tala om vilken typ av variabel vi deklarerar utan typen tilldelas dynamiskt när vi första gången tilldelar variabeln ett värde. JavaScript är ett ganska förlåtande språk så om vi inte skulle deklarera variablerna innan vi tilldelar dem ett värde så skapas de dynamiskt men undvik detta efter som man då får dålig kontroll över sina variabler. På rad anropar vi en inmatnings prompt och placerar resultatet i variabeln firstnumber. Denna innehåller nu det första talet som en textsträng. På rad gör vi samma sak för det andra talet. För att göra om talet till ett heltal använder vi en i JavaScript inbyggd funktion, parseint enligt följande. number1 = parseint( firstnumber ); Vi skickar den variabel som innehåller textsträngen som argument och får i retur det heltal som motsvaras av textsträngen. Vi gör motsvarande opration med den andra variabeln och slutligen adderar vi dem till varandra och placerar summan i variabeln sum. I figur 7.4 använder vi ett special tecken i argumentet till write, \n innebär ny rad i JavaScript. Några andra sådana tecken är \t som innebär tabb och \r som står för retur utan rad matning. I figur 7.5 använde vi en aritmetisk operator (+) för att addera talen. Andra operatorer är de vanliga räknesätten -, * och / samt modulus operatorn %. Denna operator används för att ta reda på resten vid heltals division och är mycket användbar.

8 Relations operatorer Det finns ett antal jämförelse operatorer i JavaScript. == är lika med!= är skilt från > är större än < är mindre än > är större än eller lika med < är mindre än eller lika med Val grundade på jämförelser Relations operatorer kan tillsammans med if funktioner användas för att fatta beslut om hur fortsatt program exekvering skall ske. I figur 7.14 används sex if funktioner för att jämföra två inmatade tal. I den första if satsen if ( number1 == number2 ) document.writeln( "<tr><td>" + number1 + " == " + number2 + "</td></tr>" ); testar man om talen är lika stora Där efter följer ett antal tester där man kollar om talen är skilda från varandra, om tal 1 är mindre än tal 2, om tal 1 är större än tal 2, om tal 1 är mindre än eller lika med tal 2 samt om tal 1 är större än eller lika med tal 2. If satser kommer vi att använda mycket i våra script.