Շրջանակի հայեցակարգը HTML-ում: Iframe և Frame - որոնք են դրանք և ինչպես լավագույնս օգտագործել շրջանակները Html-ում Շրջանակի եզրագծի լայնության ցուցադրումը վերահսկվում է հատկանիշով

Սկսենք շրջանակի կառուցվածքից: Ո՞րն է դրա էությունը: Մենք հնարավորություն ունենք կազմակերպել հատուկ պատուհանի տիպի տարածքներ փաստաթղթում, որը մենք բեռնում ենք դիտարկիչում: Դուք կարող եք վերբեռնել այլ անհատական ​​փաստաթղթեր (վեբ էջեր) այս տարածքներում:

Ինչու է սա անհրաժեշտ: Քանի որ փաստաթղթերը բեռնվում են իրենց առանձին տարածքներում, դրանք գործում են ինքնուրույն: Այսինքն, դուք կարող եք ինչ-որ բան անել մեկ փաստաթղթում, մինչդեռ մյուս փաստաթղթերը մնում են անփոփոխ:

Որտեղ կարող եք գտնել նման շրջանակային կառույցներ: Սրանք օգնության ֆայլեր են (.chm ընդլայնմամբ):

Ահա շրջանակներով փաստաթղթի պարզ օրինակ.

Շրջանակների օրինակ Դուք դիտում եք այս էջը՝ օգտագործելով զննարկիչ, որը չի աջակցում շրջանակներ:

Շրջանակների հավաքածուի տարրը: Նրա խնդիրն է ծածկել դիտման տարածքը և բաժանել այն առանձին տարածքների: Նրանք. հրահանգել բրաուզերին, թե ինչ հարաբերակցությամբ և ինչպես (հորիզոնական կամ ուղղահայաց) ենք բաժանում այս տարածքները:

Շրջանակի տարրը նկարագրում է յուրաքանչյուր այդպիսի առանձին տարածք: Մեկ պիտակ. Այն զբաղեցնում է շրջանակում նշված չափերը:

Noframes տարրը ցուցադրվում է, եթե զննարկիչը չի ապահովում շրջանակներ:

Ուշադրություն դարձրեք, որ մարմնի տարր չկա: Փոխարենը օգտագործվում է frameset տարրը: Սա է պատճառներից մեկը, որ կայքերում այլեւս չեն օգտագործվում շրջանակներ։

Framesset տարրերի ատրիբուտները

• cols - էջի ուղղահայաց բաժանում դիտման տարածքների:
• տողեր - էջի հորիզոնական բաժանում դիտման տարածքների:

շրջանակի տարր

Այս տարրը նկարագրում է մեկ պատուհանի տարածք: Դուք կարող եք բեռնել ցանկացած փաստաթուղթ դրա մեջ՝ օգտագործելով src հատկանիշը: Օրինակներ.

Հատկանիշ ոլորում- ոլորում (ավտոմատ լռելյայն): Եթե ​​փաստաթուղթը գերազանցում է այս շրջանակի դիտման տարածքը, տեղի է ունենում ոլորում: Եթե ​​փաստաթուղթն ամբողջությամբ տեղավորվում է շրջանակի մեջ, ապա ոլորում չկա: Ոլորումը կարող է անջատվել, բայց ավելի լավ է այն թողնել ավտոմատ:

Մեկ հատկանիշ noresize- արգելում է փոխել շրջանակի չափը բրաուզերում: Լռելյայն դա թույլատրված է:

Հատկանիշ շրջանակի եզրագիծ- շրջանակ առ կադր: Արժեք «1» - նկարել, արժեքը «0» - մի նկարեք: Միայն այս երկու արժեքներն են վավեր: Լռելյայնորեն շրջանակը գծված է:

Հատկանիշ լուսանցքի լայնությունը– ցույց է տալիս այն հեռավորությունը, որով տվյալ կադրի բովանդակությունը հորիզոնական կնվազի այս կադրի շրջանակներից:

Հատկանիշ եզրային բարձրություն– ուղղահայաց նահանջ բովանդակությունից մինչև շրջանակի սահմանները:

Ներկառուցված iframe

iframe տարր («գծի պատուհան»): Այս տարրը զուգակցված է (կա բացման և փակման պիտակ): Այս տարրը ծառայում է նույն նպատակին՝ փաստաթղթում պատուհանի տարր կազմակերպելու համար:

Ինչո՞վ է այն տարբերվում հին շրջանակներից: Այն ինքնաբավ է և լրացուցիչ տարաների կարիք չունի։ Եվ դա կարող է հայտնվել ցանկացած փաստաթղթում, այնպես որ, որտեղ կա մարմնի տարր:

iframe տարրը փոխարինելի բովանդակությամբ ներկառուցված տարր է: Նրանք. ձևավորվում է ցանկացած վերացական չափերով տողի տիպի տարածք, և այս տարածքում բեռնվում է որոշ արտաքին փաստաթղթի (html ֆայլի) բովանդակությունը:

Iframe-ն ունի նույն ատրիբուտները, ինչ պատկերները (քանի որ դրանք նույն տեսակի են).

3.8K

Շատ ժամանակակից վեբկայքեր ունեն «կպչուն» նավիգացիոն ընտրացանկեր, որոնք հայտնվում են կամ կողագոտում կամ վերևում, երբ ոլորում եք էջը վերև վար: Բայց CSS հատկությունները, որոնք թույլ են տալիս ստեղծել կպչուն մենյու, միշտ չէ, որ աջակցվում են բրաուզերների կողմից: Նախկինում HTML շրջանակներն օգտագործվում էին նմանատիպ գործառույթներ իրականացնելու համար:

Շրջանակների և Iframes-ի միջև տարբերությունը

Երբ դուք օգտագործում եք շրջանակների հավաքածու, դուք բրաուզերի պատուհանի տեսանելի մասը բաժանում եք մի քանի շրջանակների: Յուրաքանչյուր կադր ունի իր բովանդակությունը, որը չի ազդում հաջորդի բովանդակության վրա։ Frames-ը և Iframes-ը կատարում են նմանատիպ գործառույթ՝ նրանք ռեսուրս են տեղադրում վեբ էջի մեջ, բայց դրանք սկզբունքորեն տարբերվում են միմյանցից.

• Շրջանակները այն տարրերն են, որոնք սահմանում են դասավորությունը.
• Iframes-ը տարրեր են, որոնք ավելացնում են բովանդակություն:

Շրջանակների պատմություն և ապագա

W3C-ն HTML5-ում հնացած շրջանակներ ունի: Այս որոշման հիմնավորումն այն էր, որ HTML շրջանակները բացասաբար են ազդում օգտագործելիության և մատչելիության վրա: Տեսնենք՝ արդարացվա՞ծ են այս պնդումները։

Շրջանակների հետ կապված խնդիրներ

• Կիրառելիության խնդիրներ. Փոքր էկրաններով շարժական սարքերի աճող ժողովրդականության հետ մեկտեղ անհրաժեշտություն կա, որ կայքերն օգտատերերին առաջարկեն բազմաթիվ դիտումներ, որոնք փոխվում են՝ կախված տեսադաշտի չափից: Թեև շրջանակները կարող են մանիպուլյացիայի ենթարկվել՝ որոշակի արձագանքողություն ապահովելու համար, դրանք այնքան էլ հարմար չեն ռեսպոնսիվ կայքեր ստեղծելու համար.
• Մատչելիություն. Էկրանի ընթերցիչները և այլ օժանդակ տեխնոլոգիաները բավականին դժվար են կարդալ և շփվել շրջանակներ օգտագործող կայքերի հետ:

Ներկայումս վեբ մշակման համաշխարհային միտում կա՝ առանձնացնել վեբ էջի բովանդակությունը դրա ներկայացումից.

• Բովանդակությունը պետք է ավելացվի և սահմանվի նշագրման միջոցով, օրինակ՝ HTML-ի միջոցով;
• Ներկայացումը սահմանվում է այնպիսի լեզուներով, ինչպիսիք են CSS-ը և JavaScript-ը:

Շրջանակների օգտագործումն ի սկզբանե ներառում է հատուկ տեսք և կառուցվածքի ստեղծում, մինչդեռ ներկայացման առաջադրանքները պետք է լուծվեն CSS-ի միջոցով:

Շրջանակների ապագան

Չնայած բոլոր ժամանակակից բրաուզերներն այսօր աջակցում են շրջանակներ, W3C-ն բացահայտորեն նշել է, որ շրջանակները «չպետք է օգտագործվեն վեբ մշակողների կողմից»: Եթե ​​դուք ունեք մի կայք, որն օգտագործում է շրջանակներ, ապա պետք է մտածեք այլ տեխնոլոգիաների անցնելու մասին: Ինչ-որ պահի բրաուզերներն այլևս չեն աջակցի շրջանակները, և երբ դա տեղի ունենա, դրանք օգտագործող կայքերը կդառնան անօգտագործելի:

Ինչպես ստեղծել շրջանակներ HTML-ում

Շրջանակները չպետք է օգտագործվեն նոր կայքեր մշակելիս, սակայն վեբ վարպետների համար, ովքեր պահպանում են հին ռեսուրսները, դրանց օգտագործման իմացությունը կարող է օգտակար լինել:

Շրջանակների հիմնական հայեցակարգը

Շրջանակների հիմնական հայեցակարգը բավականին պարզ է.

• Օգտագործեք frameset տարրը HTML փաստաթղթի մարմնի տարրի որոշակի վայրում;
• Օգտագործեք շրջանակի տարրը՝ վեբ էջի բովանդակությունը շրջանակելու համար;
• Օգտագործեք src հատկանիշը՝ բացահայտելու ռեսուրսը, որը պետք է բեռնվի շրջանակի ներսում;
• Ստեղծեք առանձին բովանդակության ֆայլ յուրաքանչյուր HTML շրջանակի համար:

Եկեք նայենք մի քանի օրինակների, թե ինչպես է դա աշխատում: Նախ պետք է ստեղծենք մի քանի HTML փաստաթղթեր, որոնցով կաշխատենք։ Եկեք ստեղծենք չորս տարբեր HTML փաստաթղթեր: Ահա թե ինչ կպարունակի առաջինը.

