Usare i riferimenti visivi per il layout

Ultimo aggiornamento il 27 apr 2021

Usare i riferimenti visivi per il layout in Dreamweaver, inclusi l'impostazione dei righelli e delle guide di layout, l'uso delle guide con i modelli, l'uso di una griglia di layout e l'uso di un'immagine di ricalco.

Impostare i righelli

I righelli ti aiutano a misurare, organizzare e pianificare il layout.Possono apparire sui bordi sinistro e superiore della pagina, contrassegnati in pixel, pollici o centimetri.

  • Per attivare e disattivare i righelli, selezionate Visualizza > Opzioni vista Progettazione > Regole > Mostra/Nascondi.
  • Per modificare l'origine, trascinate l'icona dell'origine del righello (nell'angolo superiore sinistro della vista Progettazione della finestra del documento) in un punto qualunque della pagina.
  • Per ripristinare la posizione predefinita dell'origine, selezionate Visualizza > Opzioni vista Progettazione > Righelli > Ripristina origine.
  • Per cambiare l'unità di misura, selezionate Visualizza > Righelli, quindi selezionate Pixel, Pollici o Centimetri.

Impostare le guide di layout

Guides sono linee che trascini sul documento dai righelli.Ti aiutano a posizionare e allineare gli oggetti con maggiore precisione.Puoi anche usare le guide per misurare le dimensioni degli elementi della pagina o emulare le pieghe (aree visibili) dei browser web.

Per aiutarti ad allineare gli elementi, puoi far agganciare gli elementi alle guide e le guide agli elementi.(Gli elementi devono essere posizionati in modo assoluto affinché la funzione di aggancio funzioni.)Puoi anche bloccare le guide per evitare che vengano spostate accidentalmente da un altro utente.

Crea una guida orizzontale o verticale

Trascinate il puntatore dal righello corrispondente.
Posiziona la guida nella finestra Documento e rilascia il pulsante del mouse (riposiziona la guida trascinandola di nuovo).
Nota

Per impostazione predefinita, le guide vengono registrate come misurazioni assolute in pixel dalla parte superiore o sinistra del documento e vengono mostrate relative all'origine del righello.Per registrare la guida come percentuale, premi il tasto Maiusc mentre crei o sposti la guida.

Mostrare o nascondere le guide

Seleziona Visualizza > Guide > Mostra guide.

Agganciare elementi alle guide

  • Per agganciare gli elementi alle guide, selezionate Visualizza > Opzioni vista Progettazione > Guide > Aggancia alle guide.
  • Per agganciare le guide agli elementi, selezionate Visualizza > Opzioni vista Progettazione > Guide > Aggancia guide agli elementi.
Nota

quando ridimensionate degli elementi (ad esempio elementi PA, tabelle e immagini), gli elementi ridimensionati vengono agganciati alle guide.

Bloccare o sbloccare tutte le guide

Selezionate Visualizza > Opzioni vista Progettazione > Guide > Blocca guide.

Visualizza e sposta una guida in una posizione specifica

Mantieni il puntatore del mouse sulla guida per visualizzarne la posizione.
Fate doppio clic sulla guida.
Inserisci la nuova posizione nella finestra di dialogo Sposta guida e fai clic su OK.

Visualizzare la distanza tra due guide

Premi Ctrl (Windows) o Command (Macintosh) e mantieni il puntatore del mouse in un punto qualsiasi tra le due guide.
Nota

L'unità di misura è la stessa dell'unità di misura usata per i righelli.

Emula la piega (area visibile) di un browser web

Selezionate Visualizza > Opzioni vista Progettazione > Guide, quindi selezionate le dimensioni preimpostate di un browser dal menu.

Rimuovere una guida

Trascinate la guida fuori del documento.

Modificare le impostazioni delle guide

Selezionate Visualizza > Opzioni vista Progettazione > Guide > Modifica guide, impostate le opzioni seguenti e fate clic su OK.

Colore guida

Specifica il colore delle linee di guida. Fai clic sul campione di colore e seleziona un colore dal selettore colore, oppure digita un numero esadecimale nella casella di testo.

Colore distanza

Specifica il colore delle linee che appaiono come indicatori di distanza quando mantieni il puntatore del mouse tra le guide.Fai clic sul campione di colore e seleziona un colore dal selettore colore, oppure digita un numero esadecimale nella casella di testo.

Mostra guide

Rende visibili le guide nella vista Progettazione.

Aggancia alle guide

Aggancia gli elementi della pagina alle guide mentre li sposti nella pagina.

Blocca guide

Blocca le guide nella posizione in cui si trovano.

Aggancia guide agli elementi

Aggancia le guide agli elementi della pagina quando vengono trascinate.

Annulla tutto

Elimina tutte le guide dalla pagina.

Usare le guide con i modelli

Quando le guide vengono aggiunte a un modello Dreamweaver, tutte le istanze del modello ereditano le guide.Le Guide nelle istanze di modelli, tuttavia, sono trattate come aree modificabili, quindi gli utenti possono modificarle. Le Guide modificate nelle istanze di modelli vengono ripristinate nella posizione originale ogni volta che l'istanza viene aggiornata con il modello principale.

Gli utenti possono anche aggiungere le proprie guide alle istanze di un modello. Le Guide aggiunte in questo modo non vengono sovrascritte quando l'istanza di modello viene aggiornata con il modello principale.

