Krijimi i një kornize në shembuj html. Iframe dhe Frame - cilat janë ato dhe si të përdoren më mirë kornizat në Html

Ekziston një etiketë interesante në html me të cilën mund të futni një tjetër në faqen tuaj të internetit dhe do të duket sikur është qepur në tuajën. Ky është një shënim se si të futni një iframe në html.

Futja e një iframe

Pra, duke përdorur këtë etiketë të çiftuar, mund të futni një faqe nga çdo faqe interneti në internet në artikullin tuaj. Le të shohim këtë pjesë të kodit:

Siç mund ta shihni, të gjithë parametrat e futjes vendosen në atributet e etiketës. Unë mendoj se nuk ka nevojë t'ju shpjegoj asgjë për dy të parat - kjo është gjerësia dhe lartësia e kornizës sonë në të cilën do të vendoset faqja e dëshiruar. Dimensionet duhet të zgjidhen bazuar në gjerësinë e bllokut tuaj të përmbajtjes.

Adresa faqen e dëshiruar specifikuar në atributin src. Në të duhet të shkruani adresën e plotë të faqes/faqes së internetit. Atributi tjetër është emri i kornizës. Këtu mund të shkruani një vlerë arbitrare. Së fundi, lëvizja është përgjegjëse për shfaqjen e shiritave të lëvizjes dhe vlera e saj automatike siguron që lëvizja të shfaqet vetëm kur të jetë e nevojshme. Ju gjithashtu mund të vendosni vlerën në jo këtu. Në këtë rast, shiritat e lëvizjes nuk do të shfaqen, por atëherë nuk do të mund të lëvizni faqen - do të mund të shikoni vetëm fragmentin e saj, për sa kohë që lartësia e specifikuar është e mjaftueshme.

Nëse është e nevojshme, mund të vendosni parametrat e mbetur përmes css. Për shembull, kjo mund të jetë mbushje ose një kufi.

Kornizat janë elementë HTML që ju lejojnë të ndani një dritare të shfletuesit të internetit në disa dritare të pavarura, secila prej të cilave mund të ngarkojë një dokument të veçantë HTML. Çdo dritare (kornizë) e tillë mund të ketë shiritat e saj të lëvizjes dhe të funksionojë në mënyrë të pavarur nga dritaret e tjera të pavarura ose, përkundrazi, të kontrollojë përmbajtjen e tyre. Ato mund të përdoren për të organizuar një menu që ndodhet vazhdimisht në një dritare, ndërsa vetë informacioni ndodhet në një dritare tjetër. Përdoruesit mund të hyjnë në meny në çdo kohë dhe nuk duhet të kthehen në faqen e mëparshme për të zgjedhur një artikull tjetër të menysë. Përdorimi i kornizave ju lejon të "gozhdoni" imazhe ose elementë të tjerë të ndërfaqes statike në dritaren e shfletuesit ndërsa pjesa tjetër e faqes lëviz brenda kornizës.
Sidoqoftë, vlen të përmendet se këto ditë kornizat konsiderohen si një mjet i vjetëruar, dhe faqet me korniza tani konsiderohen të padenjë, pasi webmasterët profesionistë nuk përdorin kurrë korniza në projektet e tyre. Ka një sërë gjërash të trishtueshme që lidhen me kornizat. çështje të njohura. Për shembull, ato janë konfuze motorët e kërkimit, sepse faqet që përmbajnë përmbajtjen nuk kanë lidhje me dokumente të tjera. Nëse doni të merrni vizitorë nga motorët e kërkimit, harroni kornizat. Është e pamundur që një përdorues të vendosë një faqe që i pëlqen në seksionin e faqeshënuesve të shfletuesit, pasi kornizat fshehin adresën e faqes në të cilën ndodhet dhe tregojnë gjithmonë vetëm adresën e faqes së internetit. Për këtë arsye, ata krijojnë probleme për shfletuesit kur gjurmojnë historikun dhe gjithashtu nuk janë shumë të përshtatshëm madhësive të ndryshme ekranet dhe pajisjet mobile.
Pavarësisht se projektet me korniza gjenden në rrjeti botëror gjithnjë e më rrallë mësimi i HTML do të ishte e paplotë pa diskutuar temën e kornizave. Kornizat, së bashku me disavantazhet e tyre, kanë edhe disa avantazhe që nuk na lejojnë ta hedhim poshtë këtë teknologji si jopremtuese.

Krijimi i kornizave

Struktura e një dokumenti HTML me korniza është shumë e ngjashme në pamje me formatin e një dokumenti të rregullt HTML. Ashtu si në një dokument të rregullt HTML, i gjithë kodi vendoset midis çifteve dhe etiketave, dhe titujt janë të vendosur në kontejner. Dallimi kryesor midis një dokumenti me korniza dhe një dokumenti të rregullt HTML është se një dokument me korniza përdor një etiketë në vend të një etikete. etiketë e çiftuar(nga grupi i kornizave angleze - një grup kornizash).
NË shembullin e mëposhtëm Struktura e një dokumenti HTML me korniza është paraqitur:

