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

Størrelse: px
Starte visningen fra side:

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

Transkript

1 Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår Øvelse 1, individuel øvelse Introduktion til HTML5: Tekst, punktlister, 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 gør du blandt andet ved: at lave en enkel hjemmeside at skrive din første HTML5 at tilføje et billede at lave dit første link at lave en skabelon for dine HTML5-sider, så du nemt og hurtigt kan tilføje undersider til din hjemmeside at tilføje et CV på en ny underside at opstille en punktliste at linke mellem din forside og underside at validere koden som en vigtigt afslutning i alle kodeprocesser 2. Beskrivelse I denne øvelse skal du lave en personlig hjemmeside, som bliver dit elektroniske ansigt udadtil på kurset og i øvrigt. Siden skal være tilgængelig via internettet på dit_brugernavn. Denne adresse bliver også postet på kursets hjemmeside, så alle nemt kan tjekke hinandens websider ud. Et eksempel på slutresultatet af dagens strabadser ses nedenfor. Du behøver ikke skrive din livshistorie, skriv kort det du tror kan være relevant for andre på ITU at vide om dig og som du har lyst til at fortælle om dig selv. Gør det kort og nemt at gå til.

2

3 3. Koden 3.1. Eksempel Koden til et site i HTML5 ser i sin simpleste form ud som nedenfor. Start med at læse eksemplet igennem. <!DOCTYPE html> <html lang="da"> <head> <meta charset="utf-8" /> <title>sidens titel</title> </head> <body> Dit indhold </body> </html> Du vil i kodeeksemplet kunne genkende de helt basale HTML5-elementer: <html>, der omslutter hele dokumentet <head>, der indeholder information om sitet <body>, hvor sitets indhold, som vises i browservinduet, er placeret 3.2 Opret dit HTML-dokument Åbn Notepad++ hvis du bruger PC. Er du Mac-bruger kan du benytte dig af Coda (du kan finde vejledningen til FTP og programmerne fra sidste gang her), men vær opmærksom på at Coda kun er gratis i en begrænset periode. Istedet kan du bruge en kombination af et gratis program som TextWrangler og Cyberduck. Du kan finde en guide i brugen af Cyberduck her: - linket findes også på bloggen. Du skal nu kopiere koden fra afsnittet ovenfor over i Notepad++. Marker det du vil kopiere ovenfor og tryk ctrl + c. Gå derefter til Notepad og tryk ctrl + v. (Når du kopierer fra PDF-filen kan der nogle gange opstå en en fejl som udskifter almindelige citationstegn " " med venstreog højrevendte citationstegn. Denne udskiftning medfører at din kode ikke vil validere - vær derfor opmærksom på om citationstegnene er almindelige som i koden ovenfor). I Notepad++ vælger du File og Save as. Kald filen skabelon.html. I drop-down menuen Filtype vælges Hyper Text Markup Language file (*.html;*.htm;*.shtml;*.shtm;*.xhtml). Dette er vigtigt, ellers vil siden ikke kunne vises. Placer filen på H-drevet i roden af din public_html mappe hvis du arbejder på skolens computer. Arbejder du egen computer skal du bruge en ftp (se vejledning fra sidste gang) Tryk Save.

4 (Bruger du Mac skal du på samme måde sikre dig at encoding er sat til Unicode (UTF-8) når du gemmer din tekstfil - udover det er det vigtigt at du husker at tilføje endelsen.html til dit filnavn) (Vil du vide lidt mere om Document Type Definition osv., henvises til grundbogens kap. 3) Du har nu oprettet en skabelon du kan bruge, hver gang du skal oprette en ny side. Vælg igen Save as... i Notepad++ og gem filen som index.html, så du nu både har en fil ved navn skabelon.html og en ved navn index.html. 3.3 Skriv den første HTML og tjek den i en browser Kodeeksempel: <!DOCTYPE html> <html lang="da"> <head> <meta charset="utf-8" /> <title>sigurds hjemmeside</title> </head> <body> <article> <h1>sigurds hjemmeside</h1> <p>hej, jeg hedder Sigurd og dette er min hjemmeside.</p> </article> </body> </html> Sørg for at have index.html åben. Du skal nu gengive det kodeeksempel, du ser ovenfor, ved at skrive løs i Notepad++, men indsæt dit eget navn. Hold tungen lige i munden! Tastefejl kan give mange kvaler. Bemærk at det især er vigtigt, de forskellige tags bliver nested korrekt - altså er åbnet og lukket i den rigtige rækkefølge. Derfor er det en rigtig god idé, at du skaber overblik i koden ved at bruge linjeskift og indryk. Selvom du laver indryk/mellemrum og linjeskift, gør det ikke nogen forskel for browseren. Til gengæld er det meget nemmere for dig og andre at vende tilbage til koden senere. Husk også at gemme undervejs ved at trykke ctrl + s. Nu skal sitet tjekkes i en browser: For at se dokumentet i aktion, åbner du din favoritbrowser og indtaster adressen til dit public-drev (www.itu.dk/people/dit_brugernavn/) - glæd dig nu over, at din første hjemmeside er i luften. Bemærk, at browsere automatisk finder og åbner index.html som standard. Havde du kaldt filen f.eks. minside.html, ville det være nødvendigt at skrive hele adressen i adressefeltet (www.itu.dk/people/dit_brugernavn/minside.html). Er der derimod ikke en index.html fil, og angiver man ikke en specifik fil, vil der dukke en oversigt over mapper og filer op i stedet Overskrifter og indhold

