63
O’ZBEKSTAN RESPUBLIKASI JOQARI HA’M ORTA ARNAWLI BILIMLENDIRIW MINISTRLIGI BERDAQ ATINDAG’I QARAQALPAQ MA’MLEKETLIK UNIVERSITETI «A’meliy matematika ha’m informatika» kafedrası «WEB TEXNOLOGIYALAR» pa’ninen L E K TS I YA T E K S T L E R I toplamı Дузген: доц. А.Турениязова NO’KIS-2008

L E K TS I YA T E K S T L E R I

Embed Size (px)

Citation preview

Page 1: L E K TS I YA T E K S T L E R I

O’ZBEKSTAN RESPUBLIKASI JOQARI HA’M ORTA ARNAWLI BILIMLENDIRIW MINISTRLIGI

BERDAQ ATINDAG’I QARAQALPAQ MA’MLEKETLIK UNIVERSITETI

«A’meliy matematika ha’m informatika» kafedrası

«WEB TEXNOLOGIYALAR» pa’ninen

L E K TS I YA T E K S T L E R I

toplamı

Дузген: доц. А.Турениязова

NO’KIS-2008

Page 2: L E K TS I YA T E K S T L E R I

2

M A Z M U N I

Kirisiw

1. Lektsiya-1. Internettin’ WWW xızmeti.

2. Lektsiya-2. Web-betlerdi jaratıw qag’ıydaları.

2.1. Web-betlerge qoyılatug’ın talaplar

3. Lektsiya-3. Sayttı jobalastırıwdın’ tiykarg’ı basqıshları

3.1. Web-sayttın’ logikalıq strukturası

3.2. Web-sayttın’ fizikalıq strukturası

4. Lektsiya-4. HTML tilinde Web xujjet jaratıw

5. Lektsiya-5. Macromedia Dreamweaver programması ja’rdeminde Web sayt jaratıw

ha’m onı basqarıw

6. Lektsiya-6. Dreamweaver programmasında web xujjetke grafikalıq obekt qoyıw

7. Lektsiya-7. Dreamweaver programmasında dinamikalıq obektler jaratıw

8. Lektsiya-8. Web betti Internette ja’riyalaw

9. Lektsiya-9. Adobe Photoshop programmasında grafikalıq obektler jaratıw

10. Lektsiya-10. Macromedia Flash programmasında animatsiyalıq obektler jaratıw

A’debiyatlar ha’m Internet resursları

Page 3: L E K TS I YA T E K S T L E R I

3

KIRISIW

Web texnologiyalar pa’ninin’ tiykarg’ı maqseti – bul Web sayt jaratıw, onı Internette ja’riyalaw

ha’m basqarıw jolların u’yretiw.

Bul tu’siniklerge anıqlıq kiriteyik.

Kompyuterlerdegi mag’lıwmatlardan, programmalar, texnikalıq qurılmalardan birgelikte

paydalanıw ushın kompyuterler tarmaqlarg’a birlestiriledi. Kompyuter tarmaqları 3 tu’rde boladı: lokal,

regionlıq ha’m global tarmaqlar. Lokal tarmaq jaqın aralıqta jaylasqan (500 metr aralıg’ında, bir xana

yaki binadag’ı kompyuterler), regionlıq tarmaq - bir oblast ishindegi qalalar, rayonlarda jaylasqan

kompyuterlerdi, al global tarmaq dunya ju’zinin’ ha’r qıylı ma’mleketlerinde, kontinentlerinde jaylasqan

kompyuterlerdi bir-biri menen baylanıstıradı.

Internet – bul birden-bir standart formada xızmet ko’rsetiwshi jer ju’zlik global kompyuter

tarmag’ı bolıp esaplanadı. Onın’ atı «tarmaqlararalıq» degen ma’nisti an’latadı. Internet tarmag’ının’

tiykarg’ı yacheykaları – bul jeke kompyuterler ha’m olardı o’z-ara baylanıstırıwshı lokal tarmaqlar.

Internet xızmetleri internet provayderleri ja’rdeminde baylanıs kanalları sıpatında telefon tarmag’ı, kabelli

kanallar, radio ha’m kosmoslıq baylanıs sistemalarınan paydalanıw mu’mkin.

Internet arqalı ha’r qıylı informatsiya, kerekli mag’lıwmatlar alıw mu’mkin, jan’alıqlar menen

tanısıw, elektron pochta xızmetinen paydalanıw, reklama jaylastırıw arqalı sawda-satıq menen

shug’ıllanıw, virtual kitapxanalardan paydalanıw, tanısıw, forum, videokonferentsiyalarda qatnasıw

mu’mkin.

Internet xızmetlerinin’ ishinde en’ ken’ tarqalg’anı – bul WWW xızmeti.

Page 4: L E K TS I YA T E K S T L E R I

4

Lektsiya-1

INTERNETTIN’ WWW XIZMETI.

Joba: 1. Kompyuter tramag’ı. Internet. 2. Web-betlik jratıwda programmalıq ta’miynleniwge qoyılatug’ın talaplar. 3. Web-betlikti jaratıw etapları. Tayanısh tu’sinikler: WWW, server, klient, Web-betlik, HTTP, Gipertekst, WWW, 3W yaki Web degenimiz ne? World Wide Web – Vsemirnaya pautina, bizin’ tilde «dunya

ju’zlik tor» degendi an’latadı. WWW – bul gipertekst tiykarındag’ı multimedialıq bo’listirilgen informatsiyalıq sistema. Bul

tu’siniklerge anıqlıq kiriteyik. Bo’listirilgen mag’lıwmatlar sisteması: mag’lıwmat ju’de ko’p WWW-serverlerde (servers)

saqlanadı. Server – bul arnawlı programmalar jazılg’an ha’m Internet tarmag’ına jalg’ang’an kompyuter. Tarmaq paydalanıwshıları bul mag’lıwmatlardı WWW-dokumentlerdi ko’riw mu’mkinshiligin beretug’ın klient dep atalıwshı arnawlı programmalar ja’rdeminde aladı. Onın’ ushın bul programma tarmaq arqalı serverge zapros (talapnama) jiberedi. Bul talapqa juwap retinde server sol mag’lıwmat saqlanıp turg’an fayldı jiberedi yaki bul talaptı orınlay alalmag’anlıg’ın bildiredi. Klient ha’m serverdin’ birge islesiwi protokol dep atalıwshı belgili bir qag’ıydalar arqalı a’melge asırıladı. WWW da qabıllang’an protokol HyperText Transfer Protocol (gipertekst jiberiw protokolı), qısqasha http dep ataladı.

Multimedia: mag’lıwmat tek g’ana tekst emes, ba’lki eki-u’sh o’lshemli grafika, video, sesten ibarat

boladı. Gipertekst: WWW tegi mag’lıwmat saqlawshı ha’r bir xujjet gipertekstli xujjet dep ataladı. Bunday

xujjet ishinde sol xujjettegi bir obektke yaki sırtqı (sol yaki basqa serverde jaylasqan) faylg’a silteme beriledi. Bunday siltemeler gipersilteme yaki giperbaylanıs dep ataladı. Web bette olar ayrıqsha ren’de jazılg’an yaki astı sızılg’an tekst, grafika ko’riniste boladı. Gipersiltemeler arqalı web betlerdi ko’rip otırg’an paydalanıwshı tezde xujjettin’ bir bo’liminen basqa bo’limine yaki bir

xujjetten basqa bir xujjetke o’tiwi mu’mkin. Web katalog - bul Web betliklerdi ha’r qıylı temaları boyınsha toparlarg’a ajıratıwshı Web uzel.

Webbetlikler - bul tarmaqta ko’riw ushın arnawlı tu’rdegi formatlang’an tekstli fayllar, al Web uzel - bul betliklerdi o’z-ara baylanıstırıwshı jıynaq. Web uzelge jalg’ang’anda birinshi ko’rinetug’ın betlik HomePage (domashnyaya stranitsa) dep ataladı. Betlikler o’z-ara giperbag’ıtlar (gipersiltemeler) arqalı baylanısqan. Giperbag’ıt - bul bir so’zdi yaki obektti basıw arqalı ekinshi bir betliklerge o’tiw. Demek, Web uzel jaratıw waqtında giper bag’ıtlardı ayqın ko’rinetug’ın ha’m tu’sinikli etip jaylastırıw bir qansha a’hmiyetli. Web-betlikti jaratıwdı baslawda en’ da’slep Web-betlik qanday tiptegi mag’lıwmatlar menen toltırılatug’ınlıg’ın anıqlaw kerek. Web betliklerde to’mendegi komponentler qatnasıwı mumkin:

Tekst Suwretler Animatsiyalık grafika Audiofayllar Videofayllar

Bul komponentlerdin’ barlıg’ın qollanaberiw Web betlikti bir qansha quramalastıradı. Ko’pshilik betlikler tekstler ha’m suwretleniwlerden ibarat. Web - master jan’a proekt jaratıwda programmalıq ta’miynleniwge qoyılatug’ın talaplar to’mendegishe:

• HTML kodların qayta islewshi tekstli redaktorlar

Page 5: L E K TS I YA T E K S T L E R I

5

(Bloknot, WordPad, GoldenPen ); • Arnawlı programmalar (HomeSite, Macromedia Dreamweaver h.t.b.); • Vektorlı ha’m rastrlı grafikalıq redaktorlar

(Sorel Draw, Adobe Photoshop); • Brouzer (Internet Explorer, Netscape Navigator); • Redaktor GIF animatsii (Ulead Gif Animator);

Web-betliklerdin’ grafikalıq komponentlerin tiykarg’ı 3 kategoriyag’a ajıratıw mu’mkin.

Qosımsha tekst ha’m fotografiyalarg’a iye illyustrativ grafika Tu’sindiriw ushın qollanılatug’ın sızılma, sxema, su’wret ha’m basqarıw elementleri; Dekorativ grafika Web_betti bezew ushın qollanılatug’ın elementler (fonlıq su’wretler,

bo’leklerge ajıratıwshı sızıqlar, fayldın’ grafikalıq baslamaları h.t.b.)

Web betlikler jaratıw 2 etaptan ibarat. Materiallardı tayarlaw ha’m usı materiallarg’a ashıq dostuplar (bul web betliklerdi ko’riwge ruxsat) jaratıw. Materiallar tayarlaw – bul HTML tilinde jazılg’an Web-betliktegi mag’lıwmatlardı jazıw. Al ashıq dostup ta’miyinlew degende WWW tarmag’ında server xızmetin atqarıw tu’siniledi.

Web-hu’jjette mag’lıwmatlar gipertekst (obektler, giperbag’ıtlar, illyustratsiya h.t.b.) ko’rinisinde boladı.

Sorawlar: 1. Kompyuter tarmaqları qanday boladı. 2. WWW degenimiz ne? 3. Gipertekst soznin’ ma’nisi ne? 4. Web- betlik degenimiz ne? 5. Web-betti jaratıwda qanday programmalıq ta’miynleniwlerge iye bolıw kerek? 6. Web-betti jaratıw neshe etaptan turadı?

Lektsiya-2

WEB-BETLERDI JARATIW QAG’IYDALARI Joba:

1. Web-betlerdi jaratıw qag’ıydaları ha’m olarg’a qoyılatug’ın talaplar 2. Web-cayttı jobalastırıwdın’ tiykarg’ı basqıshları 3. Internete islewdi ta’miynlewshi programmalar

Tayanısh tu’sinikler: Sayt, grafikalıq formatlar jpg, gif, Sayt dizaynı, brauzerler

2.1. Web-betlerge qoyılatug’ın talaplar Web betlerdi jaratıwda betlerdin’ mazmunı, grafika ha’m ren’lerden paydalanıw, texnologiya,

ju’kleniw tezligi, navigatsiya jumısların sho’lkemlestiriwde to’mendegilerdi umıtpaw kerek

• menyu punktleri 5-7 den aspag’anı maqul, • bir bette 30-40 kbayt grafikalıq ko’rinis jetkilikli, • birinshi bettin’ dizaynı azg’ana bolsada basqa betlerdin’ dizaynınan ayrıqsha bolıwı kerek, • web-betke qoyılatug’ın grafikalıq ko’rinislerdin’ formatı JPG, JPEG ha’m GIF bolıw kerek,

Page 6: L E K TS I YA T E K S T L E R I

6

• paydalanıwshı serverdin’ qalegen jerinen saytın’ızdın’ yaki betin’izdin’ qalegen jerine bara alıwı kerek,

• ko’p qolemli mag’lıwmattı mayda bo’leklerge bo’lgen maqul, mag’lıwmat bir ekran beti ko’leminde bolg’anı qolay,

• jaratılg’an betlerdin’ atı anglichan tilde bolıwı kerek, • gipersiltemenin’ ren’i fon ren’i menen birdey bolmawı kerek, • Web betlerdi jaratqanda keyinshelik olarg’a o’zgeris kirite alatug’ın etip du’ziw kerek, • birinshi bette sayt mazmunı, ishindegi materiallar, avtorlar xaqqında mag’lıwmat berip qoyg’an

maqul, • bette artıqsha animatsiya obektleri bolmag’anı maqul, sebebi olar ko’zdi sharshatadı ha’m bettin’

ju’kleniw tezligi pa’seyip ketedi, • sayttag’ı grafika ha’m animatsiya obektleri tek g’ana ja’rdemshi qural retinde qollang’anı maqul,

sebebi ko’p paydalanıwshılar Internette sayaxat etiwdi tezletiw maqsetinde grafikalıq qo’rinislerdi «o’shirip taslaw» rejimin ornatıp qoyadı,

• bas ha’rip penen terilgen tekstten paydalanban’, • freymlerden paydalanbag’an maqul, • sayttın’ ha’r bir betinin’ ko’lemi 80-100 kilobayttan aspaw kerek (grafikanı qosqanda), optimal

ko’lem - 40-50 Kb,

2.2. Sayttı jobalastırıwdın’ tiykarg’ı basqıshları

Jobalastırıw basqıshı sayt dizaynında en’ a’hmiyetli bolıp esaplanadı. Bul basqıshta biz tek g’ana qalem ha’m qag’az benen qurallanıp, to’mendegi sorawlarg’a juwap tabıwımız kerek:

1. Sayttın’ maqsetin ha’m wazıypaların anıqlawımız kerek. Bul sayt klientlerge birew yaki bir zat tuwralı mag’lıwmat beriw kerekpe? Klient shaqırıwı kerekpe? Bilimlendiriw ushın ba? Mashqalalar sheshiw ushın ba? Dem alıw ushın ba? Ha’r qıylı wazıypalar ushın ha’r qıylı sayt strukturası qollanıladı.

2. Bul saytta qanday konkret informatsiya bolıwı kerek? O’zin’iz yaki zakazchik tuwralı ne aytpaqshısız?

3. Kerekli informatsiyanı jıynap, tayarlap qoyıw. Barlıq tekstler, suwretler, global tarmaqqa jaylastırmaqshı bolg’an barlıq faylların’ızdı kompyuterde saqlap qoyıwın’ız kerek.

4. Sayttın’ dizaynı qanday bolıw kerek? Mazmunına, maqsetine qarap konservativ, a’piwayı yaki ko’rkem bezelgen bolıwı kerekpe? Jaqsısı dizayn ha’m qag’azg’a tu’sirilgeni maqul. Bunda dizayn tiykarg’ı informatsiyadan basım bolıp ketpewin ta’miyinlew kerek

5. Sayttın’ logikalıq strukturasın oylap tabıw ha’m sızıw kerek. Bunda o’zin’izge jaqqan bir saytqa kirip, onın’ qanday sho’lkemlestirilgenin u’yrenip shıg’ıwın’ızg’a boladı.

Mısalı, o’zin’izdin’ saytın’ız strukturası to’mendegishe bolıwı mu’mkin: bas beti, bul jerde sayt iyesi tuwralı mag’lıwmat, basqa betlerge kiriwge mira’a’t siltemeler jaylasadı; basqa betlerde bolsa qızıg’ıwshılıqların’ız (xobbi), jumısların’ızg’a (shıg’armalar, qosıqlar, suwretler, proektler, programmalar) giperssılka-siltemeler, olar fotogalereya, audio-videoklipler h.t.b. tu’rde bolıwı da mu’mkin. Bul jerde avtor tuwralı ken’irek mag’lıwmat, pochta adresi, suwreti saqlanatug’ın betke silteme bolıwı mu’mkin.

