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

    Басты бет


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

жүктеу 1.02 Mb.



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

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


  1   2   3   4   5   6

Қазақстан Республикасының

Мәдениет және ақпарат министрлігі

«Қазконтент» Акционерлік қоғамы
Dreamweaver CS6

Оқу-әдістемелік құралы

Астана, 2013
Dreamweaver CS6

2

УДК 004.

Акционер - акция иесі. Ол акционерлік қоғамға айналған белгілі бір кәсіпорынның мүлкіне ортақтаса алады. Қолында атаулы акциялары бар акционерлер “бір акция бір дауыс” деген принциппен акционерлік қоғам істерін басқаруға қатысуға құқылы.
7



ББК 32.973.202

А20


«Қазконтент» АҚ тапсырмасы бойынша шығарылды
«Dreamweaver CS6»

оқу-әдістемелік құралы


А20 «DREAMWEAVER CS6» оқу-әдістемелік құралы. – Астана:

«NewSol.kz» ЖШС, 2013. – 160 бет


Dreamweaver курсы Adobe компаниясы HTML-редакторының жұмы-

сын түсіндіруге арналады. Курс барысында бай құралдары, түрлі бап-

таулар мүмкіндігі, ыңғайлы интерфейс және өзге де ерекшеліктермен

әлемге танымал Dreamweaver HTML-редакторының жұмысы кеңінен

түсіндіріледі. Курс қалың көпшілікке арналған.
УДК 004.7

ББК 32.973.202

ISBN 978-601-7319-16-8
© Барлық құқықтары қорғалған, 2013

© «Қазконтент» АҚ, 2013

3

МАЗМҰНЫ


1.
Барлық - Шығыс Қазақстан облысы Катонқарағай ауданындағы ауыл, Коробиха ауылдық округі құрамында.
КІРІСПЕ 5

Интернет желісі қалай жұмыс істейді?

"Еңбек" - өзінің тұтынушылығын қамтамасыз етуге қажетті бүкіл заттар жиынтығын жасайтын адам әрекетінің негізгі формасы.
5

Dreamweaver CS6 бағдарламасында қандай жаңалықтар бар? 7

Жүйелік талаптар 9

Dreamweaver CS6 бағдарламасын орнату 10

Тест 13


2. Dreamweaver ИНТЕРФЕЙСІ 15

Сәлемдесу экранын пайдалану 15

Dreamweaver терезесін және панельдерін зерттеу 18

Панельдермен жұмыс істеу 20

Тест 25

3. САЙТТАРДЫ БАСҚАРУ 27



Бос веб-бет жасау 30

Файлдар мен каталогтардың атауын қою ережелері 35

Тест 36

4. CSS КӨМЕГІМЕН БЕТТЕРДІҢ МАКЕТТЕРІН ЖАСАУ 38



CSS бетінің макеті туралы мәліметтер 38

CSS беті макетінің құрылымы туралы 39

CSS ережелерін және пайдаланушылар санаттарын жасау 47

Тест 49


5.
Құрылым (лат. structura - түзіліс, орналасу, тәртіп) - объектінің тұтастығын, тепе-теңдігі мен негізгі қасиеттерінің сақталуын қамтамасыз ететін байланыстар мен қатынастар жиынтығы. Құрылым жүйе және элемент ұғымдарымен тығыз байланысты.
1)Макет (полиграфияда) - газет-журналда немесе кітапта берілетін материалдардың, мәтіннің немесе суреттердің орналасуын алдын ала көрсететін үлгі-жоба. Макет материалдарды бетте дұрыс және дәл орналастыру әрі газеттің немесе журналдың сыртқы көрінісін тартымды ету үшін қажет.
Ереже - дәстүрлі халық құқығының қайнар көзі, нормативтік-құқықтық қағидалар. Ежелгі дәуірде және орта ғасырларда жөн-жосық, ата-баба жолы деп аталған. Ережелер сырт пішімі жағынан мақал-мәтелге, қанатты сөзге ұқсас болғанымен, нақтылығымен, дәйектілігімен ерекшеленеді.
Мәліметтер (данные; data) - автоматты құралдардың көмегімен, кей жағдайда адамның қатысуымен, өңдеуге I ыңғайлы түрде берілген мағлұмат. Мәліметтердің кірістік, шығыстық, басқару, проблемалық, сандық, мәтіндік, графикалық және т.б.
ҮЛГІЛЕР 51

Тест 58


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

Тақырыптар жасау 63

Тақырыптарға CSS қолдану 67

Тест 72


7. СУРЕТТЕРМЕН ЖҰМЫС ІСТЕУ 74

Суреттерді қою 74

CSS санаттарының көмегімен суреттердің орналасуын баптау81

Тест 87


8.
Сурет, бөлмедегі сурет. Сурет әртүрлі бояулармен: акварельмен (қағазға немесе картон), майлы бояумен (холстқа, картонға, ағашқа), пастельмен (ерекше түрлі-түсті қарындаштармен қағазға немесе картонға) салынады.
СІЛТЕМЕЛЕР ЖАСАУ 89

Гиперсілтемелер туралы негізгі мәліметтер 89

Сыртқы және ішкі гиперсілтемелер 90

Ішкі сілтемені жасау 92

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

Сыртқы сілтемені жасау 98

Тест 100

9.

Сілтеме (Ссылка; the reference, link) - 1) қандай да бір объектіге арналған нұсқағыш; 2) тілдің сипатталган элементін белгілеуге пайдаланылатын тілдік құрылма; 3) хабарланған объектіні ұқсастыру.
КЕСТЕЛЕРМЕН ЖҰМЫС ІСТЕУ 102

Веб дизайндағы кестелер 102

Деректерді кестеге импорттау 102

Dreamweaver CS6

Жаңадан кесте жасау 105

CSS ережелерінің көмегімен кестелерді пішімдеу 110

Тест 117


10.
Кесте (таблица; table) - мәліметтерді жолдар мен бағаналар қиылысында орналастыру арқылы ұсыну тәсілі. Әдетте, кестенің бірінші жолы бағаналардың тақырыптарымен толтырылады. Бағаналардағы мәлімет типтері әр түрлі болуы мүмкін, бірақ бір бағанада орналасатын мәліметтер бір типті болуы қажет.
НЫСАНДАРМЕН ЖҰМЫС ІСТЕУ 119

Веб-нысандар 119

Бетке нысан қосу 121

Нысанмен жасалатын іс-әрекеттерді айқындау 131

Нысанның деректерін электронды пошта бойынша жіберу 132

Тест 135


11.
Пошта (итал. posta) - заттарды (жазба хабарларды, басылымдарды, ақша аудармаларын, т.б.) үздіксіз жинақтап, оларды көлік арқылы таратуды қамтамасыз ететін байланыс түрі. Пошта - мемлекеттік байланыс жүйесінің маңызды мекемесі.
БЕЙНЕЖАЗБАМЕН ЖҰМЫС ІСТЕУ 137

Бетке бейнежазбаны қосу 137

Тест 143

12. ВЕБ-СЕРВЕРГЕ ЖЕРГІЛІКТІ САЙТТЫ ЖҮКТЕУ 145

Тест 152

13. ҚОРЫТЫНДЫ 154

ГЛОССАРИЙ 155

ТЕСТ ЖАУАПТАРЫ 157

ҚОЛДАНЫЛҒАН АҚПАРАТ КӨЗДЕРІ 158


  1. КІРІСПЕ

Adobe Dreamweaver CS6 веб-сайттар мен қосымшаларды құруға

