Cursuri Autodesk Adobe Corel Web

Autodesk, 3D, Adobe, Corel, Sony, Web

Cursuri Autodesk, Adobe, Corel, Sony

Cursuri Autodesk, Adobe, Web Design, Corel

Go to content
Curs web design în cod HTML CSS, 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

- ISBN 978-973-0-21171-9

Acest curs web design cu Adobe Dreamweaver CC este structurat în două module: începător și avansat.
Atenție, Dreamweaver a fost folosit ca exemplu de editor Html / CSS, dar tehnicile predate în curs se pot aplica și cu orice alt editor Html/CSS, ca Autocompletion, Syntax Highlighting, Split-Screen View, chiar și cu NOTEPAD!.
Sintaxa este aceeași!

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 45 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

<h2>Teste computerizate
</h2>
Bonus: vă oferim un capitol despre structura Html a unui test computerizat, editarea conținutului și a răspunsurilor unui test computerizat.
Mostre din lectii video Curs Adobe Dreamweaver CC Html 5 CSS 3Alegeți un thumbnail apoi urmăriți una din cele 5 mostre video în canalul youtube, playlist Curs Adobe Dreamweaver CC Html 5 CSS 3, aici >
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 în septembrie 2019 o versiune gratuită a programului WebSite X5, pentru care vă oferim un curs aici. Cursul web design se aplică în mare masură și acestei variante gratuite a programului, detalii aici >

Titlurile lecțiilor video din Curs Html 5 și CSS 3


Capitolul 1, noțiuni elementare despre Dreamweaver, HTML și CSS
1. Structura unei pagini web conform noilor standarde HTML 5 și CSS 3
2. Noțiuni introductive despre HTML 5 și CSS 3
3. Selectori CSS
4. Deschiderea unui document HTML în Dreamweaver, crearea unui nou document, opțiuni
5. Noțiuni introductive despre Adobe Dreanweaver. Interfața Adobe Dreamweaver. Familiarizarea cu code view, design view, live view, spații de lucru.
6. Setări de interfață, particularizari ale spațiului de lucru, salvarea și resetarea spațiului de lucru; setarea afișării tipului de fișier
Dacă nu știți unde este panoul Property Inspector, urmăriti această lecție.
Dacă doriți toate detaliile despre Property Inspector și Code Inspector, urmăriți Lecția 3 din capitolul următor.
7. Unități de măsură.

Capitolul 2, Adobe Dreamweaver CC
1. Definirea unui site, gestionarea siteurilor reținute în Cache, Root Site, noțiuni preliminare
2. Navigarea în Site Root, rațiunea definirii unei rădăcini a paginii web
3. Utilizarea Property Inspector și setările sale. Code navigator, Code Inspector.
4. Crearea unui document HTML și a fisierului CSS asociat.
Manipularea perechii de fișiere HTML / CSS, tipuri de fișiere CSS: link, import, new, embed in page: exemple de creare și modificare a codului CSS
5. Introducere în Code designer, ergonomia panourilor de lucru, diferențe între versiunile Dreamweaver CC, principii de lucru CSS Designer
6. Organizarea spațiului de lucru: Auto-collapse iconic panels

Capitolul 3, lucrul cu text
1. Formatarea paragrafelor de text și a secțiunilor heading, continuăm cu preferințe ale spațiului de lucru pe masură ce avem nevoie de aceste setări: așezarea split view
2. Crearea de liste: numbered list, bulleted list
3. Inserarea caracterelor speciale
4. Inserarea textului din Office (Microsoft, Open Office) în Html, importul datelor tabelare, fișiere CSV, depanarea tabelului, utilizarea “search and replace” în documentul Html
5. Copierea și lipirea în Dreamweaver

