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

    Басты бет


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

жүктеу 1.02 Mb.



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

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


1   2   3   4   5   6

Main Content


Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Praesent aliquam, justo convallis luctus rutrum.

Phasellus tristique purus a augue condimentum adipiscing.

Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate

at, odio.




H2 level heading


Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam,

at nonummy quam ante ac quam.






Мұнда үш жеке div. тегі бар: бір үлкен контейнер-тег және екі басқа

тег – бүйірлік панельдің тегі және контейнер-тегтің ішіндегі негізгі

мазмұнының тегі (4.5--сурет).



4.5-сурет. a. Div контейнер-тегі. B. Бүйірлік панельдің Div тегі

C. Негізгі мазмұнының Div тегі
Жоғарыда келтірілген мысалдағы Div тегтерінің ешқайсысына

стильдер қолданылмаған. CSS белгіленген ережелерінсіз әр Div тегі

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

орналасады. Егер әр Div тегінің бірегей сәйкестендірушісі болса

(жоғарыда келтірілген мысалдағындай), онда сәйкестендірушілерді

CSS ережелерін жасау үшін пайдалануға болады, осындай ережелерді

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

10. style.css файлына келесі кодты қойыңыз.


#container {width: 780px;background: #FFFFFF;margin: 0 auto;

border: 1px solid #000000;text-align: left;}


Бұл код беттегі «контейнер-тег» деп аталатын бірінші тегке

стильдердің ережелерін жасайды.

#container ережесі контейнер-тегтің енін 780 пиксел етіп белгілейді,

сондай-ақ оның фоны ақ, беттің сол жақ шетінде бос жер жоқ, жуандығы

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

түзетіліп жазылады (4.6 -сурет). Div контейнер-тегіне ережені қолдану

нәтижесі келесідей болады.

4.6-сурет. Div контейнер-тегі, 780 пиксел, беттің шетінде бос жер жоқ

11. Келесі CSS ережесі бүйірлік панельдің Div тегіне арналған

стильдердің ережелерін жасайды.


#sidebar {fl oat: left;width: 200px;background: #EBEBEB;padding: 15px 10px 15px 20px;}
#sidebar ережесінің Div тегі үшін белгілейтін баптаулары бойынша

бүйірлік панельдің ені 200 пикселді құрайды, фоны сұр, жоғарғы және

төменгі толтыруы 15 пикселді құрайды, оң жақ толтыруы 10 пиксел

болса, сол жақ толтыруы 20 пиксел болады (шегіністердің бастапқы

тәртібі: жоғарыда-оң жақта-төменде-сол жақта). Сонымен қатар ере-

же бүйірлік панельдің Div тегі үшін fl oat: left құбылмалы жайғастыруын белгілейді, бұл қасиеті бүйірлік панельдің Div тегін Div контейнер-тегіне қатысты сол жаққа қарай жылжытады. Бүйірлік панельдің Div тегіне ережені қолданудың нәтижесі келесідей болады (4.7--сурет).



4.7-сурет. Бүйірлік панельдің Div тегі, fl oat left

12. Сонымен негізгі құрамның Div контейнер-тегіне арналған CSS

ережесі макетті аяқтайды.


#mainContent {margin: 0 0 0 250px;padding: 0 20px 20px 20px;}
#mainContent ережесінің белгілеуі бойынша негізгі мазмұнның Div

тегінде сол жақ баған 250 пиксел болады, яғни Div контейнер-тегінің

сол жағы мен негізгі мазмұнның Div тегінің сол жағының арасындағы

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

мазмұнның Div тегінің оң жағында, төменгі жағында және сол жағында 20 пикселді құрайтын аралықтарды белгілейді. Негізгі мазмұнның Div тегіне ережені қолдану нәтижесі келесідей болады (4.8-сурет).

4.8-сурет. Негізгі мазмұнның Div тегі, сол жағындағы өріс – 250 пиксел



CSS ЕРЕЖЕЛЕРІН ЖƏНЕ ПАЙДАЛАНУШЫЛАР

САНАТТАРЫН ЖАСАУ

CSS санатының атрибуттары жеке элементке немесе оның бөлігіне

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

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

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

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