Շրջանակ 1

Շրջանակ 1-ի բովանդակությունը

Մենք կպահենք առաջին փաստաթուղթը որպես frame_1.html: Մնացած երեք փաստաթղթերը կունենան նմանատիպ բովանդակություն և կկոչվեն համապատասխանաբար:

Ուղղահայաց սյունակների ստեղծում

Չորս ուղղահայաց սյունակների հավաքածու ստեղծելու համար անհրաժեշտ է օգտագործել frameset տարր՝ cols հատկանիշով: cols հատկանիշն օգտագործվում է շրջանակների հավաքածուն պարունակող սյունակների քանակն ու չափը որոշելու համար: Մեր դեպքում մենք չորս ֆայլ ունենք ցուցադրելու: Հետեւաբար, մեզ անհրաժեշտ է չորս շրջանակ:

Դրանք ստեղծելու համար մենք պետք է cols հատկանիշը դնենք չորս արժեքների՝ բաժանված ստորակետով: Պարզության համար մենք կադրերից յուրաքանչյուրին կնշանակենք * , դա նրանց կսահմանի այնպիսի չափի, որը ավտոմատ կերպով կլրացնի ողջ հասանելի տարածքը: Ահա թե ինչ տեսք կունենա մեր HTML նշումը.

Եվ ահա, թե ինչպես կցուցադրվի այս նշումը.

Հորիզոնական տողերի ստեղծում

HTML շրջանակի տողերը կարող են ստեղծվել՝ օգտագործելով rows հատկանիշը, այլ ոչ թե cols հատկանիշը, ինչպես նախորդ օրինակում.

Կատարելով այս փոփոխությունը՝ մենք այնպես արեցինք, որ շրջանակներն այժմ բեռնված են չորս շարքով՝ մեկը մյուսի վրա.

Սյունակների և տողերի միաձուլում

Շրջանակների սյունակները և տողերը կարող են միաժամանակ ցուցադրվել նույն էջում: Դուք կարող եք բույն դնել մի շրջանակ մյուսի ներսում: Դա անելու համար մենք նախ ստեղծում ենք շրջանակների հավաքածու, այնուհետև տեղադրում ենք երեխայի շրջանակների հավաքածուն մայր տարրի ներսում: Ահա մի օրինակ, թե ինչպես կարող եք տեղադրել երկու տող երեք սյունակների հավաքածուի մեջ.

frameset cols="*,*,*">

HTML շրջանակի օրինակ.

Ներդրված շրջանակների հավաքածուն գտնվում է մայր տարրի՝ առաջին շրջանակի ներսում: Ներդրված տարրը կարող է տեղադրվել ցանկացած վայրում: Օրինակ, եթե ցանկանում ենք, որ տեղադրված տարրը տեղադրվի կենտրոնում, ապա մենք պարզապես վերադասավորում ենք տարրերը հետևյալ կերպ.

Ահա, թե ինչպես են այժմ կհայտնվեն շրջանակները.

Դուք կարող եք ստեղծել այլ ներդիր շրջանակներ.

Այս կոդը ստեղծում է երկու հավասար չափի սյունակների հավաքածու: Այնուհետև մենք երկրորդ սյունակը բաժանում ենք երկու շարքի: Եվ վերջապես, մենք երկրորդ շարքը բաժանեցինք երկու սյունակի: Ահա թե ինչ տեսք կունենա այն.

Տողերի և սյունակների համադրություն ստեղծելու մեկ այլ եղանակ է սյունակների և տողերի ցանց սահմանել մեկ շրջանակում: Օրինակ, եթե ցանկանում եք ստեղծել չորս հավասար չափի շրջանակներից բաղկացած ցանց, կարող եք օգտագործել հետևյալ կոդը.

Ստացված տողերի և սյունակների ցանցը կունենա հետևյալ տեսքը.

Ինչպես ոճավորել շրջանակները

Երբ խոսքը վերաբերում է վեբ էջի ձևավորմանը, որն օգտագործում է շրջանակներ HTML-ում, ոճեր նշանակելու երկու եղանակ կա.

• Յուրաքանչյուր շրջանակում ոճերի սահմանում;
• Շրջանակների հավաքածուի ոճերի սահմանում:

Յուրաքանչյուր շրջանակի ներկայացումը պետք է սահմանվի սկզբնական փաստաթղթում: Շրջանակների հավաքածուի տեսքը պետք է սահմանվի շրջանակային հավաքածու պարունակող մայր փաստաթղթում: Այլ կերպ ասած, frame_1.html-ի ոճերը պետք է սահմանվեն Frame_1.html ֆայլում պարունակվող CSS կանոններով կամ frame_1.html ֆայլի հետ կապված ոճաթերթում։

Շրջանակների ոճերի սահմանում սկզբնական փաստաթղթում

Ինչպես ցանկացած վեբ էջի դեպքում, յուրաքանչյուր շրջանակի բովանդակությունը կարող է ձևավորվել CSS-ի միջոցով: Յուրաքանչյուր կադրի բովանդակությունը ոճավորելու համար դրանք պետք է ավելացվեն հիմնական փաստաթղթին՝ կա՛մ արտաքին ոճի ֆայլին կապելով, կա՛մ ներքին կամ ներդիր ոճեր ավելացնելով: Հաշվի առնելով, որ մենք ունենք չորս սկզբնաղբյուր փաստաթուղթ, CSS ոճերը պետք է կիրառվեն յուրաքանչյուր փաստաթղթի վրա առանձին:

Կիրառելով CSS ոճերը վեբ էջի վրա, որը պարունակում է շրջանակների հավաքածու, մենք չենք կարողանա ոճեր կիրառել յուրաքանչյուր շրջանակի վրա առանձին: Եթե ​​ցանկանում ենք ոճավորել frame_1.html, մենք պետք է այդ ոճերը ուղղակիորեն ավելացնենք հենց փաստաթղթում: Ահա մի օրինակ, թե ինչպես դա կարելի է անել.

մարմին (ֆոն՝ մոխրագույն;) h1 (գույնը՝ կապույտ;) p (լուսանցք՝ 20px;) Շրջանակ 1

Շրջանակ 1-ի բովանդակությունը

Եթե ​​վերադառնանք HTML-ում չորս հավասար չափի սյունակներով շրջանակներ ստեղծելու մեր նախորդ օրինակին և բեռնենք շրջանակների հավաքածուն frame_1.html ֆայլում այս փոփոխությունները կատարելուց հետո, մենք կստանանք հետևյալը.

Ոճերի սահմանում և շրջանակների ձևաչափում

Ինչպե՞ս ազդել շրջանակային հավաքածուի ներկայացման վրա՝ բացառությամբ փաստաթղթերի ոճերի սահմանման.

• Յուրաքանչյուր շրջանակի չափը կարող է սահմանվել կամ ամրագրվել;
• Շրջանակների միջև տարածությունը կարող է փոխվել.
• Յուրաքանչյուր շրջանակի շուրջ եզրագծի ձևաչափը կարող է սահմանվել:

Այս փոփոխությունները չեն կատարվում CSS-ի միջոցով: Նրանք դա անում են՝ ավելացնելով ատրիբուտներ և դրանց արժեքները շրջանակի տարրին:

Շրջանակի չափսերը

Շրջանակների չափերը կարող են սահմանվել պիքսելներով, տոկոսներով կամ շրջանակները կարող են ավտոմատ կերպով զբաղեցնել ողջ հասանելի տարածքը: Շրջանակի չափը նշելու համար տեղադրեք ցանկալի արժեքը cols կամ rows հատկանիշի մեջ: Լռելյայնորեն, եթե շրջանակը չունի նշված noresize հատկանիշը, կայքի այցելուները կարող են օգտագործել մկնիկը երկու շրջանակների միջև սահմանը քաշելու համար՝ փոխելով դրանց չափերը: Եթե ​​դա ցանկալի չէ, շրջանակի տարրը կարող է կիրառել noresize հատկանիշը և չի կարող չափափոխվել: Եկեք համատեղենք այս երկու հասկացությունները գործնականում:

Մենք կստեղծենք հետևյալ դասավորությունը.

• Մեկ ամբողջ լայնությամբ տող էջի վերևի երկայնքով;
• Երեք սյունակ վերևի տողի տակ;
• Առաջին և երրորդ սյունակները չափվում են ձախ և աջ կողագծեր ստեղծելու համար.
• Միջին սյունակը նախատեսված է ավելի մեծ բովանդակության տարածք ներկայացնելու համար:

Մենք կարող ենք ստեղծել HTML շրջանակ՝ օգտագործելով հետևյալ կոդը.

Այս կոդը ստեղծում է երկու տողերի շրջանակ.

• Առաջին շարքը ունի 150 պիքսել բարձրություն: Առաջին շրջանակի համար նշված noresize հատկանիշը նշանակում է, որ դրա չափը չի կարող փոխվել.
• Այն ոճերը, որոնք մենք ավելի վաղ կիրառել ենք frame_1.html-ում, պահպանվում են, բայց դրանք ազդում են միայն այդ շրջանակի բովանդակության վրա;
• Երկրորդ շարքը ընդլայնվում է մնացած տարածքը լրացնելու համար.
• Երկրորդ շրջանակների հավաքածուն տեղադրված է երկրորդ շարքում և պարունակում է երեք սյունակ.
• Առաջին և երրորդ սյունակները լրացնում են դիտարկիչի պատուհանի հասանելի տարածքի 20%-ը.
• Երկրորդ սյունակը ընդլայնվում է՝ լրացնելով առաջին և երրորդ սյունակների միջև մնացած տարածությունը.
• Քանի որ մենք չենք նշել noresize հատկանիշը սյունակների համար, դրանք սկզբում կցուցադրվեն կոդում նշված չափերի հիման վրա:

Բայց կայքի այցելուն կկարողանա ձեռքով փոխել դրանց չափերը:

Այս կոդը ստեղծում է վեբ էջ, որը ներկայացվում է այսպես.

Եզրագծի ձևավորում և շրջանակի շուրջ լցոնում

