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 -20041 Javascript. Mer om layout Kirsten Ribu 04.10.04

2 Kirsten Ribu - Webpublisering - HiO -20042 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 -20043 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 -20044 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 -20045 Eksempel http://www.iu.hio.no/~kirstenr/webpubli sering2004/eksempler/klasser.htm

6 Kirsten Ribu - Webpublisering - HiO -20046 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 -20047 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 -20048 Eksempler: Enkel blokk med bare.. Større blokker med klasser:

9 Kirsten Ribu - Webpublisering - HiO -20049 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 -200410 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 -200411 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 -200412 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 -200413 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 -200414 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 -200415 Kursiv og understreket Font-style: italic Text-decoration: underline, line- through Eksempel

16 Kirsten Ribu - Webpublisering - HiO -200416 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 -200417 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 -200418 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 -200419 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 -200420 Innledende om Javascript Eksempel

21 Kirsten Ribu - Webpublisering - HiO -200421 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 -200422 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 -200423 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 -200424 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 -200425 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 -200426 Javascript -koden

27 Kirsten Ribu - Webpublisering - HiO -200427 Eksempelet

28 Kirsten Ribu - Webpublisering - HiO -200428 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 -200429 Måte 2 Programkoden kan legges samlet inn mellom og. Noen ganger legges det i

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

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

32 Kirsten Ribu - Webpublisering - HiO -200432 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 -200433 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 -200434 Fra window til document Window Document

35 Kirsten Ribu - Webpublisering - HiO -200435 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 -200436 alert

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

38 Kirsten Ribu - Webpublisering - HiO -200438 Prompt()

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

40 Kirsten Ribu - Webpublisering - HiO -200440 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 -200441 DOM

42 Kirsten Ribu - Webpublisering - HiO -200442 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 -200443 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