Web дизајн (it), део 7, школска 2010 11, триместар 3 ICT Skola, Beograd

1. Web Дизајн (Internet)
студијски програм Интернет
Технологије
Никола Рељин – Интернет, Висока ICT Школа

2. CSS 3
приказ садржаја
Никола Рељин – Интернет, Висока ИКТ Школа, 2008-2009.

3. Ротација елемента
●ротација за 30 степени
●div
{
transform:rotate(30deg);
}
●било који елемент се ротира

4. Ивице (border)
●подешавање закривљености, сенке, и
слике на ивицама
●border-radius
●box-shadow
●border-image

5. Ивице (border)
●div{ border:2px solid; border-radius:25px; -moz-border-radius:
25px; /*FF 3.6*/ border-image:url(border.png) 30 30
round; -moz-border-image:url(border.png) 30 30 round; /*
FF*/ -webkit-border-image:url(border.png) 30 30 round; /*
Safari and Chrome */}
●закривљени елемент, са радијусом од 25 пиксела
●ивица дебљине 2 пиксела
●по ивици, нацртана слика

6. Приказ текста
●измена прелома текста
●p {word-wrap:break-word;}
●текст ће се преломити чак и на дугим
речима (CSS2 не дозвољава то)

7. Приказ текста
●измена густине текста
●@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot')
format("opentype"); /* IE */
}
●дефинисање фонта, путем TTF (сви
други), односно EOT (само за IE)

8. текст у више колона
●div{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
●креирамо 3 колоне за приказ садржаја
●за сада морамо да ставимо код за сваки од browser-a
●CSS3: column-count:3;

9. текст у више колона
●.newspaper{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-moz-column-rule-style:dotted; /* Firefox */
-webkit-column-rule-style:dotted; /* Safari and Chrome*/
column-rule-style:dotted;
}
●3 колоне, размак 40px, линија између испрекидана

10. анимација
●div{
position:relative;
animation-name:animacija1; animation-duration:5s;
animation-timing-function:linear;animation-delay:
2s; animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
-webkit-animation-name:animacija1; -webkit-animation-duration:
5s; -webkit-animation-timing-function:linear;
-webkit-animation-delay:2s; -webkit-animation-iteration-count:
infinite; -webkit-animation-direction:alternate;
-webkit-animation-play-state:running;}
●анимација која се понавља, сваких 2s, у разним
смеровима..

11. Дизајн сајта
правило "трећина"
Никола Рељин – Интернет, Висока ИКТ Школа, 2008-2009.

12. Правило 1/3
●сајт поделимо на 9 целина, замишљеним линијама
●потребно је да центар пажње буде у пресеку линија у
централном делу

13. Примери пар сајтова
●http://soundcitizen.com
●http://www.spin.com/
●http://www.rollingstone.com/
●http://www.bbc.co.uk/
●посматраћемо дизајн на основу тих линија
●најважнији елементи стране:
oкорисни садржај
oнавигација
oрекламе
osocial networking (Facebook, Twitter,..)- share/like

14. Комерцијални сајт
●сајт може бити комерцијални - најважније су рекламе
и новац зарађен на сајту

15. Social (networking) сајт
●сајт може бити комерцијални - најважније су рекламе
и новац зарађен на сајту
●

16. Информативни сајт
●главна је информација, тј линкови ка другим
информацијама на сајту
●

17. неформални сајт
●представља сајт на ком се правимо важни..
●порадићемо на том дизајну

18. Питања и материјали
●Користити email:nikola.reljin@ict.edu.rs
●На сајту школе, информације о
предмету:http://www.ict.edu.rs/studiranje/predmet
i/internet
●http://dokumenti.ict.edu.rs
●На фајл серверу Школе:fileserverinternet