Այժմ, երբ մենք սահմանել ենք դասավորությունը, անհրաժեշտության դեպքում մենք կարող ենք ավելացնել կամ նվազեցնել շրջանակների միջև եղած միջադիրը, ինչպես նաև հեռացնել դրանց միջև եղած սահմանը: Օգտագործելով նախորդ քայլում մեր ստեղծած դասավորությունը, եկեք հանենք երեք սյունակների միջև եղած սահմանները, բայց թողնենք եզրագիծը վերևի և ներքևի տողերի միջև: Եկեք նաև ավելացնենք մի քանի լրացում առաջին HTML շրջանակի բովանդակության շուրջ.

Առաջին կադրին կիրառվող marginheight հատկանիշը ավելացնում է 15 պիքսել լուսանցք առաջին կադրում բեռնված բովանդակության վերևում և ներքևում: Շրջանակի սահմանի 0 արժեքը հեռացնում է բոլոր երեք ներքևի շրջանակների սահմանները: Ահա թե ինչ տեսք կունենա այն.

Հղումների միջոցով շրջանակների սահմանում

Շրջանակների ամենատարածված կիրառություններից մեկը կադրի ներսում «կպչուն» նավիգացիոն մենյու ստեղծելն է, որը միշտ տեսանելի է` անկախ այլ կադրերի բովանդակության դիրքից: Երբ ճիշտ օգտագործվում են, նավիգացիոն մենյուի հղումները հանգեցնում են նոր ռեսուրսների բեռնմանը շրջանակում, մինչդեռ շրջանակի մնացած մասը մնում է ստատիկ:

Դուք կարող եք ձևաչափել խարիսխները հատուկ շրջանակներ թիրախավորելու համար՝ ցանկալի շրջանակի տարրին տալով անուն հատկանիշ և օգտագործելով թիրախ հատկանիշը a տարրի ներսում՝ href-ը բեռնելու նշված շրջանակում: Եթե ​​այս ամենը մի փոքր շփոթեցնող է, եկեք քայլ առ քայլ ուղեկցենք ձեզ HTML-ում շրջանակներ ստեղծելու գործընթացով:

Առաջին հերթին, մենք պետք է անուն վերագրենք այն շրջանակին, որտեղ պետք է բացվեն հղումները: Ավելի վաղ ստեղծած դասավորության մեջ մենք կարող ենք օգտագործել ձախ սյունակը նավիգացիոն մենյուի համար, իսկ կենտրոնական սյունակը որպես թիրախային շրջանակ: Դա անելու համար դուք պետք է նշանակեք անուն հատկանիշ թիրախ տարրին.

Այժմ, երբ մենք սահմանել ենք name = "mid_col" կենտրոնական սյունակի համար, մենք կարող ենք մի քանի հղումներ ստեղծել մեր ձախ սյունակի frame_2.html սկզբնական փաստաթղթում:

Շրջանակ 2

Շրջանակ 2-ի բովանդակությունը

• Բեռնել frame_1.html
• Բեռնել frame_2.html
• Բեռնել frame_3.html
• Բեռնել frame_4.html

Այժմ, երբ մենք բեռնում ենք վեբ էջը, ձախ կողագոտում կտեղակայվեն նավիգացիոն չորս հղումներ: Երբ հղումը սեղմվում է, ֆայլի բովանդակությունը բեռնվում է միջին սյունակի շրջանակում՝ ատրիբուտ name="mid_col": Սա այն է, ինչ մենք կտեսնենք, երբ էջը բեռնվի.

Եթե ​​սեղմենք Load frame_1.html հղումը, ապա այս ֆայլի բովանդակությունը կբեռնվի կենտրոնական սյունակում, և մենք կստանանք հետևյալը.

Եթե ​​սեղմենք Load frame_2.html հղումը, կտեսնենք, որ և՛ ձախ կողագոտում, և՛ կենտրոնական սյունակում կցուցադրվեն նավիգացիոն հղումներ.

Սեղմելով Load frame_3.html և Load frame_4.html հղումները կենտրոնական սյունակում, կբեռնվի այս ֆայլերի բովանդակությունը: Եթե ​​մենք մոռացել ենք հղումներից մեկի համար ավելացնել target="mid_col" հատկանիշը, ապա երբ սեղմեք դրա վրա, ֆայլը կբեռնվի այն շրջանակում, որը պարունակում է հղումը: Եթե ​​ցանկանում ենք վերաբեռնել ամբողջ էջը, օրինակ, երբ հետևում ենք արտաքին կայքի հղմանը, ապա պետք է ավելացնենք target="_blank" կամ target="_top" հատկանիշը: Noframes-ի հետադարձ կապի ապահովում

Նախկինում noframes տարրն օգտագործվում էր բրաուզերների հետադարձ կապ ապահովելու համար, որոնք չեն աջակցում HTML շրջանակներ: Ներկայումս բոլոր ժամանակակից բրաուզերները աջակցում են շրջանակներ, բայց noframes-ը գործնականում չի ապահովվում: Արդյունքում մենք այլևս կարիք չունենք ստեղծելու noframes-ի հետադարձ կապ՝ շրջանակների հետ աշխատելիս:

Ինչպես դարձնել շրջանակները արձագանքող

Շրջանակներ օգտագործելիս բավականին դժվար է ապահովել օգտագործման հեշտությունը սմարթֆոններից և փոքր պլանշետներից կայք մուտք գործող այցելուների համար: Քանի որ շրջանակներն ամբողջությամբ հեռացվել են HTML5-ից և համարվում են հնացած, կարևոր է, որ շրջանակների միջոցով կառուցված կայքերի սեփականատերերը պլանավորեն վերակառուցել իրենց ռեսուրսները և տեղափոխել այլ տեխնոլոգիաներ:

Օգտագործելով տողեր, քան սյունակներ

Հնարավորության դեպքում շրջանակները կազմակերպեք ոչ թե սյունակներով, այլ տողերով: Փոքր էկրանին շատ ավելի հեշտ է նավարկել բովանդակությունը ուղղահայաց, քան հորիզոնական: HTML շրջանակները, որոնք դասավորված են անընդմեջ, շատ ավելի հեշտ է դիտել փոքր էկրանին: Եթե ​​մենք նվազեցնենք տողեր և սյունակներ պարունակող դասավորությունների լայնությունը՝ նմանակելով Apple iPhone 6 էկրանը, ապա կտեսնենք, որ տողերը շատ ավելի հեշտ են դիտվում, քան սյունակները.

Օգտագործեք տոկոսներ սյունակների լայնության համար

Երբ սյունակների չափերը սահմանվում են ոչ թե պիքսելներով, այլ տոկոսներով, դրանք ավտոմատ կերպով կփոխվեն՝ ելնելով սարքի էկրանի չափից: Թեև դա կարող է որոշակի խնդիրներ ստեղծել, քանի որ որոշ շրջանակներ կարող են դառնալ չափազանց փոքր, ընդհանուր փոխազդեցությունը և դիտման փորձը ավելի լավ կլինի, եթե սյունակների ընդհանուր լայնությունը որոշվի տոկոսներով, այլ ոչ թե պիքսելներով:

Ինչպես անցնել շրջանակներից այլ տեխնոլոգիաների

Ե՛վ frameset տարրը, և՛ շրջանակի տարրը հեռացվել են վերջին HTML5 ճշգրտումից: Շրջանակների միջոցով կառուցված կայքերի սեփականատերերը պետք է վերակառուցեն իրենց ակտիվները՝ դրանք դասավորությունից հեռացնելու համար: Ինչ-որ պահի բրաուզերները կդադարեն աջակցել շրջանակներին: Այսպիսով, շրջանակներից հրաժարվելը ոչ միայն ցանկալի է, այլև պետք է արվի:

Շրջանակներում պարունակվող բովանդակության գնահատում

HTML iframes օգտագործող կայքի վերանախագծման առաջին քայլը շրջանակների օգտագործման պատճառների բացահայտումն է.

• Շրջանակներ օգտագործվե՞լ են կոնկրետ դասավորություն ստեղծելու համար: Եթե ​​այո, CSS-ը կարող է օգտագործվել նմանատիպ դասավորություն ստեղծելու համար.
• Արդյո՞ք շրջանակներն օգտագործվել են հատուկ չափի գովազդային կոնտեյներ ստեղծելու համար: Այս էֆեկտը վերստեղծելու բազմաթիվ եղանակներ կան՝ օգտագործելով CSS կամ վիջեթներ, որոնք նախատեսված են CMS-ի հետ աշխատելու համար;
• Արդյո՞ք շրջանակներ են օգտագործվել կպչուն նավիգացիոն ընտրացանկեր ստեղծելու համար: Կրկին, նույն էֆեկտը կարող է վերստեղծվել՝ օգտագործելով CSS;
• Արդյո՞ք շրջանակներն օգտագործվել են արտաքին կայքից բովանդակություն բեռնելու համար: Եթե ​​այո, ապա iframe տարրը, որը HTML5-ի մի մասն է, կարող է օգտագործվել արտաքին կայքի բովանդակությունը տեղադրելու համար:

Գրեթե ամեն դեպքում, դուք կարող եք օգտագործել CSS-ը՝ շրջանակների միջոցով ստեղծված դասավորությունը վերստեղծելու համար, իսկ iframes-ը կարող է օգտագործվել արտաքին ռեսուրսներ ներկառուցելու համար:

Ձեր նոր կայքի ռազմավարություն

Եթե ​​ձեր կայքը կառուցվել է շրջանակների միջոցով, ապա մեծ հավանականություն կա, որ այն արդեն շատ հնացած է: Ձեր կայքի ամբողջ բովանդակությունը մեկ HTML ֆայլի մեջ պարզապես հավաքելու և այն CSS-ով ձևավորելու փոխարեն, գուցե ժամանակն է մտածել բովանդակության կառավարման համակարգի թարմացման մասին:

CMS-ին անցնելն ի սկզբանե ավելի շատ ժամանակ կպահանջի, բայց երկարաժամկետ հեռանկարում ժամանակակից վեբ կայքի գործարկման առավելությունները կգերազանցեն կարճաժամկետ մարտահրավերներին: Որպեսզի օգնենք ձեզ որոշել բովանդակության կառավարման համակարգը, խորհուրդ ենք տալիս ուշադրություն դարձնել երեք ամենահայտնիներին.

• WordPress;
• Joomla! ;
• Drupal.

Լրացուցիչ ռեսուրսներ

Եթե ​​ցանկանում եք ավելին իմանալ HTML շրջանակների մասին, ապա լրացուցիչ տեղեկությունների համար լավագույն աղբյուրը Համաշխարհային ցանցի կոնսորցիումն է (W3C): Ահա շրջանակների մասին տեղեկություններ ունեցող էջերից մի քանիսը.

• HTML4 փաստաթղթեր շրջանակների մասին;
• HTML5-ի հնացած գործառույթները

Առնչվող նյութեր

Նյութի անվանումը	Հատկանիշներ	Նկարագրություն
noframes		Տարրը օգտագործվել է մայր տարրի ներսում՝ այն օգտատերերի համար, որոնց բրաուզերները չեն աջակցում, հետադարձ բովանդակություն տրամադրելու համար: Այս պահին շրջանակները հնացած տեխնոլոգիա են, ուստի տարրը չպետք է օգտագործվի:
iframe	ավազատուփ	ստեղծում է ներկառուցված շրջանակ, որը դուրս է բերում անկախ HTML փաստաթուղթ ընթացիկ փաստաթղթին:
շրջանակների հավաքածու	շրջանակի եզրագիծ	Տարրն օգտագործվել է շրջանակների խումբ ստեղծելու համար, որոնք կարող են մանիպուլյացիայի ենթարկվել և ձևավորվել որպես մեկ: HTML շրջանակներն այժմ հնացած են և չպետք է օգտագործվեն:
շրջանակ	Սրկ	Տարրը օգտագործվել է դիտարկիչի պատուհանը մի քանի անկախ մասերի բաժանելու համար: Շրջանակները ներկայումս հնացած են և չպետք է օգտագործվեն:

Այս հրապարակումը «Շրջանակներ» հոդվածի թարգմանությունն է, որը պատրաստվել է ծրագրի բարեկամական թիմի կողմից

453

Frameset-ը բրաուզերի պատուհանում մի քանի առանձին ոլորման տարածքներ ստեղծելու հեշտ միջոց է, ինչպես նաև շրջանակի բովանդակությունը փոխելու հարմար մեխանիզմ:

Բայց շրջանակներն ունեն նաև զգալի թերություններ. Այդ իսկ պատճառով դրանք օգտագործելը խորհուրդ չի տրվում։ Չնայած շրջանակները աջակցվում են HTML 4.01-ում, դրանք HTML 5-ում չեն: Դրանք փոխարինվել են հնարավորություններով հարուստ CSS ձևաչափման մեթոդներով։ Շրջանակների հիմնական թերությունները.

• Որոնման համակարգերը դժվարությամբ են աշխատում շրջանակների հետ;
• URL-ի վատ համատեղելիություն;
• Շրջանակները հասանելի չեն բոլոր հաճախորդի հավելվածների համար.
• Շրջանակներում ցուցադրվող էջերը դժվար է էջանշել;
• Վեբ էջեր տպելիս ընդհանուր խնդիրներ:

Սովորաբար, շրջանակներն օգտագործվում են մեկ պատուհանում առանձին ոլորվող տարածքներ ստեղծելու համար: Այս մոտեցումն օգտագործվում է բջջային և աշխատասեղանի հարթակների համար նախատեսված հավելվածներում: Նման հավելվածի օրինակ է Windows Explorer-ը: Explorer պատուհանը բաղկացած է երկու մասից. Թղթապանակները և «Ֆավորիտները» ցուցադրվում են պատուհանի ձախ կողմում, իսկ աջ կողմում` պատուհանի ձախ կողմում ընտրված թղթապանակի բովանդակությունը:

Շրջանակներ և շրջանակային փաստաթղթեր

Շրջանակները դժվար է օգտագործել, քանի որ դրանք պահանջում են առանձին HTML ֆայլի ստեղծում, որը սահմանում է շրջանակների գտնվելու վայրը: Ինչպես նաև լրացուցիչ HTML ֆայլեր՝ դրանք օգտագործելու համար:

Շրջանակների հավաքածուի ստեղծում

Ստորև բերված է շրջանակային հավաքածու HTML ստեղծելու օրինակ.

… …

Կոդի առանձնահատկությունները.

• «մարմին» տարրը բացակայում է։ Դրա դերը խաղում է պիտակը;
• Ներսում տեղակայված պիտակները սահմանում են շրջանակների բովանդակությունը և դրանց հատկությունները.
• Բացառությամբ և փաստաթղթում այլևս բովանդակություն չկա:

Նշել

Պիտակը պատասխանատու է փաստաթղթում շրջանակի գտնվելու վայրի համար: Դրանում նշված արժեքները որոշում են շրջանակների շարքերի և գծերի քանակը, ինչպես նաև շրջանակների լայնությունը: Պիտակի ձևաչափն ունի հետևյալ տեսքը.

Սյունակների կամ տողերի չափերը կարող են նշվել պիքսելներով, տոկոսներով կամ «*»: Վերջին դեպքում զննարկիչը պատուհանի մնացած մասը կբաժանի սյունակների, որտեղ «*» արժեքը ցույց է տալիս դրանց լայնությունը:

Cols կամ rows հատկանիշի արժեքները նաև որոշում են էջում ցուցադրվող շրջանակների քանակը: Յուրաքանչյուր մուտք (արժեք) պահանջում է պիտակ պիտակի ներսում:

Դիտարկենք պիտակ ստեղծելու հետևյալ օրինակները.

Նշել

Թեգը պատասխանատու է շրջանակների պիտակի մեջ ընդգրկված շրջանակների յուրաքանչյուր շրջանակի հատկությունների համար: Այն ունի հետևյալ շարահյուսությունը.

Name հատկանիշը շրջանակին տալիս է եզակի անուն, որը կարող է հղում կատարել URL-ներով, սկրիպտներով և այլն: Սա անհրաժեշտ է շրջանակի բովանդակությունը վերահսկելու համար: Src հատկանիշն օգտագործվում է բովանդակության URL-ը նշելու համար, որը պետք է ցուցադրվի շրջանակում:

Պիտակն աջակցում է ևս մեկ հատկանիշ՝ noresize: Լռելյայնորեն շրջանակի չափը փոփոխելի է: Չափափոխումը կանխելու համար դուք պետք է սահմանեք noresize հատկանիշը noresize:

Օրինակ :

Շրջանակների համար հղումների սահմանում

Շրջանակի բովանդակությունը փոխելու համար դուք պետք է նշեք ցանկալի շրջանակը: Դրա համար օգտագործվում է name հատկանիշը: Այս անուններն այնուհետև կարող են օգտագործվել սկրիպտներում և հղման պիտակներում՝ շրջանակի համար նոր բովանդակություն սահմանելու համար:

Դուք կարող եք փոխել շրջանակի բովանդակությունը շրջանակների հավաքածուում՝ օգտագործելով հղման պիտակի թիրախային հատկանիշը: Թիրախային հատկանիշի համար թույլատրվում են հետևյալ արժեքները.

Օրինակ :

Ուրեմն շրջանակներ... ինչի՞ համար են դրանք և ի՞նչ օգուտներ են տալիս։ Այս գլխում ես կփորձեմ խոսել այս մասին և, իհարկե, այն մասին, թե ինչպես դրանք իրականացնել և աշխատել դրանց հետ:

Հաճախ կայք ստեղծելիս անհրաժեշտ է դառնում միաժամանակ մի քանի HTML փաստաթղթեր բացել դիտարկիչի մեկ պատուհանում... ուստի ստեղծվել են շրջանակներ՝ յուրաքանչյուր փաստաթղթի համար աշխատանքային տարածքներ սահմանելու համար: Բացի այդ, շրջանակները լավ գործիք են, որոնցով դուք կարող եք կատարել էջի դասավորություն, դրանք ծառայում են որպես էջի դասավորության աղյուսակային մեթոդի արժանի «այլընտրանք»... Ես «այլընտրանք» բառը դնում եմ չակերտների մեջ, քանի որ սա բոլորովին այլ ձև է. կայք կառուցելու իր առավելություններն ու թերությունները, և բավականին դժվար է այն համեմատել կայքի մինչ այժմ ծանոթ կառուցման հետ.. բայց առաջին հերթին..

Սկսե՞նք։ Ենթադրենք, մենք պետք է բացենք միանգամից երեք HTML փաստաթուղթ մեկ դիտարկիչի պատուհանում և դասավորենք դրանք, օրինակ, այսպես.

Ի՞նչ է մեզ պետք սրա համար: Սկսելու համար, իհարկե, մենք պետք է ստեղծենք երեք առանձին html փաստաթուղթ, որոնք իրականում կբացենք մեկ պատուհանում: Թող առաջին փաստաթուղթը պարունակի գրաֆիկական պատկեր և գործի որպես լոգո, եկեք այն անվանենք logotype.html, երկրորդ փաստաթուղթը կլինի: որոշ բովանդակություն.. եկեք այն անվանենք մենյու .html, իսկ երրորդը շատ տեքստով փաստաթուղթ է: text.html. Իհարկե, դուք կարող եք գալ ձեր սեփական անուններով, ինչպես նաև փաստաթղթերի բովանդակությամբ, բայց առայժմ ավելի լավ է պատճենել իմը... դա ավելի հարմար կլինի և՛ ինձ, և՛ ձեզ:

Այսպիսով, կան երեք ֆայլ logotype.html, menu.html և text.html.., որոնք մենք պետք է տեղադրենք մեկ տանիքի տակ, բայց մենք դեռ տանիք չունենք:

Մենք գրում ենք «տանիք», հիմնական փաստաթուղթը, որին մենք կապելու ենք մեր ֆայլերը: Քանի որ այն լինելու է գլխավորը, տալիս ենք index.html անվանումը։

շրջանակներ

Ահա մեզ ծանոթ փաստաթղթի կառուցվածքը, որը մենք ծամել ենք մեր թրեյնինգի հենց սկզբում Շրջանակները կոտրում են գոյություն ունեցող կարծրատիպերը: Փաստաթղթի շրջանակի կառուցվածքը հետևյալն է.

