![Page 1: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/1.jpg)
Web Дизајн (Internet)
студијски програм Интернет
Технологије
Никола Рељин – Интернет, Висока ICT Школа
![Page 2: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/2.jpg)
CSS 3
приказ садржаја
Никола Рељин – Интернет, Висока ИКТ Школа, 2008-2009.
![Page 3: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/3.jpg)
Ротација елемента
●ротација за 30 степени●div
{transform:rotate(30deg);}
●било који елемент се ротира
![Page 4: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/4.jpg)
Ивице (border)
●подешавање закривљености, сенке, и
слике на ивицама●border-radius●box-shadow●border-image
![Page 5: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/5.jpg)
Ивице (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 пиксела●по ивици, нацртана слика
![Page 6: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/6.jpg)
Приказ текста
●измена прелома текста●p {word-wrap:break-word;}●текст ће се преломити чак и на дугим
речима (CSS2 не дозвољава то)
![Page 7: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/7.jpg)
Приказ текста●измена густине текста●@font-face{
font-family: myFirstFont;src: url('Sansation_Light.ttf'), url('Sansation_Light.eot') format("opentype"); /* IE */}
●дефинисање фонта, путем TTF (сви
други), односно EOT (само за IE)
![Page 8: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/8.jpg)
текст у више колона
●div{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;}
●креирамо 3 колоне за приказ садржаја●за сада морамо да ставимо код за сваки од browser-a●CSS3: column-count:3;
![Page 9: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/9.jpg)
текст у више колона
●.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, линија између испрекидана
![Page 10: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/10.jpg)
анимација●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, у разним смеровима..
![Page 11: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/11.jpg)
Дизајн сајта
правило "трећина"
Никола Рељин – Интернет, Висока ИКТ Школа, 2008-2009.
![Page 12: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/12.jpg)
Правило 1/3
●сајт поделимо на 9 целина, замишљеним линијама●потребно је да центар пажње буде у пресеку линија у
централном делу
![Page 13: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/13.jpg)
Примери пар сајтова
●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
![Page 14: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/14.jpg)
Комерцијални сајт
●сајт може бити комерцијални - најважније су рекламе и новац зарађен на сајту
![Page 15: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/15.jpg)
Social (networking) сајт
●сајт може бити комерцијални - најважније су рекламе и новац зарађен на сајту
●
![Page 16: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/16.jpg)
Информативни сајт
●главна је информација, тј линкови ка другим информацијама на сајту
●
![Page 17: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/17.jpg)
неформални сајт
●представља сајт на ком се правимо важни..●порадићемо на том дизајну
![Page 18: Web дизајн (it), део 7, школска 2010 11, триместар 3](https://reader036.vdocuments.net/reader036/viewer/2022062420/55c99bd3bb61eb680a8b46ff/html5/thumbnails/18.jpg)
Питања и материјали
●Користити email:[email protected]
●На сајту школе, информације о предмету:http://www.ict.edu.rs/studiranje/predmeti/internet
●http://dokumenti.ict.edu.rs
●На фајл серверу Школе:\\fileserver\internet