Rėmo įdėjimas. Rėmelių kūrimas

Svetainės skyriai

Redaktoriaus pasirinkimas:

Reklama

namai - Maršrutizatoriaus nustatymas

Rėmo įdėjimas. Rėmelių kūrimas

Rėmų panaudojimo sritys

HTML dokumentų kūrėjai turi gana platų informacijos pateikimo puslapiuose formų pasirinkimą. Tekstinę ir grafinę informaciją galima rūšiuoti ir tvarkyti naudojant sąrašus, lenteles arba tiesiog naudojant lygiavimo parametrus, nustatant horizontalias linijas ir skirstant į pastraipas. Kartais šių funkcijų nepakanka ir tuomet tenka padalyti naršyklės langą į atskiras sritis arba rėmelius. Daugelyje HTML kalbos aprašymų rusų kalba vietoj termino rėmeliai vartojamas terminas rėmeliai. Abiejų terminų vartojimo dažnis yra maždaug toks pat.

Rėmelio struktūros pasirinkimas informacijai rodyti WWW yra pagrįstas šiais atvejais:

prireikus valdyti dokumentų įkėlimą į vieną iš naršyklės peržiūros lango posričių, dirbant kitame posrityje;
tam tikroje peržiūros lango vietoje rasti informaciją, kuri visada turi būti ekrane, neatsižvelgiant į kitų ekrano posričių turinį;
pateikti informaciją, kuri patogiai išdėstyta keliose gretimose lango dalyse, kurių kiekvieną galima peržiūrėti atskirai.

Pateiktas sąrašas neapima visų galimų atvejų, kai gali būti taikomi rėmeliai, tačiau yra rekomendacinio pobūdžio.

Pirmiausia apsvarstykime tipiškus rėmelių panaudojimo būdus naudodami realių HTML dokumentų pavyzdžius, o tada pereikime prie dokumentų, kuriuose yra rėmelių, kūrimo taisyklių.

Fig. 5.1 paveiksle pavaizduotas vienas iš „Finmarket“ agentūros, kurios specializacija yra Rusijos finansų ir akcijų rinkų informacijos teikimas, HTML puslapių.

Ryžiai. 5.1. Tipiškas žiniatinklio dokumentas su rėmelio struktūra

Šis puslapis padalija naršyklės langą į tris rėmelius. Apatinė lango dalis užima 20% viso lango aukščio ir yra nuolatinė informacija, kuri šiuo atveju yra grafinis meniu, leidžiantis bet kada pasiekti svarbiausias dalis. Šis rėmelis negali keisti savo dydžio pagal vartotojo komandas ir neturi slinkties juostų. Viršutinė lango dalis (kuri yra 80% aukščio) horizontaliai padalinta į du rėmus. Kairiajame rėmelyje yra dokumentų, kuriuos gali peržiūrėti vartotojas, turinys. Dešinysis rėmelis, kuris užima didžiąją dalį peržiūros lango, skirtas patiems dokumentams rodyti. Iš pradžių įkeliant, šie du rėmeliai padalija naršyklės langą horizontaliai santykiu nuo 15% iki 85%. Šį santykį vartotojas gali keisti žiūrėdamas, o tai leidžia pasirinkti optimalius rėmelių dydžius, atsižvelgiant į įkeltų dokumentų turinį. Kiekvienas iš šių rėmelių turi savo slinkties juostą, leidžiančią peržiūrėti visą rėmelio turinį, neatsižvelgiant į paties rėmelio dydį, visą naršyklės langą ar naudojamus šriftus. Kai kairiajame rėmelyje pasirinksite bet kurią nuorodą, atitinkamas dokumentas bus įkeltas į dešinįjį rėmelį. Ši struktūra leidžia ekrane vienu metu matyti ir dokumentų turinį, ir pasirinkto dokumento turinį.

Čia be paaiškinimo yra HTML kodo, naudojamo kuriant tokios struktūros dokumentą, fragmentas:

Šiame pavyzdyje parodytas tipiškiausias rėmelių struktūrų panaudojimas, kai vienas rėmelis naudojamas kaip dokumentų turinys, o kitas naudojamas jų turiniui įkelti. Tokios problemos sprendimas nenaudojant rėmelių dažniausiai atliekamas taip. Viename iš puslapių yra turinys, sudarytas iš nuorodų į kitus dokumentus arba atskirus jų fragmentus. Paspaudus tokią nuorodą turinys dingsta, o į jo vietą įkeliamas reikalingas dokumentas, kurį perskaičius dažniausiai reikia grįžti į turinį. Naudojant rėmelius, šis grąžinimas tampa nereikalingas, nes turinys visada yra ekrano dalyje.

Jį galite rasti internete populiaraus Sankt Peterburgo adresų ir telefonų žinyno „Visas Peterburgas“ elektroninio leidimo svetainė.

Elektroninę katalogo versiją rasite adresu http://www.allpetersburg.ru ir leidžia rasti reikiamą informaciją pagal vartotojų užklausas. Šis dokumento puslapis taip pat turi rėmelio struktūrą ir susideda iš dviejų kadrų, kurių pirmasis yra 100 pikselių pločio, o antrasis užima visą likusį peržiūros srities plotį. Kairėje pusėje esantis rėmelis naudojamas grafiniam meniu, kuris nuolat yra ekrane, taip pat yra „Nevalink“ įmonės logotipas. Antrame rėmelyje yra dokumentas, kuris šiuo atveju yra vartotojo užklausos forma. Šio puslapio struktūrą apibrėžia šis HTML kodas:

Rėmeliai labai panašūs į lenteles – jie abu suskaido naršyklės langą į stačiakampes sritis, kuriose yra tam tikra informacija. Tačiau rėmelių pagalba galite išspręsti ne tik dokumentų puslapių formatavimo problemą, bet ir organizuoti jų tarpusavio sąveiką. Esminis skirtumas tarp rėmelių ir lentelių yra tas, kad kiekvienas rėmelis turi turėti savo atskirą HTML dokumentą, tačiau visų lentelės langelių turinys visada yra to paties dokumento dalis. Be to, kadre rodomas puslapis gali slinkti, kai žiūrima nepriklausomai nuo kitų. Kiekvienas rėmelis iš esmės yra atskira „mini naršyklė“. Skirtingai nuo rėmelių, kurių visa struktūra visada pateikiama ekrane, lentelės gali visiškai netilpti į langą ir gali būti peržiūrimos tik dalimis. Iš to išplaukia, kad jei HTML lentelėse bendras langelių skaičius yra praktiškai neribotas ir gali siekti kelis šimtus, tai kadrų skaičius dokumente dažniausiai neviršija kelių vienetų.

Patarimas

Jei reikia tik formatuoti dokumentą, pakanka apsiriboti lentelių naudojimu. Jei reikia išspręsti sudėtingesnes problemas, pavyzdžiui, organizuoti sąveiką tarp langų posritių arba sukurti nuolatines ekrane esančias sritis, patogu naudoti rėmelius.

Galiausiai dokumento struktūros – lentelės ar rėmelio – pasirinkimas priklauso nuo daugelio veiksnių ir negali būti vienareikšmiškai iš anksto nustatytas.

Taip pat yrapuslapiai, kurie atrodo sukurti panašiai kaip ankstesni. Pavyzdžiui, galite paimti puslapis iš labai populiaraus visame pasaulyje programinės įrangos produktų, skirtų darbui su internetu, kolekcijos. Serverio adresas http://www.tucows.com. Atminkite, kad serverio pavadinimą lėmė santrumpa, kilusi iš viso kolekcijos pavadinimo santrumpos – The Ultimate Collection of Winsock Software. Kadangi santrumpa tucows sutampa su fraze dvi karvės (dvi karvės), serverio puslapiuose dažnai pateikiami karvių vaizdai, o programinės įrangos produktų įvertinimas apskaičiuojamas pagal mūšių skaičių („Moo“) ir pavaizduotas grafiškai. kaip atitinkamo skaičiaus karvių eilė. Dauguma serverio puslapių yra sukurti taip pat – kairėje lango pusėje yra galimų skyrių sąrašas, o dešinėje – programinės įrangos produktų, skirtų pasirinktai sekcijai, sąrašas. Iš pirmo žvilgsnio dokumento struktūra turėtų atrodyti maždaug taip pat, kaip ir ankstesniuose pavyzdžiuose. Tačiau šiame dokumente rėmeliai nenaudojami! Šis puslapis sukurtas naudojant lentelę, kurią sudaro tik viena eilutė su dviem langeliais. Lentelėje nėra rėmelių ir ji naudojama tik puslapio formatavimui. Įspūdis, kad ekranas vertikaliai padalytas į dvi dalis, sukuriamas naudojant fono grafiką, kuriame yra vertikali linija, o ne lentelės tinklelis. Tai galite patikrinti peržiūrėdami puslapį neįkeldami vaizdų. Matyt, čia naudojama lentelė dėl didesnio dokumentų prieinamumo, nes rėmeliai neleidžia rodyti visose naršyklėse.

Šio metodo trūkumas šiuo atveju yra būtinybė pakartoti visą skyrių sąrašą (kairėje puslapio pusėje) kiekviename dokumente, o tai šiek tiek padidina failo dydį.

Aukščiau pateiktų pavyzdžių palyginimas rodo, kad lentelių ir rėmelių naudojimas kartais gali būti keičiamas ir nulemtas kūrėjų pageidavimų. Atkreipkite dėmesį, kad dažnai žiūrint į puslapį, kuriame rodomas dokumentas, neįmanoma nustatyti, kaip jis sukurtas. Galutiniam vartotojui nereikia žinoti vidinės dokumento struktūros, tačiau kuriant savo internetinius puslapius labai praverstų susipažinti su esamų dokumentų šaltinio kodu. Pirmajame pavyzdyje (žr. 5.1 pav.) iš karto matoma dokumento rėmelio struktūra – dviejų vertikalių slinkties juostų buvimas jau nulemia atskirų kadrų buvimą. Toliau pateikti du pavyzdžiai yra labai panašūs savo išvaizda ir neįmanoma nustatyti, kad pirmasis iš jų pastatytas naudojant rėmus, o antrasis - naudojant lenteles. Skirtumai atsiras tik dirbant su jais. Telefonų katalogo pavyzdyje slenkant dokumentą kairioji lango dalis išliks vietoje, o tai įmanoma tik esant rėmelio struktūrai. Toliau pateiktame pavyzdyje (programinės įrangos produktų rinkinys) slinkimas perkelia visą lango turinį.

Dokumento struktūrą galite peržiūrėti dirbdami su Netscape naršykle naudodami meniu Rodinys elementą Puslapio informacija (Netscape naršyklės 3.x versijose šis meniu punktas vadinosi Document Info) (5.2 pav.).

Ryžiai. 5. 2 . „Netscape“ naršyklės peržiūros meniu

Be to, visada galite peržiūrėti viso dokumento HTML šaltinio kodą naudodami meniu Rodinys elementą Puslapio šaltinis (arba dešiniojo pelės klavišo kontekstinio meniu elementą View Frame Source, norėdami peržiūrėti įkelto dokumento HTML kodą pasirinktas kadras).

Patarimas

Neturėtumėte be reikalo piktnaudžiauti rėmelių naudojimu, o jų skaičius neturėtų viršyti trijų ar keturių.

Dažnai tikruose interneto puslapiuose galite pamatyti šiuos rėmelių naudojimo atvejus:du gretimi rėmeliai naudojami dokumentams, kuriuos patogu peržiūrėti vienu metu ir palyginti, įkelti. Kiekviename iš dviejų į rėmelius įkeltų dokumentų informacijai pateikti naudojama lentelės forma. Dėl tokio duomenų organizavimo kiekvieną iš dviejų lentelių galima peržiūrėti (arba atspausdinti) atskirai arba palyginti su kita.

Visi šioje dalyje pateikti pavyzdžiai yra paimti iš populiarių WWW serverių puslapių ir, galbūt, gali būti naudojami kaip rėmelių naudojimo HTML dokumentuose pavyzdžiai.