Capitolul 4, elemente de HtML și CSS
1. Moduri de definire a CSS: Inline Style, embeded style. Atașarea unui fișier CSS extern
2. Atașarea aceluiași document CSS la mai multe documente Html. Modificarea fișierului CSS propagă modificarile de stil în toate fișierele Html asociate
3. Ruperea linkului către stilul CSS pentru a defini un alt fișier linked CSS.
Setarea familiei de fonturi, culoare, etc – modificarea CSS. Definirea altui fișier de stil CSS care să formeze aspectul pagini web
4. Definirea stilurilor globale și a unui stil particular special pentru un element cuprins în selectorul global, ierarhizarea selectorilor și definițiilor CSS
5. Exersarea tehnicilor din lecții anterioare: definirea siteului, titlul paginii.
Particularizarea familiilor de fonturi CSS pentru Dreamweaver
Utilizarea fonturilor online, găzduite de un server
Utilizarea Google Fonts, fonturile găzduite online de Google
Utilizarea Adobe Edge Fonts. Recomandări pentru fonturi destinate titlurilor, paragrafelor, linkurilor.
6. Folosirea etichetei Wrap, definirea stilului pentru o porțiune redusă de text, cu ajutorul span
7. Clean up web font script pentru pagina în care am folosit diferite font-weight pentru Adobe Web Font Kit
8. Instalarea locală a fonturilor Local Web Fonts și construirea unui Custom Font Stack
9. Aplicație: Scrierea codului direct în HTML si CSS.
Definirea codurilor CSS si HTML și legătura între ele, de acestă data fără a folosi instrumentele Dreamweaver, scriind etichetele și selectorii sintaxă cu sintaxă în linie de cod.
10. Sinteză: aplicație pentru inserarea în 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 în Dreamweaver CC: inserare de header, footer, nav, section, aside, article, nested elements, Class și ID
4. Inserarea conținutului paginii web în interiorul elementelor structurale Html 5, curățarea codului parazit rezultat din inserarea textului formatat în Office
5. Corectarea formatărilor Html introduse de importul textului din Rich Text Format
6. Scripturi pentru afișarea corectă a paginii în IE 9 și variante mai vechi, afișarea elementelor structurale ca “block” în IE 8, atribuirea de etichete elementelor din pagină
7. Controlul layoutului prin CSS. Construirea CSS pentru elementele structurale. Floating elements.
8. Inserarea fonturilor Adobe Edge – definitivarea acestui stadiu al layout-ului
9. Inserarea linkurilor. Transformarea Unordered List în Navigation Bar. Setări finale ale paginii web, finisarea CSS

Capitolul 6. Designul web al paginii, workshop. Responsive web design
1.
Header
- inserarea titlului și a imaginii de fundal în Dreamweaver
- folosirea fonturilor online (Google Fonts)
- centrarea conținutului web în pagină
2.
Sidebar
- crearea Sidebar la full height
- inserarea unui menu de navigare vertical în Sidebar
- inserarea fundalului gradient în Sidebar
- inserarea fotografiei circulare de profil
- introducerea textului
3.
Main
- inserare post
- conferirea de stil CSS etichetelor de header h1, h2, p
- construcția unui buton și particularizarea stilului său
- animarea butonului, comportamente / behavior
Cel mai important lucru la un web site modern, este ca acesta să fie responsive, adică să se afișeze corect indiferent de rezoluția dispozitivelor de afișare.

4.
Responsive web design
- ce sunt Media Queries și modul în care le utilizăm
- transformarea propriu-zisă a paginii web în responsive web design.

Capitolul 7. Sinteza
1. Concluzii: comentariile inserate în liniile de cod vă vor fi de foarte mare ajutor în ințelegerea sintaxei limbajelor Html 5 și CSS 3.
Nu ratați această lecție pentru că sintetizează tot traseul educațional pe care l-am parcurs.

Capitolul 8. Bonus
Construirea testelor computerizate în limbaj HTML, structura HTML a unui test
- permiterea Active Content
- structura unui test computerizat
- editarea întrebărilor și a răspunsurilor testului
- șablon pentru test.
Curs Adobe Dreamweaver CC HTML 5 CSS 3
Back to content