շրջանակներ

Պիտակի բացակայությունը փոխհատուցվում է նոր պիտակով. տեղադրել շրջանակ կամ շրջանակների հավաքածու... մենք իրականում այս տղայի հետ կաշխատենք հետագա:

Պիտակն ունի տողեր և cols ատրիբուտներ. այս ատրիբուտները զննարկիչին ասում են, թե ինչպես տեղադրել շրջանակները բրաուզերի պատուհանում:

տողեր - հորիզոնական սյունակներ - ուղղահայաց

Մեր դեպքում մեզ անհրաժեշտ է շրջանակների հորիզոնական տեղադրում... ուստի գրում ենք այսպես.

շրջանակներ

Հավասարության նշանից հետո տոկոսները ոչ այլ ինչ են, քան մեր շրջանակի պատուհանների չափերը մեկ մեծ բրաուզերի պատուհանում, որը մենք պետք է տեղադրենք երեք պատուհան, հետևաբար, կան նաև երեք արժեքներ, որոնք բաժանված են ստորակետներով. Հիշեք, թե ինչպես ենք սահմանել աղյուսակի բջիջների չափերը, այստեղ գործում է նույն սկզբունքը, ինչպես աղյուսակի բջիջների դեպքում, շրջանակի չափերը կարող են նշվել որպես ընդհանուր տարածքի տոկոս և պիքսելներով:

Ահա գրելու որոշ օրինակներ.
- այս գրառումը ցույց է տալիս, որ կլինեն երեք հորիզոնական պատուհաններ, որտեղ վերջինը կզբաղեցնի բրաուզերի պատուհանի տարածքի 70%-ը, իսկ առաջին երկուսը կզբաղեցնեն 15%-ը։
- այստեղ ուղղահայաց տեղակայված են երեք պատուհաններ, որոնց լայնությունը նշված է պիքսելներով:
- նման մուտքը նշանակում է, որ առաջին և երրորդ պատուհանները կունենան համապատասխանաբար 100 և 180 պիքսել լայնություն, իսկ երկրորդ շրջանակը կզբաղեցնի ողջ մնացած տարածքը:

Մենք ավարտեցինք փաստաթղթերի տեղադրումը, այժմ մնում է դրանք միացնել և վայելել առաջին արդյունքը։

Թեգը և դրա src հատկանիշը զննարկիչին ցույց կտան դեպի html փաստաթղթի ուղին, որը պետք է բացվի դրա համար նախատեսված տարածքում։ Մենք ունենք երեք առանձին փաստաթուղթ logotype.html, menu.html և text.html, այժմ մենք պետք է յուրաքանչյուրի համար նշենք ուղի, ինչը մենք իրականում անում ենք: (Ես ենթադրում եմ, որ բոլոր չորս ֆայլերը գտնվում են նույն թղթապանակում, և դրանց ուղիներն ունեն ամենապարզ նշումը, ինչպիսին է.)

Index.html ֆայլ


շրջանակներ







Ֆայլ logotype.html


շրջանակներ





Ֆայլի մենյու.html


շրջանակներ


Մենյու:

Շամպինյոն ապուր
Լոբի կաթսայի մեջ, իտալական ոճով
Ավստրալական ամառային աղցան
... ... ...



Ֆայլի տեքստ.html


շրջանակներ


Շամպինյոն ապուր

շատ տեքստ..

Այս օրինակում ես տեղադրեցի բոլոր չորս HTML փաստաթղթերը, որտեղ index.html-ը հիմնականն է, իսկ մյուս երեքը plug-in էջեր են, որոնցից յուրաքանչյուրը, սկզբունքորեն, կարող է ինքնուրույն աշխատել և պարունակել ցանկացած բան՝ նկարներ, աղյուսակներ, տեքստեր, հղումներ։ .. Ես դա արեցի Սա ձեզ համար շրջանակների հետ աշխատելու սկզբունքը հասկանալու համար է: Հետագա օրինակներում ես կտեղադրեմ միայն գլխի ֆայլը շրջանակներով (հակառակ դեպքում նրանք բոլորն էլ չափազանց մեծ տեղ են զբաղեցնում էջում), և դուք գիտեք, որ ես «ինչ-որ տեղ այնտեղ» ունեմ բոլոր մյուս ֆայլերը, որոնք պարունակում են գրաֆիկա, տեքստեր, գուցե ինչ-որ բան: ուրիշ.. լավ, հետ մի մնա ինձանից, կամաց-կամաց խմբագրիր քո սեփական էջերը ապագա թրեյնինգի կայքի համար։ Ես չգիտեմ, թե ինչի մասին ես քոնը գրելու, բայց ես խոստացել էի օգնել մի աղջկա՝ նվիրված կայք գրել։ եփել..)) որ որոշեցի, այսպես ասած, մի քարով երկու թռչունի վրա նշան բռնել.. նապաստակ աղջիկն ու կայքը..)) նման բան..))

Վերոնշյալ օրինակում մենք բոլոր պատուհանները դասավորեցինք հորիզոնական՝ փոխելով տողերի հատկանիշը cols-ի, կարող եք դրանք դասավորել ուղղահայաց կարգով։ Բայց ի՞նչ, եթե ձեզ անհրաժեշտ է տեղադրել մեր պատուհանները:

այսպես?: կամ այսպես?: կամ նույնիսկ այսպես:

Ելք կա։ Եկեք նայենք օրինակներին:

Սկսենք առաջին դեպքից... ի՞նչ ենք տեսնում։ Եվ մենք տեսնում ենք երկու տող, որտեղ երկրորդը բաժանված է երկու սյունակի։

Եվ հիմա, հերթականությամբ.

- բրաուզերի պատուհանը բաժանեք երկու տողի
- բեռնեք մեր պատկերանշանը առաջին տողում
- և երկրորդ շարքը բաժանեք երկու սյունակի
- առաջինում կլինի ճաշացանկ
- իսկ երկրորդում շատ տեքստ կա
- փակել սյունակի բաժանման պիտակը
- փակել գծի բաժանման պիտակը

Ընդհանրապես ճիշտ չէ սյունակներ և տողեր ասել, քանի որ շրջանակները ոչ մի կապ չունեն աղյուսակների հետ, քան տեսողական նմանությունը, ճիշտ է ասել հորիզոնական և ուղղահայաց շրջանակներ... քեզ համար ավելի պարզ...

Լավ, եկեք նայենք օրինակին.

շրջանակներ

Երկրորդ դեպքում մենք ունենք երկու սյունակ, որոնցում երկրորդը բաժանված է երկու տողի, ուստի կգրենք այսպես.

- պատուհանը բաժանեք երկու սյունակի
- առաջինը կպարունակի բովանդակությունը
- և երկրորդը բաժանիր երկու տողի
- լոգոն
- և հիմնական տեքստը
- փակել գծի բաժանումը
- փակել բաժանումը սյունակների

շրջանակներ

Երրորդ դեպքը մի փոքր ավելի բարդ է, բայց դուք չպետք է վախենաք դրանից... մանավանդ, որ ես անձամբ եմ ընտրել այս տեսակի շինարարությունը խոհարարական արվեստի մասին կայքի համար, ստորև կբացատրեմ, թե ինչու. Ի՞նչ ունենք։ երեք սյունակ, իսկ երկրորդ սյունակը հիմնականում պարունակում է մեր առաջին դեպքը..

- պատուհանը բաժանեք երեք սյունակի (նկատի ունեցեք, որ երկրորդ սյունակը զբաղեցնում է ուղիղ 800 պիքսել, իսկ երկու արտաքինները ճշգրիտ չափ չունեն և մնացած տարածքը կբաժանեն կիսով չափ)
-Առաջին սյունակում մենք բեռնում ենք html փաստաթուղթ, որը կկատարի զուտ դեկորատիվ գործառույթ

-
-
- Երկրորդ սյունակում մենք տեղադրում ենք մեր «առաջին դեպքը»
-
-
-
-

- երրորդ սյունակում մենք բեռնում ենք նույն ֆայլը դեկորացիաներով
- զարկ

Նայեք օրինակին, այնուհետև ես կբացատրեմ, թե ինչու ընտրեցի հինգ պատուհանից բաղկացած ճանապարհը

շրջանակներ

Ուրեմն ինչու հինգ պատուհան: Հիշում եմ, որ ես արդեն գրել էի այն մասին, որ ինտերնետի տարբեր օգտատերեր ունեն տարբեր լուծումներ իրենց մոնիտորների վրա և, համապատասխանաբար, տարբեր էկրանների վրա մեր կայքը տարբեր տեսք կունենա... և եթե չկան կոնկրետ չափեր, մեր բոլոր նկարները, տեքստերը, աղյուսակները Ինչպես ասում են, «լողում» է այն օգտվողների համար, որոնց մոնիտորների լուծումները տարբերվում են ձերից: Երբ մենք տեղադրեցինք կայքը՝ օգտագործելով աղյուսակը, էջի չափերի խնդիրը լուծվեց՝ այս աղյուսակին հատկացնելով որոշակի լայնություն և բարձրություն, ցավոք, դա հնարավոր չէ անել շրջանակների միջոցով... նույնիսկ եթե դուք նշեք շրջանակների լայնությունը տոկոսներով, բայց պիքսելներով, դեռևս վերջին սյունակը կձգվի բրաուզերի պատուհանի մնացած լայնությամբ և էջը, ինչպես ասում են, կկորցնի իր «վաճառվող տեսքը»: Ուրեմն ի՞նչ պետք է անենք։ Մենք պետք է դիմենք փոքրիկ հնարքների... Կենտրոնական սյունակը (որում իրականում մենք ունենք ամբողջ էջը) 800 պիքսել չափով, մենք մեկընդմիշտ որոշում ենք դրա լայնությունը, իսկ անչափ առաջին և երրորդ սյունակները՝ դեկորացիայից բացի, հանդես են գալիս որպես մի տեսակ «աղբյուրներ», որոնց վրա գտնվում է կենտրոնական սյունը: Այսպիսով, փոքր մոնիտորի լուծաչափով մարդկանց համար այս պատուհանները/դաշտերը նեղ կլինեն, իսկ բարձր լուծաչափով մարդկանց համար՝ լայն, այնպես որ կենտրոնական սյունը ոչ մի կերպ չի ազդի, և այժմ մենք կարող ենք ցանկացած առարկա տեղադրել դրանում լիակատար վստահությամբ, տեղական ճշգրիտ հղումով, առանց անհանգստանալու դրանց հետագա ճակատագրի մասին: Համեմատե՛ք առաջին օրինակը, որտեղ երեք պատուհան կա, իսկ երրորդը, որտեղ արդեն հինգն է, ավելի լավ չէ՞:

Շրջանակների տեղադրմամբ ու չափերով կավարտենք... իսկ մենք երկար ժամանակ էստեղ ենք մնացել... անցնենք առաջ։

Մենք շրջանակները բերում ենք կոկիկ տեսքի:

Մեր վերջին օրինակում առաջին բանը, որ գրավում է ձեր աչքը, ոլորման գծերի մի ամբողջ փունջ է, որոնք այնտեղ են, որտեղ դրանք պետք են և որտեղ դրանք պետք չեն: Եկեք ազատվենք դրանցից, լավ, կարող եք դրանք թողնել ինչ-որ տեղ: Սա արվում է օգտագործելով scrolling հատկանիշը - tag, այն կարող է ունենալ երեք իմաստներից մեկը.

• ոչ
• այո - միշտ ցույց տալ,
• ավտո

շրջանակներ

Շրջանակի լուսանցքները կամ այլ կերպ՝ շրջանակի սահմաններից մինչև տեքստ կամ պատկեր հեռավորությունը, ինչպես մեր դեպքում, սահմանվում են պիքսելներով՝ օգտագործելով պիտակի լուսանցքի լայնությունը և լուսանցքի բարձրությունը:

շրջանակներ

Եկեք մի փոքր խոսենք մեր շրջանակների շուրջ շրջանակի մասին:

Եթե ​​նկատեցիք, վերջին օրինակում կուրսորը սավառնելով կադրի եզրագծի վրա, կուրսորը, այսինքն, այլ տեսք է ստանում (բռնել և շարժվել), և այժմ այս եզրագիծը կարող է ձգվել ցանկացած ուղղությամբ՝ պահելով ձախ կողմը։ մկնիկի կոճակը: Երբեմն շրջանակների եզրագծերի այս «շարժունակությունը» հայտնվում է վեբ վարպետի ձեռքում, բայց ավելի հաճախ այն դեռ խանգարում է: Որպեսզի օգտագործողին թույլ չտա խաղալ պիտակի պատուհանների չափերի հետ, հորինվել է noresize հատկանիշը:

շրջանակներ

Բայց սահմանային հատկանիշը, որը վաղուց ծանոթ է մեզ, շրջանակների միջև սահմանում է այս նույն շրջանակների լայնությունը պիքսելներով... գրված է պիտակի ներսում։ Ինչպես նախկինում, border="0" արժեքը լիովին կվերացնի սահմանները:

շրջանակներ

Շրջանակներ և հղումներ.

Եկել է մեր կայքը հղումներով վերակենդանացնելու ժամանակը, բայց խնդիրն այն է, որ իտալերենով ծանոթ հղումը Beans in a pot-ը կբացի այս փաստաթուղթը նույն շրջանակում, որտեղ այն գտնվում է, մեր դեպքում անմիջապես բովանդակության շրջանակում, և բովանդակությունն ինքնին սրա վրա սեղմելու պահին հղումները կկորչեն մոռացության մեջ: կարող եք նայել անշնորհք օրինակին. սեղմեք դրա ցանկացած հղման վրա: Որպեսզի դա չպատահի ապագայում, դուք պետք է տեղեկացնեք բրաուզերին. Որ շրջանակում է մեզ անհրաժեշտ փաստաթուղթը բացելու համար, լավ, եթե, իհարկե, դուք իսկապես կարիք չունեք նրան բացելու նույն շրջանակում:

Հիշում եմ, մենք արդեն ծանոթացանք հղումներին նվիրված գլխում անվան և թիրախային ատրիբուտների հետ, դրանք օգտագործվում են նաև շրջանակների հետ աշխատելիս, մեխանիզմը մի փոքր փոխված է և գրեթե նույնն է։ Նախ, այն շրջանակին, որում մենք կցանկանայինք բացել ցանկացած փաստաթուղթ, պետք է նշանակվի անհատական ​​անուն:

գրված է այսպես.

Կարող ես ցանկացած անուն հորինել.. գլխավորը չմոռանալ այն..

Գրված է այսպես.

Լոբի կաթսայի մեջ, իտալական ոճով

Դե, կարծում եմ, կարիք չկա ձեզ բացատրելու, որ նախքան որևէ փաստաթղթին անդրադառնալը, պետք է դրանք ստեղծել... իմ դեպքում ֆայլերը (բաղադրատոմսերը) ունեն text.html, text1.html, text2.html անունները։ ...

Նայեք օրինակին.

Index.html ֆայլ


շրջանակներ













Ֆայլի մենյու.html


շրջանակներ


Մենյու:

Շամպինյոն ապուր
Լոբի կաթսայի մեջ, իտալական ոճով
Ավստրալական ամառային աղցան
... ... ...

Ինչպես նախկինում, փաստաթուղթը կարող է բացվել առանձին պատուհանում: Հիշեցնեմ, որ գրված է այսպես.

Լոբի կաթսայի մեջ, իտալական ոճով

Կամ թիրախ հատկանիշին վերագրելով _top արժեքը՝ բացեք այն նույն բրաուզերի պատուհանում, բայց ամբողջ էկրանով.. «զրոյացնելով» այն ամենը, ինչ կա.. գրված է այսպես.

Լոբի կաթսայի մեջ, իտալական ոճով

Այսպես ստացվեց կայքը... իհարկե, դեռ անելիքներ կան դրա վրա... բացի այդ, իմ պատկերացմամբ մի փոքր այլ կառուցվածք կունենա կայքի շուրջ նավարկության առումով, կունենա. մի ամբողջ փունջ էջեր, գեղեցիկ մենյու, բայց ինչ վերաբերում է շրջանակի կառուցվածքին, կարծում եմ, որ նա կմնա նույնը..

լողացող շրջանակ

Երբեմն անհրաժեշտ է լինում մեկ այլ HTML փաստաթուղթ կամ նույնիսկ նման փաստաթղթերի շարք տեղադրել առանձին պատուհանում ոչ շրջանակային կառուցվածք պարունակող էջի մեջ։ Այս նպատակն իրականացնելու համար կա պիտակ՝ այսպես կոչված լողացող շրջանակ:

Այս թեգը ունի մի շարք հատկանիշներ.

src - պահանջվող հատկանիշ, որը ցույց է տալիս դեպի էջի բացման ճանապարհը
լայնությունը - լողացող շրջանակի լայնությունը պիքսելներով կամ տոկոսներով
բարձրություն - լողացող շրջանակի բարձրություն

ոլորում - ցույց տալ ոլորման տողը

• ոչ - երբեք ցույց չտալ ոլորման տողը,
• այո - միշտ ցույց տալ,
• auto - ցույց տալ, եթե դա անհրաժեշտ է:

align - լողացող շրջանակի հավասարեցում

• ձախ - ձախ
• աջ - աջ կողմում
• վերև - ավելի բարձր
• ներքևում - ներքևում

frameborder - շրջանակի առկայությունը լողացող շրջանակի շուրջ

• 1 - միացնել շրջանակը
• 0 - անջատեք շրջանակը

Բոլորը միասին գրված է այսպես.

Լողացող շրջանակով փաստաթղթի օրինակ.

լողացող շրջանակ


լողացող շրջանակ
Այս էջում ներդրվել է այսպես կոչված «լողացող շրջանակը»:
Առանձին պատուհանում այն ​​բացում է մեկ այլ html փաստաթուղթ ցուցադրման համար:



… … …

Noframes

Որոշ բրաուզերներ չեն աջակցում փաստաթղթի շրջանակի կառուցվածքին կամ սխալ են մեկնաբանում այն, բացի այդ, օգտվողները հաճախ դիտավորյալ անջատում են HTML փաստաթղթի շրջանակի կառուցվածքը իրենց բրաուզերի կարգավորումներում: Եվ չնայած նման բրաուզերների և օգտատերերի տոկոսը փոքր է, այնուամենայնիվ, դրանք կան։

Այժմ պատկերացրեք, որ դուք կառուցել եք ձեր կայքը՝ օգտագործելով շրջանակի կառուցվածքը, և որոշ այցելուներ, գուցե առանց իմանալու, թե որն է խնդիրը, փորձում են բացել ձեր կայքը, և նրանց զննարկիչը սխալ է ցուցադրում: Ի՞նչ կմտածեն նրանք ձեր կայքի մասին: Ես մտածում եմ նման բան. «Ուֆ.. ինչ-որ անհեթեթություն.. ես այլևս այստեղ չեմ գա»:

Որպեսզի օգտատիրոջը պարզ լինի, որ իր բրաուզերի/բրաուզերի կարգավորումները շրջանակներ չեն ապահովում, կա պիտակ։

Պիտակը ցուցադրում է իր մեջ կցված տեքստը, եթե օգտատիրոջ զննարկիչը չի ապահովում շրջանակներ կամ դրանք հարկադրաբար անջատված են իր կարգավորումներում: Եթե ​​շրջանակները աջակցվում են օգտատիրոջ բրաուզերի կողմից, ապա այս թեգը պարզապես անտեսվում է:

շրջանակներ


Ներեցեք, բայց ձեր զննարկիչը չի աջակցում շրջանակներ..

Օրինակի արդյունքը նկատելի կլինի, եթե ձեր զննարկիչը իսկապես չի աջակցում շրջանակներ (այստեղ ես երկար մտածում էի.. :) եթե այդպես է, ապա ինչու՞ ընդհանրապես կարդալ այս գլուխը:) կամ անջատել եք շրջանակի աջակցությունը ձեր համակարգում: զննարկիչը որպես փորձ:

Պիտակը պետք է տեղադրված լինի պիտակի ներսում

