CSS introduktion: Tekstformatering med CSS

Størrelse: px
Starte visningen fra side:

Download "CSS introduktion: Tekstformatering med CSS"

Transkript

1 Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår Øvelse 3, individuel øvelse CSS introduktion: Tekstformatering med CSS 1. Lidt om hvad du har lært Du har i øvelse 1 og 2 lært at lave et website med HTML bestående af flere sider og med en simpel menu, der forbinder dem. Du har også lært at opmærke dit indhold med tekstafsnit, overskrifter, punktopstillinger, tabeller, samt at indsætte billeder og interne og eksterne links på dine sider. Da der er en del forklarende tekst i denne øvelse, er selve de trin, som du skal udføre på baggrund af forklaringer og eksempler, fremhævet med rød skrift som her: Start med at læse hele øvelsesvejledningen igennem, så du ved, hvilke trin du skal igennem. Det kan være en god idé at oprette en ny undermappe til denne øvelse, så du ikke risikerer at få lavet rod i din aflevering fra sidst, mens du arbejder med denne øvelse. Det er både for din egen skyld, at det vil være en idé at arbejde på en kopi af siden, og for vores, da vi lige nu stadig kan være i gang med at gennemgå din øvelse fra sidst. Du kan f.eks. kopiere hele din nuværende side (inkl. index side, billeder, undersider m.v.) til en undermappe, der hedder 'opgave3', som så får URL'en: 2. Målsætning I dag skal du lære at arbejde med formatering af tekst på din hjemmeside, og du vil derfor stifte dit første bekendtskab med CSS. Øvelsen handler dels om at lære at benytte CSS i det hele taget til at style dine HTML-sider og dels om at afprøve nogle af de mange muligheder som CSS giver for at anvende forskellige typografier, skriftstørrelser, kanter, farver m.m. Dermed får du en fornemmelse af, hvor forskellige visuelle udtryk man kan opnå gennem ganske simple virkemidler, og hvor meget indflydelse de har på brugerens overblik over, og tilgang til indholdet på en hjemmeside. 3. Beskrivelse I denne øvelse skal du arbejde videre med den personlige hjemmeside, som du har arbejdet på i de sidste to uger. Siden skal fortsat være tilgængelig via internettet på dit_brugernavn/mappenavn. Du har allerede i sidste øvelse udarbejdet en underside til din hjemmeside, som på en eller anden måde handler om eller afspejler dig som (privat) person.

2 En god tekst handler både om, hvordan teksten er skrevet, men også om, at teksten er læsevenlig og bliver opstillet på en måde (i afsnit, med overskrifter, og et tydeligt hierarki), som passer til webmediet, hvor folk typisk skimmer tekstligt indhold og søger det hurtige overblik. Altså skal du i denne øvelse arbejde med: At benytte CSS i form af et eksternt stylesheet til at styre udseendet af dine HTML-sider. At benytte CSS til at præsentere din tekst passende ved at afprøve forskellige former for tekstformatering og farver. I øvelsen fokuseres der på den nye side ommig.html, men du skal sørge for, at alle dine sider bruger det stylesheet, som du laver igennem denne øvelse. 4. Koden 4.1. Skriv tekst om dig selv Du har som nævnt allerede lavet mindst to undersider i form af cv.html og ommig.html. Før du begynder skal du på din side om dig selv have en sammenhængende tekst. F.eks. om dine hobbyer, ferier, venner, familie osv. - det er i virkeligheden helt op til dig selv. Omfanget skal være mindst 3-4 tekstafsnit (ca. en halv A4-side). Du må gerne vælge at tilføje, rette eller ændre indholdet, du allerede har produceret i tidligere øvelser Opret stylesheet Første trin i opgaven er at oprette et stylesheet. Der findes flere forskellige måder at arbejde med CSS på: Som intern styling angivet i selve HTML-filen, eller som et eksternt stylesheet. Vi kommer på kurset primært til at arbejde med den eksterne version. Dette er mest hensigtsmæssigt, fordi man med det eksterne CSSdokument har muligheden for at tilknytte det til flere HTML-dokumenter. Når man så vil ændre noget i layoutet, så skal det kun rettes en gang i CSS-dokumentet i stedet for i 20 HTMLdokumenter. Man sparer altså både tid, bevarer overblikket og kan nemt vedligeholde et konsistent design. Ideen med CSS er altså at indhold og struktur (HTML) og præsentationen (CSS) holdes adskilt, hvor man før i tiden ofte havde begge dele sammenblandet i HTML'en. Det kan virke lidt overvældende allerede nu at skulle forholde sig til et nyt kodesprog med en ny syntaks, men opbygningen af CSS er meget simpel. Man gemmer blot filen med en '.css'-extension, f.eks. style.css, (stadig med brug af tegnsættet utf-8). Syntaksen er ikke så indviklet - man skal huske på at CSS består af regler, der definerer, hvordan de enkelte tags i HTML'en skal fortolkes af browseren. Den generiske CSS-formel ser således ud:

3 Selektoren angiver, hvilket HTML-element, som en egenskab gælder for. Egenskaben angiver det du gerne vil ændre, f.eks. farve. Værdien angiver hvordan det skal se ud, f.eks. at farven skal være rød. Egenskab og værdi adskilles med et kolon og et mellemrum, og efter værdien afsluttes med et semikolon. Du kan skrive flere egenskab-værdi-par efter hinanden inden i de krøllede parenteser. Nedenfor ses et eksempel som gør den vigtigste overskrift rød: #ff0000 er farvekode for rød. Nogle farver kan man også angive med keywords, f.eks. red, blue, orange (se eksemplet herunder). Man kan både definere flere selektorer og egenskaber/værdier på en gang: h1, h2, h3 { color: #ff0000; background-color: black; font-family: Verdana, Arial, sans-serif; } Denne CSS-kode vil således medføre, at browseren vil vise de tre øverste overskrifter i hierarkiet, h1, h2 og h3, med rød skrift på sort baggrund. Derudover er det specificeret, hvilken skrifttype, der skal anvendes. Det specielle er, at der er angivet tre værdier, og det betyder, at afsenderen helst vil have at browseren viser overskrifterne med skrifttypen Verdana. Hvis det ikke er muligt på brugerens computer, så er næste valg Arial, og til sidst er værdien sans-serif angivet, som betyder 'en skrift uden fødder'. Det er altid godt at angive en generel font-family til sidst, som f.eks. sans-serif, hvis modtagerens browser ikke har de specifikke skrifttyper. Når du vælger skrifttype kan du således sikre dig, hvilket alternativ browseren vælger, hvis en bruger ikke har den skrifttype, du gerne vil bruge, installeret. Men hvis du vil være sikker på, at din bruger ser den helt rigtige skrifttype, kan du også embedde skrifttyper. Det gør du ved at uploade skrifttypen til din server gennem et ftp-program og her efter deklarationen. Du kan læse mere her: css3_pr_font-face_rule.asp Du kan hente gratis skrifttyper klar til at embedde her: Når en skrifttype er embedded, så kan du bruge den i din CSS font-family, som normalt. Når først skrifttypen er tilknyttet CSS dokumentet, så skriver du CSS-koden som normalt. En anden metode til at anvende skrifttyper, som brugeren ikke har på sin computer, er at linke

4 til en skrifttype i sit HTML-dokument på samme måde som man linker til sit CSS-dokument. Herefter kan skrifttypen anvendes i ens CSS-dokument. Denne metode anvendes når man vil anvende en skrifttype der ligger eksternt. F.eks. har Google - på webfonts#chooseplace:select - en række skrifttyper som man frit kan linke til og anvende. Men husk at bruge skrifttyper med omhu - i langt de fleste tilfælde kan du nøjes med at anvende de standartskrifttyper brugeren allerede har på sin computer. Opret dit eget stylesheet og angiv nogle værdier for overskrifter som herover: - Åbn et nyt dokument i din editor - Gem det som style.css samme sted, som du har din index.html-fil - Skriv nogle værdier som i eksemplet herover - Gem filen (ctrl+s) Bemærk at der modsat et HTML dokument ikke skal stå andet i dokumentet end ens CSSstyling. Et CSS-dokument skal nemlig ikke åbnes og lukkes med bestemte tags som HTML skal, og man skal heller ikke angive metaoplysninger af nogen art. Man starter bare med at skrive sin CSS-kode som det første i dokumentet. CSS udvikler sig hele tiden og for tiden er CSS version 3 ved at overtage for version 2. Med CSS3 bliver det lettere at lave en masse spændende styling, så som at arbejde med gennemsigtighed, skygger og animationer. Det er ikke alle browsere der er lige gode til at tolke CSS3 - endnu - og man må derfor altid teste sin kode i forskellige browsere og tage hensyn til funktioner, som ikke er implementerede Dette gøres f.eks. ved at lave en alternativ style til gamle browsere. CSS - og CSS3 - gør det let at style sin HTML kode på utroligt mange måder - flere end det giver mening at inkludere i en øvelser, og derfor skal I endelig læse mere om CSS muligheder. Det kan i f.eks gøre på og Link stylesheet og HTML-dokumenter sammen For at få browseren til at vise din styling, skal du først linke stylesheetet til dine HTML-filer. Det gør du ved at tilføje en linje under dit meta-tag i dine HTML-filers head. Den linje du skal tilføje er den, du ser herunder, markeret med gult. Læg mærke til, hvor den er placeret i koden inde i <head>...</head>:

5 Du angiver stien til dit CSS på samme måde, som når du har linket mellem dine andre filer. Her ligger stylesheetet i roden sammen med index-filen. Men du skal være opmærksom på, at linket til style.css forholder sig til det mappeniveau f.eks. din cv-fil ligger i. Det betyder bare, at ligger din index-fil og din cv-fil ikke i samme mappeniveau, så skal du linke forskelligt til style.css i de to filer. Når du har tilføjet denne linje i alle dine HTML-filer, så prøv at opdatere siderne i browseren og se resultatet. Nu bruges din styling på alle dine sider Article, section, header, div, id og class i HTML Du kan style din kode udfra de tags, du har brugt til at strukturere din HTML kode med. Ved at bruge tagsne <article> <section> <header> <footer> <nav> osv. på en meningsfuld måde, kan du nu let style din HTML side. Du kan på den måde lave styles som formaterer alt indhold opmarkeret med f.eks. tagget <article> ved at bruge article som selektor. Du kan også style tags som <h1> og <h2> og <p>. Hvis du har brug for at ramme et stykke indhold på din side endnu mere specifikt kan du give det en class eller et id. På den måde kan du f.eks. give den første <h1> på din side et særligt udseende ved at give den en class eller et id: <h1 class= firstheading >. Undgå æ,ø,å, mellemrum og andre sjove tegn i dine classes og id er. Du kan også bruge ARIA-roles til at specificere, hvilken del af dit HTML, din CSS skal ramme. Ved at tilføje en passende role til din HTML-kode, får du altså mulighed for at style dit indhold udfra hvilken rolle det spiller. Læs mere om ARIA-roles i grundbogen s. 88 og om at bruge ARIA-roles i CSS s Et id må kun må optræde ét sted i dit HTML-dokument. Har du indhold som deler karakteristika, f.eks. adresser eller egenavne, skal du bruge span tag et <span></span> og class (i stedet for id). Eksemplet med egenavne vil se sådan ud: <span class= egenavn >Jacob Nielsen</span> - og du kan så skrive alle de egenavne, der nævnes i dit dokument med denne opmarkning. Altså er id en unik identifikator, som kun kan findes et sted på hver side. Class definerer omvendt en klasse, en samling, af elementer, som deler fællestræk, hvilket gør at klassen kan bruges gentagende gange i samme dokument.

6 Generelt skal man sørge for, at have strukturen i sit HTML-dokument på plads, før man kaster sig over CSS'en. Når man går i gang med CSS, er div og span rigtige nyttige, da du bruger id og class til at angive styling af disse elementer i din CSS. Derfor skal du nu starte med at gennemgå dit HTML dokument, ommig.html, og sørge for at du har brugt de rigtige tags og evt. tilføje <div>, <span>, classes, roles og id er som du synes er passende. Det vil være en fordel, hvis du benytter samme grundstruktur på alle sider, for så kan du med din CSS sørge for, at elementer, som gentages på alle sider som f.eks. header, menu og tekststykker, får samme udseende på alle dine sider. Prøv selv at tilføje nogle span-elementer på din egen side, som du senere gerne vil have til at se ud på en bestemt måde. Fx. årstal, job-titler, stednavne eller telefonnumre. Husk, at din side måske ikke ændrer udseende bare fordi du tilpasser din opmarkering. Det er først når du begynder på CSS-koden, at siden ændrer udseende Styling af dine sider tekstformatering og farver, <body> For at komme i gang med CSS skal du nu afprøve nogle flere af de muligheder, der er for at styre udseendet på din side, bl.a. ved at formatere tekst. Først skal du give din hjemmeside en baggrundsfarve, bestemme en skrifttype og en farve på teksten. Det gør du ved at angive selektoren body og angive værdier for egenskaberne background-color, font-family og color. Gem dit CSS-dokument (tryk ctrl + s) og se resultatet i browseren ved at åbne en af dine HTMLfiler. Hvis du har fået linket rigtigt fra alle dine HTML-filer til dit stylesheet, som beskrevet i begyndelsen, vil alle dine sider bruge samme styling. Hvis ikke, så tilføj style-linket nu, som beskrevet tidligere. Farver og skygger Når du arbejder med CSS, kan du selv vælge, hvilket farvesystem du vil bruge. I grundbogen er de alle forklaret. Prøv også at arbejde med gennemsigtighed ved hjælp af RGBA: Det sidste tal i koden, Alpha-kanalen, angiver graden af gennemsigtighed, hvor 0 = gennemsigtig og 1 = uigennemsigtig) Vil du give dine overskrifter eller anden tekst skygger, kan du med CSS bruge egenskaben textshadow som tager fire værdier::

7 text-shadow: horisontal-skygge vertikal-skygge slørethed farve; Ovenstående giver alle <h1>-overskrifter en hård rød skygge, der er rykket 2 pixels ned under overskriftens tekst. Bemærk i øvrigt, at kommentarer i CSS skrives sådan: I HTML skriver du kommentarer sådan: Kommentarer læses ikke af browseren som en del af koden, men er kun til hjælp for os, som arbejder med hjemmesiden. Når du angiver en font-family og en color for body-elementet, gælder dette for alle de elementer, der i din HTML er placeret inde i body. Men vi kan overskrive dem, hvis nu vi gerne vil have bestemte elementer til at se anderledes ud Styling af dine sider tekstformatering og farver, <h1>, <h2>..., <p> og <a> Få din overskrift til at stå med kapitaler i midten af siden i stedet for til venstre, og så skal den have en bestemt størrelse og farve. Det gør du ved at angive selektoren h1 og angive værdier

8 for egenskaberne font-variant, color, font-size og text-align. Gem igen og se resultatet i browseren ved at opdatere siden. Som du kan se, ser overskriften nu anderledes ud end det, som du definerede i body en, mens resten af siden stadig ser ud, som du angav tidligere. Nu ser stylesheetet f.eks. sådan ud: Og i browseren kan det se sådan ud: Bemærk, at stylingen fra body også gælder for h1 på de punkter, hvor der ikke er defineret noget anderledes, f.eks. er skrifttypen den samme som resten af body. Prøv selv at angive forskellige skriftstørrelser ved at bruge nogle af de forskellige metoder du har læst om i grundbogen. Du kan bruge pixels som herover. Det er dog mere optimalt at vælge em (f.eks. 3em), procenter (f.eks. 200%) eller keywords (f.eks. small, medium, large) da de er mere fleksible (i forhold til forskellige skærmstørrelser). Du mangler også at style underoverskrifterne h2, h3 m.v. Prøv dig frem og find passende størrelser, farver, skrifttyper og andre effekter til disse. Du kan med samme selektorer og værdier justere på, hvordan dine andre elementer ser ud. F.eks. kunne man angive særlige ting for tekstafsnit inden i <p>. Lige her er behovet ikke så stort for det, fordi vi allerede har angivet en bestemt skrifttype og størrelse på <body>, og disse værdier bliver brugt som standard de steder på siden, hvor man ikke angiver andet. Men vi vil gerne angive, at links skal se ud på en bestemt måde. Prøv derfor at ændre på stylingen af dine links som vist i eksemplet herunder:

9 Sådan ser denne kode ud i browseren: 4.7. Styling af dine sider tekstformattering og farver, <h1>, <h2>..., <p> og <a> Nu skal du bruge flere af de tags du bruger på din side - og også gerne nogle classes. Bare prøv dig frem og afprøv forskellige egenskaber og værdier. Når du vil rette stylingen mod et element med en class, sætter du et punktum foran class-navnet som selektor. Hvis du vil rette din styling mod et id, sætter du # foran id-navnet

10 Hvis du vil rette din styling mod en role, sætter du role-navnet ind i firkantede paranteser: Her er et eksempel - men prøv at style din side på en anden måde: HTML: CSS:

11 Resultat:

12 Gem igen dit CSS-dokument og se resultatet i browseren. En sjov, ny egenskab i CSS er, at man kan lave bokse med rundehjørner. Med egenskaben border-radius kan du angive hvor rundede hjørnerne på f.eks. en tekstboks skal være. Prøv f.eks. at give et element på din side en baggrundsfarve og sæt forskellige border-radius for at få fornemmelse for, hvordan egenskaben virker. Runde hjørner er en af de nye egenskaber i CSS som stadig kan give problemer i nogle browsere og derfor er det nødvendigt at skrive den samme kode tre gange: første gange skriver du egenskaben: border-radius. Derefter skriver du koden igen for Firefox og tilsidst for Safari og Chrome, browsere der bruger webkit: CSS:

13 Resultat: De to sidste egenskaber skal kun bruges i dag, fordi CSS3 stadig er i udviklingsfasen. I fremtiden vil du ikke længere behøve at bruge de browser-specifikke egenskaber -moz-borderradius: 10px; og -webkit-border-radius: 10px;. Man kan lave mange sjove ting med border-radius. Se for eksempel her, hvordan man ved hjælp af CSS kan skabe komplicerede geometriske former, uden at skulle bruge billeder: css-tricks.com/examples/shapesofcss/

14 Typografi og tekst Prøv nu selv at style dine klasser, som du har brugt til span eller lav nye, der understøtter en nem tilegnelse af teksten, f.eks. ved at fremhæve nøgleord eller lignende, som læseren skal lægge mærke til. Du kan f.eks. også lave en særlig klasse til de links, der står i teksten, som får dem til at adskille sig fra dine menulinks. Se eksemplet herunder. Før - to links i teksten får samme styling som menuen: Hvis vi tilføjer class en; class= keyword til linksne i brødteksten og styler dem, kan vi ændre dette: CSS: Resultat:

15 Du har tidligere prøvet at bruge egenskaben og værdien text-decoration: none i forbindelse med default-understregning af links. Du kan også fjerne default-bullets på lister, hvis du vil af med dem f.eks. i din menu. Ligesom du lige har gjort med links, kan du også lave en klasse til lister, som du i det hele taget gerne vil style på en bestemt måde. En anden måde er at udnytte, at du allerede har placeret din menu-liste i et nav -tag. Det giver mulighed for at specificere bestemt styling for en liste (ul) inde i tagget nav : I browseren kan du se, at menuen nu ikke har bullets, mens punkterne i CV'et stadig har. Prøv selv at style din menuliste på en særskilt måde, f.eks. uden bullets Tilpas din ommig.html side med disse virkemidler Du nu har prøvet at bruge forskellige virkemidler til at præsentere din tekst og dine sider i det hele taget rent visuelt. Prøv at justere på de ting, du har lavet, så den visuelle fremtoning passer til den tekst, du har skrevet på Om mig siden, og så den understøtter, at brugeren hurtigt får overblik over indholdet. Brug også gerne punktopstillinger, overskrifter m.v., som du arbejdede med i sidste øvelse. Brug bogen som inspiration og brug også gerne andre mulige formatteringer end dem, der er nævnt i øvelsen her. F.eks. liniehøjde og indrykninger, letterspacing m.v Validering af HTML Til sidst skal du som i de tidligere øvelser validere dit site vha. validator.w3.org, så du kan være sikker på, det overholder HTML5 standarden, som er defineret af World Wide Web Consortium (W3C). Vær opmærksom på, at du skal validere hver enkelt af dine undersider én ad gangen. Når du indtaster URL'en til din forside validerer den KUN forsiden og ikke de tilknyttede undersider, selvom de er forbundne via links. Derfor skal du også tjekke hver enkelt underside ved at indtaste URL'en for dem en ad gangen, for at få tjekket hele dit site. Når det er lykkedes dig at få valideret din side korrekt, skal du indsætte et link til validationen på

16 alle sider, som du kan formattere, som du vil, så den passer med resten af siden Validering af CSS Du skal også validere din CSS-kode! Det foregår på samme måde som med HTML-valideringen. På denne side: css-validator/ kan du validere din CSS ved enten at 1) angive URL en til dit CSS-dokument, 2) uploade dit CSS-dokument, eller 3) kopiere din CSS-kode direkte ind i et tekstfelt. Koden bliver tjekket uanset, hvilken af de tre måder, du vælger. 5. Aflevering 5.1. Deadline Din deadline for aflevering er tirsdag den 28. februar 2012 inden kl Du afleverer ved at poste din hjemmesides link (www.itu.dk/people/dit_brugernavn/oevelsenr) på kursus-bloggen, på den underside der hører til din hjælpelærer. Du poster bare linket som en kommentar Tjekliste Af den hjemmeside, du afleverer skal det være synligt, at du har været igennem hele denne øvelse. Inden du afleverer på bloggen bør du derfor gennemgå denne tjekliste for at sikre at: din hjemmeside skal har en underside kaldet 'Om mig', 'Personligt' eller lignende. siden indeholder en længere sammenhængende tekst, der beskriver dig på et mere personligt plan, og som består af to til fire tekstafsnit på mindst en halv A4-side. teksten er formateret ved hjælp af et eksternt stylesheet, hvor du prøver at bruge nogle forskellige egenskaber og værdier, som i øvelsen her, i den visuelle præsentation af teksten. F.eks. typografier, farver m.v. sidens visuelle udtryk (opnået gennem stylingen og brug af andre ting f.eks. billeder) understøtter tonen og indholdet i det tekstlige indhold og at formateringen understøtter brugerens tilgang og læsning af indholdet. dit stylesheet er benyttet på alle dine HTML-sider på dit website. alle dine sider har et HTML-validator-link og mindst én af dine sider har et CSSvalidator-link

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

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

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

Læs mere

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

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

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

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

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

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

Læs mere

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

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

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

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

Læs mere

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

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

Læs mere

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

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

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

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

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

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

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

Læs mere

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

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

Sabine Puk Sørensen Svendeprøve portfolio

Sabine Puk Sørensen Svendeprøve portfolio Sabine Puk Sørensen Svendeprøve portfolio 2016 Grafisk workflow Svendeprøve Kvalitetsvurdering Hjemmesiden fungere som den skal, og kunden er meget glad for resultatet. Siden er simpel, men giver den ønskede

Læs mere

REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow

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

Læs mere

Grafisk produktionsforståelse

Grafisk produktionsforståelse 04 Grafisk produktionsforståelse Design og koding af steentrae.dk 24 Svendeprøveportfolio Steentrae.dk Responsivt website med CMS I forlængelse af min Grafisk design-del, har jeg her valgt at fokusere

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

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

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

Portfolie Redesign. Forord. Det tekniske. Tema ide. Css. opløsning.

Portfolie Redesign. Forord. Det tekniske. Tema ide. Css. opløsning. Portfolie Redesign dette er en gennemgang af opbyggelse af mit portfolie, med samtilige begrunderlser af design valg. Forord Min portfolie hjemmeside er fra start af ment som et startplatform og ikke et

Læs mere

Grafisk workflow 3. Hovedforløb

Grafisk workflow 3. Hovedforløb Grafisk workflow 3. Hovedforløb 3. Hovedforløb Grafisk workflow Dreamweaver Opgavebeskrivelse Højbakkegaard har brug for en hjemmeside, som kan vise hvad gården har at byde på, deres unikke vine og faciliteter

Læs mere

GRAFISK WORKFLOW Hjemmesidedesign

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

Læs mere

Aptana editor til MAC og Windows

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

Læs mere

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

TinyMCE Bruger Guide. Forord. Contents

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

Læs mere

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

Her kan du slette enkelte figurer i et diagram ved at klikke på figuren der skal slettes og herefter på Slet.

Her kan du slette enkelte figurer i et diagram ved at klikke på figuren der skal slettes og herefter på Slet. 9. FLOWDIAGRAMMER Der er i D4InfoNet indbygget et program til opbygning af flowdiagrammer. Diagrammerne kan placeres på forsiden af de enkelte håndbøger, og kan tilføjes kapitler eller de enkelte dokumenter.

Læs mere

EasyPage brugermanual version 3.0

EasyPage brugermanual version 3.0 EasyPage brugermanual version 3.0 Indholdsfortegnelse: 1.0 Introduktion...2 1.1 Om brugermanualen...2 1.2 Systemkrav...2 1.3 Log ind - sådan kommer du i gang...2 2.0 EasyPage grundmodul...4 2.1 Byg og

Læs mere

Grafisk workflow. Se siden her: www.cormas.dk

Grafisk workflow. Se siden her: www.cormas.dk Grafisk workflow Se siden her: www.cormas.dk Dokumentation 4 Procesbeskrivelse 5 Inspirationssøgning 6 Skitser 8 Layout i Photoshop 9 Farver 10 Font 11 Flowchart 12 Wireframe 13 Storyboard 14 kontakt.html

Læs mere

Mini Afsluttende Projekt

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

Læs mere

opsam ling fra sidst

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

Læs mere

Forståelse for grafisk workflow

Forståelse for grafisk workflow 2 Forståelse for grafisk workflow I designet af den trykte bog har jeg haft et vågent øje til de overvejelser og design problematikker det medfører at bogen skulle klare at laves til en E-bog. Her vil

Læs mere

grafisk workflow Frank winding

grafisk workflow Frank winding grafisk workflow Frank winding redegørelse Opgaven Byg & Bo stod foran årets byggeudstilling 2015, og min arbejdsgiver JUGEL&CO skulle stå for alt markedsføring, medieplanlægning og kommunikation. Mit

Læs mere

Kom godt i gang. Sitecore Foundry maj Version 1.1

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

Læs mere

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

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

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

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

Læs mere

Herning Centerby Guide til Umbraco

Herning Centerby Guide til Umbraco Herning Centerby Guide til Umbraco marts 2016 I GANG MED UMBRACO 4 LOGIN 4 LÆR UMBRACO AT KENDE 5 SÅDAN REDIGERER DU SIDER 6 VÆRKTØJSLINJEN 6 RET I TEKSTEN 7 RET ELLER INDSÆT LINK I TEKSTEN 8 RET ELLER

Læs mere

Sitecore - basisvejledning Version 2. September 2010

Sitecore - basisvejledning Version 2. September 2010 Sitecore - basisvejledning Version. September 00 Sådan opretter du en ny artikelside... Sådan omdøber du et artikelnavn så du får vist æ,ø og å... Sådan udgiver (publiserer) du nyt eller redigeret indhold...4

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

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

WEBDESIGN & WEBKOMMUNIKATION

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

Læs mere

Superskolernes kampagne

Superskolernes kampagne Superskolernes kampagne Projekt i Kommunikation/IT Roskilde Tekniske Skole Side 1 af 12 Indhold Indledning... 3 Målgruppeanalyse - Kanylemodel... 4 Begrundelse for valg af medie... 5 Grovskitsering...

Læs mere

GRAFISK WORKFLOW. Kasper Staal - Portfolio - H2

GRAFISK WORKFLOW. Kasper Staal - Portfolio - H2 GRAFISK WORKFLOW Kasper Staal - Portfolio - H2 Opgaven Denne opgave bestod i at design et website til min egen virksomed 3DService.dk. Websitet skulle være responsivt, og indeholde de mest gængse informationer

Læs mere

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

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

Læs mere

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

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

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

Opret en formular i Dreamweaver

Opret en formular i Dreamweaver Opret en formular i Dreamweaver. Åben det html-dokument hvor du vil have din formular skal være på. 2. Klik i det felt (DIV eller tabel) hvor du vil have din formular skal være. Du kan se du er i feltet

Læs mere

PHP Quick Teknisk Ordbog

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

Læs mere

Ø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

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

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

Vejledning i opbygning af Tillidszonen

Vejledning i opbygning af Tillidszonen Vejledning i opbygning af Tillidszonen Vejledning til FOAs lokale afdelinger i opbygningen af deres del af Tillidszonen FOA Fag og Arbejde Januar 2006 1 Indholdsfortegnelse Forbunds- og afdelingsdel...3

Læs mere

Nvu hjemmesider hurtigt og let

Nvu hjemmesider hurtigt og let Nvu hjemmesider hurtigt og let Brugervenlig og grafisk præsentation af textdokumenter var en af de store udfordringer indenfor softwareudvikling i slutningen af 1980erne. Tim Berners-Lee fra CERN udvikler

Læs mere

Brugervejledning til InfoLand.dk skabelonen

Brugervejledning til InfoLand.dk skabelonen Indhold Indledning... 4 Første gang... 4 Log ind som Administrator og ændre kodeord... 4 Opret Redaktør (dig selv)... 4 Log ind... 4 Log ind med dit eget brugernavn ( Redaktør )... 4 Log ind som Administrator...

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

UMS Velkomst Byder nye brugere velkommen til skolen

UMS Velkomst Byder nye brugere velkommen til skolen Forord UMS Velkomst modulet giver mulighed for at give de kommende studerende et godt førstehåndsindtryk ved skolestart - den indledende kontakt til de studerende er umådelig vigtig. Velkomst modulet består

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

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

få en ny og bedre hjemmeside på få minutter Quick guide Del denne quick guide med alle som har glæde af en ny og bedre hjemmeside

få en ny og bedre hjemmeside på få minutter Quick guide Del denne quick guide med alle som har glæde af en ny og bedre hjemmeside få en ny og bedre hjemmeside på få minutter Quick guide Del denne quick guide med alle som har glæde af en ny og bedre hjemmeside 1 Alle har ret og råd til en professionel hjemmeside på få minutter GoMinisite

Læs mere

GRAFISK PRODUKTION OG WORKFLOW. Hjemmeside til Team Brügger

GRAFISK PRODUKTION OG WORKFLOW. Hjemmeside til Team Brügger GRAFISK PRODUKTION OG WORKFLOW Hjemmeside til Team Brügger DITTE MADSEN - SVENDEPRØVE - 2015 KUNDEPROFIL Team Brügger er en frisørsalon i Aars. Indehaveren Gitte Brügger startede salonen op sammen med

Læs mere

1.0 Velkommen til manualen for Editor 1. 1.1.1 Editorens typiske udseende 1. 1.1.2 HTML-kode 1. 1.1.3 Generelle funktioner og deres ikoner 2

1.0 Velkommen til manualen for Editor 1. 1.1.1 Editorens typiske udseende 1. 1.1.2 HTML-kode 1. 1.1.3 Generelle funktioner og deres ikoner 2 1.0 Velkommen til manualen for Editor 1 1.1 Editoren 1 1.1.1 Editorens typiske udseende 1 1.1.2 HTML-kode 1 1.1.3 Generelle funktioner og deres ikoner 2 1.2 Værktøjslinjer 2 1.3 Ikoner 2 1.3.1 Liste over

Læs mere

OPGAVEN PROGRAMVALG. Jeg har brugt Illustrator til at lave logo og ikoner.

OPGAVEN PROGRAMVALG. Jeg har brugt Illustrator til at lave logo og ikoner. GRAFISK DESIGN OPGAVEN Min kæreste er medstifter af en vinloge. Medlemmerne af logen kunne godt tænke sig et sted, hvor de bl.a. kunne få et overblik over, hvilke vine de har bedømt og hvornår næste loge

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

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

Byg web sider. Introduktion:

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

Læs mere

Forslag til arbejdsgang ved tilrettelæggelse af en WebQuest

Forslag til arbejdsgang ved tilrettelæggelse af en WebQuest Forslag til arbejdsgang ved tilrettelæggelse af en WebQuest Ressourcer på webstedet: http://lotte.udsen.person.emu.dk Få ideer fra webstedets "Samlinger af WebQuests". Udfyld det vedlagte arbejdsark. (Dvs.

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

Formatering af tekst, JCE Editor, Joomla

Formatering af tekst, JCE Editor, Joomla Formatering af tekst, JCE Editor, Joomla skrevet af Inge Vittrup Paragraph anvender du ved almindelige sætninger. Heading 1 er hovedoverskrift med største skrift. Heading 2 er overskrift til en artikel

Læs mere

Grafisk produktion & workflow

Grafisk produktion & workflow Grafisk produktion & workflow WORKFLOW & PRODUKTION WEBSITE NATURSPEJDERNE Dokumentation I 2 OPGAVEN Opgaven Jeg har lavet dette fiktive website der kunne være en mulighed for en nyopstartet spejderforening.

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 CS6, og programmet er på engelsk. Dreamweaver er en såkaldt grafisk editor,

Læs mere

Vigtige funktioner i Word 2003

Vigtige funktioner i Word 2003 Vigtige funktioner i Word 2003 Indhold Husk... 2 Skrifttype... 2 Skriftstørrelse... 3 Overskrifter... 4 Andre vigtige funktioner... 5 Margen... 6 Linjeafstand... 7 Ordoptælling... 8 Sidetal... 10 Sidehoved

Læs mere

Jobcenter Vinduet. Version 01.00 Light 2014

Jobcenter Vinduet. Version 01.00 Light 2014 Jobcenter Vinduet Version 01.00 Light 2014 Styrelsen for Arbejdsmarked og Rekruttering 2014 Jobcenter vinduet Jobcenter vinduet giver mulighed for, at det enkelte jobcenter kan kommunikere direkte til

Læs mere

Annemette Søgaard Hansen/www.dinwebvejleder.dk

Annemette Søgaard Hansen/www.dinwebvejleder.dk Google Docs Præsentationer Indholdsfortegnelse Værktøjer... Side 3 Menuer... Side 8 Opgave... Side 13 Få adgang til filerne fra din computer... Side 21 Vejledende løsning... Side 22 GoogleDocs Præsentationer

Læs mere

