Сабақтың тақырыбы: Web беттер және сайттар, визуалды редакторлардың негізгі мүмкіндіктері және сыртқы түрлері

Сабақтың түрі: Аралас сабақ

Уақыты: 90 мин

Оқыту орны: компьютерлік технология кабинеті

Сабақ барысында қолданылатын педагогикалық технологиялар: Интерактивті, дамыта оқыту, ақпараттық оқыту.

Белгіленген технологияны іске асыру әдістері:

Сабақтың әдісі – компьютерде жұмыс істеу, көрнекілік құралдарды қолдану, өзіндік іздену, сұрыптау, сараптау, өзін-өзі бақылау, даралап оқыту.

Сабақтың педагогикалық мақсаты:

• Ақпараттық технологияны қолдану арқылы білім берудің сапасын арттыру;

• Интерактивті технология әдісі мен электронды оқулықты қолданудың маңыздылығын көрсету;

• Студенттердің өз беттерінше іздену жұмыстары арқылы кәсіптік шеберліктерін жетілдіруге, ғылыми көзқарасын қалыптастыруға ықпал ету;

• Заман талабына сай студенттерді әлеуметтік желілерді қолдануды және жаңа бағдарламалармен жұмыс жасауды үйрету;

• Интерактивті тақтаны қолдану арқылы студенттердің белсенділігі мен қызығушылығын арттыру;

• Ақпараттық ізденіс қабілетін дамыту;

• Пәнаралық және пәнішілік байланысты тереңдету;

Мамандығына деген қызығушылығын ояту.

Білімділік:

Білімді қалыптастыру, студенттерді білімнен хабардар етіп қана қоймай, тың мәліметтер беріп, алған білімдерін Web парақпен жұмыс жасау, визуалды редакторлардың негізгі мүмкіндіктерін құруға және дұрыс қолдануға үйрету.

Дамытушылық: Жеке тұлғаны, жалпы қабілеттерін, талдау, салыстыра білу, негізгісін ажырата білу, керек компьютерді дұрыс қолдана білуге машықтандыру.

Тәрбиелік: Адамгершілік, патриоттық тәрбие беру, еңбекке баулу, мамандыққа бағдарлау.

Кәсіптік қасиеттерін қалыптастыру

Қасіптік қасиеттер	Сабақтың әр түрлі кезеңдерінде оларды қалыптастыру мүмкіндіктері
Жинақылық, ұйымдастырушылық сезімі, ұқыптылық	1 кезең 6 кезең
Тәртіптілік, орындағыштық	Сабақтың барлық кезеңінде
Жауапкершілік, ұқыптылық, зейін қою, байқағыштық, коммуникативтік қабілеттер, мұқият болу, талдай білу және жалпылау, қарым-қатынас мәдениеті, шлогикалық ойлау, орындағыштық	Сабақтың барлық кезеңінде
коммуникативтік қабілеттер, мұқият болу	4 кезең 5 кезең
мамандығына қызығушылық	4 кезең 7 кезең

Сабақтың жабдықталуы:

Көрнекті құралдар:

• Электронды оқу құралы.

Үлестірме материалдар:

• Интерактивті тақтадан тапсырмалар;

• Компьютерден тапсырмалар;

Оқытудың техникалық құралдары:

• Компьютер;

• Интерактивті тақта.

Сабақ барысында қолданылатын оқу-әдістемелік құралдар:

• Оқу құралы / Қазақстан Республикасының ақпараттық теңсіздікті төмендету бағдарламасы бойынша халақты компьютерлік сауаттылыққа оқыту жөніндегі оқу-әдістемелік құрал // К.Б. Есекеев, Г.Қ. Нұрғалиева Алматы, ҰАО АҚ, 2007 -136 б. //

Оқулықтар мен WEB сайттар тізімі

Негізгі:

1.Білімді ақпараттандыру және оқыту мәселелері / Авт, ұж: Е.Ы.Бидайбеков, В.В.Гриншкун, Г.Б.Камалова, Д.Н.Исабаева, Б.Ғ.Бостанова / Оқулық – Алматы 2014, 352 бет.

2. Информатика: Жалпы білім беретін мектептің қоғамдық-гуманитарлық бағытындағы 10-сыныбына арналған оқулық , Сапарғалиева Б.Қ., Масалимова Н.Е., Тезекбаева Г.А., Астана, 2014 ж.

3. Информатика: Жалпы білім беретін мектептің жаратылыстану-математика бағытындағы 10-сыныбына арналған оқулық Сапарғалиева Б.Қ., Масалимова Н.Е., Тезекбаева Г.А., Астана, 2014 ж.

4. Информатика Михеева Е.В., Титова О.М. М. Изд.центр «Академия» 2013 г.

5. Компьютерлік желілер: Оқу әдістемелік кешен, Алматы. Нур-принт, 2012-144 бет.

6. Информатиканың элементтері Ермеков Н.Т. Астана, Фоллиант 2007 ж.

7. Информатика Хубаева Г.Н. Ростов н/Д, 2010 ж

8. Windows 7 операциялық жүйелер. Зертханалық практикум. Орта мектептерде жоғары сыныптарға оқу құралы. Microsoft Excel –зертханалық оқу құралы, Балапанов Е.Қ., Бөрібаев Б., Даулетқұлов А.Б.

Қосымша:

9. Стив Джонсон Windows Office 2007. Пресс 2009 г.

10. Алексеев А.П. Солон Информатика. 2002 г.

11. Соловьева Л.Ф. Информатика в видеосюжетах. Петербург 2002 г.

12. Праффенберген Б. Эффективная работа с Ms Internet Explorer. Санкт-Петербург 1998 г.

13. www. Google.ru

14. www.Yandex.ru

15. www. Rambler.ru

16. www. Youtube.com

17. www.Ustaz.kz

18. www tor.kz

19. www.Google.kz

Кәсіптік модуль білімін игеру нәтижесіне қойылатын талаптар:

БҚ-1	Оқу
	БҚ-1.1	Өзін-өзі дамыту: ұзақ мерзімді жоспарлау машықтарды игерген, кәсіпке және өзінің әлеуметтік міндеттеріне тұрақты, оң көзқарас қалыптасқан
	БҚ-1.2	Ақпарат: ақпаратты жинайдыжәне талдайды, білімін практикада қолданады.
	БҚ-1.3	Компьютерлік технология: жұмысында және өзін дамыту барысында қазіргі ақпараттық білім алу технологияларын қолданады
