7/25/2019 Tema Proiect HTML CSS JavaScript

1/3

Tema proiect HTML + CSS + JavaScript

1) HTML (10p)

In cazul in care lucrati 2 colegi la un proiect creati folderulNume1Prenume1_Nume2Prenume2, iar in

acest folder fisierele (text) index.html, pagina1.html, pagina2.html. Pagina index.html va fi pagina deprezentare, in principiu cea care se deschide la accesarea site-ului, celelalte doua pagini vor trata douasubiecte de interes la alegere (istorie, geografie, arhitectura, plante, animale, calculatoare, literatura,

cinematografie, sport, stiri, stiinta, hobby-uri, turism)In cazul in care lucrati singuri la proiect folderul se va numiNumePrenume

Veti adauga in acest folder orice alte fisiere (imagini, s.a. ) de care veti avea nevoie.

Pentru a inlatura orice confuzie,NumePrenume, Nume1Prenume1, Nume2Prenume2reprezinta nume

le si prenumele reale, conform carora se va face identificarea si notarea. ( Umorul utilizat in exces in

acest caz ar putea avea rezultate neprevazute)

Daca simtiti nevoie sa dati explicatii suplimentare sau sa faceti precizari legate de modul in care ati

realizat tema adaugati acestea intr-un fisier Readme.txt sau readme.doc in acest folder.

Predarea proiectului se va face prin trimiterea pe mail a folderului completat si arhivat in format

.zip sau .rar

CERINTE:

Cele trei pagini html vor avea urmatoarele elemente commune in :

Un antet continand descrierea paginii sau un mesaj de bun venit. (indicatie: se poate folosi tagul de

sectiune (division) si eventual un id pentru delimitarea acestuia).

Un meniu de navigare continand link-urile catre cele trei pagini asezae pe acelasi rand, separate

prin |.

O sectiune ( cu id de ex main) cu continutul principal al paginii.

Un footer ( cu id de ex f1) cu continut de genul Copyright FSA gr.1331 2015.

Continutul principal conditii minime pentru fiecare din cele trei pagini:

a. index.html va trebui sa contina un paragraf cu o scurta descriere a site-ului., un logo sau o

imagine si cateva link-uri catre site-uri de interes (la alegere)

b.

pagina1.html va trata unul din subiectele la alegere, va avea continutul organizat in catevaparagrafe, cu folosirea a cel putin doua tipuri de haedere interne, va contine cel putin o lista si

doua imagini color.

c. pagina1.html va trata cel de-al doilea subiect la alegere, organizarea acestuia fiind ca si pentru

prima pagina, in loc de lista va contine cel putin un tabel.

7/25/2019 Tema Proiect HTML CSS JavaScript

2/3

2)

CSS (10p)

Creati in folderul mentionat fisierele stil1.css, stil2.csssi folositi-le pentru a modifica componentele de

baza ale celor trei pagini astfel:

stil1.css - Antetul va primi culoarea de fundal = culoarea 1 din schema 1, meniul de navigare culoarea de

fundal =culoarea 2 din schema 1, sectiunea principal culoarea 3, iar footerul culoarea 4 Culoarea textului

si fonturile le veti allege pentru a asigura vizibilitatea si o oarecare estetica a paginii.

stil2.css la fel ca pentru stil1.css, cu folosirea insa a schemei 2 de culori conform descrierii de mai jos:

Schemele de culori pe care le veti folosi vor fi urmatoarele:

Culoare 1 Culoare 2 Culoare 3 Culoare 4

Schema 1 #DD3784 #7A005C #BC008D #DD64BF

Schema 2 #FF8240 #A63A00 #FF5900 #FFA743

Schema 3 #FFC340 #A67100 #FFAE00 #FFD373

Schema 4 #6 A4BD07 #200772 #3914AF #876ED7

Schema 5 #3C9DD0 #034569 #0B6CA2 #64AAD0

Schema 6 #39E639 #008500 #00CC00 #67E667

Schema 7 #C7F83E #739D00 #B1F100 #D4F870

Schema 8 #FFEC40 #A69500 #FFE500 #FFF573

Schema 9 #FFBD70 #A66D00 #FFA700 #FFCF73

Modul in care le veti folosi va fi urmatorul:

-

Reduceti la o cifra data nasterii fiecaruia prin adunarea repetata a cifrelor ( de ex 210619922 +

1 + 0 + 6 + 1+ 9 + 9 + 2 = 30 3 +0 =3 sau 2212199329112). In cazul in care sunteti 2

pe proiect una dintre schemele obtinute va fi cea corespunzatoare uneia dintre cifre, cealalta celeide-a doua cifre daca ele coincid alegeti o alta schema dupa preferinte pe post de schema 2. In

cazul in care lucrati singur la proiect alegeti o a doua schema diferita de cea corespunzatoare

cifrei natale cum doriti.

3)

JavaScript (10p)

Creati in folderul mai sus mentionat fisierul scripturi.jspe care il veti folosi pentru a realiza

urmatoarele modificari:

Modificati meniul de navigare comun celor trei pagini organizandu-l ca lista neordonata, dispusa

orizontal. Modificati scriptul stil1.css pentru ca aceasta lista sa apara in asa fel incat sa dea

senzatia unui meniu:

7/25/2019 Tema Proiect HTML CSS JavaScript

3/3

Adaugati un buton in sectiunea de antet si codul necesar astfel incat la apasarea butonului sa se

modifice culoarea de fundal a sectiunii principale (intr-o culoare la alegere, fixa sau a unei alte

sectiuni)

4)

Bonusuri (10p)

Utilizati JavaScript pentru ca atunci cand plasati cursorul mouse-ului pe una dintre imaginile

prezente in site (una singura, la alegere) sa apara imaginea respectiva in alb-negru, iar la iesirea

cursorului de pe imagine sa se revina la imaginea initiala color (5p)

Utilizati JavaScript si un eveniment (la alegere, pe oricare dintre pagini) pentru a rearanja cele 4

sectiuni din plasand antetul in partea stanga a sectiunii principale, deci facand sa apara 2

coloane deasupra footer-ului (5p).