Авторлық жұмыс

сияқты «осында», «осы жерде» сілтемелер жасамаңыз.

Сілтемелер сайттың жалпы дизайнының бір бөлігі болып табылады. Олар

гармониялы немесе сайттың безендірудің жалпы стилімен дисгармонияда

болуы қажет. Естен шығармаңыз сілтменің түсі оның үстіне тышқан курсорын

алып барып шерткен кезде өзгереді. Ол деген сөз сайттың ең қарапайым

безендірілген түрінің өзінде мәтін кемінде үш түстен құралады: қарапапайым

мәтін түсі, мәтіндік сілтемелер түсі; барып көріп болған мәтін сілтемелерінің

түсі. Барып көріп болған мәтін бөліктерінің сілтемелерін әлі көрілмеген мәтін

сілтемелеріне қарағанда тартымда етуге болмайды.

Сілтемелер тартымды болуы қажет. Өз сайтыңызға құрушы емес сайтты

көрушілер көзқарасымен қарап көріңіз. Сілтемелерді түйінге келуші өзіне

тартып алатындай етіп қайта фразалаңыз және солай болса ол өзіне адамдарды

шақырып тұратын болады. Мысалы, «Біздің тарихымыз» сөзін «Біздің жүріп

өткен жолымыз» деген сөзбен алмастыруға болады. Сілтемелер түсі, оқып

көруші бір жағынан оның сілтеме екенін білетіндей, екінші жағынан оған сол

мәтінді оқу үшін зиян немесе кедергі келтірмейтіндей болуы қажет. Сілтемелер

жөнінде екі пайдалы кеңес бар: біріншісі – Сізге сілтемелер түсін, яғни көріп

болған және әлі таныспаған сілтеме түрлерінің түсін бірдей қылғыңыз келсе де,

оны сәл болсын бір бірінен ерекшенетіндей ету қажет (ешқандай себептер

болмаса да); және екіншісі – асты сызылған мәтін Веб сілтеме символы болсын,

сондықтан басылымда асты сызылған мәтіндерді пайдалануға тырысу қажет,

бөліп көрсетудің басқа да тәсілдерін пайдаланыңыз. Өзіңіз ойлап көріңіз, сіздің

белгілі бір сілтемені оқып көргіңіз келді делік, бірақ тышқан курсорын алып

барған кезде онда ешқандай өзгеріс байқалмаса қалай сезінесіз.

Фон

Фон – бұл беттің екінші жоспарындағы (қарапайым түрде - түс) бейнесі,

оның үстіне сөздер мен суреттер орналасады.

Фон сайттың барлық беттерінде өзгеріссіз қалуы тиіс. Ол барлық

беттерде сол бір түсті немесе сол бір фонды пайдалануыңыз қажет дегенді

білдіреді, сонымен қатар барлық беттерде сол бір құрылым мен сол бір өрнекті

пайдалану пайдалы. Фонды облыстарға бөлуге болады, ол өз кезегінде

келесілерге мүмкіндік береді, мысалы, навигация элементтерін беттің бір

шетіне айналасына шоғырландырып орналастыру. Егер қаласаңыз

қайталанатын элементтерді және навигация элементтерін беттің жоғарғы

жағына шоғырландырып орналастыруға болады.

Облыстарға бөлудің ең қарапайым тәсілі – қаныққан түсті пайдалана отырып

сол бір түсті қолдану (100 пайыз қаныққан), мысалы беттің бір жағына сол

түстің қаныққан түрін және екінші бір жағына сол түстің небәрі 20 пайызға

қаныққан түрін қою. Бұл негізіненөте тиімді эффекті береді. Бірақ бұл

түстердің әртүрлі мониторларда қалай көрінетіндігін ойлауды да естен

шығармау қажет. Веб – беттер фонының түсін таңдағанда көпшілік жағдайда

келесі қателіктер кездеседі:

 Шектен тыс ашық фон, ол хабарламаларды жауып қалады;

 Шектен тыс қара фон, мұнда хабарлама мәтінінің жазулары көрінбей

қалады;

 Шектен тыс монотонды фон, сіздің хабарламаңызға өте маужыраған түс

береді;

101

 Шектен тыс қаныққан фон, негізгі ақпараттан назарды өзіне қарай
тартып алады;

 Текстуралы фон - әдетте текстуралар оқытушының назарын өзіне аудару
үшін мәтінмен таласады, және сол арқылы әріптер мен сөздердің танылу
дәрежесін төмендетеді.

Фонның негізгі арналуы турлы ұмытпаған дұрыс – яғни ол хабарламадан
қарағанда қарап көрушінің назарын өзіне аударып алмсауы тиіс. Адам көзіне
бірден ұрынатын немесе бірден түсетін фонды таңдаудың қажеті жоқ, бірақ
есте қалатын болуы тиіс, болмаса фонды пайдаланбаса да болады.

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

Веб – беттердегі графика
Көпшілік түйіндерде, мәтінмен қатар графикалық элементтер де болады
(немесе суреттер) – фотографиялар, иллюстрациялар, диаграммалар және
кестелер және т.б. Себебі World Wide Web жүйесінің артықшылығы
графикалық элементтермен жұмыс істей алуынан да көрінеді.
Суреттер негізінен мәтінен ерекшеленеді, себебі олар қажет болған жағдайда
пайдаланушы компьютеріне тией алатын жеке графикалық элементтер болып
табылады. Суреттер мәтіндерге тәуелсіз жүктелетін болғандықтан,
пайдаланушы мұндай мүмкіндіктен бас тартып және тиеу үшін жұмсалатын
уақытын үнемдеуі мүмкін. Сурет неғұрлым үлкен болатын болса, солғұрлым ол
күрделі және түрлі түстілігі де жоғары, және соның салдарынан тиелу немесе
компьютерге салыну уақыты да көп болады.
Суреттер белгілі бір ақпараттан тұруы мүмкін, сонымен қатар тек веб –
бетке белгілі бір тартымдылық беруі мүмкін.
Өзіңіздің сайтыңызға графикалық элементті қосудан алдын өзіңізге келесі
сұрақтарға жауап беріңіз:
 Шын мәнінде сурет қажет пе? Оны қосқан кезде қарапайым мәтінге
қарағанда ақпараттырақ болады ма?
 Ақпараттылығыны сол қалпында сақтай отырып суреттің өлшемін немесе
көлемін кішірейтуге бола ма?
Үлкен ұзақ уақыт тиелетін эмблеманы пайдалану веб – беттерді құрып
енді бастаған дизайнерлердің сипаттық қателігі болып табылады. Ол сайттың
тиімділігін төмендетіп жіберуі мүмкін. Есте сақтаңыз, эмблема тек қана өзін
жақсы көруді ғана қанағаттандырады және сайтты қарап көрушілерге
ақпаратты да және кеңесті де жарытып бере алмайды.
Тапсырма. Өз сайтыңызға талдау жүргізіп (сайт беттеріне)
жеткіліктік затына және графикалық элементтер қажеттігіне талдау
жүргізіңіз. Беттерде тыс немесе қажеті жоқ артық элементтер бар ма
екенін көріңіз, егер оларды өшіріп тастаған жағдайда сайт бетінің
тартымдылығы және ақпараттылығы өзгереді ма?
Барлық беттердің немесе оның жеке бөліктерінің өрнектілігін басқа
қосымша графикалық элементті енгізе отырып көркемділігін арттырыңыз, атап
айтсақ: түрін, стильденген үлкен емес суретті қою және боялған суреттерді
енгізу, боялған әріптер, боялы түсті джақтар, түс градиенттерін өзгерту және
т.б. арқылы көркемділігін арттыруға әрекет жасаңыз. Талдау жүргізу

102

нәтижесінде егер артық элементтер жоқ болса оның артық еместігін және өз
ролін атқарып жатқандығын негіздеңіз.

Эмблемалардың орналасу орны және навигациялық элементтерді
орналастыру

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

Миниатюрадағы суреттер
Көпшілік жағдайда қандай да бір тақырыпты иллюстрациялау үшін үлкен
өлшемдегі суреттер қажет болады, олар негізінен жеткілікті ұзақ уақыт тиеледі.
Үлкен суретті орналастыру қажет болған орында оның кіші көшірмесін
орнатып және толық масштабты суретке немесе бейнеге сілтеме жасауға
болады. Сайтты көрушілерге бұл шынында қызық болатын болса, олар сол
сілтеме арқылы суртті толық масштабта көре алады, ал кімге қажет болмаса, ол
одан ары беттерді парақтап кете береді. Мұндай әдістеме негізінен кітаптардың
сырттары үшін, фотографиялар, жарнамалық беттер үшін аса тиімді болып
табылады, оларды негізінен сайтты қараушылардың барлық аяғына дейін оқу
немесе егжей – тегжейлі көруді қажет етпейді.
Тапсырма. Суреттерді оптимизациялау үшін кез келген бағдарламаны
пайдаланыңыз. Мұнда негізінен логотиптер және басқа суреттер үшін
сапасының елеулі түрде нашарлауына жол берместен файл өлшемін
кішірейтуге ұмтылыңыз. Есте сақтаңыз, графикалық редакторларда сурттерді
JPEG (JPG) формсатта әрбір сақтау оның сапасын нашарлатады. Барлық
суреттер үшін олардың кіші көшірмелерін дайындаңыз (иконкалар,
миниатюралар). Барлық суреттерді сол кішірейтілген көшірмелеріне
алмастыруға тырысыпңыз, әрине ол егер бет зинайнын құртпаған жағдайда
жасалады. Толық көрсетілген суреттер үшін сілтемелер жасаңыз, және
альтернативті жазбада олардың мазмұнын және файл толық өлшемін көрсетіңіз.
Логотиптер
Қағида бойынша, логотип барлық құжаттамаларға кіретін ұйымның
аталуының стильденген жазбасы болып табылады. Ұйым логотипін ала отырып
және фон түсі мен алдыңғы панель түсін сәтті таңдай отырып, сіздің
сайтыңыздың тамаша өзіне тән ғана стильде ғажап безендірілуін жүзеге
асыруға болады.
Логотипті графикалық файл түрінде сақтаңыз, ол негізінен оны кез келген
мезетте бетке қою мүмкін болуы үшін жасалады. Логотипті құру кезінде оның
тиелу уақыты үлкен емес болу қажеттігін естен шығармаңыз.
Ашық, есте сақталатын және стильді логотипті құру оңай шаруа емес.
Логотип лаконикалы және сонымен бір мезгілде айқын, көркем, ұйымның мән
мағынасын және мазмұнын түсіндіре алатындай болуы қажет.