6. Sayttın’ fizikalıq strukturasın oylap ko’rin’, yag’nıy sayt papkasındag’ı ha’r bir fayldın’ belgili ishki papkalarda an’sat tabılatug’ın etip jaylasıwın ta’miyinlew (mısalı, barlıq suwretler images papkasında, al qosıqlar clips papkasında h.t.b..

7. Kaytadan joqarıdag’ı barlıq basqıshlardag’ı jumıslardı ko’zden o’tiriw. Hesh na’rse umıtılmadıma?

Internettin’ klientleri ha’m serverleri

Page 7: L E K TS I YA T E K S T L E R I

7

Web-betler htm yaki html ken’eytpeli tekstli fayllarda saqlanatug’ının aytıp o’tken edik. Grafikalıq ko’rinisler, audio- ha’m videorolikler h.t.b. obektler bo’lek fayllarda tiyisli formatlarda saqlanadı. Brouzer Web-betti ju’klew protsesinde bul grafikalıq, sesli, video fayllardı da ju’kleydi ha’m sonın’ menen Web bettin’ tolıq ko’rinisin ekrang’a shıg’aradı.

Bul betler bizin’ kompyuterimizge qalay tu’sedi? Onı tu’sinip alıw ushın biz klient ha’m server tu’siniklerin ko’rip shıg’ıwmız kerek.

Internettegi barlıq programmalar eki u’lken toparg’a bo’linedi: klientler ha’m serverler. Server programmalar kerekli resurslardı klient programmalarg’a jiberedi. Klientke bir fayl yaki mag’lıwmatlar kerek bolsa, ol serverge arnawlı talapnama jiberedi. Server bul talapnamanı qayta islep serverge soralıp atırg’an mag’lıwmatlardan ibarat bolg’an yaki bul mag’lıwmatlardı jiberiw mu’mkin emesligi tuwralı juwap jiberedi.

Esaplaw sistemalarının’ yaki tarmaqtın’ bunday du’zilisi "klient-server" arxitekturası dep ataladı. WWW de klient bolıp brouzer programmaları, al server bolıp brouzerlerdin’ talapnamaların orınlaytug’ın Web serverler xızmet etedi.

Demek, "Web-server" – bul joqarı tezliktegi kanallar arqalı Internetke jalg’ang’an ha’m o’zinin’ qattı disklerinde Web betlerdin’ faylların saqlawshı kompyuter de tu’siniledi, sonın’ menen birge klient programmalardın’ talapların orınlaytug’ın programma da "Web-server" dep ataladı. En’ ken’ tarqalg’an web server bolıp ha’zirgi ku’nde Apache ha’m Microsoft ta’repinen islep shıg’ılg’an Microsoft Internet Information Server, Sambar tabıladı. En’ ken’ tarqalg’an brouzerler – bul Microsoft Internet Explorer, Netscape Navigator, Opera, Mozilla.

Internettin’ millionlap paydalanıwshıları bar, olar bir-birin tu’sinip islesiwi ushın tarmaqtag’ı kompyuterler o’z-ara «so’ylesiw tili» xaqqında bir kelisimge kelgen, ol protokol dep ataladı. Protokol — bul mag’lıwmatlar almasıw qag’ıydaları. Web-server ha’m Web-obozrevatel (brouzer) bir-biri menen mag’lıwmat almasıw ushın HTTP (HyperText Transfer Protocol –gipertekst almasıw protokolı) qabıllang’an. Bul protokoldın’ da’rejesi TCP/IP (Transfer Control Protocol/Internet Protocol — Almasıwdı basqarıw/Internet protokolı).da’rejesinen joqarı bolıp tabıladı.

Web –betlerdi ko’rip shıg’ıw ushın arnalg’an programmalar

Web betler ju’de quramalı bolmasa, onda barlıq brouzerler onı birdey etip ko’rsetedi. Al quramalı betler ha’r qıylı brouzerlerde ha’r tu’rli ko’riniste bolıwı mu’mkin. Web betlerdi jaratıwda en’ optimal jol

Page 8: L E K TS I YA T E K S T L E R I

8

bettin’ basında «mına brouzerde jaqsı ko’rinedi» dep sol brouzerdi ju’klew ushın giperssılka qoyg’an maqul.

Internet Explorer brouzeri

Bu’gingi ku’nde veb-betlerdi ko’rip shıg’ıw ushın arnalg’an programmalar ishinde en’ ken’ tarqalg’an bolıp Microsoft Internet Explorer brouzer esaplanadı. Bul brouzerdin’ Internet Explorer 5 versiyası HTML kodların, JavaScript ha’m VBScript stsenariylerin qollap quwatlaydı. Ha’zirgi waqıtlar Internet Explorer 7 versiyası shıg’arılg’an. Bul brauzer 2006-jıldın’ basında brauzerler bazarının’ 80-85% in iyelegen.

Opera

Paydalanıwshılardın’ basım ko’pshiligi Web betlerdi ko’riw ushın MS Internet Explorer programmasınan paydalansa, ayırım paydalanıwshılar o’zine

basqa brouzerlerdi qolay ko’redi. Mısalı, Opera brouzeri. Bul brouzer ko’p artıqmashılıqlarg’a iye: tezligi, kompaktlıg’ı, bet ju’kleniw protsessi tuwralı tolıq mag’lıwmat, qolaylı interfeys, stillerdin’ kaskadlı kestelerin qollaw. Biraq bul brouzerdin’ kemshiligi – ol da dinamikalıq obektlerdi qollap-quwatlamaydı. En’ aqırg’ı versiyası Opera 9.10 Final 2006-jılı 18-dekabrde shıg’arıldı.

Mozilla Firefox

Du’nyada belgililik jag’ınan brauzerler arasında 2-shi orındı iyeleydi. Burng’ı atamaları Phoenix ha’m Firebird. Onın’ 1.0 versiyası 2004-jılı 9-noyab ku’ni shıg’arılg’an. 99-ku’n ishinde tarmaqtan 25-million reet tartıp alıng’an. 344-ku’nnen keyin 100-

milliong’a jetken. 2005-jıldın’ noyabrinde Internet-braauzerler bazarının’ 9,4% in iyelegen. Al 2006-jıldın’ ortalarına kelip bul ko’rsetkish 11-14% ti qurag’an. Mozilla Firefox 2.0 versiyası 2006-jıldın’ 25-oktyabr ku’ni shıqtı.

Sorawlar

1. Web-betti jaratıwda qnday talaplar qoyıladı? 2. Saytı jobalastırıwdın’ tiykarg’ı basqıshları qanday? 3. Klient-server degenimiz ne? 4. Qanday brauzerlerdi bilesiz?

Lektsiya-3

SAYTTI JOBALASTIRIWDIN’ TIYKARG’I BASQISHLARI

Joba: 1. Web-sayttın’ logikalıq strukturası. 2. Web-sayttın’ fizikalıq strukturası.

Page 9: L E K TS I YA T E K S T L E R I

9

Tayanısh tu’sinikler: Web-sayt strukturası,, sayttın’ bas beti, Tu’bir papka, download[s] papkası.

Web-sayttın’ logikalıq strukturası

Web sayt jaratıwda en’ a’hmiyetlisi sayttın’ barlıq betleri aldınnan islep shıg’ılg’an struktura boyınsha bir-biri menen tıg’ız baylanısqan bolıwı kerek. Bunday struktura logikalıq dep ataladı.

Betler bir-biri menen qalay baylanısadı? Ol saytta informatsiya qalay sho’lkemlestirilgenligine qaraydı. Ha’r bir sayt ushın onın’ o’zinin’ strukturası (du’zilisi) islep shıg’ıladı. Sayttı strukturizatsiyalawdın’ bir neshe printsipleri bar. To’mende jaqsı strukturalastırılg’an saytqa mısal keltiremiz.

Zastavka Glavnaya stranitsa

Novosti sayta

Razdel 1 Stranitsa 1 Stranitsa 2

Razdel 2 Stranitsa 1 Stranitsa 2

Svedeniya o razrabotchikax Kontaktnıe dannıe Karta sayta

Joqarıdag’ı strukturanın’ bo’limlerin ta’riypleyik.

Zastavka — bul paydalanıwshı sayt adresin tergeninde bas betten aldın ekranda payda bolatug’ın kishkentay Web bet. A’dette bunday bette sayttın’ yaki onın’ iyesinin’ grafikalıq logotipi boladı. Ol Macromedia Flash formatındag’ı film bolıwı mu’mkin ha’m onın’ ju’kleniwi ko’p waqıttı talap etiwi sebepli sol jerde kishkene biraq ko’zge taslanatug’ın giperssılka (birdenine sayttın’ bas betine o’tiwdi ta’miyinlewshi silteme) qoyılg’anı maqul. Zastavka bolıwı sha’rt emes, ol a’dette dem alıw yaki reklama saytlarında qoyıladı. Saytın’ızg’a zastavka qoyıwdan aldın «ol saytın’ızg’a kerekpe, sayt ishindegi materiallar menen baylanısı barma, sayt kontseptsiyasına tuwrı keleme?» degen sorawlarg’a juwap beriwin’iz kerek. Ko’binese paydalanıwshı zastavka ju’klenip bolıwın ku’tpey basqa betlerge o’tip ketedi.

Glavnaya stranitsa (sayttın’ bas beti) paydalanıwshı sayttın’ adresin konkret bir bettin’ atın ko’rsetpey tergeninde ju’klenedi. Mısalı, http://www.qmu.uz. Bul bette sayt tuwralı qısqasha kirisiw informatsiyası beriledi, jan’alıqlar beriliw mu’mkin ha’m sayttın’ basqa betlerine siltep turıwshı giperssılkalar toplamı boladı. Geypara waqıtları bul bette sayttı islep shıqqan adamlar, olardın’ avtorlıq xuquqları, kontakt adresleri, basqada atı ko’rsetilgen adamlar, ka’rxanalar tuu’ralı mag’lıwmatlar keltirilgen bolıwı mu’mkin. Glavnaya stranitsa – bul barlıq saytlarda bolıwı kerek bolg’an element. Bul bet ko’p ko’lemli bolmaw kerek, sebebi paydalanıwshı onın’ ju’klenip bolıwın kutpesten sayttan shıg’ıp ketiwi mu’mkin. Bas bette paydalanıwshıg’a sayt tuwralı ulıwma informatsiya berilip, onda qosımsha mayda mag’lıwmatlar bolmaw kerek.

Page 10: L E K TS I YA T E K S T L E R I

10

Bizin’ bas betimizdin’ atı default.htm (a’dette sonday) bolsın.

Sayt jan’alıqları ko’binese bo’lek betlerde jaylastırıladı. Olarda xronologiya boyınsha jan’alang’an ha’m tolıqtırılg’an mag’lıwmatlar dizimi saqlanadı. A’dette belgili bir waqıt (ay, kvartal, jıl) ishindegi informatsiya shıg’arıladı. Odan burıng’ı «go’ne» informatsiya bolsa giperssılka siltep turg’an jan’alıqlar arxivinde saqlanadı.

Geypara waqıtları jan’alıqlar bas bette jaylastırılıwı mu’mkin. Bunda paydalanıwshı saytqa kirgennen-aq ne jan’alang’anlıg’ın ko’rip turadı. En’ a’hmiyetlisi bul bettin’ ko’lemin asırıp jibermew kerek. Gey bir saytlar ju’de siyrek jan’alanadı yaki bolmasa ulıwma jan’alanbaydı, sol sebepli olarda hesh qanday jan’alıqlar bolmaydı.

Poleznoe soderjimoe sayta - sayttın’ paydalı ha’m mazmunlı informatsiya bo’limi (sayttın’ o’zi sol ushın jaratılg’an boladı. Ol tap kitaptag’ıday strukturalastırıladı: bir temag’a bag’ıshlang’an temalar baplarg’a biriktiriledi, baplar bolsa – bo’limlerge. Sonday etip, saytqa kirgen adam baptan bapqa, bo’limnen bo’limge o’tip, tezde kerekli informatsiyanı tawıp alıwı mu’mkin. Bizin’ saytımızdag’ı paydalı informatsiya — bul 5.4.htm, 5.5.htm ha’m Links.htm betleri. 5.4.htm faylın Hobby.htm dep, 5.5.htm bolsa Projects.htm dep qayta atamalaymız.

Sayt avtorları tuwralı informatsiya ko’lemine qaray bas yaki arnawlı bette saqlanıwı mu’mkin. Bul betlerden avtorlar menen baylanıs jasaw ushın, sayt tuwralı pikirin’izdi bildiriw yaki shag’ımlar ushın paydalanıwın’ız mu’mkin. Biz bul informatsiyanı 4.1.htm faylında keltirgenmiz. Onı About.htm dep qayta atamalaymız. Bul sayt reklama maqsetinde jaratılg’an bolsa, onda bul faylda baylanıs jasaw ushın kerekli bolg’an barlıq informatsiya (pochta adresi, elektron pochta, telefon, faks, h.t.b.) tolıq beriliwi kerek.

Karta sayta — bul sayttın’ logikalıq strukturası tolıg’ı menen suwretlengen arnawlı bet. Bul karta paydalanıwshıg’a tezde kerekli informatsiyag’a jetisiwdi ta’miynleydi. U’lken saytlardın’ barlıg’ı o’z kartasına iye boladı. Onday u’lken bolmag’an sayttın’ kartası bolıwı sha’rt emes.

Web-sayttın’ fizikalıq strukturası

Page 11: L E K TS I YA T E K S T L E R I

11

Sayttın’ fizikalıq strukturası kompyuter diskinde fayl ha’m papkalardın’ jaylasıwın ta’riypleydi.

Ko’lemi u’lken bolg’an saytlardı jaratıwda onın’ barlıq web betlerin ha’m olarg’a tiyisli grafikalıq fayllardı ta’rtip penen belgili papkalarda ha’m ol papkalardın’ barlıg’ın bir sayt papkasında jaylastırg’an maqul.

Fayllar sistemasın du’rıs sho’lkemlestirsen’iz, yag’nıy fayl ha’m papkalardı durıs jaylastırsan’ız, olardı basqarıw an’sat boladı. Bul tek g’ana sayttı jaratıw da’wirinde emes, ba’lki keyinshelik onı jan’alawda-da ju’de a’hmiyetli

Barlıq Web-dizaynerler qollanatug’ın belgili bir tipovoy (u’lgi retinde) fizikalıq struktura islep shıg’ılg’an. Ol to’mendegi listingte keltirilgen. Bunda papkalar fayllardan ken’eytpesi joqlıg’ı menen ajıralıp turadı, al kvadrat skobkalardag’ı teksttın’ bolıw sha’rt emes.

<Sayttın’ tu’b (kornevaya) papkası> default.htm download[s]

programl.exe

program2.zip

somefile.rar html[s]

pagel.htm

page2.html media

filml.avi

film2.swf

backgroundsound.mid pic[s]

picturel.gif

picture2.jpg

Bul strukturada Web-betler — bir papkada, grafikalıq fayllar — basqa bir papkada, multimediyalıq fayllar bolsa u’shinshi papkada h.t.b. jaylastırılg’an.

Tu’bir (kornevaya) papka dep bizin’ saytımız jaylasqan papka aytıladı. Fayl default.htm — bul sayttın’ bas beti. Bul fayl a’dette ha’mme waqıt tu’b katalogta jaylastırıladı.

download[s] papkasında Web-bet, suwret yaki multimediyalıq bolmag’an fayllar jaylastırıladı. Olar programma, berilgenlerdin’ faylları, arxivli fayllar bolıwı mu’mkin. Bunday fayldın’ u’stinde giperssılka basılg’anda Web-brouzer onı ashıwdı yaki son’ ashıw ushın diskte saqlawdı soraydı, bunday fayllar orınlanbaydı, yag’nıy obrabotka qılınbaydı.

html[s] papkasında Web-betler jaylasadı.

media papkasında web betlerde qollanılg’an barlıq multimediyalıq fayllar jaylastırıladı. Bul AVI, Macromedia Flash h.t.b. formattag’ı fayllar, WAV, MIDI h.t.b. formattag’ı fon muzıkası, h.t.b.

pic[s] papkasında barlıq grafikalıq ko’rinisler jaylasadı.

Page 12: L E K TS I YA T E K S T L E R I

12

Gey waqıtları quramalı strukturadan paydalanıladı, onda ha’r bir papkada ishki papkalar bolıwı mu’mkin. Mısalı:

html[s] chapterl

pagel.htm

page2.htm chapter2

pagel.htm

page2.htm

pic[a]

chapter1

picturel.gif

picture2.jpg chapter2

picture1.gif

picture2.fla

(bunda chapter –bul bap). Bunday struktura ko’lemi u’lken bolg’an saytlarda qollanıladı.

Gey waqıtları sayttın’ fizikalıq strukturasın sho’lkemlestiriwde ulıwma basqasha jantasıw qollanıladı. Bunda fayldın’ tu’ri emes, onın’ logikalıq strukturası esapqa alınadı:

Sayttın’ tu’b papkası> default.htm chapter1

pagel.htm

page2.htm

picturel.gif

picture2.jpg

chapter2

page1.htm

page2.htm

picturel.gif

picture2.fla

program1.exe

Sayt strukturasın jaratıwda jalg’ız bir jantasıw - ol qolay bolıwı kerek.

Page 13: L E K TS I YA T E K S T L E R I

13

Sorawlar:

1. Web-sayttın’ logikalıq strukturası qanday boladı? 2. Web-sayttın’ fizikalıq strukturası qanday boladı? 3. Web-sayttın’ tiykarg’v betine qanday mag’lıwmatlar jaylastırılıwı mu’mkin?

Lektsiya-4

HTML TILINDE WEB XUJJET JARATIW

Joba: 1. HTML tili. 2. HTML tilinin’ strukturası. 3. HTML tilinin’ tegları.

Tayanısh tu’sinikler:HTM, Gipertekst, teg, atribut, frey, Hu’jjet denesi, *.htm, URL

Gipertekstli xujjetler jaratıw ushın arnawlı programma islep shıg’ılg’an bolıp, ol HTML – Hyper Text Mark up Language dep ataladı. Bul programma teg (tag) dep atalıwshı arnawlı kodlardan ibarat. Bul kodlar web-bette ko’rinbeydi, biraq olardın’ ja’rdeminde avtor brouzer aynasında web-bet qanday suwretleniwi kerekligin ta’ripleydi. Xujjettegi tekst parametrleri, grafikalıq obektlerdin’ jaylasıwı, ren’ler, gipersiltemeler h.t.b. sol tegler ja’rdeminde beriledi. Demek, tegler – bul brouzer tu’sinetug’ın kodlar, xızmetshi so’zler.

HTML xujjeti <html> ha’m </html> tegleri arasındag’ı tekst bolıp tabıladı. Bul ashıwshı

(<html>) ha’m jabıwshı (</html>) tegler ju’plıg’ı bolıp, bul xujjet HTML tilinde jazılg’anlıg’ın bildiredi. HTML xujjeti <head>...</head>, <title> … </title>, <body>… </body> bo’limlerden ibarat boladı. Olardın’ ishinde xujjettin’ bası, atı ha’m denesi beriledi. Odan basqa shrift o’lshemin, bette jaylasıwın, ren’in, abzats, suwret parametrlerin belgilew, gipersiltemeler jaratıw, ha’r qıylı kesteler, formalar, freymler qoyıw ushın arnalg’an tegler ham bar.

Atributlar ashılıw tegına ten’lik belgisi menen tırnaqshag’a alıp jazıladı. Ma’selen: < h1 align = " left " >.

To’mende HTML xujjetine bir mısal keltirilgen

<HTML> <HEAD> <TITLE>WEB-bet</TITLE> </HEAD> <BODY> <N1> WEB-bet ko’rinisi</N1> <R>Bul Bloknot programmasında jazılg’an ha’m Microsoft Internet Explorer de sa’wlelengen a’piwayı Web-bet.</P> </BODY> </HTML>

Gipertekstli hu’jjetler Bloknot tekst redaktorında (Pusk → Programmı → Standartnıe → Bloknot) tayarlanadı. Bunday xujjetlerdi arnawlı brouzerler (Internet Explorer, Netscape Navigator, Mozilla) ja’rdeminde ko’riwge boladı. Bunda teglar sa’wlelenbeydi.

Page 14: L E K TS I YA T E K S T L E R I

14

Web-hu’jjetler 2 bo’limnen (hu’jjet ataması, hu’jjet denesi) ibarat ha’m ulıwma du’zilisi to’mendegi ko’riniste boladı.

<html> <head> <title> Hu’jjet ataması </title> </head> <body> Hu’jjet denesi </body> </html> Usı ko’rsetilgen tekstti redaktorda jazıp Fayl→Soxranit kak ... punktlerin tan’laymız. Imya fayla

bo’liminde faylg’a at qoyamız, tip fayla bo’liminde “*.htm” ken’eytpesin beremiz. OK tu’ymesin basamız. Web xujjet (gipertekstli xujjet) tayar.

Bul xujjetti ashıp ko’riw ushın:

Pusk→Programmı→Internet Explorer buyrıqların tan’laymız. Brouzer ashılg’annan keyin Fayl→Otkrıt buyrug’ın beremiz; Obzor tu’ymesi arqalı ashılıwı kerek fayl atın ko’rsetemiz; OK tu’ymesin basamız;

Ekranda ko’rinip turg’an hu’jjettin’ denesinde ha’zir tek g’ana "Hu’jjet denesi" degen so’z ko’rinedi. Bul jaratılg’an Web-betliktin’ hu’jjet denesine mag’lıwmatlar kiritiw ushın Internet Explorer brouzeri avtomat tu’rde Bloknot redaktorınan paydalanadı ha’m HTML kodın ko’rsetedi. «Hu’jjet denesi» so’zi ornına kerekli mag’lıwmatlardı qoyıw ushın:

Vid→v vide HTML menyuları tan’lanadı; <body>...</body> tegları arasına kerekli mag’lıwmatlar teglar arqalı ornalastırıladı;

Fayl→Soxranit buyrıg’ı beriledi; Brouzer aynasına o’temiz (Alt+TAB).

Eger usı ko’riniste html kodına o’zgerisler kiritsek ha’m brouzerge qaytıp Vid→Obnovit punktlerin yaki F5 tu’ymesin bassaq, brouzer jan’a kodlardı o’zine qamtıydı.

Tiykarg’ı teglar dizimi:

<P> Abzatstı ko’rsetiw <BR> Jan’a qatarg’a o’tiw <H1>den <H6>shekem

Zagolovkalar o’lshemlerin ornatıw

<FONT> SHriftlar o’lshemlerin ha’m ren’in ornatıw atributları <center> Tekstti ortada jaylastırıw

COLOR Tekst ren’i

SIZE Tekst razmeri <OL> Nomerlengen dizim <LI> Nomerlengen yaki markerlengen dizim elementleri <DK> Anıqlamalar dizimi <DD> Anıqlamalar dizimindegi terminlerdi tu’sindiriw <TABLE> Mag’lıwmatlardı qatar ha’m bag’analarda jaylastırıw atributları

Page 15: L E K TS I YA T E K S T L E R I

15

align –qorshap turg’an tekstlerge salıstırıp tablitsanı ornatıw background -fong’a su’wret ornatıw bgcolor –fon ren’i sellpadding -tablitsa torı ha’m tekstler arasındag’ı aralıq

<TH> <TR>

Bag’ana atributları Tablitsa qatarın anıqlaydı. Atributları Align –qatardı gorizontal ornatıw Valign –qatardı vertikal ornatıw Bgcolor –fon ren’i Background -fong’a su’wret ornatıw

<TD> Tablitsa yacheykaları Atributları Align –qatardı gorizontal ornatıw Valign –qatardı vertikal ornatıw Bgcolor –fon ren’i Background -fong’a su’wret ornatıw

<HR> Gorizontal sızıq ornatıw Atributları Align –gorizontal ornın anıqlaw Width –brouzer aynasında sızıq enin protsentte yaki piksellerde beriw

<IMG> Betlikke su’wretler ornatıw Atributları src –fayl atın yaki URLin ko’rsetiw height –biyikligin piksellerde beriw width –enin piksellerde beriw align –tekstlerge salıstırg’anda grafikalıq elementtin’ ornalasıwı border –grafikalıq elementlerdi ramkige alıw alt –su’wret tolıq ju’klenbesten aldın su’wret ornında ko’rini

<background> Suwretti fon etip qoyıw <bgcolor> Fon ren’in beriw <a> Giperbag’ıt ornatıw

Giperbag’ıtlar ko’rsetkishi so’z, bir neshe so’z yaki ha’r qıylı o’rinisler bolıw mu’mkin. Tiykarınan eki tipke ajıratıladı. Tekstli ha’m grafikalıq. Giperbag’ıtlar ornatıw ushın brouzerge ko’rsetkish ha’m bag’darlawshı adresti ko’rsetiw lazım. Bul <a> tegi arqalı a’melge asırıladı. <a> bir parametrge iye (href) ha’m qosımsha URL adres ko’rsetiledi. Mısalı http://www.qmu.uz/index.htm ha’m aqırına sha’rtli tu’rde </a> tegi qoyıladı. <a href=URL -adres> Ko’rsetkish </a>

Basqa hu’jjetlerge giperbaylanıslar ornatıwdan tısqarı, bir hu’jjet bo’limlerine de baylanıslar

ornatıw za’ru’rligi tuwılıw mu’mkin. Mısalı, u’lken ko’lemdegi elektron qollanba mazmunında bo’limlerge giperbag’ıtlar ornatıw. Ishki baylanıstı ta’miyinlew ushın da’slep ko’rsetkish, keyin usı ko’rsetkishke giperbag’ıt ornatıladı. Mısalı elektron qollanbanın’ mazmunı bo’liminde turıp 5-bo’limine baylanıs ornatpaqshı bolsan’ız da’slep 5-bo’limge barıp atama qoyamız.

<a name=chapter_5> </a> Keyin hu’jjet basına qollanba mazmunı kiritilip? 5-bo’lim degen jerine: <a href="#chapter_5> 5-bo’lim </a>

Page 16: L E K TS I YA T E K S T L E R I

16

Endi hu’jjet basındag’ı "5-bo’lim" co’zine bassaq, brouzerde 5-bo’lim teksti ko’rsetiledi. Freymlar (Frames)

Brouzer maydanın bir neshe 4 mu’yeshli kishi oblastlarg’a bo’ledi ha’m ha’r bir oblastqa bir-birine g’a’rezsiz htm hu’jjetleri ju’klenedi.

Freymlar za’ru’riyatı: Brouzer bir oblastınan turıp, 2-oblastına hu’jjetlerdi ju’klew; Basqa oblastında qanday informatsiyalardın’ turıwınan baylanıssız 1-oblastta da’slepki informatsiyanın’ turıwı

Brouzerge informatsiyalar toplamın qolaylı ko’riniste ornalastırıw.

Mısalı, brouzer aynasın to’mendegi ko’riniste bo’liw talap etilsin.

Bul korinis HTML tilinde tomendegishe jazıladı.

< FRAMESET ROWS=”80%,20%”> < FRAMESET COLS=”15%,85%”> < FRAME SRC=”fayl1.htm”> <FRAME SRC=”fayl2.htm”> <FRAMESET> <FRAMESRC=”fayl3.htm> </FRAMESET>

HTML de islew boyınsha biraz oqıw qollanbalar, elektron qollanbalar bar, al biz Web sayt jaratıwda Macromedia Dreamweaver programmasınan paydalanıwdı u’yrenemiz.

Sorawlar

1. Web-betlerdi jartıwshı til? 2. HTML so’zinin’ ma’nisi ne? 3. Teg degenimiz ne? 4. HTML tilinin’ qanday tegleri bar? 5. Freymler ne ushın qolanıladı?

Page 17: L E K TS I YA T E K S T L E R I

17

Lektsiya 5

MACROMEDIA DREAMWEAVER PROGRAMMASI JA’RDEMINDE WEB SAYT JARATIW HA’M ONI BASQARIW

Reje

1. Macromedia DreamWeaver programmasının’ aynası du’zilisi 2. Programmanın’ menyu bo’limleri 3. Web-betlerdi jaratıw

Tayanısh tu’sinikler: HTML, CSS, JavaScript, Hu’jjet ko’rinisi, programma aynası, menyuler, a’sbaplar paneli.

Macromedia kompaniyası professional Web-saytlar jaratıw ushın arnalg’an programmalar islep shıg’ıw boyınsha lider bolıp tabıladı. Macromedia DreamWeaver programması vizual HTML-redaktor bolıp, bul programma Web betlerdi HTML kodların bilmey-aq jaratıw mu’mkinshiligin beredi. Programmanın’ interfeysı sonday a’piwayı, onda ha’tteki baslawısh dizaynerler an’sat ha’m tez Web sayt jaratıwı mu’mkin. Dreamweaver "vizual" redaktor bolıp esaplanadı, yag’nıy siz islep atırg’an ju’mıs na’tiyjelerin tikkeley ekranda ko’riwin’izge boladı, onın’ ja’rdeminde quramalı saytlar jaratıw ha’m basqarıw mu’mkin. Dreamweaver professional sayt jaratıw ha’m onı redaktorlaw ushın arnalg’an a’sbap ha’m qurallardan ibarat: HTML, CSS, JavaScript, kod redaktorı.

Dreamweaver din’ o’zinde Macromedia Flash formatındag’ı animatsiyalar jaratıw, Microsoft Office ten alıng’an mag’lıwmatlardan paydalanıw, Fireworks programmasının’ rollover-grafikasın, menyu ha’m tu’ymeshelerin tu’siriw mu’mkin. Sonın’ menen birge Dreamweaver de tayar bettin’ HTML kodların redaktorlaw ha’m sol jol menen HTML tilin u’yreniw ha’m mu’mkin.

Programma iske tusirilgende ekranda Start dialog aynası payda bolıp, onda biz jan’adan Web bet jaratıw punktin tan’laymız. (Web bet jaratıw ushın tayar shablonlardan paydalanıwg’a da boladı). Na’tiyjede ekranda programma aynası payda boladı. Ol to’mendegi bo’limlerden ibarat.

Document panelinde xujjetti qay ko’riniste aynag’a shıg’arıw rejimin tan’lap alamız. Bunda 3 rejim boladı: Design view – brouzerde Web xujjet ko’rinisi, Code view – xujjettin’ HTML kodın ko’rsetiw, Design and Code view – ekran ekige bo’linip, yarımında xujjettin’ dizaynı, qalg’an yarımında kodı ko’rsetiledi. Design view rejiminde xujjet WYSIWYG (yaki neni ko’rip turg’an bolsan’ sonı alasan) printsipinde Windows programmalarında xujjet tayarlag’anday isleymiz. Keyin bolsa sol bettin’ HTML kodların Code view rejiminde ko’rip shıg’ıw mu’mkin. Kerisinshe Web xujjet bastan aq HTML kodları (tegler) ja’rdeminde Code view rejiminde tayarlanıw mu’mkin. Na’tiyjeni bolsa Design view rejiminde qoriwimizge boladı. U’shinshi rejim - eki rejimdi bir waqıtta ekranda ko’riw mu’mkinshiligin beredi.

Page 18: L E K TS I YA T E K S T L E R I

18

Insert paneli Menyu Panel toparı

Document paneli Files toparı

Status qatarı Properties paneli

Suwret 1. Dreamweaver programmasının’ aynası.

Property inspektorı tan’lang’an obekttin’ (tekst, suwret h.t.b.) sol obektke ta’n bolg’an qasiyetlerin o’zgertiw mu’mkinshiligin beredi.

Panel gruppasında bir-birine jaqın bolg’an paneller toparları jaylasadı, bul panellerdi jayıp ha’m jıynap qoyıw mu’mkin.

Files paneli fayl ha’m papkalardı basqarıw ushın arnalg’an.

Dreamweaver menyuinin’ bo’limleri

Bul programmanın’ menyu bo’limleri Windows da isleytug’ın basqa programmalardın’ menyu komandalarınan onsha parıq qılmaydı. Programma xujjetlerine ta’n bolg’an ayrım o’zgesheliklerin paydalanıwshı jumıs babında o’z betinshe uyrenip alıwı mu’mkin. Menyu File, Edit, View, Insert, Modify, Text, Commands, Site, Window, Help bo’limlerden ibarat bolıp, Help bo’liminde olar tuwralı tolıq mag’lıwmat alıw mu’mkin.

Xujjet aynasının’ joqarı, to’men ha’m on’ jag’ında ha’r qıylı paneller jaylasqan. Paneldin’ joqarısındag’ı ku’lren’ sızıqshada onın’ atı jazıladı. To’mende bunday paneldin’ tolıq ko’rinisi berilgen.

Page 19: L E K TS I YA T E K S T L E R I

19

Suwret 2. Insert paneli

Jumıs maydanın ken’eytiw maqsetinde waqtınsha bunday panellerdi «jıynap» qoyıw mu’mkin. Onın’ ushın panel atında mısh shertiliwi jetkilikli. Mısalı,

Suwret 3. «Jıynalg’an» panel ko’rinisi.

Ko’pshilik panellerdin’ toparları qosımsha menyugede iye boladı. Bul menyu paneldin’ joqarg’ı on’ muyeshindegi tu’ymeshede mısh basılg’anda ashıladı. Onın’ ko’rinisi 3 pozitsiyadan ibarat bolg’an dizim Xam to’menge qarap turgan kishkentay strelka turde boladı.Bunday qosımsha menyuda siyrek isletiletug’ın komandalar jaylasadı.

Suwret 4. Paneller toparının’ qosımsha menyui (ashıq).

Kerek emes panelden «qutılıw» ushın onı mısh penen «uslap alıp» dokument aynasının’ sırtına «shıg’arıp taslaw» mu’mkin yaki onın’ menyuin ashıp Close Panel Group tan’laymız-da sol paneldi jawıp taslaymız. Kerekli paneldi ekrang’a shıg’arıw ushın bolsa menyunin’ Window bo’limine kirip, sol paneldi tan’laymız.

Page 20: L E K TS I YA T E K S T L E R I

20

Dreamweaver panelleri ha’r qıylı wazıypalardı atqaradı ha’m ken’ mu’mkinshiliklerge iye. Bıraq olardın’ ishinde to’mendegi eki panel en’ a’xmiyetli bolıp esaplanadı. Bul Insert (suwret2) ha’m Properties panelleri.

Insert instrumentler panelinde xujjetke qoyılıwı mu’mkin bolg’an xa’r qıylı obektlerdin’ tu’ymesheleri jaylasqan. Olar ja’rdeminde xujjetke suwret, tablitsa, simvol, qatlam h.t.b. obektler qoyılıwı mu’mkin. Bul obektlerdin’ barlıg’ı HTML kodları ja’rdeminde jaratılg’an bolıp, olardın’ atributların o’zin’iz o’zgertiwin’iz mu’mkin. Mısalı, Web betke tablitsa ornatıw ushın bul paneldegi tablitsa tu’ymeshesin basıwın’ız jetkilikli. Sonın’day-aq, ha’r qıylı obektlerdi menyuinin’ Insert bo’liminde ha’m qoyıwın’ız mu’mkin.

Esletpe. Bul panel ekranda ko’rinbey turg’an bolsa, menyunin’ Windows punktinde Insert yaki <Ctrl>+<F2> klavishalar kombinatsiyasın basıw jolı menen onı shıg’arıw mu’mkin.

Properties — qasiyetler redaktorı, bul instrument Dreamweaver din’ en’ kerekli instrumenti bolıp, onın’ ja’rdeminde Web bettin’ elementleri qasiyetleri belgilenedi, parametrleri ornatıladı, basqasha aytqanda, tiyisli HTML-teginin’ atributının’ ma’nisi beriledi. Bul panel ha’mme waqıt qol astında bolıw kerek.

Esletpe. Bul paneldi bilmey jawıp qoyg’an bolsan’ız, menyunin’ Windows bo’liminde Properties punktin tan’lan’ yaki <Ctrl>+<F3> klavishalar kombinatsiyasın basın’.

Suwret 5. Kasiyetler redaktorı («jayılg’an» ko’rinisi)

Xujjet aynasının’ to’mengi bo’liminde Status qatarı jaylasqan. Windows dın’ basqa programmalarınan Dreamweaver din’ o’zgesheligi, bul qatar tek g’ana xujjet tuwralı informatsiya ko’rsetip turıw emes, ba’lki basqada funktsiyalardı orınlaydı. Ol u’sh sektsiyag’a bo’lingen. SHep jag’ında tegler sektsiyası jaylasqan. Kursordı tekst u’stine qoyıp, <r> basılsa, onda <R> tegi ishindegi barlıq tekst yag’nıy abzats tolıg’ı menen ajıratıladı, al <body> basılsa, onda web bet tolıg’ı menen ajıratıladı. Demek, bul sektsiya ja’rdeminde kerekli tegqa o’tiw an’satlastırıladı.

Ortada ayna o’lshemin piksellerde ko’rsetip turıwshı sektsiya jaylasadı. Onda mısh basılg’anda, ekranda menyu payda boladı, bul menyuda ekrannın’ razresheniesine sa’ykes ayna o’lshemleri dizimi shıg’arıladı.

On’ jag’ındag’ı sektsiyada sizin’ jaratqan Web-betin’izdin’ o’lshemi ha’m onı Web-serverden ju’klew ushın ketetug’ın wa’qıt ko’rsetiledi. Bul sektsiya bet o’lshemi sektsiyası. Bo’lshektin’ alımında bet o’lshemi, bo’liminde ju’klew tezligi beriledi.

Web-betlerdi jaratıw

Dreamweaver de Web-betler qalay jaratıladı?

Qısqasha aytqanda, a’piwayı tekst protsessorı ja’rdeminde, mısalı Microsoft Word-ta xujjet jaratıw qanday bolsa, sonday. Kerekli tekst teriledi, bezeledi ha’m tayar bolg’an xujjet fayl turde saqlanadı. Ayırmashılıg’ı bul fayl ken’eytpesi htm yaki html boladı ha’m sol waqıttın’ o’zinde Web-serverde jaylastırılıwı mu’mkin.

Page 21: L E K TS I YA T E K S T L E R I

21

Jan’a Web-bet jaratıw ushın File menyuinde New punkti tan’lanadı yaki <Ctrl>+<N> klavishalar kombinatsiyası basıladı. Ekranda New Document dialog aynası payda boladı.

Suwret 6. New Document dialog aynası

Dreamweaver MX programmasında Web-betlerdi shablonlar ja’rdeminde jaratılıwı ha’m mu’mkin. SHablon — bul sonday aldınnan arnap tayarlang’an ha’m saqlang’an Web-bet, og’an sizge kerek bolg’an ayırım elementler tayar turde jaylastırılg’an. Siz bunday web betke tiykarg’ı tekst qosıp, bezeliwin qalegenin’izshe o’zgertsen’iz, bul bet professionallıq da’rejedegi tayar Web betke aylanıwı mu’mkin. Egerde sizin’ «taza» betten baslap Web bet jaratıwg’a waqtın’ız bolmasa, bunday shablonlar – siz ushın!

Biz bolsa Category bo’limindegi dizimnen (shablonlar kategoriyaları) «bos shablon» yag’nıy Basic Page punktin ha’m onın’ ishinen HTML tan’lap, OK basamız.

«Bos» web bet tayar. Og’an kerekli tekst kirgiziledi. Mısalı,

Page 22: L E K TS I YA T E K S T L E R I

22

Xujjet tekstin formatlaw

Dreamweaver tekst formatlawdı basqa tekst protsessorlarında orınlang’anday etip (HTML tilin bilmey-aq) a’melge asırıw mu’mkinshiligin beredi. Onın’ ushın kerekli tekst ajıratılıp, Properties redaktorında shrift parametrleri beriledi.

Mısal. Teksttin’ bir bo’leginin’ shriftın qalın etiw ushın ol ajıratılıp, to’mendegi a’mellerdin’ birewi orınlanadı:

Properties panelinde V tan’laysız, Menyunin’ Text bo’liminde Style punktin, keyin bolsa Bold tan’laysız, Kontekstli menyu shaqırıladı ha’m Style- Bold tan’lanadı, <Ctrl>+<B> klavishalar kombinatsiyası basıladı.

Har bir paydalanıwshı bunday a’mellerdi orınlawda o’zine qo’laylısın tan’lap alıw xuqıqına iye.

Sol jol menen basqa da formatlaw jumısları orınlanıwı mu’mkin.

Suwret 7. SHriftler dizimi

Page 23: L E K TS I YA T E K S T L E R I

23

Suwret 8. SHriftler o’lshemi dizimi

Esletpe. 1. WWW –xalıq aralıq tor o’zi ne ushın jaratılg’an edi? Dunya juzinin’ qalegen jerindegi qalegen kompyuterden paydalanıwshı adam qalegen HTML dokumentin oqıy alıwı ushın! Sol sebepten HTML belgili bir standart shriftlerdan paydalanıwdı na’zerde tutadı. Bunday shriftler ha’r bir Internet paydalanıwshısının’ kompyuterinde ornatılg’an, sonın’ menen birge 7 tu’r shrift o’lshemi –de belgilengen. 2. Dreamweaver-din’ o’zgesheligi bunday a’mellerdi xujjettin’ Status qatarındag’ı Teglar sektsiyasında -da orınlaw mu’mkin. Suwrette ol < body > < p.style1> ko’riniste. Bul sektsiya ja’rdeminde bir teg ishinde jaylasqan tekst fragmentin tan’lap, onı tolıg’ı menen formatlaw mu’mkin

SHrift ren’in o’zgertiw

Suwret 9. Dreamweaver –din’ ren’ tan’law tu’ymeshesi

Ren’ tan’law tu’ymeshesi (Selektor tsveta) eki bo’limnen ibarat. On’ jag’ındag’ı maydanshada kerekli ren’nin’ on altılıq kodın kiritiwin’iz mu’mkin. Bıraq barlıq ren’lerdin’ kodların yadta saqlap turıw qıyın, sol sebepli shep jaqta ren’ler palitrası aynasın shaqıratug’ın tu’ymeshe jaylasqan.

Suwret 10. Ren’ler selektorınan kerekli ren’ tan’law aynası

Page 24: L E K TS I YA T E K S T L E R I

24

Bul aynadag’ı ren’ler palitrasınan kerekli ren’ (mısh penen) tan’lang’anda palitra joqarısında bul ren’ ha’m onın’ on altılıq kodı ko’rinedi. Al palitradan sizge kerek ren’ tabılmasa, onda mısh kursorı ja’rdeminde (ol pipetka ko’riniste boladı) sol ren’ siz bar jerden (Rabochiy stol yaki basqa bir obektten) «alıwın’ız» mu’mkin

Bul ren’ tan’law aynasın jabıw ushın <Esc> klavishası basıladı.

Giperssılka (giperko’rsetpe) jaratıw

Dreamweaver programması giperssılkalardı a’piwayı ha’m an’sat jol menen jaratıw mu’mkinshiligin beredi. Onı mısalda ko’rsetemiz. Eki giperssılka jaratayıq. Birewi «sırtqı» (bizin’ saytımızdın’ sırtındag’ı) xujjetke ko’rsetiwshi, ekinshisi bul qollanba avtorının’ elektron pochta adresine.

Birinshi giperssılkanı basqanda http://www.qmu.uz – Qaraqalpaq ma’mleketlik universitet saytına kiresiz, ekinshi giperssılka bolsa mag’an xat jazıw aynasın ashıp beredi.

«Qaraqalpaq ma’mleketlik universitetinde» tekstin ajıratıp alamız-da Properties paneline qaraymız, onda Link bo’limi aktivlesip, bizden sayt adresin kiritiwimizdi ku’tip turadı.

Suwret 11. Giperssılka ushın Internet-adresin kiritiw maydanshası

Sol maydanshada http://www.qmu.uz adresin kiritkenimizden keyin <Entcr> klavishasın basamız. Endi web betti brouzerde yag’nıy Internet Explorer-de ko’rgenimizde (onın’ ushın F12 basıladı)

Page 25: L E K TS I YA T E K S T L E R I

25

«Qaraqalpaq ma’mleketlik universitetinde» teksti giperssılka ko’riniste boladı, onı basıw menen universitet saytına kiremiz.

Internet-adres kiritiw maydanshasının’ on’ jag’ında eki tu’ymeshe jaylasqan. On’ jag’ındag’ı tu’ymeshe papka ko’riniste bolıp, ol bizge Select File (fayl tan’la) dialog aynasın ashıp beredi.

Suwret 12. Select File dialog aynası

Bul aynada biz giperssılka (gipersilteme) bolıp xızmet qılatug’ın fayl atların tan’lap alıwımız mu’mkin. Mısalı, menin’ saytım (papka) bir neshe betten (fayllar) ibarat bolsa, olardı bir-biri menen baylanıstırıw (birewinen birewne silteme beriw) yaki sırttag’ı basqa bir web xujjet penen baylanıstırıw ushın olardın’ Internet-adresi qoldan terilmey usı dialog aynasınan tan’lanıwı mu’mkin.

Web betti saqlaw

Jaratqan Web betti saqlaw ushın File menyuinde Save as tan’lanadı yaki <Ctrl>+<Shift>+<S> klavishalar kombinatsiyası basıladı.

Sonnı aytıp qoyıw kerek, Web saytqa tiyisli bolg’an barlıq fayllar bir papkanın’ ishinde saqlanıwı kerek, bul papka ishki papkalardan ibarat bolıp, olarda tekst, grafika, animatsiya h.t.b. bo’lek saqlanadı.

Jumıstı an’lastırıw ushın saqlang’an betti sol papkada bir neshe ma’rte basqa atlar menen saqlawg’a boladı. Bular saytımızdın’ betleri, olarda birinshi bet dizaynı saqlanadı, tekst bolsa o’zgertiliwi mu’mkin.

Sorawlar

1. Macromedia DreamWeaver programmasının’ aynası du’zilisi qanday? 2. Programmanın’ menyu bo’limleri nelerden turadı?

Page 26: L E K TS I YA T E K S T L E R I

26

3. Web-betlerdi jaratıwdı neden baslaymız? 4. Web hu’jjetke giperko’rsetpelerdp qalay ornatamız? 5. Web betti saqlaw ushın qanday a’meller orınlanadı?

Lektsiya-6

DREAMWEAVER PROGRAMMASINDA WEB XUJJETKE GRAFIKALIQ OBEKT QOYIW

Reje

1. Web betlerdi jaratıwda qollanılatug’ın grafikalıq formatlar 2. Web betke grafikalıq obektler qoyıw 3. Web betke animatsiyalıq obektler qoyıw

Tpyanısh tu’sinikler: grafikalıq formatla,GIF,JPG, PNG, DjVu, LWF, Flash obekt, freym

Internettin’ grafikalıq formatları

Grafikalıq formatlardın’ sanı ko’pligine qaramastan, Internette paydalanıw ushın tek g’ana u’sh format qabıllang’an. Bul CompuServe Graphic Interchange Format yaki GIF, JPEG formatı (onı jaratqan gruppa atı menen atalg’an) — Joint Picture Expert Group) ha’m jan’adan qabıllang’an PNG (Portable Network Graphics)formatı. Keyingi waqıtlar DjVu ha’m LuRaTech Wavelet (LWF) formatları ken’ tarqalıp kiyatır. DjVu formatı birdenine tekst ha’m grafikadan ibarat bolg’an xujjetlerge mo’lsherlengen, al LuRaTech Wavelet (LWF) —suwret sapasın saqlap qalıp, fayl ko’lemin joqarı da’rejede qısıw imkaniyatına iye bolg’an format. Bul formatda fayldı qısıw aldınnan jan’a fayldın’ o’lshemin beriwge boladı.

GIF ha’m JPEG formatları

Bul formatlardı Internettin’ barlıq brouzerleri «tanıydı» ha’m qollap-quwatlaydı ha’m olardı sa’wlelendiriw ushın hesh qanday qosımsha modul talap etpeydi.

GIF formatı ko’binese “qoldan sızılg’an” suwret, chertej, grafiklerdi h.t.b. suwretlew ushın paydalanıladı. Onda maksimal ren’ler sanı 256 bolg’an indekslengen ren’ palitrası qollanıladı. Sol sebepli ko’pren’li suwretlerdi GIF formatda saqlawdın’ qajeti joq, sebebi onda fayl ko’lemi u’lkeyip ketedi, al suwret sapası to’men boladı. Biraq fayldın’ bir ren’degi tıg’ız jaylasqan tochkaları ko’p bolsa, onda bunday fayldı GIF formatda kishkene o’lshemge alıp keliw mu’mkin.

JPEG— bul ja’ne bir ken’ tarqalg’an grafikalıq format. Bul formattag’ı fayllardın’ ken’eytpesi .jpeg yaki .jpg bolıwı mu’mkin. GIF formatınan ayırmashılıg’ı bul format fotosuwret tipindegi ko’rinisler ushın arnalg’an bolıp, onda tek g’ana 256 emes, ba’lki 16 777 216 (yag’nıy 2 24 ) ren’ge deyin bolıwı mu’mkin.

Page 27: L E K TS I YA T E K S T L E R I

27

Demek, web saytın’ızda usı eki grafikalıq formattan paydalanıwg’a ha’reket etin’. Al basqa bir formattan paydalanıwdı qalesen’iz yaki ma’jbu’r bolsan’ız, onda sol formattı qollap-quwatlaytug’ın (yag’nıy ko’rsete alatug’ın) brouzer tu’rin ha’m onın’ ushın kerekli bolg’an qosımsha moduller tu’rin anıqlan’ ha’m a’lbette web betin’izde sol grafikalıq ko’rinistin’ qasında onı aytıp ketin’ ha’m paydalanıwshı bul qurallardı ju’klep alıwı mu’mkin bolg’an saytlarg’a sol jerdin’ o’zinde gipersiltemeler qoyın’. (Alternativa tu’rde sol jerde suwretin’izdin’ GIF yaki JPEG formatlarındag’ı ko’rinisin qoysan’ız ju’de jaqsı boladı).

Dreamweaver programmasında web betke suwret qo’yıw

Kursor suÿret qoyılatug’ın jerge alıp barıladı. Insert panelinde yaki Insert menyusındag’ı Image punkti tan’lanadı yaki <Ctrl>+<Shift>+<!> tu’ymesheler kombinatsiyası basıladı.

Image obektler paneli

Na’tiyjede ekranda Select Image Source dialog aynası payda boladı.

Suwret 13. Select Image Source dialog aynası

Aynadag’ı papkalar ha’m fayllar diziminen kereklisin tan’laymız. Imya fayla qatarında tan’lang’an fayl atı payda boladı (onı bul jerge qoldan tergenin’izde de boladı). Tip faylov qatarında bolsa tan’lamaqshı bolg’an fayllarımızdın’ tu’rin (ken’eytpesin) ko’rsetiwimiz mu’mkin.

Bul a’meldin’ Windows da isleytug’ın basqa standart programmalardag’ı a’mellerden ayırmashılıg’ı on’ jag’ında aldın ala ko’riÿ paneli jaylasqan. Onı joq qılıÿ ushın Preview Images da flajok (belgi) alıp taslanadı. Endi OK tu’ymeshesin basın’.

Page 28: L E K TS I YA T E K S T L E R I

28

Ko’rip turıpsız, bul suwret aynanı tolıg’ı menen iyelep alg’an. Onı kishireytiÿ ushın suwret ramkag’a alınıp, markerler ja’rdeminde qalegenimizshe ishke yaki sırtqa qaray sozıladı.

Endi Properties (qasiyetler) paneline qaraymız. W (suÿret eni) ha’m N (suÿret biyikligi) maydanshaları toltırılg’an, olardı qoldan o’zgertiw ha’m mu’mkin. Bul maydanshalar bos qalmag’anı maqul, a’sirese tan’lap alıng’an (ajıratılg’an) suuret sayttın’ bezeÿ bo’legi bolıp, ol bezeÿdin’ basqa da elementlerine tıg’ız jaylasıÿı kerek bolsa. Sebebi Web bet juklengennen keyin brouzer ele juklenip u’lgermegen suwretlerdi bos ramka turde ko’rsetedi. Bunda suwret o’lshemleri anıq berilgen bolsa, olar sol ÿaqıttın’ o’zinde ramkalarg’a paydalanıladı ha’m bettin’ bezeliÿi buzılmaydı.

V Space ha’m N Space maydanshaları suÿret shegarasınan onın’ do’geregindegi tekstke deyin bolg’an vertikal ha’m gorizontal aralıqtı belgileydi. Koldan o’zgertilmegenshe ol avtomatik turde (po umolchaniyu) 0 ge ten’ dep alınadı.

Src maydanshasına sol grafikalıq ko’rinis faylının’ atı jazıladı. Onın’ on’ jag’ında sizge tanıs bolg’an eki tu’ymeshe jaylasqan. Papka tu’rdegi tu’ymeshe basılg’anda Select Image Source dialog aynası ashıladı.

Qoyılg’an suwrettin’ ornına basqa suwret qoyıw kerek bolsa, suwret u’stinde kontekstlı menyu shaqırıladı yaki Src tu’ymeshesi basıladı. Select Image Source (suwret faylı atın tan’lan’) dialog aynasında siz qoyılatug’ın suwret faylının’ atın jazıwın’ız yaki sol faylg’a jol ko’rsetiwn’iz mu’mkin.

Border maydanshası suÿret do’geregindegi ramka qalınlıg’ın belgileydi. Aldınnan programma onı 0-ge ten’ dep qoyadı yag’nıy ramka joq.

Brouzer suwretti ju’klewi ushın biraz talap etedi ha’m ju’kleniw protsessinde suwrettin’ ornında bos ramka payda boladı. Paneldin’ Alt maydanshasında suwret ju’klenip atırg’anda payda bolatug’ın sol suwret mazmunı xaqqındag’ı qısqa tekst (podskazka) jazıladı.

Align bo’limindegi ashılatug’ın dizimge bir qarayıq. Bul jerde suÿrettin’ ha’m onın’ do’geregindegi tekstin’ jaylasıÿı belgilenedi.

Page 29: L E K TS I YA T E K S T L E R I

29

Suÿret Web bette qalay jaylasadı? Ol web betti toltırıp turg’an tekst arasında a’piÿayı simvolday bolıp turadı ha’m dizayner onı qalegen jerine qoya almaydı. Bunın’ ushın ol Align punktlerinen paydalanadı. Olar to’mendegishe:

• Browser Default — brouzerdin’ o’zi avtomatik turde qoyadı, a’dette Baseline punktine sa’ykes; • Baseline — suwrettin’ to’mengi shegarası teksttin’ astındag’ı ko’rinbes sızıqta jaylasadı. • Tor — suÿret joqarısı tekst joqarısı menen ten’; • Middle — suÿret ortası teksttin’ astı qatarı menen ten’; • Bottom — suÿret astı tekst astı menen ten’ (a’dette Baseline nan ayrıqsha boladı); • TextTop —suÿret joqarısı teksttin’ en’ biyik simvolı menen ten’ (a’dette Tor tan ayrıqsha); • Absolute Middle — suÿrettin’ ortası teksttin’ ortasınan o’tetug’ın sızıqshag’a ten’ (qatar ortası); • Absolute Bottom — suÿrettin’ to’mengi bo’legi en’ to’mende jaylasqan simvol astı menen ten’; • Left — suÿret bettin’ shep shegarasına "jabıstırıladı"; • Right — suÿret bettin’ on’ shegarasına "jabıstırıladı"; • Default - Baseline punktindegidey suÿret jaylasıÿı aldınnan berilgen (po umolchaniyu).

Suÿret jaylasıÿın kontekstlı menyunın’ Align bo’liminde de belgileÿge boladı.

Xujjetke fon beriw

HTML ja’rdeminde xujjetke grafikalıq obektler qoyıw menen birge fon-suwretler qoyıw ha’m mu’mkin. Bul degenimiz xujjettegi teksttın’ astındag’ı suwret. Bul a’meldi orınlaw ushın Page Properties dialog aynası shaqırıladı. Onın’ ushın menyunin’ Modify punktinde yaki kontekstlı menyude Page Properties tan’lanadı yaki <Ctrl>+<J> basıladı. Background Image maydanshasında fon bolıp xızmet etetug’ın suwret faylının’ atı kirgiziledi yaki Browse basıladı ha’m kerekli fayl payda bolg’an dizimnen tan’lanadı. OK tu’ymeshesi basıladı. Fon tan’lang’anda xujjet teksti oqılıwın ha’m ulıwma ko’rinisin esapqa alıw kerek

Aktiv suwretler qoyıw

Aktiv suwret degenimiz suwret u’stine mısh kursorı alıp barılg’anda bul suwret basqa suwret penen almastırıladı. Bunday suwret jaratıw ushın Insert paneli qatarındag’ı Common obektleri arasınan Rollover Image tu’ymeshesin basamız. Ekranda Insert Rollover Image dialog aynası payda boladı.

Image Name maydanshasında aktiv suwret faylının’ atı jazıladı, ol tek g’ana latın ha’ripler, sanlar, astın sızıw belgilerinen ibarat bolıp, xa’rip penen baslanıwı kerek. Original Image maydanshasında tiykarg’ı suwret faylının’ atı jazıladı. Onı qoldan tergin’iz kelmese, on’ jag’ındag’ı Browse tu’ymeshesin basıp, Select Image Source (suwret deregin tan’lan’) dialog aynasınan kerekli fayl atın tan’lan’. Rollover Image maydanshasında tiykarg’ı suwret ornın almastıratug’ın ekinshi suwret faylının’ atı jazıladı yaki Browse tu’ymeshesi ja’rdeminde ko’rsetiledi.

Page 30: L E K TS I YA T E K S T L E R I

30

When Clicked, Go To URL qatarında paydalanıwshı sol suwret u’stin shertkende o’tiw a’melge asırılatug’ın internet-adres jazıladı. Bul adres Browse ja’rdeminde ko’rsetiliwi de mu’mkin.

Endi jaratılg’an aktiv suwretti a’melde tekserip ko’remiz. Web-brouzerin shaqıramız (F12) ha’m mısh kursorın aktiv suwret u’stine aparamız. Suwret o’zgeredi. Mısh shertilgende bolsa, pochta klienti ashıladı.

Dreamweaver programmasında Web xujjetke animatsiya qoyıÿ. Web-saytlardı ko’rgizbeli, qızıg’arlı etiw ushın olarg’a animatsiya obektlerin qoyıw mu’mkin.

Macromedia firmasının’ a’dette Dreamweaver programması menen birgelikte tarqatılatug’ın Flash programması ja’rdeminde ha’r qıylı ha’reketleniÿshi obektler, videoklipler, daÿıslı animatsiyalar, interaktiv obektlerden ibarat bolg’an multfilmler jaratıÿımız mu’mkin. Keyingi ÿaqıtlarda Flash MX programması en’ tanıqlı interaktiv programmalardın’ birine aylandı. Ol tek g’ana animatsiya jaratıÿ menen sheklenip qalmay, quramalı dinamikalıq interaktiv programmalardın’ mag’lıÿmatlar bazasın ha’m duziÿ mu’mkinshiligin beredi. Flash multimedialı programmalar arasında en’ effektiv programma bolıp, onı multimedialı ha’m ha’r qıylı oyınlı programmalar qatarında ushıratıÿ mu’mkin.

Flash programmasında grafikalıq obektler menen bir qatarda tekstli obektler menen ha’m islesiÿge boladı. Xujjetke basqa programma obektlerin jaylastırıÿ mu’mkinshiligi bolsa tayar kesteler yaki basqa sızılmalardı qoyıwdı an’satlastırdı.

Dreamweaver programmasının’ o’zinde Flash obektlerin qoyıw mu’mkin. Olar tu’ymeshe, o’zgeriwshen tu’ymeshe, animatsiya teksti h.t.b. bolıwı mu’mkin. Onı mısalda ko’rsetemiz.

Jan’adan Web bet jaratamız, og’an tek g’ana latın haripler yaki tsifrlardan ibarat bolg’an at beremiz ha’m .htm ken’eytpesi menen saqlaymız. Endi Flash jazıwın (yag’nıy tekst qatarı ko’rinisindegi suwret-giperssılka bolıp xızmet etiwshi Flash formatındag’ı suwret) qoyıwdı u’yrenemiz. Flash jazıwı Flash Text tu’ymeshesi ja’rdeminde qoyıladı. YAki bolmasa Insert menyuinin’ Interactive Images bo’limindegi Flash Text punktin tan’laymız. Bul jazıwdın’ parametrleri Insert Flash Text dialog aynasında beriledi.

Suwret 13. Insert Flash Text dialog aynası

Endi bolsa Flash tu’ymeshelerin (knopkalar) jaratıwdı u’yrenemiz. Jan’adan Web-bet jaratıp, onı saqlaymız (yaki burıng’ı bettegi jazıwdı o’shiremiz). Flash tu’ymeshesi obektler panelinde jaylasqan Media ishindegi Flash Button tu’ymeshesi ja’rdeminde jaratıladı. YAki bolmasa Insert menyuinin’ Interactive Images bo’limindegi Flash Button punkti ja’rdeminde. Onın’ parametrleri to’mendegi Insert Flash Button dialog aynasında beriledi.

Page 31: L E K TS I YA T E K S T L E R I

31

Suwret 14. Insert Flash Button dialog aynası

Eskertiw. Flash suwretleri Web betke <OBJECT> jup tegi ja’rdeminde qoyıladı. Bul teg ja’rdeminde tek g’ana Flash suwretleri emes, ba’lki qalegen ko’rip shıg’ıw moduli ornatılg’an obektler (vnedrennıy) qoyıwmu’mkin. Ma’selen, MS Word xujjeti yaki videofilm.

. Web-betti ko’riw

<F12> klavishası basılıwı menen Internet Explorer brouzeri shaqırıladı. Basqa’sha jolı dokument panelinde Preview/Debug in Browser tan’lanadı, yaki bolmasa File menyuinde Preview in Browser basıladı ha’m iexplore punkti tan’lanadı. Bul jollardın’ o’zin’izge qolaylısın tan’lap alıwın’ızg’a boladı.

Multimedia

Bugungi ku’nde kompyuter dunyasın multimediasız ko’z aldımızg’a keltiriwge bolmaydı. Multimedia so’zi anglichan tilinde ko’pqorshawlılıq, ko’portalılıq degendi an’latıp, bul so’z benen a’piwayı tekst ha’m grafikadan’ ayrıqsha bolg’an informatsiya ataladı. Jan’rag’an muzıka, ha’r qıylı spetseffektler, «janlı» obektler, kompyuter oyınları ha’m multfilmer – bul multimedia. Multimedialıq obektler — bul web betlerdi janlantıratug’ın dawıs, video, animatsiya. Multimedia qurılmaları – bul naushnik, kolonka, mikrofon, ku’shli videokartalar, CD- ha’m DVD-diskler.

Multimedia obektleri a’dettte web sayttın’ en’ birinshi beti ju’klengende yaki paydalanıwshı komandası menen iske tu’siriledi. Bunday obektler sanı ko’p bolmag’anı ha’m olardın’ ko’lemi onsha u’lken bolmag’anı maqul, sebebi paydalanıwshı olardın’ ju’klenip bolıwın kutpey saytın’ızdan shıg’ıp ketiwi mu’mkin.

Freymler

Web xujjettin’ tiykarg’ı mazmunı tekst, suwretler, tablitsalardan ibarat bolıwı mu’mkin. Endi web brouzeri aynası bir neshe ramka, kadrg’a bo’lingen dep ko’z aldımızg’a keltireyik. Ha’r bir kadrda onın’

Page 32: L E K TS I YA T E K S T L E R I

32

o’zinin’ Web beti ju’klenedi. Bir kadrda giperssılkalar toplamı, ekinshisinde — bet ataması (zagolovok), u’shinshi kadrda — avtor xuquqları tuwralı mag’lıwmatlar, en’ u’lken kadrda bolsa – usı sayttın’ tiykarg’ı teksti. Bul kadr yaki ramkalardın’ ha’r biri o’zin biyg’arez Web brouzeri aynasınday tutadı, ha’tteki olardın’ ha’r birinin’ o’z o’tkizgish sızıqshaları-da bar (polosı prokrutki).

Giperssılka basılg’anda kerekli bet tezde o’zinin’ ramkasına ju’klenedi. Ol tek g’ana kerekli tekstten ibarat boladı, al giperssılkalar dizimi, avtor tuwralı informatsiya, sayt atı bolsa basqa ramkada shıg’arıladı.

Bul jude qolay, saytqa kirgen adam giperssılka basqanda, tek g’ana tiykarg’ı tekst (mazmun) jan’alanadı. Bunday jantasıw Web-dizaynerge eki qo’laylıq jaratadı. Birinshiden, betlerdin’ ju’kleniw tezligi asadı, sebebi onda tek g’ana kerekli (tiykarg’ı) tekst shıg’arıladı. Ekinshiden, qosımsha mag’lıwmatlardı (giperssılkalar, avtor informatsiyası h.t.b.) sayttın’ ha’r bir betinde qaytadan shıg’arıw za’rurligi jog’aladı. Onın’ ornına arnawlı betler jaratılıp, olarda usı qosımsha mag’lıwmatlar bo’lek-bo’lek jaylasadı ha’m bul «bolekler»din’ ha’r biri o’zinin’ ramkasına ju’klenedi. Mag’lıwmatlarg’a o’zgerisler kiritiw kerek bolsa, onı tek g’ana tiyisli ramkada orınlaymız ha’m sol o’zgerisler avtomatik tu’rde sayttın’ barlıq betlerinde orınlanadı.

Bunday Web-brouzerdin’ aynasın bir neshe bo’leklerge bo’letug’ın ramkalar, kadrlar freymler dep ataladı (angl. frame — kadr). Bunday bo’lekler toplamın bolsa freymler toplamı, jıynag’ı dep ataymız (angl. frameset). Freymlerden paydalanıp Web-saytlar jaratıw freym dizaynı dep ataladı (freymovıy dizayn).

Freymler jıynag’ın jaratıw ushın arnawlı (qosımsha) web bet kerek boladı. Onda freym jıynag’ı parametrleri, freym o’lshemleri, olarg’a ju’klenetug’ın web betlerdin’ Internet-adresleri beriledi. Bul bet en’ bas bet bolıp, Web-brouzerdin’ adresler qatarında sayt adresi berilgende ju’klenedi. Bul bette hesh qanday mag’lıwmat, tekst bolmawı kerek: onda tek g’ana freymler jıynag’ının’ anıqlaması jaylastırıladı.

Freymlerde ne jaylasadı? Bir freymde giperssılkalar toplamı (a’dette bettin’ shep jag’ında yamasa joqarısında), ekinshisinde avtor tuwralı mag’lıwmatlar (avtordın’ Copy right xuquqların qorg’aw ushın), u’shinshisinde bolsa tiykarg’ı mazmundag’ı tekst bolıwı mu’mkin. Avtor xuquqları xaqqındag’ı mag’lıwmat freymi a’dette birinshi bette, onın’ joqarg’ı bo’liminde jaylastırıladı, ha’m onın’ ishinde giperssılkalar dizimi bolıwı-da mu’mkin. Ayrım freymlerde bannerler tu’rde reklama jaylastırılıwı mu’mkin. Sondıy etip reklama basqa kerekli informatsiyadan ajıratıladı. Reklamalı freymler Web-brouzerdin’ joqarg’ı yaki (ha’m) to’mengi gorizontal qatarlarında jaylastırıladı, olar onsha u’lken bolmaydı (bir-eki banner). Ko’binese freymlerde reklama biypul Web-serverler ta’repinen jaylastırıladı. Siz saytın’ızdan olardın’ reklamasın reklama qılasız, bul olar sizin’ Web-saytın’ız ushın orın ajıratıp bergeni ushın «to’lemi».

Freymler jıynag’ı web bette ha’r qıylı bolıp jaylasıwı mu’mkin. Mısalı,

Page 33: L E K TS I YA T E K S T L E R I

33

Bunday freymlerdi jaratıw ushın Insert panelinin’ HTML bo’limindegi Frames tu’ymeshesi basıladı. Sayt ataması jaylasatugın joqarı qatardag’ı freym Top Frame tu’ymeshesi ja’rdeminde jaratıladı. Ekran gorizontal sızıqsha menen ekige bo’linedi. Ekinshi bo’limge kursordı qoyıp, Bottom Frame tu’ymeshesin basqanımızda, ol bo’limnin’ astında ja’ne bir bo’lim payda boladı.

Suwret 14. U’sh gorizontal freym

Ortadag’ı bo’limde biz tiykarg’ı mag’lıwmatlardı jaylastırıwımız mu’mkin. Bo’limlerdin’ shegarası mısh penen o’zgertiliwi mu’mkin. Endi giperssılkalar dizimi berilgen shep freym jaratamız. Modify menyuine kirip Frameset bo’limine kiremiz. Onda to’mendegi punktler boladı:

• Split Frame Left - bul freymnın’ shep jag’ında jan’a freym jaratıw; • Split Frame Right - bul freymnın’ shep jag’ında jan’a freym jaratıw; • Split Frame Up - bul freymnın’ u’stinde jan’a freym jaratıw; • Split Frame Down - bul freymnın’ astında jan’a freym jaratıw.

Ortadag’ı freymge kursordı aparıp, Modify - Frameset - Split Frame Left komandalar izbe-izligin beremiz, na’tiyjede to’mendegi

Page 34: L E K TS I YA T E K S T L E R I

34

Suwret 15. Freymlerdin’ toplamı

Endi web betti saqlaymız. Onın’ ushın menyunin’ File bo’limindegi Save All komandasın tan’laymız, sonda barlıq freymler ha’m saqlanadı. Payda bolg’an dialog aynada bul freymler toplamın UntitledFrameset-l.htm atı menen saqlaw usınıladı. Siz onı jan’a sayttın’ tu’b papkasında default.htm atı menen saqlan’. Dreamweaver sizge gezekpe gezek ha’r bir freymnin’ mazmunın saqlawdı usınadı. YAdın’ızda bolsa, ha’r bir freymnin’ mazmunı o’zinin’ web betlerinde beriledi. Saqlanıp atırg’an freym atı qalın sızıqsha menen ajıralıp turadı.

Freymler jaratıwdın’ tag’ı bir jolı bar. Joqarıdag’ı suwretke bir qaran’. Freymler toplamın qorshap turg’an qalın ku’lren’ ramkag’a itibar berin’. Siz freymler toplamın panel yaki menyuden paydalanbay-aq, usı ramkanı mısh penen uslap alıp, kerekli jerge ko’shiriw jolı menen jaratıwın’ız ha’m mu’mkin. Sol jol menen bir freymdi ekige bo’liw ha’m mu’mkin.

Kesteli dizayn

Ku’ndelik jumısta biz ko’p mug’dardag’ı mag’lıwmatlardı sheklengen shegaralar ishine jaylastırıwda tablitsalardan (kestelerden) paydalanamız. Kestelerden paydalanıp web betler jaratıw jolları tablitsalı dizayn dep ataladı. Onın’ printsipi - barlıq tekst, grafikalıq obektler tablitsanın’ yacheykalarına (keteklerge) qoyıladı. Keyinshelik bul obektler menen qalegen a’mellerimizdi an’sat orınlawımız mu’mkin. A’dette bunday tablitsalardın’ shegaraları ko’rinbes boladı.

Page 35: L E K TS I YA T E K S T L E R I

35

Suwret 16. Klassikalıq kesteli dizayng’a mısal

Joqarıdag’ı suwretde web bet kesteler ja’rdeminde bezelgen. Keste keteklerinde sayt ataması, bir betten basqa betlerge gipersiltemeler, bettin’ tiykarg’ı teksti, sayt jan’alıqları, avtor xuquqları tuwralı mag’lıwmat jaylasqan.

Ayrım jag’daylarda ketekler arasında «bos» ketekler qaldırıladı, olarg’a fon beriliwi ha’m mu’mkin. Bunın’ maqseti tıg’ız jaylasqan tekst bloklarının’ arasın ashıw.

Navigatsiya qatarı

Navigatsiya sızıqshası— bul vertikal yaki gorizontal qatar tu’rde Web-brouzer aynasının’ qaptalında jaylasqan a’piwayı gipersiltemeler toplamı. A’dette ol o’z aldına arnawlı bir freymde bolıp, ko’binese kesteler ja’rdeminde jaratıladı. Olar tekstli siltemeler yaki quramalı suwretler (aktiv suwretler) ko’riniste boladı.

Tekstli gipersiltemelerden ibarat bolg’an navigatsiya sızıqshasın islew a’piwayı ha’m an’sat orınlanadı. SHep freymge bes qatar ha’m 1 bag’anadan ibarat bolg’an keste qoyın’, ol freymnin’ eni ha’m biyikligin tolıg’ı menen iyelep turıw kerek. Keteklerge kerekli so’zler jazılıp, giperssılkalarg’a aylantırıladı.

Sorawlar

1. Qanday grafikalıq formatlardı bilesiz? 2. Web betke grafikalıq obektlerdi qalay jaylastıramız? 3. Web betke animatsiyalıq obektlerdi qalay jaylastıramız? 4. Freymler degenimiz ne ha’m onv qanday maqsette qollanamız? 5. Kesteli dizayn degenimiz ne?

Page 36: L E K TS I YA T E K S T L E R I

36

Lektsiya-7

DREAMWEAVER PROGRAMMASINDA DINAMIKALIQ OBEKTLER JARATIW.

Reje

1. Dinamikaıq ha’m interaktiv obektler 2. Sayt interaktivligin ta’miyinlew. 3. Web-stsenariyler

Tayanısh tu’sinikler: Dinamikalıq obekt, Skript, JavaScript, VBScript, Microsoft ASP

Statikalıq (qatıp qalg’an, o’zgermes) ssılkalar ha’zir «moda»dan shıqqan, xalıqara tarmaqtın’ birden bir belgisi – bul dinamika ha’m interaktivlıq. Giperssılkaların’ızg’a «jan beriw» ushın Flash jazıwların yaki tu’ymeshelerin, aktiv suwretler qoyıwın’ız mu’mkin. Giperssılkalar ushın jetkilikli sanda grafikalıq ko’rinisler tayarlap qoysan’ız boldı, qalg’anın Dreamweaver o’z moynına aladı.

Onı mısalda ko’rsetemiz. Aldın grafikalıq ko’rinisler toplamın tayarlap qoyamız. Ha’r bir giperssılkag’a 4 grafikalıq ko’rinis kerek boladı:

1. Tu’ymeshe normal xalda turg’anda; 2. Tu’ymeshe u’stine kursor aparılg’anda; 3. Tu’ymeshe «basılıp» turg’anda (giperssılka siltep turg’an bet juklengende); 4. Tu’ymeshe «basılg’an» xalda ha’m onın’ u’stinde kursor turg’anda

Endi bir neshe grafikalıq ko’rinis jaratamız. Olar to’mendegishe:

1. Qara fondag’ı aq ren’degi jazıw, ol tu’ymeshenin’ a’dettegi jag’dayında ko’rinedi; 2. Qara fondag’ı qızıl jazıw, ol u’stine kursor aparılg’anda ko’rinedi; 3. Aq fondag’ı qara jazıw, ol «basılg’an» jag’dayda ko’rinedi; 4. Aq fondag’ı qızıl jazıw, ol «basılıp» turg’anda ha’m onın’ u’stine kursor aparılg’anda

ko’rinetug’ın bolsın.

Suwretler papkasının’ ishinde Navqatar papkasın jaratayıq. Grafikalıq fayllardı sol papkada saqlayıq. Bul fayllarg’a at beriwde to’mendegi kelisimdi qabıllayıq:

1. <bet atı>_up.gif; 2. < bet atı >_over.gif; 3. < bet atı >_down.gif; 4. < bet atı >_overdown.

Ulıwma alg’anda sizde 20 grafikalıq ko’rinis bolıw kerek. Jumıstı an’satlastırıw ushın arnawlı Web-grafika paketlerinen paydalanıwg’a boladı, mısalı Macromedia Fireworks. Olar navigatsiya qatarı ushın kerekli bolg’an grafikalıq ko’rinislerdi, olardın’ HTML ha’m JavaScript-kodların avtomatik tu’rde jaratıp beredi.

Grafikalıq obektlerdi tayarlap bolg’annan keyin Web-bet parametrlerin beremiz, olar tiykarg’ı betten alınadı. Sonı yadta saqlaw kerek, sayttın’ barlıq betleri bir-birine sa’ykes bolıwı kerek.

Page 37: L E K TS I YA T E K S T L E R I

37

Endi navigatsiya qatarın jaratıw ushın kursordı shep freymge qoyıp Common panelindegi Navigation Bar tu’ymeshesin basın’. (Insert menyuinin’ Interactive Images bo’limindegi Navigation Bar punktin tan’lasan’ız-da boladı). Ekranda Insert Navigation Vag dialog aynası payda boladı.

Suwret 16. Insert Navigation Bar dialog aynası

Nav Bar Elements diziminde navigatsiya qatarının’ barlıq elementleri keltirilgen. (A’dep ol jerde tek g’ana bir Dreamweaver jaratıp qoyg’an element bar edi). Siz qalegen elementin’izdi tan’lap alıp, onı o’zgertiwin’iz mu’mkin.

Element Name maydanshasında element atın kiritemiz. Faylg’a at qoyg’anda atınan onı tanıp alatug’ın etip qoyıwımız kerek, mısalı Contacts, Library.

Up Image maydanshasında 1-shi jag’dayda payda bolatug’ın suwret fayl atı beriledi (onı Browse ja’rdeminde beriwin’iz ha’m mu’mkin). Over Image maydanshasında 2-shi suwret faylının’ atı, Down Image — 3-shi jag’daydag’ı suwret faylı, Over While Down Image maydanshasına bolsa 4-shi jag’dayda payda bolatug’ın suwret faylının’ atı. Ha’r bir maydanshanın’ on’ jag’ında Browse tu’ymeshesi jaylasqan ha’m onın’ ja’rdeminde kerekli faylg’a jol ko’rsetiw ha’m tan’law mu’mkin.

When Clicked, Go To URL maydanshasında giperssılka siltep turg’an Web-bet faylının’ atı kiritiledi. Maydanshanın’ on’ jag’ında jaylasqan in diziminde web bet sa’wleniwi kerek bolg’an freym tan’lanadı. Bul dizimnin’ Main Window punkti bul betti tolıq ekrang’a jayıp shıg’aradı.

Insert diziminde navigatsiya qatarının’ jaylasıw tu’ri tan’lanadı: gorizontal (punkt Horizontally) yaki vertikal (punkt Vertically). Al Use Tables tan’lang’anda Dreamweaver navigatsiya qatarın tablitsalar tiykarında jaratadı. Endi File menyuindegi Save All Frames komandasın tan’lap barlıq freymlerdi saqlan’.

Demek biz navigatsiya qatarın jaratıp, onı freymde jaylastırdıq. Bul qatardag’ı grafikalıq ko’rinisti o’zgertiw ushın yaki jan’adan element qosıw ushın bul qatardı (onın’ bir elementin) ajıratıp alıp, Modify

Page 38: L E K TS I YA T E K S T L E R I

38

menyuinde Navigation Bar punktin tan’laymız. Ekranda Modify Navigation Vag dialog aynası payda boladı ha’m onda siz qalegen o’zgerislerin’izdi kiritiwin’iz mu’mkin.

Sayt interaktivligin ta’miyinlew. Web-stsenariyler.

Dinamikalıq obektler jaratıwdın’ ekinshi jolı — bul HTML-kodqa arnawlı programmalardı kiritiw. Bul programmalar "klassikalıq" programmalastırıw tillerde jazılg’an bolıp, stsenariyler, yaki skriptler dep ataladı (angl. script — stsenariy), sebebi bul programmalar bir elementtin’ ha’reketlerin yaki belgili bir waqıyanın’ ju’z beriw stsenariysin ta’riypleydi.

(Windows –dın’ a’meliy programmaları aynasında mısh kursorının’ ha’reketleri stsenariyler ja’rdeminde berilgen: bos maydanda, tablitsanın’ shegaralarında, piktogrammalardın’ u’stine aparılg’anda, qatar basında h.t.b.)

Bul programmalar HTML-kodqa WWWC (World Wide Web Consortium) ta’repinen standart bolıp qabıllang’an arnawlı jup teg <SCRIPT>. . .</SCRIPT> kiritiw jolı menen a’melge asırıladı. Brouzer bunday HTML-kodtı rasshifrovka etip stsenariylerdi oqıydı ha’m olardı tezde orınlaydı yaki bolmasa belgili bir waqıya ju’z bermegenshe shetke qoyıp turadı.

Usınday interaktivlik stsenariyleri jaratılg’anlıgı sebepli dunya ju’zlik tor «janlandı», ko’pshilik Web-dizaynerler bolsa Web-programmistlerge aylandı.

Stsenariyler jazıw ushın bir neshe arnawlı programmalar jaratılg’an. Olar stsenariyler jazıw tilleri yaki skript tilleri dep ataladı. Olardan en’ ken’ tarqalg’an bolıp tek eki til esaplanadı: JavaScript ha’m VBScript.

JavaScript tili Java "klassikalıq" programmalastırıw tili tiykarında Netscape firması ta’repinen islep shıg’ılg’an. Sol sebepli JavaScript stsenariylerin en’ birinshi bolıp Netscape Navigator 2.0 brouzeri qollap quwatlap baslag’an. Microsoft Internet Explorer bolsa JavaScript –ti 3.0 versiyasınan baslap quwatlap baslag’an. Sonın’day aq, Microsoft firmasında o’zinin’ JavaScript dialekti islep shıg’ılg’an. Ol JScript dep atalıp, JavaScript ten ayırmashılıg’ı birneshe qosımsha komandaları bolg’an.

VBScript tili Microsoft ta’repinen JavaScript –ke «bizin’ juwap» degendey islep shıg’ılg’an. Bul tildi tek g’ana Internet Explorer brouzerinin’ keyingi versiyaları «tu’sinedi». Sol sebepli yag’nıy sa’ykes kelmegenligi ushın VBScript Web-ta stsenariyler jazıw ushın onsha qollanılmaydı. Bıraq bul til serverli programmalastırıwda, atap aytqanda Microsoft ASP aktiv server betlerin jaratıwda en’ bas qural bolıp esaplanadı.

JavaScript, VBScript tillerden basqa Web-stsenariyler jazıwda Perl, Python h.t.b. tilleri qollanılıp baslag’an, bıraq keyinshelik bul tiller ken’ tarqalmag’an. Bugingi ku’nde barlıq jerde web stsenariyler JavaScript tilinde jazıladı. Bul til u’yreniw ushın jude an’sat bolıp, programmistlerge jude ken’ mu’mkinshilikler beredi. Odan tısqarı, bul tilde jazılg’an programmalardın’ ko’lemi az bolıp, xa’zirgi ku’nde en’ u’lken mashqala bolg’an baylanıs kanallarının’ a’ste islew jag’daylarında jude aktual bolıp tabıladı.

Stsenariyler tilin qollap-quwatlaw ushın til interpretatorı kerek boladı. Brouzer bettin’ HTML-kodınan stsenariydi ajıratıp alıp onı orınlaw ushın interpretatorg’a uzatadı. Interpretator stsenariy kodın analiz ha’m rasshifrovka qılıp bolıp, onı orınlaydı, keyin bolsa na’tiyjeni qaytadan brouzerge uzatadı.

Ha’r bir stsenariyler tiline o’zinin’ interpretatorı kerek boladı. Bunday jantasıw arqalı brouzerge qalegen programmalastırıw tilde jazılg’an programmanı qollap- kuwatlawdı (ol tildin’ interpretatorı bar bolsa) u’yretiw mu’mkin. Stsenariyler tilleri interpretatsiyalanatug’ın dep ataladı, sebebi olarda jazılg’an programmalar ha’r bir orınlanıwda rasshifrovka qılınadı. Sonın’ menen olar tiykarınan kompilyatsiya

Page 39: L E K TS I YA T E K S T L E R I

39

bolatug’ın tillerden (C++, Pascal, Java h.t.b.) parıq qıladı. Kompilyatsiyalanatug’ın tillerde jazılg’an programmalar bir ma’rte rasshifrovka qılınıp, mashina kodına aylantırıladı. Bul kod interpretatorsız tikkeley kompyuter protsessorı ta’repinen orınlanadı.

Site paneli

Sayt penen orınlanatug’ın barlıq a’meller Site panelinde orınlanadı. Bul panel ekranda ko’rinbey turg’an bolsa, onı Window menyuinin’ Site bo’limi yaki <F8> klavishasın basıw arqalı shıg’arıw mu’mkin. Sonday –aq Site menyuinin’ Site Map bo’limin tan’lawın’ız mu’mkin.

Site paneli to’mendegi suwrette ko’rsetilgen. Bul panel Dreamweaver din’ basqa panellerinen ayrıqsha bolıp, o’zinin’ instrumentlerine iye. Bul instrumentlerdin’ basqarıw elementleri ja’rdeminde tez-tezden qollanılatug’ın komandalarg’a, menyu qatarına ha’m status qatarına jetisiw mu’mkin.

Site paneli tiykarınan fayllar diziminen ibarat. A’dep onda tek g’ana sayttın’ lokal kopiyasının’ faylları dizimi Windows Baslawshısı (Provodnik) aynasındag’ıday «terek» tu’rde keltiriledi.

Site paneli

Page 40: L E K TS I YA T E K S T L E R I

40

Site panelinde suwretlenetug’ın fayllar "teregi"

Kerekli fayldı dizimnen tan’law ushın onı mısh penen shertemiz. Bir neshe fayldı ajıratıp alıw ushın bolsa <Ctrl> klavishası basılıp turg’an xalda bul fayllardın’ atları u’stinde mısh shertiledi. Barlıq fayllar Site panelinin’ Edit menyuindegi Select All komandası yaki <Ctrl>+<A> basılıwı arqalı ajıratıladı. Bul menyunın’ Invert Selection (Ajıratılg’anlardın’ kerisi) komandası bolsa ajıratılıp turg’an fayllardı ajıratılmag’an, al ajıratılmag’an fayllardı ajıratılg’an etedi. Site panelinin’ fayllar dizimi eki rejimde islewi mu’mkin. Birinshi — bul a’piwayı dizim (spisok rejimi), ekinshisi —barlıq betler ha’m fayllardın’ arasındag’ı o’z-ara baylanıslardı ko’rsetiwshi ierarxiyalıq "terek" («terek» rejimi).

Bul rejimlerdin’ kereklisin tan’law Window menyuinin’ Site Files ha’m Site Map bo’liminde orınlanadı yaki Site panelinin’ View bo’liminde. Biraq en’ an’satı – bul <F8> yaki <Alt>+<F8> basıw.

Eskertiw. Dreamweaver di sonday qılıp sazlaw mu’mkin, onda joq qılıng’an kopiya faylları aynanın’ on’ jag’ında, al lokal kopiya faylları —shep jag’ında shıg’arıladı. Onın’ ushın Preferences dialog aynasının’ Site bo’liminde payda bolg’an Always Show diziminde Remote Files, keyin bolsa on the bo’limdegi dizimnen Left punkti tan’lanadı.

Site menyuinin’ New Site punkti jan’a sayt tuwralı mag’lıwmatlardı kiritiw mu’mkinshiligin beredi. Bul menyunin’ Edit Sites bo’liminde dialog aynası payda boladı (to’mendegi suwret). Bul jerde siz jan’a saytlardı registratsiya qılıwın’ız (New), saytlar tuwralı mag’lıwmatlardı o’zgertiwin’iz (Edit), kerek bolmag’an saytlardı joq qılıwın’ız (Remove) mu’mkin.

Page 41: L E K TS I YA T E K S T L E R I

41

Edit Sites dialog aynası

Site panelinin’ xujjet aynası menen baylanısı

Web saytımızdın’ betleri tayar bolg’anı menen olar ele bir-biri menen baylanıstırılg’anı joq, bul ele sayt emes, onı tarmaqta ja’riyalap bolmaydı. Sayttın’ betlerin bir-biri menen baylanıstırıw ushın bul betlerde giperssılka – gipersiltemeler sho’lkemlestiriw kerek.

Gipersiltemeler bir neshe jol menen jaratıladı. Ha’zir biz gipersiltemeni Site paneli ja’rdeminde jaratıwdı u’yrenemiz.

Dokument aynasında saytımızdın’ default.htm bas betin ashın’. Onın’ ushın sayttın’ lokal kopiyası saqlanatug’ın papkadag’ı fayl atında mıshtı eki ret shertiw jetkilikli. Kelin’, birinshi (bas) bette bizin’ qızıg’ıwshılıqlarımız xaqqındag’ı Hobby.htm betke silteme bereyik.

Xujjet aynasında «menin’ qızıg’ıwshılıqlarım» tekstin ajıratıp alın’, keyin bolsa qasiyetler redaktorındag’ı Link qatarına qaran’, ol jerde gipersiltemenin’ internet-adresi berilgen boladı. Onın’ on’ jag’ında eki znachok boladı. Birinshisi papka ko’riniste bolıp, onı ashqanda Select File dialog aynası payda boladı.

Ekinshi znachoktı bolsa mısh penen uslap Site panelinde jaylasqan kerekli fayl u’stine aparıp qoyıw kerek. Biz onı Hobby.htm faylının’ u’stine qoyamız. Sonda qasiyetler redaktorının’ Link qatarında bul bettin’ adresi payda boladı. Bul a’meldi biz basqasha orınlawımız ha’m mu’mkin edi, onda sayt aynasında Hobby.htm faylın uslap Link qatarına aparıp qoyamız.

Bul a’meldi Projects.htm faylı menen orınlan’, biraq aldın «orınlag’an proektlerim» tekstin ajıratıp alın’. Endi bolsa siltemeler turg’an betke (Links.htm) gipersilteme jaratamız ha’m avtor tuwralı mag’lıwmat saqlanıp turg’an betke (About.htm) siltemeni du’ziwleymiz. "bul jerde" so’zin ajıratıp alın’ ha’m qalegen jolın’ız benen gipersilteme jaratın’. Keyin kursordı «men tuwralı» teksti u’stine qoyıp, gipersilteme jaratın’.

Sayt tayar boldı. Dokument aynasın jabın’. Endi sayttı tarmaqta ja’riyalaw mu’mkin.

Sorawlar

1. Dinamikaıq ha’m interaktiv obektler degenimiz ne?

Page 42: L E K TS I YA T E K S T L E R I

42

2. Dinamikalıq obektlerdi qalay jaratamız? 3. Skript degen ne ha’m onın’ qanday tu’rleri bar? 4. Interaktivlik stsenariyleridi jaratıw tilleri?

Lektsiya-8

WEB-BETTI INTERNETTE JA’RIYALAW (PUBLIKATSIYA QILIW)

Reje:

4. Web betti tarmaqta ja’riyalaw usılları 5. Web betlerdi ja’riyalaw boyınsha ma’sla’ha’tler 6. Web betti serverde jaylastırıw 7. Domenlik atlar

Tiykarg’ı tu’sinikler: Web-server, Administrator, FTR-server, FTP-klient, IP-adres, Domen, Login

Sayt jaratılg’annan keyin avtor o’zinin’ Web-betlerin ken’ auditoriyag’a tanıtıw ushın bul betlerdi Web-server programması islep turg’an kompyuterdin’ qattı diskine qoyıwı kerek. Bul protsess «publikatsiya» - ja’riyalaw dep ataladı.

Onın’ u’sh jolı bar.

Birinshi, en’ an’sat jol – bul sayttın’ barlıq faylların disketa yaki basqa ko’pko’lemli diskke (Iomega Zip,CD, strimer lentası, vinchester h.t.b.) jazıp alıp Web-server administratorına beriw. Administrator onı tiyisli papkag’a ko’shirip aladı da programmalıq ta’miyinlewge kerekli nastroykalar beredi. Bul ju’de a’piwayı usıl, a’sirese Web-server o’zin’izdin’ ka’rxanan’ızdın’ menshigi bolsa, onda siz saytın’ızdın’ faylların lokal tarmaq arqalı yaki elektron pochta menen jiberiwin’iz mu’mkin. Ekinshi usıl onday ko’p tarqalmag’an. Gey bir biypul Web-serverler paydalanıwshıg’a saytının’ faylların Web brouzer arqalı ju’klew mu’mkinshiligin beredi. Bul usıldın’ abzallıg’ı onda ju’klew ushın tiyisli maydanshalarg’a kerekli fayllardın’ atları jazılıp, Submit (jo’neltiw) tu’ymeshesi basıladı. Usıldın’ kemshiligi bolsa bir waqıttın’ o’zinde jiberiw mu’mkin bolg’an fayllar sanı sheklengenligi (a’dette 5), olardın’ jiberiliwin qadag’alaw mu’mkinshiliginin’ joqlıg’ı ha’m baylanıs jasaw qıyınlıg’ı.

U’shinshi usıl en’ ken’ tarqalg’an. Onın’ ushın FTP internet-protokolınan paydalanıladı. Bul protokol ja’rdeminde tarmaq ishinde FTP-klientten FTR-serverge ha’m serverden klientke fayllardı jiberiw a’melge asırıladı.

FTP protokolının’ o’zgesheligi klient FTP-server menen o’zinin’ kompyuterinin’ lokal diski menen isleskendey islese beredi. Ol fayllardı jaratıwı, kopiyalawı, ko’shiriwi mu’mkin. Web-servera administratorı programmanı iske tu’sirip saytın’ız ushın tu’b papka ashıp beredi ha’m sol papkag’a avtorg’a dostup berip qoyadı. Sayt avtorı RTP-klient programması ja’rdeminde FTP-server menen baylanıs jasap, bul papkag’a saytının’ faylların kopiyalaydı. Administrator bolsa Web-serverdi jan’a sayttı tanıytug’ın etip konfiguratsiya etedi. Keyinshelik avtor saytın jan’alaw kerek bolsa, ol qaytadan FTP-serverge shıg’ıp, onın’ diskine jan’alang’an fayllardı ko’shiredi, bunda fayllardın’ go’ne versiyaları o’shiriledi.

FTP-serverge qosılıw ushın paydalanıwshı server administratorı ta’repinen berilgen atı ha’m parolin kiritiw kerek.

Serverde saytın’ızdı ja’riyalawda FTP protokolınan paydalanıw ushın to’mendegilerdi orınlawın’ız kerek

Page 43: L E K TS I YA T E K S T L E R I

43

1. Avtor biypul serverde dizimnen o’tedi, FTP serverge kiriw ushın atı ha’m parolin belgileydi. Odan keyin server diskinde saytının’ tu’b papkası jaratıladı, a’dette onın’ atı avtordın’ registratsiyadan o’tken atı menen birdey boladı.

2. Avtor FTP-klient programması ja’rdeminde server menen baylanısadı ha’m birdenine o’zinin’ papkasına tu’sedi.

3. Avtor serverdin’ diskine saytının’ faylların kopiyalaydı. Sonday aq fayllardın’ jan’a versiyaların go’ne fayllardın’ ornına jazadı, fayllardın’ atın o’zgertiw, ko’shiriw mu’mkin. Islenetug’ın jumıs ko’lemi ju’de ko’p bolsa, onda tolıg’ı menen papkanın’ ishindegi fayllar joq qılınıp, ornına jan’adan fayllar kopiyalang’anı maqul.

4. Avtor FTR-serverden shıg’ıwdı umıtpaw kerek. 5. Avtor brouzerdi iske tu’sirip, saytın tekserip ko’redi ha’m qatelerin o’zgertip, 2 - 5 qademlerdi

qaytalaydı.

Dreamweaver programmasının’ o’zinde FTR protokolı ja’rdeminde sayttı ja’riyalaw ha’m basqarıw mu’mkin. Dreamweaver o’zi o’zgeris kiritilgen fayllardı dizimge aladı ha’m serverge tek g’ana o’zgertilgen fayllardı kopiyalaydı.

Web betlerdi ja’riyalaw boyınsha ma’sla’ha’tler

Ulıwma aytqanda, Web betliklerdi ja’riyalawdın’ ko’p jolları bar, mısalı qıdırıw sistemalardın’ bazasına qosıw ushın jiberiw yaki bannerli almasıw sistemasına qosılıw h.t.b.

Web betti ja’riyalawdan aldın FTP-serverdin’ nastroykaların puxtalap tekseriw kerek, bul jerde qate jibersen’iz, keyinshelik sayttın’ joq qılıng’an kopiyası menen isleskende onı du’zetiw qıyın boladı. FTP-klient programmasınan paydalanıp FTP-server menen baylanıs jasan’ ha’m sizin’ saytın’ızdın’ tu’b papkasına kerek emes bir fayldı jiberip ha’m tezde onı o’shirip ko’rin’. Bul jumıstı orınlay alsan’ız, demek sizde bul saytqa dostup bar bolg’anı, yag’nıy siz bul sayt faylları menen islese alasız. Keri jag’dayda tarmaq administratorına xabarlasıwın’ız kerek.

FTP-server menen baylanıs jasaw ushın Connect to remote host tu’ymeshesin basıwın’ız kerek, ol Site panelinde jaylasqan boladı. Onın’ basqa jolı Site panelinin’ menyuindegi Site bo’liminde Connect punkti tan’lanadı yaki <Ctrl>+<Alt>+<Shift>+<F5> klavishalar kombinatsiyası basıladı. Egerde siz sayt nastroykalarında paroldi saqlawdan bas tartqan bolsan’ız (Site Definition dialog aynasındag’ı Remote Info bo’liminde Save aldında turg’an flajokti alıp taslag’an bolsan’ız), Dreamweaver sizden parol kiritiwin’izdi soraydı.

Saytın’ızdı ja’riyalawdın’ en’ a’piwayı jolı – bul lokal kopiyanın’ faylları diziminde tu’bir papkanı tan’lap panelde Put File(s) tu’ymeshesin basıw. Bul tu’ymeshe fayllardı FTP-serverge kopiyalaw protsessin iske tu’siredi. Sonday-aq siz paneldin’ Site menyuindegi yaki kontekstlı menyudag’ı Put punktin tan’lawın’ız <Ctrl>+<Shift>+ klavishler kombinatsiyasın basıwın’ız mu’mkin.

Page 44: L E K TS I YA T E K S T L E R I

44

Suwret. Site panelinin’ Put File(s) tu’ymeshesi

Siz tu’bir papka yag’nıy sayttı tolıg’ı menen tan’lap alg’anlıg’ın’ız sebepli Dreamweaver sizden sayttı tolıg’ı menen serverge kopiyalaw nietin’izdi tastıyıqlawdı soraydı. Siz Yes tu’ymeshesin basasız ha’m biraz waqıttan keyin saytın’ız serverde ja’riyalanadı (publikatsiya boladı).

Saytın’ızdın’ brouzerde durıs sa’wleleniwin tekserip ko’rin’.

Put newer files to remote punkti jan’a fayllardı serverge jazdırıp, olardın’ go’ne versiyaların joq qıladı. Get newer files from remote punkti fayldın’ lokal kopiyası joyıtılg’an jag’dayda onı serverden jazdırıp alıw mu’mkinshiligin beredi. Fayllardı sinxronizatsiya qılıwdın’ parametrlerin qoyıp (jan’a fayllardı serverge kopiyalaw), Preview tu’ymeshesi basıladı.

Sinxronizatsiya protsessi iske tu’sirilgennen keyin ekranda fayllardın’ dizimi aynası payda boladı (suwret), bunda siz sinxronizatsiya bolıwı kerek bolg’an fayllardı ko’rsetiwin’iz mu’mkin. Aynanın’ elementleri

Action — fayl menen orınlanatug’ın a’meller. Olar to’mendegishe:

o Put —serverge kopiyalaw; o Get — serverden lokal diskke kopiyalaw; o Delete — joq qılıw.

A’mel aldındag’ı flajok turadı, ol alıp taslang’anda sinxronizatsiya toqtatıladı.

• File —fayl atı. • Status —sinxronizatsiya tamamlang’annan keyin shıg’arılatug’ın mag’lıwmat (status, jag’day).

Page 45: L E K TS I YA T E K S T L E R I

45

Suwret. Sinxronizatsiya qılınıp atırg’an fayllar dizimi

Suwret. Sinxronizatsiya tamam bolg’an

Sinxronizatsiya otchetın saqlap qoyıw ushın Save Log tu’ymeshesi basıladı. Endi FTP-serverden shıg’ıw ushın Connect to remote host tu’ymeshesi qaytadan basıladı yaki Site panelinde Disconnect punkti tan’lanadı yaki <Ctrl>+<Alt>+<Shift>+<F5> basıladı.

Web betti serverde jaylastırıw

Internetke qosılg’an ha’r bir kompyuter o’zinin’ unikal (tek o’zine tiyisli, qaytalanbaytug’ın) nomerine iye. Ol IP-adres dep ataladı. IP-adres bir birinen tochkalar menen ajıralıp turg’an to’rt sannan ibarat bolıp, sol IP-adresi arqalı qalegen kompyuterimizdi Internetten tawıp alıwımız mu’mkin.

Egerde sizin’ kompyuterin’iz Internetke ba’rhama qosılıp tursa, onda onın’ jeke IP-adresi bar bolg’anı boladı. Bul jag’dayda sizin’ web betin’izdi basqalar ha’m internetten ko’riwi ushın siz arnawlı veb-server dep atalıwshı programma ornatıwın’ız kerek ha’m web saytın’ızg’a tiyisli fayllardı tarmaqtan oqıw ushın ashıp qoyg’an papkan’ızg’a jaylastırıp qoyıwın’ız kerek.

Page 46: L E K TS I YA T E K S T L E R I

46

Server tan’law

Biraq ko’p jag’daylarda jeke kompyuterler ba’rhama Internetke qosılıp turg’an bolmaydı. Waqtı-waqtı menen baylanıs jasap turatug’ın paydalanıwshılar o’zinin’ veb-betlerin jaylastırıw ushın tiykarınan sonın’ ushın arnalg’an kompyuterlerden paydalang’anı maqul. Bul sizin’ Internet-provayderin’izdin’ serveri yaki qalegen bir «biypul» Internet-serverler bolıwı mu’mkin. Ha’zirgi ku’n’de biypul web betin’iz ushın diskte belgili bir orın ajıratıp beretug’ın Internet-serverler ko’p: Geocities (www. yahoo.com), XOOM (xoom.corn/home), Rossiya serveri “Xalyava” (www.halyava.ru), www.chat.ru serveri h.t.b.

Serverge materiallar qalay jiberiledi?

Serverde orın alıp bolg’annan keyin og’an betin’izdin’ barlıq faylların ju’klewin’izge boladı. Onın’ ushın FTP- baylanıstan paydalang’an maqul. Bunda serverge fayllardı ju’klew protsessi bir ko’riniste a’dettegi fayllardı nusxalawdan ayırmashılıg’ı joq. Mısalı, WS_FTP programmasının’ shep panelinde kompyuterin’izdegi fayllar, al on’ panelinde bolsa uzaqda jaylasqan serverdegi fayllar ko’rinip turadı. Fayllardı serverge ju’klew ushın olardı ajıratıp alıp, Copy (Kopirovat) tu’meshesin basıw jetkilikli.

Siz web betin’izdi tez-tezden jan’alap turmaqshı bolsan’ız, onda Ftpweb xızmetshi programmasınan paydalanıwın’ızg’a boladı. Bul programma en’ son’g’ı iske tu’sirilgeli beri qaysı fayllarg’a o’zgeris kiritilgenligin anıqlap, olardın’ nusxasın avtomatik tu’rde serverge jiberiw jumısların orınlay aladı. Bizden bolsa tek g’ana Process (Orınlaw) tu’ymeshesin basıw ku’tiledi.

Domenlik atlar (Domennıe imena)

Al endi bizin’ web betti Internet paydalanıwshıları qalay tawıp aladı? Onın’ internettegi atı qanday boladı?

Sizin’ web betin’iz Internetke qosılıp turg’an 192.168.0.11 IP-adresli kompyuterdin’ MyPage papkasında jaylasqan bolsa, onda onı ko’riw ushın brouzerdin’ adresler qatarında http://192.168.0.11/MyPage teriw jetkilikli. Adreslerdi kiritiw ha’m yadta saqlawdı an’satlastırıw ushın olardı tsifrlı tu’rde emes, ba’lki domenli at tu’rde bergenimiz maqul. DNS — Domain Name System - bul domendegi at sisteması. Ko’pshilik IP-adreslerge belgili bir domenli atlar sa’ykes keltirilgen. Mısalı, Rambler Internet-provayderinin’ saytı http://www.rambler.ru adresinde, QMU saytın bolsa http://www.qmu.uz adresi boyınsha tawıp alıwg’a boladı.

Domen atları belgili bir qag’ıyda boyınsha beriledi. Attın’ aqırında son’g’ı tochkadan keyin joqarı da’rejedegi domen atı jazıladı, ko’p jag’daylarda ol eki ha’ripten ibarat bolg’an ma’mleket (resurs iyesi) kodı boladı: ru –Rossiya, uz - O’zbekistan.de — Germaniya, h.t.b. Ol u’sh ha’ripten turıwı da mu’mkin, onda ol resurs iyesi bolg’an ka’rxananı bildiredi. Mısalı, .com — kommertsiyalıq, .gov — ma’mleketlik sho’lkem, .mil — a’skeriy h.t.b.

Domen atı on’nan shepke qaray oqıladı. Onın’ en’ son’g’ı tochkadan aldın turg’an bo’legi ekinshi da’rejeli domen atı dep ataladı. Olar a’dette to’lemli tu’rde birinshi (joqarı) da’rejedegi domen iyeleri ta’repinen beriledi. Ekinshi da’rejedegi domenler iyeleri, o’z gezeginde, u’shinshi da’rejedegi domen atların bo’listiriw mu’mkin, h.t.b.

Domen atının’ jazılıwında en’ shepki pozitsiyanı server programması islep turg’an kompyuterdin’ lokal tarmaqtag’ı atı (setevoe imya) iyeleydi.

Ko’pshilik jag’daylarda kompyuter resursları World Wide Web xızmetinde ekenligin ko’rsetiw ushın og’an www atı beriledi ha’m onda sayttın’ domen atı www dep baslanadı.

Login (login so’zinen kelip shıqqan) —sistemag’a kiriw ushın berilgen at.

Page 47: L E K TS I YA T E K S T L E R I

47

http:// - bul prefiks tarmaq protokolın bildiredi, ko’pshilik brouzerler onı avtomatik tu’rde adreske qosıp jiberedi, sol sebepli onı jazıw sha’rt emes.

Sorawlar:

1. Web betti tarmaqta ja’riyalawdın’ qanday usılları bar? 2. Web betlerdi serverde qalay jaylastıramız? 3. IP-adres tu’sinigi nenii an’latadı? 4. Domen degenimiz ne?

Lektsiya -9

ADOBE PHOTOSHOP PROGRAMMASINDA GRAFIKALIQ OBEKTLER JARATIW

Reje: 1. Kompyuter grafikası. 2. Adobe photoshop programmasının’ jumıs quralları. 3. Adobe Photoshop programmasının’ menyui.

Tiykarg’ı tu’sinikler: Vektorlı ha’m rastrli grafika, obraz, kontrastnost, yarkost, ren’, RGB.

Kompyuter grafikası. Adobe Photoshop programması haqqında ulıwma mag’lıwmat

Kompyuter grafikası 2 qıylı boladı: vektorli ha’m rastrli (tochkalı). Vektorlı grafika redaktorlarına mısal etip Adobe Illustrator, Corel Draw ha’m Macromediya Flash programmalardı aytıw mu’mkin. Usı programmalarda su’wretler ha’r qıylı sızıqlar ha’m vektorlardan ibarat boladı.

Vektorlı grafikada jaratılg’an su’wretler logotip, illyustratsiyalar ha’m zastavkalar jaratıwda paydalanıladı. Rastrli grafika redaktorlarına mısal etip Adobe Photoshop ha’m Paint programmaların aytıw mu’mkin. Bul programmalarda su’wretler mayda kvadrat - piksellerden ibarat bolıp mozaika halında su’wretti payda etedi. Rastrlı grafikadan rakamlı fotosu’wretler ha’m skanerden alıng’an su’wretler menen islew ushın paydalanıladı. Kompyuter grafikada dyuymdag’ı pikseller sanı (ppi) tiykarg’ı shart boladı. Qansha ko’brek pikseller sanı bolsa sonsha ko’rinis sapalıraq boladı. Mısalı eger ppi=72 bolsa onda 1 kvadrat dyuymg’a 5184 piskel jaylasadı ha’m onın’ ko’lemi 6 Kb boladı, eger ppi=144 bolsa onda 1 kvadrat dyuymga 20736 piskel jaylasadı ha’m endi onın’ ko’lemi 21 Kb g’a ten’ boladı. Sonın’ menen birge monitordın’ ko’rsetiw ha’m printerdin’ shıg’arıw sapası - dyuymg’a piskeller sanı (dpi) (72 yamasa 96 dpi) ha’m dyuymda sızıqlar sanı (Ipi) (300-2400 dpi lazerli, serpiwshi printerler ushın ha’m 75-200 lpi matritsalı printerler ushın), xa’mde kompyuter ren’ler sapası (2, 16, 256, 32 000, 16 000 000 ren’ler sanı) da u’lken ahimiyetke iye boladı. Ren’ jag’dayları - ren’lerdi shıg’arıw ha’m ko’rsetiw jolı. Ren’ jag’dayları 2 tu’rli boladı: RGB (qızıl, zangor, ko’k) monitorlarda su’wret ko’rsetiwde paydalanıladı, CMYK (aspanko’k, purpur, sarı, qara) baspada paydalanıladı. RGB jag’dayındag’ı ren’ler sanı CMYK jag’dayına qarag’anda ko’birek.

Page 48: L E K TS I YA T E K S T L E R I

48

Adobe PhotoShop programmanı iske tu’siriw ushın Windows tın’ tiykarg’ı menyu tu’ymesin basamız, onın’ ishinen Programmı bo’limin tan’laymız ha’m Adobe atqa iye topardan Adobe PhotoShop buyrıg’ın tan’laymız. Na’tiyjede to’mendegi ayna payda boladı:

Usı aynanın’ joqarısında menyu qatarı jaylasqan. Ol to’mendegi bo’limlerden ibarat:

Fayl (File), Pravka (Edit), Risunok (Image), Sloy (Layer), Vıdelenie (Select), Filtr (Filter), Vid (View), Okno (Window) ha’m Pomosh (Help).

Onın’ to’meninde jumıs qurallarının’ qa’siyetleri oblastı (Panel Svoystv - Options bar) jaylasqan. Eger usı oblast ekranda joq bolsa onı Okno (Window) menyuindegi Svoystva (Options) buyrıg’ı ja’rdeminde ekrang’a shıg’arıwımız mu’mkin.

Qa’siyetler oblastı to’meninde jumıs oblastı jaylasqan bolıp, onın’ shep ta’repinde jumıs qurallar oblastın (panel Instrumentov - Toolbox) ko’riw mu’mkin. Jumıs oblastının’ on’ ta’repinde ha’r qıylı ja’rdemshi oblastlar jaylasıwı mu’mkin: Sloi - Layers, Istoriya - History, Kanalı - Channel, TSveta - Color, Stili - Style, Svoystva kisti - Brushes, Svoystva shrifta - Character ha’m t.b. Usı oblastlar ha’m Okno(Window) menyuindegi buyrıqları ja’rdeminde ekrang’a shıg’arıwımız ha’m ekrannan alıp taslawımız mu’mkin.

Page 49: L E K TS I YA T E K S T L E R I

49

Ja’rdemshi oblastlardı kishkenelestiriwde mu’mkin. Bunın’ ushın oblasttın’ joqarısındag’ı kishkenelestiriw (svernut) tu’ymesinen paydalanamız. Ja’rdemshi oblastlarda bizge en’ kerekli bul jumıs qurallar oblastı (panel Instrumentov -Toolbox) ha’m qatlamlar oblastı (Sloi- Layers). Jan’a PhotoShop faylın jaratıw yaki eski fayldı qayta ashıw ushın menyu Fayldag’ı Sozdat ha’m Otkrıt buyrıqlarınan paydalanamız. Fayl jaratqanda ekranda to’mendegi ayna payda boladı.

Bul aynada onın’ atın Name, tu’rin Preset, enin Width, boyın Height, sıpatın Resolution, ren’ler halatın, arqa ren’in tan’lawımız kerek boladı. Ha’mmesin tan’lag’annan OK tu’ymesin basamız ha’m na’nbq;tlt ekranda jan’a bos jumıs oblast payda etiledi.

Adobe photoshop programmasının’ jumıs quralları. Oblast tan’law

Programmada islew ushın ja’rdemshi jumıs kurallar oblastındag’ı tu’ymeler menen tanısayıq. Ol ekrannın’ shep ta’repinde jaylasadı. Eger ol ekranda joq bolsa onda Windows (Okna) menyuindegi Panel Instrumentov - Toolbox buyrıg’ın iske tu’siriwimiz kerek.

To’rtmu’yeshlik oblast tan’law - Rectangular marquee (pryamougolnaya oblast) - [M] – jumıs oblastnıdag’ı aktiv qatlamda to’rtmu’yeshlik oblasttı tan’law.

Do’n’gelek oblast tan’law - Elliptical marquee (ellipticheskaya oblast) - [M] – jumıs oblastındag’ı aktiv qatlamda ellips oblasttı tan’law.

Page 50: L E K TS I YA T E K S T L E R I

50

Bo’lek qatar oblast tan’law - Single row marquee (stroka pikseley) - [M] – jumıs oblastındag’ı aktiv qatlamda bir qatarg’a ten’ oblasttı tan’law.

Bo’lek bag’ana oblast tan’law - Single column marquee (stolbets pikseley) - [M] – jumıs oblastındag’ı aktiv qatlamda bir bag’anag’a ten’ oblasttı tan’law.

Tan’lang’an oblastqa qosımsha oblast qosıw ushın SHIFT tu’ymesin basıp turıp ucs tu’ymedan qayta paydalanamız. Eger ALT tu’ymesinen paydalanıp oblast tan’lasaq, onda tan’lang’an oblasttan alıp taslaw ma’nisin bildiredi.

Qa’siyetler qatarında to’mendegilar aktiv boladı: • SHIFT ha’m ALT - tu’ymeler ha’reketlerine uqsas jag’daylardı tan’law • Feather – oblastı ja’rdeminde tan’lang’an oblast shegaralarının’ qalın’lıg’ı. • Style - oblastı ja’rdeminde tan’law jag’dayın tan’laymız. Normal – sheksiz oblast, Constrained

Aspect Ratio – qaptalları ko’rsetilgen proportsiyalardag’ı oblast tan’law, • Fixed size – qaptalları ko’rsetilgen u’lkenligindegi oblast tan’law.

Lasso - Lasso (Lasso) - [L] - qa’legen oblasttı tan’law. Eger tan’lag’anımızda ALT tu’ymesin basıp tursak, onda bizin’ lasso ko’pmu’yeshlik lassog’a uqsap oblast tan’laydı ha’m ALT tu’ymesin basqanımızda oblast berkiledi. Ko’pmu’yeshlik lasso - Polygonal lasso (Mnogougolnoe lasso) - [L] - ko’pmu’yeshlik oblasttı tan’law. Tan’lang’an oblasttı bekitiw ushın yaki mısh penen eki ret basıw kerek, yaki CTRL tu’ymesin basıp qoyıp jiberiwimiz kerek boladı. Magnit lasso - Magnetic lasso (Magnitnoe lasso) - [L] – uqsas ren’ler boyınsha oblast tan’law. Kompyuter tan’lang’an tochkanı biykar etiw ushın Backspace tu’ymesin basıw kerek. Tan’lang’an oblastqa qosımsha oblast qosıw ushın SHIFT tu’ymesin basıp turıp usı tu’ymeden qayta paydalanamız. Qa’siyetler qatarında to’mendegiler aktiv boladı:

• SHIFT ha’m ALT tu’ymeler ha’reketlerine uqsas jag’daylardı tan’law • Feather oblastı ja’rdeminde tan’lang’an oblast shegaralarının’ qalın’lıg’ı • Anti-Aliased optsiyası tan’lang’an oblasttın’ shegaralar ren’in ko’zge ko’rinbes etip bir birine

sa’ykeslendiriw • Width - tan’lang’an oblasttın’ shegaralar qalın’lıg’ın o’zgertiw • Edge Contrast - magnit lassonın’ seziwshen’ligin o’zgertiw • Frequency - magnit lassonın’ avtomatik ra’wishte qoyılatug’ın tochkalar ortasındag’ı aralıq

Sıyqırlı tachqsha - Magic wand (Volshebnaya palochka) - [W] - bir qıylı ren’li oblasttı tan’law. Tan’lang’an oblastqa qosımsha oblast qosıw ushın SHIFT tu’ymesin basıp turıp usı tu’ymeden qayta paydalanamız. Qa’siyetler qatarında to’mendegiler aktiv boladı:

• SHIFT ha’m ALT tu’ymeler ha’reketlerine uqsas jag’daylardı tan’law • Tolerance - oblast tan’lawda sıyqırlı tayaqshının’ seziwshen’ligin o’zgertiw • Anti-Aliased optsiyası tan’lang’an oblasttın’ shegaralar ren’in ko’zge ko’rinbes etip bir birine

sa’ykeslendiriw • Contiguous optsiyası tan’lang’an oblast bir ulıwma bolıwın yaki bir neshe bo’limnen ibarat

bolıwın ta’miynleydi • Use All Layers optsiyacı sıyqırlı tayaqshanın’ oblast tan’lang’anlıg’ı ha’m qatlamlarg’a tiyisli

yaki tek tiykarg’ı bolg’an qatlamg’a tiyisliligin ta’miynleydi Tan’lang’an oblast u’stinde biz ha’r tu’rli xa’reketlerdi orınlawımız mu’mkin. Ma’selen yadg’a kirkib yamasa nusqa olıp taza qatlamg’a onı qoyıwımız mu’mkin. YAmasa onı ko’lemin o’zgertiw ha’m aylandırıwımız mu’mkin. Ha’mde onı jumıs oblastı boylap jılıstırıwımız mu’mkin. Ha’reketleniwshi - Move (peremeshenie) - [V] - tanlang’an oblasttı jumıs oblastı buylap ha’reketlentiriw.

Page 51: L E K TS I YA T E K S T L E R I

51

Eger ALT tu’ymeni basıp ha’reketleniwdi baslasaq, onda tan’lang’an oblasttın’ nusxası alınıp ol ha’reketlenedi. Eger SHIFT tu’ymesinen paydalansaq, bul jag’dayda tanlang’an oblast tek vertikal ha’m gorizontal ha’reketlenedi. Tan’lang’an oblasttı klaviaturadag’ı bag’ıtlawshı strelkaları ja’rdeminde ha’m ha’reketlentiriw mu’mkin, sonda ha’r bir strelka basılg’anda, tanlang’an oblast 1 pikselga jıljıydı. Qa’siyetler qatarında to’mendegiler aktiv boladı:

• Auto Select Layer oblastı - mısh ja’rdeminde aktiv bulmagan qatlamdı aktiv qılıw. • Show Bounding Box - tan’lang’an oblast shegaralarında ramka payda qılıw. Usı ramka

ja’rdeminde su’wretti sozıw ha’m aylantırıw mu’mkin boladı. Kadrlawshı - Crop (Kadrirovanie) - [C] - fayldın’ kerek emes bo’leklerin kesip alıp su’wretti kishireytiw. Bunın’ ushın kerekli oblasttı tanlab ENTER tu’ymesini basamız, eger tanlang’an oblasttı biykar qılmaqshı bolsaq ESC tu’ymesin basıwımız kerek. Bo’liw pichokchası - Slice (Narezka) - [K] – ko’rinisti bir neshe bo’limge bo’lip shıg’ıp onı Internetde bo’limlerge bo’lingen xalda shıg’arıw ushın tayarlap koyadı. Bo’lingenlerdi sazlaw - Slice select (Vıbor moduley) - [K] - bir neshe bo’lekke bo’lingen ko’rinisti sazlaw (bo’leklerdi sozıw). Qa’siyetler qatarında to’mendegiler aktiv boladı:

• Style oblastı ja’rdeminde tanlang’an oblast jag’dayın tanlaymız. Normal - cheksiz oblast, Constrained Aspect Ratio - qaptalları ko’rsetilgen proportsiyalardag’ı oblastı tan’law, Fixed size - qaptalları ko’rsetilgen u’lkenliktegi oblastı tan’law.

• Show Slice Numbers – bo’limlerinin’ nomerlerin ko’rsetiw yamasa ko’rsetpew • Line Color – bo’liniw shegaraların ren’in o’zgertiw • Promote To User Slice – bo’lingenlerdi avtomatik gorizontal ha’m vertikal dawamlaw • Slice Options tu’ymesi - bulekshenin’ qa’siyetlerin o’zgertiw ha’m sazlaw.

Adobe photoshop programmasının’ is quralları. Su’wret redaktorlaw Qa’lem - Pensil (karandash) - [B] – qa’lem ja’rdeminde sızıw. Kist - Paintbrush (kist) - [B] - sızıwdın’ tiykarg’ı is quralı. Eger kist foydalanılg’an waqıtta Shift tu’ymesin basıp mısh penen sızsaq, bul jag’dayda tuwrı sızıqlar sızılg’an. Shift tu’yme ja’rdeminde mısh basıp tochkalardı bir biri menen baylanıstırıw da mu’mkin. Kist penen sızılg’an sızıqlar qa’lemge qarag’anda shegaraları aniq ko’rinbeydi. Qa’siyetler qatarında to’mendegiler aktiv boladı:

• Brush – qa’lem tu’rin ha’m qalın’lıg’ın tan’law • Mode sızıklardı su’wret u’stine jazıw jag’dayın o’zgertiw • Opacity sızıqlar ko’rinbeslik da’rejesin o’zgertiw • Auto Erase – qa’lem tek bos oblastda sızıwı mu’mkinligin ornatiw • Wet Edges (mokrıe kraya - "xul shegaralar") akvarel menen sızıw effekti

Nusqa alıwshı SHtamp - Clone Stamp (kopiruyushiy shtamp) - [S] – su’wrettin’ basqa bo’limge uqsas oblastlar jaratıw. Nusqa alıwshı oblasttı tan’lawda Alt tu’ymeden paydalanamız. Nag’ıshlı SHtamp - Pattern Stamp (shtamp uzora) - [S] - sız Patterns oblastında tan’lang’an nag’ısh penen ko’rsetilgen oblasttı toltırıw. Eger o’zi nag’ısh jaratpaqshı bolsan’ız onda birinshiden to’rtmu’yeshlik oblast tan’law is quralı menen (Rectangular Marquee) nag’ısh jaylasqan oblasttı tanlaymız, ekkinshiden menyu Pravka (Edit) g’a kirip onın’ ishindegi Naznachit uzor (Define Pattern) buyrıg’ın tan’laymız ha’m na’tiyjede usı nag’ısh Patterns oblastında payda boladı. Qa’siyetler qatarında to’mendegiler aktiv boladı:

• Brush – qa’lem tu’rin ha’m qalın’lıg’ın tan’law • Mode sızıqlardı su’wret u’stine jazıw jag’dayın o’zgertiw • Opacity sızıqlar ku’rinbew da’rejesin o’zgertiw • Aligned - nusqa olıng’an oblasttı mısh ha’reketinen keyin o’zgeriwi yamasa.

Page 52: L E K TS I YA T E K S T L E R I

52

• Use All Layers optsiyacı sıyqırlı tayaqshanın’ oblast tan’lang’anlıg’ı ha’mme qatlamlarg’a tiyisli yamasa tek tiykarg’ı bolg’an qatlamg’a tiyisliligin ta’minleydi

Aldıng’ı jag’dayg’a kaytıw - History Brush (kist predıstorii) - [Y] - bul jumıs quralın tan’lawdan aldın siz kaytıw kerek bolg’an jag’daydı Predıstoriya (History) ja’rdemshi oblastta tan’lap belgilep qoyıwın’ız kerek. Keyin usı jumıs qural menen barlıq jag’daydan keyin ha’reketlardi ko’rsetilgen oblastta o’shiriwin’iz mu’mkin boladı. Effektli aldıng’ı jag’dayg’a qaytıw - Art History Brush (kist predıstorii so spetseffektami) - [Y] - aldıng’ı jag’dayg’a qaytıw jumıs quralına uqsas bolıp, parqı tek aldıng’ı jag’dayg’a qaytıwda ha’r qıylı spetseffektlerden paydalanıladı.

Qa’siyetler qatarında to’mendegiler aktiv boladı: • Brush – qa’lem tu’rin ha’m qalın’lıg’ın tan’law • Mode sızıqlardı su’wret u’stinde jazılıw jag’dayın o’zgertiw • Opacity sızıqlar ko’rinbeslik da’rejesin o’zgertiw • Style spetseffekt jag’dayın tan’law • Fidelity – ren’lerden paydalanıw jag’dayı. 100% - su’wrettegi ren’ler, 0% - ren’ler saylap

alınadı • Area – Jumıs quralının’ ta’sir etiw oblastın tan’law • Spacing – jumıs quralın tek uqsas ren’ler oblastlarda islew yaki ha’r qıylı ren’li oblastlarda

da islew. Aerograf - Airbrush (aerograf) - [J] - puliverizator jag’dayına uqsas sızıw jumıs quralı. Eger aerograftan paydalanıw waqtında Shift tu’ymesin basıp mısh penen sızsaq, onda tuwrı sızıqlar sızıladı. Shift tu’yme ja’rdeminde mısh basıp tochkalardı bir biri menen baylanıstırıw damu’mkin.

Qa’siyetler qatarında to’mendegiler aktiv boladı: • Brush – qa’lem tu’rin ha’m qalın’lıg’ın tan’law • Mode sızıqların su’wret u’stinde jazılıw jag’dayın o’zgertiw • Pressure - kraska sebiw ku’shi.

O’shirgish - Eraser (lastik) - [E] - tiykarg’ı qatlamda su’wret o’shiriw. Shift tu’yme ja’rdeminde mısh basıp tochkalardı bir biri menen baylanıstırıw da mu’mkin. Arqa ren’di o’shirigishi - Background Eraser (lastik fona) - [E] – tek arqa ren’di o’shiriw. Sıyqırlı o’shirgish - Magic Eraser (volshebnıy lastik) - [E] - uqsas ren’li oblastlardı o’shiriw. Qa’siyetler qatarında to’mendegiler aktiv boladı:

• o’shirgish jag’dayların tan’law – kist (Paintbrush - kist), aerograf (Airbrush - aerograf), qa’lem (Pensil - karandash), blok (Block - blok). Blok jag’dayında mısh kursorı 16x16 piksel kvadrat ko’rinisinde boladı. Blok u’lkenligi hesh o’zgermeydi, sonlıqtan ushın su’wretti 1600% masshtabında ko’rgenimizde usı blok su’wrettin’ 1 piksel u’lkenligine ten’ boladı.

• Tolerance seziwshisi - ren’ o’shiriwde seziwshiligin o’zgertiw • Protect Foreground Color aldıng’ı ren’ o’shiriliwinen qorg’anıw. • O’shiriw jolı (Limits) – tek sheklengen oblast ishinde, (Discontiguous) bir qıyıl ren’li,

(Contiguous) kist ortasındag’ı ren’li, (Find Edges) uqsas ren’li shegaraları. • Sampling O’shiriletug’ın ren’ tan’law jag’dayın o’zgertiw. • Anti-Aliased SHegaralardın’ jayılıwı - o’shiriletug’ın oblast shegaralar jag’dayın

o’zgertiw. • Use All Layers optsiyacı sıyqırlı o’shirgish ta’siri barlıq qatlamlarg’a tiyisli yaki tek

tiykarg’ı bolg’an qatlamg’a tiyisligin ta’miynleydi • Opacity o’shiriw da’rejesin o’zgertiw

Gradient ren’ beriw - Gradient (gradient) - [G] - gradient yaki bir ren’nen basqasına o’tiw ren’i menen tan’lang’an oblasttı toltırıw. Arka ren’ beriw - Paint Bucket (kovsh) - [G] - belgilengen oblasttı bir ren’ yaki nag’ısh (tayar ha’m biz jaratqan) menen toltırıw.

Page 53: L E K TS I YA T E K S T L E R I

53

Qa’siyetler qatarında to’mendegiler aktiv boladı: • Gradient Editor gradient ren’li jag’dayların o’zgertiw • Gradient tu’rleri: sızıqlı (Linear Gradient), radial (Radial gradient), mu’yeshli (Angular

gradient), ayna aksli (Reflected gradient), romblı (Diamond gradient) • Revers gradientte birinshi ha’m ekinshi ren’lerdi ornı menen almastırıw • Dither gradient ren’ menen toltırılıwda sızıqlar ko’rinisin o’shiriw • Transparency ren’siz oblastqa ruxsat beriw belgisi. • Ren’ menen toltırılıw tu’rin tan’law ren’-Foreground yaki nag’ıs -Pattern • Pattern toltırılıw nag’ısın tan’law • Mode ren’ menen toltırılıw jag’dayın o’zgertiw • Opacity ren’ menen toltırılg’an oblasttın’ ko’rinbeslik da’rejesin o’zgertiw • Tolerance Seziwshen’ligi (dopusk) - ren’ menen toltırılıwda shegaralarg’a seziwshen’ligin

o’zgertiw • Anti-Aliased SHegaralardın’ jayılıwı - ren’ menen toltırılatug’ın oblast shegaralar

jag’dayın o’zgertiw. • Contiguous – tek shegaralang’an oblasttı ren’ menen toltırıw • Use All Layers optsiyacı ren’ menen toltırılıwda barlıq qatlamlarda oblast shegaraların

anıqlawdı ta’miynleydi Kontrast kemeytiriw - Blur (razmıtie) - [R] – kontrasttı kemeytiw yaki ren’lerdi jayıw. Kontrast ko’beytiw - Sharpen (rezkost) - [R] – kontrasttı ko’beytiw yaki ren’lerdi anıqlastırıw. Ren’ tartıw - Smudge (razmazıvatel) - [R] - ren’ jayıw yaki tartıw. Qa’siyetler qatarında to’mendegiler aktiv boladı:

• Brush - mısh ko’rinisi tu’rin ha’m qalın’lıg’ın tan’law • Mode ren’lerdi o’zgertiw jag’dayın sazlaw • Pressure jayıw ku’shin o’zgertiw • Use All Layers optsiyacı jayılıw ta’siri ha’mme qatlamlarg’a tiyisli yaki tek tiykarg’ı

bolg’an qatlamg’a tiyisligin ta’miynleydi • Finger Painting ren’ge batırılg’an barmaq penen sızıw effektine o’tiw.

Ashıg’ıraq qılıw - Dodge (osvetlitel) - [O] - ko’rinis ren’lerin ashıg’ıraq qılıw. Qoyıwıraq qılıw - Burn (zatemnitel) - [O] - ko’rinis ren’lerin qoyıwıraq qılıw. Ren’ ho’llew - Sponge (gubka) - [O] - ko’rinis ren’lerin ku’sheytiriw. Qa’siyetler qatarında to’mendegiler aktiv boladı:

• Brush- mısh ko’rinisi tu’rin ha’m qalın’lıg’ın tan’law • Range ta’sir ko’rsetiw lazım bolg’an ren’ler tu’rin tan’law (Shadows – toq ren’ler,

Midtones – barlıq ren’ler ha’m Highlights –ashıq ren’ler). • Exposure ren’lerdi ashıqlandırıw ku’shin o’zgertiw. • Mode ren’lerdi o’zgertiw jag’dayın sazlaw (Desaturate – kemeytiriw yaki Saturate -

ko’beytiriw). • Pressure jumıs quralının’ ta’sirinin’ ku’shin o’zgertiw.

Adobe photoshop programmasının’ jumıs quralları.

Tekst xam grafik ko’rinisler jaratıw. Tekst - Type (tekst) - [T] - ko’riniske tekst qosıw. Usı jumıs quralı isletilgennen keyin jan’a qatlam payda boladı (Text Layer). Qa’siyetler katarında to’mendegiler aktiv boladı:

• a’piwayı tekst yamasa tekst shegaraları jag’dayı • tekst bag’ıtın o’zgertiriw • tekst ha’ripler ko’rinisin o’zgertiriw • tekst ha’ripler ko’rinisin o’zgertiriw(qalın’, jatıq, astı sızıq) • tekst ha’ripler u’lkenligin o’zgertiriw

Page 54: L E K TS I YA T E K S T L E R I

54

• tekst shegaralar tu’rin o’zgertiriw • tekst abzatsda jaylasıwı: shep, orta yamasa on’ ta’rep boyınsha • tekst tu’rin o’zgertiriw oblastı • Warp Text - tekst qıysaytıw jag’dayları • Palettes tu’ymesi - tekst qa’siyetlerin o’zgertiriw aynası menen islew

To’rtmu’yeshlik - Rectangle (pryamougolnik) - [U] - to’rtmu’yeshlik sızıw. Aylanasiman to’rtmu’yeshlik - Rounded Rectangle (skruglёnnıy pryamougolnik) - [U] - aylanasiman to’rtmu’yeshlik sızıw. Qa’siyetler qatarında mu’yeshler radiusın o’zgertiriw oblastı - Radius payda boladı. SHen’ber - Ellipse (ellips) - [U] – shen’ber sızıw. Ko’pmu’yeshlik - Polygon (mnogougolnik) - [U] - ko’pmu’yeshlik sızıw. Ko’pmu’yeshlik ta’replerinin’ sanın Sides oblast ja’rdeminde ko’rsetiw mu’mkin. Sızıq - Line (liniya) - [U] – tuwrı sızıq sızıw. Sızıq qalın’lıg’ın Weight oblast ja’rdeminde o’zgertiriw mu’mkin. Arnawlı ko’rinisler - Custom Shape (proizvolnaya figura) - [U] - ha’r qıylı tayar ko’rinisler sızıw. Qa’siyetler qatarındag’ı Shape oblastı ja’rdeminde kerekli formanı tan’lawımız mu’mkin. Qa’siyetler qatarında to’mendegiler aktiv boladı:

• Forma sızılıw jag’dayın o’zgertiriw tu’ymeleri (jan’a qatlamda - Create New Shape Layer, tek jol - Create New Work Path, aktiv qatlamda - Filled Region)

• Forma tu’rin tan’law tu’ymeleri. • Forma sızıw jolları (Unconstrained - qa’legen, Square - ten’ ta’repli, Fixed Size -

ko’rsetilgkn razmerli, Proportional - proportsiyalı). • Layer Style - ren’ menen boyaw tu’ri

Qol - Hand (ruka) - [H] - eger su’wret ekrang’a tolıq sıymasa onda bul jumıs quraldı tan’lap mısh ja’rdeminde su’wretti jıljıtıw mu’mkin. Su’wretti ekrannın’ on’ ha’m pa’ski bo’limlerde jaylasqan ko’rip shıg’ıw oblastlar arqalı da jıljıtıw mu’mkin, biraq bul jumıs qural ja’rdeminde jıljıtıw qolay ha’m bul jumıs quraldı qa’legen waqıtta "bos orın" (probel) tu’ymesin basıp turıp waqtınsha uslap turıw mu’mkin. Bos orındı qoyıp jibersen’iz jumıs qurıl ja’ne da’slepki jag’dayg’a qaytadı. Qa’siyetler katarında to’mendegiler aktiv boladı:

• Actual Pixels [Ctrl+Alt+0] - 100% ekran jag’dayına o’tiw tu’ymesi, usı jag’dayda su’wrettin’ 1 piksel ekrandag’ı 1 pikselge mas boladı

• Fit On Screen [Ctrl+0] – tolıq ekran jag’dayına o’tiw tu’ymesi. Bu tu’yme ja’rdeminde su’wret ayna ko’lemine shekem sozıladı.

• Print Size – qag’azg’a baspa (pechatlanıp) shıqqanda qanday shıg’ıwın ko’rsetiwshi tu’yme.

Lupa - Zoom (lupa) - [Z] – ekrandag’ı su’wretti ko’riw masshtab protsentin o’zgertiriw mu’mkin. Jaqınlastırıw ushın mısh penen kerekli su’wret bo’limine ko’rsetip bir ma’rte basıw kerek, yamasa jaqınıraq ko’riw kerek bolg’an oblasttı mısh penen basıp turıp tan’law kerek. Eger uzaqlastırıw kerek bolsa onda klaviaturada Alt tu’ymesin basıp turıp mısh penen su’wretke bir ma’rte basamız. Usı ja’rdemshi tu’yme ha’reketlerin operativ tu’ymeler arqalı da orınlaw mu’mkin: Zoom In [Ctrl+Plyus] - su’wretti jaqınlastırıw, Zoom Out [Ctrl+Minus] - su’wretti uzaqlastırıw, Actual Pixels [Ctrl+Alt+0] - su’wretti 100% ekran jag’dayına o’tiw tu’ymesi, Ctrl+Alt+Plyus - su’wrettti ayna menen birgelikte u’lkeytiw, Ctrl+Alt+Minus - su’wretti ayna menen birgelikte kishkenelestiriw, Fit On Screen [Ctrl+0] - su’wret ha’m aynanı tolıq ekran jag’dayına o’tkeriw. Qa’siyetler katarında to’mendegiler aktiv boladı:

• Resize Windows To Fit - su’wretti ayna menen birge o’zgertiw jag’dayın jag’ıw.

Page 55: L E K TS I YA T E K S T L E R I

55

• Ignore Palettes - ayna u’lkeygende on’ ta’reptegi ja’rdemshi oblastlar arqasına o’tiw mu’mkinligi yamasa mu’mkin emesligin o’zgertiriw.

• Actual Pixels [Ctrl+Alt+0] - 100% ekran jag’dayına o’tiw tu’ymesi, usı jag’dayda su’wrettin’ 1 piksel ekrandag’ı 1 pikselge mas boladı.

• Fit On Screen [Ctrl+0] - tolıq ekran jag’dayına o’tiw tu’ymesi. Bul tu’yme ja’rdeminde su’wret ayna ko’lemine shekem sozıladı.

• Print Size – qag’azg’a baspa (pechatlanıp) shıqqanda qanday shıg’ıwın ko’rsetiwshi tu’yme.

Pero - Pen (pero) - [P] - mısh ja’rdeminde tochkalar arqalı formanı jaratıw. Ixtiёriy pero - Freeform Pen (proizvolnoe pero) - [P] - mısh ja’rdeminde ha’reket arqalı formanı jaratıw. Jan’a tochka qosıw - Add Anchor Point (dobavit tochku) - [net] - mısh ja’rdeminde formag’a jan’a burılıs tochka qosıw. Tochka o’shiriw - Delete Anchor Point (udalit tochku) - [net] - mısh ja’rdeminde formadan burılıw tochkasın o’shiriw. Tochka o’zgertiriw - Convert Point (preobrazoxamt tochku) - [net] – forma tochkalarının’ jaylasıwın o’zgertiriw (sozıw). Izoxlar - Notes (zametki) - [N] - su’wret qa’legen oblastında tekstli qosımsha qosıw. Dawıs qosımshalar - Audio Annotation (zvukovoe opisanie) - [N] - su’wret qa’legen oblastına dawıs qosımshasın mikrafon arqalı qosıw. Payda bolg’an aynada Start tu’ymesin basıp jazıwdı baslaymız, toqtatıw ushın Stop tu’ymesin basamız, jazıw aynasınan shıg’ıp ketiw ushın Cancel tu’ymesin basamız. Tamızg’ısh (pipetka) - Eyedropper (pipetka) - [I] - qa’legen ren’di qayta tiykarg’ı ren’ qılıp tan’law imkaniyatın jaratadı. Eger sizge arqa ren’ qılıp tan’law kerek bolsa onda Alt tu’ymesin basıp turıwın’ız sha’rt boladı. Ren’lerdi salıstırıw - Color Sampler (sravnenie tsvetov) - [I] - Info ja’rdemshi oblastta 4 tochkalar ren’leri haqqındag’ı mag’lıwmatlardı ko’rsetiw imkaniyatın jaratadı. Tochkanı mısh ja’rdeminde qoyamız, o’shiriw ushın Alt tu’ymesin basıp turıp mıshtı bir tochkag’a basıw kerek. Sızg’ısh - Measure (izmeritel) - [I] - su’wrettegi aralıqtı anıqlaw ushın qollanıladı. Eger Alt tu’ymesinen paydalanıp sızg’ısh basınan yamasa aqırınan ja’ne bir sızıq sızıw mu’mkin ha’m ol ja’rdeminde transportir sıpatında paydalansa boladı, sebebi eki sızıqlar payda etken mu’yesh o’lshemin ko’rsetedi. Qa’siyetler katarında to’mendegiler aktiv boladı:

• Baslawshı tochka koordinataları (X, Y) • birinshi tochkadan ekinshisine bolg’an aralıq vertikal ha’m gorizontal boyınsha (W, H) • X og’ı boyınsha iyilgish mu’yeshi (A) • birinshi tochkadan ekinshisine bolg’an aralıq (D1) • birinshi tochkadan u’shinshisine bolg’an aralıq (transportirden paydalang’anda) (D2) • Clear – sızg’ıshtı o’shiriw tu’ymesi

Usı tu’yme bir neshe a’meldi orınlaydı: 1) Tiykarg’ı ren’di tan’law - Set Foreground Color (vıbrat tsvet perednego plana) - u’stki turg’an ren’ ko’rsetkishin (to’rtmu’yeshligin) bir ma’rte basıp, payda bolg’an aynadan ren’ tanlaymız. 2) Arka yamasa ishki ren’ tan’law - Set Background Color (vıbrat tsvet fona) - pa’ski turg’an ren’ ko’rsetkishin (to’rtmu’yeshligin) bir ma’rte basıp, payda bolg’an aynadan ren’ tan’laymız. 3) Tiykarg’ı ha’m arqa ren’lerdi o’zgertiriw Switch Foreground and Background Colors (pereklyuchit tsvet perednego plana i tsvet fona) [X] - tiykarg’ı ha’m arqa ren’ler ko’rsetkishleri (to’rtmu’yeshlikleri) u’stinde jaylasqan strelka ja’rdeminde tiykarg’ı ha’m arqa ren’lerdi o’zara ornın o’zgertiriw. 4) Avtomatik tiykarg’ı ha’m arqa ren’lerdi qara ha’m aqqa o’tkeriw - Default Foreground and