Tolesniuose šio skyriaus skyriuose aprašomos dokumentų su rėmeliais rašymo taisyklės.

Rėmelių aprašymo taisyklės

Dabar pereikime prie žymių, naudojamų dokumentams su rėmelio struktūromis, rašymo taisyklėmis.

Pirmiausia pažvelkime į visą HTML kodą, kuris sukuria dokumentą su vidutinio sudėtingumo rėmeliais:

Šiuo pavyzdžiu sukuriamas įrėmintas puslapis, parodytas paveikslėlyje. 5.3. Kaip matote, šis HTML kodas apibrėžia keturis kadrus. Viršutinis rėmelis apima visą puslapio plotį ir yra antraštė. Toliau yra du centriniai rėmeliai, vienas iš kurių yra kairėje pusėje ir užima 25 procentus ekrano pločio, o antrasis – likusią erdvę. Paskutinis, ketvirtas kadras užima apatinį ekrano ketvirtį. Į kiekvieną kadrą įkeliamas atskiras HTML dokumentas, kurio pavadinimą lemia SRC parametras.

Kaip matyti iš pavyzdžio, žymės naudojamos kadrų struktūrai apibūdinti , Ir . Tai atrodo taip:

Viskas dedama tarp etikečių , bus rodomas naršyklėse, kurios neturi rėmelių palaikymo galimybių. Kadrą suvokiančios naršyklės nepaisys visos informacijos tarp šių žymų.

Atminkite, kad realiame gyvenime HTML puslapių kūrėjai dažnai nenaudoja žymos galimybių

Antrajame faile, pavadintame frameset.htm, yra šis kodas:

Šiuo atveju viršutinė ir apatinė eilutės elgiasi taip pat. Tačiau antroji eilutė dabar yra paprastas rėmelis, kaip ir kiti. Tačiau SRC parametro nurodytas failas frameset.htm apibrėžia savo rėmo struktūrą. Dėl to ekranas bus rodomas lygiai taip pat, kaip ir pirminiame pavyzdyje.

Pastaba

Iš esmės galima sukurti įdėtas struktūras , naudojant žymes , kurie nurodo tą patį failą, aprašantį rėmelio struktūrą, tačiau to daryti nereikėtų. Tokia situacija sukels begalinį pasikartojimą ir neleis toliau dirbti. Kai kurios naršyklės kontroliuoja šią situaciją ir apsaugo nuo gedimo galimybės. Jei į SRC įrašytas adresas sutampa su vienu iš ankstesnių adresų kadrų hierarchijoje, jis ignoruojamas, tarsi SRC parametro iš viso nebūtų.

Patarimas

Įdėtųjų struktūrų naudojimas įvairiais deriniais galima sukurti beveik bet kokį įsivaizduojamą rėmo tinklelį. Tačiau nepamirškite sukurti patogios sąsajos, o ne tik pademonstruoti savo gebėjimą dirbti su rėmeliais.

Štai įprasto stačiakampio rėmelių tinklelio kūrimo pavyzdys:

Šiame pavyzdyje sukuriamas rėmelio tinklelis su dviem eilėmis ir trimis stulpeliais (5.6 pav.). Kadangi yra apibrėžtas šešių kadrų rinkinys, taip pat būtina apibrėžti šešis atskirus kadrus . Atkreipkite dėmesį, kad kadrų apibrėžimai pateikiami eilutė po eilutės. Tai yra, pirmoji žyma apibrėžia pirmojo stulpelio turinį pirmoje eilutėje, antrasis apibrėžia antrojo stulpelio turinį, o trečiasis baigia apibrėžti paskutinio pirmosios eilutės stulpelio duomenis. Paskutiniai trys kadrai užpildo antrosios eilutės stulpelius.

Ryžiai. 5. 6 . 2 x 3 rėmelių tinklelis

Taip pat atkreipkite dėmesį, kad COLS parametro procentinių reikšmių suma yra ne 100, o tik 90 procentų. Čia nėra nieko blogo, nes naršyklė automatiškai proporcingai pakeis stulpelių plotį, kad pašalintų šį prieštaravimą.

Navigacijos ypatybės naudojant rėmelius

Darbas su dokumentais, turinčiais rėmo struktūrą, turi tam tikrų funkcijų, kurias reikia žinoti. Šios JB savybės daugiausia pasireiškia navigacijoje įkeliant dokumentus. Dideli navigacijos skirtumai būdingi ne tik skirtingoms naršyklėms, bet ir skirtingoms tos pačios naršyklės versijoms.

„Netscape“ naršyklės 3.x ir 4.x versijos, kai spustelėsite mygtuką Atgal, grąžina dokumentą į paskutinį veiksmą. Tie patys veiksmai bus atliekami, jei iškviečiant kontekstinį meniu bet kuriame kadre pasirinktas elementas Atgal. Priminsime, kad kontekstinis meniu iškviečiamas paspaudus dešinįjį pelės mygtuką. Taigi, nepaisant to, kuriame kadre buvo iškviestas kontekstinis meniu, paspaudus mygtuką Atgal, paskutinė operacija bus atšaukta, net jei ji buvo atlikta kitame kadre.

Netscape 2.x naršyklė veikė visiškai kitaip. Kontekstiniame meniu yra komanda Atgal į kadrą, kuri grąžina dokumentą į dabartinį kadrą, o ne anuliuoja paskutinę operaciją.

Bet kurioje „Netscape“ versijoje galite pažymėti dokumentą, esantį pasirinktame rėmelyje. Norėdami tai padaryti, aukščiau minėtame kontekstiniame meniu turite pasirinkti režimą Pridėti žymę. Jei pagrindiniame naršyklės meniu pasirinksite režimą Pridėti žymę, dokumente bus sukurta žyma su rėmelio struktūros aprašymu. , kuris tiksliai nenurodys konkretaus kadro. Galimybė sukurti žymą atskiro rėmelio dokumente nereiškia, kad ir toliau naudojant šią žymę atsiras ta pati rėmelio struktūra. Žyme nurodytas dokumentas bus įkeltas į visą langą už rėmelio struktūros ribų.

Sąveika tarp kadrų

Paprasčiausias informacijos peržiūros būdas WWW susideda iš puslapių skaitymo ir nuorodų sekimo, kai dabartinis dokumentas naršyklės lange pakeičiamas kitu dokumentu. Dirbdami su rėmeliais galite organizuoti patogesnę dokumentų įkėlimo schemą.

Sąveika tarp kadrų – tai galimybė įkelti dokumentus į pasirinktą kadrą naudojant komandas iš kito kadro. Šiuo tikslu naudojamas TARGET žymos parametras<А>. Šis parametras nurodo rėmelio arba naršyklės lango, į kurį bus įkeliamas šia nuoroda nurodytas dokumentas, pavadinimą. Pagal numatytuosius nustatymus, jei parametro TARGET nėra, dokumentas įkeliamas į dabartinį rėmelį (arba langą). Šios numatytosios nuostatos gali būti nepaisomos nurodant žymą su norima parametro TARGET reikšme. Nurodykite numatytojo rėmelio pavadinimą, į kurį norite įkelti, yra labai naudinga, kai daug nuorodų turi nukreipti dokumentus į konkretų rėmelį. Tipiška situacija, kai viename kadre yra turinys, nuorodos, iš kurių į gretimą rėmelį įkeliami atitinkami dokumentai, buvo parodyta šio skyriaus pradžioje (5.1 pav.). Šiam pavyzdžiui skyriuje failą pavadinimu LIST.htm, patartina parašyti šią eilutę: . Priešingu atveju kiekvienai nuorodai turėsite nurodyti TARGET parametrą.

Rėmelių pavadinimai turi prasidėti lotyniška raide arba skaičiumi. Pavadinimas gali būti esamo lango ar rėmelio pavadinimas arba gali būti nurodytas naujas pavadinimas, pagal kurį bus atidarytas naujas langas. Yra keturi rezervuoti pavadinimai, kurie nurodę atlieka specialius veiksmus. Šie pavadinimai prasideda pabraukimu (_): „_blank“, „_self“, „_parent“ ir „_top“. Bet koks kitas pavadinimas, prasidedantis apatiniu brūkšniu, negalioja.

TARGET="_blank" - užtikrina, kad dokumentas būtų įkeltas į naują langą. Šis langas neturės pavadinimo, todėl į jį nebus galima įkelti kito dokumento.

TARGET="_self" - dokumentas bus įkeltas į esamą rėmelį (arba langą). Šis įrašas turėtų būti naudojamas norint apeiti numatytąjį, nurodytą žymoje .

TARGET="_top" - sukelia dokumento įkėlimą į visą langą. Jei dokumentas jau yra visame lange, ši reikšmė turi tokį patį poveikį kaip"_savarankiškai".

TARGET="_parent" – dokumentas įkeliamas į sritį, kurią užima dabartinio kadro pirminis kadras. Jei pirminio rėmelio nėra, ši parametro reikšmė turi tokį patį poveikį kaip"_top" .

Pastaba

Kai kurie HTML šaltiniai klaidingai teigia, kad jei rėmelis neturi pirminio elemento, reikšmė „_parent“ atitinka „_self“. Šis teiginys ne visada teisingas.

Įspėjimas

Rezervuotų rėmelių pavadinimai „_blank“, „_self“, „_parent“ ir „_top“ turi būti rašomi mažosiomis lotyniškomis raidėmis. Atminkite, kad toks reiklumas būdingas tik „Netscape“. „Microsoft Internet Explorer“ bet kuriuo atveju teisingai atpažįsta rezervuotus pavadinimus.

Čia pateikiami rėmelių ir atskirų naršyklės langų sąveikos pavyzdžiai. Apsvarstykite šį HTML kodą:

Rėmelių naudojimas

Šiame HTML dokumente aprašoma struktūra, susidedanti iš trijų kadrų, pavadintų „A“, „B“ ir „C“. Kadrų pavadinimų vėliau reikės norint organizuoti ryšius tarp kadrų. Atminkite, kad šiame pavyzdyje nebus jokių nuorodų į rėmelį pavadinimu „A“, todėl jis galėjo likti be pavadinimo. Kai įkeliate aukščiau pateiktą dokumentą į naršyklę, rėmeliuose bus rodoma informacija, esanti failuose, identifikuotuose SRC parametru. Kadras "A" gaus frame_a.htm failo turinį, o likusieji du kadrai gaus duomenis iš tuščio.htm failo, kuriame nėra duomenų, kuriuos būtų galima rodyti. Dar kartą priminsime, kad HTML dokumentas, aprašantis rėmelių struktūrą, neturi skyrelio .

Čia yra failo, pavadinto frame_a.htm, tekstas:

A kadro dokumentas

D

4. Dokumento įkėlimas naujame lange

5. Dokumento įkėlimas per visą langą

6. Dokumento įkėlimas į esamą kadrą

Šis dokumentas yra pilnas HTML dokumentas su skyriais Ir ir, savo ruožtu, turi nuorodas į failą test.htm, esantį tame pačiame kataloge kaip ir failas frame_a.htm.

Test.htm failo tekstas yra labai paprastas:

Bandomasis dokumentas

Bandomasis dokumento tekstas

Failas frame_a.htm, kurio turinys buvo įkeltas į kadrą "A", turi šešias nuorodas į tą patį failą test.htm su skirtingomis parametro TARGET reikšmėmis.

Apsvarstykite veiksmus, kurie bus atlikti diegiant šias nuorodas. Pirmoji nuoroda su reikšme TARGET="B" įkels failą test.htm į rėmelį, pavadintą "in". Atminkite, kad įdiegus bet kurią iš šešių nuorodų, „Netscape“ naršyklė automatiškai nuspalvins visas šešias skirtingas spalvas, nes jos nukreipia į tą patį failą. „Microsoft Internet Explorer“ pažymi tik tas nuorodas, kurios iš tikrųjų yra įdiegtos.

