Procedura dettagliata: modifica HTML di base in Visual Web Developer

Aggiornamento: novembre 2007

Nello strumento di sviluppo Web di Microsoft Visual Web Developer sono forniti maggiori strumenti di modifica HTML che consentono di utilizzare la modalità WYSIWYG per la visualizzazione di pagine Web e di utilizzare in modo diretto WYSIWYG con il markup HTML per un controllo più accurato. In questa procedura dettagliata sono illustrate le funzionalità di modifica HTML disponibili in Visual Web Developer.

Di seguito sono elencate alcune delle attività illustrate nella procedura dettagliata:

• Creazione e modifica di HTML in visualizzazione Progettazione

• Creazione e modifica di HTML in visualizzazione Origine.

• Utilizzo di Doppia visualizzazione.

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

Prerequisiti

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

• Conoscenza generale di Visual Web Developer.

Per un'introduzione alla creazione di pagine Web in Visual Web Developer, vedere Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer.

In questa procedura dettagliata, saranno utilizzati un sito Web e una singola pagina Web ASP.NET simile a quella creata in Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer. Se quella procedura dettagliata è stata completata, è possibile utilizzare quel sito e quella pagina Web.

Creazione del sito e della pagina Web

Se è già stato creato un sito Web in Visual Web Developer (ad esempio, completando Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer), è possibile utilizzare quel sito Web e passare alla sezione successiva. In caso contrario, creare un sito e una pagina Web nuovi attenendosi alla procedura riportata di seguito.

Per creare un sito Web di file system

1. Aprire Visual Web Developer.

2. Scegliere Nuovo sito Web dal menu File.

   Viene visualizzata la finestra di dialogo Nuovo sito Web.

3. In Modelli Visual Studio installati, fare clic su Sito Web ASP.NET.

4. Nella casella Percorso, immettere il nome della cartella in cui salvare le pagine del sito Web.

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

5. Nell'elenco Linguaggio scegliere il linguaggio di programmazione da utilizzare.

6. Scegliere OK.

   In Visual Web Developer vengono create la cartella e una nuova pagina denominata Default.aspx.

Utilizzo della visualizzazione Progettazione

In questa parte della procedura dettagliata, verrà descritto come utilizzare la visualizzazione Progettazione in cui è fornita una modalità analoga alla visualizzazione WYSIWYG della pagina. È 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 è visualizzata nello stesso modo in cui sarà visualizzata in un browser, con alcune differenze. La prima differenza consiste nella possibilità di modifica del testo e degli elementi in visualizzazione Progettazione. La seconda differenza riguarda il supporto nella modifica della pagine che, in visualizzazione Progettazione, consiste nella visualizzazione di alcuni elementi e controlli che non saranno visualizzati nel browser. Inoltre, nella visualizzazione Progettazione viene eseguito un rendering speciale di alcuni elementi, quali le tabelle HTML, che consente di aggiungere ulteriore spazio per l'editor. In generale, la visualizzazione Progettazione consente di visualizzare la pagina, ma non costituisce un'esatta rappresentazione del 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. Digitare ASP.NET Web Page. nella parte superiore della pagina

3. Evidenziare il testo da selezionare, quindi nella barra degli strumenti Applicazione stili fare clic su Intestazione 1.

4. Posizionare il puntatore di inserimento sotto 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. Fare clic per selezionare la casella 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. Scegliere OK.

Visualizzazione delle informazioni relative ai tag

Quando si utilizza la visualizzazione Progettazione, può risultare utile visualizzare i tag dell'area di progettazione, quali div e span e altri che non dispongono di un rendering visuale.

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

• Nel menu Visualizza puntare a Strumenti visivi, scegliere quindi Controlli ASP.NET non visivi..

  Nella finestra di progettazione vengono visualizzati simboli per paragrafi, interruzioni di riga e altri tag che non consentono di eseguire il rendering del testo.

Aggiunta di controlli ed elementi

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

Per aggiungere controlli e una tabella