Shembull: Struktura e dokumentit HTML me korniza

• Provojeni vetë »

kornizë_majë
korniza_majtas	korniza_djathtas

Dokument me korniza

Në shembullin e mësipërm, faqja përmban tre zona, secila prej të cilave fillimisht ngarkohet me dokumente HTML frame_top.html, frame_left.html dhe frame_right.html. Përveç dokumenteve HTML, një kornizë mund të përmbajë edhe grafikë. Për ta bërë këtë, duhet të specifikoni adresën e imazhit përkatës në atributin src, për shembull src="image.gif". Vini re se elementi përdoret pa një etiketë mbyllëse.
Një kontejner mund të përmbajë vetëm etiketa ose një grup tjetër kornizash të mbuluara nga etiketat dhe.
Etiketa ka atributet e mëposhtme:

• rreshta - përshkruan se si një faqe ndahet në rreshta:
• cols - përshkruan se si të ndahet një faqe në kolona:

Zonat që rezultojnë nga ndarja e kësaj faqeje do të jenë korniza. Mungesa e këtyre atributeve përcakton një kornizë të vetme që do të zërë të gjithë dritaren e shfletuesit.

Në vlerën e rreshtave dhe atributeve cols, është e nevojshme të tregohet jo numri i rreshtave ose kolonave, por gjerësia dhe lartësia e kornizave. Të gjitha vlerat në listë janë të ndara me presje. Dimensionet mund të specifikohen në njësi absolute (pikselë) ose përqindje:

• cols="20%, 80%" - dritarja e shfletuesit ndahet në dy kolona duke përdorur atributin cols, kolona e majtë zë 20%, dhe djathtas 80% të dritares së shfletuesit.
• rows="100, *" dritarja e shfletuesit ndahet në dy dritare horizontale duke përdorur atributin e rreshtave, dritarja e sipërme merr 100 piksel, dhe pjesa e poshtme zë hapësirën e mbetur të specifikuar nga simboli yll.

Siç shihet nga ky shembull, një kontejner me atributin rows krijon fillimisht dy korniza horizontale dhe në vend të kornizës së dytë zëvendësohet një tjetër, i cili ndan kornizën horizontale të poshtme në dy kolona duke përdorur atributin cols, kolona e majtë zë 20% dhe e djathta 80% e dritares së shfletuesit.
Nëse shfletuesi nuk mbështet korniza, dritarja do të shfaqë tekstin e vendosur midis etiketave dhe. Çdo gjë midis etiketave dhe injorohet nga shfletuesit që mbështesin kornizat. Kështu, zhvilluesi duhet të shkruajë kodin që kopjon përmbajtjen e kornizave me mjete të tjera dhe ta vendosë këtë kod në një kontejner, atëherë të gjithë përdoruesit do të mund të shohin faqen e tij të internetit.
Siç është përmendur tashmë, për të futur një kornizë të veçantë në një dokument, përdorni etiketë e paçiftuar. Atributi src specifikon dokumentin që duhet të shfaqet brenda kësaj kornize, për shembull: . Nëse atributi src mungon, shfaqet një kornizë bosh.

Kufijtë ose hapësira ndërmjet kornizave

Si parazgjedhje, shfletuesi shfaq një kufi të linjës gri, zakonisht 3D midis kornizave që vizitorët mund të përdorin për të rregulluar madhësinë e kornizës.
Kufiri i kornizës mund të manipulohet si çdo element tjetër i kornizës. Për ta arritur këtë, ekzistojnë disa atribute elementesh që ju lejojnë të personalizoni kufijtë e kornizave. Trashësia e vijës kufitare përcaktohet nga atributi i kufirit. Vlera e paracaktuar e trashësisë së kufirit është pesë.
Për të fshehur kufirin e kornizës, duhet të specifikoni një vlerë të gjerësisë së kufirit e barabartë me zero, ose vendosni vlerën "jo" ose "0" në atributin frameborder. Atributi frameborder mund të marrë vetëm dy vlera të kundërta. Nëse vlera e atributit frameborder është "po" ose "1", atëherë kufiri i kornizës do të shfaqet, dhe nëse "0" ose "jo", atëherë nuk do të shfaqet. Ju lutemi vini re se vlerat e atributit të kufirit të kornizës ndryshojnë për shfletues të ndryshëm. Për të zgjidhur këtë problem, përdorni dy herë atributin frameborder dhe për disa shfletues ju duhet gjithashtu të shtoni atributin framespace me një vlerë "0":

Në shembullin e mëposhtëm ne heqim kufirin midis kornizave:

Shembull: Heqja e kufirit midis kornizave

• Provojeni vetë »

korniza_majtas

korniza_djathtas

Korniza pa kufij

Nëse hiqni kufirin midis kornizave, vizitorët nuk do të mund të ndryshojnë madhësinë e kornizës në shfletues. Ju gjithashtu mund të parandaloni ndryshimin e madhësisë së kornizës duke ruajtur kufijtë duke përdorur atributin noresize:

