Гипермәтін жане WEB-парақтар

12-сурет.

13-сурет.

Үстіңгі кестеде ені мен  ұзындығын қажетіне қарай орналастырамыз, bgcolor параметірімен рамканың түсін  анықтаймыз,cellpadding – ті 0 – ге қабыстырамыз, ал cellpadding шекараның қалыңдығын басқарады. Параметрі үлкен болған сайын, жақтау да соғұрлым қалың болады.

Ішкі кесте үшін арнайы түс беру керек, сыртқы түстен жақсы, Веб бетінің түсімен сәйкес, мысалы, ақ түс берілген. Cellspacing немесе cellpading параметрлері (қайсысын қолдансада айырмашылығы жоқ) рамкалар шекарасынан кестелар мазмұнының қашықтығын анықтайды.

 

        Ішкі  кестенің ені мен ұзындығы  сыртқы кестенің ені мен ұзындығына  сәйкес келуі керек.

 

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

                       

         Жақтаулардың ерекшелігі.

    Netscape және Internet Explorer браузерлері фреймдар арасындағы  жақтауларды анықтау үшін түрлі  қадамдар қолдануда. Netscape-дегі frameborder параметрі Yes немесе No мағынасын  қабылдай алады, ол тек IE-де  сандарды қолдануға болады. Фреймдер  арасындағы қоршауны алып тастау  үшін келесі кодты пайдалануға  болады.

1-мысал. Фреймдар арасындағы  жоқ жақтау

<frameset cols=200,* frameborder=no frameborder=0> 
<frame src=menu.html name=MENU noresize> 
<frame src=content.html name=CONTENT> 
</frameset>

Мысалда frameborder параметрі  браузер өзіне мағына таңдап алу  үшін 2 рет қолданылады. Жалпы бір  ғана мағына frameborder=0 параметрімен шектеуге болады. Netscape үшін мұндай жазу ереже  бұзуға жатады, бірақ бұл жағдай тура қабылданады. Opera браузері өкінішке орай фреймдерді тек қоршаумен ғана шығарады.

Егер қоршау ақырында керек  болса, браузерде ол еш параметрлерді  енгізбей-ақ келісім бойынша салынады. Сонымен қатар FRAMESET және FRAME тегтерінде қолданылатын bordercolor параметрінің көмегімен  қоршауның түсін енгізуге болады. Түс өзінің атымен немесе он алтылық  мағынасы бойынша көрсетіледі.

2-мысал. Жақтау түсінің  өзгеруі

<frameset cols=200,* bordercolor=navy> 
<frame src=menu.html name=MENU noresize> 
<frame src=content.html name=CONTENT> 
</frameset>

Мысалда қоршау Netscape неммесе Internet Explorer браузерлерінде түрі бойынша  ерекшеленетін көк түсті болады.

 

Жаңа терезеледі құру

Динамикалық HTML түрлі мақсаттар  үшін жаңа терезелер құруға мүмкіндік  береді. Java Script көмегімен құрылған мұндай терезелер стандартты түрде болады және типі бойынша диалогты және қарапайым  болып бөлінеді. Диалогты немесе модальды терезелер барлық скриптілер қызметін тоқтатады және қолданушыдан кез  келген батырманы басуды немесе терезені жабуды күтеді. Қарапайымдары программа  қосылатын ағымдағы терезеден тәуелсіз жұмыс істейді.

 

Диалогтік терезелер

Диалогтік терезелерді құрудың  төрт әдісі бар, олар төмендегі 4- кестеде  келтірілген.

4-кесте

Әдіс	Сипаттама	Түрі	Мысал
alert	Мәтінді шығарады және ОК батырмасын басуды күтеді. Қателік туралы хабарлама шығару мүмкіндігі бар.		alert("Hello, world!")
confirm	Alert-ке ұқсас, бірақ екі батырманы ОК және Cancel шығарады. Сұрақ қоюға қолданылады. При нажатии на ОК басқанда true мәнін, ал Cancel батырмасы false мәнін қайтарады.		if( confirm ("Бәрін өшіреміз бе? Сенімдісіз бе?")) alert ("Өшіреміз...") else alert ("Ал қажет пе...");
prompt	Енгізу жолын сұрайды.		n = prompt ("Атыңызды енгізіңіз:", defaultText="")  if (n) alert ("Аты: " + n)
showModalDialog	Көрсетілген файлды терезег  жүктейді. Мағынаны қайтара алады.	Бұл терезенің түрі кәдімгі  HTML-құжатын көрсететіндіктен, ол кез келген түрде болады.	showModalDialog ("color.html")

 

Alert және confirm әдістері бірнеше жолды шығаруға мүмкіндік береді. Мәтінді басқа жолға ауыстыру үшін символ қолданылады. Prompt әдісі сұраныс мәтінінде екіден аспайтын жолды береді.

Жеке диалогты терезелерді құру

ShowModalDialog әдісінің  көмегімен өз қалауыңыз бойынша  терезелерді құруға болады. Однако, данный способ создания модальных окон поддерживается только браузером Internet Explorer.

