Tutorial di Dreamweaver


Dreamweaver Tutorial per la creazione di un sito WebCome sapete, questo sito è tutto su come creare un sito Web. Puoi imparare diversi modi usando WordPress, Joomla o Drupal. Abbiamo anche una guida sull’utilizzo di HTML puro come ai vecchi tempi (ovviamente con HTML5, l’ultima versione). In questo tutorial di Dreamweaver per principianti, ne imparerai un altro.


Per chi non lo sapesse, Dreamweaver è un’applicazione che consente di progettare, programmare e gestire siti Web. La cosa interessante di Dreamweaver è che offre sia la possibilità di scrivere codice sia di creare un sito Web usando un’interfaccia visiva.

In questo tutorial di Dreamweaver, imparerai tutto ciò che devi sapere per iniziare a creare siti Web con Dreamweaver. Conoscerai il programma e cosa può fare, i punti salienti delle funzionalità e come configurarlo. Successivamente, troverai una guida passo-passo su come creare un semplice sito Web con Dreamweaver, renderlo compatibile con i dispositivi mobili e quindi caricarlo sul tuo server.

Questa sarà una lunga corsa. Tuttavia, rimarrai stupito dalla rapidità con cui entrerai in questo programma molto intuitivo.

Contents

Cos’è Dreamweaver e cosa può fare?

In superficie, Dreamweaver è un IDE (Integrated Development Environment). Ciò significa che è un software che combina diversi strumenti per facilitare la progettazione e lo sviluppo web.

Ciò che lo rende speciale è che si trova tra un CMS (dove controlli tutto sul tuo sito Web attraverso un’interfaccia visiva) e un editor di codice puro. Ecco come funzionano le diverse parti.

Crea siti Web tramite un’interfaccia di progettazione visiva

La casella degli strumenti di progettazione visiva consente sostanzialmente di creare siti Web con il mouse. Ti consente di posizionare gli elementi del sito Web nel modo in cui crei un layout in Word. Fondamentalmente, vedi il tuo sito web come vedresti in un browser ma hai anche la possibilità di manipolarlo.

Questo è molto utile perché ti permette di costruire lo scheletro di un sito Web rapidamente e senza la necessità di scrivere una singola riga di codice. Invece, Dreamweaver creerà automaticamente il codice necessario per te. In questo modo, in teoria, è possibile creare manualmente un intero sito Web e caricarlo sul server.

D’altra parte, se sei in grado di scrivere codice, Dreamweaver ha anche tutti gli strumenti necessari per farlo.

Funziona come un vero e proprio editor di codice

La seconda parte di Dreamweaver è un editor di codice completo. È dotato di tutte le funzioni standard, tra cui:

  • Evidenziazione della sintassi – Ciò significa che Dreamweaver evidenzia diversi elementi (come operatori, variabili, ecc.) In diversi colori per rendere il codice più facile da leggere e correggere.
  • Completamento del codice – Il completamento del codice funziona in modo simile al completamento automatico sul telefono. Inizia a digitare e l’editor ti darà suggerimenti su ciò che stai cercando di scrivere. In questo modo, non è necessario digitare tutto completamente.
  • Crollo del codice – La compressione del codice è un’altra caratteristica che rende il codice più semplice da leggere. Ti consente di ridurre visivamente parti del tuo codice quando non ne hai bisogno. In questo modo, non è necessario scorrere l’intero file ma è possibile gestire solo le parti su cui è necessario lavorare.

Dreamweaver supporta le lingue più importanti per il web design (HTML5, CSS, JavaScript, PHP) e molto altro.

La parte migliore: se modificate qualcosa nel codice, Dreamweaver lo visualizzerà automaticamente anche sul lato visivo. In questo modo, puoi vederlo senza dover caricare i tuoi file su un server o avviare il browser.

Ci sono molte più funzioni e ne vedrai molte in azione nel prossimo tutorial di Dreamweaver per principianti.

Procedura di installazione e progettazione del sito Web di Dreamweaver (procedura dettagliata)

Come primo passo, è necessario acquisire Dreamweaver dal sito Web ufficiale di Adobe.

Puoi ottenere una prova gratuita qui o dal tuo client Creative Cloud.

tutorial di Dreamweaver per i prezzi per principianti

Passaggio 1. Download e installazione

