Konstruktion af websites - 1. kursusgang Øvelse 1 opsætning af tekst

Transkript

1 Konstruktion af websites - 1. kursusgang Øvelse 1 opsætning af tekst Lav ved hjælp af teksteditor og browser en webside, der indeholder elementer som den herunder - tilføj desuden din udgave af hjemmeside links til eksterne sites(se følgende sider for hjælp til HTML): 1

2 HTML guide Kommentarer <!Dette er en kommentar, der ikke har indflydelse på grund af udråbstegnet i starten ikke har indflydelse på hjemmesidens udseende> HTML-koden <Html> <!Dette er som html koden viser at dokumentet er et HTML-dokument> </Html> Head Head placeres før body og indeholder bl.a. sidens titel: <Head> <Title>Dette er titlen</title> </Head> Body <Body> <!Body containerkoden omslutter den del af dokumentet, der vises i browseren (medmindre, der er tale om kommentarer> </body> Overskrift <H1>Det er en overskrift H1</H1> Brødtekst <Basefont size=7> Større kan brødtekst ikke blivelinjelængde og afsnit <P>Denne linje er det første afsnit</p> <P>Denne linje er det andet afsnt</p> <P>Denne linje er øverst <Br>Denne linje er nederst</p> <P>Dette er et helt nyt afsnit</p> Skillelinie <Body> Denne linje er øverst <Hr> 2

3 Denne linje er under en linie Tekststyles <I>Denne linje er kursiv</i> <Br> <B>Denne linje er fed</b> <Br> <U>Denne linje er understreget</u> Justering <P Align=left>Teksten er venstrestillet</p> Tekstfarve <Font color=red> Denne tekst er rød Baggrundsfarve <Body Bgcolor=red> baggrunden er rød </Body> Indsættelse af billeder <Img Src=billedets navn Width=brede Height=højde Border=rammens bredde Align=placering> Billede som baggrund <Body background=billed navn> </Body> Link til adresse på internet <A Href= Universitet</A> Link til lokal fil <A Href=filnavn.htm>Lokal fil</a> Link til anker og definition af anker <A Href=#kapitel1>Link til kapitel 1</A> <H1><A Name=kapitel1>Kapitel 1</A></H2> Link der aktiverer mailprogram <P>Skriv til<a nyvang</a></p> 3

4 Dreamweaver Dreamweaver gør det med sin grafiske brugergrænseflade let at opbygge websider uden umiddelbart at skulle skrive html koderne selv. I Dreamweaver arbejdes direkte på websidens design med hjælp fra en række værktøjspaletter, der tændes i Window menuen. De vigtigste ses herunder: Objects: Til indsættelse af bl.a. billeder HTML styles: Til formattering af tekst Properties: Kontektsafhængig palette bl.a. til indsættelse af links 4

5 Site files I Dreamweaver håndteres filerne i det aktuelle website gennem paletten Site files (åbnes i window menuen): Site files er en sitemanager, der gør det lettere at overskue de filer og mapper man arbejder med samt at flytte filerne samlet til en webserver. Øvelse 2 Tekst, billeder og links i Dreamweaver Opret flere forbundne websider, hvor du samtidig eksperimenterer med opsætning og tekst og billeder. Anvendt Site Files til at holde styre på filerne. 5

6 Tabeller For at indsætte en tabel trykkes på: Det er muligt at ændre en allerede indsat tabel ved at markere den med et enkelt klik i dens yderste ramme og ændre nedenstående værdier i Properties vinduet: Cell Spacing: Afstanden mellem cellerne i tabellen. Cell Padding: Afstanden mellem cellernes indhold og deres kant. Border: Bredden på den synlige ramme mellem cellerne i tabellen. Bemærk at Table Width og Cell Width begge kan gives faste værdier (antal pixels), relative værdier (antal % eks. tabellen skal udgøre af hele skærmens bredde) eller en flydende værdi, der så får tabellen til at tilpasse sig skærmens bredde. Øvelse 3 tabeller Eksperimenter med indsættelse af tabeller (cell spacing, cell padding, border). 1. Indsæt tekst og billeder i en tabel brug tabellen til at styre elementernes indbyrdes placering. 2. Brug en usynlig tabel til at holde tekst og billede sammen således, at billedet ikke flytter sig og teksten ikke ændrer linjelængde, når størrelsen på browservinduet ændres. 3. Ved at gå ind i selve HTML koden kan man faktisk tilføje en celle et baggrundsbillede. Prøv hvis du har tid background= billednavn som attribut til en af TD koderne inde i HTML visningen. Dreamweaver kan hverken indsætte eller vise disse baggrundsbilleder. Derfor er det her nødvendigt at bruge en browser til at se resultatet. 6

7 HTML guide til tabeller HTML-koden til en tabel består først og fremmest af containerkoden <TABLE>. Derudover bruges hhv. <th>, <tr> og <td> til at indsætte hhv. overskrifter, rækker og celler i tabellen. Disse 4 grundlæggende tabel HTML koder har hver for sig en ret lang række attributter, hvilket i praksis hurtigt gør brugen af dem meget uoverskueligt. Har man brug for at arbejde meget med store komplicerede lister, er det derfor ofte en fordel med en grafisk editor som f.eks. Dreamweaver, der kan generere den nødvendige kode udfra de ændringer man foretager med musen. Alligevel vil det ofte være en fordel at have kendskab til de forskellige attributters virkemåde, således at man kan gennemskue og arbejde videre på den kode editoren genererer, eller evt. selv rette koden til så det hele ser rigtigt ud. Nedenstående skema viser de fire tabel-koder og en række af deres mest almindelige attributter. En komplet liste over tabel kodernes attributter kan findes i de mange forskellige HTML ordbøger på markedet. <TABLE></TABLE> <TR></TR> <TH></TH> <TD></TD> Indsætter og afslutter en tabel. Har flg. attributter: Align= left, center, right m.m.(justerer tabellen) Border=n (bredden på tabellens ramme (pixels)) Cellpadding=n (afstand mellem indhold og ramme) Cellspacing=n (afstanden imellem cellerne) Width=n (bredden på tabellen (pixels eller % af vinduet) Noflow (ingen tekstombrydning) Nowrap (ingen liniedeling i tabellen) Indsætter en række i tabellen. Har flg. attributter: Align= left, middle, right (justerer rækken) Bgcolor= (den enkelte rækkes baggrundsfarve) Indsætter en overskrift. Har flg. attributter: Align= left, middle, right (justerer overskriften) Bgcolor= (overskriftfeltets baggrundsfarve) Colspan= (antal kolonner overskriften strækker sig over) Indsætter en celle. Har flg. attributter: Align= left, middle, right (justerer cellen) Bgcolor= (den enkelte celles baggrundsfarve) Width=n (bredden på cellen (pixels eller % af tabellen) Colspan= (antal kolonner skal cellen strække sig over) Rowspan= (antal rækker skal cellen stække sig over) 7

8 Forskellige typer links Links er noget af det mest grundlæggende for, at kunne navigere på World Wide Web. Uden links skulle man gætte sig til adresserne på de dokumenter, man ønsker at se. Links kan udformes på en række forskellige måder; som understreget, farvet tekst, som billeder, som dele af billeder eller som standardknapper med tekst på. Fælles for disse er, at de kan åbne andre dokumenter på enhver tilgængelig web-adresse i verden og/eller få browseren til at springe til et bestemt sted i et dokument, starte download af filer (også fra ftp-servere) eller aktivere mail-programmet med en forudbestemt adresse i modtagerfeltet. Tekst som link At lave et stykke tekst til et link foregår med HTML koden: <A href=filnavn.htm> tekst</a> -hvor filnavn.htm er navnet på det dokument der linkes til, og tekst er den tekst, der i browseren typisk kommer til at fremstå som blå, understreget tekst man kan klikke på. Skriver man blot et filnavn, skal denne fil ligge i samme mappe, som det dokument der linkes fra. Ligger filen i en undermappe, skal man angive denne mappes navn efterfulgt af filnavnet, ligesom man skal angive, hvis filen ligger i en mappe længere oppe i hierakiet: Links til filen johnny.htm i mappen suspekte_musikere : <A href= suspekte_musikere/johnny.htm>link til Johnny</A> Ønsker man at linke til en fil på en anden server, skal hele adressen angives: <A href= til DR-online</A> <A href=ftp://hum.auc.dk>link til hum s ftp server</a> Det er også muligt med et link at åbne mailprogrammet i Netscape Navigator eller Microsoft internet Explorer: <A href=mailto:nyvang@hum.auc.dk>skriv til Tom</A> Bruges ovenstående kode åbnes mailprogrammet, med nyvang@hum.auc.dk indskrevet i modtagerfeltet, men der er ingen garanti for at mailprogrammet iøvrigt er konfigureret korrekt. Billeder som links Man kan udover tekst bl.a. også gøre billeder til links. Det foregår stort set på samme måde som med tekst; man markerer det ønskede billede, og indtaster man adressen på det dokument der skal 8

9 linkes til (jfr. do.), eller vælger en lokal fil ved at vælge browse. Når et billede er et link, vises det ved, at det får en farvet ramme omkring sig i browseren (med mindre det er slået fra). Den kode der genereres for at et billede bliver et link, er en kombination af indsæt billede koden og tekstlink koden. I det nedenstående eksempel fungerer billedet DR.gif som et link til <A href= src=dr.gif></a> I Dreamweaver ser det således ud i properties dialogboksen billedet er markeret og linkadressen angivet i Link feltet: Imagemaps (klikbare områder) Når man som vist ovenfor bruger et billede som link, er det hele billedet der linker til samme dokument. Det vil sige, at lige meget hvor på billedet brugeren klikker, springer man til det angivne dokument. Ved at bruge Imagemaps har man mulighed for at definere et til flere områder på et billede, der skal linke til forskellige sider. HTML koden for Imagemaps er grundlæggende meget enkel, men at finde frem til koordinaterne for de ønskede klikbare områder på et billede, kan være en meget omstændig sag. Derfor anbefales det på det kraftigste, at man bruger en grafisk editor til at gøre arbejdet for sig. Nedenstående eksempel viser et Imagemap på billedet oswald2sm.gif, der fungerer som link til den fiktive fil lee_harvey_sings_the_blues.htm Man aktiverer ImageMap delen af Dreamweaver ved at markere billedet og åbne nederste del af Properties paletten: Herefter kan man bruge de forskellige markeringsværktøjer, der kommer frem, til at markere sine hotspots. 9

10 De klikbare områder på ImageMaps kan have facon som firkanter, cirkler eller polygoner, men koordinaterne kan meget hurtigt løbe op i meget uoverskuelige størrelser. (Prøv selv at se på HTML koden for et ImageMap når du laver øvelserne) Ankre - links til bestemte steder i dokumenter Ved at bruge såkaldte ankre, kan man lave links til bestemte steder i dokumenter. Det betyder, at man f.eks. kan lave et index over et meget langt dokument, hvorfra man kan springe til de enkelte afsnit, eller springe tilbage til toppen af et dokument, uden at skulle hente dokumentet igen. Princippet bag ankre er, at man angiver de steder i et dokument, hvor man ønsker at kunne springe direkte til, ved at give dem navne. Det foregår ved, at man stiller sig der hvor ankeret skal være, og vælger Insert Named Anchor fra Invisibles i Object paletten: Når man vil linke til et anker i et andet dokument, skal man i feltet Link angive dokumentets navn og placering, efterfulgt af # og navnet på ankeret. Linker man til et anker i samme dokument, skal man blot skrive # efterfulgt af ankerets navn i feltet Link To. HTML koden for ankre og links til ankre ser således ud (bemærk # foran ankernavnet): Indsættelse og navngivning af et anker: <A name=afsnit1>indledning</a> Link til et anker ved navn afsnit1 : <A href=#afsnit1>link til Indledningen</A> Øvelse 4 links 1. Hvis du endnu ikke har nået det, så lav et par almindelige tekstlinks til såvel egne hjemmesider som eksterne adresser. 2. Indsæt to eller flere billeder og gør dem til links til såvel egne hjemmesider som eksterne adresser. 3. Indsæt et billede, og opdel det i klikbare områder, med forskellige links. Læg mærke til omfanget af HTML kode. 4. Lav en ny side og indsæt en lang tekst. Indsæt derefter en række ankre ved de enkelte afsnit, og lav en oversigt i toppen af dokumentet, hvorfra du kan hoppe til de forskellige ankre. 10

11 2. Kursusgang konstruktion af websider Formålet er at give den studerende indsigt i teknikker, der på forskellig vis letter arbejdet med det visuelle design og håndtering af større websites. Der arbejdet med Dreamweaver ud fra emnerne: Templates - template som støtte i produktion og redesign. Library - elementer til genbrug på flere sider. Frames - samspil mellem flere html filer i samme browservindue. Stylesheets - primært som værktøj til tekstformattering. Layers introduktion til indhold i lag. Øvelse 1 genbrug af sideelementer Opret templates og library elementer, der kan bruges i et kursusmateriale til et kursus i fremstilling af dansk smørrebrød. Overvej i hvilet omfang templates og library elementer kan indgå således, at det ud fra et grundmateriale er let at opbygge materiale om nye typer smørrebrød. Templates bruges i Dreamweaver til standardsider, hvor faste og editerbare elementer blandes. Ændring af template fører til ændring af de sider, hvor den er anvendt. Ny side på basis af template oprettes ved at vælge File menuen og punktet New from template. Library item s er objekter, der kan trækkes ind og gøres til del af eksisterende side. 11

12 Øvelse 2 anvendelse af frames Lav med frames en menubar, der gør navigationen i smørrebrødskurset mere overskuelig. Overvej samtidig fordele og ulemper ved frames. Frames opdeler browservinduet til at vise mindst to html dokumenter samtidig et tredje dokument, framesettet, holder styr på opdelingen. Frames oprettes i Dreamweaver ved at trække de ønskede frames fra Objects menuen og ind i arbejdsområdet. Ved links på tværs af frames vær opmærksom på Target dvs. målet for linket. En frame har et navn! hvilket ikke må forvekslet med navnet på den fil framen indeholder. Supplerende materiale om frames er indsat på de følgende sider. 12

13 Rammer (frames) supplerende beskrivelse Rammer bruges til at opdele en hjemmeside i flere forskellige områder. Hver ramme indeholder ét HTML-dokument, der kan skiftes uafhængigt af de andre rammer. Dette benyttes oftest i forbindelse med menuer i den ene side af skærmen (eller i top/bund), hvorfra men kan vælge indholdet på resten af skærmen. For at dele sin hjemmeside op i rammer skal man lave et såkaldt frameset et HTML-dokument som ikke indeholder nogen decideret information der skal vises på skærmen (tekst, billeder og lign.) men kun indeholder information om hvordan skærmen skal opdeles, og hvilke HTML-dokumenter der skal vises i hvilken ramme. Til at opdele siden i rammer bruges containerkoderne <frameset> og <frame> Rammeopdeling Man arbejder med hhv. lodret (cols) og vandret (rows) rammeopdeling. Herunder vises koden for vandret (rows) rammeopdeling: <frameset rows= 158,* > <frame src= oeverst.htm name = oeverste_ramme > <frame src= nederst.htm name = nederste_ramme > </frameset> Dette stykke HTML-kode fortæller browseren at skærmen skal deles op vandret i to dele. Den øverste del skal være 158 pixel høj, mens * fortæller, at den nederste ramme skal fylde resten af skærmen. I øverste ramme placeres dokumentet oeverst.htm (og rammen navngives overste_ramme hvilket man skal bruge senere for at lave et link til denne ramme) mens dokumentet nederst.htm placeres i den nederste ramme ( nederste_ramme ) Resultatet bliver som vist til højre. Følgende eksempel laver en lodret opdeling (cols) <frameset cols= 158,* > <frame src= venstre.htm name = venstre_ramme > <frame src= hoejre.htm name = hoejre_ramme ></frameset> Resultatet bliver som vist til højre. 13

14 Nu nøjes man ofte ikke med enten lodret eller vandret rammeopdeling, men kombinerer typpisk de to metoder; laver f.eks. en lodret opdeling (cols), og opdeler yderligere den ene ramme vandret, således at man får tre rammer. Fremgangsmåden er som nedenstående, hvor man i stedet for <frame src> indsætter et nyt <frameset>: <frameset cols= 158,* > <frameset rows= 118,* > <frame src= oeverst.htm name = oeverste_ramme > <frame src= nederst.htm name = nederste_ramme > </frameset> <frame src= hoejre.htm name = hoejre_ramme > </frameset> Resultatet bliver som vist til højre. Links mellem rammer (target) Når man skal lave links mellem rammer foregår det ved at udvide den almindelige link-kode med attributten target. Koden der åbner dokumentet weber.htm i rammen hoejre_ramme ser således ud: <a href= weber.htm target= hoejre_ramme >Klik her for at åbne Weber</a> Dette er et link, der åbner en ny side i rammen til højre I denne ramme åbnes dokumentet 14

15 Øvelse 3 style sheets Opret forskellige typer af stylesheets og brug dem til at kontrollere formatteringen af siderne fremstillet i de foregående øvelser. CSS styles giver mulighed for at ændre på de tidligere faste html tags eller oprette helt nye klasser af tags. Ændringer/ny tags oprettes ved at klikke på ikonerne nederst i vinduet: I New Style vinduet vælges hvilken CSS style, der skal oprettes. I eksemplet ses de parametre, der kan justeres for en paragraph tag (P). 15

16 Vælges redigering af style sheet fremkommer dialogboksen her til højre. CSS styles kan placeres i eksterne tekst filer (eksempelvis styles.css). Når CSS styles placeres i eksterne dokumenter og linkes til html filerne i et web-site kan styles i den eksterne fil og der styles på alle de html sider, der er linket til ændres. Nedenstående eksempel viser html koden for ændring af P og H2 tags i et helt html dokument: <HEAD> <style type="text/css"> P{color: green} H2{color: red; font-size: 35pt; font-style: italic} </style> </HEAD> Nedenstående eksempel viser html koden for oprettelse af link til eksternt css styles dokument: <HEAD> <link rel="stylesheet" href="test.css" type="text/css"> </HEAD> Syntaksen i det eksterne dokument følger (retteligt: kan følge) nedenståede mønster: P{color: green} H2{color: red; font-size: 35pt; font-style: italic} Øvelse 4 - layers Layers giver mulighed for at arbejde med lag på web sider. Eksperimenter med mulighederne for at placere materiale i lag og svar på spørgsmålet: Hvilket potentiale ser du i layers? Layers tegnes direkte i arbejdsområdet efter af have trykket på Layer knappen i Objects paletten. Bemærk af layers introduceres den 3. dimension på web siden. 16

17 3. Kursusgang konstruktion af websider Det primære formål er at give den studerende indsigt i forskellige teknikker, der har potentiale for at udvide brugerinteraktionen på web-sider. Herunder berøres også mulighederne for brugerkommunikation gennem formularer på websider. Der arbejdes derfor med Dreamweaver ud fra emnerne: Behaviors. Layers timelines. Formularer. Brug af browserplugins. Øvelse 1 - Dynamik på websiden brug af behaviors Eksperimenter med behaviors. Opret billedlink, hvor billeder udskiftes ved roll-over og klik. Behaviors kan bruges til eksempelvis dynamisk udskiftning af billeder på en webside. Når billedet er markeret tildeles den behavior, der vælges automatisk dette billede. Show Events for giver mulighed for at vælge, hvilken browser, man vil kunne vælge behaviors til. Øvelse 2 - Animation med layer og timelines Anvend timelines funktionen til optagelse af animation. Overvej anvendelsesmulighederne for sådanne animationer. Timelines funktionen gør det muligt i 17

18 optage animationer, hvor layers flyttes rundt i browservinduet. Øvelse 3 - Formularer Opret formular, hvor resultatet sendes til en adresse. Formularer indsættes med Forms i Objects paletten. En formular bestående af en række indtastnings- og valgmuligheder. I Dreamweaver markeres et formularområde med knappen markeret på figuren her til højre: Eksempler på anvendelse af forskellige formularelementer ses på de følgende sider. 18

19 Tekstfelter bruges til indtastning af tekst. Tekstfelters størrelse kan tilpasset ligesom en starttekst kan tilføjes. Radioknapper anvendes normalt flere af gangen. Ved at give flere radioknapper samme navn forhindres det, at mere end en kan være valgt. For at skelne mellem forskellige knapper skal Checked Value være forskellige. Afkrydsningsfelter afvendes, hvor man vil have mulighed for mere end et valg. Afkrydsningsfelter skal i modsætning til radioknapper forsynes med unikke navne. Checked Value vil blive vist i de data, der sendes fra formularen. 19

20 For at kunne indsende formularen indsættes end Submit knap. Ved markering af afgrænsningen omkring formularen vælges Method de vi her arbejder med afsendes vælges POST. For at arbejde uafhængigt af den lokale klients mailprogram bruges et script på serveren. Scriptet kaldes på adressen: Scriptet på serveren skal vide, hvor den indsendte formular skal placeres. Det aktuelle script kan sende data videre som mail. For at kunne sende mail videre skal modtageren angives. Dette gøres i et Hidden Field. Feltet skal have navnet Recipient og Value sættes til en almindelig adresse. For at Vær opmærksom på, at websiden ikke nødvendigvis behøver være uploaded til server for at kunne sende kalde script på server og dermed sende formulardata videre til adressen. Øvelse 4 - Brug af plugins Indsæt videoklip på en webside videoklip kan hentes på eksempelvis: Plugins er små programmer, der overtager hele eller dele af browservinduet. Pluings bruges eksempelvis til visning af video. 20

21 Indætning af format, der kræver plugin sker gennem Special i Object paletten. Parameters afhænger af den aktuelle plugin og dækker over de muligheder man har for at tilpasse anvendelsen af den givne plugin. Øvelse 5 opret egen præsentationsside Opret side, der præsenterer dig selv over for andre på IKT og Læring. 21