Page 56: L E K TS I YA T E K S T L E R I

56

Background Colors (ustanovit tsvet perednego plana i tsvet fona po umolchaniyu) [D] - tiykarg’ı ha’m arqa ren’ler ko’rsetkishleri (to’rtmu’yeshlikleri) astında jaylasqan kishkene belgiler ja’rdeminde tiykarg’ı ren’di - qara, arqa ren’di aqqa o’tkeriw. Ekran jag’dayı - Screen Mode (rejim ekrana) - [F] - ekran jag’dayın o’zgertiriw tu’ymesi. Birinshi standart jag’day - standartnıy (Standard Screen Mode) - tiykarg’ı jag’day, su’wret aynası, menyu qatarı, jumıs qurallar oblastı ha’m ja’rdemshi oblastlar ko’rinetug’ın jag’day. Ekinshi menyuls tolıq ekran jag’dayı - polnoekrannıy so strokoy menyu programmı (Full Screen Mode with Menu Bar) - tolıq ekran jag’dayı, at qatarı, ayna shegaraları, mag’lıwmatlar qatarı ha’m ko’rip shıg’ıw oblastları ko’rinbeydi. U’shinshi menyusız tolıq ekran jag’dayı - polnoekrannıy (Full Screen Mode) - tolıq ekran jag’dayı, aldıng’ıg’a qarag’anda menyu qatarı da ko’rinbeytug’ın jag’day. ImageReady programmag’a o’tiw - Jump to ImageReady (pereklyuchitsya v ImageReady) - [Ctrl+Shift+M] – ashıq su’wretti ImageReady programmag’a o’tkeredi ha’m onda redaktorlawdı dawam etiwge imkaniyat jaratadı.