Antroji nuoroda padarys tą patį su „C“ rėmeliu. Iš pradžių „B“ ir „C“ rėmeliuose nieko nėra (tiksliau, įkeliamas tuščio failo tuščias.htm turinys). Pirmosios ir antrosios nuorodų įgyvendinimas užpildys šiuos rėmus.

Trečioji nuoroda su reikšme TARGET=MD" sukurs naują naršyklės langą pavadinimu "D" ir į jį įkels failą test.htm. Atkreipkite dėmesį, kad šios nuorodos rašymo forma niekuo nesiskiria nuo pirmosios du Skirtumas tas, kad pirmajame Dviem atvejais buvo pateikiamos nuorodos į esamus rėmus, kurių pavadinimai buvo apibrėžti faile su rėmelio struktūra, o šiuo atveju nuoroda buvo pateikta į neegzistuojantį objektą. ši nuoroda daroma bent vieną kartą, tada bus sukurtas langas pavadinimu „D“ ir pakartotinai spustelėjus nuorodą, duomenys bus tik perkraunami į dabar esantį langą „D“ Žinoma, vartotojas gali jį uždaryti bet kuriuo metu laiko ir sukurkite jį iš naujo pasirinkę šią nuorodą.5.7 paveiksle parodyta situacija įdiegus pirmąsias tris nuorodas Prisiminkite, kad langų vietą ir dydžius ekrane nustato vartotojas.

Ryžiai. 5. 7 . Situacija, gauta nuosekliai įdiegus pirmąsias tris kairiajame kadre esančias nuorodas

Penktoji nuoroda su reikšme TARGET="_top" įkels dokumentą visame lange, o ne visoje rėmelio struktūroje. Naudojant šią parametro TARGET reikšmę naujas langas nesukuriamas. Grįžti į rėmo struktūrą galima paspaudus mygtuką Atgal.

Pastaba

Rėmelių ar naršyklės langų pavadinimų nereikėtų painioti su atsisiųstų dokumentų pavadinimais. Žiūrint rėmelių pavadinimai niekur nesimato, jie reikalingi tik sąveikai organizuoti, todėl yra paslėpti nuo vartotojo. Juos galite matyti tik peržiūrėdami HTML failų šaltinio tekstą.

Patarimas

Primename, kad atsisiųstų dokumentų pavadinimus nurodo žyma . Jei dokumentas įkeliamas per visą langą, jo pavadinimas rodomas pačiame naršyklės lango viršuje. Jei dokumentas įkeliamas į rėmelį, jo pavadinimas niekur nerodomas, o dokumento pavadinimas, kuriame aprašoma dokumento rėmo struktūra, vis tiek bus viršutinėje lango dalyje. Todėl dokumentų, skirtų peržiūrėti rėmeliuose, pavadinimai nėra labai svarbūs. Pavyzdžiui, pav. 5.7 tas pats dokumentas įkeliamas į „B“ ir „C“ rėmelius, taip pat į atskirą langą pavadinimu „D“, o dokumento pavadinimas matomas tik lange „D“. Tačiau vargu ar rekomenduojama praleisti į rėmelius įkeltų dokumentų pavadinimus, nes jie gali atsirasti, pavyzdžiui, Žymių sąraše kuriant žymę dokumentui, esančiam rėmelyje arba žiūrimų dokumentų sąraše.</span> </i></p> <p>Pažvelkime į kitą įdomų rėmelių ir naršyklės langų sąveikos organizavimo pavyzdį. Tebūnie pagrindinio įkelto HTML dokumento tekstas:</p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Langų pavadinimų naudojimas

Dokumentas su rėmelio struktūra į naują langą

Rėmelių naudojimas

Atkreipkite dėmesį, kad jei pagrindinis dokumentas yra standartinis HTML dokumentas, tai iš pagrindinio dokumento nuorodos įkeltame faile frame.htm yra rėmelio struktūra ir nuorodos į tuščią.htm failą.

Įkėlus pagrindinį dokumentą, naršyklės langas atrodys taip, kaip parodyta pav. 5.8 (kairysis langas). Visas dokumentas susideda iš dviejų nuorodų. Sekime pirmąją nuorodą. Bus sukurtas naujas langas pavadinimu “D”, kuriame atsiras test.htm failo tekstas (5.8 pav., dešinysis langas). Pakartojant šią nuorodą, duomenys bus įkelti tik lange „D“.

Ryžiai. 5.8. Sąveikaujančių rėminių langų pavyzdys

Sekime antrąją nuorodą. Bus suformuotas naujas langas be pavadinimo, į kurį bus įkeltas frame.htm failas, apibrėžiantis du rėmelius pavadinimais “C” ir “D” (5.8 pav., apatinis langas). Abiejuose rėmeliuose nieko nėra (tiksliau įkeliamas tuščias dokumentas empty.htm). Atkreipkite dėmesį, kad dabar yra atidarytas langas pavadinimu „D“ ir langas su rėmeliais, kurių vienas taip pat pavadintas „D“. Dar kartą sekime pirmąją nuorodą. Skirtingai nei pirmuoju atveju, duomenys bus įkeliami ne į langą „D“, o į rėmelį, pavadintą „D“. Visų aprašytų veiksmų rezultatas parodytas fig. 5.8.

Pastaba

Atsidarančių langų išvaizda ir jų turinys kartais gali priklausyti net nuo vartotojo veiksmų eilės. Darbas su dokumentais, kurių elgesį sunku nuspėti, dažniausiai sukelia pateisinamą vartotojo susierzinimą ir rodo, kad kūrėjai nepakankamai apgalvojo duomenų struktūrą.

Jei pakeisite veiksmų tvarką, t. y. pirmiausia vykdysite antrą nuorodą, o po to pirmą, langas pavadinimu „D“ iš viso nepasirodys! Taip atsitiks, nes įdiegus antrąją nuorodą bus sukurtas rėmelis pavadinimu „D“ ir nereikės atidaryti naujo lango pirmai nuorodai.

Šis pavyzdys visai nėra sektinas pavyzdys, o tik parodo galimą sąveikos organizavimo sudėtingumą. Priešingai, reikėtų stengtis be reikalo neapsunkinti duomenų organizavimo, juo labiau nesukurti situacijų, kai rezultatas keičiasi priklausomai nuo vartotojo veiksmų eiliškumo.

Patarimas

Venkite susidūrimų rėmelių ir langų pavadinimuose. Nors formaliai nėra uždrausta turėti rėmelių su tais pačiais pavadinimais, tai gali sukelti painiavą.

Įspėjimas

Rėmelių ir langų pavadinimai lyginami naudojant didžiąsias ir mažąsias raides. Taigi, pavyzdžiui, rėmeliai, pavadinti „frame_1“ ir „Frame_1“, skirsis.

Sudėtingesnės sąveikos tarp kadrų pavyzdžiai

Gana paprasti tipiniai kadrų sąveikos pavyzdžiai buvo aptarti aukščiau. Svarstytos užduotys sukurti naujus langus, pakeisti atskirų rėmelių turinį, taip pat rodyti dokumentą pilname lange su visos rėmo struktūros sunaikinimu. Pateikiami pasirinktinių rėmelių pavadinimų, taip pat rezervuotų pavadinimų „_blank“, „_self“ ir „_top“ naudojimo pavyzdžiai. Paskutinio rezervuoto pavadinimo „_parent“ naudojimas yra sudėtingesnis ir bus aprašytas toliau.

Šiame skyriuje bus nagrinėjamos sudėtingesnės sąveikos tarp kadrų parinktys. Visų pirma bus pakeistas kelių gretimų kadrų turinys.

Vienas iš dažniausių rėmelių panaudojimo būdų, apie kurį jau buvo minėta šiame skyriuje, yra dviejų rėmelių atvejis, iš kurių viename yra nuorodų sąrašas, o kitame – patys dokumentai (5.1 pav.).

Pabandykime išplėsti problemos formuluotę. Tarkime, kad norite ekrane parodyti gana didelio dokumento, susidedančio iš skyrių, suskirstytų į skyrius, turinį. Tipiškas pavyzdys yra techninė literatūra tam tikra tema. Apibūdinkime norimą tokio dokumento pateikimą ekrane. Padalinkime ekraną į tris rėmelius, iš kurių viename bus knygos skyrių sąrašas, antrame – pasirinkto skyriaus skyrių sąrašas, trečiame – pasirinkto skyriaus tekstas. Kai pasirenkate nuorodą antrame kadre, trečiojo kadro turinys turėtų pasikeisti. Šio reikalavimo įgyvendinimas yra trivialus. Kai pasirenkate nuorodą pirmame kadre, antrojo ir trečiojo kadrų turinys turėtų keistis vienu metu. Iš pirmo žvilgsnio šios užduoties įgyvendinimas HTML yra neįmanomas (nenaudojant programavimo JavaScript ar kt.), nes vykdant nuorodą įkeliamas tik vienas dokumentas, o ne du ar daugiau. Nepaisant to, šios problemos sprendimas yra visiškai įmanomas.

Leiskite mums parodyti galimą tokios problemos sprendimą naudodami paprastą pavyzdį. Tarkime, kad norite ekrane parodyti tris rėmelius ir į juos įkelti keletą dokumentų. Iškelkime užduotį kiekviename iš šių kadrų sukurti nuorodas, kurias įgyvendinus, pavyzdžiui, buvo pakeistas dviejų kadrų turinys. Tegul pirmasis rėmas užima 50% lango pločio ir 100% aukščio ir pastatykite jį kairėje lango pusėje. Dešinė lango pusė taip pat padalyta horizontaliai per pusę ir yra dar du rėmeliai. Ši struktūra apibūdinama tokiu kodu:

Naudojant šį HTML kodą bus sukurta reikiama struktūra, tačiau problemos išspręsti neįmanoma. Būtina pašalinti įdėtą struktūrą į atskirą failą ir šiame HTML kode aprašykite rėmelį, nurodantį sukurtą failą. Tada pradinio dokumento tekstas atrodys taip:

Sąveikos tarp kadrų pavyzdys

Sukurtas failas su įdėta struktūra turi pavadinimą 1_2.htm ir jame yra šis kodas:

1-2

Iš pirmo žvilgsnio niekas nepasikeitė. Abiem atvejais yra trys rėmeliai, į kuriuos atitinkamai įkeliami dokumentai left.htm, 1.htm ir 2.htm. Tačiau kai kadrai sąveikauja, skirtumas pasirodys. Jei pirmuoju atveju nė vienas kadras neturi pirminio kadro, tada antruoju atveju dviejų kadrų pirminis rėmelis bus pavadintas „Two_Frames“. Todėl, jei bet kuriame iš dviejų kadrų taikote nuorodą, kurios parametro TARGET reikšmė lygi „_parent“, pirmuoju ir antruoju atveju rezultatas skirsis. Pirmuoju atveju, įdiegus tokią nuorodą, dokumentas bus įkeltas į visą langą, pakeisdamas esamą rėmo struktūrą. Čia pradeda veikti vertės ypatybė „_parent“, kuri veikia kaip „_top“, jei nėra pirminio rėmelio. Antruoju atveju bus pakeistas rėmelis pavadinimu „Two_Frames“, kuris užima dešinę ekrano pusę ir iš esmės susideda iš dviejų kadrų.

Antrasis atvejis formaliai skiriasi nuo pirmojo ir tuo, kad yra rėmelis, pavadintas „Two_Frames“, į kurį galima daryti nuorodas. Būtent ši funkcija leis mums išspręsti problemą.

Štai kairiojo.htm failo, kuris iš pradžių įkeliamas į pirmąjį iš nagrinėjamų kadrų, turinys:

Kairysis rėmelis

dokumentus dviejuose rėmeliuose, esančiuose dešinėje lango pusėje.

Pasirinkite dokumento vietos parinktį:

1 _2.htm" TARGET="Two_Frames">1-2 parinktis

2-1 parinktis