Atributi bordercolor mund të përdoret për të ndryshuar ngjyrën e kufirit të kornizës, gjithçka që duhet të bëni është të specifikoni një kod ose një emër të përshtatshëm të rezervuar të ngjyrës.
Më poshtë është një shembull i një faqeje HTML që përmban atributet e kontrollit të kufirit të kornizës të përshkruara më sipër: ngjyra e kufirit është e kuqe, madhësia e kornizës së sipërme nuk mund të ndryshohet:

Shembull: Frame Border Control

• Provojeni vetë »

kornizë_majë
korniza_majtas	korniza_djathtas

Kuadri i Menaxhimit të Kufirit

Nëse dëshironi ta poziciononi faqen e shfaqur brenda kornizës më afër kufijve të saj, ose, anasjelltas, ta zhvendosni më larg, ndryshoni atributet e lartësisë dhe gjerësisë së marzhit të etiketës. Atributi marginheight specifikon diferencën midis përmbajtjes së kornizës dhe kufijve të saj të sipërm dhe të poshtëm. Sintaksa:

Atributi marginwidth specifikon diferencën midis përmbajtjes së kornizës dhe kufirit të tij të djathtë dhe të majtë. Sintaksa:

Kjo varg html, për shembull, pozicionon faqen e shfaqur afër kufirit të kornizës:

Nëse faqja shfaq një shirit lëvizës që ju nuk e dëshironi, mund ta zgjidhni këtë problem duke specifikuar atributin "jo" lëvizës në . Por mbani në mend se nëse korniza nuk është mjaft e madhe për të shfaqur të gjithë përmbajtjen e faqes, atëherë vizitori nuk do të ketë asnjë mënyrë për të lëvizur faqen e shfaqur.

Lidhje brenda kornizave

Ndjekja e një lidhjeje në një dokument të rregullt HTML bëhet si më poshtë: klikoni lidhjen dhe dokument aktual zëvendësohet me një të re në dritaren aktuale ose në një dritare të re të shfletuesit. Kur përdorni korniza, skema e ngarkimit për dokumentet HTML ndryshon nga ajo e zakonshme, dhe ndryshimi kryesor është aftësia për të ngarkuar një dokument HTML në një kornizë nga një kornizë tjetër.
Për të ngarkuar një dokument në një kornizë specifike, përdorni atributin objektiv të etiketës . Vlera e atributit të synuar është emri i kornizës në të cilën do të ngarkohet dokumenti i specifikuar nga atributi i emrit të etiketës. Vlen gjithashtu të përmendet se emri i kornizës duhet të fillojë ose me një numër ose një shkronjë latine. Emrat e mëposhtëm përdoren si emra të rezervuar:

Për lidhjet e jashtme, duhet të vendosni atributin e synuar në _top ose _blank për të siguruar që projektet e palëve të treta të mos shfaqen në kornizat tuaja, por të mbushin të gjithë dritaren e shfletuesit.

Shembulli i mëposhtëm tregon një dokument HTML në të cilin korniza e djathtë ngarkon një faqe nga një lidhje e vendosur në kornizën e sipërme. Lidhja me dokumentin që do të hapet në kornizën e duhur:

Google

Kornizës së duhur i jepet një emër korniza_djathtas:

Për të ngarkuar një dokument në një kornizë të caktuar, përdorni konstruktin target="frame_right", siç tregohet në shembullin:

Shembull: Lidhja me një kornizë tjetër

• Provojeni vetë »

Lidhja me një kornizë tjetër

Shfletuesi juaj nuk po shfaq korniza

Korniza lundruese

Një element (një shkurtim i termit anglisht "kornizë lundruese") ju lejon të futni një dokument të veçantë HTML ose një burim tjetër kudo në një faqe interneti. Përmbajtja e një kornize lundruese (të ngulitur) mund të jetë çdo faqe HTML, qoftë nga burimi juaj ose nga një uebsajt tjetër. Siç e keni kuptuar tashmë, kornizat lundruese krijohen duke përdorur elementin, i cili, ndryshe nga etiketa, nuk futet midis etiketave dhe, por midis etiketave dhe.
Elementi mund të përdorë të njëjtat atribute si një kornizë, me përjashtim të atributit noresize - ndryshe nga kornizat e rregullta, kornizat inline nuk mund të ndryshohen përmasat në ekran:

Përshkrimi i atributit

