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

    Басты бет


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

жүктеу 1.02 Mb.



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

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


1   2   3   4   5   6
беттен екіншісіне өтуге мүмкіндік береді?
Беттен (фр. Betting) - Франциядағы коммуна. Лотарингия аймағына қарасты Мозель департаментінде орналасқан. Форбак округінің құрамына енеді. Алып жатқан жер аумағы 4,45 км² шамасында.

a. тегі

b. Аталған якорь

c. Сілтеме

d. Мета-тег

2. ___________ пайдаланушыны дәл сол сайттың бетіне немесе

басқа сайтқа ауыстыра алады.

a. түбірлік бума

b. шрифт


c. мәтіндік редактор

d. гиперсілтеме

3. Гиперсілтеме деген не?

a. Интернеттегі немесе компьютердегі қолжетімді ресурсты көрсететін

көрсеткіш.

b. Компьютердің жадындағы мекенжайдың көрсеткіші.

c. Сайттың сервердегі домендік атауы.

d. Компьютердің желідегі IP мекенжайы.

4. Dreamweaver бағдарламасы төменде аталғандардың қайсысын

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

a. Тақырып жолында жұлдызша (*) көрсетіледі.

b. File мәзірінде Save жанындағы леп белгісі жылпылдайды.

c. Dreamweaver бағдарламасында сақталмаған құжаттарға арналған

индиктор жоқ.

d. Əр 10 минут сайын бетті сақтау жөніндегі хабарлама шығады.

Жұлдызша (Звездочка; asterisk) - программалау тілдерінде көбейту амалының белгісі ретінде және т.б. жағдайларда да қолданылады; операциялық жүйеде символдар тобы орнына қолданылатын символ. Мысалы, *.ТХТ жазылымы ТХТ тіркеулі (кеңейтулі) барлық файлдар үшін пайдаланылады; Ассемблер тілі термині.
Хабарлама (Донесение) - жоғары тұрған командирге (бастыққа, штабқа) белгілі бір мәліметтерді хабарлау мақсатына арналған жауынгерлік немесе қызметтік есеп-ақпарат құжаты. Соғыс жағдайында төмендегідей хабарламалар даярланады: жауынгерлік, барлау, байланыс бойынша, инженерлік және химиялық қамтамасыз ету, тыл бойынша және басқа.

5. Төменде аталғандардың қайсысы қолжетімді абсолютті сілтеме

болып табылады?

a. www.site.com.au

b. http://www.site.com.au

c. http://www.site

d. courses/index.html

Сілтемелер жасау

101

6. Сілтемелердің түрі:



a. Жергілікті

b. Ішкі


c. Сыртқы

d. B және C

7. Төменде аталғандардың қайсысы бетті жаңа қосымша бетте

ашады?


a. _parent

b. _self


c. _blank

d. _top


8. Келесі пайымдаулардың қайсысы дұрыс?

a. Сілтеме электронды поштаның мекенжайына қолжетімділік алу үшін

пайдаланылуы мүмкін.

b. Сілтемені ағымдағы бетте жылжу үшін пайдалануға болады.

c. Сілтеме басқа веб-беттерге қолжетімділік алу үшін пайдаланылуы

мүмкін.


d. Жоғарыда аталғандардың барлығы.

9. Келесі пайымдаулардың қайсысы дұрыс емес?

a. Сіз қасиеттер инспекторындағы Browse for File пернесінің көмегімен

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

b. Егер сіз Hyperlink диалогтық терезесіндегі Text өрісін өзгертетін

болсаңыз, сіз Link өрісін де өзгертесіз.

c. Сіз Point to File таңбасын бетке жасалатын сілтемені көрсету үшін

пайдалана аласыз.

d. Target түсіп ашылатын тізімі бетті байланысқан түрде жаңа терезеде

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

10. Гиперсілтемедегі href атрибуты не үшін жауап береді?

a. Бұл алмастыратын мәтін.

b. Бұл ресурсқа жасалатын сілтеме.

c. Бұл сілтеменің сипаттамасы.

d. Жоғарыда аталғандардың ешқайсысы.

Dreamweaver CS6

102

9. КЕСТЕЛЕРМЕН ЖҰМЫС ІСТЕУ



ВЕБ ДИЗАЙНДАҒЫ КЕСТЕЛЕР

Кестелер кестелік деректерді көрсетуге ыңғайлы. CSS пайда

