Web Дизајн (Internet)

студијски програм Интернет

Технологије

Никола Рељин – Интернет, Висока ICT Школа

CSS 3

приказ садржаја

Никола Рељин – Интернет, Висока ИКТ Школа, 2008-2009.

Ротација елемента

●ротација за 30 степени●div

{transform:rotate(30deg);}

●било који елемент се ротира

Ивице (border)

●подешавање закривљености, сенке, и

слике на ивицама●border-radius●box-shadow●border-image

Ивице (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 пиксела●по ивици, нацртана слика

Приказ текста

●измена прелома текста●p {word-wrap:break-word;}●текст ће се преломити чак и на дугим

речима (CSS2 не дозвољава то)

Приказ текста●измена густине текста●@font-face{

font-family: myFirstFont;src: url('Sansation_Light.ttf'), url('Sansation_Light.eot') format("opentype"); /* IE */}

●дефинисање фонта, путем TTF (сви

други), односно EOT (само за IE)

текст у више колона

●div{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;}

●креирамо 3 колоне за приказ садржаја●за сада морамо да ставимо код за сваки од browser-a●CSS3:  column-count:3;

текст у више колона

●.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, линија између испрекидана

анимација●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, у разним смеровима..

Дизајн сајта

правило "трећина"

Никола Рељин – Интернет, Висока ИКТ Школа, 2008-2009.

Правило 1/3

●сајт поделимо на 9 целина, замишљеним линијама●потребно је да центар пажње буде у пресеку линија у

централном делу

Примери пар сајтова

●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

Комерцијални сајт

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

Social (networking) сајт

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

● 

Информативни сајт

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

● 

неформални сајт

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

Питања и материјали

●Користити email:nikola.reljin@ict.edu.rs

●На сајту школе, информације о предмету:http://www.ict.edu.rs/studiranje/predmeti/internet

●http://dokumenti.ict.edu.rs

●На фајл серверу Школе:\\fileserver\internet