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

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

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

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 H1 MARIA SCHELDE

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

Læs mere

Byg et website med Dreamweaver

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

Læs mere

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Manual til hjemmeside i Typo3

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

Læs mere

Manual til Dynamicweb Februar 2010

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

Læs mere

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

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

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

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

Skifte til Excel 2010

Skifte til Excel 2010 I denne vejledning Microsoft Excel 2010 ser meget anderledes ud end Excel 2003, og vi har derfor oprettet denne vejledning, så du hurtigere kan komme i gang med at bruge programmet. Læs videre for at få

Læs mere

Redaktørmanual TYPO3. LinkFactory TYPO3 MANUAL

Redaktørmanual TYPO3. LinkFactory TYPO3 MANUAL LinkFactory TYPO3 MANUAL Kapitel 1 - TYPO3 CMS - Opbygning... 3 Log ind... 3 Backend... 4 Frontend... 5 Hvor skal jeg klikke?... 5 Gem, gem og vis, gem og luk... 6 Kapitel 2 - Håndtering af sider & menuer...

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

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

Microsoft. fra Word 2003

Microsoft. fra Word 2003 I denne vejledning Microsoft Word 2010 ser meget anderledes ud end Word 2003, og vi har derfor oprettet denne vejledning, så du hurtigere kan komme i gang med at bruge programmet. Læs videre for at få

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

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

Kapitel 13 Arbejde med Typografier:

Kapitel 13 Arbejde med Typografier: Kom i gang med Kapitel 13 Arbejde med Typografier: Introduktion til Typografier OpenOffice.org Rettigheder Dette dokument er beskyttet af Copyright 2005 til bidragsyderne som er oplistet i afsnittet Forfattere.

Læs mere

ANALYSE AF WEBSTEDET WWW.BILFORHANDLER.DK

ANALYSE AF WEBSTEDET WWW.BILFORHANDLER.DK ANALYSE AF WEBSTEDET WWW.BILFORHANDLER.DK Denne rapport indeholder en primær analyse af webstedet www.bilforhandler.dk. Vi har kigget på: Det vigtige førstehåndsindtryk af webstedet Brugervenlighed Anvendte

Læs mere

Mindmapping med FreeMind. En Introduktion til programmet FreeMind

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

Læs mere

Brugervejledning. Hjemmesider med Cmsimple.

Brugervejledning. Hjemmesider med Cmsimple. 1af23 Brugervejledning. Hjemmesider med Cmsimple. 1. Forord. Denne brugervejledning er fremstillet for at hjælpe personer ved Lokalhistorisk Arkiver i ny Sønderborg kommune, som kun har ringe kendskab

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

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

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

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

Opret din egen blog og publicer dit første indlæg med 8 enkle trin

Opret din egen blog og publicer dit første indlæg med 8 enkle trin Opret din egen blog og publicer dit første indlæg med 8 enkle trin NB: Det vigtigste at forstå, når du arbejder med blogs, er at der er et interface, hvor du arbejder og et interface, som læsere/brugere

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

MANUAL. Siteloom CMS

MANUAL. Siteloom CMS MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 13. marts, 2014 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 9 2. Sider...12 2.a. Opret side...13 2.b.

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

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

PowerPoint 2003. Kursusmateriale til FHF s kursister

PowerPoint 2003. Kursusmateriale til FHF s kursister PowerPoint 2003 Kursusmateriale til FHF s kursister Indholdsfortegnelse: Opgave 1 Hvad er en Præsentation?... 2 Opgave 2 vælg emne + opret dias... 3 Opgave 3 Indsæt objekter / billeder... 4 Opgave 4 Brugerdefineret

Læs mere

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

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

Læs mere

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

Filtyper, filformat og skabelon. Tabel. Tekstombrydning. Demo Fremstil, gem og brug en skabelon. Øvelser Fremstil, gem og brug en skabelon

Filtyper, filformat og skabelon. Tabel. Tekstombrydning. Demo Fremstil, gem og brug en skabelon. Øvelser Fremstil, gem og brug en skabelon Disposition for kursus i Word 2007 Filtyper, filformat og skabelon Demo Fremstil, gem og brug en skabelon Øvelser Fremstil, gem og brug en skabelon Tabel Demo Opret en tabel ud fra en tekst Øvelser Opret

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

MANUAL. Siteloom CMS

MANUAL. Siteloom CMS MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 3. oktober, 2013 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 9 2. Sider...12 2.a. Opret side...13

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

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

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 WORKFLOW WEBSITE - CHOCOADDICT

