Përshëndetje, të dashur lexues të faqes së blogut. Sot do të flasim për kornizat në gjuhën Html. Është e qartë se do të fillojmë që në fillim, përkatësisht se për çfarë lloj kafshe bëhet fjalë. Ne do të flasim gjithashtu për të tashmen (Frame) dhe të ardhmen (Iframe) të këtyre elementeve në versionin aktual të gjuhës së shënjimit të hipertekstit dhe në standardin e ri Html 5 me .

Në fund të artikullit, pas një përshkrimi të hollësishëm të procesit të krijimit të kornizave inline dhe strukturës së tyre klasike në kodin Html (tashmë e përdorur rrallë), ne do të prekim rëndësinë e ndërtimit të një siti mbi to, dhe gjithashtu do të diskutojmë mënyrat e mundshme për të përdorni ato në periudhën aktuale kohore duke përdorur shembullin e blogut tim.

Çfarë është dhe si ndryshon Iframe nga Frame

Çfarë është ajo? Rezulton se ato mund të përdoren jo vetëm në faqet e internetit, por edhe në çdo aplikacion për programe, por ndryshojnë në atë që dritarja e një faqe në internet ose aplikacioni do të ndahet në disa zona, secila prej të cilave ngarkohet me një dokument të veçantë. Për më tepër, këto zona të kornizës sillen në mënyrë të pavarur nga njëra-tjetra.

Ndoshta shembulli më i dukshëm i përdorimit të tyre, që pothuajse të gjithë e keni hasur, janë të ashtuquajturat skedarë ndihmës (ndihma) që kanë shumë programe të instaluara në kompjuterin tuaj.

Skedari me menunë e ndihmës ngarkohet në dritaren e majtë dhe dokumenti që korrespondon me artikullin e zgjedhur të menusë shfaqet në dritaren e djathtë. Vlen të përmendet se një strukturë e tillë ju lejon të mos ringarkoni skedarin me menunë në dritaren e majtë kur hapni një dokument të ri në atë të djathtë. Kjo është pikërisht ajo që Avantazhi kryesor i përdorimit të kornizave në html.

Në fakt, vetë emri i këtyre elementeve duhet të interpretohet pikërisht si një dritare e pavarur. Me ndihmën e kornizave, ne kemi mundësinë të ndajmë një dritare të madhe në disa fragmente, të cilat, nga ana tjetër, mund të shërbejnë si marrës për dokumente të veçanta të pavarura (faqe, tekste, imazhe, video, etj.).

Si krijohet një strukturë kornizë në gjuhën e shënjimit të hipertekstit? Nëse flasim për standardin Html 4.01 (sipas klasifikimit), i cili është kryesori në kohën e tanishme, atëherë për këtë përdoren tre elementë - Frame, Frameset dhe Noframes.

Iframe - një kornizë e integruar në standardin Html 5

Nëse flasim për standardin Html 5 (e ardhmja jonë, disa elementë të së cilës tashmë mbështeten nga shumë shfletues), atëherë nuk do të ketë etiketa Frame, Frameset dhe Noframes, si dhe strukturën klasike të kornizës, në vend të tyre do të ketë një etiketë e vetme Iframe (kornizë e integruar), për të cilën do të flasim në fillim dhe më pas do ta kthejmë të gjithë vëmendjen te skema klasike nga versioni 4.01, i cili aktualisht përdoret tani.

Iframe, ndryshe nga klasikja, e cila diskutohet më poshtë, nuk kërkon zëvendësimin e etiketës Body me etiketat Frameset. ato. kjo etiketë mund të futet në faqe të rregullta, për shembull, brenda një paragrafi ose kudo tjetër. Në thelbin e tij, ky element është shumë i ngjashëm me etiketën Img që kemi shqyrtuar tashmë.

Është në linjë me përmbajtje të zëvendësueshme sepse sillet saktësisht si një element inline, por brenda tij shfaqet përmbajtje të jashtme të jashtme. Ekzistojnë vetëm katër elementë të tillë në gjuhën Html - Img, Iframe, Object dhe Embed. Prandaj, heroi ynë nënkupton praninë e një skedari të jashtëm që do të ngarkohet në zonë, madhësia e të cilit vendoset duke përdorur atributet e kësaj etikete.

Se. Një iframe është një element vargu në të cilin ngarkohet një objekt i jashtëm (siç është një video). Dhe për të specifikuar rrugën drejt këtij skedari, i cili duhet të ngarkohet në faqe, përdoret atributi special Src. Por ndryshe nga Img, elementi Iframe është i çiftuar, d.m.th. ka edhe një etiketë mbyllëse:

Ky shembull tregon shfaqjen e një videoje në Youtube në një faqe duke përdorur një Iframe. Për të kufizuar zonën e kornizës (dritares) ku do të ngarkohet skedari i jashtëm, jepen atributet Gjerësia dhe lartësia, vlerat e të cilit janë të specifikuara në piksele:

ato. kjo etiketë krijon një zonë në të cilën ngarkohet një objekt i jashtëm (nuk ka rëndësi nëse është nga faqja juaj apo nga një burim tjetër). Gjerësia dhe lartësia e zonës vendosen duke përdorur Width dhe Height, dhe shtegu drejt këtij objekti specifikohet në atributin Src.

Elementi Iframe trashëgoi të gjitha këto atribute nga etiketa të ngjashme inline me përmbajtje të zëvendësuar (siç është Img i përmendur tashmë më lart). Epo, ai mori edhe atribute nga fotot hspace dhe vspace, të cilat ju lejojnë të vendosni hyrjet nga kufijtë e kornizës në tekstin që mbështillet rreth tij.

Është gjithashtu domethënëse që shtrirja e kornizës së integruar kryhet në të njëjtën mënyrë siç mund të shihnim kur studionim fotografitë në Html - . Te gjitha njesoj Rreshtoni, por për etiketën Iframe me vlerat e mundshme Bottom, Top, Middle, Left dhe Right.

