Curs web design Adobe Dreamweaver CC, responsive design
<< TEHNIC, REDUCERI > < REDUCERI >
Nivel de pregătire HTML 5 / CSS 3: începător, mediu, avansat.
Curs web design HTML 5 si CSS 3, cu Adobe Dreamweaver CC, Responsive web design
Acest curs web design cu Adobe Dreamweaver CC este structurat în două module: începător și avansat.
Modulul 1 se adresează începătorilor în HTML și CSS, dar și celor care au pierdut contactul cu noile standarde HTML 5 si CSS 3, și doresc să își împrospăteze cunoștințele referitoare la noile standarde HTML 5 și CSS 3. Cursul este format din 42 de lecții video, la rezoluția de 1280 / 720 pixel, structurate în 7 capitole.
Limbajele HTML 5 și CSS 3
Lecțiile video vă ajută să înțelegeți noile reguli și standarde HTML 5 și CSS 3, principiile după care se construiește o pagină web, lucrul cu Adobe Dreamweaver CC. Aveți la dispoziție fișiere de exerciții, care vă vor însoți pe traseul educațional.
Dupa ce v-ați familiarizat cu noile standarde Html 5 și CSS 3, în Modulul 2 vom crea o pagină web cu toate elementele Html necesare, cu un design web responsive, adaptat rezoluției diferitelor dispozitive de afișare.
Iată rezultatul cursului AICI >
Curs web design Adobe Dreamweaver CC
Pentru studiul web design, vă oferim și Curs WebSite X5 - un program modern, extrem de eficient, care nu necesită lucrul în cod Html / CSS, pentru ambele recomandăm ca studiul să fie completat cu Curs Adobe pentru web design.
NOU!
Producatorul a lansat in septembrie 2019 o versiune gratuita a programului WebSite X5, pentru care va oferim un curs aici. Cursul web design se aplica in mare masura si acestei variante gratuite a programului, detalii aici >
Titlurile lectiilor video din Curs Adobe Dreamweaver CC Html 5 si CSS 3
Capitolul 1, notiuni elementare despre Dreamweaver, HTML si CSS
1. Structura unei pagini web conform noilor standarde HTML 5 si CSS 3
2. Notiuni introductive despre HTML 5 si CSS 3
3. Selectori CSS
4. Deschiderea unui document HTML in Dreamweaver, crearea unui nou document, optiuni
5. Notiuni introductive despre Adobe Dreanweaver. Interfata Adobe Dreamweaver. Familiarizarea cu code view, design view, live view, spatii de lucru.
6. Setari de interfata, particularizari ale spatiului de lucru, salvarea si resetarea spatiului de lucru; setarea afisarii tipului de fisier
Daca nu stiti unde este panoul Property Inspector, urmariti aceasta lectie.
Daca doriti toate detaliile despre Property Inspector si Code Inspector, urmariti Lectia 3 din capitolul urmator
7. Unitati de masura
2. Notiuni introductive despre HTML 5 si CSS 3
3. Selectori CSS
4. Deschiderea unui document HTML in Dreamweaver, crearea unui nou document, optiuni
5. Notiuni introductive despre Adobe Dreanweaver. Interfata Adobe Dreamweaver. Familiarizarea cu code view, design view, live view, spatii de lucru.
6. Setari de interfata, particularizari ale spatiului de lucru, salvarea si resetarea spatiului de lucru; setarea afisarii tipului de fisier
Daca nu stiti unde este panoul Property Inspector, urmariti aceasta lectie.
Daca doriti toate detaliile despre Property Inspector si Code Inspector, urmariti Lectia 3 din capitolul urmator
7. Unitati de masura
Capitolul 2, Adobe Dreamweaver CC
1. Definirea unui site, gestionarea siteurilor retinute in Cache, Root Site, notiuni preliminare
2. Navigarea in Site Root, ratiunea definirii unei radacini a paginii web
3. Utilizarea Property Inspector si setarile sale. Code navigator, Code Inspector.
4. Crearea unui document HTML si a fisierului CSS asociat.
Manipularea perechii de fisiere HTML / CSS, tipuri de fisiere CSS: link, import, new, embed in page: exemple de creare si modificare a codului CSS
5. Introducere in Code designer, ergonomia panourilor de lucru, diferente intre versiunile Dreamweaver CC 2014 si 2015, principii de lucru CSS Designer
6. Organizarea spatiului de lucru: Auto-collapse iconic panels
2. Navigarea in Site Root, ratiunea definirii unei radacini a paginii web
3. Utilizarea Property Inspector si setarile sale. Code navigator, Code Inspector.
4. Crearea unui document HTML si a fisierului CSS asociat.
Manipularea perechii de fisiere HTML / CSS, tipuri de fisiere CSS: link, import, new, embed in page: exemple de creare si modificare a codului CSS
5. Introducere in Code designer, ergonomia panourilor de lucru, diferente intre versiunile Dreamweaver CC 2014 si 2015, principii de lucru CSS Designer
6. Organizarea spatiului de lucru: Auto-collapse iconic panels
Capitolul 3, lucrul cu text
1. Formatarea paragrafelor de text si a sectiunilor heading, continuam cu preferinte ale spatiului de lucru pe masura ce avem nevoie de aceste setari: asezarea split view
2. Crearea de liste: numbered list, bulleted list
3. Inserarea caracterelor speciale
4. Inserarea textului din Office (Microsoft, Open Office) in Html, importul datelor tabelare, fisiere CSV, depanarea tabelului, utilizarea “search and replace” in documentul Html
5. Copierea si lipirea in Dreamweaver
2. Crearea de liste: numbered list, bulleted list
3. Inserarea caracterelor speciale
4. Inserarea textului din Office (Microsoft, Open Office) in Html, importul datelor tabelare, fisiere CSV, depanarea tabelului, utilizarea “search and replace” in documentul Html
5. Copierea si lipirea in Dreamweaver
Capitolul 4, elemente de HtML si CSS
1. Moduri de definire a CSS: Inline Style, embeded style. Atasarea unui fisier CSS extern
2. Atasarea aceluiasi document CSS la mai multe documente Html. Modificarea fisierului CSS propaga modificarile de stil in toate fisierele Html asociate
3. Ruperea linkului catre stilul CSS pentru a defini un alt fisier linked CSS.
Setarea familiei de fonturi, culoare, etc – modificarea CSS. Definirea altui fisier de stil CSS care sa defineasca aspectul pagini web
4. Definirea stilurilor globale si a unui stil particular special pentru un element cuprins in selectorul global, ierarhizarea selectorilor si definitiilor CSS
5. Exersarea tehnicilor din lectii anterioare: defini rea siteului, titlul paginii.
Particularizarea familiilor de fonturi CSS pentru Dreamweaver
Utilizarea fonturilor online, gazduite de un server
Utilizarea Google Fonts, fonturile gazduite online de Google
Utilizarea Adobe Edge Fonts. Recomandari pentru fonturi destinate titlurilor, paragrafelor, linkurilor.
6. Folosirea etichetei Wrap, definirea stilului pentru o portiune redusa de text, cu ajutorul span
7. Clean up web font script pentru pagina in care am folosit diferite font-weight pentru Adobe Web Font Kit
8. Instalarea locala a fonturilor Local Web Fonts si construirea unui Custom Font Stack
9. Aplicatie: Scrierea codului direct in HTML si CSS.
Definirea codurilor CSS si HTML si legatura intre ele, de acesta data fara a folosi instrumentele Dreamweaver, scriind etichetele si selectorii sintaxa cu sintaxa.
10. Sinteza: aplicatie pentru inserarea in Dreamweaver a Tag, Class, ID.
2. Atasarea aceluiasi document CSS la mai multe documente Html. Modificarea fisierului CSS propaga modificarile de stil in toate fisierele Html asociate
3. Ruperea linkului catre stilul CSS pentru a defini un alt fisier linked CSS.
Setarea familiei de fonturi, culoare, etc – modificarea CSS. Definirea altui fisier de stil CSS care sa defineasca aspectul pagini web
4. Definirea stilurilor globale si a unui stil particular special pentru un element cuprins in selectorul global, ierarhizarea selectorilor si definitiilor CSS
5. Exersarea tehnicilor din lectii anterioare: defini rea siteului, titlul paginii.
Particularizarea familiilor de fonturi CSS pentru Dreamweaver
Utilizarea fonturilor online, gazduite de un server
Utilizarea Google Fonts, fonturile gazduite online de Google
Utilizarea Adobe Edge Fonts. Recomandari pentru fonturi destinate titlurilor, paragrafelor, linkurilor.
6. Folosirea etichetei Wrap, definirea stilului pentru o portiune redusa de text, cu ajutorul span
7. Clean up web font script pentru pagina in care am folosit diferite font-weight pentru Adobe Web Font Kit
8. Instalarea locala a fonturilor Local Web Fonts si construirea unui Custom Font Stack
9. Aplicatie: Scrierea codului direct in HTML si CSS.
Definirea codurilor CSS si HTML si legatura intre ele, de acesta data fara a folosi instrumentele Dreamweaver, scriind etichetele si selectorii sintaxa cu sintaxa.
10. Sinteza: aplicatie pentru inserarea in Dreamweaver a Tag, Class, ID.
Capitolul 5, elemente structurale HTML 5
1 .Elemente structurale HTML 5, definire: header, footer, nav, section, aside, article
2. Layout Web Photoshop cu elemente structurale definite
3.Construirea unui layout HTML 5 cu elemente structurale in Dreamweaver CC: inserare de header, footer, nav, section, aside, article, nested elements, Class si ID
4. Inserarea continutului paginii web in interiorul elementelor structurale Html 5, curatarea codului parazit rezultat din inserarea textului formatat in Office
5. Corectarea formatarilor Html introduse de importul textului din Rich text format
6. Scripturi pentru afisarea corecta a paginii in IE 9 si variante mai vechi, afisarea elementelor structurale ca “block” in IE 8, atribuirea de etichete elementelor din pagina
7. Controlul layoutului prin CSS. Construirea CSS pentru elementele structurale. Floating elements.
8. Inserarea fonturilor Adobe Edge – definitivarea acestu istadiu al layout-ului
9. Inserarea linkurilor. Transformarea Unordered List in Navigation Bar. Setari finale ale paginii web, finisarea CSS
2. Layout Web Photoshop cu elemente structurale definite
3.Construirea unui layout HTML 5 cu elemente structurale in Dreamweaver CC: inserare de header, footer, nav, section, aside, article, nested elements, Class si ID
4. Inserarea continutului paginii web in interiorul elementelor structurale Html 5, curatarea codului parazit rezultat din inserarea textului formatat in Office
5. Corectarea formatarilor Html introduse de importul textului din Rich text format
6. Scripturi pentru afisarea corecta a paginii in IE 9 si variante mai vechi, afisarea elementelor structurale ca “block” in IE 8, atribuirea de etichete elementelor din pagina
7. Controlul layoutului prin CSS. Construirea CSS pentru elementele structurale. Floating elements.
8. Inserarea fonturilor Adobe Edge – definitivarea acestu istadiu al layout-ului
9. Inserarea linkurilor. Transformarea Unordered List in Navigation Bar. Setari finale ale paginii web, finisarea CSS
Capitolul 6. Designul web al paginii, workshop. Responsive web design
1.
Header
- inserarea titlului si a imaginii de fundal in Dreamweaver
- folosirea fonturilor online (Google Fonts)
- centrearea continutului web in pagina
- folosirea fonturilor online (Google Fonts)
- centrearea continutului web in pagina
2.
Sidebar
- crearea Sidebar la full height
- inserarea unui menu de navigare vertical in sidebar
- inserarea fundalului gradient in Sidebar
- inserarea fotografiei circulare de profil
- introducerea textului
- inserarea unui menu de navigare vertical in sidebar
- inserarea fundalului gradient in Sidebar
- inserarea fotografiei circulare de profil
- introducerea textului
3.
Main
- inserare post
- conferirea de stil CSS etichetelor de header h1, h2, p
- constructia unui buton si particularizarea stilului sau
- animarea butonului, comportamente / behavior
- conferirea de stil CSS etichetelor de header h1, h2, p
- constructia unui buton si particularizarea stilului sau
- animarea butonului, comportamente / behavior
Cel mai important lucru la un web site modern, este ca acesta sa fie responsive, adica sa sa afiseze corect indiferent de rezolutia dispozitivelor de afisare.
4.
Responsive web design
- ce sunt Media Queries si modul in care le utilizam
- transformarea propriu-zisa a paginii web in responsive web design.
- transformarea propriu-zisa a paginii web in responsive web design.
Capitolul 7. Sinteza
Nu ratati aceasta lectie pentru ca sintetizeaza tot traseul educational pe care l-am parcurs.
