КГУ «Садовая общеобразовательная школа отдела образования Костанайского района»

Управления образования акимата Костанайской области

Утина А.К

Оқу бағдарламасы

«Web-дизайн негіздері»

Информатика пәні бойынша үйірме мен

факультативтерде қосымша білім алу үшін

Учебная программа

«Основы Web-дизайна»

Для дополнительного образования учащихся

в кружках и на факультативах по информатике

Қостанай облысы /2022

УДК 004.7

ББК 32. 973.202

У84

Рецензенттер:

Жарылқасов Б.Ж – аға оқытушы, ҚМПУ магистрі. Өмірзақ Сұлтанғазин Ахмет Байтұрсынов атындағы Қостанай өңірлік университеті.

Дощанов М.Г – Қостанай облысы әкімдігінің Білім басқармасының " Қостанай ауданының білім бөлімінің Садовый жалпы білім беретін мектебі" КММ басшысы

Утина А.К.

У 84 « Web-дизайн негіздері»: Оқу бағдарламасы –Қостанай қ., 2022.- 22 бет.

ISBN 978-601-7494-99-5

Курс бағдарламасы орта және жоғары буын оқушыларымен информатика пәні бойынша үйірме мен факультативтік сабақтан тыс жұмыс жүргізуге арналған. Оқу бағдарламасы түсініктемелік хаттан, оқу тақырыптық жоспардан, курс мазмұны мен қолданылатын әдебиеттен тұрады. Осы оқу бағдарламасы мектептегі информатика пәні мұғалімдеріне HTML –web- бетерді құру куралы мен Adobe Dreamweaver CS6 бағдарламасын оқушыларға үйретуде пайдасын келтірер деген ойдамын.

Программа курса расчитана на учащихся среднего и старшего звена для проведения кружковой и внекласной работы по информатике. Учебная программа включает в себя пояснительную записку, учебный тематический план, содержание и необходимую литературу. Надеюсь, что данная учебная программа будет полезна учителям школ как средство обучения учащихся основам языка гипертекстовой разметки HTML –основного инструментального средства построения web-страниц и программы Adobe Dreamweaver CS6.

Оқу бағдарламасына оқу-практикалық және электронды оқу құралдары әзірленген.

К учебному плану также разработаны учебно-практическое пособие и электронное пособие.

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

Утверждено и рекомендовано к изданию Методическим советом школы в качестве дополнительной учебной литературы.

УДК 004.7

ББК 32. 973.202

ISBN 978-601-7494-99-5

© Утина А.К., 2022 г.

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

Дүниежүзілік өрнек технологияларын кенінен қолдану Интернет арқылы жүзеге асып келеді. Бірақ, оларды тиімді пайдалану үшін ыңғайлы құралдардың болуы шарт. Бұл оқу курсы оқушыларға Веб-кұжат жасау мүмкіндігін беретін негізі құралдармен таныстырып, оларды қолдануға үйретеді.

Интернет ресурстары оқушылардың зияткерлік қабілеттерін дамытудағы ең басты түрткілердің бірі. Интернетте алынған ақпарат – бұлоқушылар үшін қосымша білім мен білік. Оқушылар тек Интернетте ақпарат алумен шектелмей, оған өзінің ақпаратын орналастыра алуы тиісті. HTML- белгілерін білу Интернетте жұмыс жасайтын мамандардың міндетті шарты. Веб-дизайнға оқушыларды қызықтыру үшін ең басты негіздерден, яғни гипермәтіндік белгілер - HTML тілінен бастаған дұрыс, ал веб-құжаттарды рәсімдеу үшін Adobe Dreamweaver CS6 бағдарламасын қолдану ұсынылады.

«Веб-дизайн негіздері» курсы сайт құрастыру тәсілдерімен, HTML тілінің жазылуы ғана емес, веб-құжаттар арасында қатынас орнатып, құрылымын эстетикалық тұрғыдан дұрыс жасауға үйретеді. Оқушылар бұл бағдарлама арқылы өз сайтын жасауға мүмкінідік алады.

Веб-сайт жасау шығармашылықты талап етеді, сондықтан бұл курс оқушылардың жаңа білім алу, біліктілігін арттырумен қатар олардың болашақ мамандық тандауына да ықпал жасайды. Ұсынылған курс орта буын сынып оқушыларының веб- кұжат жасаудағы компьютерлік сауаттылықты арттыруға бағытталған, бұл оқушылардың және жалпы қоғам сұраныстарына сәйкес келеді

Курс мақсаты:

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

Курс міндеттері:

• Интерне және веб-кұжат ұғымдарымен таныстырып, олар туралы жалпы мәлімет беру;

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

• Web-құжат және web-сайт құрылымдары жайлы түсінік беру;

• Мәтінді рәсімдеуде қолданылатын тегтермен таныстыру;

• HTML беттерінің кодын дұрыс жазу дағдысын қалыптастыру;

• Мәтін және сурет арқылы гиперсілтеме жасауға үйрету;

• Web-құжаттарда қолданылатын графикалық кескіндердін негізгі түрлерімен таныстыру

• Web-құжатқа кесте еңгізу жолдарымен таныстыру, кестеге ақпарат еңгізуге үйрету;

