Интернет технологиясы және Web дизайн негіздерін оқытуға арналған электрондық оқыту құралын құру

Мысалы:

<P align=center>Менің  бірінші бетім </p>

«Менің бірінші  бетім» сөйлемі беттің ортасына орналасады.

Аlign-дің мәні тағы да left (сол жақ), right (оң жақ) болуы  мүмкін.

   <FONT> тегінің көмегімен біз мәтіннің шрифтін, көлемін, түсін белгілейміз. Ол үшін атрибуттарды пайдаланамыз. Мысалы:

<P align=center>

<font face=Arial size=5 color=blue>Менің бірінші бетім</font>.

Осындай жол  жазғанда Web бетімізді arial шрифтімен, 5-көлемде, көк түсті «Менің бірінші бетім» деген сөйлем шығады. Жолды бөлу үшін <BR> тегін қолданса болады, мысалы:

   <P> Ана тілің-арың бұл,

                  Ұятың боп тұр бетте

                   <BR>

                   </p>

Қарастырылған әріптерді пайдалану үшін мәтінді <B>,</b> тегтерінің ортасына аламыз, қиғаш әріптер үшін-<I>,</i>.

Мысалы:

 

Көрінетін мәтін	HTML де жазылуы
Менің бірінші  бетім	Менің <b> бірінші </b> бетім
Менің бірінші  бетім	Менің <і> бірінші </і> бетім
Менің бірінші  бетім	Менің <u> бірінші </u> бетім

 

<PRE>,</pre> тегтері мәтін редакторда қандай жазылған болса, сол бойынша браузерге шығарады, мысалы:

<PRE>

Ана тілің-арың бұл,

Ұятың боп тұр  бетте.

Өзге тілдің бәрін біл,

Өз тіліңді  құрметте

</pre>

 

Тізім

Нөмірленген тізімді  ұйымдастыру үшін <OL> және <ll> тегтері қолданылады.

<OL> Қолданылған әдебиеттер тізімі

<LI> Полонская Е.П. Самоучитель HTML

<LI> Мержевич В. Создание Web страниц </li>

</o>

Егер тізім нөмірін  керекті бір нөмірмен бастау керек  болса, онда start атрибутын пайдаланамыз, мысалы:

<OL start=5> Қолданылған әдебиеттер тізімі

<LI> Полонская  Е.П. Самоучитель HTML

<LI> Мержевич В. Создание Web страниц </li>

</ol>

Тізімдердің түрін өзгерту  үшін type атрибуты көмектеседі, мысалы нөмірлерді латын цифрларымен жазу үшін төмендегідей жазамыз.

<OL type=I> Қолданылған  әдебиеттер тізімі

<LI> Полонская  Е.П. Самоучитель HTML

<LI> Мержевич В. Создание Web страниц </li>

</ol>

Маркерлік тізімді  жазғанда <UL> тегін пайдаланады, маркердің түрін өзгерту үшін type атрибутын қолданамыз. Оның мәні кестеде көрсетілген:

 

disc	дөңгелек
circle	шеңбер
square	квадрат

 

<UL type=disc>

           <LIt> дөңгелек

</ul>

<UL type=circle>

                     <LIt> шеңбер

        <UL type=square>

           <LIt> квадрат

</ul>

 

Web беттегі графика

 

Бұл бөлімде Web беттерге графиканы орналастыруға тоқталамыз. Web-дизайнерлер графика мәселесіне келгенде екі топқа бөлінеді. Бірінші топ графикасыз Web сайт ол сайт емес деп ойласа, екінші топ керісінше Web сайттарға суреттің қажеті жоқ деп санайды, себебі олар кейбір модемдердің және жүйелердің күші жетпейтіндігін ескеріп отыр. Дегенменде сайтқа графиканы қолдануға мүмкіндік бар және соны тиімді пайдалану керек. Ол үшін бізге <IMG> тегі src атрибутымен көмектеседі. Суретті сайтқа орналастыру үшін src атрибутына суреттің толық жолын көрсету керек, мысалы, rose.jpg суреті С дискасының My img папкасына орналасқан болса, онда төмендегі тег жазылады:

<IMG src=c:/my img/rose.jpg>

width және height атрибуттармен суреттің көлемін өзгертуге болады, биіктігі және ені.

аlt атрибутымен суретке  қосымша мәтін түрде қосымша мәлімет шығаруға болады.

<IMG src=c:/my img/rose.jpg width=50% height=30% alt=менің суретім>

Web графика туралы айтқанда  төмендегі атрибуттарды ұмытпау  керек: background-бұл атрибут сайтқа  суретті фон ретінде орналастырады, bgcolor-фонға түс береді.

 

Сілтеме

 

HTML-дің негізгі  қасиетіретінде оның басқа құжаттарға  сілтеме жасау мүмкіндігін айтуға  болады. HTML құжатынан алысқа орналасқан  компьютерге, құжаттың ішіндегі  белгілі бір орынға, HTML құжатына, басқа бір сайтқа сілтеме орнатуға  болады. Сілтемені ұйымдастыру үшін <A href> тегі қолданылады.

Мысалы,

<A href=penjim.narod.ru>Пенжим сайтына сілтеме</a>   

Бұл мысалда біз www.penjim.narod.ru  сайтына сілтеме жасадық.

Сілтеме мәтін түрде және сурет (кнопка) түрде болуы мүмкін. Сурет түрде орнату үшін <A> </a> тегтерінің ортасына суретті<IMG> тегімен орнату керек.

 

HTML-де кесте жасау

 

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

• кесте тақырыбы;
• бағаналар тақырыптары;
• ұяшықтар.

Кесте жолдар тізбегі  бойынша біртіндеп толтырылады (солдан оңға қарай жол соңына дейін, сонан соң келесі жолға көшу). Әрбір ұяшыққа мәліметтер енгізіледі. Бояу ұяшығын жасау үшін бос орын таңбалары енгізілуі тиіс.

Қарапайым 2*3 кестесін жасау үшін төмендегі тегтер жиынын қолдануға болады:

<TABLE border=1>

          <TR>

                   <TD> мәтін</td>

                   <TD> мәтін</td>

                   <TD> мәтін</td>

           </tr>

     <TR>

                   <TD> мәтін</td>

                   <TD> мәтін</td>

                   <TD> мәтін</td>

                      </tr>

               </table>

Бұл жерде border кесте  сызықтардың ені. Кестенің ұяшықтарының енін үлес арқылы өзгерту үшін width атрибутын қолданса болады, мысалы:

<TABLE width=50%>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

      

  

Программалық  жабдықтау.

 

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

Практиканы  әдетте Web-сайт жасау HTML редакторларды  пайдаланады. Оларды екі топқа бөледі.

Бірінші үлкен  топтың Web-сайт жасау программалары HTML-тілінің негізінде жұмыс істейді. Осындай программалар орта және үлкен сайттарды даярлау уақытын қысқартады және даярлау кезеңінің тиімділігін көтереді. Арнайы HTML-редакторлардың жұмысты жеңілдететін және тездететін қосымша мүмкіндіктері көп. Бүл топқа төменгі программалар кіреді:

HTML генератор  1.3;

Magic HTML Studio 2.0;

Macromedia Dreamweaver;

Екінші үлкен  топқа WYSWYG (ағылшын тілінен “what you see is what you get”-не көрсең соны аласың) редакторлары кіреді. Бұл программаларды тағыда визуалды редакторлар деп айтады.

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

WYSIWYG программалардың  тізімі:

Microsoft Front Page.

Түсінік хат.

Бұл бағдарлама «Интернет технологиясы. Web-дизайн негізі»  тақырыбында 10-11 сынып оқушыларына  кәсіби білім беруге негізделген.

Бағдарлама  жалпы информатика және осы пәнмен байланысты орта білім берудегі басқа пәндердің де элементтерінен құрылған. Бағдарлама (екі жылдық оқу жүйесінде) 136 сағатқа топталған.

