Dreamweaver è un ottimo editor WYSIWYG, ma se non sei interessato a scrivere pagine web in un ambiente "ciò che vedi è ciò che ottieni", puoi comunque utilizzare Dreamweaver perché è anche un ottimo editor di testo. Ma ci sono molte funzionalità che si nascondono all'interno dell'editor di codice di Dreamweaver perché l'attenzione principale è sulla "vista di progettazione" o sulla parte dell'editor WYSIWYG del prodotto.
Come accedere alla vista del codice di Dreamweaver
Se non hai mai usato Dreamweaver come editor HTML, potresti non aver mai nemmeno notato i tre pulsanti nella parte superiore della pagina: "Codice", "Dividi" e "Design". Dreamweaver si avvia per impostazione predefinita in "Vista struttura" o in modalità WYSIWYG. Ma è facile passare alla visualizzazione e alla modifica del codice HTML. Basta fare clic sul Codice pulsante. Oppure vai al vista menu e selezionare Codice.
Se stai solo imparando come scrivere HTML o vuoi capire come le tue modifiche avranno un impatto sul tuo documento, puoi aprire contemporaneamente la vista del codice e la vista del progetto. La bellezza di questo metodo è che puoi modificare anche in entrambe le finestre. In questo modo puoi scrivere il codice per il tag immagine in HTML e quindi utilizzare la visualizzazione struttura per spostarlo in un'altra posizione della pagina con il trascinamento della selezione.
Per visualizzare entrambi contemporaneamente:
- Clicca sul Diviso pulsante (tra Codice e Design).
- Nel vista menu, selezionare Codice e design.
Una volta che hai dimestichezza con Dreamweaver per modificare il tuo codice HTML, puoi modificare le tue preferenze per aprire Dreamweaver in visualizzazione codice per impostazione predefinita. Il modo più semplice è salvare la vista del codice come area di lavoro. Dreamweaver si aprirà nell'ultimo spazio di lavoro che stavi utilizzando. In caso contrario, vai al menu Finestra e scegli l'area di lavoro che desideri.
Opzioni di visualizzazione del codice
Dreamweaver è così flessibile perché ha tanti modi per personalizzarlo e farlo funzionare nel modo desiderato. Nella finestra delle opzioni sono disponibili la colorazione del codice, la formattazione del codice, i suggerimenti sul codice e le opzioni di riscrittura del codice che è possibile regolare. Ma puoi anche modificare alcune opzioni speciali all'interno della vista codice stessa.
Una volta che sei in visualizzazione codice, c'è un Visualizza opzioni pulsante nella barra degli strumenti. Puoi anche visualizzare le opzioni accedendo al vista menu e scelta Opzioni di visualizzazione del codice. Le opzioni sono:
- Word Wrap - avvolge il codice HTML in modo che sia possibile visualizzarlo senza scorrere orizzontalmente. Nota che questa opzione non inserisce alcun ritorno a capo nel tuo codice, ma visualizza semplicemente il codice in modo che sia più facile da leggere.
- Numeri di riga - Visualizza i numeri di riga lungo il lato del codice. Mostra un simbolo di ritorno a capo per linee che si avvolgono più a lungo rispetto alla finestra di visualizzazione.
- Personaggi nascosti - visualizza caratteri speciali invece di spazi bianchi che verrebbero visualizzati su una pagina web. Ad esempio, un punto sostituisce uno spazio, un doppio gallone sostituisce ogni linguetta e un marcatore di piletta o di paragrafo sostituisce ogni interruzione di riga.
- Evidenzia codice non valido - evidenzia l'HTML che non è corretto in giallo. Se selezioni il tag giallo, Property Inspector ti fornirà suggerimenti su come ripararlo.
- Sintassi Colorare - attiva o disattiva la codifica a colori del tuo codice. Si modificano i colori della codifica dei colori nella sezione colorazione del codice delle preferenze.
- Rientro automatico - rende il rientro del codice automaticamente dopo un ritorno a capo se il codice sopra è rientrato. È possibile modificare la dimensione del rientro modificando le dimensioni della scheda nella sezione di formattazione del codice delle preferenze.
Modifica del codice HTML nella vista del codice di Dreamweaver
È facile modificare il codice HTML nella vista codice di Dreamweaver. Inizia semplicemente a digitare il tuo codice HTML. Ma Dreamweaver ti fornisce alcuni extra che lo estendono oltre un editor HTML di base. Quando inizi a scrivere un tag HTML, digiti <. Se ti fermi subito dopo quel personaggio, Dreamweaver ti mostrerà un elenco di tag HTML. Questi sono chiamati suggerimenti sul codice. Per restringere la selezione, inizia a digitare le lettere: Dreamweaver restringerà l'elenco a discesa fino al tag che si adatta a ciò che stai digitando.
Se non hai familiarità con HTML, puoi scorrere l'elenco di tag HTML e sceglierne diversi per vedere cosa fanno. Dreamweaver continuerà a richiedere gli attributi una volta che hai digitato un tag. Ad esempio, se si digita <>, Dreamweaver scenderà verso il Tag HTML, con gli altri tag che iniziano con I following. Se continui digitando la lettera m, Dreamweaver lo ridurrà al etichetta.
Ma i suggerimenti sul codice non terminano con i tag. Puoi utilizzare i suggerimenti sul codice per inserire:
- Attributi HTML
- Nomi di classi e ID
- Proprietà CSS
Se i suggerimenti sul codice non vengono visualizzati, puoi colpire Ctrl-barra spaziatrice (Windows) o Cmd-barra spaziatrice (Macintosh) per visualizzarli. Il motivo più comune per cui un suggerimento sul codice potrebbe non apparire è se si passa a una finestra diversa prima di terminare il tag. Perché Dreamweaver sta eliminando la digitazione del carattere <, se lasci la finestra e torni, dovrai rilanciare i suggerimenti sul codice.
Puoi disattivare il menu dei suggerimenti sul codice premendo il tasto Esc.
Dopo aver digitato il tuo tag HTML di apertura, dovrai chiuderlo. Dreamweaver lo fa in modo naturale. Se si digita il Chiudi tag opzione che meglio si adatta alle tue esigenze.
Se non sei ancora pronto a passare alla modifica delle tue pagine in formato HTML ma desideri vedere il codice mentre è scritto, dovresti provare l'ispettore del codice. Questo apre il codice HTML in una finestra separata. Funziona proprio come la vista del codice e, in effetti, è fondamentalmente una finestra di visualizzazione del codice staccabile per il documento corrente.Per aprire l'ispettore del codice, vai al Finestra menu e scegliere Code Inspector o colpisci il F10 tasto sulla tastiera.
Dreamweaver formatta il codice HTML come desiderato. Ad esempio, se si utilizzano 3 spazi per il rientro, ma non si indentano mai i tag IMG, è possibile specificare le informazioni di formattazione nelle opzioni di riscrittura del codice. Quindi vai al comandi menu e scegliere Applica formattazione sorgente. Questo è un ottimo modo per ottenere codice scritto da qualcun altro in un formato a te familiare.
Una caratteristica che molti codificatori HTML non conoscono o non usano è la possibilità di comprimere il codice HTML. Questo non rimuove i tag dal documento, ma li rimuove dalla vista in modo da non distrarre ciò su cui stai lavorando. Per comprimere il tuo codice:
- Seleziona la sezione di codice che vuoi nascondere.
- Nel modificare menu, scegliere Comprimi selezione dal Codice Collapse sottomenu
Un modo più semplice è selezionare il codice e quindi fare clic sulle icone di compressione del codice visualizzate nel margine interno. Puoi anche fare clic con il tasto destro sul codice selezionato e scegliere Comprimi selezione.
Se vuoi nascondere tutto tranne ciò che è evidenziato, scegliere Comprimi selezione esterna in uno qualsiasi dei metodi di cui sopra.
Per espandere il codice compresso, fai semplicemente doppio clic su di esso. Questo apre il codice e lo seleziona. Quindi puoi spostare quella selezione o eliminarla o aggiungere ulteriori tag attorno ad essa.
È possibile utilizzare la funzionalità Comprimi ed espandi tutto il tempo nelle pagine in cui non si desidera modificare il modello esterno. Basta selezionare l'area del contenuto che si desidera modificare e comprimere all'esterno. Quindi scrivi il tuo codice HTML. Puoi comunque visualizzare la pagina in Design visualizzalo o visualizzalo in anteprima in un browser. Il codice compresso non viene rimosso dal documento, semplicemente nascosto alla vista. Puoi anche usarlo quando lavori su una serie di elementi. Quando ne hai terminato uno, collassalo. Sai che hai finito quando non c'è codice che mostri.
