Curs web design cu Adobe Dreamweaver CC, responsive design - Soft EDU

Go to content

Main menu:

Curs web design cu Adobe Dreamweaver CC, responsive design

Cursuri Adobe CC
Curs web design HTML 5 si CSS 3, cu Adobe Dreamweaver CC, Responsive web design - ISBN 978-973-0-21171-9

Acest curs web design cu Adobe Dreamweaver CC este structurat in doua module: incepator si avansat.

Modulul 1 se adreseaza incepatorilor in HTML si CSS, dar si celor care au pierdut contactul cu noile standarde HTML 5 si CSS 3, si doresc sa isi improspateze cunostintele referitoare la noile standarde HTML 5 si CSS 3. Cursul este format din 42 de lectii video, la rezolutia de 1280 / 720 pixel, structurate in 7 capitole.
Lectiile video va ajuta sa intelegeti noile reguli si standarde HTML 5 si CSS 3, principiile dupa care se construieste o pagina web, lucrul cu Adobe Dreamweaver CC. Aveti la dispozitie fisiere de exercitii, care va vor insoti pe traseul educational.

Dupa ce v-ati familiarizat cu noile standarde Html 5 si CSS 3, in Modulul 2 vom crea o pagina web cu toate elementele Html necesare, cu un design web responsive, adaptat rezolutiei diferitelor dispozitive de afisare.
Iata rezultatul cursului AICI >
Mostre din lectii video Curs Adobe Dreamweaver CC Html 5 CSS 3Alegeti un thumbnail apoi urmariti una din cele 5 mostre video in canalul youtube, playlist Curs Adobe Dreamweaver CC Html 5 CSS 3, aici >
Pentru studiul web design, va oferim si Curs WebSite X5 - un program modern, extrem de eficient, care nu necesita lucrul in cod Html / CSS, pentru ambele recomandam ca studiul sa fie completat cu Curs Adobe pentru web design.
Titlurile lectiilor video din Curs Adobe Dreamweaver CC Html 5 si CSS 3

I. Modulul incepator
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

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

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

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.

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

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
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
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
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.
Cursul Adobe Edge Reflow trateaza modul in care puteti realiza o simulare de Responsive web design, si va este oferit gratuit la orice comanda de curs Adobe, in vlaore mai mare de 199 Lei.

4. Responsive web design
Examinati rezultatul acetor lectii AICI, designul web este responsive.
- ce sunt Media Queries si modul in care le utilizam
- transformarea propriu-zisa a paginii web in responsive web design.

Capitolul 7. Sinteza.
1. Concluzii: comentariile inserate in liniile de cod va vor fi de foarte mare ajutor in intelegerea Html si CSS.
Nu ratati aceasta lectie pentru ca sintetizeaza tot traseul educational pe care l-am parcurs.
Curs Adobe Dreamweaver CC HTML 5 CSS 3
 
Copyright 2017. Vizualizati intreg continutul la rezolutie de cel putin 1200 pixel.
Back to content | Back to main menu