5 Næste skridt er at lave to afsnit mere med tekst. Lav for eksempel en paragraf hvor du skriver lidt om dig selv og en med information om faget her. De to paragraffer skal have underoverskrifter <h2>, der passer til indholdet. Du har allerede brugt <article> til at markere det selvstændige indhold på siden, nemlig hele artiklen om dig. Hvert underafsnit er samtidig en sektion i sig selv. Husk derfor at opmarkere dem som. Eksempelvis vil en artikel om frugter være indrammet af <article>, mens den specifikke artikel om banan og æble vil indrammes af. Er du yderligere i tvivl om, hvordan du skal bruge <article> og kan du læse op på det i grundbogens kapitel s. 73. Kodeeksempel: <!DOCTYPE html> <html lang="da"> <head> <meta charset="utf-8" /> <title>sigurds hjemmeside</title> </head> <body> <article> <h1>sigurds hjemmeside</h1> <p>hej, jeg hedder Sigurd og dette er min hjemmeside.</p> <h2>lidt om mig selv</h2> <p>jeg elsker at gå lange ture langs stranden sammen med min hun Vuffe. Min yndlingsret er Spaghetti Bolognese og der er ikke noget jeg nyder så meget som et godt spil dart.</p> <h2>tilmeldte kurser</h2> <p>jeg er tilmeldt kurset Webdesign og Webkommunikation på IT- Universitetet i København. Jeg glæder mig enormt meget til at lave verdens fedeste hjemmeside.</p> </article> </body> </html> Gem dokumentet og se hvordan det ser ud i browseren ved at klikke F5 (mac: cmd+r), når du står i browservinduet Tilføj billede Nu skal du tilføje et billede til din hjemmeside. Start med at oprette en mappe på dit public-drev, og kald den billeder. Find et billede af dig selv, navngiv det f.eks. dit_fornavn-dit_efternavn.jpg, og placer det i denne mappe (hvis du ikke har et billede af dig selv lige nu, kan du finde et andet, men sørg for at

6 billedet er på inden du afleverer på bloggen, så vi kan genkende dig). Der er forskellige gode tips til navngivning af mapper og filer, hvor de vigtigste er fremhævet her. At følge disse mindsker risikoen for fejlindtastninger, giver pænere URL'er og gør det nemmere at lave links korrekte, så hav dem i baghovedet, når du arbejder med din hjemmeside. Giv korte, men meningsfulde navne Brug kun små bogstaver Ingen æ, ø og å (eller andre mærkelige tegn) da browserne ikke kan fortolke dem ordentligt Ingen mellemrum, brug evt. bindestreg eller underscore i stedet Læs mere i grundbogen s. 19. For at indsætte et billede i koden, skal du bruge <img>-elementet. Til <img> hører som minimum de to attributter src (source) og alt (alternate). Src-attributtens tilhørende værdi angiver, hvor billedfilen ligger i forhold til det dokument, man vil placere billedet i - her altså index.html. Alt-attributtens værdi angiver derimod en beskrivende tekst til billedet, og denne er obligatorisk: <img src= sti-til-billedet alt= beskrivende-tekst /> Bemærk at <img>-elementet er et såkaldt tomt element. Der er altså intet indhold i elementet, kun attributterne, og derfor heller intet slut-tag, men derimod et mellemrum og en skråstreg sidst i tagget, som alle tomme elementer skal have. Tilføj nu dit billede under den første paragraf, og husk at angive den korrekte sti til billedet som værdi til src-attributten og en beskrivende tekst til billedet i alt-attributten. <!DOCTYPE html> <html lang="da"> <head> <meta charset="utf-8" /> <title>sigurds hjemmeside</title> </head> <body> <article> <h1>sigurds hjemmeside</h1> <p>hej, jeg hedder Sigurd og dette er min hjemmeside.</p> <img src="billeder/fornavn-efternavn.jpg" alt="portræt: Fornavn Efternavn" /> <h2>lidt om mig selv</h2> <p>jeg elsker at gå lange ture langs stranden sammen med min hun Vuffe. Min yndlingsret er Spaghetti Bolognese og der er ikke noget jeg nyder så meget som et godt

7 spil dart.</p> <h2>tilmeldte kurser</h2> <p>jeg er tilmeldt kurset Webdesign og Webkommunikation på IT- Universitetet i København. Jeg glæder mig enormt meget til at lave verdens fedeste hjemmeside.</p> </article> </body> </html> Gem og tjek i browser Tilføj link Næste opgave er at tilføje et link på din side. Hele nettets struktur er som bekendt bygget op om links, og de findes i forskellige afskygninger: links til eksterne hjemmesider links til interne sider på samme site (hvis man har flere sider - og jo det skal nok komme) links til et bestemt sted i samme HTML-dokument links til mail-adresser links direkte til filer. Fælles for dem alle er, at man benytter elementet <a> (anchor) med tilhørende attribut href (hypertext reference) og en værdi. Så den generiske opskrift på et link er: <a href="sted-der-skal-linkes-til">det-som-skal-klikkes-på</a> I denne opgave skal du lave et link til kursets hjemmeside, altså en ekstern hjemmeside, i den tredje paragraf, og det-som-skal-klikkes-på skal være ordene Webdesign og Webkommunikation. Kig på eksemplet nedenfor og skriv koden ind i din index.html. <!DOCTYPE html> <html lang="da"> <head> <meta charset="utf-8" /> <title>sigurds hjemmeside</title> </head> <body> <article> <h1>sigurds hjemmeside</h1> <p>hej, jeg hedder Sigurd og dette er min hjemmeside.</p> <img src="billeder/fornavn-efternavn.jpg" alt="portræt: Fornavn Efternavn" /> <h2>lidt om mig selv</h2> <p>jeg elsker at gå lange ture langs stranden sammen med min hun Vuffe.

