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
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
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.
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
Visualizzare la distanza tra due guide
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
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.
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.
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
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.
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
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.
Crea splendidi siti web con Dreamweaver
Progetta, codifica e gestisci siti web dinamici con un potente strumento completo.