CSS fortsat: Boksmodel, floating & positionering

Save this PDF as:
 WORD  PNG  TXT  JPG

Størrelse: px
Starte visningen fra side:

Download "CSS fortsat: Boksmodel, floating & positionering"

Transkript

1 Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår Øvelse 4, individuel øvelse CSS fortsat: Boksmodel, floating & positionering 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, article, section, header, nav, div og span osv. samt at indsætte billeder og interne og eksterne links på dine sider. Ligeledes har du stiftet bekendskab med CSS, da du i sidste øvelse formaterede tekst med forskellige typografier, skriftstørrelser samt for- og baggrundsfarver. Dette gjorde du ved at tilknytte et eksternt stylesheet til dine HTMLdokumenter. Da der er en del forklarende tekst i denne øvelse, er selve de trin, som du skal udføre selv 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 ide at oprette en ny undermappe til denne øvelse, så du ikke risikerer at fa 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 ide 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 fx kopiere hele din nuværende side (inkl. index-side, billeder, undersider m.v.) til en undermappe, der hedder 'opgave4', som så får URL'en: brugernavn/opgave4. 2. Målsætning I dag skal du lære at arbejde med boksmodellen. Du vil bl.a. få mulighed for at benytte borders, paddings og margins. Samtidig skal du arbejde med bredde og højde. Du skal også prøve at bruge forskellige former for floating og positionering, så du får en fornemmelse af, hvilke metoder du kan benytte for at placere de forskellige elementer på dine sider, hvor du gerne vil have dem. 3. Beskrivelse I denne øvelse skal du arbejde videre med den personlige hjemmeside, som du har arbejdet på i de tre sidste uger. Siden skal fortsat være tilgængelig via internettet på dit brugernavn/evt mappenavn. Du skal ikke lave nogle nye sider denne gang men arbejde med de tre sider, du har på dit individuelle site, din forside, dit CV og siden hvor du fortæller kort om dig selv. Det er meningen, at du skal layoute ved at ændre parametre i boksmodellen sammen med anvendelsen af floating og positionering. I denne øvelse skal du arbejde med: At lave en simpel skitsering af dit layout inden du går i gang med at skrive dine CSS-

2 koder.

3 At anvende boksmodellens parametre til at ændre din HTML-elementers størrelse og udseende. At benytte floating og positionering til at placere dine HTML-elementer der hvor du gerne vil have dem. Evt. tilføje/ændre farver på tekst, baggrundsfarver, baggrundsbilleder og udseende på borders, så dit layout fremstår som et afsluttet hele. I øvelsen fokuseres på siden 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. Lav en skitsering af dit layout Selve layoutet er op til dig. Start derfor med at tage et A4-papir og skitsér, hvordan du vil layoute din side. Tag igen udgangspunkt i indholdet på siden, som du lavede til sidste øvelse, der kort beskriver dig selv, men tilføj meget gerne nyt indhold til siden. Ved at skitsere på papiret først får du et klart mål at sigte efter, når du går i gang med at formatere med CSS. Det er en god ide at forsøge at inddele sit design i nogle logisk adskilte hovedklynger. Elementer du kan inddrage i din skitse er eksempelvis elementer som en header, hvordan menuen skal se ud, et felt til dit primære indhold, hvordan evt. billeder skal placeres samt måske en footer. Du behøver ikke at opfinde et vanvittigt kompliceret layout. Da vi i dag skal lære det rent håndværksmæssige ved at layoute i CSS er det fint at udarbejde en simpel og meget klassisk opbygning. På skitsen kan du ligeledes beskrive parametre som størrelse på elementerne, farver osv. Du behøver ikke nødvendigvis at bruge energi på det rent æstetiske udtryk og på at holde dig tilbage - forsøg i stedet at anvende mange af de forskellige virkemidler, som CSS leverer, også selvom det måske kommer til at se lidt underligt ud. Der findes en række forskellige måder at opbygge dit layout på en webside. I denne øvelse tager vi udgangspunkt i et såkaldt fixed-layout da det ofte er det nemmeste at starte op med og forstå. Et fixed-layout er i høj grad pixel-styret, dvs. at I til denne øvelse med fordel kan bruge pixels til at beskrive højde og bredde i dit layout. Der er en række fordele og ulemper ved denne tilgang som ikke vil blive behandlet nærmere i denne øvelsesvejledning, men som er nævnt til forelæsningen og i grundbogen. (Hvis der er nogle som hellere vil udarbejde denne øvelse med en af de andre klassiske web-layout-tilgange er det selvfølgeligt helt ok). Brug ca. 15 minutter på denne skitsering og gå derefter i gang med at layoute med CSS. Et hurtigt eksempel på en skitsering kan ses nedenfor.