8 Min yndlingsret er Spaghetti Bolognese og der er ikke noget jeg nyder så meget som et godt spil dart.</p> <h2>tilmeldte kurser</h2> <p>jeg er tilmeldt kurset <a href= https://blog.itu.dk/dwdk1- F2012 >Webdesign og Webkommunikation</a> på IT-Universitetet i København. Jeg glæder mig enormt meget til at lave verdens fedeste hjemmeside.</p> </article> </body> </html> Gem og test linket i browseren. Vær opmærksom på, at browseren automatisk vil dekorere et link med den klassiske blå farve og understregning. Dette er en default-fortolkning, som er styret af browserens indbyggede styling. Udseendet af link-teksten skal vi senere på kurset lære at ændre ved hjælp af CSS (Cascading Style Sheets) Opret din første underside Brug nu din skabelon til at oprette din første underside som skal indeholde dit CV - gem siden med et passende navn, eksempelvis cv.html [File > Save as ]. Husk tips til god navngivning nævnt tidligere i vejledningen. På denne side skal du nu skrive dit CV ind. Husk at benytte de tags, som du har lært at bruge til at mærke teksten op - fx tekstafsnit (<p>) og overskrifter (<h1>, <h2>...). vigtig tekst (<strong>), fremhævet tekst (<em>) m.v. Tænk over, at den tekst, du skriver skal læses/skimmes på nettet og ikke nærstuderes på et stykke printet papir meningen er, at den skal være en del af dit online visitkort, som giver et hurtigt overblik over, hvem du er og, hvad du kan. Det kan du bl.a. understøtte ved at strukturere teksten i korte overskuelige afsnit. Som eksempel bruger vi her Michael Jacksons hjemmeside:

9 Koden for cv-siden ses nedenfor. Der er kun brugt h-tags og p-tags til at mærke koden op med, men man kunne f.eks. også vælge at bruge strong-tag'et til at markere årstal eller andre tekstelementer som det betydningsmæssigt giver mening at fremhæve som noget særligt

10 i teksten. Læg også mærke til, hvordan koden er sat op i overskuelige afsnit og med tabindrykninger som gør det nemmere at overskue koden og finde ud af hvilke dele af koden der passer til de forskellige afsnit man ser i browseren. I næste delopgave tilføjer vi en punktopstilling Tilføj punktopstilling

11 For at gøre dit CV mere overskueligt kan du benytte dig af punktopstillinger f.eks. til at lave en liste med din uddannelseshistorik eller erhvervserfaring. Der er to former for punktopstillinger, du kan benytte: ordered list (ol) og unordered list (ul). For at lave dem bruger du henholdsvis <ol></ol> og rundt om den tekst, der skal være i punktopstillingen. For hvert punkt i listen bruger du list item (li) ved at næste teksten mellem <li> og </li>. Formen bliver altså (her en unordered list): <li>første punkt</li> <li>andet punkt</li> En ul laver almindelige bullets som standard og en ol laver nummererede punkter. Her et eksempel på punktopstillinger i Michael Jacksons CV. <!DOCTYPE html> <html lang="da"> <head> <meta charset="utf-8" /> <title>michael Jackson CV</title> </head> <body> <article> <h1>cv Michael Jackson</h1> <h2>personlige oplysninger</h2> <p>navn: Michael Jackson, født: 29. august 1958, død: 25. juni 2009</p> <h2>uddannelse</h2> <li>1976: School of Rock.</li> <li>1978: Matematisk student Gary Highschool.</li> <h2>discografi</h2> <h3>albums</h3> <h4>albums udgivet på Motown</h4> <li>1971: Got to Be There</li> <li>1972: Ben</li> <h4>albums udgivet på Epic</h4> <li>1979: Off the Wall</li> <li>1982: Thriller</li>

12 <h3>smash hits</h3> <ol> <li>bad</li> <li>black or White</li> </ol> </article> </body> </html> Punktopstillinger kan bruges til meget mere end blot at opstille tekst, f.eks. er de gode til menuer, da de ligesom alt andet kan styles på alle mulige spændende måder med CSS, som du vil lære senere på kurset Lav links mellem forside og underside Lige nu kan man kun finde dit CV ved at skrive URL'en i browseren, dvs. fx people/dit_brugernavn/cv.html Men det er jo ikke så smart, at man skal kende den præcise adresse inklusiv filnavnet (cv.html) for at finde dit CV, så du skal nu lave nogle links mellem den nye underside og din forside (index.html), som jo vises automatisk i browseren, når man skriver URL'en people/dit_brugernavn/ Her bruger vi igen en punktopstilling starten på en menu! Tidligere prøvede du at lave et link til et eksternt site, kursets hjemmeside. Nu skal du lave et link til en HTML-side, som hører til dit eget site. Derfor behøver du ikke at sende browseren ud på internettet med for at finde din underside. Du kan nøjes med at lave et relativt link ved at angive stien til, hvor din underside er placeret i forhold til den fil, hvor linket er i (din index-side i dette tilfælde). Det foregår altså på samme måde, som da du skulle angive stien til dit billede. For at lave et relativt link skal du bruge <a href= her_skrives_stien ></a> ligesom med eksterne links. Du kan læse om dette i kapitel 6 i bogen og i slides til denne uges forelæsning. <a href = cv.html >Mit CV</a> Vi har lagt cv.html i samme mappe som index.html derfor ser linket således ud: Så simpelt! Da vi gerne vil have linket i en simpel menu lavet med en punktopstilling, tilføjer vi: <nav> <li><a href= index.html >Forside</a></li> <li><a href= cv.html >Forside</a></li> <li><a href= >Kommende menupunkt</a></li>