2-1<TITLE> </p> <p></HEAD> </p> <p><FRAMESET ROWS="*,*"> </p> <p><FRAME SRC="2.htm"> </p> <p><FRAME SRC="1.htm"> </p> <p></FRAMESET> </p> <p></HTML> </p> <p>Atminkite, kad failų 1_2.htm ir 2_1.htm tekstai skiriasi tik nuorodų į failus 1.htm ir 2.htm tvarka.</p> <p>Dabar panagrinėkime dokumento, įkelto į kairįjį rėmelį, konstrukciją. Jame yra dvi nuorodos su parametru TARGET="Two_Frames". Įdiegus bet kurią iš šių nuorodų, „Two_Frames“ rėmelio vietoje (tai dešinėje ekrano pusėje) sukuriami du kadrai, viena ar kita tvarka įkeliami dokumentai 1.htm ir 2.htm. Taigi, renkantis 1-2 parinktį, dokumentas 1.htm įkeliamas į viršutinį dešinįjį rėmelį, o 2.htm - į apatinį dešinįjį rėmelį. Pasirinkus 2-1 parinktį, pasikeičia dokumentų tvarka. Dėl to kintantis parinkčių pasirinkimas sukuria įspūdį, kad dokumentai dviejuose kadruose keičiasi vietomis. Būtent tokio efekto ir siekėme pasiekti (5.9 pav.).</p> <p>1.htm ir 2.htm dokumentų turinys aprašytam pavyzdžiui nesvarbus. Tačiau, pavyzdžiui, vietoj trivialių dokumentų kursime dokumentus su nuorodomis, kurios įgyvendina tuos pačius veiksmus.</p> <p>1.htm failo tekstas:</p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>1 dokumentas

1 dokumentas

1 variantas -2

2-1 variantas

Failas 2.htm skiriasi nuo 1.htm tik antraštėje.

Yra dvi nuorodos su reikšme TARGET="_parent", kurios nukreipia į pirminį rėmelį. Šios nuorodos taip pat gali būti parašytos aiškiu pirminio rėmelio pavadinimu, t. y. TARGET = "Two_Frames", tačiau paprastai yra patogiau naudoti numanomą pavadinimą. Pavyzdžiui, jei išskirsite nuorodas iš kairiojo rėmelio (document left.htm), galite praleisti rėmelio pavadinimą „Two_Frames“, nurodytą aprašydami pagrindinę rėmelio struktūrą. Taip būtų sukurtas rėmelis be pavadinimo, bet nuorodos iš dokumentų 1.htm ir 2.htm su TARGET="_parent" vis tiek veiktų tinkamai.

Patarimas

Jei įmanoma, naudokite numanomus rėmelių pavadinimus. Pavyzdžiui, „parent“, „top“, „self“, o ne nurodyti konkrečius vardus.

Ryžiai. 5.9. Sąveikaujantys rėminiai langai, keičiantys įkeltus dokumentus

Skirtumas tarp rėmelių ir naršyklės langų

Dirbant su rėmeliais, kyla klausimas apie esminį skirtumą tarp naršyklės lango rėmelių struktūros organizavimo ir kelių langų kūrimo. Iš pirmo žvilgsnio gali atrodyti, kad galite susitvarkyti su galimybe kurti kelis langus, nes darbas su langais ir rėmais yra labai panašus. Kiekvienam kadrui reikia įkelti atskirą dokumentą, jis turi galimybę savarankiškai slinkti turinį ir gali būti keičiamas komandomis iš kitų kadrų. Šios rėmelių savybės yra panašios į naršyklės langų savybes. Sutvarkius duomenis lentelėmis, tokios veiksmų laisvės pasiekti neįmanoma.

Tačiau yra didelis skirtumas tarp rėmų ir langų. Organizuojant rėmus, peržiūros srities padalijimą į rėmelius atlieka pats HTML dokumentas, nurodydamas matmenis ir jų vietą. Vartotojas peržiūrėdamas gali keisti rėmelių dydį, nebent tai draudžiama jų sandaros aprašyme. Langų išdėstymas nustatomas pagal bendrąsias darbo su Windows sistema taisykles – vartotojas gali išplėsti bet kurį langą iki viso ekrano, sumažinti jį iki piktogramos arba savavališkai nustatyti jo dydį ir vietą. Langai, skirtingai nei rėmai, gali persidengti. Šis gausus pasirinkimas turi ir neigiamą pusę – kiekvieną kartą reikia rankiniu būdu nustatyti langus ekrane ir keisti jų dydį, kad būtų pasiektas optimalus žiūrėjimo variantas. Rėmų atveju optimalų dydžio santykį dažniausiai nurodo kūrėjas rėmo konstrukcijos aprašyme ir dažnai jo keisti nereikia.

Patarimas

Nors rėmai negali suteikti visų galimybių dirbti su atskirais langais, tačiau racionalus jų organizavimas sukurs maksimalų patogumą vartotojui.

Darbas su langais turi ir kitų trūkumų. Kiekvienam langui sukurti reikia daug atminties. Netscape kiekvienas langas iš esmės yra dar viena naršyklės kopija su visu mygtukų ir meniu rinkiniu. Ta pati situacija būdinga „Microsoft Internet Explorer“.

Atkreipkite dėmesį, kad atskirų langų organizavimas naršyklėse atliekamas skirtingai. Sukūrus naują langą su dokumentu, Windows sistemoje atsiranda atskira užduotis, kaip matote peržiūrėdami vykdomų užduočių sąrašą. Todėl langų perjungimas gali būti atliekamas taip pat, kaip ir skirtingų užduočių perjungimas, pavyzdžiui, paspaudus spartųjį klavišą +.

Daugelis populiarių „Windows“ programų turi dokumento lango koncepciją. Pavyzdžiui, „Microsoft Word“ tekstų rengyklė arba grafikos programa „Paint Shop Pro“ ir daugelis kitų. Kiekviena iš šių programų leidžia vienu metu naudoti kelis langus su duomenimis ir, kaip taisyklė, yra meniu Langas, kuriame pateikiamas langų sąrašas ir suteikiama galimybė juos perjungti. Naujas langas tokiose programose paprastai sukuriamas atidarant esamą failą arba kuriant naują. Tačiau šiose programose, kai sukuriamas naujas langas, nauja vykdoma užduotis nesukuriama.

Netscape taip pat turi langų meniu, kuriame pateikiami esami langai. (Netscape 4.x versijose šią funkciją suteikia Communicator meniu elementas Langas.) Grįžkime prie pav. 5.8. Šiame pavyzdyje vienu metu atidaromi trys langai, kurių kiekvienas iš esmės yra atskira naršyklė. Tačiau vartotojui jie visi yra tos pačios naršyklės langai, galintys sąveikauti vienas su kitu. Bet kuriame iš šių langų galite atidaryti meniu Langas ir pamatyti trijų langų sąrašą. Fig. 5.10 paveiksle parodyta situacija, kai tai daroma apatiniame lange.

Ryžiai. 5.10.„Frame Windows“ atidarymas „Netscape“ naršyklėje

Kiekvieną langą galima uždaryti atskirai (naudojant komandą Close iš meniu Failas). Norėdami baigti darbą su naršykle bet kuriame lange, galite atidaryti meniu Failas ir pasirinkti Exit (5.11 pav.).

Jei buvo atidaryti keli langai, tada visi jie bus uždaryti, bet prieš tai pasirodys įspėjamasis pranešimas (5.12 pav.).

Kiekvienas naršyklės langas gali turėti savo nustatymus (nors ne visi). Pažvelkite į pav. 5.11. Atidaryti du langai, vienas iš kurių padalintas į tris rėmus. Tas pats dokumentas įkeliamas į du iš trijų kadrų, taip pat į atskirą langą. Galimybė savarankiškai konfigūruoti kiekvieno lango parametrus leidžia skirtingai rodyti tą patį dokumentą. Aukščiau pateiktame pavyzdyje dokumento šrifto dydis viename lange yra didesnis nei kitame. Šis efektas pasiekiamas nustatant skirtingą kiekvieno lango kodavimą (meniu Options elementas Document Encoding arba 4.x versijai meniu View elementas Character Set), abiem koduotėms naudojant tą patį šriftą, bet skirtingų dydžių. Bet kurio elemento pakeitimas meniu Bendrosios nuostatos turi įtakos visiems langams.

Ryžiai. 5.11.„Netscape“ naršyklės uždarymas

Ryžiai. 5.12.Įspėjimas apie langų uždarymą Netscape naršyklėje

Papildomos naršyklės funkcijos

Visos aukščiau pateiktos rėmelių aprašymo žymos su atitinkamais parametrais yra įdiegtos beveik identiškai „Netscape“ ir „Microsoft Internet Explorer“ naršyklėse, tačiau kiekviena iš šių naršyklių leidžia papildomai naudoti savo unikalias žymas ar parametrus.

„Netscape“ naršyklės funkcijos

„Netscape“ naršyklė, pradedant nuo 3.0 versijos, suteikia tris papildomas parinktis: BORDER, FRAMEBORDER ir BORDERCOLOR. Parametras BORDER taikomas tik žymai . Parametro BORDER reikšmė nustato kraštinių tarp kadrų storį pikseliais.

FRAMEBORDER parametras gali būti naudojamas ir žymoje , ir žymoje ir nustato rėmelio buvimą tarp kadrų. Šis parametras gali būti Taip arba NE. Jei parametras įrašytas žymoje , tada jo poveikis taikomas visiems šios grupės kadrams. Atskiro kadro vertė gali būti nepaisoma. Numatytoji reikšmė yra Taip.

Atkreipkite dėmesį, kad parametrai BORDER ir FRAMEBORDER veikia vienas nuo kito nepriklausomai. Pavyzdžiui, jei FRAMEBORDER nustatytas į NO, o BORDER – kitokia nei nulis reikšmė, tada riba tarp kadrų nebus nubrėžta, tačiau jai vis tiek bus skirta erdvė, nurodyta parametro BORDER reikšme.

Parametras BORDERCOLOR gali būti naudojamas kaip ir žymoje , ir žymoje ir apibrėžia kraštinės spalvą, kurią galima nurodyti spalvos pavadinimu arba jos šešioliktaine išraiška.

Štai pavyzdys:

Pirmoje šio HTML kodo eilutėje nurodyti trys kadrai, tarp kurių yra tarpas 10 pikselių storio rėmeliui (5.13 pav.).

Ryžiai. 5.13. Kraštinių piešimas tarp rėmelių „Netscape“ naršyklėje

Tarp rėmo langų „A“ ir „B“ rėmelis nenubraižytas dėl parametro FRAMEBORDER reikšmės NO, tačiau rėmeliui nustatoma raudona spalva. Paskutiniam kadrui „c“ FRAMEBORDER reikšmė nustatoma į Taip ir nepaiso pirmoje eilutėje nustatytos vertės. Todėl tarp kadrų, pavadintų „B“ ir „C“, vis tiek bus nupieštas raudonas 10 pikselių storio rėmelis.

Pastaba

Jei ribos tarp kadrų nenubraižytos, Netscape naršyklė neleis keisti rėmelių dydžio velkant juos pele, net ir be parametro NORESIZE. „Microsoft Internet Explorer“ situacija yra kitokia.

Atkreipkite dėmesį, kad rėmeliai be apvadų nėra naudojami labai retai. Reikia atsiminti, kad rėmelių nebuvimas netrukdo atsirasti slinkties juostoms (5.14 pav.).

Ryžiai. 5.14. Slinkties juostos rėmelyje be kraštinių

„Microsoft Internet Explorer“ naršyklės funkcijos

„Microsoft Internet Explorer“ naršyklė leidžia naudoti parametrą FRAMEBORDER tais pačiais tikslais, kaip aprašyta aukščiau, tačiau neleidžia nustatyti rėmelių spalvos ir storio. Tačiau tik skaitinė reikšmė „O“ gali būti naudojama kaip FRAMEBORDER parametro reikšmė, kad būtų atšauktas kadro piešimas, arba nulinė skaitinė reikšmė kadre piešimui.

