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

Om styles / typografier / typografiark / stylesheets

Om styles / typografier / typografiark / stylesheets Om styles / typografier / typografiark / stylesheets (dvs. Cascading StyleSheet ~ CSS) CSS er et sprog til at definere layout på HTML-dokumenter. CSS indeholder flere muligheder for layout end HTML og

Læs mere

opsam ling fra sidst

opsam ling fra sidst Opsam ling fra sidst Den rette tilgang til HTML og CSS Eksperimentér Tænk logisk Detaljerne betyder noget Find inspiration/information på nettet Gode genveje Gem cmd s på Mac ctrl s på PC Bladre mellem

Læs mere

CSS fortsat: Boksmodel, floating & positionering

CSS fortsat: Boksmodel, floating & positionering Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 4, individuel øvelse CSS fortsat: Boksmodel, floating & positionering 1. Lidt om hvad du har lært Du har i øvelse

Læs mere

Efterlyst! Introduktion HTML & CSS. I dette projekt skal du lære, hvordan du laver din egen plakat. Arbejdsliste. Test dit Projekt.

Efterlyst! Introduktion HTML & CSS. I dette projekt skal du lære, hvordan du laver din egen plakat. Arbejdsliste. Test dit Projekt. HTML & CSS 1 Efterlyst! All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. Introduktion

Læs mere

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

Projekt-studieweb. Om kommunikationsteorierne. Morten, Jacob, Kristian og Cihat

Projekt-studieweb. Om kommunikationsteorierne. Morten, Jacob, Kristian og Cihat Projekt-studieweb Om kommunikationsteorierne Morten, Jacob, Kristian og Cihat Gestaltlovene Loven om nærhed Loven om lukkethed Loven om lighed Loven om forbundethed Loven om fortsættelse Loven om figur

Læs mere

Vejledning. Tabulex Hjemmeside. Styling af sidemenuer. Side 1 af 8

Vejledning. Tabulex Hjemmeside. Styling af sidemenuer. Side 1 af 8 Tabulex Hjemmeside Styling af sidemenuer Side 1 af 8 Styling af sidemenuer Sidemenuerne kan styles efter alle ønsker. Du skal vælge modulet: "Styling" på det niveau, hvor det skal have virkning. F.eks.

Læs mere

GRAFISK WORKFLOW GRAFISK WORKFLOW DIGITAL KOMMUNIKATION OLEMOGELBY.COM

GRAFISK WORKFLOW GRAFISK WORKFLOW DIGITAL KOMMUNIKATION OLEMOGELBY.COM GRAFISK WORKFLOW DIGITAL KOMMUNIKATION OLEMOGELBY.COM OPGAVEN Redesign af Ole Møgelbys hjemmeside, der efter stor succes med sine værker, gerne vil have frisket udtrykket lidt op. Billedsiderne skal udvides

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

WEBDESIGN & WEBKOMMUNIKATION

WEBDESIGN & WEBKOMMUNIKATION WEBDESIGN & WEBKOMMUNIKATION 23. februar 2012 #4 - Webtypografi og farve + CSS introduktion PROGRAM FOR I DAG 1. Farve 2. WebTypografi 3. CSS 4. Selectors, inheritance, hierarkiet og specificitet 5. Næste

Læs mere

5. Billeder og logo til websitet er optimeret til web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet.

5. Billeder og logo til websitet er optimeret til web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet. GRAFISK WORKFLOW Grafisk workflow Beskrivelse Opgaven Design af website til Tipsbladet Fokus, som er noget, jeg selv har fundet på. Det er tænkt som et alternativ til Tipsbladet.dk, hvor der på Tipsbladet

Læs mere

GRAFISK DESIGN. Min personlige e-portfolio

GRAFISK DESIGN. Min personlige e-portfolio GRAFISK DESIGN Min personlige e-portfolio 2 OPGAVEBESKRIVELSE Produkt: E-portfolio Farve: RGB Programmer: Brackets, Photoshop og Illustrator Min personlige e-portfolio er udarbejdet som et led i min uddannelse

Læs mere

CSS introduktion: Tekstformatering med CSS

CSS introduktion: Tekstformatering med CSS Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 3, individuel øvelse CSS introduktion: Tekstformatering med CSS 1. Lidt om hvad du har lært Du har i øvelse

Læs mere

Grafisk Workflow STILHISTORIE. Website lavet i forbindelse med et projekt om stilhistorie. Klik her for at se websitet:

Grafisk Workflow STILHISTORIE. Website lavet i forbindelse med et projekt om stilhistorie. Klik her for at se websitet: STILHISTORIE Website lavet i forbindelse med et projekt om stilhistorie. Klik her for at se websitet: http://www.mediegrafiker-ats.dk/12gf32med8b/stil/maria/ Opgaven I forbindelse med et tema omhandlende

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

