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

Størrelse: px
Starte visningen fra side:

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

Transkript

1 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 at være en hverken udtømmende eller korrekt beskrivelse af denne danmarkshistoriske seværdighed. Jeg er Fredericia kommune og Museerne i Fredericia tak skyldig for tilladelse til at bruge tekster og billeder fra museernes arkiver og Turistkontorets brochurer. Fredericia kommune kan på ingen måde holdes ansvarlig for min anvendelse af disse billeder og tekster. Jeg tilskynder alle mine læsere at søge yderligere oplysninger om min by og dens seværdigheder på Samt at stå af toget ½ dag, når man alligevel kommer igennem Fredericia. Byen er meget mere spændende end sin banegård. En del af det stof, der gennemgås i denne artikel, kan findes i forfatterens bøger, Webdesign illustreret håndbog og Webdesign med stylesheets. Siden udgivelsen af disse er der imidlertid sket en markant udvikling af browsernes understøttelse af W3C standarden, endda også i forhold til den endnu ikke officielle CSS3 standard. Jeg har derfor fundet det betimeligt at publicere en samlet fremstilling af, hvor vi befinder os for så vidt angår emnet for denne artikel, der kan ses som et addendum til min bog om Webdesign med stylesheets. Læsernes eventuelle kommentarer modtages meget gerne og vil i påkommende fald blive indarbejdet i nye udgaver af denne artikel. Sådanne kommentarer bedes sendt til webmaster-at-webdesign101.dk. Jørgen Farum Jensen, Erritsø, november 2010 Dokumentet Layout af websider er 2010 Jørgen Farum Jensen.

2 Indledning...2 Det grundlæggende HTML-dokument...2 Indhold, indhold, indhold...3 Grundregler for layout...3 Det visuelle udtryk...4 Visuelle strukturer...4 Konstruktionsmetoder spaltet layout...6 Runde hjørner...8 Browservinduets bredde...9 Flydende, elastisk eller fikseret layout...9 Websidens højde spaltet flydende layout...10 CSS display:table egenskaberne...12 Anonyme tabelelementer...13 Regler for oprettelse af anonyme bokse...14 Nyttige table-egenskaber...15 Det perfekte layout: lige høje kolonner...15 Problemet med Internet Explorer...16 Andre modeller...22 Højrestillet menuspalte...22 Trespaltet layout...24 Trespaltet layout i Internet Explorer Trespaltet layout, variationer...27 IE6/7 formatering af model Tekstformatering af model Model 5: bred-smal-smal...30 Online eksempler...32 Vejen frem...33 Multi-Column Layout egenskaber...35 Oprettelse og redigering af websider...36 Fejlretning...36 Refleksioner over webdesign...37 Hvad er der med de der frames?...37 Undgå frames...38 Ud med tabeller (til layout)...38 Efterskrift

3 Indledning Denne artikel gennemgår først nogle grundlæggende forhold omkring oprettelse af HTML-dokumenter. Med udgangspunkt i nogle forskellige layoutmodeller gennemgås herefter konstruktionsmetoderne for disse. Artiklen afsluttes med nogle lommefilosofiske betragtninger over emnet. Det grundlæggende HTML-dokument Et HTML-dokument er kendetegnet ved noget information, der i og for sig ikke vedrører indholdet. Den skabelonside, der kan tilføjes indhold, ser ud som vist i eksempel 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da"> <head> <title>[ Dokumentets titel ]</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link rel="stylesheet" type="text/css" href="global.css" media="screen" /> <link rel="stylesheet" type="text/css" href="menu.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> </head> <body> [ Websidens indhold ] </body> </html> Eksempel 1: Det grundlæggende HTML-dokument. Om denne skabelon er følgende at sige: 1. Din webside skal altid være forsynet med en korrekt og fuldstændig dokumenttypeerklæring (DTD), de to første linjer i ovenstående skabelonkode. Du kan også anvende en HTML4.01 dokumenttypeerklæring som følger: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/tr/html4/strict.dtd"> 2. Dokumentet skal altid være forsynet med en title, der skal være sigende for dokumentets indhold 3. Dokumentet skal altid være forsynet med en angivelse af hvilket tegnsæt, der anvendes på siden. I stedet for ISO-tegnsættet kan du anvende et UTF-tegnsæt. I så fald gemmes filerne som UTF-filer, i stedet for det mere udbredte ANSI. Ikke alle teksteditorer giver dig dette valg. 4. I head-delen af siden indsættes tillige referencer til de stylesheets der formaterer siden til henholdsvis skærm og printer. Her indsættes også eventuelle scripts. 5. Alt indhold, der skal være synligt på siden, skal indsættes mellem <body> og </body>. 2

