«МАНАП ӨТЕБАЕВ АТЫНДАҒЫ ЖОҒАРЫ ЖАҢА ТЕХНОЛОГИЯЛАР КОЛЛЕДЖІ» МКҚК
|
|
ТЕКСЕРІЛДІ
Кафедра меңгерушісі
___________Н.С. Касымбекова
"____" ___________2024ж.
|
ОҚУ САБАҒЫНЫҢ ЖОСПАРЫ №6
(теориялық немесе өндірістік оқыту)
Модуль /пән атауы
|
ОН 3.3. Контентті басқару жүйесі үшін жеке шаблондар мен плагиндер жасау
|
Сабақ тақырыбы
|
Динамикалық тігінен орналасқан мәзір
|
Жалпы мәліметтер
|
Курс
|
Оқу жылы
|
Тобы
|
Күні
|
III
|
2023-2024
|
ЕТ-03-21
|
|
ЕТ-01-21у
|
|
Сабақ түрі
|
тәжірибелік
|
2. Мақсаты, міндеттері
|
Мақсаты: Динамикалық тігінен орналасқан мәзірді жасау.
Міндеті:
Элементтерді тігінен туралау әртүрлі жолдармен орындалу мүмкіндігін қарастыру.
Әдісті таңдау элемент түріне (блок немесе кірістірілген), оның орналасу түріне, өлшеміне мән беру.
|
3. Оқу-жаттығу процесінде білім алушылар меңгеретін күтілетін нәтижелер және (немесе) кәсіби дағдылар тізбесі
|
1.
|
Сайттарға арналған динамикалық тігінен орналасқан мәзірді жасай алу.
Безендірілген тігінен орналасқан мәзірді жасай алу
|
Қажетті ресурстар
|
Оқу-әдістемелік құрал-жабдықтар, анықтамалық әдебиеттер
|
Дж. Мзерриотт, Joomla! 4.0. Официальное руководство, Питер 2021г.
Виктор Ромашев, CMS WordPress: Система управления содержимым сайта, Питер, 2020г.
Беликова, С. А. Основы HTML и CSS: проектирование и дизайн веб-сайтов: учебное пособие по курсу «Web-разработка» : [16+] / С. А. Беликова, А. Н. Беликов ; Южный федеральный университет. – Ростов-на-Дону ; Таганрог : Южный федеральный университет, 2020. – 176 с. : ил. – Режим доступа: по подписке. – URL: https://biblioclub.ru/index.php?page=book&id=598663.
Бардзелл Джеффри Macromedia Dreamweaver MX 2004 с ASP, ColdFusion и PHP. Из первых рук (+ CD-ROM); Эком - М., 2016. - 560 c.
Бенкен Елена PHP, MySQL, XML. Программирование для Интернета; БХВ-Петербург - М., 2017. - 336 c.
|
Техникалық құралдар, материалдар
|
Бағдарламамен қамтамасыз ету (Joomla, CMS WordPress порталдары және т.б);
Дербес компьютер
Интерактивті тақта
|
5. Сабақтың барысы
|
Ұйымдастыру кезеңі
|
Сәлемдесу, жоқ студенттерді белгілеу, сабаққа назарын аудару
|
Үй тапсырмасын тексеру
|
Өтілген тақырып бойынша бақылау сұрақтарымен тексеру:
Меңзерді жылжыту әсерлері бар тік мәзірді қалай жасайды?
«Метро картасы» стиліндегі тік мәзірді қалай жасайды?
Тақырыбы бар тік мәзірді қалай жасайды?
Белгішелері бар тік мәзірді қалай жасайды?
Суреттері бар тік мәзірді қалай жасайды?
|
Жаңа тақырыпты түсіндіру
|
Сабақтың тақырыбы: Динамикалық тігінен орналасқан мәзір
Элементтерді көлденең және тігінен туралау әртүрлі жолдармен орындалуы мүмкін. Әдісті таңдау элемент түріне (блок немесе кірістірілген), оның орналасу түріне, өлшеміне және т.б.
Егер мәтін бір жолды алып жатса, мысалы, түймелер мен мәзір элементтері үшін:
|
Сабақ бойынша бағалау-өлшеу материалдары, бағалау парақтары, жұмыс дәптері (қағаз және электрондық форматта)
|
Тапсырма №1.
Белгішелері бар тік мәзір
Тапсырма №2.
Суреттері бар тік мәзір
|
6. Үйге тапсырма
|
Дж. Мзерриотт, Joomla! 4.0. Официальное руководство, Питер 2021г
234-235 беттер
|
Дайындаған педагог
|
Темірғали Дәмелі Абайқызы
Т.А.Ә.
__________
(қолы)
|
Жұмыс дәптері №6
Сабақтың тақырыбы: Динамикалық тігінен орналасқан мәзір
Мақсаты: Динамикалық тігінен орналасқан мәзірді жасау.
Міндеті:
Элементтерді тігінен туралау әртүрлі жолдармен орындалу мүмкіндігін қарастыру.
Әдісті таңдау элемент түріне (блок немесе кірістірілген), оның орналасу түріне, өлшеміне мән беру.
Элементтерді көлденең және тігінен туралау әртүрлі жолдармен орындалуы мүмкін. Әдісті таңдау элемент түріне (блок немесе кірістірілген), оның орналасу түріне, өлшеміне және т.б.
Тапсырма №1.
Белгішелері бар тік мәзір
Мәзір белгішелері әр санаттың ауызша сипаттамасын толықтыра отырып, көрнекі тірек жасайды. Белгішелерді көрсету үшін Awesome қаріпін қосу керек. Сондай-ақ кез келген басқа белгіше қаріптерін немесе сурет белгішелерін пайдалануға болады.
Тапсырма №2.
Суреттері бар тік мәзір
Бұл мысал блоктарды жаңа өнімдермен, ұқсас өнімдермен және т.б. жобалау үшін пайдаланылуы мүмкін. интернет-дүкеннің веб-сайты.
Негізгі блок ішіндегі блокты тігінен туралау үшін:
CSS:
.wrapper {position: relative;}
.box {
height: 100px;
position: absolute;
top: 50%;
margin: -50px 0 0 0;
}
Кесте түрі бойынша тік туралау:
Бақылау сұрақтары:
Мәтін бір жолды алып отыруын қалай іске асырамыз?
Негізгі блок ішіндегі блокты тігінен туралау үшін не істейміз?
Кесте түрі бойынша тік туралау қалай жүзеге асырылады?
Блоктың берілген ені мен биіктігі болса және оның негізгі блогының ортасына орналасуы қажет болса не істеледі?
CSS3 түрлендіру арқылы беттің/блоктың ортасында абсолютті орналасу қалай жүзеге асырылады?
Үйге тапсырма: Дж. Мзерриотт, Joomla! 4.0. Официальное руководство, Питер 2021г
10-16 беттер
https://html5book.ru/vertikalnoe-menu/ 2. https://html5book.ru/horizontal-vertical-alignment/
Достарыңызбен бөлісу: |
