Attivazione o disattivazione della visualizzazione degli strumenti visivi

Mentre si lavora sulle pagine in visualizzazione Normale, può essere talvolta opportuno modificare elementi di pagina in genere non visibili in tale visualizzazione, ad esempio le aree contenuto oppure i margini e la spaziatura interna. In tal caso, gli strumenti visivi consentono di visualizzare tutti questi elementi di progettazione della pagina invisibili o vuoti, offrendo così controllo completo sul layout e sulla struttura della pagina. Gli strumenti visivi facilitano il lavoro sul contenuto, sulla progettazione, sul layout e sulla struttura della pagina.

In questo articolo vengono presentati gli strumenti visivi, viene descritta la funzione di ognuno e viene illustrato come visualizzare o nascondere rapidamente gli strumenti visivi in visualizzazione Normale.

Contenuto dell'articolo

Informazioni sugli strumenti visivi

Funzione di ogni strumento visivo

Attivazione o disattivazione della visualizzazione degli strumenti visivi

Informazioni sugli strumenti visivi

Gli strumenti visivi sono indicatori che possono essere visualizzati in una pagina in visualizzazione Normale per verificare tutte le proprietà e tutti gli elementi invisibili e vuoti della pagina. È possibile utilizzare gli strumenti visivi per identificare gli elementi con stili invisibili e vuoti, ad esempio tag HTML vuoti e controlli Microsoft ASP.NET invisibili. Gli strumenti visivi consentono inoltre di visualizzare i margini e la spaziatura interna di elementi di pagina, blocchi di contenuto e aree contenuto (solo in pagine ASP.NET e modelli Web dinamici) di una pagina.

Quando si nascondono gli strumenti visivi, il layout di pagina in visualizzazione Normale presenta una stretta corrispondenza con il layout di pagina nel browser, come illustrato nella figura seguente.

Pagina in visualizzazione Struttura con gli strumenti visivi disattivati

Nella figura successiva, la stessa pagina, in visualizzazione Normale ma senza la visualizzazione degli strumenti visivi predefiniti, presenta un aspetto diverso.

Pagina in visualizzazione Struttura con gli strumenti visivi predefiniti attivati

Quando si visualizzano gli strumenti visivi, alcuni elementi vengono visualizzati entro bordi punteggiati di diversi colori. Ogni bordo punteggiato rappresenta uno strumento visivo separato. Nella figura precedente, ad esempio, lo strumento visivo Bordi visibili visualizza le aree contenuto entro bordi punteggiati di colore rosa, gli elementi tabella entro bordi punteggiati di colore bianco e le aree non modificabili con ombreggiatura grigia. A seconda degli strumenti visivi selezionati, è inoltre possibile visualizzare le aree contenuto, gli elementi contrassegnati con stili nascosti o invisibili, i controlli ASP.NET invisibili e gli errori di controllo ASP.NET di una pagina. Nella sezione successiva viene descritto dettagliatamente ogni strumenti visivo.

Torna all'inizio

Funzione di ogni strumento visivo

In questa sezione vengono identificati gli strumenti visivi disponibili in Microsoft Office SharePoint Designer 2007, con una descrizione dell'utilizzo e del comportamento di ogni strumento visivo nonché delle eventuali limitazioni al relativo utilizzo, e viene illustrato l'aspetto di ogni strumento visivo in visualizzazione Normale.

Una pagina di un sito di Microsoft SharePoint dispone in genere di numerosi elementi di pagina e di progettazione. Per isolare e identificare in modo ottimale la funzione di ogni strumento visivo, può essere opportuno creare una pagina vuota e inserire alcuni elementi.

Selezione blocco

Lo strumento visivo Selezione blocco viene visualizzato in due modi:

  • Quando si fa clic all'interno di un blocco, intorno a tale blocco viene visualizzato un rettangolo punteggiato.

  • Il nome del tag corrispondente viene inoltre visualizzato nella Barra dei tag. È possibile fare clic su questo tag per selezionare il blocco e visualizzare i margini e la spaziatura interna.

Lo strumento visivo Selezione blocco può essere utilizzato soltanto per i tag di paragrafo, elenco, voce di elenco, modulo, div non posizionato, indirizzo, citazione, linea orizzontale e centratura.

Nota : Il rettangolo punteggiato, il margine e i quadratini di ridimensionamento sono disponibili per alcuni elementi come immagini, div posizionati e tabelle anche quando lo strumento visivo Selezione blocco non è selezionato.

Blocco con il cursore al suo interno e lo strumento visivo Selezione blocco attivato

