Главная страница
Контакты

    Басты бет


Республикасының Мәдениет және ақпарат министрлігі «Қазконтент» Акционерлік қоғамы Dreamweaver cs6 Оқу-әдістемелік құралы Астана, 2013 Dreamweaver cs6 2

жүктеу 1.02 Mb.



жүктеу 1.02 Mb.
бет6/6
Дата10.03.2017
өлшемі1.02 Mb.

Республикасының Мәдениет және ақпарат министрлігі «Қазконтент» Акционерлік қоғамы Dreamweaver cs6 Оқу-әдістемелік құралы Астана, 2013 Dreamweaver cs6 2


1   2   3   4   5   6
тегі пайдаланылады.

b. Кестелерді Table панелінің көмегімен редакциялауға болады.

c. Кестеде графика болуы мүмкін.

d. Кестені кестенің қасиеттер инспекторының көмегімен редакциялауға

болады.

Dreamweaver CS6



118

7. Dreamweaver бағдарламасында қалай кестені қою мүмкін

болмайды?

a. Кестені бөлгіштері бар файлдан ақпаратты импорттау арқылы

жасауға болады.

b. Кестені басқа HTML файлынан немесе үйлесімді бағдарламадан

көшіріп алып қоюға болады.

c. Кестені Common қосымша бетіндегі Insert панеліндегі Table пернесін

басу арқылы жасауға болады.

d. Кестені csv файлын Files панелінен құжаттың терезесіне тасымалдау

арқылы жасауға болады.

8. ______________ жолдар мен бағандар кестеде қиылысатын

контейнер болып табылады.

a. тег


b. кестенің ID

c. сілтеме

d. ұяшық

9.

тегтерін қалай тақырыптарға айналдыруға болады?

a. Қасиеттер инспекторының Format ашылатын тізімін пайдалану

арқылы.


b. Қасиеттер инспекторының Class ашылатын тізімін пайдалану

арқылы.


c. Қасиеттер инспекторының Page Properties… пернесін басу арқылы.

d. Қасиеттер инспекторында Header жалаушасын белгілей отырып,

ұяшықты бөліп алу арқылы.

10. Қай тег кесте жолының енін белгілейді?

a.

тегі

c.

немесе тегі

b.

тегі

d. тегі

Нысандармен жұмыс істеу

119


10. НЫСАНДАРМЕН ЖҰМЫС ІСТЕУ

Адамдардың көбі нысанды толтырған кезде ғаламтордағы

интерактивтілікке алғаш рет тап болады. Нысандар қазіргі заманғы

желінің қажетті құралы болып табылады, ол сізге маңызды ақпаратты

және кері байланысты алуға мүмкіндік береді.

Түрлі элементтері бар өзіңіздің нысаныңызды жасамас бұрын

нысандардың қалай жұмыс істейтінін көрейік.

ВЕБ-НЫСАНДАР

Веб-нысан – ақпаратты енгізуге арналған веб-беттің элементі.

Веб-нысанның өрістері мәтінді теру арқылы немесе тізімнен

мәндерді таңдау арқылы толтырылуы мүмкін. Əдетте деректер пер-

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

әрі әрекетіне әсер етеді.

Интернетте жұмыс істей отырып сіз түрлі нысандарды жиі толты-

расыз, мысалға, іздестіру машинасына сұрату жібересіз, қандай да

бір сайтта тіркелесіз, веб-поштадан хат жібересіз.

Қағаз нысандарға қарағанда, онлайндық нысандардың бірқатар

сөзсіз артықшылығы бар, себебі пайдаланушылар кейін электронды

кестелерге немесе деректер базаларына автоматты түрде тасымал-

дануы мүмкін деректерді енгізу мүмкіндігіне ие болады. Бұл еңбек

шығындарын қысқартады және қағаз нысандарға тән қателіктердің

туындау тәуекелін азайтады.

Веб-нысандар бір немесе бірнеше HTML-элементтен тұрады,

олардың әрқайсысының өзінің тағайындалған мақсаты бар.

• Мәтіндік өріс саны белгілі бір таңбалар санымен шектел-

ген мәтін мен сандарды енгізуге мүмкіндік береді. Парольді

енгізуге арналған мәтіндік өрістер енгізілетін символдарды жа-

сырады немесе оларды мүлдем көрсетпейді.

• Мәтіндік аймақ мәтіндік өрістерге ұқсас, бірақ ұзынырақ

мәтінді, мысалы бірнеше сөйлемді немесе абзацты енгізуге

арналған.

Dreamweaver CS6

120

• Ауыстырып-қосқыш перне топтың ішіндегі бір нұсқаны