Por ky element mori gjithashtu disa atribute nga etiketa Frame nga struktura klasike e kornizës, për të cilat do të flasim me shumë detaje më poshtë. Këto atribute përfshijnë Emrin, vlera e të cilit mund të përdoret si vlerë në mënyrë që dokumenti që ju nevojitet të hapet në dritaren e kësaj kornize kur klikoni në lidhjen (lexoni më shumë më poshtë).

Gjithashtu në Iframe, atributi Frameborder ka migruar nga etiketa Frame, e cila ka vetëm dy vlera - ose 0 (korniza rreth kornizës nuk shfaqet) ose 1 (korniza është e dukshme). Vlera e paracaktuar është Frameborder=1, kështu që për ta hequr atë duhet të shkruani Frameborder="0":

Atributi Scrolling është zhvendosur gjithashtu nga Frame në këtë element, i cili ka një vlerë të paracaktuar të Auto - shiritat e lëvizjes në kornizë do të shfaqen sipas nevojës kur përmbajtja është më e madhe se dritarja e synuar për ta shfaqur atë.

Epo, atributet Marginwidth dhe Marginheight erdhën gjithashtu nga elementi Frame. Ato do të diskutohen në detaje më poshtë në tekst, por me pak fjalë - ato ju lejojnë të vendosni dhëmbëzimin në gjerësi dhe lartësi nga skajet e kornizës në përmbajtjen që vendoset në të.

Siç e përmenda tashmë, një shembull i qartë i përdorimit të Iframe është:

Duke futur Iframe direkt në faqen e internetit, ju do të merrni daljen e videos nga YouTube. Ne konkludojmë se ky element është një përzierje e elementeve inline me përmbajtje të zëvendësueshme dhe, në fakt, korniza klasike, të cilat do të diskutohen tani.

Kornizat e bazuara në etiketat Frame dhe Frameset - struktura e tyre

Pra, krijimi i një strukture klasike kornizë fillon me atë që shkruani në kodin Html në vend të etiketës Body hapëse dhe mbyllëse, e cila normalisht duhet të jetë e pranishme në çdo dokument që zëvendëson kontejnerin e tij të bazuar në elemente. grup kornizash.

Pika themelore është se elementi Body nuk mund të përdoret në këtë rast - as Body (për një dokument të rregullt) ose Frameset (kur krijoni një strukturë të kornizës së dokumentit):

Çdo kornizë që ne formojmë brenda kornizës kryesore krijohet duke përdorur një element të veçantë kornizë. Ky etiketë është i vetëm dhe në të vendosim shtegun drejt dokumentit që do të duhet të ngarkohet në këtë dritare.

Elementi i tretë që nuk e kemi prekur ende është Noframes. Është çiftuar dhe ju lejon të shkruani një tekst brenda vetes, i cili do të përpunohet nga shfletuesi dhe do të shfaqet në faqen e internetit vetëm nëse i njëjti shfletues (ose pajisje tjetër ekrani) nuk mbështet korniza. Kjo mund të ndodhë, për shembull, kur përdorni një shfletues për pajisjet celulare.

Zakonisht, Noframes shton jo vetëm informacione për situatën aktuale me pamundësinë e përpunimit të strukturës së kornizës, por gjithashtu shton mundësinë për të shkuar në faqe të tjera ku mund të vazhdoni të punoni pa i përdorur ato. Është e vështirë të thuash diçka tjetër për të, ndaj le të vazhdojmë.

Rezulton se elementi Frameset i përdorur në vend të etiketës Body zë të gjithë hapësirën e caktuar për portin e shikimit dhe brenda këtij rajoni kornizat do të krijohen duke përdorur elementë të veçantë Frame. Në këtë drejtim, lind pyetja - si të ndani zonën e shikimit midis dritareve të veçanta ose, me fjalë të tjera, si të vendosni madhësinë e secilës prej tyre.

Kjo bëhet duke shtuar atributet e duhura në elementin Frameset. Ka dy prej tyre - Kolonat dhe Rreshtat. Cols vendos ndarjen e një dritareje të madhe në korniza ose kolona vertikale, dhe Rreshtat ju lejon ta ndani atë në dritare ose rreshta horizontale.

Krijimi i një strukture të bazuar në Frameset dhe atributet e tij Cols dhe Rows

Vlerat për Cols dhe Rrows të etiketës Html Frameset janë numra të ndarë me presje (pa hapësira). Këta numra përcaktojnë përmasat e dritareve që duam të marrim si rezultat. Prandaj, sa numra do të shkruhen të ndarë me presje në kolona ose në rreshta, kaq shumë korniza kemi dhe duhet të jenë rezultati.

Për shembull, duke përdorur një shënim të tillë, do të marrim tre kolona vertikale që do të korrespondojnë në gjerësi me përmasat 2:5:3.

Meqenëse kemi vendosur proporcione për tre korniza, do të na duhet të shkruajmë tre elementë Frame midis etiketës së hapjes dhe mbylljes së Frameset, edhe nëse pa specifikuar atribute shtesë:

Si rezultat, struktura jonë e kornizës, e përbërë nga tre dritare boshe, do të duket kështu:

Në këtë shembull, ne vendosëm madhësitë e dritareve (Korniza) duke përdorur përqindjet që merren nga gjerësia e portit të shikimit (ky është rasti kur përdorni Cols) ose nga lartësia e tij (Rreshtat). Kur ndryshoni portin e pamjes, raporti i përqindjes midis madhësive të kornizës do të ruhet. Por në vend të përqindjeve, mund të përdorni edhe vetëm numra që do të thonë. Këtu, gjithashtu, mendoj se nuk duhet të lindin vështirësi në të kuptuarit.

Por ekziston gjithashtu një opsion mjaft i pazakontë në përcaktimet e madhësisë, i cili duket si ylli "*". Për më tepër, mund të jetë ose thjesht "*", ose një yll me një numër përpara, për shembull, "3*". Një gjë e ndërlikuar që është shumë e ngjashme me përqindjet dhe do të thotë që ne e ndajmë hapësirën për Kornizën në mënyrë proporcionale.

