Come fare un sito web con Dreamweaver

Tramite: O2O 05/05/2021
Difficoltà: media
17

Introduzione

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.

27

Occorrente

  • Adobe Dreamweaver
  • PC o smartphone
  • Connessione internet
37

Realizzare la progettazione

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.

47

Creare un file html

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.

Continua la lettura
57

Definire i contenuti

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.

67

Guarda il video

77

Consigli

Non dimenticare mai:
  • Realizza una progettazione grafica prima di iniziare a sviluppare il codice
Alcuni link che potrebbero esserti utili:

Potrebbe interessarti anche

Naviga con la tastiera

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Segnala il video che ritieni inappropriato
Devi selezionare il video che desideri segnalare
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Internet

Come creare un sito Web Responsive

Creare un sito Web Responsive non è un'operazione complicata, anzi, è alla portata di tutti, anche se occorre qualche semplice accorgimento tecnico. In questa breve guida, vi spiegherò come creare un sito Web Responsive nella maniera corretta. Occorre...
Internet

Come risalire all'hosting di un sito web

Al giorno d'oggi, è molto facile e conveniente di possedere un sito web. Piattaforme CMS come WordPress e Joomla sono gratuiti e facili da usare. In generale, ci sono quattro diversi tipi di web hosting: Shared, Virtual Private Server (VPS) e Cloud Hosting....
Internet

Come inserire una Sitemap nel proprio sito web

La sitemap non è altro che un sito web dove sono gerarchicamente elencate tutte le pagine del sito. È molto conosciuta grazie alla sua finalità, ossia facilita la navigazione degli utenti, consentendo la facile ricerca di tutto ciò di cui hanno bisogno....
Internet

Come pubblicizzare un sito web gratuitamente

Un sito web, se in grado di generare un numero piuttosto alto di visualizzazioni, può diventare una vera e propria fonte di reddito, in grado di generare centinaia (e, in alcuni casi, anche migliaia) di euro al mese. Grazie a numerosi software e piattaforme,...
Internet

Come presentare un sito web al cliente

Oltre 7 aziende su 10 posseggono un sito web con la storia, i servizi e i contatti della propria produzione attiva. Introdurre il proprio lavoro, ai giorni nostri, è fondamentale per il rapporto tra fornitore e potenziale cliente, per ottenere visibilità...
Internet

Come Sapere A Chi E' Intestato Un Sito Web

Ogni volta che apriamo il nostro browser per navigare in Internet, i siti da visitare sono innumerevoli. Alcuni di essi risultano estremamente affidabili, mentre altri non hanno certificazione. Per questo motivo dobbiamo aprirli con estrema attenzione,...
Internet

Come collegare un sito web a Facebook

Per il proprio business ormai è d'obbligo utilizzare internet e tutti gli altri strumenti tecnologici ed informatici, per far decollare la propria attività. Sia che tu sia un artista o un imprenditore, facebook e più in generale internet possono diventare...
Internet

Come evitare la registrazione ad un sito web

Ci sarà capitato molto spesso di registrarci ad un sito internet o un forum solo per la visualizzazione di un link o un'informazione che ci interessava. Molto spesso la fretta di ottenere queste informazioni ci ha spinto alla registrazione, che tanto...