Nu skal vi især se på <font> og <center> samt centrering af hele siden på skærmen.

Save this PDF as:
 WORD  PNG  TXT  JPG

Størrelse: px
Starte visningen fra side:

Download "Nu skal vi især se på <font> og <center> samt centrering af hele siden på skærmen."

Transkript

1 Validering 4 Nu skal vi især se på <font> og <center> samt centrering af hele siden på skærmen. Det er i HTML ikke forbudt at bruge koden <font>, men lad nu være alligevel, du får blot en masse valideringsproblemer. Når du i stedet for lægger denne formatering over i css, opnår du en renere html-kode og et par ekstra fordele. Lad os se på det. I stedet for at starte hvert afsnit med noget i retning af: <font color= # face= Verdana, Arial, Helvetica, sans-serif > Her følger din tekst i afsnittet </font> og den samme smøre ved det efterfølgende afsnit o.s.v. Så læg hele formateringen over i css. Så står den kun én gang og gælder for alle afsnit, medmindre vi laver undtagelser (med class). Altså i css'en: background-color: #fff; Husk ved hver skriftfarve også at angive en baggrundsfarve! og i html'en: tekst til første afsnit. o.s.v. Når først formateringen er lagt i css'en, så skal den fjernes helt fra html'en. Vil du fremover ændre skriftfarve, så gør du det i css-filen.

2 Jeg nævnte, at vi kan lave undtagelser med class. Lad os vedtage at tredje afsnit skal have rød tekstfarve. Vi udvider css'en med en class redtext. Css:.redtext{ background-color: #0f0; skrifttypen er allerede nedarvet fra p, så den behøver vi ikke at gentage. og i html'en: tekst til første afsnit. <p class= redtext > afsnittet med rød tekst. Lav en side med denne css og html, læg f.eks. css'en i head, så du har det samlet. Og se selv, at det fungerer. Du kan jo samtidig ændre skriftstørrelser. Du kan evt. sammenligne med min kode med titlen redtext sidst i lektionen. Nu skal vi se, hvad vi gør ved det forældede <center> -tag,for selv om et tag er forældet,kunne vi jo godt ønske os tag-funktionen. Læg teksten i en div <div align= center >Det, der skal centreres</div> eller bedre: lav centreringen i css Du har en tekst, som du vil have centreret her., så opret en class, som du f.eks. kalder centreret i dit css.

3 .centreret{ text-align: center; og i din html <p class= centreret >Du har en tekst, som du vil have centreret her. så har du lavet din undtagelse, og da du ikke brugte id,men class, kan den genbruges over hele dokumentet. Hvad nu, hvis det er en hel skærmside, du vil have centreret, ikke kun et enkelt tekstafsnit? Det gøres lidt anderledes, men selvfølgelig kan det gøres, så det validerer. Det er nærmest en ren css-opgave. Lav en boks til netop dette formål. Kald den f.eks. container. Altså i html <div id= container > hele sidens indhold, tekst billeder tabeller, simpelthen alt indhold, der skal med i centreringen.</div>, vi bruger id fordi den kun bruges én gang for hver html-side. Og i css: #container{ width: 760px; margin: 0 auto 0 auto; Når du sætter skærmbredden til 760px, så kan en 600x800 skærmstørrelse vises uden vandret scrollbar. Og med både venstre og højre margin på auto, vil de 760pixels ligge lige langt fra venstre og højre skærmkant. Hvilket særligt ses ved større skærmstørrelser. Rækkefølgen er den sædvanlige, hvis du ikke følger den, får du TRouBLe Top Right Bottom Left

4 (eller start klokken 12 og gå uret rundt). med mindre det er et Århusur et af de få, hvis ikke det eneste ur, hvor viserne drejer venstre rundt og tallene er anbragt tilsvarende omvendt (undtagen lige klokken tolv og klokken seks, som af en eller anden mærkelig årsag er anbragt lige der, hvor du forventer at finde dem). Som sædvanligt ingen regler uden alle undtagelserne., Indeni den her skabte container lægges hele siden i forskellige <div> og de kan sagtens have f.eks text-align: left; Tænk i kasser som du kan skubbe rundt på efter for godt befindende. Men bortset fra at koden til disse kasser også skal validere, så er dette mere et spørgsmål om formatering og design. HTML CSS Validering Formatering og Design, kan vi overhovedet behandle dem enkeltvis, hvis vi vil have noget brugbart ud af det? Vi kan vist højest belyse et eller flere af disse punkter lidt kraftigere end de øvrige. På de efterfølgende sider finder du to kode-eksempler.

5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head> <title>redtext</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <style type="text/css"> font-size: 25px;.redcolor{ font-size : 50px; background-color: #00f; </style> </head> <body> tekst til første afsnit. <p class="redcolor"> afsnittet med rød tekst. </body> </html>

6 Og den samme kode centreret (nulstil margin border og padding i html og body. Jeg har med vilje sat px enheden på, selv om den ikke er nødvendig for værdien 0. Den skal nemlig på for alle andre værdier.) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head> <title>redtext centreret</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <style type="text/css"> html, body{ margin: 0px; padding: 0px; border: 0px; color: #fff; background-color: #c6f; #container{ width: 760px; margin: 0 auto 0 auto; color: #fff; background-color: #0f0; font-size: 25px;.redcolor{ font-size : 50px; background-color: #00f; </style> </head> <body> <div id="container">

7 tekst til første afsnit. <p class="redcolor"> afsnittet med rød tekst. </div> </body> </html> Hvis du kopierer koden fra denne pdf-fil, og det evt. ikke vil virke, så skal du specielt undersøge, om gåseøjnene er de rigtige ASCII-tegn. Nogle problemer så start med at erstatte gåseøjne med dem, du har på tastaturet over 2-tallet. lørdag 25. marts 2006

Beginning CSS and Web Development kap. 1 11

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

Læs mere

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

Denne artikel er til dem der ønsker at vide mere om hvad CSS er og hvad CSS kan bruges til hvad angår WWW.

Denne artikel er til dem der ønsker at vide mere om hvad CSS er og hvad CSS kan bruges til hvad angår WWW. Denne guide er oprindeligt udgivet på Eksperten.dk CSS - en gennemgang Denne artikel er til dem der ønsker at vide mere om hvad CSS er og hvad CSS kan bruges til hvad angår WWW. Der er lidt CSS historie

Læs mere

Drop tables til design, og få fuld udbytte af CSS!

Drop tables til design, og få fuld udbytte af CSS! Denne guide er oprindeligt udgivet på Eksperten.dk Drop tables til design, og få fuld udbytte af CSS! Fremtidens hjemmeside-udvikling består af ganske lidt HTML, som er logisk opbygget, samt en masse CSS,

Læs mere

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

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

Læs mere

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

Webmaster Sweet-Swing.dk Websidens opbygning. Som eksempel er brugt siden om korets målsætning som den vises i editoren.

Webmaster Sweet-Swing.dk Websidens opbygning. Som eksempel er brugt siden om korets målsætning som den vises i editoren. Opbygning Som eksempel er brugt siden om korets målsætning som den vises i editoren. I editoren vises tabellinierne, selvom de på den færdige side i vores tilfælde er usynlige, bortset fra den sorte ramme

Læs mere

IT sikkerhed & Fjernsupport

IT sikkerhed & Fjernsupport IT sikkerhed & Fjernsupport Synopsis for: IT sikkerhed og fjernsupport Vores gruppe består af. Vi har i forbindelse med vores eksamensprojekt i PrgC & InfB valgt at arbejde med de problemer der kan opstår

Læs mere

Form og dens underlige box model

Form og dens underlige box model Denne guide er oprindeligt udgivet på Eksperten.dk Form og dens underlige box model Denne artikel handler om hvilke problemer man som webudvikler kan komme ud for, og hvordan man løser dem. Jeg kommer

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

Grafik & Billede weloveorganic.com webshop

Grafik & Billede weloveorganic.com webshop Grafik & Billede weloveorganic.com webshop Opgaven og afsender: Weloveorganic.com er en forholdsvis ny virksomhed, der pånuværende tidspunkt udelukkende sælger økologisk tøj til kvinder. På længere sigt

Læs mere

OPGAVE: WELOVEORGANIC.COM WEBSHOP

OPGAVE: WELOVEORGANIC.COM WEBSHOP OPGAVE: WELOVEORGANIC.COM WEBSHOP OPGAVEN OG AFSENDER: Weloveorganic.com er en forholdsvis ny virksomhed, der pånuværende tidspunkt udelukkende sælger økologisk tøj til kvinder. På længere sigt ønsker

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

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

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

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

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

GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL

GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL OPGAVEBESKRIVELSE Min kunde er en ung mand som ønskede at få lavet en hjemmeside til hans fremtidig firma, den skulle være responsiv og simpel. Da kunden

Læs mere

GRAFISK WORKFLOW OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY

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

Læs mere

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

Ø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

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

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

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

Læs mere

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

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

Tilpasning til skærm og browser

Tilpasning til skærm og browser Denne guide er oprindeligt udgivet på Eksperten.dk Tilpasning til skærm og browser Du har lavet en kode, som fungerer fortrinligt på din egen computer. Glad og tilfreds lægger du din hjemmeside på Nettet.

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

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

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

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

CSS introduktion: Tekstformatering med CSS

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

Læs mere

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

I gang med Adobe Muse CC

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

Læs mere

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

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

Læs mere

Stylesheets - grundteori.

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

Læs mere

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

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

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

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

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

Læs mere

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

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

Læs mere

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

Portfolio - Grafisk Workflow

Portfolio - Grafisk Workflow Portfolio - Grafisk Workflow Opgaven gik ud på at designe et website for en tatovør. Der skulle indgå forskellige elementer på hver enkel side, samt overholdes nogle fastsatte krav. Vi skulle arbejde ud

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

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

Forståelse for grafisk produktion og workflow

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

Læs mere

GRAFISK WORKFLOW WEBSITE: MEEFRED DESIGN

GRAFISK WORKFLOW WEBSITE: MEEFRED DESIGN GRAFISK WORKFLOW GRAFISK WORKFLOW WEBSITE: MEEFRED DESIGN OPGAVEN: Meefred Design er en enkeltmandsvirksomhed, som tilbyder grafisk design til både erhverv og private. Meefred Design har endnu ikke fået

Læs mere

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

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

Læs mere

Vejledning til brug af pileforeningen.dk for redaktører.

Vejledning til brug af pileforeningen.dk for redaktører. Vejledning til brug af pileforeningen.dk for redaktører. Log in: Gå ind på: http://pileforeningen.dk Tryk på Login for medlemmer Brugernavn: contentmanager. Password: 1234 Når du er logget ind kan du se

Læs mere

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

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

Læs mere

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

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

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

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

REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow

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

Læs mere

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

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

Læs mere

GRAFISK WORKFLOW. Proces. Kodning. Fonts:

GRAFISK WORKFLOW. Proces. Kodning. Fonts: P f t r o o i l o 1 H GRAFISK WORKFLOW»Vi skal bruge en hjemmeside, så vi kan få fat i patienterne til vores botilbud. Ellers risikerer vi at de vælger noget andet. Der skal laves logo, samt lærringsvideoer«proces

Læs mere

GRAFISK WORKFLOW GRAFISK WORKFLOW

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

Læs mere

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

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

Fremstilling af en hjemmeside

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

Læs mere

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

Arbejdsproces. Kvalitetsvurdering

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

Læs mere

Opgave og rapport er udarbejdet af: Robin Staley, Christina Aagerup, og Kamilla Christiansen. Den 4.Dec.2009 TR09MUL02-4. Projekt

Opgave og rapport er udarbejdet af: Robin Staley, Christina Aagerup, og Kamilla Christiansen. Den 4.Dec.2009 TR09MUL02-4. Projekt Opgave og rapport er udarbejdet af: Robin Staley, Christina Aagerup, og Kamilla Christiansen Den 4.Dec.2009 TR09MUL02-4. Projekt Indholdsfortegnelse Indledning... Side 1 Tidsplan... Side 2 Designvalg...

Læs mere

Afsluttende opgave i Kom/IT

Afsluttende opgave i Kom/IT Afsluttende opgave i Kom/IT Hjemmeside om varmluftballoner Fag:Kommunikation/IT Lærer: Karl G Bjarnason Problemformulering Den afsluttende opgave er den du skal til prøve i, hvis du skal til eksamen i

Læs mere

WEB kursus I. Grundkursus i CMS

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

Læs mere

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

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

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

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

Sportskalender - journal Forskellige sportsgrenes skemaer samlet på et sted Simon Andersen, 3.3, RTG Fag: Programmering Dato for aflevering:

Sportskalender - journal Forskellige sportsgrenes skemaer samlet på et sted Simon Andersen, 3.3, RTG Fag: Programmering Dato for aflevering: Sportskalender - journal Forskellige sportsgrenes skemaer samlet på et sted Simon Andersen, 3.3, RTG Fag: Programmering Dato for aflevering: 21/4-2016 Indledende afsnit: Indledning: I dette projekt har

Læs mere

fontvalg Store og små bogstaver og tal fra Baron Neue Store og små bogstaver, tal og ligaturer fra Corbel

fontvalg Store og små bogstaver og tal fra Baron Neue Store og små bogstaver, tal og ligaturer fra Corbel typografi I kernefagligheden typografi har jeg valgt at lave et magasin. Magasinet omhandler Aarhus Festuge og indeholder artikler og billedemateriale jeg har fået fra Aarhus Festuge. Til dette har jeg

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

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

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

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

Læs mere

Grafisk workflow. Maria Clausen Svendeportfolio Grafisk workflow

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

Læs mere

ActiveBuilder Brugermanual

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

Læs mere

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

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

Grafisk Workflow. hovedforløb 2

Grafisk Workflow. hovedforløb 2 Grafisk Workflow hovedforløb 2 WORLD OF FURNITURE Forside.wrapper width: 95%; margin: 0 auto; box-shadow: 0px 0px 25px #888888; Image slider carousel 5 sekunder .button span.button span:after.button:hover

Læs mere

www.johnnihowardsen.dk - nedarvning med selektorer

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

Læs mere

Introduktion... 2. Problemformulering... 2. Metode... 2. Research... 3. Kommunikation... 4. Delkonklusion... 4. Analyse... 5. Design...

Introduktion... 2. Problemformulering... 2. Metode... 2. Research... 3. Kommunikation... 4. Delkonklusion... 4. Analyse... 5. Design... Indhold Introduktion... 2 Problemformulering... 2 Metode... 2 Research... 3 Kommunikation... 4 Delkonklusion... 4 Analyse... 5 Design... 6 Delkonklusion... 9 Implementering og dokumentation... 10 Konklusion...

Læs mere

AFSLUTTENDE OPGAVE I KOMMUNIKATION/IT

AFSLUTTENDE OPGAVE I KOMMUNIKATION/IT AFSLUTTENDE OPGAVE I KOMMUNIKATION/IT Rikke Ihle & Jeppe Brogaard Roskilde Tekniske Gymnasium Indholdsfortegnelse Indledning... 2 Planlægning... 2 Problem... 3 Målgruppe... 3 Løsning... 3 Produkt... 3

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

Eksamensopgave 2012. Aarhusportalen. Melissa Emilie

Eksamensopgave 2012. Aarhusportalen. Melissa Emilie Eksamensopgave 2012 Aarhusportalen Melissa Emilie Indhold Indhold... 1 Aarhusportalen... 2 Projektbeskrivelse... 2 Hvem er kunden... 2 Målgruppe... 2 Hvad ønsker vi at opnå... 2 Temaer... 2 Tidsplan...

Læs mere

Genvejstaster i kapilel 6. IKON BETEGNELSE INDLAGT SKAL TILFØJES Set Auto Borders Indsætter færdigt tegnede kanter,

Genvejstaster i kapilel 6. IKON BETEGNELSE INDLAGT SKAL TILFØJES Set Auto Borders Indsætter færdigt tegnede kanter, Kanter Set Border værktøjet giver stor fleksibilitet. Man kan designe sine egne kanter fra bunden, vælge mellem de 22 typer der er i EQ6. Set Auto borders indsætter færdig designede kanter med et klik.

Læs mere

Rapport. Projekt 4, MUL Knord. 1.semester Senia lundberg, Jakob christoffersen, Louise Ferm og Emil Hauberg

Rapport. Projekt 4, MUL Knord. 1.semester Senia lundberg, Jakob christoffersen, Louise Ferm og Emil Hauberg Rapport Projekt 4, MUL Knord. 1.semester 2009 Senia lundberg, Jakob christoffersen, Louise Ferm og Emil Hauberg Indholdsfortegnelse Forside: side 1. Indholdsfortegnelse: side 2. Afgrænsning side 2. Indledning:

Læs mere

DOKU- MEN- TATION TEK- NISK

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

Læs mere

Grafisk produktion og workflow

Grafisk produktion og workflow Grafisk produktion og workflow Helle Nicolaysen, mediegrafiker, 3. hovedforløb Introduktion Bylderup-Bov Rideklub har en hjemmeside, bestående af en template, hvor designet er fastlagt. Jeg er i kontakt

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

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

Designmanual BUTLER FM

Designmanual BUTLER FM Designmanual BUTLER FM 2015 Grontmij A/S, Facilities Management Forfatter: Rikke Carlsen, RIC Indhold Grid... 3 Afstande... 5 Fonte og typografier... 6 Farver... 7 Tabeller... 8 Andre elementer... 10 Ikoner...

Læs mere

STEPS GIANT. GIANT STEPS jazz orchestra. Klasse: tr09mul02. Maria Ekelund, Stephanie Rosborg, Rasmus Seye og Thomas Riis

STEPS GIANT. GIANT STEPS jazz orchestra. Klasse: tr09mul02. Maria Ekelund, Stephanie Rosborg, Rasmus Seye og Thomas Riis Klasse: tr09mul02 STEPS GIANT j a z z o r c h e s t r a Indholdsfortegnelse 1.0 Problemformulering 1.1 Tidsplan 1.2 Wireframe 1.3 Flowchart 2.0 Research 2.1 Begrundelse for design 2.2 Logo 3.0 Generelt

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

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

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

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

Læs mere

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

GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1

GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1 GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1 GRAFISK WORKFLOW DOKUMENTATION OPGAVEN Denne opgave er lavet som en fiktiv opgave. Opgaven er lavet for et fiktivt firma, som tilbyder personlig fitness træning.

Læs mere

Indre Missions. Vejledning til TYPO3

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

Læs mere