UNIVERSITATEA PETROL-GAZE DIN PLOIEŞTI

Specializarea INGINERIA ŞI INFORMATICA PROCESELOR

CHIMICE ȘI BIOCHIMICE
- Învăţământ cu frecvenţă –

SISTEME INFORMATICE INTEGRATE

Suport de laborator

Ploiești 2020
 Laborator 5. Aplicația KompoZer
5. 1. Introducere

KompoZer este o platformă care conține o suită de aplicații internet, open-source,

realizat de către Mozilla Organization. KompoZer este un editor HTML de tipul WYSIWYG
(What You See Is What You Get) ce ajută la crearea paginilor Web mult mai ușor și intuitiv
față de metoda clasică de a scrie absolut tot codul HTML într-un editor de text.
5. 2. Instalare produs KompoZer

Pasul 1. Se caută cu ajutorul unui motor de căutare platforma KompoZer. O posibilitate

este de a accesa site-ul https://sourceforge.net/projects/kompozer/ Dacă nu începe procesul de
descărcare a programului, se dă clic pe butonul cu același nume.
Pasul 2. Se instalează platforma, urmând instrucțiunile kitului de instalare.
Pasul 3. Când se deschide, aplicația are interfața asemănătoare cu cea din Figura 1.

Figura 1

5. 3. Crearea unei pagini cu KompoZer

Pasul 4. Pentru a vedea utilitatea acestei aplicații, vom crea o pagina de prezentare a
unor produse. Se va crea folderul Laborator 5 ce va conține alte trei foldere:
- html (ce conține toate paginile cu extensia html),
- imagini (ce va conține toate imaginile utilizate),
- style (ce va conține toate fișierele css).

Pasul 5. În Figura 2 este prezentată o posibilă proiectare a paginii de început.

 Figura 2

Pasul 6. Se salvează pagina deschisă cu numele Acasa.html (Figura 3).

Figura 3

Pasul 7. Pentru a așeza elementele ca în Figura 2 este nevoie de un tabel de structura cu

6 rânduri și 2 coloane. În aplicația KompoZer pentru a insera tabelul se utilizează opțiunea
Table-Insert- Table. Se completează câmpurile conform cerințelor (Figura 4).
 Figura 4

Pasul 8. În partea de jos a paginii există 3 modalități de vizualizare a paginii: Design-

cum este acum, Source- arată codul HTML al paginii și Split- arată atât partea de design cât și
partea de cod. Pentru a evidenția ajutorul dat de această aplicație, se apasă opțiunea Source
(Figura 5). Tot acest cod a fost generat automat de către aplicație, grija dezvoltatorului fiind
partea de design.

Figura 5

Pasul 9. Se revine la modul de vizualizare Design. Pe prima linie a tabelului se dorește

inserarea unui alt tabel cu 2 linii și 2 coloane. Se procedează astfel:
a. se unesc cele doua celule de pe acest rând (Figura 6): se selectează cele două celule,
clic dreapta pe selecție, se apasă opțiunea Join Selected Cells.
 Figura 6

b. se inserează un nou tabel (Figura 7). Clic dreapta in celula nou creată, Table Insert-
Table.. În fereastra apărută se completează elementele dorite si se apară butonul OK.

Figura 7

Pasul 10. Noul tabel va avea de asemenea unite cele doua celule de pe prima coloană,
pentru a putea insera poza cu logoul firmei. Acest lucru se execută similar pasului 9a.
Pasul 11. Se dă clic în această nouă celulă și se accesează meniul Insert- Image. Se
selectează poza dorită, textul alternativ, dimensiunile și se apară ok (Figura 8).
 Figura 8

Pasul 12. În același tabel, pe coloana 2 se scriu numele firmei pe primul rând și mottoul
firmei pe cel de-al doilea rând. Se pot redimensiona celulele cu ajutorul riglei ce apare pe
marginea acestuia (Figura 9)

Figura 9

Pasul 13. Pe a doua linie a tabelului mare trebuie să fie meniul de navigare. Astfel, se
unesc cele două celule pentru a putea insera, apoi un tabel cu 1 rând și 6 coloane. Se procedează
similar pasului 9 (Figura 10).
Pasul 14. Se completează meniul. Pentru a crea legăturile de la meniul Despre noi, de
exemplu către pagina cu același nume, aceasta din urmă trebuie să existe în momentul creării
linkului.
 Figura 10