FRAMEBORDER parametro reikšmių nustatymo skirtingoms naršyklėms taisyklių skirtumas yra labai nemalonus. Pabandykite, pavyzdžiui, nustatyti FRAMEBORDER=Yes. Šis įrašas tinka „Netscape“, tačiau „Microsoft Internet Explorer“ nebus rėmelio. Ankstesnis pavyzdys (5.13 pav.) peržiūrint „Microsoft Internet Explorer“ bus pateiktas be rėmelio.

Patarimas

FRAMEBORDER parametro reikšmę visada rekomenduojama rašyti skaitine forma, pavyzdžiui, FRAMEBORDER=0. Tai atitinka Microsoft Internet Explorer parametro rašymo taisykles, tačiau pažeidžia Netscape taisykles (nors pastaroji tai teisingai suvokia).

Pastaba

Jei rėmeliai tarp kadrų nenubraižyti, tai Microsoft Internet Explorer naršyklė (skirtingai nei Netscape), nesant parametro NORESIZE, leis „paliesti“ keisti rėmelių dydį, velkant rėmelius pele. Vietą, kurioje turėtų būti rėmelis, galite rasti pakeitę pelės žymeklio formą.

„Microsoft Internet Explorer“ naršyklė leidžia naudoti papildomą FRAMESPACING parametrą, įrašytą žymoje , kurio reikšmė nustato taškų skaičių tarp kadrų, kuriuos reikia palikti tuščius.

Pateiksime pavyzdį, kurio rodymo rezultatas parodytas fig. 5.15.

Atstumo tarp kadrų keitimas

Ryžiai. 5.15. Tuščia vieta tarp kadrų „Microsoft Internet Explorer“.

Pastaba

Deja, daugelyje HTML kalbos aprašymų klaidingai nurodoma, kad žymoje turi būti naudojamas parametras FRAMESPACING . „Microsoft Internet Explorer“ leidžia naudoti šį parametrą tik žymoje .

Plaukiojantys rėmeliai

„Microsoft Internet Explorer“ naršyklė leidžia naudoti unikalią žymą , kuri įgyvendina plaukiojančių rėmelių koncepciją. Skirtingai nuo įprastų rėmelių, slankiųjų rėmelių aprašymai gali būti rodomi įprasto HTML dokumento tekste. Naršyklės, kurios nepalaiko žymos <IFRAME>, vietoj rėmelio bus rodoma bet kokia informacija, įrašyta tarp <IFRAME>Ir. TEGS Naudojami lygiai tie patys parametrai, kaip ir žymoje, apibūdinančioje įprastus kadrus <FRAME>. Vienintelė išimtis yra parametras NORESIZE, kuris yra beprasmis, nes slankiųjų kadrų dydžio vartotojas, peržiūrėdamas dokumentą, jokiu būdu negali keisti.</p> <p>Be to, norint nustatyti slankiojo rėmelio padėtį ir dydį dokumente, galima naudoti šiuos papildomus parametrus: WIDTH, HEIGHT, HSPACE, VSPACE, ALIGN. Jų paskirtis ir naudojimo tvarka sutampa su atitinkamais įterptųjų vaizdų parametrais, kuriuos nurodo žyma <IMG>. </p> <p>Štai slankiųjų rėmelių naudojimo pavyzdys:</p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Naudojant plūduriuojančius rėmus</TITLE> </p> <p></HEAD> </p> <p><BODY> </p> <p><CEMTEK><H2>Plaukiojančių rėmelių sąvokos naudojimo pavyzdys</H2></СЕМТЕК> </p> <p><IFRAME SRC=float.htm NAME="A" HEIGHT=300 WIDTH=40% HSPACE=10 SCROLLING=YES ALIGN=RIGHT> </p> <p>Jūsų naršyklė neleidžia rodyti slankiųjų rėmelių</p> <p>

„Microsoft Internet Explorer“ yra pirmoji naršyklė (ir kol kas vienintelė), kuri palaiko vadinamuosius „plaukiojančius“ rėmelius.

Šiuos rėmelius galima dėti bet kurioje ekrano vietoje, kaip ir grafiką bei lenteles.

