Dreamweaver

programma corso dreamweaver box

Qui puoi trovare il programma del corso di Dreamweaver completo e aggiornato, punto per punto.


Nota bene

Dato il costante aggiornamento di strumenti e funzionalità dei software Adobe Creative Cloud, alcune novità potrebbero non essere ancora elencate nel programma didattico, ma i nuovissimi strumenti verranno comunque mostrati durante il corso.

  1. Il web e gli standard.
    Impostazione di un sito web con Dreamweaver.

    È fondamentale capire che cos’è internet e com’è costituito un sito web da un punto di vista tecnico. Capirai come è nato internet, cos’è il W3C, cosa sono i linguaggi di descrizione HTML e CSS e come si sono evoluti dal 1991 ad oggi. Quindi imparerai ad impostare il tuo primo sito web con Dreamweaver.

    Internet e W3C. Differenze tra linguaggi di descrizione e linguaggi di programmazione. File, cartelle e relazioni con un sito web. Conoscere i browser per la navigazione. Gestione attraverso il pannello file. Percorsi assoluti e relativi. File locali e file remoti. Interfaccia di Dreamweaver . Vista codice, progettazione, dal vivo. Codice dal vivo e funzione esamina di Dreamweaver. Connessione FTP con Dreamweaver. Server di prova per siti web dinamici.

  2. HTML, XHTML e HTML5.
    Primi tag testuali, link e concetti di HTML5.

    Qui imparerai le prime nozioni di HTML con cognizione storica e tecnica, al fine di ottenere una preparazione senza lacune. Imparerai a leggere l’HTML proprio come una lingua, con le sue regole grammaticali. Inizierai a scrivere i Tag, a conoscerne il significato e a testare il risultato su tutti i browser. Sarai in grado di collegare più pagine attraverso i collegamenti ipertestuali.

    Il linguaggio HTML e la sua evoluzione. Differenze tra HTML4, XHTML e HTML5. Creare e salvare una pagina HTML. Creare la home page di un sito web. Zone del codice di servizio e per i contenuti. Tag html, head e body. Tag per il testo e tag contenitori. Tag semantici in HTML5. Creare un link verso una pagina, un’URL, una mail, un’ancoraggio con nome. Salvataggio e anteprima con i browser.

  3. Lezione pratica 1

    Impostazione di un sito web e composizione con i primi tag HTML.

    Sarai guidato nell’impostazione di un sito web con Dreamweaver, nel creare la tua prima pagina web con i primi elementi HTML.

  4. Contenuti e aspetto grafico. Cenni al linguaggio CSS.

    In questa lezione avrai modo di comprendere le basi per il design attraverso i fogli stile CSS, a capire gli standard e a distinguere tra i contenuti di una pagina web ed il suo aspetto grafico. Ti sarà più facile comprendere come ottimizzare le pagine di un sito web per i motori di ricerca.

    Storia del linguaggio CSS. Standard e accessibilità di un sito web. Indipendenza dai dispositivi e siti web responsive. Siti web “table-less”. Velocità di caricamento delle pagine. Velocità di modifica e manutenzione di un sito web con i CSS. Motori di ricerca e indicizzazione dei contenuti. Utilizzare gli standard W3C. Distinzione tra contenuti e aspetto grafico o formattazione di una pagina.

  5. Design con i CSS e prime regole. Sintassi, proprietà e selettori.

    Creare il design di un sito web con i CSS è la base per ogni web designer: qui farai i primi passi in questo mondo, imparando l’essenza del web design attraverso i linguaggi di descrizione. Sarà facile e intuitivo l’approccio che avrai, per imparare la “grammatica” dei fogli stile a cascata CSS ed il loro utilizzo con sicurezza.

    Sintassi delle regole CSS. Proprietà, valori e selettori. Stili CSS incorporati, fogli di stile esterni ed importati. Creare un file foglio di stile CSS. Applicare le regole CSS ai tag HTML attraverso l’uso dei selettori. Design di una pagina web con i CSS. Tecnica del reset di Eric Meyer e discussione sul suo utilizzo. Tecniche di formattazione di base. Selettori per tipo di elemento. Cenni alle classi, pseudo-classi e agli identificatori univoci. Proprietà CSS per il testo. Il colore in HTML e in CSS. Colorare il testo, i link e lo sfondo di elementi HTML.

  6. Lezione pratica 2

    Design con i CSS di base e collegamento di più pagine.

    Avrai sicuramente voglia di dare un aspetto grafico ai contenuti inseriti nelle tue pagine: questa è la lezione pratica giusta. Avrai modo anche di collegare più pagine tra loro.

  7. Box model CSS.
    Elementi in linea e a livello di blocco (inline e block).

    Impaginare con i CSS significa disporre gli elementi di una pagina web, determinandone posizione, dimensione e caratteristiche grafiche. Queste tecniche si possono oggi considerare di base per la creazione di siti web senza tabelle, con la garanzia dell’accessibilità per tutti gli utenti e per tutti i dispositivi.

    Box model e proprietà CSS correlate. Larghezza e altezza, larghezza minima e altezza minima. Bordi CSS. Margini interni ed esterni (margin e padding). Overflow. Proprietà CSS display. Elementi in linea e a livello di blocco. Unità di misura per i caratteri e per le dimensioni dei box. Tag div e contenitori HTML5. Inserimento di immagini e formattazione CSS. Gestire immagini di sfondo. Posizionamento statico e cenni ai posizionamenti relativi, assoluti e fissi (argomenti trattati in seguito).

  8. CSS Designer di Dreamweaver

    In questo modulo del corso imparerai ad utilizzare il nuovissimo CSS Designer di Dreamweaver: finalmente uno strumento che consente (a chi conosce i linguaggi) di operare velocemente e applicare direttamente le modifiche sulla pagina. Grazie a questo strumento si possono creare pagine web generando il codice con semplicità, aumentando la produttività e la creatività in maniera esponenziale.

    I vantaggi di utilizzare un editore come Dreamweaver . Concetto di produttività e creatività per un sito web. Gestire i fogli stile con le media queries nel CSS Designer. Origini, oggetto multimediale, selettori e proprietà con il CSS Designer.

  9. Lezione pratica 3

    Costruire un layout a 1 colonna per un sito web di base.

    In questa lezione creerai il primo layout grafico; semplice ma ordinato e in linea con le specifiche per i siti web moderni.

  10. Media Queries e Responsive Web Design.

    Rendere un sito web adattabile a cellulari, tablet e monitor di diverse risoluzioni è al giorno d’oggi indispensabile. In questo modulo del corso di Dreamweaver , imparerai le tecniche per creare stili e impaginazioni diverse per le più svariate risoluzioni dei dispositivi più diffusi. Potrai creare versioni verticali e orizzontali per la visualizzazione del sito su smartphone e tablet.

    Attributo media. Tipi di media e media queries. Media features. Orientamento verticale e orizzontale per smartphone e tablet. Gestire i fogli stile con le media queries. Media queries in CSS. Media queries in Dreamweaver.

  11. Blocchi flottanti (proprietà float e clear).

    Una lezione del corso deve essere dedicata a questo argomento, che ti consentirà di affiancare elementi grafici tra di loro e di creare i primi layout a più colonne. Utilizzare bene questa proprietà è semplice, ma occorre un po’ di pratica per acquisire sicurezza.

    Concetto di flusso degli elementi HTML. Normale flusso degli elementi. Proprietà float. Float left e right. Contornare un elemento con il testo. Proprietà clear. Clear left, right e both. Pseudo-classi e pseudo-elementi. Interruzione del float con pseudo-elementi e contenuti generati (:after e :before).

  12. Lezione pratica 4

    Creare un layout multicolonna e ottimizzazione per tutti i dispositivi.

    Troppi contenuti? Forse è il caso di creare un layout a più colonne. Ovviamente imparerai a realizzarne una versione per smartphone e tablet (con qualche colonna in meno!).

  13. Menu di navigazione.

    Creare un menu di navigazione di un sito web è un’opera artigianale di alta fattura. Chiunque con un po di esperienza di navigazione, avrà notato come alcuni siti offrono un’esperienza d’utilizzo migliore di altri: questo dipende dallo studio e dall’esposizione dei contenuti, ma anche dal menu di navigazione.

    Relazione tra elenchi puntati (o numerati) e menu di navigazione. Menu verticali e orizzontali. Menu a un livello e menu a più livelli (a tendina). Menu con i pulsanti ed utilizzo delle pseudo-classi. Menu flottanti e menu fissi.

  14. Posizionamenti CSS relativi, assoluti e fissi.

    Qui approfondiremo le tecniche per i posizionamenti CSS. Alterare il flusso HTML di un elemento significa poter posizionare liberamente qualsiasi oggetto, nonché determinarne il comportamento durante la navigazione. L’obbiettivo é sempre lo stesso: poter applicare qualsiasi soluzione grafica, senza compromessi.

    Posizionamento statico. Posizionamento relativo e proprietà z-index. Blocchi con posizionamento assoluto. Posizionamento fisso. Tecniche avanzate di posizionamento con i CSS.

  15. Lezione pratica 5

    Creare un layout con menu di navigazione ed elementi diversi da static.

    Qui sarai guidato nella creazione di un menu e vedrai come inserire elementi con posizionamenti assoluti o fissi, come ad esempio una pubblicità a comparsa sulla pagina.

  16. Approfondimento sui selettori CSS e nuovo CSS3.

    Fornire la completezza degli argomenti è un punto fermo dei nostri corsi. Questa lezione ti servirà per affrontare con sicurezza le tematiche legate al nuovo linguaggio CSS3, dove potrai applicare effetti speciali come transizioni e trasformazioni.

    Selettori di attributo e attributo multipli. Pseudo-classi :nth-child, :nth-of-type. Pseudo-classi :first-child e :first-of-type. Pseudo-classe :not e :empty. Pseudo-elementi :first-line, :first-letter, :before e :after. Contenuti generati in CSS e proprietà content. Selettori combinatori. Combinatori di adiacenza, figlio, di discendenza e di precedenza. Specificità delle regole a cascata. Direttiva !important.

  17. CSS3, transizioni e trasformazioni CSS.

    La nuova frontiera del web design è l’integrazione del linguaggio CSS3 con HTML5 (anche Javascript che vedremo in seguito). Grazie a questa nuova versione possiamo animare i contenuti grazie alle transizioni applicate alle trasformazioni CSS classiche (rotazione, scala, distorsione, traslazione...). Sicuramente una delle lezioni più divertenti del corso.

    Trasformazioni CSS. Trasformazioni scala, ruota, trasla, distorci. Applicare trasformazioni multiple. Modificare l’origine della trasformazione di un elemento. Transizioni CSS3. Proprietà, durata e temporizzazione. Utilizzo delle transizioni con Dreamweaver . Implementazione sui browser.

  18. Lezione pratica 6

    Creare effetti di transizione su una galleria di immagini.

    Creerai una piccola galleria di immagini da inserire nel tuo sito web; animerai la visualizzazione con gli effetti di transizione CSS3 (senza javascript).

  19. CSS3, webfont e caratteri. Google WebFont e ®TypeKit.

    Grazie alla nuova versione del linguaggio CSS, possiamo inserire i caratteri all’interno delle pagine del nostro sito web, senza limiti. Imparerai ad inserire e gestire i tuoi font dal tuo computer e dai servizi online gratuiti (Google WebFont). Vedrai inoltre come sfruttare i webfont con Dreamweaver grazie al servizio a pagamento di ®TypeKit (gratuito per i clienti Creative Cloud).

    Selettori di attributo e attributo multipli. Pseudo-classi :nth-child, :nth-of-type. Pseudo-classi :first-child e :first-of-type. Pseudo-classe :not e :empty. Pseudo-elementi :first-line, :first-letter, :before e :after. Contenuti generati in CSS e proprietà content. Selettori combinatori. Combinatori di adiacenza, figlio, di discendenza e di precedenza. Specificità delle regole a cascata. Direttiva !important.

  20. Moduli (form) per l’invio di email, protezione password in Php. Design dei form con i fogli stile CSS.

    Comprendere i “meccanismi” dei linguaggi dinamici non significa diventare un programmatore, ma è utile per saper collegare all’interno del proprio sito web, un form per l’invio delle mail o per proteggere una pagina (o una sezione) con una password. Sarà inoltre molto utile per comprendere, nelle lezioni successive, la piattaforma blog Wordpress e le sue innumerevoli applicazioni.

    Il linguaggio dinamico. Differenza tra linguaggi lato server e linguaggi lato client. Hypertext Preprocessor o Php. Utilizzo e diffusione del linguaggio Php. Installare un form in Php con controllo dei campi, delle variabili e pagine di ringraziamento. Protezione di una pagina con password sicura in Php. Formattazione CSS di un form e dei tag correlati. Applicazione delle transizioni e degli effetti sui form.

  21. Lezione pratica 7

    Creare una pagina dei contatti con un form.

    In un sito web occorre una pagina dei contatti; imparerai ad inserire all’interno di questa un modulo form per i contatti, una mappa di google e qualche link.

  22. Javascript e jQuery. Gallerie e slideshow di immagini. Framework Bootstrap.
    Video in HTML5.

    In questa lezione imparerai a lavorare con le librerie jQuery, cioè ad applicare effetti e creare gallerie fotografiche o slideshow, anche per smartphone e tablet. Con la versione 2015 di Dreamweaver è possibile creare siti web sfruttando il framework Bootstrap, in pochissimi passaggi.

    Cos’è javascript e cos’è jQuery. Scaricare le librerie. Installare librerie jQuery in un sito web. Strumenti per sviluppatori sui browser. Document Object Model (DOM). Selezionare elementi. Eventi e azioni semplici per comprendere le basi. Installare una galleria fotografica lightbox con jQuery. Installare uno slideshow jQuery. Utilizzare la funzione animate per le animazioni. Bootstrap integrato con Dreamweaver. Componenti bootstrap e layout predefiniti.

  23. Indicizzazione del sito, statistiche, strumenti per i webmaster, campagne sui motori di ricerca e sui social network.

    Rendere visibile un sito web sui motori di ricerca è fondamentale, per qualsiasi tipologia di esigenza. Imparerai in questo modulo del corso, ad ottimizzare i tuoi contenuti secondo le regole del SEO (Search Engine Optimization). Statistiche, strumenti per i webmaster di google, campagne a pagamento, blog, social network e tutto ciò che serve per essere visibili sul web; imparerai a proporre i migliori strumenti di marketing ai tuoi clienti e a garantirne i risultati.

    I motori di ricerca. Google. Gestire ed organizzare i contenuti di un sito web per la corretta indicizzazione sui motori. Creare una mappa del sito in XML. Metatag e title. Tecniche da evitare. Redirect 301. Google Analytics e strumenti per i webmaster. Google Adwords e campagne pubblicitarie mirate. Sfruttare bene i social network. Campagne e contenuti virali. Campagne a pagamento di Facebook. Controllo ed utilizzo delle statistiche per ottimizzare i contenuti.

  24. Lezione pratica 8

    Installare uno slideshow jQuery e animazione di contenuti.

    Installerai una slide di immagini controllabile dall’utente e responsive per cellulari e tablet, ma vedrai anche come animare grazie alle librerie jQuery.

  25. Wordpress. Introduzione al CMS (Content Management System). Installazione della piattaforma online.

    Wordpress è la piattaforma in Php più professionale per creare siti web dinamici con CMS (basati su database mySql e Php), dando quindi la possibilità al cliente di gestire autonomamente i propri contenuti. In questo modulo vedrai come installare, collegare correttamente il database e come scegliere i temi in base alle funzionalità e al design.

    Piattaforma CMS Wordpress. Differenze tra Wordpress e Joomla. Installazione online e in locale. Collegare Wordpress al database mySql. Bacheca di Wordpress. Temi, plugin e widget.

  26. Wordpress Pro. Blog, e-commerce. Modifica dei temi con l’editor integrato e con Dreamweaver

    Qui entreremo nel vivo di Wordpress. Imparerai a selezionare e configurare i migliori plugin per estendere le potenzialità del CMS, fino a creare un sito di e-commerce o un social network. Sarai in grado di “smontare” un tema grafico, al fine di personalizzarlo completamente, sia online che con Dreamweaver.

    Collegare i social network. Installazione dei plugin più importantiModificare i temi con i CSS e con Dreamweaver. Temi per e-commerce. Creare un social network con Buddypress.

  27. Lezione pratica 9 - Finale

    Installare, configurare, gestire un sito web Wordpress.

    Nell’ultima lezione pratica potrai sperimentare la piattaforma Wordpress in tutte le sue funzioni e chiarire ogni dubbio su tutte le lezioni precedenti.


HTML5 Powered with CSS3 / Styling, Graphics, 3D & Effects, and Semantics