Adobe Photoshop programmasının’ menyui. Menyu Image - Obraz, Select - Vıbor ha’m Edit – Redaktirovanie.

Su’wret ren’lerin, ko’lemin ha’m basqa qa’siyetlerin o’zgertiriw ushın arnawlı menyu bo’limi Image buyrıqların paydalanıw kerek. Bulardan en’ tiykarg’ılar menen tanısayıq:

• Rejim - Rejim (Mode) - buyrıg’ı su’wret rejimin o’zgertiriw. Tiykarg’ı rejimler: Grayscale – qol ren’ jag’dayına o’tkeriw, Indexed Color - ko’rsetilgen ren’ler sanı jag’dayına o’tkeriw (256 ge shekem), CMYK Color - to’rt tiykarg’ı ren’ler arqalı kodlaw (ko’k, sarı, qara ha’m qızg’ısh ren’ler), RGB Color – u’sh tiykarg’ı ren’ler arqalı kodlaw (qızıl, jasıl, ko’k)

• Redaktorlaw - Korektirovka (Adjust) - bul bo’limde jaylasqan buyrıqlardın’ ko’pshiligi su’wretti ren’ler u’stinen ha’r qıylı redaktorlaw a’mellerin orınlaw ushın ja’rdem beredi: Urovni - Levels - Nastroyka urovnya (nu, eto, kak bı, yarkost) Avtourovni - Auto Levels - To je samoe, no avtomaticheski Avtokon

