10 semplici ma utili suggerimenti e trucchi per Dreamweaver per principianti

Adobe Dreamweaver è un potente strumento per i web designer. Dreamweaver fornisce una superficie di progettazione visiva e un editor di codice per lo sviluppo di siti Web. Sebbene abbia sia pro che contro, la sua vasta gamma di funzionalità ti consente di creare siti Web in modo efficace.

Ecco 10 semplici ma utili suggerimenti e trucchi per Dreamweaver per principianti.

1. Elimina le interruzioni di riga:

Durante la copia del testo da un documento, un'e-mail o un file di Word in Dreamweaver, alla fine dei paragrafi o delle righe vengono visualizzate interruzioni di riga. Il carattere di interruzione del collegamento <br> segnala la fine delle righe, quindi qualsiasi testo successivo verrà visualizzato sulla riga sottostante. Questi personaggi sono invisibili e quindi è difficile rimuoverli. Sebbene Dreamweaver in genere non evidenzi questi caratteri, è possibile modificare le impostazioni nel menu delle preferenze per fare in modo che il programma mostri una piccola icona gialla che indica le interruzioni di riga. Una volta che le interruzioni di riga sono visibili, puoi eliminarle facilmente.

2. Ricordarsi di definire un sito:

Le persone spesso confondono lavorare su Dreamweaver come lavorare con un documento di Word. Tuttavia, la progettazione di un sito non riguarda la creazione di un file, ma la creazione di un sito con una raccolta di file correlati come immagini, file JavaScript, pagine Web e file CSS. Gli utenti che non lo capiscono spesso dimenticano l'importanza di creare un sito. Dreamweaver fornisce un processo del sito facile da configurare. Fornisce informazioni sulla posizione dei file del tuo sito e ti consente di selezionare uno dei tanti strumenti di gestione di Dreamweaver. Questi strumenti trasferiscono il tuo file sul tuo server Web, controllano i collegamenti interrotti e creano un sito con modelli.

3. Aumenta la dimensione del carattere del tuo codice:

Con la funzione di Dreamweaver per regolare la dimensione del carattere, puoi aumentare la dimensione del codice in pochi semplici passaggi. Per aumentare le dimensioni dei caratteri, scegli prima Dreamweaver > Preferenze, quindi fai clic sulla categoria Caratteri, quindi seleziona la nuova dimensione e fai clic su OK. Questo ti aiuterà a rendere il codice facilmente leggibile e potrai lavorare allo sviluppo del tuo sito Web per un lungo periodo di tempo senza affaticare gli occhi.

4. Disattiva lo sfondo CSS Stenografia:

Una delle caratteristiche dei CSS è la proprietà di sfondo. Questa funzione ti consente di aggiungere colori o immagini al tuo sfondo. La proprietà abbreviazione di sfondo di Dreamweaver riduce il codice di 3 righe a una sola riga che definisce un'immagine, un colore e una proprietà di ripetizione. Questo può certamente semplificare la definizione delle proprietà di sfondo, ma se si lascia una proprietà nella versione abbreviata, il browser Web tratterà come "nessuno". Ad esempio, durante la modifica degli sfondi se si specifica solo la proprietà dell'immagine, il browser Web rimuoverà il colore esistente dallo sfondo precedente. Quindi, è meglio disattivare la scorciatoia CSS in background per evitare questo problema.

5. Copia gli stili con CSS Designer:

Con CSS Designer puoi migliorare visivamente gli stili sulla tua pagina web. Se desideri utilizzare più funzionalità di CSS Designer, fai clic con il pulsante destro del mouse su qualsiasi selettore per utilizzare le operazioni di copia o duplicazione. Queste opzioni consentono di copiare gli stili da un selettore all'altro. Questi stili includono sfondo, testo, animazione o bordo. Se si desidera copiare un intero selettore, utilizzare il comando standard duplica o duplica in media query per un approccio mirato. Queste scorciatoie ti faranno risparmiare un sacco di tempo e manterranno anche uno stile coerente.

6. Elimina la barra di navigazione:

Adobe Dreamweaver CS5 viene fornito con una barra degli strumenti di navigazione del browser. Questa barra degli strumenti è stata creata per essere utilizzata con l'opzione di visualizzazione live di Dreamweaver. Puoi trovare entrambe queste opzioni nella finestra del documento. La vista dal vivo viene utilizzata per vedere un'anteprima della tua pagina web. Con una visualizzazione live, puoi fare clic sul collegamento e passare a una pagina particolare. La barra degli strumenti di navigazione mostra la posizione della nuova pagina e consente di navigare facilmente tra le pagine. Puoi nascondere questa barra degli strumenti quando non è in uso deselezionando l'opzione di navigazione del browser nella sezione Visualizza > Barre degli strumenti.

7. Gestisci i tuoi file:

Tutti i file sono presenti nel pannello File durante la configurazione di un sito con Dreamweaver. È possibile utilizzare questo pannello dei file per molte funzioni come rinominare, spostare ed evidenziare il nome del file. Questo è probabilmente comune e potresti sapere tutto questo, ma le pagine Web sono diverse dai normali file. Le pagine Web contengono immagini, collegamenti ad altre pagine Web e stili CSS da un file di foglio di stile esterno. Rinominare un'immagine, una pagina Web o un file CSS normalmente tramite Esplora risorse di Windows può causare collegamenti interrotti. Mentre Dreamweaver consente di aggiornare automaticamente i collegamenti se si sposta o si rinomina un file utilizzando il pannello dei file. In questo modo non ci sono collegamenti interrotti.

8. Optare per il selettore Tag:

Durante l'applicazione dello stile di classe CSS, aggiungere o rimuovere il tag con precisione può essere difficile. Per selezionare linee precise, il selettore di tag di Dreamweaver è il migliore. Il selettore di tag si trova nella parte inferiore sinistra della finestra del documento. Questo selettore mostra tutti i tag HTML e altri presenti attorno al testo. È possibile selezionare tag specifici facendo clic su un tag disponibile nella barra di selezione dei tag. Il tag evidenziato rappresenta che il tag è selezionato.

9. Usa frammenti:

Dreamweaver fornisce frammenti di codice che possono far risparmiare molto tempo. Gli snippet vengono sincronizzati tramite Creative Cloud che assicura che siano disponibili su ogni sistema. Puoi assegnare quelli più utilizzati come scorciatoia da tastiera. Se desideri modificare le scorciatoie, apri il design delle scorciatoie da tastiera e duplica il set standard. Quindi, seleziona la categoria snippet sotto la sezione dei comandi per selezionare i tuoi preferiti. Troverai quindi un elenco di tutti gli snippet disponibili, inclusi quelli che crei. La parte più difficile è capire quali combinazioni di tastiera non sono utilizzate. Ma questo può essere risolto usando un modificatore.

10. Collega WordPress e Dreamweaver:

Dreamweaver e WordPress formano una grande squadra. Puoi progettare e modificare le pagine di WordPress con il set di strumenti per file dinamici di Dreamweaver. Questo set di strumenti include filtri personalizzati, file correlati dinamicamente e suggerimenti sul codice specifici del sito. La parte difficile è capire come lavorare con altre pagine del sito con Dreamweaver. Dovresti prima iniziare con il file index.php presente nella root del sito di WordPress e navigare da lì. È possibile aggiungere il percorso direttamente all'indirizzo Web o utilizzare la funzione di Dreamweaver per fare clic su un collegamento. Dopo che la pagina è stata visualizzata, i CSS e altri strumenti in Dreamweaver sono sotto il tuo controllo.

Adobe Dreamweaver è ottimo per creare un sito web. Insieme a funzionalità di base come il completamento del codice, la compressione del codice e l'evidenziazione della sintassi, include alcune funzionalità avanzate come l'introspezione del codice e il controllo della sintassi in tempo reale. Questi suggerimenti citati ti aiuteranno a costruire il tuo sito web in modo più efficiente. Se stai cercando strumenti per creare un sito Web senza molta codifica, dai un'occhiata a questi strumenti per la creazione di siti Web.