Come fare un sito web con Dreamweaver

Realizzare un sito internet richiede innanzitutto la conoscenza più o meno approfondita del linguaggio HTML, poi in seconda analisi un programma dove scrivere tale linguaggio per poter rendere effettivo il sito. Una volta l'editor di testo blocco note, presente su tutte le piattaforme Windows, svolgeva tale funzione, ad oggi invece sono stati creati diversi programmi specifici per la realizzazione di siti internet. Uno di questi programmi è Dreamweaver, edito dalla Adobe, la stessa casa produttrice dell'ormai famoso Photoshop. Progettare e realizzare un sito web con Dreamweaver è semplice, grazie ai numerosi strumenti offerti per realizzare il codice e correggerlo, per creare pagine funzionanti e ricche di effetti. Ecco come iniziare lo sviluppo di una web page con questo potente software. Vediamo quindi come fare un sito web con questo programma, con pochi semplici passaggi.

• Adobe Dreamweaver
• PC o smartphone
• Connessione internet

Dreamweaver è un ottimo programma per la creazione e la progettazione visiva di siti Web. Ma può essere scoraggiante quando lo apri per la prima volta. Ha così tante funzioni: a cosa servono?
Questa serie di tutorial in otto parti è progettata per aiutarti a creare un sito Web semplice ma elegante in Dreamweaver 2015. Ti guiderà attraverso il processo di definizione del sito, costruendo la struttura con HTML (Hypertext Markup Language), aggiungendo testo e immagini e modellare le pagine con CSS (Cascading Style Sheets).
Per mantenere la serie di tutorial a una lunghezza ragionevole, creerai solo due pagine web; ma una volta fatto ciò, dovresti avere una conoscenza sufficiente per creare più pagine da solo. Realizzare un sito web richiede diverse fasi di lavoro e di sviluppo: prima di iniziare il lavoro con dreamweaver dovremo innanzitutto preparare una progettazione grafica in cui il designer andrà a definire i vari blocchi che compongono le pagine, in cui inserirà i testi e le immagini. Gli spazi e i posizionamenti dovranno essere stabiliti prima dello sviluppo del codice, così come i percorsi di navigazione possibili all'interno delle pagine.

Sulla base di questo progetto iniziale andiamo a costruire le pagine con dreamweaver: creiamo innanzitutto un nuovo file, scegliendo il tipo ed eventualmente anche un template predefinito per aiutarci nello sviluppo. Tra le varie tipologie di file che possiamo creare abbiamo l'html, ovvero le pagine che gestiranno i contenuti attraverso l'omonimo codice, i CSS per la definizione degli stili, Javascript per realizzare script. Iniziamo creando un semplice file html vuoto: qui potremo iniziare a inserire i contenuti della prima pagina e vedere come vengono visualizzati. Selezionando Code abbiamo la possibilità di scrivere il codice digitando direttamente il testo, per cui dovremo conoscere le basi del linguaggio html. Dreamweaver permette di inserire facilmente link, immagini e testi semplicemente aggiungendoli nel punto desiderato. Le informazioni di base vengono inserite automaticamente dal programma, mentre i contenuti andranno posizionati nella sezione body della pagina. Selezionando design del menu, invece, avremo l'anteprima visuale del nostro lavoro, è consigliabile però visualizzarla direttamente nel browser, selezionando l'opzione preview/debug in browser dal menu in alto.

Per definire lo stile dei contenuti della pagina web è consigliabile realizzare un foglio di stile, o style sheet, ovvero un file CSS esterno da collegare in ogni pagina html. Per allegarlo digitiamo nella sezione header questo codice, facendo attenzione ad assegnare lo stesso nome al foglio di stile. Dreamweaver dispone di una funzione di completamento automatico per scegliere i giusti termini da utilizzare nel codice e, grazie all'uso dei colori, permette di distinguere agevolmente le parti. Ridimensiona il browser trascinando uno dei lati verso l'interno. Quando il viewport è più stretto di 700px, il layout cambia da due colonne a una singola colonna. La barra di navigazione viene sostituita da MENU su sfondo nero. Il testo bianco nella casella sopra l'immagine del Golden Gate Bridge è diventato rosa intenso e ora è posizionato sotto l'immagine. Per verificare la correttezza del codice usiamo il correttore automatico W3C validation, che permette di identificare tutti gli errori e risolvere i problemi. Una volta realizzate le pagine e collegate tra loro attraverso i link sarà sufficiente caricare i files nello spazio web acquistato. Come si può vedere, Dreamweaver offre davvero molte opportunità e funzioni per rendere ancora più bello e accattivante il proprio sito, grazie ad un'interfaccia molto semplice e alla tecnologia sviluppata da Adobe. Non mi resta quindi che augurare buon lavoro e buon divertimento. Alla prossima.

• Realizza una progettazione grafica prima di iniziare a sviluppare il codice

• Come fare un sito web con Dreamweaver

• Come iniziare ad utilizzare Adobe Dreamweaver
• Come convertire un template PSD in HTML
• Come realizzare un template per Wordpress con Dreamweaver