• trast - Auto Contrast - Avtomaticheskaya nastroyka kontrasta TSvetovoy balans - Color Balance - TSvetovoy balans YArkost/Kotrast - Bright/Consrast - YArkost i kontrast Ottenok/Nasıshennost - Hue/Sturation - Pozvolyaet kak bı "smeshat" tsveta Zamenit tsvet - Replace Color - Mojno izmenit kakoy-to opredelennıy tsvet v risunke Variations – bul jerde ren’ balansın sazlawg’a boladı.

• Image Size – kartinkao’lshemin o’zgertiw. Oblast tan’law - bul fotomontajdın’ en’ tiykarg’ı ha’reketlarinen biri. Sonlıqtan bul ha’reketlerge

tiyisli bolg’an Select menyu bo’lim buyrıqları menen jaqınıraq tanısamız. Oblast tan’law jumıs qurallar menen biz joqarıdag’ı temalarda tanısqanbız. Usı jumıs qurallar menen su’wrettin’ qa’legen oblastın tan’lag’anımızda, ol punktir sızıqlar menen shegaralanıp ko’rinedi.

Eger usı tan’lang’an oblastqa ja’ne basqa qa’legen oblasttı qosıw ushın, Shift tu’ymesin basıp qosımsha oblasttı tan’laymız.