Quando si ottiene il programma dal sito Web ufficiale, è sufficiente scaricare il file di installazione, eseguirlo e seguire le istruzioni.

Se stai già utilizzando Creative Cloud (come noi), puoi semplicemente fare clic Provare all’interno del cliente. Quindi, al termine dell’installazione del programma, fare clic su Inizia la prova.

Passaggio 2. Primo avvio

Quando avvierai Dreamweaver per la prima volta, vedrai questa schermata.

primo avvio di dreamweaver

Se non hai mai usato il programma prima d’ora, scegli No, sono nuovo. Quando lo fai, Dreamweaver ti guida attraverso una procedura guidata di configurazione. Il primo passo è scegliere se utilizzare l’area di lavoro per gli sviluppatori o un’area di lavoro standard.

la guida all'onboarding di dreamweaver seleziona l'area di lavoro

Poiché si tratta di un’esercitazione per principianti di Dreamweaver, scegliere la versione standard. Successivamente, puoi scegliere un tema colore per il tuo spazio di lavoro tra quattro diverse opzioni.

la guida all'onboarding di dreamweaver seleziona la combinazione di colori

Il passaggio finale è scegliere se iniziare con un file di esempio, un progetto nuovo o esistente o guardare un tutorial.

guida all'onboarding di dreamweaver ultimo passaggio

Scegli di iniziare con una cartella nuova o esistente e hai finito con il processo di installazione. Buon lavoro!

Ora iniziamo un progetto e impariamo a creare un sito Web con Dreamweaver.

Passaggio 3. Avvia un nuovo sito

Il primo passo è creare un nuovo sito. Per quello, vai a Sito> Nuovo sito. Ti porterà a questa schermata:

crea un nuovo sito in dreamweaver

Il primo passo è dare un nome al tuo sito. Quindi, devi scegliere dove salvarlo. Dipende da te, ma di solito ha senso mantenere tutti i progetti in un posto per semplicità.

Hai anche la possibilità di associare il tuo nuovo progetto a un repository Git. Questa può essere una buona idea poiché ti dà controllo della versione ma puoi saltarlo per ora.

Tratteremo tutto sotto server sul lato sinistro più tardi. Lo stesso con Preprocessori CSS, che è importante solo quando lo usi quel genere di cose.

Ciò che è importante per noi è Informazioni locali sotto Impostazioni avanzate.

abilita la cartella delle immagini predefinita in dreamweaver

Assicurati di fare clic sull’icona della cartella sulla destra dove dice Cartella Immagini predefinita. Quindi, vai alla directory del sito appena creata, aprila, crea una nuova cartella chiamata immagini e selezionalo come cartella predefinita. In questo modo, Dreamweaver salverà automaticamente le immagini associate al tuo sito.

Per ora è tutto, fai clic Salva per tornare al tuo spazio di lavoro.

Passaggio 4. Crea il file della tua home page

Ora che hai creato un sito del progetto, è il momento del primo file. Inizieremo con la homepage.

Se Dreamweaver non ti offre l’opzione stessa, vai a File> Nuovo. Puoi creare un file completamente nuovo o utilizzare un modello esistente. Il programma viene fornito con alcuni di questi (vedi Modelli di avviamento). In questo momento, ne creeremo uno nuovo invece.

crea un nuovo file in dreamweaver

L’HTML è impostato di default e puoi lasciarlo così com’è. Per il titolo del documento, inserire index.html e scegliere di Creare. Questo ti porterà nella seguente schermata.

nuovo progetto in dreamweaver

Questo è il cappello che abbiamo menzionato all’inizio: una vista dal vivo di come appare il tuo sito (vuoto, al momento) e il codice dietro di esso. Noterai anche che Dreamweaver ha creato automaticamente alcuni markup HTML di base su cui puoi basarti. Facciamolo adesso, dobbiamo?

Passaggio 5. Creare un’intestazione

Per inserire un elemento nella pagina, devi prima scegliere la sua posizione. Fare clic sulla pagina vuota (Dreamweaver sceglierà automaticamente il elemento se lo fai) o posiziona il cursore sullo stesso elemento nella parte di codice dello schermo.

Successivamente, devi andare al Inserire scheda nell’angolo in alto a destra. Questo ti dà un elenco di elementi HTML e siti comuni che puoi aggiungere alla tua pagina. Scorri verso il basso fino a visualizzare Intestazione come opzione.

