Html și css lecții, lecție 4

1. Organizarea cadrelor

Ramele sunt folosite pentru a împărți o fereastră a browserului în mai multe zone, fiecare dintre acestea fiind un document HTML separat (cadru sau cadru).

Scopul adevărat al cadrelor este navigația (și nu un mijloc pentru aspectul paginii). Ideea cadrului este de a împărți ecranul în mai multe zone sau ferestre. Aceasta vă permite să vedeți simultan mai multe documente și vă permite să ancorați definitiv navigația pe ecran.

Atunci când se utilizează un design simplu cu două cadre (figura 1) sunt implicate trei documente:

Un document care descrie structura cadrului,
document pentru cadrul din stânga,
document pentru cadrul drept.

Fig. 1. O structură simplă a cadrelor de două cadre

Ramele sunt cuprinse în structură și . înlocuind în pagină cu cadre structura și , și anume documentul care descrie structura de cadru nu are etichete și .

Aveți posibilitatea să încorporați zonele cadru.

Etichete atribute

Acest atribut specifică numărul și lățimea coloanelor cadru. Lățimea coloanelor poate fi specificată în pixeli sau în procente.

cols = n - definește o coloană cu o lățime de n pixeli.

cols = n% - alocă coloana dată a cadrului n% - cota lățimii ferestrei browserului.

Acest atribut specifică numărul și înălțimea liniilor cadru. Înălțimea rândurilor poate fi specificată în pixeli sau în procente.

r = n - specifică un șir cu o înălțime de n pixeli.

rows = n% - alocă această linie a cadrului n% - proporția înălțimii ferestrei browserului.

Acest atribut specifică afișarea cadrelor structurii cadru.

frameborder = da - este afișat cadrul 3D (valoarea implicită).

frameborder = nu - cadrul este invizibil

Este mai bine să definiți rânduri și coloane nu în pixeli, ci utilizând valori relative. Asteriscul (*) este folosit pentru a indica faptul că ecranul este împărțit în părți proporționale: COLS = "*, *, *" - corespunde cu COLS = "33%, 33%, 33%".

În valorile COLS (coloana), ROWS (șir), lista trebuie să fie cuprinsă în ghilimele. Dacă nu se utilizează citate, nu trebuie să existe spații între valori.

Să considerăm un exemplu de cod simplu al structurii de cadru, prezentat în Fig. 1.

Cesiune practică 1

Creați dosarul de cadre. Copiați fișierele cu imagini de fond fon3.jpg, fon8.jpg, fon10.jpg din folderul html_css_4
Deschideți fișierul shablon.html
Modificați codul ca în listă în Figura 2. Salvați documentul ca frames_2.html
Creați fișierul ca în figura 3. Salvați documentul ca doc1.html
Creați fișierul ca în figura 4. Salvați documentul ca doc2.html
Rulați fișierul frames_2.html cu un dublu clic. În fereastra browserului Internet Explorer, pagina Web ar trebui să arate ca cea din Fig. 1

Figura 2. Structura cadru cu două coloane

Figura 3. Document doc1.html

Figura 4. Documentul doc2.html

În Fig. 1 arată aspectul acestei pagini HTML în browser. Ecranul este împărțit pe verticală în 2 cadre. Ramă stângă ocupă 25% din ecran și conține o pagină numită doc1.html. Cadrul drept va lua 75% din ecran și conține pagina doc2.html.

etichetă definește un cadru separat. Aceasta este o etichetă necorespunzătoare. etichetă trebuie să existe exact cât mai multe zone ca ecranul se împarte. Eticheta sunt disponibile următoarele atribute:

Acest atribut interzice utilizatorului să redimensioneze cadrele pentru a preveni denaturarea designului paginii.

Sarcina practică 2

Deschideți fișierul shablon.html.
Modificați textul ca în listă în Figura 5.
Salvați documentul în directorul cadre ca frames_3.html
În noul document, tastați textul afișat în listare 6. Salvați documentul ca doc3.html
Rulați fișierul frames_3.html cu un dublu clic. În fereastra browserului Internet Explorer, pagina Web ar trebui să arate ca cea din Fig. 7.

Vă atragem atenția asupra faptului că în structura cadru numărul de deschidere ar trebui să fie egală cu numărul de închidere

Figura 5. Structura cadru a trei cadre

Figura 6. Document doc3.html

Figura 7. Structura cadru a trei cadre

Creați un fișier cu structura de cadru a site-ului nostru MyHouse.ru, format din trei cadre (Figura 8). Salvați-l în folderul public_html ca index.html
Atribuiți numele principal în cadrul drept.
În cadrul superior, poziționați linia de rulare (fișierul shapka.html)
În cadrul din stânga, plasați lista de proiecte (fișier menu.html).
În cadrul drept este fișierul principal.html.

Figura 8. Structura cadru a site-ului MyHouse.ru

2. Organizarea de hyperlink-uri

Luați în considerare acum numai atributul necesar href.

Ancora de sursă este textul sau imaginea pe care utilizatorul dă clic pe mouse-ul pentru a merge la alt site web sau la o pagină Web.

Link-urile hyperlink-uri pot fi încorporate oriunde în documentul HTML.

În Fig. 9 arată un exemplu de cod HTML pentru crearea unui hyperlink și a vizualizării în browser-ul paginii cu acest cod:

Informații detaliate despre serviciile agenției noastre puteți obține

În acest exemplu, imaginea "ris.jpg" este un element snap grafic. Browserul îl evidențiază cu o margine albastră.