Eger usı tan’lang’an oblasttan bir bo’limin tan’lang’annan shıg’arıp alıw ushın, Alt tu’ymesin basıp usı oblasttı tan’laymız.

Endi Select menyuinin’ tiykarg’ı buyrıqları menen tanısamız. • Ha’mmesin tan’law - Vse (All) -{Ctrl+A}- tolıq su’wret oblastın tan’law. • Tan’lawdan shıg’arıw - Razotmenit (Deselect) -{Ctrl+D}- tan’lang’an oblasttı biykar etiw. • Tan’lawdı awdarıw - Inversiya (Inverse) - Tan’lang’an oblasttı tan’lawdan shıg’arıp,

tan’lanbag’an oblasttı tan’law. • Ren’ arqalı tan’law - Diapazon tsvetov (Color Range) - Ren’ tiykarında tan’law. Sıyqırlı

tayaqsha ja’rdemshi tu’ymege uqsas jag’dayında isleydi. • SHegaralar - Rastushevka (Feather) - tan’lang’an oblasttın’ shegaraları qalın’lıg’ın

anıqlaw.

Page 57: L E K TS I YA T E K S T L E R I

57

• O’zgertiriwler - Izmenit (Modify) - tan’lang’an oblasttı ha’r qıylı jag’daylar menen o’zgertiriw. Tiykarg’ı jag’daylar: SHegaralar - Ramka (Border) - Tan’lang’an oblast shegaraları boyınsha siz ko’rsetken ko’lemde tan’lang’an ramka oblastın jaratadı. SHegara silliklastırıw - Sglajixamnie (Smooth) - Tan’lang’an oblasttın’ mu’yeshli shegaraların jumsaq ha’m silliklashtiradi. U’lkeytiw - Rastyanut (Expand) - Tan’lang’an oblasttı siz ko’rksetken aralıqtı proportsional u’lkeytedi. Kishkenelestiriw - Svernut (Contract) - Tan’lang’an oblasttı siz ko’rsetken aralıqtı proportsional kishkenelestiredi.