болғанға дейін веб-беттерді безендендіру кестелердің өздерінің

көмегімен жүзеге асырылды (кестелік беттеу). Алайда CSS пайда

болғаннан бері құжаттың мазмұны мен көрінісінің принциптік бөлінуі

мүмкін болды (блоктық беттеу). Біртіндеп кестелер өздерінің бастапқы

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

Кестелермен жұмыс істеуге көмектесу үшін Dreamweaver

бағдарламасы көптеген жылдар бойы жаңа құралдардың қатарын

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

Бұл сабақтан сіз қолда бар деректерді қалай автоматты түрде

пішімдеуге және импорттауға болатынын білесіз. Сонымен қатар сіз

жолдар мен бағандарды қалай өзгертуге, CSS ережелерінің көмегімен

кестелерді қалай пішімдеуге, сондай-ақ жаңадан жаңа кестелерді

қалай жасауға болатынын білесіз.

ДЕРЕКТЕРДІ КЕСТЕГЕ ИМПОРТТАУ

Кестелік деректердің көбі CSV және TXT пішімдерінде кестелермен

жұмыс істейтін түрлі бағдарламалардан экспортталады. Dreamweaver

осы файлдарды аша алады, бірақ оларды тікелей пішімдемейді.

Мысалға, CSV файлын алатын болсақ, оның деректерінің пішімі

келесідей: файлдың әр жолы – кестенің бір жолы, жеке бағандардың

мәндері бөлу символымен – үтірмен (,) бөлінеді.

Scott L. Aranda,»123 Main Street, Bethesda, Maryland 20816»,Single

Todd D. Smith,»987 Elm Street, Alexandria, Virginia 22301»,Single

Edward M. Grass,»123 Main Street, Bethesda, Maryland 20816»,Married

Aaron G. Frantz,»987 Elm Street, Alexandria, Virginia 22301»,Married

Ryan V. Turner,»123 Main Street, Bethesda, Maryland 20816»,Single

CSV файлдары

Кестелермен жұмыс істеу

103


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

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

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

кестені қоямыз.

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

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

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

Files панелінде import_tables.html файлы пайда болады (9.1--су-

рет).

9.1-сурет. Files панелі. import_tables.html файлы



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

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

4. Мәзірдің Insert ⇒ Table Objects ⇒ Import Tabular Data пәрменін

орындаңыз.

5. Import Tabular Data диалогтық терезесі ашылады (9.2--сурет).

6. Browse пернесін басып, data.csv файлын таңдаңыз. Сіздің

жағдайда кез келген басқа *.csv файл болуы мүмкін. Open пернесін

басыңыз.


Delimiter ашылатын тізімінде автоматты түрде Comma (Үтір)

тармағы таңдалады.

7. Table width ауыстырып-қосқышын Fit to Data күйіне қойыңыз.

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

осы өрістердің кейбіреуі CSS-пішімдеудің орнына HTML-атрибуттарды

пайдаланады.

Dreamweaver CS6

104


9.2-сурет. Import Tabular Data диалогтық терезесі

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

Кесте пайда болады. Бұл кезде ол үш бағаннан және бес жолдан

тұрады (9.3--сурет).

9.3-сурет. Кесте.

Кестелермен жұмыс істеу

105

ЖАҢАДАН КЕСТЕ ЖАСАУ



Dreamweaver жаңадан кестелерді жасау үрдісін жеңілдетеді.

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

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

толтырғышын бөліп алыңыз да оның орнына Tables page мәтінін

енгізіңіз.

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

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

Files панелінде tables.html файлы пайда болады (9.4 -сурет).

9.4-сурет. Files панелі. tables.html файлы

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

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

5. Мәзірдің Insert ⇒ Table пәрменін орындаңыз.

Table диалогтық терезесі ашылады (9.5--сурет). HTML

элементтерінің көбі сияқты кестелердің мөлшерлері мен сипаттамала-

рын HTML-атрибуттардың немесе CSS көмегімен басқаруға болады.

Озық технологияларда икемділігі мен қуаты үшін CSS жиірек пайда-

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

жағынан HTML тілінің теңдесі жоқ.

Table диалогтық терезесінде мәндерді енгізген кезде Dreamweaver

бағдарламасы HTML-атрибуттар арқылы өзгерістер енгізеді.