Le të shohim një shembull. Tani le të zgjedhim të ndajmë portin e shikimit në rreshta horizontale duke përdorur Rreshtat:

Çfarë do të thotë kjo hyrje? E gjithë pamja e disponueshme vertikalisht do të ndahet në tre rreshta. Lartësia e rreshtit të parë do të merret në 200 piksel, e dyta - në 500, por rreshti i tretë do të zërë të gjithë hapësirën e mbetur në lartësi, sepse "*" u përdor si madhësia e tij.

Çuditërisht, vlerat "*" dhe "1*" nënkuptojnë të njëjtën gjë - ne ndajmë të gjithë hapësirën e mbetur me një dhe ia japim këtë një pjesë kësaj kornize (epo, domethënë të gjithë hapësirën e mbetur).

Por shikoni se çfarë ndodh nëse përdorni vlerën "*" me një numër për të ndarë në proporcion:

Cilat mendoni se duhet të jenë dimensionet e Kornizës në këtë rast? Është e qartë se linja e dytë do të ketë patjetër një lartësi prej 100 pikselësh. Por si do të ndahet hapësira e mbetur e lartësisë midis rreshtit të tretë dhe të parë?

Është shumë e thjeshtë të numërosh - mjafton të shtosh katër (4*) me dy (2 *) dhe pjesëtoje me këtë emërues (kujtoni thyesat nga programi shkollor) dy dhe katër. ato. marrim se kolona e parë me kornizë do të zërë një të tretën e hapësirës së mbetur në lartësi, dhe kolona e tretë do të zërë dy të tretat. Ose, me fjalë të tjera, i treti do të jetë dy herë më i lartë se i pari:

Ju mund të përdorni të tre mënyrat për të madhësisë së dritareve të kornizës në një atribut të vetëm, për shembull:

Si rezultat, ne do të marrim kolonën e parë të Kornizës në dhjetë për qind të të gjithë sipërfaqes së disponueshme, e dyta në 100 piksel, dhe tre të tjerat do të kenë një gjerësi në përmasa prej katër, tre dhe dy të nëntat e hapësirës së mbetur në gjerësia. Kjo është ajo, gjithçka është e thjeshtë dhe e qartë.

Nëse dëshironi të ndani dritaren kryesore jo vetëm në korniza horizontale dhe vertikale, por, për shembull, në kombinime të tyre, atëherë mund të përdorni strukturën e mbivendosur të elementeve Frameset veçmas për kolonat dhe veçmas për rreshtat. Për shembull, për të marrë strukturën e treguar në pamjen e mëposhtme të ekranit, mjafton të përdorni këtë ndërtim:

ato. fillimisht ne ndajmë të gjithë hapësirën e disponueshme në dy kolona vertikalisht duke përdorur "frameset cols="20%,80%"" dhe vendosim përmbajtjen e kolonës së djathtë me etiketën "frame", por në vend që të shtojmë një element "frame" për të majtën. kolonë, ne hapim një "rreshta të grupeve të kornizave = "10%,*"".

Dhe me ndihmën e tij, ne ndajmë kolonën e djathtë në dy rreshta me korniza, përmbajtja e të cilave vendoset duke përdorur dy etiketa "kornizë", pas së cilës mbyllim të dy kontejnerët "kornizë". Gjithçka është e thjeshtë dhe logjike.

Specifikoni shtegun në atributin Src të elementit Frame

Por të gjithë folëm për elementin Frameset dhe atributet e tij Cols dhe Rows, me ndihmën e të cilave formojmë strukturën dhe vendosim madhësitë e tyre. Tani le të kuptojmë se si të shfaqim dokumentet e duhura në kornizat e duhura dhe si të konfigurojmë ndërveprimin midis dritareve të tyre.

Pra, si ta kontrollojmë pamjen e dritareve që krijojmë? E gjithë kjo është e ngulitur në atributet e etiketës Frame. E para që vlen të përmendet është src. Tashmë e takuam atë në etiketën Img kur menduam të futnim imazhe në kodin Html. Thelbi i tij nuk ka ndryshuar dhe ende ju lejon të specifikoni rrugën drejt dokumentit që duhet të ngarkohet në kornizë.

Rruga drejt dokumentit në Src mund të specifikohet si . Shtigjet relative zakonisht përdoren për një dokument që ndodhet në burimin tuaj, por do t'ju nevojiten shtigje absolute kur dëshironi të ngarkoni një dokument nga një faqe tjetër në një dritare kornizë.

Nëse atributi Src nuk është specifikuar me shtegun për në dokumentin e dëshiruar, atëherë një dokument bosh do të ngarkohet në dritare. Personalisht, një herë bëra një gjë të ngjashme për blogun tim (si një element shtesë navigimi) dhe në të njëjtën kohë krijova një dosje të veçantë për të në serverin pritës dhe vendosa atje jo vetëm një skedar Html me një strukturë kornizë (të cilën e quajta indeks .html), por gjithashtu të gjitha të ngarkueshme në dritare të ndryshme dokumentesh, si dhe skedarë imazhesh që u përdorën si sfond.

Prandaj, ishte më e lehtë për mua të përdor lidhje relative në atributin Src të etiketës Frame:

Çuditërisht, nëse zëvendësoni të gjitha lidhjet në këtë kod nga relative në absolute (siç është https://site/navigator/joomla.html) dhe hapni këtë skedar në një shfletues, atëherë dokumentet e specifikuara në Frame do të ngarkohen nga serveri im dhe ju do të shihni foto të ngjashme në shfletuesin tuaj. Dhe nuk ka rëndësi se ku do të vendoset skedari juaj me një strukturë kornizë (index.html) - në kompjuterin tuaj ose në host.

Në shembullin e paraqitur në figurë, një faqe me një menu të caktuar ngarkohet në dritaren e kornizës së majtë, e cila është e rregullt. Por nuk është e rëndësishme se si është formuar menyja, por ajo që ndodh pasi klikoni në ndonjë nga lidhjet e saj është e rëndësishme.

Nëse e bëni këtë, atëherë gjithçka do të ndodhë saktësisht siç duhet - dokumenti do të hapet në dritaren e poshtme djathtas. Por për këtë më duhej të aplikoja një truk të vogël, sepse në versionin e paracaktuar dokumenti hapej në të gjithë madhësinë e dritares, duke zëvendësuar strukturën e kornizës, e cila nuk më duhej fare, sepse menyja e navigimit majtas dhe sipër kornizat u zhdukën.

Si të hapni dokumente nga një lidhje në një kornizë

Pra, kur folëm për hiperlidhjet, përmendëm një atribut të tillë të etiketës "A" si Target=_blank. A ju kujtohet për çfarë është? Korrigjoni për të hapur dokumentin e lidhur në një dritare të re. Si parazgjedhje, duhet të hapet në të njëjtën dritare, e cila është e barabartë me target="_self".

Por këto mundësi objektiv nuk janë të kufizuara. Rezulton se mund t'i shtoni vlerë si emër korniza, e cila është specifikuar më parë në atributin e veçantë Name të etiketës Frame. Pastaj dokumenti nga kjo lidhje nuk do të hapet në të njëjtën dritare, duke zënë të gjithë hapësirën e tij, por në Kornizën që keni specifikuar. Kuptohet? Nëse jo plotësisht, atëherë tani do të jetë e qartë kur analizoni shembullin.

Pra, kthehemi te shembulli ynë i paraqitur në figurën e mësipërme. Ne duhet të hapim faqe duke përdorur lidhje nga dritarja e majtë në kornizën e poshtme djathtas (të madhe). Prandaj, gjëja e parë që duhet të bëni është t'i jepni kësaj dritareje të madhe një emër duke përdorur atributin Emri në etiketën Frame.

E bëri dhe e quajti "ktona". Tani mund të hapni me siguri skedarin që është ngarkuar si menu në dritaren e majtë dhe të shtoni atributin Target="ktona" në të gjitha etiketat A në të:

Historia e shfaqjes së Joomla dhe komponentit VirtueMart

Sigurisht, përdorimi i mjetit të gjetjes dhe zëvendësimit për vendosjen e tij në të gjitha lidhjet nuk do të jetë i vështirë, por pse të shkarkojmë kodin në mënyrë të panevojshme kur kemi një mundësi të shkëlqyer për ta përdorur Baza e etiketës speciale, të cilën e kemi përmendur tashmë në të njëjtin artikull për hiperlidhjet, kur folëm për përdorimin e Target bosh.

Mjafton të vendosni target="ktona" bazë midis etiketave Head hapëse dhe mbyllëse dhe të gjitha lidhjet në kodin Html të këtij dokumenti do të hapin faqe të reja në kornizën e specifikuar të quajtur "ktona":

Nga rruga, nëse marrim si shembull mjetin tim që dikur ekzistonte, atëherë duhet të sigurohemi që të gjitha lidhjet nga dritarja e sipërme horizontale të hapin faqet e tyre në kornizën vertikale të majtë, e cila shërben si menyja ime e majtë. Çfarë duhet bërë për këtë?

Epo, së pari, duhet t'i japim një emër kornizës vertikale të majtë:

Dhe në skedarin që është ngarkuar në dritaren e sipërme (gor.html), duhet të shtoni elementin bazë target="gor":

Gjithçka, tani kemi bërë gjithçka siç duhet. Të gjitha dokumentet e lidhura nga korniza e sipërme hapen në dritaren e majtë dhe të gjitha lidhjet prej saj do të hapin dokumentet në kornizën qendrore dhe më të madhe. Sipas mendimit tim, gjithçka është e thjeshtë dhe logjike.

Atributet e etiketës së kornizës për të personalizuar pamjen e dritareve

Le të shohim tani se cilat atribute përveç Src dhe Name mund të përdoren në etiketën Frame për të personalizuar pamjen e kornizave. Le të fillojmë me rrotullimi. Me të, ne mund të personalizojmë shfaqjen e shiritave lëvizës për secilën dritare të strukturës suaj të kornizës individualisht.

Lëvizja është vendosur në Auto si parazgjedhje - shfletuesi do të vendosë automatikisht, bazuar në madhësinë e dokumentit të ngarkuar në kornizë, nëse do të shfaqë një shirit lëvizës apo jo. Nëse dokumenti nuk përshtatet plotësisht në dritare, do të shfaqet një shirit lëvizës, duke ju lejuar ta shikoni atë deri në fund.

Gjithashtu, si vlera për Lëvizjen, mund të përdorni Po (shiritat e lëvizjes në dritare do të shfaqen gjithmonë, edhe nëse dokumenti përshtatet plotësisht në të) dhe Jo (shiritat e lëvizjes nuk do të shfaqen kurrë fare, edhe nëse janë pjesë e dokumentit nuk përshtatet).

Në mjetin tim dikur ekzistues, përdora automatikun e paracaktuar dhe shiritat e lëvizjes në korniza u shfaqën sipas nevojës:

Atributi i mëposhtëm i etiketës Frame është − noresize- është beqar (nuk ka vlera). Pasi ta keni regjistruar atë, në këtë mënyrë do të ndaloni ndryshimin e madhësisë së tij, e cila si parazgjedhje kryhet thjesht duke zvarritur kufirin e kornizave me miun.

Kur të afroni kursorin e miut në kufi, do të shihni se kursori do të kthehet në një shigjetë me dy koka dhe tani, duke shtypur butonin e majtë të miut, mund ta lëvizni kufirin sipas dëshirës. Noresize vendos një ndalim për këtë vetë-vullnet (kur lëvizni kursorin e miut në kufirin e dritareve, nuk do të shihni më një shigjetë me dy koka).

Një tjetër atribut vizual është Kufiri i kornizës. Me të, mund të specifikoni nëse do të vizatoni një kornizë (kufi) midis kornizave ose jo. Kufiri i kornizës mund të ketë vetëm dy vlera të mundshme - ose 0 (mos vizatoni një kornizë) ose 1 (shfaqni një kufi). Parazgjedhja, natyrisht, është 1.

Ka një hollësi. Nëse dëshironi të hiqni kufirin e dukshëm, atëherë do t'ju duhet të shtoni Frameborder=0 në të gjitha etiketat Frame të atyre kornizave që dëshironi të hiqni kufijtë e dukshëm midis tyre.

Epo, ne ende duhet të marrim parasysh disa atribute të etiketës Frame - gjerësia e margjinës dhe lartësia e margjinës, i cili vendos mbushjen në gjerësi (majtas dhe djathtas) dhe lartësi (lart dhe poshtë) nga kufijtë e dritares deri në përmbajtjen e ngarkuar në të (numri nënkupton numrin e pikselëve të mbushjes):

Pse nuk mund të krijoni një faqe në korniza?

Le të shohim se cila është pengesa themelore e strukturave klasike, e cila në thelb i jep fund përdorimit të tyre gjatë krijimit të një siti. Ai konsiston në faktin se sipas kësaj strukture kornizë është e pamundur të gjurmohet gjendja e saj.

Strukturat komplekse mund të kenë mijëra gjendje të ndryshme (variante dokumentesh të hapura në dritare të ndryshme kornizë), por adresa Url e vetë kësaj strukture nuk ndryshon. Për shkak të kësaj do Nuk mund të përdoren faqeshënuesit e shfletuesit ose dërgoni lidhje në faqet tuaja të preferuara për përdoruesit e tjerë. Pse?

Për shkak se adresa mbetet e njëjtë dhe kur e hapni nga faqeshënuesit e shfletuesit tuaj ose nga një email, do të merrni një faqe me gjendjen fillestare të strukturës së kornizës dhe jo gjendjen që dëshironi të ruani.

Edhe pse, natyrisht, ky problem mund të zgjidhet, por jo me anë të Html, por me ndihmën e serverit (për shembull, Php) ose gjuhëve programuese nga ana e klientit (JavaScript), dhe këto zgjidhje nuk do të funksionojnë njëqind për qind. Zgjidhje të tilla, në fakt, ju lejojnë të shtoni të dhëna shtesë për gjendjen e saj aktuale në adresën Url të strukturës së kornizës, por kjo nuk është e lehtë për t'u bërë dhe besueshmëria nuk do të jetë absolute.

Ky është disavantazhi i parë i përdorimit të kornizave për krijimin e faqeve të internetit dhe është shumë domethënës, por ka një tjetër disavantazh të madh. Motorët e kërkimit, natyrisht, kanë mësuar prej kohësh t'i indeksojnë ato dhe të nxjerrin prej tyre adresat e atyre dokumenteve që janë ngarkuar në dritaret e tyre. Problemi është i ndryshëm.

Kur një përdorues shkon nga rezultatet e kërkimit Yandex ose Google në faqen tuaj të ndërtuar në bazë të një strukture kornizë, do të hapet vetëm dokumenti që është ngarkuar në një nga kornizat dhe jo e gjithë struktura. A e kupton se për çfarë po flas?

Përdoruesi do të shohë dokumentin dhe nuk do të shohë navigimin në faqen tuaj, sepse do të mbrohet në dritare të tjera, dhe ato ngarkohen vetëm si pjesë e të gjithë strukturës.

Si rezultat, një faqe e ndërtuar mbi korniza thjesht bëhet e papërdorshme. Edhe pse, përsëri, ekzistojnë zgjidhje për këtë problem bazuar në skriptet e serverit, kur do të kryhet një ridrejtim nga adresat e dokumenteve individuale në një strukturë kornizë që është në gjendjen e dëshiruar, por kjo është përsëri shumë e vështirë dhe jo gjithmonë e besueshme.

Në përgjithësi, përfundimi mund të nxirret pa mëdyshje - nuk keni nevojë të krijoni sajte në korniza. Por nga ana tjetër, ato përdoren vazhdimisht për të krijuar ndihmë për aplikacione të ndryshme dhe mund të vijnë në ndihmë diku tjetër.

Për shembull, unë krijova një strukturë kornizë, të cilën e quajta "Navigator" (tani e hoqa përkohësisht) dhe e cila u bë një lloj menuje e jashtme e zgjeruar për blogun tim, e cila, për mendimin tim, duhet të thjeshtojë punën me burimin dhe, për rrjedhojë, , përmirësoni ato që tani janë "pa budallallëqe" ndikojnë shumë, shumë fort në promovimin e faqes.

Por, megjithatë, për të shmangur ndonjë problem me motorët e kërkimit, unë mbylla të gjithë strukturën e kornizës prej saj, dhe gjithashtu shtova, për çdo rast, meta etiketën Rodots në të gjithë skedarët e saj Html me një ndalim të indeksimit të tyre:

Por të gjitha këto kufizime vlejnë vetëm për strukturat në etiketat Frame dhe Frameset, dhe korniza inline në etiketat iframe nuk keni asnjë të metë të dukshme, dhe është mjaft e mundur dhe madje e nevojshme t'i përdorni ato në projektet tuaja, të paktën për të futur video nga YouTube.

Paç fat! Shihemi së shpejti në faqen e faqeve të blogut

Ju mund të jeni të interesuar

Direktivat e komenteve dhe Doctype në kodin Html, si dhe koncepti i elementeve bllok dhe inline (etiketat)
Embed and Object - Etiketat HTML për shfaqjen e përmbajtjes së medias (video, flash, audio) në faqet e internetit
Img - Etiketa Html për futjen e një imazhi (Src), përafrimin dhe mbështjelljen e tij me tekst (rreshtoj), si dhe vendosjen e një sfondi (sfondi)
Çfarë është Html Hypertext Markup Language dhe si të listohen të gjitha etiketat në validatorin W3C Zgjidh, Option, Textarea, Label, Fieldset, Legend - Etiketat Html të formës së listës rënëse dhe fushës së tekstit
Listat në kodin Html - etiketat UL, OL, LI dhe DL
Fonti (Fytyra, Madhësia dhe Ngjyra), Blockquote dhe etiketat para - formatimi i tekstit i vjetëruar në HTML të pastër (pa përdorur CSS)
Si vendosen ngjyrat në kodin Html dhe CSS, përzgjedhja e nuancave RGB në tabela, rezultatet Yandex dhe programe të tjera

Me siguri keni dëgjuar më shumë se një herë për një gjë të tillë si kornizat. Ju mund të lexoni rreth tyre në çdo libër shkollor html, si dhe në burimet rreth krijimit të faqeve. Pasi studiova shumë shembuj dhe përshkrime, vendosa të tregoj gjithçka rreth kornizave me fjalët e mia në një mënyrë shumë të thjeshtë. Të mirat, të këqijat dhe e ardhmja e kornizave do të diskutohen në fund të kësaj faqeje. Pra, çfarë janë kornizat në html?

Çfarë janë Kornizat në html

kornizë(Korniza në anglisht) - një zonë e pavarur që mund të lidhet në një faqe interneti.

Mos u shqetësoni se kjo tingëllon paksa e errët. Le të japim menjëherë shembullin më të thjeshtë dhe më pas gjithçka do të bëhet e qartë.

Hapni ndihmën (ndihmë) në çdo program (mund të jetë një bllok shënimesh, ndonjë program, shfletues, etj.). Pothuajse gjithmonë do të shihni një ndihmë të përbërë nga dy pjesë (navigimi në të majtë, përmbajtja në të djathtë). Pjesa e majtë dhe e djathtë janë vetëm korniza të veçanta. Më poshtë është një pamje e marrë nga ndihma e bllokut më të zakonshëm të shënimeve të Windows:

Fig 1. Përdorimi i kornizave në shembullin e ndihmës së bllokut të shënimeve

Ajo që shihni është një faqe interneti e përbërë nga dy korniza të veçanta të pavarura. Këtu është një shembull i kodit html të një kornize të tillë nga ndihma.

Shembull me kornizat #1 (duke bërë ndihmë)

Në kuadrin e mësipërm, ndihma e diskutuar më sipër do të duket si kjo:

Fig 2. Korniza për përdorimin e kornizave për shembull #1

Ndarja e një faqe në rajone duke përdorur korniza është shumë e ngjashme me paraqitjen e tabelës html (shih etiketën e tabelës HTML). Një kod shembull për një faqe të tillë mund të duket kështu:

Shpjegimi për shembull nr. 1

Siç mund ta shihni nga kodi i mësipërm, një faqe e krijuar nga korniza është shumë e ngjashme me një faqe të zakonshme html: ka një etiketë hapëse html, një seksion , kokë <span>Shfletuesi juaj nuk mbështet shfaqjen e kornizave</span>

kodi i skedarit top.html

Shembulli #2

Dhe këtu mund të jetë një logo dhe jo vetëm :)

kodi i skedarit menu.html

• Faqja Kryesore
• Rreth sajtit
• Rreth Autorit
• ...

kodi i skedarit content.html

Faqja Kryesore

Përmbajtja e faqes. Skedari content.html tani është i hapur
Kjo është gjendja fillestare e kornizës sonë. Le ta emërtojmë këtë skedar "Faqja kryesore"

kodi i skedarit about-site.html

Rreth sajtit

Faqe rreth sajtit. Skedari about-site.html tani është i hapur

kodi i skedarit about-author.html

Rreth Autorit

Faqe rreth autorit. Skedari about-author.html tani është i hapur

kodi i skedarit footer.html

Fundi i faqes. Skedari footer.html tani është i hapur

Shpjegimi për shembull nr. 2

Fillimisht, e gjithë faqja është e ndarë në tre rajone horizontalisht në një raport 3:14:3. Për këtë është përgjegjës atributi rows="15%,70%,15%". Korniza e parë në shembullin tonë është koka (e kemi quajtur top.html ), dhe zë 15% të hapësirës së lartësisë. Më pas vjen një kornizë e madhe që zë 70% të lartësisë. E ndajmë në dy pjesë duke përdorur cols="25%,75%" në një raport 1:3. Në të majtë është korniza menu.html, në të djathtë është content.html . Ne e emërtuam në mënyrë specifike emrin e kornizës së dytë "kryesore" me qëllim të ndërrimit të faqeve. Vini re se në skedarin menu.html, atributi target="kryesor" i caktohet çdo lidhjeje, i cili lejon, kur klikoni në këtë lidhje, elementët të ngarkohen në një zonë të quajtur kryesore. Në fund të faqes është korniza e fundit, footer.html.