103

Мысал ретінде Қашықтықтан білім беру орталығы «Эйдос» ұйымының
логотипін салуды қарастырайық. Ол логотиптің мекен жайы желіде келесідей:

http://www.eidos.ru/logo.gif

Сурет 1
Логотиптің орталық элементі - Адам – Жұлдыз, олар жоғары қарай, яғни
жұлдыздарға қарай ұмтылуда. Ол өзіне таныс емес кереметтерге ұмтылу,
әлемді ашу және оның ішінде өзін әлемге таныту сияқты ырымды білдіреді.
Қоршаған орта – бұл тек космос ғана емес, ол – ғаламдық интернет, яғни соған
адам қозғалысы бағытталған болып табылады.
Адам жұлдыз – тек әлемге қоныстанып қана қоймай, сонымен бірге өзінің
сәйулесін шашып және кеңістікті толтырып тұр. Ол ашық және жан жаққа паш
етілген. Көркемдік өзін өзі тарату бүкіл әлемді меңгерумен және оны танумен
бір мезгілде жүзеге асырылады. Жұлдызша пішінінің ассиметриялығы, оның
диоганалды бағытталғандығы, осы қозғалысты суртейді. Ашықтылық
динамикасын және қозғалысты шлейф береді, ол ауа дәмін сезіндіреді. Бұл
ғаламдық көк кемесінің өзіндік желкені секілді, мұнда адам саяхатқа аттанады.
Логотиптің төменгі жағында келесідей eidos.ru жазбасы бар, Орталықтың
іскерлігінің интернетке байланыстылығын және оның желідегі мекен жайын
көрсетеді. жазбаның курсивті еңістігі болса, логотиптің жалпы
диогональдық композициясымен ортақ бағыттас болып табылады. Мұндағы
түзу сызықтар болса қисық сызықтармен теңестірілген, ол эмоционалды
және рационалды дегендерді біріктіруді меңзейді. Логотипте сопақ пішінге
шлейф элементтері, адамның басы, жазба фрагменттерінің кейбір әріптері
ие. Түзу сызықтар өткір бұрыштардың басымдылығымен орындалған – және
оларға доға тәрізділерге қарсы бағытта. Адам – жұлдыз бетінің сопақтығы
оның көзқарасының тіке жоғары қарай тұрғанын білдіретіндей етіп
жасалған. Ол өзінің озғалысына бағыттас бағытқа қарап тұр.
Логотип диалектика. Ол бір жағынан адамның ашықтығын, оның жан
жақты алғырлығын және жан жақты ұмтылғыштығын білдіріп тұр. Екінші
жағынан, сәулелері өте өткір, ол қажет жағдайда сұғып алуға, және қажет
болғанда өзінің қарсыласын шегіндіруге және қыыштасушының қылышы
сияқты қадап жеңіге дайын екендігін білдіреді. Шлейфте өз кезегінде екі
рольді атқарып отыР: 1) алға түсе отырып ракета тәрізді адамға жол ашып
тұр; 2) адам айналасында қорғағыш аура «кокон» түзіп тұр.
Мұнда туындап тұрған кернеулікті сезіну жұлдыздан шығып тұрған энергияны
және оны ұстап тұрған бұлтты білдіреді. Логотипте адам өмірі сияқты көріністі
жұмыстқа көрсетіп тұр. Осыған байланысты бұл логотипті туылып келе жатқан
адам деп түсінуге де болады.
Туылу және өлім, бәріміз білетіндей бір бірімен байланысты құбылыстар.
Төрт бұрышты жұлдыздың арқасында логотипте сонымен қатар крест белгілі де
бар. Бірақ бұл Исус Христотстың тікелей кресті емес, ол негізінен Андрея
Апостол крестіне ұқсас. Көк Андрейлік жалау, бәрімізге белгілі орыс
флотының символы. Эйдос орталығы сонымен бірге виртуальды кеңістіктерді
бағындыру дегенді білдіреді.

104

Логотиптің ашық көк немсе көгілдір аспан түсі оның көкпен
байланыстылығын, биіктігін, асуларды және оның тазалығын білдіреді. Мұнда
түстік гаммадағы суықтықұ байқалмайды. Керісінше, ақшыл сары түске деген
қажеттілік туындайды, ол болса алауды білдірген болар еді. Сондықтан ақшыл
сары түс «Эйдос» фирмалық Орталығының түстік гаммасына кіреді.

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

Графика бойынша кеңестер
Беттерді графикамен шектен тыс жүктемеңіз, әсіресе бұл E-mail,
Welcome, Next және т.б. типтегі файлдар үшін қатысты. Мұнда негізінен
сайтыңызды көруші оның 5 минуттан астам уақыт жүктелгені себебі немесе
оны ашу үшін уақыттың көп жұмсалғаны үшін сізге ешқашан рахмет айтпайды.
Беттерде негізінен үлкен картиналарды пайдаланбаңыз. Егер солай болса
да оны бірнеше немесе ең болмағанда екі бөлікке бөліңіз және оларды кестеге
орналастырыңыз. Осы арқылы графиканың ашылуын жеңілдетесіз.
Егер мүмкіндік болатын болса, онда картина – сілтемелерге мәтіндік
сілтемелер көмегімен балама құрыңыз. Сайтта графикалық сілтеме де және
мәтіндік сілтемеде болсын, себебі кейбір пайдаланушылар өздерінің
браузерлерінде графиканың жүктелуін ажыратып тастайды.
Мүмкіндігінше өзіңіздің графикаңызды салуға тырысыңыз, ол арқылы сіз
сайтыңызды көрушілерге ерекше бір сезім ұялатасыз. Дайын картиналарды
қойып немесе картиналар бар орынды сілтей салып еріншектік жасамаңыз. Егер
WIDTH және HEIGHT типті форматтағы картиналарды орналастырсаңыз сіздің
мәтініңіз әртүрлі жаққа секіріп тұрады. Картиналар суреттемелеріне ALT-мәтін
жазыңыз. Келіп көрушілерді толық тиелгенше күтуге мәжбүрлі етпестен,
олардың алджын ала не туралы екендігін білуге мүмкіндік беріңіз. Картина –
сілтемелерде border="0" (в тегах <a href="...">) параметрлерін пайдаланыңыз,
осы арқылы картина – сілтеме айналасындағы көк рамкалардан құтыла аласыз.
Сайттың сыртқы көрінісі
Сайттың сыртқы көрінісін басқару
Веб – дизайнның негізгі мәселесі түйіннің соңғы жасалатын бір жола
сыртқы көрінісін кім анықтайтынындағында – дизайнер немесе сайтты қарап
көруші клиент. Құру кезінде сіз сайтқа белгілі бір сыртқы көріністі бере аласыз,
бірақ ол сіздің сайтыңызды көрушілер сол сіз жасаған күйде сайтты
қабылдайды немесе сол күйінде көреді деген сөз емес. Қағида бойынша
хабарламаны көрсету үшін қолданылатын шрифтының көлемін, өлшемін және
типін бақылай алмайсыз. Сіз сонымен қатар клиентпен қолданылатын монитор
өлшемін анық біле алмайсыз, себебі мониторлар өлшемі және олардың туралау
жүйесі мүлде басқаша, яғни әртүрлі болып келеді. ал осы аталған факторлар өз
кезегінде суреттер өлшеміне, мәтіннің анықтығына және корректілі немесе
дұрыс көрінетін түс санына әсер ете алады.
диагоналы бойынша 20 дюйм болатын мониторда тамаша болып көрінетін веб
– беттер сол сияқты бірақ диагоналы 14-15 дюйм болатын мониторда сапасыз
болып көрінеді. Егер сіз стандартты түстерді пайдаланудан бас тарсаңыз, онда

105

сіздің веб – бетіңіз тартымда емес, ажарлы емес түстерден құралған болып
көрінеді.

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

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

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

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

Жобалау кезінде монитордың сандық параметрлерін ескеру қажет –
беттің ең үлкен ені кемінде 770 пиксел, навигацияның бүйірлік панелін 570
пикселден ары асырмағанр жұрыс (ол негізінен экраннның рұқсат ету
дәрежесіне байланысты болады 800х600 пиксел).

Бұл қызықты болуы мүмкін.
Бүкіл әлемдік желі статистикасы бойынша экранның шамамен 20
пайызын түрлендіру интерфейсі және операциялық жүйенің элементтері,
шамамен 20 пайызын сайт навигациясы, шамамен 6-7 пайызын – беттік
жарнамалар, шамамен 10 пайызын – меншікті жарнама, және тек 20-25
пайызын ғана логотиптер және толықтырушылар және қалған 10 пайызын –
пайдалы ақпарат алып тұрады екен. Ал қалғаны болса – пайдаланылмаған
орын.
Бастапқы беттер ерекшеліктері
Көптеген бастапқы беттер жаңалықтар, соңғы жаңарту уақыттары, белгілі
бір күнен кейінгі келіп көруші адамдар санын есептейтін есептегіш туралы
ақпараттардан тұрады. Есептегіштер екі бастағы таяқшалар сияқты болып
келеді. егер сіздің бетіңізге адам сирек кіретін болса, ең жоғары шамада таң
қалдыруды туғызады, яғни сіздің түйініңіз қызық емес деген сөз. Сонымен
қатар есептегіштер аса педантикалы, өз меншікті сайтыңызды әрбір тексерген
сайынесептегіш көрсеткіші жоғарылай береді. Сіз өз сайтыңызды жиі жаңарта
алмайтын болсаңыз, онда жаңарту уақыты туралы мәліметтерді қоспаған
дұрыс. Уақыт жылдам өтеді және ескі күн таң қалдыратын сезім қалдыруы
мүмкін, яғни ол күнмен ьірге мәліметтер де ескіреді. Жаңа келушілер үшін
сайттағы кез келген ақпарат жаңа болып табылады. Ал сайтпен таныс

106

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

