Tillykke Med Fødselsdagen

Størrelse: px
Starte visningen fra side:

Download "Tillykke Med Fødselsdagen"

Transkript

1 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 your club. Introduktion I dette projekt bliver du introduceret til HTML & CSS ved at lære, hvordan du laver dit helt eget personlige fødselsdagskort. Arbejdsliste Test dit Projekt Gem dit Projekt Følg disse INSTRUKTIONER trin for trin Klik på det grønne flag for at AFPRØVE din kode Sørg for at GEMME dit projekt 1

2 Trin 1: Hvad er HTML? HTML står for HyperText Markup Language, hvilket er det sprog, som man bruger til at lave websider. Lad os se på et eksempel! Arbejdsliste Du skal bruge en webside, der hedder Trinket til at skrive din HTML. Åbn denne Trinket: jumpto.cc/web-intro. Hvis du læser dette online, så kan du også benytte den indlejrede Trinket nedenfor. Koden, som vises til venstre i vores Trinket, er HTML. I højre side kan du se den webside, som HTML koden har lavet. HTML bruger tags til at opbygge websider. Prøv at lægge mærke til følgende HTML i linje 8 af din kode: <p>hej. Mit navn er Anders.</p> <p> er et eksempel på et tag, og er en forkortelse af paragraph. Du kan begynde en paragraf med <p> og afslutte en paragraf med </p>. Kan du få øje på andre tags? Måske du har lagt mærke til et tag på linje 9, som er <b>, hvilket står for bold (fed): <b>løbe</b> Her er nogle flere tags: <html> og </html> markerer begyndelsen og slutningen af dit HTML 2

3 dokument; <head> og </head> omringer fx din CSS (det kommer vi ind på senere!); <body> og </body> indeholder dit website indhold. Prøv at ændre en af dine tekstparagrafer i din HTML (til venstre). Klik på Run. Nu bør du se, at din webside ændrer sig (i højre side)! Hvis du har lavet en fejl og har lyst til at fortryde dine ændringer, så kan du klikke på menuknappen og derefter Reset. Prøv det selv! 3

4 4

5 Gem dit projekt Du behøver ikke have en Trinket konto for at kunne gemme dine projekter! Hvis du ikke har en Trinket konto, så klik på pil-ikonet, der vender nedad, og klik så på Link. Så vil du få et link, som du kan gemme og vende tilbage til senere. Dette skal du gøre hver gang du laver ændringer, som du gerne vil gemme, for linket ændrer sig tilsvarende! Hvis du har en Trinket konto, så er den letteste måde at gemme din webside på ved at klikke på Remix knappen øverst til højre. Så gemmer du en kopi af din Trinket på din profil. 5

6 Udfordring: Tilføj en ny paragraf Kan du tilføje en tredje tekstparagraf til din webside under dine 2 øvrige paragrafer? Husk at din nye paragraf skal starte med et <p> tag og slutte med et </p>. Din webside bør se således ud: Kan du tilføje fed (bold) og understreget tekst til din nye paragraf? Du skal bruge <u> og </u> for at understrege din tekst. Gem dit projekt Trin 2: Hvad er CSS? CSS står for Cascading Style Sheets, og er det sprog man bruger til at style websider (forme layout) og få dem til at se indbydende ud. Du kan linke din webside til en CSS fil i <head> sektionen af et HTML dokument på denne måde: Arbejdsliste CSS definerer egenskaberne for et givent tag. Klik på style.css fanen for CSS en til din webside. 6

7 Find denne kode: p { } color: black; Denne CSS kode indeholder en enkelt egenskab for paragrafer, hvilket er at tekstfarven skal være sort. Ændr ordet black i CSS en til blue. Du bør nu se at tekstfarven på alle dine paragrafer skifter farve til blå. Gem dit projekt 7

8 Udfordring: Tilføj endnu mere styling Kan du lave tekstlinjerne orange? Eller baggrunden grå? Gem dit projekt Trin 3: Lav et fødselsdagskort Lad os bruge hvad du har lært indtil videre omkring HTML og CSS og gå igang med at lave dit helt eget fødselsdagskort. Arbejdsliste Åbn denne Trinket: jumpto.cc/web-kort, eller benyt den indlejrede version nedenfor, hvis du læser dette online. Bare rolig hvis du ikke forstår al koden. Fødselsdagskortet ser lidt kedeligt ud, så nu skal du lave nogle ændringer i HTML- og CSS en. Hvis du klikker på knappen på forsiden af kortet, så bør du se at det åbner sig. 8

