Procedura dettagliata: modifica di codice HTML di base nelle pagine Web Form di Visual Studio

In Microsoft Visual Studio 2012 sono disponibili maggiori strumenti di modifica HTML per le pagine Web Form. L'editor HTML di Visual Studio consente di utilizzare la modalità WYSIWYG e inoltre di utilizzare direttamente il markup HTML per un controllo più preciso. In questa procedura dettagliata sono illustrate le funzionalità di modifica HTML disponibili in Visual Studio.

Di seguito vengono illustrate le attività incluse nella procedura dettagliata:

• Creazione e modifica di HTML in visualizzazione Progettazione.

• Creazione e modifica di HTML in visualizzazione Origine.

• Utilizzo della doppia visualizzazione.

• Utilizzo di strumenti di navigazione per spostarsi in modo veloce all'interno dei tag HTML.

Prerequisiti

Per completare questa procedura dettagliata, è necessario disporre dei seguenti elementi:

• Visual Studio o Visual Studio Express per il Web installato nel computer. 

  Nota

  Se si utilizza Visual Studio, nella procedura dettagliata si presuppone che sia stata selezionata la raccolta di impostazioni Sviluppo Web al primo avvio di Visual Studio.Per ulteriori informazioni, vedere Procedura: selezionare le impostazioni dell'ambiente di sviluppo Web.

• Informazioni generali sull'utilizzo di Visual Studio.

  Per informazioni preliminari sulla creazione di pagine Web Form in Visual Studio, vedere Procedura dettagliata: creazione di una pagina Web di base in Visual Studio.

Creare il sito Web e la pagina Web Form

Se è già stato creato un sito Web Form in Visual Studio o Visual Studio Express per il Web, ad esempio completando la Procedura dettagliata: creazione di una pagina Web di base in Visual Studio, è possibile utilizzare tale sito Web e passare alla sezione successiva. In caso contrario, creare un sito Web e una pagina Web Form attenendosi alla seguente procedura.

Per creare un sito Web di tipo file system

1. Aprire Visual Studio o Visual Studio Express per il Web.

2. Scegliere Nuovo sito Web dal menu File.

   Viene visualizzata la finestra di dialogo Nuovo sito Web.

3. In Installato fare clic su Visual Basic o Visual C#, quindi selezionare Sito Web ASP.NET vuoto.

   Per questa procedura dettagliata, si creerà un sito Web che non include pagine precompilate e altre risorse.

4. Nella casella Percorso Web selezionare File system, quindi immettere il nome della cartella in cui archiviare le pagine per il sito Web.

   Digitare, ad esempio, il nome di cartella C:\WebSites.

5. Fare clic su OK.

   In Visual Studio verrà creato un progetto di sito Web che include un file Web.config.

6. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla directory radice del sito Web e scegliere Aggiungi nuovo elemento.

7. Selezionare Web Form, assegnare al file il nome Default.aspx, quindi fare clic su Aggiungi.

Utilizzo della visualizzazione Progettazione

In questa sezione della procedura dettagliata verrà descritto come utilizzare la visualizzazione Progettazione che presenta una modalità di visualizzazione della pagina Web Form analoga alla visualizzazione WYSIWYG. È possibile aggiungere un testo digitandolo come in un programma di elaborazione testi. È possibile formattare il testi in modo diretto con i comandi di formattazione oppure mediate la creazione di stili inline.

In visualizzazione Progettazione, la pagina viene visualizzata in modo simile a come verrebbe visualizzata in un browser, con alcune differenze. La prima differenza consiste nella possibilità di modificare il testo e gli elementi in visualizzazione Progettazione. La seconda differenza consiste nel fatto che, in visualizzazione Progettazione, vengono visualizzati alcuni elementi e controlli che non verranno visualizzati nel browser per agevolare la modifica delle pagine. Inoltre, per alcuni elementi, quali le tabelle HTML, viene eseguito un rendering specifico della visualizzazione Progettazione che aggiunge ulteriore spazio per l'editor. In generale, la visualizzazione Progettazione agevola la visualizzazione della pagina, ma non costituisce un'esatta rappresentazione del modo in cui verrà eseguito il rendering della pagina in un browser.

Per aggiungere e formattare l'HTML statico in visualizzazione Progettazione

1. Se non si è in visualizzazione Progettazione, fare clic su Progettazione nella parte inferiore sinistra della finestra.

   

2. Nella parte superiore della pagina digitare ASP.NET Web Page.

   

3. Evidenziare il testo per selezionarlo, quindi nella barra degli strumenti Formattazione fare clic su Titolo 1.

   

4. Premere INVIO dopo ASP.NET Web Page, quindi digitare This page is powered by ASP.NET.

   

5. Evidenziare il testo, quindi scegliere Nuovo stile dal menu Formato.

   

   Verrà visualizzata la finestra di dialogo Nuovo stile.

6. Selezionare l'opzione Applica nuovo stile alla parte selezionata del documento.

7. Selezionare un tipo di carattere dall'elenco a discesa della famiglia di caratteri, quindi fare clic su Applica.

   La famiglia di caratteri viene applicata al testo selezionato.

   

8. Fare clic su Blocco sotto a Categoria, quindi selezionare (valore) dall'elenco a discesa altezza riga. Inserire un valore per l'altezza della riga.

   

9. Selezionare (valore)dall'elenco a discesaspaziatura tra lettere. Inserire un valore per la spaziatura tra lettere. Fare clic su Applica per visualizzare i valori applicati al testo selezionato.

10. Fare clic su OK.

Visualizzazione delle informazioni relative ai tag

Quando si utilizza la visualizzazione Progettazione, può risultare utile visualizzare i tag, ad esempio div e span che non dispongono di un rendering visivo.

Per visualizzare i tag dell'area di progettazione HTML in visualizzazione Progettazione

• Nel menu Visualizza, scegliere Strumenti visivi e verificare che la voce Controlli ASP.NET non visivi sia selezionata.

  Nella finestra di progettazione vengono visualizzati simboli per paragrafi, interruzioni di riga e altri tag che non consentono di eseguire il rendering del testo. I simboli non vengono mostrati tutti contemporaneamente, ma facendo clic su un elemento visivo verrà visualizzato l'elemento non visivo che lo precede.

Aggiunta di controlli ed elementi

In visualizzazione Progettazione, è possibile trascinare i controlli dalla casella degli strumenti alla pagina. È possibile aggiungere alcuni elementi, ad esempio tabelle HTML, utilizzando una finestra di dialogo. In questa sezione, vengono aggiunti alcuni controlli e una tabella da utilizzare più avanti nella procedura dettagliata.

Per aggiungere controlli e una tabella

1. Posizionare il cursore a destra del testo Questa pagina è basata su ASP.NET, quindi preme INVIO.

2. Dal gruppo Standard nella casella degli strumenti, trascinare un controllo TextBox nella pagina e rilasciarlo nello spazio creato nel passaggio precedente.

   Nota

   È inoltre possibile aggiungere un controllo facendovi doppio-clic.

   

3. Trascinare un controllo Button nella pagina e rilasciarlo a destra del controllo TextBox aggiunto nel passaggio precedente.

   I controlli TextBox e Button sono controlli server Web ASP.NET, non elementi HTML.

   

4. Posizionare il cursore a destra del controllo Button e premere INVIO.

5. Dal menu Tabella, scegliere Inserisci tabella.

   Verrà visualizzata la finestra di dialogo Inserisci tabella.

   

6. Fare clic su OK.

   Nella finestra di dialogo Inserisci tabella sono fornite opzioni per la configurazione della tabella da creare. Tuttavia, per questa procedura dettagliata, è possibile utilizzare un layout di tabella predefinito.

   

Creazione di collegamenti ipertestuali

In visualizzazione Progettazione vengono forniti generatori e altri strumenti che consentono di creare elementi HTML che richiedono l'impostazione di proprietà.

Per creare un collegamento ipertestuale

1. Nel testo This page is powered by ASP.NET., evidenziare ASP.NET per selezionarlo.

2. Scegliere Converti in collegamento ipertestuale dal menu Formato.

   

   Verrà visualizzata la finestra di dialogo Collegamento ipertestuale.

3. Nella casella URL, digitare https://www.asp.net.

   

4. Fare clic su OK.

Impostazione delle proprietà nella finestra Proprietà

È possibile modificare l'aspetto e il comportamento degli elementi presenti nella pagina impostando i relativi valori nella finestra Proprietà.

Per impostare le proprietà tramite la finestra Proprietà

1. Selezionare il controllo Button aggiunto precedentemente in "Aggiunta di controlli ed elementi" in questa procedura dettagliata.

2. Nella finestra Proprietà impostare Text su Click Here e ForeColor su un colore diverso.

   

3. Posizionare il cursore sul collegamento ipertestuale ASP.NET creato nella sezione precedente.

   Notare che, nella finestra Proprietà, la proprietà hreef dell'elemento a è impostata sull'URL fornito per il collegamento ipertestuale.

Test della pagina

È possibile visualizzare i risultati della modifica apportata visualizzando la pagina nel browser.

Per avviare la pagina nel browser dall'esterno

• Fare clic con il pulsante destro del mouse sulla pagina, quindi scegliere Visualizza nel browser.

  Se viene chiesto di salvare le modifiche, scegliere Sì.

  In Visual Studio viene avviato IIS Express, un server Web locale che è possibile utilizzare per eseguire il test delle pagine utilizzando un server IIS completo.

  Nota

  È possibile eseguire le pagine in diversi modi.Se si preme CTRL+F5, Visual Studio consente di eseguire l'azione di avvio configurata nella pagina della proprietà per Opzioni di avvio.L'opzione di avvio predefinita per CTRL+F5 è l'esecuzione della pagina corrente, ovvero la pagina attualmente attiva nella visualizzazione Origine o Progettazione.È inoltre possibile eseguire le pagine nel debugger.Per ulteriori informazioni, vedere Procedura dettagliata: debug di pagine Web in Visual Web Developer.

Modifica della visualizzazione predefinita

Per impostazione predefinita, in Visual Studio le nuove pagine vengono aperte in visualizzazione Origine.

Per modificare la visualizzazione della pagina predefinita in visualizzazione Origine

1. Dal menu Strumenti, scegliere Opzioni.

2. Assicurarsi che l'opzione Mostra tutte le impostazioni sia selezionata la parte inferiore della finestra di dialogo.

3. Espandere il nodo Finestra di progettazione HTML e selezionare Generale. In Apri pagine in fare clic sulla visualizzazione Progettazione.

   

Utilizzo della visualizzazione Origine

La visualizzazione Origine consente di modificare direttamente il markup della pagina. L'editor della visualizzazione Origine fornisce molte funzionalità che consentono di creare controlli HTML e ASP.NET. È possibile utilizzare la casella degli strumenti in visualizzazione Origine nello stesso modo in cui viene utilizzata in visualizzazione Progettazione per aggiungere nuovi elementi alla pagina.

Per aggiungere elementi in visualizzazione Origine

1. Passare alla visualizzazione Origine facendo clic su Origine nella parte inferiore della finestra.

   I controlli aggiunti sono creati come elementi <asp:>. Ad esempio, il controllo Button rappresenta l'elemento <asp:button>. Le impostazioni delle proprietà effettuate vengono salvate come impostazioni di attributo nel tag <asp:button> di apertura.

2. Dal gruppo HTML della Casella degli strumenti (non dal gruppo Standard), trascinare un elemento Table nella pagina e posizionarlo appena sopra il tag </form>.

Inoltre, nell'editor viene fornito supporto quando il markup viene digitato manualmente. Ad esempio, nell'editor vengono fornite scelte sensibili al contesto che consentono di completare tag e attributi HTML mentre vengono digitati. Inoltre, nell'editor sono fornite informazioni di errore e di avviso relative al markup mediante sottolineatura ondulata del markup potenzialmente inaffidabile. Posizionando e mantenendo il mouse sopra al testo del markup, è possibile visualizzare le informazioni su errori o avvisi.

Per modificare HTML in visualizzazione origine

1. Posizionare il cursore sul tag di chiusura </form>, quindi digitare una parentesi angolare sinistra (<).

   Notare che nell'editor viene fornito un elenco di tag appropriati al contesto corrente.

   

2. Immettere una lettera "a" per creare un tag di ancoraggio, quindi preme la BARRA SPAZIATRICE.

   Nell'editor viene visualizzato un elenco di attributi appropriati per un tag di ancoraggio.

   Nota

   La lettera a (elemento ancoraggio) potrebbe non essere visualizzata come opzione, a seconda della destinazione di convalida impostata per il sito o la pagina.È tuttavia ancora possibile creare un elemento ancoraggio immettendo una lettera "a" senza selezionare un elemento dall'elenco a discesa.Le destinazioni di convalida vengono discusse successivamente in questo argomento.

   

3. Fare clic su href nell'elenco, quindi digitare un segno di uguale (=) e un carattere virgolette doppie (").

   L'editor fornisce un elenco delle pagine attualmente disponibili a cui collegarsi.

   

4. Nell'elenco di file, fare doppio clic su Default.aspx, premere la barra spaziatrice, quindi digitare una parentesi angolare destra (>) per chiudere il tag.

   Nell'editor viene inserito un tag </a> di chiusura.

5. Completare l'elemento ancoraggio immettendo il testo Home tra i tag di apertura e di chiusura.

   L'elemento è ora simile a quanto riportato nell'esempio riportato di seguito.

   <a href="Default.aspx">Home</a>
   

6. Posizionare il cursore appena sopra il tag </form> di chiusura, quindi digitare <invalid>.

   Nell'editor il tag viene sottolineato con una linea ondulata per indicare che il tag non è un tag HTML riconosciuto.

7. Rimuovere il tag creato nel passaggio precedente.

Esame della formattazione HTML

Un'importante funzionalità della finestra di progettazione della pagina è che mantiene la formattazione HTML applicata alla pagina. Tuttavia, è possibile specificare in modo esplicito che l'editor riformatterà il documento.

Per esaminare la formattazione HTML

1. Riformattare gli attributi per il controllo Button allineandoli in modo che la sintassi dichiarativa assuma l'aspetto riportato di seguito.

   <asp:Button
       id="Button1"
       runat="server"
       Font-Bold="True"
       ForeColor="Blue"
       Text="Click Here" />
   

   Notare che dopo il rientro del primo attributo, quando si preme INVIO nel tag, le righe successive sono rientrate per ottenere una corrispondenza.

2. Passare alla visualizzazione Progettazione.

3. Fare clic con il pulsante destro del mouse sul controllo Button, quindi scegliere Copia.

4. Posizionare il cursore sotto il controllo Button, fare clic con il pulsante destro del mouse, quindi fare clic su Incolla.

   In Visual Studio viene creato un pulsante con gli insiemi di proprietà ID impostata su Button2.

5. Dal gruppo Standard della Toolbox, trascinare un terzo controllo Button nella pagina, creando quindi un pulsante denominato Button3.

6. Passare alla visualizzazione Origine.

   Notare che Button2 è formattato esattamente nel modo in cui è stato formattato Button1. D'altra parte, Button3 viene formattato utilizzando la formattazione predefinita per i controlli Button.

   Nota

   Per ulteriori informazioni su come personalizzare la formattazione di elementi singoli, vedere Procedura dettagliata: modifica di codice HTML avanzata nelle pagine Web Form di Visual Studio.

7. Modificare il documento in modo che Button1 e Button2 siano sulla stessa riga senza uno spazio a dividerli, come illustrato nell'esempio riportato di seguito:

   <asp:Button ID="Button1" runat="server" Font-Bold="True" 
   ForeColor="Blue" Text="Click Here" /><asp:Button ID="Button2" 
   runat="server" Font-Bold="True" ForeColor="Blue" Text="Click Here"/>
   

   Gli elementi possono andare a capo, ma la parte iniziale di Button2 deve essere seguita immediatamente dalla parte finale di Button1 (ovvero il carattere />).

8. Passare alla visualizzazione Progettazione.

   Notare che Button1 e Button2 sono uno accanto all'altro senza uno spazio per dividerli.

9. Passare alla visualizzazione Origine

10. Nel sottomenu Avanzate del menu Modifica fare clic su Formatta documento.

    Il documento viene riformattato, ma Button1 e Button2 restano nella stessa riga. Se nell'editor vengono separati i pulsanti, è necessario introdurre uno spazio in fase di rendering. Pertanto, nell'editor non viene modificata la formattazione creata.

Utilizzo della Doppia visualizzazione

Utilizzando la Doppia visualizzazione è possibile visualizzare contemporaneamente sia la finestra di visualizzazione Progettazione che quella di visualizzazione Origine.

Per visualizzare una pagina in Doppia visualizzazione

• Passare alla Doppia visualizzazione facendo clic su Dividi nella parte inferiore sinistra della finestra. Si noti che la finestra di visualizzazione Origine occupa la metà superiore dello schermo e la finestra di visualizzazione Progettazione la metà inferiore. Si noti inoltre che le due visualizzazioni sono sincronizzate. Se si fa doppio clic su un elemento in una visualizzazione per selezionarlo, un elemento corrispondente nell'altra visualizzazione viene evidenziato.

Spostamento tra elementi

Dal momento che le pagine diventano più grandi e più complesse, è necessario trovare i tag in modo veloce e ridurre la confusione nella pagina. Per supportare queste attività quando si utilizza la visualizzazione Origine, in Visual Studio sono disponibili gli strumenti riportati di seguito.

• Struttura documento, in cui viene fornita una visualizzazione completa del documento.

• Struttura tag, in cui vengono fornite informazioni sul tag attualmente selezionato e sulla relativa posizione nella gerarchia della pagina.

Per iniziare, aggiungere più elementi alla pagina in modo da potere esaminare le funzionalità di navigazione.

Per aggiungere elementi

1. Passare alla visualizzazione Progettazione.

2. Dal gruppo HTML della Casella degli strumenti, trascinare un controllo Table in una cella della tabella creata in "Utilizzo della visualizzazione Origine", precedentemente in questa procedura dettagliata.

3. Dal gruppo Standard della Casella degli strumenti, trascinare un controllo Button nella cella centrale della tabella annidata.

Con più elementi annidati nella pagina, è possibile vedere come Struttura documento fornisca una navigazione rapida a qualsiasi tag nella pagina.

Per spostarsi utilizzando Struttura documento

1. Passare alla visualizzazione Origine.

2. Dal menu Visualizza, scegliere Struttura documento.

3. In Struttura documento, fare clic su Button4.

   Nell'editor viene selezionato il controllo <Button4> aggiunto nella precedente procedura.

   

Nel tag navigator sono fornite informazioni sul tag selezionato in modo corrente e sulla relativa posizione nella gerarchia della pagina.

Per spostarsi utilizzando Struttura tag

1. Posizionare il cursore all'interno dell'elemento Button.

   Nella parte inferiore della finestra, notare la Struttura tag in cui viene visualizzato il tag <asp:button> e i relativi tag padre. Nel tag navigator è incluso l'ID dell'elemento, se presente, per identificare l'elemento visualizzato. Inoltre, nel tag navigator è visualizzato il foglio di stile CSS assegnato, se presente, impostato con l'attributo Class.

   

2. Nel tag navigator, fare clic sul tag <table>, il più vicino al tag <asp:button#Button4>.

   Il tag navigator è spostato nell'elemento <table> interno che viene selezionato.

   

3. In Struttura tag, fare clic sul tag <td> a sinistra del tag <table> selezionato.

   VIene selezionata la cella intera in cui è contenuta la tabella annidata.

   Nota

   È possibile fare clic per selezionare il tag oppure il relativo contenuto utilizzando l'elenco a discesa nel tag navigator del tag.Per impostazione predefinita, facendo clic su un tag nel tag navigator si seleziona il tag e il relativo contenuto.

Inoltre, è possibile utilizzare il tag navigator per lo spostamento o la copia di elementi.

Per spostare o copiare elementi utilizzando struttura tag

1. Utilizzando la Struttura tag, selezionare il tag <tr> che contiene il controllo Button4.

2. Premere CTRL+C per copiare il tag.

3. Utilizzare il tag navigator per passare alla tabella esterna.

4. In visualizzazione Origine, posizionare il cursore tra il tag <table> e il primo tag <tr>.

5. Premere CTRL+V per incollare la riga copiata nella tabella.

6. Passare alla visualizzazione Progettazione.

   Notare che la nuova riga è stata aggiunta, incluso un controllo Button.

Formattazione del testo

• Nella barra degli strumenti Formattazione sono applicati stili inline per la maggior parte delle impostazioni. La formattazione in grassetto e in corsivo è applicata utilizzando i tag b e i. La formattazione dei paragrafi si applica a un blocco di tag, ad esempio p (per normale), pre (per formattato) e così via. L'allineamento dei paragrafi si applica utilizzando stili inline per essere conforme agli standard XHTML 1.1.

• Inoltre, la finestra di progettazione consente di creare un blocco style e un collegamento a un foglio di stile CSS. Per ulteriori informazioni, vedere Procedura dettagliata: creazione e modifica di un file CSS.

• Per impostazione predefinita, nell'editor viene creato un markup compatibile con lo standard XHTML5. L'editor converte tutti i nomi di tag HTML in lettere minuscole, anche se si digitano in lettere maiuscole. Nell'editor inoltre i valori degli attributi (proprietà) vengono inclusi tra virgolette doppie. Per ulteriori informazioni, vedere Procedura dettagliata: modifica di codice HTML avanzata nelle pagine Web Form di Visual Studio.

Per modificare la convalida di markup predefinita

1. In visualizzazione Origine, fare clic con il pulsante destro del mouse sulla pagina, quindi fare clic su Formattazione e convalida.

2. Nella finestra di dialogo Opzioni, espandere Editor di testo, espandere HTML, quindi fare clic su Convalida.

3. Nell'elenco Destinazione immettere un tipo di convalida.

Passaggi successivi

In questa procedura dettagliata sono stati forniti dei cenni generali sulle funzionalità HTML dell'editor di pagine Web. Ciò include la modalità di creazione di HTML in visualizzazione Progettazione e in visualizzazione Origine, la formattazione di base e la navigazione. Per ulteriori informazioni sulle funzionalità di modifica in Visual Studio, consultare le risorse seguenti.

• Per informazioni sulle ulteriori funzionalità dell'editor HTML, incluse le opzioni di formattazione personalizzata, la strutturazione e la convalida in HTML, vedere Procedura dettagliata: modifica di codice HTML avanzata nelle pagine Web Form di Visual Studio.

• Per informazioni sull'utilizzo degli stili dei fogli di stile CSS, vedere Procedura dettagliata: creazione e modifica di un file CSS.

Vedere anche

Attività

Procedura dettagliata: modifica di codice HTML avanzata nelle pagine Web Form di Visual Studio

Concetti

Visualizzazione Progettazione