GRAFISK WORKFLOW WEBSITE - CHOCOADDICT GRAFISK WORKFLOW WEBSITE - CHOCOADDICT DOKUMENTATION OPGAVEBESKRIVELSE Opskriftsbogen Chocoaddict skulle have et website, hvor alle opskrifter samt skabelon til print selv opskriften er tilgængelig. Der

Læs mere

1. Opbygning af et regneark

1. Opbygning af et regneark 1. Opbygning af et regneark Et regneark er et skema. Vandrette rækker og lodrette kolonner danner celler, hvori man kan indtaste tal, tekst, datoer og formler. De indtastede tal og data kan bearbejdes

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

Opstart. I gang med Dreamweaver. Læs mere om...

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

Læs mere

Peter Kragh Hansen. Microsoft PowerPoint 2013 DK. ISBN nr.: 978-87-93212-07-7

Peter Kragh Hansen. Microsoft PowerPoint 2013 DK. ISBN nr.: 978-87-93212-07-7 Peter Kragh Hansen Microsoft PowerPoint 2013 DK ISBN nr.: 978-87-93212-07-7 I n d h o l d s f o r t e g n e l s e PowerPoint 2013... 3 Præsentation... 4 Oprettelsen af præsentationer... 5 Skabeloner og

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

Brugervejledning. Miljøministeriet A4. Opdateret den 25. oktober 2011

Brugervejledning. Miljøministeriet A4. Opdateret den 25. oktober 2011 Brugervejledning Miljøministeriet A4 Opdateret den 25. oktober 2011 Indholdsfortegnelse Introduktion... 3 Opret et nyt dokument... 3 Før du starter... 4 Om at arbejde med typografier:... 5 Menu: A4 - Publikation...

Læs mere

Indhold. Filbehandling. Tekstbehandling med Word. Layout med Publisher. Webdesign med WordPress. Surf på nettet med Explorer. Database med Access

Indhold. Filbehandling. Tekstbehandling med Word. Layout med Publisher. Webdesign med WordPress. Surf på nettet med Explorer. Database med Access Indhold Filbehandling Filbehandling... 7 Tekstbehandling med Word I gang med Word... 11 Tegnformater... 12 Afsnitsformater... 15 Kanter og skygger... 19 Tabulator... 21 Sidelayout... 24 Gennemse... 28

Læs mere

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på Grafisk design Design af hjemmeside til indretningsarkitekt med firma navn enrico indret, som jeg tidligere har designet logo for. Firmaet laver udelukkende erhvervsindretning og målgruppen for sitet er

Læs mere

Sådan redigerer du en hjemmeside i Umbraco

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

Læs mere

MANUAL TIL FS PÅ NETTET

MANUAL TIL FS PÅ NETTET MANUAL TIL FS PÅ NETTET Sådan opretter du nyheder og artikler (side 4) Sådan laver du links (side 14) Om tjek ind/ud og publicer (side 20) Sådan uploader du billeder og dokumenter (side 25) Sådan redigerer

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

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

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

Læs mere

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

Karens vejledning til WordPress, september 2014 1

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

Læs mere

Indhold. Case 1: Introduktion 3. Case 2: Vælg og indstil tema 12. Case 3: Sider og indlæg 17

Indhold. Case 1: Introduktion 3. Case 2: Vælg og indstil tema 12. Case 3: Sider og indlæg 17 1. udgave 2012 Udgivet af Softworld Kurser A/S Kopiering samt gengivelse af indholdet er ikke tilladt, medmindre der er givet skriftlig tilladelse herom. Copyright Softworld Kurser A/S Forfatter: Martin

Læs mere

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

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

Læs mere

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

Produkt. Index side GRAFISK DESIGN

Produkt. Index side GRAFISK DESIGN Grafisk design Produkt Index side Produkt Underside - kontakt Redegørelse OPGAVEN I forbindelse med valgfag, som jeg tog i København, havde vi lært forskellige nye funktioner, som vi skulle implementere

Læs mere

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

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

Læs mere

Lyngby Svømmeklub Hjemmeside Guide. Indholdsfortegnelse

Lyngby Svømmeklub Hjemmeside Guide. Indholdsfortegnelse Indholdsfortegnelse Indledning... 2 Hjemmeside struktur... 3 Rettigheder... 4 Opret Nyhed... 6 Opret Kalender Event... 7 Opret Arrangement... 9 Fast side... 10 Forside... 11 Tekst... 11 Billeder... 11

Læs mere

Tilpas: Hurtig adgang

Tilpas: Hurtig adgang Tilpas: Hurtig adgang Genveje, Se skærmtips Se tips Hold alt tasten nede. Og brug bogstaver Word Fanen Filer PDF dokument Brug skabelon Visninger Husk Luk ved fuldskærmsvisning Brug zoom skyder Marker,