src	përdoret për të specifikuar URL-në e faqes që do të shfaqet në kornizë
lartësia	cakton lartësinë e dritares së kornizës lundruese në piksel ose %
gjerësia	vendos gjerësinë e dritares së kornizës lundruese në piksel ose %
emri	emri i kornizës me të cilën mund të aksesohet në lidhje
kufiri i kornizës	vendos kufirin për kornizat, mund të marrë vlerat 1 (ka një kufi) ose 0 (pa kufi) (Nuk mbështetet në HTML5)
gjerësia e margjinës	mbushja majtas dhe djathtas nga përmbajtja në kufirin e kornizës (Nuk mbështetet në HTML5)
lartësia margjinale	mbushja në krye dhe në fund nga përmbajtja në kufirin e kornizës (Nuk mbështetet në HTML5)
rrotullimi	përcakton llojin e shiritave lëvizës në kornizë dhe merr vlerat po (ka shirita), jo (pa shirita) dhe automatik (shiritat shfaqen nëse është e nevojshme) (Nuk mbështetet në HTML5)
ekran i lejuar	Lejon kornizën të kalojë në modalitetin e ekranit të plotë
hspace	Margjina horizontale nga korniza në përmbajtjen përreth
vspace	hapësirë ​​vertikale nga korniza në përmbajtjen përreth
rreshtoj	përcakton shtrirjen e kornizës

Në shembullin e mëposhtëm, dimensionet e kornizës lundruese janë të specifikuara në piksel, por ju gjithashtu mund t'i specifikoni ato në %:

Shembull struktura e kornizës

Dritarja e shfletuesit mund të ndahet në korniza, d.m.th. në zonat e vendosura pranë njëra-tjetrës. Ju mund të ngarkoni faqet tuaja HTML në secilën prej këtyre zonave. Do të jetë më e qartë me një shembull, krijoni skedar i ri quajtur index.html me kodin e mëposhtëm:

Kornizat në html

Në dritaren e shfletuesit do të duket kështu:

Dritarja e shfletuesit është e ndarë në 3 pjesë. Duhet të them që ky është rasti i vetëm kur nuk ka etiketa në një dokument html . Në vend të tyre përdoren etiketat , të cilat i tregojnë shfletuesit të ndajë dritaren në disa zona - korniza.

Sa zona të tilla do të ketë dhe si do të vendosen varet nga dy parametra të etiketës :

• rreshtave- specifikon ndarjen e dritares në zona horizontale. Për më tepër, numri i vlerave që ka ky parametër, numri i zonave. Në shembullin tonë rows = "30%, 10%, 60%", d.m.th. tre zona horizontale: gjerësia e së parës është 30% e gjerësisë së ekranit, gjerësia e së dytës është 10%, dhe e treta është 60%.
• cols- specifikon ndarjen e dritares në zona vertikale.

Etiketat e brendshme etiketat e vetme janë të vendosura , dhe duhet të ketë aq shumë sa zonat e specifikuara. Pa parametra, këto etiketa janë të padobishme.

Ne do të shikojmë parametrat e etiketës me shembuj.

Pra, ne shikuam të gjithë parametrat e etiketës .

Prekja e fundit: hiqni kornizat e kornizës. Për ta bërë këtë në etiketë le të shtojmë dy parametra border = "0" frameborder = "0".

Kornizat në html

Tani faqja jonë duket si kjo:

Të mirat dhe të këqijat e kornizave

Tani që keni një kuptim të kornizave, është koha të flasim për të mirat dhe të këqijat e faqeve të internetit me kornizë.

Një avantazh i padyshimtë është ulja e sasisë së informacionit të shkarkuar në kompjuterin e përdoruesit. Në fund të fundit, titulli dhe menyja e faqes ngarkohen vetëm një herë, dhe më pas ndryshon vetëm përmbajtja. Sigurisht, kjo zvogëlon kohën e ngarkimit.

Por ka shumë mangësi të tjera. Së pari, është e lehtë të ngatërrohesh në strukturën e kornizave.

Së dyti, menuja jonë është e përfshirë skedar të veçantë. Kjo do të thotë se nëse përdoruesi ka gjetur, për shembull, faqen tuaj content.html nëpërmjet motor kërkimi, atëherë ai do të jetë në gjendje vetëm ta lexojë atë, sepse nuk ka lidhje ose artikuj të menysë në këtë faqe.

Së fundi, jo të gjithë shfletuesit mbështesin strukturën e kornizës. Prandaj etiketat ekzistuese , ato janë të vendosura brenda etiketave dhe përmbajnë informacione alternative për shfletuesit që nuk mbështesin kornizat. Në thelb ju do të duhet të bëni punë e dyfishtë dhe krijoni dy versione të faqes: me dhe pa korniza.

Prandaj përfundimi - mos përdorni korniza nëse nuk është absolutisht e nevojshme.

Shembuj të strukturave të kornizës

Siç e mbani mend, dy parametra janë përgjegjës për ndarjen në korniza: rreshtave Dhe cols. Duke i kombinuar ato, ju mund ta ndani dritaren në korniza në çdo mënyrë. Ne do të shqyrtojmë shembuj të ndarjeve të tilla.

Shembulli 1:

Kornizat në html

Ne marrim tre korniza vertikale. Gjerësia e të parës është 150 piksele, e dyta është 300 dhe e treta është pjesa tjetër e hapësirës së dritares.

Rezultati:

Shembulli 2:

Kornizat në html