4 Indhold, indhold, indhold Det vigtigste ved din webside er indholdet af tekst og billeder, det vil sige det, der skal formidle din idé, din fortælling, din mening og sælge dine varer. Dit design er noget du føjer til din tekst og dine billeder. Dit design skal tilpasses dit indhold, og ikke omvendt. Selv den mest begavede designer kan ikke gøre en fattig tekst og nogle dårligt beskårne eller uvedkommende billeder til en vedkommende webside. Og det kræver overordentlig stor kunst at finde præcis dét billede, der rent faktisk siger mere end tusind ord. Grundregler for layout Der er nogle grundregler for websidelayout, som det er værd at skrive sig bag øret: For det første skal du gøre dig klart, at uanset hvilket visuelt udtryk, du stræber efter, er websiden grundlæggende bygget op af rektangulære elementer. For det andet skal du gøre dig klart, hvilke af en række hovedelementer, du får brug for: Sidehoved Sidefod Indholdsdel Navigationsapparat Eventuelle sidebars (infobokse) og deres placering Om navigationsapparatet kan siges, at det kan indbygges i sidehoved eller sjældnere i sidefoden i form af en navigationsbjælke. Et lodret navigationspanel er som regel indsat i en spalte eller kolonne til højre eller til venstre for indholdsdelen. For det tredje står du dig ved at lave en simpel skabelonside, hvor du placerer disse elementer i forhold til hinanden. Skabelonsiden bør testes i et bredt udvalg af browsere, ligesom du også bør undersøge, hvordan siden tager sig ud, når du fjerner stylesheet et. Din skabelonside kan ikke bestå af lutter tomme CSS-kasser. Der skal noget indhold i kasserne. Kassernes størrelse bestemmes i høj grad af kassernes indhold. Dette kan føre til, at kassens mål og position ændres. Du kan eventuelt bruge noget mumletekst. Du kan finde den tekst jeg har bruger, som en webside på For det fjerde bør du gøre dig klart at du ikke er webdesign-fagets svar på Leonardo da Vinci. Du kan skabe et smukt visuelt udtryk for dine ideer og budskaber, men du kan ikke lave noget der er enestående. Det sidste ønsker du nok heller ikke, fordi enestående i dette fag er ensbetydende med mindre tilgængeligt. For det femte skal dit visuelle design afhænge af indholdets karakter og mængde. At lave et design for derefter at skære tekster og billeder til så indholdet tilpasses designet i stedet for det omvendte er desværre temmelig udbredt, men ikke desto mindre forkert. Dermed være ikke sagt at du ikke må lege med alternative udformninger før alt dit indhold er hundrede procent på plads. Websidekonstruktion er først og fremmest et sjovt fag, der giver plads til at udfolde ens kreative evner. Jeg advarer kun imod det oversmarte, der fjerner fokus fra det budskab, du ønsker at formidle. 3

5 Det visuelle udtryk Når du har skrevet dine tekster og fået samling på dine billeder skal du tage stilling til det visuelle udtryk: a) Skal nogle af eller alle hovedelementerne omsluttes af en rammekant (border)? b) Skal websidens indhold have en mere eller mindre fast bredde, eller skal indholdet udvides i bredden i forhold til browservinduets bredde? c) Hvilken baggrund skal der være for de forskellige dele og for hele websiden? d) Og det er det på dette stadium godt at beslutte sig for, hvilket navigationsapparat du vil benytte: Flad eller dynamisk menu, mange eller få menupunkter, JavaScript grafisk menu eller CSS-menu med eller uden grafik? e) Og mange flere spørgsmål, som det er godt på forhånd at have tænkt igennem og noteret ned/tegnet. Et godt eksempel på, hvilke konsekvenser en tidlig beslutning har, er beslutningen om sidehovedets udformning. Der er utroligt nemt at lave et grafisk sidehoved med en vis bredde og en vis højde indeholdende logo, firmanavn, flot kulørt typografi og hele den tyrkiske musik. Chefen køber den straks. Du har til gengæld bundet dig til at et delelement skal være bestemmende for sidens øvrige udseende i henseende til farveskema, bredde og hvor meget af det egentlige indhold der er plads til under sidehovedet. Der er ikke én rigtig måde at designe og konstruere en webside på. Slutresultatet er altid en afvejning af en række forskellige hensyn. Der er kun ét hensyn du altid skal tage: Lad være med at lave noget, bare fordi du kan! Fælles for alle websider og deres visuelle design er naturligvis, at det helt grundlæggende er noget HTML-kode, der bærer siden struktur. Selv den lækreste Flash Movie kan ikke leve uden html. CSS-teknologien har vi fået for at hjælpe os til at præsentationsformatere vores HTML-kode. Du kan og bør bruge teknologien offensivt, og det vil sige: Brug CSS til sidelayout og ikke tabeller. Tabeller på webside bør kun være der, når der faktisk er behov for at præsentere data der naturligt falder ind i en tabelform. Hvis du tidligere har lavet websider med tabeller, kender du en del til de muligheder og begrænsninger, der er i websidekonstruktion. Mulighederne er meget større og begrænsningerne meget færre ved brug af CSS. Et fælles grundtræk er det rektangulære arbejdsfelt, som også tryksagssnedkere arbejder med, og som også kun kan deles op i rektangulære felter. Visuelle strukturer Figur 1 viser de mest almindelige grundlæggende visuelle strukturer, der anvendes i websidekonstruktion. De hovedelementer, der indgår, er 1. Et relativt smalt menupanel og/eller en navigationsbjælke (mørk grå); 2. En indholdsdel; og 3. Et sidehoved plus evt. en sidefod (lysere grå). I sin mest grundlæggende udformning består en webside faktisk kun af to hoveddele, nemlig en menu og en indholdsdel. Et af de første trin i designprocessen er at beslutte sig for, hvilken menu eller måske rettere hvilket navigationssystem der skal anvendes, og hvorledes det skal placeres på websiderne. 4

6 Figur 1: Grundlæggende visuelle strukturer. Blå er menuelementer. Brun er sidehoved og sidefod. Rød er sidebars. Det er de 6 grundkonstruktioner, der gennemgås i denne artikel. Med et behersket antal sider, op til 8-12 stykker, kan du nøjes med en ret simpel menu i form af et lodretstillet navigationspanel eller en vandretstillet navigationsbjælke. (De blå rektangler i figur 1). Med et større antal sider kommer du ind i overvejelser om enten to menuer på siderne eller en dynamisk menu under en eller anden form. Du kan dog også vælge at lave forskellige menuer til forskellige sektioner. En vandret navigationsbjælke har i sagens natur kun plads til et forholdsvis begrænset antal menupunkter, jeg vil skønne en 7-8 stykker. En sådan navigationsbjælke er til gengæld velegnet som udgangspunkt for en dynamisk dropdown menu, det vil sige en menu, hvor undermenuer folder sig ud ved mouseover eller klik på hovedmenuens menupunkter. Et lodretstillet navigationspanel kan have mange flere menupunkter end den vandretstillede, og begrænsningerne i tekstlængde i menuerne er ikke så restriktive. Jeg kan her slå fast, at der ikke er nogen naturlov, der forbyder at en linktekst fylder mere end én linje. Skal jeg gå ud fra, hvad jeg ser på nettet, ser det ud til, at den lodretstillede menu i venstre side er det mest populære til websteder med et behersket antal sider, mens navigationsbjælken ofte ses i kombination med en lodretstillet menu som sektionsmenu. I begge tilfælde kan navigationsapparatet udformes som dynamiske dropdown menuer. 5

