CSS CSS er en forkortelse for Cascading Style Sheets. CSS er et sprog som bruges til at definere layout på fx HTML-dokumenter.

Størrelse: px
Starte visningen fra side:

Download "CSS CSS er en forkortelse for Cascading Style Sheets. CSS er et sprog som bruges til at definere layout på fx HTML-dokumenter."

Transkript

1 CSS CSS er en forkortelse for Cascading Style Sheets. CSS er et sprog som bruges til at definere layout på fx HTML-dokumenter. HTML var oprindeligt tænkt som et rent struktur-markeringssprog, der eksempelvis markerede at her er en overskrift, her er et afsnit og her er et billede ved at benytte tags som <h1> </h1>, <p> </p> og <img>. Efterhånden som udviklingen af internettet tager fart, opstår der behov, blandt kreative webdesignere, for at kunne tilføje layout til HTML-dokumenterne. Nye og mere layout-venlige versioner af HTML ser dagens lys, og de forskellige browserfabrikanter (fx Microsoft) versionerer browserne, så de understøtter de nye versioner af HTML. Man presser layout-specifikationer ned i HTML, ved enten at udvide attributlisten for allerede eksisterende tags, fx <body text= bgcolor= > </body> eller ved at indføre helt nye og rene layout-tags, fx <font face= size= > </font>. Imidlertid blander man herved det oprindelige, rene stuktur-markeringssprog sammen med deciderede layout-specifikationer. Ideen om at adskille indhold/struktur fra præsentation/layout fører til etableringen af CSS som et rent layout-sprog. Herved kan HTML igen blive et rent struktur-markeringssprog, og i den p.t. nyeste version 4.01 af HTML er denne udvikling ved at slå igennem, idet mange layoutattributter og selvstændige layout-tags udgår til fordel for en ren CSS beskrivelse. CSS er virkelig en revolution indenfor web-design, og vi nævner her bl.a. følgende muligheder: Med CSS kan flere HTML-dokumenter layout-vedligeholdes via ét CSS-dokument Layout kan styres præcist helt ned til pixel-niveau. Mediedifferentieret layout, fx forskellig layout til skærm og printer. CSS regler Hvis man fx vil lave en hjemmeside, hvor baggrundsfarven er sort og tegnene hvide kunne man i gamle dage skrive: <body bgcolor= black text= white > </body>. I CSS skriver vi i stedet: body{ background-color: black; color: white; Ovenstående CSS-eksempel kaldes generelt for en regel. Den generelle opbygning er som vist: selector{ deklaration; deklaration; En CSS-regels syntaks hvor en deklaration igen består af egenskab:værdi. Selector Selectoren udpeger den eller de HTML-elementer i dokumentet for hvilke den deklarerede styling skal gælde. Hvis en gruppe af HTML-elementer skal layoutes på samme vis (dvs. udsættes for de samme deklarationer) kan man gruppere selectorerne adskilt af komma: h1,p{ background-color: yellow; color: red; Side 1

2 Vil man kun style ét element, forsynes dette med en id-attribut. Selectoren bliver attributtens værdi foranstillet et #. Vi iler med et eksempel: Eks. HTML: <p id= afsnit1 > </p> CSS: #afsnit1{ Nogle gang har man måske brug for at gruppere layout af et HTML-element i en række klasser. Vi kan fx forestille os at vi har brug for 2 slags afsnit (<p> </p>) i vores HTMLdokument, hvor teksten er henholdsvis højrestillet og centreret. Med CSS kan dette snildt lade sig gøre. HTML-elementerne forsynes med en class-attribut, hvis værdi er med til at opbygge selectoren i CSS. Et eksempel følger her: Eks. HTML: <p class= center >Denne tekst bliver centreret</p> <p class= hoejre >Denne tekst bliver højrestillet</p> CSS: p.center{ text-align: center; p.hojre{ text-align: right; Har man brug for at udvælge forskellige HTML-elementer og inddele dem i klasser, mere generelt, kan man forsyne disse HTML-elementer med class-attributten og i CSS skrive selectoren som class-attributtens værdi foranstillet et punktum. Et eksempel: Eks. HTML: <p class= omkrans >Denne tekst bliver rammet ind</p> <img src= hat.jpg class= omkrans > CSS:.omkrans{ border: 2px solid gold; Tip: I CSS kan man angive kommentarer, som ignoreres af browseren, som følger: /* Dette er en kommentar */ /* Dette er en kommentar der løber over to linjer */ Side 2

3 Links og pseudo-classes Behovet for at kunne style fx link-elementet: <a href= url >linktekst</a> i dets forskellige tilstande: ikke-besøgt link, besøgt link, aktivt link og mouse-over link, har ført til definitionen af 4 selectorer i CSS omhandlende links: a:link a:visited a:active a:hover Disse selectorer modsvarers IKKE af class= ude på link-elementet deraf navnet pseudoclasses. Vi bringer et eksempel: Eks. a:link{ color: black; a:visited{ color: yellow; a:active{ background-color: red; a:hover{ color: orange; font-style: italic; Det ubesøgte link viser linkteksten med sorte bogstaver, det besøgte link viser teksten med gule bogstaver, det aktive link viser teksten med rød baggrundsfarve og endelig vises link-teksten med orange bogstaver og skrå-skrift, hvis musen føres henover linket. CSS Øvelse 1 Lav en hjemmeside og eksperimenter med link-mulighederne via de omtalte pseudo-classer. Benyt eventuelt sandkassen på: Browseren og CSS - Boksmodellen og display-egenskaben Når browseren bearbejder et HTML-dokument sker det i 2 faser: 1. Først opbygges DOM-træet (se evt. HTML-noterne side 2, figur 2) 2. Dernæst starter renderings-fasen (visnings-fasen), hvor hvert eneste HTML-element/HTMLknude vises i en selvstændig BOKS. Er der knyttet style-anvisninger til dokumentet anvendes disse af browseren i denne renderings-fase ellers anvendes de på forhånd (=default) angivne style-anvisninger knyttet til de enkelte HTML-elementer. Boksmodellen En boks er i denne model en rektangulær (vinklerne er alle 90 o ) kasse, og HTML-elementer vises i bokse, som kan styles via CSS. HTML-elementets indhold typisk en tekst-knude kan man sætte bredde og højde på: width og height. Afstanden ud til en eventuel kant, kan sættes via padding-egenskaben. En kant kan angives via border-egenskaben. Endelig kan afstanden til omgivende bokse sættes via egenskaben margin. Vi iler med et eksempel: Side 3

4 Eks.:.box{ width: 300px; height: 200px; padding: 10px; border: 1px solid #000; margin: 15px; top left right bottom Eksemplet viser BOKS-modellen i CSS margin, border og padding kan sættes for hver af de 4 sider via angivelser af top, right, bottom og left henholdsvis. Hvis man kun vil sætte en venstre-margin kan man fx skrive: margin-left:15px; CSS Øvelse 2 Eksperimenter med boks-modellen for forskellige HTML-elementer. Start i sandkassen. Display-egenskaben Når et HTML-element renderes (vises) i sin egen selvstændige boks er der to muligheder for placeringen af denne BOKS, i forhold til de andre HTML-elementers bokse: inline dvs. at boksen placeres i et flow vandret, fra venstre mod højre, i den omgivende parent-boks. block dvs. at boksen placeres lodret, fra toppen og nedefter, i den omgivende parentboks. Faktisk er de fleste af HTML-elementerne, på forhånd (også kaldet default), forsynet med én af display-egenskaberne inline eller block man taler i den forbindelse også om inline- HTML-elementer og block-html-elementer. Studér omhyggeligt eksemplet på næste side: Side 4

5 Eks.: HTML-elementet <button> er, default, et inline-element, som nedenstående første eksempel viser: De 3 <button>-elementer flyder fra venstre mod højre i den omgivende parent-boks, som her er <body>-elementet. <html> <head> </head> <body> <button>knap 1</button> <button>knap 2</button> <button>knap 3</button> </body> </html> Nu indføjer vi en style-anvisning i dokumentets head-del, hvor vi ændrer værdien af button-elementets display-attribut til block. Nu flyder <button>elementerne fra toppen og nedefter i den omgivende parent-boks: <body> <html> <head> <style> button{ display: block; </style> </head> <body> <button>knap 1</button> <button>knap 2</button> <button>knap 3</button> </body> </html> Integration af CSS i HTML-dokumenter Der er 3 måder, hvorpå CSS kan integreres i et HTML-dokument (vi anvender eksemplet fra før med hvid tekst på sort baggrund). 1: styling direkte på HTML-element <html> <head> </head> <body style= background-color:black; color:white > </body> </html> Denne metode kan bestemt IKKE anbefales, idet vi atter har mudret HTML-strukturen til med En layout-attribut:style. Side 5

6 2: Style-tag i <head>-afsnit <html> <head> <style> body{ background-color:black; color:white; </style> </head> <body> </body> </html> Denne metode er lidt bedre end den foregående: Vi har indsat ét eneste style-element, hvorved stylingen af diverse tags nu er placeret ét sted i HTML-dokumentet. 3: Link til style-anvisninger (= et stylesheet) i en selvstændig, ren tekst fil af typen.css <html> <head> <link href= stil.css rel= stylesheet type= text/css > </head> <body> </body> </html> Filen stil.css indeholder præcis nedenstående klamamse: body{ background-color:black; color:white; Denne metode er klart at foretrække: Stylingen skrives i en selvstændig fil, og der linkes til denne CSS-fil via et <link>-tag i HTML-dokumentets <head>-afsnit. Dette kan gøres i hvert eneste HTML-dokument, der skal styles, og herved har man fået adskilt indhold og layout! Det er nu hylende enkelt at ændre udseendet af samtlige HTML-dokumenter i en applikation, idet man blot redigerer indholdet af én fil: stil.css. CSS Øvelse 3 Konstuer et HTML-dokument med en tilhørende CSS-fil. Start eventuelt først i sandkassen. Cascading style sheets Man kan linke til mere end ét style-sheet i et HTML-dokument. Rækkefølgen af disse links er afgørende, idet det senest angivne style-sheet overskriver eventuelle style-deklarationer fra de foranstående style-sheets. Vi viser et eksemel på næste side. Side 6

7 Eks.: <html> <head> <link href= stil.css rel= stylesheet type= text/css > <link href= min.css rel= stylesheet type= text/css > </head> <body> Her er noget tekst </body> </html> stil.css: body{ background-color: black; color: white; min.css: body{ color: yellow; HTML-dokumentet øverst, vises med sort baggrund (stammende fra stil.css), men med gule bogstaver (stammende fra min.css), idet den hvide font-farve i stil.css er blevet ændret i min.css. Eksemplet viser princippet i Cascading Style Sheets (CSS) CSS-sandkassen På adressen: findes en version 2 af sandkassen, hvor man i 2 adskilte tekst-felter kan indtaste henholdsvis HTML og CSS netop for at understrege det grundlæggende princip: adskillelse af indhold og layout. Figur 1 HTML-CSS-sandkassen set gennem googles browser: Chrome. Hjemmesiden vises i eget vindue. Side 7

8 CSS Øvelse 4 Lav en hjemmeside med 4 p-elementer /afsnit der, to og to laver text-transform til hhv. lowercase og uppercase. HTML-elementerne <span> </span> og <div> </div> De to fundamentale display-egenskaber inline og block har faktisk ført til definitionen af to ekstra HMTL-elementer (container-tags): <span> </span> og <div> </div>. span er inlineelementet medens div er block elementet, med de helt indlysende værdier: HTML-element span div CSS egenskab: værdi display: inline display: block Et span-element må kun indeholde tekst samt andre inline-elementer, og må ikke indeholde block-elementer. Elementet indeholder ingen strukturel, semantisk (=betydnings-mæssig) information, i modsætning til HTML-elementer generelt, og ændrer heller ikke, default, stylingen af det indhold container-taggen omslutter. Det man kan med et span-element, er at sætte en krog fast i fx den tekst, elementet omslutter, og så forsyne start-tagget med attributten class og/eller id for derefter at bruge CSS til at definere udseendet af denne klasse [eller interagere med elementet gennem JavaScript og DOM-træet, som vi skal se senere]. Et div-element kan indeholde hvad som helst, men indeholder ingen strukturel, semantisk information, og ændrer heller ikke, default, stylingen af det indhold container-taggen omslutter. div-elementet bruges ofte til at inddele en hjemmeside i forskellige sektioner, som hver især kan identificeres gennem class- og id-attributter. Man kan, for øvrigt, angive mere end én værdi for et HTML-elements class-attribut, når blot værdierne adskilles af mellemrum. Eks.: span- og div-elementer. HTML-dokument (udsnit): <span>denne tekst er omgivet af span-tags.</span> <span class="inverse">denne tekst er også spannet og inverteret rent farvemæssigt via classattributten 'inverse'</span> <div class="upper">dette er placeret inden i et div-element med class-attributten 'upper'</div> <div class="inverse upper">det er dette også men div-elementets class-attribut har vædierne 'inverse' og 'upper'</div> CSS Øvelse 5 Skriv inverse og upper-reglerne i CSS. Side 8

9 Positionering postion: static relative absolute fixed og float Browser-vindue (eng.: viewport) HTML-document A B 1 2 element 3 C Figur 2 HTML-dokumentet (grå) betragtes gennem browservinduet (største hvide felt) hvis HTMLdokumentet er større end vinduet ses typisk scrollbars på browservinduet. Vinduet viser 3 block-elementer (A, B og C) og det midterste indeholder 3 inline-elementer (1, 2 og 3). Vi vil se på udvalgte style-egenskaber ved det midterste af de 3 inline-elementer: element, i forskellige renderinger/visninger. position: static (default) Elementet er her renderet på baggrund af default-værdierne (de anførte 3 værdier er fra IE7): display : inline position: static z-index : 0 og den omgivende boks er B. Default renderes/displayes boksene inline (eller block), relativt til den omgivende boks. Default positioneres boksene static og med z-index sat til 0 dvs. at de placeres fast i forhold til hinanden og i samme (2-dimensionale) plan. z-index: Dette indeks angiver et HTML-elements placering i en retning vinkelret på skærmen. Jo højere z-værdien er, jo tættere er elementet på brugeren. Via denne egenskab er det muligt at placere elementer så de overlapper/dækker hinanden. z-index for et HTML-element virker kun hvis elementets position-egenskab er enten relative, absolute eller fixed (se eksempler senere i disse noter). Side 9

10 Position: relative Ændres et HTML-elements default-værdi for position fra static til relative, sker der intet! Først når man samtidig angiver værdier for left, top bottom eller right, top bottom flytter elementet sig som vist på figur 3: position: relative left : 30px top : 40px z-index : 0 Den omgivende boks (den stiplede boks på figur 3) er den boks elementet ville have haft i den normale, default rendering. Værdierne for left, right, top og bottom kan være både positive og negative. Positive værdier vil skubbe elementet i retning mod centret i den omgivende boks, og negative værdier vil skubbe det væk. 30px 40px Således vil en positiv værdi for top skubbe elementet nedad, medens en positiv værdi for bottom vil skubbe det opad. Negative værdier vil skubbe elementet den modsatte vej. [fx vil værdierne top: 40px og bottom: -40px resultere i samme lodrette positionering]. På samme vis vil positive værdier for left skubbe elementet mod højre medens positive værdier for right vil skubbe elementet mod venstre. Negative værdier vil skubbe elementet den modsatte vej. Figur 3 inline-elementet nr. 2 er blevet relativt positioneret, og forskudt 30px nedad samt 20px mod venstre: position: relative; left: 30px; top: 40px alt sammen regnet relativt til den oprindelige, default placering. Bemærk også at elementerne nr. 1 og 3 bliver liggende, som om element nr.2 stadig var på sin oprindelige (default) plads. Eks.: subscript sænket skrift - kan opnås gennem et span-element positioneret relativt. HTML-dokument (udsnit): CSS (udsnit): <p>vands specifikke varmekapacitet p{ c<span class= subscript >vand</span> font-size: 12pt; er 4180 J/(kg K) </p> span.subscript{ position: relative; top: 6px; font-size: 9pt; Side 10

11 Position: absolute Sættes et HTML-elements position-egenskab til værdien absolute, tages dette element fuldstændigt ud af den normale rendering af dokumentet. Dette vil typisk medføre at elementet nu overlapper en eller flere andre elementer og deres indhold, og/eller selv vil blive overlappet af atter andre elementer alt sammen afhængig af værdien af z-index. Det er helt op til forfatteren af CSS-reglerne at undgå sådanne situationer - hvis det ønskes. Figur 4 viser et eksempel hvor værdierne er: position: absolute left : 0px top : 0px z-index : 0 Den omgivende boks er her dokumentets html-element! Den omgivende boks/element er defineret som det nærmeste forældre-element hvis værdi for position er enten relative, absolute eller fixed altså alt andet end default-værdien static. Hvis sådan en forælder ikke findes er html-elementet den omgivende boks. I dette konkrete tilfælde er den nærmeste forælder i DOM-træet div-elementet B, men denne er default renderet og har position-værdien: static. Ændres denne værdi til fx relative (hvilket ikke flytter rundt på selve div-elementet B), vil vores absolut-positionerede element 2, nu orientere sig i forhold til denne nærmeste forælder/omgivende boks som vist på figur 5 herunder. Elementer der er positionerede absolut, scroller stadig sammen med dokumentet da de er blevet positionerede i forhold til selve dokumentet. Figur 4 Elementet er taget helt ud af renderingen af dokumentet, og den omgivende boks er her html-elementet! Figur 5 div-element B har nu fået sat position:relative og er nu nærmeste forælder/omgivende boks til element 2, som straks kvitterer ved at anbringe sig i øverste venstre hjørne på denne boks. Side 11

12 Position: fixed Sættes et HTML-elements position-egenskab til værdien fixed, tages dette element fuldstændigt ud af den normale rendering af dokumentet. Dette vil typisk medføre at elementet nu overlapper en eller flere andre elementer og deres indhold, og/eller selv vil blive overlappet af atter andre elementer alt sammen afhængig af værdien af z-index. Det er helt op til forfatteren af CSS-reglerne at undgå sådanne situationer - hvis det ønskes. Figur 5 viser et eksempel hvor værdierne er: position: fixed left : 0px top : 0px z-index : 0 Den omgivende boks er her browservinduet (viewport). Figur 6 Med position:fixed er elementet taget helt ud af den normale, default rendering, og er blevet fikseret i forhold til browservinduet. Det betyder at elementet IKKE scroller sammen med resten af dokumentet men virkelig er fikseret! I skærmbilledet til højre har vi scrollet helt til bunden af dokumentet, men det fikserede element ses stadig i positionen left: 0px; top: 0px i browservinduet. Denne fiksering af et element kan fx udnyttes i forbindelse med et navigationspanel til store dokumenter, hvor man kan have et fikseret link til menuen i toppen af en meget lang side (se figur 7) eller en hel navigation! Bemærk at IE 7+ kræver at en DOCTYPE-erklæring er på plads øverst i HTML-dokumentet for at position:fixed virker: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> Tilhørende CSS: Figur 7 Et meget langt/stort HTML-dokument vises i broweren. Al indholdet er puttet ind i et div-element med id:content. Navigationsfeltet er ligeledes etableret som et div-elelemnt med id:nav. Selv om der scrolles i dokumentet forbliver navigationsfeltet på plads i browservinduets øverste, venstre hjørne. Til højre ses den tilhørende CSS #content{ margin-left:40px; border-left: 1px solid gold; padding-left: 5px; #nav{ position:fixed; left:0; top:0; background:yellow; padding:5px; Side 12

13 float Sættes et HTML-elements float-egenskab til én af værdierne left eller right, tages dette element ud af den normale rendering af dokumentet. Figur 8 viser et eksempel med følgende værdi: float: right Den omgivende boks er her div-elementet B. Generelt er den omgivende boks det nærmeste blockelement der indeholder elementet. Floatningen foregår ved at elementet placeres så langt til den ønskede side, og så højt som muligt, i den omgivende boks. HTML-elementer der følger sekventielt efter i HTMLdokumentet, vil flyde rundt om det floatede element, hvis deres indhold tillader det - fx tekst. Figur 9 illustrerer eksemplet herunder: Figur 8 Elementet har fået sat egenskaben float:right og er røget til højre i den omgivende boks: B. Eks.: float HTML-dokument (udsnit): <div class= venstrebillede > <img src= billede.jpg > </div> <p> noget tekst </p> CSS: div.venstrebillede{ float:left; margin-right:15px; p{ text-align: justify; Figur 9 Via div-elementet og class-attributen venstrebillede har vi i CSS stylet billedet så det placeres til venstre. Endvidere har vi defineret en højre-margin på 15 billedpunkter. Det næste element (sekventielt) er et afsnit - <p>-element - hvis indhold er tekst, som flyder rundt om billedet. Teksten er der lavet lige marginer på. Side 13

14 Vi slutter dette afsnit om positionering med et banalt eksempel der illustrerer position: absolute i samarabejde med forskellige værdier for z-index. Eks.: Det samme billede er placeret i to forskellige div-elementer med id: lower og id: upper henholdsvis og stylet som vist: HTML-dokument (udsnit): CSS: #lower{ <div id="lower"> <img src="billede.jpg"> </div> <div id="upper"> <img src="billede.jpg"> </div> position:absolute; top: 10px; left: 10 px; z-index: 5; #upper{ position:absolute; top: 50px; left: 100 px; z-index: 10; Figur 10 To, absolut-positionerede, div-elementer indeholder det samme billede. Via forskellige værdier for top, left og z-index etableres et overlap (venstre billede). På billedet til højre har vi sat en opacity-egenskab på, så det bagvedliggende billede anes. Opacity (= opacitet: gennemskinnelighed): Den øverste div kan vi sætte egenskaben opacity på (se eksemplet her til højre samt det højre skræmbilledaftryk i figur 10). opacity: 0.70 [FireFox] Filter: alpha(opacity=70) [IE] En opacitet på 100% (=1) svarer til fuldstændig uigennemskinnelighed, og modsat svarer en opacitet på 0% til total gennemskinnelighed. Eks.: opacity: #upper{ position:absolute; top: 50px; left: 100 px; z-index: 10; opacity: 0.7; filter: alpha(opacity=70); Side 14

15 CSS-enheder og farveangivelser I CSS kan man anvende en række enheder. Vi har her opdelt dem i relative og absolutte enehder. Relativ CSS-enheder: em aktiv font størrelse ex x-højden af den aktive font px pixels (det mindste areal der kan renderes) % procent Absolutte CSS-enheder: mm millimeter cm centimeter in inches (= tommer) pt points (1 pt er det samme som 1/72 tomme) pc picas (1 pc er det samme som 12 pt) Farveangivelser: color-name aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow [angives uden citationstegn] rgb(tal,tal,tal) Styrken af rød, grøn og blå angivet som et helt tal mellem 0 og 255, fx rgb(0,255,127) rgb(p%,p%,p%) S tyrken af rød, grøn og blå i procent #rrggbb #xyz En hexadecimal angivelse af rød, grøn og blå. Fx #00FF7F #xxyyzz [de hexadecimale cifre gentages én gang]. Fx #0F8, som også kunne skrives som #00FF88 Udvalgte stylekoder og sammenskrivninger Baggrundsbillede: Man kan placere et baggrundsbillede på et html-element, fx body. Vi illustrerer med eksempler Background_color: yellow background-image: url(bjerg.jpg) background-repeat: repeat-x repeat-y no-repeat repeat (default) der kopierer billedet: vandret lodret ét billede både vandret og lodret background-attachment: fixed scroll (default) Bevirker at baggrundsbilledet ikke scroller med hhv. scroller med. background-position: xpos ypos browservinduets venstre- og øverste kant xpos og ypos angiver billedets position fra Sammenskrivning er mulig: Background [color] [image] [repeat] [attachment] [position] fx: background: url(hat.gif) no-repeat fixed center center Side 15

16 Eks.: baggrundsbillede m.m. HTML (uddrag): <button>billeder</button> <button>nyheder</button> <button>netværk</button> <div id="hat"></div> CSS: body{ background: white url(baggrund.jpg) repeat-x fixed; #hat{ background: url(hat.gif) no-repeat; position:absolute; bottom: 0; right: 40px; width: 360px; height: 360px; button{ background: rgb(127,127,127); color: white; CSS Øvelse 6 Eksperimentér på livet løs med diverse styles font: Font-egenskaben kontrollerer skrifttypen. Den generelle syntaks, i sammenskrevet form er: font: [style] [variant] [weight] [size] [family] Egenskab Værdier Forklaring style normal (deault), italic, oblique italic, oblique: skrå-skrift variant normal (default), small-caps small-caps: mindre store bogstaver weight normal (default), bold bold: fed skrift size (se generelle CSS-enheder p. 15) %, em og ex tillader skalering af font-size family fx: vedana sans-serif definerer en prioriteret liste af fonte Side 16

17 Figur 11 Browsere tillader skalering af font-size for bl.a. at hjælpe svagtseende. Derfor skal man være varsom med at sætte en absolut fontstørrelse (som netop ikke kan skaleres i browseren). tekst: Vi tager her blot et udpluk af tekst-egenskaber. Egenskab Værdier Forklaring color (se CSS-farver p. 15) Sætter tekst-farven text-align left (default), right, center, justify justify laver lige højre- og venstre-margen text-indent (se generelle CSS-enheder p. 15) Definerer indryk for første linje i et afsnit text-decoration none, underline, overline, line-through, blink text-transform none (default), capitalize, capitalize starter hvert ord uppercase, lowercase med et stort bogstav. uppercase transformerer teksten til store bogstaver. lowercase transformerer teksten til små bogstaver. letter-spacing normal (default), length length angiver afstanden mellem de enkelte bogstaver i CSS-enheder (se p. 15) CSS Øvelse 7 Eksperimentér med diverse text-egenskaber Side 17

18 Mediedifferentieret styling Som vi tidligere har set kan vi anbringe et STYLE-element (container-tag) i HEAD-afsnittet på et HTML-dokument: <style> </style> eller, endnu bedre, et link til en ekstern CSS-fil (separator-tag): <link href= stil.css rel= stylesheet type= text/css > Der findes imidlertid en attribut som hedder media og som man kan give følgende værdier: all (default), screen, print, projection, aural, braille, embossed, handheld, tty og tv. Herved kan man etablere mediedifferentieret styling og således optimere visningen af det givne indhold til et eller flere medier. Vi vil i det følgende kigge lidt mere på screen og print. display: none display-egenskaben kan, udover værdierne inline og block, antage mange andre værdier fx none som har den åbenlyse betydning at elementer (og eventuelle efterkommere) med den pågældende egenskab ikke medtages i renderingen. Dette er guf i forbindelse med den differentierede styling, idet fx menuer og andet som ikke skal printes, forsynes med denne værdi for display-egenskaben i det medierelevante stylesheet. Figur 12 Mediedifferentieret styling. Her er det et p-elements indhold der kun vises på print. Højreklikkes på det lille browser-vindue til venstre kan man i Pop-Up-menuen vælge Vis udskrift, hvorefter siden til højre vises med begge afsnit! Side 18

19 Eks.: Kildekoden fra figur 12: <html> <head> <style media="screen">.papir{ display: none; </style> </head> <body> <p>dette kan ses både på print og skærm</p> <p class="papir">denne kan kun ses på print</p> </body> </html> Sideskift Sideskift kan etableres, særdeles simpelt, fx via egenskaben page-break-before med værdien always. Skærmvisningen er uden sideskift (egentlig ganske naturligt), men vælger man Vis udskrift, skifter mediet fra skærm til printer og sideskiftet effektueres (se figur 13). Figur 13 Sideskift i et HTML-dokument kan etableres ved at indsætte et tomt blok-element, fx div, classe det som eksempelvis sideskift og i det tilhørende stylesheet skrive egenskaben page-break-before med værdien: always. Side 19

20 Eks.: Kildekoden fra figur 13: <html> <head> <style>.sideskift{ page-break-before: always; </style> </head> <body> <p>dette står på side 1 ved udprintning</p> <div class="sideskift"></div> <p>dette står på side 2 ved udprintning</p> </body> </html> En mediedifferentieret skabelon Herunder ses en skabelon, der er W3C-kompatibel, og som skal anvendes ved projektet. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html lang="da"> <head> <meta http-equiv="content-type" content="text/html;charset=iso "> <title>skabelon til hjemmeside</title> <link href="screen.css" rel="stylesheet" type="text/css" media="screen"> <link href="print.css" rel="stylesheet" type="text/css" media="print"> </head> <body> <! Struktureret HTML-indhold placeres her --> </body> </html> Et site, opbygget på denne vis, består således af mindst 3 filer: en html-fil samt to css-filer. Bemærk at HTML-elementet er blevet forsynet med en lang-attribut med værdien: da. Dette fortæller browseren at dokumentet er skrevet i sproget (language) dansk. Bemærk også at en kommentar i HTML-dokumentet har følgende syntaks (=opbygning): <!-- Kommentar --> HTMLdokument Medie: skærm Browser screen.css print.css Medie: papir Figur 14 Browseren (i midten) indlæser inddata i form af de tre filer til venstre, og kan vise det renderede indhold på to forskellige medier: skærm og papir. Side 20

21 Projektopgave Opgaven går ud på at lave en tekstfil om til en hjemmeside, der både kan navigeres rundt i på skærmen, og som kan printes pagineret på papir. Hver gruppe laver ét produkt som præsenteres for klassen. Oplægget er et html-dokument på adressen: samt en papirudgave, printet fra en PDF-fil. Figur 15 CSSprojekt.html set gennem IE 7.0. Den rene tekstfil er blevet behandlet en smule. Se teksten for detaljer. 1. Den rå tekst er blevet placeret i et div-element, med attributten id= content under body-elementet: <div id="content"> Datalogi C Valgfag </div> Tilhørende CSS: #content{ margin-left:40px; border-left: 1px solid gold; padding-left: 5px; 2. Ovenover dette div-element er der placeret endnu et div-element: <div id="nav">til<br>menu</div> Tilhørende CSS: #nav{ position:fixed; left:0; top:0; background:yellow; padding:5px; Side 21

22 3. Derefter er en række side-angivelser identificeret og omsluttet af div-elementer med class-attributten sat til header. <div class="header"> Valgfagsbekendtgørelsen, juni 2007 bilag 6 Datalogi C 2 </div> Tilhørende CSS: div.header{ background-color:#ccc; padding: 5px; width: 400px; margin-left: 240px; Ultrakort vejledning Start med at gemme CSSprojekt.html i en mappe på din lokale maskine. Lav derefter tekstfilerne: screen.css og print.css og flyt stylingen ud af HTML-dokumentet og over i disse. I HTML-dokumentet linkes der til disse via disse 2 link-elementer i head-afsnittet: <link href="screen.css" rel="stylesheet" type="text/css" media="screen"> <link href="print.css" rel="stylesheet" type="text/css" media="print"> Udviklingsmiljøet kunne herefter, fx, se ud som følger: Figur 16 Udover browser-vinduet, består udviklingsmiljøet af 3 vinduer til teksteditorer for HTMLdokumentet og de 2 css-dokumenter drabeligt ser det ud men hyggeligt er det! Side 22

Mit grafiske workflow inkluderer:

Mit grafiske workflow inkluderer: GRAFISK WORKFLOW Opgave: Opgaven var at producere en bog og et website med temaet stilhistorie. Jeg har valgt at beskrive mit grafiske workflow i produktionen af websitet. Kravene var, at der skulle være

Læs mere

Datalogi HTML Aarhus Katedralskole

Datalogi HTML Aarhus Katedralskole HTML HTML er en forkortelse for HyperText Markup Language og er således et markeringssprog og ikke et programmeringssprog! HTML bruges til at opmærke indholdet på en hjemmeside, og skal ses som en måde

Læs mere

GRAFISK WORKFLOW. Layout Layout af hjemmesiden laves i Photoshop og siderne inddeles i mapper for bedre overblik.

GRAFISK WORKFLOW. Layout Layout af hjemmesiden laves i Photoshop og siderne inddeles i mapper for bedre overblik. GRAFISK WORKFLOW Opgaven Design og skabelse af website til maler og skrotkunstner Ole Møgelby. Websitet skal virke som en oversigt af Oles værker og som en informationsside. Programvalg Af programmer har

Læs mere

GRAFISK WORKFLOW H1 MARIA SCHELDE

GRAFISK WORKFLOW H1 MARIA SCHELDE GRAFISK WORKFLOW H1 MARIA SCHELDE DOKUMENTATION Opgaven Arkitekt Mette Schelde skulle have designet og programmeret et website, hvorpå hun kunne præsentere hendes produkter. Designkrav Sitet skal være

Læs mere

Byg et website med Dreamweaver

Byg et website med Dreamweaver Byg et website med Dreamweaver I denne øvelse skal vi opbygge et website for Hotel Holiday i Dreamweaver. Det færdige site kan ses her: http://www.itu.dk/people/khhp/hotel_holidays/velkommen.html Øvelsen

Læs mere

HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Tekstformatering med CSS

HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Tekstformatering med CSS Øvelse 2, individuel øvelse HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Tekstformatering med CSS 1. Lidt om hvad du har lært Du har i øvelse 1 lært at lave en HTML5-side med afsnit,

Læs mere

Grafisk workflow. website til duckhead music

Grafisk workflow. website til duckhead music Grafisk workflow website til duckhead music Portfolio h1 Side 18 website til duckhead music Selvom jeg er hos et webbureau, så sidder jeg udelukkende med design, og er derfor ikke kommet til at kode endnu.

Læs mere

Grafisk Workflow. Endeligt layout. Om mig. Forside. Portfolio

Grafisk Workflow. Endeligt layout. Om mig. Forside. Portfolio Endeligt layout Forside Om mig Portfolio 1 Hjemmeside Opgaven I dette design projekt skulle jeg gennemføre en designproces, hvor jeg enten skulle redesigne eller designe et produkt. Jeg valgte at designe

Læs mere

web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet.

web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet. GRAFISK WORKFLOW Grafisk workflow Beskrivelse Opgaven Redesign af website for bilforhandleren PerB. Opgave har jeg stillet mig selv med det formål at lave en simpel men indbydende udgave af PerB s website.

Læs mere

Brugervejledning til Design Manager Version 1.02

Brugervejledning til Design Manager Version 1.02 Brugervejledning til Design Manager Version 1.02 Indholdsfortegnelse 1. Introduktion... 3 1.1 Det kan du med HostedShop Design Manager... 3 1.2 Feature list... 3 2. Design... 4 3. Filer og CSS... 4 3.1

Læs mere

Nyhedsbrev april: spørgeskemaundersøgelse

Nyhedsbrev april: spørgeskemaundersøgelse #ChronoContact_Survey { margin-bottom: 10px; margin-left: 0px;.form_element { float: left; font-family: Arial,Helvetica,sans-serif; font-size: 12px; margin-bottom: 8px; margin-left: 0; margin-top: 8px;

Læs mere

Ordbøgerne.dk. Navne: Andreas Foldager og Rasmus Bjerring Pedersen Fag: IT B Lærer: Karl Bjarnason Afleveringsdato: 17-11-06.

Ordbøgerne.dk. Navne: Andreas Foldager og Rasmus Bjerring Pedersen Fag: IT B Lærer: Karl Bjarnason Afleveringsdato: 17-11-06. Ordbøgerne.dk Navne: Andreas Foldager og Rasmus Bjerring Pedersen Fag: IT B Lærer: Karl Bjarnason Afleveringsdato: 17-11-06 Side 1 af 35 Indholdsfortegnelse Indledning:...3 Design...4 Visuelt design:...4

Læs mere

Martin Møller Web1b Tirsdag den 19 juni 2012

Martin Møller Web1b Tirsdag den 19 juni 2012 Martin Møller Web1b Tirsdag den 19 juni 2012 Projektbeskrivelse 3 Tema valg 3 Budskab 3 Afsender 4 Målgruppe 4 Kommunikations mål 4 Skitser 6 Layout index 7 Layout Kulturliv 8 Layout Gratis glæder 9 Layout

Læs mere

Designmanual for websider

Designmanual for websider Designmanual for websider 31. marts 2009 Version 1.1. Denne manual beskriver de gældende retningslinjer for Aalborg Universitets websider. Det vil sige websider der benytter aau.dk i domænenavnet er omfattet

Læs mere

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16 GRAFISK WORKFLOW Indhold Grafisk workflow Procesbeskrivelse Inspiration 5 Skitser 6 Flowchart Typografi og farver 8 Skelet 9 Storyboard 2 Html, css og seo 6 Grafisk workflow Opgaven At skabe et nyt og

Læs mere

REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow

REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow Grafisk Workflow REDESIGN AF GRAFISK FORUMS HJEMMESIDE Før Efter REDEGØRELSE OPGAVEN Da jeg ikke har noget med web at gøre på min elevplads, opfandt jeg en fiktiv opgave - nemlig at redesigne Grafisk Forums

Læs mere

Grafisk Workflow Personligt website

Grafisk Workflow Personligt website Grafisk Workflow Personligt website Andreas Ernst Tørnqvist Grafisk Workflow Redegørelse Opgaven Opgaven er en personlig hjemmeside lavet i min fritid. Siden skal bruges som en reklamesøjle for potientelle

Læs mere

Nedarvning. At style tags inden i andre tags. www.johnnihowardsen.dk - selektorer

Nedarvning. At style tags inden i andre tags. www.johnnihowardsen.dk - selektorer Nedarvning Du styler som bekendt dit indhold med mange forskellige selektorer. De mest almindelige er class, id, tag men du kan også gruppere selektorer f.eks h1, h2, h3, p, a, img {font-family: Verdana,

Læs mere

Web sider. Introduktion: Har du nogensinde spekuleret over, hvordan det verdesomspændende internet virker og hvordan man snakker med det?

Web sider. Introduktion: Har du nogensinde spekuleret over, hvordan det verdesomspændende internet virker og hvordan man snakker med det? Introduktion: Har du nogensinde spekuleret over, hvordan det verdesomspændende internet virker og hvordan man snakker med det? I dag skal du lære at lave hjemmesider, så du også kan bidrage til at opbygge

Læs mere

Internet vs WWW. Internettet er IKKE det samme som www. Internettet Er et netværk af computere Gør det muligt af dele information

Internet vs WWW. Internettet er IKKE det samme som www. Internettet Er et netværk af computere Gør det muligt af dele information web som medie Internet vs WWW Internettet er IKKE det samme som www. Internettet Er et netværk af computere Gør det muligt af dele information Internet protokoller (forskellige måder at udveksle information

Læs mere

GRAFISK WORKFLOW Hjemmesidedesign

GRAFISK WORKFLOW Hjemmesidedesign GRAFISK WORKFLOW www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline Færdige produkt www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline Færdige produkt www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline

Læs mere

Flash Logic Free CMS. Manual og brugervejledning

Flash Logic Free CMS. Manual og brugervejledning Flash Logic Free CMS Manual og brugervejledning Indhold: 1. Funktionalitet 2. Fil-oversigt 3. Baggrundsbillede 4. Banner-billede 5. Redigering af tekst 6. Brug af html-tags 7. Web site navn 8. Upload til

Læs mere

GRAFISK PRODUKTION WORK- FLOW DREAMWEAVER CS5 DESIGN & KODNING AF LANDING PAGE. a.link, a.hover, a.visited. Wrapper. paragraph CSS. h1 h2.

GRAFISK PRODUKTION WORK- FLOW DREAMWEAVER CS5 DESIGN & KODNING AF LANDING PAGE. a.link, a.hover, a.visited. Wrapper. paragraph CSS. h1 h2. GRAFISK PRODUKTION OG WORK- FLOW CSS Wrapper paragraph h1 h2 DREAMWEAVER CS5 Class Tags Kodning Design a.link, a.hover, a.visited HTML Kundekontakt Komposition og modulopbygning Skelet Pixels Layout Usabillity

Læs mere

Projekt i Programmering C Menu til hjemmeside.

Projekt i Programmering C Menu til hjemmeside. Projekt i Programmering C Menu til hjemmeside. 10-12-2004 Holstebro HTX Bent Arnoldsen Synopsis. Projektet her er en menu til hjemmesider, som er lavet så den er let at tilrette, når man tilføjer eller

Læs mere

Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette.

Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette. Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette. Spørgsmålet er nu, hvordan laver man sådan en side? Du skal have et såkaldt webhotel, hvilket jeg

Læs mere

Manual CoffeeCup Visitkort konsulenter

Manual CoffeeCup Visitkort konsulenter Manual CoffeeCup Visitkort konsulenter Indhold 2 Start Lidt om sidens layout 3 Åbn den downloadede fil i CoffeeCup og gem den som dit eget projekt 3 Knapperne Ring og Mail Indsæt nyt link på Ring og mail

Læs mere

HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside

HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 2, individuel øvelse HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside 1. Lidt om hvad du

Læs mere

Grafisk workflow. Hjemmeside til Bærkompagniet

Grafisk workflow. Hjemmeside til Bærkompagniet Grafisk workflow Hjemmeside til Bærkompagniet Dokumentation Opgaven Bærkompagniet skulle have designet og programmeret et website, hvor de kunne præsentere deres produkter samt mulige forhandlere kunne

Læs mere

Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette.

Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette. Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette. Spørgsmålet er nu, hvordan laver man sådan en side? Du skal have et såkaldt webhotel, hvilket jeg

Læs mere

Scrollbars side 2-5. Ankerpunkter side 6-7. Text Swap side 8-10. Links i flere farver side 11-14. z-index og baggrundsbilleder side 15-18

Scrollbars side 2-5. Ankerpunkter side 6-7. Text Swap side 8-10. Links i flere farver side 11-14. z-index og baggrundsbilleder side 15-18 Indhold Scrollbars side 2-5 Ankerpunkter side 6-7 Text Swap side 8-10 Links i flere farver side 11-14 z-index og baggrundsbilleder side 15-18 Sprymenuer side 19-24 Sider med dynamisk høje side 25-27 CSS3

Læs mere

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

Konstruktion af websites - 1. kursusgang Øvelse 1 opsætning af tekst 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

Læs mere

Sider, indlæg og projekter

Sider, indlæg og projekter Sider, indlæg og projekter I Divi-temaet er der tre forskellige måder at lægge artikler op på sitet; Sider, indlæg og projekter. På Villybruun.dk bruges Sider til alle artikler. Man kan oprette eller redigere

Læs mere

Sensus. Grafisk design og tilgængelighed

Sensus. Grafisk design og tilgængelighed Grafisk design og tilgængelighed Mange tilgængelighedsproblemer bliver skabt allerede i forbindelse med udviklingen af netstedets grafiske udtryk. Tilgængelige netsteder er ikke nødvendigvis ensbetydende

Læs mere

Sådan indlægges nyheder på DSqF s hjemmeside trin for trin

Sådan indlægges nyheder på DSqF s hjemmeside trin for trin Sådan indlægges nyheder på DSqF s hjemmeside trin for trin Systemkrav For at kunne bruge Composite kræves: Windows 95 eller nyere (bemærk - kun Windows kan bruges) Browseren Internet Explorer 6.0 eller

Læs mere

Indholdsfortegnelse. Forord

Indholdsfortegnelse. Forord Indholdsfortegnelse Forord i Indholdsfortegnelse iii Indledning ix 1. Introduktion til HTML 1 Websider laves med HTML 2 Websider læses med en browser 2 Browserspecifikke markører 3 HTML-dokumentet 4 Hvad

Læs mere

#Anna Skak #Mediegrafiker

#Anna Skak #Mediegrafiker Grafisk Workflow OPGAVEN Fodboldklubben Egmont Rollators FC ville have en website, for at gøre klubben mere synlig for eventuelle nye medlemmer. Websitet skulle indeholde alle de praktiske oplysninger

Læs mere

Indhold. 1. Adgang og afslutning

Indhold. 1. Adgang og afslutning 1 Indhold 1. Adgang og afslutning 2. Menupunkter 3. Tekst 4. Billeder 5. Video 6. Lyd 7. Bannere 8. Bokse 9. Dokumenter 10. Links 11. Iframe 12. Markedspladsen 13. Nyheder 14. Job 15. Kalender 16. Selvbetjeningsbjælken

Læs mere

DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3

DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3 TYPO3 manual DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3 Det første afsnit, Introduktion til systemet, giver et hurtigt overblik over mulighederne.

Læs mere

Lundtofte skole 2007/08. Åbn FrontPageExpress og Explorer begge programmer skal være åbne når du laver hjemmesiden.

Lundtofte skole 2007/08. Åbn FrontPageExpress og Explorer begge programmer skal være åbne når du laver hjemmesiden. Det vigtigste Hjemmeside i FrontPageExpress Åbn FrontPageExpress og Explorer begge programmer skal være åbne når du laver hjemmesiden. Lav en mappe til din hjemmeside. Find først din mappe på skolens netværk,

Læs mere

Arbejdsproces. Kvalitetsvurdering

Arbejdsproces. Kvalitetsvurdering REDEGØRELSE Om opgaven FIKTIV OPGAVE: Til denne opgave skal der laves et design til en hjemmeside (one-page) samt designes grafik og knapper. Designet opsættes som HTML / CSS og valideres. Programvalg

Læs mere

Dokumentation. Karen-Louise Fejerskov

Dokumentation. Karen-Louise Fejerskov Dokumentation Grafisk Workflow Et af produkterne, jeg skulle lave, var et redesign af FreQuence s info hjemmeside. A B Punkt 1 Ansvar: Jeg har selv stået for opsætningen af hjemmeside og selv bestemt,

Læs mere

GRAFISK WORKFLOW Hjemmeside - Husk hjelmen. http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/

GRAFISK WORKFLOW Hjemmeside - Husk hjelmen. http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/ GRAFISK WORKFLOW Hjemmeside - Husk hjelmen http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/ Produkt Web sider Index side Underside - Cykelhjelmen - brug den rigtig. Underside - Husk nu cykelhjelmen.

Læs mere

Introduktion til HTML5: Tekst, punktlister, billeder, links og undersider

Introduktion til HTML5: Tekst, punktlister, billeder, links og undersider Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 1, individuel øvelse Introduktion til HTML5: Tekst, punktlister, billeder, links og undersider 1. Målsætning

Læs mere

MANUAL - Joomla! Version 1

MANUAL - Joomla! Version 1 MANUAL - Joomla! Version 1 Indhold Retningslinjer for hjemmesiden... 3 Log ind... 3 Ret i en artikel, der allerede er oprettet... 4 Opret ny artikel... 8 a) Skriv direkte i tekstfelt... 9 b) Indsæt tekst

Læs mere

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb Dokumentation Workflow Grafisk produktion Trine Alexandersen 1. hovedforløb Jeg har valgt at vise min egen hjemmeside som workflow. Siden er min e-portfolio som skal vise hvad jeg lærer under min uddannelse

Læs mere

GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING

GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING DANSKE BEDEMÆND august 2014 v1.4 1 P a g e INDHOLDSFORTEGNELSE Adgang... 3 Overordnet om Umbraco... 4 Højreklik muligheder i oversigten...

Læs mere

Manual til hjemmeside i Typo3

Manual til hjemmeside i Typo3 Manual til hjemmeside i Typo3 Gode tips og genvejstaster Ét linieskift Ctrl + A Ctrl + C Ctrl + X Ctrl + V shift + enter (tasten du normalt bruger til linieskift) Markér alt Kopier Klip Sæt ind Oprettelse

Læs mere

Manual til Dynamicweb Februar 2010

Manual til Dynamicweb Februar 2010 Manual til Dynamicweb Februar 2010 Login... 2 Skabeloner og formater... 3 Filarkivet... 4 Lav en PDF... 5 Opret en ny side... 7 Navngiv siden... 9 Aktiver siden... 9 Sorter sider... 9 Flyt siden... 11

Læs mere

Annemette Søgaard Hansen/www.dinwebvejleder.dk

Annemette Søgaard Hansen/www.dinwebvejleder.dk Google Docs Dokumenter Indholdsfortegnelse Værktøjer... Side 3 Menuer... Side 5 Opgave... Side 8 Få adgang til filerne fra din computer... Side 16 Vejledende løsning... Side 17 GoogleDocs Dokumenter 2

Læs mere

Photofiltre nr. 85 Lave grafikbillede hvor vi bruger plugins side 1

Photofiltre nr. 85 Lave grafikbillede hvor vi bruger plugins side 1 Lave grafikbillede hvor vi bruger plugins side 1 Vi skal nu sammensætte et grafikbillede hvor vi bruger 2 plugins som kan hentes på min hjemmeside www.pensionistedb.dk under Photofiltre. Denne hedder Image

Læs mere

OPGAVEN Konditoren skulle have lavet et site til deres opskrifter. Konditoren.dk er en blog for bageglade amatørere i alle aldre.

OPGAVEN Konditoren skulle have lavet et site til deres opskrifter. Konditoren.dk er en blog for bageglade amatørere i alle aldre. WORKFLOW OPGAVEN Konditoren skulle have lavet et site til deres opskrifter. Konditoren.dk er en blog for bageglade amatørere i alle aldre. Det er en fiktiv opgave. MIT BIDRAG Jeg stod for al design og

Læs mere

Grafisk Workflow & produktion REDESIGN AF HJEMMESIDE

Grafisk Workflow & produktion REDESIGN AF HJEMMESIDE Grafisk Workflow & produktion REDESIGN AF HJEMMESIDE redegørelse Hvad går opgaven ud på Inhouse Graphic (IHG), skulle have rede signet hjemmesiden. Hjemmesidens struktur under samme ombæring kigges på

Læs mere

Mark André Lyhne. Eksamen 2012. 12web1b

Mark André Lyhne. Eksamen 2012. 12web1b Mark André Lyhne Eksamen 2012 12web1b Indholdsfortegnelse Indholdsfortegnelse... 1 Projekt beskrivelse... 3 Målgruppe... 3 Afsender... 3 Budskab... 3 Kommunikationsmål... 3 Ideudvikling... 3 De 6 Designparametre...

Læs mere

Kom godt i gang med iframe

Kom godt i gang med iframe Kom godt i gang med iframe Denne introduktion til iframe henvender sig til dig, der arbejder med skolens onlinekommunikation. Den forklarer, hvordan du med en forholdsvis enkel HTML-kode automatisk kan

Læs mere

Når du har logget dig ind, ser du Randers Kommunes byvåben midt på siden. I venstre side er der en række mapper:

Når du har logget dig ind, ser du Randers Kommunes byvåben midt på siden. I venstre side er der en række mapper: DXP vejledning Generelt: DXP er et værktøj til at fremstille præsentationsmaterialer (foldere, brochurer, løbesedler mv.) DXP egner sig kun til mindre brochurer og lign., da den største skabelon kan rumme

Læs mere

Vejledning til Photofiltre nr.128 Side 1

Vejledning til Photofiltre nr.128 Side 1 Side 1 Denne vejledning er blot et lille eksempel på hvordan man også kan bruge Photofiltre 7 som en slags grafikprogram. Det er med udgangspunkt i f.eks. min hjemmeside hvor vi vil bruge den blå farve

Læs mere

Layout af websider. Moderne websidelayout med stylesheets. Af Jørgen Farum Jensen

Layout af websider. Moderne websidelayout med stylesheets. Af Jørgen Farum Jensen Layout af websider Moderne websidelayout med stylesheets Af Jørgen Farum Jensen Artiklens eksempler bygger på tekster om og billeder fra Fredericia Vold. Det er kun eksempler og foregiver på ingen måde

Læs mere

Grafisk design. Ide. Designprocess. Målgruppe

Grafisk design. Ide. Designprocess. Målgruppe Ide Designprocess I denne opgave har jeg udviklet et website for et feriehus. Kunden ønsker et site, som både fungere privat, men også som offentlig hjemmeside. Hele site skal være på dansk, tysk og engelsk.

Læs mere

Grafisk. Hjemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling.

Grafisk. Hjemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling. Grafisk w o rk f l ow jemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling. Deres vision er at skabe enkle og inspirerende

Læs mere

DOKU- MEN- TATION TEK- NISK

DOKU- MEN- TATION TEK- NISK TEK- NISK DOKU- MEN- TATION GRUPPE 21: AMALIE HOVGESEN- CLEA-MARIE FIND PALUDAN THERESE HASSE LARSEN - CECILIE POSS AMALIE LEONORA DAM - KASPER MUNK JENSEN : http://miex5619.keaweb.dk/seasight/ 1. MOCKUP

Læs mere

FORSTÅELSE FOR GRAFISK PRODUKTION OG WORKFLOW

FORSTÅELSE FOR GRAFISK PRODUKTION OG WORKFLOW Opgaven I AArhus er en fiktiv hjemmeside. Formålet med hjemmesiden, er at Folk som befinder sig i Aarhus kan henvende sig til I AArhus og berette deres synspunkt på Aarhus. Siden henvender sig til unge,

Læs mere

Nogle metoder ved arbejdet med Brothers Keeper.

Nogle metoder ved arbejdet med Brothers Keeper. Villy Andersen Frederiksberg den 8. september 2014. Nogle metoder ved arbejdet med Brothers Keeper. For at få samling på nogle af de tidligere udsendte beskrivelser og vejledninger om Brothers Keeper (BK)

Læs mere

En blog med dansk brugerflade. Opret en Smartlog konto Gå til http://www.smartlog.dk/ Opret en konto ved at skrive din e-mailadresse

En blog med dansk brugerflade. Opret en Smartlog konto Gå til http://www.smartlog.dk/ Opret en konto ved at skrive din e-mailadresse Blogs Om blogs http://www.it-borger.dk/den-nye-it-verden/internet/blogs Om at oprette blogs http://www.it-borger.dk/laer-om-it/internet/nar-du-vil-pa-nettet/blogs/sadan-laver-du-en-blog Råd når du laver

Læs mere

IsenTekst Indhold til Internettet. Manual til Wordpress.

IsenTekst Indhold til Internettet. Manual til Wordpress. Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress. Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet eller tilføje nyt på din hjemmeside. Guiden er skrevet

Læs mere

Redaktørvejledning for www.bredstrup-pjedsted.dk Skriv en artikel

Redaktørvejledning for www.bredstrup-pjedsted.dk Skriv en artikel Arbejdsgang - Skriv artiklens tekst - Gør billeder klar - Log-in på hjemmesiden - Opret ny artikel - Vælg kategori - Skriv overskrift - Indsæt tekst - Tilføj billeder - Gennemgå artiklens indstillinger

Læs mere

5. OPSÆTNING DOKUMENTSKABELONER 5.1 TRIN

5. OPSÆTNING DOKUMENTSKABELONER 5.1 TRIN 5. OPSÆTNING DOKUMENTSKABELONER Under fanen Dok. skabeloner kan du arbejde med de skabeloner som du har i systemet, eller du kan oprette nye. I denne vejledning kigger vi på hvordan du kan tilrette selve

Læs mere

Family Tree Maker Hints omkring det at lave træer

Family Tree Maker Hints omkring det at lave træer Nærværende vejledning vil omfatte hints til forfædretræ (vifte, standard & vertikalt), efterkommertræ (vifte & standard), timeglastræ (vifte & standard) og alle-i-et træ. Da mange af tingene er identiske

Læs mere

Fremstilling af en hjemmeside

Fremstilling af en hjemmeside Fremstilling af en hjemmeside Du kan vise en hjemmeside på to måder. Enten ved at lade din computer virke som en server, eller ved at købe dig et såkaldt webhotel. Dette er en nem måde, og det er ikke

Læs mere

Guide til Umbraco CMS

Guide til Umbraco CMS web Guide til Umbraco CMS Indhold Indledning 3 Kompatible browsere 3 Log ind i Umbraco 4 Content-delen 5 Indholdstræet 5 Tilføjelse af en side/sektion 7 Sortering af indhold 12 Galleri 14 Mediebibliotek

Læs mere

Vejledning for opdatering af hjemmesiden opbygget med. KlubCMS

Vejledning for opdatering af hjemmesiden opbygget med. KlubCMS Vejledning for opdatering af hjemmesiden opbygget med KlubCMS Indholdsfortegnelse Indhold Indholdsfortegnelse... 2 Indledning... 3 Lidt generelt om KlubCMS... 3 Sideopbygning:... 4 Brugere/Brugergrupper...

Læs mere

Karens vejledning til WordPress, september 2014 1

Karens vejledning til WordPress, september 2014 1 Karens vejledning til WordPress, september 2014 1 Karens WordPress vejledning september 2014 INDHOLD Hvad er WordPress 1 Generelt om WordPress 2 Frontend og backend 2 Skrive en blog-tekst (indlæg/post)

Læs mere

Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco

Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco Adresse: http://dinafdeling.lof.dk/ Rediger hjemmeside i Umbraco: http://dinafdeling.lof.dk/umbraco/ HUSK ingen www i adressen, skriv blot

Læs mere

DAGENS PROGRAM. Layout og komposition. [Pause] CSS. [Pause] Individuel obligatorisk øvelse

DAGENS PROGRAM. Layout og komposition. [Pause] CSS. [Pause] Individuel obligatorisk øvelse DAGENS PROGRAM Layout og komposition [Pause] CSS [Pause] Individuel obligatorisk øvelse LAYOUT OG KOMPOSITION LAYOUT The primary task of graphic design is to create a strong, consistent visual hierarchy

Læs mere

Vejledning til udskrivning af etiketter/labels og konvolutter i Blåt Medlem

Vejledning til udskrivning af etiketter/labels og konvolutter i Blåt Medlem Vejledning til udskrivning af etiketter/labels og konvolutter i Blåt Medlem Blåt Medlem giver mulighed for at udskrive etiketter/labels og kuverter til medlemmerne af den enhed man er medlemsansvarlig

Læs mere

Sådan opdaterer og vedligeholder du din hjemmeside i Wordpress.

Sådan opdaterer og vedligeholder du din hjemmeside i Wordpress. Wordpress manual Sådan opdaterer og vedligeholder du din hjemmeside i Wordpress. Dette er en manual til de mest grundlæggende ting og funktioner i Wordpress, så du selv kan redigere indholdet eller tilføje

Læs mere

I denne vejledning lærer du de mest grundlæggede funktioner i PowerPoint 2003: Hvad er en præsentation?... 3. Eksempel på en præsentation...

I denne vejledning lærer du de mest grundlæggede funktioner i PowerPoint 2003: Hvad er en præsentation?... 3. Eksempel på en præsentation... Præsentationer: Vejledning PowerPoint 2003 I denne vejledning lærer du de mest grundlæggede funktioner i PowerPoint 2003: Hvad er en præsentation?... 3 Eksempel på en præsentation... 3 Visninger... 3 Normal...

Læs mere

Bogfunktionen eller Slægtsbogen i FTM

Bogfunktionen eller Slægtsbogen i FTM Bogfunktionen eller Slægtsbogen i FTM En blandt mange af Family Tree Maker s styrker er evnen til at præsentere data på mange forskellige måder, og i dette skrift vil bogfunktionen blive gennemgået. Funktionen

Læs mere

WORKFLOW & GRAFISK PRODUKTION

WORKFLOW & GRAFISK PRODUKTION Opgavebeskrivelse Kunde: Gorm Larsen & Zornig (GLZ) Websitet Social media cheat sheet er en oversigt over forskellige sociale mediers opsætning. Formålet er altså at gøre det nemt at finde de mål, der

Læs mere

Byg web sider. Introduktion:

Byg web sider. Introduktion: Introduktion: Du kender nu nogle enkle HTML tags, så nu er det på tide, at du kommer i gang med at lave din første side! Når du har nogle HTML-sider klar skal du have dem lagt op, så dine venner kan se

Læs mere

RIGSPOLITIET. Vejledning i konvertering. fra. Word -dokument. til. PDF-fil. på politi.dk. Rigspolitiets websektion

RIGSPOLITIET. Vejledning i konvertering. fra. Word -dokument. til. PDF-fil. på politi.dk. Rigspolitiets websektion RIGSPOLITIET Vejledning i konvertering fra Word -dokument til PDF-fil på politi.dk Rigspolitiets websektion Indledning Da vi skal leve op til kravene om tilgængelighed på Internettet, skal alle tekster

Læs mere

Mini-guide for opdatering af hjemmesiden for. SOIF www.soif.dk

Mini-guide for opdatering af hjemmesiden for. SOIF www.soif.dk Mini-guide for opdatering af hjemmesiden for SOIF www.soif.dk Senest opdateret: 03-07-2009 Indholdsfortegnelse 2 Indholdsfortegnelse 2 Lidt generelt om KlubCMS 3 Brugere/Brugergrupper 3 Sideopbygning:

Læs mere

Brugermanual til MOBI:DO Make på Internettet

Brugermanual til MOBI:DO Make på Internettet Brugermanual til MOBI:DO Make på Internettet Introduktion Med MOBI:DO Make kan du oprette guides, som kan ses i MOBI:DO. En guide virker som en checkliste, der fører brugeren hele vejen igennem en arbejdsopgave.

Læs mere

Mindmapping med FreeMind. En Introduktion til programmet FreeMind

Mindmapping med FreeMind. En Introduktion til programmet FreeMind En Introduktion til programmet FreeMind Jan Leffers 2006 Indholdsfortegnelse Indledning...2 Hvad er et mindmap...2 Mindmap guidelines...3 Download og installation...3 Kom hurtigt i gang...4 Det første

Læs mere

det færdige resultat

det færdige resultat grafisk design Under dette fagområde har jeg valgt at præsentere jer for en opgave, jeg har udarbejdet for virksomheden Breinholt. Breinholt er en nyopstartet virksomhed i Odense, der tilbyder spirituel

Læs mere

Drejebog til tractorpulling.dk

Drejebog til tractorpulling.dk Drejebog til tractorpulling.dk Generelt På hjemmesiden benyttes følgende som standard: - Skrifttype: Verdana - Skriftstørrelse: 12px / 9pt. 4. oktober 2011 Moskjær Marketing Falkevej 4 DK-6920 Videbæk

Læs mere

PHP Quick Teknisk Ordbog

PHP Quick Teknisk Ordbog PHP Quick Teknisk Ordbog Af Daniel Pedersen PHP Quick Teknisk Ordbog 1 Indhold De mest brugte tekniske udtryk benyttet inden for web udvikling. Du vil kunne slå de enkelte ord op og læse om hvad de betyder,

Læs mere

Opsætte f.eks. en rejsebeskrivelse med tekst og billede i Draw side 1

Opsætte f.eks. en rejsebeskrivelse med tekst og billede i Draw side 1 side 1 Hvis man vil lave en opsætning af rejsebeskrivelse og billeder, kan man også gøre det i DRAW. Denne vejledning vil vise hvordan man indsætter hjælpelinjer så man laver en pæn opstilling med billede

Læs mere

Indhold... 2 Installation af bannermodulet... 3 Opsætning af bannermodul... 5 Opsætning af bannere... 7 Indsætning af bannermodul på side...

Indhold... 2 Installation af bannermodulet... 3 Opsætning af bannermodul... 5 Opsætning af bannere... 7 Indsætning af bannermodul på side... Banner Side 1 af 8 Indhold Indhold... 2 Installation af bannermodulet... 3 Opsætning af bannermodul... 5 Opsætning af bannere... 7 Indsætning af bannermodul på side... 8 Side 2 af 8 Installation af bannermodulet

Læs mere

Lav dine egne hjemmesider/websider

Lav dine egne hjemmesider/websider Sider, der skal publiceres på World Wide Web, laves i et særligt format, html, som fortæller browseren, hvordan den skal vise tekst og billeder. Html (Hypertext markup language) er meget fleksibelt og

Læs mere

Vejledning for LOF s afdelingshjemmeside

Vejledning for LOF s afdelingshjemmeside Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco Marts 2012 Adresse: http://dinafdeling.lof.dk/ Rediger hjemmeside i Umbraco: http://dinafdeling.lof.dk/umbraco/ Mobilside: Der er lavet en

Læs mere

Sådan redigerer du en hjemmeside i Umbraco

Sådan redigerer du en hjemmeside i Umbraco Brugermanual til din boligafdelings hjemmeside Sådan redigerer du en hjemmeside i Umbraco Indhold Introduktion... 2 Log på Umbraco og redigér din hjemmeside... 3 Opret ny side... 7 Gem side uden at udgive/publicere

Læs mere

PHP kode til hjemmeside menu.

PHP kode til hjemmeside menu. PHP kode til hjemmeside menu. Home Hovedmenu 1 Hovedmenu 2 Hovedmenu 3 Hovedmenu 4 Undermenu 1 Breadcrumb Her vises indholdet af den valgte side Undermenu 2 Undermenu 3 Undermenu 4 Evt. en mulighed for

Læs mere

TILLÆG TIL MANUAL Excel-indlæsning i Vvskatalogets administrationssystem

TILLÆG TIL MANUAL Excel-indlæsning i Vvskatalogets administrationssystem 3456.78 123456 TILLÆG TIL MANUAL Excel-indlæsning i Vvskatalogets administrationssystem 30. juli 2015 Indhold Indledning Side 3 Sådan kommer du i gang Side 4 Oprette nye varer Side 5 Ændre eksisterende

Læs mere

Vejledning KPK Online Prøverum

Vejledning KPK Online Prøverum Vejledning KPK Online Prøverum INDHOLD Introduktion side 2 Funktionsliste side 2 Få adgang til systemet side 3 Opload dine billeder side 4 Sådan bruges systemet side 5 Gem dine eksempler side 7 Side 1/7

Læs mere

CMS - BRUGERMANUAL CMS

CMS - BRUGERMANUAL CMS CMS - BRUGERMANUAL LOG PÅ ADMINISTRATION Sådan kommer du i gang! For at logge ind i dit nye CMS-administrationsmodul skal du efter dit domæne skrive: admin. Eks.: www.dit_domæne.dk/admin Første gang du

Læs mere

Advanced Sitecore Google Maps

Advanced Sitecore Google Maps Advanced Sitecore Google Maps WCAG Edition Version 2.2 Brugervejledning 1 / 49 1 Indholdsfortegnelse 1 Indholdsfortegnelse... 2 2 Forord... 4 2.1 Hvad er nyt?... 5 3 Oprettelse af kort... 6 3.1 Kort centrum

Læs mere

portfolio GRAFISK WORKFLOW

portfolio GRAFISK WORKFLOW Grafisk Workflow Opgaven Der skal laves hjemmeside til et lille privat bageri. Kunden ønsker et overskueligt site. Hjemmesiden skal kort og godt fortælle om Skejby Centrets Bageri og deres produkter og

Læs mere