Šio teksto dešinėje esantis rėmelis įdedamas į puslapį naudojant specialią žymą . Kuriant rėmelį buvo nurodytas teisingas lygiavimas.</p> <p></BODY> </p> <p></HTML> </p> <p>Šio pavyzdžio rodymo naudojant „Microsoft Internet Explorer“ naršyklę rezultatas parodytas pav. 5.16. Šiame pavyzdyje naršyklės, kurios nepalaiko slankiųjų kadrų koncepcijos, vietoj float.htm dokumento turinio rodys tekstą „Jūsų naršyklė neleidžia rodyti slankiųjų rėmelių“.</p> <span> <br><img src='https://i2.wp.com/webnav.ru/books/html4/frames/20.gif' width="100%" loading=lazy loading=lazy></span> <p><i><span><b>Ryžiai. 5.16.</b> Slankusis rėmelis „Microsoft Internet Explorer“.</span> </i></p> <p>Atkreipkite dėmesį, kad slankiųjų rėmelių koncepcija savo ideologija panaši į įterptus vaizdus ar lenteles. Čia kitas HTML dokumentas yra visiškai įterptas į norimą HTML dokumento vietą.</p> <p><i><b>Patarimas</b> </i></p> <p><i> <span>Šiuo metu slankiųjų rėmelių naudojimas ribojamas vienoje naršyklėje – Microsoft Internet Explorer 3.0 ir naujesnės versijos. Atminkite, kad kitų naršyklių (ypač „Netscape“) naudotojai negalės matyti iframe turinio.</span> </i></p> <p>Įrankiai dokumentams su rėmeliais kurti</p> <p>HTML dokumentą su rėmeliais, kaip ir bet kurį kitą dokumentą, galima sukurti arba redaguoti rankiniu būdu naudojant bet kurią turimą teksto rengyklę. Dauguma specializuotų HTML redaktorių neturi vizualinio kadravimo galimybių arba turi labai ribotas galimybes. Yra keletas specialių redaktorių, skirtų rėmelių kūrimui. Trumpai apibūdinkime kai kurių iš jų galimybes.</p> <p><b><span>FrameGang rėmelių redaktorius</span> </b></p> <p>Vienas iš tokių redaktorių yra „FrameGang“ įrankis, kurį sukūrė Australijos kompanija „Sausage Software“, kuri yra geriau žinoma dėl savo populiaraus HTML redaktoriaus „HotDog“.</p> <p>Informaciją apie šį programinės įrangos produktą galite gauti adresu <b>http://www.sausage.com</b>, taip pat iš programinės įrangos produktų, skirtų internetui, rinkinio (adresas <b>http://www.tucows.com</b> arba bet kuris kitas iš kelių dešimčių veidrodinių serverių, išsibarsčiusių visame pasaulyje).</p> <p>„FrameGang“ programa yra bet kurio „Windows“ aplinkoje veikiančio HTML redaktoriaus ar įprasto teksto rengyklės priedas, leidžiantis vizualiai suprojektuoti reikiamą rėmelio struktūrą ir tada sugeneruoti atitinkamą HTML kodą. Gautas HTML kodas gali būti perkeltas į HTML redaktorių per Windows mainų sritį (iškarpinę). FrameGang programa leis greitai sukurti norimą rėmo struktūrą.</p> <p>Pažvelkime į programos galimybes. Įdiegę šią programą sistemoje Windows ir paleidę ją, jūsų prašoma pasirinkti vieną iš dviejų galimų pirmojo (viršutinio) lygio rėmelių struktūrų - stulpelių išdėstymą (Stulpeliai) arba eilučių (Eilutės), taip pat nustatyti jų skaičių. Ateityje kiekvienas iš pirmojo lygio kadrų prireikus gali būti padalintas į kelis antrojo lygio kadrus. Didesnis kadrų lygių skaičius nenumatytas, tačiau tai nėra reikšmingas apribojimas, nes praktiškai retai naudojami daugiau nei du lygiai.</p> <p>Kaip pavyzdį pasirinkite keturis stulpeliais išdėstytus kadrus. Tada turėtumėte sukurti antrojo lygio kadrų struktūrą, kuri atliekama skaidant esamus kadrus priešinga kryptimi. Šiame pavyzdyje rėmeliai gali būti skaidomi tik horizontaliai. Antrojo lygio kadrų kūrimas atliekamas meniu punkte Pridėti, kurį įgyvendinus prie esamo pridedamas kitas kadras.</p> <p>Atkreipkite dėmesį, kad juokingi paveikslėliai rėmeliuose neturi jokios reikšmės ir naudojami tik užpildyti tuščią erdvę. Jų piešimą galima atšaukti meniu Parinktys. Taip pat atkreipiame dėmesį, kad pats gamintojo pavadinimas (dešra – dešrelės) ir kai kurių jo programinės įrangos produktų pavadinimas (HotDog – nereikia vertimo) nulėmė šio paketo sąsajos stilių – daugelyje meniu elementų yra dešrelių vaizdas. .</p> <p>Apibrėžę rėmų struktūrą, turite nustatyti jų dydžius. Tai atliekama tiesiog perkeliant rėmelių kraštus pele taip pat, kaip tai daroma keičiant Windows langų dydį. Nustatyti dabartinio rėmelio matmenys rodomi procentais languose, pavadintuose Plotis ir Aukštis. Jei reikia nustatyti kadrų dydžius ne procentais, o pikseliais arba santykiniais vienetais, gautą HTML kodą turite pakeisti rankiniu būdu ne FrameGang programoje.</p> <p>Toliau kiekvienam rėmeliui turite nustatyti jo pavadinimą (pavadinimą), kurio galima praleisti, dokumento, iš pradžių įkelto į šį rėmelį, URL (Rėmelio URL), taip pat pasirinkti parametro Keičiamo dydžio rėmelio kraštinės ir slinkimo parametro reikšmę. kadro turiniui (Frame Scrolling).</p> <p>Bet kuriuo metu galite peržiūrėti kuriamą rėmelio struktūrą pasirinktoje išorinėje naršyklėje, neišeidami iš „FrameGang“ programos. Tam naudojamas mygtukas Peržiūra. Naršyklės pavadinimas nustatomas meniu Parinktys. Nustačius visus parametrus, reikėtų sugeneruoti pasirinktą rėmelio struktūrą atitinkantį HTML kodą, kuris bus įrašytas į Windows iškarpinę (HTML Compile mygtukas). Gautą kodą galima įklijuoti iš mainų srities į norimą HTML failo vietą dirbant bet kuriame redaktoriuje.</p> <p>Mygtukai Išsaugoti ir Atidaryti failą leidžia įrašyti ir skaityti failą tik specialia FrameGang programai skirta koduote, kuri nėra skirta jokiam kitam naudojimui.</p> <p>Žemiau pateikiamas FrameGang sukurtas HTML kodas aprašytam pavyzdžiui:</p> <p><FRAMESET COLS="25%,25%,25%,25%"> </p> <blockquote> <p><FRAME SCROLLING=AUTO SRC="Empty.htm" NAME="Frame_A"> </p> <p><FRAME SCROLLING=AUTO SRC="Empty.htm" NAME="Frame_B"> </p> <p><FRAMESET ROWS="50%,50%"> </p> <blockquote> <p><FRAME SCROLLING=AUTO SRC="Empty.htm" NAME="Frame_C1"> </p> <p><FRAME SCROLLING=AUTO SRC="Empty.htm" NAME="Frame_C2"> </p> </blockquote> <p></FRAMESET> </p> <p><FRAME SCROLLING=AUTO SRC="Empty.htm" NAME="Frame_D"> </p> </blockquote> <p></FRAMESET> </p> <p>Norint gauti teisingą HTML dokumentą, pakanka įterpti gautą kodą tarp žymų <HTML>Ir</HTML>. Galite pridėti dokumento antraštės skyrių <HEAD>, kuriame reikia apibrėžti reikiamus duomenis, pavyzdžiui, dokumento pavadinimą (atminkite, kad dokumento pavadinimas rašomas tarp žymų <TITLE>Ir</TITLE>). Atminkite, kad šiuolaikinės naršyklės gali veikti tinkamai, net jei trūksta kai kurių būtinų žymų. Jei aukščiau pateiktas HTML kodas išsaugomas kaip failas su atitinkamu plėtiniu, net nepridedant jokių žymų, tada tiek Netscape Navigator, tiek Microsoft Internet Explorer galės tinkamai parodyti dokumentą.</p> <p>FrameGang programa leidžia vizualiai suprojektuoti rėmelius, yra gana patogi ir paprasta naudoti, tačiau neapsieina be tam tikrų trūkumų. Visų pirma, nėra galimybės nurodyti rėmelių dydžio įrašant reikiamus skaičius languose Plotis ir Aukštis, nes juose rodomi tik tie dydžiai, kurie nustatyti perkeliant rėmelių ribas pele. Visuotinai priimtini kadro parametrai MARGINWIDTH ir MARGINHEIGHT nenustatyti. Jokiu būdu negalima įrašyti failo tekstiniu formatu į diską, todėl neįmanoma naudoti šios programos neprisijungus.</p> <p><b><span>Frame-It rėmelių redaktorius</span> </b></p> <p>Kitas specializuotas rėmelių rengyklė yra „Frame-It“, informacijos apie ją rasite adresu:</p> <p><b><span>http://www.iinet.net.au/~bwh/frame-it.html</span> </b></p> <p>Darbas su šia programa daugeliu atžvilgių panašus į ankstesnę. Pirmiausia turite nustatyti pagrindinę rėmų struktūrą ir jų skaičių. Tada kiekvienas rėmas, jei reikia, yra padalintas į keletą, suformuojant antrojo lygio struktūras. Kaip ir ankstesnėje programoje, rėmelių įdėjimo lygių skaičius ribojamas iki dviejų.</p> <p>Kiekvienam kadrui visi reikalingi parametrai nustatomi užpildant atitinkamus laukus. Skirtingai nuo ankstesnės programos, galima nustatyti MARGINWIDTH ir MARGINHEIGHT parametrų reikšmes. Be to, buvo įvesta vėliavėlė Invisible Frame Borders, kuri, kai nustatoma, generuoja šį kodo fragmentą:</p> <p>FRAMEBORDER="NE" BORDER="0" FRAMESPACING="0".</p> <p>Nustačius reikiamus rėmelio parametrus, sugeneruotą HTML kodą galite įrašyti į failą arba įrašyti į Windows mainų sritį. Sugeneruotame kode bus ne tik rėmelio struktūros aprašymas, bet ir pradžios žyma <HTML>, taip pat pora žymų <NOFRAMES>Ir</NOFRAMES>, tarp kurių rašoma informacija, skirta naršyklėms, kurios nerodo rėmelių.</p> <p>Konkrečiam pavyzdžiui bus sugeneruotas šis kodas:</p> <p><html> </p> <p><! --- Generated using Frame-it v1.21 --- > </p> <p><! --- http://www.iinet.net.au/~bwh/frame-it.html ---> </p> <p><frameset cols="25%,25%, 25%, 25%" FRAMEBORDER="NO" BORDER="0" </p> <p>FRAMESACING="0"></p> <p><frame name="Frame_1" src="Empty.htm"> </p> <p><frame name="Frame_2" src="Empty.htm"> </p> <p><frameset rows="50%,50%"> </p> <p><frame name="Frame_3" src="Empty.htm"> </p> <p><frame name="Frame_5" src="Enipty.htm"> </p> <p></frameset> </p> <p><frame name="Frame_4" src="Empty.htm"> </p> <p></frameset> </p> <p><noframes> </p> <p><body> </p> <p>su rėmo konstrukcija</p> <p></noframes> </p> <p>Jei šiame pavyzdyje išvalysite žymės langelį Nematomų rėmelių kraštinės, sugeneruotas kodas labai pasikeis:</p> <p><html> </p> <p><! --- Generated using Frame-it vl.21 --- > </p> <p><! --- http://www.iinet.net.au/~bwh/frame-it.html ---> </p> <p><frameset cols="25%,25%,25%,25%"> </p> <p>scrolling=auto noresize></p> <p>scrolling=auto noresize></p> <p><frameset rows="50%,50%"> </p> <p>scrolling=auto noresize></p> <p>scrolling=auto noresize></p> <p></frameset> </p> <p>scrolling=auto noresize></p> <p></frameset> </p> <p><noframes> </p> <p><body> </p> <p>Jūsų naršyklė negali rodyti dokumentų</p> <p>su rėmo konstrukcija</p> <p></noframes> </p> <p>Informacija apie rėmelių naudojimą WWW</p> <p>Norėdami gauti informacijos apie rėmelius, galite kreiptis šiais WWW adresais:</p> <p>http://www.spunwebs.com/sites2c/frmtutor.html</p> <p>http://union.ncsa.uiuc.edu/HyperNews/get/www/html/guides.html</p> <p>http://cox.asu.edu/Trial/faq/webfaqs/frame/</p> <p>http://www.netlingo.com/more/framestarget.html</p> <p>http://www.aubg.bg/beast/students/raduluc/teach/fr/</p> <p>http://www.as.net/frame/</p> <p>http://www.cqi.com/~pmurphey/instruction/</p> <p>http://www.iwaynet.net/~rtyler/htmltutorial/frames.html</p> <p>http://edbo.com/frames/</p> <p>http://bela.fei.tuke.sk/netscape/frames/</p> <p>http://www.newbie.net/frames/2ed/rnenu.htmtfcontents</p> <p>http://infoserver.etI.vt.edu/coe/COE_Students/laughon/frame.html</p> <p>http://www.htmlhelp.com/frames/syntax/</p> <p>http://www.woodhill.co.uk/html/</p> <p>http://www.htmlhelp.com/design/frames/</p> <p>Taigi, rėmeliai... kam jie skirti ir kokią naudą duoda? Apie tai pabandysiu pakalbėti šiame skyriuje ir, žinoma, apie tai, kaip juos įgyvendinti ir su jais dirbti.</p> <p>Neretai kuriant internetinę svetainę iškyla būtinybė viename naršyklės lange vienu metu atidaryti kelis HTML dokumentus... todėl buvo kuriami rėmeliai kiekvieno dokumento darbo sritims apibrėžti. Be to, rėmeliai yra geras įrankis, su kuriuo galima maketuoti puslapius, jie tarnauja kaip vertas „alternatyvas“ lenteleiniam puslapių maketavimo metodui... Žodį „alternatyva“ dedu į kabutes, nes tai visiškai kitoks būdas sukurti svetainę su savo privalumais ir trūkumais, ir gana sunku palyginti ją su iki šiol pažįstama svetainės konstrukcija.. bet pirmiausia viskas..</p> <p>Pradedam? Tarkime, turime atidaryti tris HTML dokumentus vienu metu viename naršyklės lange ir sutvarkyti juos, pavyzdžiui, tokiu būdu:</p> <p>Ko mums tam reikia? Pirmiausia, žinoma, turime sukurti tris atskirus html dokumentus, kuriuos iš tikrųjų atidarysime viename lange. Tegul pirmame dokumente yra grafinis vaizdas ir jis veikia kaip logotipas, pavadinkime jį logotype.html, antrasis dokumentas bus tam tikras turinys.. pavadinkime jį meniu .html, o trečias – dokumentas su daugybe teksto. text.html. Žinoma, galite sugalvoti savo vardus, taip pat ir dokumentų turinį, bet kol kas geriau kopijuoti mano... taip bus patogiau ir man, ir jums.</p> <p>Taigi, yra trys failai logotype.html, menu.html ir text.html.. kuriuos turime sudėti po vienu stogu, bet stogo dar neturime..</p> <p>Rašome „stogas“, pagrindinį dokumentą, prie kurio prijungsime savo failus. Kadangi jis bus pagrindinis, duodame pavadinimą index.html.</p> <p> <html> <br> <head> <br> <title>rėmeliai</title> <br> </head> <br> <body> <br> <script type="text/javascript">  </script><br> <br> </body> <br> </html></p> <p>Štai mums pažįstamo dokumento struktūra, kurią sukramtėme pačioje mokymų pradžioje.Rėmai laužo esamus stereotipus! Dokumento rėmelio struktūra atrodo taip:</p> <p> <html> <br> <head> <br> <title>rėmeliai</title> <br> </head> <br><b><frameset> </b> <br><b></frameset> </b> <br> </html></p> <p>Nėra žymės <b><body> </b> kompensuoja naują žymą <b><frameset> </b>- Sumontuokite rėmą ar rėmų komplektą... su šiuo vaikinu iš tikrųjų dirbsime toliau.</p> <p>Žyma <b><frameset> </b> turi atributų <b>eilučių</b> Ir <b>sk</b>- šie atributai nurodo naršyklei, kaip įdėti rėmelius naršyklės lange</p> <b>eilučių</b>- horizontaliai <b>sk</b>- vertikaliai <br><br><img src='https://i0.wp.com/webremeslo.ru/graphics/win1.gif' width="100%" loading=lazy loading=lazy><p>Mūsų atveju mums reikia horizontalaus rėmelių išdėstymo... todėl rašome taip:</p> <p> <html> <br> <head> <br> <title>rėmeliai</title> <br> </head> <br> <frameset <b>eilutės = "15%, 15%, 70%"</b>> <br> </frameset> <br> </html></p> <p>Procentai po lygybės ženklo yra ne kas kita, kaip mūsų rėmelių langų dydžiai viename dideliame naršyklės lange; mes turime įdėti tris langus, todėl yra ir trys reikšmės, atskirtos kableliais. Prisiminkite, kaip nustatome lentelės langelių dydžius, čia galioja tas pats principas.Kaip ir lentelės langelių atveju, rėmelių dydžius galima nurodyti procentais nuo bendro ploto ir pikseliais.</p> <p>Štai keletas rašymo pavyzdžių: <br><b><frameset rows="15%,15%,70%"> </b>- šis įrašas rodo, kad bus trys horizontalūs langai, kuriuose paskutinis užims 70% naršyklės lango ploto, o pirmieji du – 15%. <br><b><frameset cols ="200,240,200"> </b>- čia yra trys langai vertikaliai, kurių plotis nurodomas pikseliais. <br><b><frameset rows="100,*,180"> </b>- toks įrašas reiškia, kad pirmasis ir trečiasis langai bus atitinkamai 100 ir 180 pikselių pločio, o antrasis kadras užims visą likusį plotą.</p> <p>Baigėme sudėti dokumentus, dabar belieka juos sujungti ir džiaugtis pirmu rezultatu..</p> <p>Žyma <b><frame> </b> ir jo atributas <b>src</b> naršyklei nurodys kelią į html dokumentą, kuris turėtų būti atidarytas tam skirtoje vietoje. Turime tris atskirus dokumentus logotype.html, menu.html ir text.html, dabar kiekvienam turime nurodyti kelią, ką iš tikrųjų darome. (Manau, kad visi keturi failai yra tame pačiame aplanke ir keliai į juos turi paprasčiausią žymėjimą, pvz.: <b><frame src="logotype.html"> </b>)</p> <p>index.html failą <br> <html> <br> <head> <br> <title>rėmeliai</title> <br> </head> <br> <frameset rows="15%,15%,70%"> <br><b><frame src="logotype.html"> </b> <br><b><frame src="menu.html"> </b> <br><b><frame src="text.html"> </b> <br> </frameset> <br> </html> <br>Failas logotype.html <br> <html> <br> <head> <br> <title>rėmeliai</title> <br> </head> <br> <body> <br> <img src='https://i0.wp.com/logotype.jpg' height="120" width="800" loading=lazy loading=lazy> <br> <script type="text/javascript">  </script><br> <br> </body> <br> </html> <br>Failas meniu.html <br> <html> <br> <head> <br> <title>rėmeliai</title> <br> </head> <br> <body bgcolor="#e8e8e8" background="fon1.jpg"> <br> <font face="Monotype Corsiva" size="6"color="#ff0000">Meniu:</font><br> <font face="Comic Sans MS" size="3"> <br>Pievagrybių sriuba <br>Pupelės puode, itališko stiliaus <br>Australijos vasaros salotos <br> ... ... ... <br> </font> <br> <script type="text/javascript">  </script><br> <br> </body> <br> </html> <br>Failas text.html <br> <html> <br> <head> <br> <title>rėmeliai</title> <br> </head> <br> <body bgcolor="#f5f5f5"> <br> <center><font face="Comic Sans MS" size="3">Pievagrybių sriuba</font></center> <br> <br>daug teksto.. <br> <script type="text/javascript">  </script><br> <br> </body> <br> </html> <br></p> <p>Šiame pavyzdyje paskelbiau visus keturis HTML dokumentus, kuriuose pagrindinis yra index.html, o kiti trys yra papildomi puslapiai, kurių kiekvienas iš principo gali veikti autonomiškai ir juose gali būti bet kas, paveikslėliai, lentelės, tekstai, nuorodos .. Aš tai padariau Tai tam, kad suprastumėte darbo su rėmeliais principą. Tolesniuose pavyzdžiuose paskelbsiu tik antraštės failą su rėmeliais (kitaip jie visi užima per daug vietos puslapyje), o jūs žinote, kad aš turiu "kažkur ten" visus kitus failus, kuriuose yra grafika, tekstai, galbūt kažkas kitaip.. na, neatsilik nuo manęs, lėtai redaguokite savo puslapius būsimai mokymų svetainei.. Nežinau apie ką rašysite savo, bet pažadėjau padėti vienai merginai parašyti tam skirtą svetainę prie maisto gaminimo..)) todėl nusprendžiau, taip sakant, vienu akmeniu nusitaikyti į du paukščius.. zuikį ir svetainę..)) kažką panašaus..))</p> <p>Aukščiau pateiktame pavyzdyje visus langus išdėstėme horizontaliai, pakeisdami atributą <b>eilučių</b>įjungta <b>sk</b> galite juos išdėstyti vertikaliai. Bet ką daryti, jei jums reikia įdėti mūsų langus?</p> <br>taip?: ar taip?: ar net taip?: <br><br><img src='https://i1.wp.com/webremeslo.ru/graphics/win2.gif' width="100%" loading=lazy loading=lazy><p>Yra išėjimas. Pažiūrėkime į pavyzdžius.</p> <p>Pradėkime nuo pirmo atvejo... ką mes matome? Ir mes matome dvi eilutes, kur antroji yra padalinta į dvi stulpelius.</p> <p>O dabar eilės tvarka:</p> <b><frameset rows="20%,80%"> </b> <i>- padalinkite naršyklės langą į dvi eilutes</i><br><b><frame src="logotype.html"> </b><i>- įkelkite mūsų logotipą pirmoje eilutėje</i><br><b><frameset cols="30%,70%"> </b><i>- ir antrą eilutę padalinkite į du stulpelius</i><br><b><frame src="menu.html"> </b> <i>- pirmajame bus meniu</i><br><b><frame src="text.html"> </b><i>- o antrajame daug teksto</i><br><b></frameset> </b> <i>- uždarykite stulpelio padalijimo žymą</i><br><b></frameset> </b> <i>- uždarykite linijos padalijimo žymą</i><br><p>Apskritai neteisinga sakyti stulpelius ir eilutes, nes rėmeliai neturi nieko bendra su lentelėmis, išskyrus vizualinį panašumą, teisinga sakyti horizontalūs ir vertikalūs rėmeliai.. na aš taip sakau, kad būtų tau aiškiau..</p> <p>Gerai, pažiūrėkime į pavyzdį:</p> <p> <html> <br> <head> <br> <title>rėmeliai</title> <br> </head> <br> <frameset rows="15%,85%"> <br> <frame src="logotype.html"> <br> <frameset cols="20%,80%"> <br> <frame src="menu.html"> <br> <frame src="text.html"> <br> </frameset> <br> </frameset> <br> </html> <br></p> <p>Antruoju atveju turime du stulpelius, kuriuose antrasis yra padalintas į dvi eilutes, todėl rašysime taip:</p> <b><frameset cols="30%,70%"> </b> <i>- padalinkite langą į dvi stulpelius</i><br><b><frame src="menu.html"> </b> <i>- pirmajame bus turinys</i><br><b><frameset rows="20%,80%"> </b> <i>- ir antrąją padalinkite į dvi eilutes</i><br><b><frame src="logotype.html"> </b><i>- logotipas</i><br><b><frame src="text.html"> </b> <i>- ir pagrindinis tekstas</i><br><b></frameset> </b> <i>- uždarykite linijos padalijimą</i><br><b></frameset> </b><i>- uždarykite padalijimą į stulpelius</i><br><p> <html> <br> <head> <br> <title>rėmeliai</title> <br> </head> <br> <frameset cols="20%,80%"> <br> <frame src="menu.html"> <br> <frameset rows="15%,85%"> <br> <frame src="logotype.html"> <br> <frame src="text.html"> <br> </frameset> <br> </frameset> <br> </html> <br></p> <p>Trečiasis atvejis yra šiek tiek sudėtingesnis, bet jūs neturėtumėte jo bijoti... juolab, kad aš asmeniškai pasirinkau tokią statybą svetainei apie kulinarinį meną, paaiškinsiu kodėl žemiau. Ką mes turime? trys stulpeliai, o antrame stulpelyje iš esmės yra mūsų pirmasis atvejis.</p> <b><frameset cols="*,800,*"> </b> <i>- padalinkite langą į tris stulpelius (atkreipkite dėmesį, kad antrasis stulpelis užima lygiai 800 pikselių, o du išoriniai neturi tikslaus dydžio ir likusią erdvę padalins per pusę)</i><br><b><frame src="dekor.html"> </b> <i>-pirmame stulpelyje įkeliame html dokumentą, kuris atliks grynai dekoratyvinę funkciją</i><p><b><frameset rows="15%,85%"> </b> -<br><b><frame src="logotype.html"> </b> -<br><b><frameset cols="20%,80%"> </b> - <i>Antrame stulpelyje įterpiame savo „pirmą atvejį“</i><br><b><frame src="menu.html"> </b> -<br><b><frame src="text.html"> </b> -<br><b></frameset> </b> -<br><b></frameset> </b> -</p><p><b><frame src="dekor.html"> </b><i>- trečiame stulpelyje įkeliame tą patį failą su dekoracijomis</i><br><b></frameset> </b><i>- slemas</i><br></p><p>Pažvelkite į pavyzdį, tada paaiškinsiu, kodėl pasirinkau penkių langų kelią</p> <p> <html> <br> <head> <br> <title>rėmeliai</title> <br> </head> <br> <frameset cols="*,800,*"> <br> <frame src="dekor.html"> <br> <frameset rows="120,*"> <br> <frame src="logotype.html"> <br> <frameset cols="200,600"> <br> <frame src="menu.html"> <br> <frame src="text.html"> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html"> <br> </frameset> <br> </html> <br></p> <p>Tai kodėl penki langai? Prisimenu, kad jau rašiau apie tai, kad skirtingi interneto vartotojai turi skirtingą raišką savo monitoriuose ir atitinkamai skirtinguose ekranuose mūsų svetainė atrodys kitaip... o jei nebus konkrečių dydžių, visi mūsų brėžiniai, tekstai, lentelės , kaip sakoma, „plaukioja“ tiems vartotojams, kurių monitoriaus skiriamoji geba skiriasi nuo jūsų. Kai išdėstėme svetainę naudodami lentelę, puslapio matmenų problema buvo išspręsta šiai lentelei priskyrus konkretų plotį ir aukštį; deja, to negalima padaryti su rėmeliais... net jei nurodysite rėmelių plotį, kurio nėra procentais, bet pikseliais, tai vis tiek paskutinis stulpelis nusidrieks per likusį naršyklės lango plotį ir puslapis, kaip sakoma, praras savo „prekinę išvaizdą“. Taigi ką turėtume daryti? Turime griebtis mažų gudrybių... Nustatydami centrinio stulpelio (kuriame iš tikrųjų turime visą puslapį) dydį 800 pikselių, mes kartą ir visiems laikams nustatome jo plotį, o bedimens pirmąjį ir trečiąjį stulpelius papildymas dekoravimui, veikia kaip savotiškas „spyruoklė“, ant kurio centrinė kolona.. Taigi žmonėms su maža monitoriaus raiška šie langai/laukeliai bus siauri, o didelės skiriamosios gebos – platūs, todėl centrinė kolona jokiu būdu nebus paveikta ir dabar mes galime į ją patalpinti bet kokius objektus visiškai užtikrintai, su tikslia nuoroda vietoje, nesijaudindami dėl jų būsimo likimo. Palyginkite pirmąjį pavyzdį, kur yra trys langai, ir trečiąjį, kur jų jau penki, ar ne geriau?</p> <p>Baigsime su rėmelių išdėstymu ir dydžiais... o mes čia jau seniai įstrigę... judam toliau.</p> <h2>Mes suteikiame rėmams tvarkingą išvaizdą.</h2> <p>Mūsų paskutiniame pavyzdyje pirmas dalykas, kuris krenta į akis, yra visa krūva slinkties juostų, kurios yra ten, kur reikia ir kur nereikia.. Atsikratykime jų, na, galite jas kur nors palikti. Tai atliekama naudojant atributą <b>slinkimas</b>- žyma <b><frame> </b>, jis gali turėti vieną iš trijų reikšmių:</p> <ul><li><b>ne</b> </li><li><b>taip</b>- visada parodyk</li><li><b>automatinis</b> </li> </ul><p> <html> <br> <head> <br> <title>rėmeliai</title> <br> </head> <br> <frameset cols="*,800,*"> <br> <frame src="dekor.html" <b>slinkimas = "ne"</b>> <br> <frameset rows="120,*"> <br> <frame src="logotype.html" <b>slinkimas = "ne"</b> ><br> <frameset cols="200,600"> <br> <frame src="menu.html"> <br> <frame src="text.html"> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" <b>slinkimas = "ne"</b>> <br> </frameset> <br> </html> <br></p> <p>Rėmelio laukai arba kitaip atstumas nuo rėmelio ribų iki teksto ar vaizdo, kaip mūsų atveju, nurodomi pikseliais naudojant atributus <b>paraštės plotis</b> Ir <b>paraštės aukštis</b>žyma <b><frame> </b></p> <p> <html> <br> <head> <br> <title>rėmeliai</title> <br> </head> <br> <frameset cols="*,800,*"> <br> <frame src="dekor.html" scrolling="no"> <br> <frameset rows="120,*"> <br> <frame src="logotype.html" scrolling="no" <b>marginwidth="0" marginheight="0"</b>> <br> <frameset cols="200,600"> <br> <frame src="menu.html"> <br> <frame src="text.html" <b>marginwidth="10" marginheight="10"</b>> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" scrolling="no"> <br> </frameset> <br> </html> <br></p> <p>Pakalbėkime šiek tiek apie mūsų rėmų sistemą.</p> <p>Jei pastebėjote, paskutiniame pavyzdyje užvedę žymeklį virš kadro kraštinės, žymeklis, tai yra, įgauna kitokią išvaizdą (paimkite ir perkelkite), o dabar šią kraštinę galima vilkti bet kuria kryptimi laikant kairę pelės mygtukas. Kartais šis rėmelių ribų „mobilumas“ patenka į žiniatinklio valdytojo rankas, bet dažniau vis tiek trukdo.. Kad vartotojas nežaistų su žymos langų dydžiais <b><frame> </b> sugalvojo atributą <b>nedidinti</b></p> <p> <html> <br> <head> <br> <title>rėmeliai</title> <br> </head> <br> <frameset cols="*,800,*"> <br> <frame src="dekor.html" scrolling="no" <b>nedidinti</b>> <br> <frameset rows="120,*"> <br> <frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0" <b>nedidinti</b>> <br> <frameset cols="200,600"> <br> <frame src="menu.html" <b>nedidinti</b>> <br> <frame src="text.html" marginwidth="10" marginheight="10" <b>nedidinti</b>> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" scrolling="no" <b>nedidinti</b>> <br> </frameset> <br> </html> <br></p> <p>Bet tai jau seniai mums pažįstamas atributas <b>siena</b> nustato tų pačių kadrų plotį pikseliais tarp kadrų.. tai parašyta žymos viduje <b><frameset> </b>. Ta pati prasmė kaip ir anksčiau <b>border="0"</b> visiškai išlaisvins mus iš rėmų.</p> <p> <html> <br> <head> <br> <title>rėmeliai</title> <br> </head> <br> <frameset cols="*,800,*" <b>border="0"</b>> <br> <frame src="dekor.html" scrolling="no" noresize> <br> <frameset rows="120,*" <b>border="0"</b>> <br> <frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0" noresize> <br> <frameset cols="200,600" <b>border="0"</b>> <br> <frame src="menu.html" noresize> <br> <frame src="text.html" marginwidth="10" marginheight="10" noresize> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" scrolling="no" noresize> <br> </frameset> <br> </html> <br></p> <h2>Rėmeliai ir nuorodos.</h2> <p>Atėjo laikas atgaivinti mūsų svetainę su nuorodomis, bet čia yra problema, pažįstama įprasta nuoroda <b>Pupelės puode, itališko stiliaus</b> atidarys šį dokumentą tame pačiame rėmelyje, kur jis yra, mūsų atveju tiesiai rėmelyje su turiniu, o pats turinys spustelėjus šią nuorodą akimirksniu nueis į užmarštį.. galite pažvelgti į gremėzdišką pavyzdį. . spustelėkite bet kurią joje esančią nuorodą. Kad taip nenutiktų ateityje, naršyklei būtina nurodyti, kuriame rėmelyje turi būti atidarytas mums reikalingas dokumentas, nebent, žinoma, tikrai reikia jį atidaryti tas pats kadras.</p> <p>Atsimenu, jau susipažinome, skyriuje, skirtame saitams, su atributika <b>vardas</b>- vardas ir <b>taikinys</b>- tikslas, jie taip pat naudojami dirbant su rėmais, mechanizmas šiek tiek pakeistas ir beveik tas pats. Visų pirma, rėmeliui, kuriame norėtume atidaryti bet kokius dokumentus, turi būti suteiktas individualus pavadinimas.</p> <p>parašyta taip:</p><p> <frame src="text.html" <b>name = "osnovnoe"</b>> gali sugalvoti bet kokį pavadinimą.. svarbiausia jo nepamiršti..</p> <p>Tai parašyta taip:</p><p>target="osnovnoe"</b>>Pupelės puode, itališko stiliaus</p><p>Na, manau, nereikia tau aiškinti, kad prieš remdamasis kokiais nors dokumentais reikia juos susikurti... mano atveju failai (receptai) turi pavadinimus text.html, text1.html, text2.html ...</p> <p>Pažvelkite į pavyzdį:</p> <p>index.html failą <br> <html> <br> <head> <br> <title>rėmeliai</title> <br> </head> <br> <frameset cols="*,800,*" border="0"> <br> <frame src="dekor.html" scrolling="no" noresize> <br> <frameset rows="120,*" border="0"> <br> <frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0" noresize> <br> <frameset cols="200,600" border="0"> <br> <frame src="menu.html" noresize> <br> <frame src="text.html" <b>name = "osnovnoe"</b> marginwidth="10" marginheight="10" noresize> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" scrolling="no" noresize> <br> </frameset> <br> </html> <br>Failas meniu.html <br> <html> <br> <head> <br> <title>rėmeliai</title> <br> </head> <br> <body bgcolor="#e8e8e8" background="fon1.jpg" link="#b40000" alink="#900000" vlink="#900000"> <br> <font face="Monotype Corsiva" size="6"color="#ff0000">Meniu:</font><hr> <br> <font face="Comic Sans MS" size="3"> <br>target="osnovnoe"</b>>Pievagrybių sriuba <hr> <br>target="osnovnoe"</b>>Pupelės puode, itališko stiliaus <hr> <br>target="osnovnoe"</b>>Australiškos vasaros salotos <hr> <br> ... ... ... <br> </font> <br> <script type="text/javascript">  </script><br> <br> </body> <br> </html> <br></p> <p>Kaip ir anksčiau, dokumentą galima atidaryti atskirame lange. Priminsiu, kad parašyta taip:</p><p>target="_blank"</b>>Pupelės puode, itališko stiliaus</p><p>Arba priskiriant atributą <b>taikinys</b> prasmė <b>_viršuje</b> atsidaryti tame pačiame naršyklės lange, bet per visą ekraną.. „nulinti“ viską, kas ten yra.. parašyta taip:</p><p>target="_top"</b>>Pupelės puode, itališko stiliaus</p><p>Tokia svetainė gavosi... aišku, dar reikia padirbėti... be to, pagal mano idėją, ji turės kiek kitokią struktūrą naršymo po svetainę atžvilgiu, turės visa krūva puslapių, gražus meniu, bet dėl rėmelio struktūros manau ji liks tokia pati..</p> <h2>plaukiojantis rėmas</h2> <p>Kartais į puslapį, kuriame yra ne rėmelio struktūra, atskirame lange reikia įterpti kitą HTML dokumentą ar net tokių dokumentų seriją. Šiam tikslui pasiekti yra žyma <b><iframe> </b>- vadinamasis plaukiojantis rėmas.</p> <p>Ši žyma turi keletą atributų:</p> <b>src</b>- būtinas atributas, nurodantis kelią į atidaromą puslapį <br><b>plotis</b>- slankiojo rėmelio plotis pikseliais arba procentais <br><b>aukščio</b>- plaukiojančio rėmo aukštis <p><b>slinkimas</b>- rodyti slinkties juostą</p><ul><li><b>ne</b>- niekada nerodyti slinkties juostos,</li><li><b>taip</b>- visada parodyk</li><li><b>automatinis</b>- parodyk, jei reikia.</li> </ul><b>lygiuotis</b>- slankiojo rėmo išlyginimas <ul><li><b>paliko</b>- paliko</li><li><b>teisingai</b>- Dešinėje</li><li><b>viršuje</b>- aukštesnis</li><li><b>apačioje</b>- žemiau</li> </ul><b>rėmo kraštinė</b>- rėmo buvimas aplink plaukiojantį rėmą <ul><li><b>1 </b>- įjungti rėmelį</li><li><b>0 </b>- išjunkite rėmą</li> </ul><p>Viskas kartu parašyta taip:</p> <b><iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1" >
Dokumento su slankiu rėmeliu pavyzdys:

plaukiojantis rėmas

plaukiojantis rėmas

Šiame puslapyje buvo pristatytas vadinamasis „plaukiojantis rėmelis“.
Atskirame lange jis atidaro kitą html dokumentą rodyti.

… … …

Noframes

Kai kurios naršyklės nepalaiko dokumento rėmelių struktūros arba ją interpretuoja neteisingai; be to, vartotojai savo naršyklės nustatymuose dažnai sąmoningai išjungia HTML dokumento rėmelių struktūros palaikymą. Ir nors tokių naršyklių ir vartotojų procentas yra nedidelis, jie vis tiek egzistuoja.

Dabar įsivaizduokite, kad sukūrėte savo svetainę naudodami rėmelio struktūrą, o kai kurie lankytojai, galbūt nežinodami, kokia yra problema, bando atidaryti jūsų svetainę, o jų naršyklė parodys klaidą! Ką jie pagalvos apie jūsų svetainę? Galvoju kažką panašaus į: „Uh.. kažkokia nesąmonė.. Daugiau čia nevažiuosiu!

Kad vartotojui būtų aišku, kad jo naršyklės/naršyklės nustatymai nepalaiko rėmelių, yra žyma

Pavyzdžio rezultatas bus pastebimas, jei jūsų naršyklė tikrai nepalaiko rėmelių (čia aš ilgai galvojau.. :) jei taip, tai kam išvis skaityti šį skyrių?) arba išjungėte rėmelių palaikymą naršyklė kaip eksperimentas.