7 Konstruktionsmetoder Groft set er der fire forskellige metoder til at konstruere de grundlæggende visuelle strukturer: 1. Det naturlige omløb, hvor elementerne placeres på siden i den orden, de forekommer i kildekoden. Uanset hvilken af nedennævnte konstruktionsmetoder du vælger får du bedste resultat ved i videst muligt omfang at benytte dette naturlige omløb. Jeg skriver mere om dette i forbindelse med de enkelte eksempler. 2. float-metoden: Særlig egnet til konstruktioner, hvor browservinduet skal udnyttes optimalt og hvor elementernes bredde skal indrette sig efter browservinduets bredde. Den pt. hyppigst anvendte metode. 3. position-metoden: Særlig egnet hvis du ønsker at positionere elementerne uafhængigt af deres rækkefølge i kildekoden. Denne metode er noget passé. 4. CSS table-display metoden: CSS-standarden indeholder en række værdier, der gør det muligt at give div HTML-elementet egenskaber som tabeller, tabelrækker og tabelceller uden at det er nødvendigt at bruge HTML tabelmarkørerne. 1 I de følgende mange kodeeksempler har jeg af gode grunde ikke indsat nogen egentlige artikeltekster eller billeder. I de fleste tilfælde vil du kunne se eksemplerne udført på denne artikels hjemmeside 2. Men hvis du vil prøve selv at taste eksemplerne ind, er det afgørende, at du har noget mumletekst at fylde i dine CSS-kasser. Den mumletekst, jeg har brugt i mange af mine tidligere eksempler (Lorem ipsum dolor ) kan du kopiere fra denne adresse: 1-spaltet layout Den simpleste opskrift overhovedet på, hvordan du med få og enkle midler laver et komplet websidelayout, er baseret på ovennævnte metode 1 og anvender det naturlige omløb til at positionere sidens elementer i forhold til hinanden: Jf. eksempel 2. Opret en ny webside og indsæt et par div er til sidehoved og artikel, som vist i eksempel 2. I head-delen af siden indsætter du så et stylesheet for siden. Dette stylesheet er vist i eksempel 3. Resultatet af øvelsen ser du i figur 2. Sidens overordnede bredde er givet ved #sideelementets bredde på 570 pixel, hvilket med den valgte skrift (Bookman Old Style) giver plads til ca. 70 tegn pr linje. Længere bør en tekstlinje ikke være. <div id="side"> <div id="sidehoved"> [ Sidehovedets indhold ] </div><!-- /sidehoved --> 1 Jeg gør en del ud af denne metode i denne artikel, fordi jeg finder den uhyre let at forstå og forklare. Metoden er relativt ny og der findes derfor ikke i skrivende stund ret meget tilgængeligt materiale om dette emne. Der er det problem med metoden, at den kræver særlige tiltag for at skabe et korrekt visuelt udtryk i ældre versioner af Internet Explorer. Jeg forholder mig til dette i forbindelse med beskrivelsen af de konkrete layout-modeller. 2 6

8 <div id="nav"> [ Navbar HTML-kode ] </div><!-- /nav --> <div id="artikel"> [ Artikel ] </div><!-- /artikel --> <div id="sidefod"> [ Sidefodens indhold ] </div><!-- /sidefod --> </div><!-- /side --> Eksempel 2: Model 6: HTML kildekode til et simpelt 1-spaltet layout. (Figur 2). Figur 2: Model 6, 1-spaltet layout. Til venstre kun layout, til højre med tekstformatering. <style type="text/css" media="screen"> * {margin:0;padding:0;} html { /*FF rulleskakt fiks */ overflow-y:scroll; } img {border:none;} body {font-family:georgia,times,serif;} div#side { width:90%; min-width:750px; max-width:1000px; margin: 0 auto;} div#sidehoved { height:160px; background-image:url(pix/fredericia.jpg); background-repeat:no-repeat; background-position: left top;} </style> Eksempel 3: Model 6. Stylesheet-kode til et simpelt 1-spaltet layout. (Figur 2) Bemærk i eksempel 2 at jeg bruger div-markøren med forskellige id er til at afgrænse sidens forskellige dele. div-markøren er i modsætning til de fleste øvrige HTML-markører semantisk betydningsløs og derfor på sæt og vis usynlig for for eksempel søgemaskiner og skærmlæsere. Og bemærk især min flittige brug af HTML-kommentarmarkøren til at mærke de div er, der afslutter et område. Der kan hurtigt komme flere div er i et layout, og man kan forbavsende hurtigt tabe overblikket over om man nu skal huske at afslutte denne ene før den anden eller omvendt. Især når div erne fyldes med den tekst og de billeder, jeg ikke medtager i disse eksempler. 7