6. Rows (Жолдар) өрісіне 2 мәнін, ал Columns (Бағандар) өрісіне

4 мәнін енгізіңіз. Осыдан кейін Table width (Кестенің ені) өрісіне 90

мәнін енгізіңіз. Table width (Кестенің ені) атрибутының ашылатын

тізіміндегі percent (Пайыздар) мәнін өлшем бірлігі ретінде таңдаңыз.

Dreamweaver CS6

106


Border thickness (Шекараның жуандығы) өрісіне 0 мәнін енгізіп, OK

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

9.5-сурет. Table диалогтық терезесі

Төрт бағаннан және екі жолдан тұратын кесте пайда болады. Оның

сол жақ шетте тұрғанына назар аударыңыз. Бұл кесте деректерді

енгізуге дайын.

7. Кестенің бірінші ұяшығына курсорды қойыңыз. Date сөзін енгізіп,

бірінші жолдың келесі ұяшығына өту үшін Tab пернесін басыңыз.

8. Екінші ұяшыққа Breakfast сөзін енгізіңіз де қайтадан Tab пернесін

басыңыз. Lunch сөзін енгізіп, Tab пернесін басыңыз. Осыдан кейін

Dinner сөзін енгізіңіз және курсорды екінші жолдың бірінші ұяшығына

тасымалдау үшін Tab пернесін басыңыз.

9. Екінші жолға april 21 (1-ші ұяшыққа), Orange juice, Toast, Black

coffee (2-ші ұяшыққа); Tuna sandwich, apple (3-ші ұяшыққа) және

Hamburger steak, mashed potatoes, Green beans, Jello (4-ші ұяшыққа)

сөздерін енгізіңіз. Кестеге жаңа жолдарды оңай қосуға болады.

10. Кестеге жаңа бос жолды қосу үшін Tab пернесін басыңыз. Егер

бұл тәсіл сізге тым баяу көрінсе, Dreamweaver бағдарламасының

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

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



тегін таңдаңыз (9.6-сурет).

Кестелермен жұмыс істеу

107

9.6-сурет



Қасиеттер инспекторында ағымдағы кестенің қасиеттері, соның

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

12. rows өрісіндегі 3 санын бөліп алыңыз. 10 санын енгізіп, жаңа

мәнді енгізуді аяқтау үшін enter пернесін басыңыз.

Dreamweaver кестеге жеті жаңа жол қосады (9.7 -сурет). Қасиеттер

инспекторындағы өрістер кестенің түрлі аспектілерін, соның ішінде

оның енін, ұяшықтарының ені мен биіктігін, мәтінді түзетуді және т.б.

басқару үшін HTML-атрибуттарды жасайды.

Dreamweaver CS6

108


9.7-сурет. Жеті жаңа жолы бар кесте

13. Кестенің қалған бөлігін толтырыңыз (9.8-сурет).

Кестелермен жұмыс істеу

109


9.8-сурет. Толтырылған кесте

14. Осы файлды сақтаңыз.

Dreamweaver CS6

110


CSS ЕРЕЖЕЛЕРІНІҢ КӨМЕГІМЕН КЕСТЕЛЕРДІ ПІШІМДЕУ

Қазір сіз жұмыс істеп отырған кесте сол жақ шетке қойылған.

Кестелерді HTML-атрибуттардың немесе CSS ережелерінің көмегімен

пішімдеуге болады. CSS аз ғана ережелерді пайдалана отырып бүкіл

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

1. Біріншіден өзіңіз осы мақсат үшін жасаған CSS файлын құжатқа

қосу қажет. CSS Styles панеліндегі attach Style Sheet пернесін

басыңыз. Attach external Style Sheet диалогтық терезесі ашылады.

2. Browse пернесін басыңыз. Select Style Sheet File диалогтық

терезесі ашылады (9.9--сурет).

3. Сайттың styles атты бумасынан style.css файлын таңдаңыз. OK

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

4. attach external Style Sheet диалогтық терезесінде add as

ауыстырып-қосқышын Link күйіне қойыңыз да OK пернесін басыңыз.

9.9-сурет. attach external Style Sheet диалогтық терезесі

HTML бетке жаңа жазбаның жазылғанын көресіз.



5. CSS Styles панеліндегі New CSS rule таңбасын басыңыз.

6. Selector Type ашылатын тізімінен Class тармағын таңдаңыз.