Бағдарламаны  құру кезінде «Қазақстан Республикасы Білім беру стандарты» және информатика  пәні бойынша нұсқау оқулықтары басшылыққа алынған.

Оқушыларға  алғашқы кәсіби білім беруді көздеген бұл бағдарлама төмендегідей құрылымнан тұрады:

• Информатика пәнінен жалпы мазмұнды білім беру.
• Microsoft Windows бағдарламасымен жұмыс жүргізуде негізгі әдіс-тәсілдерді меңгеру.
• «Microsoft Office» пакетімен жұмыс істеуді меңгеру.

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

Бағдарламаның негізгі міндеті:

• Информатика пәнін жүйелеп оқыту әдістерін қарастыру.
• Оқушылардың ақпарат алу, өңдеу жаңа ақпараттар жасау және сақтау туралы бірізді жүйелі танымын қалыптастыру.
• Интернеттің бай мәліметтерін қолдану кезіндегі нақты тәсілдерді көрсету.
• Жалпы орта білім беру жүйесіндегі басқа пәндермен логикалық тығыз байланыс орнату.

Бүгінгі заман  талабында ақпараттар жүйесімен  жұмыс істеу өз алдына жеке бір  кәсіп ретінде талап етіліп отыр. «Интернет технологиясы. Web-дизайн негізі»  бағдарламасының құрылымы жалпы  информатика элементтерінен, Web-дизайн элементтерінен және электрондық оқулық негізінен тұрады.

Бұл бағдарламамен  танысу кезінде оқушылар жаңа кәсіптік бағдармен, нақты айтқанда, оптикалық  диск, сканерлер, модем, «Блокнот» мәтіндік редакторы, HTML, FrontPage құжатарымен және Photoshop, Paint, Macromedia Flash сияқты графикалық редакторларымен жұмыс істеуді меңгереді.

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

Бұл бағдарламаны оқыту барысында мультимедиялық технология элементтерін қолдану көзделіп отыр.

 

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

10-сынып. Аптасына 2 сағат жалпы 68 сағат.

 

№	Мазмұны	Сағат саны
1	Кіріспе. Информатика  кабинетінде техника қауіпсіздігін  сақтау ережесі.	1
2	Курсқа кіріспе. Интернет. WWW WEB-сайт. Web-беттері. Интернет жүйесіне алғашқы танымдық саяхат.	4
3	Microsoft Internet Explorer жүйесінің браузерлерімен жұмыс  жүргізу негізі. Браузерлермен нақты  жұмыс түрлері. Реттегіш. Таңдау, бірнеше тереземен жұмыс істеу.  Ақпарат сақтау және түрлендіру.	4
4	Интернеттен ақпарат  іздеу. Іздеу сервері дегеніміз  не? Қазіргі уақытта ең негізгі  роль атқаратын іздеу серверлерінің  ерекшеліктері (Яндекс, Rambler, Google, Yahoo. Кирилл және Мефодидің мегаэнцыклопедиясы). Жай және күрделі тапсырыс құру. Тапсырыс түрлері: Қазақстан тарихы, музыка, т.б.	4
5	Электронда  байланыс және байланыс бағдарламаларымен  жұмыс істеу. Электронда байланыс бөлімі қалай жұмыс істейді? Байланыс мекен-жайын  тегін алу. Аттар мәтінін алу, түзу және салу. Ат мәтінін түзуде жақсы жазу ережесі. Outlook Express бағдарламасы. Жұмыс терезесі. Негізгі берілетін нышандар. Электронды байланыстың вирусымен күресу жолдары. Мекен-жайлық кітапша. Қара тізім. Топтар құру. Электронды қол қою. Байланыс сервисін жөндеу. Көркемсуретті хаттар түзу тәсілі. Хаттарға файл негіздеу. Интернетте қолданылатын әдебиеттер.	4
6	Интернетке  қосылу. ПК ақпараттық бөлімінің талаптары, Интернетке қосылу тәртібі. Ақпараттың алыну жылдамдығын және көлемін  анықтау бірлігі. Ақпарат алудың және жіберудің техникалық мінездемесі. Ақпаратты қолданушының алу жылдамдығы.	2
7	WEB-беттерінің  дизайны және сайт түрлері. WEB-дизайнның  технологиялық ерекшеліктері. Графикалық  сызбалар, Интернеттің кәсіптік  бағдары. WEB-дизайнердің кәсібі. Интернет  нарықтың жаңа жүйесі.	2
8	HTML кіріспе.  Менің алғашқы бетім. Сайттың  бұрыштамасы. Құрылымы. Тегтер. Белгілер.	6
9	Мәтінді реттеу. Мәтінмен жұмыс. Бұрыштамалар. Мәтіннің түсі. Мәтіннің көлемі. Мәтіннің шрифты (P, H, FONT, B, I, ALIGN, COLOR, SIZE, BGCOLOR).	6
10	Сызбалар. Сызбалар сызу. Сызбалар толтыру. Сызбаларды реттеу. (TABLE, TD,TR )	6
11	Нысандар қою. Суреттер қою. Анимация қою. (IMG, SRC, ALT)	6
12	Гипермәтін. Гипермәтін туралы түсінік. Гипержіберу. (A, HREF)	6
13	Жазу-графика. Интернеттегі графикалық файлдарға арналған қағаздар. WEB-ке файл сақтау.
14	Фреймдер. Пішінмен жұмыс істеу түрлері.
15	HTML мен жұмыс  істеу қорытындысы.

 

 

 

 

 

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