9 #side-elementet, der rummer alle sidens øvrige elementer, er centreret i browservinduet. Et element med en given bredde midtstilles i browservinduet når hhv. margin-left og margin-right sættes til værdien auto. Det, du ser i eksempel 3 er kortformsudgaven af følgende formregler: margin-top:0;margin-right:auto;margin-bottom:0;margin-left:auto; Det kan også skrives på følgende kortere måde: margin: 0 auto 0 auto; eller endnu kortere margin: 0 auto; Rækkefølgen er: top, højre, bund, venstre. Er der kun to mål betyder disse top og bund, hhv højre og venstre. I figur 2 ser du to udgaver af den samme side. Til venstre siden som den ser ud, når den kun er layoutet, til højre efter at det stylesheet du ser i eksempel 3 er suppleret med noget tekstformatering: h1, h2, h3, h4, h5 { font-family:arial, helvetica, sans-serif; margin: 0 auto 0.5em auto;} h1 {font-size:2em;text-align:center; margin:1em auto.5em auto;color:#257;} p { margin:0 auto.5em auto;line-height:130%;}.manchet { -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; border-width:2px; border-style:solid; border-color:#505c5a; padding:10px; margin-right:0; margin-bottom:1em;} #sidefod p { font-family:arial,sans-serif; background-color:#fff; border-top:5px solid #257; font-size: 90%; text-align:right; padding-top:10px;} Eksempel 4: Model 6: Den supplerende tekstformatering, der retter tekstelementerne til. Navigationsbjælken til dette eksempel bygger på de principper, der er forklaret i artiklen Runde hjørner Manchettens runde hjørner er opnået ved brug af CSS3-egenskaben border-radius. Denne metode er meget nemmere end de forskellige metoder vi har brugt hidtil 3. har flere oplysninger om CSS3. Der er det problem med CSS runde hjørner, at de ikke vises i Internet Explorer 8 eller tidligere. Problemet er dog til at bære, fordi disse browsere blot viser en kasse uden hjørner. 3 og 8