4 4.2. Ændre dimensioner på dine overordnede HTML elementer.

5 Start med udgangspunkt i din skitse med at tilføje en div "wrapper". Ved at tilføje en wrapper får du mulighed for at centrere alt dit indhold på siden. Tilføj <div id="wrapper"> lige efter dit <body> tag, og afslut det lige for dit </body> tag. I din style.css fil kan du nu definere: #wrapper { width: 960px; margin: 0 auto; Med denne stump CSS sætter du bredden til at være 960px på <div id= wrapper ></div> og alle margin i top og bund til at være 0, mens højre- og venstremargin auto-justeres. Dvs. at wrapper automatisk vil placere sig på midten af siden med en bredde på 960px. Du kan eksperimentere med bredden og sætte den til fx 80% og se hvad der sker med dit design. Fortsæt nu med at ændre størrelse på dine overordnede HTML elementer, det kan eksempelvis være din menu/header, dit content-område og din footer. Hvis dine elementer ikke har en baggrundsfarve kan du med fordel tilføje dem midlertidigt imens du arbejder med stylingen og derefter fjerne den til slut. Med en baggrundsfarve kan du lettere følge med i, hvordan boksene ændrer dimensioner undervejs. Tilføj eksempelvis: header { background-color: #ff0000; I sidste øvelse tilføjede du en række tags og div-elementer i dit HTML-dokument som klynger de overordnede indholdsområder. Du kan med fordel tilføje flere, hvis det passer med dit valgte layout. Husk at give dem et beskrivende class eller role navn, som du kan sende din CSSstyling mod, hvis det er nødvendigt. Undgå navne, der beskriver placering som fx. #menu-left, da du måske i et senere redesign flytte menuen til højre. Når du har gjort det, er det muligt for dig at ændre bredden og evt. højden på disse hovedområder. Det gør du ved eksempelvis at tilføje nedenstående kode i dit stylesheet. header { width: 800px; height: 100px; Bemærk at det ikke altid giver mening at tilføje højde til elementer, hvis indhold varierer meget. Eksempelvis det område som indeholder ens brødtekster. Bemærk ligeledes, at du ikke skal gentage hele CSS syntaksen for at tilføje ovenstående til header, du tilføjer selvfølgelig bare deklarationerne indenfor tuborgklammerne med den selektor, som allerede er i dit CSSdokument Ændre padding, margin og evt. borders til dine overordnede elementer Du har nu fået lagt fundamentet for dit layout. Nu skal du forsøge at skabe luft i din opsætning. Luft eller white space er et enormt vigtigt virkemiddel, når man designer. Luft kan hjælpe til med at adskille og skabe overblik - det handler ofte om at skabe luft til at understøtte hvilke elementer som hører sammen. Eksempelvis for en overskift der hører til i ens tekst-hierarki. Men luft handler også om æstetik, det er eksempelvis sjældent kønt at ens tekst står klods op af en baggrundsfarves afslutning eller meget tæt ved en streg. I CSS er der en række muligheder for at skabe luft, det kan eksempelvis gøres gennem brug af padding (dvs. luften mellem indhold og kanten - border ) og margin (dvs. luften fra border og ud). Mange af HTML-elementerne (undtagen eksempelvis de usynlige generiske elementer div og span) har padding og margin default-værdier knyttet til sig via browserens interne stylesheet. Så