Nëse zbatoni shembullin #2, duhet të merrni faqen e mëposhtme html në gjendjen e saj fillestare:

Fig 4. Shembulli nr 2 - gjendja fillestare

Kur shkoni te faqja Rreth, faqja do të duket kështu:

Fig 5. Shembulli #2 - gjendja e dytë

Fig 6. Shembulli #2 - gjendja e tretë

Etiketë

Atributet opsionale të kësaj etikete janë width="width" dhe height="height" , ndërsa atributi i kërkuar është src="adresa e kornizës".

Etiketoni atributet dhe vetitë

1. Atributi COLS="Parametrat"
Përcakton numrin e ndërprerjeve vertikale të faqeve.

2. Atributi ROWS="Parametrat"
Përcakton numrin e ndërprerjeve horizontale të faqeve.

Tani le të shohim se si mund të vendosni parametrat e ndarjes.

a) Përdorimi i një numri që do të korrespondojë me numrin e pikselëve. Për shembull, cols = "100,100,300" vendos që faqja të ndahet në tre rajone, secila prej të cilave do të jetë respektivisht 100 px, 100 px dhe 300 px e gjerë.

b) Me ndihmën e përqindjeve nga gjerësia/lartësia totale. Në shembujt e diskutuar më sipër, kemi përdorur saktësisht ndarjen e përqindjes, kështu që më duket e kotë të jap një shembull.