Мұндай терезелер келесі ерекшеліктерге ие:

·  навигация батырмалары болмайды;

·  тышқанның оң жақ батырмасы жұмыс істемейді;

·  мазмұнын ерекшелеуге болмайды.

Әдісті шақыру синтаксисі келесідей.

Қайтарылар мән = showModalDialog("URL", "терезенің аты ", "параметрлері")

URL диалогтік терезеде  ашылатын HTML-құжатқа апарар жолды  көрсетеді. Аты ашылатын терезенің  шартты атауын білдіреді, оны  жібере салуға болады.

Терезелер түрін басқару  параметрлері келесідей болуы мүмкін.Ол 5-кестеде көрсетілген.

   5-кесте

Параметр	Мағынасы	Сипаттамасы
border	Thick | thin	Терезе қоршаусының қалыңдығын енгізеді
center	yes | no немесе 1 | 0	Терезені монитор экранының  ортасы бойыншы теңестіреді
dialogHeight	px, %...	Диалогтік терезенің биіктігі
dialogLeft	px, %...	Горизонталь бойынша жоғарғы  сол жақ бұрыштың орналасу қалпын енгізеді
dialogTop	px, %...	Вертикаль бойынша сол  жақ жоғарғы бұрыштың орналасу қалпын енгізеді
dialogWidth	px, %...	Диалогтік терезенің ені
maximize	yes | no немесе 1 | 0	Бастау жолына "Развернуть" батырмасын қосады
minimize	yes | no немесе 1 | 0	Бастау жолына "Свернуть" батырмасын қосады

 

Аталған параметрлер үтір арқылы кез келген рет бойынша  жүре береді. Диалогтік терезенің  өлшемі 100х100 пиксельден кем болмайды және оны экраннан тыс жерге орналастыру  мүмкін емес. Параметрдің қосылуын немесе өшуін оларда yes немесе no (1 немесе 0) мәндерін көрсету арқылы анықталады. Мысалы, center=yes параметрі мағынасы center=1 параметрімен бірдей.

1-мысал. Диалогтік терезе  құру

<script language="JavaScript">

showModalDialog("tips.html", "", "dialogWidth=350px, dialogHeight=200px")

</script>

Мысалда tips.html файлы жүктелетін 350х200 өлшемді терезе құрылады.

Қалқымалы терезелер  құру

Қалқымалы терезелер window объектісінің көмегімен құрылатын браузердің қарапайым терезесі болып табылады. Сонымен қатар бұл терезе түрін  өлшемдерін енгізе отырып және түрлі  элементтерін өшіре отырып басқаруға  болады.

Терезені құру үшін келесі синтаксиспен келетін open әдісі қолданылады.

window.open("URL", "терезе  аты", "параметрлері")

Параметрлердің мәні модальдік  терезесін құруға арналған showModalDialog әдісінің параметрлерімен сәйкес келеді.

Бұл терезе түрін басқаратын параметрлердің диалогтік терезе элементтерінен кейбір ерекшеліктері бар.Ол 6-кестеде  көрсетілген.

6-кесте.

Параметр	Мағынасы	Сипаттамасы
directories	yes | no немесе 1 | 0	Сілтемелер панелін бейнелейді
location	yes | no немесе 1 | 0	Мекен-жай жолын бейнелейді
menubar	yes | no немесе 1 | 0	Мәзірді бейнелейді
scrollbars	yes | no немесе 1 | 0	Айналдыру жолағын көрсетеді
toolbar	yes | no немесе 1 | 0	Құралдар панеліндегі  батырмаларды көрсетеді
status	yes | no немесе 1 | 0	Қалып-күй жолын көрсетеді
rersizible	yes | no немесе 1 | 0	Терезе өлшемін өзгертуге  бола ма соны анықтайды
left	пиксельдер	Горизонталь бойынша жоғарғы  сол жақ бұрыштың орналасу қалпын енгізеді
top	пиксельдер	Вертикаль бойынша сол  жақ жоғарғы бұрыштың орналасу қалпын енгізеді
width	пиксельдер	Терезенің ені
height	пиксельдер	Терезенің биіктігі

 

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

2-мысал. Жаңа терезе құру

<script language="JavaScript">

window.open("help.html", "help", "width=350, height=200, status=0, menubar=0, location=0 resizable=0 directories=0 toolbar=0")

</script>

Терезе түрін басқару  параметрлерін үтір арқылы кез келген ретпен қолдануға болады.

 

Терезені жабу

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

3-мысал. Терезені жабу

<script language="JavaScript"> 
help = window.open("help.html", "help", "width=350, height=200, status=0, menubar=0, location=0 resizable=0 directories=0 toolbar=0") 
</script> 
 
<a href="javascript:help.close()">Терезені жабу</a>

Мысалдағы help айнымалысы қайта  құрылған терезеге сілтеме болып  табылады, сол себепті жабу help.close() әдісі арқылы жүреді.