10 Browservinduets bredde Et forhold, der tilsyneladende kommer som en overraskelse for mange begyndende websidekonstruktører er, at dem der skal se websiden sandsynligvis har en anden computerskærm end den konstruktøren selv sidder ved, og at disse mennesker har deres egne ideer om, hvor stor en del af deres computerskærm, browservinduet skal fylde. Herom kan siges, at din sides bredde ikke bør være større end omkr pixel, og at væsentlige informationer (inklusive dit navigationsapparat) skal kunne ses i et 800 gange 600 pixel stort browservindue. Grunden til det er, at selvom langt de fleste computerskærme (inklusive netbooks) snildt kan rumme et browservindue på 1024 gange 768 pixel, vil det ofte være andre programmer på skærmen end lige browservinduet for eksempel en gadget sidebar. Flydende, elastisk eller fikseret layout Et vigtigt spørgsmål er, om layoutet skal være flydende, således at du udfylder hele eller størstedelen af browservinduet, uanset dettes størrelse, eller om du ønsker et stivere layout, hvor nogle af eller måske alle hovedelementerne har en bestemt størrelse (bredde). Eksemplet figur 3 viser en side med en flydende bredde på 90 procent af browservinduets bredde, idet sidens indhold dog ikke kan blive bredere end 1000 pixel og ikke smallere end 75 pixel. (Se eksempel 6). De to alternativer til dette er A) Fikseret bredde betyder at du giver det element, der omslutter alt indholdet (i denne artikels eksempler #side-elementet), en bredde i pixels, for eksempel 750 pixel. Det betyder at indholdet vil fylde de 750 pixel i bredden, uanset bredden af browservinduet. B) Elastisk bredde får du hvis du giver #side-elementet en bredde i em er. Eksempel: #side {width: 47em;} En bredde på 47 em er svarer til ca. 750 pixel hvis browserens tekststørrelsesværktøj er sat til medium/normal skrift. Ideen med en em-fikseret bredde er at linjelængden ikke skal blive større når siden vises i et maksimeret browservindue på en større monitor. Øges skriftstørrelsen med browserens tekststørrelsesværktøj, øges linjelængden selvfølgelig også, men der bliver ikke flere tegn i linjen. Du kan finde varme fortalere for alle metoder: Når en læser først finder frem til din webside, gælder det om at udnytte hele det areal, hun stiller til din rådighed, siger nogle. Andre foretrækker et stivere visuelle design, der giver mulighed for meget præcise placeringer af websidens forskellige elementer. Atter andre lægger, som denne artikels forfatter, vægt på at linjelængden skal tillade en komfortabel læsning af længere tekststykker. Summa summarum er det i dette forhold karakteren af din webside, der skal danne grundlag for det visuelle design, herunder valget af metode til fastsættelse af bredden. Det hyppigste anvendte design er i virkeligheden en kombination, det vil sige et layout, hvor navigationselementer er fikserede, mens indholdsdelen er elastisk eller flydende. 9

11 Hvorom alting er, giver jeg dig i det følgende en del forskellige layoutmodeller at vælge imellem, forsynet med forklaringer og kommentarer til opbygningen. Det skulle sætte dig i stand til selv at modificere de forskellige modeller, så de passer til dine formål. Websidens højde En CSS-kasses størrelse afhænger som standard af indholdets mængde. Websiden har altid har en given bredde, som aldrig kan blive større end browservinduets bredde. Dette tilsiger os at vi ikke kan bestemme at vort indhold tillige skal have en fikseret højde. For det første kan du ikke regne med at en sådan konstrueret skabelonside kan rumme det indhold, du måske havde tænkt dig på en anden side på dit websted. For det andet har du ingen som helst kontrol over læserens eventuelle brug af browserens tekststørrelsesværktøj eller zoomværktøj. For det tredje kan du trods al mulig omhu aldrig være sikker på at din læsers computer har den skrift installeret, som du bruger på dine sider. Figur 3: Model 1, flydende layout med fikseret venstre spaltebredde. Visning i et 1024*768 browservindue (bagest) og et 800*600 browservindue forrest. 2-spaltet flydende layout Et meget almindeligt layout ser du i figur 3. #side-elementet, som omslutter alt indhold på siden, antager 90 procent af browservinduets bredde, dog maksimalt1000 pixel og ikke mindre end 750 pixel. De tre hovedelementer #sidehoved, #container og #sidefod placeres under hinanden på grund af elementernes naturlige omløb. HTML-kildekoden til dette eksempel ser du i eksempel 5. Stylesheet et i eksempel 6 omfatter kun de elementer, der layouter indholdet. Tekstformateringen er i det store og hele som i eksempel 4. <div id="side"> <div id="sidehoved"> [ Sidehovedets indhold ] </div><!-- /sidehoved --> <div id="container"> <div id="nav"> [ Menupanelets HTML-kode ] </div><!-- /nav --> 10

12 <div id="artikel"> [ Artikeltekst og evt. billeder ] </div><!-- /artikel --> </div><!-- /container --> <div id="sidefod"> [ Sidefoden tekst ] </div><!-- /sidefod --> </div><!-- /side --> Eksempel 5: HTML-koden til et layout med to kolonner. Figur 3. #container-elementet spiller alene en rolle som beholder for de to spalter, der skal stå ved siden af hinanden. Spalten #nav har fået en fikseret bredde på 180 pixel, passende til det menupanel, der er indsat i denne spalte. Spalten #artikel har ikke fået nogen bredde og udfylder derfor al den plads der er til højre for menuspalten. #sidefods-elementet føjer sig uden videre ind under #container-elementet. #side { width:90%; min-width:750px; max-width:1000px; margin: 0 auto;} div#sidehoved { height:160px; background-image:url(pix/fredericia.jpg); background-repeat:no-repeat; background-position: left top; margin:0 0 10px 0; padding:0;} #nav { font-family: Arial, Helvetica, sans-serif; display:table-cell; vertical-align:top; width: 180px; margin-right:10px; background-color: #d7ad7b;} #artikel { display:table-cell; vertical-align:top; padding-left:20px;} Eksempel 6: Model 1: Stylesheet til et layout med to kolonner. (Figur 3) Der er to forhold vedrørende denne tospaltede eksempelside, som det nok er værd at hæfte sig ved: A) Det ene forhold er, at sidefoden føjer sig ind det almindelige omløb, der følger af dets placering i kildekoden. Det vil sige, sidefoden ligger lige under de to spalter uden at vi skal fortage nogen særlige krumspring for at opnå dette. Sådanne krumspring er nødvendige, hvis layoutet er baseret på float-metoden eller position-metoden. B) Det andet forhold er, at at #nav-elementet den venstre spalte har fået en baggrundsfarve fra top til bund, uden at elementet har en fikseret højde. Dette kan kun med noget besvær opnås med de øvrige metoder. Bortset fra disse fordele er det interessante i eksempel 6 den fremhævede formatering af #nav og #artikel-elementerne. Disse påtrykkes egenskaben display:table-cell og de to elementer vises derfor som om de virkelig var celler i en HTML-tabel, men 11

13 uden at vi har brugt hverken table, tr eller td HTML tabelmarkørerne. Det kræver nok en nærmere forklaring, som følger herunder: Navn Beskrivelse Eksempel table table-row table-row-group table-cell table-header-group table-footer-group table-column-group table-column table-caption Får elementet til at opføre sig som et table-element Får elementet til at opføre sig som en tabelrække (tr-elementet) Får elementet til at opføre sig som et tbody-element Får elementet til at opføre sig som en tabelcelle (td-elementet) Får elementet til at opføre sig som et thead-element Får elementet til at opføre sig som et tfoot-element Får elementet til at opføre sig som et colgroup-element Får elementet til at opføre sig som et colelement Får elementet til at opføre sig som et caption-element element { display:table;} element { display:table-row;} element { display:table-row-group} element { display:table-cell} element { display:table-header-group;} element { display:table-footer-group;} element { display:table-column-group;} element { display:table-column;} element { display:table-caption;} Tabel 1: Oversigt over CSS display-egenskaber der får elementer til at opføre sig som om der var tale om HTML tabelelementer. CSS display:table egenskaberne For mange år siden var den eneste måde, man på en webside kunne opnå at få to eller flere elementer til at stå ved siden af hinanden, ved at oprette en tabel ved hjælp af den flerhed af HTML-markører man kan bruge til dette. For eksempel ville et layout mage til det netop præsenterede kræve mindst følgende HTML-kode <table> <tr><td width="180">menupanelets HTML-kode</td> <td>artiklens tekst og billeder</td></tr> </table> Der er det galt med dette, at table-markøren er en præsentationsmarkør, der har den semantiske betydning at indholdet er tabeldata, som vi for eksempel kender det fra regneark. Dermed har vi blandet indhold og form sammen, endda med den forkerte form. Det har den uhyggelige konsekvens at skal du lave tyve sider med samme layout skal du altså kopiere den samme tabel der som regel er meget meget mere kompliceret end mit simple eksempel tyve gange og påpasseligt udskifte indholdet i to, otte, femten eller hvor mange tabelceller der indgår i dit layout. Sider, der er konstrueret på den måde, er umådeligt tidkrævende og dermed kostbare at opdatere. Det kan mange firmaer, der stadigvæk hænger på omfattende 12

14 websites, konstrueret på netop den måde, sikkert tale med om. Omkring årtusindskiftet skete der imidlertid det, at nye browserversioner blev meget bedre til at tolke CSS-egenskaber end de tidligere havde været. Det åbnede i første omgang mulighed for at layoute med udstrakt brug af position-egenskaben, og siden med brug af float-egenskaben. Begge metoder float-egenskaben især er imidlertid langt mindre intuitive end tabel-metoden. Det er derfor et stort fremskridt at alle browsere nu kan tolke de CSS display egenskaber der er vist i tabel 1. I vort første layout-eksempel (figur 3, eksempel 5) fik vi de to spalter til at stå ved siden af hinanden ved blot at give de to div er, der skal tegne henholdsvis #nav og #artikel-elementerne, egenskaben display:table-cell. Anonyme tabelelementer Hovsa, vil enhver der har prøvet kræfter med en HTML-tabel udbryde, hvor er table-markøren, og hvor er tr-markøren? Svaret på det er, at browseren, i overensstemmelse med CSS-specifikationen, indsætter de manglende tabelelementer. I ovennævnte eksempel ser browseren to tabelceller, og viser dem derfor som om <table> </table> og <tr> </tr> er der, selv om de altså ikke er indsat i koden. Et par eksperimenter vil afsløre hvor stærkt et værktøj vi hermed har fået i hænde. Vi opretter en webside med følgende HTML-kode: <div class="container"> <div class="row"> <div class="celle">celle 1</div> <div class="celle">celle 2</div> <div class="celle">celle 3</div> </div> </div> Og til formateringen af dette stylesheet: <style type="text/css">.container {display:table;}.row {display:table-row;}.row div { display:table-cell; width:150px;height:100px; border:2px solid maroon; padding:.5em; } </style> Figur 4 til venstre viser, hvorledes en sådan side kommer til at se ud. HTML-koden til denne side omfatter eksplicit et element (.container) der har fået påtrykt egenskaben display:table. Dette resulterer i at.container-elementet i browseren vises som en tabel med én række bestående af 3 celler. Men hvis vi nu modificerer HTML-koden til følgende: <div class="row"> <div class="celle">celle 1</div> <div class="celle">celle 2</div> <div class="celle">celle 3</div> </div> 13

15 vil browseren stadig vise det samme billede som du ser i figur 4. Figur 4: Tre på hinanden følgende elementer har fået display-egenskaben table-cell. Browseren opdager nogle elementer, der har fået påtrykt egenskaberne display: table-row og display: table-cell og opretter derfor en såkaldt anonym boks der omfatter tabel -rækken og tabel -cellerne. Denne reduktion af HTML-koden kan drives endnu videre, så HTML-koden kommer til at se således ud: <div>celle 1</div> <div>celle 2</div> <div>celle 3</div> Resultatet er stadig det samme. Foruden den anonyme.container-boks som altså nu slet ikke optræder i HTML-koden oprettes endnu en anonym boks, der omfatter tabel -rækken. I forhold til det meget simple stylesheet for dette eksempel kan du variere bredden af de enkelte kolonner gennem brugen af CSS klassenavne, eller gennem brugen af display-værdierne table-column og/eller table-column-group. Regler for oprettelse af anonyme bokse Disse anonyme bokse eller kasser opstår ikke som følge af magi, og teknikken kan ikke eliminere kravet om, at HTML strukturformatering og CSS formregler skal være logiske og i overensstemmelse med W3C s standarder. Reglerne er dog ganske simple: hvis et layout forudsætter et bestemt element vil browseren oprette et virtuelt element og påtrykke det en af display-egenskaberne table, table-row eller table-cell. Hvis du således har et element med display-egenskaben table-cell, og det umiddelbart foregående element ikke har display-egenskaben table-row, vil browseren oprette et sådant virtuelt element og påtrykke det værdien table-row. Dette element vil omslutte cellen og eventuelle øvrige elementer med display-værdien table-cell, indtil browseren støder på et element der ikke har denne display-værdi. Dermed afsluttes den virtuelle række. Eksempel: <div>celle 1</div> <div>celle 2</div> <div>celle 3</div> <p>det er et almindeligt tekstafsnit.</p> Resultatet af dette kan du se i figur 4 til højre. 14

16 Nyttige table-egenskaber Når du anvender de her beskrevne CSS display-egenskaber vil elementerne udvise samme egenskaber som de respektive elementer i en HTML-tabel. Her er en gennemgang af de nyttigste af disse: table-layout: Denne egenskab kan have værdierne auto eller fixed. Standardværdien er auto, hvilket medfører at tabellen antager en bredde og en højde der kan rumme a) indholdet af cellerne eller b) summen af cellernes fikserede bredder og/eller højde. border-collapse: Denne egenskab kan have værdierne collapse eller separate. Standard-værdien er separate, hvilket medfører at egenskaberne border-spacing og empty-cells kan påtrykkes den virtuelle tabel. Modsætningsvis fører værdien collapse til, at der ikke kan sættes nogen afstand mellem cellerne og at tomme celler ikke vises. border-spacing: Denne egenskab kan have en længde, som bestemmer mellemrummet mellem tabellens enkelte celler. Bemærk at dette mellemrum også optræder på ydersiden af cellerne i øverste og nederste række og første og sidste kolonne. Figur 5: Den umulige CSS layoutmodel. Det perfekte layout: lige høje kolonner Med de traditionelle layoutmetoder vi har brugt siden årtusindskiftet er det ganske vanskeligt at sikre at to eller flere kolonner er lige høje, eller i det mindste ser lige høje ud. Og det er næsten uoverkommeligt, hvis vi ønsker at lave et layout-net (Grid på US/Engelsk), bestående af flere rækker med to eller flere kolonner, hvor de enkelte celler holder register, som det hedder inden for typografien. Det vil sige at kassernes over- og underkanter flugter med hinanden. Med den layoutmetode, jeg beskriver her, er det ganske let, jf. figur 5. Den HTML-kode, der skaber skærmbilledet i figur 5, er følgende: 15

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 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

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

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

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. 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

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

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