Ne marrim dy korniza vertikale. Gjerësia e së parës merret e barabartë me një, dhe e dyta merret dy herë më e gjerë se e para (d.m.th. 33% dhe 67% e gjerësisë së dritares).

Rezultati:

Shembulli 3:

Kornizat në html

Marrim dy korniza horizontale. Lartësia e të parës është 100 pikselë dhe e dyta është pjesa tjetër e hapësirës.
Ne do të ndajmë kornizën e dytë horizontale në dy vertikale: njëra është 200 piksele e gjerë dhe e dyta do të zërë pjesën tjetër të hapësirës. Kjo arrihet duke përdorur etiketat e mbivendosura .

Në fillim të ndërtimit të faqes në internet, burimet e internetit përdorën gjerësisht kornizat për t'u shfaqur pjesë individuale faqet. Por me ardhjen e një të reje Versionet HTML 5 çdo gjë ka ndryshuar. Elementet e shënjimit dhe janë të vjetruara. Ata u zëvendësuan nga një etiketë e vetme - . Si të shtoni në html? Shembulli i mëposhtëm do të jetë i qartë edhe për një fillestar në programim.

Çfarë janë kornizat?

Korniza është baza e shumicës së faqeve të para të internetit. Nëse përkthehet fjalë për fjalë, fjalën e dhënë do të thotë "kornizë", domethënë një kornizë përfaqëson një pjesë të vogël të një faqeje në një shfletues. Përdorimi i gjerë kornizat në të kaluarën mund të shpjegohen cilësi të ulët dhe kostoja e lartë e trafikut të internetit. Si rregull, siti ndahej në 3-5 pjesë, secila prej të cilave shërbente për një qëllim specifik:

• "header" (korniza e sipërme përgjatë gjerësisë së faqes) - shfaq emrin e burimit;
• "xhami" majtas/djathtas - shfaqja e menysë;
• Korniza qendrore është një shfaqje e përmbajtjes së faqes.

Ndarja e faqes në pjesë bëri të mundur mbingarkimin e vetëm një pjese të caktuar gjatë përditësimit të saj. Për shembull, përdoruesi klikoi një artikull të menysë dhe përmbajtja e re u shkarkua në kornizën qendrore.

Korniza moderne në HTML 5

Pse është e nevojshme në HTML? Një shembull është futja e përmbajtjes nga një burim i palës së tretë. Situata klasike është kur një zhvillues ueb dëshiron të tregojë vendndodhjen e një objekti në një hartë. Çfarë duhet të bëj? Të vizatoni një plan siti nga e para? Jo - ekziston një zgjidhje më e thjeshtë: futni një element në faqe Harta e Google, Yandex Maps ose 2GIS. Problemi zgjidhet në katër hapa.

Ju duhet të shkoni në faqen e internetit të çdo shërbimi të hartës.

Gjeni objektin e dëshiruar. Duke ditur adresën e saktë, mund ta futni në kutinë e kërkimit.

Duke përdorur butonin "Ruaj dhe merr kodin" (për Yandex.Maps) ose "U krye" (për google maps) merrni kodin e ngulitjes.

E tëra që mbetet është të futni etiketat e markimit të krijuara në faqe.

Për më tepër, mund të zgjidhni madhësinë e hartës dhe të konfiguroni opsionet e tjera të shfaqjes.

Si tjetër mund ta përdorni në HTML?? Një shembull është futja e materialeve video nga burimi Youtube. Teknologjitë multimediale tërheqin përdoruesit e internetit, kjo është arsyeja pse përmbajtja video është kaq e popullarizuar. Zhvilluesi do të trajtojë shpejt instalimin e videos.

Duhet të ngarkohet në Youtube video e vet ose gjeni skedari i palës së tretë për transmetim.

Merrni etiketën duke zgjedhur butonin "HTML Code".

Hapi i fundit është ngjitja në. Një shembull i përmbajtjes së etiketës që rezulton do të diskutohet më poshtë.

Të dy shembujt përdorën gjenerimin automatik të kodit, por zhvillues profesionistë duhet të jenë në gjendje ta kompozojnë vetë. Së pari, kjo do t'i lejojë ata të kuptojnë paraqitjen e faqes dhe, nëse është e nevojshme, ta modifikojnë atë. Së dyti, shënimi i elementeve të faqes (edhe pse i përkasin burim i jashtëm), është formuar pa pjesëmarrjen e webmasterit. Këtu hyjnë në lojë kualifikimet e larta të zhvilluesit.

Sintaksë

Pra, para se të filloni të shtroni faqen, duhet të merrni parasysh etiketën iframe (html): çfarë është dhe si ta përdorni saktë.

Para së gjithash, duhet të theksohet se etiketa është e çiftuar. Midis elementeve të hapjes dhe mbylljes tregoni përmbajtjen që do të shfaqet në shfletuesit që nuk mbështesin këtë element shenjat. Atributet kryesore të etiketës:

• gjerësia (gjerësia);
• lartësia (lartësia);
• src (adresa e burimit të shkarkuar);
• align (metoda align);
• kufiri i kornizës;
• ekran i lejuar.

