Programare WEB

Configurarea blocurilor de
text. Crearea structurii
paginii web folosind css.

CSS.
DIV si SPAN
 Tag-urile <div></div> si <span></span> nu au efecte
importante daca sunt folosite singure.

 - Tag-ul DIV creaza sectiuni de blocuri in pagina, al caror

forma si grafica de continut pot fi manipulate pentru
fiecare separat. Are doar un singur atribut HTML, align
(pt. aliniere pe orizontala) care poate avea urmatoarele
valori: left (stanga), right (dreapta), center (centru),
justify (distanta textului fata de margini egala).

 - Tag-ul SPAN creaza posibilitatea modificarii separate a

unei portiunii dintr-un context, putand fi folosit si ca o
"classa" cu CSS. Singur nu are nici un efect vizual
poropriu si nu foloseste nici un atribut HTML special.
DIV si SPAN
 Chiar daca folosite singure, DIV si SPAN
nu au nici un efect major, in combinatie cu
CSS pot crea aspecte grafice importante.
Pentru aceasta, ambele pot folosi atributul
style (cu proprietati CSS) ori atributele id
sau class ca identificator pentru stiluri
CSS.
Chenare şi margini
 Fiecare element HTML poate fi înţeles ca
o casetă dreptunghiulara (box), iar toate
cutiile au aceeaşi structură: "width",
"padding", "border" şi "margin".
•marginea (margin) este spaţiul exterior chenarului pînă la celelalte elemente

•chenarul (border) este o bordură care înconjoară elementul

•completarea (padding) stabileşte distanţa dintre conţinut şi chenar

•conţinutul include informaţia utilă (text, tabele, imagini, formulare, etc.)

Originea elementului este considerat colţul din dreapta sus faţă de care se vor
raporta toate dimensiunile prezentate în continuare.
 Aspectul bordurii poate fi stabilit prin atributul border-style; stilul
este aplicat celor patru margini si este definit astfel:

 selector { border-style:valoare; }

 Pentru specificarea valorii, pot fi folosite urmatoarele tipuri:

Crearea structurii paginii web
 Pentru crearea paginii pot fi folosite următoarele
metode a designului web:

 design bazat pe freimuri;

 design bazat pe elemente liber poziţionate

 design bazat pe tabele;

Design bazat pe freimuri
 În acest caz pagina web se împarte în mai mult părţi, ca de obicei
se împarte în titlu, meniu, content şi copyright. Fiecare parte
reprezintă o pagina web independentă. Aceste ferestre se numesc
freimuri, iar ansamblul de freimuri, care alcătuiesc pagina web se
numesc set de freim.

 Avantaj – la schimbarea punctului al meniului se încarcă numai

pagina contentului, celelalte pagini rămin neschimbate, rezultă că
viteză de încărcare a paginii web creşte.

 Neajuns- reînnoirea conţinului se poate de făcut numai la un singur

freim; Necompatibilitatea din partea web brouserului, nu sunt reguli
de afişarea freimurilor, fiecare browser afişează cum ştie.
Design bazat pe elemente liber poziţionate
 Elemente liber poziţionate sunt elemente, poziţia, marimea cărora
sunt independente de elementele vecine (pot şi suprapune unul pe
altul). Parametrii specifici ale elementului liber poziţionat sunt:

 Nivelul (z-index) – nivel de suprapunere;

 Vizibilitatea;
 Acţiune, dacă conţinutul lui va ieşi din graniţa mărimei lui (scroll).

 Neajunsuri
 Sunt nemobile – la schimbarea mărimii paginii web rămîn la locurile
iniţiale;
 Necompatibilitatea din partea web browserului, nu sunt reguli de
afişarea, fiecare browser afişează cum ştie.
Design bazat pe tabele
 Cel mai des acum la crearea paginilor web este utilizat design bazat
pe tabele, adică pagina web reprezintă un tabel mare.

 TITLU PAGINII WEB

 MENIU
 CONTENT
 NOUTĂŢI
 COPYRIGHT

 Neajunsuri
 Lucrează mai lent decît pagina bazată pe freimuri, deoarece
elementele constante ale web sitului (titlu, meniu,copyright, noutăţi)
se incarca din nou fiecare dată la incărcarea altor pagini web a sitului.