9 Gå til linje 13 i din kode. Ligesom vores tidligere eksempel, så kan du redigere hvilken som helst tekst i HTML en for at gøre dit kort personligt. Kan du finde HTML en for dit robotbillede? (Hint: den er på linje 16!) Ændr ordet robot til sun - så vil du se at billedet ændrer sig! Du kan bruge andre ord som boy, diamond, dinosaur, flowers, girl, rainbow, robot, spaceship, sun, tea, og trophy. Du kan også redigere CSS en til dit fødselsdagskort. Klik på fanen style.css. Det begynder med al CSS en 9

10 outside (udenpå) kortet. Ændr background-color til lightgreen. Du kan også ændre størrelsen på et billede. Gå til linje 29 i din CSS og ændr width (bredde) og height (højde), af billedet udenpå, til 200px ( px står for pixels). Skrifttypen (font) kan også ændres. Gå til linje 24 og ændr font-family til Comic Sans MS og font-size til 16pt. Du kan benytte andre skrifttyper som fx arial, Impact og Tahoma. Gem dit projekt 10

11 Udfordring: Lav et personligt kort Brug alt det du har lært omkring HTML og CSS for at færddiggøre dit personlige kort. Det behøver ikke være et fødselsdagskort, men kan være til hvilken som helst lejlighed! Her er et eksempel: Gem dit projekt Nu hvor du har lavet dit kort færdigt, så kan du dele, eller e, det til nogen. 11

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

ChatBot. Introduktion. Scratch. Nu skal du lære hvordan du programmerer din egen talende robot! Arbejdsliste. Test dit Projekt.

ChatBot. Introduktion. Scratch. Nu skal du lære hvordan du programmerer din egen talende robot! Arbejdsliste. Test dit Projekt. Scratch 1 ChatBot 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

Rockband. Introduktion. Scratch. I dette projekt skal du lære, hvordan du kan kode dit eget musikinstrument! Arbejdsliste.

Rockband. Introduktion. Scratch. I dette projekt skal du lære, hvordan du kan kode dit eget musikinstrument! Arbejdsliste. Scratch 1 Rockband 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

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

Rumfart. Introduktion. Scratch. Nu skal du lære hvordan du programmerer din egen animation! Arbejdsliste. Test dit Projekt.

Rumfart. Introduktion. Scratch. Nu skal du lære hvordan du programmerer din egen animation! Arbejdsliste. Test dit Projekt. Scratch 1 Rumfart 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

Fang Prikkerne. Introduktion. Scratch

Fang Prikkerne. Introduktion. Scratch Scratch 2 Fang Prikkerne 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

Bekrig Klonerne. Introduktion. Scratch. I dette projekt skal du lære, hvordan du laver et spil, hvor du skal redde Jorden fra monstre i rummet.

Bekrig Klonerne. Introduktion. Scratch. I dette projekt skal du lære, hvordan du laver et spil, hvor du skal redde Jorden fra monstre i rummet. Scratch 2 Bekrig Klonerne 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.

Læs mere

Skab Din Egen Verden

Skab Din Egen Verden Scratch 2 Skab Din Egen Verden 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.

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

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

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

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

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

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

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

Mit grafiske workflow inkluderer:

Mit grafiske workflow inkluderer: GRAFISK WORKFLOW Opgave: Opgaven var at producere en bog og et website med temaet stilhistorie. Jeg har valgt at beskrive mit grafiske workflow i produktionen af websitet. Kravene var, at der skulle være

Læs mere

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

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

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

Ø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

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

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

Manual Serif Web & Tableau Public

Manual Serif Web & Tableau Public Manual Serif Web & Tableau Public Indhold 2 Start 3 Festivalprogram 4-19 Kursuskatalog 20-22 Dramaskolehold 23-28 Visitkort konsulenter 29-30 Visitkort scener 31-35 Amatørkulturens tal 36-42 VIGTIGT! For

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

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

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

Google Chrome side 1 af13

Google Chrome side 1 af13 Google Chrome side 1 af13 Indholdsfortegnelse: Download Google Chrome... Side 2 Overblik... Side 3 Angiv startside... Side 7 Søg direkte i adresselinjen... Side 8 Bogmærker sider... Side 8 Bogmærkeadministratoren...

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

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