6 snart du tilføjer din egen formatering overskrives denne styling. Tilføj padding og margin til de elementer på din side som skal have ændret dette. Eksempelvis: section { padding: 2em; margin-top: 1em; En god måde at skabe opdeling og sammenhæng i sit design er at benytte sig af diverse border muligheder. Hvis du eksempelvis vil tilføje en tynd blå stiplet streg rundt om dit aside-område kan du skrive: aside { border-color: #0000ff; border-style: dashed; border-width: 1px; Du kan skrive med mindre kode ved at udnytte de forskellige syntaks-muligheder i CSS. Koden ovenfor kan fx også skrives sådan her: aside { border: 1px dashed #0000ff; Ofte vil du vælge at skrive koden som det første eksempel og så, når du har styr på dit design, skrive koden ned, så den fylder mindst muligt. Men du bestemmer selv, hvordan du foretrækker at arbejde. Tilføj borders til de elementer som skal have disse og ændre eller tilføj evt. baggrundsfarver eller baggrundsbilleder til de elementer som du synes skal have dette tilføjet eller ændret fra sidste øvelsesgang Første spæde forsøg med positionering Hvis du ikke sidste gang tilføjede billeder til dine beskrivende tekst, så gør det nu, billeder er altid godt at prioritere som understøttelse til ens tekster. Som du kan se i browseren virker billederne dog underligt klodsede og skaber et stort stykke luft mellem paragrafferne når vi har sat dem ind. Det kan float heldigvis hjælpe til med at ændre. Tilføj eksempelvis float: left til img selectoren i CSS'en, og du vil se, at teksten, i stedet for at rykke ned efter billedet, nu omkranser billedet - tilføjer du i stedet float: right rykker billedet over i højre side, stadig med teksten rundt om sig. Hvis du oplever at teksten er lige tæt nok på billedet kan du ændre det ved at tilføje lidt margin til billedet. img { float: right; margin-left: 1em; Bemærk at ovenstående selektor er en såkaldt element selektor, hvilket gør at alle billeder nu flyttes til højre side. Dette kan du ændre ved at vælge en bedre svarende og mere specifik selektortype, f.eks. ved at give dit billede en class.

7 Du kan desværre ikke benytte dig af float: center til at placere billedet i midten - dette er der selvfølgelig en god grund til, hvilket har at gøre med de andre sammenhænge, hvori man benytter float Formatér din menu Din globale menu er lige nu formateret som en bulletliste - dette kan du meget nemt lave om på så den kommer mere til at ligne en rigtigt menu. Hvis HTML koden ser ud som nedenstående: <ul id= > <li><a href= index.html >Forside</a></li> <li><a href= cv.html >Mit CV</a></li> <li><a href= ommig.html >Om mig</a></li> </ul> Fjerner vi bullets ved at tilføje følgende til vores CSS: #menu { list-style-type: none; Hvis vi gerne vil have en horisontal menu med lyseblå baggrundsfarve skrives: #menu li { display: inline; background-color: #ccffff; For at knapperne skal ligne rigtigt knapper kan vi enten ændre dimensionerne på dem eller tilføje lidt luft inde i dem: #menu li { padding: 5px 10px 5px 10px; I kan peppe menuen yderligere op ved eksempelvis at tilføje nogle pseudoclass-selektorer som fx :hover til anchor-elementet. #menu li a { color: blue; text-decoration: none; #menu li a:hover { color: red; text-decoration: underline; Formater din menu evt. ved brug af ovenstående elementer Lav et eksperiment med positionering Til sidst skal I lave et eksperiment med positionering. Benyt enten relative-, absolute- eller fixed positionering til at placere et eller flere elementer på din side. Eksperimenter med dem, men vær opmærksom på at især absolute og fixed positionering skal anvendes i begrænset omfang. Det er normalt sådan at de kun anvendes hvis et unik position skal opnås som ikke kan klares ved hjælp af andre CSS metoder - anvend dem derfor kun hvis alle andre muligheder er opbrugt. Du kan evt. tilføje et ekstra billede eller ikon på din side. Hvis jeg eksempelvis vil tilføje et ikon som en slags splash i toppen af min side, kan jeg bruge: #breaking {

8 position: relative; top: 50px; right: 20px; Ovenstående kræver at jeg har tilføjet et billede i mit HTML-dokument med element identikatoren id="breaking". Forsøg dig frem med de forskellige former for positionering og se forskellene ved dem 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 HTML standarden, som er defineret af World Wide Web Consortium (W3C). Vær opmærksom på, at du skal validere hver enkelt af dine undersider - en 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. Er koden valideret korrekt, kan man nederst på siden se to små grafiske ikoner. Når det er lykkedes dig at få valideret din side korrekt, kan du evt. kopiere koden til højre for ikonet ind i ALLE dine HTML-filer før </body>- tag'et, og så får du vist et validatorlogo på dine sider, som samtidig linker til validator-servicen. Når man som bruger klikker på logoet på dine sider, vil man blive sendt videre til validator servicen, som viser resultatet af valideringstjekket; at den siden er opbygget af valid HTML-kode efter den pågældende standard. (Det er en stor hjælp for din hjælpelærer, når han/ hun skal gennemgå din aflevering). TIP: Hvis du synes, at logoet er grimt og ødelægger stilen på din side, kan du evt. erstatte linket med en alm. linktekst, som du kan formatere, 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. Hvis du bruger et internt stylesheet (men det gør du jo ikke, fordi det er meget smartere at bruge det eksterne), kan du validere det ved at angive URL'en til det HTML-dokument, som det interne stylesheet findes i, men så skal du huske først at validere din HTML-kode. Er koden valideret korrekt, kan man på siden se to små grafiske ikoner. Når det er lykkedes dig at få valideret din side korrekt, kan du evt. kopiere koden til højre for ikonet ind i ALLE dine HTML-filer før </body>- tag'et, og så får du vist et CSS-validatorlogo på dine sider, som samtidig linker til validator-servicen. 5. Aflevering 5.1. Deadline Din deadline for aflevering er tirsdag den 6. marts 2012 inden kl Du har altså en uge til 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 du

9 har: Klynget indholdsområder med relevante tags eller div-elementer Givet beskrivende class, roles eller id-navne Defineret bredde og højde på indholdsområder fx #header {width: 900px; height: 100px; Tilføjet margin og padding til elementer fx section { padding: 10px 10px 5px 0; Tilføjet border og baggrund til elementer som led i stylingen af dit site fx h2 {border-bottom: 5px solid #fu9; Positioneret billede(r) i din personlige tekst fx img {float:right; margin-left: 10px; Stylet din globale menu, så den passer ind i dit overordnede design, fx se punkt 4.5. Eksperimenteret med relative, absolute eller fixed positionering af element NB! Men kun, hvor alle andre muligheder i CSS er opbrugt El Knyttet alle dine HTML-sider til dit eksteme stylesheet Gennemkigget alle sider i browseren for at tjekke for fejl fx om links, layout og tekstindhold er i orden Valideret HTML Indsat validatorlink på alle dine side Valideret CSS Indsat CSS-validatorlink på din startlindex-side Valideret din HTML endnu engang på alle sider

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

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

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

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

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

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

Ø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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 Workflow STILHISTORIE. Website lavet i forbindelse med et projekt om stilhistorie. Klik her for at se websitet:

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

Læs mere

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

Grafisk workflow. website til duckhead music

Grafisk workflow. website til duckhead music Grafisk workflow website til duckhead music Portfolio h1 Side 18 website til duckhead music Selvom jeg er hos et webbureau, så sidder jeg udelukkende med design, og er derfor ikke kommet til at kode endnu.

Læs mere

REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow

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

Læs mere

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

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

Nu skal vi især se på <font> og <center> samt centrering af hele siden på skærmen. Validering 4 Nu skal vi især se på og samt centrering af hele siden på skærmen. Det er i HTML ikke forbudt at bruge koden , men lad nu være alligevel, du får blot en masse valideringsproblemer.

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

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

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

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

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

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

Web sider. Introduktion: Har du nogensinde spekuleret over, hvordan det verdesomspændende internet virker og hvordan man snakker med det?

Web sider. Introduktion: Har du nogensinde spekuleret over, hvordan det verdesomspændende internet virker og hvordan man snakker med det? Introduktion: Har du nogensinde spekuleret over, hvordan det verdesomspændende internet virker og hvordan man snakker med det? I dag skal du lære at lave hjemmesider, så du også kan bidrage til at opbygge

Læs mere

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

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

Nyhedsbrev april: spørgeskemaundersøgelse

Nyhedsbrev april: spørgeskemaundersøgelse #ChronoContact_Survey { margin-bottom: 10px; margin-left: 0px;.form_element { float: left; font-family: Arial,Helvetica,sans-serif; font-size: 12px; margin-bottom: 8px; margin-left: 0; margin-top: 8px;

Læs mere

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

Lav dine egne hjemmesider/websider

Lav dine egne hjemmesider/websider Sider, der skal publiceres på World Wide Web, laves i et særligt format, html, som fortæller browseren, hvordan den skal vise tekst og billeder. Html (Hypertext markup language) er meget fleksibelt og

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

1. Hovedforløb. Mediegrafiker - 2015

1. Hovedforløb. Mediegrafiker - 2015 Af Ditte Vium Overgaard Grafik og billedbehandling 1. Hovedforløb Mediegrafiker - 2015 OPGAVEBESKRIVELSE Der er til alle de fire kernefagligheder taget udgangspunkt, i mit eget lille projekt, med design

Læs mere

5 ARBEJDE MED EDITOREN

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

Læs mere

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

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

Læs mere

GRAFISK WORKFLOW. Layout Layout af hjemmesiden laves i Photoshop og siderne inddeles i mapper for bedre overblik.

GRAFISK WORKFLOW. Layout Layout af hjemmesiden laves i Photoshop og siderne inddeles i mapper for bedre overblik. GRAFISK WORKFLOW Opgaven Design og skabelse af website til maler og skrotkunstner Ole Møgelby. Websitet skal virke som en oversigt af Oles værker og som en informationsside. Programvalg Af programmer har

Læs mere

GRAFISK 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

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

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

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

Læs mere

FORSTÅELSE FOR GRAFISK PRODUKTION OG WORKFLOW

FORSTÅELSE FOR GRAFISK PRODUKTION OG WORKFLOW Opgaven I AArhus er en fiktiv hjemmeside. Formålet med hjemmesiden, er at Folk som befinder sig i Aarhus kan henvende sig til I AArhus og berette deres synspunkt på Aarhus. Siden henvender sig til unge,

Læs mere

Grafisk 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

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

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

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

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

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

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb Dokumentation Workflow Grafisk produktion Trine Alexandersen 1. hovedforløb Jeg har valgt at vise min egen hjemmeside som workflow. Siden er min e-portfolio som skal vise hvad jeg lærer under min uddannelse

Læs mere

Vejledning til opbygning af hjemmesider

Vejledning til opbygning af hjemmesider Side 1 af 9 Vejledning til opbygning af hjemmesider Hvis du er inde på din klubs hjemmeside, fx på forsiden, kan du nu gå i gang med at redigere. For at få redigeringsværktøjet frem, skal du klikke på

Læs mere

Projekt i Programmering C Menu til hjemmeside.

Projekt i Programmering C Menu til hjemmeside. Projekt i Programmering C Menu til hjemmeside. 10-12-2004 Holstebro HTX Bent Arnoldsen Synopsis. Projektet her er en menu til hjemmesider, som er lavet så den er let at tilrette, når man tilføjer eller

Læs mere

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

Indholdsfortegnelse Opret engelsk version af hjemmesiden... 2

Indholdsfortegnelse Opret engelsk version af hjemmesiden... 2 Indholdsfortegnelse Opret engelsk version af hjemmesiden... 2 Indledning:... 2 Metode 1 en samling af sider, med kun en engelsk version:... 3 Metode 2 Eksisterende sider med både en dansk og en engelsk

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

Grafisk Design. fra idé til visuelt udtryk Benett

Grafisk Design. fra idé til visuelt udtryk Benett fra idé til visuelt udtryk Benett Indholdsfortegnelse Brief...5 Idé og skitsering....6 Værktøjer....6 Farvevalg....7 Flowchart eksisterende site...7 Design i Photoshop....9 Ikoner i Illustrator...11 Setup

Læs mere

Laura Svendsen Kernekompetencer GRAFISK WORKFLOW

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

Læs mere

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

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

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

Læs mere

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

Grafisk workflow. Hjemmeside til Bærkompagniet

Grafisk workflow. Hjemmeside til Bærkompagniet Grafisk workflow Hjemmeside til Bærkompagniet Dokumentation Opgaven Bærkompagniet skulle have designet og programmeret et website, hvor de kunne præsentere deres produkter samt mulige forhandlere kunne

Læs mere

Redaktørmanual TYPO3 Version 6.2

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

Læs mere

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

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

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

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

Produkt. Index side GRAFISK DESIGN

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

Læs mere

Ø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

MANUAL - Joomla! Version 1

MANUAL - Joomla! Version 1 MANUAL - Joomla! Version 1 Indhold Retningslinjer for hjemmesiden... 2 Log ind... 2 Ret i en artikel, der allerede er oprettet... 3 Opret ny artikel... 6 a) Skriv direkte i tekstfelt... 7 b) Indsæt tekst