13 </nav> Læg her mærke til, at <a...></a> placeres inden i <li></li> - for linket er jo netop selve indholdet i det pågældende punkt i listen. <nav>-tagget bruges til at markere vigtig navigation som f.eks. din sides globale navigation. For at gøre det nemmere for brugeren at komme rundt på sitet, skal du selvfølgelig gentage menuen på CV undersiden. For at gøre det, brugeren ser og navigerer igennem konsistent, benytter vi præcis samme menu på alle sider. Her kan du se et eksempel fra Michael Jacksons hjemmeside. <!DOCTYPE html> <html lang="da"> <head> <meta charset="utf-8" /> <title>michael Jackson CV</title> </head> <body> <nav> <li><a href= index.html >Forside</a></li> <li><a href= cv.html >Mit CV</a></li> <li><a href= >Kommende menupunkt</a></li> </nav> <article> <h1>cv Michael Jackson</h1> <h2>personlige oplysninger</h2> <p>navn: Michael Jackson, født: 29. august 1958, død: 25. juni 2009</p> <h2>uddannelse</h2> <li>1976: School of Rock.</li> <li>1978: Matematisk student Gary Highschool.</li> <h2>discografi</h2> <h3>albums</h3> <h4>albums udgivet på Motown</h4> <li>1971: Got to Be There</li> <li>1972: Ben</li> <h4>albums udgivet på Epic</h4>

14 </article> </body> </html> <li>1979: Off the Wall</li> <li>1982: Thriller</li> <h3>smash hits</h3> <li>bad</li> <li>black or White</li> Validering af site Til sidst skal du lære at validere dit site vha. validator.w3.org, så du kan være sikker på, det overholder HTML5 standarden, som er defineret af World Wide Web Consortium (W3C). Det er nu, det kommer til at give mere mening med den ekstra kode, vi har i dokumentets top, da den videregiver alle de nødvendige informationer om f.eks. standard, doctype og encoding til validatoren. Gå ind på validator.w3.org og indtast URLen til den side, du vil validere (www.itu.dk/people/ dit_brugernavn/) Klik på knappen Check. Sitet tjekker din kode og vender oftest tilbage med en rød side og teksten "Errors found while checking this document as HTML5!". Nedenunder vises en en liste over de fejl, den mener at kunne finde, og så må du starte fra en ende af og rette fejlene. Hvorfor validerer min side ikke? Det kan godt i starten virke lidt overvældende, hvis man har mange fejl meddelelser, men tager man en dyb indånding, kan man som regel godt tyde ud af fejlmeddelelserne, hvad der er galt. Og så skal man huske på, at en fejl øverst i dokumentet sagtens kan medføre 20 fejl længere nede. Når den øverste fejl er rettet, forsvinder de andre muligvis af sig selv. Et meget godt billede af HTML5 er som perler på en snor, dvs. når et tag bliver åbnet og ikke lukket igen eller lukket forkert, så vil browseren blive ved med at lede efter det rigtige lukke-tag, og alt indimellem fortolkes måske forkert. Er koden derimod i orden efter standarderne (enten i første hug eller efter rettelser) vil validatoren vise en grøn tillykke-side med teksten "This document was successfully checked as HTML5!". Er koden valideret korrekt, kan man nederst på denne grønne side se to små ikoner. Når din side er valideret korrekt Når det er lykkedes dig at få valideret din side korrekt, skal du kopiere adressen fra linket nederst på validator-siden og indsætte det som et link (<a>) i dine html-filer.

15 Eksempelkode på validator-link <footer> <p><a href="http://validator.w3.org/check? uri=http%3a%2f%2fwww.itu.dk%2fpeople%2fdit-brugernavn%2f">validator</a></p> </footer> 4. Aflevering Din deadline for aflevering er tirsdag den 14. februar 2012 inden kl Du har altså en ca. uge til at poste din hjemmesides link (www.itu.dk/people/dit_brugernavn/) på kursus-bloggen, på den underside der hører til din hjælpelærer. Du poster bare linket som en kommentar. Af din aflevering skal det være synligt, at du har været igennem denne øvelse. Det betyder, at: Øvelsen er udarbejdet individuelt. Du har oprettet tre HTML-sider, lagt dem på ITU s servere og postet en fungerende URL på din hjælpelærers blogside til index.html. Du har tilføjet et billede af dig selv. Du har tilføjet fungerende links i et tekstafsnit. Sitet har mindst to sider - et CV og en forside. Der er indsat links mellem de to sider - altså mellem index.html og cv.html Din HTML-kode er udarbejdet som HTML5 og validerer i overensstemmelse med W3C s standarder.

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

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

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

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

Datalogi HTML Aarhus Katedralskole

Datalogi HTML Aarhus Katedralskole HTML HTML er en forkortelse for HyperText Markup Language og er således et markeringssprog og ikke et programmeringssprog! HTML bruges til at opmærke indholdet på en hjemmeside, og skal ses som en måde

Læs mere

Byg web sider. Introduktion:

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