POWERPOINT FONTE HELT SIMPELT

POWERPOINT FONTE HELT SIMPELT CLAUS HANDBERG POWERPOINT FONTE HELT SIMPELT www.brydrammen.dk - ch@visuspublishing.dk VisusPublishing Hybenvænget 5 7480 Vildbjerg Tlf. 31458200 All Rights Reserved FONTE HELT SIMPELT PowerPoint fonte

Læs mere

Hjemmesidens layout. Sitecore Foundry maj Version 1.2

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

Læs mere

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

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

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

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

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

Manual til brug af youtube

Manual til brug af youtube Manual til brug af youtube For at kunne bruge din nye video på din hjemmeside, facebook med videre, skal du først uploade den til youtube. Vi gennem gennemgår hele processen her i fire nemme trin. 1. Sådan

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

Flash Logic Free CMS. Manual og brugervejledning

Flash Logic Free CMS. Manual og brugervejledning Flash Logic Free CMS Manual og brugervejledning Indhold: 1. Funktionalitet 2. Fil-oversigt 3. Baggrundsbillede 4. Banner-billede 5. Redigering af tekst 6. Brug af html-tags 7. Web site navn 8. Upload til

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

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

Annemette Søgaard Hansen/www.dinwebvejleder.dk

Annemette Søgaard Hansen/www.dinwebvejleder.dk Google Docs Regneark Indholdsfortegnelse Værktøjer... Side 3 Menuer... Side 6 Opgave... Side 13 Få adgang til filerne fra din computer... Side 19 Vejledende løsning... Side 20 GoogleDocs Regneark 2 Google

Læs mere

! }! FORSIDE! ! !

! }! FORSIDE! <html>! <head>! FORSIDE opgaver body { background-color:#33adff; } header { background:#33adff; color:white; text-align:center; padding:5px;

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

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

WORKFLOW & PRODUKTION

WORKFLOW & PRODUKTION OPGAVE Jeg har lavet et fiktiv website for en hundekennel. Det er mit bud på hvordan sådan en eventuelt kan se ud. PROGRAMMER Photoshop Dreamweaver Illustrator WORKFLOW & PRODUKTION KENNEL BISCO Dokumentation

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

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

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

Be funky med billeder E-læringsmodul billedkunst IT-færdighedsniveau: 1 2 3 4 5 Af Simon Rune Jørgensen

Be funky med billeder E-læringsmodul billedkunst IT-færdighedsniveau: 1 2 3 4 5 Af Simon Rune Jørgensen Be funky med billeder E-læringsmodul billedkunst IT-færdighedsniveau: 1 2 3 4 5 Af Simon Rune Jørgensen Overblik I dette modul lærer du at anvende det online-baserede billedredigeringsprogram Befunky i

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

Gruppe 9 Visuel Interface Design, 27/09/2011

Gruppe 9 Visuel Interface Design, 27/09/2011 Gruppe 9 Visuel Interface Design, 27/09/2011 Først øvelse. Lav en designanalyse i tekst og billeder af det udleverede website www.kariyer.net. Vi startede med en hjemmeside, der så ud som følgende: Gennemgående

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

Installation af ETF s cloudløsning for Privatpraktiserende ergoterapeuter

Installation af ETF s cloudløsning for Privatpraktiserende ergoterapeuter Installation af ETF s cloudløsning for Privatpraktiserende ergoterapeuter For at starte opsætningen af produktet, downloades programmet ved at gå til nedstående link, og vælge under Privat praktiserende

Læs mere

Mark André Lyhne. Eksamen 2012. 12web1b

Mark André Lyhne. Eksamen 2012. 12web1b Mark André Lyhne Eksamen 2012 12web1b Indholdsfortegnelse Indholdsfortegnelse... 1 Projekt beskrivelse... 3 Målgruppe... 3 Afsender... 3 Budskab... 3 Kommunikationsmål... 3 Ideudvikling... 3 De 6 Designparametre...

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

Mitch Studerer programmering og elsker at lave fede programmer. Han holder også meget af film og kunst. Mitch er i det hele taget en fin fyr.

Mitch Studerer programmering og elsker at lave fede programmer. Han holder også meget af film og kunst. Mitch er i det hele taget en fin fyr. Mitch Studerer programmering og elsker at lave fede programmer. Han holder også meget af film og kunst. Mitch er i det hele taget en fin fyr. De Kosmiske Vogtere: Gobo, Fabu og Pele De Kosmiske Vogtere

Læs mere

Manual og Hjælp Skoletasken 2

Manual og Hjælp Skoletasken 2 Manual og Hjælp Skoletasken 2 I Skoletasken 2 - Hjælp Indhold I Introduktion 1 Velkomst 2... 2 2 Systemkrav... 2 3 Installation... 3 4 Skoletasken... 8 II Opsætning 10 1 Systemopsætning... 10 2 Bogopsætning...

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

Manual til www.skoleskibet-danmark.dk s forum

Manual til www.skoleskibet-danmark.dk s forum Manual til www.skoleskibet-danmark.dk s forum Her gennemgås de mest almindelige funktioner i dette forum. Instillinger: Hvordan registrer jeg mig som bruger? (side 2) Hvordan logger jeg ind? (side 3) Hvordan

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

Microsoft Word 2003 - fremgangsmåde til Blomsterhuset Side 1 af 11

Microsoft Word 2003 - fremgangsmåde til Blomsterhuset Side 1 af 11 Microsoft Word 2003 - fremgangsmåde til Blomsterhuset Side 1 af 11 Åbn Word 2003 Skriv: Blomsterhuset A/S - tryk enter en gang Skriv: Blomster for alle - tryk enter 5 gange Skriv: I anledning af at - tryk

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

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

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

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

Webmail Gmail Generelt Side 1

Webmail Gmail Generelt Side 1 Webmail Gmail Generelt Side 1 Webmail Gmail Generelt Side 2 Indholdsfortegnelse Oprette en Gmail...... Side 4 Indbakken Oversigt...... Side 9 Skriv en mail...... Side 11 Formateringsværktøjer...... Side

Læs mere

Bestyrelsesadgang (Min Side)

Bestyrelsesadgang (Min Side) Bestyrelsesadgang (Min Side) Login på Min side på www.randersbolig.dk med dine brugeroplysninger som står i mail/brev. Du er nu logget ind på Min Side, og kan nu klikke på menupunkterne vedr. bestyrelsen

Læs mere

Brugermanual til Wordpress 3.2.x Content Management System

Brugermanual til Wordpress 3.2.x Content Management System Indhold Brugermanual til Wordpress 3.2.x Content Management System Kontrolpanelet 2 Brugerniveauer 2 Log ud 3 Profil 4 Generel Info (vigtigt) 5 Tilføj nyt indlæg(1) 6 Tilføj nyt indlæg(2) 7 Tilføj nyt

Læs mere

HJÆLP TIL FILM-X ANIMATIONSVÆRKTØJ

HJÆLP TIL FILM-X ANIMATIONSVÆRKTØJ HJÆLP TIL FILM-X ANIMATIONSVÆRKTØJ Når du bruger FILM-X animationsværktøjet har du hele tiden adgang til at få hjælp. Hjælpeboksen ligger i højre side af skærmen og den kan ses her nedenfor. Hjælpen er

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

IKT og Videnrepræsentationer

IKT og Videnrepræsentationer IKT og Videnrepræsentationer CSTBI-2 2010 5. kursusgang Introduktion til html Kjeld Svidt ks@civil.aau.dk Personlige hjemmesider De enkelte gruppemedlemmer kan lave egne hjemmesider i mappen public_html

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

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

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

Modul 8: Clouds (Lagring af filer)

Modul 8: Clouds (Lagring af filer) Det sprogpædagogiske kørekort 2012/2013 Modul 8: Clouds (Lagring af filer) Del II Sabine Kramer Indholdsfortegnelse side Opret en Google konto (punkt 1-4).. 3 Upload filer fra computeren til Google docs

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

En guidet tur gennem Clilstore

En guidet tur gennem Clilstore En guidet tur gennem Clilstore Elementære skridt Dette er en trin for trin demonstration af hvordan man kan lave en online webside (Unit) med video samt tekst hvor alle ordene er kædet til en lang række

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

SIGIL Sådan opretter du en e- bog Step by Step

SIGIL Sådan opretter du en e- bog Step by Step SIGIL Sådan opretter du en e- bog Step by Step Af Gitte Winter Graugaard Nov. 2013, Sigil version 0.7.2 1 Her følger en intro skridt for skridt til at oprette en e- bog i SIGIL og publicere den på SAXO

Læs mere

Brugervejledning @venbuild Light

Brugervejledning @venbuild Light HÅNDBOG FOR SYSTEMADMINISTRATOR/REDAKTØR Side 1 INDHOLDSFORTEGNELSE OM @VENBUILD LIGHT... 3 ADGANG... 3 OVERSIGT OVER LÆRINGSOBJEKTER... 4 NAVIGATION... 5 OVERSIGT OVER VARIANTER... 5 OVERSIGT OVER EGNE

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

Ø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

In stal l ati on sv ejl edn i n g er ti l di gi tal e n o- tesbøger

In stal l ati on sv ejl edn i n g er ti l di gi tal e n o- tesbøger Dato 15. marts 2016 Sagsbehandler Kim N. Eriksen Mail kine @vd.dk Telefon +45 2544 7014 Dokument 16/03534-1 Side 1 / 29 In stal l ati on sv ejl edn i n g er ti l di gi tal e n o- tesbøger 1. Introduktion

Læs mere

Installering af Microsoft Office 2012-09-12 Version 2.1

Installering af Microsoft Office 2012-09-12 Version 2.1 Installering af Microsoft Office 2012-09-12 Version 2.1 Indholdsfortegnelse Installering af Microsoft Office... 2 Oplysninger inden installeringen... 2 Installering af Microsoft Office... 3 Introduktion...

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

Installation af DATABOKS online backup manager

Installation af DATABOKS online backup manager Installation af DATABOKS online backup manager For at kunne tage fjern-backup skal du installere en online backup manager på din maskine. Den skal bl.a. bruges til at bestemme hvilke filer, databaser og

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

Moltrup-sogn.dk - Vejledning i redigering af undersider, og oprettelse af nye sider.

Moltrup-sogn.dk - Vejledning i redigering af undersider, og oprettelse af nye sider. Indholdsfortegnelse Moltrup-sogn.dk - Vejledning i redigering af undersider, og oprettelse af nye sider.... 2 Brugernavn og kodeord.... 2 Selve tekstbehandleren... 3 Indsættelse af billeder... 4 Metadata...

Læs mere

Projekt 5 - Porfolio Redesign

Projekt 5 - Porfolio Redesign Projekt 5 - Porfolio Redesign 1 semester - Copenhagen Business School Business School. 1/20 Indholdsfortegnelse Projektbeskrivelse...side 3 Mindmap...side 4 Project Breakdown Structure...side 5 Work Breakdown

Læs mere

TYPOGRAFI & OMBRYDNING

TYPOGRAFI & OMBRYDNING TYPOGRAFI & OMBRYDNING BOX OFFICE E-MAGASIN Magasin Design http://issuu.com/mads-pj/docs/e-magazine DOKUMENTATION OPGAVE Opgaven jeg stillede mig selv, var at designe et e-magasin omkring Box Office resultater.

Læs mere

Excel-4: Diagrammer og udskrift

Excel-4: Diagrammer og udskrift Excel-4: Diagrammer og udskrift Udfra indtastede tal og formler kan Excel oprette forskellige typer meget flotte diagrammer: grafer, kurver, søjler og cirkeldiagrammer. OPGAVE: Men der skal være nogle

Læs mere

SÅDAN BRUGER DU E-MAIL

SÅDAN BRUGER DU E-MAIL VEJLEDNING l E-MAIL SÅDAN BRUGER DU E-MAIL I vejledningen bruger vi det gratis e-mailprogram gmail som eksempel til at vise, hvordan man bruger e-mail. DU SKAL I FORVEJEN KUNNE: Bruge en browser og gå

Læs mere

Det sprogpædagogiske kørekort 2012/2013. Modul 3: Lydfiler (basis)

Det sprogpædagogiske kørekort 2012/2013. Modul 3: Lydfiler (basis) Det sprogpædagogiske kørekort 2012/2013 Modul 3: Lydfiler (basis) Sabine Kramer Indholdsfortegnelse side Download Audacity og hjælpeprogrammet Lame (punkt 1-10) 3 Installér Audacity og Lame (punkt 11-14)..

Læs mere

Studiestart med itslearning. for studerende ved radiografuddannelsen, UCN

Studiestart med itslearning. for studerende ved radiografuddannelsen, UCN for studerende ved radiografuddannelsen, UCN 11. januar 2013 INDHOLD Velkommen til studiestart med itslearning... 3 Login på itslearning... 4 Undervisningsplaner, forberedelse og litteratur... 7 Opgaver,

Læs mere