БҚ-2	Этика
	БҚ-2.1	Қоғамдық өнер: қоғамдық өмірге белсене қатысады.
	БҚ-2.2	Этикалық қағидаттар: кәсіптік этикалық құндылықтарды дәріптейтін, әлеуметтік-мәдени диалогқа дайындығын көрсетеді.
	БҚ-2.3	Эстетика: жұмыс ортасының эстетикасын сақтайды және бағалайды.
БҚ-3	Коммуникациялар және командада жұмыс жасау
	БҚ-3.1	Коммуникативтік дағдылар: Жағдайды ескере отырып, әртүрлі адаммен тиімді қарым-қатынас жасай алатынын көрсетеді.
	БҚ-3.2	Командада жұмыс жасау: әртүрлі командада жұмыс жасай отырып, жауапкершілігін көрсетеді.

Студент білуі керек:

• Web дизайн ережелерін;

• Веб парақтарын құру;

• Интернет технологияларын;

• Web-дизайн және Web-программалау маркетингісін;

• Пошта және басқа формалардың дұрыстығы ;

• Графикалық файлдардың ашылуын;

• Тізім тегтерін атаңыз.

• Кесте тегтерін;

• Сілтеменің жұмысын.

Студент істей алуы керек:

• Сайт жасау экономикасын;

• Навигациялық құрылымын жасауды;

• Беттің дизайнын жасауды;

• Web-cайтқа сілтемелерді басқа Web-сайттарқа кіргізу;

• Баннерлерді жарнама ретінде қолдануды.

Пәнішілік байланыс:

Тақырып 10.1 Компьютерлік желілер туралы түсінік, оның тағайындалуы. Компьютерлік желілердің классификациясы. Internet

Тақырып 10.2 HTML – редакторы. Интернет үшін ақпараттық объектілерді құру құралдары

Пәндер аралық байланыс (қамтитын, қамтылатын пәндер)

Қамтитын пәндер:

• Орыс тілі /сөздікпен/

• Ағылшын тілі /сөздікпен/

Қамтылатын пәндер:

• Клиникға кіріспе

• Терапия /медициналық құжаттардың есебін жүргізу/

• Ішкі аурулар пропедевтикасы /клиникамен танысу/

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

	Сабақ кезеңдері	Мақсаты	Қызметті сипаттау		Уа қы ты	Жабдық талу
			оқытушының	студенттің
1	Үйымдастыру сәті	- Сабаққа дайындығын ұйымдастыру, жұмыс көңіл-күйді қалыптастыру	- Студенттермен амандасу. - Аудиторияның дайындығын, студенттердің сыртқы көрінісін тексереді. - Сабақтың жаб-дықталуын, оқу-лық, жұмыс дәп-терлердің түгел-дігін тексереді. - Келмеген студенттерді белгілейді.	- Оқытушымен амандасу - Кезекші келмеген студенттердің аты-жөнін, сабаққа келмеу себебі туралы ақпарат береді.	5 мин	Топ журналы, студенттердің оқулықтары, дәптерлері, сабаққа қажетті көрнекі құралдар, техникалық құралдар
2	Студенттердің өткен тақырып бойынша білімін бағалау	-Студенттердің өткен тақы-рып бойынша білімін, тақы-рыпты игеру денгейін анықтау.	- Студенттердің білімін ауызша сұрау. - Студенттердің білімін тестілеу арқылы бағалайды.	- Ауызша сұрақтарға жауап береді -Тест сұрақтарын жауап береді	20 мин	№1 Қосымша, №2 Қосымша
3	Жаңа тақырыпқа мотивация лық сипатта-ма беру, сту-денттерді са-бақтың жоспарымен, мақсаттары- мен таныстыру	- Тақырыптың маңыздылы-ғын ашу	- Оқытушы сту-денттерді жаңа тақырыпты хабарлап, оның информатикадағы орнын түсіндіреді. - Студенттерді сабақтың мақсат-тарымен таныс-тырады. - Студенттердің көңілін тақырып-тың маңыздылы-ғына аударады. - Пәнаралық байланыстар схемасын түсіндіреді.	- Тақырыппен, сабақ мақсатымен танысады. - Тақырыптың өз мамандығындағы маңыздылы ғын анықтайды	5 мин	№3 Қосымша
4	Жаңа тақырыпты түсіндіру	- Тақырып бой-ынша студенттердің білімін кеңей-ту, болашақ кәсібіне бағ-дарлау, ақпа-рат көздері-мен жұмыс жасауға бағдар беру, сөздік қорларын байыту, логикалық ойлау ж/е шығармашы-лық қабілет-терін дамыту, топпен жұмыс істегенде ком-муникативті дағдыларын қалыптастыру.	- Жаңа тақырыптың терминдерімен таныстыру. - Жаңа тақырыпты түсіндіру. - Ақпарат көздерімен жұмыс жасауға бағдар беру.	- Оқытушының айтқанын тыңдау. - Жаңа тер-миндерді ұғыну - Қажетті ақпаратты дәптерлеріне жазады	20 мин	№4 Қосымша /интерактивті тақта/
5	Жаңа тақырыпты пысықтау	-Студенттердің жадыда сақтау қабілетін, зейінділігін дамыту, қарым-қатынас мәдениетін дамыту.	- Оқытушы интерактивті тақтада дайындалған тапсырма береді. - Оқулықтан тапсырма береді. - Тапсырмаларды орындау жолын түсіндіреді.	- Интерактивті тақтада, оқулықтан берілген тапсырмаларды топпен де, жеке де орындайды.	30 мин	№5 Қосымша
6	Бағалау және қорытындылау	Алған матери-алды жинақ тап қорытын-дылау.	- Сабақтың барлық кезеңіне қысқаша тоқталып, қорытындылайды. - Студенттерге өзін-өзі бағалау қағазын таратады. - Өзін өзі бағалау парағын жинайды. - Жақсы орындаған тапсырмаға пікірін айтады.	- Таратылған өзін-өзі бағалау парағын толтырып, оқытушыға береді. - Өз пікірлерін ортаға салады	5 мин	№6 Қосымша /интерактивті тақта/
7	Үйге тапсырма беру	-Студенттердің келесі сабаққа дайындығын қамтамасыз ету. - Сабақтың аяқталғанын хабарлау, кезекшілерге тапсырма беру	- Студенттерге білуі керек болған сұрақтарды, игеруі қажет болған тапсырмаларды, әдебиеттер тізімін хабарлайды.	- Үйге тапсырманы жазады - Жұмыс орнын тәртіпке келтіреді	5 мин	№7 Қосымша

