Opret en formular i Dreamweaver

Transkript

1 Opret en formular i Dreamweaver. Åben det html-dokument hvor du vil have din formular skal være på. 2. Klik i det felt (DIV eller tabel) hvor du vil have din formular skal være. Du kan se du er i feltet når cursoren er i feltet og blinker Klik på Form () i Insert-panelet. Du har nu indsat en rød ramme, der definerer din formular. Alle informationer indenfor denne røde ramme kommer med i formularen. 4. Det kan være en god idé at indsætte en tabel nu inde i din formular (den røde ramme). Med en tabel kan du bedre styre hvordan din formular kommer til at se ud og hvordan felterne og teksten står i forhold til hinanden. Opret derfor en tabel med 0 rækker og 2 kolonner inde i formularen. 5. Klik i den første celle i tabellen og skriv Navn:. Klik herefter i cellen til højre for Navn: og klik på TextField (2) i Insert-panelet. Dette indsætter et felt som brugeren af din hjemmeside kan skrive sit navn i. 6. I properties-panelet skriver du Navn i feltet, der er markeret med en cirkel herunder.

2 7. Opret nu flere felter efter samme princip på din side: Adresse, Postnr, by, telefonnummer, . Husk hver gang at skrive navnet på feltet i properties-panelet. 8. Nu skal brugeren af din hjemmeside svare på nogle spørgsmål. Lad os sige at du gerne vil vide om brugeren er en mand eller en kvinde. 9. Skriv teksten du ønsker i tabellen og klik herefter på Radio Button () i Insert-panelet Klik på den første Radio Button. I Properties-panelet skal du skrive Køn ved cirkel, for det er det spørgsmål du stiller din bruger. Ved cirkel 2 skriver du det samme som brugeren kan se ved siden af Radio Button. Dette fortæller dig, at hvis brugeren klikker i denne knap (checked Value) er det fordi brugeren er en kvinde.. Gør det samme med knappen for mand. Der skal bare stå mand i stedet for kvinde ved cirkel 2 og der skal stadig stå Køn ved cirkel. 2. Næste spørgsmål du stiller din bruger, kan være hvilke kataloger brugeren ønsker at bestille. Her må man gerne vælge flere, derfor skal du bruge en anden knap end en Radio Button, nemlig en Check Box.

3 3. Skriv teksten du ønsker i tabellen og klik herefter på Checkbox () i Insert-panelet Klik på den første Checkbox. I Properties-panelet skal du skrive Katalog ved cirkel, for det er det spørgsmål du stiller din bruger. Ved cirkel 2 skriver du det samme som brugeren kan se ved siden af din Checkbox. Dette fortæller dig, at hvis brugeren klikker i denne knap (checked Value) er det fordi brugeren er en vil bestille et katalog om Storbyferie. 5. Gør det samme med knappen for Trekking og Daseferie. Der skal bare stå Trekking (og daseferie) i stedet for Storbyferie ved cirkel 2 og der skal stadig stå Katalog ved cirkel. 6. Hvis du vil vide hvor gammel din bruger er, kan du oprette en liste, hvor man kan vælge alder. Det skal du prøve nu...

4 7. Klik i den celle hvor du vil have din liste. Klik herefter på List/Menu () i Insert-panelet. 8. Klik på list Values (2) i Propertiespanelet. I listen der kommer frem skriver du det indhold du gerne vil have på din liste. Med + knappen tilføjer du et ekstra punkt på listen Indsæt to knapper (3) i tabellen - en send og en annuller-knap. Klik på sendknappen og i Porperties-panelet klikker du i Submit form knappen. På Annuller-knappen gør du det samme - dog skal du klikke i Reset form i Properties-panelet Du kan oprette en class (i css-panelet) hvis du ønsker at dine felter og knapper skal se anderledes ud. 2. Nu skal du bare have send-knappen til at virke. I dette eksempel bruges one.com som server, derfor finder du formmail på deres hjemmeside under support.

5 22. Koden til din formular ser således ud (kan variere fra internetudbyder til internetudbyder): <FORM method= post action= Mail.pl > <input type= hidden name= recipient value= > <input type= hidden name= subject value= Her kan du skrive en emne-tekst > <input type= hidden name= redirect value= dk/nyside.html > </FORM> Nu skal denne kode bruges i Dreamweaver. 23. Klik på den røde ramme i Dreamweaver. Hvis du ikke kan få fat på den klikker du evt. på din sendknap og herfeter på form#form nederst i vinduet. 24. I properties-panelet I Action-feltet indsætter du det fra den første linie (fremhævet med rød): <FORM method= post action= Mail.pl > skal erstattes af det domæne du har 25. De 3 næste linier er Hidden. Det vil sige at det er informationer bbrugeren ikke ser, men som bruges til at bestemme hvor mailen skal sendes hen (ofte til dig eller din kunde), om brugeren skal have en tak for din mail -besked på hjemmesiden, og om der skal være et emne på den mail du eller din kunde modtager fra brugeresn af din hjemmeside, Nu skal de sættes ind i Dreamweaver. 26. Klik et sted i din tabel (evt ved siden af dine kanpper). Klik herefter på Hidden Fiels i Insert-panelet. Et lille gult symbol fremkommer der hvor du klikkede. Klik på det gule symbol og kopier indholdet fra linie 2 markeret med rødt) i koden ind i Dreamweaver: <input type= hidden name= recipient value= mail@dit-domæne.dk >