Læs mere

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

xgalleri Mulige filtyper Installation web-version

xgalleri Mulige filtyper Installation web-version xgalleri xgalleri opstod ud fra ønsket om at lægge en større samling billeder på nettet. Der findes mange programmer, som kan bruges til at lægge datafiler på nettet; men de fungerer typisk på den måde,

Læs mere

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

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

Hjemmeside på SkoleKom

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

Læs mere

Sådan indlægges nyheder på DSqF s hjemmeside trin for trin

Sådan indlægges nyheder på DSqF s hjemmeside trin for trin Sådan indlægges nyheder på DSqF s hjemmeside trin for trin Systemkrav For at kunne bruge Composite kræves: Windows 95 eller nyere (bemærk - kun Windows kan bruges) Browseren Internet Explorer 6.0 eller

Læs mere

Nvu hjemmesider hurtigt og let

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

Læs mere

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold: Sådan opdaterer du din hjemmeside i Wordpress.

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold: Sådan opdaterer du din hjemmeside i Wordpress. Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress. Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet og lægge nyt på din hjemmeside. Guiden er skrevet

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 Wordpress. 1. Log ind på din Wordpress-side. Indhold:

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold: Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress: Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet eller tilføje nyt på din hjemmeside. Guiden er skrevet

Læs mere

Sådan redigerer du en hjemmeside i Umbraco

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

Læs mere

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

IsenTekst Indhold til Internettet. Manual til Wordpress.

IsenTekst Indhold til Internettet. Manual til Wordpress. Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress. Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet eller tilføje nyt på din hjemmeside. Guiden er skrevet

Læs mere

Luvit mini-manual. Kom i gang med Luvit

Luvit mini-manual. Kom i gang med Luvit Luvit mini-manual Januar 2009, Jane Andersen Kom i gang med Luvit Hvad er Luvit? Luvit er et web-baseret it-system, som indeholder et kursus undervisningsmaterialer, øvelser og elektroniske konferencer,

Læs mere

Aktuelle dokumenter på forsiden forsøges opdateret så de senest gældende dokumenter vises.

Aktuelle dokumenter på forsiden forsøges opdateret så de senest gældende dokumenter vises. Skovlunde, 22. marts 2014 kl. 18:26 Foreningens referater, breve, billeder og dokumenter vil næsten altid blive vist korrekt, uanset hvilken browser der benyttes, men i hjemmesidens menuer kan der optræde

Læs mere

3 OPRETTELSE AF SIDER

3 OPRETTELSE AF SIDER 3 OPRETTELSE AF SIDER En af VuptiWebs styrker er muligheden for at oprette forskellige sidetyper og - ikke mindst - sider, som automatisk henter data fra vores administrationsprogram (DOFPro). I første

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

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

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

MANUAL. Siteloom CMS

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

Læs mere

Manual til WordPress CMS

Manual til WordPress CMS Manual til WordPress CMS 1. Log ind på din Wordpress-side For at arbejde på din hjemmeside skal du først logge ind på administrationsdelen. Muligvis har du et direkte link på siden. Ellers er adressen

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

MANUAL. Siteloom CMS

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

Læs mere

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

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

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

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

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

Læs mere

Kapitel 17 Oprette websider:

Kapitel 17 Oprette websider: Kom i gang med... Kapitel 17 Oprette websider: Gemme dokumenter som HTML-Filer OpenOffice.org Rettigheder Dette dokument er beskyttet af Copyright 2005 til bidragsyderne som er oplistet i afsnittet Forfattere.

Læs mere

Google websites. https://sites.google.com. Pædagogiske og didaktiske mål

Google websites. https://sites.google.com. Pædagogiske og didaktiske mål Google websites https://sites.google.com Pædagogiske og didaktiske mål Et værktøj til at samle og dele klassens materialer og noter på ét sted med mulighed for et lækkert layout. Der kan lægges dokumenter

Læs mere

Elevvejledning til SkoleKomNet - Min egen hjemmeside

Elevvejledning til SkoleKomNet - Min egen hjemmeside Indledning...1 Sådan får du adgang...2 Dit KlasseWeb skrivebord Overblik...2 Dit arbejdsområde...3 Din hjemmeside på nettet...3 Sådan laver du en hjemmeside i 4 trin...3 Trin 1 Dit personlige billede på

Læs mere

Installation af WeroShop 2.4 S

Installation af WeroShop 2.4 S 2012 Installation af WeroShop 2.4 S Tommy Westerdahl Christensen Wero Electronics 23-02-2012 Indholdsfortegnelse INDLEDNING... 2 INSTALLATION... 3 GENEREL OPSÆTNING... 8 MOMS OPSÆTNING... 10 BETALINGSFORMER...

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

Aktuelle dokumenter Aktuelle dokumenter på forsiden forsøges opdateret så de senest gældende dokumenter vises.

Aktuelle dokumenter Aktuelle dokumenter på forsiden forsøges opdateret så de senest gældende dokumenter vises. Aktuelle dokumenter Aktuelle dokumenter på forsiden forsøges opdateret så de senest gældende dokumenter vises. Generalforsamlingsreferater Generalforsamlingsreferaterne er kopieret fra foreningens protokoller.

Læs mere

Hjemmeside om elbiler - www.elbiler.nu

Hjemmeside om elbiler - www.elbiler.nu OKTOBER 2013 HØJE-TAASTRUP KOMMUNE Hjemmeside om elbiler - www.elbiler.nu BRUGERVEJLEDNING TIL VEDLIGEHOLDELSE ADRESSE COWI A/S Parallelvej 2 2800 Kongens Lyngby TLF +45 56 40 00 00 FAX +45 56 40 99 99

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

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

Når du har logget dig ind, ser du Randers Kommunes byvåben midt på siden. I venstre side er der en række mapper:

Når du har logget dig ind, ser du Randers Kommunes byvåben midt på siden. I venstre side er der en række mapper: DXP vejledning Generelt: DXP er et værktøj til at fremstille præsentationsmaterialer (foldere, brochurer, løbesedler mv.) DXP egner sig kun til mindre brochurer og lign., da den største skabelon kan rumme

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

Implementeringsvejledning

Implementeringsvejledning Certifikat Certifikat Med og uden gradient #3FBFEF #1A7CA1 Smalt certifikat Med og uden gradient Kan benyttes på steder med begrænset højde Mini certifikat Med og uden gradient Kan benyttes hvis certifikatet

Læs mere

GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE

GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE 2 REDESIGN AF FUTURECOM BUSINESS SOLUTIONS HJEMMESIDE OPGAVEN Den gamle hjemmeside skulles redesignes da den daværende hjemmeside var forældet (indhold og udseende)

Læs mere

IsenTekst Indhold til Internettet. Manual til Wordpress.

IsenTekst Indhold til Internettet. Manual til Wordpress. Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress: Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet eller tilføje nyt på din hjemmeside. Guiden er lavet

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

SIDEN PÅ WORDPRESS.COM

SIDEN PÅ WORDPRESS.COM WordPress WordPress er et fantastisk program til blog og til hjemmesider, hvor du gerne vil kunne rette via din browser. WordPress er meget udbredt og det er derfor nemt at finde fora, templates og hjælp

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

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

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

Læs mere

Installation af WeroShop 2.8

Installation af WeroShop 2.8 2013 Installation af WeroShop 2.8 Tommy Westerdahl Christensen Wero Electronics 01-01-2013 Indholdsfortegnelse INDLEDNING... 2 INSTALLATION... 3 GENEREL OPSÆTNING... 8 MOMS OPSÆTNING... 10 BETALINGSFORMER...

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

IsenTekst Indhold til Internettet. Manual til Wordpress.

IsenTekst Indhold til Internettet. Manual til Wordpress. Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress: Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet eller tilføje nyt på din hjemmeside. Guiden er lavet

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

Danhost Webshop. Bliv fundet på Google

Danhost Webshop. Bliv fundet på Google Danhost Webshop Bliv fundet på Google SEO - Søgemaskineoptimering Når du arbejder med SEO, er det med henblik på, at din hjemmeside eller webshop skal dukke op i søgeresultaterne på f.eks. Google når en

Læs mere

MANUAL TIL FS PÅ NETTET

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

Læs mere

Hvilke felter i GeoEnviron, der benyttes i tilsynsrapporter, er angivet i disse to pdf-filer:

Hvilke felter i GeoEnviron, der benyttes i tilsynsrapporter, er angivet i disse to pdf-filer: TILSYNSRAPPORT FOR LANDBRUG ELLER VIRKSOMHED Med kan I lave omfattende tilsynsrapporter. Begge rapporter skrives i Word med alle data fra GeoEnviron. Data overføres til Word via bogmærker i en prædefineret

Læs mere

Sådan opdaterer og vedligeholder du din hjemmeside i Wordpress.

Sådan opdaterer og vedligeholder du din hjemmeside i Wordpress. Wordpress manual Sådan opdaterer og vedligeholder du din hjemmeside i Wordpress. Dette er en manual til de mest grundlæggende ting og funktioner i Wordpress, så du selv kan redigere indholdet eller tilføje

Læs mere

Indhold... 2 Installation af bannermodulet... 3 Opsætning af bannermodul... 5 Opsætning af bannere... 7 Indsætning af bannermodul på side...

Indhold... 2 Installation af bannermodulet... 3 Opsætning af bannermodul... 5 Opsætning af bannere... 7 Indsætning af bannermodul på side... Banner Side 1 af 8 Indhold Indhold... 2 Installation af bannermodulet... 3 Opsætning af bannermodul... 5 Opsætning af bannere... 7 Indsætning af bannermodul på side... 8 Side 2 af 8 Installation af bannermodulet

Læs mere

bedreweb.dk - Bolette Obbekær 2012 SÅDAN LÆGGER DU WORDPRESS PÅ DIT WEBHOTEL

bedreweb.dk - Bolette Obbekær 2012 SÅDAN LÆGGER DU WORDPRESS PÅ DIT WEBHOTEL SÅDAN LÆGGER DU WORDPRESS PÅ DIT WEBHOTEL TRIN 1: WORDPRESS MAPPEN WordPress er et gratis program, der bruges til at lave hjemmesider og blogs. Du skal downloade WordPress og bagefter lægge det på dit

Læs mere

Indhold. 1 Indledning... 3. 1.1 Kompatible browsere... 3. 2 Log ind i Umbraco... 3. 3 Content-delen... 4. 3.1 Indholdstræet... 4

Indhold. 1 Indledning... 3. 1.1 Kompatible browsere... 3. 2 Log ind i Umbraco... 3. 3 Content-delen... 4. 3.1 Indholdstræet... 4 Indhold 1 Indledning... 3 1.1 Kompatible browsere... 3 2 Log ind i Umbraco... 3 3 Content-delen... 4 3.1 Indholdstræet... 4 3.2 Ændring af indhold... 5 3.3 Tilføjelse af en side/sektion... 6 3.4. At arbejde

