Flusso di lavoro ad alto livello che descrive la progettazione e lo sviluppo di siti Web con Dreamweaver

Questo articolo illustra come è possibile completare i diversi passaggi o le fasi di sviluppo Web utilizzando Dreamweaver.

Nota:

Si presume che l'utente abbia un livello di conoscenza da principiante a intermedio dei domini Web e dei linguaggi HTML, CSS e Javascript.

  1. La prima fase nello sviluppo Web è la fase di progettazione in cui si analizzano le esigenze del pubblico e i requisiti tecnici e di marketing. Inoltre, si acquisiscono tutte le informazioni necessarie per la progettazione e la pubblicazione del sito Web e si ottengono risposte a domande come:

    • Quale fornitore di servizi posso scegliere per l'hosting del sito Web? Dispongo dell'accesso al server di pubblicazione per il caricamento dei file?
    • Qual è il nome di dominio che deve essere utilizzato per il sito Web?
    • Nel caso sia necessario migrare i siti Web esistenti in Dreamweaver, dove sono attualmente memorizzati i file e le risorse? Dispongo dell'accesso al server in cui sono memorizzate tali informazioni?
    • Se desidero un sito Web dinamico, quale server è possibile utilizzare per verificare se i dati vengono visualizzati in modo dinamico? Dispongo dei dettagli del server applicazioni Web da utilizzare per caricare i dati dinamici?
    • Che tipo di risorse sono necessarie per il sito Web?
    • Queste risorse verranno create da zero? Se le risorse sono già disponibili, dispongo dell'accesso?
    • Quali sono le applicazioni da utilizzare per la progettazione delle risorse?
    • Sto progettando di creare un sito Web reattivo? 

    Se avete un quadro chiaro del tipo di sito Web che desiderate sviluppare e dell'ubicazione e della modalità di hosting e se avete scelto Dreamweaver e Creative Cloud per il processo di sviluppo, procedete con il passaggio successivo.

  2. Verificate di disporre di tutte le risorse necessarie per il sito Web. Riuniteli e organizzateli nelle cartelle locali o in Creative Cloud Libraries di Adobe.

  3. Create un nuovo documento in Dreamweaver utilizzando:

    • Un nuovo documento vuoto,
    • i modelli campione forniti con Dreamweaver, oppure 
    • i file modello (*.dwt) creati da altri utenti

    Nota:

    Se non avete una conoscenza approfondita di Dreamweaver o se siete nella fase iniziale dell'apprendimento dello sviluppo Web, i modelli campione sono di grande aiuto per iniziare a progettare le pagine Web.

    Anche se si prevede di iniziare da zero, è buona norma esaminare queste pagine per comprendere gli elementi di una buona progettazione delle pagine Web.

  4. Dedicate qualche minuto ad acquisire dimestichezza con l'area di lavoro di Dreamweaver. Individuate un'area di lavoro adatta e impostate un tema di colore. Riorganizzate i vari pannelli nel modo che preferite.

  5. Impostate il sito Dreamweaver. Create una struttura di cartelle con i file e le risorse. Una volta organizzate le informazioni e determinata una struttura operativa, potete cominciare a creare il sito. (Vedete Informazioni sui siti di Dreamweaver).

    In questa fase, è consigliabile impostare anche le connessioni ai server remoti e i server di prova (se si dispone di contenuto dinamico). 

  6. Iniziate la codifica delle pagine Web in Vista codice o progettatele nella Vista progettazione / Dal vivo.

    Se prevedete di utilizzare le composizioni in Photoshop, è possibile estrarle in Dreamweaver e lavorare su di esse. Per ulteriori informazioni sulle operazioni con le composizioni di Photoshop, consultate Extract in Dreamweaver CC.

    Potete aggiungere elementi di progettazione quali testo, immagini, immagini di rollover, mappe immagine, colori, filmati, audio, collegamenti HTML, tabelle e altro ancora.

  7. Potete impostare lo stile della pagina Web mediante CSS.

    In Dreamweaver potete lavorare con CSS in vari modi:

    • Potete inserire il codice in CSS.Per informazioni sulle funzioni di codifica di Dreamweaver per l'inserimento del codice in CSS, vedete Ambiente di codifica in Dreamweaver.
    • Se non avete conoscenza sufficiente della creazione di pagine CSS, è possibile utilizzare il pannello CSS Designer per generare le pagine CSS. Per ulteriori informazioni, consultate Creazione del layout delle pagine con CSS Designer.
    • Se preferite utilizzare i file Sass e Less, Dreamweaver supporta anche questa opzione, consentendo l'importazione e l'utilizzo dei file Sass e Less nel sito Dreamweaver. Dreamweaver quindi esegue la compilazione automatica (oppure potete scegliere la compilazione manuale) ed è possibile visualizzare i risultati delle modifiche CSS in tempo reale.Per informazioni sull'utilizzo dei file Sass e Less con Dreamweaver, vedetePreprocessori CSS.
  8. Impostare un'applicazione Web per la creazione del contenuto dinamico.

    Molti siti Web contengono pagine dinamiche che permettono ai visitatori di visualizzare le informazioni memorizzate nei database, e in genere permettono ad alcuni utenti di aggiungere nuove informazioni e di modificare le informazioni dei database. Per creare queste pagine, dovete per prima cosa configurare un server Web e un server applicazioni, creare o modificare un sito di Dreamweaver e connettervi a un database. Per ulteriori informazioni, consultate Siti, pagine e moduli Web dinamici.

  9. Creare pagine dinamiche.

    In Dreamweaver, potete definire diverse origini di contenuto dinamico, inclusi i recordset estratti da database, i parametri di modulo e i componenti JavaBeans. Per aggiungere il contenuto dinamico a una pagina, trascinatelo sulla pagina.

    Potete impostare la pagina per visualizzare un record o più record alla volta, visualizzare più pagine di record, aggiungere collegamenti speciali per passare da una pagina di record alla successiva e alla precedente e creare contatori di record per aiutare gli utenti a individuare i record. Per ulteriori informazioni, consultate Siti, pagine e moduli Web dinamici.

  10. Verifica, anteprima e pubblicazione del sito Web. 

    Quando create le pagine, è necessario visualizzarle in anteprima per verificare che il sito Web proceda in base alla progettazione. Potete eseguire la codifica nella vista Dividi tenendo affiancate le viste Codice e Dal vivo.

    È anche possibile visualizzare in anteprima le pagine Web in tempo reale su un dispositivo (se state creando pagine Web reattive) o in un browser.

    Se non è necessaria un'anteprima dal vivo, potete utilizzare la normale anteprima del browser.

    Se avete già definito le connessioni ai server remoti, per pubblicare il sito Web è necessario caricare i file nel server remoto affinché siano attivati.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online