арналған, веб-әзірлемелер саласындағы жетекші құрал болып

табылады. Бұл бағдарламада таңбалаудың көрнекі құралдары,

қосымшаларды әзірлеу ерекшеліктері үйлескен, сондай-ақ ол код-

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

әзірлеушілер мен дизайнерлерге стандарттарға сәйкес келетін

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

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

ДЕҢГЕЙ (Уровень; layer, level) - абстракциялы дерексіздік дәреже; иерархиялық құрылым қабаты; осы желімен орындалатын белгілі бір мәселелер кешенін сипаттайтын есептеуіш желі қүрылымының логикалық қабаты,

Dreamweaver жеке web-беттерді, сол сияқты кез келген масштабтағы

сайттарды әзірлеудің толыққанды ортасы болып табылады. Құжатты

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

Режим (француз тілінде regіme, латын тілінде regіmen - басқару) - 1) мемлекеттік құрылыс, басқару тәсілі; 2) күнделікті өмір жұмыстың, демалыстың, тамақтанудың, ұйқының нақты белгіленген тәртібі; 3) белгілі мақсатқа жету үшін орнатылған ережелердің, шаралардың, нормалардың жиынтығы.

Dreamweaver бағдарламасында web-сайтты әзірлеуді және басқаруды

автоматтандырудың қуатты құралдары бар. Оның құрамына әзірлеуді

қарапайым ететін және жылдамдататын көптеген пайдалы қосалқы

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

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

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


ИНТЕРНЕТ ЖЕЛІСІ ҚАЛАЙ ЖҰМЫС ІСТЕЙДІ?

Dreamweaver CS6 бағдарламасының көмегімен веб-беттерді

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

түсініп алу пайдалы болады деп ойлаймын. Сіз күнде компьютерді

қосасыз, браузерді ашасыз және интернет желісін белсене пайдала-

насыз.

Компьютер (ағылш. computer - «есептегіш»), ЭЕМ (электрондық есептеуіш машина) - есептеулерді жүргізуге, және ақпаратты алдын ала белгіленген алгоритм бойынша қабылдау, қайта өңдеу, сақтау және нәтиже шығару үшін арналған машина.
Интернет (оқылуы [интэрнэ́т]; ағылш. Internet - International Network) - компьютерлік серверлердің бүкіләлемдік желісі.
Осы желі қалай жұмыс істейді деп ойланған боларсыз?

Қарапайым тұрғыдан қарайтын болса, интернет желісі өзара бай-

ланысты компьютерлердің көптеген санынан тұрады.

Ғаламтор (ағылш. World Wide Web, WWW) - компьютердегі мәліметтер мен құжаттарды, мультимедиа элементі бар гипермәтінді жүйелерді байланыстыратын ғаламдық тор.
Осы желідегі

компьютерлерді екі топқа бөлуге болады:

1. Клиенттер

2. Серверлер
Клиент – қандай да бір ақпаратты, мысалы сайттың бетін сұрататын

қатардағы пайдаланушы. Интернет желісінен ақпаратты алу үшін

клиентте бағдарламалық қамсыздандыру және провайдер берген

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

қамсыздандыру болып табылады.

Сервер – сұратуды қабылдайтын, өңдейтін және нәтижені

жіберетін қуатты компьютер.

Браузер серверге сұрату жасайды және жібереді, осыдан кейін

ақпаратты алады және монитордың экранында көрсетеді.

Веб шолғыш (ағылш. web browser) - интернеттегі не басқа кез келген желілердегі http://https веб сайттарын, яғни веб парақтарын (html, php және т.б.) қарап шығу, өңдеу және араларымен өту әрекеттерін орындауға арналған бағдарлама.
Пайдаланушы (Пользователь; user, subscriber) - 1) асқа жүйенің ресурстарын пайдаланатын программа немесе жүйе; 2) терминал(пернетақта мен экран) арқылы электрондық машинамен бірлесіп әрекет жасайтын адам.
Сервер (ағылш. server) - файлдар, қалталар және компьютерлердің деректері сияқты деректерге ортақ қатынасуды, сондай-ақ желі пайдаланушыларына электрондық пошта қызметтерін қамтамасыз ететін компьютер.
Серверге

өзінің бағдарламалық қамсыздандыруы орнатылған, ол ақпаратты

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

сұратуларына жауап береді.

Түрлі авторлардың түрлі операциялық жүйелері бар компьютер-

лердің алуан түрлеріне арнап жазған бағдарламалары өзара дұрыс

жұмыс істеуі үшін арнайы ережелер – Хаттамалар ойлап табыл-

ды.

Автор (лат. auctor - жасаушы, шығарушы) - көркем шығарманы, ғылыми публицистикалық туындыны, сәулеткерлік дүниелерді, жобаларды, өнертабысты жазған, әдебиет, өнер, музыка, бейнелеу, мүсін, сәулет, графика, ғылым, техника саласында шығарма жазған (жоба жасаған т.б.)
Басқа сөзбен айтқанда, хаттамалар желідегі компьютерлердің

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

Интернет желісі аясындағы әр компьютердің бірегей мекенжайы

бар, ол IP (Internet Pointer) деп аталады, мысалы: 95.56.122.9. Қандай

да бір компьютерге қосылу үшін сізге осы ІР мекенжайын білу қажет.

Алайда адамға сандық ІР мекенжайларын есте сақтау қиын, әріптік

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

атаулар жүйесі (DNS – Domain Name System) ойлап шығарылды.

Сан - мөлшерді сипаттайтын, санауда пайдаланылатын абстракт нәрсе.
Есте сақтау - жадында түту. Ес үрдістерінің бірі, жаңадан түсіп жатқан ақпаратты жадыға енгізуді белгілейді. Есте сақтау динамикасын психодиагностикалау әдістемесі - адамның есте сақтауының динамикалық сипаттарын анықтауға көмектесетін психодиагностикалық әдістемелер, көбіне бұл әдістемелер адам қаншалықты тез есте сақтайтынын және ақпаратты өндеуін анықтайды.
Атаудың домендік жүйесі (Доменная система именования; domain name system) - Интернет желісіндегі IP адрестерінде - компьютердің атын есте сақталатын домендік атауға (мысалы, www.ip.com) ауыстыру механизмі.

Дербестендірудің бұл баламалы жүйесі адамға түсініктірек, себебі

компьютерлерге ІР мекенжайы ғана емес, символдық атау немесе

домендік атау да беріледі.

Символдық атау (символическое имя; symbolic name) - алғашқы программада адрес аналогы немесе айнымалы ретінде пайдаланылатын әріп немесе әріптен басталатын символдар тізбегі.
Мысалы: www.adobe.com.

DNS-сервер – домендік мекенжайды сандық ІР мекенжайына

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

Сандық - киіз үйдің ағаш жиһаздарының бірі. Оған киім-кешек, асыл бұйымдар салынады. Қазақ шеберлері Сандықты қайың, қара тал ағаштарының сүрегінен жасаған. Сыртынан көркем етіп темір, мыс жапсырмамен, қатырма ою өрнектермен безендіріледі.
Браузер-

де домендік атауды терген сайын DNS қызметі осы атаудың қандай

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

қажет екенін анықтайды.

Енді өзіңіздің браузеріңізде осы сайттың (http://www.adobe.com/

company/contact.html) домендік атауын (URL) терген уақытта және

Еnter пернесін басқаннан кейін жауап ретінде веб-серверден осы

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

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

Осы URL мекенжайын қарастырайық. Əдеттегі URL мекенжайы үш