Pasul 15. Se selectează cuvintele Despre noi. Se apasă butonul Link de pe bara de
instrumente. În fereastra nouă se selectează pagina HTML dorită și se apasă butonul Open, apoi
OK (Figura 11).

Figura 11

Pasul 16. Se vor salva imaginile cu produsele (în exemplul nostru, florile) dorite in
folderul imagini.
Pasul 17. Pe rândul 3 al tabelului mare, pe prima coloana se va insera o poza cu o floare,
asemănător Pasului 11.
Pasul 18. Pe același rând, coloana a doua se vor insera informații pe scurt despre această
floare.
Pasul 19. Cuvintele Mai multe detalii vor constitui un link către pagina Begonie.html,
salvată în folderul html (Figura 12).
 Figura 12

In browser, pagina se vede ca în Figura 13.

Figura 13

5. 4. Crearea stilurilor pentru pagina Acasa.html

Pasul 20. Se va alege varianta de a fi stocate toate stilurile necesar într-o foaie de stiluri
externa (Figura 14). Din meniul Tools se selectează CSS Editor sau se apasă butonul CSS de
pe bara de instrumente.
 Figura 14

Pasul 21. În fereastra nou apărută, se apasă săgeata cu vârful in jos de lângă paleta de
culori, se selectează Style rule și se bifează a doua opțiune- style applied to all elements of class
(Figura 15).
Pasul 22. Se denumeste stilul .titlul1 și se apasă butonul Create style rule.

Figura 15

Pasul 22. Se setează diferite opțiuni pentru acest stil (Figura 16).
De exemplu:
.titlu1 {
font-family: Arial,Helvetica,sans-serif;
font-size: 36px;
color: black;
font-weight: bolder;
font-style: normal;
text-align: center;
 background-color: #ffcc99;
}

Figura 16

Pasul 23. Se creează similar diferite stiluri pentru formatarea paginii Acasa.html.
Pasul 24. Se apasă butonul Export stylesheet, se completează numele fișierului
stiluri.css și se salvează.
Pasul 25. Pentru a inporta aceasta foaie cu stiluri în orice altă pagină html se procedează
la fel: Din meniul Tools- CSS Editor- se apasă săgeata cu vârful în jos de lângă paleta de culori,
se selectează Linked Stylesheet și apoi se importă fișierul dorit (Figura 17).

Figura 17

Pasul 26. Pentru a se aplica de exemplu textului “SC Firma noastra SRL” stilul .titlu1
se selectează textul. În bara de instrumente, LÂNGĂ meniul derulant cu prima opțiune Body
text, se caută în meniu stilul .titlul1 și se selectează.
 Figura 18

A doua variantă este ca, după selectarea textului, în partea de jos a paginii să se dea clic
dreapta pe ultima etichetă ce apare (în Figura 19 este <tr>) și din meniu să se selecteze pentru
Classes stilul .titlul1.

Figura 19

Până la acest pas de implementare pagina Acasa arată ca în Figura 20.

 Figura 20

Observație. O dată creată o prima pagina a site-ului, cel mai ușor pentru a genera restul
fișierelor este de a o refolosi pe aceasta, deoarece de obicei antetul (logo, numele firmei, motto,
meniul de navigare, partea de jos Copyright etc) este o zonă comună tuturor paginilor pentru a
da unitate între ele.
În meniul File- Save as..., se completează, de exemplu, cu numele Contact.html. Se șterg
elementele ce nu țin de pagina aceasta și se înlocuiesc cu altele specifice.

Exerciții:
1. Observați codul HTML generat automat de KompoZer. Credeți că există
vreo diferență ca timp între a crea pagina Acasa.html folosind o aplicație ca
KompoZer și a crea pagina doar cu un editor de text?
2. Completați pagina Acasa.html astfel încât să arate ca în Figura 2.
3. Completați cu alte stiluri CSS utilizate pentru personalizarea paginii
Acasa.html.