Nolde Museet. I gang med Dreamweaver. Opgave. Opgavebeskrivelse. Layout. Mål og CSS

Nolde Museet. I gang med Dreamweaver. Opgave. Opgavebeskrivelse. Layout. Mål og CSS Opgavebeskrivelse Lav en webside om i Sønderjylland. Opgaven fører dig igennem de basale ting, hvad angår opbygningen af en side med CSS. Der er ikke tale om et komplet site, men du kan bruge opgaven som

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

Grafisk workflow. Maria Clausen Svendeportfolio Grafisk workflow

Grafisk workflow. Maria Clausen Svendeportfolio Grafisk workflow Grafisk workflow Maria Clausen Svendeportfolio Grafisk workflow OPGAVEN Kunden har stiftet et nyt firma som hedder Wood id, som sælger lamper, møbler og tilbehør lavet i kvalitets træ. Kunden ville gerne

Læs mere

Her vil jeg forsøge at gennemgå hvordan vi kan opnå at centrere en»div-container«både vertikalt og horisontalt i browser vinduet.

Her vil jeg forsøge at gennemgå hvordan vi kan opnå at centrere en»div-container«både vertikalt og horisontalt i browser vinduet. Side 1 Her vil jeg forsøge at gennemgå hvordan vi kan opnå at centrere en»div-container«både vertikalt og horisontalt i browser vinduet. Dette er nogle gange et ønske fra den enkelte kunde, som blot ønsker

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

Grafisk Redegørelse Opgaven Programvalg Kvalitetsvurdering Målgruppe Arbejdsproces Kvalitet Komposition og layout Brugervenlighed

Grafisk Redegørelse Opgaven Programvalg Kvalitetsvurdering Målgruppe Arbejdsproces Kvalitet Komposition og layout Brugervenlighed Redegørelse Grafisk Opgaven At redesigne en hjemmeside for AGF fanclub, som har et mere moderne look og et nyhedsarkiv som er let oversskueligt. Hjemmesiden er en opgave jeg selv har stillet mig og kunne

Læs mere

Beginning CSS and Web Development kap. 1 11

Beginning CSS and Web Development kap. 1 11 Beginning CSS and Web Development kap. 1 11 Plan Xhtml opbygning CSS Divs, class, id Baggrunde, farver og billeder Tekst Links Lister Tabeller Stand up programmering Xhtml vs. html i XHTML skal alle elementer

Læs mere

Tillykke Med Fødselsdagen

Tillykke Med Fødselsdagen HTML & CSS 1 Tillykke Med Fødselsdagen All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register

Læs mere

Forståelse for grafisk produktion og workflow

Forståelse for grafisk produktion og workflow Forståelse for grafisk produktion og workflow Fallulah hjemmeside Opgaven: Blev stillet i forbindelse med forløbet avanceret webdesign, jeg har hverken fået karakter eller bedømmelse på den. Opgaven bestod

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

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

GRAFISK WORKFLOW GRAFISK WORKFLOW

GRAFISK WORKFLOW GRAFISK WORKFLOW Opgaven At lave en ny hjemmeside til tekniske skolers sportslege. Den gamle var rodet og uoveskuelig. Det vigtigste var at rydde op, samt holde en rød tråd til logo og indbydelsen. Afsender Lærerne på

Læs mere

Stylesheets - grundteori.

Stylesheets - grundteori. Når du designer med css gør du to ting: på den ene side opmærkes og struktureres sidens indhold med tags, eller markører på den anden side tildeles disse tags css-regler, hvormed du styrer layoutet. Her

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

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

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

KT OR LOW PRODUKTION // WORKFLOW

KT OR LOW PRODUKTION // WORKFLOW PR D O U ION KT // W KFKF OR LOW PRODUKTION // WORKFLOW // WORKFLOW HJEMMESIDE / REDEGØRELSE / IDÉ, FARVE, FONT OG GRAFIK / SKITSER OG FLOWCHART / SKELET / STORYBOARD / CSS HVAD? Opgaven er en fiktiv hjemmeside

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

Selv om websites er yderst forskellige i deres fremtræden, så kan de stort set alle sammen passes ind i den skabelon som er illustreret herunder:

Selv om websites er yderst forskellige i deres fremtræden, så kan de stort set alle sammen passes ind i den skabelon som er illustreret herunder: Design en praktisk guide. Et design udtrykker dit websites grafiske udseende, lige fra hvilke skrifttyper der anvendes op til hvor navigationen er placeret og hvilke interaktive elementer der skal benyttes.