• Гипермәтіндік құжаттарды жазу мәдениетін қалыптастыру;

• HTML негізінде қарапайым веб-сайт жасауды үйрету;

• Сайт дизайнын әр түрлі құрал көмегімен өзгертуге үйрету;

• Adobe Dreamweaver CS6 бағдарламасының негіздерімен таныстыру;

• Adobe Dreamweaver CS6 бағдарламасын арқылы веб-құжат жасауға үйрету.

Курс бағдарламасы оқушылардың өздігінен практикалық іс-әрекет жасау арқылы информатика мен технология пәндеріне негізделген. Курс модульдік принцип бойынша құрылған және жеке және топтық тапсырмаларды практикалық түрде орындалуын көздейді. Сайт жасау жобалық жұмысын қорғау және тапсыру міндетті.

Оқушылардың бұл курсты оқу барысында алған білімдері, олардың Интернет-технологияларды танып білуде пайдалы және болашақ мамандығын тандауда өз септігін тигізері анық. Курс аяқтағаннан соң оқушылар Adobe Dreamweaver CS6бағдарламалық құралын және HTML гипермәтіндік тілін Web сайт жасауда пайдалана білуі тиісті.

Бұл курс 34 сағатқа арналған, оныі 2 сағаты лекция, калған 32 сағат – практикалық жұсыс орындау арқылы жүзеге асады. Әр сабаққа 1 сағат бөлінеді. Әрбір сабақта практикалық тапсырма орындалады және оқушылардың білімін тиянақтау мен қорытындылау мақсатында үй жұмыстары мен тоқсан аяғында білімді бағалау формасы ретінде тестілеу ұсынылады.

Курс соңында әр оқушы өзінің жобалық жұмысын тапсырады , бұл ұсынылған тақырыптар бойынша сайт жасау.

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

Оқушылардың білімі мен біліктеріне қойылатын талаптар

Оқушыларға міндетті:

• HTML гипермәтіндік тілін меңгеруі;

• Web-сайт жасауда қосымша бағдарламалық құралдармен жұмыс жасау негіздерін білуі;

• Негізгі тегтермен олардың сипаттамаларын білуі;

• Web-құжат дайындауда әр түрлі түстерді қолдана білуі;

• Web-құжат құрылымын анықтау, анимациялық нысаналар, фото, сурет, кесте орналастыра білуі;

• Гиперсілтеме жасай білуі;

• Web-сайт дизайнын , оның құрылымды бөліктерге бөліп анықтай білуі;

• Web-құжат жасауда қосымша ақпарат көздерін қолдана білуі;

• Adobe Dreamweaver CS6 бағдарламалық құралымен жұмыс жасай білуі;

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

Күтілетін нәтиже:

Оқушылар Web –сайт жасау барысында HTML гипермәтіндік тілін және Adobe Dreamweaver CS6 бағдарламасын жоғары деңгейде қолдана алады. Өздігінен сайт құрып, оны желіде орналастыра алады.

Қолданған web-ресурстар:

1. Введение в HTML http://www.on-line-teaching.com/html/lsn001.html

2. Первые Шаги - Учебник по Html для чайников. http://postroika.ru/err.html

3. Сайт http://www.htmlbook.ru/ HTML, CSS, web-дизайн, сайт құру, графикамен жұмыс жасауға арналған сайт.

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

Дунаев В.В. Сам себе Web-мастер. – СПб.: БХВ-Петербург, Арлит, 2000.

Курова И.А. Руководство по HTML. – М.: БИНОМ, 2001.

Угринович Н.Д. Информатика и информационные технологии. – М.: Лаборатория Базовых Знаний, 2002

Роббинс Д. Web-дизайн. Справочник.. — "КУДИЦ-ПРЕСС", 2008.

Гончаров А. Ю. Web-дизайн: HTML, JavaScript и CSS. Карманный справочник. "КУДИЦ-ПРЕСС", 2007.

Бородаев Д. В. Веб-сайт как объект графического дизайна. Монография. — Х.: "Септима ЛТД", 2006

Сырых Ю.А. Современный веб-дизайн. Рисуем сайт, который продается, «Вильямс», 2008

Алексеев A. П. Введение в Web-дизайн, 2008

«Веб-дизайн негіздері»

бағдарламасының оқу- тақырыптық жоспары

Тақырып №	Тақырып атауы	Сағат саны		Сабақ мақсаты	Сабақ жабдықтары
		теория	практика
Модуль 1. HTML тілінің негізгі түсініктері
1	HTML-ге кіріспе. HTML-құжаттың құрылымы		1	Оқушыларды курстың негізгі түсініктерімен таныстыру, HTML-файл жасау бағдарламаларымен, HTML-редакторлармен таныстыру. HTML-файлдың құрылымымен, «тег» ұгымымен таныстыру. Қарапайым HTML-құжат жасау	Практикалық оқу құралы. Тақырып 1.
2	html-құжаттың негізгі тегтері		1	<html>, <title>, <body> тегтерімен, кәріп, абзац тегтерін практикалық жұмыста қолдануға үйрету.	Практикалық оқу құралы. Тақырып2.
3	Абзац пішімдеу. Көлденең сызық		1	<BR>, <HR>, &-тегтерін практикада қолдана білу	Практикалық оқу құралы. Тақырып3.
4	Кәріпті пішімдеу		1	HTML- құжатында кәріпті жазылу түрлерімен таныстыру, кәріпті өзгерту тегтерін практикалық түрде қолдана білу.	Практикалық оқу құралы. Тақырып4.
5	Тізімдер		1	<UL>..</UL>,<OL>..</OL>, <LI>тегтерімен таныстыру, тізім жасауды үйрету.	Практикалық оқу құралы. Тақырып5.
6	Анықтамалар тізімі. Форматталған мәтін		1	<DL> ... </DL> тегтерімен таныстыру, мәтінді өз бетімен өзгерте білуге үйрету.	Практикалық оқу құралы. Тақырып6.
Модуль 2.  HTML –құжатты рәсімдеу және дизайн
7	Гиперсілтемелер		1	<A>..</A>тегінің атрибуттарымен таныстыру. Басқа HTML-құжатқа, электрондық мекен-жайға сілтеме жасауға үйрету.	Практикалық оқу құралы. Тақырып7.
8	html-құжатындағы кескіндер		1	<IMG>кескін қосу тегімен таныстыру HTML-құжатқа сурет еңгізуді үйрету.	Практикалық оқу құралы. Тақырып8.
9	HTML-құжатындағы түстер		1	HTML-құжатының түстерімен таныстыру, кәріп және құжат түсін өзгертуді үйрету.<BODY> тегінің атрибуттарымен таныстыру.	Практикалық оқу құралы. Тақырып9.
10	HTML-құжатының тақырыбы. Мета – нұсқаулықтар.		1	<HEAD> тегінің мета-нұсқаулықтарымен таныстыру,. HTML-де Refresh мета-нұсқаулығы арқылы фильм жасауды үйрету	Практикалық оқу құралы. Тақырып10.
11	Кестелер		1	<TABLE>..<T/ABLE> тегімен және оныңм атрибуттарымен таныстыру, ұяшық қосу және қасиеттерін өзгертуге үйрету.	Практикалық оқу құралы. Тақырып 11.
12	Пішіндер		1	HTML-де пішін ұғымымен таныстыру, JavaScripts оқиғаларын «батырма» элементін жасауда қолдану.	Практикалық оқу құралы. Тақырып 12.
13	Пішін элементтері		1	<INPUT> типті элементтермен таныстыру. <INPUT> элементтерін практикада қолдану.	Практикалық оқу құралы. Тақырып 13.
14,15	Фреймдер	1	1	<FRAMESET>..<FRAMESET> тегімен таныстыру. <FRAMESET>..</FRAMESET> тнгінің атрибуттарын қолдануды үйрету, фрейм негізінде веб-құжат жасау.	Практикалық оқу құралы. Тақырып 14.
16	Қалқымалы фрейм		1	<iframe>тегімен және оныі атрибуттарымен танстыру, қалқымалы фрейм арқылы веб-құжат жасау	Практикалық оқу құралы. Тақырып 15.
17	Жүгіртпе жолы. Музыка еңгізу		1	HTML- құжатқа жүгірме жол және әуен қосатын тегтермен танысып, оларды құжатқа қосуды үйрену	Практикалық оқу құралы. Тақырып 16.
Модуль 3. CSS – стильдер кестесі
18	CSS стильдері	1	1	CSS ұғымымен, стильь түрлерімен таныстыру, сыртқы стильдер кестесін құруға үйрету.	Практикалық оқу құралы. Тақырып 17.
19	CSS –дің фондық қасиеттері		1	CSS-дің фондық қасиеттерімен таныстыру.	Практикалық оқу құралы. Тақырып 18.
20	CSS- дегі мәтіннің қасиеттері		1	CSS-дегі мәтіннің қасиеттерімен таныстырып, оларды HTML-құжатында қолдануға үйрету.	Практикалық оқу құралы. Тақырып 19.
21	CSS-дегі кәріп қасиеттері		1	CSS-дегікәріптің қасиеттеріментаныстырып, оларды HTML-құжатындақолдануғаүйрету.	Практикалық оқу құралы. Тақырып20.
Модуль 4. Adobe Dreamweaver CS6
22,23	Dreamweaver CS6бағдарламасымен танысу.	1	1	Dreamweaver CS6 бағдарламасымен оқушыларды таныстыру, бағдарлама терезелеі мен панельдерін басқаруды үйрету, Dreamweaver –дегі жұмыс режимдерімен таныстырып, бағдарлама арқылы веб-құжат жасау.	Практикалықоқуқұралы. Тақырып 21.
24,25	Мәтінмен жұмыс		2	Бағдарламаға мәтін, гиперсілтеме еңгізу, оларды өзгерту, түсін өзгеруге үйрету	Практикалықоқуқұралы. Тақырып 22.
26,27	Графикалық кескіндермен жұмыс	1	2	Графикалық нысана түрлерімен, мультимедиа түсінігімен таныстыру, графикалық кескін, сілтеме-кескін, белсенді кескін, т.б. веб-құжатқа қосу.	Практикалықоқуқұралы. Тақырып 23.
28	Кестелер		1	Dreamweaver бағдарламасында кесте еңгізіп, оны өзгертуге, пішімдеуге үйрету.	Практикалықоқуқұралы. Тақырып 24.
29	Web-сайтпен жұмыс жасау		1	Сайт құрылымы, жасау жолдарымен таныстыру	Практикалықоқуқұралы. Тақырып 25.
30,31	Фреймдер		2	Фреим негізінде гирперсілтеме жасау, веб-беттері арасында қатынас жжасауға үйрету	Практикалықоқуқұралы. Тақырып 26.
32	Өздігінен орналастырылатын элементтер		1	Өздігінен орналастырылатын элементтермен жұмыс жасау, оларды өзгеру және нысаналарды орналастыру	Практикалықоқуқұралы. Тақырып27.
33	Анимация		1	Web-беттерінде анимация жасауды үйрету.	Практикалықоқуқұралы. Тақырып 28.
34	Жобаны қорғау		1	Web сайта жобасын қорғау
Барлығы		36 сағат

 