Selector Name өрісіне .brown сөзін енгізіңіз. Түсіп ашылатын rule

Defi nition тізімінен өзіңіздің syle.css CSS файлыңызды таңдаңыз. ОК

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

3. CSS rule Defi nition for .brown диалогтық терезесіндегі Type

санатының Color өрісіне #930 енгізіңіз. ОК пернесін басыңыз.

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

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

Негізгі мазмұнның ішіндегі (#mainContent сәйкестендірушісінің

мазмұны) барлық параграфтарға (барлық
тегтеріне) санатты

қолданып көрейік.

4.

тегіндегі
тегі элементінің ішіне

мәтіндік курсорды қойыңыз.

Курсордың жылпылдап тұрғанына, ал мәтіннің бөлініп алынбағанына

көз жеткізіңіз.

5. Қасиеттер инспекторында түсіп ашылатын Class тізімінен brown

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



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

6. Code көрінісіне ауысыңыз.
ашатын тегін зерттеңіз.

4.10-сурет.


ашатын тегі

Ереже
түріндегі тегке атрибут ретінде қолда-

нылады. Мәтіндік курсор элементтің ішіне қойылып тұрған уақытта

Dreamweaver бағдарламасы сіздің санатты бүкіл элементке қолданғы-

ңыз келеді деп түсінеді (4.10 -сурет).

Енді негізгі мазмұнның ішіндегі қалған параграфтарға санатты

қолданыңыз.
ТЕСТ

1. CSS қысқартуы нені білдіреді?

a. Content Scrambling System

b. Combat Service Support

c. Custom Style Sheet

d. Cascading Style Sheets

2.

CSS (ағылш. Cascading Style Sheets - стильдер кестелерінің тілі) - веб беттерді форматтауда қолданылатын белгілеу тілі. Бұл тіл XML құжаттарында да қолданыс тапты.
CSS не үшін қажет?

a. Веб-беттерді безендендіру үшін

b. Пайдаланушыны желіде авторизациялау үшін

c. Нысандарға деректерді енгізу дұрыстығын тексеру үшін

d. Орфографияны тексеру үшін

3. Төменде аталғандардың қайсысы CSS макетінің негізгі блогы

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

a. тегі

b.

тегі

c. тегі

d.

тегі

4. attach Style Sheet диалогтық терезесі:

a. стильдер кестесіне жаңа ережені қосуға мүмкіндік береді

b. қолда бар ережелерді редакциялауға мүмкіндік береді

c. CSS ережесін HTML тегіне қолдануға мүмкіндік береді

d. CSS-ті бетке қосуға мүмкіндік береді

5. New CSS rule диалогтық терезесі:

a. стильдер кестесіне жаңа ережені қосуға мүмкіндік береді

b. қолда бар ережелерді редакциялауға мүмкіндік береді

c. CSS ережесін HTML тегіне қолдануға мүмкіндік береді

d. CSS-ті бетке қосуға мүмкіндік береді

6. Стильдердің каскадты кестелерінің кеңейуі қандай?

a. .sst

b. .csv


c. .css

d. .pps


7. Ең дұрыс жауапты таңдаңыз. CSS-ті не үшін пайдалануға

болады?


a. Беттің элементтерін, мысалға, мәтінді, -суретті және кестелерді

стильдеу


b. Нысанның деректерін өңдеу

c. Веб-беттің макетін айқындау

d. Беттің элементтерін, мысалға мәтінді, -суреттерді және кестелерді

стильдеу және веб-беттің макетін айқындау

8. Стильдеу ережелерін жасауға және редакциялауға пайдаланы-

латын панель

a. Files панелі.

b. Қасиеттер инспекторы.

c. Snippets панелі.

d. CSS Styles панелі.

9. Жеке элементке пайдаланушылық пішімдеуді қалай қолдануға

болады?


a. Қасиеттер инспекторы арқылы Class өрісінде.

b. Тінтуірдің оң жақ пернесін басып, контекстілік мәзірден CSS Styles

таңдау арқылы.

c. Мәзірдің Format ⇒ CSS Styles пәрменін орындау арқылы.

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

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

