Веб-сайты жобалау. Информатика, 10 сынып, презентация.

Веб-сайтты жобалау

Оқу мақсаттары

“дизайн” және “қолайлылық” ұғымдарын түсіндіру

ақпаратты қабылдау қағидаларының жобада қалай жүзеге асыруға болатынын түсіндіру

Бағалау критерийлері

Веб –парақ жобалауда үштік ережені қолдана алады.

Веб-страницаларды жобалау кезінде дұрыс құрылымды пайдаланады

Кілттік сөздер

Веб-дизайн

Үштік ережесі

Түс схемалары

Веб-дизайн — информативтік интернет желісінің объектілерін әзірлеуге және ресімдеуге бағытталған, жоғары сапалы және эстетикалық сапаны қамтамасыз етуге арналған графикалық дизайнның түрі

Сіздің ойынша жақсы жобалаған сайттың сапасы қандай болуы керек?

Веб-дизайн

Сізге веб-параққа ақпаратты тиімді түрде беруге мүмкіндігін беретін бірнеше қағидаттар бар

Үштік ережесі

Бұл әдіс сурет салғанда, фотосреттерде, дизайнда қолданады.

Сурет 9 бірдей бөлікке

бөлінеді

Үштік ережесі

Бұл әдіс сурет салғанда, фотосреттерде, дизайнда қолданады.

Суреттің маңызды бөліктерін бөлінген сызықтардың бойында немесе қиылысында орналасуы қажет

Үштік ережесі

Бұл әдіс сурет салғанда, фотосреттерде, дизайнда қолданады.

Осылайша назар маңызды бөліктерге ауысады

Осылайша веб-cайтқа элементтерді орналастыруға болады

Үштік ережесі

Түстік схемалар

Монохроматикалық

Аналогтік

Комплементарлық

Монохроматикалық

Бұл түстік схема 1 түске ғана негізделген.

Бұр түстің әртүрлі түрі, реңі қолданылады.

Аналогтік

Аналогтік түс–

Бір біріне шеңбер бойында жақын орналасқан түстер

Комплементарлық

Комплементарлық түс – шеңберде бір біріне қарама қарсы орналасқан түстер

Практикалық жұмыс (Қалыптастырушы бағалау жұмысы)

Төмендегі платформалардың біреуін таңдап, құрастырыңыз.

(Notepad++, Wix.com, Kompozer)

Сайт құрастыруда бүгін талқылаған принциптерді қолданыңыз

Рефлексия

веб-дизайн деген не?

веб-сайт жобалаудың ықандай принциптерін бүгін үйрендіңіз?

Қолданылған әдебиеттер:

https://ru.wikipedia.org/wiki/%D0%92%D0%B5%D0%B1-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD

https://en.wikipedia.org/wiki/Monochromatic_color

http://www.unac.co/what-is-an-analogous-color-scheme/

https://www.sitepoint.com/using-color-schemes-in-mobile-ui-design/