1. Posizionare il puntatore di inserimento a destra del segno di paragrafo di chiusura per This page is powered by ASP.NET. e premere INVIO.

2. Dal gruppo Standard della Casella degli strumenti, trascinare un controllo TextBox nella pagina.

   Nota:
   È inoltre possibile aggiungere un controllo facendovi doppio-clic.

3. Trascinare un controllo Button nella pagina.

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

4. Dal menu Tabella, scegliere Inserisci tabella.

   Verrà visualizzata la finestra di dialogo Inserisci tabella.

5. Scegliere 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 sono forniti generatori e altri strumenti che consentono di creare elementi HTML che richiedono impostazioni 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. Scegliere OK.

Impostazione delle proprietà nella finestra Proprietà

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

Per impostare le proprietà tramite la finestra Proprietà

1. Fare clic sul controllo Button aggiunto in "Aggiunta di controlli ed elementi" in precedenza in questa procedura dettagliata.

2. In Proprietà, impostare Text su Fare clic qui, ForeColor su un colore diverso, e Grassetto su true.

3. Posizionare il punto di inserimento nel collegamento ipertestuale ASP.NET creato nella sezione precedente.

   Notare che, in Proprietà, la proprietà HRef per l'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 Web Developer viene avviato il server Web Visual Web Developer, un server Web locale che è possibile utilizzare per eseguire il test delle pagine senza l'utilizzo di IIS.

Modifica della visualizzazione predefinita

Per impostazione predefinita, in Visual Web Developer sono aperte nuove pagine in visualizzazione Origine.

Per modificare la visualizzazione della pagina predefinita in visualizzazione Origine

1. Dal menu Strumenti, scegliere Opzioni.

2. Nella finestra di dialogo Opzioni, fare clic su Generale, quindi sotto a Apri pagine in fare clic su Visualizzazione Progettazione.

Nota:

È possibile eseguire le pagine in diversi modi. Se si preme CTRL+F5, Visual Web Developer 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, che è la pagina attualmente attiva nella visualizzazione Origine oppure Progettazione. È inoltre possibile eseguire le pagine nel debugger. Per ulteriori informazioni, vedere la classe Procedura dettagliata: debug di pagine Web in Visual Web Developer.

Utilizzo della visualizzazione Origine

La visualizzazione Origine consente di modificare il markup della pagina in modo diretto. Nell'editor della visualizzazione Origine sono contenute molte funzionalità che consentono di creare i controlli HTML e ASP.NET. È possibile utilizzare la Casella degli strumenti in visualizzazione Origine nello stesso modo in cui è 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 sinistra della finestra.

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

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

Inoltre, nell'editor viene fornito supporto quando il markup viene digitato manualmente. Ad esempio, nell'editor sono fornite scelte sensibili al contesto che completano tag e attributi HTML quando si digita. Inoltre, nell'editor sono fornite informazioni di errore e di avviso relative al markup mediante sottolineatura ondulata del markup potenzialmente inaffidabile. Le informazioni di errore o di avviso sono rese disponibili posizionando il mouse sul testo del markup.

Per modificare HTML in visualizzazione origine

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

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

2. Evidenziare a per selezionarlo, quindi premere BARRA SPAZIATRICE.

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

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

   Nell'editor è fornito un elenco di pagine disponibili in modo corrente per collegarsi e un'opzione per aprire la finestra di dialogo Homepicker.

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

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

5. Completare l'elemento di ancoraggio in odo che sia collegato alla pagina Default.aspx utilizzando il testo di collegamento Home e letto nel modo seguente:

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

6. Posizionare il punto di inserimento nel tag a.

   Notare che in Proprietà sono visualizzati gli attributi per il tag.

7. In Proprietà, per la proprietà HRef, fare clic sul pulsante con i puntini di sospensione (…).

   Verrà visualizzata la finestra di dialogo Seleziona elemento del progetto.

   È ora possibile selezionare una pagina nel sito Web corrente come pagina di destinazione. Se nel sito Web non sono presenti altre pagine da cui scegliere, chiudere la finestra di dialogo Seleziona elemento del progetto e digitare un URL a scelta nella casella Href della finestra Proprietà.

