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

    Басты бет


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

жүктеу 1.02 Mb.



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

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


1   2   3   4   5   6

9. Параграфтарды жасау үшін тегтердің қайсысы пайдаланылады?

a.

b.


c.

d.


10. Пішімдеудің көмегімен мәтінді
қалай параграфқа айналдыруға

болады?


a. Edit ⇒ Edit with External Tool мәзірінің көмегімен.

b. Қасиеттер инспекторының Format ашылатын тізімінің көмегімен.

c. Қасиеттер инспекторының Blockquote пернесінің көмегімен.

d. Қасиеттер инспекторының ID ашылатын тізімінің көмегімен.

Dreamweaver CS6

74

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



СУРЕТТЕРДІ ҚОЮ

Қазіргі уақытта Web-беттерде мәтіндік ақпараттан өзге графикалық

суреттер де бар. Суреттердің арқасында Web-беттер эстетикалық

тұрғыдан тартымды болады, олардың ақпараттылығын айтарлықтай

арттырады.

Көптеген түрлі пішімдердің бар екеніне қарамастан, Web-беттерге

арналған графикалық элементтер әдетте JPEG, PNG және GIF

пішімдерінде сақталады.

GIF пішімі (Graphic Interchange Format – «джфф» деп айтылады )

интернетте жұмыс істеу үшін арнайы жасалған, растрлық суреттерді

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

жылда ол өзгерген жоқ десе де болады. GIF пішімі 256-дан артық түсі

бар палитраны (сегіз биттік) қолдайды, оның айқындығы көп дегенде

72 ppi болады, сондықтан ол әдетте пернелерді, шекараларды және

т.б. безендендірген кезде веб-қосымшалардың интерфейстерінде пай-

даланылады.

GIF пішімінің екі айрықшалануы бар – GIF 87a және GIF 89a.

Нұсқаның екеуі де жолдардың кезектесу тәсілін (interlacing) қолдайды.

Жолдардың кезектесуі дегеніміз – браузер суретті шығарған кезде

оның бөлшектерінің біртіндеп шығуы. Сонымен қатар GIF-файлды

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

JPeG (Joint Photographic Experts Group – «джейпег» деп айты-

лады) – фотосуреттерді және оларға ұқсас суреттеді сақтау үшін

қолданылатын ең әйгілі графикалық пішімдердің бірі. JPEG деректері

бар файлдардың кеңейтулері әдетте .jpeg, .jfi f, .jpg, .JPG немесе .JPe

болады. Алайда олардың арасынан .jpg барлық платформаларда көп

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

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

жолдардың кезектесуі қасиеттері жоқ, бірақ ол 16 млн.-ға дейін түсті

қолдайды.

Қазіргі уақытта Web-те пайдалану үшін графикалық файлдарға

арналған png (Portable Network Graphics) әзірленді, ол жолдардың

Суреттермен жұмыс істеу

75

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



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

Сіз Dreamweaver бағдарламасының көмегімен беттерге GIF, JPEG,

PNG суреттерін оңай қоя аласыз. Сондай-ақ суреттерді кестеге

нысанға және т.б. қоюға болады.

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

3-ші сабақта үйренген болатынсыз.

Жасалған бет алдын ала белгіленген баптауларға сәйкес Code,

Design немесе Split сияқты үш көріністің бірінде көрсетілуі мүмкін.

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

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

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

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

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

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

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

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

Dreamweaver CS6

76

6. Select Image Source диалогтық терезесі ашылады.



Сізді қызықтыратын кез келген суретті таңдаңыз. OK пернесін

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

7.2-сурет. Select Image Source диалогтық терезесі

-сурет автоматты түрде сіздің жергілікті сайтыңыздағы images бу-

масына көшіріледі.

7. Image Tag accessibility attributes терезесі ашылады (7.3 -су-

рет). alternate Text өрісінде алмастыратын мәтінді жазыңыз. Сурет

пайда болмаса немесе көрінбесе, оның орнына алмастыратын мәтін