Læs mere

portfolio GRAFISK WORKFLOW

portfolio GRAFISK WORKFLOW Grafisk Workflow Opgaven Der skal laves hjemmeside til et lille privat bageri. Kunden ønsker et overskueligt site. Hjemmesiden skal kort og godt fortælle om Skejby Centrets Bageri og deres produkter og

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

Manual til Dynamicweb Februar 2010

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

Læs mere

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

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

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

Kalender med mailingliste

Kalender med mailingliste Kalender med mailingliste Side 1 af 11 Log ind på din hjemmeside, som du gør, når du opdaterer den. Gå herefter ind på afsnittet Moduler. Tryk på Installer udfor Kalender. Side 2 af 11 Nu dukker nedenstående

Læs mere

Vejledning til vedligehold af

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

Læs mere

Sitecore manual Institutionshjemmesider 2013. Kom godt i gang med at bygge din nye hjemmeside

Sitecore manual Institutionshjemmesider 2013. Kom godt i gang med at bygge din nye hjemmeside Sitecore manual Institutionshjemmesider 2013 Kom godt i gang med at bygge din nye hjemmeside 1 Log- ind så kommer du ind i Sitecore Gå til: institutionsnavn.gentoftesites.dk/sitecore ( f.eks.jaegersborgfc.gentoftesites.dk/sitecore)

Læs mere

GRAFISK WORKFLOW. 1 Grafisk workflow

GRAFISK WORKFLOW. 1 Grafisk workflow GRAFISK WORKFLOW 1 Opgavebeskrivelse I forbindelse med et nyt online koncept Web in a box skulle jeg lave en Photoshop-skabelon, der kan eksportere materiale til en hjemmeside automatisk. Selve konceptet

Læs mere

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

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

Læs mere

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

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

2. H vis du vil br uge egen computer til øvelser ne

2. H vis du vil br uge egen computer til øvelser ne W ebdesign og webkommunikation 2, I T U niversitetet, forår 2011. I ntroduktion til det praktiske 1. Målsætning Før vi går i gang med kurset, skal du have de helt lavpraktiske ting på plads, så du er helt

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

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

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

TYPO3 TRIN FOR TRIN 3

TYPO3 TRIN FOR TRIN 3 TYPO3 TRIN FOR TRIN 3 De indledende øvelser er fuldstændig de samme som i TYPO3 TRIN FOR TRIN 1 side 1-2. Du åbner altså din browser, skriver ale.dk/typo3 i Adressefeltet, og klikker på ordet Side i menuen

Læs mere