Kështu, kodi për . Shembulli HTML është demonstruar plotësisht më poshtë:

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ësinë e kornizës.

Kornizat janë zona drejtkëndore të ekranit, secila përmban dokumentin e vet HTML. Kornizat janë të shkëlqyera për formatimin e dokumenteve të mëposhtme:

Tabela e përmbajtjes. Nëse vendosni një tabelë të përmbajtjes në një kolonë vertikale në një faqe interneti, përdoruesi mund t'i referohet asaj në çdo kohë pa pasur nevojë të klikojë vazhdimisht në butonin e pasme. Meqenëse tabela e përmbajtjes do të jetë gjithmonë pranë ndërsa është në kornizë, përdoruesi thjesht do të duhet të zgjedhë një artikull tjetër dhe të marrë menjëherë informacionin që i nevojitet.

Elemente fikse të ndërfaqes. Mund të ngrini një grafik në ekran, si për shembull logon e kompanisë, ndërsa pjesa tjetër e faqes lëviz në një kornizë tjetër.

Format dhe rezultatet. Ju mund të krijoni një formë në një kornizë dhe të shfaqni rezultatet e pyetjes në një tjetër.

Korniza të rregullta në për momentin konsiderohen teknologji e vjetëruar dhe nuk mbështeten në HTML5.

Mos përdorni korniza të rregullta në projektet tuaja! Në HTML5, etiketat e kornizës , grupit të kornizave dhe noframes thjesht nuk ekzistojnë më në vend të kësaj, ofrohet një etiketë e vetme iframe (kornizë inline ose lundruese).

Etiketë

Etiketa - zëvendëson etiketën dhe përdoret për të ndarë ekranin. Ka një etiketë mbyllëse.

Atributet

COLS. Ndan ekranin vertikalisht. Pranon vlera në piksel, përqindje ose vetëm *. Vlera * tregon se kolona e caktuar do të zërë pjesën tjetër të ekranit

RRESHT. Ndan ekranin horizontalisht. Pranon vlera në pikselë, përqindje ose vetëm *. Vlera * tregon se një linjë e caktuar do të zërë pjesën tjetër të ekranit

KORNIZA. Përcakton praninë e kornizave, d.m.th. kufijtë e kornizës. Pranon vlerat "po" ose "jo".

KUFIRI. Përcakton gjerësinë e kornizës në pixel. NGJYRA KUFIRI. Përcakton ngjyrën e kornizave. E paracaktuar (nëse përdoret standard skema e ngjyrave Sistemet Windows ) kufijtë e kornizës janë të zbehta, hije gri

. Por nëse dëshironi, mund të zgjidhni çdo ngjyrë tjetër. Kur përcaktoni një ngjyrë, mund të zgjidhni emrin dhe ekuivalentin e saj numerik në sistemin RGB. Për shembull, BLU ose #0000FF.

Në një etiketë të veçantë, ka kuptim të përdoret vetëm një nga atributet - COLS ose ROWS. Kjo do të thotë që struktura e kornizës do të përbëhet nga vetëm kolona ose vetëm rreshta. Për të krijuar rreshta brenda kolonave ose kolona brenda rreshtave, do t'ju duhen kontejnerë të mbivendosur....

Rezultati:

Shembull

Mos përdorni korniza të rregullta në projektet tuaja! Në HTML5, etiketat e kornizës , grupit të kornizave dhe noframes thjesht nuk ekzistojnë më në vend të kësaj, ofrohet një etiketë e vetme iframe (kornizë inline ose lundruese).

Vini re gjithashtu ndryshimin në rendin e numërimit të kornizës.

Etiketa - zëvendëson etiketën dhe përdoret për të ndarë ekranin. Ka një etiketë mbyllëse.

Etiketa e vendosur në kontejnerin ... përcakton se çfarë saktësisht duhet të shfaqet në një kornizë të veçantë. Nuk ka një etiketë mbyllëse.

SRC. Përcakton URL-në e lidhur me një kornizë specifike.

GJERËSIA E MARGJINËS. Përcakton distancën midis përmbajtjes së kornizës dhe kufijve të saj majtas dhe djathtas.

LARTËSIA MARGJINE. Përcakton distancën midis përmbajtjes së kornizës dhe kufijve të sipërm dhe të poshtëm.

LËSHTIM. Përcakton nëse një shirit lëvizës është i pranishëm në një dritare kornizë. Mund të marrë vlerat "po", "jo" dhe "auto" (parazgjedhja).

NORESIZE. Përcakton kufijtë e kornizës si "fikse" dhe parandalon përdoruesin të ndryshojë madhësinë e dritares së kornizës. Për më tepër, regjistrohen madhësitë e të gjitha kornizave që kanë një kufi të përbashkët me atë fiks.