Selector Name өрісіне .menu енгізіңіз. OK пернесін басыңыз.

Кестелермен жұмыс істеу

111


7. .menu үшін CSS ережесін айқындаудың диалогтық терезесі ашы-

лады (9.10 -сурет).

8. Type санатындағы Font-size өрісіне 80% мәнін енгізіңіз.

9. Box санатындағы Width өрісіне 840px мәнін енгізіңіз. margin

басқару элементтерінің тобындағы Left өрісіне 15px мәнін енгізіңіз.

9.10-сурет. .menu үшін CSS ережесін айқындау кезіндегі

диалогтық терезе

10. Border санатындағы (9.11 -сурет) Bottom атрибутының

өрістеріне келесі мәндерді енгізіңіз: solid, 3px и #060. OK пернесін

басыңыз.


Dreamweaver CS6

112


9.11-сурет. Border санаты белсенді болған кезде .menu үшін CSS

ережесін айқындау кезіндегі диалогтық терезе

.menu ережесі стильдердің кестесіне қосылады. Енді стильдердің

кестесін сақтаңыз.

11. Тегтердің селекторында

тегін таңдаңыз.

12. Қасиеттер инспекторындағы Class ашылатын тізімінен menu

тармағын таңдаңыз (9.12--сурет.)

9.12-сурет. Қасиеттер инспекторындағы menu тармағын таңдау

Кестенің мөлшері өзгереді, кесте блоктың сол жақ шетінен 15 пик-

селге жылжиды да онда күңгірт-жасыл түсті шекара пайда болады. Сіз

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

Кестелермен жұмыс істеу

113

13. CSS Styles панеліндегі .menu ережесін таңдаңыз және



Properties бөліміне назар аударыңыз. Онда .menu ережесінің

ағымдағы баптаулары көрсетіледі.

14. Қасиеттер тізімінің төменгі бөлігіндегі add Property жолын

басыңыз. border-collapse атауын енгізіңіз және курсорды value

бағанының өрісіне жылжыту үшін Tab пернесін басыңыз.

Жылжыту (Подкачка; paging, swapping) - виртуальдық жадтың беттерін немесе сегменттерін ауыстыру; осы сәтте жедел жадқа қажетті ақпаратты орналастыруды жасақтайтын жедел жад пен сыртқы жад арасындағы мәселелер тіркесін ауыстыру.
collapse

мәнін енгізіңіз және қасиетті қосуды аяқтау үшін enter пернесін

басыңыз (9.13--сурет).

9.13-сурет

Design көрінісінде кестелердің көрсетілуінде айырмашылықты

көрмеуіңіз де мүмкін, бірақ атрибуттың қажеті жоқ деп ойламаңыз.

15. Барлық файлдарды сақтаңыз.

Пішімдеу әлі аяқталған жоқ.

элементі кейбір бағандардың

енін қадағаламайды. Бағандардың енін басқару үшін басқа құралдар

қажет.


16. Кестенің кез келген ұяшығына мәтіндік курсорды қойыңыз. New

CSS rule пернесін басардың алдында тегтердің селекторындағы



тегін таңдаңыз.

17. Қажет болған кезде Selector Type ашылатын тізіміндегі

Compound тармағын белгілеңіз. Selector Name мәнін .menu td, .menu

th етіп өзгертіңіз де OK пернесін басыңыз (9.14 -сурет).

Dreamweaver CS6

114


9.14 -сурет. New CSS rule диалогтық терезесі

18. Block санатының Text-align ашылатын тізіміндегі left тармағын

таңдаңыз.

19. Box санатындағы (9.15 -сурет) Padding басқару элементтері

тобының барлық топтарына 5px мәнін енгізіңіз.

9.15 -сурет. Box санаты белсенді болған кезде .menu. үшін CSS

ережесін айқындау кезіндегі диалогтық терезе

20. Border санатындағы (9.11 -сурет) Top атрибутының өрістеріне

келесі мәндерді енгізіңіз: solid, 1px и #090. OK пернесін басыңыз.

Кестелермен жұмыс істеу

115

9.16 -сурет



Кестенің әр жолының үстінде (9.16 -сурет) жіңішке жасыл түсті

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

Тақырыптарды кәдімгі ұяшықтардан ерекше бөліп көрсету үшін,

тақырыптарды жазу кезінде әдетте жартылай қалың кескін пайдала-