негізгі элементтен тұрады: Хаттама Домендік атау Жол/Файл.

1. http – клиент пен сервердің өзара әрекеттесуіне негіз болатын ережелердің жиынтығын айқындайтын хаттама. Гипермәтінді бе-

руге арналған хаттама Hyper Text Transfer Protocol деп аталады,

қысқартылған атауы – HTTP.

2. Осыдан кейін сіз ақпаратты сұратқан сервердің домендік атауы

жазылады, біздің жағдайда – adobe.

Жағдай - адам әрекетінің , жан-жануарлар тіршілігінің, табиғат пен қоғамдағы өзгерістің, оқиғаның, т.б. айналадағы ортаның ықпалына тәуелділігін білдіретін философиялық ұғым. Табиғаттағы, қоғамдағы белгілі бір өзгерісті тудырушы алғышарт есебінде де қарастырылады.
com. Мұндағы com – жоғарғы

деңгейдегі домен, adobe.com – екінші деңгейдегі домен. Домен мен

хаттаманың арасында // бөлгіші қойылады.

3. /company/contact.html – company бумасында орналасқан бізге

қажетті contact.html файлына дейінгі жол.


Dreamweaver CS6 БАҒДАРЛАМАСЫНДА ҚАНДАЙ ЖАҢАЛЫҚТАР БАР?

• Бейне оқу құралдары

Dreamweaver CS6 бағдарламасының жаңа мүмкіндіктері бойынша

бейне оқу құралдары енді Adobe TV сайтында да қолжетімді. (http://

www.adobe.com/go/learn_dwcs6_adobetv_ru).

• HTML5 бейнематериалдарын ендіру

Adobe Dreamweaver CS6 бағдарламасының көмегімен веб-бетке

HTML5 негізіндегі бейне мазмұнды ендіру мүмкіндігі.

• Сайттың жаңа диспетчері

Веб-сайттарды басқару (Сайттар ⇒ Веб-сайттарды басқару)

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

ционалды мүмкіндіктерінің көбі бұрынғыдай қалды. Қосымша

функцияларға Business Catalyst сайттарын жасау немесе импорттау

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

• Тордың негізіндегі CSS «резиналы» макеттері

Dreamweaver бағдарламасындағы тордың жаңа «резиналы»

макеттері (Жасау ⇒ Тордың «резиналы» макетін жасау) экран

мөлшерінің өзгеруіне әрекет ететін бейімделген CSS макеттерін

жасауға арналған.

• CSS3 өткелдері

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

сол сияқты CSS өткелдері (Терезе ⇒ CSS өткелдері) атты жаңа па-

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

• Бірнеше CSS санаттарын таңдау

Енді бір элементке бірнеше CSS санатын қолдануға болады.

Таңдау (белгілеу, ерекшелеу) (Выбор (выделение, маркирование; selecting) Windows ортасында - жұмыс үстелінің кез келген объектісіне тышқан меңзерін алып барып, оны шерту операциясы. Осылай белгіленген объект түсі өзгеріп ерекшеленеді.
Ол

үшін элементті бөліп шығару, «Бірнеше санатты таңдау» диалогтық

терезесін ашу және санаттарды таңдау қажет.

• PhoneGap Build бағдарламасымен интеграциялау

Жаңа таңқаларлық PhoneGap сервисімен тікелей интеграциялаудың

арқасында Dreamweaver CS6 пайдаланушылары HTML, CSS және

JavaScript бағдарламаларымен жұмыс істеу дағдыларын пайдалана

отырып, мобильді құрылғыларға арналған өздерінің қосымшаларын

жасай алады.

HTML (ағылш. Hypertext Markup Language - «еренмәтін белгілеу тілі») - вебшолғышта көрсетілуге арнаулы еренмәтін мен басқа ақпараттан тұратын веббеттерді жасауға арналған белгілеу тілі.

• jQuery Mobile 1.0 жəне jQuery Mobile түрлі-түсті үлгілері

Dreamweaver CS6 бағдарламасы jQuery 1.6.4 бағдарламасымен,

сондай-ақ jQuery Mobile 1.0. файлдарымен бірге жүреді.

• Веб-шрифттер

Енді Dreamweaver бағдарламасында безендендіруге арналған веб-

шрифттерді пайдалануға болады (мысалы, Google немесе Typekit).

• PSD жеңілдетілген оңтайландыру

Dreamweaver CS5 бағдарламасының «-суретті қарау» атты

диалогтық терезесі енді «-суретті оңтайландыру» диалогтық терезесі

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

суретті таңдаңыз да қасиеттер инспекторындағы «-суреттің

параметрлерін өзгерту» пернесін басыңыз. CS5 бағдарламасының

«-суретті қарау» атты алдыңғы диалогтық терезесіндегі кейбір пара-

метрлер енді қасиеттердің инспекторында көрсетіледі.

• FTP бойынша беру үшін жасалған артықшылықтар

Dreamweaver көп арналы беруді пайдаланады: бөлініп шығарылған

файлдар бір уақытта бірнеше арна бойынша беріледі. Сондай-ақ

Dreamweaver файлдарды беру үшін алу және орналастыру операция-

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

Файл (ағылш. File) - дерек сақтаудың негізгі бірлігі болып табылады.


ЖҮЙЕЛІК ТАЛАПТАР

Dreamweaver бағдарламасын орнатпас бұрын компьютеріңіздің

ең төмен жүйелік талаптарға сәйкес келетініне көз жеткізіп алу қажет.

Dreamweaver CS6 бағдарламасын Windows және Mac OS операциялық

жүйелері қолдайды.

• windows басқаратын компьютерлер үшін

Сізде келесі ең төмен конфигурациясы бар компьютер болуы тиіс:

• Intel Pentium 4 немесе AMD Athlon 64 процессоры;

• SP 1 жаңарту пакеті бар Microsoft Windows 7, Windows Vista не-

месе SP 3 не одан жоғары жаңарту пакеті бар Windows XP;

Microsoft Corporation (/maɪkrəˌsɒft/) - дүниежүзіндегі ең ірі компаниялардың бірі. Бағдарламалық қамсыздандыру өндірісінің және сервер мен жеке компьютерлер үшін интернет технологияларды құруы мен қызметін көрсететін АҚШ-та тіркелген көпұлтаралық компания.

• 512 МБ-тық жедел жады;

• Қатты дискте орнатуға қажетті 1 Гб-тық бос кеңістік;

Кеңістік - философия, математика және физика секілді салаларды пайдаланылатын күрделі ұғым. Күнделікті өмірде іс-қимыл алаңы, барлық нәрселерді қамтитын ортақ ыдыс, әлдебір жүйе жай-жапсары сезініп түсініледі.
орнатуға

қажетті қосымша бос кеңістік (сақтауға арналған алынбалы флэш

құрылғыларына орнатылмайды);

• 16-разрядты бейне картасы бар монитордың айқындығы

1280x800;

• Java Runtime Environment 1.6 (ішіне қосылған);

• DVD-ROM жетегі;

• HTML5 медиаконтентін ойнатуға қажетті QuickTime 7.6.6

бағдарламалық қамсыздандыруы;

• Онлайн-қызметтерді іске қосу, тіркеу және қолжетімділік алу

үшін Интернетке қосылу қажет.

mac OS басқаратын компьютерлер үшін

Сізде келесі ең төмен конфигурациясы бар компьютер болуы тиіс:

• Intel көп ядролы процессоры;

• Mac OS X 10.6.8 немесе 10.7 және одан жоғары;

• 512 Мб-тық жедел жады;

• Қатты дискте орнатуға қажетті 1,8 Гб-тық бос кеңістік; орнатуға

қажетті қосымша бос кеңістік;

• 16-разрядты бейне картасы бар монитордың айқындығы

1280x800;

• Java Runtime Environment 1.6;

• DVD-ROM жетегі;

• HTML5 медиаконтентін ойнатуға қажетті QuickTime 7.6.6

бағдарламалық қамсыздандыруы;

• Онлайн-қызметтерді іске қосу, тіркеу және қолжетімділік алу

үшін Интернетке қосылу қажет.
Dreamweaver CS6 БАҒДАРЛАМАСЫН ОРНАТУ

Dreamweaver бағдарламасын орнату қиын емес. Компьютеріңіздің

DVD жетегіне Dreamweaver CS6 бағдарламасы бар дискіңізді саласыз

немесе бағдарламаны онлайн режимде компьютеріңізге жүктейсіз,

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

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



Орнату үрдісі

1. DVD жетегіне Dreamweaver CS6 бағдарламасы бар дискті

салыңыз немесе Dreamweaver CS6 бағдарламасын онлайн режимде

компьютерге жүктеңіз.

2. Қажет болса, DVD таңбасын екі рет тінтуірмен басыңыз неме-

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

осыдан кейін орнату таңбасын екі рет басыңыз (1.

Таңба (знак; character, symbol) - есептеуіш техникасында қолданылатын алфавиттің жеке символы. Арифметикалық амалдар таңбасы (знак арифметической операции; arithmetic operation character) - арифметикалық амалдарды анықтайтын алфавит белгісі (әдетте, +,-,*,/ ).
1-сурет). Adobe

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

www.adobe.com бетіне өтіп, «Buy» мәзірін басыңыз да Dreamweaver

CS6 бағдарламасын таңдаңыз. Сізге несие картасы және ұтқыр интер-

нет қажет болады.

1.1-сурет. Dreamweaver бағдарламасын орнату таңбасы

3. Өнімді орнату үшін экрандағы нұсқаулықтарды орындаңыз. Ор-

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

сұрайды, сериялық нөмірді енгізіңіз, қалаған тілді көрсетіңіз, Adobe

ID енгізіңіз не жасаңыз немесе бұл қадамды өткізіп жіберіңіз және

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

көрсетіңіз (1.

Серия (латынша series - қатар) - таужыныстардың мейлінше қалың қабатын қамтитын және біртұтас шөгінділік жанартаулық немесе тектоникалық оралымға сәйкес келетін неғұрлым ірі стратиграфиялық бөлімше; бірнеше свиталарға жіктеледі.
2-сурет).



1.2-сурет. Dreamweaver бағдарламасын орнату көмекшісі


ТЕСТ

1. Dreamweaver деген не?

a. Дыбыстар редакторы

b. 3D редактор

c. HTML редактор

d. Веб-сервер

2. Dreamweaver бағдарламасын қай компания сатады?

a. Microsoft

b. Apple

c. Adobe


d. Macromedia

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

ның соңғы нұсқасы болып табылады:

a. Adobe Dreamweaver CS6

b. Adobe Dreamweaver CS5.5

c. Macromedia Dreamweaver 8

d. Microsoft Dreamweaver CS 10



4. Dreamweaver қандай операциялық жүйелерде жұмыс істей

алады?

a. Mac OS X, iPhone OS

b. Windows, Mac OS X, Unix, Linux.

c. Mac OS X

d. Mac OS X, Microsoft Windows

5. Интернет желісіне қосылған әр компьютерде бірегей мекенжай

бар, ол қалай аталады?

a. Хаттама

b. Сервер

c. IP


d. DNS

Dreamweaver CS6

14

6. Dreamweaver төменде аталғандардың қайсысын жасау үшін

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

a. HTML, XML және CSS файлдар

b. PHP, Javaжәне ASP Нысанның соңы.NET

c. MOV, MP3 және JPEG

d. MOV, MP3 және JPEG басқа жоғарыда аталғандардың барлығы

7. __________ – түрлі бағдарламалардың арасында деректермен

алмасуды айқындайтын арнайы ережелер (келісімдер).

a. Домендік атаулар жүйесі

b. Хаттамалар

c. IP мекенжайлары

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

8. ________ сөзінің жалпы сипаттамасына сай бұл – ортақ

атрибуттары бар, ортақ дизайны және құрылымы бар немесе

ортақ мақсаты бар байланысқан құжаттардың жиынтығы.

Атаулар(лат. nomenclatura) - нысандар мен құбылыстарды ғылыми сипаттауда қолданылатын принциптер мен ережелердің жүйесі.
Жиынтық - геологияда: жарылымдармен шектеле отырып, бірқалыпты қатпарланған қат-қабаттар тобының немесе қатпарлардың бір бағытта ғана еңістенген осьтік жазықтықтарының бірлестігі.
Мақсат - белгілі бір межеге қол жеткізуге бағытталған әрекеттің ой-санадағы көрінісі. Мақсат ойлау нәтижесінде болашақты алдын ала болжау арқылы туатын мұрат, ішкі қозғаушы күшті білдіреді. Мақсатқа жету үшін әр түрлі іс-әрекеттер мен қимылдар жасалады.

a. Index


b. Интернет

c. Веб-сайт

d. Үй беті

9. Қандай да бір ақпаратты, мысалы сайттың бетін сұрататын

компьютер немесе қатардағы пайдаланушы.

a. Клиент

b. Сервер

c. Пайдаланушы

d. Провайдер

10. Ақпаратты сақтайтын және сұрататын компьютерге нәтижені

жіберетін компьютер немесе машина.

a. Лэптоп

b. Клиент

c. Сервер

d. Сарапшы
2. Dreamweaver ИНТЕРФЕЙСІ

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

ды редакциялау және бір-бірімен байланысты көптеген құжаттарды

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

құралды жасауға тырысты.

СƏЛЕМДЕСУ ЭКРАНЫН ПАЙДАЛАНУ

Dreamweaver бағдарламасының welcome Screen (Сәлемдесу

экраны) терезесі сіз жақында жұмыс істеген беттерге жылдам қол

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

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

береді (2.1-сурет).



2.1-сурет. Сәлемдесу экраны

Сәлемдесу экраны Dreamweaver бағдарламасын іске қосқан кезде

және ашық құжаттар болмаған кезде шығады. Оны жасырып қоюға,

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

Сәлемдесу экраны жасырылып тұрғанда және ашық құжаттар

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

Сәлемдесу экранын жасыру

Сәлемдесу экранындағы «Don’t show again» жалаушасын басыңыз.

Сәлемдесу экранын көрсету

1. edit ⇒ Preferences мәзірін таңдаңыз.

2. General санатында Show welcome Screen параметрін таңдаңыз.

Сәлемдесу экранында табатыныңыз:

Open a recent Item: Сіз жұмыс істеген бірнеше соңғы құжаттардың

тізімі сол жақ шеткі бұрышта (бірінші бағанда) көрсетіледі, сондай-ақ

сіз Open пернесін басу арқылы басқа файлды аша аласыз.

Create New: HTML беттерге қоса сіз құжаттың CSS, JavaScript

және XML сияқты басқа көптеген пішімдерінің бірін таңдай аласыз.

Dreamweaver веб-әзірлемелерге арналған құрал ғана емес, тамаша

мәтіндік редактор болып табылады, оның HTML файлдармен жұмыс

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

сіз төмендегі «Dreamweaver Site» сілтемесін басу арқылы жаңа сайт-

ты айқындай аласыз немесе «More» бумасын басып, файл жасаудың

жаңа пішімдерін ала аласыз.

Top Features (videos): Сәлемдесу экранының оң жақ бөлігінде

Dreamweaver CS6 бағдарламасының жаңа мүмкіндіктерін сипаттай-

тын бейнежазбаға берілетін сілтемелер жазылған өріс бар. Бейнежаз-

балар Adobe компаниясының веб-сайтында орналасқан және олардың

біреуін басқан кезде Dreamweaver сізге бейнежазбаға қолжетімділік

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



2.2-сурет. Жұмыс ортасының сызбасы


Dreamweaver ТЕРЕЗЕСІН ЖƏНЕ ПАНЕЛЬДЕРІН ЗЕРТТЕУ

Ескертпе. Dreamweaver көптеген басқа панельдер, инспектор-

лар жəне терезелер мүмкіндіктерін береді. Панельдерді, инспектор-

ларды жəне терезелерді ашу үшін Window мəзірін пайдаланыңыз.

2.1-кесте. Панельдер

А Мәзір панелі

B Қосымшалар панелі

C Жұмыс кеңістігінің ауыстырып-қосқышы

D Document Құрал-саймандар панелі

Е Панельдер тобы

F Құжаттың терезесі

G Тегтер селекторы

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

J Файлдар (Files) панелі

K Ахуал панелі

L Code көрінісі

m Design көрінісі



  • Қосымшалар панелі

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

ауыстырып-қосқышы, мәзір және басқа да басқару элементтері

орналасқан.

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


  • Document Құрал-саймандар панелі

Бұл панельде құжаттың терезесінде көрсетудің түрлі нұсқаларын

(Design, Code немесе Split көріністері сияқты), қараудың түрлі

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

қолданылатын операцияларды көрсететін пернелер бар.

Перне (Клавиша; key) - 1) пернетақтадағы бір перне; оны басқанда таңбаға сәйкес код қалыптасады да, ол экранға шығады немесе белгілі бір әрекет іске асады; 2) криптографиялық кілт - ақпаратты шифрлау және кері шифрлау үшін пайдаланылатын құпия код (символдар жинағы); 3) кілт - мәліметтер файлындағы жазбаны немесе жазбалар тобын ұқсастырғыш.



  • Панельдер топтары

Жұмысты басқаруға және өзгерістер енгізуге мүмкіндік береді. Мы-

сал ретінде Insert, CSS Styles және Files панельдерін келтіруге бола-

ды. Панельді ашып қарау үшін оның қосымша бетін екі рет басыңыз.


  • Құжаттың терезесі

Бұл терезе құжаттың жасалуына және редакциялануына қарай

ағымдағы құжатты көрсетеді.



  • Тегтер селекторы

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

да орналасқан. Ағымдағы бөліп алудың маңайындағы тегтердің ие-

рархиясын көрсетеді. Тегті және оның бүкіл мазмұнын таңдау үшін

иерархиядағы қажетті тегті басыңыз.



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

Таңдалған объектінің немесе мәтіннің көптеген қасиеттерін көруге

және өзгертуге мүмкіндік береді. Əр объектінің түрлі қасиеттері бар.

Бұл панель әдетте жұмыс кеңістігінің төменгі бөлігінде орналаса-

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

таңдалған элементке байланысты өзгереді.

Әдет- адамның күнбе-күнгі тіршілік қажетіне байланысты қалыптасқан тұрақты мінез, іс-қимыл ерекшелігі. “Ауру қалса да әдет қалмайды” деу, әдеттің тұрақты қажеттілікке айналғанын көрсетеді. Әдеттің ұнамды, ұнамсыз түрлері болады.
Мазмұн (Оглавление; table of Contents) - 1) мәтіндік құжаттың құрылымдық элементі. Беттердің нөмірі көрсетілген тақырыптардың тізімінен тұрады; 2) объектілердің атауы мен адресінен тұратын кесте.
Инспектор - өздеріне бағынышты органдардың, жеке тұлғалардың іс-әрекетінің дұрыстығын бақылайтын не қайсыбір арнаулы салада заңдардың орындалуын қадағалайтын лауазымды тұлға; мысалы, қаржы инспекторы.


  • Файлдар (Files) панелі

Файлдар мен бумалар Dreamweaver сайтының бөлігі болған

уақытта немесе қашықтағы серверде орналасқанда оларды басқаруға

мүмкіндік береді. Сондай-ақ Files панелі Windows Explorer (Windows)

және Finder (Mac OS) сияқты жергілікті дисктегі барлық файлдарға

қолжетімділік алуға мүмкіндік береді.

ДИСК (Disk) - шығарып оку-жазу бастиегіне қатысты айналдырылатын диск формасындағы мәліметтер. тасуышы; ақпаратты сақтау және қайта шығару қасиеті бар жұқа материалмен қапталған дөңгелек пластинка түрінде жасалған мәлімет тасуыш құрылғы.


  • Ахуал панелі

Құжат терезесінің төменгі бөлігіндегі ахуал панелінде жасалатын

құжат туралы қосымша мәліметтер болады.



  • Code көрінісі

HTML, JavaScript қосымшаларын, PHP сияқты серверлік кодты не-

месе ColdFusion (CFML) белгілеу тілін, сондай-ақ кез келген басқа

түрге жататын кодты енгізуге және редакциялауға арналған қолмен

кодтау ортасы.

Белгілеу (Наметка) - келесі өндеулерді оңайлататын, үзындығы бойынша болімдерге болетін дайындама бетіне таңбалы ойықтар қалдыратын комекші операция; тесігі бар согылмаларды алу үшін қолданатын операция; бет пішіннің, өзара орналасудың және басқа да ауытқулардың шақтамаларын график түріндегі сызбаларда корсету; механикалық өндеу операцияларының алдында жасалатын технологиялық операция қүрамына кіреді. Дайындаманың бетіне тетіктің қарамын, тесіктердің бетін не өңделуге тиісті орындарды белгілейтін нүктелер, сызықтар, сызықіздер салу.Белгілеу механикалық өндеу сапасын арттыру үшін жасалады; бүйымдардың параметрлерін сызбаларда белгілеу.
JavaScript (/ˈdʒɑːvɑːˌskrɪpt/) - объектіге бағытталған скрипттік (немесе сценарийлер) бағдарламалау тілі. ECMAScript тілінің диалекті болып табылады. ECMA-262 спецификациясының Conformance бөліміне сәйкес ECMAScript спецификациясының жүзеге асқан өнімі.



  • Design көрінісі

Қосымшаларды көрнекі көрсетуге, редакциялауға және жылдам

әзірлеуге арналған әзірлеу ортасы. Бұл режимде Dreamweaver брау-

зерде көрсетілетін беттің көрінісіне ұқсайтын құжаттың толығымен редакцияланатын көрнекі көрінісін көрсетеді.
ПАНЕЛЬДЕРМЕН ЖҰМЫС ІСТЕУ

Сіз Dreamweaver бағдарламасының мәзірінен пәрмендерге қол-

жетімділік ала аласыз немесе кез келген тәсілмен көрсетілетін, жа-

сырылатын, ендірілетін және түйісетін, тіпті екінші немесе үшінші

мониторға оңай тасымалданатын құрал-саймандар панельдерінің

көмегімен де бұл қолжетімділікті алуға болады.



2.3-сурет. Панельдер

