Շրջանակ - ինչ է դա: Շրջանակի կառուցվածքը և ստեղծումը

Բովանդակություն:

Շրջանակ - ինչ է դա: Շրջանակի կառուցվածքը և ստեղծումը
Շրջանակ - ինչ է դա: Շրջանակի կառուցվածքը և ստեղծումը
Anonim

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

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

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

Որոշ վեբ ստեղծողներ ապահովում են նման կոդի ավտոմատ ստեղծում: Սովորաբար ավելացնել շրջանակ կոճակը գտնվում է ծրագրի հիմնական մենյուում: Նախ պետք է կուրսորը տեղադրել էջի ճիշտ տեղում, ապա սեղմել կոճակը, կբացվի պատուհան (ինչպես ցույց է տրված սքրինշոթում): Դրանում կարող եք սահմանել այն էջի հասցեն, որը կբացվի կադրում, և կարգավորեք չափերը՝ լայնությունը և բարձրությունը։

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

շրջանակների ստեղծում
շրջանակների ստեղծում

Այս «ծառայության» օգնությամբ կարելի է էջում ստեղծել մի քանի շրջանակ, սակայն այս կերպ փոխկապակցված տարրեր չեք ստանա։

Շրջանակներ CMS-ում

Կայքերի ստեղծման բազմաթիվ ծրագրերում հնարավոր է տեղադրել համապատասխան մոդուլը։ Օրինակ, Joomla-ի համար շրջանակը «Wrapper» մոդուլ է:

շրջանակել այն
շրջանակել այն

Այն կարելի է գտնել և ստեղծել Joomla CMS կառավարման վահանակում. «Extensions» - «Module Manager» - «Create» (կլոր նարնջագույն կոճակ, որի ներսում գումարած նշան է): Բացվող պատուհանում, ցուցակում, կտեսնեք «Wrapper» մոդուլը:

Եթե այն այստեղ չէ, այն ներառված չէ: Այն օգտագործելու համար նախ անհրաժեշտ է այն ակտիվացնել այստեղ՝ «Extensions» ներդիրը, ապա «Extension Manager», ապա «Management» ներդիրը։ Իսկ մենք փնտրում ենք բացվող ցանկում, «Ֆիլտր» դաշտում արագ որոնման համար մուտքագրեք՝ Wrapper բառը։ Այս մոդուլի դիմաց պետք է լինի կանաչ պատկերակ, որի ներսում նշման նշան է: Ներսում կետ ունեցող կարմիր շրջանակը կնշանակի, որ այս փլագինը անջատված է:

Այս ընթացակարգից հետո կարող եք վերադառնալ «Module Manager», ստեղծել շրջանակ և սահմանել դրա պարամետրերը:

ինչ է շրջանակը
ինչ է շրջանակը

Ինչպես տեսնում եք նկարում, մոդուլը թույլ է տալիս սահմանել՝ վերնագիրը կադրի վերեւում, մոդուլի դիրքը, ընտրել կայքի էջերը, որոնց վրա այն կցուցադրվի։ Եվ նաև կարգավորեք լայնությունը, բարձրությունը; ավելացնել շրջանակ և իրականումհղում դեպի վեբ էջի: Եթե շրջանակում ցանկանում եք ամբողջ լայնությամբ ցուցադրել կայքի գլխավոր էջը, ապա լռելյայն սահմանված 100%-ը բավարար չի լինի։ Դուք կարող եք անմիջապես ապահով կերպով դնել 400%: 200 բարձրությունը սովորաբար բավական է էջի վերին մենյուը ցուցադրելու համար: Մնացած բոլոր բովանդակությունը տեսանելի կլինի, եթե օգտատերը (կայքի այցելու) օգտագործի ոլորման տողը:

Ահա մի օրինակ, թե ինչ է շրջանակը Joomla-ում:

շրջանակների օրինակներ
շրջանակների օրինակներ

Շրջանակ ստեղծելու Ջումլա մոդուլը շատ հարմար է և հեշտ օգտագործման համար: Այնուամենայնիվ, նրա հնարավորությունները սահմանափակ են, ինչպես և կոնստրուկտորի հնարավորությունները:

Պատմություն և իրողություններ

Կայքեր շրջանակներից ստեղծելու պրակտիկայում այս պիտակը (դրա կիրառումը) վաղուց անցել է հետին պլան: Դրանք կարողացան փոխարինվել մոդուլներով, կոնստրուկտորային ծրագրերի կարգավորումներով, որոնք ստեղծում են վեբ էջի կոդ՝ առանց կայքի ստեղծողի մասնակցության։ Այնուամենայնիվ, որոշ դեպքերում դա բավարար չէ։ Օրինակ, երբ շրջանակը զննարկիչում ցուցադրվող տարածքների ամբողջական համալիր կառուցվածք է: Այսպես են տեսնում բարդ կառուցվածք ունեցող կայքերի սեփականատերերը։ Դրա ստեղծումն օգտագործվում է միայն ծայրահեղ դեպքերում, քանի որ շրջանակային կայքերը ստեղծվում են բացառապես մասնագիտացված պիտակների օգնությամբ։

Բարդ կառուցվածքային կայքեր

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

Ինչպե՞ս հասնել նույն արդյունքին: Ինչպե՞ս է ստեղծվում շրջանակի կառուցվածքը:

շրջանակի կառուցվածքը
շրջանակի կառուցվածքը

Ինչպեստեղադրեք շրջանակը էջի կոդի մեջ

HTML-ի շրջանակներն ավելացվում են պիտակների միջոցով՝

  • շրջանակ (առանձին պատուհանի համար);
  • շրջանակների հավաքածու (օգտագործելով այն ամբողջ կառուցվածք ստեղծելու համար);
  • iframe («լողացող» շրջանակ);
  • noframes (եթե շրջանակը չի ցուցադրվում օգտագործողի դիտարկիչում):

Առաջին նշված պիտակը միշտ տեղավորվում է զույգի և. Եվ այն փոխարինում է և. Եվ համապատասխան ատրիբուտների օգնությամբ դուք կարող եք հարմարեցնել յուրաքանչյուր տարրի բնութագրերը՝ անունը (անուն=), չափը (cols=և տող=), եզրագծի առկայությունը (սահման), ոլորման տողի տեսքը և. իհարկե, վեբ էջի հղումը ցուցադրելու համար:

Դիզայնի տատանումներ

Կայքի ամբողջ էջը կարելի է բաժանել տարածքների: Օրինակ, այսպես՝

Ձախ Վերին շրջանակ
Ճիշտ

Նման կառուցվածք (այն կոչվում է nested) կարելի է ստանալ՝ պիտակի ներսում գրելով cols հատկանիշը, որը նշանակում է շրջանակի գտնվելու վայրը հորիզոնական, իսկ տողերը՝ ուղղահայաց։ Հաջորդը դրվում է=նշանը և սահմանվում են չափերը: Օրինակ, 60%, 40% - տոկոս (մեկ պատուհանը կզբաղեցնի բրաուզերի տարածքի 60%, մյուսը, համապատասխանաբար, 40%): Կամ 100, 200 - կողմի հարաբերակցությունը պիքսելներով: Շրջանակներից մեկի չափն ընդհանրապես չի կարող սահմանվել (այն կսահմանվի լռելյայն): Դա անելու համար ստորակետից հետո կամ դրանից առաջ պետք է նշելնշանը:

Այս շրջանակների հավաքածուի զույգի ներսում յուրաքանչյուր շրջանակ գրված է պարամետրերով.

Բնադրումյուրաքանչյուր նոր տարածք նշվում է նոր շրջանակներով:

Կոդի օրինակ՝

Նշեք, որ մեր օրինակում, երկրորդ և երրորդ կադրերի համար, չափերը նշված են միայն մեկ անգամ:

Շատ գաղափարներ թույլ են տալիս լրացնել շրջանակները: Բրաուզերի պատուհանում դրանց գտնվելու վայրի օրինակները կարող են անվերջ տրվել (համապատասխանաբար փոխելով կոդը): Սակայն այս տեղեկությունը վաղուց գործնական կիրառություն չի գտել։ Շրջանակները, եթե այսօր օգտագործվում են կայքեր ստեղծելու ժամանակ, դրանք միայն մոդուլների տեսքով են անվճար CMS-ում կամ iframe-ի տեսքով:

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

կայք շրջանակների վրա
կայք շրջանակների վրա

Տարօրինակ է, թե ինչու է այն ստացել նման անվանում, այստեղ ավելի հարմար է «ներկառուցված» բառը։ Այս շրջանակը ստեղծված է ֆայլի բովանդակությունը ցուցադրելու համար: Դուք վերբեռնում եք ցանկացած փաստաթուղթ կամ ֆայլ տվյալների բազա, գրում եք դեպի դրա ուղին՝ օգտագործելով iframe թեգերը, և այցելուները կտեսնեն ֆայլի տեքստը (տեսանյութ կամ պատկեր): Ցավոք, բրաուզերները միշտ չէ, որ բովանդակություն են հաղորդում: Դա անելու համար վեբ ստեղծողները բացման և փակման պիտակների միջև մուտքագրում են «Ձեր դիտարկիչը չի ցուցադրում բովանդակություն» արտահայտությունը:

Օրինակ, Seopult.ru-ն առաջխաղացման վարպետների հայտնի ծառայություն է: Միայն ոչ նրա հիմնական կայքը, այլ հայելային I.seopult.pro, որը ստեղծվել է պորտալի հաճախորդների համար: iframe կոդը այստեղ գրված է հետևյալ կերպ՝

հրահանգներ