Læs mere

Umbraco. Brugerdokumentation

Umbraco. Brugerdokumentation 2 Umbraco Brugerdokumentation Indholdsfortegnelse Generel dokumentation... 3 Hvordan logger jeg ind i CMS et?... 3 Sidertyper... 3 Content... 3 Forside... 3 Sektionsforside... 3 Artikel... 3 Servicemappe...

Læs mere

Karens vejledning til WordPress, september 2014 1

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

Læs mere

Velkommen til IT for let øvede

Velkommen til IT for let øvede Velkommen til IT for let øvede at dias ligger på hjemmesiden, så I kan se dem igen hjemme. Peter har ordet Blev vi færdige med vinduerne?? Øvelse tastatur og mus vi ikke kunne sidste gang får I som hjemmeopgave

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

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

Administration af subsites BRUGERVEJLEDNING FOR ADMINISTRATOREN

Administration af subsites BRUGERVEJLEDNING FOR ADMINISTRATOREN Administration af subsites BRUGERVEJLEDNING FOR ADMINISTRATOREN Indholdsfortegnelse Introduktion... 2 Definitioner... 2 Generelt... 3 Oprettelse af en skabelon... 4 Sidetypeskabeloner... 5 Globale displaymoduler...

Læs mere

Upload af billeder til hjemmesiden m.m.

Upload af billeder til hjemmesiden m.m. Upload af billeder til hjemmesiden m.m. Fremgangsmåde VVS-inst.dk Upload af billeder m.m., Side 1 Så går vi i gang Åben Firefox browseren Gå ind på denne adresse, for at komme til hjemmeside programmet.

Læs mere

Her ser du dit arbejde i preview undervejs og udgiver dit arbejde når du er færdig. (se side 4)

Her ser du dit arbejde i preview undervejs og udgiver dit arbejde når du er færdig. (se side 4) Sitecore vejledning Hvad er det? Sitecore er det program, den officielle del af Spejdernet laves i. Sitecore er et Content Management System, dvs. indholds-håndteringssystem til hjemmesider. Hvordan starter

Læs mere

Du kan også bruge Dropbox sammen med din Iphone, Android telefon eller anden smartphone.

Du kan også bruge Dropbox sammen med din Iphone, Android telefon eller anden smartphone. Dropbox Introduktion til Dropbox Dropbox er en online tjeneste, hvor man ganske gratis kan få noget lagerplads til sine dokumenter, billeder og meget mere. Der er mange muligheder med Dropbox, som bliver

Læs mere

Qbrick s krav til video filtyper

Qbrick s krav til video filtyper Indhold Qbrick s krav til video filtyper... 1 Krav til ordningen/området... 1 Qbrick s krav til video leverandør... 1 Video og billede størrelser i WCM:... 1 Upload en video... 2 Trin 1: Mediefiler...

Læs mere

Manual til Sitecore Institutions- og projekthjemmesider Silkeborg Kommune, 16. september 2013

Manual til Sitecore Institutions- og projekthjemmesider Silkeborg Kommune, 16. september 2013 Manual til Sitecore 1 VELKOMMEN Silkeborg Kommune bruger systemet Sitecore til at opbygge hjemmesider i. Institutions- og projekthjemmesider er bygget op over en fast skabelon med et fast design. Der er

Læs mere

Webside score simmi.it

Webside score simmi.it Webside score simmi.it Genereret August 01 2015 12:13 PM Scoren er 45/100 SEO Indhold Titel SIMMI - TORINO - Bomboniere, Sacchettini, Tipografia, Accessori, Confettate, Fardamè, per le Nozze, Længde :

Læs mere

Vejledning for LOF s afdelingshjemmeside

Vejledning for LOF s afdelingshjemmeside Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco Marts 2012 Adresse: http://dinafdeling.lof.dk/ Rediger hjemmeside i Umbraco: http://dinafdeling.lof.dk/umbraco/ Mobilside: Der er lavet en

Læs mere

PHP Crash course. Databaser

PHP Crash course. Databaser PHP Crash course Databaser PHP Intro PHP er et server scripting sprog der kan bruges til at lave aktivt indhold på hjemme sider. Der er to betingelser som skal opfyldes for at serveren fortolker PHP koden.

Læs mere

En kort og sigende overskrift (Overskrift 1) Arial 16 + fed

En kort og sigende overskrift (Overskrift 1) Arial 16 + fed En kort og sigende overskrift (Overskrift 1) Arial 16 + fed - eventuelt en uddybende undertitel (Undertitel) Arial 14, mellemrum før: 6 pkt, mellemrum efter: 3 pkt (bemærk at undertitler er venstrejusteret)

Læs mere

Velkommen til MODx kursus

Velkommen til MODx kursus Velkommen til MODx kursus Dette er en gennemgang af den mest basale funktionalitet i vores nye hjemmeside redigerings værktøj. MODx er et meget simpelt CMS (Content Management System), der gør det muligt

Læs mere

Fronter for elever - Første undervisning

Fronter for elever - Første undervisning Fronter for elever - Første undervisning Fronter for elever - Første undervisning 1 Kom godt i gang 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 1.10 1.11 0) Nulstille unilogin i UMS - (Elev) 4 1) Logge på Fronter

Læs mere

Sådan opretter du en elektronisk aflevering

Sådan opretter du en elektronisk aflevering Sådan arbejder du med opgaver i Gradebook/karakterbog Denne vejledning indeholder en detaljeret beskrivelse af hvordan du bruger gradebook/karakterbogen når du vil arbejde med opgaver og give karakterer