Žyma
○ Plaukiojantis rėmas

Jei „iframe“ langą reikia įterpti tiesiai į puslapį, kuriame nėra rėmelių struktūros, tam yra „iframe“ žyma.

* „iframe“ žymos atributai

src - kelias į puslapį, kurį norite atidaryti

plotis – plaukiojančio rėmo plotis

aukštis – plaukiojančio rėmo aukštis

slinkimas – slinkties juosta
– ne – niekada nerodykite slinkties juostos
– taip – visada parodyk
- auto - rodyti, jei reikia

align – plaukiojančio rėmo išlygiavimas
- kairė - kairė
- dešinėje - dešinėje
- viršuje - aukščiau
- apačioje - apačioje

frameborder – kraštinė aplink plaukiojantį rėmą
- 1 - įjunkite rėmą
- 0 - išjunkite rėmą

Taip atrodys „iframe“ žyma su atributais:

Jei jūsų naršyklė nepalaiko rėmelių, galite įterpti tekstą " Oi! Jūsų naršyklė nepalaiko rėmelių. » tarp žymų .
Tai atrodys taip:
Oi! Jūsų naršyklė nepalaiko rėmelių.
Pavyzdžiui, prie failo „content.html“ pridėkime „iframe“:
Pagrindinis puslapis
Pagrindinis puslapis
Svetainės turinys – „Pagrindinis puslapis (turinys.! Jūsų naršyklė nepalaiko rėmelių.

Ankstesnis įrašas
Kitas įrašas

Skaityti:

Įvesta programavimo kalba Ką daryti su visais šiais kintamųjų tipais Geriausių belaidžių ausinių įvertinimas Pagrindinė mobiliojo įrenginio kamera dažniausiai yra korpuso gale ir naudojama fotografuoti bei filmuoti Kaip persijungti į kitą operatorių išsaugant savo numerį phableto apžvalga, brangi, bet labai kompetentinga

Populiaru:

Išmanusis telefonas Sony Xperia Tipo: charakteristikos ir apžvalgos Sony Xperia Tipo: atsiliepimai

Išmanusis telefonas Sony Xperia Tipo: charakteristikos ir apžvalgos Sony Xperia Tipo: atsiliepimai

Nauja

Kaip atkurti menstruacinį ciklą po gimdymo:

Geriausių belaidžių ausinių įvertinimas

Geriausių belaidžių ausinių įvertinimas

Ar galima nebrangiai įsigyti universalių ausų? 3000 rublių – ar už tokius pinigus galima nusipirkti kokybiškų ausinių? Kaip paaiškėjo, taip. Ir kalba...

Pagrindinė mobiliojo įrenginio kamera dažniausiai yra korpuso gale ir naudojama fotografuoti bei filmuoti

Pagrindinė mobiliojo įrenginio kamera dažniausiai yra korpuso gale ir naudojama fotografuoti bei filmuoti

Atnaujinta planšetės versija su patobulintomis charakteristikomis ir dideliu autonomiškumu.Acer išmanieji telefonai retai lankomi...

Kaip persijungti į kitą operatorių išsaugant savo numerį

Kaip persijungti į kitą operatorių išsaugant savo numerį

Įstatymas dėl telefono numerio išsaugojimo, kai abonentas pereina prie kito mobiliojo ryšio operatoriaus, Rusijoje įsigaliojo gruodžio 1 d. Tačiau paaiškėjo, kad...

phableto apžvalga, brangi, bet labai kompetentinga

phableto apžvalga, brangi, bet labai kompetentinga

Apžvalga apie phablet, brangus, bet labai kompetentingas 2015-03-20 Esu vienintelis batsiuvys pasaulyje be batų, išmaniųjų telefonų apžvalgininkas be savo išmaniojo telefono....

Kompiuterio nustatymai, atnaujinimai, priežiūra, nustatymai

tiekimo vaizdas