| |
|
| Giriş. Freymlər nə üçün lazımdır - Форум |
|
Giriş. Freymlər nə üçün lazımdır
| |
| danger | Дата: Пятница, 24.01.2020, 23:45 | Сообщение # 1 |
|
Майор
Группа: Администраторы
Сообщений: 92
Статус: Offline
| Nəhayət, biz freymlərə (frames) gelib çatdıq. Onlar nedirlər və hansı üstünlükləri var? Freymlər bizə brauzerin pəncərəsində eyni vaxtda bir neçə sənəd açmağa imkan verir. (Məsələn, içində menyu olan "menu.html" sənədi, içində loqo olan "logo.html" sənədi, səhifənin yuxarısı və saytımızın məzmunu olan "content.html" sənədi).
Freymləri müxtəlif cür tətbiq etmək olar. Bəzi web-ustalar freymlərlə öz ağılsız fikirlərini əks etdirir və istifadəçilərini məyus edirlər, bəziləri məcburiyyət qarşısında qalanda freymlərə müraciət edirlər. Bəziləri isə onlar üçün rahat olduğuna görə freym işlədirlər. Əsas odur ki, freym dəhşətli görünməsin və istifadəçi üçün rahat olsun.
Siz müxtəlif forumlarda və ya başqa yerlərdə freymlərin pis olduğunu eşidə bilərsiniz. Təbii olaraq sual verəcəksiniz: "Freymlər yaxşıdır, yoxsa pis? "
Baxır freymlərə necə yanaşılır. Məncə bu söz-söhbət heç vaxt bitməyəcək. Yeqin bu ondan irəli gəlir ki, freymlərin yaxşı cəhətlərindən başqa, həmçinin ciddi nöqsanları da var. Buna görə də onların tətbiqinin bütün tərəflərini öyrənmək məntiqə uyğun olardı.
Amma mən freymlərlə bağlı bütün problemlərdən və onların həllindən uzun-uzadı danışmayacağam.
Mənim şəxsi fikrim budur ki, freymlər yaxşıdır, hətta çox yaxşıdır, əgər onlar yerində və ağılla işləniblərsə, estetik və gözəl görünürlərsə. "Ağılla" o deməkdir ki, biz sənəddə freym işlədiriksə, HTML-in imkanları ilə kifayətlənmirik, biz həm də freymlərin düzgün işi üçün scriptlər də tətbiq edirik. Amma bizim işimiz freymləri standart üsullarla öyrənmək olacaq.
Beləliklə, bizim sevimli brauzerimizin eyni vaxtda bir neçə sənədi göstərməsi üçün xüsusi freym-sənəd yaratmaq lazımdır. Bu sənəddə biz brauzer pəncərəsində neçə sənədin açılacağını, hər açılan sənədin nə qədər yer tutacağını, bir-birinə nisbətdə necə yerləşəcəyini təyin edirik. Amma hər şey danışdığımız kimi elə də sadə və asan deyil:).
Saytda istifadəçiyə ilk göstərilən sənəd adətən index.html (ya da nəsə başqa sənəd) olur, ona görə də biz ona "əziyyət" verəcəyik, qoy freym-sənəd o olsun. Beləliklə, index.html sənədi yaradaq:
<html>
<head>
<title>Freymlərlə səyahət</title>
</head>
</html>
İlk baxışdan standart başlanğıcdır, amma... "body" teqi yoxdur?! Bu səhv deyil, freym-sənəddə "body" teqi olmur.
"body" teqinin yoxluğu sizi narahat etməsin, onun layiqli əvəzini taparıq:
<html>
<head>
<title>Freymlərlə səyahət</title>
</head>
<frameset></frameset>
</html>
Salam "frameset", necə də gözəl addır. Deyirlər siz qərara almısınız ki, bizim saytda nəyisə deyişəsiniz və freymlkər yaradasınız :), çox yaxşı, biz həmişə yenilikləri xoşlayırıq.
İndi "frameset" üçün layiqli köməkçılər tapaq və ona zəruri atributlar verək. Amma növbəti addımda.
|
| |
|
|
| danger | Дата: Пятница, 24.01.2020, 23:47 | Сообщение # 2 |
|
Майор
Группа: Администраторы
Сообщений: 92
Статус: Offline
| Freym yaratmağı öyrənirik
llif
Freym yaratmağı öyrənirik
İşə başlamazdan əvvəl, müəyyənləşdirmək lazımdır ki, biz sənədimizi hansı prinsiplə yerləşdirəcəyik. Yəni biz hansı sənədləri eyni vaxtda ziyarətçilərə göstərəcəyik. Klassik variantı təklif edirəm - logo.html, menu.html, content.html - bunlar haqqında mən sizə əvvəlki dərsdə danışmışdım.
Bunları biz müxtəlif üsulla yerləşdirə bilərik. Budur, nümunə üçün 4 varianta baxın:
Freymin köməyi ilə biz brauzeri verilmiş ölçülərlə bir neçə pəncərəyə bölüb, onlarda bir-birindən asılı olmayan sənədlər yerləşdiririk. Bu bizə imkan verir ki, bəzi informasiya saytda həmişə görünsün, eyni vaxtda da başqa bir informasiya müxtəlif şəkildə dəyişilsin. (Məsələn, biz menyunu və loqonu həmişə görəcəyik, amma 3-cü pəncərə, ondakı bağlantılara sıxdıqda uyğun olaraq müxtəlif mətn, şəkil və s. olan sənədləri yükləyəcək.
Yeni ki, bizim səhifədə müstəqil freym kimi yerləşdirdiyimiz hər bir sənəd özündə bir çox məlumat saxlaya bilər (mətn, şəkil, cədvəl və s.). Niyə mən bütün bunları vurğulayıram, çünki bəzi insanlar nəyə görəsə elə bilirlər ki, freymlər cədvəlin alternatividir. Bu düz deyil!
Beləliklə, əvvəlcə bu variantı yaradaq (qabaqcadan özündə loqo, menyu və əsas məzmunu saxlayan adi *.html sənədlər yaratmağı unutmayın):
<html>
<head>
<title>Freymlərlə səyahət</title>
</head>
<frameset rows="100,*,150" >
<frame src="logo.html">
<frame src="content.html">
<frame src="menu.html">
</frameset>
</html>
Nümunə
Gəlin ayırd edək ki, nə nə üçündür. <frameset> teqinə verdiyimiz "rows" atributu ilə göstəririk ki, bzim freymlər üfiqi olaraq yerləşəcəklər. "rows" atributunun qiymətlərində biz hər freymin hündürlüyünü yazmışıq (rows="100,*,150"). Birinci freymin hündürlüyü: 100 piksel, üçüncününkü: 150 pikseldir, ikinci isə digər iki freymin arasında qalan məsafədə yerləşir. Bunu biz * işarəsi ilə göstərmişik - güman edirəm ki, burda hər şey aydındır.
"frame" teqi brouzerə bildirir ki, freymlərdə hansı sənədlər yüklənəcək. Bizim nümunədə birinci freymdə "logo.html" sənədi (içində loqo olan sənəd) yerləşib, ikinci freym səhifənin məzmununu təşkil edir (content.html), üçüncüsü isə menyudur. Əgər istəyirsinizsə menyu 2-ci sırada olsun (ortada), onda onun yerini "content.html" ilə dəyişin.
<html>
<head>
<title>Freymlərlə səyahət</title>
</head>
<frameset rows="100,*,150">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html> Nümunə
Görün bizdə nə alındı. Yerlərini dəyişməyinə dəyişdik, amma gəlin indi "rows" atributuna yeni qiymət verək ki, bizim menyu yenidən 150 piksel hündürlükdə, məzmun isə yerdə qalan hündürlükdə olsun:
<html>
<head>
<title>Freymlərlə səyahət</title>
</head>
<frameset rows="100, 150,* ">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html> Nümunə
Bax bu başqa məsələ:) Doğrudan da toplananların yerini dəyişdikdə nə isə dəyişir...
|
| |
|
|
| danger | Дата: Пятница, 24.01.2020, 23:49 | Сообщение # 3 |
|
Майор
Группа: Администраторы
Сообщений: 92
Статус: Offline
| Freym yaratmağı öyrənirik (ardı)
Bu dərsi biz kiçik bir fokusla başlayacayıq. "rows" atributunu "cols" ilə əvəz edin:
<html>
<head>
<title>Freymlərlə səyahət</title>
</head>
<frameset cols ="100,150,*">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html> Nümunə
Hə, nümunəyə baxın. Bir balaca hiyləgərlik, başqa heç nə 
Beləliklə, "cols" atributu bizim brauzerə freymlərin şaquli (sütunlarla) yerləşəcəyini bildirir. Deməli "cols" atributunun qiymətləri (cols="100,150,*") artıq freymin hündürlüyünü yox, enini təyin edir. Birinci freymin eni 100 piksel, ikincininki 150 pikseldir, üçüncü isə yerdə qalan məsafədə yerləşir.
Yeri gəlmişkən, biz göstərdiyimiz 4 variantdan birini də aldıq:
Gəlin yekuna yaxınlaşaq. Biz freymləri bir-birinə nisbətən üfiqi və şaquli vəziyyətdə yerləşdirə bilirik. Bunları biz yalnız <frameset> teqi, "cols" və "rows" atributlarının köməyi ilə edirik. Bunun başqa üsulu yoxdur. Bu atributları eyni vaxtda tətbiq etmək olmaz.
"rows" atributnun köməyi ilə biz freymləri üfiqi bölüb yerləşdiririk və hər bir freymə hündürlük ölçüsü veririk, "cols" atributnun köməyi ilə ise biz freymləri şaquli bölüb yerləşdiririk və hər bir freymə en olçüsü veririk.
Lap unutmuşdum, en və hündürlük təkcə piksellərlə verilmir, onlar faizlərlə də verilə bilər.
<frameset cols=" 10%,15%,75% ">
Yadda saxlayın ki, cəm 100%-ə bərabər olmalıdır.
|
| |
|
|
| danger | Дата: Пятница, 24.01.2020, 23:51 | Сообщение # 4 |
|
Майор
Группа: Администраторы
Сообщений: 92
Статус: Offline
| Freym yaratmağı öyrənirik (ardı)
Bu dərsdə biz sənədləri növbəti üsullarla yerləşdirməyi öyrənəcəyik.
və ya
Əvvəlki dərslərdə mən demişdim ki, biz <frameset> teqində "rows" və "cols" atributlarını eyni vaxtda işlədə bilmərik. Bəs onda sənədləri şəkildə göstərildiyi kimi necə yerləşdirmək olar? Çox sadəcə, freym sənədimizə daha bir <frameset> teqi daxil etməklə, amma gəlin hər şeyi səliqə ilə edək.
Birinci şəkildən başlayaq:
Pəncərəni hansı yolla böləcəyik? Üfiqi şəkildə. Yuxarıda bizim "logo.html" sənədimiz yerləşəcək, 2-ci freymi isə biz içində "menu.html" və "content.html" sənədləri yerləşən 2 sütuna böləcəyik.
<html>
<head>
<title>Freymlərlə səyahət</title>
</head>
<frameset rows="100,*">
<frame src="logo.html">
< ???>
</frameset>
</html>
Quruluş aydındır, bəs 2 sütuna bölünəcək freymi necə işarə edək? Dediyim kimi burda bizə cənab "frameset" kömək edəcək.
<html>
<head>
<title>Freymlərlə səyahət</title>
</head>
<frameset rows="100,*">
<frame src="logo.html">
<frameset cols="150,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</html> Nümunə
Kim mənə yaxşı diqqət yetirmədi, onlar üçün izah edirəm. Birinci üfiqi freymi biz lazım olduğu kimi - "frame" teqinin köməyi ilə düzəltdik. İkinci freymdə isə yenidən <frameset></frameset> teqi köməyimizə gəlir.
<frameset></frameset> teqinin "cols" atributu ilə biz ikinci freymi 2 sütuna bölürük. (Birinci 150 piksel eninde, ikinci isə yerdə qalan məsafəni tutur.) <frameset></frameset> teqinin içindəki <frame> teqi isə ikinci üfiqi freymə hansı sənədlərin şaquli xətt üzrə yerləşəcəyini müəyyən edir (menu.html və content.html).
İndi 2-ci şəkildəki variantı araşdıraq:
Burda biz pəncərəni sütunlara böləcəyik. İkinci sütun özündə "content.html" sənədini (məzmun) saxlayır, birinci sütunu isə biz 2 cərgəyə bölürük və onlara "logo.html" və "menu.html" sənədlərini yerləşdiririk.
<html>
<head>
<title>Freymlərlə səyahət</title>
</head>
<frameset cols="100,*">
<frameset rows="100,*">
<frame src="logo.html">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</html> Nümunə
Bax belə. Çətin heç nə yoxdur:)
|
| |
|
|
| danger | Дата: Пятница, 24.01.2020, 23:52 | Сообщение # 5 |
|
Майор
Группа: Администраторы
Сообщений: 92
Статус: Offline
| "Frame" teqinin xassələri. Scrolling-i yığırıq, çərçivələri silirik
Deyək ki, biz sənədimiz üçün sonuncu variantı seçmişik, onda gəlin onu daha normal şəklə gətirək. Əvvəlcə freymdəki "logo.html" sənədinin scrolling-ini silək.
<html>
<head>
<title>Freymlərlə səyahət</title>
</head>
<frameset cols="100,*">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no" >
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</html> Nümunə)
"scrolling" - <frame> teqinin atributudur. O bir neçə qiymət ala bilər: "no" - bu o deməkdir ki, ümumiyyətlə scrolling olmayacaq, "yes" - bu o deməkdir ki, scrolling həmişə görünəcək, "auto" - scrolling ancaq lazım olduqda meydana çıxacaq.
Əslində, scrolling="auto" yazılmaya da bilər, çünki əgər "scrolling" atributu verilməyibsə, onda scrolling lazım gəldikdə görünəcək, lazım olmazsa görünməyəcək.
Siz əgər siçanı hər hansı freymin sərhədinə yaxınlaşdırsanız, görəcəksiniz ki, ona toxunarkən freymin ölçülərini dəyişmək olur. Bəz bunu istifadəçilərinizə necə qadağan edə bilərsiniz? Əlbəttə ki, <frame> teqinə "noresize" atributu təyin etməklə:
<html>
<head>
<title>Freymlərlə səyahət</title>
</head>
<frameset cols="100,*">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no" noresize >
<frame src="menu.html" noresize >
</frameset>
<frame src="content.html" noresize >
</frameset>
</html> Nümunə)
İndi isə gəlin freymlərin arasındakı çərçivələrdən xilas olaq. Bunun üçün biz artıq çoxdan tanıdığımız "border" atributunu tətbiq edirik, beləliklə border="0".
<html>
<head>
<title>Freymlərlə səyahət</title>
</head>
<frameset cols="100,*" border="0" >
<frameset rows="100,*">
<frame src="logo.html" scrolling="no">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</html> Nümunə)
Bax belə artıq yaxşıdır :). Amma yenə də istəyirsən ki, nəyi isə qaydaya salasan. Yuxarıdakı şəkli küncə sıxmaq lazımdır:
<html>
<head>
<title>Freymlərlə səyahət</title>
</head>
<frameset cols="100,*" border="0">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0" >
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</html> Nümunə)
"marginwidth" və "marginheight" atributları sizə artıq tanışdırlar, onlar freymin sahəsinin enini təyin edirlər. Bizim sənəddə biz bu atributlara sıfır qiyməti verməklə yuxarıdakı şəklin (logo.html) sahələrini yığdıq.
Dayan, dayan. Siz deyəcəksiniz ki, bəs biz bu atributlar haqqında "standart olmayan atributlar" kimi danışmışdıq? Əlbəttə, amma onlar yalnız <body> teqi ilə işlənərkən "standart olmayan" kimi sayıla bilərlər, <frame> teqində onları çəkinmədən işlədə bilərsiniz.
Bax belə:) Qalanı da o biri dərslərdə.
|
| |
|
|
| danger | Дата: Пятница, 24.01.2020, 23:54 | Сообщение # 6 |
|
Майор
Группа: Администраторы
Сообщений: 92
Статус: Offline
| Bağlantıya sıxarkən sənəd digər freymdə tam pəncərədə açılır
Bu dərsdə biz freymləri öyrənməyə təzə başlayanlarda qarşıya çıxan problemlərdən danışacayıq.
Gəlin bizim Nümunə diqqət yetirək. Ordakı hər hansı bağlantıya basın. Bağlantının açdığı sənəd menyu olan sənədin yerləşdiyi freymin içində açılacaq. Amma bizə lazımdır ki, o, içində məzmun olan freymdə açılsın, menyu isə toxunulmamış qalsın. Bunu necə edək?
Əvvəlcə <frame> teqinin yeni atributu olan "name" (yeri gəlmişkən, mənə elə gəlir ki, biz "name" ilə artıq tanışıq:) ilə tanış olun. "name" atributunu işə salırıq:
<html>
<head>
<title>Freymlərlə səyahət</title>
</head>
<frameset cols="100,*" border="0">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0">
<frame src="menu.html">
</frameset>
<frame src="content.html" name="window-1" >
</frameset>
</html>
"name" atributu freymə unikal ad verir (bizim nümunədə biz bu atributu özündə məzmunu saxlayan "content.html" sənədinə tətbiq edirik).
Freymin bu adı başqa sənədlərdən (freymlərdən) də ona bağlanmaq üçün istifadə oluna bilər. <a> teqinin "target" (target="freymin_adı") atributu ilə biz artıq tanışıq.
"target" atributunu bağlantılar olan sənədimizə (menu.html) daxil edək.
<html>
<head>
<title>Menyu sənədi</title>
</head>
<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">
<center>
<a href="content.html">Əsas</a>
<a href="tumki.html">Tumki</a>
<a href="bumki.html">Bumki</a>
<a href="tururumki.html">Tururumki</a>
<a href="tra-la-la.html">Tralyalya</a>
</center>
</body>
</html>
Bizim nümunədə o sənəd (menu.html) belədir. İndi isə hər bağlantı üçün target="window-1" əlavə edək, "window-1" - bu içərisində məzmun sənədi (content.html) yerləşən freymin adıdır.
<html>
<head>
<title>Menyu sənədi</title>
</head>
<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">
<center>
<a href="content.html" target="window-1" >Əsas</a>
<a href="tumki.html" target="window-1" >Tumki</a>
<a href="bumki.html" target="window-1" >Bumki</a>
<a href="tururumki.html" target="window-1" >Tururumki</a>
<a href="tra-la-la.html" target="window-1" >Tralyalya</a>
</center>
</body>
</html> Nümunə
İndi artıq bütün bağlantılar bizə lazım olan freymdə açılır, menyu isə heç yerə itmir. Bütün bunları isə biz cəmi iki sənəddə xırda dəyişikliklər etməklə aldıq.
Bəzən elə olur ki, biz istəyirik açılacaq sənəd tam pəncərədə açılsın, bunun üçün "target" atributuna "_top" qiymətini vermək lazımdır:
<a href="project.html" target="_top" >Mənim balıqıar haqqında layihəm</a>
"Mənim balıqıar haqqında layihəm" səhifəsi bütün qalan kadrları (freymləri) örtərək tam pəncərədə açılacaq.
|
| |
|
|
| danger | Дата: Пятница, 24.01.2020, 23:55 | Сообщение # 7 |
|
Майор
Группа: Администраторы
Сообщений: 92
Статус: Offline
| IFrame nədir
f
IFrame nədir
Budur, artıq biz freymlər haqqında sonuncu dərsə gəlib çatdıq. Əslində biz freymlər haqqında bundan əvvəlkı dərsdə danışıb qurtardıq, bu dərsdə isə biz "IFrame" ("üzən" freym) haqqında danışacağıq.
Beləliklə, "Iframe" nədir və o, adi freymdən nə ilə fərqlənir. IFrame - "üzən" və ya daxili freymdir. Siz yəqin ki, onunla müxtəlif saytlarda rastlaşmısınız. "Iframe" üçün ayrıca freym-sənəd yaratmaq və ona bizim səhifənin freym strukturunu yazmaq lazım deyil. "Iframe" bizə bir HTML sənədi başqa bir HTML sənədin içinə qoymağa imkan verir.
Bu belə görünür:
SƏHİFƏ TAPILMADI
404 Axtardığınız Səhifə tapılmadı
404
Gördüyünüz kimi, verilmiş ölçüdə, içində bizə lazım olan sənəd olan forma yaranır. Bu çox rahatdır, siz yəqin ki, hansısa saytda qeydiyyatdan keçəndə, qaydalarla tanış olarkən "üzən" freymlərlə rastlaşmısınız. Bu onun üçündür ki, siz başqa səhifəyə keçmədən qaydalarla rahat tanış olasınız.
"Üzən" freym bizim HTML sənədimizə <iframe></iframe> teqi vasitəsilə daxil olunur:
<IFRAME src="ancorpri.html" width="300" height="250" scrolling="auto" frameborder="1"></IFRAME>
"src" atributunda biz freymdə göstəriləcək sənədə olan yolu göstəririk.
"height" və "width" atributları daxili freymin enini və hündürlüyünü teyin edir.
"scrolling" atributu və onun qiyməti ilə biz artıq köhnə dərslərdən tanışıq. O bir neçə qiymət ala bilər: "no" - bu o deməkdir ki, ümumiyyətlə scrolling olmayacaq, "yes" - bu o deməkdir ki, scrolling həmişə görünəcək, "auto" - scrolling ancaq lazım olduqda meydana çıxacaq.
"frameborder" atributu daxili freymin sərhədlərinin görünüb-görünməməsini göstərir. Mümkün qiymətləri: 1 (görünsün) və 0 (görünməsin).
İstifadəçi daxili freymin sərhədlərini siçanın köməyi ilə uzada bilməz, ona görə də daxili freymdə "noresize" atributu yoxdur.
"Iframe" səhifənin içindəkilərə (mətnə, şəklə və s.) nəzərən düzlənə bilər.
"Iframe" tətbiq edərkən hansı problemlərlə üzləşə bilərik: O bir çox brauzerlər tərəfindən dəstəklənmir, əsasən köhnə brauzerlər onu dəstəkləyirlər. Ona görə də bu elementi saytınızın səhifəsində işlədərkən əvvəlcə düşünün, çox vacib deyilsə, işlətməyin.
Bununla da freymlər haqqında söhbətimizi bitiririk, amma sizə bunlarla kifayətlənməyib, HTML-in daha geniş imkanları ilə maraqlanmağı, onları öyrənməyi, HTML haqqında biliyinizi artırmağı tövsiyə edirəm.
|
| |
|
|
| danger | Дата: Суббота, 25.01.2020, 00:23 | Сообщение # 8 |
|
Майор
Группа: Администраторы
Сообщений: 92
Статус: Offline
| Html dərsliyin müəllifi Rəşad Əliyev
|
| |
|
|
|
|
|