. Որտեղ էպիտակը

  • ստեղծվել է ցանկի տարր սահմանելու համար: Աջակցվում է բոլոր բրաուզերների կողմից:

    Բուն հայելային էջում կարող եք տեսնել «Հրահանգ» բառը կոճակի տեսքով։ Սեղմելով դրա վրա բրաուզերի պատուհանի կենտրոնում բացվում է ներկայացումը:

    Բոլորը մեծ ենՖիլմերի և սերիալների դիտման կայքերը ստեղծվում են iframes-ի (օրինակ՝ «Imhonet»), ինչպես նաև սոցիալական ցանցերի միջոցով։ Նույնիսկ «Yandex»-ի գլխավոր էջը պարունակում է այս պիտակը և մեկից ավելի զույգ։

    Ինչպես գրել iframe

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

    և, ինչպես ցույց է տրված վերևի օրինակում, ցանկի պիտակը կարող է օգտագործվել նաև -

    • Հատկանիշներն ավելացվել են iframe-ին.

      • լայնություն (լայնություն) և բարձրություն (բարձրություն=);
      • եզրերի հավասարեցում;
      • նեղումներ, որոնք կարող են նշված լինել կամ չնշված լինել. լռելյայն արժեքը 6-ն է, սա բավական է;
      • օգտագործելով թույլտվության թափանցիկությունը՝ կարող եք սահմանել շրջանակի տարածքի թափանցիկությունը, որպեսզի տեսանելի լինի էջի ֆոնը;
      • գումարած ծանոթ scr, անունը, ոլորումը, եզրագիծը:

      Նավարկում iframe-ով

      Ամենահետաքրքիր շրջանակի հմտությունը կոդ գրելն է, որը թույլ է տալիս պատուհանում բացել բովանդակությունը հղման միջոցով, ինչն արել են Seopult հայելու ստեղծողները՝ միաժամանակ մի քանի հղումներով (միաժամանակ հասանելի են օգտատերերին: նույն էջը).

      Սրա համար վերցվում է iframe, որի անունը լրացուցիչ գրվում է name=-ի միջոցով: Օրինակ՝ վերնագիր։ Այնուհետև, դրանից առաջ պիտակներում և հղումները գրվում են HREF=-ի միջոցով՝ դրանցից հետո հատկանիշի պարտադիր նշումով:Ա փակող թեգը օգտագործելուց առաջ նշվում է մակագրություն, որը կծառայի որպես հղում-կոճակ: Պիտակներ «ա» բացում և փակումկցվում են էջանիշի մեջ։

      Դուք կարող եք գրել մի քանի տող կոդում, որպեսզի ի վերջո ստանաք մի քանի հղման կոճակներ մեկ տողում կայքում, որոնց վրա սեղմելով ներքևի պատուհանում կցուցադրվի տարբեր բովանդակություն:

      Կոդը կունենա հետևյալ տեսքը՝

      Տեղադրել գովազդ

      Դիտել գովազդ

      Image
      Image

      Ինչպես այն կանդրադառնա կայքում:

      Ինչպես տեղադրել iframe Joomla կայքում

      Որպես ստանդարտ, Joomla-ի կառավարման վահանակն ունի միացված (օգտագործման համար պատրաստ) «HTML-code» մոդուլ: Դրանով դուք կարող եք տեղադրել ցանկացած կոդ կայքի ցանկացած կետում: Այնուամենայնիվ, նա համառորեն անտեսում է iFrem թեգով ծածկագիրը: Հետևաբար, մենք կօգտագործենք հատուկ Jumi մոդուլ:

      Առաջին հերթին անհրաժեշտ է այն ներբեռնել ինտերնետից և տեղադրել Joomla-ի ադմինիստրատիվ վահանակի միջոցով՝ «Extensions» - «Extension Manager» - «Select File»: Նշեք ներբեռնված արխիվի ուղին և սեղմեք «Ներբեռնում»:

      Հաջող տեղադրումից հետո անցեք «Մոդուլի կառավարիչ» և ստեղծեք նորը: Ընտրեք Jumi-ի տեսակը: Բացվող պատուհանում «Custom Code» դաշտում մուտքագրեք պատրաստված iFrem-ը, ինչպես ցույց է տրված հոդվածի նախորդ պարբերությունում։ Մոդուլին վերնագիր տվեք, նշեք տեղաբաշխման դիրքը և կայքի էջերը: Սեղմեք պահպանել և ստուգել այն:

      Բրաուզերներ և շրջանակներ

      Բոլոր հայտնի բրաուզերները լավ ցուցադրում են շրջանակային պատուհանների պարունակությունը՝ Chrome, Safari, Firefox, Android, iOS: Այս առումով հատկապես բարձր ցուցանիշ ունեն Internet Explorer-ը և Opera-ն։ Եվ դեռ երաշխիք չկաոր ձեր կայքի այցելուն կտեսնի բոլոր պատուհանների բովանդակությունը: Այս դեպքում դուք պետք է թողնեք հաղորդագրություն՝ օգտագործելով noframe թեգը (բացում և փակում): Դրա մեջ կարող եք մուտքագրել հետևյալը. «Ձեր զննարկիչը հնացել է: Թարմացրեք տարբերակը՝ կայքի բովանդակությունը ցուցադրելու համար»: Եթե օգտատիրոջ զննարկիչը ճիշտ ձևակերպի շրջանակները, նա չի տեսնի այս հաղորդագրությունը:

      Այսպիսով, շրջանակը կայքի տարածք կամ պատուհան է, որն ունի իր URL-ը: Օգտագործվում է դիտարկիչի մեկ դաշտում միանգամից մի քանի վեբ էջեր կամ անկախ փաստաթղթեր ցուցադրելու համար՝ ունենալով նաև իրենց URL-ը: Չնայած այն հանգամանքին, որ շրջանակները թույլ են տալիս լավ կազմակերպել բարդ կայք, դրանք երկար ժամանակ չեն օգտագործվում, բացառությամբ iframe-ի։ Այս պիտակի օգտագործումը դեռևս արդիական է ներկայացումներ, վիդեո նվագարկիչ, տեքստային փաստաթղթեր որոշակի պատուհանում բեռնելու համար: Այն ակտիվորեն օգտագործվում է մեծ և հայտնի վեբ ռեսուրսների կողմից:

Խորհուրդ ենք տալիս: