Kursdokumentasjon for Dreamweaver

Kursdokumentasjon for Dreamweaver Skrevet av

2/13 1 Komme i gang med Dreamweaver... 3 2 Bruk av Dreamweaver... 4 2.1 Verktøylinja...5 2.2 Properties... 5 3 Sidens egenskaper... 6 4 Tekst... 7 4.1 Endre tekstformateringer manuelt... 7 4.2 Endre tekstformateringer med CSS... 7 5 Linker... 9 6 Bilder... 10 6.1 Posisjonering av bilder... 10 6.1.1 Uten justering... 10 6.1.2 Med justering... 10 7 Tabeller... 11 8 Anna skøy... 12 8.1 Imagemaps... 12 8.2 Rollover... 12 9 Publisere en webside... 13.

3/13 1 Komme i gang med Dreamweaver Vi skal nå se på hvordan man begynner å bruke Dreamweaver. Første gang man starter opp Dreamweaver så får man opp et lite vindu hvor man må spesifisere om man vil ha designeller kodeutseende. Her velger vi Design. Etter vi har valgt Design åpnes det ordentlige åpningsbildet til Dreamweaver. Dette vil dukke opp hver gang man starter Dreamweaver, med mindre man åpner Dreamweaver ved å dobbelklikke på en fil som åpner seg i Dreamweaver. Her må man velge den type webside som man har tenkt å lage. I de fleste tilfellene skal vi velge HTML (under Create new ). Dreamweaver vil da åpne en tom webside, og vi kan nå begynne på vår nye flotte webside.

4/13 2 Bruk av Dreamweaver Alle panelene kan ekspanderes og skjules som vi selv vil. Fordelen med dette er at dersom man sitter på en PC med liten skjerm, så kan man fortsatt ha en stor arbeidsflate når man jobber med websiden. For å minimere eller ekspandere panelene, så trykker man bare på trekanten som ligger cirka på midten av kanten av hvert enkelt panel. Under ser du et eksempel der alle de vanlige panelene er synlige, og et hvor alle er skjult. Du ser fortsatt trekanten hvor man må trykke for å få de frem, selv om de er skjult.

Det å lage en webside er egentlig så enkelt som å begynne å skrive tekst inn i vår tomme webside. Men en webside med kun uformatert tekst, hvor all teksten er like stor, er ikke særlig spennende. Vi skal derfor se på hvordan man får farget skrift, endret størrelse, hvordan man lager overskrifter, bruk av bilder, tabeller og masse annet. 2.1 Verktøylinja Verktøylinjen i Dreamweaver ser ut som dette når man starter programmet. Dersom man trykker på trekanten ved siden av Common, så kan man velge blant de andre verktøylinjene som finnes i Dreamweaver. 2.2 Properties Egenskapsboksen nederst på siden vil endre seg alt ettersom hva slags element du har valgt. Dersom du har markert et bilde, så vil egenskapsboksen gjenspeile dette, og gi deg de valgene som er tilgjengelige for bilder. Dersom ingen elementer er valgt, så antar Dreamweaver at du skal skrive tekst, og gir deg tekstalternativene.

6/13 3 Sidens egenskaper På propertiesboksen, så finnes det en knapp som heter Page Properties. Dersom du trykker på denne kan du endre bakgrunnsfarge, linkfarge, sette inn bakgrunnsbilde og mye mer. Dersom vi gjør endringe her, så vil disse kun gjelde for dette dokumentet. Vi kan da ikke på en enkel måte få de samme endringene på andre websider. Vi skal med andre ord holde oss unna dette alternativet når vi skal lage flere websider med samme utseende.

4 Tekst Når vi vil endre utseende på teksten vår, så bruker vi stort sett panelet som er i bunnen av Dreamweaver. Her kan vi endre enkle ting som at teksten skal være fet eller kursiv, om det skal være en overskrift 1 eller 3, tekstfargen og om teksten skal være venstre-, midt- eller høyrejustert. I tillegg kan vi lage CSS-stiler. CSS står for cascading style sheet, og brukes når man vil ha et likt utseende på flere sider. Fordelen med CSS er at alle formateringsvalg man gjør, det vil si om overskriften skal være midtstilt, understreket og rød, teksten skal være litt større enn vanlig, mørk rød og Arial, og så videre, blir lagret i en separat fil. Denne filen refererer man til i alle websidene man lager som man vil at skal ha samme utseende. Alle overskrift 1-avsnittene, og all den vanlige teksten vil få samme formatering, uten at man trenger å spesifisere dette nærmere i hvert dokument. Dette sparer med andre ord tid, og er også veldig nyttig dersom man finner ut at man skal endre fargen på teksten. Da trenger man kun å endre dette i CSS-filen, og slipper med andre ord å endre samme tingen på ti-femten forskjellige steder. 4.1 Endre tekstformateringer manuelt For å endre utseende på teksten uten å bruke CSS, så bruker du bare nedtrekklistene og knappene i egenskapsboksen. 4.2 Endre tekstformateringer med CSS For å bruke CSS, så klikker du på nedtrekkmenyen til valget Style, og velger Manage Styles, får du opp Dialogboks 1. Dersom du ikke har laget et stilark, så må du velge New. Dersom du har laget et tidligere, og vil bruke det på denne siden også, så velger du Attach, og blar deg fram til stilarket ditt. Dersom du velger Tag, så må du finne fram til det rette elementet i nedtrekklista til Name. Når du velger New, vil du få opp Dialogboks 2. Her har du to alternativer du kan velge. Det vil si, de mest vanlige å bruke er Class eller Tag. Class kan brukes på en hver tekst du skriver, enten det er liste, vanlig tekst, overskrifter eller lignende. Tag får kun effekt på det elementet du velger.

8/13 Her er en liste over hvilke tager som er de mast vanlige å gjøre endringer på. body Endrer egenskapene for siden på samme måte som i kap. 3 h1-h7 Overskrift 1-7 p b i u hr li a img table tr td Avsnitt, all vanlig tekst blir påvirket dersom du gjør en endring her Fet tekst Kursivert tekst Understreket tekst Horisontal strek Punktene på nummererte eller unummererte lister Endre utseende på linker Formateringer på bilder, eksempelvis tykkelse på rammer ol. Tabeller Tabellrad Tabellcelle Dersom man vil gjøre en endring som skal ha effekt på mer enn et element/tag, så kan man velge å opprette en klasse i stedet. Dersom klassen for eksempel angir at skriften skal være blå, så kan man sette denne klassen både på overskrifter, vanlig tekst og lister, og alle stedene vil teksten bli blå. Når man har avgjort om man vil opprette en klasse eller tag trykker man OK. Man må så velge hvor stilarket skal lagres. Etter at man har lagret dette, så vil det dukke opp som et eget skilleark i Dreamweaver.

5 Linker Merk teksten du vil at skal bli en link, klikk så på kjettingen på Common-verktøylinjen. Da vil dette vinduet åpne seg. Teksten du har markert vil dukke opp i Text-feltet. I Link-feltet skriver du inn adressen til siden du vil linke til. Resten av feltene kan stå tomme. Trykk OK, og du vil ha satt inn en link i dokumentet ditt. For å sette inn en link til en e-postadresse (slik at en e-post dukker opp med adressen i tilfeltet i e-postprogrammet ditt), merk teksten du vil at man skal kunne klikke på, så klikker du på bildet av konvolutten på Common-verktøylinjen. Du skriver så inn e-postadressen i E- Mail-feltet, og trykker OK.

10/13 6 Bilder Før man setter inn bilder bør man sørge for at websiden er lagret. Bildene bør så flyttes til samme sted. Det går greit om de legges i en underkatalog, men websiden bør ikke for eksempel ligge på K: og bildene på M:, da kan man nemlig fort få problemer når man skal publisere websiden. Dersom du finner et bilde på Internet som du vil bruke på hjemmesiden din, så kan du høyreklikke på bildet i nettleseren, og velge Lagre bilde som, så vil du få opp en dialogboks hvor du må spesifisere hvor bildet skal lagres på din maskin. Da er det greit å velge samme katalog, eller en underkatalog, som websiden din ligger i. Merk at opphavsrett gjelder på Internet også. Vær derfor forsiktig med å bruke bilder uten å ha spurt om lov først. Man bør med andre ord utvise skjønn. For å sette inn et bilde, klikk på ikonet som ligner et tre på common-verktøylinjen (nr. 5 fra venstre). Bla deg så fram til bildet, marker det og trykk OK. Du har nå satt inn bildet. Når du markerer bildet (trykker på det en enkelt gang), så vil Properties-boksen få en del andre valg. Vi kan nå gjøre endringer som har med bilder å gjøre. For å få tilbake de vanlige valgene i Properties-boksen, så klikker du bare på noe tekst. I feltet Alt, skriver vi teksten som skal dukke opp dersom bildet ikke kan vises. Dette er også teksten som vil bli lest opp for blinde og svaksynte når websiden leses opp. Man kan spesifisere at bildet skal fungere som en link. Da skriver man adressen det skal pekes til i linkfeltet, og når man klikker på bildet, så vil man da havne på den siden som vi har spesifisert. Dersom man bruker et bilde som link, så er det en god ide å sette border til null. Altså skrive 0 i borderfeltet. Da unngår man å få en blå kant rundt bildet (dersom linkene er blå), og lilla når man har besøkt siden bildet peker til. 6.1 Posisjonering av bilder For å få teksten til å gå pent rundt bildet, så må man sette alignement til enten left eller right. Ellers vil man kun få en linje tekst på siden av bildet, uansett hvor stort det er. 6.1.1 Uten justering Her er det tekst, her er enda mer tekst. Her er det tekst, her er enda mer tekst. Her er det tekst, her er enda mer tekst. Her er det tekst, her er enda mer tekst. Her er det tekst, her er enda mer tekst. Her er det tekst, her er enda mer tekst. 6.1.2 Med justering Her er det tekst, her er enda mer tekst. For å ikke glemme denne. Her er det tekst, her er enda mer tekst. Og denne. Her er det tekst, her er enda mer tekst. Her er det tekst, her er enda mer tekst. Og her. Her er det tekst, her er enda mer tekst. Her er det tekst, her er enda mer tekst. Her også. Her er det tekst, her er enda mer tekst. Også her. Her er det tekst, her er enda mer tekst. Her er det tekst, her er enda mer tekst.

7 Tabeller For å sette inn en tabell, trykker du på knapp nummer tre fra venstre. Du kan da angi hvor mange rader og kolonner det skal være (kan så klart endres senere), hvor bred tabellen skal være, samt om tabellen skal ha ramme, eller ikke (0=ikke, 1 og oppover setter tykkelsen på rammen). Cellpadding og cellspacing angir hvor stor avstand det er fra celletekst til cellekant, og mellom cellekantene. Caption setter en overskrift på tabellen, som en slags tabelltekst. Align caption angir hvor caption skal havne, det vil si typisk under eller over tabellen. Etter at du har satt inn tabellen, kan du fortsatt gjøre mange endringer. Du kan slå sammen celler, splitte dem igjen, endre høyde, bredde, om teksten skal være på bunnen, midten eller toppen av cellen. Du kan også velge om cellen, raden, kolonnen eller tabellen skal ha bakgrunnsfarge eller bakgrunnsbilde. Alt dette finner du i Propertiesboksen. Alternativene i Propertiesboksen vil endre seg etter som om det er en celle, rad, kolonne eller hele tabellen som er valgt. Merk at også her kan det være greit å gjøre kosmetiske endringer gjennom CSS, da du da kan få like tabeller på flere websider.

12/13 8 Anna skøy 8.1 Imagemaps Marker bildet. Nederst I venstre hjørne på Propertiesboksen har man tre alternative. Det er tre små blå figurer. En firkant, en runding og et polygon (mangekantet objekt). Klikk på et av disse og marker så den delen av bildet du vil gjøre klikkbart ved å klikke og dra. Du vil da få en blå firkant, runding eller mangekant. Når et av disse er valgt, så vil du i Propertiesboksen kunne skrive inn adressen du peker til i Linkfeltet. Dersom du nå klikker utenfor bildet, lagrer og åpner websiden i en nettleser, så skal muspekeren nå endre seg til en hånd når du plasserer den over den delen av bildet som du markerte i sted. 8.2 Rollover Rollover er en effekt som brukes på bilder. Man har i essensen to bilder som overlapper hverandre, men kun ett kan vises av gangen. Man spesifiserer selv hvilket bilde som skal vises hele tiden, og hvilket bilde som kun skal vises når vi beveger musen over bildet. Vi bruker bare nedtrekkmenyen til bildeknappen, og velger Rollover image der. Et eksempel på rollovereffekt er hovedsiden til NTNU. På http://www.ntnu.no har vi fire bilder av et eple, øye, molekyl og tastatur. Alle endrer seg når man beveger musen over disse.

9 Publisere en webside For å publisere personlige websider så legger man websidene i public_html-katalogen på hjemmekatalogen, og det skal da dukke opp på http://www.ntnu.no/~brukernavnet_ditt/ eller http://www.stud.ntnu.no/~brukernavnet_ditt/. Hvis det ikke gjør det, må du endre rettighetene på websiden. Informasjon om hvordan du gjør det finner du her: http://infoweb.ntnu.no/mine+filer/generelt/filrettigheter..html