Бағдарлама мазмұны

Модуль 1. HTML тілінің негізгі түсініктері

Барлығы модуль бойынша сағат саны – 6, оның ішінде практикалық – 6 сағат

Тақырып: HTML-ге кіріспе. HTML-құжаттың құрылымы. -1 сағат

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

1. HTML меңгеру үшін не білу қажет?

2. HTML редакторлары

3. Қарапайым HTML-құжат

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

Тақырып: HTML -құжаттың негізгі тегтері – 1 сағат

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

1. HTML -құжаттың негізгі тегтері

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

Тақырып: Абзац пішімдеу. Көлденең сызық- 1 сағат

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

1. Сыңарсыз тегтер.

2. Көлденең сызық<HR>

3. &-тегтері

4. Комментариилер

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

Тақырып: Кәріпті пішімдеу – 1 сағат

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

1. <BIG> және<SMALL>тегтері.

2. Физикалық стильдер

3. Логикалық стильдер

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

Тақырып: Тізімдер – 1 сағат

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

1. Нөмірленбеген тізімдер: <UL> ... </UL>

2. Нөмірленген тізімдер: <OL> ... </OL>

3. Кіріктірілген тізімдер

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

Тақырып: Анықтамалар тізімі. Пішімделген мәтін - 1 сағат

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

1. Анықтамалар тізімі: <DL> ... </DL>

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

3. Форматированный текст: <PRE> ... </PRE>

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

Модуль 2. HTML –құжатты рәсімдеу және дизайн

Барлығы модуль бойынша сағат саны – 12, оның ішінде практикалық -11, теориялық – 1 сағат

Тақырып: Гиперсілтемелер – 1 сағат

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

1. Гиперсілтемелер

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

Тақырып: HTML -құжатындағы кескіндер – 1сағат

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

1. HTML -құжатындағы кескіндер

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

Тақырып: HTML-құжатындағы түстер -1 сағат

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

1. HTML-құжатындағы түстер

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

Тақырып: HTML-құжатының тақырыбы. Мета – нұсқаулықтар.-1 сағат

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

1. HTML-құжатының тақырыбы. Мета – нұсқаулықтар.

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

Тақырып: Кестелер - 1 сағат

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

1. HTML-дегі кесте құрылымы

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

Тақырып: Пішіндер – 2 сағат

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

1. Пішіндер не үшін керек?

2. Пішін қалай орналасқан

3. Батырма элементі

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

Тақырып: Пішін элементтері.- 1 сағат

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

1. <INPUT> элементі

2. <SELECT> мәзірі

3. <TEXTAREA> мәтін еңгізу өрісі.

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

Тақырып: Фреймдер – 2 сағат

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

1. Фрейм қолданылатын құжат қалай жасалады?

2. Фреймдер анықтамасы

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

Тақырып: Қалқымалы фрейм – 1 сағат

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

1. Қалқымалы фрейм

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

Тақырып: Жүгіртпе жолы. Музыка еңгізу – 1 сағат

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

1. Жүгіртпе жолы

2. HTML-дегі дыбыс еңгізу

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

Модуль 3. CSS – стильдер кестесі

Барлығы модуль бойынша сағат саны – 4, оның ішінде практикалық – 4 сағат

Тақырып: HTML-дегі CSS стильдері -1 сағат

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

1. CSS дегеніміз не?

2. Сыртқы стильдер кестесі

3. Ішкі стильдер кестесі

4. Кіріктірілген стильдер

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

Тақырып: CSS –дің фондық қасиеттері – 1 сағат

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

1. CSS –дің фондық қасиеттері

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

Тақырып: CSS- дегі мәтіннің қасиеттері – 1 сағат

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

1. CSS- дегі мәтіннің қасиеттері

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

Тема: CSS-дегі кәріп қасиеттері – 1 сағат

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

1. CSS-дегі кәріп қасиеттері

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

Модуль 4. Adobe Dreamweaver CS6

Барлығы модуль бойынша сағат саны – 12, оныі ішінде практикалық -11, теориялық – 1 сағат

Тақырып: Dreamweaver CS6 бағдарламасымен танысу. – 2 сағат

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

1. Dreamweaver CS6 ортасы

2. Багдарламаның басты терезесі

3. Dreamweaver-де терезелер мен панельдерді басқару

4. Веб- бетін шығару режимдері

5. HTML кодымен жұмыс

6. Практикалық жұмыс1. Dreamweaver-де Web-құжат жасау.

7. Практикалық жұмыс2. Web-бетті қарау

8. Практикалық жұмыс3. Dreamweaver-ді баптау

Тақырып : Мәтінмен жұмыс - 2 сағат

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

1. Практикалық жұмыс1. Мәтін еңгізу

2. Практикалық жұмыс2. Ежелерді пішімдеу

3. Практикалық жұмыс3. Жеке символдарды пішімдеу

4. Практикалық жұмыс4. Арнайы символдарды қою

5. Практикалық жұмыс5. Гиперсілтемемен жұмыс

Тақырып: Графикалық кескіндермен жұмыс - 2 сағат

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

1. Графикалық кескіндердің екі түрі

2. Мультимедиа

3. Практикалық жұмыс1.Графикалық кескінді қою

4. Практикалық жұмыс2. Кескін-гиперсілтемелер

5. Практикалық жұмыс3. Белсенді кескіндер

6. Практикалық жұмыс4. Карта- кескіндер

7. Практикалық жұмыс5. Фондық кескіндер

Тақырып: Кестелер – 1 сағат

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

1. Практикалық жұмыс 1. Кесте құру

2. Практикалық жұмыс 2. Кестемен жүмыс

3. Практикалық жұмыс 3. Кестенің қолданылуы

4. Практикалық жұмыс 4. Күрделі кестелер

Тақырып: Web-сайтпен жұмыс жасау– 1 сағат

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

1. Web-сайтпен жұмыс жасау

2. Сайтты жоспарлау

3. Сайтты жоспарлаудын негізгі кезеңдері

4. Web-сайттың логикалық құрылымы

5. Web-сайттың физикалық құрылымы

6. Web-сайт жариялау

7. Практикалық жұмыс 1. Dreamweaver сайтты тіркеу

8. Практикалық жұмыс 2. HTML-коды мен сілтемелерді тексеру

Тақырып: Фреймдер – 2 сағат

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

1. Фрейм және фреимдер жиынтығы

2. Практикалық жұмыс 1. Фрейм жасау

3. Фрейм қасиеттері

4. Практикалық жұмыс 2. Фреймды толтыру

5. Практикалық жұмыс 3. Сайт беттерін толықтыру, гиперсілтеме мақсаты

Тема: Өздігінен орналастырылатын элементтер -.1 сағат

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

1. Практикалық жұмыс 1. Өздігінен орналастырылатын элементтерді жасау

2. Өздігінен орналастырылатын элементтердің қасиеттері

3. Практикалық жұмыс 2. Өздігінен орналастырылатын элементтер тобымен жұмыс жасау

5. Практикалық жұмыс 3. Өздігінен орналастырылатын элементтерді қолдану үлгілері

Тақырып: Анимация – 1 сағат

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

1. Анимация

2. Web-сценарийлер

3. Практикалық жұмыс 1 Dreamweaver-де анимация жасау

4. Графикалық кескіндер анимациясы

Пояснительная записка

Интернет-ресурсы - мощный рычаг в развитии интеллектуальной способности школьников. Информация, полученная учениками в Интернет – это дополнительные знания и умения. Школьники не только учатся искать информацию во Всемирной паутине, но и сами должны уметь разместить ее в Интернет. Поэтому знание основ HTML-разметки становится обязательным атрибутом многих специалистов. Изучение основ языка гипертекстовой разметки HTML строится с таким расчетом, чтобы заинтересовать, увлечь учащихся среднего звена, Web-программированием, а програмная среда Adobe Dreamweaver CS6 расрывает возможности учащихся в дизайне и оформлении web-страницы.

Курс «Основы web-дизайна» не только раскрывает сущность языка разметки HTML и способы построения сайта, но и учит правильно оформить и создать навигацию внутри web-страниц. Учащиеся знакомятся с инструментальными средствами саитостроения и находят оптимальный вариант создания собственного сайта.

Процесс создания Web-сайта творческий и увлекательный, поэтому данный курс будет интересен учащимся не только в получении новых знаний и умений, но и в выборе их будущей профессиональной деятельности. Представляемый курс направлен на формирование компьютерной грамотности создания Web-страниц, что соответствует образовательным целям самих учащихся и в целом общества.

Целью курса «Основы web-дизайна» является научить учащихся основам языка гипертекстовой разметки HTML – как основного инструментального средства построения web-страниц и научить применять программные средства для создания сайта.

Задачами курса являются:

• дать общие представления и понятия среды Интернет и Web-страниц;

• обучить основным приемам работы с основными инструментальными программами для создания Web-страниц;

• сформировать представление о структуре web-страниц и web-сайтов;

• познакомить с тегами, которые используют для форматирования текста;

• сформировать навыки культуры оформления кода HTML-страниц;

• научить созданию гиперссылки, используя строку текста или рисунок;

• познакомить с основными форматами графических изображений, используемых в web-документах;

• знакомство с таблицами;

• привить культуру написания гипертекстовых документов;

• научить создавать простейшие Web-страницы на основе HTML;

• научить создавать простые Web-сайты с помощью языка гипертекстовой разметки документов (HTML);

• научить изменять дизайн сайта с помощью инструментальных средств.

• познакомить учащихся с программной средой Adobe Dreamweaver CS6

• научить создавать сайт с помощью программного средства – Adobe Dreamweaver CS6

Курс построен по модульному принципу, предполагает практическое выполнение индивидуальных и групповых заданий, с использованием методов практической самостоятельной деятельности, а также выполнение и защиту проектной работы в области сайтостоения.

Знания и навыки, полученные учащимися, окажутся полезными при дальнейшем изучении предметов не только информационно-технологического профиля, но всех других и будут способствовать осознанному выбору специальности для дальнейшего обучения. По окончании курса ученики должны уметь эффективно использовать инструментальные программные средства (Adobe Dreamweaver CS6) с использованием языка HTML для создания Web-страниц и Web-сайтов.

Данный курс по выбору предполагает 36 часов, из них лекции – 6 часов, практических – 30 час. На каждый урок выделяется по 1 часу. На каждом уроке предусматривается практическая деятельность учащихся, так же с целью закрепления материала и самостоятельной работы учащихся предусмотрены домашние задания.

В конце изучения курса «Основы web-дизайна» учащиеся выполняют проектную работу – создают сайт на предложенную тему.

Курс по выбору «Основы web-дизайна» включает тематический учебный план, перечень знаний и умений, формируемых у учащихся, ожидаемые результаты, наименование и содержание всех тем, включая учебно – практическое пособие по курсу и другие формы работы с учащимися, список литературы и web-ресурсов, используемой учащимися во время обучения.

Курс «Основы web-дизайна» предусматривает самостоятельную работу учащихся по изучению дополнительной литературы в области web-дизайна, а также дополнительное углубленное изучение курса по предложенной литературе.

Требования к знаниям и умениям учащихся:

Учащиеся должны:

• Овладеть языком гипертекстовой разметки HTML.

• Владеть основами работы с прикладными программными средствами и применять их на практике для создания Web-сайта.

• Знать основные тэги и их характеристики.

• Уметь применять различные цвета для оформления Web-странички.

• Научиться использовать таблицы, определять структуру Web-документа, используя при этом различные анимационные графические элементы, фотографии, рисунки и т.д.

• Уметь создавать гиперссылки, дополнительных Web-страниц.

• Определять дизайн Web-сайта и его структурных компонентов.

• Уметь использовать дополнительные источники информации (литература, программы) для создания Web-страниц.

• Уметь работать с программным пакетом Adobe Dreamweaver CS6

Итоговый контроль знаний, умений и навыков учащихся осуществляется на зачетном уроке в форме представления творческих работ по изученному или не охваченному данной программой материалу.

Ожидаемые результаты:

Учащиеся применяют основные инструментальные средства для создания Web-сайта с использованием языка HTML и программного пакета Adobe Dreamweaver CS6. Учащиеся создают сайты на локальном и отдаленных серверах.

Используемые web-ресурсы:

1. Введение в HTML http://www.on-line-teaching.com/html/lsn001.html

2. Первые Шаги - Учебник по Html для чайников. http://postroika.ru/err.html

3. https://www.adobe.com/cis_ru/

Используемая литература:

1. Роббинс Д. Web-дизайн. Справочник. — "КУДИЦ-ПРЕСС", 2008.

2. Бородаев Д. В. Web-сайт как объект графического дизайна. Монография. — Х.: "Септима ЛТД", 2006

3. Сырых Ю.А. Современный web-дизайн. Рисуем сайт, который продается, «Вильямс», 2008

4. Алексеев A. П. Введение в Web-дизайн, 2008

Учебно- тематический план курса

«Основы web-дизайна»

№ темы	Наименование темы	Всего часов		Цель урока	Материал к уроку
		теория	практика
Модуль 1. Назначение и основные понятия HTML
1	Введение в HTML. Структура HTML-документа		1	Учащиеся узнают о HTML, создадут простейший веб-документ	Учебно-практическое пособие к курсу. Тема1.
2	Главные теги html-файла		1	Учащиеся узнают о основных тегах HTML-файла, используют их для создания веб-документа.	Учебно-практическое пособие к курсу. Тема2.
3	Форматирование абзаца. Горизонтальная линия		1	Учащиеся научатся форматировать абзац, создавать горизонтальные линии	Учебно-практическое пособие к курсу. Тема3.
4	Форматирование шрифта		1	Учащиеся научатся использовать теги форматирования шрифта.	Учебно-практическое пособие к курсу. Тема 4.
5	Списки		1	Учащиеся научатся создавать нумерованные, ненумерованные и вложенные списки в веб-документе.	Учебно-практическое пособие к курсу. Тема 5.
6	Списки определений. Форматированный текст		1	Учащиеся научатся создавать списки определений, форматированный текст.	Учебно-практическое пособие к курсу. Тема 6.
Модуль 2. Дизайн и офрмление HTML - файла
7,8	Гиперссылки	1	1	Учащиеся научатся добавлять в веб-документ гиперссылки	Учебно-практическое пособие к курсу. Тема 7.
9,10	Изображения в html-документе	1	1	Учащиеся научатся добавлять изображения в html-документ	Учебно-практическое пособие к курсу.Тема 8.
10	Цветовая гамма HTML-документа		1	Учащиеся научатся применять цветовую гамму HTML-документа.	Учебно-практическое пособие к курсу. Тема 9.
12	Заголовок HTML-документа. Мета – инструкций.		1	Учащиеся научатся изменять заголовокHTML-документа, добавлять МЕТА-инструкции.	Учебно-практическое пособие к курсу. Тема 10.
13	Таблицы		1	Учащиеся научатся добавлять таблицы в HTML-документ	Учебно-практическое пособие к курсу. Тема 11
14,15	Формы	1	1	Учащиеся научатся добавлять формы в HTML-документ	Учебно-практическое пособие к курсу. Тема 12.
16	Элементы формы.		1	Учащиеся научатся добавлять элементы формы в HTML-документ типа <INPUT>.	Учебно-практическое пособие к курсу. Тема 13.
17,18	Фреймы	1	1	Учащиеся научатся создавать фреймы в HTML-документе с помощью тега <FRAMESET>. .</FRAMESET>.	Учебно-практическое пособие к курсу. Тема 14.
19	Плавающий фрейм		1	Учащиеся научатся создавать в HTML-документ плавающий фрейм.	Учебно-практическое пособие к курсу.Тема 15.
20	Бегущая строка. Фоновая музыка		1	Учащиеся научатся добавлять в HTML-документ бегущую строку и музыку	Учебно-практическое пособие к курсу. Тема 16.
Модуль 3. CSS – Каскадные таблицы стилей
21,22	Стили CSS в HTML	1	1	Учащиеся научатся добавлять каскадные таблицы стилей в HTML-документ	Учебно-практическое пособие к курсу. Тема 17.
23	Фоновые свойства в CSS		1	Учащиеся познакомятся с фоновыми свойствами CSS	Учебно-практическое пособие к курсу. Тема 18.
24	Текстовые свойства в CSS		1	Учащиеся познакомятся с текстовыми свойствами CSS	Учебно-практическое пособие к курсу. Тема 19.
25	Свойства шрифтов в CSS		1	Учащиеся познакомятся со свойствами шрифтов CSS	Учебно-практическое пособие к курсу. Тема 20.
Модуль 4. Adobe Dreamweaver CS6
26,27	Знакомство с программой Dreamweaver CS6.	1	1	Учащиеся познакомятся с программой Dreamweaver СS6.	Учебно-практическое пособие к курсу. Тема 21.
28,29	Работа с текстом		2	Учащиеся создадут web-страницу с текстом в Dreamweaver СS6.	Учебно-практическое пособие к курсу. Тема 22.
30,31	Работа с графическими изображениями		2	Учащиеся создадут web-страницу с графическими изображениями в Dreamweaver СS6.	Учебно-практическое пособие к курсу. Тема 23.
32	Таблицы		1	Учащиеся создадут таблицу в программе Dreamweaver СS6	Учебно-практическое пособие к курсу. Тема 24
33	Работа с Web-сайтом		1	Учащиеся познакомятся с основными этапами работы с сайтом, зарегистрируют сайт, созданный в программе Dreamweaver СS6.	Учебно-практическое пособие к курсу. Тема 25.
34	Блоки. Тег <Div>		1	Учащиеся узнают о блоках внутри веб-страницы, теге <Div>...</Div> , научатся использовать правило CSS, изменят дизайн сайта	Учебно-практическое пособие к курсу. Тема 26.
35	Свободно позиционируемые элементы		1	Учащиеся узнают об AP-слоях, научатся добалять их на веб-страницу.	Учебно-практическое пособие к курсу. Тема 27.
36	Защита проекта		1	Защитить проект Web сайта на определенную тему.
	Всего			36 часов

Содержание курса «Основы Web-дизайна»

Модуль 1. Назначение и основные понятия HTML

Всего часов по модулю – 6, из них практических – 6 часов

Тема: Введение в HTML. Структура HTML-документа

План урока:

1. Что необходимо для освоения HTML?

2. Редакторы HTML

3. Простой HTML-документ

4. Практическая работа

Тема : Главные теги html-файла

План урока:

1. Главные теги html-файла

2. Практическая работа

Тема: Форматирование абзаца. Горизонтальная линия

План урока:

1. Непарные теги.

2. Горизонтальная линия <HR>

3. &-последовательности

4. Комментарии

5. Практическая работа

Тема: Форматирование шрифта

План урока:

1. Теги <BIG> и <SMALL>.

2. Физические стили

3. Логические стили

4. Практическая работа

Тема: Списки

План урока:

1. Ненумерованные списки: <UL> ... </UL>

2. Нумерованные списки: <OL> ... </OL>

3. Вложенные списки

4. Практическая работа

Тема: Списки определений. Форматированный текст

План урока:

1. Списки определений: <DL> ... </DL>

2. Практическая работа

3. Форматированный текст: <PRE> ... </PRE>

4. Практическая работа