c) Me * (yll). Për shembull, cols = "2*,3*,100" vendos dy rajonet e para në një raport 2:3 dhe rajoni i tretë do të jetë 100 piksele i gjerë.

Të tre metodat mund të kombinohen. Për shembull, cols="2*,100,15%,4*" .

3. Atributi frameborder="(po|jo)"
Përcakton nëse korniza ka një kufi. Nëse përgjigja është po, atëherë atributi vijues i katërt i kufirit është në fuqi.

4. Atributi border="parameter"
Në pikselë, kufiri specifikon trashësinë e goditjes së zonës së kornizës. Për shembull, frameborder = "2" specifikon një zonë kufitare të zgjedhur prej 2 pikselësh.

5. Atributi bordercolor="color"
Përcakton ngjyrën e kufirit, nëse ka. Ngjyra mund të vendoset si me fjalë ashtu edhe në kod (shih paletën e ngjyrave html).

Shënim: ju lutemi vini re se etiketa duhet një etiketë mbyllëse .

Etiketoni atributet dhe vetitë

1. Atribut src="adresa e elementit"
URL-ja e plotë e adresës së elementit duhet të specifikohet si parametër këtu. Ky atribut kërkohet. Ai tashmë është i njohur për ju, sepse. ishte i pranishëm në shembujt 1 dhe 2.

2. Atributi marginwidth = "numri"
Vendos dhëmbëzimin brenda kornizës nga kufijtë në piksel në gjerësi. Për shembull, marginwidth="10" do të vendosë mbushjen e përmbajtjes majtas dhe djathtas të kufirit të kornizës.

3. Atributi marginhight = "numri"
Është i ngjashëm me të dytin, me të vetmin ndryshim se vendos dhëmbëzimin në lartësi.

4. Atributi scrolling="(po|jo|auto)"
Vendos aftësinë për të lëvizur kornizën nëse nuk mund të përshtatet në kornizën e zonës së caktuar për të. Vlera e paracaktuar është auto (do të thotë që nëse është e nevojshme, krijoni një rrotull).

5. atributi noresize
Nëse ky atribut është vendosur, atëherë përdoruesit i ndalohet të ndryshojë kufijtë e kornizës. Si parazgjedhje, ky atribut nuk është vendosur dhe përdoruesi mund të ndryshojë kufijtë sipas dëshirës.

5. Emri i atributit = "emri"
Me këtë atribut, ju mund t'i jepni kornizës një emër. Kjo është e nevojshme në mënyrë që kornizat e tjera të kenë akses në këtë kornizë. Në shembullin nr. 2 është konsideruar vetëm një rast i tillë.

Shënim:
Emri nuk duhet të fillojë me nënvizimin "_".

6. Atributet kufiri i kornizës, kufiri dhe ngjyra e kufirit
Këto tre atribute janë të njëjta si për grupin e kornizave (shih atributet e grupit të kornizës më lart).

Avantazhet dhe disavantazhet e kornizave

Avantazhet e kornizave

• Aftësia për të shfaqur disa faqe në mënyrë të pavarur në një dritare (shembulli 1 dhe 2 më lart);
• Aftësia për të ndërruar përmbajtjen e faqes pa ringarkuar faqen (ndryshon vetëm një zonë e ekranit);
• Aftësia për të ndërtuar në mënyrë fleksibël strukturën e faqes (header, menu, footer, etj. - të gjitha informacionet statike ruhen veçmas në skedarë, dhe kjo ju lejon të redaktoni shpejt një pjesë të faqes);
• Përdoruesi mund të ndryshojë vetë madhësinë e portit të shikimit, nëse opsioni noresize nuk është vendosur;

Disavantazhet e kornizave

• Motorët e kërkimit nuk i indeksojnë mirë faqet në korniza, sepse nuk janë në gjendje të interpretojnë skedarët e ngarkuar në korniza. Motori i kërkimit i dallon faqet sipas adresës së tyre (URL), dhe për kornizat, pavarësisht gjendjeve të ndryshme, adresa e faqes nuk ndryshon. Kjo është në kundërshtim me rregullat e motorit të kërkimit, që do të thotë se nuk është fakt që motori i kërkimit do të jetë në gjendje të indeksojë faqen.
• Është e pamundur të shënosh një faqe në korniza, sepse URL-ja e faqes do të jetë e njëjtë. Kështu, ju mund të ruani vetëm gjendjen origjinale të kornizës.
• Jo të gjithë shfletuesit mbështesin kornizat.

E ardhmja e kornizave:
Shumë webmaster kanë kohë që i kanë braktisur kornizat. Kjo është për shkak të vështirësive të promovimit në motorët e kërkimit. Tani të gjithë po kalojnë në Ajax, si një mënyrë më dinamike dhe moderne e shfaqjes së informacionit në një faqe të faqes.

I nderuar lexues, ne kemi shqyrtuar etiketat e dokumentit html në lidhje me kornizat. Pavarësisht nga e ardhmja e dyshimtë e këtij drejtimi, çdo webmaster duhet të dijë për kornizat.

Megjithëse faqet me korniza po bëhen gjithnjë e më pak të zakonshme, mësimi i HTML do të ishte i paplotë pa shikuar temën e kornizave. Për më tepër, kornizat, në një farë kuptimi, kanë zënë vendin e tyre dhe përdoren për sistemet e administrimit dhe ndihmës. Aty ku disavantazhet e kornizave nuk kanë shumë rëndësi, por avantazhet, përkundrazi, kërkohen në mënyrë aktive.

Etiketa përdoret për të krijuar një kornizë , e cila zëvendëson etiketën në një dokument dhe përdoret për të ndarë ekranin në rajone. Brenda këtij etiketi janë etiketat , të cilat tregojnë për dokumentin HTML që do të ngarkohet në rajon (Figura 13.1).

Oriz. 13.1. Një shembull i ndarjes së një dritare të shfletuesit në dy korniza