TEKNISK DOKUMENTATION FAKTURA LAYOUT ABAQUE VERSION 2.0

TEKNISK DOKUMENTATION FAKTURA LAYOUT ABAQUE VERSION 2.0 TEKNISK DOKUMENTATION FAKTURA LAYOUT ABAQUE VERSION 2.0 INTRODUKTION... 3 SKABELON OPBYGNINGEN... 3 BYG DIN EGEN SKABELON... 3 INDSÆT FELTER... 3 INDSÆT VARELINJER... 3 FILNAVN... 4 LISTE OVER FELTER...

Læs mere

Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN

Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN 2015 Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN I denne tutorial kommer du til at I denne tutorial vil du lære hvad Bootstrap er, hvordan det fungerer og hvordan

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

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

Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, http://www.technofil.dk. Der refereres fra nu af blot

Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, http://www.technofil.dk. Der refereres fra nu af blot Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, http://www.technofil.dk. Der refereres fra nu af blot til hjemmesiden. Mine indledende tanker bag hjemmesiden

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

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

CSS selektorer. CSS pseudoklasser, pseudoelementer og attribut-selektorer. Af Jørgen Farum Jensen

CSS selektorer. CSS pseudoklasser, pseudoelementer og attribut-selektorer. Af Jørgen Farum Jensen CSS selektorer CSS pseudoklasser, pseudoelementer og attribut-selektorer Af Jørgen Farum Jensen CSS for viderekomne kunne jeg også have brugt som overskrift for denne artikel. Artiklen beskriver de metoder,

