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 åbne vinduer: cmd I på Mac crtl I på PC Opdater i browseren fn f5 på Mac f5 på PC
kom muni kation
Afsender: Fx. et galleri, museum, universitet, bibliotek el. andet. Hvordan vil du fremstå: seriøs, underholdende, undervisende, informerende, moderne, eksklusiv, international...? Budskab/målsætning: Hvad er det I vil med dette website? Hvad skal brugerne have ud af at besøge jeres website? Skal de underholdes, skal de lære noget, skal de finde information, skal de købe noget...?
Modtager/Målgruppe: Hvem er det I henvender jer til? - Unge, turister, studerende, kunstkendere og købere, Er målgruppen bred eller smal? Mediet (web/ Hypertext): Forskellige medier kan forskellige ting. Det gælder bl.a. om at udnytte de muligheder mediet byder på. Hvordan vælger I at bruge mediet.
Et godt råd Træf valg for brugeren Proriter vigtig information. Guide brugeren igennem websietet (fx via interne links) Forsiden fremhæv gerne information fra sitet, der kan guide brugeren videre.
Lidt inspiration http://arken.dk/ http://tilbygningen.dk/ http://www.tomchristoffersen.dk/ http://www.skivekunstmuseum.dk/ http://www.wooloo.org/ http://netfilmmakers.dk/ http://hyperform.dk/
navi gation
Man skal kunne Se hvor man er Hvor man kan komme hen navigation Ved hjælp af bl.a. typografi farver placering
http://www.arken.dk/
INTRO DUKTION TIL CSS
Hvad er CSS CSS er W3C standarden for at definere præsentationen af dokumenter skrevet i XHTML CSS er et separat sprog med sin egen syntaks CSS er et stort sprog vi giver nogle basisredskaber Det tager tid at lære, men det kan blive et stærk redskab
Fordele ved CSS Man har bedre kontrol Man kan ændre mange sider på én gang Siden loader hurtigere (Næsten) Alle browsere understøtter CSS www.csszengarden.com
Farver i slides CSS kode HTML kode
XHTML og CSS Det strukturelle lag og præsentationslaget er i hver sit dokument og er skrevet med hver sin syntaks
At linke fra XHTML-fil til CSS-fil I
At linke fra XHTML-fil til CSS-fil II Linket til CSS-filen skrives i headeren på dine XHTML-filer vha følgende kode <link href= style.css rel= stylesheet type= text/css /> Linket skal være en relativ sti ligesom ved billeder og interne links Dvs. på undersiderne skal man gå ét mappeniveau op <link href=../style.css rel= stylesheet type= text/css />
At linke fra XHTML-fil til CSS-fil III
Syntaksen i CSS I Selector: Vælger det HTML-element, der skal styles (h1, p, a, img osv.) Egenskab: Den egenskab, man vil tildele til sit element fx font-size, font-family, color, border osv. Værdi: Afhænger af hvilken egenskab, man har valgt. Fx farve, målenhed, forud definerede værdier
Syntaksen i CSS II
Præcisering af selectorer Man kan præcisere sin selector og dermed præcisere, hvilket element, man vil style Kun de a-elementer, som er indeni li-elementer får tilskrevet nedenstående egenskaber og værdier
Arv i CSS Som hovedregel arves egenskaber som font, color, style Egenskaber som margin, border osv. arves ikke Jo mere specifik en egenskab er, des mere vægt får den Eksempler: Styling af p er mere specifik end styling af body Styling af a er mere specifik end styling af p
Gode råd Eksperimentér Find inspiration på nettet Brug løs af vores cheat-sheet Brug kode fra øvelserne og skift værdierne ud
typo grafi
Fontfamilier Man kan i css angive hvilken font/skrifttype, man vil bruge til sin tekst. Font-familie Arial Verdana Times New Roman (sættes i citationstegn, fordi der er mellemrum) Georgia Generisk font-familie (Grupper af fontfamilier med ensartet udtryk) sans-serif serif
Font-family Egenskaben font-family benytts til at lave en prioriteret liste af fonte, sådan at hvis den første ikke er installeret på brugerens computer, vil det være den næste på listen, der bliver vist. eksempel h1{ font-family: arial, verdana, sans-serif; } h2{ } font-family: Times New Roman, serif;
font-style Definerer om fonten skal stå med kursiv Eksempel h2 { font-family: Times New Roman, serif; font-style: oblique; }
Text-transform h1 { text-transform: uppercase; } så bliver teksten skrevet med store bogstaver
Font-weight Bestemmer hvor fed fonten skal være. Den kan være normal eller bold. eksempel p { font-weight: bold; }
font-size Bestemmer størrelsen for en font. Der findes forskellige måder at angive størrelse på, men vi vil på dette kursus anbefale jer at bruge pixels (px). Eksempel h1 { font-size: 50px; }
Sammenskrivning Man kan skrive de forskellige egenskaber sammen: eksempel p { } font-family: Arial, Verdana, sans-serif; font-style: italic; font-weight: bold; font-size: 12 px; Læs evt. mere http://www.html.dk/tutorials/css/lektion4.asp#font-family
text-align Angiver, hvordan teksten skal justeres: Right Left Center Justify (lige margen) eksempel h1 { } text-align: center;
Et par andre text-decoration h1 { } text-decoration:underline; Man kan også sætte text-decoration til none, fx hvis man ikke vil have et link understreget, som default. letter-spacing Angiver afstanden mellem bogstaverne. h1 { } letter-spacing: 6px; Læs evt. mere: http://www.html.dk/tutorials/css/lektion5.asp
farver
Farver i css css Egenskaber color background-color: Forskellige måder at angive farveværdier på RGB Hexadecimaler Konstanter
RGB Forkortelse for Red Green Blue Hver farve kan ligge i intervallet 0-255 eksempel: h1 { color: rgb(109, 46, 108); }
Hexadecimaler Læs mere: http://da.wikipedia.org/wiki/hexadecimale_talsystem eksempel h1 { color: #ff9900; }
#110011 #220033 #330033 #440044 #550055 #660066 #770077 #880088 #990099 #AA00AA #BB00BB #CC00CC #DD00DD #EE00EE #FF00FF RGB Colour Codes #000000 #003300 #006600 #009900 #00CC00 #00FF00 #000033 #003333 #006633 #009933 #00CC33 #00FF33 #000066 #003366 #006666 #009966 #00CC66 #00FF66 #000099 #003399 #006699 #009999 #00CC99 #00FF99 #0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC #0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF #330000 #333300 #336600 #339900 #33CC00 #33FF00 #330033 #333333 #336633 #339933 #33CC33 #33FF33 #330066 #333366 #336666 #339966 #33CC66 #33FF66 #330099 #333399 #336699 #339999 #33CC99 #33FF99 #3300CC #3333CC #3366CC #3399CC #33CCCC #33FFCC #3300FF #3333FF #3366FF #3399FF #33CCFF #33FFFF #660000 #663300 #666600 #669900 #66CC00 #66FF00 #660033 #663333 #666633 #669933 #66CC33 #66FF33 #660066 #663366 #666666 #669966 #66CC66 #66FF66 #660099 #663399 #666699 #669999 #66CC99 #66FF99 #6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC #6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF #990000 #993300 #996600 #999900 #99CC00 #99FF00 #990033 #993333 #996633 #999933 #99CC33 #99FF33 #990066 #993366 #996666 #999966 #99CC66 #99FF66 #990099 #993399 #996699 #999999 #99CC99 #99FF99 #9900CC #9933CC #9966CC #9999CC #99CCCC #99FFCC #9900FF #9933FF #9966FF #9999FF #99CCFF #99FFFF #CC0000 #CC3300 #CC6600 #CC9900 #CCCC00 #CCFF00 #CC0033 #CC3333 #CC6633 #CC9933 #CCCC33 #CCFF33 #CC0066 #CC3366 #CC6666 #CC9966 #CCCC66 #CCFF66 #CC0099 #CC3399 #CC6699 #CC9999 #CCCC99 #CCFF99 #CC00CC #CC33CC #CC66CC #CC99CC #CCCCCC #CCFFCC #CC00FF #CC33FF #CC66FF #CC99FF #CCCCFF #CCFFFF #FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00 #FF0033 #FF3333 #FF6633 #FF9933 #FFCC33 #FFFF33 #FF0066 #FF3366 #FF6666 #FF9966 #FFCC66 #FFFF66 #FF0099 #FF3399 #FF6699 #FF9999 #FFCC99 #FFFF99 #FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC #FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #FFFFFF #110000 #220000 #330000 #440000 #550000 #660000 #770000 #990000 #AA0000 #BB0000 #CC0000 #DD0000 #EE0000 #FF0000 #001100 #002200 #003300 #004400 #005500 #006600 #007700 #008800 #009900 #00AA00 #00BB00 #00CC00 #00DD00 #00EE00 #00FF00 #000011 #000022 #000033 #000044 #000055 #000066 #000077 #000088 #000099 #0000AA #0000BB #0000CC #0000DD #0000EE #0000FF #001111 #002222 #003333 #004444 #005555 #006666 #007777 #008888 #009999 #00AAAA #00BBBB #00CCCC #00DDDD #00EEEE #00FFFF Web-safe Colours #880000 Black #000000 Silver #C0C0C0 Maroon #800000 Red #FF0000 Green #008000 Lime #00FF00 Navy #000080 Blue #0000FF HTML Named Colours #111100 #222200 #333300 #444400 #555500 #666600 #777700 #888800 #999900 #AAAA00 #BBBB00 #CCCC00 #DDDD00 #EEEE00 #FFFF00 Gray #808080 White #FFFFFF Purple #800080 Fuchsia #FF00FF Olive #808000 Yellow #FFFF00 Teal #008080 Aqua #00FFFF FF EE DD CC BB AA 99 88 255 238 221 204 187 170 153 136 - - - - - - - - 77 66 55 44 33 22 11 00 119 102 85 68 51 34 17 00 - - - - - - - - Hex - Dec Conversion Available free from AddedBytes.com
Konstanter Prædefinerede farver. eksempel h1{ color: white; background-color: maroon; } Læs mere om farver og baggrund (bl.a. hvordan man indsætter baggrundsbilleder): http://www.html.dk/tutorials/css/lektion3.asp
DIV OG SPAN
Div id i XHTML-dokumentet <div id> </div> div-elementet identificerer en blok af tekst i HTML-dokumentet div er meget brugbart i forbindelse med CSS, fordi man kan style blokke af sammenhængende indhold. id Giver et unikt navn til et specifikt element Id giver mulighed for at style unik blok af sammenhængende indhold
Styling af <div id> i css dokumentet Når man i CSS skal style et element, som har et unikt id i XHTMLdokumentet bruger man #-symbolet efterfulgt af id-navnet
Span class i HTML <span> </span> Identificerer inline elementer Inline elementer er inden i blok-elementer som fx p, ul, ol osv. class Grupperer mange elementer som indholdsmæssigt hænger sammen Man kan efterfølgende style alle disse elementer på samme måde Man kan fx give alle telefonnumre på en side samme class
Styling af <span class> i css Når man i CSS skal style et element, som man har givet en class i XHTMLdokumentet bruger man. efterfulgt af class-navnet:
THE BOX MODEL
The box model I Et af de grundlæggende koncepter i CSS Browsere ser alle elementer som indeholdt i en boks. Man kan tildele en boks egenskaber som fx height, width, borders, margins, padding, background og flytte dem rundt på siden.
The box model Ii
The box model Iii Content area: Hjerte-elementet i boksen Padding: Området mellem indholdsområdet og border Border: en linie som omgiver content area og padding Margin: den luft der er mellem elementet og andre elementer
Width og height width: bruges til at definere bredden på en blok eller et billede brug måleenheden px til at definere bredden height: bruges til at definere højden på en blok eller et billede - brug måleenheden px til at definere højden width og height definerer content area IKKE padding, border og margin, der skal lægges til derudover
Padding padding: angiver området mellem content area og border Angives med længdemål vi anbefaler, at I bruger px (forkortelse for pixels) Eksempel:
Border I Border: er en kant, som man kan sætte rundt om sit content area og padding-område Border-style: Angiver stilen på border
Eksempel:
Border II Border-width: Angiver bredden på border
Eksempel:
Border III Border-color: Angiver farven på border
Eksempel:
Margins Margins: Området, der ligger udenom border Man behøver ikke angive en margin
Display Et lille tip, hvis man eksemplevis vil have sin menu til at stå vandret.
FLOATING OG POSI TIONING
Det normale flow Blok-elementer fremtræder i browseren i samme rækkefølge, som de står i koden dvs fra top til bund Floating og positioning kan ændre det normale flow.
Floating Image Man kan bryde det normale flow vha floating Man kan fx få billedet og tekstblokke til at floate.
Floating Text
Clearing Når man har brugt float wrapper teksten automatisk omkring det floatede element. Hvis man vil undgå dette kan man bruge clear
Positionering I I kommer til at arbejde med to slags positionering Absolut positionering: Elementet fjernes fra det normale flow og placeres i forhold til den omgivende blok-element. Relativ positionering: Flytter elementet i forhold til dets originale placering
Positionering II Generelt om at angive position Man bruger egenskaberne top, right, bottom, left. Vi anbefaler, at I angiver positionering i pixels med måleenheden px Hvis man skal flytte et billede 50px ned
Absolut Positionering I Relativt til hjørnerne i den omgivende blok Elementet flyttes fra dokumentets normale flow
Absolut Positionering Ii Hvad måler man ud fra? Et element indeholdt i et andet element, der er positioneret vha positioning positioneres relativt til det omgivende element Et element som ikke er indeholdt i et element, der er positioneret positioneres relativt til <html> element dvs til sidens øverst højre hjørne Et element der er positioneret bliver reference for alle de elementer, som er inden i denne blok.
Absolut Positionering IiI
Relativ Positionering Relativt til elementets oprindelige position i det normale flow Den oprindelige plads i dokumentet bevares
Links Nettekst http://web.archive.org/web/20070609105136/www.netsteder.dk/ raad/netsprog/tjek.html usability Et kap. fra Don t Make me Think af Steve Krug: http://www.sensible. com/chapter.html Css www.w3schools.com/css/css_reference.asp http://www.html.dk/tutorials/css/