Kur përdorni korniza, kërkohen të paktën tre skedarë HTML: i pari përcakton strukturën e kornizës dhe ndan dritaren e shfletuesit në dy pjesë, dhe dy dokumentet e mbetur ngarkohen në dritaret e specifikuara. Numri i kornizave nuk është domosdoshmërisht i barabartë me dy, mund të jetë më shumë, por jo më pak se dy, përndryshe kuptimi i përdorimit të kornizave humbet plotësisht.

Merrni parasysh hapat për krijimin e kornizave bazuar në faqen e treguar në Fig. 13.1. Na duhen tre skedarë: index.html përcakton strukturën e dokumentit, menu.html ngarkohet në kornizën e majtë dhe content.html ngarkohet në kornizën e djathtë. Nga këto, vetëm index.html ndryshon në strukturën e kodit nga skedarët e tjerë (Shembulli 13-1).

Shembulli 13.1. skedar index.html

Në rastin e përdorimit të kornizave, lloji i mëposhtëm i dokumentit shkruhet në rreshtin e parë të kodit.

Tëi tregon shfletuesit se ka të bëjë me korniza, kjo linjë kodi kërkohet. Enë përmban informacion tipik si kodimi i faqes dhe titulli i dokumentit. Vetëm mbani në mend se titulli mbetet i pandryshuar ndërsa skedarët HTML hapen brenda kornizave.

Në këtë shembull, dritarja e shfletuesit ndahet në dy kolona duke përdorur atributin cols, kolona e majtë është 100 pikselë dhe kolona e djathtë është hapësira e mbetur e specifikuar nga karakteri yll. Gjerësia ose lartësia e kornizave mund të vendoset gjithashtu si përqindje, ngjashëm me tabelat.

Në etiketë specifikon emrin e skedarit HTML të ngarkuar në zonën e specifikuar duke përdorur atributin src. Dritarja e majtë do të ngarkohet me një skedar të quajtur menu.html (Shembulli 13-2), dhe dritarja e djathtë do të ngarkohet me përmbajtjen.html (Shembulli 13-3). Është e dëshirueshme që çdo kornize t'i jepet një emër unik në mënyrë që dokumentet të mund të ngarkohen në dritaren e specifikuar duke përdorur atributin e emrit.

Shembulli 13.2. skedar menu.html

Në këtë shembull, sfondi gri në faqe vendoset duke përdorur stile, të cilat do të diskutohen më vonë.

Shembulli 13.3. file content.html

PËRMBAJTJA

Konsideroni një shembull më kompleks me tre korniza tashmë (Fig. 13.2).

Oriz. 13.2. Ndarja e faqes në tre korniza

Në këtë rast, etiketa përdoret përsëri , por dy herë, me një etiketë të vendosur brenda tjetrës. Ndarja horizontale krijohet përmes atributit rows, ku shënimi përqindje përdoret për varietet (Shembulli 13-4).

Shembulli 13.4. tre korniza

Siç mund ta shihni nga ky shembull, kontejneri me atributin rows së pari krijon dy korniza horizontale, por një kornizë tjetër zëvendësohet me kornizën e dytë , e cila përsërit strukturën që tashmë e dini nga Shembulli 13.1. Scrolling = "jo" dhe atributet noresize janë shtuar për të parandaluar shfaqjen e shiritit vertikal të lëvizjes dhe që përdoruesi të mos jetë në gjendje të ndryshojë vetë madhësinë e kornizës së sipërme.

Me korniza, ju mund të shfaqni disa dokumente të veçanta HTML në një dritare të vetme të shfletuesit.

kornizat HTML

Shënim: kornizat konsiderohen tani të vjetruara dhe nuk do të mbështeten në HTML5 (kjo vlen vetëm për kornizat normale, kornizat inline të diskutuara më vonë në këtë kapitull nuk janë të vjetruara). Mos përdorni korniza të rregullta në projektet tuaja!

Disa ueb faqe mund të shfaqen në një dritare të shfletuesit, e cila në këtë rast do të thirret korniza.

Me etiketën HTML Mund të përshkruani se si do të vendosen kornizat në dritaren e shfletuesit.

Etiketë përshkruan një kornizë të vetme. Në atributin e tij src duhet të specifikohet adresa e dokumentit që do të shfaqet në këtë kuadër.

Madhësia e kornizës

Madhësitë e kornizës vendosen duke përdorur atributet e etiketave . Dimensionet mund të specifikohen në piksel (px) dhe përqindje (%).

Me një atribut rreshtave Ju mund të vendosni lartësinë e kornizës. Madhësitë për kornizat individuale duhet të ndahen me presje.

Me një atribut cols Ju mund të vendosni gjerësinë e një kornize individuale.

Shënim: një kornizë ka një kufi të dukshëm si parazgjedhje, që do të thotë se përdoruesi mund ta ndryshojë madhësinë e tij duke zvarritur kufirin. Për të çaktivizuar zvarritjen e kufirit Mund të shtoni atributin noresize me vlerën "noresize" në etiketë .

Po nëse shfletuesi i përdoruesit nuk mbështet korniza?

Nëse shfletuesi i përdoruesit nuk mbështet korniza, duhet të përdorni etiketën </b>. Vlera e kësaj etikete do t'u shfaqet vetëm përdoruesve, shfletuesi i të cilëve nuk mund të shfaqë korniza.</p><p> <frameset cols="25%,75%"> <frame src="fr_a.html" /> <frame src="fr_b.html" /> </frameset> <noframes> <body><p>Shfletuesi juaj nuk mbështet korniza.</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body>

Shënim: Kur përdorni etiketën noframe, duhet të përfshini etiketën e trupit siç tregohet në shembullin e mësipërm.

Korniza me fije

Me një etiketë

Në shënimin e mësipërm, mjafton të zëvendësoni adresën e faqes me ndonjë tjetër dhe, nëse është e nevojshme, të rregulloni madhësitë e kornizës.

pikëpamjet