Jens Chr. Stenz Justesen
| 9.30-10.30 | Avanceret Webdesign: Brug af Skabeloner og Biblioteksobjekter i Dreamweaver. Formularer. |
||||
| 10.30-10.40 | Pause | ||||
| 10.40-12.00 | Flash: introduktion til effekter med Flash. Animation med tweening. Indsætte Flash-movie i html. | ||||
| 12.30-13.15 | Frokostpause |
||||
| 12.00-??.?? | JavaScript og Serverside-teknologi. Ex: Php og MySQL: Nogle introducerende demonstrationer til principperne bag og hvad man kan bruge det til. | ||||
Øvelse 1
Skabeloner i Dreamweaver:
Inden man opretter en skabelonfil er det nødvendigt først at beslutte sig for hvilke elementer der skal gå igen på de sider som skal baseres på skabelonfilen. En skabelonfil i Dreamweaver består af nogle redigerbare felter (Editable Regions) som man definere, når man opretter skabelonen. Når skabelonen er færdig, gemmer man den som en skabelonfil (*.dwt). Næste gang man så åbner en ny html-side kan man vælge, at siden skal bruge denne skabelon. De redigerbare områder kan man, som navnet antyder, redigere i, dvs. rette, tilføje og slette indhold.
I resten af skabelonfilen er elementerne låst og dem kan man kun rette i, hvis man åbner selve skabelonfilen i Dreamweaver.
Hvis man tilmed har defineret sit websted i Dreamweavers Site Manager (dette SKAL I gøre for at kunne gå videre med øvelsen), så finder programmet selv ud af at opdatere de sider der bruger skabelonen, hvis man gerne vil rette i skabelonfilen.
Sådan opretter man en skabelonfil i Dreamweaver MX:
1. Start med at oprette en undermappe på dit websted der hedder: "Templates" (Mappen SKAL hedde det, for ellers kan Dreamweaver ikke finde skabelonerne).
2. Højrekllik på dette link: bileksempel.dwt og vælg gem destination som. Gem dokumentet i mappen "Templates"
3. Åben dokumentet bileksempel.dwt i Dreamweaver MX
4. Som I kan se på siden består den af en tabel som skal bruges til at gemme oplysninger om forskellige biltyper. I skal forestille jer at personen (Jens Jensen) skal oprette f.eks. 50 sider der ser sådan ud, og derfor vælger han at bruge en skabelon. Det eneste han så behøver er at indtaste de forskellige biltypers navne, produktionsår og indsætte billede af bilerne.
Som skabelonen er udformet nu er der ikke indsat nogen redigerbare områder. Det skal I gøre:
Placer musemarkøren i tabelcellen til højre for den tabelcelle hvor der står "Bilens navn:". Denne tabelcelle skal laves om til et redigerbart område:
5. -> ->
6. Skriv et navn i feltet "Name:"som I kan bruge til at identificere det redigerbare område ved, f.eks. "bilnavn".
7. Klik OK.
Som I kan se opretter Dreamweaver en blå ramme i cellen som angiver at det er et redigerbart område. Når I åbner en ny html-side baseret på denne skabelon kan I altså nu skrive i feltet.
8. Opret redigerbare områder alle de steder det er nødvendigt på siden. Husk at gemme skabelonfilen.
Sådan opretter man en html-side baseret på en skabelonfil:
Nu hvor skabelonfilen er klar, skal den i brug. Det gør man ved at åbne en html-side og så vælge den skabelonfil man vil bruge. Det gør man sådan her:
1. Vælg > i menubjælken foroven
2. Klik på fanebladet "Templates" ovenover vinduet.
3. Vælg det Site (websted) du har defineret, altså der hvor har oprettet mappen "Templates". Det gør du i den første kolonne til venstre, der hvor der står "Templates for:".
4. Når du har markeret dit Site skulle du gerne få en oversigt over hvilke skabelonfiler du har i mappen "Templates". Det kommer frem i næste kolonne, der hvor der står "Site "navnet på dit Site"". Marker den skabelon du vil bruge.
5. Tryk på knappen "Create".
6. Nu kan du udfylde alle de redigerbare områder med den ønskede information. Når siden er færdig skal den gemmes som en ganske almindelig html-fil.
Biblioteksobjekter
Her er en kort gennemgang af hvordn man opretter biblioteksobjekter. Først skal man oprette en mappe på sit Site der hedder "Library". Her skal du gemme dine biblioteksobjekter. Navnet er nødvendigt for at Dreamweaver kan finde ud af hvor dine biblioteksobjekter er gemt.
1. Vælg > i menubjælken foroven
2. Vælg fanebladet "General" og "Basic page" i kolonnen "Category:"
3. I vinduet "Basic Page:" skulle der gerne være en mulighed der hedder "Library Item". Vælg den.
4. Tryk på knappen "Create"
Det ser ud som om Dreamweaver bare åbner en helt ny html-side, men det er ikke helt tilfældet. Hvis du klikker på kodevisning, kan du se at der mangler de sædvanlige html-koder som der er i et normalt html, dokument. Et biblioteksobjekt er nemlig beregnet til at blive indsat i en html-side, som allerede har alle de nødvendige koder i forvejen.
Forsøg nu at oprette et biblioteksobjekt, f.eks. en tekstmenu som du vil bruge på mange sider. Spørg om hjælp hvis du sidder fast :-).
Formularer:
| Navn | Udseende på siden | Forklaring/brug |
| Text Field |
|
Her kan brugeren indtaste tekst. Bliver f.eks. brugt til brugernavn, password m.m. |
| Textarea |
|
Textarea bliver brugt til at indtaste længere tekster i. Bliver f.eks. brugt til at sende emails fra en webside, eller skrive et indlæg tilet forum. |
| Button |
|
Indsætter en knap med en funktion. Bliver f.eks. brugt til at sende formularer når brugeren har udfyldt alle felter. |
| Check Box | En check box kan være markeret eller ikke markeret med et flueben. Bliver brugt til at markere flere valg blandt mange på en liste. | |
| Radio Button | En Radio Button kan være markeret eller ikke markeret. Bliver brugt når brugeren skal vælge én og kun én, blandt flere muligheder. | |
| List/Menu | Indsætter en Liste/Menu man kan vælge fra. Elementerne på listen kan man selv tilføje. Bliver brugt i situationer hvor brugeren skal vælge mellem forskellige muligheder fra listen. | |
| File Field | Indsætter en tesktfelt hvor man kan indsætte stien til en fil. Bliver f.eks. brugt til at sende filer til en server fra en hjemmeside. | |
| Image Field | Image field indsætter et billede som man kan bruge som knap. Minder i funktion om Button. Bliver brugt som erstatning til standardknapperne. Giver mulighed for at indsætte knapper der passer layout-mæssigt passer til resten af siden. |
html-formularer
JavaScript
Dynamicdrive.com - side med JavaScript
Litteratur
Jamsa, Kris. Web Programmering. IDG Forlag. 1999. Elektronisk udgave i pdf (2.8 Mb) - Bogen indeholder en gennemgang af Perl, CGI, Java og JavaScript med mere. Det er ikke nogen udtømmende gennemgang, men nok til at give et overblik over de forskellige teknologiers anvendelsesområder.