Beginning CSS and Web Development kap. 1 11
|
|
|
- Rasmus Kristiansen
- 7 år siden
- Visninger:
Transkript
1 Beginning CSS and Web Development kap. 1 11
2 Plan Xhtml opbygning CSS Divs, class, id Baggrunde, farver og billeder Tekst Links Lister Tabeller Stand up programmering
3 Xhtml vs. html i XHTML skal alle elementer afsluttes i XHTML skal alle elementer skrives med små bogstaver (lowercase) i XHTML skal værdien af attributter stå med anførelsestegn (dette er kun under trans. og frameset, vi bruger strict) i XHTML tillades minimerede attributter ikke <option selected> i stedet < option selected= selected /> i XHTML bruges attributten "id" til identifikation og ikke name
4 Xhtml definition Definition af dokument (øverst i dokumentet) Tre typer Strict (rent markup, sammen med css) Transitional (kan stadigt bruge html attributter) Frameset (til brug af framesets) <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd">
5 Xhtml start af dokument Starter med tagget <html> med attributterne Xmlns (hvor kan finde definition for hvad dokumentet må indeholde af tags og attributter) Xml:lang (hvilket sprog er dokumentet skrevet i) <html xmlns=" xml:lang="en">
6 Xhtml header Information til browseren Content type (hvordan skal den opfatte indholdet af dokumentet) Charset (hvilket karaktersæt bliver der brugt) Stylesheet (et evt. eksternt stylesheet der skal loades) Title (hvilken titel skal siden have i browseren) Script (import af evt. eksternt javascript) <head> <meta http equiv="content Type" content="text/html; charset=iso " /> <link rel="stylesheet" href="styles/styles.css" type="text/css"/> <title>gorilla Script</title> </head>
7 Xhtml skabelon Alt inden for body tagget er det der vil blive præsenteret i browseren <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> <html xmlns=" xml:lang="en"> <head> <meta http equiv="content Type" content="text/html; charset=utf 8" /> <title>untitled Document</title> </head> <body> </body> </html> Så nu er vi klar til at gå i gang med CSS
8 CSS (Cascading Style Sheet) Bruges til at definere udseendet for vores xhtml dokument Gør det muligt at adskille udseende og indhold Vi kan derfor ændre udseendet for multiple sider med bare et style sheet Kan også bruges sammen med html og xml Et CSS dokument er bygget op af selektorer og attributter for hvad der skal ske med den enkelte selektor
9 Oprettelse af stylesheet Et eksternt stylesheet er egentligt bare en tekst fil med css som efternavn. Det stylesheet som vi bruger til de kommende eksempler hedder styles.css Det eksterne stylesheet forbindes til vores xhtml dokument via en meta information i headeren af vores xhtmldokument <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> <html xmlns=" xml:lang="en"> <head> <meta http equiv="content Type" content="text/html; charset=utf 8" /> <link rel="stylesheet" href="styles/styles.css" type="text/css"/> <title>untitled Document</title> </head> <body> </body> </html>
10 Embedded og inline css Det er foruden eksterne stylesheets muligt at lave embedded og inline stylesheets. Embedded css skrives som en del af headeren i xhtml dokumentet <head> <style type="text/css"> p{ color:#666666; </style> </head> Inline css skrives som en del af den selektor den skal påvirke. <p style="color:#ccccff"> noget tekst </p> Det er dog mest fleksibelt at benytte eksterne stylesheets på nær i nogle få enkelte tilfælde
11 Selektorer og attributter Vi kan definere i vores style sheet hvad der skal ske med den enkelte selektor i vores xhtml dokument Dette gøres i style sheetetsåledes: selektor attributter Efterfølgende vil det have indflydelse på alle p elementer i vores xhtml dokument der benytter sig af vores style sheet Vi har mulighed for at ændre alle pre definerede selektorer i xhtml formatet såsom: <p>, <table>, <ul>, <li>, <img> osv. p{ padding:6px; padding top:0px; text align:justify;
12 Klasser og id I stedet for at modificere en specifik selektor direkte kan vi lave en klasse som kan tilføjes forskellige selektorer:.floatright{ float:right; Denne klasse kan vi tilføje til alt der skal flyde til højre dette vil se således ud i xhtml dokumentet: <img class="floatright" src="images/image.jpg" />
13 Klasser og id 2 Ved at lave et id i stedet for en klasse er det muligt at referere til et specifikt sted i xhtml dokumentet, dette gøres således i style sheetet: #overskrift1{ font size:12px; I xhtml dokumentet kommer det til at se således ud: <h1 id= overskrift1">noget tekst</h1> Vi kan derefter lave en link til denne specifikke overskrift: <a href= #overskrift1 >link</a> Vi behøver ikke at definere vores id er i style sheetet hvis de bare skal virke som et link id
14 Divs I stedet for predefinerede selektorer kan vi benytte divs som byggesten til at lave vores egne indholdscontainere. Dette gør xhtml og css meget fleksibelt. En container med ramme kunne se således ud i xhtmldokumentet: <div class="box"> </div> Og således i style sheetet:.box{ border:1px solid #000; width:200px; height:200px;
15 Nedarvning Xhtml og css er bygget i hierarkisk struktur hvilket betyder at en selektor der er barn af en anden selektor nedarver dennes attributter, hvis en attribut ikke er defineret specifikt for selektoren. <div class="box"> text box 1 <div class="box2"> text box 2 </div> </div>.box{.box2{ border:1px solid #000; width:200px; height:200px; font:arial, Helvetica, sans serif; font size:18px; text-box 1 text-box 2 Dette gælder dog ikke attributter såsom border, margin og padding
16 Blok og inline elementer Elementer såsom p og div er default blokelementer. Dette betyder at der efter afslutningen af elementet indsættes et linjeskift. <div class="box"> <p>en tekst</p> <p>en anden tekst</p> </div> Elementer såsom span er inline elementer og efterfølges ikke af linjeskift. Kan f.eks. Bruges til at ændre dele af en tekst. <div class="box"> <p>en tekst <span class="highlight"> med highlight</span></p> <p>en anden tekst</p> </div>.highlight{ Man kan ændre blokelementer til at være inline elementer og selvfølgelig også modsat background color:#003399; p{ display:inline;
17 Margin og padding Fælles for alle selektorer er at vi kan tilføje margin og padding til dem Padding definerer afstanden for elementets ydre grænse og ind til selve indholdet af elementet Margin definerer afstanden fra elementets ydre grænse til det omsluttende element.box{.box2{ border:1px solid #000; margin:30px; width:200px; border:1px solid #f00; padding:30px; margin padding
18 Bredde og højde Alle elementers bredde og højde kan også defineres Dette kan f.eks. enten gøres i pixels eller procent. Hvis de defineres i procent forholder elementet sig til sit omsluttende element og laver den procentvise størrelse derudfra. Pas på i forhold til padding og borders da disse også regnes med..box{.box2{ border:1px solid #000; margin:30px; width:200px; border:1px solid #f00; width:90%;
19 Baggrundsfarver og billeder Der kan defineres en baggrundsfarve for vores elementer.box{ background color:#ccccff;.box2{ background color:#cc3366; Vi kan også indsætte et baggrundsbillede.box{.box2{ background color:#ccccff; background image:url("../images/css3.png");
20 Baggrundsbilleder: gentagelse Vi kan bestemme hvordan vores baggrundsbillede skal opføre sig i forhold til gentagelse horisontalt og vertikalt.box2{ background image:url("../images/css3.png"); background repeat:repeat x;.box2{ background image:url("../images/css3.png"); background repeat:repeat y;.box2{ background image:url("../images/css3.png"); background repeat:no repeat;
21 Billeder Vi har også mulighed for at indsætte almindelige billeder i vores containere <div class="box"> text box 1 <div class="box2"> <img src="images/css3.png" class="floatright"/> text box 2, med noget mere tekst i </div> </div>.floatright{ img{ float:right; border: 1px solid #CCCCCC; Billedet og teksten i containeren forholder sig nu til hinanden
22 Tekst Der findes som default 7 selektorer i xhtml lavet til tekst: p, h1, h2, h3, h4, h5, h6. Hvor p er beregnet til brødtekst og h1 h6 kan bruges til overskrifter startende med h1 som det øverste niveau. <div class="box"> <h1>overskrift 1</h1> <h2>overskrift 2</h2> <h3>overskrift 3</h3> <h4>overskrift 4</h4> <h5>overskrift 5</h5> <h6>overskrift 6</h6> <p>brødtekst</p> </div>
23 Tekst 2 Som med andre elementer kan man ændre farven og baggrundsfarven p{ color:#00ff33; background color:#ccffff; Man kan derudover også ændre på linjehøjden, afstand imellem bogstaver, tykkelsen, stilen og selve font typen m.m. h2{ color:#663399; background color:#ffff99; p{ color:#000000; background color:#ccffff; font family:georgia, "Times New Roman", Times, serif; line height:150%; letter spacing:4px; font weight:bold; font style:italic;
24 Line break Et linjeskift i f.eks. en tekst kan ikke bare laves som et normalt linjeskift som vi er vandt til i programmer som word, notepad etc., men skal i stedet også defineres som et element: <div class="box"> <p>her er en tekst med linjeskift?</p> </div> <div class="box"> <p>her er en tekst med<br /> linjeskift?</p> </div>
25 Links En vigtig del af et xhtml dokument er hyper links, så der kan linkes til andre steder i dokumentet og desuden til eksterne dokumenter. Et link kan både være tekst, et billede og et helt element. Et typisk tekst link ser således ud i xhtml dokumentet: <div class="box"> <p>tekst med <a href=" til dr</a></p> </div>
26 Links og css Et link kan være i fire forskellige stadier: link, visited, active og hover. Vi kan igennem vores stylesheet definere hvordan hvert af disse stadier skal se ud: a:link, a:visited, a:hover, a:active{ text decoration:none; a:link{ a:hover{ a:visited{ a:active{ color:#cc00ff; color:#cccc00; background color:#333333; color:#cc00ff; color:#ffffff; background color:#666600;
27 Links som blok element Ved at lave vores links om til et blokelement kan vi få et helt element til at virke som link og ikke kun teksten <div class="box"> <a href=" til dr</a> </div> a:link, a:visited, a:hover, a:active{ text decoration:none; display:block; Det er også muligt at lave et billede til et link <div class="box"> <a href=" src="images/css3.png" /></a> </div>
28 Lister Lister bruges, som navnet antyder, til at opstille tekst på listeform. Dette kan enten gøres i en uordnet eller en ordnet liste. Forskellen på de to listetyper er at den ordnede liste er nummereret stigende,hvorimod den uordnede ikke har nogen nummerering. En uordnet og en ordnet liste laves således i xhtml: <div class="box"> <ul> <li>element 1</li> <li>element 2</li> <li>element 3</li> </ul> </div> <div class="box"> <ol> <li>element 1</li> <li>element 2</li> <li>element 3</li> </ol> </div>
29 Lister og css Det er muligt at ændre på den måde hvert element i listen bliver præsenteret på: ul{ list style type:katakana; ul{ list style type:lower roman; ul{ list style type:square; Der er i alt ca. 15 forskellige default muligheder at vælge imellem
30 Lister og css 2 Udover de default præsentationsmuligheder er det også muligt selv at indsætte et billede som skal vises ud for hvert liste element. ul{ list style image:url(../images/angry.gif);
31 Lister inline Lister behøves ikke at være vertikale. Hvis vi f.eks. vil bruge en liste til en horisontal menu bar kan listen nemt omstilles til dette ul{ li{ list style:none; display:inline; background image: url(../images/angry.gif); background repeat: no repeat; background position: left center; padding: 5px 10px 5px 30px; top højre bund venstre
32 Lister af lister Lister kan indeholde andre lister som igen kan indeholde andre lister. Vi kan derved lave en hierarkisk opbygning til f.eks. En indholdsfortegnelse <div class="box"> <ul> <li>element 1 <ul> <li>indre element 1</li> <li>indre element 2</li> </ul> </li> <li>element 2</li> <li>element 3</li> </ul> </div> ul{ list style:lower alpha; list style position:inside; padding: px; line height:150%;
33 Tabeller Tabeller er lavet til at præsentere data i tabelform og ikke som det førhen har været tilfældet i html som en måde at lave layout på. Det har vi css til! Tabeller er bygget op af de tre selektorer table, tr og td hvor table står for selve omgrænsningen af tabellen og tr og td henholdsvis står for tabel rækker og tabeldata Det er desuden muligt at tilføje selektoren th i den første række af tabellen for at få en overskrift på den enkelte kolonne <div class="box"> <table> <tr><th>navn</th><th>adr.</th><th>tlf.</th></tr> <tr><td>poul</td><td>en gade</td><td>12334</td></tr> <tr><td>anders</td><td>gade 3</td><td>32892</td></tr> <tr><td>sigrid</td><td>vej 21</td><td>12452</td></tr> </table> </div>
34 Tabeller og css Det er muligt at ændre på tabellens udseende via css så vi kan få en pænere præsentation af vores data table{ th{ td, th{ border:0px; border collapse:collapse; width:100%; text align:left; background image:url(../images/bargradient.gif); background repeat:repeat x; border bottom:solid; border bottom width:1px; border bottom color:#cccccc; padding:3px;
35 Tabeller og inline css Vi vil dog også gerne have forskellige størrelser på hver af kolonnerne da nr. ikke behøves lige så meget plads som navn, dette er en af de få gange hvor vi skal skrive css inline i selve xhtml dokumentet. <div class="box"> <table> <tr><th style="width:6%;">nr.</th><th>navn</th><th>adr.</th><th style="width:20%;">tlf.</th></tr> <tr><td>1</td><td>poul</td><td>en gade</td><td>12334</td></tr> <tr><td>2</td><td>anders</td><td>gade 3</td><td>32892</td></tr> <tr><td>3</td><td>sigrid</td><td>vej 21</td><td>12452</td></tr> </table> </div>
36 Ændring af specifikke celler Det er også muligt at tilføje en klasse til nogle af cellerne for at gøre tabellen lettere læselig <div class="box"> <table>. <tr><td class="tablecellgrey">2</td><td class="tablecellgrey">anders</td><td class="tablecellgrey">gade 3</td><td class="tablecellgrey">32892</td></tr>. </table> </div>.tablecellgrey{ background color:#cccccc;
37 Kontekst specifikke selektorer Det er muligt at bestemme hvordan elementer i forhold til deres kontekst skal opføre sig <div class="box"> <p>text box 1</p> <div class="box2"> <p><img src="images/css3.png" class="floatright"/> text box 2, med noget mere tekst i</p> </div> </div>.box2 p{ p{ color:#ccffff; color:#ff00ff;
38 Kommentarer i css og xhtml Man kan skrive kommentarer til sig selv og andre programmører i både xhtml og css koden. Disse kommentarer vil blive overset af webserveren og web browseren. Kommentarer i xhtml ser således ud: <! En lille kommentar til mig selv på flere linjer > Og i stylesheetet ser det således ud: /* en lille kommentar på flere linjer */ Dette kan også begge henseender bruges til at udkommentere kode som man gerne vil gemme men ikke skal bruge lige nu
39 Validering af xhtml og css Det er muligt at validere sin xhtml og css kode for at finde ud af om den overholder de standarter man har foreskrevet den burde gøre Validering af xhtml kan foretages her: Validering af css kan foretages her: validator/
40 Stjæl med arme og ben Layout Xhtml kig på koden Css kig på koden Billeder (hvis de ikke er få åbenlyse)
41 Stand up programmering Så hvordan kombinerer vi så alt det vi har lært til en færdig hjemmeside? Start med at lave en skitse så vi har noget at gå ud fra Lav derefter de ting som er gennemgående for alle siderne såsom header, menuer osv. Afslut med at lave det der er specifikt for den enkelte side
42 Udskiftning af stylesheet Hvorfor var det så smart at vi lavede alt vores css i et eksternt stylesheet? Vi kan hurtigt udskifte vores stylesheet med et nyt og få et helt andet layout
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.
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
Forstå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
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
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
Om styles / typografier / typografiark / stylesheets
Om styles / typografier / typografiark / stylesheets (dvs. Cascading StyleSheet ~ CSS) CSS er et sprog til at definere layout på HTML-dokumenter. CSS indeholder flere muligheder for layout end HTML og
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
Grundlæggende HTML. Hjemmesider, kommunikation og kode. mandag den 13. august 12
Grundlæggende HTML Hjemmesider, kommunikation og kode Hvad er HTML? Hyper Text Markup Language Beskrivelsen siger at det er et tekst sprog bestående af markører Bruges til at vise hjemmesider i en browser,
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
Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup
Niels Sundstrup Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup Webteknologi - Carl- Henrik Nielsen - Syddansk Universitet, Kolding - Udlevering: 12. januar 2012 Aflevering: 19. januar
CentOS 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...
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
Drop tables til design, og få fuld udbytte af CSS!
Denne guide er oprindeligt udgivet på Eksperten.dk Drop tables til design, og få fuld udbytte af CSS! Fremtidens hjemmeside-udvikling består af ganske lidt HTML, som er logisk opbygget, samt en masse CSS,
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
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
Fase Forklaring Navigation. Opret en div til feltet hvorpå scrollbaren ønskes placeret. Giv div'en mål og position absolut. Vælg Overflow: auto.
1 Scrollbar Åbn index.html Der skal være en side åben. Indsæt en div: scroll Opret en div til feltet hvorpå scrollbaren ønskes placeret. Definér div'en Giv div'en mål og position absolut. Vælg Overflow:
Grafik & Billede weloveorganic.com webshop
Grafik & Billede weloveorganic.com webshop Opgaven og afsender: Weloveorganic.com er en forholdsvis ny virksomhed, der pånuværende tidspunkt udelukkende sælger økologisk tøj til kvinder. På længere sigt
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.
Ordbø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
GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL
GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL OPGAVEBESKRIVELSE Min kunde er en ung mand som ønskede at få lavet en hjemmeside til hans fremtidig firma, den skulle være responsiv og simpel. Da kunden
Martin Møller Web1b Tirsdag den 19 juni 2012
Martin Møller Web1b Tirsdag den 19 juni 2012 Projektbeskrivelse 3 Tema valg 3 Budskab 3 Afsender 4 Målgruppe 4 Kommunikations mål 4 Skitser 6 Layout index 7 Layout Kulturliv 8 Layout Gratis glæder 9 Layout
Ø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
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
Form 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
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
GRAFISK WORKFLOW OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY
GRAFISK WORKFLOW OPGAVEBESKRIVELSE Min kunde er en ung mand som ønskede at få lavet en hjemmeside til hans fremtidig firma, den skulle være responsiv og simpel. Da kunden ikke havde noget ønske om selv
OPGAVE 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
Grundforløb 1 TEMA2 HTML
Grundforløb 1 TEMA2 HTML HTML KNOWLEDGE BASE Mere HTML og CSS KNOWLEDGE BASE HTML Indhold HVAD ER HTML? WEBSITES I DAG BASIC HTML TAGS MARKUP = HTML TEKST I HTML STANDARDER I HTML ELEMENTERNE I HTML MERE
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
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
OPGAVE: WELOVEORGANIC.COM WEBSHOP
OPGAVE: WELOVEORGANIC.COM WEBSHOP OPGAVEN OG AFSENDER: Weloveorganic.com er en forholdsvis ny virksomhed, der pånuværende tidspunkt udelukkende sælger økologisk tøj til kvinder. På længere sigt ønsker
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
Vejledning. Tabulex Hjemmeside. Styling af sidemenuer. Side 1 af 8
Tabulex Hjemmeside Styling af sidemenuer Side 1 af 8 Styling af sidemenuer Sidemenuerne kan styles efter alle ønsker. Du skal vælge modulet: "Styling" på det niveau, hvor det skal have virkning. F.eks.
Vejledning i udsendelse af s
Side 1 af 5 Vejledning i udsendelse af e-mails Åben en internet browser: Vælg din klubs webadresse og log på siden. Eller log på via ngfp.dk: Nu kommer der en Administrator menu frem som kan have flere
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
TEKNISK 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...
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
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
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
Oversigt HTML5 nye tags til sideopbygning
HTML5 er udviklet af WHATWG Oversigt HTML5 nye tags til sideopbygning (Web Hypertext Application Technology Working Group) En
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
Grafisk produktion og workflow
Grafisk produktion og workflow Helle Nicolaysen svendeprøve juni 2016 Kunde (fiktiv) Bomholt er en virksomhed der laver og sælger plankeborde og som nu ønsker en helhedsorienteret grafisk designlinje,
Namespaces. Vi kan kvalificere elementer på denne måde: <?xml version="1.0" encoding="iso-8859-1"?>
Namespaces...1 Default namespace:...6 Præfiks:...7 To slags navne i XML:...11 Standard namespaces:...14 RDF Resource Description Framework:...18 Attributter:...19 DTD skemaer og namespaces:...21 Namespaces.
Her vil jeg forsøge at gennemgå hvordan vi kan opnå at centrere en»div-container«både vertikalt og horisontalt i browser vinduet.
Side 1 Her vil jeg forsøge at gennemgå hvordan vi kan opnå at centrere en»div-container«både vertikalt og horisontalt i browser vinduet. Dette er nogle gange et ønske fra den enkelte kunde, som blot ønsker
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
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.
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
Afsluttende opgave i Kom/IT
Afsluttende opgave i Kom/IT Hjemmeside om varmluftballoner Fag:Kommunikation/IT Lærer: Karl G Bjarnason Problemformulering Den afsluttende opgave er den du skal til prøve i, hvis du skal til eksamen i
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
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.
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,
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
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
Designmanual 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...
FBS 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
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
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
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
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
! }! FORSIDE! <html>! <head>!
FORSIDE opgaver body { background-color:#33adff; } header { background:#33adff; color:white; text-align:center; padding:5px;
Tilpasning til skærm og browser
Denne guide er oprindeligt udgivet på Eksperten.dk Tilpasning til skærm og browser Du har lavet en kode, som fungerer fortrinligt på din egen computer. Glad og tilfreds lægger du din hjemmeside på Nettet.
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
Grafisk. Workflow. Side 1
Grafisk Workflow Side 1 http://mediegrafiker-ats.dk/15gt33med/freja/hotelinger/ Side 2 Kunde: Inger Marie, Hotel Inger Målgruppe: Aldersgruppe mellem 30-50 år. Hvad har jeg bidraget med? Mit bidrag til
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
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
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,
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
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
Lad 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
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
Grafisk Workflow. hovedforløb 2
Grafisk Workflow hovedforløb 2 WORLD OF FURNITURE Forside.wrapper width: 95%; margin: 0 auto; box-shadow: 0px 0px 25px #888888; Image slider carousel 5 sekunder .button span.button span:after.button:hover
BROWSERE OG PROGRAMMER... 2 BROWSERE A* SIMPLE TEKSBEHANDLINGSPROGRAMMER B* WYSIWYG - DREAMWEAVER... 2
Indholdsfortegnelse BROWSERE OG PROGRAMMER... 2 BROWSERE... 2 1A* SIMPLE TEKSBEHANDLINGSPROGRAMMER... 2 1B* WYSIWYG - DREAMWEAVER... 2 HTML OG CSS... 3 HTML: HYPERTEXT MARKUP LANGUAGE... 3 BILAG *2 HTML/CSS...
www.johnnihowardsen.dk - nedarvning med 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,
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
Hvad er HTML og CSS? EN INTRODUKTION TIL HTML OG CSS
Hvad er HTML og CSS? EN INTRODUKTION TIL HTML OG CSS Webudvikler Uddannelsen Tech College Aalborg. 2018 INDHOLD INTERNETTET, THE SHORT STORY... Fejl! Bogmærke er ikke defineret. DE FØRSTE NETVÆRK... Fejl!
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
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. 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
Grafisk workflow. Hjemmeside til Bærkompagniet
Grafisk workflow Hjemmeside til Bærkompagniet Dokumentation Opgaven Bærkompagniet skulle have designet og programmeret et website, hvor de kunne præsentere deres produkter samt mulige forhandlere kunne
GRAFISK WORKFLOW WEBSITE: MEEFRED DESIGN
GRAFISK WORKFLOW GRAFISK WORKFLOW WEBSITE: MEEFRED DESIGN OPGAVEN: Meefred Design er en enkeltmandsvirksomhed, som tilbyder grafisk design til både erhverv og private. Meefred Design har endnu ikke fået
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;
Grafisk Workflow. Endeligt layout. Om mig. Forside. Portfolio
Endeligt layout Forside Om mig Portfolio 1 Hjemmeside Opgaven I dette design projekt skulle jeg gennemføre en designproces, hvor jeg enten skulle redesigne eller designe et produkt. Jeg valgte at designe
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,
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
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.
GRAFISK WORKFLOW. Proces. Kodning. Fonts:
P f t r o o i l o 1 H GRAFISK WORKFLOW»Vi skal bruge en hjemmeside, så vi kan få fat i patienterne til vores botilbud. Ellers risikerer vi at de vælger noget andet. Der skal laves logo, samt lærringsvideoer«proces
Roskildes tekniske gymnasium. Kulløse Mijlømesse. Afsluttende kom/it projekt
Roskildes tekniske gymnasium Kulløse Mijlømesse Afsluttende kom/it projekt Casper Hansen og Christian Hansen 26-04-2009 Indhold Indledning... 3 Planlægning... 3 Overvejelser... 3 Hvordan man kommer til
Grafisk 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
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
Vejledning. Indhold. Side 1
Indhold HTML-faneblade... 2 Sådan tilføjer du et HTML-faneblad til din Facebook side.... 3 Sådan redigerer du et HTML-faneblad på din Facebook side.... 5 Sådan deler du fanebladet... 10 Side 1 HTML-faneblade
5 ARBEJDE MED EDITOREN
5 ARBEJDE MED EDITOREN Editor (eller Rich Tekst Editor) er et indbygget indholdsredigerings værktøj, hvor man uden nogen kendskab til HTML kodning kan skrive tekst, indsætte billeder, videoer og links.
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...
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å
GRAFISK WORKFLOW Hjemmesidedesign
GRAFISK WORKFLOW www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline Færdige produkt www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline Færdige produkt www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline
Indhold Login flexsignage... 1 Rediger eksisterende layout... 1 Oprette et layout - template... 1 Oprette et layout tomt... 2 Designe layout...
Indhold Login flexsignage... 1 Rediger eksisterende layout... 1 Oprette et layout - template... 1 Oprette et layout tomt... 2 Designe layout... 3 Indstillinger... 3 Regionens menu... 4 Regioner... 4 Regionsindhold/medietype...
Se hjemmesiden på:
Se hjemmesiden på: www.share-connect.dk Dokumentation Opgavebeskrivelse Det lokale erhvervsnetværk, Share & Connect skulle have designet og programmeret sin nye hjemmeside, hvor de ville kunne have mulighed
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,
Lad 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