№1 Қосымша

Үй жұмысын тексеру, студенттердің білімдерін бақылау – теориялық білім деңгейін ауызша сұрақтар беру арқылы бағалау

а) Студенттердің алған білімін сұрақ-жауап арқылы бақылау:

1-cұрақ. Браузер дегеніміз не?

Жауабы: Бұл Web-беттерін (гипремәтіндік беттерді) қарауға негізделген программа (Internet Explorer, Netscape Navigator).

2-cұрақ. HTML файлдарының кенейтімі?

Жауабы: HTML файлдары «.htm немесе.html» деген кеңейтілулер арқылы өрнектеледі.

3-cұрақ. Тэг (tag) дегеніміз не?

Жауабы:HTML тілінің бастапқы мәтінді белгілейтін командалары белгі немесе тэг (tag) деп аталады.

4-cұрақ. HTML –де файлды құрастыру үшін қандай бағдарламаны қолданамыз?

Жауабы: Оны құрастыру үшін «Стандартные» програмассындағы Блокнотты пайдаланамыз.

5-cұрақ. Тэгтер қандай символдан басталады және аяқталады.

Жауабы: Барлық тэг «кіші» (<) символынан басталады да, «үлкен» (>) символымен аяқталады.

6-cұрақ. HTML-да беттің басымен аяғы кандай тэгтер арасында жазылады?

Жауабы: HTML-да беттің басымен аяғы <HTML></HTML> арасында жазылады.

7-cұрақ. HTML –да беттің тақырыбы кандай тэгтер арасында жазылады?

Жауабы

8- сұрақ. Веб-беттің құрылымы?

Жауабы:

<html>

<head>

<title> …

</title>

</head>

<body>…

</body>

</html>

9-сұрақ. Фрейм түсінігіне анықтама беріңіз:

Жауабы: Фрейм (ағылшынның frame сөзінен – рамка, каркас) – параметрі және өлшемдері әртүрлі бірнеше фреймдерден тұратын браузердің жұмыс терезесі. Осындай көптеген терезелерді фреймдік құрылым деп атайды.

10- сұрақ. Физикалық форматтау тегтерін жазыңыз:

Жауабы:

<h1>, </h1> - бірінші деңгейдегі мәтін

<hх>, </hх> - х-інші деңгейдегі мәтін

х – 1-6 мән қабылдайды.

<p> - абзацты білдіретін тег.

5-cұрақ. HTML –да тақырыптың қаріп өлшемі қандай тэгтің көмегімен өзгереді?

Жауабы: HTML –да тақырыптың қаріп өлшемі <Hі></Hі> тэгтің көмегімен өзгереді (і 1 ден 6 ға дейін өзгереді) і 1 жазылса ең үлкен, і 6 жазылса ең кіші қаріп жазылады.

№2 Қосымша

б ) Студенттердің білім деңгейін тестпен бақылау

І- нұсқа

1. HTML – бұл:

а) текстік редактор

b) графиктік редактор

с) гипермәтін

d) электрондық кесте

е) программалық қабық

2. HTML дегеніміз не:

а) Web тораптардағы құжаттардың негізгі форматы

b) дүниежүзілік өрнек

c) халықаралық желі

d) жергілікті желі

e) ауқымды желі

3. HTML ағылшын тілінен аударғанда қандай мағына береді

а) гипермәтінді белгілеу тілі

b) программалау тілі

c) алгоритм тілі

d) Qbasic тілі

e) паскаль тілі

4. Браузер дегеніміз не:

а) берілгендер қорының негізгі обьектісі

b) бұл Web беттерін (гипермәтінді беттерді) қарауға негізделген программа

c) мәтіндік тексті теруге арналған программа

d) арнайы жазылған шағын көлемді програма

e) қолданбалы программа

5. HTML кеңейтімі

а) .doc

b) .mp3

c) .html

d) .bmp

e) .mdb

6. Тэг (tag) дегеніміз не?

а) кесте

b) парақ

c) таңба

d) HTML тілінің бастапқы мәтінді белгілейтін командалары

e) барлығы дұрыс

7. HTML файлды құрастыру үшін қандай бағдарламаны қолданамыз:

а) графиктік редакторды

b) электрондық кесте бағдарламасы

c) амалдық жүйе бағдарламасы

d) берілгендер қоры бағдарламасы

e) кез келген мәтіндік редакторды

8. Тэгтер қандай символдан басталады және аяқталады:

а) “ ”

b) < >

c) ( )

d) [ ]

e) { }

9. Тэгтердің неше түрі бар:

а) 2

b) 5

c) 6

d) 3

e) 4

10. HTML файлын құру және аяқтау жолы:

а) файл – басқаша сақтау – атын енгізу – кеңейтім беру - сохранить

b) кірістіру – сақтау

c) пішім – сақтау – атын енгізу

d) түзету – сақтау – атын енгізу

e) файл – ашу – атын енгізу

11. Интернет желісі мен жұмыс істеу үшін ... болу керек.

a) компьютер, сканер, модем

b) компьютер, телефон

c) компьютер, модем, принтер

d) компьютер, модем, телефон

e) компьютер, сканер, телефон

12. Internet Explorer - бұл …

a) электрондық поштаны жүргізетін жарлық

b) өзара байланысты құжаттар жүйесімен байланыс жасайтын бағдарлама

c) тиелетін файл

d) файлдарды және бумаларды басқаратын бағдарлама

e) Internet желісіне кіруге көмек көрсететін көрсеткіш

13. Internet Explorer және Netscape Navigator қандай бағдарламаларға жатады:

a) DNS (Domain Name System)

b) жүйелік

c) браузер

d) қолданбалы

e) сілтеуіш

14. Интернетте қажет сервер қандай адрес бойынша ізделінеді:

a) салыстырмалы адрес бойынша

b) FTP хаттамасы бойынша

c) домендік адресі бойынш.

d) физикалық адресі бойынша

e) абсолюттік адресі бойынша

15. Қайсысы Internet хаттамасы болады:

a) UDP