нылады.

Кескін (изображение; display image pict (picture) - 1) ақпаратты бейнелеу, мәліметтерді көзге көрінетіндей ұсыну; көзбен көру бетіне бір уақытта шығаруға болатын шығу мен сегменттер примитивтерінің жиынтығы; 2) apple фирмасының macintosh компьютерлеріне арналған мәліметтердің көлемін кішірейтіп тығыздауға мүмкіндік беретін, қозғалмайтын мультимедиа-кескіндерге арналған пішім.
Түсті өзгерту арқылы бұл әсерді күшейтуге болады.

21. CSS Styles панелінен .menu td, .menu th ережесін таңдаңыз.

New CSS rule пернесін басыңыз. Қажет болған кезде Selector Type

ашылатын тізімінен Compound тармағын таңдаңыз. Selector Name

өрісіне .menu th мәнін енгізіңіз. OK пернесін басыңыз.

22. Type санатындағы Color өрісіне #FFC мәнін енгізіңіз.

23. Background санатындағы Background-color өрісіне #090

мәнін енгізіңіз. Border санатында Bottom атрибутының өрістеріне

келесі мәндерді енгізіңіз: solid, 6px және #060. OK пернесін басыңыз.

Ереже жасалды, бірақ оны енді қолдану қажет. Dreamweaver қазіргі



тегтерін тегтеріне түрлендіруді жеңілдетеді.

Кестенің бірінші жолының бірінші ұяшығына мәтіндік курсорды

қойыңыз. Қасиеттер инспекторына Header жалаушасын қойыңыз (9.17

-сурет). Тегтердің селекторына назар аударыңыз.

Dreamweaver CS6

116


9.17 -сурет

Ұяшықтың фоны жасыл түске боялады. Жалаушаны қойған уақытта

Dreamweaver қазіргі

тегтерін тегтеріне айналдыра отырып

және CSS-пішімдеуді қолдана отырып, автоматты түрде таңбалауды

қайта жазады. Бұл кодты қолмен редакциялауға қарағанда әлдеқайда

жылдам және бір уақытта көп ұяшықты түрлендіруге мүмкіндік береді.

24. Бірінші жолдың екінші ұяшығына мәтіндік курсорды қойыңыз.

Бірінші жолдың қалған ұяшықтарын таңдау үшін тінтуірдің сол жақ

пернесін жібермей көрсеткішті жылжытыңыз.

25. Кестенің ұяшықтарын тақырыптың ұяшықтарына түрлендіру

үшін қасиеттер инспекторында Header жалаушасын қойыңыз. Осыдан

кейін бүкіл бірінші жол жасыл түске боялады (9.17 -сурет).

26. Барлық файлдарды сақтаңыз.

9.17 -сурет. Түпкілікті нәтиже

Кестелермен жұмыс істеу

117


ТЕСТ

1. Кәдімгі кестені қалай қоюға болады?

a. Insert панеліндегі «Table» пернесін басу арқылы.

b. Ctrl Alt T пернелерінің үйлесімін басу арқылы.

c. Insert ⇒ Table мәзірін таңдау арқылы.

d. Осы жауаптардың барлығы.

2. Кесте қай HTmL тегінің көмегімен жасалады?

a.

b.

c.

d.

3. Таңдалған кестенің қасиеттерін қарау және өзгерту үшін сіз

төменде аталғандардың қайсысын пайдалануға тиіссіз?

a. Insert панелі

b. Files панелі

c. қасиеттер инспекторы

d. қосымшалар панелі

4. Келесі пайымдаулардың қайсысы дұрыс емес?

a. Кесте көп бағанды макеттерді жасау үшін пайдаланылуы мүмкін.

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

көмегімен жасалуы мүмкін.

c. Кесте

HTML тегін пайдалану арқылы жасалуы мүмкін.

d.

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

5. Table диалогтық терезесіне қатысты келесі пайымдаулардың

қайсысы дұрыс емес?

a. Сіз шекараның түсін белгілей аласыз.

b. Сіз жолдардың санын белгілей аласыз.

c. Сіз кестенің енін белгілей аласыз.

d. Сіз шекараның жуандығын белгілей аласыз.

6. Келесі пайымдаулардың қайсысы дұрыс емес?

a. Кестелерді жасау үшін

1   2   3   4   5   6


жүктеу 1.02 Mb.