Tema proiect HTML + CSS + JavaScript
1) HTML (10p)
In cazul in care lucrati 2 colegi la un proiect creati folderul Nume1Prenume1_Nume2Prenume2, iar in
acest folder fisierele (text) [Link], [Link], [Link]. Pagina [Link] va fi pagina de
prezentare, in principiu cea care se deschide la accesarea site-ului, celelalte doua pagini vor trata doua
subiecte 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 numi NumePrenume
Veti adauga in acest folder orice alte fisiere (imagini, s.a. ) de care veti avea nevoie.
Pentru a inlatura orice confuzie, NumePrenume, Nume1Prenume1, Nume2Prenume2 reprezinta 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 [Link] sau [Link] 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 <body>:
Un antet continand descrierea paginii sau un mesaj de bun venit. (indicatie: se poate folosi tagul de
sectiune (division) <div> si eventual un id pentru delimitarea acestuia).
Un meniu de navigare <nav> continand link-urile catre cele trei pagini asezae pe acelasi rand, separate
prin |.
O sectiune (<div> cu id de ex main) cu continutul principal al paginii.
Un footer (<div> 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. [Link] 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. [Link] va trata unul din subiectele la alegere, va avea continutul organizat in cateva
paragrafe, cu folosirea a cel putin doua tipuri de haedere interne, va contine cel putin o lista si
doua imagini color.
c. [Link] 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.
2) CSS (10p)
Creati in folderul mentionat fisierele [Link], [Link] si folositi-le pentru a modifica componentele de
baza ale celor trei pagini astfel:
[Link] - 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.
[Link] la fel ca pentru [Link], cu folosirea insa a schemei 2 de culori conform descrierii de mai jos:
Schemele de culori pe care le veti folosi vor fi urmatoarele:
Schema 1
Schema 2
Schema 3
Schema 4
Schema 5
Schema 6
Schema 7
Schema 8
Schema 9
Culoare 1
#DD3784
#FF8240
#FFC340
#6 A4BD07
#3C9DD0
#39E639
#C7F83E
#FFEC40
#FFBD70
Culoare 2
#7A005C
#A63A00
#A67100
#200772
#034569
#008500
#739D00
#A69500
#A66D00
Culoare 3
#BC008D
#FF5900
#FFAE00
#3914AF
#0B6CA2
#00CC00
#B1F100
#FFE500
#FFA700
Culoare 4
#DD64BF
#FFA743
#FFD373
#876ED7
#64AAD0
#67E667
#D4F870
#FFF573
#FFCF73
Modul in care le veti folosi va fi urmatorul:
-
Reduceti la o cifra data nasterii fiecaruia prin adunarea repetata a cifrelor ( de ex 21061992 2 +
1 + 0 + 6 + 1+ 9 + 9 + 2 = 30 3 +0 =3 sau 22121993 29 112). In cazul in care sunteti 2
pe proiect una dintre schemele obtinute va fi cea corespunzatoare uneia dintre cifre, cealalta celei
de-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 [Link] pe 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 [Link] pentru ca aceasta lista sa apara in asa fel incat sa dea
senzatia unui meniu:
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 <body> plasand antetul in partea stanga a sectiunii principale, deci facand sa apara 2
coloane deasupra footer-ului (5p).