Notiuni introductive:
1. Inventarierea solutiilor de web design, obtinerea programului X5
2. Interfata, modul de lucru.
3. Exportul proiectului sub alt nume, gestionarea proiectelor.
Daca vi se pare complicata aceasta lectie, o puteti sari deoarece informatiile se vor relua in lectiile urmatoare.
Exercitiul 1:

4. Editarea continutului: paragrafe de text, formatare de text, inserare de imagini, particularizarea layout-ului paginii web: header, footer
5. Editarea continutului: crearea structurii de navigare, particularizarea CSS a textului si linkurilor, editarea continutului
6. Incarcarea su utilizarea fonturilor externe, locale si google fonts
7. Inserarea unei galerii foto, particularizarea galeriei, optiuni, etichetele ALT pentru imagini
8. Crearea automata a unui formular de contact PHP
9. Inserarea si particularizarea unei harti interactive in modulul de contact
10. Setarea unui magazin virtual cu produse, categorii de produse, preturi, TVA, reduceri fixe sau procentuale, plata prin banca sau cash, livrare in mai multe moduri, etc.
11. Modificarea parametrilor template: navigare, font, stil CSS pentru linkuri, inlocuirea headerului, inserarea functiei de cautare in pagina
12. SEO: cuvinte cheie – meta property keywords, description, google analytics
13. Sitemap, harta paginii web
14. Responsive web design: transformarea paginii web intr-o pagina cu design fluid, adaptat diferitelor rezolutii (tableta, smartphone, laptop, desktop)
15. Reglarea web designului fluid pentru rezolutii mici
16. Analiza designului fluid (responsive) pentru o pagina web complexa: ordinea containerelor in afisare, linii de rupere (line break), excluderea afisarii unor elemente la o anumita rezolutie
17. Exportul proiectului in formatHtml 5 si CSS 3, upload – urcarea continutului paginii web pe server, testarea online
Exercitiul 2:
18. Reorganizarea fisierelor de pe DVD-ul dvs. Debutul aplicatiei nr. 2, siteul de amenajari interioare: template, logo, setari ale fonturilor pentru continut, titluri, menu – navigare.
19. Stilul CSS al containerului de text, imagini inserate in blocul de text, wrap image, linkuri imagine, marginile interioare si exterioare ale blocului de text
20. Formatari ale stilului paginii
21. Textul cu chenar, generarea automata a CSS pentru chenar cu colturi rotunjite, bloc de text cu bara de derulare
22. Text scroll: text derulant automat, bloc de text cu bara de derulare. Designul unei pagii cu text derulant si imagini.
23. Galeria de imagini
24. Lucrul cu imagini individuale, containerul de imagine, link imagine – show box
25. Editarea imaginilor: crop – decuparea, cadre, efecte on mouse over, watermark, image sitemap – indexarea imaginilor
26. Elemente de e-commerce, setarea magazinului virtual cu optiuni pentru discount in functie de cantitatea produselor.
27. SEO: etichetele pentru cuvintele cheie, descrierile, google analytics, google search console, etichetele h1, h2
28. Inserarea in Footer a campurilor de search si contact
29. Setarea responsive web design
30. Exportul exercitiului nr. 2 in format Html 5 / CSS 3, upload pe server, testarea paginii web.
Verificarea W3C a paginii web, verificarea etichetelor ALT, adaugarea paginii web la indexul Google
31. Alegerea unui hosting web, un server care sa ne gazduiasca pagina web, urcarea paginii web pe server
Exercitiul 3:
32. Constructia paginii web de la zero: start from scratch. Imaginea de header pentru full size si responsive (metoda 1). Elementele structurale ale paginii. Setarea header si footer, aranjarea continutului.
33. Aranjari ale textului in responsive design. Modificarea culorii de background in acord cu imaginile de footer si header.
34. Stilul CSS al elementului central text, particularizarea menului.
35. Inserarea imaginilor in codul Html
36. Afisarea titlului paginii, page title
37. Inserarea unei harti tip satelit, a rutelor auto spre destinatie, a navigarii footer
38. Optiuni de securitate: protectia sursei / codului paginii web, afisarea avertismentului Cookies
Exerctiul 4:
39. Constructia unei pagini web de la zero, cu full header responsive, folosind cod Html 5 inserat in Web Site X5. Tehnica de lucru pentru elementele structurale ale paginii.
40. Variante de design pentru Header si pentru Content, analiza solutiilor
41. Construirea sistemului de navigare tip drop down menu
42. Stilul CSS pentru menul principal, drop down menu, main menu, page menu
43. Continutul paginii web: text, galerie de imagini
44. Verificarea, exportul si upload-ul paginii web
45. Corectii dupa verificarea online
46. Recapitulare: parcurgerea logica a etapelor de design web
Exercitiul 5:
47. Analiza unui proiect web, setarea imaginii de fundal pentru orice dimensiune.
Exercitiul 6: Consideratii generale, tips and tricks
48. Aplicatie, asezarea complexa a elementelor structurale ale paginii web, tehnica duplicarii proiectelor
49. Modul de gestionare a fisierelor importate, filtrare mailurilor.
50. Identificarea in proiect a unui element structural, in vederea modificarii sale.