Utilizzare la griglia di layout

La griglia mostra un sistema di linee orizzontali e verticali nella finestra del documento. È utile per posizionare gli oggetti con precisione. Puoi fare in modo che gli elementi della pagina posizionati in modo assoluto si aggancino automaticamente alla griglia mentre li sposti, e modificare la griglia o controllare il comportamento dell'aggancio specificando le impostazioni della griglia. L'aggancio funziona indipendentemente dal fatto che la griglia sia visibile o meno.

Visualizzare o nascondere la griglia

Selezionate Visualizza > Opzioni vista Progettazione > Griglia > Mostra griglia.

Attivare o disattivare la funzione di aggancio

Selezionate Visualizza > Opzioni vista Progettazione > Griglia > Aggancia alla griglia.

Modificare le impostazioni della griglia

Selezionate Visualizza > Opzioni vista Progettazione > Griglia > Impostazioni griglia.

Impostate le opzioni desiderate e fate clic su OK per applicare le modifiche.

Colore

Specifica il colore delle linee della griglia. Fai clic sul campione del colore e seleziona un colore dal selettore colore, oppure digita un numero esadecimale nella casella di testo.

Mostra griglia

Rende visibile la griglia nella vista Progettazione.

Griglia calamitata

Aggancia gli elementi della pagina alle linee della griglia.

Spaziatura

Controlla la distanza tra le linee della griglia. Inserisci un numero e seleziona Pixel, Pollici o Centimetri dal menu.

Display

Specifica se la griglia visualizzata è composta da linee o puntini.

Nota

Se Mostra griglia non è selezionato, la griglia non appare nel documento e nessuna modifica è visibile.

Usare un'immagine di ricalco

Puoi utilizzare un'immagine di ricalco come guida per ricreare il design di una pagina creata in un'applicazione grafica come Adobe Freehand o Fireworks.

Un'immagine di ricalco è un'immagine JPEG, GIF o PNG posizionata nello sfondo della finestra del documento.Puoi nascondere l'immagine, impostarne l'opacità e modificarne la posizione.

L'immagine di ricalco è visibile solo in Dreamweaver; non è visibile quando visualizzi la pagina in un browser.Quando l'Immagine di ricalco è visibile, l'immagine di sfondo reale della pagina e il colore non sono visibili nella finestra del documento; tuttavia, l'immagine di sfondo e il colore saranno visibili quando la pagina viene visualizzata in un browser.

Posiziona un'immagine di ricalco nella finestra del documento

Effettuate una delle operazioni seguenti:
  • Selezionate Visualizza > Opzioni vista Progettazione > Immagine di ricalco > Carica.

  • Selezionate File > Proprietà di pagina, quindi nella categoria Immagine di ricalco, fate clic su Sfoglia (accanto alla casella di testo Immagine di ricalco).

Passate al file di immagine e fate clic su OK.

Nella finestra di dialogo Proprietà della pagina, specifica la trasparenza dell'immagine trascinando il cursore Trasparenza immagine, quindi fai clic su OK.

Per passare a un'altra immagine di ricalco o modificare la trasparenza dell'immagine di ricalco corrente in qualunque momento, selezionate File > Proprietà di pagina.

Visualizzare o nascondere l'immagine di ricalco

Selezionate Visualizza > Opzioni vista Progettazione >Immagine di ricalco > Mostra.

Modificare la posizione di un'immagine di ricalco

Selezionate Visualizza > Opzioni vista Progettazione > Immagine di ricalco > Regola posizione.

  • Per specificare con precisione la posizione dell'immagine di ricalco, immetti i valori delle coordinate nelle caselle di testo X e Y.

  • Per spostare l'immagine di 1 px alla volta, usa i tasti freccia.

  • Per spostare l'immagine di 5 px alla volta, premi Maiusc e un tasto freccia.

Reimposta la posizione dell'immagine di ricalco

Selezionate Visualizza > Opzioni vista Progettazione > Immagine di ricalco > Ripristina posizione.

L'immagine di ricalco torna nell'angolo superiore sinistro della finestra del documento (0,0).

Allinea l'immagine di ricalco a un elemento selezionato

Seleziona un elemento nella finestra del documento.

Selezionate Visualizza > Opzioni vista Progettazione > Immagine di ricalco > Allinea alla selezione.

L'angolo superiore sinistro dell'immagine di ricalco è allineato con l'angolo superiore sinistro dell'elemento selezionato.

Imposta prop immagine di ricalco

Imposta proprietà per un'immagine di ricalco (che è un file di immagine da utilizzare come Guida nella progettazione della pagina).

Effettuate una delle operazioni seguenti:

  • Fate clic su File > Proprietà di pagina
  • Fate clic su Finestra > Proprietà, quindi fate clic su Proprietà di pagina nella finestra di ispezione Proprietà testo.

Dalla finestra di dialogo Proprietà di pagina, selezionate Immagine di ricalco. Potete configurare le seguenti opzioni da questo pannello:

  • Immagine di ricalco: Specifica un'immagine da utilizzare come guida per copiare un progetto.Questa immagine è solo di riferimento e non viene visualizzata quando il documento viene aperto nel browser.
  • Trasparenza: Determina l'opacità dell'immagine di ricalco, da completamente trasparente a completamente opaca.