Планирование "CSS 3 негіздері"

«Рымбек Байсейітов атындағы Семей қаржы-экономикалық колледжі» КМҚК

№11 Сабақ жоспары

  Модуль /пән атауы:  Web бағдарламалау және интернет технологиялары

  Дайындаған педагог: Нұрғалыева А. С.  

  2021 жылғы «28» қаңтар

1.      Жалпы мәліметтер:
Курс, оқу жылы, топ:			ІІІ курс, 2020-2021 оқу жылы, 18 IS-1
Сабақ типі			аралас
2.      Мақсаты,  міндеттер
Оқу сабақтары барысында білім алушылар игеретін кәсіби біліктердің тізбесі			- Студенттерге   HTML құжатқа CSS-ті қосудың 2 тәсілін қолдануды үйрету; - style атрибутының, ID идентификатор мен class-тың көмегімен сайт дизайнын жасай алады.
3.      Сабақты жабдықтау
Оқу-әдістемелік құрал-жабдықтар, анықтамалық әдебиеттер			Дженнифер Роббинс HTML5 CSS3 JavaScript 158-162 беттер.
Техникалық құралдар, материалдар			Дербес компьютер, Sublime text редакторы
4.  Сабақтың барысы
4.1.	Ұйымдастыру 1)     Оқушылармен амандасу 2)     Оқушыларды түгендеу 3)     Сабақтың мақсатымен таныстыру
4.2.	Үй тапсырмасын сұрау. 1.      «Quiziz» қосымшасында жасалынған онлайн тест өту.
4.3.	Жаңа сабақ Курс тақырыбы: CSS стильдерінің каскадтық кестелерін жасайды Сабақ тақырыбы: CSS 3 негіздері
4.4	Жаңа сабақты бекіту Бекіту сұрақтары: 1.      CSS дегеніміз не? 2.      Html құжатқа  CSS-ті қосудың қандай жолдары бар? 3.      Ішкі стильдер кестесі дегеніміз не? 4.      Сыртқы стильдер кестесі дегеніміз ше? 5.      Идентификатор CSS-де және Html-де қалай белгіленеді? 6.      Класс CSS-де және Html-де қалай белгіленеді? 7.      Идентификатор мен Класс-тың айырмашылығы?
4.5.	Студенттерді бағалау.
5.      Сабақ бойынша рефлексия		GOOGLE forms-та Мен нені білемін? Нені үйрендім? Нені білгім келеді? Мен осы сабақтан өту арқылы нені жасай аламын? Сынды сұрақтарына жауап беру.
6.      Үй тапсырмасы		Дженнифер Роббинс HTML5 CSS3 JavaScript 158-162 беттер. №11 тәжірибелік жұмысты орындау

Курс тақырыбы: CSS стильдерінің каскадтық кестелерін жасайды

Сабақ тақырыбы: CSS 3 негіздері

CSS (ағылш. Cascading Style Sheets - стильдер кестелерінің тілі)  — веб беттерді форматтауда қолданылатын белгілеу тілі.Каскадты стильдер кестелерінің тұжырымдамасын 1994 жыл норвегиялық ғалым Хокон Виум Ли ұсынған.

CSS артықшылықтары:

1.       CSS кодтың көлемін едәуір азайтуға және оны оқуға мүмкіндік береді.

2.      CSS тек HTML тілінде орнатылмайтын параметрлерді орнатуға мүмкіндік береді. Мысалы, сілтемелердегі астын сызу.

3.       CSS беттердің көрінісін оңай өзгертуге мүмкіндік береді. Мысалы, сіз 50 беттен тұратын сайт жасадыңыз, онда барлық тақырыптар көк түсті. Біраз уақыттан кейін сіз көк түстерді жасылға ауыстырғыңыз келді. Сіз барлық 50 беттен өтіп, тиісті атрибуттағы түстерді өзгертуіңіз керек. CSS көмегімен сіз мұны тек бір рет, стиль кестесінде жасауыңыз керек.

CSS  синтаксисіне тоқталайық: Браузер тікелей форматтауға жататын веб-бет элементі селектордан және стильдердің жариялану блогынан  (сипаттама) тұрады.  Жариялану блогы CSS қасиеттері және сол сипаттың мәні көрсетіледі.

Стиль кестелері екі түрлі болады:

1.      Ішкі (стиль туралы ақпарат веб-беттің өзінде орналасқан).

2.      Сыртқы (стиль туралы ақпарат веб-параққа байланысатын жеке файлда орналасқан).

Ішкі стильдер кестесі сыртқы кестеден айырмашылығы тікелей веб-беттің ішіне орналастырылады. CSS коды бар екенін хабарлайтын жұптастырылған <style> тегінің ішіне орналастырамыз.

Сыртқы стиль кестелері дизайнды жасаудың ең жақсы тәсілі болып табылады, өйткені олар стиль туралы барлық ақпаратты сайттың әр бетіне қосатын бір файлға шоғырландыруға мүмкіндік береді. Егер сізге бүкіл сайттың сыртқы түрін жаңарту қажет болса, әр бетті жеке-жеке емес, тек бір css файлын өңдеу жеткілікті болады. Сонымен қатар, сыртқы стиль кестелері веб-беттерді тезірек жүктеуге мүмкіндік береді, өйткені браузерлер пайдаланылған стиль кестесін кэштейді (сақтайды) және бір сайттағы басқа параққа кірген кезде сол сыртқы стиль кестесін қолданады, бірақ пайдаланушының компьютерінде жергілікті сақталған.

ID – Идентификатор - #

ID -  бұл бірегей атаулы элемент. Бір парақта тек бір ғана идентификатор болуы керек. Әдетте  Java Script  тілдерінде қолданамыз.

class – сынып - .

class -  стиль қасиеттерінің жиынтығын классты қолданатын барлық элементтерге қолдау үшін пайдаланылады.

Оқытушы А. С. Нұрғалыева