Læs mere

Aptana editor til MAC og Windows

Aptana editor til MAC og Windows 1 Aptana editor til MAC og Windows http://aptana.com/products/studio3/download For at downloade Mac versionen skal du klikke på : Customize Your Download og der efter klikke på MAC OS X. Indtast navn og

Læs mere

Grundlæggende HTML. Hjemmesider, kommunikation og kode. mandag den 13. august 12

Grundlæggende HTML. Hjemmesider, kommunikation og kode. mandag den 13. august 12 Grundlæggende HTML Hjemmesider, kommunikation og kode Hvad er HTML? Hyper Text Markup Language Beskrivelsen siger at det er et tekst sprog bestående af markører Bruges til at vise hjemmesider i en browser,

Læs mere

Oversigt HTML5 nye tags til sideopbygning

Oversigt HTML5 nye tags til sideopbygning HTML5 er udviklet af WHATWG Oversigt HTML5 nye tags til sideopbygning (Web Hypertext Application Technology Working Group) En

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

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

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

Fase Forklaring Navigation. Opret en div til feltet hvorpå scrollbaren ønskes placeret. Giv div'en mål og position absolut. Vælg Overflow: auto.

Fase Forklaring Navigation. Opret en div til feltet hvorpå scrollbaren ønskes placeret. Giv div'en mål og position absolut. Vælg Overflow: auto. 1 Scrollbar Åbn index.html Der skal være en side åben. Indsæt en div: scroll Opret en div til feltet hvorpå scrollbaren ønskes placeret. Definér div'en Giv div'en mål og position absolut. Vælg Overflow:

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

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

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

ActiveBuilder Brugermanual

ActiveBuilder Brugermanual ActiveBuilder Brugermanual Forfatter: TalkActive I/S Dato: Juni 2004 Version: R. 1.01 Sprog: Dansk Copyright 2004 - Talk Active - all rights reserved. Indhold: 1. INDLEDNING...2 2. QUICK-START...3 3. OPBYGNINGEN

Læs mere

Lav din egen forside i webtrees

Lav din egen forside i webtrees Lav din egen forside i webtrees Du behøver ikke at kunne kode eller gøre noget advanceret for at designe din helt egen forside i webtrees. Alt du skal gøre er bare at gøre brug af den indbygget editor.

Læs mere

5 ARBEJDE MED EDITOREN

5 ARBEJDE MED EDITOREN 5 ARBEJDE MED EDITOREN Editor (eller Rich Tekst Editor) er et indbygget indholdsredigerings værktøj, hvor man uden nogen kendskab til HTML kodning kan skrive tekst, indsætte billeder, videoer og links.

Læs mere

ØVELSE 11: TABLES & FORMS (Individuel)

ØVELSE 11: TABLES & FORMS (Individuel) ØVELSE 11: TABLES & FORMS (Individuel) 1. Målsætning I denne øvelse kommer du til at arbejde med to forskellige områder: Forms (formularer) og tables (tabeller) (kapitel 8+9 i LWD.) Du kommer blandt andet

Læs mere

Active Builder - Brugermanual

Active Builder - Brugermanual Active Builder - Brugermanual Version: Release 2.0 Sprog: Dansk Copyright 2014 - Talk Active ApS INDHOLDSFORTEGNELSE INDHOLDSFORTEGNELSE... 2 1. HURTIGT OVERBLIK... 4 1.1 Vælg URL:... 4 1.2 Vælg en skabelon:...

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

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

TinyMCE Bruger Guide. Forord. Contents

TinyMCE Bruger Guide. Forord. Contents TinyMCE Bruger Guide Forord TinyMCE er en platformuafhængig web baseret Javascript HTML WYSIWYG (What You See Is What You Get) editor udgivet som Open Source under LGPL af Moxiecode Systems AB. Dette er

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

grafisk workflow Madmagasinet

grafisk workflow Madmagasinet grafisk workflow Madmagasinet Dokumentation Opgaven Madmagasinet skal have et website som er responsive, således deres brugere har en side som er optimeret til de forskellige platformer, hvorpå deres site

Læs mere

NR. 92 PDF-formularer med OpenOffice DEN 4. MARTS 2015

NR. 92 PDF-formularer med OpenOffice DEN 4. MARTS 2015 NR. 92 PDF-formularer med OpenOffice DEN 4. MARTS 2015 PDF-formularer med OpenOffice til LUDUS Web Målet med dette Tips & Tricks er at beskrive, hvordan man laver PDF-formularer til brug i LUDUS Web. Læs

Læs mere