b) IP

c) FTP

d) TCP/IP

e) CAN

ІІ-нұсқа

1. Internet Explorer және Netscape Navigator қандай бағдарламаларға жатады:

a) DNS (Domain Name System)

b) жүйелік

c) браузер

d) қолданбалы

e) сілтеуіш

2. HTML файлды құрастыру үшін қандай бағдарламаны қолданамыз:

а) графиктік редакторды

b) электрондық кесте бағдарламасы

c) амалдық жүйе бағдарламасы

d) берілгендер қоры бағдарламасы

e) кез келген мәтіндік редакторды

3. Тэгтер қандай символдан басталады және аяқталады:

а) “ ”

b) < >

c) ( )

d) [ ]

e) { }

4. Жергілікті желі -....

a) бір орталыққа орналыстырылған компьютерлер тобы

b) бірігіп есеп шығару үшін бірнеше ЭЕМ-ді біріктіру

c) үлкен ЭЕМ-қа байланыс каналдармен қосылған комплекс терминалдары

d) мультимедиялық компьютер принтерімен, модемімен және факсімен байланыстырады

e) компьютерлік желілерде ақпаратты өңдеу технологиялары.

5. HTML дегеніміз не?

а) Web тораптардағы құжаттардың негізгі форматы

b) дүниежүзілік өрнек

c) халықаралық желі

d) жергілікті желі

e) ауқымды желі

6. HTML ағылшын тілінен аударғанда қандай мағына береді

а) гипермәтінді белгілеу тілі

b) программалау тілі

c) алгоритм тілі

d) Qbasic тілі

e) паскаль тілі

7. Internet Explorer - бұл …

a) электрондық поштаны жүргізетін жарлық.

b) өзара байланысты құжаттар жүйесімен байланыс жасайтын бағдарлама.

c) тиелетін файл.

d) файлдарды және бумаларды басқаратын бағдарлама.

e) Internet желісіне кіруге көмек көрсететін көрсеткіш.

8. Қайсысы Internet хаттамасы болады:

a) UDP

b) IP

c) FTP

d) TCP/IP

e) CAN

9. Интернет желісі мен жұмыс істеу үшін ... болу керек:

a) компьютер, сканер, модем

b) компьютер, телефон

c) компьютер, модем, принтер

d) компьютер, модем, телефон

e) компьютер, сканер, телефон

10. Internet Explorer және Netscape Navigator қандай бағдарламаларға жатады:

a) DNS (Domain Name System)

b) жүйелік

c) браузер

d) қолданбалы

e) сілтеуіш

11. Хаттама - …

a) мәліметтер пакеті

b) желіде мәліметтерді өткізуді ұйымдастыру ережесі

c) желіде мәліметтерді сақтау ережесі

d) желіде мәліметтерді структуралау

e) іс қағазы

12. Интернетте қажет сервер қандай адрес бойынша ізделінеді:

a) салыстырмалы адрес бойынша

b) FTP хаттамаы бойынша

c) домендік адресі бойынша

d) физикалық адресі бойынша

e) абсолюттік адресі бойынша

13. HTML – бұл:

а) текстік редактор

b) графиктік редактор

с) гипермәтін

d) электрондық кесте

е) программалық қабық

14. HTML файлын құру және аяқтау жолы:

а) файл – басқаша сақтау – атын енгізу – кеңейтім беру - сохранить

b) кірістіру – сақтау

c) пішім – сақтау – атын енгізу

d) түзету – сақтау – атын енгізу

e) файл – ашу – атын енгізу

15. Тэг (tag) дегеніміз не:

а) кесте

b) парақ

c) таңба

d) HTML тілінің бастапқы мәтінді белгілейтін командалары

e) барлығы дұрыс

Тест эталоны:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

І-нұсқа

с

а

а

b

c

d

e

b

a

a

d

e

b

b

c

ІІ-нұсқа

c

e

b

a

a

a

e

c

d

c

b

b

c

a

d

15 дұрыс жауап «5»

14 - 13 дұрыс жауап «4»

12 -11 дұрыс жауап «3»

10 және ↓дұрыс жауап «2»

№3 Қосымша

Жаңа тақырыпқа мотивациялық сипаттама беріп, тақырыпты түсіндіру

Тақырыптың мотивациялық сипаттамасы:

Компьютер немесе басқа да электронды құрылғыларда оқылатын мәтіндер гипермәтін деп аталады. Гипермәтіндер Интернет құрылымының негізгі құраушысы болып саналады. Гипермәтін термнін алғаш рет америкалық әлеуметтанушы, философ Тед Нельсон 1963 жылы айналыға енгізді.

Web-беттің негізгі қызметі – қажетті ақпаратты іздеу, жинастыру және оны экранға шығаруды ұйымдастыру. Web-беттер түрінде дайындалып сақталған электрондық құжаттарға – мәліметтер, графиктер, фотосуреттер жатады. Электрондық құжаттың қарапайым құжаттан айырмашылығы – оның жазылу форматында. Интернетте электрондық құжат құру үшін HTML арнайы тілі пайдаланылады және олар HTML форматында сақталады.

Сабақтың тезистері:

• WEB –сайт түрлері;

• Визуалды редакторлар;

• Элементтер қосу.

WEB –сайт түрлері

Бұл мәселені талқыламас бұрын ал дегенде сайттардың қолданылу ерекшелігі және оның құрылымын мақсаттары бойынша жіктейік.

Сайттардан ақпарат алу үшін немесе есептерді орындау үшін жасалғандығы жайлы анықтап барып оның түрлеріне сипаттама береміз. Кей жағдайда құжатты–бағытталған және мәселелік (өрнектер) ерекшеліктеріне сәйкес айыруға болады. Құжаттық бағытталған немесе ақпараттық сайттар қолданушы үшін ақпаратты алу, бірақта интерактивтік жағынан шектеулі ғана мүмкіндігі бар болады. Қолданбалы немесе бағдарламалық бағытталған сайттар қолданушыға ақпарат алмасу немесе қандай да бір әрекеттерді жасауға мүмкіндік береді. Мысалы, банкілік счеттан ақша аудару. Ал гибериттік сайттарда барлық функция түрлері бар. Гиберидтік сайт түрі қазіргі кезде ерекше дамысын табуда.

Мұндай категорияларға электрондық комерциямен айналысатын сайттар жатады.