Хабарламалар өлшемін кішірейту
Веб – беттерді А4 форматына пропорционалды етпеңіз. Сайтты келіп
көрушілер мүмкіндігінше көп ақпарат алғаны маңызды және басқа беттерге
айналдыру жолағын пайдаланбастан өтсе тіптен жақсы болады. Келіп
көрушілер өздерінің мақсатына неғұрлым жылдам жететін болса, солғұрлым
олардың сіздің сайтыңызға қайта оралуы ықтимал болып табылады.
Әсіресе көлемі үлкен болып келетін және пайдасыз ақпараттардан
құралған беттер сайтыңызды көрушілердің жынына тиеді. Сайттағы сыртқы
тартымджы эффектілі көрініс және тиелу жылдамдығы арасындағы белгілі бір
тепе – теңдікті табуға тырысыңыз. Есте сақтаңыз, сіз өз сайтыңызды анағұрлым
жылдам компьютерде құратын болсаңыз, ал сайтыңызды көрушілердің
кмпьютерлерінің ондай мүмкіндігі болмауы мүмкін.
Ұзын колонкалар құруға болмайды.
Кестелер және колонкалар беттің сыртқы көрінісін жақсартады. Бірақ
егер мәтінде екі – үш колонка құратын болосаңыз, яғни ол браузер терезесіне
сыймайтын болса, онда пайдаланушыға бір колонканы оқып болған соң,
қайтадан басына қарай парақтау қажет болады, яғни келесіні оқу үшін және бір
қимыл жасау қажет. Ол адамды жиіркендіреді және шатастырады. Тек бір ғана
жағдайда, ұзын колонканы құру, ол ұзын тізімді жазу жағдайы, ол тізімнің өзі
қысқа фразалардан құралғаны дұрыс, және оқу да ыңғайлы болады. Тар
колонкаларды өрнектілік немесе көркемділік беруге тырысыңыз, ол үшін оның
сол жағын фон түсінің өзгеру шекарпасы бойынша түзеткен жөн.
Сайтты көрушілермен байланыс орнату формалары және
элементтері
Интернет – бұл интерактивті орта. Кейбір хабарламаны оқығандар сізбен
байланысқысы келетін болса, онда мұндай ортаны ұйымдастырудың
міндеттерінің бірі болып – сайтты көрушілермен байланысты қамтамасыз ету
болып табылады. Кез келген бағдарлама егер ол веб – беттер құру үшін
пайдаланылатын болса, электрондық почта түрінде байланысу ақпараттарын
жазып қалдыруға мүмкіндік беретін бағдарламалар, яғни сіздің мекемеңіз
немесе жеке мекен жайыңызды көрсетесіз. Мұндай сілтемелер негізінен
сайтыңызды көріп хабарласушылар үшін почтаны теру қажеттілігін және теру
барысында мүмкін болатын қателіктердің орын алмауы қамтамасыз етеді, яғни
сіз дұрыс мекен жайды төменгі жақөқа орнатып қоюыңыз міндетті.
Көптеген бағдарламалар бірнеше беттерден тұратын және ауысу
тетіктерінен тұратын, жалаушалар, контекстік мәзір және коментарийлер енгізу
үшін полялар жасауға мүмкіндік береді. Формалар келіп көрушілердің
қосымша қалаулары бойынша толықтырулар енгізу үшін арналады; олар нақты
сұрақтарға жауап алғысы келеді, және сіз сол жауапты арнайы формаға теріп
толтыра аласыз. Үлкен әйгілілікпен қонақтар кітапбы пайдаланылады, ол

107

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

Тапсырма. Үшінші бөлімде сіз электронды мекен жайға қалай
сілтемелер жасауды үйренген болатынсыз. Сіздің беттеріңізде мекен жай
сілтемелер түрінде емес, болашақ байланысу реквизиттері ретінде пайдалану
үшін жазып алуға қолайлы түрде болуын тексеріңіз. Сайтты көруші танысып
жатқан кезде гиперсілтемеге тышқан курсорын шерткен кезде толық мекен
жайыңыз шығатындай болуын қадағалаңыз. Минимум хат тақырыбын
толтырыңыз, себебі кейбір пайдаланушылар өздері ойланып білетіндей немесе
сіздің электронды почта жәшігіңізге келіп түсетіндей хат алы мекен жайын
қамтамасыз етіңіз.

Жақсы HTML тәртібі

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

Веб – беттеріне Java-скриптілер және апплетов шектен тыс көп санын
орналастырмаңыз. Интернет статикалармен ауру деп ойламаңыз. Егер қандай
да бір бөлім дайын болмаса онда стандартты анимациялық картьиналар қою
арқылы сайтты көрушілердің көздерін жараламаңыз. Яғни әлі дайындық жүріп
жатыр немесе «бет дайын емес» деген сөздерді жазудың қажеті жоқ. Тек қазір
емес кейінірек кіріңіз деген сөзді жазсаңыз жеткілікті. Егер мүмкіндік болатын
болса, беттерде фреймаларды пайдаланбауға тырысыңыз, ол негізінен сіздің
сайтыңызды іздеу жүйелерінде индексету кезінде өміріңізді жеңілдетуге
мүмкіндік береді.

Навигация жүйелерімен шатасқан фреймдер үлкен санын пайдаланудан
аулақ болыңыз. Әртүрлі көрсету дәрежелерінде, яғни әртүрлі мониторларда
беттің қалай көрінетіндігін тексеруді ұмытпаңыз. Сіз өз құрған сайтыңызды
кемінде 800х600 көрсету дәрежесі бар жүйеде жақсы көрінуін қамтамасыз
етуіңіз қажет, ол көрсету дәрежесінде жақсы көрінетін болса, онда ол 1024х768
дәрежесінде де жақсы көрінеді деген сөз. Горизонтальды парақтау сызығын
пайдаланбауға тырысыңыз.

Навигацияларды шектен тыс күрделі етудің қажеті жоқ. Сайттың кез
келген бетіне қол жеткізу тышқан пердесін үш рет басудан артық болмағаны
дұрыс. Егер сіз қандай да бір жарнамалық желіге түскіңіз келсе, беттерді
баннерлермен күрделі етудің қажеті болмайды. Бір бетке бір – екі баннер
жеткілікті. Сіздің сайтыңыз бойынша жүру комфорттылығын максималды
арттыруға тырыса отырып жақсы және оймен жасалған навигацияны құрыңыз.

Веб – беттер композициясы
Алдыңғы бөлімдерде біз веб – беттердің дизайнының жеке
элементтріментанысқан болатынбыз. Енді осы барлық жеке элементтер бір
бірімен қалай байланысу қажет екендігін қарастырамыз. Бастапқыда бірнше
анықтамаларды келтірейік.

108

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

Веб-дизайнер – интерфейстерді жасайтын, басқаша айтқанда веб – бетті
көрушінің оның толықтырылуымен қатынас құралын құрушы адам.

Басты міндет – навигациялар жеңілдігін және ақпараттарды қабылдаудың
қолайлылығын қамтамасыз ету.

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

Дизайн оптикалық иллюзияға, бостығы мен көлеміне, түсіне және
масштабына негізделеді.

Веб – дизайн құралдары болып, олай болса, композиция, түстік палитра,
шрифт есептеледі.

Композиция – оның мазмұнына негізделген форманың бірыңғайлылығы
және тұтастығы.

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

Композицияның негізгі қағидалары
Тұтастық – композицияның құртпай элементтерді қосу немесе алып
тастаудың мүмкін еместігі. Композицияның тұтастығын табу үшін болашақ
суретті дақтардың қатары ретінде – жеке элементтер силуэті ретінде
қарастырады, олар жазықтықта немесе кеңістікте қажетті эффектіге қол
жеткізгенге дейін бір бірімен құрамаланып және белгілі бір тұтастықты түзеді.
Композицияның барлық элементтерінемен болса да бір бірімен байланысты
болуы қажет – яғни стильмен, теңестірілуімен, өлшемдерімен және т.б.
бағыныштылық – басты және қосалқы элементтердің болуы. Мысалы, логотип
басты элемент болуы мүмкін, және оған беттегі қалған элементтер бюағынуы
тиіс (басқаша айтқанда соның стиліне сай стильде болуы тиіс).
Тепе теңдік – элементтердің оң және сол жақ, жоғары және төмен
бойынша оптикалық орталыққа қатысты орналдасуы. Оптикалық орталық
физикалық орталықтан 1/8 бөлігіне жоғары орналасады. Тепе – теңдіктің екі
түрі болады – формальды және формальды емес.
Формальды тепе теңдік - бұл элементтердің оптикалық орталықтың сол
және оң жағынан білгілі бір симметрияда орналасуы. Бұл артықшылықты,
тұрақтиылықты немесе образ консеватизмін қамтамасыз етеді.
Формальды емес тепе - теңдік – элементтердің орталық оптикалық
ортаға байланысты белгілі бір симметриялылығын орналастыру кезінде біле
отырып бұзу. Осы жағдайда симметрияны бұзу түстік өзгеруі еесбінен
компенсациялануы қажет, немсе масштабтар және көмекші элементтер қолдану
есебінен білінбегені дұрыс. Мұндай құралдар ретінде бағдаршалар,
нұсқаушылар, адам және жануар сурттері қолданылады, олар адамға немесе
пайдаланушыға бағыт алу үшін көмектесуі тиіс.
Өлшемдер сәйкестігі – бет композициясының барлық элементтері
өздерінің мән мағынасы және маңыздылығына байланысты өлшемге ие болуы
тиіс. Екіншілік маңыздағы элементтер үшін назарды аудару қажет емес, яғни
олардың өлшемі мүмкіндігінше кіші болуы тиіс.

109

Тізбектілік – белгілі бір композициясынң стильдік өзара
байланыстылығы сайттың барлық бюеттерімен күзетілуі немесе тізбекті
жалғасуы тиіс. Ол негізінен сол бір форматты пайдалану, стиль, тон және
фонды, және үнемі бірдей тәсілді пайдалану арқылы жүзеге асырылады:
логотиптер, суретті персонаж, девиз сияқты элементтермен қамтамасызщ
етіледі.

Анықтық және қарапайымдылық – кез келген элемент, яғни жоқ болған
жағдайда композиция зардап шекпейтін кез келген элемент алынып тасталуы
тиісү шрифттың әртүрлі стильдерімен басылуы, өте кіші әріптер және
символддар болуы, негативті иллюстрациялар және суреттер болмау қажет,
олар сайт бетінен аса күрдлендіріп және сол арқылы оның түсіну қиындығына
алып келеді. беттер эффектілі төмендейді.

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

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