EMRI. Specifikon emrin e dritares së kornizës. Atributi i vetëm që nuk ndikon pamjen kornizë. Ju lejon të kontrolloni procesin e ngarkimit të kornizës. Nëse një dritare kornizë ka një emër unik, ajo mund të aksesohet drejtpërdrejt nga kornizat e tjera. Kur emërtoni dritaret e kornizës, ka një kufizim që duhet mbajtur parasysh: emri nuk duhet të fillojë me një karakter "_" të nënvizuar, përndryshe do të shpërfillet. Meqenëse disa emra shërbimesh fillojnë me këtë karakter. Shembull

Përdorimi i etiketës A për t'u ngarkuar në kornizën e Atributeve

HREF. Përcakton URL-në ose emrin e dokumentit të ri që dëshironi të ngarkoni në një dritare kornizë specifike.

SHQYRTIMI. Përcakton emrin e kornizës në të cilën do të ngarkohet dokumenti i ri. Ky emër duhet t'i jepet kornizës atributi EMRI në etiketë.

Shembulli i mëposhtëm e ndan ekranin në dy zona vertikale. Ana më e vogël e majtë përmban tabelën e përmbajtjes dhe ana e djathtë do të ngarkojë të gjitha dokumentet e tjera HTML. Skedari i tabelës së përmbajtjes përmban hiperlidhje të thjeshta teksti në seksionet përkatëse. Që gjithçka të funksionojë, ju duhet të krijoni dokumente HTML në skedarët cosm.htm, eat.htm, perf.htm, massage.htm dhe manic.htm.

Shembull Përmbajtja

• Mallrat
  • Kozmetikë
  • Suplemente ushqimore
  • Parfumeri
• Shërbimet
  • Masazh
  • Manikyr

Përshëndetje! Etiketë

Etiketa do t'ju shpëtojë nga nevoja për të përsëritur atributin TARGET në çdo hiperlidhje të vetme nëse të gjitha tregojnë në të njëjtën dritare kornizë. Për ta bërë këtë, duhet të vendosni një etiketë me Atributi TARGET në enë...

Përdorimi i etiketës do të bëjë të mundur zvogëlimin e madhësisë së skedarit të tabelës së përmbajtjes left.htm të shembullit të mëparshëm.

Shembull Përmbajtja

• Mallrat
  • Kozmetikë
  • Suplemente ushqimore
  • Parfumeri
• Shërbimet
  • Masazh
  • Manikyr

Atributi TARGET i secilës lidhje specifike zëvendëson atributin e etiketës me të njëjtin emër.

Shembull Përmbajtja

• Mallrat
  • Kozmetikë
  • Suplemente ushqimore
  • Parfumeri
• Shërbimet
  • Masazh
  • Manikyr

Këtu janë mallrat!

Këtu janë shërbimet!

Efektet speciale të marra duke përdorur atributin TARGET

Siç u përmend tashmë, emrat e kornizave nuk mund të fillojnë me një nënvizim, pasi ato fillojnë emrat e shërbimeve që përcjellin informacion të veçantë në shfletues. Më poshtë renditen emra të veçantë, secili përdoret për të arritur një efekt specifik.

TARGET=”_bosh” . Dokumenti ngarkohet në një dritare të re të shfletuesit.

TARGET=”_self” . Dokumenti ngarkohet në dritaren aktuale.

Në thelb, këta emra shërbimesh kanë për qëllim të "shpërthejnë" strukturën aktuale të kornizës në një mënyrë ose në një tjetër. Eksperimentoni me to për të parë se si mund të ngarkoni dokumente në dritare të ndryshme.

Etiketë

HTML 4.0 prezantoi kornizat lundruese (ose inline). Duke përdorur etiketën, mund të vendosni një kornizë të vetme në një dokument të rregullt HTML. Për më tepër, një enë... nuk nevojitet këtu.

Kërkohet etiketa mbyllëse!

Atributet

ALING. Përcakton llojin e shtrirjes. Pranon vlerat "majtas", "qendër", "djathtas".

LARTËSIA. Përcakton lartësinë e kornizës në pixel

GJERËSIA. Përcakton gjerësinë e kornizës në pixel.

SRC, GJERËSIA MARGJINA, LARTËSIA MARGJINA, LËVIZJA, KUFIZË E KUADRITIT, BORDER, BORDER NGJYRA, EMRI . Ngjashëm me ato të diskutuara më parë.

vsspace. Vendos kufijtë në krye dhe në fund në pjesën e jashtme të iframe

hspace. Vendos kufijtë në anët jashtë iframe

gjerësia e margjinës. Përcakton sasinë e mbushjes përgjatë skajeve të majtë dhe të djathtë brenda iframit; duhet të jetë i barabartë ose më i madh se 1.

lartësia margjinale. Përcakton sasinë e mbushjes përgjatë skajeve të sipërme dhe të poshtme brenda iframit; duhet të jetë i barabartë ose më i madh se 1.

rrotullimi. Përcakton nëse një shirit lëvizës do të shfaqet në iframe; vlera mund të jetë "po", "jo" ose "auto". Vlera e paracaktuar për dokumentet normale është automatike.

titullin. Teksti i këshillës së veglave.