Когда метод close применяется к основному окну, браузер выдаст предупреждение о том, что программа пытается закрыть окно и согласны вы на такое немесе нет. Это сделано в целях безопасности и исключает возможность непроизвольного закрытия нужных окон.

     Жасырын өріс.

Жасырын өріс көрсетілмейді  және өзінің құрамын қолданушыдан жасырады. Қолданушы оған ештеме енгізе алмайды  немесе басып шығара алмайды. Жасырын  аймақты құру мақсаты – серверге техникалық ақпаратты жіберу. Көптеген жағдайларда берілген формаларды парақтан параққа жіберу үшін қажет.

 

Жасырын өрісті құру синтаксисі:

<input type=hidden name=... value=...>

name – программаға аймақты  индентификациалауға мүмкіндік  беретін аймақ аты. 

value – аймақтың мағынасы  серверге қандай ақпарат жіберілетінін  анықтайды. 

Мысалы. Жасырын аймақты  қолдану

<html>

<head>

<body>

<form action=”/cgi-bin/handler.cgi” method=POST>

 

<b>Сүйікті сөзіңізді жазыңыз (серверге ешқандай ақпарат жіберілмейді!):</b><br>

<input type=text size=25>

<input type=hidden name=UserName value=Vasya>

<input type=hidden name=password value=pupkin><br>

<input type=submit>

</form>

 

</body>

</html>

 

 

Жақсы көретін сөз:

Мысалда жасырын аймақ  ешқандай көрсетілмейді, бірақ форма  серверге жөнелтілгенде жасырын  өрістер онымен бірге жіберіледі.

 

Жылжымалы фреймдер.

Internet Explorer браузерлердің  үшінші және одан жоғарғы версиясы  жылжымалы фреймдерді IFRAME  тегі  көмегімен қолдануға мүмкіндік  береді. Жылжымалы фрейм қарапайым  құжат ішінде болады және басқа  да кез келген құжаттар бетіне  қойылады. IFRAME тегінде де қарапайым  фреймдегідей параметрлер: width, height, hspace, vsace, align мәні IMG тег параметріне  сәйкес келеді.

Мысалы, жылжымалы фреймді  пайдалану

 

<iframe src=banner.html width=468 height=60 hspace=10 vspace=10 align=center> 
 
</iframe> IFRAME тегі контейнері болып табылады. Бұндай браузерге балама мәтінді көрсетуге, қолданушы көріп отыруына болады. Ол <iframe>  және  <iframe>  тег арасында орналасуы керек.Келтірілген мысалда « Сіздің браузеріңіз жылжымалы фреймді қолдамайды» деген мәтін көрсетеді. IE –ден басқа Opera 6, Netscape 7  және Mozilla браузерінде жылжымалы фреймде қолданылады.

 

Фреймді шығару үшін FRAMESET тегі BODY тегін құжатта ауыстырып, экран  бетін облыстарға бөлу үшін қолданылады. Берілген тектің ішінде FRAME тегтері  загруска облысына арналған HTML құжатын  көрсетеді (14- сурет).

 

MENU

CONTENT

.                     14-сурет. Браузер терезелерінің фреймдерге бөлінуі.

 

14- суреттегі фреймдердің  орналасуының коды келесідей.

 

1 – мысал. Екі фреймнің  құрылуы.

<framesetcols="200,*">

< frame src=mu.html name=MENU>< frame src=contenent. html name=CONTENENT>

</ frameset>

 

1 – мысал. Екі фреймнің  құрылуы

<frameset cols="200,*"> 
 <frame src=menu.html name=MENU> 
 <frame src=content.html name=CONTENT> 
</frameset>

Браузер терезесі 2 колонкаға  бөлінеді, сол жағы 200 тексельді алады, ал оң жағы берілген жұлдызшалар таңбасының қалған кестігі. Фреймдердің ені  мен ұзындығын қатынас бойынша процент түрінде немесе керегінше Кесте бойынша да беруге болады.

 

   FRAME тегінде HTML –  файлының аты 3rc параметірінің  көмегімен көрсетілген облысы  бойынша беріледі.

Сол жақ терезеге белгіленген menu. Htme файлы, ал ал оң жақ терезеге – conten thtme. Құжаттарды көрсетілген терезеге орналастыру үшін әрбір фреймге  сәйкесінше өзінің атын беру керек.

 

TOP
MENU	CONTENT

15-сурет. Браузер терезелерінің  фреймдерге бөлінуі.

 

Егер фреймдердің қиын құрылымы керек болса, мысалы, 2-суретте  көрсетілгендей FRAMESET тектерінің бірін  екіншісіне қоюға болады.

 

2 – мысал. Үш фреймнің  құрылуы.

 

 

<frameset rows="10%,90%"> 
 <frame src="top.html" name="TOP"> 
 <frameset cols="200,*"> 
  <frame src="menu.html" name="MENU"> 
  <frame src="content.html" name="CONTENT"> 
 </frameset> 
</frameset>

        Бірінші  FRAMESET тегі браузер терезесін екі  ендік жолға 10 және 90 процентке  бөледі. Ал кемінде 1 мысалдағыдай  екі колонка құрады.