opsam ling fra sidst

Transkript

1 Opsam ling fra sidst

2 Den rette tilgang til HTML og CSS Eksperimentér Tænk logisk Detaljerne betyder noget Find inspiration/information på nettet

3 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

4 kom muni kation

5

6 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...?

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

8 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.

9 Lidt inspiration

10 navi gation

11

12 Man skal kunne Se hvor man er Hvor man kan komme hen navigation Ved hjælp af bl.a. typografi farver placering

13

14 INTRO DUKTION TIL CSS

15 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

16 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

17 Farver i slides CSS kode HTML kode

18 XHTML og CSS Det strukturelle lag og præsentationslaget er i hver sit dokument og er skrevet med hver sin syntaks

19 At linke fra XHTML-fil til CSS-fil I

20 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 />

21 At linke fra XHTML-fil til CSS-fil III

22

23 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

24 Syntaksen i CSS II

25 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

26

27 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

28

29 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

30 typo grafi

31 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

32 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;

33 font-style Definerer om fonten skal stå med kursiv Eksempel h2 { font-family: Times New Roman, serif; font-style: oblique; }

34 Text-transform h1 { text-transform: uppercase; } så bliver teksten skrevet med store bogstaver

35 Font-weight Bestemmer hvor fed fonten skal være. Den kan være normal eller bold. eksempel p { font-weight: bold; }

36 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; }

37 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

38 text-align Angiver, hvordan teksten skal justeres: Right Left Center Justify (lige margen) eksempel h1 { } text-align: center;

39 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:

40 farver

41 Farver i css css Egenskaber color background-color: Forskellige måder at angive farveværdier på RGB Hexadecimaler Konstanter

42 RGB Forkortelse for Red Green Blue Hver farve kan ligge i intervallet eksempel: h1 { color: rgb(109, 46, 108); }

43 Hexadecimaler Læs mere: eksempel h1 { color: #ff9900; }

44 # # # # # # # # # #AA00AA #BB00BB #CC00CC #DD00DD #EE00EE #FF00FF RGB Colour Codes # # # # #00CC00 #00FF00 # # # # #00CC33 #00FF33 # # # # #00CC66 #00FF66 # # # # #00CC99 #00FF99 #0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC #0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF # # # # #33CC00 #33FF00 # # # # #33CC33 #33FF33 # # # # #33CC66 #33FF66 # # # # #33CC99 #33FF99 #3300CC #3333CC #3366CC #3399CC #33CCCC #33FFCC #3300FF #3333FF #3366FF #3399FF #33CCFF #33FFFF # # # # #66CC00 #66FF00 # # # # #66CC33 #66FF33 # # # # #66CC66 #66FF66 # # # # #66CC99 #66FF99 #6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC #6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF # # # # #99CC00 #99FF00 # # # # #99CC33 #99FF33 # # # # #99CC66 #99FF66 # # # # #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 # # # # # # # # #AA0000 #BB0000 #CC0000 #DD0000 #EE0000 #FF0000 # # # # # # # # # #00AA00 #00BB00 #00CC00 #00DD00 #00EE00 #00FF00 # # # # # # # # # #0000AA #0000BB #0000CC #0000DD #0000EE #0000FF # # # # # # # # # #00AAAA #00BBBB #00CCCC #00DDDD #00EEEE #00FFFF Web-safe Colours # Black # Silver #C0C0C0 Maroon # Red #FF0000 Green # Lime #00FF00 Navy # Blue #0000FF HTML Named Colours # # # # # # # # # #AAAA00 #BBBB00 #CCCC00 #DDDD00 #EEEE00 #FFFF00 Gray # White #FFFFFF Purple # Fuchsia #FF00FF Olive # Yellow #FFFF00 Teal # Aqua #00FFFF FF EE DD CC BB AA Hex - Dec Conversion Available free from AddedBytes.com

45 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):

46 DIV OG SPAN

47 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

48

49 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

50 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

51 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:

52 THE BOX MODEL

53 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.

54 The box model Ii

55 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

56 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

57 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:

58 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

59 Eksempel:

60 Border II Border-width: Angiver bredden på border

61 Eksempel:

62 Border III Border-color: Angiver farven på border

63 Eksempel:

64 Margins Margins: Området, der ligger udenom border Man behøver ikke angive en margin

65 Display Et lille tip, hvis man eksemplevis vil have sin menu til at stå vandret.

66 FLOATING OG POSI TIONING

67 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.

68 Floating Image Man kan bryde det normale flow vha floating Man kan fx få billedet og tekstblokke til at floate.

69 Floating Text

70 Clearing Når man har brugt float wrapper teksten automatisk omkring det floatede element. Hvis man vil undgå dette kan man bruge clear

71 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

72 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

73 Absolut Positionering I Relativt til hjørnerne i den omgivende blok Elementet flyttes fra dokumentets normale flow

74 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.

75 Absolut Positionering IiI

76 Relativ Positionering Relativt til elementets oprindelige position i det normale flow Den oprindelige plads i dokumentet bevares

77 Links Nettekst raad/netsprog/tjek.html usability Et kap. fra Don t Make me Think af Steve Krug: com/chapter.html Css