Stine Dorry Meulengracht Madsen Rapport Multimedie og kommunikation

Stine Dorry Meulengracht Madsen Rapport Multimedie og kommunikation Portfolioudvikling I denne rapport vil du kunne læse om mit porfolios tilblivelse. Det skal give læseren indblik i mine designvalg og hele processen bag projektet. Hjemmesiden er kodet fra bunden i HTML

Læs mere

Selvvalgt Projekt. ( Det smager godt ) af Ke vin Hartmann, Hold 305.

Selvvalgt Projekt. ( Det smager godt ) af Ke vin Hartmann, Hold 305. Selvvalgt Projekt. ( Det smager godt ) af Ke vin Hartmann, Hold 305. 1 Kommunikationsplan: Kommunikationsmål, afsender og genre Hvad ønsker afsender at opnå med webstedet?: Afsender ønsker at have en mad

Læs mere

Vejledning. Indhold. Side 1

Vejledning. Indhold. Side 1 Indhold HTML-faneblade... 2 Sådan tilføjer du et HTML-faneblad til din Facebook side.... 3 Sådan redigerer du et HTML-faneblad på din Facebook side.... 5 Sådan deler du fanebladet... 10 Side 1 HTML-faneblade

Læs mere

fotografisk kommunikation

fotografisk kommunikation XDANMARKS MEDIE- OG JOURNALISTHØJSKOLE CAMPUS KØBENHAVN Forprøve 2016 fotografisk kommunikation 1/2 Professionsbacheloruddannelsen i Visuel Kommunikation Studieretning: Fotografisk Kommunikation Del 1:

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

grafisk design Professionsbacheloruddannelsen i Visuel Kommunikation Studieretning: Grafisk Design

grafisk design Professionsbacheloruddannelsen i Visuel Kommunikation Studieretning: Grafisk Design XDANMARKS MEDIE- OG JOURNALISTHØJSKOLE CAMPUS KØBENHAVN Forprøve grafisk design Professionsbacheloruddannelsen i Visuel Kommunikation Studieretning: Grafisk Design Del 1: Plakatserie Til efteråret afholder

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

Lav en hjemme side der kan sælge fly billetter til en stor i Europa.

Lav en hjemme side der kan sælge fly billetter til en stor i Europa. EKSAMENS OPGAVE Lav en hjemme side der kan sælge fly billetter til en stor i Europa. Det første jeg startede ud med var at brainstorme hvad det var jeg skulle bruge i min side da jeg nu ved hvad den skal

Læs mere

Mini brugermanual CMD 5.1

Mini brugermanual CMD 5.1 Mini brugermanual CMD 5.1 Kom i gang For at tilgå CMD skal du åbne en web browser og indtaste URL en på dit CMD website i adressefeltet, hvorefter dialogboksen til log in vises. 1. Indtast dit brugernavn

Læs mere

Grafisk Workflow. Website til European Blues Challenge

Grafisk Workflow. Website til European Blues Challenge Grafisk Workflow Website til European Blues Challenge Opgaven: European Blues Challenge er en europæisk blues festival som skifter lokation hvert år. I 2017 kommer festivallen til Horsens, og vores kunde

Læs mere

INDLEDNING 2. Design og layout 3

INDLEDNING 2. Design og layout 3 INDLEDNING 2 Design og layout 3 Skyd genvej... 3 Omdøb skabelonsamling 4 Omdøb brevskabelon 5 Layout 6 Indsæt/Redigér logo 6 Indsæt/Redigér tekst 8 Redigér kolonner 11 Ved vejs ende... 14 Tips & Tricks...

Læs mere

Hjemmeside på SkoleKom

Hjemmeside på SkoleKom Hjemmeside på SkoleKom 1 Om vejledningen Har din lærer givet tilladelse, kan du nu lave din helt egen personlige hjemmeside på SkoleKom. En hjemmeside på SkoleKom er let at gå til, og har du arbejdet lidt

Læs mere

GRAFISK PRODUKTION PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE

GRAFISK PRODUKTION PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE GRAFISK PRODUKTION OG WORKFLOW PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE 04 INDHOLDSFORTEGNELSE Dokumentation 05

Læs mere

Birgitte Bremholm Persson MG21 svendeprøve 2015 MEDIEGRAFIKERSVENDEPRØVE

Birgitte Bremholm Persson MG21 svendeprøve 2015 MEDIEGRAFIKERSVENDEPRØVE Birgitte Bremholm Persson MG21 svendeprøve 2015 MEDIEGRAFIKERSVENDEPRØVE Grafisk produktion og workflow Grafisk produktion og workflow l 12 Pedersholmparken 6 DK 3600 Frederikssund Tlf.: +45 27 57 7164

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

Nyhedsmodul brugermanual

Nyhedsmodul brugermanual Nyhedsmodul brugermanual version 6 Indholdsfortegnelse 1. Kategorier... 02 1.1. Hvordan opretter jeg en kategori?... 02 1.2. Hvordan viser jeg en nyhedskategori på websitet?... 02 2. Oprettelse/redigering

Læs mere