Լողացող շրջանակի դեպքում ամեն ինչ նույնիսկ ավելի պարզ է, պարզապես գրեք ցանկալի տեքստը, և այս տեքստը կցուցադրվի էկրանին, եթե զննարկիչը չի աջակցում շրջանակներին:

Ներեցեք, բայց ձեր զննարկիչը չի աջակցում շրջանակներ..

Նախքան կսկսեք էջ ստեղծել շրջանակի կառուցվածքի միջոցով, վերլուծեք դրա դասավորությունը, յուրաքանչյուր պատուհանի չափը, դրանցում ոլորման գծերի առկայությունը կամ բացակայությունը և այլն: Դրանից հետո դուք կարող եք ստեղծել plug-in HTML ֆայլեր՝ առանց առանձնապես անհանգստանալու դրանց հարաբերականի մասին: դիրքը միմյանց նկատմամբ:

Օգտագործեք պիտակը: Հիշեք, որ եթե ձեր բրաուզերում կայքը աշխատում է և ցուցադրվում է այնպես, ինչպես դուք եք նախատեսել, ապա այլ օգտվողների համար ամեն ինչ կարող է տարբեր լինել:

Շրջանակները էկրանի ուղղանկյուն հատվածներ են, որոնցից յուրաքանչյուրը պարունակում է իր HTML փաստաթուղթը: Շրջանակները հիանալի են հետևյալ փաստաթղթերը ձևավորելու համար.

Բովանդակություն. Եթե ​​բովանդակության աղյուսակը տեղադրում եք վեբ էջի ուղղահայաց սյունակում, օգտվողը կարող է ցանկացած պահի անդրադառնալ դրան՝ առանց անընդհատ սեղմելու «Վերադարձ դեպի նախորդ էջ» կոճակը: Քանի որ կադրում գտնվելու ժամանակ բովանդակության աղյուսակը միշտ ձեռքի տակ կլինի, օգտատերը պարզապես պետք է ընտրի մեկ այլ նյութ և անմիջապես ստանա իրեն անհրաժեշտ տեղեկատվությունը:

Ֆիքսված ինտերֆեյսի տարրեր. Դուք կարող եք սառեցնել գրաֆիկական պատկերը էկրանին, օրինակ՝ ընկերության պատկերանշանը, մինչդեռ էջի մնացած մասը պտտվում է մեկ այլ շրջանակում:

Ձևեր և արդյունքներ. Դուք կարող եք ձև ստեղծել մեկ շրջանակում և ցուցադրել հարցման արդյունքները մեկ այլ շրջանակում:

Սովորական շրջանակները ներկայումս համարվում են հնացած տեխնոլոգիա և չեն աջակցվում HTML5-ում: Մի օգտագործեք սովորական շրջանակներ ձեր նախագծերում: HTML5-ում շրջանակները, շրջանակների հավաքածուն և noframes պիտակները պարզապես այլևս գոյություն չունեն, տրամադրվում է մեկ iframe թեգ (ներկառուցված կամ լողացող շրջանակ):

Նշել

Tag - փոխարինում է պիտակը և օգտագործվում է էկրանը բաժանելու համար: Ունի փակման պիտակ:

Հատկանիշներ

COLS. Բաժանում է էկրանը ուղղահայաց: Ընդունում է արժեքներ պիքսելներով, տոկոսներով կամ պարզապես *: * արժեքը ցույց է տալիս, որ կոնկրետ սյունակը կզբաղեցնի էկրանի մնացած մասը

ՇԱՐՔԵՐ. Էկրանը հորիզոնական բաժանում է: Ընդունում է արժեքներ պիքսելներով, տոկոսներով կամ պարզապես *: * արժեքը ցույց է տալիս, որ որոշակի տող կզբաղեցնի էկրանի մնացած մասը

ՇՐՋԱՆԱԿ. Որոշում է շրջանակների առկայությունը, այսինքն. շրջանակի սահմանները. Ընդունում է «այո» կամ «ոչ» արժեքները:

ՍԱՀՄԱՆ. Նշում է շրջանակի լայնությունը պիքսելներով:

ՍԱՀՄԱՆԱԳՈՒՆ. Սահմանում է շրջանակների գույնը: Լռելյայն (եթե օգտագործվում է Windows-ի ստանդարտ գունային սխեման), շրջանակի եզրագծերը ձանձրալի, մոխրագույն երանգ են: Բայց ցանկության դեպքում կարող եք ընտրել ցանկացած այլ գույն։ Գույնը սահմանելիս կարող եք ընտրել և՛ նրա անունը, և՛ թվային համարժեքը RGB համակարգում: Օրինակ՝ BLUE կամ #0000FF:

Առանձին թեգում իմաստ ունի օգտագործել ատրիբուտներից միայն մեկը՝ COLS կամ ROWS: Սա նշանակում է, որ շրջանակի կառուցվածքը բաղկացած կլինի կամ միայն սյուներից կամ միայն տողերից: Սյունակներում տողեր կամ տողերում սյունակներ ստեղծելու համար ձեզ հարկավոր են ներդիր բեռնարկղեր...

Օրինակ

Արդյունք:

Նկատի ունեցեք նաև շրջանակների համարակալման կարգի տարբերությունը:

Նշել

... բեռնարկղում տեղադրված պիտակը որոշում է, թե կոնկրետ ինչ պետք է ցուցադրվի կոնկրետ շրջանակում: Փակման պիտակ չունի:

Հատկանիշներ

ՊԵԿ. Սահմանում է URL-ը, որը կապված է որոշակի շրջանակի հետ:

MARGINWIDTH. Նշում է շրջանակի բովանդակության և ձախ և աջ եզրագծերի միջև հեռավորությունը:

ՄԱՐԳԻՆԲԱՐՁ. Նշում է շրջանակի բովանդակության և դրա վերին և ստորին եզրագծերի միջև հեռավորությունը:

ՈԼՈՐՈՒՄ. Որոշում է, թե արդյոք ոլորման սանդղակը առկա է շրջանակի պատուհանում: Կարող է ընդունել «այո», «ոչ» և «ավտո» արժեքներ (կանխադրված):

NORESIZE. Սահմանում է շրջանակի սահմանները որպես «ֆիքսված» և թույլ չի տալիս օգտվողին փոխել շրջանակի պատուհանի չափը: Ընդ որում, գրանցվում են բոլոր կադրերի չափերը, որոնք ընդհանուր եզրագիծ ունեն ֆիքսվածի հետ։

FRAMEBORDER, BORDER, BORDERCOLOR. Այս հատկանիշները կապված են շրջանակների հետ և նման են .

ԱՆՈՒՆ. Նշում է շրջանակի պատուհանի անունը: Միակ հատկանիշը, որը չի ազդում շրջանակի տեսքի վրա: Թույլ է տալիս վերահսկել շրջանակի բեռնման գործընթացը: Եթե ​​շրջանակի պատուհանն ունի յուրահատուկ անուն, այն կարող է ուղղակիորեն մուտք գործել այլ շրջանակներից: Շրջանակային պատուհաններ անվանելիս պետք է հիշել մեկ սահմանափակում. անունը չպետք է սկսվի ընդգծված «_» նիշով, հակառակ դեպքում այն ​​անտեսվելու է: Քանի որ որոշ ծառայությունների անուններ սկսվում են այս նիշով: Օրինակ

Օգտագործելով A պիտակը Հատկանիշների շրջանակում բեռնելու համար

HREF. Նշում է նոր փաստաթղթի URL-ը կամ անունը, որը ցանկանում եք բեռնել որոշակի շրջանակի պատուհանում:

ՆՊԱՏԱԿ. Նշում է շրջանակի անվանումը, որում կներբեռնվի նոր փաստաթուղթը: Այս անունը պետք է վերագրվի շրջանակին NAME հատկանիշի միջոցով:

Հետևյալ օրինակը էկրանը բաժանում է երկու ուղղահայաց հատվածի: Փոքր ձախ կողմը պարունակում է բովանդակության աղյուսակ, իսկ աջ կողմը կբեռնի բոլոր մյուս HTML փաստաթղթերը: Բովանդակության ֆայլը պարունակում է պարզ տեքստային հիպերհղումներ համապատասխան բաժիններին: Որպեսզի ամեն ինչ աշխատի, դուք պետք է ստեղծեք HTML փաստաթղթեր cosm.htm, eat.htm, perf.htm, massage.htm և manic.htm ֆայլերում:

Օրինակ Բովանդակություն

• Ապրանք
  • Կոսմետիկա
  • Սննդային հավելումներ
  • Օծանելիք
• Ծառայություններ
  • Մերսում
  • Մատնահարդարում

Բարեւ Ձեզ! Նշել

Թեգը կփրկի ձեզ TARGET հատկանիշը յուրաքանչյուր առանձին հիպերհղման վրա կրկնելուց, եթե դրանք բոլորը մատնանշում են նույն շրջանակի պատուհանը: Դա անելու համար պետք է կոնտեյների մեջ տեղադրել TARGET հատկանիշով պիտակ....

Թեգի օգտագործումը հնարավորություն կտա նվազեցնել նախորդ օրինակի left.htm բովանդակության ֆայլի չափը:

Օրինակ Բովանդակություն

• Ապրանք
  • Կոսմետիկա
  • Սննդային հավելումներ
  • Օծանելիք
• Ծառայություններ
  • Մերսում
  • Մատնահարդարում

Յուրաքանչյուր կոնկրետ հղման TARGET հատկանիշը փոխարինում է նույնանուն պիտակի հատկանիշին:

Օրինակ Բովանդակություն

• Ապրանք
  • Կոսմետիկա
  • Սննդային հավելումներ
  • Օծանելիք
• Ծառայություններ
  • Մերսում
  • Մատնահարդարում

Ահա ապրանքները. Ահա ծառայությունները։ Հատուկ էֆեկտներ, որոնք ստացվել են TARGET հատկանիշի միջոցով

Ինչպես արդեն նշվեց, շրջանակների անունները չեն կարող սկսվել ընդգծված նշանով, քանի որ դրանք սկսում են ծառայությունների անունները, որոնք հատուկ տեղեկատվություն են հաղորդում դիտարկիչին: Ստորև բերված են հատուկ անուններ, որոնցից յուրաքանչյուրն օգտագործվում է որոշակի էֆեկտի հասնելու համար:

TARGET=”_blank” . Փաստաթուղթը բեռնված է դիտարկիչի նոր պատուհանում:

TARGET=”_self” . Փաստաթուղթը բեռնված է ընթացիկ պատուհանում:

TARGET=”_parent” . Փաստաթուղթը բեռնված է մայր շրջանակում: Սովորաբար սա շրջանակ է, որը կանգնած է կոնտեյներով ... ներկայիս մեկի դիմաց: Եթե ​​չկա մայր շրջանակ, ապա «_parent»-ի արժեքը դառնում է «_self»-ի նույնական:

TARGET=”_top” . Փաստաթուղթը բեռնված է ամենավերին շրջանակում:

Ըստ էության, այս ծառայությունների անվանումները նախատեսված են այս կամ այն ​​կերպ «բռնկել» ընթացիկ շրջանակի կառուցվածքը: Փորձեք նրանց հետ՝ տեսնելու, թե ինչպես կարող եք փաստաթղթերը բեռնել տարբեր պատուհաններում:

Նշել

HTML 4.0-ը ներկայացրեց լողացող (կամ ներդիր) շրջանակներ: Օգտագործելով պիտակը, դուք կարող եք տեղադրել մեկ շրջանակ սովորական HTML փաստաթղթում: Ընդ որում, այստեղ տարա... պետք չէ։

Փակման պիտակը պարտադիր է:

Հատկանիշներ

ԱԼԻՆԳ. Որոշում է հավասարեցման տեսակը. Ընդունում է «ձախ», «կենտրոն», «աջ» արժեքները:

ԲԱՐՁԱԿ. Նշում է շրջանակի բարձրությունը պիքսելներով

Լայնություն. Նշում է շրջանակի լայնությունը պիքսելներով:

SRC, MARGINWIDTH, MARGINHEIGHT, SROLLING, FRAMEBORDER, BORDER, BORDERCOLOR, NAME . Նախկինում քննարկվածների նման:

vsspace. Սահմանում է լուսանցքները iframe-ի վերևում և ներքևում

hspace. Սահմանում է լուսանցքները iframe-ից դուրս գտնվող կողմերի վրա

լուսանցքի լայնությունը. Որոշում է iframe-ի ներսում ձախ և աջ եզրերի երկայնքով լցոնման քանակը. պետք է լինի 1-ից մեծ կամ հավասար:

եզրային բարձրություն. Որոշում է iframe-ի ներսում վերին և ներքևի եզրերի երկայնքով ծածկույթի քանակը. պետք է լինի 1-ից մեծ կամ հավասար:

ոլորում. Նշում է, թե արդյոք ոլորման սանդղակը կցուցադրվի iframe-ում; արժեքը կարող է լինել «այո», «ոչ» կամ «ավտո»: Սովորական փաստաթղթերի լռելյայն արժեքը ավտոմատ է:

կոչում. Գործիքների հուշման տեքստ: Նշել

Որոշում է, թե ինչ կցուցադրվի զննարկչի պատուհանում, եթե այն չի ապահովում շրջանակներ:

Ձեր զննարկիչը չի աջակցում iframes-ին:

Ինչպե՞ս բեռնել շրջանակ առանց լրացուցիչ ֆայլերի:

Շրջանակ բեռնելու համար առանց արտաքին ֆայլեր օգտագործելու, դուք պետք է դրեք շրջանակի HTML կոդը փոփոխականի մեջ, այնուհետև որպես SRC թեգ նշեք «javascript:parent»: փոփոխական անուն".

var varFrame = "HTML կոդ"; ...

Հասցեների բարի խնդիր շրջանակի կայքի կառուցվածքի հետ

Շրջանակներ օգտագործելիս կայքը օգտագործում է մեկ էջ, որը ցույց է տալիս շրջանակների գտնվելու վայրը:

Ահա այսպիսի էջի օրինակ.

...

Այս էջը բեռնելուց հետո տեղեկատվությունը բեռնվում է շրջանակների մեջ: Բոլոր օգտատերերի անցումները կայքի էջերում տեղի են ունենում այս շրջանակներում: Հասցեների տողում միշտ ցուցադրվում է միայն մեկնարկային էջ տանող ուղին, որը չի փոխվում անցումների ժամանակ: Այցելուն այս պահին չգիտի, թե որտեղ է գտնվում։

Եթե ​​այցելուն անմիջապես վայրէջք չի կատարում կայքի գլխավոր էջում (օրինակ՝ որոնման համակարգից), դա չի հանգեցնում շրջանակների ընդհանուր կառուցվածքի վերակառուցմանը։ Սա է պատճառը, որ կայքի սեփականատերը չի կարող հասցե տրամադրել կայքի ներքին էջին։

Այս խնդրի մի քանի լուծումներ կան

Ավելի վաղ դիտարկվել էր շրջանակի կառուցվածքի օրինակ: Մենք կքննարկենք այս խնդիրը լուծելու տարբեր ուղիներ՝ օգտագործելով այն:

Գաղափարը հետևյալն է՝ տեղեկատվական մաս պարունակող էջը բեռնելիս մենք կստուգենք էջի միջավայրը և, եթե անհրաժեշտ շրջանակի կառուցվածքը բացակայում է, մենք այն կստեղծենք սկրիպտի միջոցով։

Հնարավոր է երեք դեպք.

այցելուն այցելել է շրջանակի կառուցվածք պարունակող էջ.

այցելուն այցելել է տեղեկատվական էջերից մեկը.

այցելուն հայտնվում է նավիգացիոն մենյու ունեցող էջի վրա:

Առաջին դեպքում ստուգման ավարտից հետո ոչ մի գործողություն չի պահանջվում: Երկրորդը և երրորդը գրեթե նույնական են, ուստի հետագայում մենք կքննարկենք միայն երկրորդ դեպքը:

Եվ այսպես, այցելուն հայտնվում է «այնտեղ, որտեղ չպետք է»: Էջի հենց սկզբում մենք տեղադրում ենք սցենար, որը կստեղծի շրջանակի կառուցվածք։

Լուծումը կարող է իրականացվել ինչպես հաճախորդի, այնպես էլ սերվերի կողմից: Հաճախորդի կողմից ներդրման հիմնական թերությունն ակնհայտ է՝ կախվածությունը հաճախորդի հնարավորություններից և կարգավորումներից: Օրինակ՝ օգտատիրոջ համակարգչում սկրիպտների գործարկումն արգելված է։ Երկրորդ տարբերակը չի աշխատի, եթե սերվերը չի աջակցում PHP-ին:

JavaScript լուծում.

Այս մոտեցման հետ կապված սահմանափակում կա. ոչ բոլոր բրաուզերներն են աջակցում JavaScript-ին, և որոշ դեպքերում օգտատերերն իրենք են անջատում սկրիպտները:

Նախ ստուգում ենք էջի միջավայրը, այնուհետև, եթե անհրաժեշտ շրջանակի կառուցվածքը գոյություն չունի, ստեղծում ենք այն։

Եկեք ստեղծենք ֆայլ շրջանակ.js :

Եթե ​​(window.name != «հիմնական») ( window.name = "արմատ"; document.write (""); document.write (""); document.write (""); document.write ("" ;)

Նախ ստուգում ենք այն պատուհանի անունը, որում բեռնված է էջը. if (window.name != «հիմնական»). Եթե ​​պատուհանի անունը և շրջանակի անվանումը չեն համընկնում, ապա դուք պետք է ստեղծեք շրջանակի կառուցվածք: Դա արվում է դինամիկ կերպով՝ օգտագործելով փաստաթղթի օբյեկտի գրելու մեթոդը:

Մենք ֆայլ ենք կապում կայքի յուրաքանչյուր էջին շրջանակ.js. Այժմ կայքի էջերը կունենան հետևյալ կառուցվածքը.

... ...

Այս խնդրի լուծման այս մոտեցմամբ անհետանում է շրջանակի կառուցվածքը պարունակող ֆայլի անհրաժեշտությունը:

PHP լուծում

Այս մոտեցմամբ կայքը հասանելի կդառնա ավելի մեծ թվով այցելուների համար:

Մենք կստուգենք էջի միջավայրը այլ կերպ (նույնը չէ, ինչ JavaScript-ն օգտագործելիս): Մենք փաստաթուղթը կբեռնենք շրջանակի մեջ՝ frames=yes պարամետրով: Էջը բացելիս մենք ստուգում ենք այս պարամետրը և անհրաժեշտության դեպքում դինամիկ կերպով ստեղծում շրջանակի կառուցվածք։ Ստորև ներկայացված է կոդը, որը պատասխանատու է դրա համար:

Կոդը ֆայլի մեջ դնելը frames.php. Այժմ դուք պետք է այն միացնեք կայքի յուրաքանչյուր էջին: Ստորև բերված է նման էջի օրինակ:

շրջանակներ...

Այս դեպքում, ինչպես հաճախորդի կողմից իրականացումը, կարիք չկա առանձին ստեղծել HTML փաստաթուղթ, որը նկարագրում է շրջանակի կառուցվածքը:

.

 

Կարող է օգտակար լինել կարդալ.

• Մաքրում է հավելվածի ֆայլերը;
• Լուսանկարների խորը ակնարկ Mac-ի համար. այն ամենը, ինչ դուք պետք է իմանաք iPhoto-ի և Aperture-ի փոխարինման մասին;
• CD չեյնջերի էմուլյատոր. կարո՞ղ եք դա ինքներդ պատրաստել:;
• Ինչպե՞ս կարող եմ փոխել իմ ազգանունը կոնտակտում:;
• ՄՏՍ-ից «Հեշտ վճարում» ծառայության անջատում;
• Հարցումների ստեղծում Telegram-ում Ինչպես հավանել Telegram-ում;
• Sony Xperia-ի տեսախցիկի առաջատար ինժեներ բջջային լուսանկարչության, Sony տեխնոլոգիաների և ապագայի զարգացման համար;
• Ինչպե՞ս տեղափոխել բջջային խաղերի պահումները այլ սարքի:;