Өзіндік жұмысқа арналған тапсырмалар:
«ҚҰСТАР» туралы веб-бетті құрыңыз. Құжатты өз бетіңізше
безендіріңіз.
Өзін-өзі бақылауға арналған сұрақтар:
1. Dreamweaver
бағдарламасында гиперсілтемелерді, суреттерді
қалай кірістіреді?
2. Dreamweaver
бағдарламасында кестелер қалай құрылады?
3.
Беттің параметрлері қалай орнатылады?
Практикалық жұмыс №4.3
Adobe Dreamweaver бағдарламасы көмегімен
қарапайым сайт жасау.
Жұмыстың мақсаты: Adobe Dreamweaver бағдарламасы көмегімен
қарапайым сайт жасауды үйрену.
Жұмысты орындау:
1)
Dreamweaver бағдарламасын іске қосыңыз: Пуск > Все Программы
> Adobe Dreamweaver CS3.
2) Create New
бөлімінен HTML пунктін таңдаңыз. Сонда жаңа құжат
терезесі пайда болады. Code көрсету режиміне өтіңіз.
Сурет-4.3.1.
202
3) Meta
тегінің жолына назар аударыңыз. Бұл жол сайттың кодын
анықтайды, сондықтан сол жерге windows-1251. Бұл Народ.ru сервисі
осы кодта жазылған сайттарды қолдайды.
Сурет-4.3.2.
4) Title
ұяшығына осы веб беттің атауын жазамыз, мысалы «Менің
сайтым».
Сурет-4.3.3.
5)
Курсорды тегтерінің арасына апарып, объектілер
тақтасынан Common ішкі бетіндегі Table батырмасын басыңыз. Содан
соң Table сұхбаттық терезесі пайда болады, онда кестенің қажетті
параметрлерін орнату керек. Rows және Columns – жолдар мен
бағандар санын береді. Праметрлерді суреттегідей етіп өзгертіңіз.
Сурет-4.3.4. Table сұхбаттық терезесі
203
6) Design
көрсету режиміне өтіп, не шығатынын қараймыз. Сонда
компьютер экранының өлшеміне сәйкес, 90% ені бар, тігінен және
көлденең орналасқан екі ұяшықтары бар, 1 пиксельді жиегі бар кесте
пайда болды.
Сурет-4.3.5.
7)
Құжатты File (Файл) > Save as… (Сохранить как…) командасы
арқылы өз бумаңызға (My Site атаулы бума құрыңыз) index.html
атауымен сақтаңыз.
Сурет-4.3.6.
8)
Бұл болашақ сайтымыздың index.html негізгі беті болып табылады.
9)
Енді My Site бумамызда Images бумасын құрып, ішіне 11.jpg
файлын алдын ала сақтап қоямыз, ол біздің болашақ сайтымыздың
логотипі болады.
10)
Курсорды кестенің бірінші ұяшығына қойып, Images бумасынан
11.jpg
файлын таңдап, ОК батырмасын басамыз.
Сурет-4.3.7.
204
11)
Пайда болған терезенің Alternative text (альтернативті мәтін)
өрісіне Менің сайтым деп жазыңыз.
Сурет-4.3.8.
Ескерту: альтернативті мәтін меңзерді суретке апарғанда пайда
болады, сонымен қатар, ол браузерде суреттерді бейнелеу функциясы
өшірулі болған жағдайда қажет болады.
Сурет-4.3.9.
12)
Тышқан меңзерін кестенің оң ұяшығына қойып, «Алғашқы сайт
жасау» деген мәтін енгіземіз.
Сурет-4.3.10.
13)
Мәтінді ерекшелеп алып, объектілер тақтасындағы Text ішкі
бетіндегі h1 батырмасын басамыз. Қасиеттер тақтасынан ортасы
бойынша туралау батырмасын басамыз.
205
Сурет-4.3.11.
14)
Тышқан меңзерін кестенің төртінші ұяшығына қойып, онда мәтін
үшін келесі тақырыпшаны жазамыз: «Негізгі бет». Мәтінді ерекшелеп
алып, объектілер тақтасындағы Text ішкі бетіндегі h2 батырмасын
басамыз.
Сурет-4.3.12.
15)
Меңзерді жолдың соңына апарып, BR (жаңа жолға көшу)
батырмасын басамыз.
Сурет-4.3.13.
16)
Жаңа жолға алдын ала дайындалған мәтінді кірістіреміз. Оны
тегіне аламыз.
206
Сурет-4.3.14.
17)
Мәтінді ені бойынша туралау (по ширине) жасаңыз.
18)
Нәтижесін браузер арқылы қараңыз, сонда келесідей шығуы
керек:
Сурет-4.3.15.
19)
Енді курсорды кестенің үшінші ұяшығына апарып, Common ішкі
бетіндегі Hyperlink батырмасын басамыз.
Сурет-4.3.16.
207
20)
Text өрісіне «Негізгі бет» деп (оны браузерде көреміз), Link өрісіне
index.html (бұл сілтеме үшін берілетін жол) деп жазамыз. ОК басамыз.
Сурет-4.3.17.
21)
Меңзерді тегінен кейін қойып, BR батырмасын басамыз.
Сурет-4.3.18.
22)
Осыған ұқсас тағы да екі сілтеме құрамыз, мысалы: «Сайт
туралы» және «Автор туралы» (Text өрісіне), ал Link өрісіне site.html
(Сайт туралы) және avtor.html (Автор туралы) деп жазамыз.
Сурет-4.3.19.
23)
Кетенің екінші ұяшығындағы «Алғашқы сайт жасау» мәтінін
ерекшелеп алып, жасырлған мәзірді ашамыз (беттің төменгі жағында
орналасқан бағдаршаны басу керек).
208
Сурет-4.3.20.
24) Font
ішкі бетін ашып, тақырыпшаға қаріпті береміз (ол барлық
мәтіннің h1тегінен кейін көрсетілетін болады).
25)
Содан соң, Size ішкі бетін ашып, қаріп өлшеміне - 36 таңдаймыз.
26) Text Color
ішкі бетінен түс таңдаймыз.
Сурет-4.3.21.
27)
Дәл осыған ұқсас, мақаланың тақырыпшасына және мәтініне
форматтау жасаңыз.
Сурет-4.3.22.
209
28) Page Properties
тақтасынан Links орамасын ашып, Link font
өрісінде сілтемелерге қаріп типін таңдаймыз. Содан соң, Size – (қаріп
өлшемін), Link color (сілтемелер түсін), Visited links (қолданылған
сілтемелер түсін), Rollover links (тышқанды апарғандағы сілтеме түсін),
Достарыңызбен бөлісу: |