- nedarvning med selektorer
|
|
- Andreas Bonde
- 8 år siden
- Visninger:
Transkript
1 Nedarvning Du styler som bekendt dit indhold med mange forskellige selektorer. De mest almindelige er class, id, tag men du kan også gruppere selektorer f.eks h1, h2, h3, p, a, img {font-family: Verdana, Geneva, sans-serif; At style tags inden i andre tags Her skal du bruge et system der hedder nedarvning, og med dette system kan du formatere et tag på baggrund af dets forhold til andre tag. Nedarvning er baseret på The Family Tree, som du her ser et diagram over. HTML-taget er det tag alle andre tag nedstammer fra, og kaldes derfor ancestor(stamfader). Head-taget og body-taget kaldes descendent(efterkommer), af det foranstående tag. Ancestor ( stamfader ) Et html-tag som omkrandser et andet tag er hermed stamfader Descendent ( efterkommer, nedstamme ) Et tag inden i et eller flere tag er efterkommer at disse tag, hermed er <title> efterkommer af <head> samt<html> Parent ( forældre ) Et forældre-tag er det nærmeste og tætteste tag fra et andet tag. Et forældre-tag er det første tag direkte forbundet med og over et andet tag. I eksemplet er head-taget <head> parent til <title> Child (barn ) Et tag som er direkte omkrandset af et andet tag. I diagrammet er <p> child af <body> men <strong> er ikke Sibling ( søskende ) Tags som er children af det samme tag, er siblings, ligesom søskende og brødre I diagrammet står siblings tag ved siden af hinanden, og forbundet til den samme forældre, Side 1
2 her <li> Du skaber en descendent selector ved at starte med den ældste ancester. Også forklaret med at du starter med den yderste selektor og bevæger dig indad eller nedad, startende med den ældste selektor længst til venstre og herefter bevæger du dig mod det tag som er målet længst til højre Eksempel: #left ul li a {; Reglen siger: formater alle links(a), som befinder sig inde i list item(li), som igen befinder sig i en unordered list(ul) som befinder sig i en div der hedder left. Browseren læser fra højre mod venstre. Følgende er alle lovlige selektorer for <a>-taget inde i listen: ul li a body li a html li a html body ul li a Side 2
3 Tilstødende selektorer (adjacent sibling) I dette eksempel skal du formatere et <p>-tag når det står efter et <img>-tag, og kun i denne situation. Dette angiver du med et (+) for at kombinere disse to tag. Din selektor bliver herefter: img + p{. Det er uden betydning om du kommmer luft i mellem, så img+p{ virker også. Så denne regel gælder når <p>-taget umiddelbart følger et <img>-tag <h1> <p> <img> <p> <p> <img> <p> Side 3
4 Til eksemplet skal du indskrive følgende CSS-regler: <style> body{ font-family: Verdana, Geneva, sans-serif; font-size: 11px; #content{ margin-top: 100px; margin-left: 50px; width: 280px; paddding: 0px; h1{ background: #999; font-size: 24px; height: 40px; line-height: 40px; text-align:center; margin-bottom: 20px; #indhold{ border: 2px dotted #999999; padding-bottom: 10px; #indhold p{ font-size: 11px; padding: 0 10px 0 10px; img{ margin: 0px 10px; img+p { background: #333; height:40px; font-size: 11px; line-height:20px; color: #ffffff; margin: 0 10px; padding-left: 10px; </style> Side 4
5 HTML-opsætningen til eksemplet: <body> <div id="content"> <h1>camera obscura</h1> <div id="indhold"> <p>det camera obscura, der bruges som fotografiapparat, er en firkantet kasse, ofte til at trække ud som en harmonika.</p> <img src="ill03_ny.jpg" /> <p>kassetten føres ind i et rum med rødt lys. </p> <p>dette indeholder nemlig næsten ingen kemisk virkende lysstråler og er derfor uskadeligt.</p> <img src="ill04_ny.jpg" /> <p>billedet på pladen er negativt</p> </div> </div> </body> </html> Udvid nu din css med følgende: img+p+p{ background: #f00; font-size: 11px; line-height:20px; color: #ffffff; margin: 10px 10px; padding-left: 10px; Side 5
6 Så får du følgende resultat: img+p+p{ Side 6
7 Child og direkte child selector: Ikke bare en child, men en direkte child angives med selektoren større end vinkel (>) Med en direkte child #left>a udvælges kun børn i første led mens en nedarvet selector #left a vil ramme alle <a>elementer der er efterkommere af #left Hermed kan du angive hvilken child fra hvilken forældre du vil formatere. Et <h2>-tag som er child af body angives med: body h2 og formaterer alle h2 som er child af body. Body h2 {reglen, vælger alle h2 på siden, hvorimod du også kan specificere nøjagtig hvilken h2 du vil formatere. På nedenstående eksempel har samtlige tekster et <h2>-tag Du skal her også formatere h2 som er direkte child af div, altså div>h2 Indsæt følgende CSS-regler: <style> body h2 {background-color: #0f0; body>h2{background-color: #f00; div>h2{background-color:yellow; </style> Indsæt følgende HTML på samme side til ovenstående eksempel: <body> <h2>cristiansø</h2> <div> <h2>bornholm</h2> <h2>sandvig</h2> </div> <div> <strong><h2>hullehavn</h2></strong> <!--da strong-taget kommer imellem bliver farven grøn --> <h2>allinge</h2> </div> </body> Side 7
8 Pseudo-class :first-child selektoren Pseudoklassen :first-child udvælger et element hvis det er første barn af et overordnet element, anvendelig til første afsnit i en spalte, første listeelement <li> i en listeopstilling, første menupunkt i en menu Her har jeg indrykning på alle afsnit. Du skal selv kode dette eksempel, se derfor også min kode nedenstående Indsæt følgende CSS: <style> body{ font-family: Verdana, Geneva, sans-serif; #content{ margin-top: 100px; margin-left: 50px; width: 300px; paddding: 0px; Side 8
9 #indhold{ border: 2px dotted #999999; #indhold p{ text-indent: 11px; /* indrykning */ font-size: 11px; line-height: 12px; margin: 10px 10px 11px 10px; h1{ background: #999; font-size: 24px; height: 40px; line-height: 40px; text-align:center; margin-bottom: 20px; </style> Html-koden ser sådan ud: <body> <div id="content"> <h1>fotografering</h1> <div id="indhold"> <p>fra gammel tid var det kendt, at visse stoffer, som sølvsalte og asfalt, forandrede sig ved lysets påvirkning, og adskillige havde eksperimenteret dermed; men en brugervenlig teknik udvikledes først af to franskmænd, Nièpce og Daguerre. Den første døde, før forsøgene var tilendebragt; men det lykkedes Daguerre at færdiggøre dem, og han offentliggjorde sine resultater i </p> <p>han lod billedet i camera obscura falde på en forsølvet kobberplade, der havde været udsat for joddamp. Lyset forandrede jodsølvet, og når pladen derpå udsattes for kviksølvdampe, fortættede disse sig mest dèr, hvor lyset havde virket stærkest, og dèr satte kviksølvdråberne sig tættest. Det uangrebne jodsølv bortvaskedes med svovlundersyret natron, så lyset ikke mere kunne forandre pladen. Man opnåede smukke billeder. De sås bedst, når en mørk flade spejlede sig i dem. Spejlede en lys flade sig i pladen, forandredes lys til skygge, og billedet blev negativt.</p> <p>metoden forbedredes, idet man ved at bruge brom og klor betydelig afkortede tiden for lysets indvirkning. En stor mangel var, at disse billeder ikke kunne kopieres. Igennem Talbots arbejder, der væsentligt gik ud på at kopiere tegninger og naturgenstande, nåede man til det næste skridt i kameraets historie:</p> </div></div></body> Side 9
10 I dette eksempel skal du ikke have indrykning på første afsnit, derfor indsættes følgende CSS på ovenstående eksempel: #indhold p:first-child { text-indent: 0px; Vi kan altså bruge pseudo-class`es til at ramme bestemte elementer i vores kode Du skal nu kode en navigationsmenu på liste. Den første listefunktion(list-item) tilføjer du en rød farve <!DOCTYPE html> <html> <head> <title>css Selektorer</title> Side 10
11 <meta charset="utf-8" /> <style> li:first-child { color: red </style> </head> <body> <ul> <li>punkt 1</li> <li>punkt 2</li> <li>punkt 3</li> <li>punkt 4</li> <li>punkt 5</li> </ul> </body> </html> Her ser du resultatet: Du styler nu det sidste liste-element Korriger din css til li:last-child{color: #00f; Side 11
12 Oversigt over pseudo classes: Selector: Eksempel: Beskrivelse: :root Svarer til: html{ Vælger dokumentets rod, som altid er <html>-elementet :nth-child() li:nth-child(2n) Hermed bliver hver anden liste element stylet :nth-child() li:nth-child(4) Hermed bliver det fjerde liste element stylet :nth-child() li:nth-child(2n+1) Du starter med den første, herefter bliver hver anden element stylet :nth-last-child() li:nth-last-child(3) Samme som :nth-child() men tæller bagfra eller baglæns :nth-of-type() article p:nth-of-type(1) Her styles første p-tag i taget article, som er et html5-tag :nth-last-of-type() article p:nth-last-oftype(1) Her styles sidste p-tag i article, tæller baglæns fra bunden :first-child p:first-child Vælger det element som er det første af andre elementer :last-child li:last-child Det sidste element i en liste :first-of-type article p:first-of-type Første p-tag i article :last-of-type article p:last-of-type Sidste p-tag i article :only-child li:only-child Vælger liste elementet som er det eneste element i en liste :only-of-type p:only-of-type f.eks ved kun et resultat af udtræk fra database :emty #results:empty Kan skabe brugers opmærksomhed ved tomt søgeresultat i et felt med navnet results Ikke alle elementer understøttes af alle browsere, specielt IE8 og tidligere. Praktisk eksempel: li:last-child{border-bottom: none; fjerner border på sidste liste element, hvilket ofte er nødvendigt Nedenstående har du link til en fantastisk pseudo-class oversigt: se nu dette site igennem korriger yderligere din css fra tidligere: du vil nu kunne vælge hver anden liste - element li:nth-child(2n){ color: #0f0; Side 12
13 Oversigt over position samt nummer - baseret pseudo-class: Nu skal du selv eksperimentere med forskellige løsninger. Lav selv 4 5 pseudo class regler, det behøver ikke nødvendigvis at være bygget på lister, og tilføj regler på noget aktuel html-kode Side 13
14 Pseudo element selektorer Pseudo element selektorer minder meget om pseudo class selektorer, vi skal her kikke nærmere på :first-letter samt :first-line :first-line Korriger dine css-regler til dette: #indhold p{ text-indent: 0px; font-size: 11px; line-height: 12px; margin: 10px 10px 11px 10px; #indhold p:first-line{ color:#f00; Side 14
15 :first-letter Korriger dine css-regler til dette: #indhold p:first-letter{ color: #f00; float: left; font-size: 26px; padding: 4px 0px 0px 0px; Side 15
16 Ekstra ekstra opgave Prøv nu som ekstra selvstændig opgave om du kan gennemskue denne sidste opgave. Det kræver at du går på nettet og nærmere undersøger pseudo classens struktur. Du skal ende med dette resultat Indskriv følgende kode i body-taget: <table > <tr> <th>vare</th> <th>pris</th> <th>antal</th> <th>total</th> </tr> <tr> <td>bukser</td> <td>100kr</td> <td>5</td> <td>500kr</td> </tr> <tr> <td>polo t-shirt</td> <td>200kr</td> <td>5</td> <td>1000kr</td> </tr> <tr> <td>bluse</td> <td>90kr</td> <td>4</td> <td>360kr</td> </tr> Side 16
17 <tr> <td colspan="3">subtotal</td> <!-- slår tre kolonner sammen --> <td>1860kr</td> </tr> <tr> <td colspan="3">fragt</td> <td>120kr</td> </tr> <tr> <td colspan="3">total sum</td> <td>1980kr</td> </tr> </table> Herefter skal du indskrive følgende css: table{ width: 600px; border-collapse: collapse; th, td{ border: none; th{ background-color: #000; color: #fff; /*START:hver anden lys grå, række , altså de lige rækker, even*/ tr:nth-of-type(even){ background-color: #F3F3F3; /* række , altså de ulige, odd */ tr:nth-of-type(odd) { background-color:#ddd; /*START:right-align */ td:nth-child(n+2){ text-align: right; Side 17
18 /*START: den sidste tr er bold */ tr:last-child{ font-weight: bolder; /*START: alle de sidste td er bolder */ td:last-child{ font-weight: bolder; /*START: stor total sidste værdi */ tr:last-child td:last-child{ font-size:24px; /*START:næstsidste række, altså nummer 2 fra bunden */ tr:nth-last-child(2){ color: green; /*START:align_sidste_tre_rækker */ tr:nth-last-child(-n+3) td{ text-align: right; Ved nedenstående tabel er der det pudsige, at med css3 ændres syntaksen fra : til :: altså fra enkelt kolon til dobbelt kolon, dog er understøttelsen af dobbel-kolon begrænset, men så er du klar på hvad der venter Oversigt over pseudo-elements: Css2.1 Css3 Beskrivelse :first-line ::first-line Styler første linje af et element :first-letter ::first-letter Styler første bogstav af et element :before ::before Tilføjer indhold før et element :after ::after Tilføjer indhold efter et element Side 18
Nedarvning. At style tags inden i andre tags. www.johnnihowardsen.dk - selektorer
Nedarvning Du styler som bekendt dit indhold med mange forskellige selektorer. De mest almindelige er class, id, tag men du kan også gruppere selektorer f.eks h1, h2, h3, p, a, img {font-family: Verdana,
Læs mereStylesheets - grundteori.
Når du designer med css gør du to ting: på den ene side opmærkes og struktureres sidens indhold med tags, eller markører på den anden side tildeles disse tags css-regler, hvormed du styrer layoutet. Her
Læs mereGrafisk workflow. website til duckhead music
Grafisk workflow website til duckhead music Portfolio h1 Side 18 website til duckhead music Selvom jeg er hos et webbureau, så sidder jeg udelukkende med design, og er derfor ikke kommet til at kode endnu.
Læs mereREDESIGN 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 mere5. 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 mereProjekt-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 mereMit 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 mereNyhedsbrev april: spørgeskemaundersøgelse
#ChronoContact_Survey { margin-bottom: 10px; margin-left: 0px;.form_element { float: left; font-family: Arial,Helvetica,sans-serif; font-size: 12px; margin-bottom: 8px; margin-left: 0; margin-top: 8px;
Læs mereGrafisk 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 mereOversigt 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 mereGrafisk 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 mereByg 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 mereweb 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 mereEfterlyst! 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 mereGRAFISK 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 mereGRAFISK 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 mereGRAFISK WORKFLOW GRAFISK WORKFLOW
Opgaven At lave en ny hjemmeside til tekniske skolers sportslege. Den gamle var rodet og uoveskuelig. Det vigtigste var at rydde op, samt holde en rød tråd til logo og indbydelsen. Afsender Lærerne på
Læs mereGrafisk Workflow. Endeligt layout. Om mig. Forside. Portfolio
Endeligt layout Forside Om mig Portfolio 1 Hjemmeside Opgaven I dette design projekt skulle jeg gennemføre en designproces, hvor jeg enten skulle redesigne eller designe et produkt. Jeg valgte at designe
Læs mereNu skal vi især se på <font> og <center> samt centrering af hele siden på skærmen.
Validering 4 Nu skal vi især se på og samt centrering af hele siden på skærmen. Det er i HTML ikke forbudt at bruge koden , men lad nu være alligevel, du får blot en masse valideringsproblemer.
Læs mereCSS fortsat: Boksmodel, floating & positionering
Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 4, individuel øvelse CSS fortsat: Boksmodel, floating & positionering 1. Lidt om hvad du har lært Du har i øvelse
Læs mereKT 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 mereGrafisk workflow. Maria Clausen Svendeportfolio Grafisk workflow
Grafisk workflow Maria Clausen Svendeportfolio Grafisk workflow OPGAVEN Kunden har stiftet et nyt firma som hedder Wood id, som sælger lamper, møbler og tilbehør lavet i kvalitets træ. Kunden ville gerne
Læs mereGRAFISK 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 mereNolde 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 merePræ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
Læs mereGrafisk Workflow. Mediegrafiker - Svendeprøve. Mediegrafikeruddannelsen af Ramin Azizi
Grafisk Workflow Mediegrafiker - Svendeprøve Mediegrafikeruddannelsen 2012-2016 - af Ramin Azizi www.azizidesign.dk Dokumentation Opgavebeskrivelse: Jeg har i denne opgave valgt at redesigne s hjemmeside,
Læs mereGrundlæ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 mereopsam 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 mereworkflow 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
Læs meregrafisk workflow Madmagasinet
grafisk workflow Madmagasinet Dokumentation Opgaven Madmagasinet skal have et website som er responsive, således deres brugere har en side som er optimeret til de forskellige platformer, hvorpå deres site
Læs mereGrafisk 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 mereLav 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 mereOm 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 mereOrdbøgerne.dk. Navne: Andreas Foldager og Rasmus Bjerring Pedersen Fag: IT B Lærer: Karl Bjarnason Afleveringsdato: 17-11-06.
Ordbøgerne.dk Navne: Andreas Foldager og Rasmus Bjerring Pedersen Fag: IT B Lærer: Karl Bjarnason Afleveringsdato: 17-11-06 Side 1 af 35 Indholdsfortegnelse Indledning:...3 Design...4 Visuelt design:...4
Læs mereWEBDESIGN & WEBKOMMUNIKATION
WEBDESIGN & WEBKOMMUNIKATION 23. februar 2012 #4 - Webtypografi og farve + CSS introduktion PROGRAM FOR I DAG 1. Farve 2. WebTypografi 3. CSS 4. Selectors, inheritance, hierarkiet og specificitet 5. Næste
Læs mereLaura Svendsen Kernekompetencer GRAFISK WORKFLOW
Laura Svendsen Kernekompetencer GRAFISK WORKFLOW website til drømmemadpakken Hvad? Opgaven er anden del af en opgave i to dele, et trykt produkt og et digitalt produkt. Vi fik udleveret tekst og billeder
Læs mereGRAFISK WORKFLOW Hjemmeside - Husk hjelmen. http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/
GRAFISK WORKFLOW Hjemmeside - Husk hjelmen http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/ Produkt Web sider Index side Underside - Cykelhjelmen - brug den rigtig. Underside - Husk nu cykelhjelmen.
Læs mereCSS 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 mereBeginning CSS and Web Development kap. 1 11
Beginning CSS and Web Development kap. 1 11 Plan Xhtml opbygning CSS Divs, class, id Baggrunde, farver og billeder Tekst Links Lister Tabeller Stand up programmering Xhtml vs. html i XHTML skal alle elementer
Læs mereFORSTÅELSE FOR GRAFISK PRODUKTION OG WORKFLOW
Opgaven I AArhus er en fiktiv hjemmeside. Formålet med hjemmesiden, er at Folk som befinder sig i Aarhus kan henvende sig til I AArhus og berette deres synspunkt på Aarhus. Siden henvender sig til unge,
Læs mereOPGAVEN Konditoren skulle have lavet et site til deres opskrifter. Konditoren.dk er en blog for bageglade amatørere i alle aldre.
WORKFLOW OPGAVEN Konditoren skulle have lavet et site til deres opskrifter. Konditoren.dk er en blog for bageglade amatørere i alle aldre. Det er en fiktiv opgave. MIT BIDRAG Jeg stod for al design og
Læs mereWeb 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 mereVejledning. Tabulex Hjemmeside. Styling af sidemenuer. Side 1 af 8
Tabulex Hjemmeside Styling af sidemenuer Side 1 af 8 Styling af sidemenuer Sidemenuerne kan styles efter alle ønsker. Du skal vælge modulet: "Styling" på det niveau, hvor det skal have virkning. F.eks.
Læs mere! }! FORSIDE! <html>! <head>!
FORSIDE opgaver body { background-color:#33adff; } header { background:#33adff; color:white; text-align:center; padding:5px;
Læs mereForm og dens underlige box model
Denne guide er oprindeligt udgivet på Eksperten.dk Form og dens underlige box model Denne artikel handler om hvilke problemer man som webudvikler kan komme ud for, og hvordan man løser dem. Jeg kommer
Læs mereHTML5 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 mereGRAFISK 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 mereTEKNISK DOKUMENTATION FAKTURA LAYOUT ABAQUE VERSION 2.0
TEKNISK DOKUMENTATION FAKTURA LAYOUT ABAQUE VERSION 2.0 INTRODUKTION... 3 SKABELON OPBYGNINGEN... 3 BYG DIN EGEN SKABELON... 3 INDSÆT FELTER... 3 INDSÆT VARELINJER... 3 FILNAVN... 4 LISTE OVER FELTER...
Læs mereAptana 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Ø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 mereHer vil jeg forsøge at gennemgå hvordan vi kan opnå at centrere en»div-container«både vertikalt og horisontalt i browser vinduet.
Side 1 Her vil jeg forsøge at gennemgå hvordan vi kan opnå at centrere en»div-container«både vertikalt og horisontalt i browser vinduet. Dette er nogle gange et ønske fra den enkelte kunde, som blot ønsker
Læs mereMartin Møller Web1b Tirsdag den 19 juni 2012
Martin Møller Web1b Tirsdag den 19 juni 2012 Projektbeskrivelse 3 Tema valg 3 Budskab 3 Afsender 4 Målgruppe 4 Kommunikations mål 4 Skitser 6 Layout index 7 Layout Kulturliv 8 Layout Gratis glæder 9 Layout
Læs mereGrafisk. Hjemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling.
Grafisk w o rk f l ow jemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling. Deres vision er at skabe enkle og inspirerende
Læs mereFase Forklaring Navigation. Mappen skal indeholde alle elementer til dit site.
1 Opstart af et site Opret hovedmappen Opret grafikmappen Opret dit site Mappen skal indeholde alle elementer til dit site. Opret en mappe indeni den første og kald den grafik. Heri lægges alle dine grafikfiler.
Læs mereLad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette.
Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette. Spørgsmålet er nu, hvordan laver man sådan en side? Du skal have et såkaldt webhotel, hvilket jeg
Læs mereWebteknologi 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 mereFase Forklaring Navigation. Opret en div til feltet hvorpå scrollbaren ønskes placeret. Giv div'en mål og position absolut. Vælg Overflow: auto.
1 Scrollbar Åbn index.html Der skal være en side åben. Indsæt en div: scroll Opret en div til feltet hvorpå scrollbaren ønskes placeret. Definér div'en Giv div'en mål og position absolut. Vælg Overflow:
Læs mereDesignmanual 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 mereRoskildes 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 mereLad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette.
Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette. Spørgsmålet er nu, hvordan laver man sådan en side? Du skal have et såkaldt webhotel, hvilket jeg
Læs mere#Anna Skak #Mediegrafiker
Grafisk Workflow OPGAVEN Fodboldklubben Egmont Rollators FC ville have en website, for at gøre klubben mere synlig for eventuelle nye medlemmer. Websitet skulle indeholde alle de praktiske oplysninger
Læs mereGrafik & Billede weloveorganic.com webshop
Grafik & Billede weloveorganic.com webshop Opgaven og afsender: Weloveorganic.com er en forholdsvis ny virksomhed, der pånuværende tidspunkt udelukkende sælger økologisk tøj til kvinder. På længere sigt
Læs mereGRAFISK WORKFLOW OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY
GRAFISK WORKFLOW OPGAVEBESKRIVELSE Min kunde er en ung mand som ønskede at få lavet en hjemmeside til hans fremtidig firma, den skulle være responsiv og simpel. Da kunden ikke havde noget ønske om selv
Læs mereBrugervejledning 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 mereForståelse for grafisk produktion og workflow
Forståelse for grafisk produktion og workflow Fallulah hjemmeside Opgaven: Blev stillet i forbindelse med forløbet avanceret webdesign, jeg har hverken fået karakter eller bedømmelse på den. Opgaven bestod
Læs mereGRAFISK 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 mereDesignmanual BUTLER FM
Designmanual BUTLER FM 2015 Grontmij A/S, Facilities Management Forfatter: Rikke Carlsen, RIC Indhold Grid... 3 Afstande... 5 Fonte og typografier... 6 Farver... 7 Tabeller... 8 Andre elementer... 10 Ikoner...
Læs mereIndhold. 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 mereDokumentation. 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 mereOPGAVE BESKRIVELSE ARBEJDSPROCES. Idéudvikling. Inspiration. Skelet. Uploade til server. Kodning. Teste sitet igennem. Rettelser og godkendelse
GRAFISK WORKFLOW ARBEJDSPROCES OPGAVE BESKRIVELSE OPGAVEN At lave et redesign af AGF Fanclubs hjemmeside med et mere nutidigt look og bedre oversskuelig brugerflade. Opgaven har jeg stillet mig selv, men
Læs mereMark 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 mereWebmaster Sweet-Swing.dk Websidens opbygning. Som eksempel er brugt siden om korets målsætning som den vises i editoren.
Opbygning Som eksempel er brugt siden om korets målsætning som den vises i editoren. I editoren vises tabellinierne, selvom de på den færdige side i vores tilfælde er usynlige, bortset fra den sorte ramme
Læs mereGRAFISK 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 mereGrafisk Workflow Personligt website
Grafisk Workflow Personligt website Andreas Ernst Tørnqvist Grafisk Workflow Redegørelse Opgaven Opgaven er en personlig hjemmeside lavet i min fritid. Siden skal bruges som en reklamesøjle for potientelle
Læs mere1. Bilag: Brugertest for gammel site
Bilag 1 1. Bilag: Brugertest for gammel site Brugertest af Isabellais.dk Scenarie 1 Gå ind på www.vinoble.dk Du har på forsiden nogle vine som er fremhævet, de er placeret i nogle bokse, som du har mulighed
Læs mereBootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN
2015 Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN I denne tutorial kommer du til at I denne tutorial vil du lære hvad Bootstrap er, hvordan det fungerer og hvordan
Læs mereHTML5 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 mereVejledning Tabeller (data tabeller)
. Vejledning Tabeller (data tabeller) Datatabeller vs. Layouttabeller Beskrivelse af en tilgængelig datatabel Opret en tilgængelig (simpel) tabel indsæt eller fjern en række eller kolonne Indsæt spænd
Læs mereGRAFISK DESIGN. Min personlige e-portfolio
GRAFISK DESIGN Min personlige e-portfolio 2 OPGAVEBESKRIVELSE Produkt: E-portfolio Farve: RGB Programmer: Brackets, Photoshop og Illustrator Min personlige e-portfolio er udarbejdet som et led i min uddannelse
Læs merePortfolio - sunestenild.dk
Portfolio - sunestenild.dk Grafisk produktion og workflow Anvendte programmer: Opgavebeskrivelse: Jeg vil gerne lave en hjemmeside som promoverer mig selv i forhold til kommende arbejdsgivere og eventuelle
Læs mereCentOS 7. Lavet af Ali Sarac og Andreas Jensen
CentOS 7 Lavet af Ali Sarac og Andreas Jensen 3.8.2017 Indholdsfortegnelse Konklusion... 3 Installer CentOS 7 i VMware... 3 Installation af Apache, PHP5 og vores HTML side... 7 2.4 spørgsmål... 12 Kildekoder...
Læs mereGrafisk Workflow & produktion REDESIGN AF HJEMMESIDE
Grafisk Workflow & produktion REDESIGN AF HJEMMESIDE redegørelse Hvad går opgaven ud på Inhouse Graphic (IHG), skulle have rede signet hjemmesiden. Hjemmesidens struktur under samme ombæring kigges på
Læs mereVejledning 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 mereDenne artikel er til dem der ønsker at vide mere om hvad CSS er og hvad CSS kan bruges til hvad angår WWW.
Denne guide er oprindeligt udgivet på Eksperten.dk CSS - en gennemgang Denne artikel er til dem der ønsker at vide mere om hvad CSS er og hvad CSS kan bruges til hvad angår WWW. Der er lidt CSS historie
Læs mereCSS selektorer. CSS pseudoklasser, pseudoelementer og attribut-selektorer. Af Jørgen Farum Jensen
CSS selektorer CSS pseudoklasser, pseudoelementer og attribut-selektorer Af Jørgen Farum Jensen CSS for viderekomne kunne jeg også have brugt som overskrift for denne artikel. Artiklen beskriver de metoder,
Læs mereGRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen
GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen OPGAVE Designforslag til hjemmeside til motorcykelklubben Mc Chaufførerne GRAFISK DESIGN / Dorte Damsgaard Larsen 1/15 DESIGNPROCES Indledende møde med
Læs mereCSS 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
Læs mereOPGAVE: WELOVEORGANIC.COM WEBSHOP
OPGAVE: WELOVEORGANIC.COM WEBSHOP OPGAVEN OG AFSENDER: Weloveorganic.com er en forholdsvis ny virksomhed, der pånuværende tidspunkt udelukkende sælger økologisk tøj til kvinder. På længere sigt ønsker
Læs mereTillykke Med Fødselsdagen
HTML & CSS 1 Tillykke Med Fødselsdagen All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register
Læs mereFBS for praktikere Fyn. Notifikation og print skabeloner
FBS for praktikere Fyn Notifikation og print skabeloner 1.Velkomst v/anton Helms 2.Introduktion til HTML/CSS/Freemarker v/kent Gottschalk Hansen. 3.Skabeloner i Cicero v/kent Gottschalk Hansen. 4.Erfaringsudveksling
Læs mereGrundformen 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 mereManual for Synkron hjemmesider
Manual for Synkron hjemmesider Denne manual tilhører: Brugernavn: (username) Adgangskode: (password) 1 Start med sitetræet: Sitetræet er centralt. Det er her, dit website er. Det er her, du bygger dine
Læs mereVelkommen 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
Læs mereVejledning i opkrævning af indmeldelsesgebyr for nye spejdere.
Vejledning i opkrævning af indmeldelsesgebyr for nye spejdere. Baggrund: Med det nye medlemssystem Medlemsservice, er det ikke længere muligt at opkræve betaling via indmeldelsesformularen i systemet,
Læs mere5 ARBEJDE MED EDITOREN
5 ARBEJDE MED EDITOREN Editor (eller Rich Tekst Editor) er et indbygget indholdsredigerings værktøj, hvor man uden nogen kendskab til HTML kodning kan skrive tekst, indsætte billeder, videoer og links.
Læs mere