Læs mere

Weebly- vejledning. Lav din egen hjemmeside let og smertefrit

Weebly- vejledning. Lav din egen hjemmeside let og smertefrit 1 Weebly- vejledning Lav din egen hjemmeside let og smertefrit 1. Gå ind på flg. adresse: www.weebly.com 2. Opret dig som bruger (gratis): 2 3. Kom godt i gang: For at komme i gang med 1. side skal du

Læs mere

Guide til Umbraco CMS

Guide til Umbraco CMS web Guide til Umbraco CMS Indhold Indledning 3 Kompatible browsere 3 Log ind i Umbraco 4 Content-delen 5 Indholdstræet 5 Tilføjelse af en side/sektion 7 Sortering af indhold 12 Galleri 14 Mediebibliotek

Læs mere

Google Apps. Lær at oprette, organisere, dele og slette dokumenter. Udarbejdet af PLC, version 2013!!!!!!! Side 1 af 9

Google Apps. Lær at oprette, organisere, dele og slette dokumenter. Udarbejdet af PLC, version 2013!!!!!!! Side 1 af 9 Lær at oprette, organisere, dele og slette dokumenter. Udarbejdet af PLC, version 2013!!!!!!! Side 1 af 9 Arbejde i faner Google Apps arbejder i faner, derfor er det vigtigt, du er bekendt med det. Mappen

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

MANUAL. Siteloom CMS MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 3. september, 2012 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 8 2. Sider... 10 2.a Opret side...

Læs mere

Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco

Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco Adresse: http://dinafdeling.lof.dk/ Rediger hjemmeside i Umbraco: http://dinafdeling.lof.dk/umbraco/ HUSK ingen www i adressen, skriv blot

Læs mere

Google Søgninger side 1 af13

Google Søgninger side 1 af13 Google Søgninger side 1 af13 Indholdsfortegnelse Internetforkortelser og adresser m.m.... Side 2 Søgning i Google... Side 4 Nyhed erstatning for det sorte bånd... Side 7 Avanceret søgning... Side 10 Flere

Læs mere

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

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

Læs mere

[jobsøgende] sådan gør du... [søg job via jobnet.dk]

[jobsøgende] sådan gør du... [søg job via jobnet.dk] [jobsøgende] sådan gør du... [søg job via jobnet.dk] Søg jobbet via Jobnet Du kan se ledige job på Jobnet.dk, og når du har fundet en stilling, kan du søge den. Er der i søgeresultatlisten ved annoncens

Læs mere

PHP kode til hjemmeside menu.

PHP kode til hjemmeside menu. PHP kode til hjemmeside menu. Home Hovedmenu 1 Hovedmenu 2 Hovedmenu 3 Hovedmenu 4 Undermenu 1 Breadcrumb Her vises indholdet af den valgte side Undermenu 2 Undermenu 3 Undermenu 4 Evt. en mulighed for

Læs mere

Tidsregistrering. Jacob E., Jacob H., Mathias, Mads H., Jonatan og Dan 3.4. Informationsteknologi B. Roskilde Tekniske Gymnasium 25-11-2014

Tidsregistrering. Jacob E., Jacob H., Mathias, Mads H., Jonatan og Dan 3.4. Informationsteknologi B. Roskilde Tekniske Gymnasium 25-11-2014 2014 Tidsregistrering Jacob E., Jacob H., Mathias, Mads H., Jonatan og Dan 3.4 Informationsteknologi B Roskilde Tekniske Gymnasium 25-11-2014 Indholdsfortegnelse 1 Indledning... 3 2 User stories... 3 3

Læs mere

Redaktørmanual TYPO3. LinkFactory TYPO3 MANUAL

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

Læs mere

A*Web 1.0 Webredaktør kursus

A*Web 1.0 Webredaktør kursus A*Web 1.0 Webredaktør kursus Assist PC Instruktører ApS Præstevænget 45 2750 Ballerup 4466 0174 4466 0107 Internet www.assist-pci.dk assist@assist-pci.dk Indholdsfortegnelse Indholdsfortegnelse...2 Quick

Læs mere

Siteloom manual for Comwells webredaktører

Siteloom manual for Comwells webredaktører Siteloom manual for Comwells webredaktører Generelt Hvad er SL: SiteLoom er redigeringsprogrammet bag comwell.com websitet, som gør det muligt for folk uden programmeringskundskaber, at redigere og tilføje

Læs mere

Afsnittet er temmelig teoretisk. Er du mere til det praktiske, går du blot til det næste afsnit.

Afsnittet er temmelig teoretisk. Er du mere til det praktiske, går du blot til det næste afsnit. Afsnittet er temmelig teoretisk. Er du mere til det praktiske, går du blot til det næste afsnit. XML (eng. extensible Markup Language) XML er en måde at strukturere data på i tekstform. På samme måde som

Læs mere

Photoshop fortsat: Genskab en webside.

Photoshop fortsat: Genskab en webside. Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Photoshop fortsat: Genskab en webside. 1. Lidt om hvad du har lært Sidste gang prøvede du at arbejde med nogle basale

Læs mere

Patient Database - Manual

Patient Database - Manual Patient Database - Manual Side 1 af 36 Adgang til systemet... 4 Glemt brugernavn og kode... 4 Opret projekt (kun System Administrator)... 6 Klik på NYT PROJEKT -knappen øverst til venstre.... 6 Udfyld

Læs mere