Creați un meniu sub forma unui tabel

Până acum, am creat documente în care textul se afla într-una din coloane. În practică, uneori este necesar să se aranjeze textul în două sau trei coloane. Masa poate ajuta în acest sens. În plus, un tabel constând dintr-o singură celulă poate evidenția în mod eficient o piesă de text pe care doriți să o atrageți atenția asupra cititorului. Este foarte convenabil să se alterneze în celulele desenelor și textului tabelului. Bineînțeles, masa este necesară pentru afișarea informațiilor într-o formă tabelară. Deseori masa este folosită pentru a reprezenta meniul.

Creați un nou fișier de tabel dintr-o coloană, în celule din care, ca în meniu, vom prezenta legături către paginile existente și alte pagini ale site-ului care nu au fost încă create. La urma urmei, un site poate conține zeci de pagini. Prin urmare, este foarte important să puteți selecta rapid pagina dorită din meniu. Acest meniu va fi apoi plasat la marginea din stânga a ecranului astfel încât acesta să rămână permanent în câmpul vizual al utilizatorului.

u Creați un fișier text nou selectând File / New din meniul Notepad.

u Introduceți etichetele principale care creează structura documentului. În titlul documentului, selectați Meniu. Culoarea de fundal și textul documentului trebuie să fie selectate de dvs. însuși, astfel încât link-urile să fie vizibile în mod clar:

Fiecare tabel începe cu o etichetă

Având în vedere cele de mai sus, codul HTML care descrie tabelul nostru, constând dintr-o coloană și care conține elemente de meniu cu numele paginilor site-ului, ar trebui să aibă următoarea formă:

Ce facem?

Despre compania dvs.

Comunicarea cu compania

u Introduceți o linie goală între deschidere și închiderea și, începând cu aceasta, introduceți codul specificat.

u Salvați documentul în folderul Web ca meniu.html.

u Deschideți meniul file.html din fereastra browserului.

Tabelul pe care l-am creat este situat la marginea din stânga a ecranului. Această poziție poate fi modificată prin utilizarea în eticheta de deschidere

u Adaugă pentru a eticheta

Acum masa va fi afișată cu margini de relief.

Dimensiunea mesei este de obicei setată de browser în mod automat, astfel încât tot conținutul să fie afișat. Cu toate acestea, puteți seta lățimea fixă ​​a tabelului în pixeli utilizând atributul de lățime.

► Stabiliți lățimea tabelului la 140 de pixeli adăugând lățimea atributului = 40 la eticheta de deschidere

În fereastra browserului, lățimea tabelului va scădea, astfel încât în ​​majoritatea celulelor textul va fi afișat în două rânduri.

Când utilizați tabela de etichete pentru a genera coloane

Meniul nostru va arăta mai bine dacă elementele sale sunt centrate în celule și evidențiate cu caractere aldine. Prin urmare, înlocuim elementele din codul HTML

► Editați fișierul menu.html. înlocuirea etichetelor

În etichete

► Experimentați culorile și alegeți cele care vă corespund, din punctul dvs. de vedere, pentru masă.

► Editați linia din meniul .html cu liniile de cod care conțin numele articolelor din meniul Home și Ce facem? inserând link-urile menționate mai sus în fișierele .html și spisok .html, astfel încât aceste linii să aibă următoarea formă:

Acum primele două elemente de meniu sunt evidențiate în culoare și subliniate ca link-uri. Să verificăm modul în care funcționează aceste linkuri.

► Faceți clic pe primul link - Acasă. În funcție de versiunea browserului, fișierul geoton .html va fi descărcat fie într-un nou browser independent, fie în aceeași fereastră de browser.

► Dacă fișierul a fost descărcat în aceeași fereastră de browser, faceți clic pe butonul Înapoi din bara de instrumente sau închideți doar fereastra dacă fișierul a fost încărcat într-o fereastră nouă. Ecranul va afișa din nou meniul .html.

► Faceți clic pe al doilea link - Ce facem? Fișierul .hml spisok apare în fereastra browserului.

Deci, pe baza tabelului, am creat un meniu și ne-am asigurat că linkurile din el funcționează.

Îmbunătățirea semnificativă a aspectului și a funcționalității site-ului poate fi folosită în cadre. Cu ajutorul cadrelor, ecranul este împărțit în mai multe ferestre, fiecare afișând conținutul unei pagini separate. Utilizând aceeași tehnologie a cadrelor, este posibil să încărcați simultan mai multe pagini Web într-o singură fereastră de browser.

Fig. 1 Fereastră de browser cu cadre

Să vedem cum să folosim cadrele pentru a plasa un meniu în fereastra browserului pentru a vă deplasa la alte pagini ale site-ului și la paginile în sine.

Un fișier HTML special este folosit pentru a descrie cadrele.

► În fereastra programului Notepad, creați un fișier nou.