Læs mere

Introduktion til billeddatabasen

Introduktion til billeddatabasen Introduktion til billeddatabasen Colourbox.dk Colourbox.dk er den billeddatabase som Odense Kommune har købt licens til. Det er vigtigt at bemærke, at der ikke er ubegrænset download af billeder. I materialet

Læs mere

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

CSS CSS er en forkortelse for Cascading Style Sheets. CSS er et sprog som bruges til at definere layout på fx HTML-dokumenter. 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

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

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

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

Orddeling. Automatisk orddeling. Manuel orddeling. Word 2010 18 thoremil.dk. Vælg fanebladet [Sidelayout] Vælg [Orddeling] Markér Automatisk orddeling

Orddeling. Automatisk orddeling. Manuel orddeling. Word 2010 18 thoremil.dk. Vælg fanebladet [Sidelayout] Vælg [Orddeling] Markér Automatisk orddeling Orddeling Automatisk orddeling Vælg [Orddeling] Markér Automatisk orddeling Manuel orddeling Vælg [Orddeling] Klik [Manuelt] For hvert ord, som vises, kan der gøres følgende: Accepter det foreslåede orddelingssted

Læs mere

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

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

Læs mere

Tjek dine miljøvalg på nettet - når det gælder en tryksag. www.miljonet.org

Tjek dine miljøvalg på nettet - når det gælder en tryksag. www.miljonet.org Tjek dine miljøvalg på nettet - når det gælder en tryksag Kære læser, Du sidder med en brochure, der beskriver et nyt websted,. Det er et websted med rigtig mange oplysninger om de miljøpåvirkninger, der

Læs mere

Åbn Paint, som er et lille tegne- og billedbehandlingsprogram der findes under Programmer i mappen Tilbehør. Åbn også Word.

Åbn Paint, som er et lille tegne- og billedbehandlingsprogram der findes under Programmer i mappen Tilbehør. Åbn også Word. 75 Paint & Print Screen (Skærmbillede med beskæring) Åbn Paint, som er et lille tegne- og billedbehandlingsprogram der findes under Programmer i mappen Tilbehør. Åbn også Word. 1. Minimer straks begge

Læs mere

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

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

Læs mere

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen OPGAVE Designforslag til hjemmeside til motorcykelklubben Mc Chaufførerne GRAFISK DESIGN / Dorte Damsgaard Larsen 1/15 DESIGNPROCES Indledende møde med

Læs mere

Oversigt over formateringsmærker i Microsoft Word

Oversigt over formateringsmærker i Microsoft Word Oversigten på de følgende sider viser størstedelen af de forskellige formateringsmærker, der kan optræde i et Microsoft Word-dokument. Formateringsmærker vises kun på skærmen de kommer ikke med i udskrift.

Læs mere

Løsningen er baseret på et såkaldt CMS et Content Management System som også kan anvendes som intranet i din virksomhed eller din institution.

Løsningen er baseret på et såkaldt CMS et Content Management System som også kan anvendes som intranet i din virksomhed eller din institution. Introduktion til CID CID eller Customer Information Display er et enkelt system, der kan anvendes til at vise informationsskærmbilleder i en forhal ved en receptionsskranke eller andre steder, hvor du

Læs mere

Wordpress 2.7. Manual for redaktør/blogger Webwoman.dk. Denne version er fra 9. marts 2009. Må frit kopieres og distribueres i original version

Wordpress 2.7. Manual for redaktør/blogger Webwoman.dk. Denne version er fra 9. marts 2009. Må frit kopieres og distribueres i original version Wordpress 2.7 Manual for redaktør/blogger Webwoman.dk Denne version er fra Må frit kopieres og distribueres i original version 2 Indhold Gennemgående udtryk, du bør kende... 4 Log ind på din hjemmeside/blog...

Læs mere

Kom godt i gang med iframe

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

Læs mere

DesignPro II Side 11. Grupper

DesignPro II Side 11. Grupper DesignPro II Side 11 Grupper Hvis man arbejde helt fra grunden, er det ofte en fordel at kunne samle tekst, billeder og baggrund til en fast gruppe, som så kan flyttes rundt, og ændres i størrelsen. I

Læs mere

Kommunikation/IT C - Afsluttende opgave 2011

Kommunikation/IT C - Afsluttende opgave 2011 Kommunikation/IT C - Afsluttende opgave 2011 Roskilde Tekniske Gymnasie Martin Fabricius & Simon Dein, 1.3 Side 1 af 11 Indholdsfortegnelse: Indledning... s3 Målgruppe (diskussion)... s4 indledende kravfangst...

Læs mere

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

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

Læs mere