Præsentation er lastning. Vent venligst

Præsentation er lastning. Vent venligst

Join.me/webkursus. * Vi kan nu ramme de html-elementer vi vil… * Lad os få placeret vores “kasser”/strukturelle elementer * Dertil bruger vi en række.

Lignende præsentationer


Præsentationer af emnet: "Join.me/webkursus. * Vi kan nu ramme de html-elementer vi vil… * Lad os få placeret vores “kasser”/strukturelle elementer * Dertil bruger vi en række."— Præsentationens transcript:

1 Join.me/webkursus

2 * Vi kan nu ramme de html-elementer vi vil… * Lad os få placeret vores “kasser”/strukturelle elementer * Dertil bruger vi en række inline-block-regler * Inline-block elementer opfører sig som inline elementer, * position, størrelse, margin, padding mm., kan sættes på inline-block elementeter

3 * Vi kan nu ramme de html-elementer vi vil… * Lad os få placeret vores “kasser”/strukturelle elementer * Dertil bruger vi en række inline-block-regler

4 1 23 45

5 1 2

6

7

8 Del altid op i enten rækker eller kolonner

9 Aldrig rækker og kolonner på en gang…

10 …lav 3 rækker og derefter 2 kolonner

11 Aldrig rækker og kolonner på en gang…

12 …lav 2 kolonner og derefter 3 rækker

13 Hvilken løsning er den korrekte?

14 Ingen af dem!

15 Der er kolonner og rækker inden for samme element!

16 Eksempel:

17 Del først op i rækker

18

19 Del derefter den midterste række op i kolonner

20

21 Del derefter den højre kolonne op i 2 rækker

22

23

24 #wrapper #content section footer header nav article aside

25 wrapper header content nav section article aside footer header nav article aside

26 footer header nav article aside

27 * Beslut dig for hvilken inddeling af dit site der er den bedste. Overvej hvilke block og inline elementer * Inddel indholdet af dit portfolio-site i “kasser” og navngiv dine elementer (se slide 24) * Lav en plan for din html struktur (se slide 25) * Foretag evt. ændringer af din html struktur (se slide 26)

28 block inline footer header nav article aside

29 * Height & width * Margin * Padding * Border http://www.w3schools.com/css/css_boxmodel.asp

30

31

32

33

34 * Firebug til Firefox * Firefox Tilt * Udviklerværktøjer til chrome

35 * w3schools reference: http://www.w3schools.com/cssref/default.asp * css zen garden: http://www.csszengarden.com/ * css validator: http://jigsaw.w3.org/css-validator/validator

36 Byg videre på dit site, så: * Elementerne er positioneret korrekt, herunder padding og margin * Teksten har den ønskede størrelse, type og farve * Farverne er som ønsket * Du har de rette baggrundsbilleder Afleveres i Fronter som link til index.html i din dag 6 mappe. Deadline i morgen (tirsdag) kl. 23.59.


Download ppt "Join.me/webkursus. * Vi kan nu ramme de html-elementer vi vil… * Lad os få placeret vores “kasser”/strukturelle elementer * Dertil bruger vi en række."

Lignende præsentationer


Annoncer fra Google