110

Статикалық (жасыл, жасыл-сары және т.б.) – тұрақтылық, өзінше
жүктелгендік, игоизм.

Төсектік (ашық – қызыл, ашық – оранж, ашық сары, және тб.) –
деликаттылық, нәзіктік, компромис үшін қабілеттілік.

Шаршатушы (қара – жасыл, қара – көк және т.б.) – жабық, ауыр түстер.
Тапсырма. Қысқа реферат – зерттеу жазыңыз, қандайц ережелер
бойынша сіздің жобаңыз композициясы қанағаттандырады., қандай
композициялық құралдар және қандай түстерді сіз пайдаландыңыз.
Веб – дизайн басты қателіктері
Мұнда негізінен веб – дизайнда кездесетін басты қателіктер келтірілген.
Олармен таныса отырып және қорытынды жасаңыз.:).
Өте жаңа технологияларды пайдалану. Пайдаланушы, өзі JavaScript
қателіктерін көре отырып, сайтты дереу тастап кетуге тырысады, пайдаланушы
оның қалай жұмыс істеу қажет екендігін білу үшін мүлде басын қатырмайды.
Сонджықтан, ең алдымен пайдалануджан алдын оны жақсылап тексеріп және
барлығы жұмыс істейтіндігін анықтаңыз.
Анимацияларды көптеп салу. Көптеген веб – дизайнерлер ауыр
апплеттерді салуды, анимацияларды көптеп жүктеуді жақсы көреді. Оны
жасамаған дұрыс, сбебі көпшілік пайдалнушыларда бір апплеттің өзі кемінде 1
минут жүктеледі, және пайдаланушылар ашылу үшін көптеп уақыт жұмсауды
қажет етпейді, олар жеңіл жүктелетін немсе ашылатын файлдарды көруді
қалайды.
Беттердің баяу ашылуы. Егер сіздің сайтыңыз көп уақыт ішінде
ашылатын болса, онда пайдаланушы сіздің сайтыңызға кірмейтін болады.
Браузер жаңа терезелерінің пайда болуы. Браузер жаңа терезелерінің
пайда болуы - өте күрделі проблема,себебі пайдаланушылар өздерінің
экрандарын ластауды қажет етпейді. Егер пайдаланушыға жаңа ерезе ашу
қажет болса, ол оны өзі істейді.
Ескі ақпараттың болмауы. Ескі ақпарат деген – ол қажет емес ақпарат
деген сөз емес, себебі пайдаланушылар үшін тек жаңа ақпараттар ғана қажет
емес.
Баннерлердің жалпы санын орналастыру. Сонымен қатар көпшілік
дизайнерлер бір бетке 5-7 баннерге дейін орналастыруды жақсы көреді,
баннерлер жүйесінде келесі түсінік бар, «баннерлер қатып қалуы», ол
пайдалнушылар жынына қатты тиеді, банерлер көп саны адам көзқін де
тітіркендіреді. Бір бетке негізінен екі баннер орналастыру жеткілікті (жоғарғы
жағынан біреу және төменгі жағынан біреу).
Веб – дизайн бойынша кейбір сілтемелер
http://www.design.ru/kovodstvo/ - Ру/ководство А.Лебедева - ссылки и
комментарии с сайта по веб-дизайну.
http://www.design.ru/ - Сайт студии А.Лебедева
http://www.kirsanov.com/web.design/main.html - Сайт дизайнера Д.Кирсанова
http://www.webclub.ru/index.html - Всероссийский клуб вебмастеров
http://html.manual.ru/book/html.php - HTML-справочник по-русски
http://citforum.ru/internet/html/index.shtml - Язык гипертекстовой разметки
HTML Есть описание DreamWeaver - шаг за шагом (дизайн и графика), таблица
цветов и специальных символов и др.
http://www-koi8.machaon.ru/digest/rusinter.html - Почти все об Internet, WWW и

111

HTML, Java и Java-скрипт, содержит значительное число полезных ссылок.
http://www.botik.ru/~robot/sidorov/ - Назаметки на сайте "Кухня Сидорова" -
электронный учебник
http://cherry-design.spb.ru/pages/links.htm - Богатый выбор полезных ссылок и
статей
http://firststeps.narod.ru/ - Материалы по веб-дизайну, PHP и др.
http://dvk.promo.ru/ - В помощь начинающему Веб-мастеру. Даны уроки
PhotoShop, ценные материалы по работе с графикой, Macromedia Flash,
подборка шрифтов.

Примечание. В сети имеется огромное количество материалов по веб-
дизайну и сайтостроительству, причем разного качества. Только на сайте
http://narod.yandex.ru/ находится около 600 ссылок по веб-дизайну!

Осы бөлімді оқу барысында біз веб - беттердің негізгі элементтері болып
төмендегі келтірілгендер екендігін білдік, атап айтсақ:

Титулдық бет – іс жүзінде пайдалы ақпараттарға ие емеслоготипті ірі
етіп көрсету және фирмалық стиль элементтерін анық көрсету мақсатындағы
кіріс беті. Қағида бойынша титулдық бет тек бір рет қана көріледі.

Гиперсілтеме – веб – құжаттаманы безендірудің анағұрлым маңызды
элементі болып табылады. Ол сайттың кез келген басқа бетіне немесе кел
келген басқа бөліміне сілтеме жасауға мүмкіндік береді (ол графикалық
элемент және мәтінге ұқсас).

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

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

Контент (ақпараттық толықтыру) – беттегі кез келген ақпарат, безенндіру
элементтерінен ерекшеленетін хабарламалар (жаңалықтар, белгілеулер,
мәтіндер, пікірлер, галереялар, каталогтар, сілтемелер, файлдар және т.б.).

Меншікті жарнама – сайттың элементтерінің бірі болып саналатын
баннер. Мысалы, сайтта қандай да бір бөлімнің жарнамасы немесе қандай да
бір өнімді тарату жарнамасы. Қағида бойынша меншікті жарнама таңдалып
алынған стандарттардың бірі бойынша орындалады, және ол да сайт стилін
сақтауы тиіс.

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

Толықтырғыштар – графикалық формат элементтері (немесе мәтіндік),
бұлар екіншілік рольге ие, бірақ оларда стайт стилін және мазмұнын ңағартуы
тиіс, және пайдаланушыны сайттың белгілі бір элементтеріне тартуға
бағытталады.

112

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

Навигациялық – сайттың белгілі бір бөлімін сипаттайды және оған
жасалған гиперсілтеме болып саналады.

Имидждік – пиктограмма сілтеме болып саналмайды, ол қандай да бір
иллюстративті матриал ретінде орналасады, нақты мәтінді толықтырады немесе
басқа бір графикаға жасалған толықтыру тәсілді.
Көпшілік жағдайда пиктограмма екі функцияны да атқарады.
Пикторгаммаларды жасау мәселесі әруақта көкейкесті болып табылады.

Ассоциативті қатар. Графикалық редакторды ашудан алдын және
картинканы суреттеу немесе салудан алдын иконканы салуды бастайды, және
болашақ пиктограмманы қалай көрсету қажеттігі жайлы ойлану керек.
Пиктограмманың қол жетімділігі дегеніміз – пайдаланушымен элементтің
тематикалық мәнін түсіну дәрежесі деп түсіну қабылданған. Басқа сөздермен
айтқанда Пиктограмманың түсініктілігі немесе қол жетімділігі дегеніміз
пайдаланушымен пиктограмманы түсіну джәрежесі, яғни ол түсінікті болуы
тиіс. Басқаша сөздермен айтқанда кез келген пиктограмма пайдаланушылар
көпшілігіне интуитивті түсінікті болуы тиіс. Мысалы, принтер басып
шығарғаны пайдаланушылар көпшілігімен құжаттаманы басып шығару сияқты,
және ол оргтехника джүкеніндегі басқа тетік емес. Windows стилінде
орындалған ашық папка түрі пайдаланушыға сол сияқты пиктограммаға басу
арқылы қандай да бір құжаттаманы ашуға мүмкіндік береді.

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

Зертханалық (практикалық) жұмыстар
1 зерханалық жұмыс

Тақырыптың атауы: Adobe Photoshop графикалық редакторымен жұмыс.
Жұмыстың мақсаты: бағдарламаның жұмыс терезесін қарап шығу, Adobe

Photoshop графикалық редакторының құрал-саймандар тақтасымен
танысу.

Тапсырмалар: түстік құйма (заливки), ретуши, фигураларды құрастыру
құрал-саймандарын пайдала отырып, өз бетінше өз таңдау еркімен сурет
құрастыру; сонымен қатар міндетті түрде өлшем және кист түрлері, нажим
және т.б. өзгертетін құрал-саймандар параметр тақтасын пайдалану керек.

Әдістемелік ұсыныстар: жұмыс жасар алдында ең алдымен Adobe
Photoshop бағдарламасында практикалық жұмыстардың орындалуын саты-
сатысымен толықтай, қол жетімді түсіндіріліп жазылған «Уроки Фотошоп»
электронды кітабымен танысып шығу.

Сұрақтар:
1. Adobe Photoshop бағдарламасының тағайындалуы және функциялары.

113

2. Бағдарламаның жұмыс терезесіндегі негізгі құрал-саймандарды атап
шығу және

көрсету.
2 зерханалық жұмыс

Тақырыптың атауы: Adobe Photoshop бағдарламасында текстпен жұмыс
жасау. Жұмыстың мақсаты: текстпен жұмыс жасауға арналған арнайы құрал-

саймандарды қолдана отырып, тексттерді дұрыс безендіруді үйрену.
Тапсырмалар: «Работа с текстом» бөлімінен бір сабақты өз бетінше
таңдап, тапсырмаларды нұсқауға сәйкес орындау (мысалы, «клубничная
текстура» құрастырып, оны текстте қолдану).
Әдістемелік ұсыныстар: жұмыс жасар алдында ең алдымен Adobe
Photoshop бағдарламасында практикалық жұмыстардың орындалуын саты-
сатысымен толықтай, қол жетімді түсіндіріліп жазылған «Уроки Фотошоп»
электронды кітабымен танысып шығу.
Сұрақтар:
1. Берілген текстураны құрастырғанда қандай құрал-саймандар
қолдандыңыз?
2. Қабаттар түстері (палитра слоев) қандай функцияларға ие?