► Introduceți etichetele principale, cu excepția etichetelor , care nu sunt utilizate în fișierul care descrie cadrele. În etichete titlu indica - Compania GEOTON:

În loc de etichete în fișierul care descrie cadrele, este utilizată o pereche de etichete cu atributele de rânduri sau colți. Determinați modul în care ecranul este împărțit orizontal sau vertical. Pentru valorile acestor atribute, puteți utiliza valoarea numerică a înălțimii sau lățimii cadrului în pixeli sau în procente de la 1% la 100%. De exemplu, dacă doriți să împărțiți orizontal fereastra browserului în două cadre de dimensiuni egale, atunci codul HTML ar trebui să fie:

Notă: valorile atributelor sunt separate una de alta printr-o virgulă.

Pentru a împărți fereastra browserului vertical în două cadre cu o lățime de 200 și 600 de pixeli, trebuie să scrieți:

Cu toate acestea, lățimea și înălțimea reală a ferestrei de cadru depind de rezoluția curentă a monitorului. Prin urmare, dacă utilizatorul are o rezoluție, de exemplu, 1024x768 pixeli, adică lățimea ecranului este de 1024 pixeli, atunci o parte a ecranului poate rămâne necompletată. Prin urmare, este recomandat să setați dimensiunile cadrelor în procente astfel încât suma lor să fie 100%. Dacă totuși trebuie să specificați o dimensiune fixă ​​în pixeli pentru unul dintre ferestre, atunci dimensiunea celeilalte ferestre poate fi omisă, înlocuindu-i valoarea cu simbolul *. În acest caz, browserul însuși va selecta dimensiunea corectă pentru a doua fereastră.

Creați două cadre verticale pentru afișarea site-ului nostru. Pentru primul cadru în care va fi afișat meniul, setați lățimea fixă ​​la -160 pixeli, iar dimensiunea celui de-al doilea va fi determinată de browser, înlocuindu-l cu un asterisc *.

► În fereastra Notepad introduceți o linie goală după eticheta de închidere și introduceți următorul cod:

► Introduceți o linie goală în fereastra Notepad după eticheta de deschidere și introduceți eticheta specificată.

Fișierul geoton .html ar trebui încărcat în cel de-al doilea cadru. astfel încât a doua etichetă va fi:

► Introduceți acest cod prin inserarea unei linii goale înaintea etichetei de închidere .

► Salvați fișierul în folderul Web ca index .html.

Codul final al fișierului index.html din fereastra Notepad ar trebui să fie după cum urmează:

Numele indexului .html trebuie să fie întotdeauna atribuit fișierului cu pagina principală a fiecărui site. Acest fișier este deschis în mod implicit când accesați site-ul Web, cu excepția cazului în care specificați un alt nume de fișier. Pe unele site-uri, numele paginii principale poate fi indexul .htm. un index .html este afișat nu ca o pagină, ci ca un dosar cu nume de fișiere. Acest lucru trebuie verificat împreună cu administratorul site-ului.

Fig.2. Sunt create cadre.

Să verificăm modul în care funcționează legăturile de meniu.

► Faceți clic pe linkul de meniu Ce facem? În cadrul drept, fișierul spisok .html va fi deschis.

► Faceți clic pe link-ul Mouse din meniul principal. În cadrul drept, fișierul .html din geoton apare din nou.

Rețineți că fiecare cadru are propriile bare de defilare. Dacă este necesar, ecranul lor poate fi anulat. Pentru a face acest lucru, e suficient în etichetă specificați atributul scrolling = nu.

► Adăugați scrolling = fără atribut tag-ului care descrie primul cadru:

În fereastra browserului, pagina Web va arăta ca în Fig. 3.

Fig. 3. Bara de derulare verticală este oprită.

După cum puteți vedea, cadrele sunt un instrument convenabil și eficient pentru afișarea informațiilor pe paginile Web. Cu toate acestea, prin utilizarea acesteia, nu trebuie să pierdeți simțul proporției. Prea multe ferestre de pe ecran nu îmbunătățesc percepția informațiilor. Nu plasați mai mult de trei cadre pe ecran și încercați să nu le aplicați în mod inutil.

Astfel, prima etapă a lucrării noastre este finalizată - am creat un site Web din două pagini Web. Acum că este disponibil pentru toată lumea, acesta trebuie să fie plasat pe Internet pe unul dintre serverele World Wide Web.

Creați prima pagină Web. 3

Specificați fontul, dimensiunea fontului și alt tip de text. 6

Pastram imaginea. 11

Creați o listă a capabilităților noastre. 12

Revizuiți recenzii și sugestii pe pagina noastră. 14

Pastram link-uri catre alte pagini din Internet. 16

Creați un meniu sub forma unui tabel. 20

Sarcini finale. 24

Articole similare

• Meniul dietei Kremlin pentru 10 zile, masa este plină - pentru pierderea în greutate

• Meniu pe masa de Anul Nou 2019

• Adobe după efecte - creați bliț