Etiketë

Përcakton se çfarë do të shfaqet në dritaren e shfletuesit nëse nuk mbështet korniza.

Shfletuesi juaj nuk mbështet korniza lundruese!

Si të ngarkoni një kornizë pa skedarë shtesë? Për të ngarkuar një kornizë pa përdorur skedarë të jashtëm , duhet të vendosni kodin HTML të kornizës në variabël dhe më pas të specifikoni “javascript:parent.".

emri i ndryshores

var varFrame = "Kodi HTML";

...

Problemi i shiritit të adresës me strukturën e faqes së kornizës

...

Kur përdorni korniza, një sajt përdor një faqe që tregon vendndodhjen e kornizave. Këtu është një shembull i një faqeje të tillë: Pas ngarkimit të kësaj faqeje, informacioni ngarkohet në korniza. Të gjitha kalimet e përdoruesve nëpër faqet e sajtit ndodhin brenda këtyre kornizave. NË shiriti i adresave vetëm rruga për të shfaqet gjithmonë

faqja kryesore , e cila nuk ndryshon gjatë tranzicionit. Vizitori nuk e di se ku ndodhet për momentin. Nëse vizitori menjëherë gabon faqja kryesore faqe (për shembull, nga një motor kërkimi), atëherë kjo nuk çon në rindërtim strukturën e përgjithshme korniza. Kjo është arsyeja që pronari i faqes nuk mund të japë adresën

faqe brenda

Më parë, u konsiderua një shembull i një strukture kornizë. Ne do të shqyrtojmë mënyra të ndryshme zgjidhja e këtij problemi është në të.

Ideja është si më poshtë: kur ngarkojmë një faqe që përmban një pjesë informacioni, ne do të kontrollojmë mjedisin e faqes dhe, nëse struktura e kërkuar e kornizës mungon, do ta krijojmë atë duke përdorur një skript.

Tre raste janë të mundshme:

vizitori ka vizituar një faqe që përmban një strukturë kornizë;

vizitori vizitoi një nga faqet e informacionit;

vizitori zbret në një faqe me një menu navigimi.

Në rastin e parë, nuk kërkohet asnjë veprim pas përfundimit të kontrollit. E dyta dhe e treta janë pothuajse identike, kështu që më tej do të shqyrtojmë vetëm rastin e dytë.

Dhe kështu, vizitori përfundon "aty ku nuk duhet". Në fillim të faqes ne futim një skript që do të krijojë një strukturë kornizë.

Zgjidhja mund të zbatohet si në anën e klientit ashtu edhe në anën e serverit. Disavantazhi kryesor i zbatimit nga ana e klientit është i dukshëm - varësia nga aftësitë dhe cilësimet e klientit. Për shembull, ekzekutimi i skripteve në kompjuterin e përdoruesit është i ndaluar. Opsioni i dytë nuk do të funksionojë nëse serveri nuk mbështet PHP.

Zgjidhje JavaScript.

Ka një kufizim me këtë qasje - jo të gjithë shfletuesit mbështesin JavaScript, dhe në disa raste përdoruesit çaktivizojnë vetë skriptet.

Së pari, kontrollojmë mjedisin e faqes dhe më pas, nëse struktura e kërkuar e kornizës nuk ekziston, ne e krijojmë atë.

Le të krijojmë një skedar kornizë.js :

Nëse (window.name != "main") (window.name = "rrënjë"; document.write (""); document.write (""); document.write (""); document.write ("" ;)

Së pari kontrollojmë emrin e dritares në të cilën është ngarkuar faqja: if (window.name != "kryesore"). Nëse emri i dritares dhe emri i kornizës nuk përputhen, atëherë duhet të krijoni një strukturë kornizë. Kjo bëhet në mënyrë dinamike duke përdorur metodën e shkrimit të objektit të dokumentit.

Ne lidhim një skedar në secilën faqe të faqes kornizë.js. Tani faqet e faqes do të kenë strukturën e mëposhtme:

... ...

Me këtë qasje për zgjidhjen e këtij problemi, nevoja për një skedar që përmban strukturën e kornizës zhduket.

Zgjidhja PHP

Me këtë qasje, faqja do të bëhet e aksesueshme më shumë vizitorët.

Ne do të kontrollojmë mjedisin e faqes ndryshe (jo njësoj si kur përdorim JavaScript). Do ta ngarkojmë dokumentin në një kornizë me parametrin frames=yes. Kur hapim faqen, ne kontrollojmë këtë parametër dhe, nëse është e nevojshme, krijojmë në mënyrë dinamike një strukturë kornizë. Më poshtë është kodi që është përgjegjës për këtë.

Vendosja e kodit në një skedar korniza.php. Tani ju duhet ta lidhni atë me çdo faqe të faqes. Më poshtë është një shembull i një faqeje të tillë.

korniza...

NË në këtë rast, si me zbatimin në anën e klientit, nuk ka nevojë të krijohet veçmas një dokument HTML që përshkruan strukturën e kornizës.

.