шығады. Code көрінісінде alt атрибутымен белгіленеді.

Long description өрісін әзірше бос етіп қалдырыңыз. Code

көрінісінде ол longdesc атрибутымен белгіленеді. alt және title атри-

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

сондықтан longdesc атрибуты суреттің аңдатпасы жазылған құжаттың

мекенжайын көрсетуге мүмкіндік береді. Осыдан кейін OK пернесін

басыңыз.

Суреттермен жұмыс істеу

77

7.3-сурет. Image Tag accessibility attributes терезесі



8. Бетте сурет пайда болады (7.4--сурет).

7.4--сурет. Бетке қойылған -сурет

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

сәтті атқардыңыз, бірақ одан басқа да тәсілдер бар. assets панелі де

бетке -суретті қосуға мүмкіндік береді. Алдымен сайтыңыздың images

бумасына басқа -суретті қолмен көшіріңіз (7.5-сурет).

Dreamweaver CS6

78

7.5-сурет. images бумасына суретті қолмен көшіру



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

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

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

10. Егер сізде assets панелі ашылмаған болса, панельді экранға

шығару үшін мәзірдің window ⇒ assets пәрменін орындаңыз.

Сайттағы суреттердің толық тізімін көрсету үшін Images пернесін

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

7.6-сурет. assets панелі

Суреттермен жұмыс істеу

79

Егер жаңа -сурет -суреттердің тізімінде шықпаса, refresh Site List



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

11. Тізімнен жаңа қосылған image2.jpg суретін тауып, таңдаңыз.

assets панелінде алдын ала қарауға арналған оның кішірейтілген

көшірмесі пайда болады, суреттің атауы, пикселдердегі мөлшерлері,

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

12. Панельдің астыңғы бөлігіндегі Insert пернесін басыңыз (7.7- сурет).

7.7-сурет. assets панеліндегі Insert пернесін басамыз

-сурет мәтіндік курсор орналасқан жерге бетке қойылады.

13. Image Tag accessibility attributes диалогтық терезесіндегі

(7.8- сурет) alternate Text (Алмастыратын мәтін) өрісіне alternate text2

мәтінін енгізіңіз де OK пернесін басыңыз.

Dreamweaver CS6

80

7.8-сурет. Image Tag accessibility attributes диалогтық терезесі



Екінші сурет пайда болады (7.7 -сурет).

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

7.9-сурет. Беттегі екінші сурет

Осыдан кейін CSS санатының көмегімен -суреттің орналасуын

түзетесіз.

Суреттермен жұмыс істеу

81

CSS САНАТТАРЫНЫҢ КӨМЕГІМЕН СУРЕТТЕРДІҢ



ОРНАЛАСУЫН БАПТАУ

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

абзацтарға және басқа да элементтерге қоюға болады. Егер

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

ұлғайтылады.

Биіктік географияда - жер бедеріндегі жеке элементтердің тік бағытта орналасу шамасы (қара Абсолют биіктік, Салыстырмалы биіктік); астрономияда (h) - аспан шырағының горизонталь координаттар жүйесіндегі (қара Аспан координаттары) координатының бірі.
Бұрын -суреттердің орналасуын HTML атрибуттарының

көмегімен баптауға болатын, алайда қазір HTML атрибуттары ескірген

болып саналады, сондықтан олар Dreamweaver CS6 бағдарламасынан

алып тасталды. Енді сіз CSS макетімен ғана жұмыс істеу керексіз.

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

нақты стильдерді қолдану үшін тегіне арналған пайдаланушылық

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

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

тұтынушылық санатты жасайсыз.

1. Қажет болған кезде insertimage.html файлын ашыңыз.

2. Құжаттан осыған дейін қойған екінші -суретті өшіріңіз.

3. -суреттен кейін рыба мәтінін қойыңыз (7.10--сурет). Бұл мәтінді

http://www.lipsum.com сайтынан алып қоя аласыз.

7.10-сурет. Суреттен кейінгі рыба мәтіні

Dreamweaver CS6

82

4. Жаңа CSS файлы жасалмаған болса, жасаңыз. Онда CSS



ережелері сақталады. File ⇒ New басыңыз, Page Type бағанында CSS

таңдаңыз, Create пернесін басыңыз. Жаңа CSS құжаты ашылады. Оны

сайтыңыздағы Styles бумасында style.css деп сақтаңыз (7.11-сурет).

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

5. Енді құжатқа өзіңіз жасаған CSS файлын қосу қажет. CSS Styles

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

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

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

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

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

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

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

рет) add as ауыстырып-қосқышын Link күйіне қойып, OK пернесін

басыңыз.


Суреттермен жұмыс істеу

83

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



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

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

басыңыз.

Қажет болған кезде экранға CSS Styles панелін шығару үшін

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

10. New CSS rule диалогтық терезесіндегі (7.13--сурет) Selector

Type ашылатын тізімінен Class нұсқасын таңдаңыз.

11. Ережені fl oat_right деп атаңыз да ереже жасауды аяқтау үшін

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

Dreamweaver CS6

84

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



12. Box санатында Float ашылатын тізімінен right нұсқасын

таңдаңыз. margin басқару элементтері тобының Left өрісінде 10px

енгізіңіз және OK пернесін басыңыз (7.14--сурет).

Суреттермен жұмыс істеу

85

7.14-сурет. Border белсенді санаты бар .fl oat_right. арналған CSS



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

13. Беттің макетіндегі image1.png -суретін бөліп алыңыз. Қасиеттер

инспекторының Class ашылатын тізімінен fl oat_right тармағын

таңдаңыз.

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

өтеді.


Өрістердің баптаулары мәтіннің суреттің шетіне тиюіне мүмкіндік

бермейді (7.15-сурет).

Dreamweaver CS6

86

7.15-сурет. CSS көмегімен пішімделген сурет



Суреттермен жұмыс істеу

87

ТЕСТ



1. Веб-бетке арналған суреттерді келесі пішімдерде сақтай

аласыз:


a. PSD, Tiff

b. ftp, fl a, jsp

c. Flickr

d. jpg,png, gif

2. Веб-бетіңізге қандай графикалық пішімді қоя алмайсыз?

a. bmp


b. gif

c. png


d. jpg

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

a. Dreamweaver веб-беттерге суреттерді тасымалдау арқылы қоя

алады.


b. Егер суреттерді веб-сайттың баптауында айқындаған болсаңыз,

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

c. Insert ⇒ Media пәрмені суретті қою үшін пайдаланылуы мүмкін.

d. Суреттерді Files панелінен тасымалдау арқылы қоюға болады.

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

a. Dreamweaver бағдарламасы PSD пішімімен тікелей жұмыс істей

алады.

b. Егер сіз суретті бөліп алсаңыз, ол суреттің қасиеттер инспекторында



көрсетіледі.

c. Қасиеттер инспекторындағы Src өрісі суреттің атауын және оған

апаратын жолды береді.

d. Сіз Point to File таңбасын Files панелінде суретті таңдау үшін

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

5. Төменде аталғандардың қайсысын -суреттің қасиеттер

инспекторында жасау мүмкін емес?

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

b. Сіз суретке сілтеме көрсете аласыз.

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

d. Сіз суретке алмастыратын мәтінді тағайындай аласыз.

Dreamweaver CS6

88

6. Суреттердің қандай пішімі анимацияларды қолдайды?



a. png

b. jpg


c. gif

d. bmp


7. Алмастыратын мәтін не үшін қажет?

a. Егер сурет болмаса, оның орнына осы мәтін көрсетіледі.

b. Суреттің аңдатпасы бар құжаттың мекенжайын көрсетуге мүмкіндік

береді.


c. Интернеттегі басқа ресурсқа сілтеме жасайды.

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

8. Long description өрісі не үшін қажет?

a. Егер сурет болмаса, оның орнына осы мәтін көрсетіледі.