Læs mere

Roskildes tekniske gymnasium. Kulløse Mijlømesse. Afsluttende kom/it projekt

Roskildes tekniske gymnasium. Kulløse Mijlømesse. Afsluttende kom/it projekt Roskildes tekniske gymnasium Kulløse Mijlømesse Afsluttende kom/it projekt Casper Hansen og Christian Hansen 26-04-2009 Indhold Indledning... 3 Planlægning... 3 Overvejelser... 3 Hvordan man kommer til

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

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

Grafisk Workflow. Mediegrafiker - Svendeprøve. Mediegrafikeruddannelsen af Ramin Azizi

Grafisk Workflow. Mediegrafiker - Svendeprøve. Mediegrafikeruddannelsen af Ramin Azizi Grafisk Workflow Mediegrafiker - Svendeprøve Mediegrafikeruddannelsen 2012-2016 - af Ramin Azizi www.azizidesign.dk Dokumentation Opgavebeskrivelse: Jeg har i denne opgave valgt at redesigne s hjemmeside,

Læs mere

Indre Missions. Vejledning til TYPO3

Indre Missions. Vejledning til TYPO3 Indre Missions Vejledning til TYPO3 Manual til Typo3 på IM's server 1. Udgave, januar 2010 Daniel Damm, IT afdelingen, Indre Missions Hus Indholdsfortegnelse Indledning...5 Præsentation af begrebet CMS...6

Læs mere

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold:

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold: 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

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

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

Administration af subsites BRUGERVEJLEDNING FOR ADMINISTRATOREN

Administration af subsites BRUGERVEJLEDNING FOR ADMINISTRATOREN Administration af subsites BRUGERVEJLEDNING FOR ADMINISTRATOREN Indholdsfortegnelse Introduktion... 2 Definitioner... 2 Generelt... 3 Oprettelse af en skabelon... 4 Sidetypeskabeloner... 5 Globale displaymoduler...

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

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

Hjemmesidens layout. Sitecore Foundry maj Version 1.2

Hjemmesidens layout. Sitecore Foundry maj Version 1.2 Sitecore Foundry 3.0 Hjemmesidens layout 31. maj 2012 - Version 1.2 Pentia A/S Store Kongensgade 66, Baghuset 1264 København K Telefon: 7023 3330 E-mail: info@foreningssite.dk Indholdsfortegnelse Indledning...

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

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

Vejledning i redigering af apotekets hjemmeside

Vejledning i redigering af apotekets hjemmeside i redigering af apotekets hjemmeside It-afdelingen Januar 2007 INDHOLDSFORTEGNELSE FEJL! BOGMÆRKE ER IKKE DEFINERET. 1 INTRODUKTION 3 2 ADMINISTRATION 4 3 OPBYGNING 4 SIDER 5 FIL ARKIV 6 ARTIKLER 7 ØVRIGE

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

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

Word-5: Tabeller (2007)

Word-5: Tabeller (2007) Word-5: Tabeller (2007) Tabel-funktionen i Word laver en slags skemaer. Word er jo et amerikansk program og på deres sprog hedder skema: table. Det er nok sådan udtrykket er opstået, da programmet blev

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

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

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

Hvad bør du vide om layout og typografi

Hvad bør du vide om layout og typografi Hvad bør du vide om layout og typografi Når man vil lave en tekst, som andre skal læse, er det vigtigt at vælge en skrifttype, der er motiverende og inspirerende at læse for målgruppen. Derfor bør man

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

Release notes Januar 2014

Release notes Januar 2014 Release notes Januar 2014 Det er vigtigt, I sletter midlertidige filer i jeres browser efter et nyt release af borger.dk, for at browseren ikke stadig anvender ældre komponenter herfra. For OPIS redaktører

Læs mere

Manual for Synkron hjemmesider

Manual for Synkron hjemmesider Manual for Synkron hjemmesider Denne manual tilhører: Brugernavn: (username) Adgangskode: (password) 1 Start med sitetræet: Sitetræet er centralt. Det er her, dit website er. Det er her, du bygger dine

Læs mere

PROJEKTOPGAVE -Et brugervenligt website af: Michéla, Mathilde, Christian & Andreas

PROJEKTOPGAVE -Et brugervenligt website af: Michéla, Mathilde, Christian & Andreas PROJEKTOPGAVE -Et brugervenligt website af: Michéla, Mathilde, Christian & Andreas INDHOLD GRUPPEMEDLEMMER...3 DESIGNBRIEF...4 KOMMUNIKATIONSANALYSE...4-5 KOMMUNIKATIONSMODEL...5 ARGUMENTATION FOR DESIGNPRINCIPPER...6

Læs mere

Større skriftlige opgaver i Microsoft Word 2007 Indhold

Større skriftlige opgaver i Microsoft Word 2007 Indhold Større skriftlige opgaver i Microsoft Word 2007 Indhold Større skriftlige opgaver i Microsoft Word 2007... 1 Inddeling i afsnit... 2 Sideskift... 2 Sidetal og Sektionsskift... 3 Indholdsfortegnelse...

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

Hjemmesiden er opdelt i et sidehoved, en sidefod og mellem disse 3 kolonner: venstre, midterste og højre. Højre kolonne vises dog kun på forsiden.

