When DREAMS come true… Dette er en lille tur rundt i de meste elementære ting i hjemmeside-programmet Dreamweaver. Det er lavet for at kommende brugere.

Præsentationer af emnet: "When DREAMS come true… Dette er en lille tur rundt i de meste elementære ting i hjemmeside-programmet Dreamweaver. Det er lavet for at kommende brugere."— Præsentationens transcript:

1 when DREAMS come true… Dette er en lille tur rundt i de meste elementære ting i hjemmeside-programmet Dreamweaver. Det er lavet for at kommende brugere kan få et indtryk af programmet og måske begynde at lege lidt med det på egen hånd. Brug piletasterne eller navigationen på næste side. Der er nogle gange flere sider til det enkelte emne: brug den røde pil. jg

2 Hvorfor vælge Dreamweaver?
Fordelen ved DW er, at det kan bruges til alle slags hjemmesider: fra de mest enkle til de mest avancerede. Det betyder at lærere, der gerne vil videre, har det bedste program at udfolde sig i. Og at de, der blot vil lave nogle enkle sider, de har et meget brugervenligt og kreativt værktøj. DW er et professionelt program og er lidt multimedieatigt – og fungerer lidt som Mediator. Men det kræver kun pc-bruger niveau at anvende det. Er man vant til at arbejde i f.eks. Word, kan man også bruge DW. Det bedste ved DW er, at der arbejdes i lag. Tekst og billeder lægges ind i lag og dem kan man flytte rundt med på siden efter behag og kreere spændende, brugermotiverende sider. Og i DW kan man få små bokse med billeder, informationer osv. til at dukke frem på forskellig vis – ganske enkelt, og med den fordel at brugeren kan lave mange ting på én og samme side og ikke skal klikke rundt mellem sider hele tiden. Og så er DW i øvrigt det mest kreative hjemmeside-værktøj på markedet! dreamweaver? intro siten siden værktøjerne skabelon navigation udgive avanceret: timelines mere vejledning

3 At lave hjemmesider er lidt ligesom at lave en Power Point
At lave hjemmesider er lidt ligesom at lave en Power Point. Man laver et grunddesign, en skabelon, og kopierer en række eksemplarer af den og så fylder man indhold på – og lægger det på nettet! I DW arbejdes der på sider, som brugerne klikker rundt mellem. Vi skal derfor lave nogle links mellem siderne. Ofte i form af en menu ude i siden. På de enkelte sider arbejder man ved at oprette et lag for hvert element. et kan være noget tekst, et billede, en animation. Man kan frit flytte rundt på siden med disse lag – lægge et lag med baggrund bag et med tekst, sætte det pænt op etc. Det er vigtig med det samme at gøre sig klart, at et lag er to ting: dels laget selv, som man kan flytte rundt med på siden, og som har navn, egenskaber etc., dels det der er inde i laget, dvs. billedet, teksten eller andet. Det der er inde i laget har sine egne egenskaber etc., som man kan gøre noget ved. Klikker man inde i laget er det f.eks. billedet, man har markeret. Klikker man i kanten af laget eller i dets håndtag, er det laget, man har markeret. Som altid kan man kun gøre noget ved det, man har markeret. Lagene kan faktisk placeres nøjagtig pr. milimeter på siden. dreamweaver? intro siten siden værktøjerne skabelon navigation udgive avanceret: timelines mere vejledning

4 En af de rigtig gode ting ved DW er handlingsværktøjet (Behaviors).
Her kan man lave mange spændende ting, der gør siderne levende og betyder at brugeren kan udføre mange ting på én og samme side. Og ikke skal klikke vildt rundt for at finde stoffet. Man kan få små vinduer til at dukke op – gøre tekst og billeder synlige og skjulte – klikke nye lag frem og væk igen etc. etc. Handlingsværktøjet er meget simpelt at bruge og giver mulighed for at lave koncentrerede sider, hvor der sker en masse, i stedet for at lave en masse sider, hvor der intet foregår på. Der kan lægges handlinger på alt: tekst, billeder, animationer, lag. Når man har vænnet sig til logikken i dem, bliver de en helt naturlig del af designet. Der skal ingen form for programmering til – blot et par klik på de rigtige steder. Der er masser af eksempler på handlinger af denne type på Kig lidt rundt og find nogle. dreamweaver? intro 2 siten siden værktøjerne skabelon navigation udgive avanceret: timelines mere vejledning

