Sfaturi pentru cadre HTML pentru probleme comune

click fraud protection

La fel de designeri web, cu toții dorim să lucrăm cu cele mai noi și mai noi tehnologii. Cu toate acestea, uneori suntem blocați lucrând pe pagini vechi care, dintr-un motiv sau altul, nu pot fi actualizate la standardele web actuale. Puteți vedea acest lucru în anumite aplicații software care ar fi putut fi create personalizat pentru companii cu mulți ani în urmă. Dacă aveți sarcina de a lucra pe aceste site-uri, vă veți murdări, fără îndoială, lucrând cu un cod vechi. S-ar putea să-i vezi chiar pe aor doi acolo!

Elementul HTML a fost un dispozitiv de proiectare de site-uri acum câțiva ani, dar este o caracteristică pe care o vedeți rar pe site-uri în zilele noastre - și pentru un motiv întemeiat. Să vedem unde este asistența astăzi și ce trebuie să știți dacă sunteți forțați să lucrați cu cadre pe un site web vechi.

Suport HTML5 pentru cadre

HTML5. Aceasta înseamnă că, dacă codificați o pagină web utilizând cea mai recentă iterație a limbajului, nu puteți utiliza cadre HTML în document. Dacă doriți să utilizați unHTML 4.01 sau XHTML pentru tine tipul de documente al paginii.

instagram viewer

Deoarece cadrele nu sunt acceptate în HTML5, nu veți utiliza acest element pe un site nou construit. Acest lucru îl veți întâlni doar pe acele site-uri vechi menționate mai sus.

Să nu vă confundați cu iFrames

HTML-ul

Direcționarea cadrelor HTML

OK, deci totul despre cadrele învechite fiind spus, ce se întâmplă dacă trebuie să lucrați cu aceste bucăți vechi de HTML?

Dacă utilizați un tip de documente mai vechi și doriți să utilizați cadre HTML, există câteva probleme comune pe care ar trebui să le cunoașteți. Una dintre aceste probleme este deschiderea linkurilor în corect cadru. Aceasta se numește direcționare. Dați etichetelor dvs. de ancorare un „ţintă"pentru a deschide linkurile lor în. Ținta este de obicei numele cadrului.


În setul de cadre de mai sus, există două cadre, primul se numește „nav” și al doilea se numește „principal”. Ne putem imagina că cadrul nav (frame1.html) este de navigare și toate legăturile din cadrul acestuia ar trebui să se deschidă în cadrul principal (frame2.html).

Pentru a face acest lucru, ați da linkurilor din cadrul 1 ținta „principal”. target = "main">. Dar dacă nu doriți să adăugați ținta la fiecare link de pe pagina dvs. de navigare? Puteți seta o țintă implicită în HEAD-ul documentului dvs. Aceasta se numește țintă de bază. Ai adăuga linia

Rame și Noframe

Una dintre cele mai utilizate secțiuni din eticheta cadrelor este noframele. Această etichetă permite persoanelor cu browsere incompatibile cu cadre să vă vizualizeze pagina (acest lucru nu funcționează pentru HTML5, doar pentru browsere foarte vechi, fără suport pentru cadre - deci nu puteți încerca să înghesuiți acest lucru în HTML5 pentru a-l face muncă. Bună încercare, dar fără noroc.), Și acesta este scopul final, nu-i așa?

Într-un set tipic de cadre, codul HTML arată astfel:


Aceasta va crea o pagină cu două cadre, partea superioară având 40 de pixeli înălțime, iar partea de jos fiind restul paginii. Acest lucru ar face un cadru frumos de bare de navigare de sus, cu branding și navigare în cadrul de 40 de pixeli.

Cu toate acestea, dacă unul dintre spectatorii dvs. accesează site-ul dvs. pe un browser incompatibil cu cadre, vor primi o pagină goală. Șansele ca aceștia să se întoarcă pe site-ul dvs. sunt destul de mici și, pentru a fi vizibil de către ei, trebuie să adăugați încă patru linii de HTML:


Acest site este încadrat, dar puteți vizualizați o versiune fără cadru.

Deoarece indicați partea conținutului setului de cadre (frame2.html) din partea noframes a paginii, site-ul dvs. devine accesibil.

Rețineți că, în timp ce este posibil să utilizați cea mai recentă versiune de browserul preferat, este posibil ca publicul dvs. să nu dorească să descarce continuu cele mai recente programe software. Este posibil ca mașina lor să nu o accepte sau să nu aibă spațiu pentru a instala un program de peste 20 Meg pe hard diskul lor. Adăugarea a patru linii de HTML este o soluție simplă.

instagram story viewer