Grundformen for et website: aside, tabeller, formularer og tekstformatering

Grundformen for et website: aside, tabeller, formularer og tekstformatering Design til digitale kommunikationsplatforme Formiddag (Hold 1), IT Universitetet, Efterår 2013 Øvelse 2, individuel øvelse Grundformen for et website: aside, tabeller, formularer og tekstformatering 1.

Læs mere

I denne manual kan du finde en hurtig introduktion til hvordan du:

I denne manual kan du finde en hurtig introduktion til hvordan du: VORES NORDSJÆLLAND HURTIGT I GANG MANUAL 01: Bruger HVAD INDEHOLDER DENNE MANUAL? I denne manual kan du finde en hurtig introduktion til hvordan du: 1. Finder Vores Nordsjælland hjemmesiden 2. Opretter

Læs mere

Fase Forklaring Navigation. Mappen skal indeholde alle elementer til dit site.

Fase Forklaring Navigation. Mappen skal indeholde alle elementer til dit site. 1 Opstart af et site Opret hovedmappen Opret grafikmappen Opret dit site Mappen skal indeholde alle elementer til dit site. Opret en mappe indeni den første og kald den grafik. Heri lægges alle dine grafikfiler.

Læs mere

Mini Afsluttende Projekt

Mini Afsluttende Projekt Mini Afsluttende Projekt Tobias Sønderskov Hansen og Lau Lund Leadbetter Roskilde Tekniske Gymnasium Klasse 2.4 - IT 2013 Side 1 af 18 Indholdsfortegnelse Indledning... 3 Mindmap... 3 User Stories... 4

Læs mere

www.johnnihowardsen.dk - nedarvning med selektorer

www.johnnihowardsen.dk - nedarvning med 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

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

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

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

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

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

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

GRAFISK WORKFLOW OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY

GRAFISK WORKFLOW OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY GRAFISK WORKFLOW OPGAVEBESKRIVELSE Min kunde er en ung mand som ønskede at få lavet en hjemmeside til hans fremtidig firma, den skulle være responsiv og simpel. Da kunden ikke havde noget ønske om selv

Læs mere

WEB kursus I. Grundkursus i CMS

WEB kursus I. Grundkursus i CMS WEB kursus I Grundkursus i CMS 1 Link til manual på intranet: http://intranet.regionsyddanmark.dk/cmsmanual Nyttig information Support telefonnummer: 65 41 32 25 Support e-mail: websupport@regionsyddanmark.dk

Læs mere

Laura Svendsen Kernekompetencer GRAFISK WORKFLOW

Laura Svendsen Kernekompetencer GRAFISK WORKFLOW Laura Svendsen Kernekompetencer GRAFISK WORKFLOW website til drømmemadpakken Hvad? Opgaven er anden del af en opgave i to dele, et trykt produkt og et digitalt produkt. Vi fik udleveret tekst og billeder

Læs mere

Scrollbar. Læs mere om... Videre med Dreamweaver

Scrollbar. Læs mere om... Videre med Dreamweaver 1 Læs mere om... Scrollbar Hvad er en intern scrollbar? Når man arbejder med teksttunge sider, kan det være en fordel at bruge en intern scrollbar i en tabelcelle eller på et lag. Funktionen kræver brug

Læs mere

IKT og Videnrepræsentationer

IKT og Videnrepræsentationer IKT og Videnrepræsentationer CSTBI-2 2010 5. kursusgang Introduktion til html Kjeld Svidt ks@civil.aau.dk Personlige hjemmesider De enkelte gruppemedlemmer kan lave egne hjemmesider i mappen public_html

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

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

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

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

Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup

Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup Niels Sundstrup Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup Webteknologi - Carl- Henrik Nielsen - Syddansk Universitet, Kolding - Udlevering: 12. januar 2012 Aflevering: 19. januar

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

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

Guiden til overlevelse af HTX Klasse 3.4 Malte Tobias Thomé

Guiden til overlevelse af HTX Klasse 3.4 Malte Tobias Thomé Eksamensjournal Guiden til overlevelse af HTX Klasse 3.4 Indholdsfortegnelse Indledning:... 3 Problemformulering:... 3 Løsning:... 3 Målgruppe:... 3 Kompiler og sprog:... 3 Produktet:... 4 Hjemmesiden:...

Læs mere

Tegneserien - Kom godt i gang. Mikro Værkstedet A/S

Tegneserien - Kom godt i gang. Mikro Værkstedet A/S Tegneserien - Kom godt i gang Mikro Værkstedet A/S Tegneserien - Kom godt i gang Mikro Værkstedet A/S Revision 1.14, 15. maj 2007 Indholdsfortegnelse 1. Forord... 1 2. Kom godt i gang... 3 2.1. Opstart

