Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML, CSS i JAVASCRIPT
WEB TEHNOLOGIJE - PREDAVANJE 4.
SEEICT - STARTIT CENTAR
PROGRAM PREDAVANJA I VEŽBI
● Slike kao pozadinska dekoracija elemenata
● Visina i širina “block” elemenata
● Inline-block:...
SLIKE - KAO POZADINE ELEMENATA
SLIKE - KAO POZADINE ELEMENATA
Section.news {
background-image: url(‘brooklyn-museum.png’);
background-position : center c...
SLIKE - KAO POZADINE ELEMENATA
● Background-position: top, right, left, bottom, center
● Background-position: px, %
● Back...
HTML ELEMENTI - VELIČINA
WIDTH I HEIGHT - BLOCK ELEMENTI
article.enterprise {
width : 100px;
height : 300px
} HEIGHT
WIDTH
HTML ELEMENTI - WIDTH I HEIGHT
HEIGHT
WIDTH
MARGIN PADDING
HTML ELEMENTI - WIDTH I HEIGHT
article.news {
width : 400px;
height : 200px;
}
but the company's services and cloud produc...
CSS PRIKAZIVANJE ELEMENATA: INLINE, BLOCK
IMG, A, SPAN - INLINE ELEMENTI
Poznavanje kodiranja je dobra početna
pozicija za...
Index.html:
<a class=’contact’ href=”mailto:office@itdogadjaji.com”>Pošaljite nam Email</a>
Style.css:
a.contact {
backgro...
CSS PRIKAZIVANJE ELEMENATA - PODSEĆANJE : FLOAT
CSS - INLINE, BLOCK ILI… NEŠTO TREĆE?
CSS - INLINE-BLOCK
● Elementi se ređaju jedan pored drugog (slično kao
inline elementi)
● Elementima se može davati fiksna...
CSS - INLINE-BLOCK
INLINE, INLINE-BLOCK, BLOCK - MOĆNI KADA SE PRAVILNO KORISTE
POREDAK HTML ELEMENATA
POREDAK HTML ELEMENATA
QUOTE
RELATIVNO POZICIONIRANJE - ZA FINO PODEŠAVANJE POZICIJE ELEMENTA!
RELATIVNO POZICIONIRANJE
.quote {
position:relative;
top:-30px;
right : 80px;
}
TOP, BOTTOM, LEFT, RIGHT - MODIFIKATORI PO...
RELATIVNO POZICIONIRANJE
RELATIVNO POZICIONIRANJE
● Zgodno kada je potrebno “fino” podešavanje
pozicije nekog elementa
● Nije za kompleksnije raspo...
NAVIGACIJA (MENI) NA STRANI - REŠENJE!
NAVIGACIJA (MENI) NA STRANI - REŠENJE!
APSOLUTNO POZICIONIRANJE - ELEMENT NE UTIČE NA DRUGE ELEMENTE
NAV
SECTION.CONTENT
U...
OSOBINE APSOLUTNOG POZICIONIRANJA
● Top, bottom, left, right - računaju se u odnosu na parent element
● Ne utiče na raspor...
OSOBINE APSOLUTNOG POZICIONIRANJA
ELEMENT POZICIONIRAN U ODNOSU NA BODY
index.html:
<body>
<nav> . . .</nav>
<article> . ....
OSOBINE APSOLUTNOG POZICIONIRANJA
ELEMENT POZICIONIRAN U ODNOSU NA MODAL!
index.html:
<div class=’modal’>
<h1>Modal Title<...
OSOBINE APSOLUTNOG POZICIONIRANJA
APSOLUTNO POZICIONIRAN ELEMENT - ISCRTAVA SE U ODNOSU NA SVOJ RELATIVNI KONTEJNER!
index...
RESPONSIVE DESIGN - CSS KOJI SE PRILAGOĐAVA VELIČINI EKRANA
● Background - CSS svojstvo za kreativne stranice
● Dimenzionisanje elemenata - width i height
● Inline-block kao jednosta...
ČEGA JOŠ SVE IMA A NISMO POMENULI?
● HTML: SVG, VIDEO, OBJECT, Forme, Tabele, RGBA boje…
● CSS Animacije
● HAML, SASS i LE...
VEŽBA - WEBSITE BUILD!
● Prethodne sajtove koje smo radili: CV, Sajt za Piceriju, Blog, Galeriju, Test Sajt
- pregledati i preraditi da koriste s...
● Smashing Magazine - magazin o web designu - https://www.smashingmagazine.com
● A List Apart - Web dizajn magazin - http:...
HVALA VAM NA PAŽNJI!
PITANJA?
Upcoming SlideShare
Loading in …5
×

HTML, CSS i Javascript Web tehnologije - 4. predavanje - Startit.rs

556 views

Published on

Kurs HTML, CSS i Javascript web tehnologija
4. predavanje - Napredni CSS - pozicioniranje elemenata

Kurs je održan u okviru projekta besplatne obuke građana i u organizaciji Startit centra - više informacija na www.startit.rs

Published in: Education
  • Be the first to comment

  • Be the first to like this

HTML, CSS i Javascript Web tehnologije - 4. predavanje - Startit.rs

  1. 1. HTML, CSS i JAVASCRIPT WEB TEHNOLOGIJE - PREDAVANJE 4. SEEICT - STARTIT CENTAR
  2. 2. PROGRAM PREDAVANJA I VEŽBI ● Slike kao pozadinska dekoracija elemenata ● Visina i širina “block” elemenata ● Inline-block: Najbolje od oba sveta ● Raspoređivanje i slaganje elemenata u slojevima
  3. 3. SLIKE - KAO POZADINE ELEMENATA
  4. 4. SLIKE - KAO POZADINE ELEMENATA Section.news { background-image: url(‘brooklyn-museum.png’); background-position : center center; background-repeat : no-repeat; background-color : orange; background-size : cover; }
  5. 5. SLIKE - KAO POZADINE ELEMENATA ● Background-position: top, right, left, bottom, center ● Background-position: px, % ● Background-size: cover, contain ● Background-size: px ● Background-repeat: repeat, repeat-x, repeat-y, no-repeat
  6. 6. HTML ELEMENTI - VELIČINA WIDTH I HEIGHT - BLOCK ELEMENTI article.enterprise { width : 100px; height : 300px } HEIGHT WIDTH
  7. 7. HTML ELEMENTI - WIDTH I HEIGHT HEIGHT WIDTH MARGIN PADDING
  8. 8. HTML ELEMENTI - WIDTH I HEIGHT article.news { width : 400px; height : 200px; } but the company's services and cloud products continue to help generate new revenue. The earnings won't please Wall Street investors though, many of whom were hoping to see Microsoft's stock surge and reclaim its 1999 record. HEIGHT WIDTH ELEMENTIMA SE RETKO ZADAJE FIKSNI HEIGHT - ZBOG SADRŽAJA KOJI NE MOŽEMO DA PREDVIDIMO!
  9. 9. CSS PRIKAZIVANJE ELEMENATA: INLINE, BLOCK IMG, A, SPAN - INLINE ELEMENTI Poznavanje kodiranja je dobra početna pozicija za kvalitetan posao ovih dana. Pročitajte više... H1, P, UL - BLOCK ELEMENTI
  10. 10. Index.html: <a class=’contact’ href=”mailto:office@itdogadjaji.com”>Pošaljite nam Email</a> Style.css: a.contact { background: gold width : 200px; height: 100px; } HTML ELEMENTI - ŠIRINA I VISINA WIDTH I HEIGHT SVOJSTVA SE IGNORIŠU KOD INLINE ELEMENATA!
  11. 11. CSS PRIKAZIVANJE ELEMENATA - PODSEĆANJE : FLOAT
  12. 12. CSS - INLINE, BLOCK ILI… NEŠTO TREĆE?
  13. 13. CSS - INLINE-BLOCK ● Elementi se ređaju jedan pored drugog (slično kao inline elementi) ● Elementima se može davati fiksna širina i visina ul.gallery li { display : inline-block; } INLINE-BLOCK : PRAKTIČNO REŠENJE ZA ELEMENTE KOJI SE SLAŽU JEDAN DO DRUGOG
  14. 14. CSS - INLINE-BLOCK INLINE, INLINE-BLOCK, BLOCK - MOĆNI KADA SE PRAVILNO KORISTE
  15. 15. POREDAK HTML ELEMENATA
  16. 16. POREDAK HTML ELEMENATA QUOTE RELATIVNO POZICIONIRANJE - ZA FINO PODEŠAVANJE POZICIJE ELEMENTA!
  17. 17. RELATIVNO POZICIONIRANJE .quote { position:relative; top:-30px; right : 80px; } TOP, BOTTOM, LEFT, RIGHT - MODIFIKATORI POZICIJE ELEMENTA MAIN ARTICLE QUOTE
  18. 18. RELATIVNO POZICIONIRANJE
  19. 19. RELATIVNO POZICIONIRANJE ● Zgodno kada je potrebno “fino” podešavanje pozicije nekog elementa ● Nije za kompleksnije raspoređivanje elemenata ● Ne menja “tok” strane niti utiče na druge elemente
  20. 20. NAVIGACIJA (MENI) NA STRANI - REŠENJE!
  21. 21. NAVIGACIJA (MENI) NA STRANI - REŠENJE! APSOLUTNO POZICIONIRANJE - ELEMENT NE UTIČE NA DRUGE ELEMENTE NAV SECTION.CONTENT UL.MENU ul.menu { position : absolute; left : 90px; top : 20px; }
  22. 22. OSOBINE APSOLUTNOG POZICIONIRANJA ● Top, bottom, left, right - računaju se u odnosu na parent element ● Ne utiče na raspored okolnih elemenata - browser nije “rezervisao” mesto na strani za njega APSOLUTNO POZICIONIRANJE - ZA ELEMENTE KOJI SE SLAŽU U “SLOJEVIMA”
  23. 23. OSOBINE APSOLUTNOG POZICIONIRANJA ELEMENT POZICIONIRAN U ODNOSU NA BODY index.html: <body> <nav> . . .</nav> <article> . . . </article> <div class=’modal’> . . . </div> </body> Style.css: .modal { position : absolute; left : 40%; top : 20px; }
  24. 24. OSOBINE APSOLUTNOG POZICIONIRANJA ELEMENT POZICIONIRAN U ODNOSU NA MODAL! index.html: <div class=’modal’> <h1>Modal Title</h1> <p class=’body’>One fine body...</p> <a href=’#close’>Close</a> <a href=’#save’>Save Changes</a> <div class=’close’></div> </div> Style.css: .modal { position : absolute; left : 40%; top : 20px; } .close { position : absolute; top : 10px; right : 10px; }
  25. 25. OSOBINE APSOLUTNOG POZICIONIRANJA APSOLUTNO POZICIONIRAN ELEMENT - ISCRTAVA SE U ODNOSU NA SVOJ RELATIVNI KONTEJNER! index.html: <header> <nav> MAIN NAVIGATION </nav> <section class='subnav'> SUBNAVIGATION </section> </header> style.css: header { position:relative; } .subnav { position:absolute; top:30px; }
  26. 26. RESPONSIVE DESIGN - CSS KOJI SE PRILAGOĐAVA VELIČINI EKRANA
  27. 27. ● Background - CSS svojstvo za kreativne stranice ● Dimenzionisanje elemenata - width i height ● Inline-block kao jednostavan alat za raspoređivanje elemenata ● Apsolutno i relativno pozicioniranje ŠTA SMO DANAS NAUČILI?
  28. 28. ČEGA JOŠ SVE IMA A NISMO POMENULI? ● HTML: SVG, VIDEO, OBJECT, Forme, Tabele, RGBA boje… ● CSS Animacije ● HAML, SASS i LESS preprocesori - olakšanje u pisanju HTML-a i CSS-a ● CSS Biblioteke - Normalize.css, Bootstrap, Foundation... ● Responzivni dizajn i FlexBox pozicioniranje ● Kompleksniji CSS selektori i pseudo selectori, tipografija, Email kodiranje, CSS optimizacije, Pisanje CSS-a u velikim projektima, CSS nasleđivanje...
  29. 29. VEŽBA - WEBSITE BUILD!
  30. 30. ● Prethodne sajtove koje smo radili: CV, Sajt za Piceriju, Blog, Galeriju, Test Sajt - pregledati i preraditi da koriste sve pogodnosti novonaučenih stvari: HTML5 tagova i CSS deklaracija ● Intervjuisati preduzetnika koji nema sajt i napraviti mu sajt - od početka ● Slack Channel - kursindjija.slack.com DOMAĆI ZADATAK
  31. 31. ● Smashing Magazine - magazin o web designu - https://www.smashingmagazine.com ● A List Apart - Web dizajn magazin - http://alistapart.com ● Normalize.css - https://necolas.github.io/normalize.css/ ● Twitter Bootstrap CSS Framework - http://getbootstrap.com ● Foundation CSS Framework - http://foundation.zurb.com ● HTML5 Demos - http://codepen.io/ge1doot/pens/popular/ KORISNI LINKOVI
  32. 32. HVALA VAM NA PAŽNJI! PITANJA?

×