html, css i javascript web tehnologije - 4. predavanje - startit.rs
TRANSCRIPT
HTML, CSS i JAVASCRIPTWEB TEHNOLOGIJE - PREDAVANJE 4.
SEEICT - STARTIT CENTAR
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
SLIKE - KAO POZADINE ELEMENATA
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;
}
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
HTML ELEMENTI - VELIČINA
WIDTH I HEIGHT - BLOCK ELEMENTI
article.enterprise {width : 100px;height : 300px
} HEIGHT
WIDTH
HTML ELEMENTI - WIDTH I HEIGHT
HEIGHT
WIDTHMARGIN PADDING
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!
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
Index.html:<a class=’contact’ href=”mailto:[email protected]”>Pošaljite nam Email</a>
Style.css:a.contact {
background: goldwidth : 200px;height: 100px;
}
HTML ELEMENTI - ŠIRINA I VISINA
WIDTH I HEIGHT SVOJSTVA SE IGNORIŠU KOD INLINE ELEMENATA!
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 širina i visina
ul.gallery li {display : inline-block;
}
INLINE-BLOCK : PRAKTIČNO REŠENJE ZA ELEMENTE KOJI SE SLAŽU JEDAN DO DRUGOG
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 POZICIJE ELEMENTA
MAIN ARTICLE
QUOTE
RELATIVNO POZICIONIRANJE
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
NAVIGACIJA (MENI) NA STRANI - REŠENJE!
NAVIGACIJA (MENI) NA STRANI - REŠENJE!
APSOLUTNO POZICIONIRANJE - ELEMENT NE UTIČE NA DRUGE ELEMENTE
NAV
SECTION.CONTENT
UL.MENUul.menu {
position : absolute;left : 90px;top : 20px;
}
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”
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;
}
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;
}
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;
}
RESPONSIVE DESIGN - CSS KOJI SE PRILAGOĐAVA VELIČINI EKRANA
● 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?
Č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...
VEŽBA - WEBSITE BUILD!
● 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
● 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
HVALA VAM NA PAŽNJI!PITANJA?