• Janındag’ılardı qosıw - Smejnıe pikseli (Grow) – janında jaylasqan uqsas ren’lerdi ha’m tan’lang’an oblastqa qosıw.

• Uqsaslardı qosıw - Sxojie pikseli (Similar) - qa’legen jerde jaylasqan uqsas ren’ler oblastların tan’lang’an oblastqa qosıw.

• Tan’lang’an oblasttı o’zgertiriw - Preobrazoxamt vıdelenie (Transform Selection) - tan’lang’an oblasttı qa’legen jag’dayda sozıw ha’m o’zgertiriw.

Tan’lang’an oblasttın’ ko’rinisin o’zgertiriw ha’m ol u’stinen ha’r qıylı a’mellerdi orınlaw mu’mkin. Bunın’ ushın bizge Redaktirovat - Edit menyu buyrıqları ja’rdem beredi. Ma’selen tan’lang’an oblast tochkasın yadqa alıw ha’m qırqıp alıw (Kopirovat-Copy, Vırezat-Cut), yadtan shıg’arıw (Vstavit-Paste). Endi qolg’an buyrıqlar menen tanısayıq:

• Erkin o’zgertiriw - Svobodnoe preobrazoxamnie (Free Transform)- usı buyrıq na’tiyjesinde tan’lang’an oblast yamasa su’wret shegaralarında arnawlı tochkalar payda boladı. Olar ja’rdeminde tan’lang’an oblasttı sozıw, iyildiriw, aylandırıw ha’m basqa ha’reketlardi orınlaw mu’mkin.