b. Суреттің аңдатпасы бар құжаттың мекенжайын көрсетуге мүмкіндік

береді.


c. Интернеттегі басқа ресурсқа сілтеме жасайды.

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

9. Қай HTmL тегінің көмегімен сурет бетке қойылады?

a.

b.

c.

d.

10. Мәзірдің қандай пәрменінің көмегімен суретті бетке қоюға

болады?

aImage


b. Insert ⇒ Media

c. File ⇒ Import

d. Modify ⇒ Image

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

89

8. СІЛТЕМЕЛЕР ЖАСАУ



ГИПЕРСІЛТЕМЕЛЕР ТУРАЛЫ НЕГІЗГІ МƏЛІМЕТТЕР

Гиперсілтемелер болмаса, ғаламтор мүлде басқаша болушы

еді. Бұл жағдайда HTML (Hypertext Markup Language, гипермәтінді

таңбалау тілі) тілі жай ғана ML (Markup Language, таңбалау тілі) тілі

деп аталушы еді. Атаудағы «гипермәтін» сөзі сілтемелер қамтамасыз

ететін мүмкіндіктерді көрсетеді. Сонымен, гиперсілтеме деген не?

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

көрсеткіш гиперсілтеме немесе жай ғана сілтеме деп аталады. Ком-

пьютерде сақталатын және орындалатын кез келген объект, мысалға

веб-бет, -сурет, фильм, дыбыстық файл және т.б. осындай ресурс бола

алады. Гиперсілтемелердің көмегімен, HTML тілі арқылы немесе сіз

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

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

болады.

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


8.1-сурет. HTmL тіліндегі гиперсілтеме якорь элементінен

және бір немесе бірнеше атрибуттан тұрады

Dreamweaver CS6

90

8.1-кесте. Сілтеме элементтері



A HTML тілінің элементі

B Атрибут (гипермәтіндік сілтеме)

C Ресурстың бірегей локаторы (URL)

D Атрибут

E Мән (браузердің жаңа терезесі)

F Пайдаланушыға көрінетін мәтін

G Жабатын тег

СЫРТҚЫ ЖƏНЕ ІШКІ ГИПЕРСІЛТЕМЕЛЕР

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

басқа бөлігіне немесе дәл сол бумадағы немесе дәл сол қатты дисктегі

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

деп аталады. Сыртқы гиперсілтеме компьютердегі қатты дисктен,

сайттан немесе хосттан тыс жерде сақтаулы құжатқа немесе ресурсқа

өтуге мүмкіндік береді.

Ішкі және сыртқы сілтемелердің құрылымы әр түрлі келеді, бірақ

олардың бір ортақ қасиеті бар: HTML тілінде екеуі де байланыс-

тыру элементінің көмегімен іске асырылған. Байланыстыру элементі

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

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

Сілтемелер жасауды бастамас бұрын CSS көмегімен қарапайым

көлденең навигацияны жазайық.

1. Жаңа HTML бетін жасаңыз. Осы файлды сайттың түбірлік бума-

сында links.html атауымен сақтаңыз.

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

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

3. Біздің навигация мысалымыз төмендегідей:





  • Home


  • About Us


  • Contact


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

91

Оны көшіріп алып, өзіңіз жасаған бетке, ашатын тегінен



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

тізіміміз тік болып табылады.

8.2-сурет. Мәзірдің тік тізімі

Сонымен оны көлденең етейік:

4. Келесі мәтінді көшіріп алып, оны style.css файлына қойыңыз.

ul#list-nav {

list-style:none;

margin:20px;

padding:0;

width:525px;

}

ul#list-nav li {



display:inline;

}

ul#list-nav li a {



text-decoration:none;

padding:5px 0;

width:100px;

background:#CCC;

color:#333;

fl oat:left;

text-align:center;

border-left:1px solid #fff;

}

ul#list-nav li a:hover {



background:#999;

color:#000

}

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



Dreamweaver CS6

92

5. Өзіңіздің ағымдағы құжатыңызға стильдердің кестесін қосуға



ұмытпаңыз. Оны қалай істеу керек екенін алдыңғы сабақтардан

үйренген болатынсыз.

8.3-сурет. Көлденең тізім

Осыдан кейін біз осы мәзірден сілтемелерді жасаймыз.

Енді мәзірдің элементтері сілтеме көрсететін үш бет жасаңыз.

Үш қарапайыи HTML құжатын жасаңыз. Бірінші құжаттың денесінде

This is Home Page деп жазыңыз, екінші құжаттың денесінде This is

about Us Page деп жазыңыз, ал үшінші құжаттың денесінде This is

Contact Page деп жазыңыз да оларды сәйкесінше index.html, about_

us.html және contact.hmtl деп атаңыз.

ІШКІ СІЛТЕМЕНІ ЖАСАУ

Dreamweaver бағдарламасы гиперсілтемелердің барлық түрлерін

жасауды жеңілдетеді.

1. Қажет болған кезде қасиеттер инспекторын ашу үшін мәзірдің

window ⇒ Property пәрменін орындаңыз. Осы инспектордың Link

енгізу өрісінің мазмұнын қарастырыңыз.

2. Көлденең мәзірден Home сөзін бөліп алыңыз.

3. Link енгізу өрісінде index.html жолын енгізіңіз де сілтемені жаса-

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

Сіз жаңа ғана өзіңіздің бірінші мәтіндік гиперсілтемеңізді жасадыңыз

(8.4--сурет).

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

93

8.4-сурет. Жалғыз сілтемесі бар көлденең мәзір



Сондай-ақ бағдарлама интерактивті режимде де сілтемелерді

жасауға мүмкіндік береді.

4. Енді көлденең мәзірдегі about Us сөздерін бөліп алыңыз.

5. Link енгізу өрісінің жанындағы Browse for File таңбасын

басыңыз. Пайда болған Select File атты диалогтық терезедегі (8.5 -су-

рет) сайттың түбірлік бумасынан about_us.html файлын таңдаңыз.

relative To ашылатын тізімінде Document тармағының белсенді

екеніне көз жеткізіңіз. OK пернесін басыңыз.

Dreamweaver CS6

94

8.5-сурет. Select File диалогтық терезесі



Енді көрнекі тәсілді көрейік.

6. Көлденең мәзірден Contact мәтінін бөліп алыңыз.

7. Экранға Files панелін шығару үшін, Files қосымша бетін таңдау

үшін ярлыкты басыңыз немесе мәзірдің window ⇒ Files пәрменін

орындаңыз.

8. Қасиеттер инспекторынан Link енгізу өрісінің жанындағы Point

To File таңбасын сайттың түбірлік бумасындағы contact.html

файлдың атына тасымалдаңыз, бұл түбірлік бума Files панелінде

көрсетіледі (8.6 -сурет).

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

95

8.6-сурет



links.html құжатының қосымша бетінің ярлыгындағы * таңбасына на-

зар аударыңыз. Бұл символ беттің өзгертілгенін, бірақ сақталмағанын

білдіреді.

9. File ⇒ Save пәрменінің көмегімен links.html бетін сақтаңыз да

осы бетті браузерден қараңыз (8.7 -сурет).

10. Home сілтемесін басыңыз.

11. Links бетінің орнына браузердің терезесінде Home беті ашы-

лады. Алдыңғы бетке қайтып оралу үшін «артқа» пернесін басыңыз.

12. about Us сілтемесін басыңыз.

13. about Us беті браузердің терезесінде links бетін алмастырады.

14. Браузерден шығып, Dreamweaver бағдарламасына оралыңыз.

8.7-сурет. Браузердің терезесіндегі көлденең мәзір

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

дың келесідей үш тәсілін білдіңіз: қолмен енгізу, Browse For File функ-

циясын пайдалану және Point To құралын пайдалану.

Dreamweaver CS6

96

СІЛТЕМЕ -СУРЕТТІ ЖАСАУ



-суретті немесе фото-суретті де сілтемеге айналдыруға болады.

Сілтеме -суреттер кәдімгі гиперсілтемелер сияқты жұмыс істейді, олар

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

Бұл жаттығуда сіз пайдаланушыларды about Us бетіне бағыттайтын

сілтеме -суретті жасап, пішіндейсіз.

1. links.html бетінде жұмыс істеуді жалғастырайық. Көлденең

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

рек екенін сіз алдыңғы сабақтан білесіз.

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

8.8-сурет. Қойылған -сурет

2. -суретті таңдаңыз. Қасиеттер инспекторындағы Link енгізу

өрісінің жанындағы Browse for File пернесін басыңыз.

3. Сайттың түбірлік бумасындағы about_us.html файлын таңдаңыз.

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

Link енгізу өрісінде about_us.html мәтіні пайда болады.

4. Қасиеттер инспекторының alt енгізу өрісінде жазылған мәтінді

Click to contact us сөз тіркесіне алмастырыңыз да enter пернесін

басыңыз (8.9 -сурет). Бетті сақтаңыз.

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

97

8.9-сурет. alt өрісіндегі мәтінді алмастыру



5.
Алмастыру - белгілі бір n элементті қандай да бір ретте (тәртіпте) қайталамай орналастыру. Берілген n элементтен барлығы әр түрлі n! = 1*2...n Алмастыруы жасалады. Алмастыруға байланысты көптеген есептер ауыстыру терминдері арқылы тұжырымдалады.
Сілтеменің қалай жұмыс істейтінін тексеріңіз. -суретті бассаңыз,

браузерде about_us.html беті жүктеледі.

6. Dreamweaver бағдарламасына оралыңыз.

Dreamweaver CS6

98

СЫРТҚЫ СІЛТЕМЕНІ ЖАСАУ



Сіз алдыңғы жаттығуда сілтеме жасаған беттер сіздің сайтыңызда

сақталды. Бірақ егер толық веб-мекенжай немесе URL белгілі бол-

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

қоюға болады. Бұл жаттығуда сіз қолда бар мәтіннің негізінде сыртқы

сілтемені жасайсыз.

1. Сайттың түбірлік бумасынан contact.html құжатын ашыңыз.

2. This is C.ontact Page сөздерінен кейінгі келесі абзацта We are

located here деп жазыңыз (8.10-сурет).

8.10-сурет. contact.html бетіндегі мәтін

3. Екінші абзацтағы here сөзін бөліп алыңыз.

Қазір сіз осы мәтінді Google Maps сайтымен байланыстырасыз.

4. Қасиеттер инспекторындағы Link енгізу өрісіне мәтіндік курсор-

ды қойыңыз да онда google maps, http://goo.gl/maps/ejYbK сілтемесін

жазыңыз, осыдан кейін enter пернесін басыңыз. Мәтін стандартты

гиперсілтеме ретінде пішімделеді.

5. Файлды сақтаңыз да оны алдын ала белгіленген браузерден

қараңыз. Сілтемені тексеріңіз.

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

қарапайым HTML атрибутты қосу қажет.

6. Dreamweaver бағдарламасына оралыңыз. Қажет болған кезде

here сілтемесі мәтінінің кез келген жеріне мәтіндік курсорды қойыңыз.

7. Target ашылатын тізімінде _blank мәнін таңдаңыз (8.11-сурет).

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

99

8.11-сурет



1. Файлды сақтаңыз да браузердегі бетті қараңыз. Сілтемені

тексеріңіз.

Енді Google Maps беті жаңа терезеде ашылады.

2. Браузерді жабыңыз да Dreamweaver бағдарламасына оралыңыз.

Көріп отырғаныңыздай, Dreamweaver бағдарламасы ішкі және

сыртқы ресурстарға сілтеме жасауды жеңілдетеді.

Dreamweaver CS6

100


ТЕСТ

1. Қандай тег бір

1   2   3   4   5   6


жүктеу 1.02 Mb.