Om styles / typografier / typografiark / stylesheets
|
|
|
- Børge Lauritzen
- 8 år siden
- Visninger:
Transkript
1 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 det er meget mere præcist. HTML er et struktur-sprog - og CSS er et layout-sprog. Oprindeligt altså da HTML blev opfundet var HTML et rent struktur-sprog. Det vil sige at man med HTML udelukkende kunne strukturere en tekst ved at sige Dette er en overskrift Dette er et tekstafsnit Dette er en tabel osv. ved at bruge <h1>, <p> og <table>. Og det kan man stadig. I har nu set på en række af disse HTML-tags (HTML- markører), som beskriver hvorvidt givne elementer på en webside skal opfattes som en overskrift, et link til en anden side, et billede, et tekstafsnit, en tabel,.. osv. Til nogle af disse markører (tags) har vi også knyttet enkelte attributter, der piller ved sidens eller tekstens udseende (layout og præsentation) som fx: <body bgcolor= blue > </body> <td bgcolor= red width= 70% > </td> <b>ingredienser</b> osv. Disse er eksempler på, at når folk præsenterer noget information vil de også gerne kunne give det et personligt præg. Så hurtigt efter HTML s fremkomst opstod ønsket om, at man på websiderne kunne benytte varierende skrifttyper, størrelser og farver forskellige steder på en side. Og det førte til indførelsen af typografier (på engelsk Styles) CSS. CSS blev opfundet for at give webside-designere flere muligheder for layout og samtidigt kunne beholde HTML som et struktur-sprog. Det er oftest mere enkelt at styre, hvis man sørger for at adskille indhold og layout. Med Styles og især typografi-ark kan man samle layout på ét (eller nogle få) steder. Om typografi CSS 1
2 Man kan påvirke en teksts udseende (give den typografi) på flere måder: 1) Ved hjælp af STYLE-attributen som de fleste HTML-markører har. 2) Man kan definere sine styles i toppen af siden i en STYLE-tag (Style-markør) hvilket er en fordel, hvis man skal bruge de samme typografier (styles) flere steder på en web-side. 3) Man kan definere sine styles i et selvstændigt dokument, så flere web-sider kan benytte samme style (layout). I det følgende vil det trin for trin blive vist, hvordan man gør i hvert af de tre tilfælde nævnt ovenfor. 1) Typografi ved hjælp af STYLE-attributen, som de fleste HTML-tags har. (Lokalt style / inline style) Eksempel: <p style= color:blue; font-family:arial; font-size:10px > Dette afsnit er skrevet med blåt. <br /> Vi har tilføjet en style-attribut til p-koden, som omkranser et afsnit. </p> <h1 style= color:red; font-size:2cm > h1-overskriften her skrives med rødt. </h1> I eksemplet ovenfor angives skriftstørrelsen i pixels (px). Man kan også bruge punkt (pt) eller centimeter (cm) eller millimeter (mm). Det bedste for brugeren vil være, hvis man angiver en procent forhold til standard-størrelsen (fx 75%). Man behøver jo ikke at angive en font-størrelse. Style-attributtens værdi er en tekst-streng, derfor begynder og slutter den med gåseøjne. Imellem disse opremses så de forskellige egenskaber adskilt af semikolon (;) Der sættes kolon (:) mellem egenskaben og dennes værdi. Meget ofte benyttede egenskaber er (HUSK at bindestregen i egenskabs-betegnelsen er vigtig!): color background-color font-family font-size tekstfarven baggrundsfarven skrifttypen skriftstørrelse Se flere egenskaber og deres mulige værdier i appendix A Opgave 1: Giv dit eget helt personlige præg til teksten på den udleverede webside, ved at indføre styleattributten i de forskellige koder. Gør gerne din side farvestrålende. Gem resultatet under et nyt navn. Om typografi CSS 2
3 2) Man kan definere sine styles i toppen af web-siden i en STYLE-tag (Globalt style) hvilket er en fordel hvis man skal bruge de samme typografier flere steder på en web-side. En globalt style defineres i HEAD-delen i en STYLE-tag: Eksempel: <html> <head> <title>global styles</title> <style type= text/css > body {color:blue; font-size:6mm} h1 {font-size:12mm; color:green} p {color:black; background-color:yellow} </style> </head> <body> Normal tekst er blå og.. </body> </html> Opgave 2: Indfør det ovenfor nævnte globale style på den side du tidligere har fået udleveret Betragt resultatet. Gem så siden under et andet navn, så du har flere versioner liggende. Eksperimenter nu selv med at ændre på eller tilføje i det globale style. Gem et eller flere af dine resultater til eventuelt senere brug. OBS: Generel syntax for angivelse af globale og eksterne Styles (hentet fra html.dk): Om typografi CSS 3
4 3) Man kan definere sine styles i et selvstændigt dokument (Eksternt stylesheet / typografiark) - så flere web-sider kan benytte samme layout. Eksempel: Lav en fil og giv den fx flg. navn minstyle.css og den kan så fx have følgende indhold: Her er så din webside: /*Mit eksterne stylesheet*/ body {color:darkblue; font-family:courier; font-size:6mm; background-color:lightblue } h1 {font-family:arial; line-height:3cm; color:green } p {color:black; background-color:yellow } <html> <head> <title>brug af eksternt stylesheet </title> <link rel= StyleSheet href= minstyle.css type= text/css /> </head> <body> Her står din tekst. </body> </html> Filen med dit typografiark (stylesheet) skal i dette eksempel ligge i samme mappe som de websider, der bruger det. Alternativt skal hele stien til typografiarket stå i referencen, ganske som du kender det fra billeder mm. Hvis alle web-sider skal have nyt udseende, er det nu nok at ændre i filen minstyle.css. Opgave 3: Se på web-kogebogen.. og mulighederne heri. Om typografi CSS 4
5 Reglernes hierarki (kaskade-princippet) Du kan komme ud for at skulle/ville bruge alle tre typer stylesheets i samme HTML-dokument. I det tilfælde skal du først i dokumentet skrive den linie, der kalder det eksterne stylesheet. Derefter følger STYLE-tags, hvori det globale stylesheet bliver erklæret. Hvis der er modstridende erklæringer mellem disse to stylesheets, vil det være reglerne i det globale, som gælder, fordi det er erklæret senest. Hvis der senere i HTML-dokumentet kommer nogle inline styles (interne stylesheet), vil det være det, der gælder (og kun inden for de tags, hvor de er erklæret). Inline/interne Styles skrives i selve HTML-dokumentet, dér hvor man har brug for dem. Metoden benyttes når man ønsker at indføre enkelte undtagelser eller tilføjelser til de generelle regler, som er beskrevet i et eksternt eller globalt CSS. Der gælder altså at den style-erklæring, der er placeret tættest på den konkrete tekst, er den der kommer til at gælde. Når du selv vil fremstille en CSS-fil. Det er som altid en god ide at gå systematisk frem når man arbejder med disse ting. Her er en arbejdsgang du med fordel kan benytte, når/hvis du vil fremstille et eksternt stylesheet: 1. Start med at lave et dokument med et globalt stylesheet. Når det fungerer, som du vil have det til, er du klar til at gå videre. 2. Marker og kopier alle erklæringerne mellem STYLE-taggene. Du skal ikke have STYLEtaggene med, kun alt hvad der står imellem dem. 3. Åbn en ny side og kopier/paste indholdet af stylesheetet ind på den (se side 4). 4. Gem dette i en fil med efternavnet (extension) css. Fx minstyle.css. 5. Inden du prøver at kalde det eksterne stylesheet, skal du slette erklæringerne i dit HTMLdokument: Altså alt det du kopierede over i minstyle.css. Style-taggene skal også slettes. 6. I HEAD-afsnittet indsættes følgende linie der, hvor STYLE-taggene var. Den eksterne cssfil hedder her minstyle.css, og hvis den ligger i samme mappe som HTML-dokumentet, så skal begyndelsen af HTML-dokumentet se sådan ud: <head> <title> </title> <link rel= stylesheet type= text/css title= en forklarende titel href= minstyle.css /> </head> Om typografi CSS 5
6 Litteratur: Findes på Vi vil især koncentrere os om nedenstående Lektioner enkelte dog kun i uddrag. HTML.dk à CSS Tutorial Af Jonas Astrup, HTML.dk Indhold: Introduktion Om hvad du kan forvente at lære, og hvilke forudsætninger der kræves for at benytte tutorialen. Lektion 1: Hvad er CSS? Lidt om baggrunden for CSS, og hvorfor det er smart at bruge CSS fremfor HTML til layout og design. Lektion 2: Hvordan fungerer CSS? Vi kigger på den grundlæggende syntaks og laver vores første stylesheet. Lektion 3: Farver og baggrunde I denne lektion vil vi kigge nærmere på muligheder for at benytte farver, baggrundsfarver og baggrundsbilleder. Lektion 4: Fonte Denne lektion handler om de mange muligheder CSS giver for at specificere fonte og font familier. Lektion 5: Tekst Om hvordan man tilføjer layout til tekst, f.eks. justeringer, dekorationer, m.v. Lektion 6: Links Om hvordan man arbejder med pseudo-classes og links - herunder forskellige effekter. Se flere CSS-egenskaber her: Om typografi CSS 6
7 Appendix A: Kort oversigt over ofte benyttede Style-egenskaber og (nogle af) deres mulige værdier: Color : Farve-navn eller hexværdi Background-color : Background-image : url(.. ) [I parentesen skal stien til billedfilen stå] Background-repeat : no-repeat, repeat, repeat-x, repeat-y Font-family : arial, verdana, courier,., serif, sans-serif, monospace Font-size : px, pt, mm, cm Text-transform : normal, uppercase, lowercase, capitalize Text-align : default, right, left, center.. Og der findes mange flere. Når en egenskab ikke nævnes, så vælger browseren en standard-værdi (default-værdi). Denne standardværdi vil variere fra browser til browser. Om typografi CSS 7
Tillykke Med Fødselsdagen
HTML & CSS 1 Tillykke Med Fødselsdagen All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register
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
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
Denne artikel er til dem der ønsker at vide mere om hvad CSS er og hvad CSS kan bruges til hvad angår WWW.
Denne guide er oprindeligt udgivet på Eksperten.dk CSS - en gennemgang Denne artikel er til dem der ønsker at vide mere om hvad CSS er og hvad CSS kan bruges til hvad angår WWW. Der er lidt CSS historie
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
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.
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
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
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
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.
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
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
CSS CSS er en forkortelse for Cascading Style Sheets. CSS er et sprog som bruges til at definere layout på fx HTML-dokumenter.
CSS CSS er en forkortelse for Cascading Style Sheets. CSS er et sprog som bruges til at definere layout på fx HTML-dokumenter. HTML var oprindeligt tænkt som et rent struktur-markeringssprog, der eksempelvis
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
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
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
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,
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
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
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
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
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
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
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
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.
Velkommen til manualen for Styleclasses Introduktion til Styleclasses Rediger styleclass
14.2.0 Velkommen til manualen for Styleclasses 1 14.2.1 Introduktion til Styleclasses 1 14.2.2 Ny styleclass 1 14.2.3 Rediger styleclass 2 14.2.3.1 Custom 3 14.2.3.2 Setup 3 14.2.3.3 Slet 4 14.2.4 Problemer
Ø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
CSS fortsat: Boksmodel, floating & positionering
Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 4, individuel øvelse CSS fortsat: Boksmodel, floating & positionering 1. Lidt om hvad du har lært Du har i øvelse
Ø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
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.
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
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...
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
Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN
2015 Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN I denne tutorial kommer du til at I denne tutorial vil du lære hvad Bootstrap er, hvordan det fungerer og hvordan
Forslag til arbejdsgang ved tilrettelæggelse af en WebQuest
Forslag til arbejdsgang ved tilrettelæggelse af en WebQuest Ressourcer på webstedet: http://lotte.udsen.person.emu.dk Få ideer fra webstedets "Samlinger af WebQuests". Udfyld det vedlagte arbejdsark. (Dvs.
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.
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
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
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.
Word. Strukturering, henvisninger m.m.
Word Strukturering, henvisninger m.m. August 2015 Strukturer dokumentet I kan tildele de forskellige dele af teksten, specielt afsnitsoverskrifter, forskellige niveauer, vha. typografi-paletten 2 Strukturer
Superskolernes kampagne
Superskolernes kampagne Projekt i Kommunikation/IT Roskilde Tekniske Skole Side 1 af 12 Indhold Indledning... 3 Målgruppeanalyse - Kanylemodel... 4 Begrundelse for valg af medie... 5 Grovskitsering...
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
Sitecore - basisvejledning Version 2. September 2010
Sitecore - basisvejledning Version. September 00 Sådan opretter du en ny artikelside... Sådan omdøber du et artikelnavn så du får vist æ,ø og å... Sådan udgiver (publiserer) du nyt eller redigeret indhold...4
Cecilie Maria Nielsen, Mathias Fornitz Eriksen og Martin Arnetoft klasse 1.6 07-05-2010
ROSKILDE TEKNISKE GYMNASIUM Eksamensopgave Kommunikation/it Cecilie Maria Nielsen, Mathias Fornitz Eriksen og Martin Arnetoft klasse 1.6 07-05-2010 Vi har valgt at beskæftige os med opgave 1 fra oplæget.
Oversigt HTML5 nye tags til sideopbygning
HTML5 er udviklet af WHATWG Oversigt HTML5 nye tags til sideopbygning (Web Hypertext Application Technology Working Group) En
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
Administration - Wordpress 2014-07-02. Administration - Wordpress
Administration - Wordpress 1 Indholdsfortegnelse Wordpress CMS-system... 4 Wordpress administration... 4 Video-manualer til Wordpress... 4 Wordpress Support... 4 Manual Traeinfo.dk og Traeguiden.dk...
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
Manual til Vandværksløsninger
Intro Hjemmesidens opbygning 1 Manual til Vandværksløsninger 1. Intro Hjemmesidens opbygning Intro Hjemmesidens opbygning 2 Hjemmesidens opbygning, som brugeren ser den Intro Hjemmesidens opbygning 3 Siden
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
Vejledning i opbygning af Tillidszonen
Vejledning i opbygning af Tillidszonen Vejledning til FOAs lokale afdelinger i opbygningen af deres del af Tillidszonen FOA Fag og Arbejde Januar 2006 1 Indholdsfortegnelse Forbunds- og afdelingsdel...3
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
21-05-2008 Side 1 af 7
-05-008 Side af 7 Grundlæggende funktioner i billedbehandling. NB! Arbejd på en kopi af dit billede, så du altid har det oprindelige liggende, hvis noget skulle gå galt.. Ændring af billedstørrelse i IrfanView
I gang med Adobe Muse CC
I gang med MUSE Muse er et program fra Adobe til fremstilling af websites, for de som ikke ønsker at arbejde med koder. De fremstillede websites baserer sig naturligvis på HTML, CSS, Javascript mm., du
Forståelse for grafisk workflow
2 Forståelse for grafisk workflow I designet af den trykte bog har jeg haft et vågent øje til de overvejelser og design problematikker det medfører at bogen skulle klare at laves til en E-bog. Her vil
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,
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
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
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
Kaptajn Johnsens Skole 7.B - En perspektivtegning af en perspektivtegning Forskningens Døgn - 25. April 2008
Fig. 13) Inden vi gemmer vores billedplan-model skal du tegne tre nye lange streger i forlængelse af sigtelinierne. Læg mærke til alle de oplysninger SketchUp nu giver dig. Tegn fra Midpoint og Parallel
STEPS GIANT. GIANT STEPS jazz orchestra. Klasse: tr09mul02. Maria Ekelund, Stephanie Rosborg, Rasmus Seye og Thomas Riis
Klasse: tr09mul02 STEPS GIANT j a z z o r c h e s t r a Indholdsfortegnelse 1.0 Problemformulering 1.1 Tidsplan 1.2 Wireframe 1.3 Flowchart 2.0 Research 2.1 Begrundelse for design 2.2 Logo 3.0 Generelt
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
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
Vejledning til Blackboards portfolio værktøj
Vejledning til Blackboards portfolio værktøj Brug denne vejledning, når du skal udarbejde din undervisningsportfolio i Blackboards portfolio værktøj. Ved at følge alle trinene nedenfor får du udarbejdet
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
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;
Beginning CSS and Web Development kap. 1 11
Beginning CSS and Web Development kap. 1 11 Plan Xhtml opbygning CSS Divs, class, id Baggrunde, farver og billeder Tekst Links Lister Tabeller Stand up programmering Xhtml vs. html i XHTML skal alle elementer
Oplæg hjemmesideløsning kun for NORDLYS medlemmer i samarbejde med Attraktia
Oplæg hjemmesideløsning kun for NORDLYS medlemmer i samarbejde med Attraktia Selve løsningen Kom bedst fra start Kom nemt, hurtigt og billigt i gang med en ny hjemmesideløsning, som er baseret på ét af
StarOffice. OpenOffice. Tekstdokument. Globe
Tekstdokument Af Tina Christensen StarOffice OpenOffice 7 6 Vejledning til et gratis tekstbehandlingsprogram Grundig gennemgang Omfattende opslagsværk Dækker både dansk og engelsk version forlaget Globe
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.
Webudvikleruddannelsen
En Introduktion til, HTML og CSS Indhold Webudvikler uddannelsen Techcollege Aalborg Internettet, Short story. Hvad er HTML? Basic HTML? Om HTML Tags Tekster i HTML Mere om tekster i HTML STYLING FONTS
Indholdsfortegnelse. Forord
Indholdsfortegnelse Forord i Indholdsfortegnelse iii Indledning ix 1. Introduktion til HTML 1 Websider laves med HTML 2 Websider læses med en browser 2 Browserspecifikke markører 3 HTML-dokumentet 4 Hvad
Præsentationsportfolio for Hovedforløb 1. Kongens Folk hjemmeside
Præsentationsportfolio for Hovedforløb 1 Kongens Folk hjemmeside Opgaven Jeg skal lave en ny hjemmeside til foreningen Kongens Folk. De har en gammel hjemmeside der skal fornyes. De ønsker en side, der
fotografisk kommunikation
XDANMARKS MEDIE- OG JOURNALISTHØJSKOLE CAMPUS KØBENHAVN Forprøve 2016 fotografisk kommunikation 1/2 Professionsbacheloruddannelsen i Visuel Kommunikation Studieretning: Fotografisk Kommunikation Del 1:
4 ARBEJDE MED SEKTIONER
4 ARBEJDE MED SEKTIONER Sektioner er en ny måde at vise indhold på. I bund og grund handler det om, at vi opdeler en side i en eller flere sektioner, som kan vise indhold på en række forskellige måder.
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
Indlæs Beretning på www.deberejstesklub.dk
Indlæs Beretning på www.deberejstesklub.dk www.deberejstesklub.dk Log ind som medlem. Opret indhold Beretning Nedenstående giver en beskrivelse til oprettelse af en rejseberetning. Visse af felterne er
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å
HO L DT. Where ideas makes history. Kenni Holdt Hovedforløb 1 Aarhus Tech www.w imh.dk
HO L DT Where ideas makes history Kenni Holdt Hovedforløb 1 Aarhus Tech www.w imh.dk Typografi & Ombrydning Opgave: 4-sidet artikel om Ken Hammer målgruppe Målgruppen for denne folder er hovedsageligt
Konstruktion af websites - 1. kursusgang Øvelse 1 opsætning af tekst
Konstruktion af websites - 1. kursusgang Øvelse 1 opsætning af tekst Lav ved hjælp af teksteditor og browser en webside, der indeholder elementer som den herunder - tilføj desuden din udgave af hjemmeside
Active Builder - Brugermanual
Active Builder - Brugermanual Version: Release 2.0 Sprog: Dansk Copyright 2014 - Talk Active ApS INDHOLDSFORTEGNELSE INDHOLDSFORTEGNELSE... 2 1. HURTIGT OVERBLIK... 4 1.1 Vælg URL:... 4 1.2 Vælg en skabelon:...
grafisk workflow Frank winding
grafisk workflow Frank winding redegørelse Opgaven Byg & Bo stod foran årets byggeudstilling 2015, og min arbejdsgiver JUGEL&CO skulle stå for alt markedsføring, medieplanlægning og kommunikation. Mit
Jobcenter Vinduet. Version 01.00 Light 2014
Jobcenter Vinduet Version 01.00 Light 2014 Styrelsen for Arbejdsmarked og Rekruttering 2014 Jobcenter vinduet Jobcenter vinduet giver mulighed for, at det enkelte jobcenter kan kommunikere direkte til
IntraWeb med SkoleKom Version 2.1, april 2003 Brugervejledning Tilrettelæggelse & indhold via FirstClass Klient version. 7.*
IntraWeb med SkoleKom Version 2.1, april 2003 Brugervejledning Tilrettelæggelse & indhold via FirstClass Klient version. 7.* Indhold 1 Indledning og læsevejledning... 3 1.1 Indholdsleverandører og administratorer...
Webmaster Sweet-Swing.dk Websidens opbygning. Som eksempel er brugt siden om korets målsætning som den vises i editoren.
Opbygning Som eksempel er brugt siden om korets målsætning som den vises i editoren. I editoren vises tabellinierne, selvom de på den færdige side i vores tilfælde er usynlige, bortset fra den sorte ramme
Flettebreve og Doc2mail
Flettebreve og Doc2mail Denne vejledning beskriver hvordan du kan sende flettebreve via Doc2mail. I vejledningen er der vedlagt en række skabeloner du kan benytte til dette. Vejledningen er rettet mod
Indholdsfortegnelse. Designmanual Borsen.dk 1. Farver 01. Fonte 02. Ikoner og knapper 03. Menuen 04. Bannere 05. Generelle mål 06. Grafikelementer 07
Indholdsfortegnelse Designmanual Borsen.dk 1 Introduktion..................................................... 02 Farver 01 Fonte 02 Ikoner og knapper 03 Menuen 04 Bannere 05 Generelle mål 06 Grafikelementer
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
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
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
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
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
Hjælp til BoD easyeditor
Hjælp til BoD easyeditor 1 TEKST 1.1 Indholdsfortegnelse og kapitler 1.2 Opret og foretag ændringer i nyt kapitel 1.3 Skriv/tilføj 1.4 Formatering/udformning 1.5 Yderligere funktioner 2 BILLEDER 2.1 Upload
workflow Programmer: Om opgaven: Kvalitetsvurdering: Afsender: Modtager: Cathrine Laulund Web: Dreamweaver Billedbehandling: Photoshop
Om opgaven: For et halvt år siden overtog nogle bekendte værtshuset Midtskiws i Skive. De havde derfor brug for en ny hjemmeside, som kunne fungere som et online informationssted og visitkort for deres
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å
Kort brugervejledning til Vindsiden
Kort brugervejledning til Vindsiden Vejledningen beskriver kun de mest anvendte funktioner, og er meget kortfattet. Vejledningen udvides efterhånden, som der sker ændringer i sidens opbygning og/eller
Anklagemyndighedens Vidensbase
Anklagemyndighedens Vidensbase Indhold 1 OM DENNE VEJLEDNING... 2 2 LOGIN... 3 3 SØGNINGER... 4 3.1 SØG EFTER DOKUMENTER... 4 3.2 NAVIGÉR DIG FREM... 5 3.3 KOMBINÉR SØGNING OG NAVIGATION... 6 3.4 VISNING
Redigering i Windows Movie Maker
Redigering i Windows Movie Maker Fotografen har oprettet en mappe på skrivebordet som hedder ledelses udvikling. I den nyoprettede mappe har han placeret den videofil som du skal arbejde med. Nu skal du
ASB E-mailsignatur. ASB E-mailsignatur. Vejledning til opsætning af e-mailsignatur IKT - Februar 2008
ASB E-mailsignatur I det følgende forklares, hvordan du opretter ASBs e-mailsignatur for medarbejdere. Det skal her noteres at e-mail signaturen ikke kan opsættes i webmail (webmail.asb.dk), men skal opsættes