window мәзірінде барлық қолжетімді панельдер көрсетіледі. Егер

сіз экранда белгілі бір панельді көрмесеңіз, оны window мәзірінен

таңдаңыз – көрсетілген жолдың жанындағы жерде панельдің

ашылғанын білдіретін жалауша пайда болады. Егер бір панельді

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

Мұндай жағдайларда window мәзірінде қажетті панельді таңдау

жеткілікті, сонда ол басқаларының үстінен көрінеді.

Панельді жаба тұру

2.4-сурет. Панельді жаба тұру

Басқа панельдерге жұмыс кеңістігін босату үшін немесе басқа

элементтер жауып тұратын оның бөліктеріне қолжетімділік алу

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

Dreamweaver интерфейсін жиып немесе ашып қоя аласыз. Панельді жиып қою үшін оның таңбасын екі рет басыңыз. Дәл сол тәсілмен панель қайта ашылады.

Панельді жию немесе ашу үшін панельдің таңбасын екі рет басыңыз

Құбылмалы панель жасау

2.5-сурет. Құбылмалы панель

Басқа панельдермен топтастырылған панельді құбылмалы етсеңіз,

оны жеке тасымалдауға болады. Ол үшін оның таңбасын басып, топ-

тан тасымалдап шығару қажет (2.5 -сурет).
Панельдің таңбасын басып, оны топтан тасымалдап шығару

Жұмыс кеңістігін таңдау

2.6-сурет. workspace ашылатын тізімі

Дайын жұмыс кеңістіктерінің бірін пайдалану Dreamweaver

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

табылады. Сарапшылар бұл кеңістіктерді қажетті құрал-саймандарды

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

Dreamweaver CS6 бағдарламасына он бір дайын жұмыс кеңістігі

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

workspace ашылатын тізімінен қажеттісін таңдаңыз.

Dreamweaver бағдарламасының бұрынғы пайдаланушылары

бағдарламаның алдыңғы нұсқаларында болған құрал-саймандар

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

Coder жұмыс кеңістігінде HTML-кодты редакциялау аймағы және

тиісті құрал-саймандар көрсетіледі.

Designer жұмыс кеңістігі көрнекі жобалаушыларға (дизайнерлерге)

арналған оңтайлы жұмыс ортасын қамтамасыз етеді.



Баптауларды дербестендіру

2.7-сурет. Пайдаланушының жұмыс кеңістігін сақтау

Dreamweaver бағдарламасымен жұмыс істеуді жалғастыра отырып,

сіз қызметтің әр түріне арналған панельдердің меншік оңтайлы жұмыс

кеңістігін жасайсыз.

Меншік - жеке адамдарға немесе ұжымдарға тиесілі өндіріс құрал-жабдығы мен өнімдері, қаражат.
Сіз бұл баптауларды пайдаланушының жұмыс

кеңістігінде кез келген атаумен сақтай аласыз.

Оны сақтау үшін, қосымшалар панеліндегі workspace ашылатын

тізімінен New workspace пәрменін таңдаңыз (2.7--сурет).



Беттерді көрсету режимдері

2.8-сурет. Беттерді көрсету режимдері


Dreamweaver бағдарламасы кодтаушылар мен дизайнерлерге

(жобалаушыларға) арналған мамандандырылған көріністерді (2.8 -су-

рет), сондай-ақ қос режимді біріктіретін күрделі нұсқасын ұсынады.

Code көрінісі – толықтай HTML-кодты редакциялауға бағытталған

Dreamweaver бағдарламасының жұмыс кеңістігі.

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

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

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

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

ысу үшін құрал-саймандар панеліндегі Split деген пернені басыңыз.

Жаңа жалпақ панельді мониторлардың артықшылықтарын пайдалану

үшін Dreamweaver бағдарламасының баптауларында жұмыс кеңістігі

тігінен бөлінген.

Сонымен қатар Сіз view мәзіріндегі тігінен бөлу функциясын өшіру

арқылы терезелерді көлденеңінен орналастыра аласыз. Оған қайта

оралу үшін view ⇒ Split vertically мәзірінің пәрменін орындаңыз.

Design көрінісі браузердегі интерфейске ұқсас беттің редакцияла-

натын интерфейсін көрсетеді. Design көрінісіне ауысу үшін құрал-

саймандар панеліндегі Design деген пернені басыңыз.


ТЕСТ

1. Кез келген панельді көрсету немесе жасыру үшін пәрменге

қалай қолжетімділік алуға болады?

a. Window мәзірінен

b. Commands мәзірінен

c. Insert мәзірінен

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

2. Пайдаланушылар Dreamweaver бағдарламасында неше

көрініспен жұмыс істей алады?

a. 1


b. 2

c. 3


d. 4

3. Жұмыс кеңістігіне нені сақтауға болады?

a. HTML беті

b. Таңдалған панельдер және олардың орналасуы

c. CSS стильдер

d. HTML үлгілер

4. Code, Design және Split көріністерінің арасында ауысу

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

a. Files панелінен

b. Тегтер селекторынан

c. Document құралдар панелінен

d. Edit мәзірінен

5. Таңдалған объектілердің немесе мәтіннің ағымдағы пішімдеуін

немесе қасиеттерін қарау және өзгерту үшін сіз төменде

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

a. Insert панелі

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

c. Files панелі

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

6. _____________ кодты қолмен жазу және редакциялау мүмкіндігін береді.

a. Design көрінісі

b. Split көрінісі

c. Code көрінісі

d. Designer жұмыс кеңістігі

7. Split көрінісі дегеніміз:

a. кодты редакциялауға арналған жұмыс кеңістігі

b. беттің редакцияланатын интерфейсін көрнекі көрсететін жұмыс

кеңістігі

c. беттің бастапқы кодын және оның -суретін бір уақытта көруге

мүмкіндік беретін жұмыс кеңістігі

d. файлдар мен бумалар сайттың бір бөлігі болып табылған уақытта

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



8. Бұл көріністің көмегімен сіз беттің браузердегі интерфейсіне

ұқсас редакцияланатын интерфейсін көре аласыз.

a. Code


b. Split

c. Classic

d. Design

9. Жеке панельдің орналасқан орнын ауыстырмай, оны жию

немесе ашу үшін не істеу қажет?

a. Ctrl Shift Q пернелерінің арнайы үйлесімін басу

b. Таңбасын басып топтан тасымалдау

c. Тінтуірді панельдің таңбасына әкелу

d.

Тышқан (ағылш. mouse - тышқан) - бейнебетте көрсетілген белгілі бір тілдесу элементтерін меңзеп, оларды бөлектеу үшін пайдаланушы қолданатын құрылғы.
Панельдің таңбасын екі рет басу

10. Бұл панель жергілікті сайттың мазмұнын басқару және оларды қашықтағы серверге орналастыру мүмкіндігін береді.

a. Insert панелі

b. Assets панелі

c. Files панелі

d. CSS Styles панелі

3. САЙТТАРДЫ БАСҚАРУ

Dreamweaver бағдарламасында сайтты айқындау

Келесі сабақтарда сіз Dreamweaver бағдарламасындағы сайтпен

жұмыс істейтін боласыз. Сіз басынан бастап веб-беттерді жасауды

және компьютеріңіздің қатты дискінде сақталатын қолда бар файл-

дар мен ресурстарды пайдалануды үйренесіз.

Ресурстар (французша ressourse - құрал-жабдық, мүмкіндік), босалқы қорлар - табыс, ақшалай және басқа қаражат, құндылықтар мен олардың көздері.
Осының барлығы бірге

жергілікті сайт болып табылады. Сайтты орналастыруға дайын болған

кезіңізде (12-тарауды қараңыз) өзіңіздің провайдеріңіздің серверіне

файлдарды жүктеп, қашықтағы сайтты жасайсыз. Жергілікті және

қашықтағы сайттардың ішіне салынған бумалар мен файлдар әдетте

бір-бірінің дәл көшірмелері болып табылады.

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

1. Adobe Dreamweaver CS6 бағдарламасын іске қосыңыз.

2. Мәзірдің Site ⇒ New Site пәрменін орындаңыз.

Site Setup диалогтық терезесі ашылады (3.1--сурет).

3.1-сурет. Site Setup диалогтық терезесі

Dreamweaver CS6 бағдарламасында стандартты сайтты жасау үшін

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

Files панелінде көрсетіледі.

Жоба - жасалуға, қайта құрылуға, қалпына келтірілуге, салынуға тиісті кәсіпорындар мен ғимараттардың, қондырғылар мен жабдықтардың, аппараттардың, т.б. макеттері, есептеулері және принципті дәлелдері көрсетілген техникалық құжаттар жиынтығы.
Бұл атау тек өзіңіздің пайдалануыңызға

ғана арналған, сондықтан сіз сайтты қалауыңызша атай аласыз.

Сайттың мақсаттарын нақты сипаттайтын атауды пайдаланған жөн.

3. Site Name (Сайттың атауы) бағанына my First Site жазуын

енгізіңіз.

4. Local Site Folder енгізу бағанының жанындағы таңбасын

басыңыз. Choose root Folder диалогтық терезесі ашылады, өзіңізге

ыңғайлы болатын кез келген директорияда өзіңіздің сайтыңызға

арналған бума жасаңыз, оны my First Site деп атаңыз, оны бөліп

алыңыз және Ашу кейін Сақтау пернесін басыңыз.

Енді Save пернесін басып, жаңа сайтпен жұмыс істей бастаса да

болатын еді, бірақ тағы біраз пайдалы ақпаратты біліп алғаныңыз жөн.

5. Тізімді ашу үшін advanced Settings санатының

жанындағы бағыт тілін басыңыз. Local Info тармағын таңдаңыз (3.2-

сурет).

3.2-сурет. Local Info тізімін таңдау кезіндегі Site Setup

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

Сайттарды басқарудың сауатты саясатының мәні – файлдардың

сан алуан түрлерін түрлі бумаларда сақтау. Мысалы, көптеген сайттарда -суреттерге, PDF-файлдарға, бейне жазбаларға және т.б. арналған меншікті бумалар бар. Dreamweaver бағдарламасы алдын ала

бапталған баптаулар бойынша -суреттерге арналған буманы көрсетуге

мүмкіндік бере отырып, осыған көмектеседі. Кейін компьютердің басқа жерлерінен -суреттерді қоя бастағаныңызда Dreamweaver –суреттерді сайттың құрылымына автоматты түрде ауыстыра отырып, осы баптауды пайдаланатын болады.

6. Default Images Folder енгізу бағанының жанындағы таңбасын

басыңыз. Диалогтық терезе ашылады, My First Site бумасына өтіңіз,

оның ішінде images бумасын жасаңыз, оны бөліп алыңыз да Ашу, кейін Сақтау пернесін басыңыз.

ДИАЛОГТЫҚ ТЕРЕЗЕ(Диалоговое окно, диалоговый бокс; dialog box, win¬dow) - Windows ортасында - әрекет жасау үшін ақпарат енгізу немесе параметрлерді көрсету қажет болған жағдайда дисплей бетінде пайда болатын терезе; программа керекті мәліметгі сұрарда экранға шығатын тіктөртбүрышты шағын терезе.



3.3-сурет

Сонымен сіз жаңа сайтпен жұмыс істей бастауға қажетті бүкіл

ақпаратты көрсеттіңіз, кейінгі сабақтарда қашықтағы сайтқа файлдар-

ды жүктеу және динамикалық веб-беттерді тексеру мүмкіндігіне ие

болу үшін сіз көбірек ақпарат қосасыз.

7. Site Setup диалогтық терезесінде Save пернесін басыңыз.

Енді Files панеліндегі сайттардың тізімінде my First Site атты сайт

қолжетімді.

3.4-сурет. Files панелі



БОС ВЕБ-БЕТ ЖАСАУ

Web-дизайн тәжiрибесінде сайттың бастапқы бетiне index.html

немесе default.html (серверге байланысты) есiмiн тағайындауға

қабылдаған.

1. Мәзірдің File ⇒ New пәрменін орындаңыз.

2. New Document диалогтық терезесіндегі (3.5--сурет) бірінші

тізімнен Blank Page нұсқасын таңдаңыз.

3. Page Type тізімінен HTmL нұсқасын және Layout тізімінен



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

4. DocType тізімінен HTmL 5 нұсқасын таңдаңыз.



3.5-сурет. New Document диалогтық терезесі

5. Create сілтемесін басыңыз. Құжаттың жаңа терезесі ашылады

(3.6--сурет). Ол алдын ала бапталған үш көріністің (Code, Design не-

месе Split) біреуінде көрсетілуі мүмкін.

3.6-сурет. Құжаттың жаңа терезесі

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

ды myfi rstpage.html деп атаңыз (3.7--сурет).



3.7-сурет. Файлды сақтау терезесі

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

3.8-сурет. Files панелі


ФАЙЛДАР МЕН КАТАЛОГТАРДЫҢ АТАУЫН ҚОЮ ЕРЕЖЕЛЕРІ

Web-сайтты әзірлеу барысында файлдар мен каталогтардың атау-

ын қою жөніндегі келесі ережелерді ұстанған жөн:

латиница символдары және сандар пайдаланылуы тиіс (ки-

риллица символдарын, бос орын сияқты арнайы және қосалқы

символдарды пайдаланбаңыз);

Латын әліпбиі, әлемде кеңінен қолданылады. Б.з.б. 7 ғасырдада Римде грек және этрус әліпбиінің тармағы ретінде пайда болып, б.з. 1 ғасырында қалыптасты. Жазу оңнан солға немесе солдан оңға қарай (брустрофедон бойынша) жазылып, бағыты әрдайым алмасып отырған. Б.з.б.

• символдардың тек төменгі регистрін ғана пайдаланыңыз;

• файлдар мен каталогтарға мәнді атаулар қойыңыз (бұл

жағдайда URL сайтқа келушіге ресурстың құрылымын жылдам

меңгеруге көмектеседі).

Осы қарапайым ережелерді сақтау жаңадан бастап жүрген Web-

сайт әзірлеушісіне жариялау барысында және ресурспен одан әрі

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

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


ТЕСТ

1. Dreamweaver бағдарламасында сайтты айқындау үшін

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

a. домендік атау / IP мекенжайы

b. логин / пароль

c. сайттың атауы / үй беті

d. сайттың атауы / түбірлік бума

2. Сіздің сайтыңыздың бас беті қалай аталуға тиіс?

a. home.html

b. кез келген мәтін

c. index.html

d. frontpage.html

3. Жергілікті сайтты айқындауды бастау үшін, Dreamweaver

бағдарламасын іске қосқаннан кейін:

a.

Бастау, өзен бастауы - өзеннің бастау алатын орны (картада - нүкте); әдетте, ағынның тұрақты арнасы басталатын орынға сәйкес келеді. Өзеннің бастауы жер астынан қайнап шығатын бұлақ, батпақ, көл, мұздық немесе екі саланың косылатын орны болуы мүмкін.
Site мәзірінде Manage Sites пәрменін орындап, New Site пернесін

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