11-сынып. Аптасына 2 сағат жалпы 68 сағат.

 

№	Мазмұны	Сағат саны
1	Кіріспе. Информатика  кабинетінде техника қауіпсіздігін сақтау ережесі.	1
2	Adobe Photoshop графикалық редакторы. Интерфейспен танысу. Қатпарлармен жұмыс істеу. Мәтінмен жұмыс. Фильтерлермен жұмыс.	16
3	Анимация. Gif анимациясын құру.	10
4	Flesh-анимация. Анимация  заңдылықтары. Macromedia flesh редакторының интерфейсі. Сурет салу құралдары. Белгілер, қатпарлар. Мәтінмен жұмыс. Анимация құру. Жарнамалық банерлер құру.	10
5	Front Page7 Интерфейспен  танысу. Web-жібін құру. Құжаттарды  редакциялау және құру. Гипер  салу. Графиканың қолданылуы. Сызбалар. Файлды серверге жіберу.	12
6	HTML құжаттарын серверге орналастыру. Мекен-жай тіркеу. Сайттың келісімдері мен ережелері. Беттерді тестілеу әдісі. WEB-сайтты іздеу машиналарына тіркеу. Баннерлік алмасу, жарнама, салу.	6
7	Персоналды WEB-сайт құру. WEB-сайттың құрылымын жасау және Front Page қолдану жүйесін құру. WEB-интернетке орналастыру. Бақылау жұмысы.	13

 

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

№1. Интернетке саяхат.

№2. Интернеттен  ақпарат іздеу.

№3. Электронды байланыс бөлімімен жұмыс.

№4. Қарапайым Web-беттерін құру.

№5. WEB-беттерінде мәтін өңдеу.

№6. WEB-беттерінде кестелер орналастыру.

№7. Гиперсілтемелер  құру.

№8. Сызбалар құру және өңдеу.

№9. Фрейм қолдану  арқылы WEB-беттерін құру.

№10. Берілген тақырыпқа WEB-беттерін құру.

№11. Adobe Photoshop құралдар тізімін оқып үйрену.

№12. Қатпарлар  палитрі.

№13. Мәтінді  кіргізу және редакциялау.

№14. Adobe Photoshop-та берілген тақырып бойынша коллаж құру.

№15. Қарапайым  анимациялық бейнелер құру.

№16. Macromedia flesh суреттер құралын үйрену.