Web-сайтты жобалау және әзірлеу

Сабақтың кезеңі/уақыты

Педагогтің әрекеті

Білім алушылардың әрекеті

Бағалау

Ресурстар

Сабақтың басы

15 мин.

1.Сәлемдесу, оқушыларды түгелдеу.

Үй тапсырмасын тексеру.

Білім алушыларды жұпқа бөліп , бір-бірінің үй тапсырмасын тексеру.

Бүгінгі сабағымыз сәтті өтуі үшін барлығымыз жылы атмосфера қалыптастырайық. Қолымыздағы кубикты лақтыру арқылы бір-бірімізге сәттілік тілейік!

Сабақтың мақсаты мен күтілетін нәтижелерін түсіндіру.Сайт ұғымын, құрылымын, маңыздылығын талқылау. Қажетті құрал-жабдықтарды түсіндіру (HTML, CSS, дизайн құралдары).

- Студенттерге танымал сайттардың мысалдарын көрсету (мысалы: YouTube, Amazon).
- 'Сайт дегеніміз не?' сұрағы бойынша ой қозғау.

Веб-сайтты жобалау және әзірлеу негіздері бойынша дәрісті тыңдау.

HTML және CSS тілдерінің синтаксисі мен қолдану тәсілдерін үйрену.

Веб-сайтты жобалау және әзірлеу негіздері бойынша сұрақтарға дұрыс жауап беру-5 балл

HTML және CSS тілдерінің синтаксисі мен қолдану тәсілдерін түсіну деңгейі-5балл

Веб-сайтты жобалау және әзірлеу бойынша оқу құралдары мен нұсқаулықтар.

Негізгі бөлім

40 мин

Сайт дизайнын жасау принциптері (UI/UX). Басты беттің құрылымын жобалау.HTML/CSS арқылы сайт жасау негіздері.

1-тапсырма: Canva немесе Figma арқылы сайттың басты бетінің дизайнын жасап, макетін ұсыну.

2-тапсырма: Дайын макет негізінде HTML құрылымын жазу.

Сайттың басты бетінің макетін жасау.

HTML және CSS қолданып, басты бетті құру және оны браузерде тексеру.

Сайт дизайнының эстетикалық және функционалдық сапасын қамтамасыз ету.

Сайттың басты бетінің макетін жасау қабілеті.-10балл

HTML және CSS қолданып, басты бетті құру және оны браузерде дұрыс көрсету.-10балл

Сайт дизайнының эстетикалық және функционалдық сапасы-10балл

HTML және CSS бойынша онлайн-оқулықтар мен бейнесабақтар.

Жаттығу: интерактивті

30мин

Сайт мазмұнына контент қосу.
Тақырыптық бейнематериалдар немесе суреттерді қолдану.

3-тапсырма: HTML және CSS арқылы басты бетке сурет, мәтін, батырма қосу.

Сайттың басты бетіне сурет , мәтін және батырма қосу үшін код жазу .

HTML және CSS кодтарының дұрыстығы және тиімділігі-10 балл

Код редакторлары: Visual Studio Code, Sublime Text.

Практикалық жұмыс

50мин

Сайттың толық жұмыс істейтін басты бетін кодтау.CSS арқылы стиль беру (фон, түстер, шрифт).

4-тапсырма: Bootstrap компоненттері арқылы навигациялық панельді қосу.
5-тапсырма: Басты бетті толық аяқтап, браузерде көрсету.

Bootstrap фреймворкін пайдаланып, навигациялық панел құру . Жасалған веб-бетті браузерде тексеру және қателерді түзету.

Веб-беттің визуалды тартымдылығы және функционалдығы-20 балл

Bootstrap компоненттерін дұрыс қолдану-20 балл

Тапсырмаларды уақытында және сапалы орындау-10балл

Графикалық редакторлар: Figma, Adobe XD.

Қорытынды

15мин

Жасалған жобаларды қорғау

Сабақ рефлексиясы: 'Не үйрендім?', 'Не қиын болды?' сұрақтарына жауап беру.

"Стикерлер"

Білім алушылар сіздің сабақты түсінуіңізге сәйкес стикерлерді жапсырды.

Білім алушылар түсініктемелері бар стикерлерді іліп қойды.

Үй тапсырмасы:

- Сайтқа қосымша 1 бет жасау ('Байланыс', 'Біз туралы' немесе 'Қызметтер').
- Жасалған жұмысты Padlet тақтасына жүктеу.

Бір-бірінің жұмыстарын бағалап, кері байланыс беру.

Кері байланыс:

"Стикерлер"