5 Når man vil lave en hjemmeside med egen adresse (www. etc
Når man vil lave en hjemmeside med egen adresse ( så skal man have en kontrakt med en udbyder (f.eks. – det er næsten gratis!) og have et password. Når det er ok, starter man med at lave en mappe på sit c-drev. I den mappe skal de enkelte sider ligge. Inde i den mappe laver man en mappe til grafik og en til dokumenter (vedlagte, som i SkoleKom) og andre, hvis der er brug for det. Den grafik og de vedlagte dokumenter, der skal være på siderne, skal lægges ind i disse mapper. Først nu åbner man programmet Dreamweaver og vælger SITE – NEW SITE. Der kommer så en boks, hvor man skal vise stien til den mappe på c-drevet, vi lige har lavet og hvor man skal skrive hjemmesideadressen, f.eks. Fra nu af ordner DW alt for én. Så går man i WINDOW og SITE FILES. Og får listen med de ting, der skal ligge i mappen. Man går så i dette liste-vindue i FILE og vælger NEW FILE. Så er man i gang. Denne åbningsside skal altid hedde index.htm, det er den brugeren ser først, når man åbner en hjemmeside. De enkelte sider lægger sig alfabetisk i række, se de er lette at finde. Man åbner de enkelte sider ved at klikke på dem i listen SITE FILES. dreamweaver? intro siten siden værktøjerne skabelon navigation udgive avanceret: timelines mere vejledning

6 dreamweaver? intro siten siden værktøjerne skabelon navigation udgive avanceret: timelines mere vejledning Her ser du siden, du skal arbejde på. Du har kun brug for tre værktøjer, som du alle finder i WINDOW. Du har et værktøj, hvor du vælger lag og grafik. I laget kan du automatisk skrive tekst. Så har du den aflange boks, der ændrer sig alt efter om du har markeret laget, billedet eller arbejder med tekst. Her kan du gøre forskellige ting. Give laget navn, redigere tekst osv. osv. Du kan også i pixels angive, nøjagtig hvor et lag skal ligge på siden. Du kan også trække rundt med det med musen (i lagets håndtag). Du kan gøre billeder større eller mindre og lægge animationer ind (lægges ind som billeder). Til slut har du så handlings-boksen, eller Behaviours, hvor du kan bestemme, hvad der skal ske med et element på siden, når brugeren gør et eller andet med musen (klikker eller ruller hen over). Det er alt. Du kan altid have SITE FILES-listen åben og lægge den ned i bunden af dit pc-vindue. Så kan du få den frem, når du skal bruge den.

7 Når man skal lave en side, opretter man et lag til hvert element: klik på lagsikonet, hold musen nede på siden og træk et lag ud. Størrelsen er ligegyldigt, for du kan bare ændre den. Hvis du vil have noget grafik på siden, klikker du inde i laget, derefter på billedikonet og vælger det fra den mappe, vi har lavet på c-drevet. (NB! Grafikken SKAL hentes fra denne mappe). Hvis du vil lave noget tekst kan du bare skrive i laget ved at klikke inden i det. Nedenfor ser du den aflange boks, der forandrer sig til hhv. tekstegenskaber, billedegenskaber og lagsegenskaber. Alt efter hvad du har markeret og er ved at gøre. dreamweaver? intro siten siden værktøjerne skabelon navigation udgive avanceret: timelines mere vejledning

8 Hvis du vil skrive tekst, klikker du bare inde i laget og skriver
Hvis du vil skrive tekst, klikker du bare inde i laget og skriver. Du kan i tekstboksen ændre skrifttype, størrelse, farve etc. Alt det kender du fra Word. Hvis du vil lægge et link ind til en anden hjemmeside eller til en anden af dine egne sider – eller til et dokument der skal åbnes -, så markerer du den tekst, der skal være klikbar, og skriver internetadressen ind i den del af boksen, der hedder LINK. Tast F12 for at se det i et rigtigt internetvindue. Det klikker du bare væk bagefter og fortsætter arbejdet. dreamweaver? intro siten siden værktøjerne 2 skabelon navigation udgive avanceret: timelines mere vejledning

9 Når du har lagt et billede ind i et lag, kan du også gøre forskellige ting:
give det navn (husk det!!!) bestemme dets størrelse lægge et link på det (gøre det klikbart i stedet for et stykke tekst f.eks.) bestemme hvor i laget det skal ligge, hvis du gør laget større end billedet. Husk at billedet skal være færdigredigeret, når du lægger det i grafikmappen på c-drevet. dreamweaver? intro siten siden værktøjerne 3 skabelon navigation udgive avanceret: timelines mere vejledning

10 Lag er sikkert noget nyt for de fleste
Lag er sikkert noget nyt for de fleste. men det er meget behageligt at kunne flytte rundt med tingene. Samme princip bruges i det professionelle grafiske program Photoshop, som det er godt at bruge til at lave grafik til hjemmesider. Billederne skal gemmes som JPEG i mellemopløsning. I lagsboksen skal du give laget navn . Det er vigtigt, for har du 10 lag, så er det svært at huske, hvad der er hvad. Giv laget et navn der handler om dets indhold. Du kan bestemme nøjagtig hvor på siden laget skal ligge (målt fra lagets øverste venstre håndtag) ved at ændre i tallene i boksens L og T – leg med det! Og du kan bestemme lagets størrelse lige ved siden af: W=bredde, H=højde. Husk det er pixels, vi arbejder med. Leg dig frem! Rubrikken Z-index er meget vigtig. Tallet angiver hvilke lag der ligger underst og øverst. Høje tal ligger længst fremme mod dig. 1 ligger helt bagerst. Du kan ændre dybde-placeringen ved at skrive et andet tal i rubrikken. I BGimage kan du sætte et baggrundsbillede ind i laget. Vælg fra din mappe med grafik. Eller du kan vælge at laget skal have en bestemt baggrundsfarve. Du kan udvide lagsboksen ved at klikke på den lille hvide trekant nederst til højre. I udvidelsen kan du sætte scroll til auto. Det betyder at du kan lave en meter tekst i et lille lag, men at brugeren så skal scrolle for at se det. Det er der masser af eksempler på på dreamweaver? intro siten siden værktøjerne 4 skabelon navigation udgive avanceret: timelines mere vejledning

11 Handlingsværktøjet er rigtig godt at blive gode venner med
Handlingsværktøjet er rigtig godt at blive gode venner med! Man kan udføre mange spændende ting med meget enkle midler. Man kan gøre mange mærkelig ting her, men vi koncentrerer os om de vigtigste. De mest brugte handlinger er at vise og skjule lag. Og at åbne et nyt browservindue. Hvis du har et lag med en lille tekst se min hund og du vil have at et billede af hunden kommer frem, når brugeren ruller over teksten med musen, så gør vi følgende: lav tekstlaget og billedlaget giv begge lag navne!!! i den aflange… højreklik på billedlagets håndtag og vælg skjult (du kan få det frem igen via WINDOW og LAYERS) markér teksten eller selve tekstlaget og klik på plustegnet i handlingsværktøjet – vælg show-hide layers find billedet af hunden i listen og vælg SHOW klik på den lille trekant i handlingsværktøjet og vælg ON MOUSEOVER klik på plusset igen, find billedet og vælg denne gang HIDE klik på trekanten igen og vælg denne gang MOUSE OUT FIF: når musen ruller over, kan den blive til en hånd ved at taste # (over3-tallet på tastaturet) i linkboksen og så lige klikke på siden bagefter… Du kan også vælge ON CLICK i stedet for ON MOUSEOVER… dreamweaver? intro siten siden værktøjerne 5 skabelon navigation udgive avanceret: timelines mere vejledning

12 På den måde kan man lave meget spændende ting på siderne. F. eks
På den måde kan man lave meget spændende ting på siderne. F.eks. et diasshow: du lægger 5 lag med hver sit billede i oven på hinanden på siden og gør de fire af dem skjulte. Så markerer du det synlige billede og går i handlingsværktøjet og vælger HIDE af det synlige billede (ON CLICK) og vælger SHOW om det næste billede af de fem! Se masser af eksempler herpå på Man kan også bruge handlingsværktøjet til at åbne et nyt vindue. Hvis der ligger et link til en anden hjemmeside på din side – og du ikke vil have brugeren til at forsvinde fra din website – så bruger du værktøjet til at opnå, at brugen åbner et nyt vindue hen over dit, når der klikkes på linket. I OPEN BROWSER WINDOW skriver du bare den pågældende webadresse ind og du kan bestemme, hvor stor det nye vindue skal være – leg med det!! Du kan også lave nogle sider, der er designet til at være små nye vinduer, der åbner sig. Se – faciliteten STIKORD. Her er der lavet en almindelig side – husk at lægge tingene oppe i øverste venstre hjørne, for det er dér der tælles fra, når du bestemmer størrelsen på det nye vindue !! – som man så linker til i OPEN BROWSER WINDOW. Handlingsværktøjet skal der leges rigtig meget med! dreamweaver? intro siten siden værktøjerne 6 skabelon navigation udgive avanceret: timelines mere vejledning

13 Når man laver en rigtig hjemmeside, så vil man sjældent lave hver side for sig – helt forfra. Man vil lave index.htm som en art forside og så vil man lave den første side som en skabelon, - med alle de grundting på, der skal være på alle siderne. Så kan fylde indhold på og variere de enkelte sider bagefter. Når man har lavet sin skabelonside, kan man kopiere den i mange eksemplarer i SITE FILES-listen. Højreklik på skabelonfilen og vælg KOPIER – klik et sted i listen og tast CONTROL V for at indsætte. Og så fremdeles. Nu har vi måske 10 sider, der er ens. Nu er det meget vigtigt at få navngivet dem rigtigt fra starten. Højreklik på hver enkelt af siderne og vælg RENAME: kald den noget fornuftigt (ingen ø’er etc. og andre tegn) og husk altid efter navnet at slutte med .htm. Ellers kan internetprogrammet ikke finde filen. Nu kan du så gå ind på den enkelte side og lægge indhold og variere siden, som du selv vil. På ligger der bl.a. stikord til, hvad man skal tænke på, når man vil opbygge en hjemmeside. Dokumentet hedder WEBstik. dreamweaver? intro siten siden værktøjerne skabelon navigation udgive avanceret: timelines mere vejledning

14 Nu har vi 10 enkeltsider liggende og de skal så linkes sammen ud fra en eller anden menu.
Vælg den enkelte tekst i din menu, markér teksten eller billedet og find i den aflange boks den side i din mappe du vil have brugeren hen til, når der klikkes. Brug fiffet med #, hvis musen ikke bliver en hånd, når brugeren ruller hen over menuteksten. Dette har du nu gjort på din første menutekst. Du kan gøre det for alle menuteksterne på denne første side. Men det er jo kun side 1 – du kan komme hen til de andre, men ikke tilbage. Det man nu kan gøre er, at kopiere disse nye menutekster med links på til alle de andre sider: markér alle tekstlagene (ved at markere en efter en og holde SHIFT nede) og tast CONTROL C for kopier åben siderne en efter en: slet de menutekster der står der og tast til slut CONTROL V – så sættes de nye menutekster ind med deres links på. Gå til hver side bagefter og gør et eller andet ved det menupunkt, hvis side du er på, for at brugeren kan se, hvor han er. Lav fed type, kursiv eller ny farve. dreamweaver? intro siten siden værktøjerne skabelon navigation udgive avanceret: timelines mere vejledning

15 dreamweaver? intro siten siden værktøjerne skabelon navigation udgive avanceret: timelines mere vejledning Når det hele er færdigt skal man udgive det på nettet! Vi går til SITE FILES-listen igen og klikker på kontakten til den server, vores hjemmeside skal ligge på. Til venstre dukker så det op, der allerede ligger på nettet og til højre har vi de sider, du har lavet og som ligger i din mappe på din egen pc. For at få dem på nettet (uploaded), skal man først markere, hvad der skal uploades: er det hele mappen med alle siderne, eller har du bare ændret på én side og vil nøjes med at uploade den? Når du har markeret (her: hele mappen), så klikker du bare på den blå pil og det hele sker af sig selv. Bliver du spurgt, om du også vil uploade DEPENDENT FILES, klikker du bare JA. Tingene i din grafikmappe kommer med automatisk. Men det gør vedlagte dokumenter, f.eks. Wordfiler, ikke! Så har du lagt et oplæg ind på en side og derfor lagt det i mappen DOKUMENTER ovenfor, ja så skal du klikke på plustegnet og markere det dokument også, når du uploader. Med mindre du uploader hele mappen – så er det hele jo med.

16 dreamweaver? intro siten siden værktøjerne skabelon navigation udgive avanceret: timelines mere vejledning Noget af det mest avancerede i DW er TIMELINES – her kan du styre hele multimedieforløb på tid og få de mest underlige ting til at ske – automatisk eller brugerstyret. Det skal vi ikke komme ind på her – men går man i DW’s egen hjælpefunktion er der fine og enkle beskrivelser af brugen af dem. Den gyldne krop, der bevæger sig, på åbningsside, den er styret med en timeline.

17 I boghandlerne kan man købe flere gode vejledninger til programmet
I boghandlerne kan man købe flere gode vejledninger til programmet. Fra små hæfter til tykke bøger. Mange af dem er på dansk. Hjælpefunktionen i programmet er ganske glimrende og den kan man nå ret langt med. På kan du lade dig inspirere af de forskellige virkemidler. På denne website er der kun brugt de værktøjer, du har hørt om her i gennemgangen! Ellers handler det om at udforske programmet selv og sammen med andre, mens man bruger det. Go’ fornøjelse! Jan Gejel dreamweaver? intro siten siden værktøjerne skabelon navigation udgive avanceret: timelines mere vejledning