• Қоғамдық сайт: Мұндай сайттарда мемлекеттік ақпараттар және жаңалықтар көрсетіледі. Мұндай сайттарда операцияларды байланыстыруға байланысты қолданушылар арасыннан өз ара әрекеттеседі.

• Қызықты сайттар: Мұндай сайттар ойындар немесе басқада интерактивті тіл қызықтаушылық үшін құрылады. Сайттарды ұйымдастыру негіздеріне сүйеніп бөледі. Олар қандай да бір жағдаймен төлем төлейді немесе басқадай жағдайлармен қолдаулар көрсетеді. Мұндай түрлерге сайттың негізгі түрін алып негіз етіп салыстырамыз.

• Сауда сайттары: Сауда жасауға, елмен қарым–қатынас жасауға, өз тауарларын жарнамалауға арналған сайттар және мұндай сайттар көмегімен электрондық коммерция мен тікелей айналысады.

• Мемлекеттік сайттар: Мұндай сайт түрлеріне мемлекеттік жоғарғы органдар, мемлекеттік органдар жатады. Сайттың негізгі мақсаты қоғамға немесе заңға бағынышты болу, қажеттілігін қанағаттандыру.

• Білім сайттары: Мұндай сайттар әр түрлі білім орындары университет, жоғарғы оқу орындары, мектептер сияқтылар жатады. Бұл сайт зерттеу және білім орындарын таныстыру мақсатында көптеп қолданылады.

• Филантроптық сайттар: Филантроптық сайт коммерциялық емес сайттар немесе жеке адамдар, қоғамдық қарапайым мекемелер жатады.

• Персональды сайттар: Бұл сайтқа кез–келген тұлға немесе адамдар тобы, кез – келген мақсатта жасалады. Олар еркін тақырыпта кез– келген жағдайда болуы мүмкін.

Сайттарды классификациялау күрделі мәселе. Мысалға, білім сайттары кей жағдайда басқадай мемлекеттік сайттарға кіруі мүмкін.

Визуальды классификациялар: Визуальды ерекшелігі мен сайттарды ерекшелейтін болсақ, біз диапозон мен жұмыс жасайтын боламыз. Сайттың енді бір жағына текстік құрамына көпрек мән береміз. Бірақта тек мәтінге ғана емес графикалық таныстырулар және бейнелерге көбірек көңіл бөлінеді. Internet–те 4 ең көп таралған дизайнерлік мектептер орналасқан.

• Текст бағытталған сайттар: Мұндай сайттардың тексттік құрамына көбірек мән беру қажет. Мұндай сайтты жөндеу қиынға соқпайды, дизайыны онша қиын емес өте қарапайым.

• GUI түріндегі сайттар-: (Graphic User Interface) бұл сайт түрі қолданушы сайт интерфейсі мен байланысты, бағдарламалық жобалық жабдақтауы кіреді. GUI–бағытталған ортасында қарапайым сайттар бар. Басқаша айтқанда GUI–ге қосылатын компанентке байланысты.

• Метафоралық сайттар: Метафоралық сайттар көбінесе өмірлік мысалдардан алынады. Мысалы, дизайн машиналарға байланысты болуы мүмкін. Метафоралық сайттар жалпы жағдайда визуальды немесе интерактивті емес болады.

Тәжірибелік сайттар:

 Мұндай сайтты жасаушылар, көрсетілген нормалдардан артық жасайды. Мұндай сайттарда шығармашылық жағдайына көбірек мән береді. Бұл дизайнерлік жағынан көптеген сайттарда қолданылады.

Көптеген WEB–дизайнерлерде болатын енді бір өзекті мәселелердің бірі WEB–дизайнның әр түрлі броузер және платформадағы көрінісі, олардың әр қайсысы әр түрлі HTML және сценерияларды қабылдайды. Әрбір жаңа броузер іске қосылысымен олардың міндеттемелірі мен мүмкіндіктері өзгертіліп, кеңейтіліп отырады. Бірақ ол ескі броузерінің қажеттігі жоғалады деген мәселе емес. Бірақта көп жағдайда адамдар жаңа түрін көп қолдана бермейді. Олар барымен базар болады. Дизайнда дәл анықталған ереже жоқ. Негізгі мақсаты беттің құрамындағы ақпаратты максимальды дәрежеде тұтынушыларға тез арада жеткізу. Оларды жасау үшін жаңашыл технологияларды мүмкіндігі болғанынша қолдану. Нағыз дизайнерлердің шешімі тұтынушылардың қажеттіліктерін қанағаттандыру, және сайт қалай жұмыс жасайтығындығына көз жеткізу.

Netscape Navigator және жалпы Internet әлемінде броузерлер алдыңғы орында жүреді. Netscape Navigator және Micrasoft Inetrnet Explorer қазіргі кезде 90% — ға жуық тұтынушы осы аталмыш броузерді қолданады. Олардың өз ара сайыстарының нәтижесі HTML тегилер жиыны және әр түрлі сәйкес емес технологияларды қолдану. Мысалы, бізге берілген Dynamic HTML, JavaScript және Cascading Steyle, Sleepts каскадты кесте түрлері. Басқа жағынан Netscape және Microsoft өз арасындағы бәсекелестегі WEB ортасын дамытуға көп үлесін қосты. Жалпы броузерлер түрлері көп. Кей жағдайда Netscape және Explorer–дің де кемшіліктері кездесіп жатады. Мұндай жағдайда басқа брозерлердің артықшылықтарын еске алады.