inserire l'elemento header in dreamweaver

Un semplice clic lo inserisce nella pagina. Lo vedi anche apparire nel documento HTML.

intestazione visibile nell'interfaccia visiva e nell'editor del codice

Semplice, giusto?

Ora cambierai il testo all’interno dell’intestazione e lo trasformerai anche in un’intestazione. Per entrambi: prima contrassegna il testo nell’editor di codice in fondo.

contrassegnare il testo dell'intestazione in dreamweaver

Dopodiché, torna a Inserire, fai clic sulla freccia accanto a Intestazione e scegli H1. Questo avvolge il titolo della pagina in un tag HTML H1. Per ulteriori informazioni sui tag di intestazione, leggi Questo articolo.

Successivamente, puoi anche digitare un titolo per la tua pagina. Nel tuo vero sito web, sceglieresti qualcosa di descrittivo con parole chiave e non solo Benvenuti nel sito Web My Test come nell’esempio.

intestazione modificata in dreamweaver

Bene, hai appena creato un’intestazione di pagina! Al momento sembra ancora un po ‘rozzo, quindi cambiamo questo tramite CSS successivo.

Passaggio 6. Creare un file CSS

Nel caso in cui non si abbia familiarità con esso, CSS è la parte che fornisce tutto lo stile su una pagina Web. Ti consente di definire colori, dimensioni degli elementi, tipi e dimensioni dei caratteri e molto altro ancora. Vogliamo usare il markup per abbellire il titolo della nostra pagina e anche imparare a cambiare CSS in Dreamweaver.

Teoricamente, puoi aggiungere CSS direttamente all’interno del documento HTML. C’è un’opzione molto meno elegante di ciò che faremo, che sta creando un file dedicato per tutto lo stile CSS dell’intero sito.

Il primo passo è assegnare alla tua nuova intestazione una classe o un ID CSS. Durante tale processo, Dreamweaver richiederà anche di creare un file di foglio di stile. Vai al menu DOM nella parte in basso a destra dello schermo che elenca l’intera struttura del sito. Assicurati che l’intestazione sia selezionata.

Nella vista live, ora lo vedrai contrassegnato in blu con una piccola etichetta e un segno più in basso.

aggiungi il file css in dreamweaver

Fai clic sul segno più e digita #intestazione nel campo che si apre. L’hashtag significa che stai assegnando un id al contrario di una classe. Premere Invio. Nel menu di apertura, anziché Definisci in pagina Selezionare Crea un nuovo file CSS. Nel pop-up, scegli Navigare e vai alla cartella del tuo sito. Quindi digitare style.css (che è il nome standard per i fogli di stile) in Nome del file campo e colpire Salva.

crea un foglio di stile in dreamweaver

Quando selezioni ora Ok, un nuovo file verrà visualizzato nella parte superiore della vista live. Puoi vederlo e modificarlo da lì. Sarà inoltre collegato al sezione della parte HTML della tua pagina.

foglio di stile aggiunto al sito Web

Possum fantastico! Ora sei pronto per cambiare lo stile della tua pagina.

Passaggio 7. Creare un selettore CSS per il titolo della pagina

La prima cosa che vuoi fare è cambiare il carattere del titolo e centrarlo. Per questo, devi prima creare un nuovo selettore CSS. Un selettore è il nome di un elemento sulla nostra pagina a cui è possibile assegnare proprietà, ad esempio colore, dimensioni e altro.

Contrassegna l’intestazione H1 nella vista DOM in basso a destra (come hai fatto con l’intestazione prima). Quindi, sopra quello, scegli CSS Designer.

preparare lo stile per l'elemento voce

Per creare un selettore CSS, fai clic sulla riga in cui è indicato Selettori e quindi fare clic sul simbolo più. Questo dovrebbe proporre automaticamente un selettore al tuo nome #header h1.

crea selettore css in dreamweaver

Premi invio per crearlo. Fatto!

Nota veloce: per tutti coloro che non conoscono i CSS, questo selettore indica che stai prendendo di mira l’elemento denominato h1 dentro l’elemento chiamato #intestazione. In questo modo, qualunque cosa tu inserisca come CSS viene applicata solo al testo scritto e non all’elemento header generale.

Passaggio 8. Modifica il carattere del titolo