O’zgertiriw - Preobrazoxamnie (Transform)- usı buyrıq ishinde bir neshe imkaniyatlar bar: Scale - Izmenenie razmerov po gorizontali i vertikali Rotate - Vrashenie Skew - Ottyagixamnie odnogo iz uglov Distort - Ottyagixamnie neskolkix uglov Perspective - Effekt perspektivı Numeric - Modifikatsiya pri pomoshi zadaniya chislennıx znacheniy Rotate 180 - Povorot na 180 gradusov Flip Horizontal - Razvorot po gorizontali Flip Vertical - Razvorot po vertikali Sorawlar:

1. Ko’riniske tekst qosıw jumıs qurallar menen islew haqqında ne bilesiz? 2. Ko’rinisler jaratıw jumıs qurallar haqqında ne bilesiz? 3. Vektorlı grafika degen ne? 4. Rastrli grafika degen ne? 5. Photoshop programması qanday menyu bo’limlerinen turadı?

Lektsiya- 10

MACROMEDIA FLASH PROGRAMMASINDA ANIMATSIYALIQ OBEKTLER JARATIW.

Reje:

5. Macromedia Flash programması haqqında tu’sinik

Page 58: L E K TS I YA T E K S T L E R I

58

6. Macromedia Flash programmasının’ jumıs maydanı 7. Programmada animatsiyalıq obktler jartıw

Tayanısh tu’sinikler: Animatsiya, kadrlar (frames), simvollar (symbols), qatlamlar (layers), ÿaq ı t s ız ıg’ ı(t imeline).

Ha’zirgi kunde Web-saytlardı ko’rgizbeli, qızıg’arlı etip jaratıÿda Macromedia Flash programmasının’ ornı bo’lek. Bul programma ja’rdeminde ha’r qıylı ha’reketleniÿshi obektlerdi, videokliplar, daÿıslı animatsiyalar, interaktiv obektlerden ibarat bolg’an multfilmlar jaratıÿımız mu’mkin. Keyingi ÿaqıtlarda Flash MX programması en’ tanıqlı interaktiv programmalardan birine aylandı. Onın’ ja’rdeminde tek g’ana animatsiya jaratıÿ menen sheklenip qalmay qosımsha quramalı dinamikalıq interaktiv programmalardın’ mag’lıÿmatlar bazasın ha’m duziÿ mu’mkin. Ha’zirgi kunde Flashdan paydalanıÿshılar sanı kunnen kunge ko’beyip atır. Son’g’ı mag’lıÿmatlar boyınsha Flashdan paydalanıÿshılar sanı 580 millionnan asıp ketti. Flash xaqıyqatındada ha’m multimedialı programmalar arasında en’ effektiv programma bolıp, onı multimedialı ha’m ha’r qıylı oyınlı programmalar qatarında ushıratıÿ mu’mkin. Sol sebepli Flash en’ belgili interaktiv programmalardın’ biri bolıp tabıladı.

En’ con’g’ı shıqqan Flash MX modeli Macromedia kompaniyasının’ en’ jaqsı maxsulatı esaplanadı.

Flash texnologiyası Evropa ha’m Amerikanın’ ha’r qıylı elektron proektlerinde qatnasqan. Mısalı, Ullı Britaniyanın’ Kerb kompaniyası multfilminin’ 1-bo’limin Web-dizaynın Flash texnologiyası ja’rdeminde isledi.

Flash programmasında islengen filmde grafikalıq obektler menen bir qatarda tekstli obektler menen ha’m islesiÿge boladı. Macromedіa Flash programması filmg’a tekstli element qoyıp, onın’ qasiyetlerin beriÿge ha’m o’zgertiÿge mu’mkinshil ik beredi.

Flash programmasında xujjetke basqa programma obektlerin jaylastırıÿg’a da boladı. Sol sebepli kesteler yaki basqa sızılmalardı qaytadan sızıp otırıÿdın’ qajeti joq. Tekst o’lshemin, stilin, formasın o’zgertiÿ ha’m mu’mkin.

Flash programmasında jaratılg’an obektlerdi bayıtatug’ın bul daÿıs. Flash da daÿıslı obektler jaratıÿ ushın daÿıslı informatsiyanın qasiyetlerin uyrenip alıÿ kerek, sonda Flash de jaratılg’an filmler professional bolıp shıg’adı.

Flash programmas ın ın’ tiykarg’ ı jum ıs maydanlar ı ha’m tusinikleri

Macromedia Flash programması ja’rdeminde animatsiyalı prezentatsiyalar jaratıÿımız

mu’mkin. Prezentatsiyag’a tayar animatsiya obektlerin qoyıÿ mu’mkinshiliklerin beretug’ın Microsoft tın’ Power Point programmasına qarag’anda Macromedia Flash programmasında jaratılg’an obektler tolıg’ı menen siz ta’repten jaratıladı ha’m animatsiyag’a aylantırıladı. Sonın’ menen birge programmada aktiv elementler menen islesiÿ imkaniyatları da bar. Macromedia Flash programmasında kishi animatsiya faylları (kliplar), Internet betleri, elektron qollanbalar tayarlaÿ mu’mkin. Bunday fayllar o’zinin’ originallıg’ı ha’m islesiÿ an’satlıg’ı, jaratıÿ tezligi ha’m ko’lemi ko’p bolmaÿı menen ajıralıp tu’radı. Da’slep bazı bir bazalıq tusiniklerdi anıqlap alayıq. Bul tusiniklerge kadrlar (frames), simvollar (symbols), qatlamlar (layers) ha’m ÿaqıt sızıg’ı, shkalası (timeline) kiredi.

Timeline qatar ı

Timeline (waqıt sızıg’ı, ÿaqıt shkalası) Flash programmasında animatsiyalar menen islesiÿdegi en’

tiykarg’ı a’sbap bolıp tabıladı. Onda qatlamlar xaqqındag’ı mag’lıÿmatlar, qanday kadrlar gilt kadrlar ekenligi h.t.b. xaqqında mag’lıÿmatlar sa’ÿlelenedi. Waqıt shkalası ja’rdeminde qaysı kadrlar ha’reket yamasa metkalardan (belkilerden) tu’ratug’ınlıg’ın tusiniÿge boladı. Ol gilt kadrlardı ha’m animatsiyalardın’ putin bir bo’legii jaylastırıÿg’a mu’mkinshilik beredi. Jaqsı sho’lkemlestirilgen ha’m qolıylı interfeys arqalı bul a’sbaptı tez arada u’yrenip alıÿg’a boladı.

Waqıt shkalasının’ geybir elementlerin ta’riypleyik • Marker – aynada suÿretleniÿshi ag’ımdag’ı kadrlardı ko’rsetedi, qanday da bir kadrdı

shaqırg’anımızda marker og’an avtomat tu’rde jaylastırıladı.

Page 59: L E K TS I YA T E K S T L E R I

59

• Qatlamlar – shep ta’repte qatlamlar dizimi bar bolıp, onın’ astında qatlamlardı qosıÿg’a ha’m alıp taslaÿg’a mu’mkinshilikler beriÿshi knopkalar (tu’ymeler) boladı.

• Kadrlar shkalası - a’piÿayı ha’m gilt kadrlardı qosıÿg’a ha’m o’shirip taslaÿg’a mu’mkinshilik beretug’ın maydan. Eger qandayda bir kadrda kontekstli menyudi shaqırsan’ız, onda a’melge asırıÿ mu’mkin bolg’an ha’reketler dizimin ko’riÿgen boladı. SHkalada gilt kadrlar bolıp esaplanatug’ın kadrlar xaqqında mag’lıÿmatlar sa’ÿlelenedi, bunday kadrlar qara do’ngelekler menen belgilenedi. Onda ha’reketler (do’ngeleklerdin’ u’stinde «a» ha’ribi ) yamasa metkalardan (qızıl bayraqshadan son’ metkalar atı shıg’adı). Ren’ine qarap kadrlar tu’rin de anıqlaÿg’a boladı. Sur ren’ – gilt kadrı (keyframe). Ko’kshil yamasa jasıllaÿ ren’ - bul kadrdın’ Flash te generirlengenligin bildiredi. Aq yaki «bos» ken’islik – bul kadrda hesh na’rse joq ekenligin bildiredi.

• Sayalardı basqarıÿ tu’ymeleri – bul shkala qon’sılas kadrlardı anıq ko’riÿ ushın arnalg’an ha’m bunda aldıng’ı ha’m keyingi kadrlar aralıg’ı ayırmashılıq anıq ko’rinip tu’radı.

Programma a’dettegidey Windows bas menyuinin’ PUSK tu’ymeshesin PROGRAMMI bo’liminde basıÿ menen iske tu’siriledi, onda Macromedia programmaları toparınan Macromedia Flash buyrıg’ın tan’laymız. Na’tiyjede ekranda to’mendegi ayna payda boladı.

Programmanın’ tag’ı bir tiykarg’ı jumıs maydanlarınan biri bul jumıs quralları bo’limi. Onın’

ja’rdeminde biz har qıylı grafikalıq formalardı jaratıÿımız ha’m olar ustinde ha’r tu’rli a’meller orınlaÿımızg’a boladı. Bul bo’limde jumıs qurallarının’ astında sızıqlar ren’in ha’m arqa ren’in o’zgertiÿ mu’mkin. Ha’r bir jumıs quralı o’zinin’ mu’mkinshiliklerine, ko’rinisine, rejimine ha’m qasiyetlerine iye. Mısalı, ren’di forma ishine beriÿde tolıq shegaralang’an forma, tolıq sheklenbegen forma ha’m pu’tkilley sheklenbegen forma rejiminde isleÿ mu’mkin.

Page 60: L E K TS I YA T E K S T L E R I

60

Jum ıs qurallar ı (ja’rdemshi tu’ymesheler) menyui - V – forma yaki maydandı tan’laÿ ha’m onı kadr boylap ha’reketlendiriÿ. - A – Kadrda tan’lang’an forma shegaraların o’zgertiÿ. -N-Kadrda sızıqsha tu’rdegi forma sızıÿ. - L -Kadrda lasso ja’rdeminde qalegen maydanımızdı tan’laÿ(a’jayıp tayaqsha ha’m ko’pmuyesh

lasso rejimleride bar) - P – Kadrg’a ko’pmuyesh tu’rdegi forma sızıÿ. -T– Kadrg’a tekst elementlerin qosıÿ. -O– Kadrg’a shen’ber tu’rdegi forma sızıÿ. - R – Kadrg’a to’rtmuyesh tu’rdegi forma sızıÿ. - Y – Kadrg’a qalem ja’rdeminde forma sızıÿ (sızılg’an forma shegaraların o’zgertiÿ ha’m

mu’mkin). - B – Kadrg’a shetka ja’rdeminde forma sızıÿ (sızıq tu’ri, shetka qalınlıg’ı ha’m formasın tan’lap

alıÿımız mu’mkin) -Q – Kadrda tan’lang’an formanı sozıÿ (formanı aylandırıÿ, sozıÿ, kishireytiÿ, shegaraların o’zgertiÿ

rejimi ha’m bar) - F–Kadrda tanlang’an forma ren’inin’ o’zgeriÿ jo’nelisin beriÿ. - S–Kadrda tan’lang’an forma shegaralarının’ ren’in o’zgertiÿ

Page 61: L E K TS I YA T E K S T L E R I

61

- K–Kadrda tanlang’an forma arqa ren’in o’zgertiÿ (tolıq shegaralang’an forma, tolıq shegaralanbag’an forma ha’m putkilley sheklenbegen forma arqa ren’in o’zgertiÿ rejimleri de bar)

-I–Kadrda isletilgen ren’di qaytadan tan’laÿ. - E – Kadrda qalegen maydandı o’shirgish ja’rdeminde o’shiriÿ (shegara, arqa ren’ ha’m qalegen

tan’lag’an ren’imiz, o’shirgish qalınlıg’ın, a’jayıp o’shirgish tu’rin o’zgertiÿ ha’m mu’mkin). - H –Kadrdı jıljıtıÿ. -Z–Kadr masshtabın o’zgertiÿ (ulkeytiÿ yaki kishireytiÿ mu’mkin)

Sızıqlar ren’in ha’m arqa ren’in o’zgertiÿ maydanshaların tan’lag’anımızda to’mendegi dialog aynaları payda boladı.

Onın’ ja’rdeminde yaki ren’ kodı arqalı, yamasa 256 ren’nen tan’lap alıp, yaki spektrdan ren’

tan’lap alıÿımız, ren’ beriÿ jolın tan’laÿımız mu’mkin. Ren’di basqa jol menen o’zgertiÿ mu’mkin. Onın’ ushın Okno menyusindegi TSvetovoy nabor (Ctrl+F9) ha’m TSvetovoy mikser (Shift+F9) buyrıqların iske tusiremiz.

Qatlam (Layer - Sloy) – gey bir grafika redaktorlarınday Flash programmasında ha’m

qatlamlardan paydalanamız. Qaysı qatlam joqarıda jaylasqan bolsa sol qatlam obektleri basqa obektlerdin’ ustinde ko’rinip tu’radı. Qatlamdı ko’rinbeytug’ın yaki o’zgerip tu’ratug’ın qılıÿ ha’m mu’mkin. Qatlamlar a’piÿayı ha’reket traektoriya qatlamı yaki maska (payda bolıÿ) qatlam ko’rinisinde bolıÿı mu’mkin. A’dette ha’r qıylı ha’reketler ushın ha’r qıylı qatlamlar jaratıÿ kerek boladı.

Kadr (Frame - Kadr) - Flash ha’m geypara animatsiya redaktorlarında ha’m video montaj

programmalar tiykarında kadrlar izbe izligi qollanıladı. Kadrdı siz o’zin’iz sızıp jaratıÿın’ız yaki programma onı avtomatik tu’rde jaratıÿı mu’mkin. Kadrlar bir neshe tu’rde boladı. Basqarıÿ kadrı (keyframe - klyuchevoy kadr) tusinigi ha’reket traektoriyasının’ nuqtaların belgileydi. Avtomatik tu’rde jaratılg’an kadrlar bolsa eki tu’rde boladı: formalar geometriyasının’ o’zgeriÿi (shape tweening) yaki basqarıÿ kadrlar o’zgeriÿi (motion tweening) tiykarında jaratılg’an kadrlar.

Qatlamlar (Sloi)

Kompyuter grafikasında bud a’sbap jiyı ushırasadı. Mısalı, eki ta’repinde ko’rinip tu’ratug’ın tınıq bette suÿret salayıq ha’m olardı bir-birinin’ ustine qoyayıq. Bunda joqarg’ı qatlamdag’ı bar na’rseler to’mendegi qatlamdag’ılardın’ ustine tusedi. Qatlamlardı ko’rinbes etip qoyıÿg’a’ boladı.

Flash programmasında qatlamlardın’ eki ayrıqsha tu’ri bar: ha’reket traektoriyasınan tu’rıÿshı qatlamlar ha’m maska-qatlamlar

Kadrlar

Animatsiya kadrlar izbe izliginen tu’radı. Kompyuter animatsiyasında gilt kadrlar (keyframe) tusinigi bar bolıp, bul kadrlardı Flash programması animatsiya duziÿ protsessinde o’zgerte almaydı. Bul gilt kadrlardı biz beremiz, al olardın’ arasına aralıq kadrlardı Flash o’zi ornatadı. Aralıq kadrlardın’ eki tu’ri

Page 62: L E K TS I YA T E K S T L E R I

62

bar bolıp, birinshisi geometriyalıq o’zgeriÿi tiykarında duzilgen (shape tweening) kadrlar yamasa simvollar o’zgeriÿi tiykarında duzilgen (motion tweening) kadrlar. Ekinshisi – bos kadrlar, yag’nıy hesh na’rsege iye bolmag’an kadrlar.

Kadrlar u’stinde a’meller Bos gilt kadrlardı ornatıÿ –Insert–Blankkeyframe, F7 Aldın’gı kadrlardın’ mazmunın qaytalaÿshı gilt kadr -Insert –keyframe, F6 Gilt kadrdı tazalaÿ -Insert–Clear keyframe, Shift+F6 Kadr ornatıÿ -Insert–Frame, F5 Kadrdı alıp taslaÿ -Insert-Remove Frames, Shift+F5

Kadrlard ı izbe-iz du’ziÿ animatsiyas ı

Bul animatsiya tolıg’ı menen gilt kadrlarınan tu’radı, yag’nıy kadrdın’ mazmunın ha’m onın’ «daÿamlılıg’ın» biz o’zimiz belgileymiz. Bul tu’rdegi animatsiyanın’ jetiskenliklerine to’mendegiler kiredi:

• Kadrlardı izbe iz duziÿ animatsiya paydalanıÿshıg’a animatsiya ustinen ulken kontrol ornatıÿg’a mu’mkinshilik beredi. Eger siz ta’jiriybeli animator bolsan’ız, onda bul usıldan jaqsı paydalanıÿın’ızg’a boladı.

• Bul putkilley g’arezsiz qorinislerdin’ o’zgeriÿ rejimin sho’lkemlestiriÿshinin’ birden bir usılı – slayd shou

Bul usıldın’ kemshiliklerine to’mendegiler jatadı: • Kadrdı izbe iz duziÿ animatsiyanı modifikatsiya qılıÿ qıyın bolıp a’sirese eger ol ko’rinislerdin’

diskret jınag’ı emes, al baylanıslı animatsiya bolsa, barlıq kadrlardı modifikatsiyalaÿg’a tuÿrı keledi

• Kadrlardı izbe iz duziÿ animatsiyası jude ulken qolemdi iyeleydi ha’m ha’r bir kadr xaqqındag’ı mag’lıÿmatlardı saqlap qoyıÿg’a tuÿrı keledi.

Aral ıq kadrlard ı du’ziÿ animatsiyas ı

Bul usılda Flash animatsiyası berilgen gilt kadrlar arasında aralıq kadrdı avtomatik tu’rde ornatadı. Bul na’rse siz obektti salasız, son’ basqa bir kadrlarda o’zgerisler kiritesiz ha’m Flash programmasınan usı 2 gilt kadrlar arasında jatıÿshı kadrlardı salıp shıgıÿdı soraysız degendi an’latadı. Animatsiya tezligin sizin’ Flash filmin’izdin’ (Movie) tezligine ha’m ha’reketke keltiriÿshi kadrlardın’ sanına g’arezli boladı. Modify-Movie – bul jerde Frame Rate parametri sekundına kadrlardın’ sanın beredi. Sapalı animatsiya ushın aralıq tezligi sekundına 25-30 kadrlardan kem bolmaÿı kerek.

Sorawlar:

8. Animatsiya jaratıwshı qanday programmalardı bilesiz? 9. Flash programması ja’rdeminde neler islew mu’mkin? 10. Qatlam degen ne? 11. Kadrlı shlalanın’ xızmeti ne? 12. Flash prgramması ja’rdeminde animatsiyanı qalay jaratamız?

Page 63: L E K TS I YA T E K S T L E R I

63

A’DEBIYATLAR HA’M ELEKTRON OQIWLIQLAR

1. Illyustrirovannıy samouchitel po Dreamweaver MX 2. Illyustrirovannıy samouchitel po sozdaniyu saytov 3. Aleksey Goncharov Samouchitel HTML 4. A.Petyushkin NTML Ekspresskurs 5. E. Anderson Macromedia Flash MX 2004 6. Tverezovskiy D I Macromedia Flash MX 2004 Samouchitel.pdf 7. Populyarnıe WEB prilojeniya na FLASH MX.pdf 8. Illyustrirovannıy samouchitel po animatsii dlya Internet 9. 100% samouchitel Macromedia Flash MX.pdf

Internet-resurslarının’ dizimi http://www.macromedia.com/ Dreamweaver ha’m Flash programmaların

islep shıqqan Macromedia firmasının’ "Uy" saytı

http://msdn.microsoft.com/ie/ Internet Explorerdın’ "Web Uyi". Microsoft ta’repinen islep shıg’ılg’an bul brouzer tuÿralı tolıq mag’lıÿmat berilgen.

http://www.w3c.org/ WWW komitetinin’ (WWWC) saytı. Bul jerde barlıq internet-standartlar berilgen

http://webreview.com/ HTML, CSS, JavaScript programmaları boyınsha a’debiyatlar

http://docs.rinet.ru/ Anglichan tilinde HTML, JavaScript h.t.b. ko’p programmalar boyınsha xujjetler

http://www.cltforum.ru/ Kompyuterlik ha’m internet-texnologiyalar boyınsha elektron xujjetler "qalası".Rus tilinde. WWWC komiteti saytınan alıng’an materiallardın’ (standartlardın’) aÿdarması ha’m bar

http://webims.virtualave.net/ Web-dizayn ha’m Web-programmalastırıÿ tiykarları. Ko’p mısallar keltirilgen.

http://www.webschool.narod.ru Web dizaynın u’yretiw