È possibile selezionare un blocco nella Barra dei tag facendo clic sulla freccia e quindi su Seleziona tag. In questo modo vengono visualizzati i margini e la spaziatura interna del blocco, con i quadratini. È possibile utilizzare i quadratini per ridimensionare il blocco, i relativi margini e la relativa spaziatura interna. I margini vengono visualizzati con ombreggiatura rossa e la spaziatura interna con ombreggiatura blu, come illustrato nella figura seguente.

Nota : Selezionando un blocco mediante la Barra dei tag vengono visualizzati i margini e la spaziatura interna del blocco anche se non si visualizza lo strumento visivo Margini e spaziatura interna.

Blocco selezionato con il tag corrispondente selezionato nella Barra dei tag

1. Barra dei tag con il nome del tag corrispondente

2. Margini visualizzati con ombreggiatura rossa

3. Spaziatura interna visualizzata con ombreggiatura blu

4. Quadratino di ridimensionamento per il blocco

5. Quadratino di ridimensionamento per il margine

È possibile spostare nella pagina elementi con posizionamento assoluto, ad esempio immagini, tramite trascinamento. È possibile trascinare il tag corrispondente al blocco dell'elemento in qualsiasi punto di una pagina.

Bordi visibili

Lo strumento visivo Bordi visibili consente di visualizzare bordi punteggiati intorno agli elementi di una pagina con bordi nascosti o nessun bordo. Vengono visualizzati bordi visibili intorno a elementi come tabelle, elementi posizionati, contenitori di moduli e aree contenuto. Con la selezione dello strumento visivo non vengono visualizzati bordi visibili per gli elementi con stile intrinseco, ad esempio le immagini. Vengono inoltre visualizzati bordi visibili intorno a elementi con una larghezza e un'altezza specifiche privi di bordi. Quando si ridimensiona un paragrafo e quindi si fa clic in qualsiasi altro punto della pagina, vengono visualizzati bordi visibili dell'elemento paragrafo.

In una pagina master vengono visualizzati bordi punteggiati di colore rosa per le aree contenuto, bordi punteggiati di colore bianco per gli elementi tabella e un'ombreggiatura grigia per le aree non modificabili, come illustrato nella figura seguente.

Pagina con lo strumento visivo Bordi visibili attivato

1. Visualizzazione delle aree contenuto con bordi punteggiati di colore rosa

2. Visualizzazione degli elementi tabella con bordi punteggiati di colore bianco

3. Ombreggiatura grigia delle aree non modificabili

Contenitori vuoti

Lo strumento visivo Contenitori vuoti consente di visualizzare un rettangolo punteggiato intorno agli elementi vuoti di una pagina, come illustrato nella figura seguente.

Nota :  Nella visualizzazione Normale di Office SharePoint Designer 2007, gli elementi vuoti vengono compressi così come nella maggior parte dei browser. Visualizzando lo strumento visivo Contenitori vuoti vengono visualizzati tutti gli elementi vuoti di una pagina e viene così eventualmente modificato il layout di pagina in visualizzazione Normale ma non nel browser.

Pagina con lo strumento visivo Contenitori vuoti attivato

1. Elementi vuoti di una pagina racchiusi in rettangoli punteggiati

Margini e spaziatura interna

Lo strumento visivo Margini e spaziatura interna consente di visualizzare i margini e la spaziatura interna intorno agli elementi di pagina. I margini vengono visualizzati con ombreggiatura rossa, mentre la spaziatura interna viene visualizzata con ombreggiatura blu. Con questo strumento visivo vengono visualizzati i margini e la spaziatura interna di ogni elemento di pagina.

Nota : Non è possibile modificare i margini e la spaziatura interna mediante lo strumento visivo Margini e spaziatura interna. Selezionare invece l'elemento e utilizzare lo strumento visivo Selezione blocco, che consente di trascinare i quadratini di ridimensionamento.

Pagina con lo strumento visivo Margini e spaziatura interna

1. Spaziatura interna visualizzata con ombreggiatura blu

2. Margini visualizzati con ombreggiatura rossa

Elementi CSS Display:none

Lo strumento visivo Elementi CSS Display:none consente di visualizzare gli elementi definiti nel foglio di stile corrispondente della pagina come display:none.

Nota : Tali elementi non vengono visualizzati nel browser.

Elementi CSS Visibility:hidden

Lo strumento visivo Elementi CSS Visibility:hidden consente di visualizzare gli elementi definiti nel foglio di stile corrispondente della pagina come visibility:hidden.

Nota : Tali elementi non sono visibili nel browser, ma il relativo layout rimane visibile in visualizzazione Normale.

Controlli ASP.NET non visivi