Ora che hai un selettore, puoi assegnargli delle proprietà. Se conosci i CSS, puoi semplicemente digitare markup in style.css e il programma se ne occuperà automaticamente.

Per gli utenti meno esperti, Dreamweaver lo rende anche molto semplice. Resta nel CSS Designer menu e deseleziona la casella dove dice Mostra set. Quando lo fai, sbloccherà molte opzioni aggiuntive.

abilita le opzioni css in dreamweaver

Con i nuovi pulsanti, puoi scegliere molte proprietà CSS dalle aree di layout, testo, bordo e sfondo. Il Di Più pulsante ti dà le opzioni per inserire le tue regole.

Per modificare il tipo di carattere, fare clic su Testo opzione in alto (in alternativa, scorrere verso il basso). Nelle opzioni imminenti, passa con il mouse sopra famiglia di font e clicca su carattere predefinito.

cambia la famiglia di caratteri in dreamweaver

Questo ti darà una serie di opzioni per i caratteri comuni, inclusi i loro fallback (nel caso in cui il browser dell’utente non sia in grado di mostrare il carattere principale). Potresti voler fare clic su Gestisci caratteri in fondo per arrivare a questo menu:

font web adobe edge

Qui puoi scegliere font gratuiti da quelli di Adobe Servizio Edge Web Fonts. Cerca un carattere per nome o usa le numerose opzioni di filtro a sinistra per restringere le tue scelte fino a trovare qualcosa.

Un clic su uno dei caratteri tipografici lo contrassegna per l’inclusione in Dreamweaver. Una volta che lo hai fatto, puoi usarli direttamente o andare a Stack di font personalizzati per definire i propri caratteri di fallback.

creare pile di font personalizzate in dreamweaver

Per ora, basta premere Fatto e quindi fare clic su font predefiniti ancora. Questa volta scegli il carattere personalizzato che hai scelto e Ecco – la modifica viene eseguita includendo tutta la codifica necessaria.

carattere cambiato in dreamweaver

Se fai clic sul tuo style.css file in alto, vedrai che è stato aggiunto anche tutto il markup.

foglio di stile aggiornato in dreamweaver

Passaggio 9. Centrare il titolo e modificarne le dimensioni

Il testo potrebbe ancora apparire migliore. Il prossimo compito è centrarlo e aumentare la dimensione del carattere. Per questo, puoi anche usare un’altra funzione chiamata Modifica rapida.

Per usarlo, vai alla vista del codice e fai clic con il pulsante destro del mouse sulla parte che desideri modificare. In questo caso, è sul

supporto.

apri il menu di modifica rapida in dreamweaver

Qui, scegli Modifica rapida in cima. Questo aprirà il CSS associato a questo elemento sottostante. Ora puoi inserire proprietà aggiuntive senza dover cercare l’intero file del foglio di stile (che può essere molto lungo). Per centrare il testo e ingrandirlo, aggiungi il seguente codice.

dimensione carattere: 42px;
text-align: center;

Durante la digitazione, Dreamweaver presenterà anche proposte per ciò che si sta tentando di inserire, rendendolo ancora più semplice. Questa è la funzione di completamento del codice menzionata in precedenza.

Al termine, sarà simile al seguente:

cambia css tramite modifica rapida in dreamweaver

Si noti che il testo è già cambiato nella vista live. Ora premi Esc per andare veloce, modifica e vai al foglio di stile. Scoprirai che il nuovo CSS è stato aggiunto nella posizione appropriata.

Abbastanza bello, giusto?

A proposito, se non sei mai sicuro di cosa significhi una proprietà CSS, fai semplicemente clic con il pulsante destro del mouse e scegli Documenti rapidi (o premere Ctrl + K). Dreamweaver ti fornirà quindi una spiegazione.

documenti rapidi di Dreamweaver

Passaggio 10. Aggiungi altro contenuto

Con quello che hai imparato finora, ora puoi costruire un sito rudimentale. Per il bene di questo tutorial di Dreamweaver, abbiamo fatto quanto segue:

  • Caratteri predefiniti definiti per intestazioni e paragrafi
  • Aggiunta una barra di navigazione e creato un collegamento alla homepage in essa contenuta
  • Aggiunta una casella div per il contenuto con altre due caselle all’interno
  • Spostato uno di loro a sinistra e uno a destra con il galleggiante proprietà
  • Limitate la loro larghezza alle percentuali in modo che possano allinearsi orizzontalmente
  • Aggiunti un titolo di esempio e un testo fittizio a sinistra, incluso un elenco non ordinato
  • Crea un modulo (utilizza il menu a discesa sotto Inserire), due campi di testo e un pulsante di invio
  • Aggiunta spaziatura attorno agli elementi tramite margini CSS e riempimento
  • Colori e bordi di sfondo forniti
  • Creato un piè di pagina e un messaggio di copyright