6 Dette fortæller hvem der skal modtage en mail med informationerne fra formularen. Husk at skrive din egen mailadresse i feltet value 27. Klik ved siden af det første Hidden Field og indsæt et nyt Hidden Field. Klik på det gule symbol og kopier indholdet fra linie 3 markeret med rødt) i koden ind i Dreamweaver: <input type= hidden name= subject value= Her kan du skrive en emne-tekst > Her kan du bestemme hvad der skal stå i emnet i den mail du modtager fra hjemmesiden. 28. Klik ved siden af det andet Hidden Field og indsæt endnu et Hidden Field. Klik på det gule symbol og kopier indholdet fra linie 4 markeret med rødt) i koden ind i Dreamweaver: <input type= hidden name= redirect value= dk/nyside.html > Her sendes brugeren videre til en tak-side, når de har trykket på send-knappen. Tak-siden skal du selv oprette - evt. ud fra din template, og det er stien til internettet der skal stå ved value 29. Upload din side og tjek om din formular virker Til sidst kan du oprette en Class (fra dit CSS-styles panel) og tiæføje en class til dine felter og knapper i formualren. så de bliver pænere (evt. hvis du vil have en anden baggrundsfarve på fwelterne, en anden font, definere rammebredden, feltbredden m.m. - prøv dig frem...

7 Huskeliste til dit site i Dreamweaver. Køb et domæne (evt. hos eller et andet selskab) 2. Tegn dit site på et stykke papir. Tænk over menuer, placeringer, grafik, indhold og antal sider du skal have. 3. Opret grafik i Photoshop (banner, fotos, evt. knapper og baggrund). Evt kan du prøve at lave hele dit layout her, så du får en fornæmmelse for hvordan din hjemmeside kommer til at se ud. 4. Åben Dreamweaver 5. Opret et nyt site (site > new site) 6. Opret et nyt css-dokument. Gem det i dit site- Luk css-dokumentet 7. Opret en ny html-side og gem den i dit site. 8. I css-panelet på din html-side linker du til dit css-dokument 9. På din html-side skal du give siden en titel. 0. Opret DIV er og andre styles (body, p, h) og sæt dem ind på din side. Husk at tjekke din side i browseren ofte 2. Opret en template ved at indsætte Editable Regions på siden, hvor du vil kunne rette. Vælg herefter save as template. 3. Opret nye sider baseret på din template (husk at din forside skal hedde index.html) 4. Færdiggør de nye sider med tekst, billeder, gallerier m.m. Husk at lave links på din template, så hele siden hænger sammen. 5. Upload siden og nyd din hjemmeside...

8 Spry-menuer Spry-menuer i Dreamweaver kan være drop-down-menuer, faneblade og en kolapse-menu. Du får prøvet dem alle af i disse opgaver: Spry menu Bar I Insert-panelet vælger du SPRY. Herefter klikker du på Spry Menu Bar Spry Menu Bar er en drop-down-menu, der kan være både lodret og vandret. Du kan ændre udseende via dit stylesheet og hvis du vil have lidt hjælp til hvad du skal rette for at få menuen til at se ud som du vil det kan du klikke på Customize this widget i Properties-panelet.

9 Spry Tabbed Panels I Insert-panelet vælger du SPRY. Herefter klikker du på Spry Tabbed Panels. Spry Tabbed Panels arbejder med faneblade. Du kan indsætte billeder, flash, video, tekst, formularer og hvad hjertet ellers begærer i hver fane. Du kan ændre udseende via dit stylesheet og hvis du vil have lidt hjælp til hvad du skal rette for at få menuen til at se ud som du vil det kan du klikke på Customize this widget i Properties-panelet. Spry Accordion I Insert-panelet vælger du SPRY. Herefter klikker du på Spry Accordion. Spry Accordion er menuer der kolapser. Accordion er mangen til Spry Collapsible Panel, bortset fra at Accordion automatisk lukker et område, når du klikker på en ny Label Du kan ændre udseende via dit stylesheet og hvis du vil have lidt hjælp til hvad du skal rette for at få menuen til at se ud som du vil det kan du klikke på Customize this widget i Properties-panelet.

10 Opret mønster i Photoshop. Opret et nyt dokument i Phjotoshop (FILE > NEW). Størrelsen af dokumentet er afhængig af hvilket mønster du vil oprette. 2. Opret et nyt lag i Photoshop 3. Tegn det du vil have på dokumentet (evt med en pensel). Husk ikke at tegne udover kanterne. Du kan evt. hente flere pensler på (eller søge på Photoshop Brushes på Google. 4. Vælg FILTER > OTHER > OFFSET og træk i trekanterne for at forskyde det mønster du har tegnet 5. Klik på OK og tegn nu videre. Husk at du ikke skal tegen udover kanten. 6. Gentag evt. filteret - tast bare CTRL+F 7. Når du er tilfreds vælger du FILE > SAVE FOR WEB AND DEVICES 8. Hvis du vilk bevare gennemsigtigheden skal du gemme som png24 Nu kan du i Dreamweaver hente filen ind i din body og sætte den som baggrundsmønster.

11 Opret en baggrund, der toner ud i Photoshop. Opret et nyt dokument (Du kan også vælge at åbne et foto og dobbeltklikke på baggrundslaget. Hop herefter til punkt 3 på denne side) 2. Åben det dokument du gerne vil have skal tone ud. Markér det hele (CTRL+A) og kopier det. I det nye dokument indsætter du billedet ved at vælge CTRL+V 3. Klik på laget hvor det billede du vil tone ud er. 4. Klik herefter på Add layer Mask ikonet nederst i lag-panelet. 5. I masken kan du nu male sort med en pensel eller du kan oprette et sort/hvidt forløb. 6. Du kan evt farve det underlæggende lag i den farve du ønsker 7. Gem billedet til web som en jpg. Hvis du vil have dit billede skal tone ud i et andet billede kan du bare kopiere et billede ind i dokumentet istedet for det farvede lag...