8. Posizionare il punto di inserimento 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.

9. Rimuovere il tag creato nel passaggio precedente.

Esame della formattazione HTML

Un'importante caratteristica della finestra di progettazione della pagina consiste nella preservazione della formattazione HTML applicata alla pagina, a meno che non sia specificata in modo esplicito la riformattazione del documento da parte dell'editor.

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"        Font-Bold="True"    ForeColor="Blue"    Text="Click Here" />
   

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

2. Passare alla visualizzazione Progettazione.

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

4. Posizionare il punto di inserimento sotto il nuovo controllo Button, fare clic con il pulsante destro del mouse, quindi scegliere Incolla.

   Viene creato un pulsante con ID di Button2.

5. Dal gruppo Standard della Casella degli strumenti, trascinare nella pagina un terzo controllo Button, che consente di creare <Button3>.

6. Passare alla visualizzazioneOrigine.

   Notare che <Button2> è formattato esattamente nel modo in cui è stato formattato <Button1>. D'altra parte, <Button3> è formattato utilizzando la formattazione predefinita per gli elementi asp:button .

   Nota:
   Per ulteriori informazioni su come personalizzare la formattazione di elementi singoli, vedere Procedura dettagliata: modifica di codice HTML avanzata in Visual Web Developer.

7. Modificare il documento in modo che <Button1> e <Button2> non siano nella stessa riga senza un spazio per dividerli:

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

   Gli elementi possono andare a capo, ma la parte finale di <Button1> (che è />) deve essere subito seguita dalla parte iniziale di <Button2> (che è <asp:Button ID=).

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. Scegliere Formatta documento dal menu Modifica.

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

Utilizzo della Doppia visualizzazione

Utilizzando 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.

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 Web Developer sono forniti gli strumenti riportati di seguito.

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

• Tag navigator, in cui sono fornite informazioni sul tag selezionato in modo corrente e sulla relativa posizione nella gerarchia della pagina.

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

Per aggiungere elementi

1. Passare alla visualizzazione Progettazione.

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

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

Con più elementi nidificati nella pagina, è possibile visualizzare in Struttura documento lo spostamento veloce in qualsiasi tag nella pagina.

Per spostarsi mediante 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 mediante tag navigator

1. Posizionare il punto di inserimento nel tag <asp:button>.

   Notare il tag navigator nella parte inferiore della finestra in cui è 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. Nel tag navigator, fare clic sul tag <td> a sinistra dell'elemento <table> selezionato.

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

   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 tag navigator

1. Utilizzando il tag navigator, selezionare il tag <tr> in cui è contenuto <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 puntatore di inserimento 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 la classe Procedura dettagliata: creazione e modifica di un file CSS.

• Per impostazione predefinita, nell'editor viene creato un markup compatibile con lo standard XHTML 1.1 e tutti i nomi di tag HTML sono convertiti in lettere minuscole, anche se digitati in lettere maiuscole. Inoltre, nell'editor sono inclusi valori (proprietà) di attributo tra virgolette. Per ulteriori informazioni, vedere Procedura dettagliata: modifica di codice HTML avanzata in Visual Web Developer.

Per modificare la convalida di markup predefinita

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

2. Nella finestra di dialogo Opzioni, espandere l'Editor di testo HTML, quindi scegliere 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. È inclusa la modalità di creazione di HTML in visualizzazione Progettazione e in visualizzazione Origine, la formattazione di base e lo spostamento. È possibile accedere ad ulteriori informazioni sulle funzionalità di modifica di Visual Web Developer. Ad esempio, è possibile eseguire le operazioni riportate di seguito:

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

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

Vedere anche

Attività

Procedura dettagliata: modifica di codice HTML avanzata in Visual Web Developer

Concetti

Visualizzazione Progettazione

Riferimenti

Visualizzazione Origine