Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

Kirsten Ribu - Webpublisering - HiO -20041 Javascript. Mer om layout Kirsten Ribu 04.10.04.

Liknende presentasjoner


Presentasjon om: "Kirsten Ribu - Webpublisering - HiO -20041 Javascript. Mer om layout Kirsten Ribu 04.10.04."— Utskrift av presentasjonen:

1 Kirsten Ribu - Webpublisering - HiO Javascript. Mer om layout Kirsten Ribu

2 Kirsten Ribu - Webpublisering - HiO Men først …. Hvordan går det med klasser og blokker? Hjalp det med mailene? Litt mer om klasser og blokker ;-)

3 Kirsten Ribu - Webpublisering - HiO Klasser Hvorfor bruke egendefinerte klasser (class): Ofte vil man angi en stil som bare skal brukes på utvalgte steder i dokumentet. Det kan også være at man vil angi et bestemt utseende på en spesiell del av teksten. Da kan man bruke egendefinerte klasser. Eksempel:.min-tekst { color: #909000; background- color: #000000; font-weight: bold; font- family: Arial; }

4 Kirsten Ribu - Webpublisering - HiO Klasser forts. Klassen angis med et selvvalgt navn, her 'min-tekst', og innledes med punktum. Så skriver man stilene inn i parantesene som vanlig Når klassen skal brukes, angir man dette inne i en eksisterende tagg. Feks slik: Her kommer teksten Legg merke til at her brukes ikke punktumet!

5 Kirsten Ribu - Webpublisering - HiO Eksempel sering2004/eksempler/klasser.htm

6 Kirsten Ribu - Webpublisering - HiO Blokker – Blokker = Egendefinerte inndelinger. Man angir formattering på en del av dokumentet med taggene... div = forkortelse for division, eller del, som avgrenser et rektangulært område av dokumentet. Inne i dette kan man da ha avsnitt, overskrifter, bilder osv.

7 Kirsten Ribu - Webpublisering - HiO Div … Man _må _ ikke sette et klassenavn på alle blokker, (div), men bruken av class (og id) er et kraftigere virkemiddel Det holder å skrive for å dele opp siden i avsnitt (deler = blokker) sørger da for at innholdet starter på en ny linje (som ) – ellers ingenting

8 Kirsten Ribu - Webpublisering - HiO Eksempler: Enkel blokk med bare.. Større blokker med klasser:

9 Kirsten Ribu - Webpublisering - HiO Med bruk av klasser i : div.tittel1 {font-size: 100pt; background: green; color: #ccccdd; font-family: "Times New Roman"; text-align: center} div.tittel2 {font-weight: bold; font-size: 36pt; color: #000066; font-style: italic; font-family: "Courier New"; background-color: red; text- align: center}

10 Kirsten Ribu - Webpublisering - HiO Koden forts. Blokk-eksempler Min første blokk Her plasseres tekst inne i den første blokken, tittel1. Min andre blokk Her plasseres tekst inne i den andre blokken, tittel2.

11 Kirsten Ribu - Webpublisering - HiO Fonter på web Man kan ikke være sikker på at fontene man velger er de som alltid blir vist Nettlesere viser fonter forskjellig, dvs. ikke alle fonter vil kunne vises i alle nettlesere

12 Kirsten Ribu - Webpublisering - HiO Font-familer For å være på den sikre siden spesifiserer man flere fonter Da velger man en gruppe fonter, slik at nettleseren har noe å velge mellom Disse fontene ligner hverandre For å prøve å styre nettleseren kan man legge til en generell font-stil, for eksempel: serif, sans-serif, fantasy…

13 Kirsten Ribu - Webpublisering - HiO Eksempel på stil med fonter h1,h2 {font-family: ”Arial Black”, ”Helvetica Bold”, sans-serif} p {font-family: ”Verdana”, ”Helvetica”, sans- serif} Font-familien må skrives i anførselstegn : ” ” Arial Black Verdana Times New Roman

14 Kirsten Ribu - Webpublisering - HiO Skriftutseende - Fet skrift Font-weight: bold Eller bolder / lighter for å gjøre enda fetere / mindre fet enn bold Ta bort fet: skriv: font-weight: normal

15 Kirsten Ribu - Webpublisering - HiO Kursiv og understreket Font-style: italic Text-decoration: underline, line- through Eksempel

16 Kirsten Ribu - Webpublisering - HiO Font-størrelse font-size: 16px, 16 pt Eller  Small, medium, large  xx-small, x-small, small, medium, large, x-large, xx-large

17 Kirsten Ribu - Webpublisering - HiO Linjeavstand line-height: 150% Betyr avstand mellom linjene Å øke denne kan bety at det er lettere å lese teksten på siden

18 Kirsten Ribu - Webpublisering - HiO Tekstfargen Flere muligheter:  color: red  color: #rrggbb  color: rgb(r%,g%,b%) Eksempel  h1,h2{font: 20pt ”Arial Black”; color: red} p{font: 12pt ”Verdana”; color: #00cccd}

19 Kirsten Ribu - Webpublisering - HiO Plassere tekst Venstre, høyre eller i midten Text-align: center Plasserer teksten i midten Justify: både høyre og venstre

20 Kirsten Ribu - Webpublisering - HiO Innledende om Javascript Eksempel

21 Kirsten Ribu - Webpublisering - HiO Generelt om script Script er programkode som har til hensikt å gjøre en web-side dynamisk (mer attraktiv, bevegelig) + håndtere informasjon som utveksles mellom server og klient. Script deles inn i to hovedklasser: server- script og klient-script. Vi skal snakke om klient-script Serverscript kommer i senere kurst

22 Kirsten Ribu - Webpublisering - HiO Klient-script Klient-script (normalt Javascript) er programkode som bruker ressurser hos klienten = kjører på klientens maskin. Programkoden sendes med web-siden ((X)HTML-koden) fra server til klient Scriptet starter ikke før den er lastet ned hos klienten.

23 Kirsten Ribu - Webpublisering - HiO Bruk av script De mest brukte anvendelsene av klient- script er  Validering (sjekking) av data gitt i et skjema før det sendes tilbake til server  dynamikk som skifte av bilder, statusmeldinger, og objekter som beveger seg over web-siden. Begrepet DHMTL (Dynamisk (X)HTML) er ikke et nytt web-språk, men standard (X)HTML-kode der dynamikken er ivaretatt med Javascript.

24 Kirsten Ribu - Webpublisering - HiO Komponenter i JavaScript JavaScript er et eget programmeringsspråk som ikke må forveksles med Java. Som i andre språk har det strukturer som tilordningssetninger, kontrollstrukturer som if else, løkkestrukturer som for og while og tabellstrukturer.

25 Kirsten Ribu - Webpublisering - HiO Funksjoner Programsetninger for et bestemt formål feks: document.write() Skriver setningen på websiden – For eksempel document.write(”Hei på deg!”) skriver Hei på deg! på skjermen.

26 Kirsten Ribu - Webpublisering - HiO Javascript -koden

27 Kirsten Ribu - Webpublisering - HiO Eksempelet

28 Kirsten Ribu - Webpublisering - HiO Hvordan legge inn JavaScript Et JavaScript kan legges inn på 3 måter i et (X)HTML-dokument:  Programkoden kan legges direkte inn i en (X)HTML-tag knyttet til en hendelse.  Denne metoden er vanlig dersom programkoden består av en til to setninger.  Eksempel: Bilde

29 Kirsten Ribu - Webpublisering - HiO Måte 2 Programkoden kan legges samlet inn mellom og. Noen ganger legges det i

30 Kirsten Ribu - Webpublisering - HiO Måte 3 Programkoden kan legges på en egen fil:

31 Kirsten Ribu - Webpublisering - HiO Generelt om JavaScript Legg merke til at script-koden står mellom standard (X)HTML kommentar-taggene.

32 Kirsten Ribu - Webpublisering - HiO forts Legg også merke til // foran -->. Dette er nødvendig forat script-kompilatoren ikke skal tolke linjen som en del av scriptet. Script-kompilatoren ignorerer nemlig resten av en linje etter //. Kommentarer som ikke skal være en del av programkoden må stå mellom /* og */. Slike kommentarer kan strekke seg over flere linjer.

33 Kirsten Ribu - Webpublisering - HiO Window.document.write() window.document.write(" Hei på deg etc.. ") er et eksempel på hvordan man henter objekter (adresserer objekter). Objektet window er selve web-leseren og underobjektet document refererer til selve (X)HTML-siden som vises. write() er en metode som skriver til html- siden (fyller ut html-siden).

34 Kirsten Ribu - Webpublisering - HiO Fra window til document Window Document

35 Kirsten Ribu - Webpublisering - HiO alert() alert ("Hei på deg") er en standard funksjon for å gi en melding på skjermen i et eget lite vindu. Veldig nyttig når du skal teste ut et script for feil!

36 Kirsten Ribu - Webpublisering - HiO alert

37 Kirsten Ribu - Webpublisering - HiO Koden for alert()

38 Kirsten Ribu - Webpublisering - HiO Prompt()

39 Kirsten Ribu - Webpublisering - HiO Eksempelet: prompt()

40 Kirsten Ribu - Webpublisering - HiO Objekter En "ting" i web-sammenheng som skjemafelter, bilder, stilark, (X)HTML- dokumenter, vinduer etc. Disse "tingene" er organisert hierarkisk i det som kalles Document Object Model (DOM). Mer om DOM senere ….

41 Kirsten Ribu - Webpublisering - HiO DOM

42 Kirsten Ribu - Webpublisering - HiO Ukeoppgaver uke 41 Dersom du ikke har fått til blokker før: Prøv igjen. Begynn med for å lage avsnitt (blokk), utvid med en klasse for å påvirke det som er inni avsnittet (blokken). Utvid stilarket med font-size, font-weight, font-style der det passer. Prøv med ulike fonter og størrelser. Lag noen javascript som vist i dag på forelesningen – lek med mulighetene Besvar: Hva er javascript? Finn ressurser på web.

43 Kirsten Ribu - Webpublisering - HiO Neste gang Rammer Mer javascript


Laste ned ppt "Kirsten Ribu - Webpublisering - HiO -20041 Javascript. Mer om layout Kirsten Ribu 04.10.04."

Liknende presentasjoner


Annonser fra Google