Hjemmesiden er opdelt i et sidehoved, en sidefod og mellem disse 3 kolonner: venstre, midterste og højre. Højre kolonne vises dog kun på forsiden. Hjemmesiden er opdelt i et sidehoved, en sidefod og mellem disse 3 kolonner: venstre, midterste og højre. Højre kolonne vises dog kun på forsiden. VENSTRE kolonne indeholder flere elementer (se illustration

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

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

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

1 Robbins, Jennifer N.: Learning Web Design, s. 41

1 Robbins, Jennifer N.: Learning Web Design, s. 41 I designarbejdet forbundet med at udvikle en hjemmeside, er det vigtigt at gøre sig nogle overvejelser over hvilken optimale skærmstørrelse man designer til, da dette har konsekvens for den efterfølgende

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

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

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

Word-5: Tabeller og hængende indrykning

Word-5: Tabeller og hængende indrykning Word-5: Tabeller og hængende indrykning Tabel-funktionen i Word laver en slags skemaer. Word er jo et amerikansk program og på deres sprog hedder skema: table. Det er nok sådan udtrykket er opstået, da

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

Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger. Hvilken skærmopløsning? OBS

Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger. Hvilken skærmopløsning? OBS Generelle bemærkninger Programmet Dreamweaver har været på markedet i nogle år efterhånden. Den seneste version hedder Dreamweaver CS4, og programmet er på engelsk. Dreamweaver er en såkaldt grafisk editor,

Læs mere

Typografi og layout i Word 2010

Typografi og layout i Word 2010 Ret&Rigtigt F12 Niels Erik Wille Typografi og layout i Word 2010 Papirformat og papirets orientering (højformat / bredformat) Vælges i menuen Sidelayout: Man kan vælge Retning (højformat / bredformat)

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

GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE

GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE 2 REDESIGN AF FUTURECOM BUSINESS SOLUTIONS HJEMMESIDE OPGAVEN Den gamle hjemmeside skulles redesignes da den daværende hjemmeside var forældet (indhold og udseende)

Læs mere

vorbasse.dk Redaktørmanual Kentaur

vorbasse.dk Redaktørmanual Kentaur Redaktørmanual Kentaur Indholdsfortegnelse Kapitel 1 - TYPO3 Brugerfladen 3 Log ind 3 Backend 4 Frontend 5 Hvor skal jeg klikke? 5 Gem, gem og vis, gem og luk 6 Kapitel 2 - Sider & menuer 7 Sammenhæng

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

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

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

Redaktørmanual TYPO3 Version 6.2

Redaktørmanual TYPO3 Version 6.2 Redaktørmanual TYPO3 Version 6.2 www.t3cms.dk TYPO3 Manual Version 6.2 Side 1 af 20 T3CMS Tlf: 70 25 00 22 Indholdsfortegnelse Generel info om TYPO3 3 Rediger din side 4-6 Indsættelse af links 7 Indsæt

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

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

MANUAL. Siteloom CMS

MANUAL. Siteloom CMS MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 3. september, 2012 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 8 2. Sider... 10 2.a Opret side...

Læs mere

Startvejledning. Microsoft PowerPoint 2013 ser anderledes ud end tidligere versioner, så vi lavet denne guide for at gøre din læreproces nemmere.

Startvejledning. Microsoft PowerPoint 2013 ser anderledes ud end tidligere versioner, så vi lavet denne guide for at gøre din læreproces nemmere. Startvejledning Microsoft PowerPoint 2013 ser anderledes ud end tidligere versioner, så vi lavet denne guide for at gøre din læreproces nemmere. Find det du skal bruge Klik på en fane på båndet for at

Læs mere

GRAFISK PRODUKTION & WORKFLOW. Endotest website

GRAFISK PRODUKTION & WORKFLOW. Endotest website GRAFISK PRODUKTION & WORKFLOW Endotest website DOKUMENTATION OPGAVEN: Endotest ApS ønskede at redesigne deres hjemmeside, så den fremstår mere professionel og enkel. Derudover skal det nye site præsentere

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

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

xgalleri Mulige filtyper Installation web-version

xgalleri Mulige filtyper Installation web-version xgalleri xgalleri opstod ud fra ønsket om at lægge en større samling billeder på nettet. Der findes mange programmer, som kan bruges til at lægge datafiler på nettet; men de fungerer typisk på den måde,

Læs mere

4 ARBEJDE MED SEKTIONER

4 ARBEJDE MED SEKTIONER 4 ARBEJDE MED SEKTIONER Sektioner er en ny måde at vise indhold på. I bund og grund handler det om, at vi opdeler en side i en eller flere sektioner, som kan vise indhold på en række forskellige måder.

Læs mere

INTRODUKTION TIL DIAGRAMFUNKTIONER I EXCEL

INTRODUKTION TIL DIAGRAMFUNKTIONER I EXCEL INTRODUKTION TIL DIAGRAMFUNKTIONER I EXCEL I denne og yderligere at par artikler vil jeg se nærmere på diagramfunktionerne i Excel, men der er desværre ikke plads at gennemgå disse i alle detaljer, dertil

Læs mere

Navigationsrude Tryk på Ctrl+F for at få vist navigationsruden. Du kan omorganisere et dokument ved at trække dokumentets overskrift i denne rude.

Navigationsrude Tryk på Ctrl+F for at få vist navigationsruden. Du kan omorganisere et dokument ved at trække dokumentets overskrift i denne rude. Startvejledning Microsoft Word 2013 ser anderledes ud end tidligere versioner, så vi har oprettet denne vejledning, så du hurtigere kan lære programmet at kende. Værktøjslinjen Hurtig adgang Kommandoer

Læs mere

Vejledning til vedligehold af

Vejledning til vedligehold af Vejledning til vedligehold af www.ajsport.dk Udarbejdet af Helle M. Klausen Indhold Sådan logger du på... 2 Sådan logger du af... 2 Hvad er ikke tilladt under vedligehold af www.ajsport.dk?... 2 Kan www.ajsport.dk

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

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