Læs mere

! }! FORSIDE! ! !

! }! FORSIDE! <html>! <head>! FORSIDE opgaver body { background-color:#33adff; } header { background:#33adff; color:white; text-align:center; padding:5px;

Læs mere

Upload 8 Tekst 9 Media Manager 9 Arkiv 9 Indstillinger 9 Teaser 10 Generelt 10 Slet, rediger og se kataloger 10

Upload 8 Tekst 9 Media Manager 9 Arkiv 9 Indstillinger 9 Teaser 10 Generelt 10 Slet, rediger og se kataloger 10 E-pages Quick Guide Login til E-pages 3 Opret en skabelon 3 Indstillinger til skabelonen 3 Side 3 Tekst 4 Ikoner 4 Layout 5 HTML 6 Indstillinger 6 Ads 7 Slet, kopier eller rediger skabeloner 7 Opret et

Læs mere

I gang med Adobe Muse CC

I gang med Adobe Muse CC I gang med MUSE Muse er et program fra Adobe til fremstilling af websites, for de som ikke ønsker at arbejde med koder. De fremstillede websites baserer sig naturligvis på HTML, CSS, Javascript mm., du

Læs mere

Øvelse 1, individuel øvelse billeder, links og undersider

Øvelse 1, individuel øvelse billeder, links og undersider Øvelse 1, individuel øvelse billeder, links og undersider 1. Målsætning I dag skal du lære om principperne bag HTML5 -om hvordan form og indhold er adskilt, og hvordan koden binder dem sammen. Det er et

Læs mere

Grafisk Tekniker. Opsætning og print af storformat i flere dele

Grafisk Tekniker. Opsætning og print af storformat i flere dele Opsætning og print af storformat i flere dele Hvis et motiv er større end mediet, der skal printes på, kan man i printerprogrammet Versa Works lave en inddeling med funktionen Tiles. Her har man mulighed

Læs mere

StarOffice. OpenOffice. Tekstdokument. Globe

StarOffice. OpenOffice. Tekstdokument. Globe Tekstdokument Af Tina Christensen StarOffice OpenOffice 7 6 Vejledning til et gratis tekstbehandlingsprogram Grundig gennemgang Omfattende opslagsværk Dækker både dansk og engelsk version forlaget Globe

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

OPGAVE BESKRIVELSE ARBEJDSPROCES. Idéudvikling. Inspiration. Skelet. Uploade til server. Kodning. Teste sitet igennem. Rettelser og godkendelse

OPGAVE BESKRIVELSE ARBEJDSPROCES. Idéudvikling. Inspiration. Skelet. Uploade til server. Kodning. Teste sitet igennem. Rettelser og godkendelse GRAFISK WORKFLOW ARBEJDSPROCES OPGAVE BESKRIVELSE OPGAVEN At lave et redesign af AGF Fanclubs hjemmeside med et mere nutidigt look og bedre oversskuelig brugerflade. Opgaven har jeg stillet mig selv, men

Læs mere

Password-beskyttelse af visse filer

Password-beskyttelse af visse filer W EB DESIGN 101 K ODEORDSBESKYTTELSE A F VISSE FI LER Password-beskyttelse af visse filer P å et websted kan det være interessant kun at give en del af brugerskaren adgang til visse filer. Der er en mængde

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

Kom godt i gang. Sitecore Foundry maj Version 1.1

Kom godt i gang. Sitecore Foundry maj Version 1.1 Sitecore Foundry 4 Kom godt i gang 26. maj 2014 - Version 1.1 Pentia A/S Store Kongensgade 66, Baghuset 1264 København K Telefon: 7023 3330 E-mail: info@foreningssite.dk Indholdsfortegnelse Indledning...

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

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

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

Introduktion til redigeringsfaciliteterne

Introduktion til redigeringsfaciliteterne Sitecore Foundry 3.0 Introduktion til redigeringsfaciliteterne 25. april 2012 - Version 1.2 Pentia A/S Store Kongensgade 66, Baghuset 1264 København K Telefon: 7023 3330 E-mail: info@foreningssite.dk Indholdsfortegnelse

Læs mere

Annemette Søgaard Hansen/www.dinwebvejleder.dk

Annemette Søgaard Hansen/www.dinwebvejleder.dk Google Docs Regneark Indholdsfortegnelse Værktøjer... Side 3 Menuer... Side 6 Opgave... Side 13 Få adgang til filerne fra din computer... Side 19 Vejledende løsning... Side 20 GoogleDocs Regneark 2 Google

Læs mere