<а href="../folder/my.htm"> - accesați alt document de pe site-ul dvs.

exemplu: Textul hiperlinkului

Cesiune practică 3

Cesiune practică4

1. În folderul public_html, creați folderul proiectului. iar în interior este dosarul img_d_152_1d.

2. Creați o pagină web despre proiectul d-152-1d, utilizând materiale (texte și fotografii) din dosarul proiecte / d-152-1d. Pentru a proiecta o pagină web, ar trebui folosite stiluri din foaia de stil și formatare utilizând atributele de tag.

3. Trebuie folosite toate materialele. Ca rezultat, pe pagina web ar trebui să aveți următoarele blocuri: Titlu, Adnotare, Materiale, Preț pentru proiect, Planuri, Fațade

4. Salvați pagina web ca proiect_d-152-1d.html în dosarul proiectelor. Rezultatul aproximativ în Fig. 12.

Fig. 12. Pagina de web proiect_d-152-1d.html.

5. În pagina web townhouse.html, completați imaginea proiectului D-152-1D și fraza "Project D-152-1D" ca hyperlink-uri către pagina proiect_d-152-1d.html. care conține informații mai complete despre acest proiect (Figura 13).

6. Verificați funcționalitatea hyperlink-urilor.

Fig. 13. Imaginea este un hyperlink

De exemplu, trebuie să creați un link din cuprinsul primului capitol

1. În cuprinsul titlului din capitolul 1, trebuie să creați o înregistrare:

2. În interiorul paginii web de lângă titlul capitolului 1, creați o etichetă și utilizați atributul nume al etichetei dă-i un nume. Browserul nu evidențiază conținutul acestei etichete ca referință, deoarece este utilizat ca etichetă. În document, eticheta trebuie să fie unică.

Cesiune practică 5

1. Deschideți pagina web proiect_d-152-1d.html pe care ați creat-o.

2. Sub titlul "Designul casei nr. D-152-1D", adăugați paragrafe

3. Creați hyperlink-uri în pagină din fiecare element nou creat în secțiunea corespunzătoare a paginii Web (Figura 14, a)

4. În partea de jos a paginii, creați un hyperlink. când se face clic, utilizatorul va reveni în partea de sus a paginii (Figura 14, b).

Fig. 14. Link-uri în pagină

Specificarea culorii hiperlinkurilor

Culorile Web implicite pentru hyperlink-uri: albastru pentru hyperlinkurile ne-vizitate, roșu pentru hyperlink-uri activate (în momentul clicului), violet pentru hyperlinkurile deja vizitate.

Dacă valorile implicite ale acestor atribute nu sunt în mod clar compatibile cu designul paginii dvs., atunci valorile pot fi modificate. Pentru a face acest lucru, eticheta există atribute corespunzătoare.

Sarcina practică 6

În partea de sus a cadrului din stânga, faceți logo-ul un hyperlink grafic astfel încât atunci când este activat, pagina despre site (fișierul principal.html) este încărcată în cadrul drept.
Asigurați-vă că toate hyperlink-urile funcționează. Site-ul dvs. ar trebui să pară așa, după cum se arată în Fig. 15, când faceți clic pe link-ul "Proiecte de case și case blocate", ca în Fig. 16, când faceți clic pe imaginea proiectului D-152-1D ca în Fig. 17.

Fig. 15. Pagina de pornire a MyHouse.ru

Fig. 16. Vizualizarea site-ului cu link-ul activ "Proiecte de case și case blocate"

Fig. 17. Vizualizarea site-ului cu link-ul activ "Proiectul D-152-1D"

Lucrul cu elemente speciale

Lucrul cu elemente speciale este determinat folosind pseudo-clase.

O pseudo-clasă este un selector special care determină modul în care un element HTML se uită la un anumit moment.

De exemplu, CSS definește o pseudo-clasă care stabilește cum arată hyperlink-urile la anumite puncte în timp:

Puteți defini o pseudo-clasă pentru primul caracter al unui element. De exemplu, pentru un paragraf:

p: prima literă. Acest lucru este convenabil pentru specificarea efectelor speciale pentru capitalizare.

Cesiune practică 7

1. Pentru meniul de sus al paginii proiectului, includeți în fișier o specificație de stil extern specificând tipul de hyperlink în anumite puncte. Pentru aceasta, definiți parametrii stilului conform Fig. 18.

2. Testați stilul.

a - link-uri nu au fost vizitate

Fig. 18. Tipul de hyperlink la un moment dat

Cesiune practică 8

1. Pentru elementul "Proiecte de case și case blocate" includeți în fișier o specificație de stil extern specificând tipul de hyperlink la anumite momente. Pentru aceasta, definiți parametrii stilului conform Fig. 19.

2. Testați stilul. Rețineți că culoarea de fundal și alte elemente de meniu nu se modifică. Numai tipul de hyperlink ar trebui să se schimbe.

Fig. 19. Tipul de hyperlink "Proiecte de case și case blocate"

3. Pentru un element cu numele proiectului pe pagina proekt_townhouse.html includeți în fișier o specificație de stil extern specificând tipul de hyperlink în anumite puncte. Pentru aceasta, definiți parametrii stilului conform Fig. 20.

4. Testați stilul.

Fig. 20. Tipul de hyperlink pentru numele proiectelor

Ca urmare a acestui subiect, ar fi trebuit să creați următoarele fișiere:

Articole similare

Pagina anterioară

Pagina următoare