198
6)
Содан соң, төменгі бірінші ұяшыққа сурет фонын беру керек. Ол
үшін қасиеттер тақтасындағы Bg жолының жанындағы сары бума
батырмасын басып, пайда болған терезеден суреттің атауын таңдау
керек.
Сурет-4.2.13.
7)
Нәтижесінде:
Сурет-4.2.14.
8)
Енді кестеден кейін, беттің төменгі жағына сурет кірістірейік. Ол
үшін объектілер тақтасындағы Images батырмасын басып, ашылған
тізімнен Image таңдау керек.
9)
Пайда болған терезеден қажетті суретті таңдаңыз.
Сурет-4.2.15.
Ескерту. Суреттер осы беттер орналасқан файлдармен бірге бір бумада
орналасуы керек.
199
10)
Енді беттің фонын ауыстырайық, кез келген бір суретті фон
ретінде орнатамыз. Ол үшін қасиеттер тақтасындағы Page Properties
батырмасын шертіп, Background Image өрісіне қажетті суреттің атауын,
жанындағы батырма арқылы таңдаймыз (Сурет алдын ала біздің
бумамызда орналасуы керек).
Сурет-4.2.16.
11)
Сонда келесідей пайда болады:
Сурет-4.2.17.
12)
Енді мәтінге және суретке гиперсілтеме орнатайық. Ол үшін сіз
сол құжатта тағы да екі веб бет құрып алыңыз. Мысалы, m.html және
c.html.
13)
Содан соң, гиперсілтеме кірістіретін мәтінді ерекшелеп алып,
қасиеттер тақтасындағы Link жолындағы батырманы басап, пайда
болған терезеден қажетті файлдың атауын таңдау керек.
200
Сурет-4.2.18.
14)
Дәл осылай суретке де гиперсілтеме кірістіру керек.
Сурет-4.2.19.
15)
Содан соң, нәтижесін File – Preview in Browser командасы арқылы
қарау керек.
Сурет-4.2.20.
201
Сурет-4.2.21.
16)
Құжатты сақтауды ұмытпаңыз.
Өзіндік жұмысқа арналған тапсырмалар:
«ҚҰСТАР» туралы веб-бетті құрыңыз. Құжатты өз бетіңізше
безендіріңіз.
Өзін-өзі бақылауға арналған сұрақтар:
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 батырмасын басамыз. Қасиеттер тақтасынан ортасы
бойынша туралау батырмасын басамыз.
Достарыңызбен бөлісу: |