Ecco il risultato:

sito web con design avanzato

Codice per l’esempio:

Poiché questo è un po ‘avanzato e non tutti sapranno come farlo, puoi trovare l’HTML e il CSS di seguito in modo da poterlo ricostruire da solo. Innanzitutto l’HTML:





index.html

 



Casa

Intestazione di esempio per il contenuto principale

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Scegliete la pellentesque est est sit amet ornare. Suspendisse eget elit mi. In imperdiet auctor leo vitae blandit.

  • Etiam tempus urna condimentum libero varius
  • Ut commodo risus finibus
  • Duis odio lacus, elementum eget sem finibus
  • Mollis dignissim enim.
  • Quisque molestie suscipit odio vel facilisis

Curabitur vestibulum, lorem a tincidunt dapibus, erat sem rhoncus nisl, non dapibus quam mi ac ligula. Vestibolo id auctor eros, nec porttitor odio. Nunc efficitur turpis sed nulla vestibulum viverra. Mecenas iaculis mi ornare, dapibus lectus in, facilisis nisl.

Esempio di invito all'azione!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Scegliete la pellentesque est est sit amet ornare. Suspendisse eget elit mi.

Copyright © 2017 My Imaginary Website

E poi il CSS:

@charset "utf-8";

body {
colore di sfondo: # F5F5F5;
margin-top: 0px;
margine destro: 0px;
margine inferiore: 0px;
margine-sinistra: 0px;
}

p,
un',
ul,
olo,
Li,
etichetta,
ingresso{
famiglia di caratteri: muli, sans-serif;
stile carattere: normale;
peso carattere: 300;
dimensione carattere: 17px;
}

h1, h2, h3, h4, h5 {
famiglia di caratteri: karla, sans-serif;
stile carattere: normale;
peso carattere: 400;
trasformazione del testo: maiuscolo;
}

#intestazione {
imbottitura: 25px;
imbottitura inferiore: 25px;
colore di sfondo: #FFFFFF;
bordo inferiore: 4px solido # EB232F;
}

#header h1 {
famiglia di caratteri: aguafina-script;
stile carattere: normale;
peso carattere: 400;
dimensione carattere: 42px;
text-align: center;
margin-top: 0px;
margine inferiore: 0px;
trasformazione del testo: nessuna;
}

#navigation {
margine destro: auto;
margine sinistro: auto;
larghezza massima: 1140px;
margine superiore: 10px;
margine inferiore: 10px;
}

#navigation a {
colore: # EB232F;
}

.principale {
blocco di visualizzazione;
margine superiore: 15 px;
margine destro: auto;
margine sinistro: auto;
margine inferiore: 15px;
chiaro: entrambi;
overflow: auto;
larghezza massima: 1140px;
}

.main # main-right {
galleggiante: a destra;
larghezza: 37,5%;
blocco di visualizzazione;
}

.main # main-left {
galleggiante: a sinistra;
larghezza: 57%;
blocco di visualizzazione;
imbottitura-destra: 20px;
}

.main # main-right .cta {
text-align: center;
}

.main # main-right .form {
larghezza: 92%;
margine destro: auto;
margine sinistro: auto;
}

# main-right .form div {
margine inferiore: 10px;
}

# main-right .form .label {

}

# main-right .form .textfield {
larghezza: 100%;

}

.main # main-right #button {
text-align: center;
imbottitura: 7px;
imbottitura inferiore: 7px;
margine sinistro: auto;
margine destro: auto;
posizione: relativa;
blocco di visualizzazione;
imbottitura-destra: 36px;
imbottitura-sinistra: 36px;
bordo: nessuno;
colore di sfondo: # EB232F;
colore: #FFFFFF;
cursore: puntatore;
}

.piè di pagina {
blocco di visualizzazione;
imbottitura: 25px;
imbottitura inferiore: 25px;
text-align: center;
}