таңдауға мүмкіндік беретін графикалық элемент. Жаңа элемент

таңдалған кезде алдыңғысының бөлініп шығарылуы алынады.

Егер бір элемент бөлініп алынған болса, топтан таңдауды алып

тастау мүмкін болмайды, тек нұсқаларды ауыстыруға ғана бо-

лады.

• Жалауша пайдаланушыларға «иә/жоқ» принципі бойынша



таңдау жасауға мүмкіндік беретін графикалық элемент.
Қағида немесе принцип (лат. principim – принцип; негіз, алғы бастама) - белгілі білім жүйесінің түп-негізі, алғы бастамасы, абстрактылы түрдегі ең қысқа жалпылама мазмұны. Ғылыми танымда идея, теория, әдіс сияқты таным түрлерімен өзара байланыста тұжырымдалады.
Жа-

лаушалар бірге топтастырылуы мүмкін; ауыстырып-қосқыш

пернелерге қарағанда, олар топтың ішіндегі бірнеше нұсқаны

таңдауға рұқсат береді; сонымен қатар пайдаланушы қалаған

кезінде барлық таңдалған жалаушалардан бөлініп шығаруды

алып тастай алады.

• Ашылатын тізім / мәзір ашылатын тізімнің пішіміндегі

элементтерді көрсетеді. Тізімдер (сондай-ақ олар таңдау

тізімдері деп те аталады) бір элементті таңдауды талап етуі

мүмкін немесе бірден бірнешеуін таңдауға рұқсат беруі мүмкін.

• Жасырын өріс – алдын ала белгіленген деректері бар өріс,

ол пайдаланушыға көрінбейтін нысанды өңдеу механизміне

ақпаратты береді.

Механизм (гр. mehane - құрал, мәшине) - бір немесе бірнеше қатты денелерді басқа қатты денелер арқылы қажетті қозғалысқа келтіретін денелер жүйесі. Механизм құрылымдық белгілері бойынша топсалы (иінтіректі), бағдартқышты, тісті, сыналы, бұрамалы, ыңғайландырғыш, арнайы, шыбық қысқыш, иілгіш буынды, гидравликалық, пневматикалық және электрлі құрылғылары бар және т.б.
Жасырын өрістер динамикалық беттері

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

алдыңғы бетінен берілген ақпарат немесе алдын ала бапталған

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

мүмкін, мысалға – іс жүзіндегі күн немесе нысанның жіберілген

уақыты.


• Перне нысанды жібереді немесе басқа да бір реттік іс-

әрекетті орындайды, мысалға, нысанды тазартады немесе ба-

сып шығарады.

Қағаз нысандарды толтырғаннан кейін олар пошта арқылы

жіберіледі немесе мамандарға өңдеу үшін беріледі.

Веб-нысандар электронды пошта арқылы жіберіледі және элек-

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

нысан жіберілген кезде оның мәні іске қосылады. Көбінесе бұл мән

басқа сайттың немесе нысанды өңдеуді орындайтын серверлік

сценарийдің веб-мекенжайының мәнін белгілейді.

Нысандармен жұмыс істеу

121


БЕТКЕ НЫСАН ҚОСУ

Бұл жаттығудың барысында сіз кері байланыс нысаны бар жаңа

бетті жасайсыз.

1. Жаңа HTML бетін жасаңыз.

2. Title аймағындағы Untitled Document тақырыбының мәтіндік

толтырғышын бөліп алып, оның орнына Feedback page мәтінін

жазыңыз.

3. Ctrl S пернелерін қатар басу арқылы бетті сақтаңыз. Файлды

feedback.html деп атаңыз.

Files панелінде feedback.html файлы пайда болады.

10.1 -сурет. feedback.html файлы бар Files панелі

4. Егер Split көрінісі әлі таңдалмаған болса, құжат терезісінің сол

жақ жоғарғы бұрышындағы Split пернесін басыңыз.

тегінің айналасында нысанның барлық элементтері

болуға тиіс, сондықтан оны бетке бірінші етіп қосқан жөн. Осы тегтің

Dreamweaver CS6

122


шектерінен тыс орналастырылған кез келген өріс нысан жіберілген

және өңделген кезде еленбейтін болады.

5. Insert панелін ашып, тізімнен Forms санатын таңдаңыз.

10.2 -сурет.

Осы санаттағы Form таңбасын басыңыз.

Dreamweaver тегін қызыл контурмен белгіленген

қою нүктесіне орналастырады. Нысандарда әр уақытта бірегей

сәйкестендіруші болуы тиіс. Егер сіз оны жасамасаңыз, оны бағдарлама