a. CSS Styles панелі Window ⇒ CSS Styles мәзірінде орналасқан.

b. CSS жаңа стилін жасау үшін CSS Styles панелінің оң жақ төменгі

бөлігіндегі пернелерді пайдаланыңыз.

c. Пернелер: Attach Style Sheet, New HTML File, New Template.

d. New CSS Rule диалогтық терезесінде келесі опциялар бар: Selector

Type, Selector Name, сондай-ақ Rule Defi nition


5. ҮЛГІЛЕР

Жұмысты азайту үшін сайтты әзірлеу барысында түрлі автомат-

тандыру құралдарын пайдаланған пайдалы.

Азайту - негізгі төрт арифметикалық амалдардыӊ бірі, қосу амалына кері амал сандардыӊ айырымын анықтайды, «−» таӊбасымен белгіленеді. Екі қосылғыштың берілген қосындысы мен осы қосылғыштың біреуі бойынша екінші қосылғышты анықтауға арналған.
Сайтты жасаған және

түрлендірген кезде іс-әрекеттерді автоматтандыру үшін Dreamweaver

үлгілер сияқты құралдарды ұсынады. Сонымен қатар көптеген қазіргі

заманға сай бағдарламалар сияқты Dreamweaver пәрмендердің

тәртібін есте сақтауға және кейін көп рет осы тәртіпті қайталауға

мүмкіндік береді.

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

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

логикалық пішімдеуді көрнекі пішімдеуден ажыратуға болады. Мыса-

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

өзгертуге немесе сайттың пайдаланушылық интерфейсін артты-

ру мақсатында оның навигациялық құралдарын өзгертуге мүмкіндік

береді.

Навигация (лат. navіgatіon, navіgo - кемеде жүземін) - 1) теңізде жүзу, кеме қатынасы; 2) мұхит, теңіз, көл, бөген және өзендегі табиғат жағдайына байланысты кеме қатынасы болатын уақыт кезеңі.
Үлгіге өзгерістер енгізсеңіз болғаны, Dreamweaver оның

негізінде жасалған барлық беттерге осы өзгерістерді автоматты түрде

енгізеді.

Сайттың құрылымы, навигациялық құралдары және дизай-

ны толығымен ойластырылғаннан кейін, оның құрамына кіретін

құжаттардың негізгі түрлерін бөліп айтуға болған уақытта үлгілерді

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

Үлгі жасау үшін кәдімгі HTML құжатта әзірленетін сайттың барлық

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

1. Бетке навигациялық және дизайнерлік элементтерді орналасты-

ра отырып бетте типтік құрылымды жасау арқылы осы құжатты үлгіге

айналдыруға болады, ол үшін File ⇒ Save as Template пәрменін

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

нын нақтылап көрсету (Site өрісі), сондай-ақ үлгінің атын қою (Save as

өрісі) қажет.

5.1-сурет. Үлгіні сақтаудың диалогтық терезесі

Осындай тәсілмен дайындалған үлгі құжаттарды жасау үшін

пайдалануға келмейді. Мұның себебі – осындай үлгінің негізінде

жасалған құжаттың бүкіл мазмұны бұғатталады, оқшауланады, ал

құжатты редакциялау мүмкін болмайды. Үлгіні жасаған кезде қандай

жерлерді редакциялауға болатынын, ал қайсыларын бұғаттап,

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

2. Жаңа, бос редакцияланатын аймақты жасау Insert ⇒ Template

Objects ⇒ editable region пәрмені бойынша орындалады. Пайда

болған диалогтық терезеде редакцияланатын аймақтың атауын

көрсету қажет. Жаңа редакцияланатын аймақ курсор тұрған жерде

жасалады. Бұрын жасалған мәтін алдын ала бөлініп алынған бол-

са, оның кез келген жерін редакцияланатын аймаққа айналдыруға

болады.

5.2-сурет. Үлгінің редакцияланатын аймағын жасаудың диалогтық терезесі

Егер Dreamweaver баптауларында таңбалаудың көрінбейтін

элементтерін көрсету мүмкіндігі қосылған болса, онда редакциялана-

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