Vogliamo usarlo come esempio per mostrarti i passi successivi. Anche se sembra complicato, lo mettiamo insieme nello stesso modo in cui ti abbiamo mostrato prima.

Passaggio 11. Anteprima nel browser e sul dispositivo mobile

Come abbiamo fatto tutto questo? Bene, prima di tutto, abbiamo un po ‘più esperienza nella costruzione di siti Web di quanto probabilmente tu sia. Pertanto, abbiamo già in mente i passaggi su come creare una pagina Web adeguata.

In secondo luogo, stiamo utilizzando una funzione molto utile che mi aiuta ad accelerare il processo: l’anteprima del browser. Dreamweaver consente di visualizzare le pagine Web in tempo reale in un browser e persino su dispositivi mobili.

Per iniziare, fai clic sul pulsante di anteprima in tempo reale nell’angolo in basso a destra.

abilita il menu di anteprima in dreamweaver

Questo aprirà le opzioni di anteprima.

opzioni di anteprima in tempo reale in dreamweaver

Un clic su uno dei nomi del browser aprirà il progetto del tuo sito Web al suo interno. Puoi anche scansionare il codice QR con il tuo telefono o tablet (ad esempio con Firefox Quantum) o digita l’indirizzo visualizzato nel browser per avviare l’anteprima dal vivo sul dispositivo.

Basta essere consapevoli del fatto che è necessario inserire l’ID Adobe e la password per questo. Dovresti avere questo dalla registrazione per Dreamweaver.

La parte migliore: Tutte le modifiche apportate in Dreamweaver verranno visualizzate automaticamente nel browser contemporaneamente alle modifiche.

In che modo questo mi ha aiutato a mettere insieme il sito più velocemente? Innanzitutto, a seconda delle dimensioni dello schermo, la visualizzazione nel browser potrebbe essere più vicina all’originale di quella visualizzata in Dreamweaver.

In secondo luogo, il controllo del sito nel browser mi consente di utilizzare gli strumenti di sviluppo per testare le modifiche.

strumenti di sviluppo nel browser

Sono molto simili a quello che vedi in Dreamweaver. Ci sono più familiari, quindi possiamo lavorare più velocemente con loro e semplicemente copiare e incollare il codice nel nostro foglio di stile.

Uno sguardo alla versione del telefono mostra che c’è ancora molto lavoro da fare.

anteprima mobile in tempo reale in dreamweaver

Questo ci porta direttamente al prossimo punto.

Passaggio 12. Aggiungi query multimediali

Per far funzionare il tuo sito Web su tutti i dispositivi, devi aggiungere una cosiddetta media query. Si tratta di istruzioni CSS condizionali che indicano ai browser di applicare allo stile solo al di sopra o al di sotto di determinate dimensioni di schermi o su determinati dispositivi. In questo modo, è possibile modificare il layout su schermi più piccoli.

Finora hai definito solo stili globali. Ciò significa che gli stili applicati a tutto il sito. Ora imparerai come aggiungere stili condizionali per schermi più piccoli.

Per prima cosa, vai a CSS Designer. Assicurarsi che il file a cui si desidera aggiungere il codice sia selezionato in fonti. Premi il segno più sotto @media.

Ti dà questo pannello di opzioni:

menu di media query in dreamweaver

È possibile definire le condizioni per le query multimediali, ad esempio i dispositivi a cui si applicano, l’orientamento, la risoluzione e molto altro. È inoltre possibile aggiungere più condizioni con il segno più.

Ciò che è più importante per il nostro esempio è il larghezza massima ambientazione. Con ciò, sei in grado di definire CSS personalizzati che si applicheranno solo a una determinata dimensione massima dello schermo.

Supponiamo che tu voglia risolvere prima le cose sul telefono, quindi digita a larghezza massima di 375 pixel. Quando lo fai, puoi vedere il codice CSS in basso.

creare query multimediali in dreamweaver

Cosa succederà anche quando fai clic Ok è che una linea verde appare nella parte superiore dello schermo. Ciò rappresenta visivamente la media query. Fare clic su di esso e lo schermo passa automaticamente a quella dimensione.

creare query multimediali in dreamweaver

Passaggio 13. Aggiungi CSS condizionale

Per correggere il design per dispositivi mobili, la prima cosa che dobbiamo fare è eliminare il codice che fa sì che i due elementi sul sito si sistemino uno accanto all’altro. Chiaramente non c’è abbastanza spazio per quello.