қосады.

6. Қажет болған кезде тегінің селекторын таңдаңыз.



Мәтіндік курсорды қасиеттер инспекторының Form ID өрісіне қойыңыз.

Пайдаланушылық сәйкестендіруді жасау үшін feedback сөзін енгізіп,

enter пернесін басыңыз.

10.3 -сурет. Қасиеттер инспекторы

Сіз нысанның элементін жасадыңыз, ал енді сіз нысанның бірнеше

өрісін қоясыз.

7. Мәтіндік курсорды қызыл контурдың ішіне қойыңыз. Тегтің се-

лекторы деп көрсетуге тиіс.

Нысандармен жұмыс істеу

123


8. Insert панелінің Forms санатында Text Field

нұсқасын таңдаңыз.

Input Tag accessibility attributes диалогтық терезесі ашылады.

Бұл терезе сізге элементіне арналған арнайы атрибуттарды

және таңбалауды жасауға мүмкіндік береді. Мәтіндік өріс қойылған

уақытта Dreamweaver бірнеше параметрді айқындау үрдісін бірден

жеңілдетеді.

Мысалға, ID ең маңызды атрибут болып табылады, себебі ол

өріске бірегей ат қояды, бұл кейін нысанның деректерін өңдеу

кезінде көмектеседі. Егер сіз әр өріске бірегей сәйкестендірушіні

белгілемесеңіз, Dreamweaver сіздің орныңызға textfi eld, textfi eld2,

textfi eld3 және т.б. сияқты жалпы сәйкестендірушілерді жасайды.

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

өзіңіз сипаттайтын атауларды қойғаныңыз жөн.

1. ID өрісіне name енгізіңіз. Tab пернесін басыңыз.

2. Label өрісіне Name: енгізіңіз де Tab пернесін басыңыз.

3. OK пернесін басыңыз.

Енді нысан объектілерінің біріншісі орнында тұр. Басқа да стан-

дартты мәтіндік өрістерді қою ұқсас сызба бойынша жүзеге асыры-

лады. Келесі жаттығуда сіз мәтіндік өрістің арнайы нұсқасын – Ajax

функциясының көмегімен орындалған тапсырыстық өрісті қосасыз.

Сондай-ақ Dreamweaver қосымшасында нысандарға арналған

бірқатар Spry объектілері де бар. Spry нысаны объектісінің әр

шағын қосымшасында кірістірме верификациясы бар, пайдалану-

да қарапайым келетін нысандардың өрістерін жасауға арналған

JavaScript күрделі коды бар нысанның элементтері үйлеседі.

1. Name өрісінен кейін мәтіндік курсорды қойыңыз да жаңа жолға

өту үшін Shift enter пернелерін қатар басыңыз.

2. Insert панелінің Forms нысанындағы Spry validation Text Field

таңбасын басыңыз. Input Tag accessibility

attributes диалогтық терезесі ашылады.

3. ID өрісінде email сөзін енгізіңіз. Label өрісінде email: сөзін

енгізіңіз.

Style ауыстырып-қосқышын attach label tag using ‘for’ attribute

күйіне қойыңыз. Position ауыстырып-қосқышын Before form item

күйіне қойыңыз. OK пернесін басыңыз.

Dreamweaver CS6

124


10.4 -сурет. Input Tag accessibility диалогтық терезесі

4. Файлды сақтаңыз. Егер Dreamweaver сізге JavaScript сыртқы

файлдарын пайдалану туралы ескертетін болса, OK пернесін басыңыз.

10.5 -сурет. JavaScript сыртқы файлдарын

пайдалану туралы ескерту

Нысандармен жұмыс істеу

125

Енді нысанның элементі бетке орналастырылғаннан кейін сіз Spry



баптай аласыз.

5. Егер Spry TextField мәтіндік өрісінің көгілдір түсті қосымша беті

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

қойыңыз да оның пайда болғанын күтіңіз. Элементті таңдау үшін

қосымша бетті басыңыз. Қажет болған кезде қасиеттер инспекторын

ашыңыз. Онда Spry мәтіндік өрісінің атрибуттары мен баптаулары

көрсетіледі. Preview States мәзірінде Initial нұсқасының белгіленіп

тұрғанына назар аударыңыз.

6. Қасиеттер инспекторындағы Type ашылатын тізімінен email

address нұсқасын таңдаңыз.

10.6 -сурет. Қасиеттер инспекторы.

Preview States ашылатын тізімінде енді Invalid Format нұсқасының

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

назар аударыңыз.

Қасиеттер инспекторындағы қолжетімді триггерлерді зерттеңіз.