American Online броузері: AOL–қолданушылары мүмкін болатын жағдайға байланысты әр түрлі броузерінің бірін қолданады. (платформаға байланысты және AOL бағдарламалық қамтамасыздандыруға тікелей байланысты болады, кейбіреулері HTML–дің ең кіші мүмкіндігін қабылдайды.

American Online–ның ең соңғы версиясы 4-нші версия болып табылады. Мұнда Micrasoft Inetrnet Explorer броузерінің адаптирленген версиясын қолданады. Тек мәселе AOL–прокси серверінде және сурет қысу әдістеріне байланысты болады. AOL–да қолданылатын бейнелерді қысуға арналған әдістер. JPEG графикалық бейнесімен мәселе туындайды. Тағы бұл броузерде Java және CSS–ды қолдану мүмкін емес.

WEBTV–біздің пәтерлерге WEB–ті қарапайым телевизорлар көмегімен әкеліп қосады. TV–де WEB- ді көшіру үшін арнайы дайындалған броузерлер қолданылады. Ол синтаксистік анализді HTML–3,2 стандартына сәйкес жасаған. Мұнда фреймдерді көру мүмкін. Script, Active X немесе кез – келген басқа форматтарды қабылдай алады.

Беттерді өңдеп жасауда дисплейдің көптігі және оны көру шарттары қандай әсер етуі мүмкін деген сұрақ туындайды. Адамдардың көбі дисплейді оның өлшемімен ғана анықтайды.–дизайнға дисплейдің әсері өздік мүмкіндіктеріне тікелей байланысты. Бірақта айырмашылығы мұнда ғана емес екендігін білу анық қажет. Кейбір адамдар сайтты телевизор экранынан көруі де мүмкін. PDA көру мүмкіндігін емес (Personal Digital Assinant – Персанальды Сандық Секраторь) немесе ұялы телефон бетінен көруге мүмкін емес.

Броузерлердің жұмыс кеңістігі: Дисплей өлшемін білу бұл жұмыстың жарты бөлігі ғана. Операциялық жүйе және броузер өзі экран бетінде көп орын алады. Компьютердің операциялық жүйесіне қолданып отырған броузер және қолданушы параметірінің индивидуалды орнатулары кеңістік өлшемінің броузерге барлық жағдайға сәйкестігіне тікелей әрекет етеді. Минимальды жұмыс кеңістігі броузерден көрсететін көрінісі барлық броузер құралдары пайданалынады. Максимальды жағдай қажет емес. «Бұл терезеде ең үлкен өлшемде сәйкестендірілгендігін көрсетеді». Бұл ең ақырғы жағдайлар. Практика жүзінде броузер терезесі өлшемдері өзгертілмейді. Түймешенің жарты бөлігі экран бетіне көрінбейді, бұл осымен ғана аяқталмайды. Жүгірме жолдары автоматты түрде қосылып, өшіріліп отырады. Сондықтанда оларды анықтап оқу күрделі мәселе. Үлкен дисплейдің мүмкіндігі бар қолданушылар бетті түгелдей ашып қолданады. Кей жағдайда бір неше бетті қатар ашып қолдануға мүмкіндіктері бар. Осыған байланысты көптеген белгісіз салдар туындау мүмкіндігі броузер терезесінің өлшемін анықталуы мүмкін.

Өздік дисплей ерекшеліктері: Егер маниторлар түсті болатын болса, шығаратын түстің санына қарай айырылады. Жасаушыға әсер ететін енді бір фактор манитор көбінесе 24 разряттық (16,77 мың түс), 16 разрядтық (65536 түс) немесе 8 разрядтық (256 түс). Дәл 24 разрядтық кеңістікте алынған түстер броузерде өңделу кезінде 8 разрядты дисплеиге жасалады. 216 түстен тұратын түстер жинағы бар. Олар Macos және Windows жүйелік палитрасында орналасқан. Олар 8 разрядтық дисплейде көрінбейтін болады. Түстер жинағының жиыны WEB палитра деп аталады (WEB Palette).

Визуалды редакторлардың негізгі мүмкіндіктері

Визуалсыз редакторлар. HTML қолмен код жазуға арналған, толық автоматтауға арналмаған, сондықтан қазіргі күнде визуалды редакторлардың ешқайсысы HTML кодты жүз пайыз өңдей алмайды, одан тысқары абсолютті дұрыс кодты шығармайды. Сондықтан әр бетті кейін қолмен редакторлап шығуға тура келеді, ал визуалсыз редакторлар белгілеу тілін қолмен өңдеп, бағдарламашы ешқандай конструкциясыз оңай өңдеуге болатын оңтайландырылған кодты жаза алады. Визуалсыз веб-редакторларды HTML-редакторлар деп атайды. Оларға мысал: AceHTML, 1st Page, HotDog, Arachnophilia және т.б.

Артықшылығы:

• оңтайландырылған код;

• гипермәтінді белгілеу тілдерінің барлық мүмкіндіктері қолданылады;

• синтаксис, код пен сілтеменің дұрыстығын тексеру;

• көптеген редакторлар тегін таратылады.

Кемшіліктері:

• гипермәтінді белгілеу тілінде сауаттылық қажет.

Блокнот

Блокнот (ағылшынша Notepad) – кез келген Microsoft Windows операциялық жүйесінде орналасқан қарапайым мәтіндік редактор.

Блокнот қарапайым болғандықтан, HTML-кодты түсінетін конструкциясы, оны өңдейтін мүмкіндігі жоқ. Бірақ HTML тілімен таныса бастағанда осы редакторды қолданған жеңіл болады.

Блокнотты қолдануды үйренген соң, оның орнын басатын кең қызметті тегін бағдарламалар бар: Bred, AkelPad, BDV Notepad, EditPad Lite, TED Notepad, Notepad++ және Notepad2.

Блокнот

Web-парақ немесе web-сайтты тек HTML тілінің арнайы редакторы визуалды редакторлар арқылы да құруға болады. Сондай редакторлардың бірі Front Page редакторы. Қазіргі уақытта бұл программа дами келе, SharePoint Designer деген атауға ие болды. Microsoft Office SharePoint Designer 2007 web-редактор ретінде мына жағдайларда қолданылады:

• Қарапайым HTML беттерін құру үшін;

• Белсенді серверлік ASPX-беттерін жасау үшін (ASP.NET cтандарты);

• SharePoint қызметі негізінде web қосымшаларын жасау үшін;

• Web-сайтты басқару үшін.

Программаны іске қосу үшін Пуск Барлық программалар Microsoft Office Microsoft Office SharePoint Designer бұйрықтарын орындаймыз.

SharePoint Designer интерфейсі өте қарапайым және түсінікті. Программа редакторының терезе құрылымымен танысу үшін 1 суретке қарайық.

1 сурет. Microsoft Office SharePoint Designer 2007 web-редакторының терезе құрылымы

1. Тақырып жолағы.

2. Құрал-саймандар жолағы.

3. Бумалар тізімі – мұнда web-торапты басқаруға және файлдары бар әртүрлі бумаларды қарап шығуға болады.

4. Ортасындағы ашық алаң жұмыс алаңы болып табылады. Жұмыс алаңы 3 түрде ұсынылады: Конструктор (web-парақты визуалды құру үшін); Код (web-парақта HTML кодын көру үшін) ; Бөліну (web-парақты конструктор және код ретінде де ұсынатын аралас режім).

5. Элементтер панелі, мұнда web-параққа қолданылатын HTML тілінің элементтері көрсетілген.

6. Тегтер қасиетінің панелі.

7. Стильдер панелі.

Осылайша Share Point Designer жұмысы басқа да web-редакторлардағы сияқты web-парақтың сыртқы бейнесімен қатар кодтарын редакторлай алады. Конструктор аймағында басқару элементін орнату арқылы, сол аумаққа керекті өзгерістерді тез жасаймыз. Мысалы, мәтінді енгізу және өзгертуді орындап көрейік. Ол үшін web-редакторды іске қосамыз. Бос бет ашылады. Осы беткі мәтін қосу үшін мына әрекеттерді орындаймыз:

• Конструктор режімін таңдаймыз, пернетақтадан қандай да бір мәтінді енгіземіз (2 сурет);

• Құрал-саймандар жолағынан 2 тақырыпша стилін таңдаймыз;

• Web-парақтың код терезесіне мән беретін болсақ, енгізілген мәтін

тегімен таңбаланған (3 сурет).

2 cурет. Мәтін енгізу кезеңі

3 сурет. Мәтінді енгізу және пішімдеу.

Айта кететін маңызды жайт, ол құжаттағы кез келген позицияны меңзермен ерекшелесек, бет атауы белгісінің астында ерекшеленген мәтін бөлігінің тегі көрінетін болады. Бұл құжаттың мазмұнын дұрыс бағдарлауға көмектеседі. Мәтін бөлігіне қандай да бір пішімдеу қолдану үшін Құрал-саймандар панелінен керекті құралды таңдау керек және мәтін бөліктері конструктор аумағы мен код аумағында да бірдей ерекшеленетініне мән беріңдер.

Элементтер қосу

Қарапайым мәтіндермен қатар web-парақта әртүрлі элемент түрлері кездеседі. Share Point Designer-де элементтердің 3 типі қарастырылған:

• Кәдімгі HTML тегтері;

• ASP.NET басқаруының серверлік элементтері;

• Share Point қызметі басқаруының серверлік элементтері.

Элемент типтері әртүрлі болғанмен оларды web-параққа орналастыру бірдей тәсілмен жүзеге асырылады. Қазір біз параққа горизонталь сызық элементін орналастыру техникасын қарастырып көрейік. Ол үшін:

1. Элементтер панелін ашамыз.

2. Элементтер панелінен Горизонталь сызық батырмасын шертеміз.

3. Тінтуірдің сол жақ батырмасымен сүйреп әкеліп, web-парақтың керекті жеріне орналастырамыз.

4. Тінтуірді жібереміз .

Нәтижесінде web-парақта горизонталь сызық пайда болады (4 сурет).

4 сурет. Web-параққа горизонталь сызық элементін қосу

Қосылған элементті пішімдеу үшін контексті мәзірді қолданған ыңғайлы. Мысалы, web-параққа орналастырған сызықты редакторлау үшін мына әрекеттерді орындаймыз:

• Сызыққа тінтуірдің оң жағын шертіп, контекстік мәзірді шақырамыз;

• Мәзірден Горизонталь сызықтың қасиеті бұйрығын таңдаймыз; (5 сурет)

• Сұхбат терезесінен қажетті қасиеттерді орнатамыз да, ОК батырмасын шертеміз (6 сурет)

5 сурет. Элементті орналастырғаннан кейінгі нәтиже

6 сурет. Сұхбат терезесі.

Нәтижесінде сызықтың элементі web-парақта таңдалған пішін бойынша көрінеді.

Ескерте кететін жайт, ол элементтер панелінде жоқ элементті Қою (Вставка) мәзірінен табуға болады.

Бетті алдын ала қарау және сақтау

Share Point Designer файлдарын басқару үйреншікті тәсілмен жүзеге асырылады. Құрал-саймандар жолағындағы Сақтау батырмасы арқылы web-парақты тез сақтауға болады. (7 сурет).

Әрине, Share Point-та редакциялаудың көптерезелік режімін қолдайтындықтан, web-парақтың алғашқы типін анықтап алып, жасап, сосын қажетінше редакциялауға болады.

Редакторланған құжатты браузерде көру үшін Құрал-саймандар жолағынан Windows Internet Explorer Көру батырмасына шерту керек немесе пернетақтадан функционалдық F12 батырмасын басу керек (8 сурет).

№4 Қосымша

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

а/ Студенттерден ауызша сұралатын сұрақтар:

1-cұрақ. Қоғамдық сайт дегеніміз не?

Жауабы: Мұндай сайттарда мемлекеттік ақпараттар және жаңалықтар көрсетіледі. Мұндай сайттарда операцияларды байланыстыруға байланысты қолданушылар арасыннан өз ара әрекеттеседі.

2-cұрақ. Қызықты сайттар дегеніміз не?

Жауабы: Мұндай сайттар ойындар немесе басқада интерактивті тіл қызықтаушылық үшін құрылады. Сайттарды ұйымдастыру негіздеріне сүйеніп бөледі. Олар қандай да бір жағдаймен төлем төлейді немесе басқадай жағдайлармен қолдаулар көрсетеді. Мұндай түрлерге сайттың негізгі түрін алып негіз етіп салыстырамыз.

3-cұрақ. Филантроптық сайттар дегеніміз не?

Жауабы: Филантроптық сайт коммерциялық емес сайттар немесе жеке адамдар, қоғамдық қарапайым мекемелер жатады..

4-cұрақ. Визуальды классификациялар дегеніміз не?

Жауабы: Визуальды ерекшелігі мен сайттарды ерекшелейтін болсақ, біз диапозон мен жұмыс жасайтын боламыз. Сайттың енді бір жағына текстік құрамына көпрек мән береміз. Бірақта тек мәтінге ғана емес графикалық таныстырулар және бейнелерге көбірек көңіл бөлінеді.

5-cұрақ. Microsoft Office SharePoint Designer 2007 web-редактор ретінде мына жағдайларда қолданылады:

Жауабы:

• Қарапайым HTML беттерін құру үшін;

• Белсенді серверлік ASPX-беттерін жасау үшін (ASP.NET cтандарты);

• SharePoint қызметі негізінде web қосымшаларын жасау үшін;

• Web-сайтты басқару үшін.

6- сұрақ. Microsoft Office SharePoint Designer 2007 web-редакторының терезе құрылымы:

Жауабы:

• Тақырып жолағы.

• Құрал-саймандар жолағы.

• Бумалар тізімі – мұнда web-торапты басқаруға және файлдары бар әртүрлі бумаларды қарап шығуға болады.

• Ортасындағы ашық алаң жұмыс алаңы болып табылады. Жұмыс алаңы 3 түрде ұсынылады: Конструктор (web-парақты визуалды құру үшін); Код (web-парақта HTML кодын көру үшін) ; Бөліну (web-парақты конструктор және код ретінде де ұсынатын аралас режім).

• Элементтер панелі, мұнда web-параққа қолданылатын HTML тілінің элементтері көрсетілген.

• Тегтер қасиетінің панелі.

• Стильдер панелі.

7-сұрақ. Қарапайым мәтіндермен қатар web-парақта әртүрлі элемент түрлері кездеседі. Share Point Designer-де элементтердің 3 типі қарастырылған атап беріңіз:

Жауабы:

• Кәдімгі HTML тегтері;

• ASP.NET басқаруының серверлік элементтері;

• Share Point қызметі басқаруының серверлік элементтері.

№5 Қосымша

б/ Студенттердің компьютерде орындайтын тапсырмалары:

1-тапсырма:

1. Блокнот қосымшасын ашамыз

2. Төмендегі кодты тереміз.

< HTML>

< TITLE >Менің алғашқы парағым.

Құрметті достар, алғашқы web-парағыма қош келдіңіздер!

BODY >

3. Құжатты сақтаймыз.

4. Браузерден қараймыз.

2 –тапсырма:

1. Алдыңғы парақтағы «Құрметті достар, алғашқы web-парағыма қош келдіңіздер!» сөйлемінің астына бір шумақ өлең қосайық. Ол үшін сөзді немесе сөйлемді жаңа жолдан бастаймыз. Жолды бөлу үшін тегін қолданса болады.

Блокнотта:

< HTML>

< TITLE >Менің алғашқы парағым.

<І>

ALIGN=“CENTER”> Құрметті достар, алғашқы web-парағыма қош келдіңіздер!

Ұстаз болу – жүректің батылдығы,

Ұстаз болу – сезімнің ақындығы.

Ұстаз болу – мінездің күн шуағы,

Азбайтұғын адамның ақылдығы.

BODY >

2. Броузерден нәтижені көреміз.

№6 Қосымша

Сабақты бағалау және қортындылау - Студенттердің алған білімін қысқаша түсіндіру арқылы қорытындылау.

/ Студенттердің алған білімін интерактивті тақтаны ашып көрсете отырып қорытындылау/.

Студенттерді бағалау критериі:

№	Аты жөні	Студенттердің теориялық білімін бағалау (ауызшы сұрақтар бойынша)	Тест тапсырмасы арқылы бағалау	Студенттердің жаңа тақырып бойынша алған білімдерін. бағалау	Жалпы бағасы
1
2

№7 Қосымша

Үйге тапсырма беру - Студенттерге жаңа тақырыптан өзіндік дайындалуға сұрақтар және тапсырмалар беру.

Тақырыбы: Web беттер және сайттар, визуалды редакторлардың негізгі мүмкіндіктері және сыртқы түрлері

Өзіндік дайындалуға арналған сұрақтар мен тапсырмалар:

• Қызықты сайттар дегеніміз не?

• Қарапайым мәтіндермен қатар web-парақта әртүрлі элемент түрлері кездеседі. Share Point Designer-де элементтердің 3 типі қарастырылған атап беріңіз:

• Microsoft Office SharePoint Designer 2007 web-редакторының терезе құрылымы:

• Визуальды классификациялар дегеніміз не?

• Филантроптық сайттар дегеніміз не?

• Қоғамдық сайт дегеніміз не?

Тапсырмалар:

• Тақырыпқа сай интернетті пайдаланып, материалдар көшіріп және әдеби кітаптардан қосымша материалдар әкелу.

№8 Қосымша

Үй тапсырмасын орындауға ұсынылатын әдебиеттер:

Оқулықтар мен WEB сайттар тізімі

Негізгі:

1.Білімді ақпараттандыру және оқыту мәселелері / Авт, ұж: Е.Ы.Бидайбеков, В.В.Гриншкун, Г.Б.Камалова, Д.Н.Исабаева, Б.Ғ.Бостанова / Оқулық – Алматы 2014, 352 бет.

2. Информатика: Жалпы білім беретін мектептің қоғамдық-гуманитарлық бағытындағы 10-сыныбына арналған оқулық , Сапарғалиева Б.Қ., Масалимова Н.Е., Тезекбаева Г.А., Астана, 2014 ж.

3. Информатика: Жалпы білім беретін мектептің жаратылыстану-математика бағытындағы 10-сыныбына арналған оқулық Сапарғалиева Б.Қ., Масалимова Н.Е., Тезекбаева Г.А., Астана, 2014 ж.

4. Информатика Михеева Е.В., Титова О.М. М. Изд.центр «Академия» 2013 г.

5. Компьютерлік желілер: Оқу әдістемелік кешен, Алматы. Нур-принт, 2012-144 бет.

6. Информатиканың элементтері Ермеков Н.Т. Астана, Фоллиант 2007 ж.

7. Информатика Хубаева Г.Н. Ростов н/Д, 2010 г

8. Windows 7 операциялық жүйелер. Зертханалық практикум. Орта мектептерде жоғары сыныптарға оқу құралы. Microsoft Excel –зертханалық оқу құралы, Балапанов Е.Қ., Бөрібаев Б., Даулетқұлов А.Б.

Қосымша:

9. Стив Джонсон Windows Office 2007. Пресс 2009 г.

10. Алексеев А.П. Солон Информатика. 2002 г.

11. Соловьева Л.Ф. Информатика в видеосюжетах. Петербург 2002 г.

12. Праффенберген Б. Эффективная работа с Ms Internet Explorer. Санкт-Петербург 1998 г.

13. www. Google.ru

14. www.Yandex.ru

15. www. Rambler.ru

16. www. Youtube.com

17. www.Ustaz.kz

18. www tor.kz

19. www.Google.kz