Puoi farlo nello stesso modo in cui hai manipolato CSS in precedenza, solo che questa volta hai attivato una query multimediale mentre lo fai.

Prima di tutto: vai all’elemento nella vista DOM. Da lì crea un nuovo selettore CSS per esso. Quindi, imposta il suo larghezza per auto, galleggiante per nessuna (per impedire che vada a sinistra) e aggiungi un po ‘di imbottitura ai lati in modo che il contenuto non bordi al bordo dello schermo.

design mobile corretto

Sembra molto meglio, no? Allo stesso modo, puoi modificare il CSS di tutti gli altri elementi della pagina per renderli tutti corretti.

Questo è fondamentalmente tutto per le domande dei media. Puoi utilizzare lo stesso metodo per adattare il layout a tablet e altre dimensioni.

Suggerimento professionale: Non ottimizzare per determinati dispositivi e le loro dimensioni, ma crea query multimediali a seconda del layout. Ciò significa giocare con le dimensioni dello schermo e aggiungere query in quei punti in cui il layout non ha più un bell’aspetto.

Ancora una cosa: puoi anche creare query multimediali un po ‘più facilmente usando le dimensioni del dispositivo preimpostate nell’angolo in basso e facendo clic sul simbolo più in alto quando hai trovato un punto in cui desideri aggiungerne uno.

creare query multimediali tramite collegamenti in dreamweaver

Passaggio 14. Carica il tuo sito sul server

Si consiglia di utilizzare Bluehost (link affiliato) per ospitare il tuo sito Dreamweaver.

Una volta terminata la parte di progettazione, sei praticamente pronto per caricare il sito sul tuo server. Come accennato all’inizio, Dreamweaver lo rende anche molto semplice.

Per prima cosa, vai a Sito> Gestisci siti. Seleziona il tuo sito Web corrente dal menu e scegli modificare in basso a sinistra. Nella finestra seguente, fai clic su server.

configurazione del server remoto in dreamweaver

Immettere tutti i dati importanti per connettersi al server FTP. Il nome dipende da te, il resto (indirizzo FTP, nome utente, password) viene dal tuo provider di hosting. Non dimenticare di specificare in quale directory posizionare i file e l’indirizzo web del tuo sito live! L’ultima parte è importante affinché Dreamweaver possa creare collegamenti interni relativi al sito.

Sotto Avanzate hai alcune altre opzioni (se caricare i file automaticamente dopo il salvataggio). Di solito puoi tenere le cose come sono. Colpire Salva due volte e il gioco è fatto.

Ora vai al File pannello (in alto a destra o via Finestra> File) e fare clic sul simbolo più a sinistra per connettersi al server:

carica il sito sul server remoto in dreamweaver

Una volta stabilita la connessione, selezionare i file che si desidera caricare e fare clic sulla freccia rivolta verso l’alto per farlo. Al termine, il tuo sito dovrebbe essere disponibile dal tuo indirizzo web.

Molto bene! Hai appena creato e caricato un sito semplice con Dreamweaver!

Dreamweaver Tutorial – Final Words

Dreamweaver è un fantastico programma per creare siti Web. Combina un’interfaccia utente intuitiva con un editor di codice completo. Grazie a questo mix, è facile per principianti, intermedi e utenti avanzati creare siti Web di alta qualità.

In questo tutorial di Dreamweaver per principianti, ti abbiamo presentato Dreamweaver e le sue funzionalità. Ti abbiamo mostrato come impostare il programma e iniziare con il tuo primo sito. Hai imparato come creare una struttura HTML di base e modellarla con CSS. Abbiamo anche spiegato come rendere reattivo un sito Web mobile e caricarlo sul tuo server.

Ormai hai una solida conoscenza di come funziona Dreamweaver e di come puoi utilizzarlo per creare un sito Web. Ora tocca a te tuffarti più a fondo e capire i passi successivi.

Non dimenticare: Dreamweaver è solo un modo per creare un sito Web. Ce ne sono molti altri e puoi trovare molte informazioni su questo proprio qui. In bocca al lupo!

Hai già usato Dreamweaver? Qual è la tua opinione? Qualcosa da aggiungere a quanto sopra? Facci sapere nella sezione commenti qui sotto!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map