b. мәзірдің File ⇒ New пәрменін орындап, Create пернесін басуға

болады


c. мәзірдің Site ⇒ New Site пәрменін орындап, Save пернесін басуға

болады


d. а және с нұсқалары

4. Жаңа сайттарды басқару және жасау үшін қай панельді

пайдалануға болады?

a. Document құралдар панелі

b. Мәзір панелі

c. Ахуал панелі

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

5. Жергілікті сайт дегеніміз не?

a. Жергілікті компьютердегі сайт

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

c. Веб-сервердегі деректер қоймасы

d. Веб-сервер

6. Қашықтағы сайт дегеніміз не?

a. Жергілікті компьютердегі сайт

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

c. Веб-сервердегі деректер қоймасы

d. Веб-сервер

7. Веб-сайтты жасауда не ең басты болып табылады?

a. Жоғары сапалы -суреттерді қамтамасыз ету

b. Тиісті мәтінді алу

c. Сайттың құрылымын жоспарлау

d. HTML кодын енгізу

8. manage Sites не істеуге мүмкіндік береді?

a. Файлдарға жылдам қолжетімділік береді

b. Сервердің баптауларын белгілеу мүмкіндігін береді

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

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

9. Бүкіл сайт салынатын бума қалай аталады?

a. Индекс бумасы

b. Түбірлік бума

c. Веб-сайттың бумасы

d. Негізгі бума

10. Жаңа бет жасау үшін:

a. Мәзірдің File ⇒ New пәрменін орындаңыз

b. Ctrl N пернелерін қатар басыңыз

c. Files панеліндегі контекстілік мәзірде New File таңдаңыз

d. Жоғарыда аталғандардың барлығы
4. CSS КӨМЕГІМЕН БЕТТЕРДІҢ МАКЕТТЕРІН ЖАСАУ

CSS БЕТІНІҢ МАКЕТІ ТУРАЛЫ МƏЛІМЕТТЕР

CSS бетінің макетінде веб-беттің мазмұнын ұйымдастыру үшін

дәстүрлі кестелер мен фреймдердің орнына стильдердің каскадты

кестелерінің пішімі пайдаланылады. Div тегі, яғни көптеген жағдайларда мәтінге, -суреттерге және беттің басқа да элементтеріне арналған контейнер ретінде жұмыс істейтін HTML тегі CSS макетінің негізін салушы блок болып табылады.

Контейнер - автомобиль, темір жол, теңіз, әуе көлігімен жүктерді тасымалдауға және бір көлік құралынан екінші көлік құралына механикаландырылған түсіріп-тиеу үшін икемдестірілген стандартты көп айналымды ыдыс (тара).
CSS макетін жасаған кезде Div тегтері бетте орналастырылады, оларға белгілі бір ақпарат қосылады және олар түрлі жерлерге жайғастырылады. Кестенің жолдары мен бағандарының ішінде ғана болатын кесте ұяшықтарына қарағанда, Div тегтерін веб-беттің кез келген жеріне орналастыруға болады. Div тегтерін жайғастыруды абсолютті түрде (Х және Ү координаталарын көрсете отырып) немесе салыстырмалы түрде (оның ағымдағы күйіне қатысты оның орналасуын көрсете отырып) орындауға болады. Сондай-ақ шегіністерді, толтырыстарды және бағандарды көрсете отырып та div тегтерін орналастыруға болады, қазіргі заманға сай стандарттар бойынша бұл әдіс ең қолайлы болып табылады.
Әдіс , метод (гр. 'μέθοδος',methodes зерттеу не тану жолы, бір нәрсеге жетудің жолы) - көздеген мақсатқа жетудің тәсілі, тәртіпке келтірген қызмет жүйесі. Әдіс философияда зерттелетін нәрсенің ойша нұсқасын жасау үшін қажетті таным құралы болып табылады.

Нобайлардан CSS макеттерін жасау қиынға соғуы мүмкін, себебі

мұны жасаудың тәсілдері айтарлықтай көп. Түрлі тәсілдермен

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

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

отырып, екі бағаннан тұратын қарапайым CSS макетін жасауға бо-

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

бір CSS макеттерін кейбір браузерлерде дұрыс, ал басқаларында

дұрыс емес көрсетуге мәжбүрлейді. Dreamweaver бағдарламасы CSS

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

лерде жұмыс істейтін алдын ала жобаланған 16 түрлі макет жасау

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

Dreamweaver бағдарламасында көзделген алдын ала жобаланған

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

тәсілі болып табылады. Сондай-ақ CSS макеттерін абсолютті

түрде жайғастыру мүмкіндігі бар Dreamweaver элементтерінің

(АР элементтерінің) көмегімен де жасауға болады. Dreamweaver

бағдарламасындағы “АР” элементі – HTML-беттің элементі, нақты

айтқанда div тегі немесе абсолютті түрде жайғастыру тағайындалған

кез келген басқа тег. Dreamweaver бағдарламасының АР элементте-рінің шектеуі бар – олар абсолютті түрде жайғастыруға ие болғандық-тан, олардың беттегі күйі еш уақытта браузер терезесінің мөлшеріне сәйкес бапталмайды.

Тәжірибелі пайдаланушылар div тегтерін қолмен қоса алады

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

стильдерін қолдана алады.

CSS БЕТІ МАКЕТІНІҢ ҚҰРЫЛЫМЫ ТУРАЛЫ

Div тегі, яғни көптеген жағдайларда мәтінге, -суреттерге және беттің

басқа да элементтеріне арналған контейнер ретінде жұмыс істейтін

HTML тегі CSS макетінің негізін салушы блок болып табылады.

1. Жаңа бет жасаңыз. Бетті қалай жасау керек екенін алдыңғы

сабақтан үйрендіңіз.

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

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

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

4.2-сурет. Files панелі

3. Енді сізге CSS файлын жасау қажет.

CSS файлдарының (стильдердің каскадты кестелері файлдарының)

кеңейтуі .css болады. Бұл файлдар HTML-мазмұнын пішімдеу үшін пайдаланылады және беттің түрлі элементтерінің орналасуын басқарады.

Онда сіздің CSS ережелеріңіз сақталатын болады. File ⇒ New басыңыз,Page Type бағанында CSS таңдаңыз, Create пернесін басыңыз. Жаңа CSS құжаты ашылады. Оны өзіңіздің жергілікті сайтыңыздың директориясындағы Styles бумасында style.css деп сақтаңыз (4.3-сурет).



4.3-сурет. Files панелі. style.css файлы

4. Dreamweaver бағдарламасында осы мақсатпен жасаған css_

layout.html файлыңызды ашыңыз. Енді бетке өзіңіз жасаған CSS фай-

лын қосу қажет. Егер CSS Styles панелі көрінбесе, оны көрсету үшін

мәзірдің window ⇒ CSS Styles пәрменін орындаңыз. CSS Styles

панелінде attach Style Sheet пернесін басыңыз. Attach External

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



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

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

Select Style Sheet File диалогтық терезесі ашылады.

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

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

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

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

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

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

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

8. ашатын тегінен кейін мәтіндік курсорды қойыңыз. Жолды

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

9. Келесі кодты көшіріп алып, қойыңыз:







Sidebar Content


Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Maecenas urna purus, fermentum id, molestie in, commodo

porttitor, felis.








  1   2   3   4   5   6


жүктеу 1.02 Mb.