МУСАХМЕТ Камила,
Ҥш тілде оқытатын мамандандырылған сыныптары бар
дарынды балаларға арналған «Мҧрагер» мектебінің 7 «Б» сынып оқушысы,
Қызылорда қаласы, Қызылорда облысы, Қазақстан Республикасы
Жетекшісі: СМАХАНОВА Молдир Дауренбековна,
Ҥш тілде оқытатын мамандандырылған сыныптары бар
дарынды балаларға арналған «Мҧрагер» мектебі «Информатика» пәнінің
мҧғалімі, педагогика ғылымдарының магистрі, Қызылорда қаласы,
Қызылорда облысы, Қазақстан Республикасы
MACROMEDIA DREAMWEAVER БАҒДАРЛАМАСЫНЫҢ КӚМЕГІМЕН
WEB-САЙТ ЖАСАУ
Кіріспе. Қазіргі кезде Интернет ӛте қарқынды дамып, кез-келген
қолданушылардың қажеттілігін қанағаттандыратын ақпарат алу қорына айналды.
Ғалымдардың болжауы бойынша, он жылдан кейін халықтың 50 пайызы (дамыған
елдерде) Интернетті күнделікті пайдаланып отырады. Бұл кезең – кез-келген
компьютері бар адам ӛзін қызықтыратын мақалаларды, суреттерді, аудио және бейне
ақпараттарды Интернеттен оңай және тез жүктей алатын кезең болады. Ол керекті
ақпаратты кез-келген уақытта жүктей алатын болады.
Zertteušì – Issledovatel’ – The Researcher ISSN 2307-0153
№№5-12(109-116), мамыр-желтоқсан, май-декабрь, May-December,
2015
__________________________________________________________
____
78
Интернетті дамытуға ӛз үлесімісімізді қазірден бастап қоса аламыз. Ол үшін
ӛзіміздің Web-сайтымызды жасап, оны желіде орналастырсақ болғаны. Оны қалай
жасауға болады? Бұл сұраққа жауап беріп кӛрейік.
Бұл үшін тӛмендегідей тапсырмаларды орындау керек: соңғы Интернет-
технологиялармен танысып, мүмкіндігінше оларды жұмыс процесінде пайдалану;
Web-сайтты жобалау және оларды құру бағдарламаларын оқып-үйрену; түрлі
ақпараттарды Web-беттерде орналастыру тәсілдері мен амалдарын үйрену; Web-сайт
жасау ережелерімен танысып, практика жүзінде пайдалану; Web-беттердің
құрылымын анықтап алу; Web-сайт жобалау мен жасау стратегиясын таңдау.
Web-сайт – бұл тек файлдар жиынтығы ғана емес. Ол әдемілік пен
функционалдылықтың, жұмыста ыңғайлылықтың күрделі қосындысы. Сайт
жасаудың ең қиындығы – барлық ұсақ-түйектерді есептеп, арасында байланыс құру,
байланыссыз сайтымыз тек файлдар жиынтығы болып қалады. Web-дизайн деп біз
сайттың дизайнын, яғни оның кӛркемдік бейнеленуі деп түсінеміз. Web-дизайн – бұл
пайдаланушының жұмыс істеу ыңғайлылығы. Web-дизайнмен тек ӛзін
пайдаланушының орнына қойып кӛре алатын және де оның іс-әрекеттерін болжай
алатын адамдар ғана айналыса алады.
Web-сайтты жасау – қиын және уақытты талап ететін жұмыс. Ӛйткені сайттың
логикалық құрылымын ойлап табу керек, материалдарды жинау керек, оларды
ӛңдеуден ӛткізу керек және т.б. кӛптеген жұмыстар жүргізу керек. Web-сайтты
жасау үшін әркім ӛзіне ыңғайлы құралын таңдайды. Бұл құрал MS FrontPage немесе
Macromedia Dreamweaver, Alloure Home Site және т.б. болуы мүмкін. Ал кейбір
адамдар текстік редакторды, мысалы, блокнотты пайдалануы мүмкін. Текстік
редакторларда кішкене беттерді жасауға болады және де оның кемшіліктері кӛп,
онымен тек HTML тілін ӛте жақсы меңгергендер ғана жұмыс жасай алады.
Web-сайтты жасаудың тағы бірі құралы MacromediaDreamweaverбағдарламасы
болып табылады. Macromedia Dreamweaverқолданбалы программасында жасалатын
Web-беттердегі анимацияларды және мәлімет алмасуларды ұйымдастыру тез, әрі
оңай іске асады. Сонымен қатар Интернет сайттардағы графикалық дизайндарға баса
назар аударатын болғандықтан, Macromedia Dreamweaverмұндай жұмыстардың
шебер, әрі кӛркем нұсқаларын ұсына алады.
Macromedia Dreamweaver бағдарламасы. Macromedia Dreamweaver жҧмыс
ортасы. MacromediaDreamweaver бағдарламасын іске қосу үшін «Пуск-Программы»
– Macromedia –MacromediaDreamweaverMX командаларын орындаймыз. Шамалы
уақыттан кейін экранда диалогтық Workspace Setup кішкене терезесі ашылады, ол
Dreamweaver MX жұмыс ортасының түрін таңдайды.
Zertteušì – Issledovatel’ – The Researcher ISSN 2307-0153
№№5-12(109-116), мамыр-желтоқсан, май-декабрь, May-December,
2015
__________________________________________________________
____
79
1 сурет – Диалогтық терезе Workspace Setup
Dreamweaver MX – жұмыс ортасының жаңа түрі. Мұнда құрал-саймандардың
барлығы дерлік бір үлкен терезеде жұмыс жасаушыға ыңғайлы етіп
орналастырылған. Құжаттың терезесі ашық Web-бетті кӛрсету үшін қолданылады.
Кез келген кӛпқұжатты бағдарлама сияқты Dreamweaver негізгі терезеде
құжаттардың қанша болса да, терезесін ашады.
Macromedia Dreamweaver бағдарламасын ең алғаш іске қосқанда бірнеше
менюдан және кӛптеген панельдерден тұратын жұмыс терезесі ашылады, ол
тӛмендегі 2-ші суретте кӛрсетілген.
Zertteušì – Issledovatel’ – The Researcher ISSN 2307-0153
№№5-12(109-116), мамыр-желтоқсан, май-декабрь, May-December,
2015
__________________________________________________________
____
80
2 сурет – Dreamweaver-дің негізгі терезесі
Негізгі терезеде негізгі меню қатары орналасқан, ол арқылы Dreamweaver-дің
барлық мүмкіндіктерімен таныса аласыз (3-ші сурет).
3 сурет – Меню қатары
Электрондық оқу құралын қазақ тілінде жазу үшін ең алдымен қазақ тілін
түсінетіндей етіп ұйымдастыру керек. Ол үшін бос беттің үстіне тышқанды апарып,
оң жағын басу арқылы Page Properties сұхбат терезесін ашамыз. Осы терезенің
Document Encoding деген жердегі тізім ішінен Creek (Windows 1252) дегенді таңдау
керек және Text мәзірінің Font бӛліміне, яғни шрифтер бӛліміне Times New Roman
KK EK шрифтін енгізу керек. Бұл Page Properties терезесінде осы дайындалып
жатқан терезенің барлық кӛркемдік жұмыстарын орындауға болады, яғни терезенің,
шрифтің түсін, түрін ӛзгертуге болады. Бұл әрекеттерді арнайы мәзірлер кӛмегімен
де ӛзгертуге болады, ол тӛмендегі суретте кӛрсетілген.
4 сурет
Zertteušì – Issledovatel’ – The Researcher ISSN 2307-0153
№№5-12(109-116), мамыр-желтоқсан, май-декабрь, May-December,
2015
__________________________________________________________
____
81
Суретте кӛрсетілгендей, кез келген сайманды негізгі терезенің аймағынан бӛліп
алып, оны ӛз алдына терезе етіп ашуға болады. Ол үшін жылжытуға арналған
тұтқасы бар, ол тақырып атының сол жағында бес қара нүктелер түрінде
орналасады. Сол сияқты, сіз сайманды кез келген уақытта қайта орнына қоя аласыз.
Macromedia Dreamweaver программасы кӛмегімен әртүрлі суреттерді де
кірістіруге болады. Суреттерді басты мәзірдегі Image пернесі арқылы кірістіруге
болады. Сонымен қатар Macromedia Dreamweaver программасы кӛмегімен әртүрлі
әсерлерді (эффектілерді), анимацияларды орындауға болады.
Macromedia Dreamweaver программасы кӛмегімен әртүрлі сілтемелер жасауға
болады, ал электрондық оқу құралының негізі – керекті сілтемелер жасау, сол
сілтемелерді дұрыс жасай білу болып табылады. Ол үшін керекті мәліметтерді бӛлек
сақтау қажет, содан соң бір-біріне сілтеме жасалады. Сілтемені де Macromedia
Dreamweaver программасында дайын пернелер арқылы жасауға болады (5-ші сурет).
5 сурет – Қасиеттер редакторы
Қажетті мәліметтерімізді жеке-жеке жазып, әрқайсысын бӛлек-бӛлек сақтаған
соң келесі бір жаңа бет ашып, оған сілтелінетін сӛзді немесе сӛйлемді жазып
белгілеп алып, яғни ерекшелейміз де, буманың суретін басамыз, сол жерден сілтеме
жасалыну керек құжатты белгілейміз.
Болған соң F12 пернесі арқылы жүктейміз. Осылайша қажетті барлық
сілтемелерді жасаймыз. Бір ескертетін нәрсе – барлық сақталынатын құжатты
ағылшын тілінде сақтау қажет.
Осылайша Macromedia Dreamweaver программасының кӛптеген мүмкіндіктерін
жетік, жақсы меңгере отырып, кӛптеген қажетті электрондық оқу құралдарын ғана
емес, сонымен қатар бүгінгі күнге қажетті ӛзіміздің web-беттерімізді де жасай
аламыз.
Web-беттер қҧру. Web-беттердің жалпы қасиеттері. Алдымен қарапайым
WEB-бетпен оған мәтін жазуды және автор жайында қысқаша мәлімет беріп жазуды
қарастырамыз. Ол үшін , немесе + пернелерін басамыз.
Сонда мониторда жаңа құжаттың диалогтық терезесі ашылады.
Жаңа документтің Category тізімінен Basic Page ал, Basic Page тізімінен HTML
пунктін таңдап, OK пернесін басқанда мониторда документтің бос терезесі
ашылады. Осы ашылған бос терезе біздің WEB-бетіміз болып табылады. Жаңа WEB-
бет осылай жасалады.
Web-беттердің жалпы қасиеттерін орнату үшін Modify менюінен Page
Properties пунктін ашамыз. Мұндағы Title ӛрісіне web-беттің аты енгізіледі.
Background түстер селекторымен фонның түсі беріледі. Text-те текстің түсі
енгізіледі. Үш селектор Links, Visited links, Active links – гиперсілтеменің түсін
береді.
Zertteušì – Issledovatel’ – The Researcher ISSN 2307-0153
№№5-12(109-116), мамыр-желтоқсан, май-декабрь, May-December,
2015
__________________________________________________________
____
82
6сурет
Links – кӛк (непосещенный – қатыспаған);
Visited link – қанық қызыл (посещенный);
Active links – ашық қызыл (белсенді).
7сурет
Zertteušì – Issledovatel’ – The Researcher ISSN 2307-0153
№№5-12(109-116), мамыр-желтоқсан, май-декабрь, May-December,
2015
__________________________________________________________
____
83
Соңында Apply батырмасын басамыз. Document Encoding ӛрісіне – текстің
коды жазылады.
Мәтінмен жҧмыс. Мәтінді енгізу. Бос терезеге мәтінді енгіземіз. Жазылған
мәтіннің тақырыбын айрықша етіп кӛрсету үшін Paragraph (
) командасы
ерекшеленген тақырыпты қарапайым абзацқа орналастырса, Heading1, …, Heading6
командасы тақырыптың шрифтін қалауымызша ӛзгертуге кӛмектеседі.
Тақырыптар жұп тегімен жасалады. <нп> (1-6)
Тақырыпша форматы +. Мұндағы:
n-<1>, <2>, …, <6> Ал, қарапайым абзацты форматтау
++
командалары арқылы жасалады.
Жазылған тексті оң жаққа, сол жаққа, екі жағынан
бірдей қалдырып не ортаға орналастыруға болады. Ол үшін
Text тізімінен Align одан сәйкесінше Right (оңға), Left
(солға), Jastify (екі жағынан бірдей), Center (ортаға)
орналастырады.
8сурет
Сонымен қатар мәтінді маркерленген, номерленген тізім түрінде де жазуға
болады. Ол үшін Text=>List тізімінен сәйкесті командаларды орындаймыз.
Пункт
Жазылуы
None
Қарапайым азат жол
Unordered List
Маркерленген тізім
Ordered List
Номерленген тізім
Definition List
Анықтауыш тізім
Тізімнің кейбір параметрлерін ӛзгертуге де болады. List Item =>List Propеrties
диалогтық терезесі ашылады.
9сурет
List Type арқылы тізімді былай ӛзгертуге болады:
Menu List
Меню тізімі
Numbered List
Номерленген тізім
Directory List
Бумалар тізімі
Bulleted List
Меню тізімі
Zertteušì – Issledovatel’ – The Researcher ISSN 2307-0153
№№5-12(109-116), мамыр-желтоқсан, май-декабрь, May-December,
2015
__________________________________________________________
____
84
Style арқылы маркердің не номердің стилін ӛзгертуге болады. Маркерді ӛзгерту
үшін:
[Defeault]
Маркер тӛмендетілген
Sguare
Квадратшалар
Bullet
Түстер
Номерленген тізімде мыналар орындалады:
Number – араб цифрлары;
Roman Small – кіші рим цифрлары;
Roman Large – үлкен рим цифрлары;
Alphobet Small – латынның кіші әріптері;
Alphobet Large – латынның үлкен әріптері;
[Defeault] – номер тӛмендетілген.
Түстер таңдау селекторы 2-ге бӛлінеді.
Сол жағына 16-лық код енгізіледі. Оң
жағында 3 кнопка бар. Оның біріншісі – түсті тез
таңдауға кӛмектеседі, екіншісі – экранға түсті
таңдайтын стандартты диалогтық терезені
ашады, үшіншісі – түсті таңдау палитрасына
қосады.
Кестелермен
жҧмыс.
Кестелерді
қалыптастыру.
Қазіргі
кезде
HTML
стандарттарының кӛмегімен кез-келген күрделі
кестелерді құруға мүмкіндік бар. Бірінші Web-бетті құрып алу керек. Екінші, кесте
құру үшін объектілер панелінен Common, Insert Tabel батырмаларын басамыз немесе
Insert=>Table командасын
орындаймыз.
Экранға Insert Tabel
диалогтық
терезесі
шығады. Rows жол саны,
Columns – баған саны,
Width – кестенің ені,
Border – кестенің жиегінің
қалыңдығы (үнсіз келісім
бойынша 1-ге тең). Ал
шекараны алып тастау
керек болса 0-ді енгіземіз.
Жаңа жол немесе баған қосу үшін: Modify=>Table=>Insert Row немесе Insert
Column. Ұяшықтарды қатарға немесе бағанаға бӛлу үшін Split Cell батырмасын
басамыз. Ал, қажет емес жолдар мен бағандарды ӛшіру үшін Modify=>Table=>Delete
Row немесе Delete Column командаларын орындаймыз. Қасиеттер редакторындағы
Horz ӛрісінде горизонтальді түзетулер, Vert ӛрісінде вертикальді түзетулер
енгізіледі, Border ӛрісінде ұяшық жиегінің түсі беріледі.
Zertteušì – Issledovatel’ – The Researcher ISSN 2307-0153
№№5-12(109-116), мамыр-желтоқсан, май-декабрь, May-December,
2015
__________________________________________________________
____
85
10сурет
Кестені форматтау үшін Commands менюінен Format Table пунктін
орындаймыз. Сонымен қатар Dreamweaver кӛмегімен кестелерді сорттауға болады.
Ол үшін Commands менюінен Sort Table пунктін орындаймыз.
Кестелердің алдын-ала анықталған форматтары. Жоғарыда айтылған
мүмкіндіктерден басқа Dreamweaver кестелердің кӛптеген алдын-ала анықталған
форматтар түрлерін ұсынады. Кестелер форматтары түрлі-түсті схемалар
концепциясымен ұқсас, олар да мамандандырылған дизайнерлермен арнайы
қолданушыларға кӛмек беру мақсатында жасалған.
Ең алдымен кесте құрамыз. Ол үшін Insert Table батырмасын басамыз. Кесте
пайда болған соң оны ерекшелеп алып, кестелердің форматын Command менюінен
Format Table диалогтық терезесі арқылы таңдауға болады. Бұл меню пункті тек сіз
кестені ерекшелеп алғанда ғана орындалады.
11сурет
Жоғарыда сол жақта тізім орналасқан, онда барлық мүмкін кестелердің алдын-
ала анықталған форматтары бар. Сіз тек керек жолды таңдайсыз да, анығырақ кӛру
панелінен
алынған
нәтижені
қарайсыз.
Тӛменірек
орналасқан
басқару
элементтерінің группалары сізге форматтың ұнамағанн жерін аздап қалауыңызға
қарай ӛзгертуге кӛмектеседі.
First командасы тақ тақ жолдар түсін береді, ал Second – жұп жолдар түсін
береді. Alternate командасы әрбір топтың қатарларының санын анықтайды. Бұл
жерде бес пункт бар:
- < do not alternate> – First командасымен берілген, барлық жолдар бір түспен
боялады;
- Every Other Row – топтар бір-бір жолдан;
- Every Two Rows – екі жолдан;
- Every Three Rows – үш жолдан;
- Every Four Rows – тӛрт жолдан тұрады.
Top Row тобы кестенің бірінші жолының параметрлерін келтіреді. Align
мәтінді түзетеді: сол жағынан (Left), центрлік (Center), он жағынан (Right) немесе
Zertteušì – Issledovatel’ – The Researcher ISSN 2307-0153
№№5-12(109-116), мамыр-желтоқсан, май-декабрь, May-December,
2015
__________________________________________________________
____
86
үнсіз, ӛздігінен (None). Text Style тізімі кесте тақырыбының стилін береді: кәдімгі
(Regular), қалың (Bold), бір жақты (Italic), қалың бір жақты (Bold italic). Bg Color Text
Color түс командалары сәйкесінше фонның және бірінші жолдың мәтіннің түсін
береді.
Кестелерді сорттау. Кестелерді сорттау үшін кестелерді ерекшелеп алып,
Commands менюінен Soft Table пунктін таңдайсыз. Экранда Soft Table диалогтық
терезесі пайда болады.
Бірінші жол нӛмері мәніне
байланысты Soft By тізімінде
беріледі. Жолдарға цифрлар беріп,
оларды сорттау үшін Order
элементтер
тобын
шертеміз.
Ascending пункті бағандарды ӛсу
ретімен, ал Descending – кему
ретімен сорттайды.
Кесте
ҧяшықтарын
біріктіру. Ұяшықтарды біріктіру
үшін біріктіретін ұяшықтарды
белгілеп, қасиеттер редакторынан
біріктірукнопкасын
Modify=>Table=>Merge Cells командаларын орындаймыз.
Ал
біріктірілген
ұяшықтарды
бӛлу
үшін
горизонтальді
Modify=>Table=>Decrease Column Span, вертикальды Modify=>Table=>Decrease Row
Span командасын орындаймыз.
Гиперсілтемелермен жҧмыс. Қарапайым гиперсілтемелер қҧру. Ашылған
web-бетті толтырып, мысал ретінде macromedia сӛзін кірістіріп, осы сӛзді
белгілейміз. Қасиеттер редакторындағы link ӛрісіне интернет-адрес жазамыз.
12 сурет
Оған http://www.macromedia.com-ды жазып, -ді басамыз. Нәтижесі
экранда бірден кӛрінеді, яғни гиперсілтеме қосылғаннан кейін, macromedia сӛзі кӛк
түске боялып, асты сызылады.
Сонымен қатар, гиперсілтеме қою
үшін Modify менюінен Make link
пунктін таңдаймыз. Экранға Select
File диалогтық терезесі шығады,
керек
адресті
осы
терезеде
енгізуге болады.
Гиперсілтеменің
адресін
ӛзгерту үшін Modify=>Change
link,
ал
ӛшіру
үшін
Modify=>Remove
link-ті
Zertteušì – Issledovatel’ – The Researcher ISSN 2307-0153
№№5-12(109-116), мамыр-желтоқсан, май-декабрь, May-December,
2015
__________________________________________________________
____
87
орындаймыз. Текстілік курсорды гиперсілтемеге қойып, қасиеттер редакторындағы
Target ӛрісін толтырамыз. Ол гиперсілтеменің мақсатын айқындайды. Тӛрт пунктен
тұрады. Blank – гиперсілтеме кӛрсетілген бетке ӛту немесе Modify=>Link Target-ті
орындаймыз.
Почталық гиперсілтеме құру үшін Macromedia сайтының интернет-адресіне
почталық адрес құрайық. Мысалы: ivanov@some.mail.ru. Почталық адрес почталық
жәшік пен почта серверінен @ – белгісімен ажыратылып жазылады. HTML
стандартына сәйкес ол былай жазылу керек: mailto:ivanov@somemail.ru. Бұл да
қарапайым гиперсілтеме сияқты, қасиеттер редакторында толтырылады.
Сонымен қатар, почталық гиперсілтеме құру үшін объектілер панелінен
Common, Email link батырмаларын таңдаймыз.
12сурет
Басқа гиперсілтемелер. Ал енді басқа интернет-ресурстарға сілтеме жасайтын
Dreamweaver ортасындағы гиперсілтемелерді жасауды қарастырайық. Сіздерге
белгілі болу керек, Интернет WWW және электрондық почтадан басқа да
сервистерді ұсынады: FTP, жаңалықтар топтасы және тағы басқа Dreamweaver-ді
немесе ескіше айтқанда Блокнотты пайдаланып, Сіздер аталған ресурстарға
гиперсілтеме жасауыңыз мүмкін. Интернет ұсынатын барлық ресурстарды
қарамаймыз. Тек қана Сіз нақты кездесулеріңіз мүмкін ғана сервистермен
шектелеміз.
Қорытынды. Бұл ғылыми жұмыста қазіргі заман талабына сай Web-сайт
жасау мәселесі қарастырылған, бұл қазіргі кезде кӛкейтесті мәселелердің бірі болып
саналады.Жұмыс барысында тӛмендегдей тапсырмаларды орындадым: қазіргі соңғы
Интернет-технологиялармен танысу және оларды жұмыс барысында пайдалану;
жалпы сайт жасау кезеңдерін, ережелерін және оған қойылатын талаптарын оқып-
үйрену және оларды практика жүзінде ұстану; Web-беттерге түрлі мәліметтерді
орналастыру амалдары мен тәсілдерін зерттеу; Web-сайт құрылымын анықтау; Web-
сайт жобалау және құру құралдарын зерттеу; Macromedia Dreamweaver
бағдарламасының
технологиясымен
танысу;
Macromedia
Dreamweaver
бағдарламасының мүмкіндіктерін зерттеп, практика жүзінде, яғни сайт құру кезінде
пайдалану; Web-сайт құру.Тапсырмаларды орындау нәтижесінде қазіргі заман
талабына сай «Мұрагер» мектебінің Web-сайты құрылды.
Әдебиеттер
1 Бекметова Р. Бiрiктiрiлген сабақтарды ӛткiзу кезiнде компьютерлiк
технологияларды қолдану // Информатика негiздерi. – Алматы, 2006. – №4. – 2-6 бб.
2 Ержанова А. Бiлiм беруде ақпараттық технологияларды қолдану //
Информатика негiздерi. – Алматы, 2005. – №1. – 6-7 бб.
3 Сыдықова М. Болашақ мұғалімдерді даярлаудағы ақпараттық технологиялар
// Ұлағат. – 2008. – №1. – 21-27 бб.
Zertteušì – Issledovatel’ – The Researcher ISSN 2307-0153
№№5-12(109-116), мамыр-желтоқсан, май-декабрь, May-December,
2015
__________________________________________________________
____
88
4 Абубаева А.Электрондық оқулықтарды пайдалану // Информатика негіздері.
– №4. – 2006. – 6 б.
5 Дәстүрлі және электрондық оқытуды кіріктіру //Қазақстан мектебі. – №№7,8.
– 2006. – 30-31бб.
6>2>1> Достарыңызбен бөлісу: |