Модуль 2. Дизайн и офрмление HTML - файла

Всего часов по модулю – 12, них практических – 11 часов, теоретических -1 час

Тема: Гиперссылки

План урока:

1. Гиперссылки

2. Практическая работа

Тема: Изображения в html-документе

План урока:

1. Изображения в html-документе

2. Практическая работа

Тема: Цветовая гамма HTML-документа

План урока:

1. Цветовая гамма HTML-документа

2. Практическая работа

Тема: Заголовок HTML-документа. Мета – инструкций.

План урока:

1. Заголовок HTML-документа. Мета – инструкций.

2. Практическая работа

Тема: Таблицы

План урока:

1. Структура таблицы в HTML

2. Практическая работа

Тема: Таблицы

План урока:

1. Таблицы

2. Практическая работа

Тема: Формы

План урока:

1. Для чего нужны формы?

2. Как устроена форма

3. Элемент кнопка

4. Практическая работа

Тема: Элементы формы.

План урока:

1. Элементы <INPUT>

2. Меню <SELECT>

3. Поле ввода текста <TEXTAREA>.

4. Практическая работа

Тема: Фреймы

План урока:

1. Как создать документ, использующий фреймы?

2. Определение фреймов

3. Практическая работа

Тема: Плавающий фрейм

План урока:

1. Плавающий фрейм

2. Практическая работа

Тема: Бегущая строка. Фоновая музыка

План урока:

1. Бегущая строка

2. Фоновый звук в HTML

3. Практическая работа

Модуль 3. CSS – Каскадные таблицы стилей

Всего часов по модулю – 4, них практических – 4 часа

Тема: Стили CSS в HTML

План урока:

1. Что такое - CSS ?

2. Внешняя таблица стилей

3. Внутренняя таблица стилей

4. Встроенные стили

5. Практическая работа

Тема: Фоновые свойства в CSS

План урока:

1. Фоновые свойства в CSS

2. Практическая работа

Тема: Текстовые свойства в CSS

План урока:

1. Текстовые свойства в CSS

2. Практическая работа

Тема: Свойства шрифтов в CSS

План урока:

1. Свойства шрифтов в CSS

2. Практическая работа

Модуль 4. Adobe Dreamweaver CS6

Всего часов по модулю – 12, них практических – 10 часов, теоретических – 2 часа

Тема: Знакомство с программой Dreamweaver CS6.

План урока:

1. Среда Dreamweaver CS6

2. Главное окно программы

3. Управление окнами и панелями Dreamweaver

4. Три режима отображения web-страницы

5. Работа с кодом HTML

6. Практическая работа 1. Создание в Dreamweaver Web-страниц.

7. Практическая работа 2. Просмотр Web-страницы

8. Практическая работа 3. Настройка Dreamweaver

Тема: Работа с текстом

План урока:

1. Практическая работа 1.Ввод текста

2. Практическая работа 2.Форматирование абзацев

3. Практическая работа 3. Форматирование отдельных символов

4. Практическая работа 4. Вставка специальных символов

5. Практическая работа 5. Работа с гиперссылками

Тема: Работа с графическими изображениями

План урока:

1. Два вида графических изображений

2. Мультимедиа

3. Практическая работа 1.Вставка графического изображения

4. Практическая работа 2. Изображения-гиперссылки

5. Практическая работа 3. Активное изображение

6. Практическая работа 4. Карты-изображения

7. Практическая работа 5. Фоновые изображения

Тема: Таблицы

План урока:

1. Практическая работа 1. Создание таблиц

2. Практическая работа 2. Работа с таблицами

   • Формирование таблиц

   • Выделение элементов таблиц

   • Параметры ячейки

3. Практическая работа 3. Использование таблиц

   • Текст в рамке

   • Текст в графической рамке

   • Текст с отступами

4. Практическая работа 4. Сложные таблицы

Тема: Работа с Web-сайтом

План урока:

1. Работа с Web-сайтом

2. Планирование сайта

3. Основные этапы планирования сайта

4. Логическая структура Web-сайта

5. Физическая структура Web-сайта

6. Публикация Web-сайта

7. Практическая работа 1. Регистрация сайта в Dreamweaver

8. Практическая работа 2. Проверка правильности ссылок и HTML-кода

Тема: Фреймы

План урока

1. Фрейм и набор фреймов

2. Практическая работа 1. Создание фреймов

3. Свойства наборов фреймов

4. Практическая работа 2. Создание содержимого фреймов

• Заполнение фреймов

5. Практическая работа 3. Создание остальных страниц сайта

   • Цель гиперссылки

6. Практическая работа 4. Полоса навигации

Тема: Свободно позиционируемые элементы.

План урока

1. Практическая работа 1. Создание свободно позиционируемых элементов

2. Параметры свободно позиционируемых элементов

3. Практическая работа 2. Работа с группой свободно позиционируемых элементов

4. Работа со свободно позиционируемыми элементами

5. Практическая работа 3. Пример использования свободно позиционируемых элементов

Тема: Анимация элементов Web-страниц

План урока:

1. Анимация элементов Web-страниц

2. Web-сценарии

3. Практическая работа 1. Создание анимации в Dreamweaver

4. Анимация графических изображений