қойылады:



Untitled Document

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

Бұл құрылымға араласпаған және оны өзгертпеген жөн. Қызметтік

таңбалау түсініктер түрінде жасалғандықтан, ол HTML құжатының браузерде көрсетілуіне әсер етпейді.

3. Үлгіні әзірлеу кезінде редакцияланатын аймақтардың күйін

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

Ол үшін өшірілуі тиіс аймақты бөліп алып, modify ⇒ Templates ⇒

remove Template markup пәрменін орындаған жөн.

Үлгінің барлық редакцияланатын аймақтары айқындалғанда оны

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

4. Үлгінің негізінде жаңа файлды жасау үшін File ⇒ New пәрменін

орындау қажет. New Document диалогтық терезесінде Page from

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

үлгінің атауын көрсетіңіз. Алдын ала белгіленген баптаулар бойынша

Update page when template changes жалаушасы қосылып тұрады.

Осының нәтижесінде құжат үлгімен байланыста болады және үлгіге

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

соқтырады.



5.3-сурет. Үлгінің негізінде жаңа құжатты жасау кезіндегі

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

Сөйтіп мәтіннің редакцияланатын аймақтарын түрлендіруге бола-

ды. HTML құжатының қалған бөліктері бұғатталған болады. Мәтіннің

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

5. Кейде бұғатталған аймаққа өзгерістер енгізу қажеттігі туын-

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

ты үзу қажет. Мұны modify ⇒ Templates ⇒ Detach from Template

пәрмені бойынша жасауға болады. Осы пәрменді орындағаннан

кейін Dreamweaver осы құжаттың кез келген аймағын редакциялауға

мүмкіндік береді. Бірақ бұл операцияны жасамас бұрын үлгіге

өзгерістерді енгізуді немесе құжаттардың осы түріне арналған жаңа

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

да себептермен (дизайнды өзгерту, навигация панелін өзгерту) қажет

болуы мүмкін. Үлгілерді пайдаланудың арқасында Dreamweaver осы

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

файлдарға айтарлықтай жылдам түзетулер енгізе алады.

6. Редакцияланатын файлды жасауға негіз болған үлгіге өзгерістер

енгізу үшін modify ⇒ Templates ⇒ Open attached Template пәрменін

орындау қажет. Осы пәрмен бойынша Dreamweaver жаңа терезеде

үлгіні ашады, оған қажетті өзгерістерді енгізуге болады. Сондай-ақ

Dreamweaver арнайы үлгілерді сақтау үшін жасаған Templates атты

сайттың бумасынан редакциялау үшін үлгіні ашуға болады.

7. Үлгіге өзгерістер енгізілгеннен кейін оның негізінде жасалған

файлдарды жаңарту рәсімін орындау қажет. Егер редакцияланған үлгі

сақталса немесе жабылса, бұл рәсім автоматты түрде шақырылады.

modify ⇒ Templates ⇒ Update Pages пәрменін орындау арқылы оны

мәжбүрлеп шақыруға болады.

5.4-сурет. Үлгінің негізінде жасалған беттерді жаңарту кезіндегі диалогтық терезе

Look in өрісіндегі Update Pages диалогтық терезесінде қандай

файлдарды жаңарту қажет екенін көрсетіңіз: осы сайттың аясындағы

құжаттар (Entire Site) немесе осы үлгінің негізінде жасалған барлық

құжатар (Files That Use…). Файлдар жаңартылғаннан кейін терезенің

төменгі бөлігінде орындалған әрекеттер туралы есеп шығарылады.

5.5-сурет. Жаңартылған файлдар туралы есеп

8. Сондай-ақ әр бетті жеке жаңартуға болады. Ол үшін үлгінің

негізінде жасалған бетті редакциялау кезінде modify ⇒ Templates ⇒

Update Current Page пәрменін орындау қажет. Осы пәрмен бойынша

құжаттың редакцияланбайтын аймақтарының мазмұны осы құжатты

жасауға негіз болған үлгіге сәйкестендіріледі.

9. Үлгілерді пайдаланбай бірнеше бет жасалып қойған болуы

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