Lo strumento visivo Controlli ASP.NET non visivi consente di visualizzare tutti i controlli ASP.NET invisibili, ad esempio i controlli origine dati o campo nascosto, di una pagina.

Pagina con visualizzazione dei controlli ASP.NET non visivi

1. Aspetto dei controlli ASP.NET non visivi in una pagina ASP.NET

Errori controllo ASP.NET

Lo strumento visivo Errori controllo ASP.NET consente di visualizzare un messaggio di errore quando viene rilevato un errore in un controllo ASP.NET di una pagina, ad esempio un errore durante la connessione a un'origine dati o la presenza di proprietà di pagina non corrette.

Pagina che mostra gli errori in un controllo ASP.NET

Etichette aree modello

Lo strumento visivo Etichette aree modello consente di visualizzare un bordo viola intorno alle aree contenuto, nonché un segnaposto che indica il nome di ogni area contenuto.

Nota : Questo strumento visivo può essere visualizzato soltanto in pagine create da pagine master ASP.NET o modelli Web dinamici.

Pagina con lo strumento visivo Etichette aree modello attivato

1. Aree contenuto delimitate in viola in una pagina master ASP.NET

Torna all'inizio

Attivazione o disattivazione della visualizzazione degli strumenti visivi

In visualizzazione Normale è possibile visualizzare o nascondere rapidamente gli strumenti visivi. Può ad esempio rivelarsi utile visualizzarli per utilizzare più facilmente le aree contenuto oppure nasconderli affinché il layout di pagina in visualizzazione Normale presenti una stretta corrispondenza con il layout di pagina nel browser.

  1. Aprire una pagina per la modifica in visualizzazione Normale.

    Nota : Il comando Strumenti visivi è disponibile solo in una visualizzazione Pagina. Il comando Strumenti visivi non è inoltre disponibile per file come i fogli di stile in cui non si utilizzano elementi di progettazione.

  2. Per visualizzare o nascondere gli strumenti visivi, eseguire una o più delle operazioni seguenti:

    • Scegliere Strumenti visivi dal menu Visualizza e quindi Mostra. Vengono così visualizzati o nascosti tutti gli strumenti visivi selezionati nel sottomenu. Per visualizzare o nascondere ogni strumento visivo, fare clic su di esso nel sottomenu Strumenti visivi.

    • Premere CTRL+ù per visualizzare o nascondere tutti gli strumenti visivi selezionati nel sottomenu Strumenti visivi.

    • Fare doppio clic sull'indicatore degli strumenti visivi sulla barra di stato. Vengono così visualizzati o nascosti tutti gli strumenti visivi selezionati nel sottomenu Strumenti visivi.

      Nota : Gli strumenti visivi che si selezionano nel sottomenu Strumenti visivi restano selezionati finché si sceglie di non visualizzarli. Di conseguenza, quando si preme CTRL+ù o si fa doppio clic sull'indicatore della barra di stato per visualizzare gli strumenti visivi vengono sempre visualizzati gli strumenti visivi attualmente selezionati nel sottomenu Strumenti visivi.

Nella figura seguente viene illustrato come visualizzare o nascondere gli strumenti visivi.

Menu visualizza con il sottomenu Strumenti visivi

1. Fare clic su Mostra per visualizzare o nascondere tutti gli strumenti visivi selezionati.

2. Fare clic su qualsiasi singolo strumento visivo per visualizzarlo o nasconderlo quando viene selezionato Mostra.

3. Aspetto degli strumenti visivi selezionati. Si tratta inoltre degli strumenti visivi predefiniti.

4. Aspetto degli strumenti visivi non selezionati.

Per individuare rapidamente se la funzionalità Strumenti visivi è attivata o disattivata, è possibile controllare la barra di stato. È inoltre possibile fare doppio clic sulla sezione Strumenti visivi della barra di stato per modificare l'impostazione di Strumenti visivi da Attivo a Inattivo e viceversa.

Indicatore Strumenti visivi sulla barra di stato

Quando si posiziona il puntatore sulla sezione Strumenti visivi della barra di stato, inoltre, viene visualizzata una notifica che illustra come lo stato corrente dell'impostazione di Strumenti visivi influisce sul layout di pagina in Office SharePoint Designer 2007.

Notifica Strumenti visivi sulla barra di stato

Torna all'inizio

Amplia le tue competenze
Esplora i corsi di formazione
Ottieni in anticipo le nuove caratteristiche
Partecipa al programma Office Insider

Queste informazioni sono risultate utili?

Grazie per i tuoi commenti e suggerimenti

Grazie per il tuo feedback! Potrebbe essere utile metterti in contatto con uno dei nostri operatori del supporto di Office.

×