3 зерханалық жұмыс
Тақырыптың атауы: Adobe Photoshop бағдарламасында фотолармен
жұмыс жасау. Жұмыстың мақсаты: Adobe Photoshop құралдары көмегімен
фотоларды өзгертуді
үйрену және олардың құрылымы мен форматын түбегейлі өзгерту.
Тапсырмалар: «Работа с фото» бөлімінен бір сабақты өз бетінше таңдап,
тапсырмаларды нұсқауға сәйкес орындау (мысалы, фотоға рельефті эффектпен
салынған суреттің эффектін беру).
Әдістемелік ұсыныстар: жұмыс жасар алдында ең алдымен Adobe
Photoshop бағдарламасында практикалық жұмыстардың орындалуын саты-
сатысымен толықтай, қол жетімді түсіндіріліп жазылған «Уроки Фотошоп»
электронды кітабымен танысып шығу.
Сұрақтар:
1. Фотолармен жұмыс жасау кезінде негізінен қандай құрал-саймандар
қолданылады?
2. Фотоларды өңдеу кезінде әдетте қандай құрал-саймандар
қолданылады?

4 зерханалық жұмыс
Тақырыптың атауы: Adobe Photoshop бағдарламасында графика, дизайн
және безендіру.
Жұмыстың мақсаты: Adobe Photoshop-тың мүмкіндіктерін қолдана
отырып және өзінің ерекшелігін көрсетіп, кез-келген суреттерді жаңадан салу
және графиканың қарапайым элементтерін орындау арқылы тәжірибелер
жинау.
Тапсырмалар: «Графика для сайта» немесе «Дизайн/Рисование»
бөлімінен бір сабақты өз бетінше таңдап, тапсырмаларды нұсқауға сәйкес
орындау (мысалы, қарапайым туфлиді суретте хрустальді туфлиге айналдыру;
қарапайым былғанған қағаздан ескі қолжазба жасап шығару).

114

Әдістемелік ұсыныстар: жұмыс жасар алдында ең алдымен Adobe
Photoshop бағдарламасында практикалық жұмыстардың орындалуын саты-
сатысымен толықтай, қол жетімді түсіндіріліп жазылған «Уроки Фотошоп»
электронды кітабымен танысып шығу.

Сұрақтар:
1. Adobe Photoshop бағдарламасының жеке дизайн және әртүрлі графика
жасаудағы мүмкіндіктері.
2. Соңғы суретті алу, яғни нәтижеге жету үшін қандай қосымша және
көмекші құрал-саймандарды қолдандыңыз?

5 зерханалық жұмыс
Тақырыптың атауы: Adobe Photoshop бағдарламасында анимациямен
жұмыс. Жұмыстың мақсаты: анимациялық суреттерді құрастыруға арналған
базалық
білім алу, анимация құрастыруға арналған базалық құрал-саймандарды
пайдалануға тәжірибе жинау.
Тапсырмалар: «Волшебная ручка» анимациясын құрастыру, мұнда қалам
«Скидка» сөзін өзі жазады (өз бетінше басқа да қысқа сөздерді жазуға болады,
мақсат жазатын қалам құрастыру).
Әдістемелік ұсыныстар: жұмыс жасар алдында ең алдымен Adobe
Photoshop бағдарламасында практикалық жұмыстардың орындалуын саты-
сатысымен толықтай, қол жетімді түсіндіріліп жазылған «Уроки Фотошоп»
электронды кітабымен танысып шығу.
Сұрақтар:
1. Анимация дегеніміз не? Анимациялық суреттер қандай мақсаттар үшін
жасалынады?
2. Динамикалық суреттерді Adobe Photoshop бағдарламасында қандай
функциялар көмегімен құрастырады?

6 зерханалық жұмыс
Тақырыптың атауы: CorelDraw бағдарламасына шолу.
Жұмыстың мақсаты: бағдарламаның жұмыс терезесін қарап шығу, CorelDraw
графикалық редакторының құрал-саймандар тақтасымен танысу.
Тапсырмалар: түстік құйма (заливки), ретуши, фигураларды құрастыру
құрал-саймандарын пайдала отырып, өз бетінше өз таңдау еркімен сурет
құрастыру.
Әдістемелік ұсыныстар: әрқайсысы берілген бағдарламада жұмыс
жасауға арналған базалық құрал-саймандарды көрсететін 8 бөлімнен тұратын
«CorelDraw для начинающих» видео сабақтар жинағын көріп, CorelDraw
бағдарламасының мүмкіндіктері мен функцияларын үйрену.
Сұрақтар:
1. CorelDraw бағдарламасы. Тағайындалуы және ерекшеліктері.
2. CorelDraw құрал-саймандар тақтасы. Негізгі функциялары.

7 зерханалық жұмыс
Тақырыптың атауы: CorelDraw бағдарламасында нысандармен жұмыс
жасау. Жұмыстың мақсаты: CorelDraw бағдарламасында нысандарды
көлеңкелету,

115

көшіру және өшіруді, контурларды құрастыру және өңдеуді үйрену.
Тапсырмалар: «Работа с объектами» бөлімінен бір сабақты өз бетінше
таңдап, тапсырмаларды нұсқауға сәйкес орындау (мысалы, кез-келген
нысанның «зеркальное отображение» және бұрылысын құрастыру).
Әдістемелік ұсыныстар: әрқайсысы берілген бағдарламада жұмыс
жасауға арналған базалық құрал-саймандарды көрсететін 8 бөлімнен тұратын
«CorelDraw для начинающих» видео сабақтар жинағын көріп, CorelDraw
бағдарламасының мүмкіндіктері мен функцияларын үйрену.
Сұрақтар:
1. CorelDraw бағдарламасында нысандармен қандай жұмыстар жасауға
болады?
2. Осы әрекеттерді картографиялық шығармаларды құрастыру және
өңдеуде қолдануға болады ма?

8 зерханалық жұмыс
Тақырыптың атауы: CorelDraw бағдарламасында текстпен жұмыс жасау.
Жұмыстың мақсаты: текстпен жұмыс жасауға арналған арнайы құрал-
саймандарды қолдана отырып, тексттерді дұрыс құрастыру және өңдеуді
үйрену.
Тапсырмалар: «Работа с текстом» бөлімінен бір сабақты өз бетінше
таңдап, тапсырмаларды нұсқауға сәйкес орындау (мысалы, фигуралық текст,
оның рамкасын құрастыру, текстті түзету және айналдыруды орындау).
Әдістемелік ұсыныстар: әрқайсысы берілген бағдарламада жұмыс
жасауға арналған базалық құрал-саймандарды көрсететін 8 бөлімнен тұратын
«CorelDraw для начинающих» видео сабақтар жинағын көріп, CorelDraw
бағдарламасының мүмкіндіктері мен функцияларын үйрену.
Сұрақтар:
1. CorelDraw бағдарламасында текстпен жұмыс жасау мүмкіндіктері.
2. Құрал-саймандардың әртүрлілігі. Текст құрастыруда қандай құрал-
саймандарды қолдандыңыз?

9 зерханалық жұмыс
Тақырыптың атауы: CorelDraw бағдарламасында қабаттармен жұмыс
жасау. Жұмыстың мақсаты: CorelDraw құралдарын қолдана отырып, жекелеген
қабаттармен жұмыс жасау тәжірибесін жинау.
Тапсырмалар: «Работа со слоями» бөліміндегі видео сабақтардың біреуін
таңдау және нұсқауға сәйкес тапсырмаларды орындау.
Әдістемелік ұсыныстар: әрқайсысы берілген бағдарламада жұмыс
жасауға арналған базалық құрал-саймандарды көрсететін 8 бөлімнен тұратын
«CorelDraw для начинающих» видео сабақтар жинағын көріп, CorelDraw
бағдарламасының мүмкіндіктері мен функцияларын үйрену.
Сұрақтар:
1. Қабаттар дегенімізне? Қабаттармен жұмыс кезінде қандай құрал-
саймандар қолданылады?
2. Бұл әрекеттерді картадағы қабаттарды құру және редакциялау кезінде
қолдануға бола ма?

10 зерханалық жұмыс

116

Тақырыптың атауы: CorelDraw бағдарламасында эффектілермен жұмыс
жасау . Жұмыстың мақсаты: CorelDraw бағдарламасында түрлі графикалық
суреттерге