етуі мүмкін, немесе олар басқа сайттың қандай да бір басқа үлгісінің

негізінде жасалған болуы мүмкін. Осы беттермен жұмыс істеуді ав-

томаттандыру үшін оларды үлгілердің біреуіне байланыстырып

тіркеуге болады. Ол үшін modify ⇒ Templates ⇒ apply Template to

Page… пәрменін орындасаңыз жеткілікті. Select Template диалогтық

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

атауын таңдау қажет. Dreamweaver үлгідегі барлық қажетті мазмұнды

қосады, ал ескі мәтінді тиісті редакцияланатын аймақтарға орналасты-

рады.


5.6-сурет. Үлгіні таңдау кезіндегі диалогтық терезе

10. assets панеліндегі Templates палитрасын пайдалана отырып

үлгілермен жұмыс істеуге болады.



5.7-сурет. Templates палитрасы

Сөйтіп Dreamweaver ұқсас элементтерді көшіруге, қосарлауға және

баптауға бағытталған операцияларды жоққа шығаратын үлгілермен

жұмысты жүзеге асырады, сайттың элементтерін жаңарту, өзгерту

және синхрондау жөніндегі күрделі операцияларды автоматтандыра-

ды.

Синхрондау (Синхронизация; synchronization, timing) - 1) процестерді іске қосу сәтінің жүйедегі белгілі бір оқиғалармен үйлесімділігін анықтау, параллель процестер әрекеттерінің уақытша реттілігін жасақтау; 2) теңестіру.

ТЕСТ

1. Dreamweaver бағдарламасындағы үлгі деген не?

a. Беттің тақырыпшасы

b. Беттің төменгі колонтитулы

c. Беттердің сыртқы түрін айқындайтын, алдын ала әзірленген веб-бет

d. Веб-бет туралы құрылымдалған метадеректерді береді.

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

a. Үлгі құрылымы мен безендендірілуі бірдей сайттың беттерін жылдам

әрі ыңғайлы жасауға көмектеседі.

b. Бір үлгі бірнеше веб-бетте қайта пайдаланылуы мүмкін.

c. Əр веб-бет ағымдағы үлгінің көшірмесін емес, өзін пайдаланады.

d. Үлгі жасалғаннан кейін өзгертілмейді.

3. Dreamweaver үлгісін көрсету үшін файлдың қандай кеңейтуі

пайдаланылады?

a. .htm b. .dwt c. .pdf d. .tmp

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

a. Егер үлгі өзгертілсе, осы үлгінің көмегімен жасалған барлық веб-

беттер де өзгереді.

b. HTML файлын үлгі ретінде сақтау үшін File ⇒ Save as Template түсіп ашылатын мәзірін пайдаланыңыз.

c. Үлгіні өзгерту үшін .dwt файлын редакциялау қажет.

d. Сіз осы үлгінің негізінде жасалған кез келген файлдан үлгілерді

редакциялай аласыз.

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

a. Алдын ала белгіленген баптаулар бойынша үлгінің барлық аймақ-

тарын редакциялауға болады.

b. Үлгінің бір бөлігін редакциялау мүмкіндігіне ие болу үшін редакцияланатын аймақты белгілеу қажет.

c. Редакцияланатын аймақтан басқа үлгінің кез келген бөлігі

бұғатталған.

d. Редакцияланатын аймақты жасау мүмкіндігі Insert ⇒ Template

Objects мәзірінде орналасқан.

6. Қолда бар мәтіннен үлгіні қалай жасауға болады?

aSave as Template пәрменін орындау қажет.

bFile ⇒ New пәрменін орындау қажет.

cInsert ⇒ Template Objects пәрменін орындау қажет.

d. Мәзірдің Site ⇒ Manage Sites пәрменін орындау қажет.

7. Неге үлгі – динамикалық элемент?

a. Ол қашықтағы серверде ғана жұмыс істейді.

b. Ол пайдаланушының әрекеттеріне әрекет етуі және өзгеруі мүмкін.

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

әкеліп соқтыруы мүмкін.

d. Пайдаланушының әрекеттеріне қарамастан, бет әр уақытта бірдей