onBlur параметрі тексеру сәті болып табылады, ол пайдалану-

шы нысанның бір өрісінен екіншісіне өткен уақытта іске қосылады.

onChange триггері өріске енгізілген деректер өзгертілген уақытта іске

қосылады. onSubmit тексеру сәті браузер және веб-қосымша нысан-

ды өңдеген кезде іске қосылады.

Dreamweaver CS6

126


7. Қасиеттер инспекторындағы validate ауыстырып-қосқышын

onBlur күйіне қойып, required жалауашысының қойылғанына көз

жеткізіңіз. Алдын ала белгіленген баптаулар бойынша барлық ве-

рификациялар нысандар жіберілген кезде жүреді, алайда email

өрісінің жағдайындағындай сіз ертерек верификациялауды жүргізуге

арналған триггерлерді қоса аласыз. Интерактивтіліктің осындай түрі

жылдамырақ кері байланыс пен нәтижелі жұмысты қамтамасыз етеді.

Пайдаланушылар қандай да бір өрістің толтырылмай қалдырылып

кеткені немесе қате деректердің енгізілгені туралы хабарламаны алуы

үшін бүкіл нысанды толтырып болғанша күту қажет емес. Dreamweaver

қасиеттер инспекторының Spry интерфейсінің көмегімен қателік тура-

лы хабарларды түрлендіруді жеңілдетеді.

8. Preview States ашылатын тізімінде required нұсқасын таңдаңыз.

email өрісінің оң жағында мәннің міндетті болып табылатыны туралы

ескерту пайда болады. Бұл ескертуді түсіндіре кетейік.

10.7 -сурет.

9. a value is required мәтінін бөліп алыңыз да оны an email address

is required мәніне ауыстырыңыз.

Нысандармен жұмыс істеу

127


10.8 -сурет.

Егер өріс бос болса осы хабар пайда болады.

10. Preview ашылатын тізімінен Invalid Format нұсқасын таңдаңыз.

email өрісінің оң жағында Spry нысанының объектісінде енгізудің

рұқсат берілмейтін пішімі туралы ескерту пайда болады.

11. Invalid Format мәтінін бөліп алыңыз да оны Please enter a valid

email address сөз тіркесіне ауыстырыңыз.

10.9 -сурет.

12. Файлды сақтаңыз.

Енді мәтіндік аймақты қосайық.

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

беру қажет болуы мүмкін. Мәтіндік аймақтар осы мақсатқа қол жеткізу

құралы болып табылады. Олар көп жолды енгізуге және сөздерді

тасымалдауға мүмкіндік береді.

Dreamweaver CS6

128


13. email өрісінен кейін мәтіндік курсорды белгілеңіз де жаңа жолға

өту үшін Shift enter пернелерін қатар басыңыз.

14. Insert панеліндегі Forms санатындағы Spry validation Textarea

таңбасын басыңыз.

Input Tag accessibility attributes диалогтық терезесі ашылады.

15. ID өрісінде comment сөзін енгізіңіз. Label өрісінде Comment:

сөзін енгізіңіз. Style ауыстырып-қосқышын attach label tag using ‘for’

attribute күйіне қойыңыз.

Қажет болған кезде Position ауыстырып-қосқышын Before form

item күйіне қойыңыз да OK пернесін басыңыз.

10.10 -сурет. Мәтіндік аймақ.

Мәтіндік аймақ жазбасы бар бір жолда пайда болады, бұл тартым-

ды көрінбейді. Мәтіндік аймақты жеке жолға тасымалдайық.

16. Comment: мәтіндік аймағының жазбасына курсорды қойыңыз.




сабақ

Тест жауаптары




1

2

3

4

5

6

7

8

9

10

1-сабақ

C

C

A

D

C

D

B

C

A

C

2-сабақ

A

C

B

C

B

C

C

D

D

C

3-сабақ

D

C

D

D

A

B

C

D

B

D

4-сабақ

D

A

D

D

A

C

D

D

D

C

5-сабақ

C

D

B

D

A

A

C

D

A

B

6-сабақ

C

D

C

A

C

D

A

B

A

B

7-сабақ

D

A

C

A

A

C

A

B

D

A

8-сабақ

C

D

A

A

B

D

C

D

B

B

9-сабақ

D

B

C

C

A

B

D

D

D

A

10-сабақ

D

C

A

B

A

C

D

C

A

B

11-сабақ

D

B

A

B

D

C

C

C

B

D

12-сабақ

B

B

D

D

B

B

A

C

B

A
1   2   3   4   5   6

  • File Transfer Protocol

  • жүктеу 1.02 Mb.