эффектілерді қосуға мүмкіндік беретін функцияларды үйрену.
Тапсырмалар: «Основы работы с эффектами» бөліміндегі екі видео
сабақтарды өз еркінше таңдау және нұсқауға сәйкес тапсырмаларды орындау
(мысалы, бір нысан құрып, оған "перспектива" мен "прозрачность"
эффектілерін қолдану.
Әдістемелік ұсыныстар: әрқайсысы берілген бағдарламада жұмыс
жасауға арналған базалық құрал-саймандарды көрсететін 8 бөлімнен тұратын
«CorelDraw для начинающих» видео сабақтар жинағын көріп, CorelDraw
бағдарламасының мүмкіндіктері мен функцияларын үйрену.
Сұрақтар:
1. «Эффектілер» ұғымына анықтама беріңіз. Олар не үшін қажет?
2. Эффектілерді жалпыгеографиялық және тақырыптық карталарды
редакциялау кезінде қолдануға бола ма?

11 зерханалық жұмыс
Тақырыптың атауы: CorelDraw бағдарламасындағы өңдеу жұмыстары.
Жұмыстың мақсаты: жасалған суретті басып шығаруға дайындау және
безендіру, қажетті форматын дұрыс таңдау.
Тапсырмалар: «Конечная обработка в CorelDraw» бөліміндегі барлық
видео сабақтарды көру, нұсқауларға сәйкес суретті дайындау, оны толықтай
бітіріп, баспаға шығару.
Әдістемелік ұсыныстар: әрқайсысы берілген бағдарламада жұмыс
жасауға арналған базалық құрал-саймандарды көрсететін 8 бөлімнен тұратын
«CorelDraw для начинающих» видео сабақтар жинағын көріп, CorelDraw
бағдарламасының мүмкіндіктері мен функцияларын үйрену.
Сұрақтар:
1. Суретті баып шығаруға дайындау реті.
2. Оқығанның не үйренгеннің негізінде, Adobe Photoshop және CorelDraw
бағдарламалары арасындағы ұқсастықтар мен айырмашылықтарды атап
шығу.

12 зерханалық жұмыс
Delphi тілінің негізгі компоненттері
Мақсаты: Delphi7 программалау ортасынмен және программалаудың негізгі
түсініктерімен танысу, компоненттердің қасиеттері мен оқиғаларын басқаруды
үйрену.
ҚАРАПАЙЫМ ПРОГРАММАЛАРДЫ ҚҰРУ
І. Терезе тақырыбы және фондық түсі бар қарапайым Windows-

қосымшасын жасау
1. Delphi7 программалау ортасын іске қосыңыз: Пуск/Программы/Borland

Delphi7/ Delphi7
2. Форма терезесінің тақырыбын өзгерту керек: Form1-ден Привет сөзіне.

Объектілер инспекторы (Object Inspector) терезесінің Properties (қасиет)
бөлімінде Caption қасиеті үшін Привет сөзін енгізіңіз.

117

3. Форма түсін өзгерту үшін объектілер инспекторы терезесінде Color қасиетінің
мәнін clAqua деп өзгертіңіз.

4. Қосымшаны орындаңыз: Run мәзірінен Run командасын орындаңыз немесе F9
батырмасын басыңыз.

5. Ашылған қосымша терезесінің өлшемін өзгертіп көріңіз.

6. Орап қою, бастапқы қалпына келтіру батырмаларымен жұмыс істеңіз.
7. Қосымша терезесін жабыңыз.
8. Форма мен проектіні дискіде сақтаңыз: File/Save All командасын орындаңыз да

өзіңіздің бумаңызда Prog1.pas және Prog1.dpr.

ІІ. "Моя первая программа!" мәтіні және мәтін шрифтінің өлшемі мен
мәтіннің орналасуын өзгертетін батырмалары бар Windows қосымшасын

жасау.

9. Формаға «Standard» беттінен Label объектісін орналастырыңыз.
10.Label1 объектісін форманың қажетті жеріне жылжытыңыз.
11.Label1:объектісінің қасиетін өзгертіңіз. Object Inspector терезесінде объект

қасиеттері үшін келесі мәндерді орнатыңыз:

Объект Свойство Значение

Label1 Caption Моя первая
программа!

Font 12 p., қызыл

Alignment taCenter

Color сары (Yellow)

AutoSize False

12.Программаны орындаңыз:Run/Run немесе F9.

13.Форма мен проектіні сақтаңыз.

14.Form1 терезесіне Button (командалық батырма) объектісін орнатып, оның

өлшемін өзгертіңіз.
15.Button1 объектісінің Caption қасиеті үшін"Увеличение" мәнін енгізіңіз.

16.Button1 объектісінің Click оқиғасы үшін программалық код тжазыңыз:
Формадағы Button1 объектісін екі рет шертіп, программалық код терезесінде

Begin және End сөздерінің арасына келесі кодты жазыңыз:

Label1.Font.Size := Label1.Font.Size+2;
17.Программаны орындаңыз. "Увеличение" батырмасын басқанда мәтін қандай

өзгеріске ұшырайтынына назар аударыңыз.

18.Форма мен проектіні дискіде сақтаңыз: File/Save.
19.Мәтіннің шрифтін кішірейтетін "командалық батырма" объектісін жасаңыз.

118

20.Мәтінді жылжыту үшін "командалық батырма" объектісін жасаңыз:

Label1.Left:=Label1.Left+10;

Label1.Top :=Label1.Top +10;
21.Мәтінді жасыру үшін "командалық батырма" объектісін жасаңыз:

Label1.visible:=false;

22.Программаны жабу үшін "командалық батырма" объектісін жасаңыз: Close;
23.Форма мен проектіні дискіде сақтаңыз.

БАҚЫЛАУ ТАПСЫРМАЛАРЫ
1. Мәтін түсін қызыл, көк, жасыл түстерге циклді түрде өзгертетін батырманы
формаға қосыңыз.
2. Формаға Edit өрісін қосыңыз. Өріске сан енгізілгенде мәтін осы санға сәйкес
жылжуы керек:

Label1.Left:=Label1.Left+StrToInt(Edit1.Text);

Label1.Top:=Label1.Top+StrToInt(Edit1.Text);

3. Мәтінді вертикаль және горизонталь бойынша жылжытуға мүмкіндік

беретін екі батырма жасаңыз.

ІІІ. Түс атауы бар радио-батырманы басқанда бағдаршамда сәйкес түс

жанатын Windows-қосымшасын жасау.

24.Жаңа қосымша құрыңыз: File/New/Application.

25.Формаға Label, Panel, GroupBox, RadioButton (Standard бетінен)

орналастырыңыз.

26.Объектілер инстпекторын пайдаланып Объект Қасиеті Мәні
олардың келесі қасиеттерін орнатыңыз Label1
27.RadioButton1 объектісінің Click (щелчок Panel1 Caption Светофор
мыши) оқиғасын өңдеу процедурасы үшін Caption Стойте

келесі кодты жазыңыз: Panel2 Caption Готовьтесь

procedure Panel3 Caption Идите

TForm1.RadioButton1Click(Sender:TObject); GroupBox1 Caption Цвет
RadioButton1 Caption Красный
begin

Panel1.Color:=clRed; RadioButton2 Caption Желтый

Panel2.Color:=clWhite; RadioButton3 Caption Зеленый
Panel3.Color:=clWhite;

end;

28.TForm1.RadioButton2Click және TForm1.RadioButton3Click процедуралары
үшін өздерін код жазыңыз.
29.Өлшемі 12п, сызылуы қалың (fsBold), түсі ақ (clwhite) болатын "Стойте",
"Внимание", "Идите" сөздерінің жазылуын қосыңыз.

БАҚЫЛАУ ТАПСЫРМАЛАРЫ

119

1. Панельдердің қасиеттерін форма ашылғанда көрінбейтін етіп өзгертіңіз. Ал
жазулар жанған кезде олар көрінуі керек.

13 зерханалық жұмыс
"Формада объект басқаруды құру және бұл объектілердің қасиет мәндерін

орнату.

1. Жаңа проект құрыңыз.
2. Формаға суретте көрсетілген компоненттерді орналастырыңыз.
3. Программа кодын және проектіні Unit2.pas и Pr2.dpr деген тапен сақтаңыз.

4. Келесі әрекеттерді орында:

Объект Object Inspector Қасиет/ Мәні/Әрекет
терезесінің Оқиға
Form1 бөлімі Диалог
BitBtn1 Caption &Выход
Label1 Properties Caption bkClose
Kind Введи свое имя и нажми Enter
Properties Caption

Properties

If key=#13 then

Edit1 Events begin
OnKeyPress Label2.Caption:=Edit1.Text+’,ты

любишь читать?’;

Button1 Properties Caption End;
Button2 Events OnClick Да
Properties Caption Label3.Caption:=’Молодец!’;
Events OnClick Нет

Label3.Caption:=’Почему же? Надо
читать.’;

Label2 Properties Caption Объект атауын өшіріңіз
Label3 Properties Caption Объект атауын өшіріңіз

120

5. Проектіні сақтап, орындаңыз (F9).

Өздік жұмыс

№ Тапсырма Көмек

1 Да және Нет Да және Нет батырмаларының Enabled

батырмаларын адам атын қасиеті үшін False мәнің орнатыңыз.

енгізгеннен кейін белсенді Edit1KeyPress процедурасын келесі

болатындай етіп жолдармен толықтырыңыз:

өзгертіңіз. Button1.Enabled:=true;

Button2.Enabled:=true;

2 Сұхбатты қайалау үшін Формаға BitBtn компонентін орналастырып,
оның қасиеттерін өзгертіңіз: Kind-bkRetry,
Edit1, Label2, Label3 Caption-&Повторить.
атауларын өшірілетін

болсын. Басу оқиғасына келесі кодты жазыңыз:

Label2.Caption:=’ ’;

Label3.Caption:=’ ’;

Edit1.Text:=’ ’;

3 Сұхбатты қайталау кезінде BitBtn2Click оқиғасына келесі кодты

енгізу жолы белсенді епгізіңіз:

болсын. Form1.ActiveControl:=Edit1;

№2 программа листингі

var
Form1: TForm1;
implementation
{$R *.DFM}

procedure TForm1.Edit1KeyPress(Sender: TObject; var Key: Char);
begin
If key=#13 then begin
Label2.Caption:=Edit1.Text+', ты любишь читать?';
Button1.Enabled:=true;
Button2.Enabled:=true;
end;
end;

121

procedure TForm1.Button1Click(Sender: TObject);
begin
Label3.Caption:='Молодец !';
end;

procedure TForm1.Button2Click(Sender: TObject);
begin
Label3.Caption:='Почему же? Надо читать.';
end;

procedure TForm1.BitBtn2Click(Sender: TObject);
begin
Edit1.Text:='';
Label2.Caption:='';
Label3.Caption:='';
Button1.Enabled:=false;
Button2.Enabled:=false;
Form1.ActiveControl:=Edit1;
end;
end.

14 зерханалық жұмыс
Сіздің салмағыңыз жобасы

Мақсаты:
Айнымалылар типін қолдану – бүтін және нақты (integer және real);
Жолдық деректерді сандарға және сандарды жолдық қатарларға ауыстыру үшін
StrToInt; StrToFloat, IntToStr FloatToStr ; Format() функцияларын қолдану;
Хабарламаны жеке терезеде шығару үшін ShowMessage процедурасын
пайдалану.

Тапсырма
Адамның оптимальді салмағы есептеу үшін адам бойынан 100 алып тастау
керек. Егер адамның нақты салмағы оптимальді салмақтан үлкен болса онда
адам толық, егер кем болса арық болып саналады.
1. Жаңа проект құрыңыз
2. Формаға суретте көрсетілген компоненттерді орналастырыңыз.

Edit1 – салмақ, Edit2-ге – бойының ұзындығы (см) енгізіледі .
3. Программа кодын және проектіні Unit2.pas и Pr3.dpr деген тапен сақтаңыз.

122

4. Программа коды терезесінің VAR бөліміне нақты салмақты (faktW),
оптимальді салмақты (optW), бойының мәнін (Rost) және оптимальді салмақ
пен нақты салмақ айырмасын (Delta) сақтайтын айнымалыларды енгізіңіз. VAR

factW, optW, Rost, Delta : integer;
5. Button1 батырмасын шерту процедурасына келесі кодты жазыңыз:

Объект Object Қасиет/Оқиға Мәні/Әрекет

Inspector
терезесінің

бөлімі

factW := StrToInt(Edit1.text);

Rost := StrToInt(Edit2.Text);

OptW :=Rost - 100;

Delta := abs(factW - OptW);

if OptW = factW then
Label3.caption := 'Ваш вес идеален!'

Button Events OnClick else

if OptW > factW then
Label3.caption := 'Вам надо
поправиться на '+IntToStr(Delta)+'
кг.'

else
Label3.caption := 'Вам надо
похудеть на '+IntToStr(Delta)+' кг.'

Түсініктеме:

StrToInt функциясы жолды бүтін санға аударады, IntToStr функциясы керісінше

– бүтін санды жолға ауыстырады.

6. Программаға кез келген ондық сандар енгізу үшін айнымалылардың типін

нақты типке - Real өзгертеміз: VAR factW, optW, Rost, Delta : real;

Жолды нақты типке және нақты сандарды жолға ауыстыру үшін FloatToStr

және StrToFloat функциялары қолданылады. Button1 компонентінің OnClick

оқиғасына сәйкес өзгертулер енгізіңіз.

7. Проектіні сақтап, орындаңыз.

Өздік жұмыс

№ Тапсырма Көмек

1 Нақты сандарды форматтау және ауыстыру үшін
FloatToStr() функциясының орнына Format(‘ %f
’,[айнымалы]) функциясын қолданыңыз. Мысалы,
Format(‘%f ‘, [Delta])

2 Форматтау және ауыстыру үшін Format

функциясын келесі түрде қолданыңыз:

Format(‘Строка %f’,[айнымалы]).

Мысалы, Format(‘Вам надо похудеть %f',[Delta]) .

3 Жобаны жақсарыңыз:
Программа тақырыбын жазыңыз;
Шығарылатын хабар мәтінінің қарпін (шрифт)
өзгертіңіз (түсін, өлшемін);
Программадан шығу батырмасын қойыңыз;

123

Программаны қайта орындау жағдайын жасаңыз

(Сұхбат жобасын қараңыз).

4 Салмақ және бойының ұзындығы мәні ретінде теріс ShowMessage('Ошиб

сан қабылданбайтын етіп өзгертіңіз. очная запись числа: '

+ Edit1.Text);
6. Массаны есептеу үшін дене массасының индексі қолданыңыз.

Салмақ – X,
Бойының ұзындығы – Y (метр).

Дене массасының индексі – A, мұндағы A = X / Y2 (кг/м2)
Нәтиже келесі кесте бойынша анықталады:

№ Индекс Нәтиже (экранға шығарылатын хабар)

мәні

1 A<18 Большой недовес

2 18<=A<20 Маловато и небезопасно, можно получить
истощение

3 20<=A<=25 Идеально
4 26<A<=30 Легкий недобор
5 30<A Срочно нужно худеть

№3 программа листингі

unit Unit 5 ;
interface
uses
Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
Dialogs, StdCtrls, Buttons;
type
TForm1 = class(TForm)
Edit1: TEdit;
Edit2: TEdit;
Label1: TLabel;
Label2: TLabel;
Label3: TLabel;
Button1: TButton;
BitBtn1: TBitBtn;
BitBtn2: TBitBtn;
procedure Button1Click(Sender: TObject);
procedure BitBtn2Click(Sender: TObject);
procedure Edit2Click(Sender: TObject);
procedure Edit1KeyPress(Sender: TObject; var Key: Char);
procedure Edit2KeyPress(Sender: TObject; var Key: Char);
private
{ Private declarations }
public
{ Public declarations }
end;
var
Form1: TForm1;

124

implementation
{$R *.dfm}

procedure TForm1.Button1Click(Sender: TObject);
VAR
x,y,k : real;
begin
x:=StrToFloat(Edit1.Text);
y:=StrToFloat(Edit2.Text);
y:= S qr(y/100);
k:=x/y;
if k<18 then Label3.caption := 'Большой недовес'

else
if (k>=18)and (k<20)then Label3.caption := 'Маловато и небезопасно, можно
получить истощение'

else
if (k>=20)and(k<=25)then Label3.caption := 'Идеально'

else
if (k>25)and(k<=30) then Label3.caption := 'Легкий перебор'
else
if k>30 then Label3.caption := 'Срочно нужно худеть';
end;

procedure TForm1.BitBtn2Click(Sender: TObject);
begin
Label3.Caption := '';
Edit1.Text := '';
Edit2.Text := '';
Form1.ActiveControl := Edit1;
Button1.Enabled := false;
Label2.Visible := false;
Edit2.Visible := false;
end;

procedure TForm1.Edit2Click(Sender: TObject);
begin
if Edit1.Text = '' then else
Button1.Enabled := true;
end;
procedure TForm1.Edit1KeyPress(Sender: TObject; var Key: Char);
VAR x:real;
begin
if key=#13 then
begin
try
x:=StrToFloat(Edit1.Text);
except

125

ShowMessage('Ошибочная запись числа: ' + Edit1.Text);
Edit1.SetFocus;
Exit;
end;
Label2.Visible:=true;

Edit2.Visible:=true;
Form1.ActiveControl := Edit2;
end;
end;
procedure TForm1.Edit2KeyPress(Sender: TObject; var Key: Char);
VAR y:real;
begin
if key=#13 then
begin
try
y:=StrToFloat(Edit2.Text);
except
ShowMessage('Ошибочная запись числа: ' + Edit2.Text);

Edit2.SetFocus;
Exit;
end;
Button1.Enabled:=true;
end;
end;

end.
15 зерханалық жұмыс

RGB ФОРМАТЫНДАҒЫ ТҮСТЕР жобасы
Мақсаты:
ScrollBar, Panel компоненттерімен таныстыру. Түс құраушыларының мәндердің

ауыстыру үшін TColorRef функциясын қолдану.

Программаны құру жоспары:
1. Жаңа проект құрыңыз.
2. Суретте көрсетілген компоненттерді формаға
орналастырыңыз.
3. ScrollBar айналдыру жолағы горизонтальді
(үнсіз келісім бойынша) және вертикальді бола
алады. Оның түрі Kind қасиетімен анықталады.
Осы программада вертикальді айналдыру жолағы
қолданылады.

126

4. Программа коды және проектіні сақтаңыз: Unit3.pas и Pr3.dpr.
5. Келесі әрекеттерді орындаңыз:

Объект Object Қасиет Мәні/Әрекеті
і/
Inspector
терезесінің Оқиға
сы
бөлімі

ScrollBa Properties Name Айналдыру жолағының атын RedBar

r1 деп өзгертіңіз.

Max 255 – RGB градацияларының саны

Position 122 - бастапқы мәні

Жоғарыдағы әдіспен ScrollBar2 және ScrollBar3 мәндерін орнатып,

компоненттердің атын GreenBar және BlueBar деп өзгертіңіз.

6. Формадағы барлық Label компоненттері үшін Caption қасиетінің мәнін ' ' деп

өзгертіңіз.

7. Келесі әрекеттерді орындаңыз:

Объек Object Қасиеті/ Мәні/Әрекеті
т Оқиғас
Inspector
терезесіні ы
ң бөлімі

RedBar Events OnChang Panel1.Color:=TColorRef(RGB(RedBar.Position,

e 0,0));

Label1.Caption:=IntToStr(RedBar.Position);

Panel4.Color:=TColorRef(RGB(RedBar.Position,

Greenbar.Position, BlueBar.Position));
Жоғарыдағы әдіспен ScrollBar2 және ScrollBar3 үшін OnChange оқиғасын мәнін

жазыңыз, бірақ RGB и IntToStr.

Түсініктеме:

ScrollBar1 жолағы жылжығанда, Panel1 түсі өзгеріп, түстің сандық мәнін Label

компоненті көрсетеді. Сонымен қатар Panel4 компонентінің түсі де өзгереді.

8. Проектіні сақтап, орындаңыз.

Өздік жұмыс

№ Тапсырма Көмек

1 Программа орындалғанда Форманы құру оқиғасына (Form1 үшін

панельдер бастапқы OnCreate оқиғасы) ScrollBar1, ScrollBar2,
түстерге боялып тұруы ScrollBar3 компоненттерінің позициясын
керек. өндеу кодын жазыңыз.

№4 программа коды
unit Unit6;
interface
uses
Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs,
StdCtrls, ExtCtrls, Buttons;

type
TForm1 = class(TForm)
Panel1: TPanel;
Panel2: TPanel;

127

Panel3: TPanel;
Label1: TLabel;
Label2: TLabel;
Label3: TLabel;
Panel4: TPanel;
RedBar: TScrollBar;
GreenBar: TScrollBar;
BlueBar: TScrollBar;
BitBtn1: TBitBtn;
Label4: TLabel;
Label5: TLabel;
Label6: TLabel;
procedure RedBarChange(Sender: TObject);
procedure GreenBarChange(Sender: TObject);
procedure BlueBarChange(Sender: TObject);
procedure FormCreate(Sender: TObject);
private
{ Private declarations }
public
{ Public declarations }
end;
var
Form1: TForm1;
implementation
{$R *.DFM}

procedure TForm1.RedBarChange(Sender: TObject);
begin
Panel1.Color:=RGB(RedBar.Position,0,0);
Label1.Caption:=IntToStr(RedBar.Position);
Label4.Caption:=Format('0x%x',[RedBar.Position]);
Panel4.Color:=RGB(RedBar.Position,GreenBar.Position,BlueBar.Position);
end;

procedure TForm1.GreenBarChange(Sender: TObject);
begin
Panel2.Color:=RGB(0,GreenBar.Position,0);
Label2.Caption:=IntToStr(GreenBar.Position);
Label5.Caption:=Format('0x%x',[GreenBar.Position]);
Panel4.Color:=RGB(RedBar.Position,GreenBar.Position,BlueBar.Position);
end;

procedure TForm1.BlueBarChange(Sender: TObject);
begin
Panel3.Color:=RGB(0,0,BlueBar.Position);
Label3.Caption:=IntToStr(BlueBar.Position);
Label6.Caption:=Format('0x%x',[BlueBar.Position]);
Panel4.Color:=RGB(RedBar.Position,GreenBar.Position,BlueBar.Position);

128

end;

procedure TForm1.FormCreate(Sender: TObject);

begin

Label4.Caption:=Format('0x%x',[RedBar.Position]);

Label5.Caption:=Format('0x%x',[GreenBar.Position]);

Label6.Caption:=Format('0x%x',[BlueBar.Position]);

Panel1.Color:=RGB(RedBar.Position,0,0);

Label1.Caption:=IntToStr(RedBar.Position);

Panel2.Color:=RGB(0,GreenBar.Position,0);

Label2.Caption:=IntToStr(GreenBar.Position);

Panel3.Color:=RGB(0,0,BlueBar.Position);

Label3.Caption:=IntToStr(BlueBar.Po
Объект Свойство Значение sition);

Form1 Name Clock Panel4.Color:=RGB(RedBar.Position,

Label1 Caption 00:00:00 GreenBar.Position,BlueBar.Position);
Label1 Color clYellow end;

Label1 Font.Size 24 end.
Label1
Font.Color Красный 16 зерханалық жұмыс

Компоненттерің негізгі қасиеттері

Мақсаты – компоненттердің қасиеттері мен оқиғаларын басқаруды

үйрену.

Қарапайым программаларды құру

І. Әртүрлі жылдамдықпен жұмыс

істейтін сағат жасау

1. Delphi программалау ортасын ашыңыз.

2. Form1 формасына Label (Standard

парағы) және Timer (System парағы)

компоненттерін орналастырыңыз.

3. Объектілердің келесі қасиеттерін орнатыңыз:

4. TClock.Timer1Timer процедурасы үшін уақыттың жаңару кодын жазыңыз:

Label1.Caption:=TimeToStr(Time);

5. Формаға GroupBox және RadioButton компоненттерін орналастырып, келесі

қасиеттерді көрсетіңіз:

GroupBox1 Caption Скорость

RadioButton1 Caption Медленно

RadioButton2 Caption Умеренно

RadioButton3 Caption Быстро

6. TForm1.RadioButton3Click процедурасына келесі кодты жазыңыз:

Timer1.Interval := 1000;

7. Келесі процедуралар үшін де кодтарды жазыңыз:

TForm1.RadioButton1Click (3000) және TForm1.RadioButton2Click (2000)

БАҚЫЛАУ ЖҰМЫСЫ

1. Мәтінді форма бойынша сол жақтан оң жаққа үздіксіз

жылжытыңыз.

129

2. Мәтінді формада төмендегі траектория бойынша үздіксіз жылжытыңыз.
Программа

8. Формаға Label және Button
компоненттерін суреттегідей
орналастырыңыз.
9. Button2 объектісінің қасиетін
өзгертіңіз:

DragMode: dmAutomatic
10.Button2 объектісіне MouseMove оқиғасын өңдейтін код жазыңыз:

procedure TForm1.Button2MouseMove(Sender: TObject; Shift:

TShiftState; X,Y: Integer);

begin

Button2.Left := Button2.Left+10;

Button2.Top := Button2.Top+10;

end;

11.Button1 обектісіне Click оқиғасын өңдеуге арналған код жазыңыз:

procedure TForm1.Button1Click(Sender: TObject);

begin
Label1.Caption := 'Мы были в этом уверены!'

end;
12.Программаны орындаңыз.
13.Программаны өзгертіңіз: тінтуір меңзерін Button2 обектісіне жылжытқанда

ол көрінбейтін болуы керек. Меңзерді алып тастағанда ол қайта көрінуі керек.

БАҚЫЛАУ ЖҰМЫСЫ

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

ІІ. Мультипликациясы, бейнеклипі және гиперсілтемесі бар программа

14.Формаға 268х163 өлшемді панельді

орналастырыңыз.

15.Панельдің үстінде IMAGE1

компонентін орналастырыңыз. Оның

өлшемі 072х163 болуы керек. IMAGE1
компонентіне Дракон.jpg файлын
орналастырыңыз.

16. Формада интервалы 250 болатын
таймер компонентін орналастырып,

OnTimer оқиғасына келесі кодты

жазыңыз:

With Image1 do

Begin

Left:=Left-Width div 4;

If Left=-Width Then Left:=0;

End;

17. Программаны орындап, сақтаңыз.

18. Формаға жаңа панель және MediaPlayer1 компоненттерін орналастырыңыз.
19. Форма құру процедурасына Cool.avi бейнеклипін ойнату кодын жазыңыз:

MediaPlayer1.Filename:='Cool.avi';

130

MediaPlayer1.Open;
MediaPlayer1.Display:=Panel2;
MediaPlayer1.Play;
20. Программаны орындаңыз және программа дұрыс жұмыс істесе сатаңыз.
21. Формада гиперсілтеме мәтіні бар тексті орналастырыңыз. Мәтін қаріпінің
(шрифт) түсі көк және асты сызылған болуы керек. Мәтінге курсорды әкелгенде
"Сайт преподавателя" көмекші мәтін шығуы және курсордың түрі қаламға
өзгеруі керек. Программаның USES бөліміне ShellAPI модулін қосыңыз.
Гиперсілтемені басу оқиғасы үшін келесі кодты жазыңыз:
ShellExecute(0,'Open', 'http://www.gor.h1.ru','','',SW_SHOW)

БАҚЫЛАУ ТАПСЫРМАЛАРЫ
1. Гиперсілтемені өзгертіңіз: тінтуірді үстіне әкелгенде ғана оның түсі көкке және

асты сызылған болып өзгеруі керек.

Қолданылатын әдебиеттер
1. Бидайбеков Е.Ы., Біләлов Ш., Григорьев С.Г. Ақпараттану атаулары:

ағылшынша-орысша-қазақша атаулар. – Алматы: Білім, 1998 –224 б.
2. Библиотека программиста Java: Попурри:CD Прил. к кн.К.Джамса. Библиотека

программиста Java.
3. Вейтман В. Программирование для Web: Уч.Пособие – М.:Вильямс, 2000. –

368с.
4. Виштынецский Е. И., Кривошеев А. О. Вопросы применения информационных

технологий в сфере образования и обучения//Информационныетехнологии,
1998, №2 – с. 32-36.
5. Велихов.С. Справочник по HTML 4.0. Серия книг «Руководство по работе:
советы, хитрости, трюки и секреты». Москва: Бук-пресс, 2006. – 412с.
6. Гурский.Ю.А., Васильев. А.В. Photoshop CS 2. Трюки и эффекты. – СПб.:
Питер, 2004. – 555с.
7. Защита и хранение данных: Лучшие продукты для Java: CD.Прил. к журналу
«КомпьютерПресс» - 2000, №7.
8. Интернет и WWW: Более 250 программ. CD – 2000. Прил. к журналу
«КомпьютерПресс» - 2000, №2
9. Интернет-технологии:CD -2000. Прил. к журналу «КомпьютерПресс», - 2001,
№6.
10.Крейнак Д., Хебрейкен Д. Интернет. Энциклопедия. – СПб.: Питер, 2000. –
555с.
1. Кассем Н. Разработка бизнес-приложений с помощью Java 2/Николас Кассем.
– М.:Лори, 2003. – 284с.
11.Компьютерная технология обучения:словарь-справочник/Под редакцией В. Ю.
Гриценко, А. М. Довгялло, А. Я. Савельева-К.: «Накова думка», 1992
12.Луций С. «Изучаем Photoshop». Санкт-Петербург, 2002.

131

13.Максимов Н.В. Попов И.И. Компьютерные сети: Учеб.пособие. – М.: Форум:
Инфра – М,2003. – 336с.

14.Матросов А.В. и др. HTML 4.0/Матросов А.В., Сергеев А.О., Чаунин М.П. –
СПб.:БХВ – Санкт-Петербург, 2000 – 272с.:ил.

15.Маршал Б. XML в действии – М.:Триумф, 2002. – 365с.

16.Мир Интернет: CD.Прил. к журналу «КомпьютерПресс», - 2004, №2.
17.Нұрғалиева Г. Қ. Электрондық оқулықтар – мұғалім мен оқушы арасындағы

әрекетттестікті гуманизациялау құралы// «Информатика негіздері»
республикалық журналы, №2, 2002.- 2-3 б.
18.Нұрбекова. Ж.К., А.З. Даутова, Т.К. Койбагарова. Орысша-қазақша түсіндірме
сөздік. Павлодар, 2002, -44 б.
19.Программирование в среде Java: CD – M.: Delta-MM Corp, 2003.
20.Программирование на VCL: CD. M.: Delta – MM Corp, 2002.
21.Программирование на Perl: CD. - M.: Delta – MM Corp, 2001.
22.Полонская.Е.Л. Язык HTML. Самоучитель.: - М.: Издательский дом «Вильяме»,
2003. – 320с.
23.Рева. О.Н.HTML. Просто как дважды два. Москва: Эксмо, 2007. – 256с.
24.Сливина Н. А., Фомин С. С. Компьютерное учебное пособие «Высшая

математика для инженерных специальностей»//КомпьютерПресс.- 1997.- №8.-
с.72-77.
25.Тажигулова А. И. Конструирование электронных учебников//Научно-
практический журнал «Информационные технологии в Казахстане», №1, 2000.-
С. 42-43.
26.Шиндер Д.Л. Основы компьютерных сетей.:Пер. с англ. – М.:Вильямс, 2003 –
651с.
27.Шварц Р., Кристиансен Т. Изучаем Perl/Пер с англ.С.М.Тимачева. – Киев:
BHV, 1999. – 319с.
28.XML в действии: CD. Прил. к кн.Маршала Б. XML в действии.
29.Web-дизайн и программирование: CD. Прил. к журналу «КомпьютерПресс»,
1999, №5.

Қосымша деректер:

1. CD-диск “Интерентте программалау” пәнінің электрондық

қамтамасыздандырылуы/Электронное сопровождение дисциплины

“Программирование в Интернет”

2. М.Mельников. JavaScript и объектная модель/cherry-

[email protected]Алексей Моховой. Visual Basic Script. Основы

программирования// www.midi.ru

3. Джон Остераут. Сценарии: высокоуровневое программирование для XXI

века/[email protected]

4. Сергей Верязов. Обзор технологии Active Server Pages (ASP)

/http://www.ci.ru "Компьютер-Информ"17.09.2001

132

133