болып көрінеді.

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

a. Бірнеше бетте бірдей макетті пайдалану веб-сайтты жалықтырғыш

етеді.

b. Күрделі фондық -суреттерді пайдалану контентіңізді қызықтырақ



етеді.

c. Фондық -суреттің үстінен мәтінді оқу оңай.

d. Үлгілерді пайдалану веб-сайтқа кәсіби түр береді.

9. Редакцияланатын аймақты қалай жасауға болады?

aInsert ⇒ Template Objects ⇒ Editable Region пәрмені бойынша.

b. Мәзірдің Edit ⇒ Edit with External Editor пәрменін орындау арқылы.

c. Modify ⇒ Templates ⇒ Make Attribute Editable пәрмені бойынша.

d. Edit ⇒ Preferences пәрмені бойынша.

10. Үлгідегі редакцияланатын аймақты не үшін жасау қажет?

a. HTML-кодының мазмұнын, құжаттың құрылымын және пішімдеуді

бөлу үшін.

b. Əр еншілес бетке бірегей контентті редакциялау және қосу

мүмкіндігін алу үшін.

c. Бір элементтерді пішімдеу үшін.

d. Контентті графикалық бөлу үшін.

Графика - (гр. graphein, тырнау, жазу, салу дегеннен) Жазуда қолданылатын таңбалардың (әріп және тыныс белгілерінін) жиынтығы. Жазу танбалары жүйесі мен тілдін фонетикалық жүйесінің ара қатынасын, байланысын білдіреді.

6. МӘТІНМЕН ЖҰМЫС ІСТЕУ

Сайттардың көбі мәтіннің көлемді блоктарынан тұрады, назар ау-

дарту үшін мәтіннен өзге бірнеше -суреттер болады. Dreamweaver

бағдарламасында кез келген қажеттіктерді қанағаттандыруға мүмкіндік

беретін, мәтінді жасауға, ипорттауға және стильдеуге арналған алуан

түрлі құралдар бар. Келесі жаттығуларда сіз мәтінмен жұмыс істеудің

түрлі техникаларын үйренесіз.

Қазір біз құжатымызға сайттан алынған мәтінді қоямыз. Алдымен

жаңа HTML құжатты жасаңыз. Осыдан кейін http://ru.lipsum.com сай-

тына кіріңіз. Бұл – балық мәтінін тудырушы сайт. 200 сөз тудырыңыз.

Балық мәтіні – беттің аяқталған түрін ұқсастыру үшін беттің макетін

уақытша толтыруға арналған мәтін. Дизайнерде әр уақытта веб-сайтта

жариялануы жоспарланып отырған материалдар бола бермейді,

сондықтан сайт жұмыс істеген уақытта дизайнның қалай болатынын

көрсету үшін басқа тәсілді пайдалану қажет.

Мәтінмен жұмыс істеу

61

6.1-сурет. Балық мәтінін тудырушы сайты



Алған мәтініңізді Ctrl C пернелерін басу арқылы көшіріп, оны Ctrl

v пәрменінің көмегімен Dreamweaver бағдарламасында жасаған

бетіңізге қойыңыз.

Dreamweaver CS6

62

6.2-сурет



1. Келесідей тәсілмен мәтіннің бүкіл бірінші сөйлемін тегтерге

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


Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Жаңа сіз ғана мәтінді параграфқа салдыңыз.

2. Осы параграфтағы кәдімгі бос орынды алты үздіксіз бос орын-

мен алмастырыңыз, сонда ол келесідей болады:


Lorem ipsum dolor      s

it amet, consectetur adipiscing elit.

3. Файлды сақтаңыз. Браузерге қосылып, бетті жаңартыңыз. Енді

браузер абзацты да, сөздердің арасындағы ұлғайтылған кеңістікті де

көрсетуге тиіс (6.3--сурет).

6.3-сурет. Сөздердің арасындағы кеңістігі бар абзац

Мәтінмен жұмыс істеу

63

ТАҚЫРЫПТАР ЖАСАУ



HTML тілінде тақырыптар

1   2   3   4   5   6

  • H2 level heading

  • жүктеу 1.02 Mb.